/* style.css — Workwarrior Browser UI styles */

/* ── Color tokens ─────────────────────────────────────────────────────────── */
:root {
  --bg: #0d1117;
  --surface: #161b22;
  --border: #21262d;
  --text: #e6edf3;
  --muted: #7d8590;
  --accent: #58a6ff;
  --success: #3fb950;
  --warning: #d29922;
  --error: #d4605a;
  --term-green: #39d353;
  --sidebar-w: 240px;
  --sidebar-collapsed-w: 42px;
  /* Function colors */
  --clr-tasks: #3fb950;
  --clr-time: #79c0ff;
  --clr-journal: #d2883e;
  --clr-ledger: #e6edf3;
  --clr-warrior: #f85149;
  --row-gap: 8px;
  --font-size: 13px;
  --term-h: 80px;
}

/* ── Reset + base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--bg); color: var(--text); font-family: ui-monospace, Menlo, Consolas, "Liberation Mono", monospace; font-size: 13px; line-height: 1.5; }

/* ── App layout ───────────────────────────────────────────────────────────── */
#app { display: flex; height: calc(100vh - var(--term-h)); }

/* ── Focus power bar ─────────────────────────────────────────────────────── */
.focus-bar { position: fixed; top: 0; left: 0; right: 0; height: 30px; background: var(--bg); border-bottom: 1px solid var(--border); display: flex; align-items: center; z-index: 120; padding: 0; }
.focus-bar.hidden { display: none; }
.focus-bar-left { display: flex; align-items: center; gap: 0; padding: 0 10px; border-right: 1px solid var(--border); height: 100%; position: relative; flex-shrink: 0; }
.focus-bar-center { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; overflow: hidden; }
.focus-bar-right { display: flex; align-items: center; gap: 6px; padding: 0 10px; border-left: 1px solid var(--border); height: 100%; flex-shrink: 0; }
.focus-bar-label { font-size: 10px; color: var(--accent); font-weight: bold; letter-spacing: .06em; margin-right: 8px; }
.focus-profile-btn { background: none; border: 1px solid var(--border); color: var(--text); font-size: 11px; font-family: inherit; padding: 1px 8px; border-radius: 3px; cursor: pointer; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.focus-profile-btn:hover { border-color: var(--accent); color: var(--accent); }
.focus-profile-list { position: fixed; top: 32px; left: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; list-style: none; min-width: 180px; z-index: 400; box-shadow: 0 4px 16px rgba(0,0,0,.5); }
.focus-profile-list.hidden { display: none; }
.focus-profile-list li { padding: 6px 14px; font-size: 11px; color: var(--muted); cursor: pointer; }
.focus-profile-list li:hover { color: var(--text); background: rgba(255,255,255,.05); }
.focus-profile-list li.active { color: var(--accent); }
.focus-bar-section { font-size: 10px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; margin-right: 2px; }
.focus-bar-resource-sel { background: none; border: none; border-bottom: 1px solid var(--border); color: var(--text); font-size: 10px; font-family: inherit; padding: 0 14px 0 2px; margin-right: 6px; cursor: pointer; outline: none; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23888'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 2px center; }
.focus-bar-resource-sel:hover { border-bottom-color: var(--accent); color: var(--accent); }
.focus-bar-action { background: none; border: 1px solid var(--border); color: var(--muted); font-size: 10px; font-family: inherit; padding: 1px 7px; border-radius: 3px; cursor: pointer; white-space: nowrap; }
.focus-bar-action:hover { color: var(--text); border-color: var(--muted); }
.focus-bar-btn { background: none; border: none; color: var(--muted); font-size: 12px; font-family: inherit; cursor: pointer; padding: 2px 4px; border-radius: 3px; }
.focus-bar-btn:hover { color: var(--text); }
.focus-track-badge { font-size: 10px; color: var(--success); white-space: nowrap; }

/* ── Terminal focus mode — content area hidden, terminal only ─────────────── */
body.term-focus-mode #app { display: none; }
body.term-focus-mode #cmd-output { max-height: calc(100vh - var(--term-h) - 32px); border-bottom: none; }
body.term-focus-mode .ctx-sidebar { bottom: var(--term-h); top: 30px; max-height: none; width: 300px; border-top: none; box-shadow: none; border-left: 1px solid var(--border); }

/* ── Sidebar ──────────────────────────────────────────────────────────────── */
.sidebar { width: var(--sidebar-w); min-width: var(--sidebar-w); background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; transition: width 150ms ease, min-width 150ms ease; overflow: hidden; position: relative; }
.sidebar.collapsed { width: var(--sidebar-collapsed-w); min-width: var(--sidebar-collapsed-w); }
.sidebar.collapsed .sidebar-header { padding: 10px 6px 6px; display: flex; justify-content: center; }
.sidebar.collapsed .warrior-stats { justify-content: center; padding: 6px 0; }
.sidebar.collapsed .community-footer-btn { justify-content: center; padding: 6px 0; }
.sidebar.collapsed .wordmark-full,
.sidebar.collapsed .weapons-bar,
.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav-group-label,
.sidebar.collapsed .density-label,
.sidebar.collapsed .density-stops,
.sidebar.collapsed .warrior-label,
.sidebar.collapsed .warrior-count,
.sidebar.collapsed .community-footer-label,
.sidebar.collapsed .cmd-ctrl-row .cmd-ctrl-label { display: none; }
.sidebar.collapsed .nav-item { padding: 6px 0; justify-content: center; border-left: none; }
.sidebar.collapsed .nav-icon { margin: 0; }
.sidebar.collapsed .profile-pill { display: none; }
.sidebar.collapsed .profile-row { flex-wrap: wrap; justify-content: center; gap: 4px; }
.sidebar.collapsed .profile-info-btn { display: flex; width: 100%; justify-content: center; border: none; }
.sidebar.collapsed .cmd-ctrl-row { flex-direction: column; gap: 2px; padding: 4px 4px; }
.sidebar.collapsed .cmd-ctrl-btn { font-size: 9px; padding: 3px 0; }
.sidebar-header { padding: 10px 12px; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--border); white-space: nowrap; height: 38px; box-sizing: border-box; }
.wordmark-ww { color: var(--accent); font-size: 15px; font-weight: bold; cursor: pointer; user-select: none; }
.wordmark-ww:hover { opacity: 0.8; }
.wordmark-full { color: rgba(230,237,243,0.7); font-size: 11px; margin-left: 6px; }

/* ── Profile row ──────────────────────────────────────────────────────────── */
.profile-row { display: flex; align-items: center; gap: 6px; padding: 6px 12px; position: relative; }
.profile-info-btn { background: var(--bg); border: 1px solid var(--border); color: var(--accent); font-family: inherit; font-size: 11px; font-weight: bold; width: 26px; height: 26px; border-radius: 3px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.profile-info-btn:hover { border-color: var(--accent); background: rgba(88,166,255,0.1); }

/* ── Profile pill ─────────────────────────────────────────────────────────── */
.profile-pill { flex: 1; margin: 0; padding: 5px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; cursor: pointer; color: var(--text); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-pill:hover { border-color: var(--accent); color: var(--accent); }

/* ── CMD / CTRL row ───────────────────────────────────────────────────────── */
.cmd-ctrl-row { display: flex; gap: 4px; padding: 6px 12px; }
.cmd-ctrl-btn { flex: 1; background: var(--bg); border: 1px solid var(--border); color: var(--muted); font-family: inherit; font-size: 11px; font-weight: bold; padding: 7px 0; border-radius: 3px; cursor: pointer; text-align: center; letter-spacing: .05em; }
.cmd-ctrl-btn:hover { border-color: var(--accent); color: var(--accent); }
.cmd-ctrl-btn.active { border-color: var(--accent); color: var(--accent); background: rgba(88,166,255,0.1); }

/* ── Profile switcher ─────────────────────────────────────────────────────── */
.profile-switcher { list-style: none; margin: 0; padding: 0; position: absolute; top: calc(100% + 2px); left: 0; right: 0; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; z-index: 200; box-shadow: 0 4px 12px rgba(0,0,0,0.4); }
.profile-switcher li { padding: 5px 8px; cursor: pointer; font-size: 12px; color: var(--muted); }
.profile-switcher li:hover { background: var(--surface); color: var(--text); }
.profile-switcher li.active-profile { color: var(--accent); }

/* ── Nav ──────────────────────────────────────────────────────────────────── */
.sidebar-nav { flex: 1; padding: 4px 0; overflow-y: auto; min-height: 0; }
.nav-group-label { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; padding: 6px 12px 2px; }
.nav-item { display: flex; align-items: center; width: 100%; padding: 5px 12px; background: none; border: none; border-left: 2px solid transparent; color: var(--muted); font-family: inherit; font-size: 12px; text-align: left; cursor: pointer; white-space: nowrap; gap: 6px; }
.nav-item:hover { color: var(--text); background: var(--bg); }
.nav-item.active { color: var(--accent); border-left-color: var(--accent); }
.nav-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 3px; font-size: 12px; font-weight: bold; flex-shrink: 0; }
.icon-tasks { background: var(--clr-tasks); color: #000; }
.icon-time { background: var(--clr-time); color: #000; }
.icon-journal { background: var(--clr-journal); color: #fff; }
.icon-ledger { background: var(--clr-ledger); color: #000; }
.nav-label { }

/* Completion indicators */
.completion-0 { color: var(--muted); }
.completion-25::before { content: '◔'; }
.completion-50::before { content: '◑'; }
.completion-75::before { content: '◕'; }
.completion-100::before { content: '●'; }

.nav-divider { height: 1px; background: var(--border); margin: 6px 8px; }

/* ── Sidebar footer (warrior + density + toggle) ──────────────────────────── */
.sidebar-footer { flex-shrink: 0; border-top: 1px solid var(--border); }
.warrior-stats { display: flex; align-items: center; gap: 6px; padding: 6px 14px; cursor: pointer; }
.warrior-stats:hover { background: var(--bg); }
.warrior-icon { color: var(--clr-warrior); font-size: 14px; font-weight: bold; width: 18px; text-align: center; }
.warrior-label { color: var(--muted); font-size: 11px; }
.warrior-count { color: var(--muted); font-size: 10px; margin-left: auto; }
.density-control { display: flex; align-items: center; gap: 8px; padding: 4px 12px; flex-shrink: 0; }
.density-label { font-size: 11px; color: var(--muted); }
.density-stops { display: flex; gap: 4px; }
.density-btn { background: none; border: 1px solid var(--border); color: var(--muted); font-size: 14px; width: 22px; height: 22px; border-radius: 3px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.density-btn:hover { border-color: var(--accent); color: var(--accent); }
.density-btn.active { border-color: var(--accent); color: var(--accent); background: rgba(88,166,255,0.1); }

/* ── Collapse toggle ──────────────────────────────────────────────────────── */
.sidebar-toggle { display: block; width: 100%; padding: 6px 12px; background: none; border: none; border-top: 1px solid var(--border); color: var(--muted); font-family: inherit; font-size: 14px; text-align: center; cursor: pointer; flex-shrink: 0; }
.sidebar-toggle:hover { color: var(--text); }
.sidebar.collapsed .sidebar-toggle { transform: rotate(180deg); }
.sidebar-peek { display: none; position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 200; background: var(--surface); border: 1px solid var(--border); border-left: none; color: var(--muted); font-family: inherit; font-size: 14px; padding: 10px 5px; cursor: pointer; border-radius: 0 4px 4px 0; }
.sidebar-peek:hover { color: var(--text); }

/* ── Main content ─────────────────────────────────────────────────────────── */
#main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
/* Two-row content header */
#content-header { border-bottom: 1px solid var(--border); background: var(--surface); height: 38px; box-sizing: border-box; display: flex; align-items: center; }
.header-row1 { display: flex; align-items: center; padding: 0 16px; width: 100%; }
.header-title-group { display: flex; align-items: center; gap: 4px; margin-right: auto; }
.header-stats { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); }
.stat-item { white-space: nowrap; }
.stat-profile { color: var(--text); cursor: pointer; }
.stat-active { color: var(--success) !important; }
.stat-profile:hover { color: var(--accent); }
.header-theme-select { background: var(--surface); border: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 11px; padding: 2px 5px; border-radius: 3px; cursor: pointer; transition: border-color 0.15s; }
.header-theme-select:hover { border-color: var(--text); }
.header-theme-select option { background: var(--surface); color: var(--text); }
/* Sidebar fullscreen: hide the sidebar entirely, content fills the window */
body.sidebar-hidden #sidebar { display: none; }
body.sidebar-hidden .sidebar-peek { display: none; }
#btn-sidebar-fullscreen.active { color: var(--accent); }
#section-title { font-size: 13px; color: var(--text); }
.fn-info-header-btn { background: none; border: 1px solid rgba(125,133,144,0.3); border-radius: 50%; color: rgba(230,237,243,0.7); font-size: 12px; cursor: pointer; padding: 0; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; transition: color 0.15s, border-color 0.15s; }
.fn-info-header-btn:hover { color: var(--accent); border-color: rgba(88,166,255,0.4); }
.conn-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--error); display: inline-block; }
.conn-dot.connected { background: var(--success); }

/* ── Content area ─────────────────────────────────────────────────────────── */
#content-area { flex: 1; overflow-y: auto; padding: 16px; position: relative; }
.section.hidden { display: none; }
.section { position: relative; }
.skeleton-msg { color: var(--muted); font-size: 12px; margin-bottom: 12px; }
.skeleton-row { height: 18px; background: var(--surface); border-radius: 3px; margin-bottom: 8px; animation: shimmer 1.5s infinite; }
.skeleton-row:nth-child(2) { width: 85%; }
.skeleton-row:nth-child(3) { width: 70%; }
.skeleton-row:nth-child(4) { width: 90%; }
@keyframes shimmer { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.7; } }

/* ── Terminal bar ─────────────────────────────────────────────────────────── */
#terminal-bar { position: fixed; bottom: 0; left: 0; right: 0; background: var(--surface); border-top: 1px solid var(--border); padding: 0; z-index: 100; }
#cmd-output { max-height: 40vh; overflow-y: auto; padding: 8px 12px; background: var(--bg); border-bottom: 1px solid var(--border); font-size: 12px; white-space: pre-wrap; color: var(--text); }
#cmd-output.error { color: var(--error); }
#cmd-output.hidden { display: none; }
#hints-bar { padding: 2px 8px; font-size: 11px; color: var(--muted); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 6px; }
.hints-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.hints-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 4px; }
.hints-power { display: flex; align-items: center; gap: 2px; flex-shrink: 0; margin-left: auto; }
.hints-btn { background: none; border: none; color: var(--muted); font-size: 10px; font-family: inherit; padding: 1px 5px; cursor: pointer; border-radius: 3px; line-height: 1.4; }
.hints-btn:hover { color: var(--text); background: var(--border); }
.hints-btn.active { color: var(--accent); }
.hints-action-btn { background: none; border: 1px solid var(--border); color: var(--muted); font-size: 10px; font-family: inherit; padding: 1px 6px; cursor: pointer; border-radius: 3px; line-height: 1.4; white-space: nowrap; }
.hints-action-btn:hover { color: var(--text); border-color: var(--muted); }
.hints-sep { color: var(--border); font-size: 10px; user-select: none; padding: 0 1px; }
#terminal-input-row { display: flex; align-items: center; padding: 6px 12px; gap: 4px; }
.prompt-exec { color: var(--term-green); font-size: 14px; user-select: none; }
.prompt-filter { color: var(--accent); font-size: 14px; user-select: none; }
.prompt-context { color: var(--muted); font-size: 13px; user-select: none; }
#term-input { flex: 1; background: none; border: none; outline: none; color: var(--text); font-family: inherit; font-size: 13px; caret-color: var(--term-green); }

/* ── Utility ──────────────────────────────────────────────────────────────── */
.hidden { display: none; }

/* ── Section toolbar ──────────────────────────────────────────────────────── */
.section-toolbar { display:flex; align-items:center; margin-bottom:12px; gap:6px; flex-wrap:nowrap; }
.inline-filter { background:var(--bg); border:1px solid var(--border); color:var(--text); font-family:inherit; font-size:12px; padding:3px 8px; border-radius:3px; flex:1; min-width:80px; }
.inline-filter:focus { outline:none; border-color:var(--accent); }
.btn-add { background:none; border:1px solid var(--border); color:var(--muted); font-family:inherit; font-size:12px; padding:3px 10px; border-radius:3px; cursor:pointer; }
.btn-add:hover { border-color:var(--accent); color:var(--accent); }

/* ── Inline add forms (always visible) ───────────────────────────────────── */
.add-form-inline { display: flex; gap: 6px; align-items: center; margin-bottom: 10px; padding: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; flex-wrap: wrap; }
.add-form-inline input, .add-form-inline select, .add-form-inline textarea { background: var(--surface); border: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 12px; padding: 4px 8px; border-radius: 3px; height: 28px; box-sizing: border-box; }
.add-form-inline input:focus, .add-form-inline select:focus, .add-form-inline textarea:focus { outline: none; border-color: var(--accent); }
.add-form-inline input[name="description"] { flex: 1; min-width: 180px; }
.add-form-inline textarea { flex: 1; min-width: 200px; resize: vertical; height: auto; }
.add-form-inline select { height: 28px; }

/* ── New task overlay ─────────────────────────────────────────────────────── */
.task-add-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); z-index: 500; display: flex; align-items: center; justify-content: center; }
.task-add-overlay.hidden { display: none; }
.task-add-modal { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 18px 22px 14px; width: clamp(320px, 60vw, 700px); max-height: 88vh; overflow-y: auto; box-shadow: 0 8px 40px rgba(0,0,0,.7); display: flex; flex-direction: column; gap: 0; }
.task-add-modal-title { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 10px; }
.task-add-meta-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); gap: 12px; }
.task-add-meta-created { font-size: 11px; color: var(--muted); white-space: nowrap; }
.task-status-pills { display: flex; gap: 4px; }
.task-status-pill { font-family: inherit; font-size: 11px; padding: 2px 10px; border-radius: 3px; border: 1px solid var(--border); background: none; color: var(--muted); cursor: pointer; transition: border-color .15s, color .15s; }
.task-status-pill:hover { border-color: var(--muted); color: var(--text); }
.task-status-pill.selected { border-color: var(--accent); color: var(--accent); background: rgba(88,166,255,.08); }
.task-add-grid { display: grid; grid-template-columns: 80px 1fr; gap: 4px 8px; margin-bottom: 10px; align-items: center; }
.task-add-grid label { font-size: 11px; color: var(--muted); text-align: right; }
.task-add-grid input, .task-add-grid select { background: var(--bg); border: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 12px; padding: 3px 6px; border-radius: 3px; height: 26px; box-sizing: border-box; width: 100%; }
.task-add-grid input[type="date"] { padding-right: 4px; }
.task-add-grid input:focus, .task-add-grid select:focus { outline: none; border-color: var(--accent); }
.task-add-side-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.task-add-side-col { display: flex; flex-direction: column; gap: 4px; }
.task-add-side-label { font-size: 11px; color: var(--muted); }
.task-add-side-inputs { display: flex; gap: 4px; }
.task-add-side-inputs input { flex: 1; background: var(--bg); border: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 12px; padding: 3px 6px; border-radius: 3px; height: 26px; box-sizing: border-box; }
.task-add-side-inputs input:focus { outline: none; border-color: var(--accent); }
.task-add-footer { display: flex; gap: 6px; justify-content: flex-end; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.task-add-footer button { font-family: inherit; font-size: 11px; padding: 3px 14px; border-radius: 3px; cursor: pointer; height: 26px; box-sizing: border-box; }
.task-add-submit { background: var(--accent); border: 1px solid var(--accent); color: #000; }
.task-add-submit:hover { opacity: .85; }
.task-add-cancel { background: none; border: 1px solid var(--border); color: var(--muted); }
.task-add-cancel:hover { border-color: var(--muted); color: var(--text); }
.task-add-modal.expanded { width: clamp(320px, 80vw, 960px); max-height: 94vh; }
.task-add-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.task-add-profile-sel { background: none; border: 1px solid var(--border); color: var(--muted); font-family: inherit; font-size: 11px; padding: 2px 6px; border-radius: 3px; cursor: pointer; }
.task-add-profile-sel:hover { border-color: var(--accent); color: var(--accent); }
.tan-textarea { background: var(--bg); border: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 12px; padding: 4px 6px; border-radius: 3px; resize: vertical; width: 100%; box-sizing: border-box; line-height: 1.4; }
.tan-textarea:focus { outline: none; border-color: var(--accent); }
.task-add-dep-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.task-add-dep-row input { flex: 1; background: var(--bg); border: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 12px; padding: 3px 6px; border-radius: 3px; height: 26px; box-sizing: border-box; }
.task-add-dep-row input:focus { outline: none; border-color: var(--accent); }
.task-add-dep-btn { font-family: inherit; font-size: 11px; padding: 2px 8px; border-radius: 3px; border: 1px solid var(--border); background: none; color: var(--muted); cursor: pointer; white-space: nowrap; height: 22px; }
.task-add-dep-btn:hover { border-color: var(--accent); color: var(--accent); }
.task-add-dep-preview { font-size: 11px; color: var(--accent); margin-bottom: 4px; min-height: 14px; }
.task-add-uda-row { display: flex; gap: 6px; align-items: center; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--border); }
.task-add-uda-row input { background: var(--bg); border: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 12px; padding: 3px 6px; border-radius: 3px; height: 26px; box-sizing: border-box; }
.task-add-uda-row input:focus { outline: none; border-color: var(--accent); }
.task-add-uda-name { width: 120px; flex-shrink: 0; }
.task-add-uda-val { flex: 1; }
.task-add-uda-btn { font-family: inherit; font-size: 11px; padding: 2px 10px; border-radius: 3px; border: 1px solid var(--border); background: none; color: var(--muted); cursor: pointer; height: 26px; white-space: nowrap; }
.task-add-uda-btn:hover { border-color: var(--accent); color: var(--accent); }
.task-add-below { margin-top: 16px; width: clamp(320px, 60vw, 700px); max-height: 200px; overflow-y: auto; }
.task-add-modal.expanded ~ .task-add-below { width: clamp(320px, 80vw, 960px); }
.task-add-below-item { font-size: 11px; padding: 4px 8px; border-left: 2px solid var(--border); margin-bottom: 4px; color: var(--text); transition: opacity .2s; }
.task-add-below-item.ann { border-color: var(--accent); }
.task-add-below-item.uda { border-color: var(--muted); }
.task-add-below-item:nth-child(n+3) { opacity: 0.35; }
.task-add-below.show-all .task-add-below-item { opacity: 1; }
.task-add-below-hint { font-size: 10px; color: var(--muted); margin-bottom: 6px; }

/* Inline form buttons */
.btn-inline-submit, .btn-inline-alt { font-family: inherit; font-size: 12px; padding: 4px 10px; border-radius: 3px; cursor: pointer; white-space: nowrap; height: 28px; box-sizing: border-box; display: inline-flex; align-items: center; }
.btn-inline-submit { background: var(--accent); border: 1px solid var(--accent); color: #000; }
.btn-inline-submit:hover { opacity: 0.85; }
.btn-inline-alt { background: none; border: 1px solid var(--border); color: var(--muted); }
.btn-inline-alt:hover { border-color: var(--accent); color: var(--accent); }

/* ── Add forms (legacy hidden/show style, kept for compat) ────────────────── */
.add-form { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; padding:10px; background:var(--bg); border:1px solid var(--border); border-radius:4px; }
.add-form input, .add-form select, .add-form textarea { background:var(--surface); border:1px solid var(--border); color:var(--text); font-family:inherit; font-size:12px; padding:4px 8px; border-radius:3px; }
.add-form input:focus, .add-form select:focus, .add-form textarea:focus { outline:none; border-color:var(--accent); }
.add-form input[name="description"], .add-form textarea { flex:1; min-width:200px; }
.add-form textarea { width:100%; resize:vertical; }
.add-form button[type="submit"] { background:var(--accent); border:1px solid var(--accent); color:#000; font-family:inherit; font-size:12px; padding:4px 12px; border-radius:3px; cursor:pointer; height:28px; box-sizing:border-box; display:inline-flex; align-items:center; }
.add-form .btn-cancel { background:none; border:1px solid var(--border); color:var(--muted); font-family:inherit; font-size:12px; padding:4px 10px; border-radius:3px; cursor:pointer; height:28px; box-sizing:border-box; display:inline-flex; align-items:center; }

/* ── Task rows ────────────────────────────────────────────────────────────── */
.task-row { display:flex; align-items:center; gap:0; padding:8px 0; border-bottom:1px solid var(--border); font-size: var(--font-size); cursor: pointer; position: relative; transition: background 0.1s; }
.task-row:hover { background:rgba(255,255,255,0.03); }
.task-urgency-bar { width: 3px; align-self: stretch; border-radius: 2px; flex-shrink: 0; margin-right: 8px; }
.urgency-bar-high { background: var(--error); }
.urgency-bar-med { background: var(--warning); }
.urgency-bar-low { background: var(--accent); opacity: 0.4; }
.task-active { background:rgba(63,185,80,0.04); }
.task-active .task-urgency-bar { background: var(--success) !important; }
.task-checkbox { width: 14px; height: 14px; flex-shrink: 0; margin-right: 8px; cursor: pointer; accent-color: var(--accent); }
.task-row-left { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-right: 8px; }
.task-row-left .task-desc { word-break: break-word; }
.task-row-mid { flex-shrink: 0; display: flex; align-items: center; gap: 6px; min-width: 100px; justify-content: flex-end; margin-right: 8px; }
.task-row-triggers { flex-shrink: 0; display: flex; align-items: center; gap: 2px; opacity: 0; transition: opacity 0.12s; margin-right: 6px; }
.task-row:hover .task-row-triggers { opacity: 1; }
.task-row-triggers .task-action-btn { font-size: 10px; padding: 2px 6px; white-space: nowrap; }
.task-row-right { flex-shrink: 0; display: flex; align-items: center; gap: 4px; }
.task-actions { margin-left:auto; display:flex; gap:4px; flex-shrink: 0; }
.task-actions-full .task-action-word { border: 1px solid var(--border); padding: 2px 8px; border-radius: 3px; font-size: 11px; white-space: nowrap; }
.task-actions-full .task-action-word:hover { border-color: var(--accent); color: var(--accent); }
.task-actions-full .task-action-icon { font-size: 12px; padding: 2px 6px; }
.task-actions-compact .task-action-btn { font-size: 12px; padding: 2px 5px; }
.task-actions.hidden { display: none; }
/* Compact mode */
.task-list-compact .task-row { padding: 4px 6px 4px 0; gap: 6px; font-size: 12px; }
.task-list-compact .task-project-badge { font-size: 9px; padding: 0 4px; }
.task-list-compact .task-tag { font-size: 9px; }
.task-list-compact .task-urgency-badge { font-size: 9px; }
.task-list-compact .task-checkbox { width: 12px; height: 12px; }

/* Inline trigger buttons — visible on hover */
.task-inline-trigger { opacity: 0; transition: opacity 0.12s; }
.task-row:hover .task-inline-trigger { opacity: 1; }

/* Inline drop panel below task row */
.task-inline-drop { display: none; padding: 0; }
.task-inline-drop.open { display: block; padding: 6px 12px 8px 20px; background: var(--bg); border-bottom: 1px solid var(--border); animation: dropSlide 0.12s ease-out; }
@keyframes dropSlide { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.task-inline-drop-row { display: flex; align-items: center; gap: 6px; }
.task-inline-drop-input { flex: 1; background: transparent; border: none; border-bottom: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 12px; padding: 4px 2px; outline: none; }
.task-inline-drop-input:focus { border-bottom-color: var(--accent); }
.task-inline-drop-select { background: var(--surface); border: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 11px; padding: 2px 6px; border-radius: 3px; }
.task-inline-drop-btn { background: none; border: 1px solid var(--border); color: var(--muted); font-family: inherit; font-size: 10px; padding: 2px 8px; border-radius: 3px; cursor: pointer; white-space: nowrap; }
.task-inline-drop-btn:hover { border-color: var(--accent); color: var(--accent); }
.task-inline-drop-list { max-height: 150px; overflow-y: auto; margin-top: 4px; border: 1px solid var(--border); border-radius: 3px; background: var(--surface); }
.task-inline-drop-list-item { display: flex; align-items: center; gap: 6px; padding: 4px 8px; font-size: 11px; cursor: pointer; border-bottom: 1px solid var(--border); }
.task-inline-drop-list-item:last-child { border-bottom: none; }
.task-inline-drop-list-item:hover { background: var(--bg); }
.task-inline-drop-list-item .task-desc { flex: 1; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-active .task-actions { display:flex; }
.act-btn { background:none; border:1px solid var(--border); color:var(--muted); font-size:11px; padding:2px 8px; border-radius:3px; cursor:pointer; font-family:inherit; display:inline-flex; align-items:center; gap:3px; }
.act-btn .btn-word { }
.act-btn .btn-icon { }
@media (max-width: 768px) { .act-btn .btn-word { display: none; } }
.act-done:hover { border-color:var(--success); color:var(--success); }
.act-start:hover { border-color:var(--accent); color:var(--accent); }
.act-stop:hover { border-color:var(--warning); color:var(--warning); }
.urg { font-size:11px; min-width:32px; text-align:right; }
.urg-high { color:var(--error); }
.urg-med  { color:var(--warning); }
.urg-low  { color:var(--text); }
.urg-none { color:var(--muted); }
.badge-project { font-size:11px; color:var(--accent); border:1px solid currentColor; padding:1px 5px; border-radius:3px; white-space:nowrap; }
.tag { font-size:11px; color:#3fb950; }
.task-desc { flex:1; min-width:0; }
.pri-dot { font-size:10px; padding:1px 4px; border-radius:2px; }
.pri-h { color:var(--error); }
.pri-m { color:var(--warning); }
.pri-l { color:var(--muted); }
.due { font-size:11px; }
.due-overdue { color:var(--error); }
.due-soon { color:var(--warning); }
.due-ok { color:var(--muted); }
.sched-badge { font-size:11px; color:var(--accent); opacity:0.7; }
.task-annotations { width:100%; padding-left:40px; }
.annotation { font-size:11px; color:var(--muted); padding:2px 0; }
.empty-state { color:var(--muted); font-size:12px; padding:16px 0; }

/* ── Task detail panel ────────────────────────────────────────────────────── */
.task-detail, .task-inline-detail { background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 12px 16px; margin-bottom: 2px; }
.task-detail.hidden, .task-inline-detail.hidden { display: none; }
.task-detail-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.task-detail-desc { font-size: 15px; color: var(--text); flex: 1; }
.task-detail-close { background: none; border: 1px solid var(--border); color: var(--muted); font-family: inherit; font-size: 12px; padding: 2px 8px; border-radius: 3px; cursor: pointer; margin-left: 12px; }
.task-detail-close:hover { border-color: var(--error); color: var(--error); }
.task-detail-meta { font-size: 12px; color: var(--muted); margin-bottom: 10px; display: flex; gap: 10px; flex-wrap: wrap; }
.task-detail-annotations { margin-bottom: 12px; }
.task-detail-annotations .annotation { font-size: 12px; color: var(--muted); padding: 3px 0; display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.task-detail-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.task-detail-input { display: flex; gap: 6px; margin-top: 8px; }
.task-detail-input input { flex: 1; background: var(--bg); border: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 12px; padding: 4px 8px; border-radius: 3px; height: 28px; box-sizing: border-box; }
.task-detail-input input:focus { outline: none; border-color: var(--accent); }
.task-detail-input button { height: 28px; box-sizing: border-box; }

/* Task editor grid */
.task-detail-edit-grid { display: grid; grid-template-columns: 80px 1fr; gap: 4px 8px; margin-bottom: 12px; align-items: center; }
.task-detail-edit-grid label { font-size: 11px; color: var(--muted); text-align: right; }
.task-detail-edit-grid input, .task-detail-edit-grid select { background: var(--bg); border: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 12px; padding: 3px 6px; border-radius: 3px; height: 26px; }
.task-detail-edit-grid input:focus, .task-detail-edit-grid select:focus { outline: none; border-color: var(--accent); }
.task-detail-ro { font-size: 12px; color: var(--muted); padding: 3px 0; }

/* UDA section in task editor */
.task-detail-uda-section { margin: 10px 0; padding-top: 8px; border-top: 1px solid var(--border); }
.task-detail-uda-header { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.task-detail-uda-row { display: grid; grid-template-columns: 120px 1fr; gap: 4px 8px; margin-bottom: 3px; align-items: center; }
.task-detail-uda-label { font-size: 11px; color: var(--muted); text-align: right; }
.task-detail-uda-input { background: var(--bg); border: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 12px; padding: 3px 6px; border-radius: 3px; height: 26px; }
.task-detail-uda-input:focus { outline: none; border-color: var(--accent); }

/* Service UDAs (collapsed details element) */
.task-detail-svc-udas { margin: 6px 0; border-top: 1px solid var(--border); padding-top: 6px; }
.task-detail-svc-udas summary { cursor: pointer; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; padding: 2px 0; }
.task-detail-svc-udas summary:hover { color: var(--text); }
.task-detail-svc-udas[open] summary { margin-bottom: 6px; }

/* Entry action buttons (journal, ledger, time) — always show on touch / coarse pointers */
.entry-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; padding-left: 8px; }
@media (hover: hover) and (pointer: fine) {
  .entry-actions { display: none; }
  .journal-entry:hover .entry-actions,
  .journal-entry:focus-within .entry-actions { display: flex; }
}
.entry-action-row { margin-top: 4px; }
.ledger-item-actions { display: flex; gap: 6px; padding: 1px 0 5px; align-items: center; flex-wrap: wrap; }
.ledger-item-actions .act-btn { font-size: 10px; padding: 1px 7px; opacity: 0.75; }
.ledger-item-actions .act-btn:hover { opacity: 1; }
.ledger-detail { padding: 4px 0 6px 8px; border-left: 2px solid var(--border); margin: 2px 0 4px; }
.ledger-detail.hidden { display: none; }
.ledger-detail-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; font-size: 11px; }
.ledger-detail-acct { color: var(--muted); }
.ledger-note-icon { margin-left: auto; padding: 1px 6px; font-size: 13px; opacity: 0.5; flex-shrink: 0; }
.ledger-action-row { width: 100%; padding-bottom: 6px; }
.int-actions { display: none; gap: 4px; margin-left: 12px; flex-shrink: 0; }
.interval-row:hover .int-actions { display: inline-flex; }

/* ── Time section ─────────────────────────────────────────────────────────── */
.time-card { font-size:13px; margin-bottom:16px; padding:10px; background:var(--surface); border-radius:4px; }
.time-total { font-size:18px; color:var(--text); margin-right:8px; }
.tracking-badge { color:var(--success); font-size:12px; }
.week-bars { margin-bottom:16px; }
.week-day { display:flex; align-items:center; gap:8px; padding:3px 0; }
/* .day-name width/color is set in the additions section below */
.day-bar { flex:1; height:6px; background:var(--border); border-radius:3px; overflow:hidden; }
.day-fill { height:100%; background:var(--accent); border-radius:3px; transition:width 0.3s; }
.day-total { width:60px; font-size:11px; color:var(--muted); text-align:right; }
.week-total { font-size:12px; color:var(--muted); padding-top:8px; text-align:right; }
.intervals-header, .ledger-header { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em; padding:8px 0 4px; border-bottom:1px solid var(--border); margin-bottom:6px; }
.interval-row { display:flex; justify-content:space-between; padding:4px 0; font-size:12px; border-bottom:1px solid var(--border); cursor: pointer; }
.interval-row:hover { background: var(--surface); }
.int-tags { color:var(--muted); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.int-dur { color:var(--text); min-width:60px; text-align:right; }

/* ── Journal section ──────────────────────────────────────────────────────── */
.journal-entry { padding:12px 0; border-bottom:1px solid var(--border); }
.entry-date { font-size:10px; color:var(--muted); margin-bottom:6px; letter-spacing:.02em; display: flex; align-items: center; gap: 6px; }
.entry-body { font-size:13px; white-space:pre-wrap; }
#journal-list.no-dates .entry-date { display: none; }
.entry-more { background:none; border:none; color:var(--accent); font-family:inherit; font-size:11px; cursor:pointer; padding:4px 0; }
.entry-annotations { margin-top:8px; border-top:1px solid var(--border); padding-top:6px; display:flex; flex-direction:column; gap:4px; }
.entry-ann-block { display:flex; gap:8px; align-items:baseline; padding-left:8px; border-left:2px solid var(--border); flex-wrap:wrap; }
.entry-ann-ts { font-size:10px; color:var(--muted); flex-shrink:0; white-space:nowrap; }
.entry-ann-text { font-size:12px; color:var(--fg); white-space:pre-wrap; flex:1; }
.ann-act-row { display:inline-flex; gap:3px; align-items:center; margin-left:4px; opacity:0; transition:opacity 0.15s; }
.entry-ann-block:hover .ann-act-row,
.annotation:hover .ann-act-row { opacity:1; }
.btn-ann-act { font-size:10px; padding:1px 5px; border-radius:3px; border:1px solid var(--border); background:var(--surface); color:var(--muted); cursor:pointer; font-family:inherit; }
.btn-ann-act:hover { background:rgba(88,166,255,0.1); color:var(--text); border-color:rgba(88,166,255,0.3); }

/* ── Simple lists (list.py) ───────────────────────────────────────────────── */
.list-items { font-size: 13px; }
.list-row { display: flex; align-items: center; gap: 10px; padding: var(--row-gap) 4px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.list-row:hover { background: var(--surface); }
.list-prefix { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; color: var(--muted); min-width: 2.5em; }
.list-text { flex: 1; min-width: 140px; }
.list-row-actions { display: flex; gap: 4px; align-items: center; margin-left: auto; }
.list-row-actions .act-btn { font-size: 11px; }
.list-action-row { width: 100%; padding: 4px 4px 6px; }
.lcomm-full-row { display: flex; gap: 6px; width: 100%; align-items: center; }
.lcomm-full-row .lcomm-note-inp { flex: 1; min-width: 0; }
.lcomm-full-row .lcomm-sel { flex: 0 0 auto; }
.lcomm-full-row .lcomm-list-btn { flex: 0 0 auto; white-space: nowrap; }

/* ── Ledger section ───────────────────────────────────────────────────────── */
.balance-row { display:flex; justify-content:space-between; padding:4px 0; font-size:12px; border-bottom:1px solid var(--border); }
.acct-name { color:var(--muted); }
.bal-asset .acct-amt { color:var(--text); }
.bal-income .acct-amt { color:var(--success); }
.bal-expense .acct-amt { color:var(--warning); }
.ledger-item { border-bottom:1px solid var(--border); }
.ledger-note-line { font-size:11px; color:var(--muted); padding:1px 0 1px 2px; font-style:italic; display:flex; gap:5px; align-items:baseline; }
.ledger-note-marker { color:var(--accent); font-style:normal; flex-shrink:0; }
.ledger-row { display:flex; gap:8px; padding:5px 0 2px; font-size:12px; flex-wrap:nowrap; align-items:center; cursor:pointer; }
.ledger-row:hover .tx-desc { color: var(--accent); }
.tx-date { color:var(--muted); min-width:80px; flex-shrink:0; }
.tx-desc { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tx-acct { color:var(--muted); font-size:11px; min-width:100px; flex-shrink:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tx-amt { min-width:70px; text-align:right; flex-shrink:0; }

/* ── Hledger toolbar ──────────────────────────────────────────────────────── */
.hledger-toolbar { display: flex; gap: 4px; flex-wrap: wrap; margin: 8px 0 4px; }
.hledger-toolbar .hl-btn { font-size: 11px; padding: 3px 8px; height: 24px; }
.hledger-period-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.hledger-output { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 10px; margin: 6px 0; font-size: 11px; white-space: pre-wrap; font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--text); max-height: 50vh; overflow-y: auto; }
.hledger-output.hidden { display: none; }
.hledger-output .hl-cmd { color: var(--muted); font-size: 10px; margin-bottom: 4px; display: block; }

/* ── Liability balance color ──────────────────────────────────────────────── */
.bal-liability .acct-amt { color: var(--error); }

/* ── Balance type section headers ─────────────────────────────────────────── */
.bal-type-label { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; padding:8px 0 2px; opacity:0.7; }
.bal-equity .acct-amt { color:var(--text); }

/* ── Active hledger report button ─────────────────────────────────────────── */
.hl-btn.active { background: var(--accent, #4a9eff); color: #fff; border-color: var(--accent, #4a9eff); }

/* ── Ledger resource selector in header ───────────────────────────────────── */
.header-resource-slot { display: inline-flex; align-items: center; margin-left: 6px; vertical-align: middle; flex-wrap: nowrap; }
.header-resource-slot .resource-bar-inner { display: inline-flex; align-items: center; gap: 5px; flex-wrap: nowrap; white-space: nowrap; }
.header-resource-slot .resource-bar-inner.hidden { display: none; }
.header-resource-slot .resource-select { font-size: 11px; height: 22px; padding: 1px 4px; min-width: 80px; max-width: 160px; }
.header-resource-slot .resource-add-btn { font-size: 11px; height: 22px; padding: 0 7px; width: auto; }

/* ── Ledger item action bar — visible gray + faint yellow outline ─────────── */
.ledger-item-actions .act-btn {
  font-size: 10px; padding: 2px 8px;
  color: #aaa; background: rgba(120,120,120,0.1);
  border: 1px solid rgba(200,180,60,0.28); border-radius: 3px;
}
.ledger-item-actions .act-btn:hover {
  color: var(--text); background: rgba(120,120,120,0.18);
  border-color: rgba(200,180,60,0.55);
}

/* ── Transaction project/tag chips ───────────────────────────────────────── */
.ledger-chips { display: flex; gap: 4px; flex-wrap: wrap; padding: 1px 0 3px; align-items: center; }
.ledger-project-chip { display: inline-flex; align-items: center; gap: 2px; font-size: 10px; color: var(--accent); background: rgba(88,166,255,0.1); border: 1px solid rgba(88,166,255,0.32); border-radius: 3px; padding: 0 4px 0 6px; line-height: 1.7; position: relative; }
.ledger-project-chip::before { content: 'project: '; opacity: 0.7; }
.ledger-tag-chip { display: inline-flex; align-items: center; gap: 2px; font-size: 10px; color: var(--muted); background: var(--surface); border: 1px solid rgba(200,180,60,0.25); border-radius: 3px; padding: 0 4px 0 6px; line-height: 1.7; }
.ledger-tag-chip::before { content: '#'; opacity: 0.6; }
.ledger-pri-chip { display: inline-flex; align-items: center; gap: 2px; font-size: 10px; border-radius: 3px; padding: 0 4px 0 6px; line-height: 1.7; font-weight: 600; }
.ledger-pri-chip::before { content: 'pri: '; font-weight: 400; opacity: 0.7; }
.ledger-pri-h { color: #ff6b6b; background: rgba(255,107,107,0.1); border: 1px solid rgba(255,107,107,0.3); }
.ledger-pri-m { color: #ffa94d; background: rgba(255,169,77,0.1); border: 1px solid rgba(255,169,77,0.3); }
.ledger-pri-l { color: var(--muted); background: var(--surface); border: 1px solid var(--border); }
.ledger-task-chip { display: inline-flex; align-items: center; font-size: 10px; color: var(--accent); background: rgba(88,166,255,0.08); border: 1px solid rgba(88,166,255,0.25); border-radius: 3px; padding: 0 6px; line-height: 1.7; cursor: pointer; }
.ledger-task-chip:hover { background: rgba(88,166,255,0.2); }
.chip-remove { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 11px; padding: 0 1px; line-height: 1; opacity: 0; transition: opacity 0.15s; }
.ledger-project-chip:hover .chip-remove,
.ledger-tag-chip:hover .chip-remove,
.ledger-pri-chip:hover .chip-remove { opacity: 1; }
.chip-remove:hover { color: #ff6b6b; }
/* Journal entry metadata chips */
.entry-meta-chips { display: flex; gap: 4px; flex-wrap: wrap; padding: 3px 0 1px; }
.jmeta-chip { cursor: default; }
.jmeta-status-chip { display: inline-flex; align-items: center; font-size: 10px; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 3px; padding: 0 6px; line-height: 1.7; }
/* Community comment action buttons */
.cmt-actions { display: inline-flex; gap: 3px; margin-left: 4px; }
.btn-cmt-copyback, .btn-cmt-newtask, .btn-cmt-newjournal { font-size: 10px; padding: 1px 5px; border-radius: 3px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer; }
.btn-cmt-copyback:hover, .btn-cmt-newtask:hover, .btn-cmt-newjournal:hover { background: rgba(88,166,255,0.1); color: var(--text); border-color: rgba(88,166,255,0.3); }
/* Priority picker inline */
.lpri-label { font-size: 11px; color: var(--muted); padding-right: 4px; }
.lpri-pick { padding: 2px 8px !important; font-weight: 600; }
.lpri-active { background: rgba(88,166,255,0.15) !important; border-color: var(--accent) !important; color: var(--accent) !important; }
/* ledger-card-proj in journal cards */
.ledger-card-proj { background: rgba(88,166,255,0.1) !important; color: var(--accent) !important; border-color: rgba(88,166,255,0.3) !important; }

/* ── Ledger item highlight (navigate-from-journal) ────────────────────────── */
.ledger-item-highlight { animation: ledger-flash 2s ease-out; }
@keyframes ledger-flash { 0%, 35% { background: rgba(200,180,60,0.14); } 100% { background: transparent; } }

/* ── Task row highlight (navigate-from-projects/search) ─────────────────── */
.task-row-highlight { animation: task-flash 2s ease-out; }
@keyframes task-flash { 0%, 35% { background: rgba(88,166,255,0.13); } 100% { background: transparent; } }

/* ── ctn-ledger journal card ─────────────────────────────────────────────── */
.ctn-ledger { border-left-color: rgba(200,180,60,0.7); }

/* ── Unit type filter bar ─────────────────────────────────────────────────── */
.ledger-unit-filter { display: flex; align-items: center; gap: 5px; margin: 4px 0 2px; flex-wrap: wrap; }
.unit-filter-label { font-size: 10px; color: var(--muted); }
.unit-btn { font-size: 10px; padding: 1px 7px; background: none; border: 1px solid var(--border); border-radius: 3px; cursor: pointer; color: var(--muted); }
.unit-btn:hover { border-color: rgba(200,180,60,0.45); color: var(--text); }
.unit-btn.active { background: rgba(120,120,120,0.1); border-color: rgba(200,180,60,0.42); color: var(--text); }
.unit-add-btn { font-size: 11px; padding: 0 7px; background: none; border: 1px dashed var(--border); border-radius: 3px; cursor: pointer; color: var(--muted); line-height: 18px; }
.unit-add-btn:hover { border-color: var(--accent); color: var(--accent); }
.unit-pill-wrap { display: inline-flex; align-items: center; gap: 1px; }
.unit-edit-btn, .unit-del-btn { background: none; border: none; cursor: pointer; font-size: 10px; color: var(--muted); padding: 0 2px; line-height: 1; opacity: 0.4; }
.unit-pill-wrap:hover .unit-edit-btn,
.unit-pill-wrap:hover .unit-del-btn { opacity: 1; }
.unit-edit-btn:hover { color: var(--accent); }
.unit-del-btn:hover { color: #f85149; }
.unit-add-form { display: flex; align-items: center; gap: 5px; flex-basis: 100%; padding: 4px 0 2px; }
.unit-add-form input { background: transparent; border: none; border-bottom: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 11px; padding: 2px 3px; outline: none; }
.unit-add-form input:focus { border-bottom-color: var(--accent); }

/* ── Pulsing dot for active time tracking ────────────────────────────────── */
.pulse-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--success); animation: pulse 2s infinite; vertical-align: middle; margin-right: 3px; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
.time-label { color: var(--muted); font-size: 12px; }
.idle-badge { color: var(--muted); font-size: 12px; margin-left: 8px; }
.tracking-badge { color: var(--success); font-size: 12px; margin-left: 8px; }
.tracking-elapsed { color: var(--clr-time); font-size: 13px; font-weight: bold; margin-left: 8px; font-variant-numeric: tabular-nums; }

/* ── Week bar: current day accent ────────────────────────────────────────── */
.day-name { width: 44px; color: var(--muted); font-size: 11px; }
.day-current { color: var(--accent); }
.day-fill-current { background: var(--accent) !important; }
.day-group-header { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; padding: 8px 0 3px; }

/* ── Journal tag highlight ────────────────────────────────────────────────── */
.journal-tag { color: var(--clr-journal); }

/* ── Terminal context label ───────────────────────────────────────────────── */
.term-context { color: var(--accent); font-size: 12px; white-space: nowrap; padding-right: 6px; border-right: 1px solid var(--border); margin-right: 4px; }
.term-context.hidden { display: none; }

/* ── Services sections ────────────────────────────────────────────────────── */
.service-card { background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 16px; margin-bottom: 12px; }
.service-card h3 { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; }
.service-card .service-value { font-size: 18px; color: var(--text); margin-bottom: 6px; }
.service-card .service-meta { font-size: 12px; color: var(--muted); }
.service-card .service-desc { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.service-badge { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 3px; }
.service-badge.enabled { background: rgba(63,185,80,0.15); color: var(--success); border: 1px solid var(--success); }
.service-badge.disabled { background: rgba(248,81,73,0.1); color: var(--muted); border: 1px solid var(--border); }
.btn-service { background: none; border: 1px solid var(--border); color: var(--muted); font-family: inherit; font-size: 12px; padding: 4px 12px; border-radius: 3px; cursor: pointer; margin-top: 8px; }
.btn-service:hover { border-color: var(--accent); color: var(--accent); }

/* ── Resource selector bar ────────────────────────────────────────────────────── */
.resource-bar-inner { display: inline-flex; align-items: center; gap: 4px; }
.resource-select { background: var(--bg); border: 1px solid var(--border); color: var(--muted); font-family: inherit; font-size: 11px; padding: 2px 6px; border-radius: 3px; cursor: pointer; }
.resource-select:focus { outline: none; border-color: var(--accent); color: var(--text); }
.resource-add-btn { background: none; border: 1px solid var(--border); color: var(--muted); font-family: inherit; font-size: 11px; width: auto; height: 22px; border-radius: 3px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0 7px; line-height: 1; white-space: nowrap; }
.resource-add-btn:hover { border-color: var(--accent); color: var(--accent); }
.resource-del-btn { color: rgba(200,80,80,0.6) !important; border-color: rgba(200,80,80,0.35) !important; margin-left: 6px; }
.resource-del-btn:hover { color: rgba(220,90,90,0.9) !important; border-color: rgba(200,80,80,0.7) !important; background: rgba(200,80,80,0.1); }
.resource-create-form { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; }
.resource-create-input { background: var(--bg); border: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 11px; padding: 2px 6px; border-radius: 3px; width: 120px; }
.resource-create-input:focus { outline: none; border-color: var(--accent); }
.resource-create-ok { background: var(--accent); border: none; color: #000; font-family: inherit; font-size: 11px; padding: 2px 8px; border-radius: 3px; cursor: pointer; }
.resource-create-ok:disabled { opacity: 0.5; cursor: default; }
.resource-create-cancel { background: none; border: 1px solid var(--border); color: var(--muted); font-family: inherit; font-size: 12px; width: 22px; height: 22px; border-radius: 3px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.resource-create-cancel:hover { border-color: var(--error); color: var(--error); }

/* ── Pinned command ────────────────────────────────────────────────────────────── */
.term-pinned { color: var(--accent); font-size: 12px; white-space: nowrap; padding-right: 8px; border-right: 1px solid var(--border); margin-right: 6px; }
.term-pinned.hidden { display: none; }

/* ── Next task card ───────────────────────────────────────────────────────────── */
.next-task-card { background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 20px; max-width: 560px; }
.next-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.next-desc { font-size: 16px; color: var(--text); margin-bottom: 10px; }
.next-meta { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.next-actions { display: flex; gap: 8px; }

/* ── Schedule output ─────────────────────────────────────────────────────────── */
.service-output { font-size: 12px; color: var(--muted); white-space: pre-wrap; margin-top: 8px; }

/* ── Weapons bar ──────────────────────────────────────────────────────────────── */
.weapons-bar { display: flex; gap: 3px; padding: 2px 8px 4px; }
.weapon-btn { background: none; border: 1px solid var(--border); color: var(--muted); font-size: 13px; width: 28px; height: 24px; border-radius: 3px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.weapon-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(88,166,255,0.05); }
.weapon-btn.active { border-color: var(--accent); color: var(--accent); background: rgba(88,166,255,0.1); }
.weapon-btn.weapon-disabled { opacity: 0.3; cursor: default; }
.weapon-btn.weapon-disabled:hover { border-color: var(--border); color: var(--muted); background: none; }

/* ── Gun panel ────────────────────────────────────────────────────────────────── */
.gun-panel { max-width: 700px; }
.gun-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.gun-icon { font-size: 18px; }
.gun-title { font-size: 14px; color: var(--text); }
.gun-attr { font-size: 10px; color: var(--muted); margin-left: auto; }
.gun-output { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 10px; margin-top: 10px; font-size: 12px; white-space: pre-wrap; color: var(--text); }
.gun-output.error { color: var(--error); }
.gun-output.hidden { display: none; }
.gun-help { margin-top: 12px; font-size: 11px; color: var(--muted); }
.gun-help p { margin-bottom: 4px; }
.gun-help code { color: var(--accent); font-size: 11px; }

/* ── CMD panel ────────────────────────────────────────────────────────────────── */
.cmd-panel { max-width: 700px; }
.cmd-unified-output { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 10px; margin: 8px 0; font-size: 12px; white-space: pre-wrap; color: var(--text); max-height: 40vh; overflow-y: auto; }
.cmd-unified-output.error { color: var(--error); }
.cmd-unified-output.hidden { display: none; }
.cmd-log-header { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; padding: 8px 0 4px; border-bottom: 1px solid var(--border); margin-top: 8px; display: flex; align-items: center; gap: 8px; }
.cmd-log-clear-btn { margin-left: auto; background: none; border: 1px solid var(--border); color: var(--muted); font-size: 10px; padding: 1px 7px; border-radius: 3px; cursor: pointer; font-family: inherit; }
.cmd-log-clear-btn:hover { border-color: var(--accent); color: var(--accent); }
.cmd-log { font-size: 12px; }
.cmd-log-entry { border-bottom: 1px solid var(--border); }
.cmd-log-header-row { display: flex; align-items: center; gap: 6px; padding: 6px 0; cursor: pointer; }
.cmd-log-header-row:hover { background: var(--surface); }
.cmd-log-toggle { color: var(--muted); font-size: 9px; width: 10px; flex-shrink: 0; }
.cmd-log-cmd { color: var(--accent); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd-log-time { color: var(--muted); font-size: 11px; flex-shrink: 0; }
.cmd-log-dismiss { margin-left: 4px; background: none; border: none; color: var(--muted); font-size: 14px; cursor: pointer; padding: 0 4px; line-height: 1; flex-shrink: 0; }
.cmd-log-dismiss:hover { color: var(--text); }
.cmd-log-result { color: var(--muted); font-size: 11px; padding: 0 0 6px 16px; white-space: pre-wrap; display: block; }
.cmd-log-entry.collapsed .cmd-log-result { display: none; }

/* ── Journal date grouping + pagination ──────────────────────────────────── */
.journal-rejournal-link { color: var(--accent); cursor: pointer; font-size: 11px; border-bottom: 1px dotted var(--accent); opacity: 0.8; }
.journal-rejournal-link:hover { opacity: 1; }
.journal-entry-highlight { outline: 1px solid var(--accent); background: rgba(88,166,255,0.07); border-radius: 4px; transition: outline 0.3s, background 0.3s; }
.journal-filter-bar { display: flex; gap: 4px; margin-bottom: 8px; flex-wrap: wrap; }
.journal-filter-btn { background: none; border: 1px solid var(--border); color: var(--muted); font-family: inherit; font-size: 11px; padding: 3px 10px; border-radius: 3px; cursor: pointer; transition: border-color 0.15s, color 0.15s; }
.journal-filter-btn:hover { border-color: var(--accent); color: var(--accent); }
.journal-filter-btn.active { border-color: var(--accent); color: var(--accent); background: rgba(88,166,255,0.1); }
.jmd-toggle { margin-left: auto; }
.journal-entry.entry-archived { opacity: 0.5; }
.journal-entry.entry-archived .entry-body { text-decoration: line-through; text-decoration-color: var(--muted); }
/* Markdown-rendered content — applied across journal, community, and ledger */
.entry-body.md-on,
.community-journal-body.md-on,
.community-comment-body.md-on { white-space: normal; }
.jmd-h { margin: 4px 0 2px; font-size: 13px; color: var(--text); font-weight: 600; }
.jmd-bq { margin: 4px 0; padding: 2px 8px; border-left: 2px solid var(--accent); color: var(--muted); font-style: italic; }
.jmd-ul, .jmd-ol { margin: 4px 0 4px 16px; padding: 0; }
.jmd-ul li, .jmd-ol li { margin-bottom: 2px; font-size: 13px; }
.jmd-p { margin: 0 0 4px; }
.jmd-code { font-family: monospace; font-size: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 3px; padding: 0 4px; }
.journal-date-group { margin-bottom: 4px; }
.journal-date-header { display: flex; align-items: center; justify-content: space-between; padding: 5px 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; cursor: pointer; user-select: none; margin-bottom: 2px; }
.journal-date-header:hover { border-color: var(--accent); }
.jgrp-label { font-size: 12px; color: var(--accent); }
.jgrp-label::before { content: '▼ '; font-size: 9px; opacity: 0.6; }
.journal-date-header.jgrp-collapsed .jgrp-label::before { content: '▶ '; }
.jgrp-count { font-size: 11px; color: var(--muted); background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 0 6px; }
.journal-date-body { padding-left: 4px; }
.journal-load-more { padding: 8px 0; text-align: center; }
.btn-load-more { background: transparent; border: 1px solid var(--border); color: var(--muted); font-family: inherit; font-size: 12px; padding: 4px 14px; border-radius: 3px; cursor: pointer; }
.btn-load-more:hover { border-color: var(--accent); color: var(--accent); }
.load-more-count { font-size: 11px; opacity: 0.7; }

/* ── Journal target selector (inline with note inputs) ────────────────────── */
.journal-target-select { background: var(--bg); border: 1px solid var(--border); color: var(--muted); font-family: inherit; font-size: 11px; padding: 2px 4px; border-radius: 3px; height: 28px; max-width: 100px; }
.journal-target-select:focus { outline: none; border-color: var(--accent); }

/* ── Terminal badges ──────────────────────────────────────────────────────── */
.term-badge { display: inline-flex; align-items: center; justify-content: center; font-size: 10px; padding: 1px 6px; border-radius: 3px; background: var(--border); color: var(--text); margin-right: 4px; white-space: nowrap; }
.term-pinned-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 3px; font-size: 11px; font-weight: bold; margin-right: 4px; }
.term-pinned-icon.hidden { display: none; }
.term-pinned-icon.icon-tasks { background: var(--clr-tasks); color: #000; }
.term-pinned-icon.icon-time { background: var(--clr-time); color: #000; }
.term-pinned-icon.icon-journal { background: var(--clr-journal); color: #fff; }
.term-pinned-icon.icon-ledger { background: var(--clr-ledger); color: #000; }

/* ── Service panels ───────────────────────────────────────────────────────── */
.service-panel { max-width: 700px; }
.service-panel-header { font-size: 14px; color: var(--text); margin-bottom: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.service-panel-body { font-size: 12px; }
.export-actions, .ctrl-sections { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }

/* ── Network checks ───────────────────────────────────────────────────────── */
.net-check { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.net-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.net-dot.ok { background: var(--success); }
.net-dot.fail { background: var(--error); }
.net-name { color: var(--text); min-width: 80px; }
.net-status { color: var(--muted); }
.add-account-row { display: flex; gap: 6px; align-items: center; margin: 6px 0; }

/* ── Groups list ──────────────────────────────────────────────────────────── */
.group-card { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 10px; margin-bottom: 8px; }
.group-card-header { display: flex; justify-content: space-between; align-items: center; }
.group-card-actions { display: flex; gap: 4px; }
.group-name { color: var(--accent); font-size: 13px; }
.group-name-editable { cursor: pointer; }
.group-name-editable:hover { text-decoration: underline dotted; }
.group-rename-input { background: var(--bg); border: 1px solid var(--accent); color: var(--accent); font-family: inherit; font-size: 13px; padding: 1px 4px; border-radius: 2px; width: 140px; }
.group-profiles { color: var(--muted); font-size: 12px; }
.group-expand-body { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.group-chips-row { display: flex; flex-wrap: wrap; gap: 4px; }
.group-profile-chip { display: inline-flex; align-items: center; gap: 3px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 1px 6px; font-size: 11px; color: var(--text); }
.group-chip-remove { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 12px; padding: 0 1px; line-height: 1; }
.group-chip-remove:hover { color: var(--error); }
.group-add-member-row, .group-cmd-row { display: flex; gap: 4px; align-items: center; }
.group-add-input, .group-cmd-input { flex: 1; background: var(--bg); border: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 12px; padding: 3px 6px; border-radius: 3px; }
.group-add-input:focus, .group-cmd-input:focus { border-color: var(--accent); outline: none; }
.group-cmd-out { font-size: 11px; max-height: 120px; overflow-y: auto; }
.group-members-switch { display: flex; flex-wrap: wrap; gap: 4px; }
.muted-label { color: var(--muted); font-size: 11px; }

/* ── Global search overlay ───────────────────────────────────────────────── */
#search-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--bg); z-index: 100; overflow-y: auto; padding: 12px 16px; }
.search-hint { color: var(--muted); font-size: 13px; padding: 20px 0; }
.search-group-header { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; padding: 8px 0 4px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.search-none { color: var(--muted); font-size: 12px; padding: 6px 0; }
.search-result { display: flex; align-items: baseline; gap: 8px; padding: 6px 6px; border-radius: 3px; cursor: pointer; font-size: 13px; }
.search-result:hover { background: var(--surface); }
.sr-icon { color: var(--muted); flex-shrink: 0; font-size: 10px; }
.search-result-task .sr-icon { color: var(--clr-tasks); }
.search-result-journal .sr-icon { color: var(--clr-journal); }
.sr-date { color: var(--muted); font-size: 11px; flex-shrink: 0; min-width: 90px; }
.sr-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-text mark { background: rgba(210,153,34,0.3); color: var(--warning); border-radius: 2px; }
.prompt-search { color: var(--warning); }

/* ── Error states ────────────────────────────────────────────────────────── */
.error-state { display: flex; align-items: center; gap: 10px; padding: 10px 8px; color: var(--error); font-size: 12px; }
.error-msg { flex: 1; }
.btn-retry { background: transparent; border: 1px solid var(--error); color: var(--error); font-family: inherit; font-size: 11px; padding: 2px 8px; border-radius: 3px; cursor: pointer; flex-shrink: 0; }
.btn-retry:hover { background: rgba(248,81,73,0.1); }

/* ── Bulk operations ─────────────────────────────────────────────────────── */
#bulk-toolbar { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: var(--surface); border: 1px solid var(--accent); border-radius: 4px; margin-bottom: 6px; flex-wrap: wrap; font-size: 12px; }
.bulk-select-all { display: flex; align-items: center; gap: 4px; color: var(--muted); cursor: pointer; }
#bulk-count { color: var(--accent); min-width: 60px; }
.btn-bulk { background: transparent; border: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 11px; padding: 2px 7px; border-radius: 3px; cursor: pointer; }
.btn-bulk:hover { border-color: var(--accent); color: var(--accent); }
.bulk-input { background: var(--bg); border: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 11px; padding: 2px 6px; border-radius: 3px; width: 90px; }
.bulk-sep { color: var(--border); }
.task-cb { opacity: 0; width: 14px; flex-shrink: 0; cursor: pointer; accent-color: var(--accent); transition: opacity 100ms; }
.task-row:hover .task-cb, .task-row:focus-within .task-cb, .task-cb:checked { opacity: 1; }

/* ── Task grouping ────────────────────────────────────────────────────────── */
.task-group-header { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; margin: 6px 0 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 3px; cursor: pointer; user-select: none; font-size: 12px; }
.task-group-header:hover { border-color: var(--accent); }
.task-group-header.task-group-overdue { border-left: 3px solid var(--error); }
.task-group-header.group-collapsed .group-name::before { content: '▶ '; }
.task-group-header:not(.group-collapsed) .group-name::before { content: '▼ '; }
.group-name { color: var(--accent); font-weight: bold; }
.task-group-overdue .group-name { color: var(--error); }
.group-meta { color: var(--muted); font-size: 11px; }
.task-group-body { margin-left: 4px; }
.btn-toolbar { background: transparent; border: 1px solid var(--border); color: var(--muted); font-family: inherit; font-size: 12px; padding: 2px 8px; border-radius: 3px; cursor: pointer; }
.btn-toolbar:hover { border-color: var(--accent); color: var(--accent); }
.btn-toolbar.active { border-color: var(--accent); color: var(--accent); background: rgba(88,166,255,0.08); }

/* ── Keyboard shortcut overlay ───────────────────────────────────────────── */
#shortcut-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.65); z-index: 9998; display: flex; align-items: center; justify-content: center; }
.shortcut-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 16px 20px; min-width: 280px; max-width: 360px; }
.shortcut-title { color: var(--accent); font-size: 13px; font-weight: bold; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; }
.shortcut-close { cursor: pointer; color: var(--muted); font-size: 16px; line-height: 1; }
.shortcut-close:hover { color: var(--text); }
.shortcut-grid { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; font-size: 12px; }
.shortcut-key { background: var(--bg); border: 1px solid var(--border); border-radius: 3px; padding: 1px 6px; color: var(--term-green); font-family: inherit; white-space: nowrap; align-self: center; }

/* ── Warrior panel ───────────────────────────────────────────────────────── */
.warrior-tabs { display: flex; gap: 4px; margin-bottom: 10px; flex-wrap: wrap; }
.warrior-tab { background: none; border: 1px solid var(--border); color: var(--muted); font-family: inherit; font-size: 11px; padding: 3px 12px; border-radius: 3px; cursor: pointer; }
.warrior-tab:hover { border-color: var(--accent); color: var(--accent); }
.warrior-tab.active { border-color: var(--accent); color: var(--accent); background: rgba(88,166,255,0.08); }
.warrior-tab-panel { }
.warrior-pre { font-size: 11px; white-space: pre-wrap; color: var(--muted); margin: 0; }
.warrior-agg-row { display: flex; gap: 10px; margin-bottom: 12px; }
.warrior-agg-stat { display: flex; flex-direction: column; align-items: center; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 6px 14px; }
.warrior-profile-list { display: flex; flex-direction: column; gap: 6px; }
.warrior-profile-card { border: 1px solid var(--border); border-radius: 4px; padding: 7px 10px; font-size: 12px; }
.warrior-card-active { border-color: var(--accent); background: rgba(88,166,255,0.04); }
.warrior-card-header { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.warrior-prof-name { color: var(--text); font-weight: bold; flex-shrink: 0; }
.warrior-active-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); flex-shrink: 0; animation: pulse-dot 2s ease-in-out infinite; }
.warrior-current-badge { font-size: 10px; padding: 1px 6px; border-radius: 10px; background: rgba(88,166,255,0.12); border: 1px solid var(--accent); color: var(--accent); }
.warrior-task-count { color: var(--muted); font-size: 11px; margin-left: auto; }
.warrior-top-task { color: var(--muted); font-size: 11px; font-style: italic; margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 400px; }
.warrior-urg-bar { display: flex; height: 4px; border-radius: 2px; overflow: hidden; background: var(--bg); }
.urg-seg { height: 100%; }
.urg-high { background: var(--error); }
.urg-med  { background: var(--warning); }
.urg-low  { background: var(--border); }

/* ── Profile screen ──────────────────────────────────────────────────────── */
.profile-stat-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.profile-name-label { font-size: 14px; color: var(--text); font-weight: bold; }
.profile-active-badge { font-size: 10px; padding: 1px 8px; border-radius: 10px; background: rgba(88,166,255,0.12); border: 1px solid var(--accent); color: var(--accent); }
.profile-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.profile-stat { display: flex; flex-direction: column; align-items: center; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 8px 4px; }
.stat-val { font-size: 18px; color: var(--text); font-weight: bold; }
.stat-lbl { font-size: 10px; color: var(--muted); margin-top: 2px; }
.profile-files-section { border: 1px solid var(--border); border-radius: 4px; overflow: hidden; margin-bottom: 8px; }
.profile-file-row { display: flex; align-items: baseline; gap: 8px; padding: 4px 8px; border-bottom: 1px solid var(--border); font-size: 11px; }
.profile-file-row:last-child { border-bottom: none; }
.profile-file-lbl { color: var(--muted); min-width: 90px; flex-shrink: 0; }
.profile-file-val { color: var(--text); font-family: monospace; font-size: 10px; word-break: break-all; opacity: 0.85; }
.profile-delete-row { margin-top: 8px; }
.btn-inline-danger { background: transparent; border: 1px solid rgba(180,80,70,0.4); color: rgba(180,80,70,0.7); font-family: inherit; font-size: 11px; padding: 2px 8px; border-radius: 3px; cursor: pointer; }
.btn-inline-danger:hover { background: rgba(180,80,70,0.08); color: rgba(200,90,80,0.9); }

/* ── Questions panel ─────────────────────────────────────────────────────── */
/* Layout */
#section-questions { display: flex; flex-direction: column; height: calc(100vh - var(--term-h) - 38px - 32px - 30px); }
#section-questions.hidden { display: none; }
.q-layout { display: flex; gap: 0; flex: 1; min-height: 0; }
.q-left { flex: 2; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; padding-right: 12px; }
.q-left::-webkit-scrollbar { display: none; }
.q-right { flex: 1; min-width: 300px; overflow-y: auto; padding-left: 14px; border-left: 1px solid var(--border); scrollbar-width: none; -ms-overflow-style: none; }
.q-right::-webkit-scrollbar { display: none; }
.q-right.q-right-hidden { display: none; }
.q-toolbar { display: flex; gap: 6px; align-items: center; margin-bottom: 10px; }
.q-sort-btn { font-size: 11px !important; padding: 2px 8px !important; }

/* List items */
.q-card { border: 1px solid var(--border); border-radius: 4px; padding: 8px 10px; font-size: 12px; margin-bottom: 6px; cursor: pointer; transition: border-color 0.15s; }
.q-card:hover { border-color: var(--accent); }
.q-card.q-card-active { border-color: var(--accent); background: rgba(88,166,255,0.04); }
.q-card.q-card-archived { opacity: 0.5; }
.q-card-header { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.q-card-title { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.q-svc-badge { font-size: 10px; padding: 1px 6px; border-radius: 3px; background: var(--bg); border: 1px solid var(--border); color: var(--muted); }
.q-name { color: var(--text); font-weight: 600; font-size: 12px; }
.q-desc { color: var(--muted); font-size: 11px; }
.q-card-meta { display: flex; gap: 6px; align-items: center; margin-top: 3px; }
.q-card-actions { display: flex; gap: 4px; margin-top: 4px; opacity: 0; transition: opacity 0.12s; }
.q-card:hover .q-card-actions { opacity: 1; }

/* Detail/run panel */
.q-detail-header { margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.q-detail-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.q-detail-desc { font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.q-detail-tags-edit { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.q-detail-edit-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.q-detail-pill { display: inline-flex; align-items: center; gap: 2px; font-size: 10px; padding: 1px 6px; border-radius: 3px; background: rgba(88,166,255,0.08); border: 1px solid rgba(88,166,255,0.2); color: var(--accent); }
.q-detail-pill-del { background: none; border: none; color: var(--error); font-size: 9px; cursor: pointer; padding: 0 2px; opacity: 0.6; }
.q-detail-pill-del:hover { opacity: 1; }
.q-detail-btn-row { display: flex; gap: 0; margin: 10px 0; }
.q-detail-btn-row button { flex: 1; font-family: inherit; font-size: 12px; padding: 6px 0; border: 1px solid var(--border); cursor: pointer; transition: background 0.12s, color 0.12s; }
.q-detail-btn-row button:first-child { border-radius: 3px 0 0 3px; background: var(--accent); color: #000; border-color: var(--accent); }
.q-detail-btn-row button:first-child:hover { opacity: 0.85; }
.q-detail-btn-row button:last-child { border-radius: 0 3px 3px 0; background: none; color: var(--muted); }
.q-detail-btn-row button:last-child:hover { color: var(--text); border-color: var(--muted); }

/* Question fields in detail view */
.q-field-list { margin: 8px 0; }
.q-field-item { font-size: 11px; color: var(--text); padding: 4px 0 4px 10px; border-left: 2px solid var(--border); margin: 3px 0; }
.q-field-key { color: var(--muted); font-size: 10px; }

/* Run mode form */
.q-form { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 8px; }
.q-inputs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.q-input-row { display: flex; flex-direction: column; gap: 3px; }
.q-label { color: var(--muted); font-size: 11px; }
.q-answer { background: var(--bg); border: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 12px; padding: 4px 8px; border-radius: 3px; width: 100%; box-sizing: border-box; }
.q-answer:focus { outline: none; border-color: var(--accent); }
.q-form-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.q-save-option { font-size: 11px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 3px; background: none; color: var(--muted); cursor: pointer; font-family: inherit; }
.q-save-option:hover { border-color: var(--accent); color: var(--accent); }
.q-save-option.q-save-primary { background: var(--accent); color: #000; border-color: var(--accent); }
.q-save-option.q-save-primary:hover { opacity: 0.85; }

/* Edit mode field rows */
.q-edit-field-row { display: flex; gap: 4px; align-items: center; margin-bottom: 4px; }
.q-edit-field-row .q-answer { height: 26px; font-size: 11px; padding: 3px 6px; }

/* ── Models panel ────────────────────────────────────────────────────────── */
.model-filter-tabs { display: flex; gap: 4px; margin-bottom: 8px; flex-wrap: wrap; }
.model-tab { background: transparent; border: 1px solid var(--border); color: var(--muted); font-family: inherit; font-size: 11px; padding: 2px 8px; border-radius: 10px; cursor: pointer; }
.model-tab.active, .model-tab:hover { border-color: var(--accent); color: var(--accent); }
.model-card-list { display: flex; flex-direction: column; gap: 6px; }
.model-card { border: 1px solid var(--border); border-radius: 4px; padding: 8px 10px; font-size: 12px; }
.model-card-active { border-color: var(--accent); background: rgba(88,166,255,0.04); }
.model-card-header { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.model-prov-badge { font-size: 10px; padding: 1px 6px; border-radius: 3px; background: var(--bg); border: 1px solid var(--border); color: var(--muted); }
.model-name { color: var(--text); font-weight: bold; }
.model-default-badge { font-size: 10px; padding: 1px 6px; border-radius: 10px; background: rgba(88,166,255,0.12); border: 1px solid var(--accent); color: var(--accent); margin-left: auto; }
.model-card-body { display: flex; gap: 10px; color: var(--muted); margin-bottom: 6px; flex-wrap: wrap; }
.model-id { font-family: inherit; }
.model-notes { font-style: italic; font-size: 11px; }

/* ── Sync dashboard ──────────────────────────────────────────────────────── */
.sync-dashboard { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.sync-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--border); }
.sync-label { color: var(--muted); min-width: 80px; flex-shrink: 0; }
.sync-val { color: var(--text); }
.sync-pending { color: var(--warning); }
.sync-badge { font-size: 11px; padding: 1px 8px; border-radius: 10px; }
.sync-badge-enabled { background: rgba(63,185,80,0.12); border: 1px solid var(--success); color: var(--success); }
.sync-badge-disabled { background: rgba(248,81,73,0.08); border: 1px solid var(--border); color: var(--muted); }

/* ── Sword task search ────────────────────────────────────────────────────── */
.sword-search-row { position: relative; margin-bottom: 8px; }
.sword-search-row input { width: 100%; box-sizing: border-box; background: var(--bg); border: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 12px; padding: 5px 8px; border-radius: 3px; }
.sword-search-row input:focus { outline: none; border-color: var(--accent); }
.sword-search-results { position: absolute; top: 100%; left: 0; right: 0; background: var(--surface); border: 1px solid var(--border); border-top: none; border-radius: 0 0 4px 4px; z-index: 100; max-height: 180px; overflow-y: auto; }
.sword-result-row { display: flex; align-items: center; gap: 6px; padding: 5px 8px; cursor: pointer; font-size: 12px; }
.sword-result-row:hover { background: var(--bg); }
.sword-res-id { color: var(--accent); min-width: 24px; font-weight: bold; flex-shrink: 0; }
.sword-res-desc { color: var(--text); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sword-res-proj { color: var(--muted); font-size: 10px; flex-shrink: 0; }
.sword-res-urg { color: var(--muted); font-size: 10px; flex-shrink: 0; }
.sword-no-results { padding: 6px 8px; font-size: 12px; color: var(--muted); }

/* ── Time tag preview ─────────────────────────────────────────────────────── */
.timew-tag-preview { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px 0 4px; min-height: 0; }
.tag-preview-chip { font-size: 10px; padding: 1px 7px; border-radius: 10px; background: rgba(88,166,255,0.1); border: 1px solid var(--accent); color: var(--accent); }

/* ── Week navigation ─────────────────────────────────────────────────────── */
.week-nav { display: flex; align-items: center; justify-content: space-between; padding: 4px 0 8px; }
.btn-week-nav { background: transparent; border: 1px solid var(--border); color: var(--muted); font-family: inherit; font-size: 12px; padding: 2px 8px; border-radius: 3px; cursor: pointer; }
.btn-week-nav:disabled { opacity: 0.3; cursor: default; }
.btn-week-nav:not(:disabled):hover { border-color: var(--accent); color: var(--accent); }
.week-range-label { color: var(--text); font-size: 12px; }

/* ── Community panel ─────────────────────────────────────────────────────── */
.community-hint { font-size: 11px; color: var(--muted); line-height: 1.45; margin: 0 0 10px; max-width: 52em; }
#section-community .community-controls-sticky {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--bg);
  padding-bottom: 6px;
  margin-bottom: 4px;
  box-shadow: 0 8px 10px -6px rgba(0, 0, 0, 0.45);
}
/* Scroll entries inside the panel so collection / add-journal controls stay on screen */
#section-community #community-body {
  max-height: min(62vh, 540px);
  overflow-y: auto;
  margin-top: 6px;
  padding: 4px 6px 10px 0;
}
/* community management bar */
.community-mgmt-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; padding: 5px 8px; background: var(--surface); border-radius: 3px; border: 1px solid var(--border); min-height: 28px; }
.community-mgmt-desc { font-size: 11px; color: var(--muted); font-style: italic; flex: 1; min-width: 60px; }
.community-mgmt-actions { display: flex; gap: 5px; align-items: center; }
.btn-mgmt { background: none; border: 1px solid var(--border); color: var(--muted); font-size: 10px; padding: 2px 7px; border-radius: 3px; cursor: pointer; font-family: inherit; }
.btn-mgmt:hover { border-color: var(--accent); color: var(--accent); }
.btn-mgmt-archive:hover { border-color: #f0883e; color: #f0883e; }
.community-mgmt-inline { display: flex; gap: 5px; align-items: center; width: 100%; }
.community-mgmt-inline.hidden { display: none; }
/* entry action buttons */
.community-entry-actions { display: inline-flex; gap: 4px; margin-left: 8px; }
.btn-entry-action { background: none; border: 1px solid var(--border); color: var(--muted); font-size: 10px; padding: 1px 6px; border-radius: 3px; cursor: pointer; font-family: inherit; line-height: 1.4; }
.btn-entry-action:hover { border-color: var(--accent); color: var(--accent); }
.btn-entry-remove:hover { border-color: #f85149; color: #f85149; }
/* comment copy-back */
.btn-cmt-copyback { background: none; border: 1px solid var(--border); color: var(--muted); font-size: 10px; padding: 1px 5px; border-radius: 3px; cursor: pointer; font-family: inherit; margin-left: 6px; }
.btn-cmt-copyback:hover { border-color: var(--accent); color: var(--accent); }
.cmt-copied-badge { font-size: 10px; color: var(--muted); margin-left: 6px; opacity: 0.6; }
.community-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-bottom: 10px; }
.community-add-strip { margin-bottom: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
.community-add-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.community-select-wrap { display: flex; flex-direction: column; gap: 2px; }
.community-toolbar-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; display: inline-block; width: 72px; flex-shrink: 0; }
.community-create-form { margin: 0; flex: 1; min-width: 200px; }
.community-view-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.community-tab { background: var(--bg); border: 1px solid var(--border); color: var(--muted); font-family: inherit; font-size: 11px; padding: 4px 10px; border-radius: 3px; cursor: pointer; }
.community-tab:hover { border-color: var(--accent); color: var(--accent); }
.community-tab.active { border-color: var(--accent); color: var(--accent); background: rgba(88,166,255,0.08); }
.community-entry-card { border: 1px solid var(--border); border-radius: 4px; padding: 8px 10px; margin-bottom: 8px; background: var(--bg); }
.community-entry-head { font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.community-entry-head code { color: var(--accent); font-size: 11px; }
.community-task-slim { font-size: 12px; }
.community-task-desc { display: block; margin: 4px 0; color: var(--text); }
.community-task-meta { font-size: 11px; color: var(--muted); }
.community-journal-body { font-size: 12px; color: var(--text); white-space: pre-wrap; }
.community-raw { font-size: 11px; color: var(--muted); overflow-x: auto; max-height: 200px; margin-top: 4px; }
.community-annotations { margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--border); }
.ann-h { font-size: 10px; color: var(--muted); text-transform: uppercase; margin-bottom: 4px; }
.community-cmt { font-size: 11px; color: var(--text); margin: 3px 0; }
.community-cmt-t { color: var(--muted); margin-right: 6px; }
/* community-task card rendered inside journal entries */
.ctn-card { margin: 2px 0 4px; border-left: 2px solid var(--accent); padding: 5px 10px; background: var(--surface); border-radius: 0 3px 3px 0; display: inline-block; max-width: 100%; }
.ctn-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 3px; }
.ctn-title { font-size: 13px; color: var(--fg); font-weight: 600; }
.ctn-ref-btn { background: none; border: 1px solid var(--accent); color: var(--accent); font-size: 10px; padding: 1px 6px; border-radius: 3px; cursor: pointer; font-family: inherit; line-height: 1.4; }
.ctn-ref-btn:hover { background: rgba(88,166,255,0.12); }
.ctn-comm-btn { background: none; border: 1px solid var(--border); color: var(--muted); font-size: 10px; padding: 1px 6px; border-radius: 3px; cursor: pointer; font-family: inherit; line-height: 1.4; }
.ctn-comm-btn:hover { border-color: var(--accent); color: var(--accent); }
.ctn-uuid-badge { font-size: 10px; color: var(--muted); border: 1px solid var(--border); padding: 1px 5px; border-radius: 3px; font-family: ui-monospace, monospace; cursor: default; }
.ctn-time { border-left-color: #58a6ff88; }
.ctn-list { border-left-color: var(--muted); }
.ctn-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.ctn-meta-pill { font-size: 10px; color: var(--muted); background: var(--bg); border: 1px solid var(--border); padding: 1px 5px; border-radius: 10px; }
.ctn-pill-project { font-size: 10px; color: #58a6ff; background: rgba(88,166,255,0.1); border: 1px solid rgba(88,166,255,0.35); padding: 1px 6px; border-radius: 10px; }
.ctn-pill-tag { font-size: 10px; color: #3fb950; background: rgba(63,185,80,0.1); border: 1px solid rgba(63,185,80,0.35); padding: 1px 6px; border-radius: 10px; }
.ctn-pill-pri { font-size: 10px; color: var(--muted); background: var(--bg); border: 1px solid var(--border); padding: 1px 6px; border-radius: 10px; }
.ctn-note { font-size: 12px; color: var(--fg); padding: 4px 8px; background: rgba(88,166,255,0.05); border-radius: 3px; margin-top: 2px; }
.community-task-diff { margin-top: 6px; padding: 5px 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 3px; }
.diff-label { font-size: 10px; color: var(--muted); display: block; margin-bottom: 4px; }
.diff-table { border-collapse: collapse; font-size: 11px; width: 100%; }
.diff-key { color: var(--muted); padding-right: 8px; white-space: nowrap; }
.diff-was { color: var(--fg); opacity: 0.5; text-decoration: line-through; padding-right: 6px; }
.diff-arrow { color: var(--muted); padding: 0 4px; }
.diff-now { color: var(--accent); }
.community-comment-row { border-bottom: 1px solid var(--border); padding: 8px 0; }
.community-comment-meta { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.community-comment-body { font-size: 12px; color: var(--text); white-space: pre-wrap; }

/* ── Toast notifications ──────────────────────────────────────────────────── */
#toast-container { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 6px; z-index: 9999; pointer-events: none; }
.toast { background: var(--surface); border: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 12px; padding: 7px 12px; border-radius: 4px; opacity: 0; transform: translateY(6px); transition: opacity 200ms ease, transform 200ms ease; }
.toast.toast-visible { opacity: 1; transform: translateY(0); }
.toast.toast-success { border-left: 3px solid var(--success); }
.toast.toast-error   { border-left: 3px solid var(--error); color: var(--error); }
.toast.toast-info    { border-left: 3px solid var(--accent); }

/* ── Community footer nav button — mirrors .warrior-stats exactly ─────────── */
.community-footer-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; width: 100%;
  background: none; border: none;
  cursor: pointer; color: var(--muted);
}
.community-footer-btn:hover { background: var(--bg); }
.community-footer-btn.active { color: var(--accent); }
.community-footer-icon { font-size: 14px; font-weight: bold; color: var(--muted); }
.community-footer-label { font-size: 11px; color: var(--muted); }
.community-footer-btn:hover .community-footer-icon,
.community-footer-btn:hover .community-footer-label { color: var(--text); }
.community-footer-btn.active .community-footer-icon,
.community-footer-btn.active .community-footer-label { color: var(--accent); }

/* ── Lists attribution ───────────────────────────────────────────────────── */
.list-attribution { font-size: 10px; color: var(--muted); padding: 4px 0 2px; letter-spacing: 0.04em; }
.list-attribution a { color: var(--muted); text-decoration: none; }
.list-attribution a:hover { color: var(--accent); text-decoration: underline; }

/* ── Journal meta row ────────────────────────────────────────────────────── */
.journal-meta-row { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.journal-meta-select { font-size: 11px; min-width: 80px; max-width: 160px; }

/* ── Community meta row (project/tags/priority under add strips) ─────────── */
.community-meta-row { display: flex; gap: 6px; margin: 2px 0 6px 0; padding-left: 0; flex-wrap: wrap; align-items: center; }
.comm-meta-sel { font-size: 11px; min-width: 70px; max-width: 120px; }
.comm-meta-input { background: var(--surface); border: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 11px; padding: 3px 6px; border-radius: 3px; outline: none; width: 110px; }
.comm-meta-input:focus { border-color: var(--accent); }

/* ── Community per-entry journal form ─────────────────────────────────────── */
.community-entry-journal { margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--border); }
.community-journal-form { display: flex; gap: 6px; align-items: center; }
.community-jrnl-input { flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 11px; padding: 4px 8px; border-radius: 3px; outline: none; }
.community-jrnl-input:focus { border-color: var(--accent); }
.community-jrnl-submit { font-size: 11px; padding: 4px 10px; }

/* ── Journal backlinks (community-ref markers) ───────────────────────────── */
.journal-backlink { display: inline-block; font-size: 11px; color: var(--accent); background: rgba(88,166,255,0.08); border: 1px solid rgba(88,166,255,0.25); border-radius: 3px; padding: 1px 6px; margin: 2px 0; cursor: pointer; white-space: nowrap; }
.journal-backlink:hover { background: rgba(88,166,255,0.18); }
.community-entry-highlight { animation: comm-flash 2s ease-out; }
@keyframes comm-flash { 0%, 30% { background: rgba(88,166,255,0.18); border-color: var(--accent); } 100% { background: var(--bg); border-color: var(--border); } }

/* ── Task → community inline panel ──────────────────────────────────────── */
.task-comm-panel { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 4px; background: var(--surface); border-top: 1px solid var(--border); font-size: 12px; }
.task-comm-label { font-size: 10px; color: var(--muted); white-space: nowrap; }
.task-comm-sel { min-width: 100px; font-size: 11px; }
.task-comm-input { background: var(--bg); border: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 11px; padding: 3px 6px; border-radius: 3px; outline: none; width: 100px; }
.task-comm-input:focus { border-color: var(--accent); }
.task-comm-pri { font-size: 11px; min-width: 48px; }

/* ── Community entry metadata badges ──────────────────────────────────────── */
.comm-tag-badge { font-size: 10px; background: rgba(88,166,255,0.12); color: var(--accent); border-radius: 2px; padding: 1px 5px; margin-left: 3px; }
.comm-tag-pill { font-size: 10px; background: rgba(63,185,80,0.10); color: #3fb950; border-radius: 2px; padding: 1px 5px; display: inline-block; }
.comm-entry-titlerow { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 2px; }
.comm-entry-titlerow .community-task-desc { margin: 0; flex: 1; min-width: 0; }
.comm-entry-proj { margin: 2px 0; }
.comm-entry-tags { display: flex; flex-wrap: wrap; gap: 3px; margin: 2px 0 3px; }
.comm-entry-meta-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 3px 0; }
.btn-comm-add { background: none; border: 1px solid rgba(180,130,20,0.5); color: #c8a44a; font-family: inherit; font-size: 11px; padding: 2px 9px; border-radius: 3px; cursor: pointer; white-space: nowrap; }
.btn-comm-add:hover { background: rgba(200,164,74,0.10); border-color: #c8a44a; }
/* ── Community two-column layout ─────────────────────────────────────────── */
.community-split-layout { display: flex; gap: 14px; align-items: flex-start; }
.community-main-col { flex: 1; min-width: 0; }
.comm-journal-mini { width: 240px; flex-shrink: 0; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; position: sticky; top: 0; }
.comm-jmini-hdr { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
.comm-jmini-sel-row { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.comm-journal-mini textarea { background: var(--bg); border: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 11px; padding: 5px 7px; border-radius: 3px; outline: none; }
.comm-journal-mini textarea:focus { border-color: var(--accent); }
@media (max-width: 880px) { .community-split-layout { flex-direction: column; } .comm-journal-mini { width: 100%; position: static; } }

/* ── Done tasks list ───────────────────────────────────────────────────────── */
.done-tasks-header { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; padding: 10px 4px 6px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.done-task-row { padding: 8px 4px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.done-task-row:last-child { border-bottom: none; }
.done-task-main { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.done-task-check { font-size: 11px; color: var(--success, #3fb950); flex-shrink: 0; }
.done-task-desc { font-size: 13px; color: var(--fg); line-height: 1.4; }
.done-task-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; padding-left: 20px; }
.done-task-date { font-size: 10px; color: var(--muted); margin-left: auto; white-space: nowrap; }
.done-task-revive { margin-left: 8px; font-size: 10px; padding: 2px 7px; border-radius: 3px; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; transition: color 0.15s, border-color 0.15s; }
.done-task-revive:hover { color: var(--accent); border-color: var(--accent); }
.done-task-revive:disabled { opacity: 0.4; cursor: default; }


/* ── Warlock panel ─────────────────────────────────────────────────────────── */
.warlock-status-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.warlock-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 3px; letter-spacing: 0.03em; }
.warlock-badge.running { background: var(--success, #3fb950); color: #000; }
.warlock-badge.stopped { background: var(--border); color: var(--muted); }
.warlock-badge.not-installed { background: var(--surface); border: 1px solid var(--border); color: var(--muted); }
.warlock-profile { font-size: 12px; color: var(--text); }
.warlock-hint { font-size: 11px; color: var(--muted); }
.warlock-open-link { font-size: 12px; color: var(--accent); text-decoration: none; margin-left: auto; }
.warlock-open-link:hover { text-decoration: underline; }
.warlock-meta { font-size: 11px; color: var(--muted); margin-top: 4px; }
.warlock-credit { font-size: 10px; color: var(--muted); margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--border); }
.warlock-credit a { color: var(--muted); }

/* ── Project cards ─────────────────────────────────────────────────────────── */
.proj-card { background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 12px 14px; margin-bottom: 10px; }
.proj-card:hover { border-color: rgba(88,166,255,0.3); }
.proj-card-highlight { animation: proj-flash 2s ease-out; }
@keyframes proj-flash { 0%, 35% { border-color: rgba(88,166,255,0.7); background: rgba(88,166,255,0.06); } 100% { border-color: var(--border); background: var(--surface); } }
.proj-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.proj-name { font-size: 13px; font-weight: 600; color: var(--text); }
.proj-desc { font-size: 11px; color: var(--muted); margin-bottom: 8px; }
.proj-master-badge { font-size: 10px; background: rgba(88,166,255,0.12); color: var(--accent); border-radius: 2px; padding: 1px 6px; letter-spacing: 0.03em; }
.proj-create-master-btn { font-size: 10px; padding: 1px 7px; }
.proj-active-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--success, #3fb950); margin-left: 2px; }
.proj-active-text { color: var(--success, #3fb950); }
.proj-task-summary { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.proj-task-counts { font-size: 11px; color: var(--muted); white-space: nowrap; }
.proj-progress-wrap { flex: 1; height: 3px; background: var(--border); border-radius: 2px; min-width: 60px; max-width: 160px; }
.proj-progress-bar { height: 100%; background: var(--accent); border-radius: 2px; transition: width 0.3s; }
.proj-next-row { display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; padding: 5px 8px; background: var(--bg); border-radius: 3px; border: 1px solid var(--border); }
.proj-next-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; }
.proj-next-desc { font-size: 12px; color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-next-urg { font-size: 10px; color: var(--muted); white-space: nowrap; }
.proj-stats { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.proj-stat-row { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.proj-stat-dim { opacity: 0.5; }
.proj-stat-icon { width: 14px; text-align: center; color: var(--muted); font-size: 10px; }
.proj-stat-val { color: var(--text); }
.proj-stat-muted { color: var(--muted); }
.proj-usage-hint { font-size: 10px; color: var(--muted); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); line-height: 1.6; }
.proj-usage-hint code { background: var(--bg); padding: 0 3px; border-radius: 2px; font-family: inherit; }

/* project card expand / detail */
.proj-card-header { cursor: pointer; user-select: none; }
.proj-expand-chevron { margin-left: auto; font-size: 14px; color: var(--muted); transition: transform 0.15s; line-height: 1; }
.proj-card[data-expanded="true"] .proj-expand-chevron { transform: rotate(90deg); }
.proj-detail { border-top: 1px solid var(--border); margin-top: 10px; padding-top: 10px; }
.proj-detail-loading { font-size: 11px; color: var(--muted); padding: 4px 0; }
.proj-detail-err { font-size: 11px; color: var(--error); padding: 4px 0; }
.proj-detail-inner { display: flex; flex-direction: column; gap: 14px; }
.proj-detail-section { display: flex; flex-direction: column; gap: 3px; }
.proj-detail-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 5px; display: flex; align-items: baseline; gap: 8px; }
.proj-detail-count { text-transform: none; letter-spacing: 0; color: var(--text); font-size: 11px; }
.proj-detail-row { display: flex; align-items: baseline; gap: 6px; font-size: 11px; padding: 2px 0; border-bottom: 1px solid rgba(33,38,45,0.6); }
.proj-detail-row:last-child { border-bottom: none; }
.proj-detail-master { background: rgba(88,166,255,0.05); padding: 3px 5px; border-radius: 2px; border-bottom: none !important; }
.proj-di-status { width: 12px; text-align: center; flex-shrink: 0; }
.proj-di-role { width: 12px; text-align: center; flex-shrink: 0; color: var(--accent); }
.proj-di-date { width: 78px; flex-shrink: 0; color: var(--muted); font-size: 10px; }
.proj-di-desc { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.proj-di-meta { font-size: 10px; color: var(--muted); white-space: nowrap; flex-shrink: 0; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.proj-time-summary { opacity: 0.85; }
.proj-time-total { border-top: 1px solid var(--border); margin-top: 2px; padding-top: 2px; font-weight: 500; opacity: 1; }
.proj-time-total .proj-di-meta { color: var(--text); }
.proj-di-dim { opacity: 0.6; }
.proj-di-tags { font-size: 10px; color: var(--clr-journal); white-space: nowrap; flex-shrink: 0; }
.proj-di-pri { font-size: 10px; color: var(--warning); width: 12px; flex-shrink: 0; }
.proj-detail-more { font-size: 10px; color: var(--muted); padding-top: 3px; font-style: italic; }
.proj-detail-empty { font-size: 11px; color: var(--muted); font-style: italic; padding: 2px 0; }

/* project detail sub-sections (done tasks, timew) */
.proj-subsection { margin-top: 4px; }
.proj-subsection-toggle { font-size: 10px; color: var(--muted); cursor: pointer; user-select: none; display: flex; align-items: center; gap: 4px; padding: 3px 0; }
.proj-subsection-toggle:hover { color: var(--text); }
.proj-subsec-chevron { display: inline-block; transition: transform 0.15s; font-size: 11px; }
.proj-timew-running { color: #3fb950; font-size: 11px; }
.proj-subsection-body { padding-top: 4px; }
.proj-detail-done .proj-di-desc { opacity: 0.55; }

/* per-project item filter row */
.proj-item-filter-row { padding: 2px 0; display: none; }
.proj-card[data-expanded="true"] .proj-item-filter-row { display: block; }
.proj-item-filter { background: transparent; border: none; border-bottom: 1px solid var(--border); color: var(--muted); font-size: 11px; font-family: inherit; outline: none; width: 100%; padding: 1px 2px; }
.proj-item-filter:focus { border-bottom-color: var(--accent); color: var(--text); }
.proj-item-filter::placeholder { color: var(--border); }

/* task row inline annotations */
.task-row-quick { display: inline-flex; gap: 4px; align-items: center; opacity: 0; transition: opacity 0.12s; margin-left: 4px; flex-shrink: 0; }
.task-row:hover .task-row-quick { opacity: 1; }
.task-quick-btn { background: none; border: 1px solid var(--border); color: var(--muted); font-size: 10px; padding: 1px 6px; border-radius: 3px; cursor: pointer; font-family: inherit; white-space: nowrap; }
.task-quick-btn:hover { border-color: var(--accent); color: var(--accent); }
.task-quick-input { display: flex; align-items: center; gap: 6px; padding: 3px 8px 3px 28px; background: var(--surface); border-bottom: 1px solid var(--border); }
.task-quick-input-field { flex: 1; background: transparent; border: none; border-bottom: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 12px; padding: 4px 3px; height: 28px; box-sizing: border-box; outline: none; }
.task-quick-input-field:focus { border-bottom-color: var(--accent); }
.task-row-ann { font-size: 11px; color: var(--muted); padding: 1px 6px 2px 28px; line-height: 1.4; }
.task-row-ann-date { color: var(--border); font-size: 10px; margin-right: 4px; }
.task-anns-hidden .task-row-ann { display: none; }

/* list row notes */
.list-row-note { flex: 0 0 100%; width: 100%; font-size: 11px; color: var(--muted); padding: 1px 4px 3px 28px; line-height: 1.4; border-top: 1px solid var(--border); margin-top: 2px; }

/* journal add form redesign */
.add-form-journal { flex-direction: column; align-items: stretch; gap: 4px; width: 100%; }
.add-form-journal textarea { width: 100%; resize: vertical; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 13px; padding: 6px 8px; border-radius: 3px; line-height: 1.5; }
.add-form-journal textarea:focus { outline: none; border-color: var(--accent); }
.add-form-journal .journal-meta-row { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; width: 100%; }
.journal-meta-input { background: transparent; border: none; border-bottom: 1px solid var(--border); color: var(--text); font-size: 11px; font-family: inherit; outline: none; padding: 2px 3px; flex: 1; min-width: 60px; width: 0; }
.journal-meta-input:focus { border-bottom-color: var(--accent); }
.journal-meta-input::placeholder { color: var(--muted); }
.journal-meta-select-sm { background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: 11px; font-family: inherit; padding: 1px 6px; border-radius: 2px; height: 22px; box-sizing: border-box; flex-shrink: 0; min-width: -moz-max-content; min-width: fit-content; width: auto; }
.jrnl-enter-label { cursor: pointer; flex-shrink: 0; }
.jrnl-enter-indicator { font-size: 12px; color: var(--muted); padding: 0 4px; border-radius: 2px; border: 1px solid var(--border); height: 22px; box-sizing: border-box; display: inline-flex; align-items: center; transition: color 0.15s, border-color 0.15s; }
#jrnl-enter-toggle:checked + .jrnl-enter-indicator { color: var(--accent); border-color: var(--accent); }
.jrnl-add-btn { flex-shrink: 0; height: 22px; box-sizing: border-box; padding-top: 2px; padding-bottom: 2px; }

.warlock-credit a:hover { color: var(--accent); }

/* tags screen */
.tag-card { border: 1px solid var(--border); border-radius: 4px; margin-bottom: 6px; overflow: hidden; }
.tag-card-head { display: flex; align-items: center; gap: 8px; padding: 6px 10px; cursor: pointer; user-select: none; }
.tag-card-head:hover { background: rgba(255,255,255,0.03); }
.tag-card-name { font-size: 13px; font-weight: 500; }
.tag-card-count { font-size: 11px; color: var(--muted); }
.tag-card-chevron { margin-left: auto; color: var(--muted); font-size: 11px; transition: transform 0.15s; }
.tag-card-open .tag-card-chevron { transform: rotate(90deg); }
.tag-card-body { display: none; border-top: 1px solid var(--border); }
.tag-card-open .tag-card-body { display: block; }
.tag-task-row { display: flex; align-items: center; justify-content: space-between; padding: 4px 10px; font-size: 12px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.tag-task-row:last-child { border-bottom: none; }
.tag-task-row:hover { background: rgba(255,255,255,0.03); }
.tag-task-desc { flex: 1; color: var(--text); }
.tag-task-meta { display: flex; gap: 4px; align-items: center; margin-left: 8px; flex-shrink: 0; }
.tag-more-note { font-size: 10px; color: var(--muted); padding: 3px 10px; font-style: italic; }

/* tags screen controls */
.toolbar-select-sm { background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: 11px; font-family: inherit; padding: 1px 5px; border-radius: 2px; height: 22px; box-sizing: border-box; cursor: pointer; }
.toolbar-select-sm:focus { outline: none; border-color: var(--accent); }
.tags-count-input { background: transparent; border: none; border-bottom: 1px solid var(--border); color: var(--text); font-size: 11px; font-family: inherit; padding: 2px 3px; width: 72px; height: 22px; box-sizing: border-box; outline: none; }
.tags-count-input:focus { border-bottom-color: var(--accent); }
.tags-count-input::placeholder { color: var(--muted); }
.tag-card-date { font-size: 10px; color: var(--muted); margin-left: 2px; }
.tag-task-date { font-size: 10px; color: var(--border); margin-left: 4px; }

/* tags chip filter rows */
.tags-chips-panel { padding: 4px 0 2px; display: flex; flex-direction: column; gap: 3px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.tags-chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 2px 0; }
.tags-chip-label { font-size: 10px; color: var(--muted); min-width: 42px; text-align: right; padding-right: 4px; flex-shrink: 0; letter-spacing: 0.03em; }
.tags-chip { background: none; border: 1px solid var(--border); color: var(--muted); font-size: 11px; font-family: inherit; padding: 1px 8px; border-radius: 10px; cursor: pointer; transition: border-color 0.12s, color 0.12s, background 0.12s; }
.tags-chip:hover { border-color: var(--accent); color: var(--text); }
.tags-chip-active { border-color: var(--accent) !important; color: var(--accent) !important; background: rgba(88,166,255,0.08) !important; }
.tags-chip-count { font-size: 10px; opacity: 0.7; }
.toolbar-pill-btn { background: none; border: 1px solid var(--border); color: var(--muted); font-size: 11px; font-family: inherit; padding: 1px 8px; border-radius: 10px; cursor: pointer; transition: border-color 0.12s, color 0.12s, background 0.12s; height: 22px; box-sizing: border-box; }
.toolbar-pill-btn:hover { border-color: var(--accent); color: var(--text); }
.toolbar-pill-btn.tags-chip-active { border-color: #f85149 !important; color: #f85149 !important; background: rgba(248,81,73,0.08) !important; }
.tags-chip-uda-mini { font-size: 10px; color: var(--muted); background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: 3px; padding: 0 4px; margin-left: 3px; }

/* task dependency badges (row) */
.dep-badge { font-size: 10px; padding: 1px 5px; border-radius: 3px; border: 1px solid; margin-left: 3px; flex-shrink: 0; }
.dep-blocked { color: #f0883e; border-color: rgba(240,136,62,0.4); background: rgba(240,136,62,0.08); }
.dep-blocking { color: #58a6ff; border-color: rgba(88,166,255,0.4); background: rgba(88,166,255,0.08); }

/* task dependency inline section */
.task-dep-section { border-top: 1px solid var(--border); padding: 6px 0 4px; margin-top: 4px; }
.dep-section-head { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
.dep-group-label { font-size: 10px; color: var(--muted); margin: 3px 0 1px; }
.dep-task-row { display: flex; align-items: center; gap: 6px; padding: 2px 0; font-size: 12px; }
.dep-task-id { font-size: 10px; color: var(--muted); flex-shrink: 0; }
.dep-task-desc { flex: 1; color: var(--text); }
.dep-task-desc:hover { color: var(--accent); }
.dep-rm-btn { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 13px; padding: 0 3px; line-height: 1; }
.dep-rm-btn:hover { color: #f85149; }
.dep-empty { font-size: 11px; color: var(--muted); padding: 2px 0; }
.dep-add-row { display: flex; gap: 6px; align-items: center; margin-top: 5px; }
.dep-add-input { flex: 1; background: transparent; border: none; border-bottom: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 12px; padding: 2px 3px; outline: none; }
.dep-add-input:focus { border-bottom-color: var(--accent); }
.dep-add-row { flex-wrap: wrap; }
.dep-input-preview { width: 100%; display: flex; align-items: center; gap: 6px; font-size: 11px; padding: 3px 4px; background: rgba(88,166,255,0.06); border-radius: 3px; margin-top: 3px; }
.dep-preview-id { color: var(--muted); font-size: 10px; flex-shrink: 0; }
.dep-preview-desc { color: var(--text); flex: 1; }
.task-quick-dep-row { flex-wrap: wrap; }
.task-quick-dep-input { flex: 1; min-width: 140px; background: transparent; border: none; border-bottom: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 12px; padding: 4px 3px; height: 28px; box-sizing: border-box; outline: none; }
.task-quick-dep-input:focus { border-bottom-color: var(--accent); }
.task-quick-dep-select { background: var(--surface); border: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 11px; padding: 2px 4px; border-radius: 3px; max-width: 200px; }
.task-quick-dep-preview { width: 100%; display: flex; align-items: center; gap: 6px; font-size: 11px; padding: 3px 4px; background: rgba(88,166,255,0.06); border-radius: 3px; margin-top: 2px; }

/* ── Archive / delete button ──────────────────────────────────────────────── */
.act-archive, .ledger-archive-btn, .entry-archive-btn { color: var(--muted); opacity: 0.6; }
.act-archive:hover, .ledger-archive-btn:hover, .entry-archive-btn:hover { color: #f85149; opacity: 1; border-color: rgba(248,81,73,0.4) !important; }
.entry-delete-btn { color: var(--muted); opacity: 0.4; }
.entry-delete-btn:hover { color: #f85149; opacity: 1; border-color: rgba(248,81,73,0.6) !important; font-weight: 600; }

/* ── Confirm modal ────────────────────────────────────────────────────────── */
.confirm-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 9000; }
.confirm-dialog { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 20px 24px; min-width: 300px; max-width: 420px; box-shadow: 0 8px 32px rgba(0,0,0,0.4); }
.confirm-title { font-size: 13px; font-weight: 600; margin-bottom: 10px; color: var(--text); text-transform: capitalize; }
.confirm-body { font-size: 12px; color: var(--muted); margin-bottom: 16px; line-height: 1.5; }
.confirm-body strong { color: var(--text); }
.confirm-body code { font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--muted); }
.confirm-actions { display: flex; gap: 8px; justify-content: flex-end; }
.confirm-ok-btn { background: rgba(248,81,73,0.12) !important; border-color: rgba(248,81,73,0.4) !important; color: #f85149 !important; }
.confirm-ok-btn:hover { background: rgba(248,81,73,0.22) !important; }

/* ── ww Help Panel ────────────────────────────────────────────────────────── */
.ww-help-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.65); z-index: 8000; display: flex; align-items: center; justify-content: center; }
.ww-help-overlay.hidden { display: none; }
.ww-help-panel { width: 820px; max-width: 95vw; height: 82vh; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,0.5); }
.ww-help-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.ww-help-title { font-size: 13px; font-weight: bold; color: var(--text); }
.ww-help-title .ww-help-ww { color: var(--accent); }
.ww-help-close { background: none; border: none; color: var(--muted); font-size: 18px; cursor: pointer; padding: 0 4px; line-height: 1; font-family: inherit; }
.ww-help-close:hover { color: var(--text); }
.ww-help-body { display: flex; flex: 1; overflow: hidden; }
.ww-help-nav { width: 150px; min-width: 150px; border-right: 1px solid var(--border); overflow-y: auto; padding: 6px 0; flex-shrink: 0; }
.ww-help-nav-item { display: block; width: 100%; background: none; border: none; border-left: 2px solid transparent; padding: 5px 12px; text-align: left; color: var(--muted); font-family: inherit; font-size: 11px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; }
.ww-help-nav-item:hover { background: var(--bg); color: var(--text); }
.ww-help-nav-item.wh-active { color: var(--accent); background: rgba(88,166,255,0.07); border-left-color: var(--accent); padding-left: 10px; }
.ww-help-nav-sep { font-size: 9px; color: var(--border); text-transform: uppercase; letter-spacing: 0.08em; padding: 8px 12px 2px; }
.ww-help-content { flex: 1; overflow-y: auto; padding: 16px 20px; font-size: 12px; line-height: 1.65; }
.ww-help-content h2 { font-size: 14px; font-weight: bold; color: var(--text); margin: 0 0 8px; }
.ww-help-content h3 { font-size: 11px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em; margin: 16px 0 5px; border-bottom: 1px solid var(--border); padding-bottom: 3px; }
.ww-help-content p { color: var(--muted); margin: 0 0 8px; }
.ww-help-content pre { background: var(--bg); border: 1px solid var(--border); border-radius: 3px; padding: 8px 12px; overflow-x: auto; margin: 4px 0 10px; }
.ww-help-content code { color: var(--term-green); font-size: 11px; font-family: inherit; }
.ww-help-content pre code { display: block; white-space: pre; }
.ww-help-content p code, .ww-help-content li code { background: rgba(57,211,83,0.1); padding: 1px 4px; border-radius: 2px; }
.ww-help-content table { border-collapse: collapse; width: 100%; margin: 4px 0 10px; }
.ww-help-content th { text-align: left; font-size: 10px; color: var(--muted); border-bottom: 1px solid var(--border); padding: 2px 10px 2px 0; text-transform: uppercase; letter-spacing: 0.05em; }
.ww-help-content td { font-size: 11px; color: var(--muted); padding: 3px 10px 3px 0; vertical-align: top; border-bottom: 1px solid rgba(33,38,45,0.5); }
.ww-help-content td:first-child { color: var(--term-green); font-family: inherit; white-space: nowrap; padding-right: 14px; }
.ww-help-content ul { padding-left: 16px; margin: 0 0 8px; }
.ww-help-content li { color: var(--muted); font-size: 11px; margin-bottom: 2px; }

/* ── Terminal bar restructure ─────────────────────────────────────────────── */
#terminal-input-row { display: flex; align-items: center; padding: 6px 12px; gap: 4px; }
#term-input { flex: 1; min-width: 220px; background: transparent; border: none; outline: none; color: var(--text); font-family: inherit; font-size: 13px; }
.term-icon-btn { background: none; border: none; color: var(--muted); cursor: pointer; padding: 2px 5px; font-size: 12px; line-height: 1; border-radius: 3px; transition: color 150ms; }
.term-icon-btn:hover { color: var(--text); }
.term-icon-btn.active { color: var(--accent); }
.term-dot-ctx { font-size: 10px; color: var(--muted); padding: 1px 5px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; white-space: nowrap; }
.term-dot-ctx:hover { color: var(--text); border-color: var(--muted); }

/* ── Context sidebar panel ────────────────────────────────────────────────── */
.ctx-sidebar { position: fixed; bottom: var(--term-h); right: 0; width: 260px; background: var(--surface); border-left: 1px solid var(--border); border-top: 1px solid var(--border); max-height: 60vh; overflow-y: auto; z-index: 150; font-size: 11px; color: var(--muted); padding: 0; box-shadow: -3px -3px 12px rgba(0,0,0,0.35); transition: transform 200ms ease; }
.ctx-sidebar.hidden { display: none; }
.ctx-sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 5px 10px; border-bottom: 1px solid var(--border); background: var(--bg); position: sticky; top: 0; z-index: 1; }
.ctx-sidebar-header-title { font-size: 9px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.ctx-sidebar-close { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; font-family: inherit; }
.ctx-sidebar-close:hover { color: var(--text); }
#ctx-sidebar-content { padding: 10px 12px; }
.ctx-sidebar-section { margin-bottom: 10px; }
.ctx-sidebar-title { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.ctx-sidebar-stat { color: var(--text); font-size: 11px; margin-bottom: 2px; }
.ctx-sidebar-recent { list-style: none; padding: 0; margin: 0; }
.ctx-sidebar-recent li { display: flex; gap: 6px; margin-bottom: 3px; overflow: hidden; cursor: pointer; }
.ctx-sidebar-recent li:hover .ctx-recent-body { color: var(--text); }
.ctx-recent-date { color: var(--muted); white-space: nowrap; min-width: 48px; }
.ctx-recent-body { color: var(--text); opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctx-sidebar-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.ctx-tag-chip { font-size: 10px; padding: 1px 5px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.ctx-tag-chip:hover { border-color: var(--muted); color: var(--text); }
.ctx-sidebar-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; border-top: 1px solid var(--border); padding-top: 8px; }
.ctx-action-btn { background: none; border: 1px solid var(--border); color: var(--muted); font-size: 10px; padding: 2px 7px; border-radius: 3px; cursor: pointer; font-family: inherit; }
.ctx-action-btn:hover { color: var(--text); border-color: var(--muted); }
.ctx-write-mode-toggle { font-size: 10px; color: var(--muted); cursor: pointer; display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.ctx-write-mode-toggle:hover { color: var(--text); }
.ctx-write-mode-toggle .ctx-wm-active { color: var(--accent); }

/* ── Journal writing card ─────────────────────────────────────────────────── */
.journal-write-card { position: fixed; left: 50%; transform: translateX(-50%); z-index: 200; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 8px 32px rgba(0,0,0,.5); width: min(680px, calc(100vw - 48px)); display: flex; flex-direction: column; transition: top 200ms ease, max-height 200ms ease; }
.journal-write-card.mode-float { top: 50%; transform: translate(-50%, -50%); max-height: calc(100vh - 160px); }
.journal-write-card.mode-top { top: 60px; transform: translateX(-50%); max-height: calc(100vh - 180px); border-radius: 0 0 6px 6px; width: calc(100vw - var(--sidebar-w) - 60px); left: calc(var(--sidebar-w) + 30px); transform: none; }
.journal-write-card.hidden { display: none; }
.jwc-header { display: flex; align-items: stretch; border-bottom: 1px solid var(--border); }
.jwc-meta { flex: 1; padding: 8px 14px 6px; font-size: 11px; color: var(--muted); display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: color 150ms; user-select: none; }
.jwc-meta:hover { color: var(--text); }
.jwc-meta:hover .jwc-back-hint { opacity: 1; }
.jwc-close-btn { background: none; border: none; border-left: 1px solid var(--border); color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 12px; font-family: inherit; flex-shrink: 0; }
.jwc-close-btn:hover { color: var(--text); background: rgba(255,255,255,.04); }
.jwc-back-hint { opacity: 0; font-size: 10px; color: var(--accent); transition: opacity 150ms; white-space: nowrap; }
.jwc-meta-confirm { padding: 6px 14px; font-size: 11px; border-bottom: 1px solid var(--border); display: flex; gap: 10px; align-items: center; background: var(--bg); }
.jwc-confirm-btn { background: none; border: 1px solid var(--border); color: var(--muted); font-size: 10px; padding: 2px 8px; border-radius: 3px; cursor: pointer; font-family: inherit; }
.jwc-confirm-btn:hover { color: var(--text); border-color: var(--muted); }
.jwc-discard:hover { color: var(--error); border-color: var(--error); }
.jwc-cancel:hover { color: var(--muted); }
#jwc-textarea { flex: 1; min-height: calc(3 * 1.5 * 14px); background: transparent; border: none; outline: none; resize: none; color: var(--text); font-family: inherit; font-size: 14px; line-height: 1.6; padding: 14px 16px calc(3 * 1.6 * 14px) 16px; overflow-y: auto; }
.journal-write-card.mode-top #jwc-textarea { font-size: 13px; caret-color: var(--term-green); }
.jwc-hint { padding: 4px 14px 8px; font-size: 10px; color: var(--muted); opacity: .5; text-align: right; transition: opacity 600ms; }
.jwc-hint.faded { opacity: 0; }

/* ── Webwarrior additions ──────────────────────────────────────────────────── */

/* Week chart */
.week-chart { display:flex; gap:6px; align-items:flex-end; height:80px; padding:8px 0; }
.week-bar-col { display:flex; flex-direction:column; align-items:center; gap:2px; flex:1; }
.week-bar-wrap { height:50px; width:100%; display:flex; align-items:flex-end; }
.week-bar { width:100%; background:var(--clr-time); opacity:0.6; border-radius:2px 2px 0 0; min-height:2px; }
.week-bar-today .week-bar { opacity:1; background:var(--accent); }
.week-bar-label { font-size:10px; color:var(--muted); }
.week-bar-val { font-size:9px; color:var(--muted); white-space:nowrap; }

/* Time today */
.time-today { padding:12px 0 8px; display:flex; align-items:baseline; gap:8px; }
.time-today-big { font-size:32px; color:var(--clr-time); font-weight:bold; }
.time-today-label { font-size:12px; color:var(--muted); }
.time-active-badge { font-size:11px; color:var(--success); border:1px solid var(--success); padding:1px 8px; border-radius:3px; }

/* Intervals */
.time-interval-row { display:flex; align-items:center; gap:8px; padding:5px 0; border-bottom:1px solid var(--border); font-size:12px; }
.time-interval-row:hover .task-action-delete { opacity:1; }
.time-interval-active { background:rgba(63,185,80,0.05); }
.time-active-dot { color:var(--success); font-size:8px; }
.time-interval-tags { flex:1; color:var(--text); }
.time-interval-dur { color:var(--clr-time); width:60px; text-align:right; }
.time-interval-start { color:var(--muted); font-size:11px; width:120px; }

/* Journal additions */
.journal-date-group { margin-bottom:12px; }
.journal-date-header { font-size:11px; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; padding:4px 0; border-bottom:1px solid var(--border); margin-bottom:8px; }
.journal-entry { padding:8px 0 6px; border-bottom:1px solid var(--border); }
.journal-entry-time { font-size:10px; color:var(--muted); margin-bottom:3px; }
.journal-entry-body { font-size:13px; line-height:1.6; white-space:pre-wrap; word-break:break-word; }
.journal-entry-meta { margin-top:5px; display:flex; gap:4px; flex-wrap:wrap; }
.journal-annotation { font-size:11px; color:var(--muted); padding:2px 0 2px 12px; border-left:2px solid var(--border); margin-top:4px; }
.journal-ann-date { font-size:10px; color:var(--border); }
.journal-entry-actions { margin-top:5px; display:flex; gap:6px; opacity:0; transition:opacity 0.1s; }
.journal-entry:hover .journal-entry-actions { opacity:1; }

/* Ledger additions */
.ledger-balance-list { display:flex; flex-direction:column; gap:3px; }
.ledger-balance-row { display:flex; align-items:center; justify-content:space-between; padding:4px 0; border-bottom:1px solid var(--border); font-size:12px; }
.ledger-section-header { font-size:10px; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; margin:4px 0 2px; }
.ledger-register-list { display:flex; flex-direction:column; gap:2px; }
.ledger-register-row { display:flex; align-items:center; gap:8px; padding:4px 0; border-bottom:1px solid var(--border); font-size:12px; }
.ledger-reg-date { color:var(--muted); width:80px; flex-shrink:0; }
.ledger-reg-desc { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ledger-account { flex:1; font-size:11px; }
.ledger-amount { text-align:right; font-variant-numeric:tabular-nums; width:80px; flex-shrink:0; }
.ledger-txn-row { display:flex; align-items:center; gap:6px; padding:5px 0; border-bottom:1px solid var(--border); font-size:12px; flex-wrap:wrap; }
.ledger-income-report .ledger-balance-row { justify-content:space-between; }

/* Task additions */
.task-group-header { font-size:11px; color:var(--accent); font-weight:bold; letter-spacing:.04em; padding:6px 10px; border-bottom:1px solid var(--border); margin-bottom:4px; display:flex; align-items:center; gap:6px; border-left: 3px solid var(--accent); background: rgba(88,166,255,0.04); border-radius: 3px; }
.task-group-header.task-group-overdue { border-left-color: var(--error); color: var(--error); }
.task-group-count { background:var(--border); border-radius:9px; padding:0 6px; font-size:10px; color:var(--muted); font-weight: normal; margin-left: auto; }
.task-checkbox { width:14px; height:14px; flex-shrink:0; cursor:pointer; accent-color:var(--accent); }
.task-urgency-badge { font-size:10px; color:var(--muted); width:32px; text-align:right; flex-shrink:0; }
.urgency-high .task-urgency-badge { color:var(--error); }
.urgency-med .task-urgency-badge { color:var(--warning); }
.task-done-row { opacity:0.5; }
.task-done-desc { text-decoration:line-through; }
.task-meta-muted { font-size:11px; color:var(--muted); }

/* Tags */
.tag-chip { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; background:var(--surface); border:1px solid var(--border); border-radius:12px; font-size:11px; cursor:pointer; margin:2px; }
.tag-chip:hover { border-color:var(--accent); color:var(--accent); }
.tag-count { font-size:10px; color:var(--muted); }
.tags-chips-panel { padding:8px 0; line-height:2; }

/* Tag bars (expandable) */
.tag-bar { border: 1px solid var(--border); border-radius: 4px; margin-bottom: 6px; overflow: hidden; }
.tag-bar-header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; transition: background 0.1s; }
.tag-bar-header:hover { background: var(--surface); }
.tag-bar-name { color: rgba(63,185,80,0.7); font-size: 12px; font-weight: 600; border: 1px solid rgba(63,185,80,0.35); border-radius: 3px; padding: 1px 8px; }
.tag-bar-count { font-size: 11px; color: var(--muted); }
.tag-bar-date { font-size: 10px; color: var(--muted); margin-left: auto; }
.tag-bar-caret { font-size: 10px; color: var(--muted); flex-shrink: 0; }
.tag-bar-tasks { padding: 0 12px 8px; }
.tag-bar-tasks.hidden { display: none; }
.tag-task-item { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-bottom: 1px solid var(--border); font-size: 12px; cursor: pointer; }
.tag-task-item:last-child { border-bottom: none; }
.tag-task-item:hover { background: rgba(255,255,255,0.03); }

/* Project cards (expandable) */
.project-card { border: 1px solid var(--border); border-radius: 4px; margin-bottom: 10px; overflow: hidden; }
.project-card-header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; transition: background 0.1s; }
.project-card-header:hover { background: var(--surface); }
.project-card-name { font-size: 14px; font-weight: 700; color: var(--text); }
.project-card-meta { font-size: 11px; color: var(--muted); }
.project-card-bar { flex: 0 0 80px; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.project-card-bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 2px; transition: width 0.3s; }
.project-card-caret { font-size: 10px; color: var(--muted); margin-left: auto; flex-shrink: 0; }
.project-card-body { padding: 0 14px 12px; }
.project-card-body.hidden { display: none; }
.project-next-task { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: rgba(88,166,255,0.04); border: 1px solid rgba(88,166,255,0.15); border-radius: 3px; margin-bottom: 10px; cursor: pointer; }
.project-next-task:hover { background: rgba(88,166,255,0.08); }
.project-section { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.project-section-label { font-size: 10px; color: var(--muted); font-weight: bold; letter-spacing: 0.04em; margin-bottom: 4px; }
.project-section-empty { font-size: 11px; color: var(--muted); font-style: italic; padding: 2px 0; }
.project-task-item { font-size: 12px; color: var(--text); padding: 3px 8px; cursor: pointer; border-radius: 2px; }
.project-task-item:hover { background: rgba(255,255,255,0.04); }
.project-task-done { opacity: 0.5; text-decoration: line-through; }
.project-journal-item, .project-ledger-item, .project-time-item { font-size: 11px; color: var(--muted); padding: 2px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-clickable { cursor: pointer; border-radius: 2px; transition: background 0.1s, color 0.1s; }
.project-clickable:hover { background: rgba(255,255,255,0.04); color: var(--text); }
.project-time-total { font-size: 13px; color: var(--accent); font-weight: 600; padding: 4px 8px; }
.project-done-details { margin-top: 4px; }

/* Profile list */
.profile-list-item { display:flex; align-items:center; gap:8px; padding:7px 10px; border-bottom:1px solid var(--border); }
.profile-list-item.active-profile { border-left:3px solid var(--accent); padding-left:7px; }
.profile-list-name { flex:1; font-size:13px; }

/* Confirm modal */
.confirm-overlay { position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:8888; display:flex; align-items:center; justify-content:center; }
.confirm-overlay.hidden { display:none; }
.confirm-dialog { background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:20px; min-width:260px; max-width:400px; }
.confirm-msg { font-size:13px; margin-bottom:14px; color:var(--text); }
.confirm-actions { display:flex; gap:8px; justify-content:flex-end; }

/* Density modes */
body[data-density="compact"] .task-row { padding:2px 0; }
body[data-density="relaxed"] .task-row { padding:7px 0; }
body[data-density="compact"] .journal-entry { padding:5px 0 3px; }
body[data-density="relaxed"] .journal-entry { padding:12px 0 10px; }

/* Hledger output area */
#hledger-output { margin:8px 0; min-height:40px; }

/* Action buttons hide by default on non-hover devices */
.task-action-delete { opacity:0; transition:opacity 0.1s; }
.task-row:hover .task-action-delete,
.time-interval-row:hover .task-action-delete,
.ledger-txn-row:hover .task-action-delete { opacity:1; }

/* Active btn state */
.btn-toolbar.active, .journal-filter-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.hl-btn.active { background:rgba(88,166,255,0.15); color:var(--accent); border-color:var(--accent); }

/* Task component classes */
.task-tag { display:inline-block; padding:0 5px; background:rgba(63,185,80,0.1); border:1px solid rgba(63,185,80,0.25); border-radius:3px; font-size:10px; color:var(--clr-tasks); }
.task-project-badge { display:inline-block; padding:0 6px; background:rgba(210,180,60,0.1); border:1px solid rgba(210,180,60,0.25); border-radius:3px; font-size:10px; color:#d4b840; }
.task-priority { font-size:11px; font-weight:bold; flex-shrink:0; }
.task-due { font-size:10px; padding:0 5px; border-radius:3px; flex-shrink:0; }
.task-due-future { color:var(--muted); background:rgba(125,133,144,0.1); }
.task-due-soon { color:var(--warning); background:rgba(210,153,34,0.1); border:1px solid rgba(210,153,34,0.2); }
.task-due-today { color:var(--accent); background:rgba(88,166,255,0.1); border:1px solid rgba(88,166,255,0.2); }
.task-due-overdue { color:var(--error); background:rgba(248,81,73,0.1); border:1px solid rgba(248,81,73,0.2); }
.task-action-btn { background:none; border:none; color:var(--muted); font-size:12px; font-family:inherit; cursor:pointer; padding:2px 6px; border-radius:3px; transition: color 0.1s; }
.task-action-btn:hover { color:var(--text); background:rgba(255,255,255,0.06); }
.task-action-btn.task-action-delete:hover { color:var(--error); }
.task-annotations { padding:2px 0 2px 20px; }
.task-ann { font-size:11px; color:var(--muted); border-left:2px solid var(--border); padding-left:6px; margin:2px 0; display:flex; align-items:baseline; }

/* Annotation hover actions */
.ann-hover-actions { display: inline-flex; gap: 3px; margin-left: 8px; opacity: 0; transition: opacity 0.12s; }
.task-ann:hover .ann-hover-actions,
.journal-annotation:hover .ann-hover-actions { opacity: 1; }
.ann-hover-btn { background: none; border: 1px solid var(--border); color: var(--muted); font-family: inherit; font-size: 9px; padding: 1px 5px; border-radius: 2px; cursor: pointer; white-space: nowrap; }
.ann-hover-btn:hover { border-color: var(--accent); color: var(--accent); }
/* Annotation inline drop */
.ann-inline-drop { display: none; padding: 4px 0 4px 20px; }
.ann-inline-drop.open { display: flex; align-items: center; gap: 6px; animation: dropSlide 0.12s ease-out; }
.ann-inline-drop-input { flex: 1; background: transparent; border: none; border-bottom: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 11px; padding: 3px 2px; outline: none; }
.ann-inline-drop-input:focus { border-bottom-color: var(--accent); }
.ann-inline-drop-select { background: var(--surface); border: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 10px; padding: 1px 4px; border-radius: 3px; }
.ann-inline-drop-btn { background: none; border: 1px solid var(--border); color: var(--muted); font-family: inherit; font-size: 10px; padding: 1px 6px; border-radius: 3px; cursor: pointer; }
.ann-inline-drop-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ── Next section ─────────────────────────────────────────────────────────── */
.next-card { background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:12px 14px; margin-bottom:10px; }
.next-card.next-card-primary { border-color:var(--accent); }
.next-card-rank { font-size:10px; color:var(--muted); margin-bottom:4px; letter-spacing:0.5px; text-transform:uppercase; }
.next-card-main { font-size:14px; color:var(--text); font-weight:500; }
.next-card-desc { font-size:12px; color:var(--muted); margin-top:3px; }
.next-card-rationale { font-size:11px; color:var(--accent); margin-top:5px; opacity:0.8; }
.next-card-meta { display:flex; gap:8px; align-items:center; margin-top:6px; flex-wrap:wrap; }
.next-overdue-list { padding:10px 0; }
.next-overdue-item { font-size:12px; color:var(--error); padding:2px 0; }
.next-upcoming-item { font-size:12px; padding:2px 0; }
.next-upcoming-date { color:var(--warning); }
.next-upcoming-desc { color:var(--muted); margin-left:6px; }
.next-empty { font-size:12px; color:var(--success); padding:10px 0; }

/* ── Warrior (cross-profile) section ─────────────────────────────────────── */
.warrior-profile-card { background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:10px 14px; margin-bottom:8px; }
.warrior-profile-name { font-size:13px; font-weight:500; color:var(--accent); margin-bottom:6px; }
.warrior-stats-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(90px, 1fr)); gap:6px; }
.warrior-stat { text-align:center; background:rgba(0,0,0,0.2); border-radius:4px; padding:5px 8px; }
.warrior-stat-num { font-size:18px; font-weight:bold; color:var(--text); line-height:1.2; }
.warrior-stat-label { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:0.4px; }
.warrior-totals { background:var(--surface); border:1px solid var(--accent); border-radius:6px; padding:10px 14px; margin-bottom:12px; }
.warrior-totals-title { font-size:11px; color:var(--accent); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:6px; }

/* ── Community section ───────────────────────────────────────────────────── */
.community-toolbar { display:flex; gap:6px; align-items:center; padding:8px 0; flex-wrap:wrap; }
.community-tab { padding:3px 10px; font-size:12px; border:1px solid var(--border); border-radius:3px; background:none; color:var(--muted); cursor:pointer; font-family:inherit; }
.community-tab.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.community-entry { background:var(--surface); border:1px solid var(--border); border-radius:5px; padding:10px 12px; margin-bottom:8px; }
.community-entry-header { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.community-type-badge { font-size:10px; padding:1px 6px; border-radius:3px; font-weight:500; letter-spacing:0.3px; }
.community-type-badge.type-task    { background:rgba(88,166,255,0.15); color:var(--accent); border:1px solid rgba(88,166,255,0.2); }
.community-type-badge.type-journal { background:rgba(63,185,80,0.15);  color:var(--success); border:1px solid rgba(63,185,80,0.2); }
.community-type-badge.type-ledger  { background:rgba(210,153,34,0.15); color:var(--warning); border:1px solid rgba(210,153,34,0.2); }
.community-entry-profile { font-size:11px; color:var(--muted); }
.community-entry-time   { font-size:11px; color:var(--muted); margin-left:auto; }
.community-entry-content { font-size:12px; color:var(--text); white-space:pre-wrap; }
.community-entry-tags { margin-top:5px; }
.community-comments { margin-top:8px; padding-top:6px; border-top:1px solid var(--border); }
.community-comment { font-size:11px; color:var(--muted); padding:2px 0; }
.community-comment-author { color:var(--text); font-weight:500; }
.community-add-comment { display:flex; gap:6px; margin-top:5px; }
.community-add-comment input { flex:1; min-width:0; }
.community-collection-bar { display:flex; gap:6px; align-items:center; padding:6px 0 10px; flex-wrap:wrap; border-bottom:1px solid var(--border); margin-bottom:10px; }
.community-coll-btn { padding:2px 10px; font-size:11px; border:1px solid var(--border); border-radius:12px; background:none; color:var(--muted); cursor:pointer; font-family:inherit; }
.community-coll-btn.active { border-color:var(--accent); color:var(--accent); background:rgba(88,166,255,0.07); }

/* ── Questions section ───────────────────────────────────────────────────── */
.question-template-list { padding:8px 0; }
.question-template-item { display:flex; align-items:center; gap:8px; padding:7px 10px; border-bottom:1px solid var(--border); cursor:pointer; }
.question-template-item:hover { background:rgba(255,255,255,0.03); }
.question-template-name { flex:1; font-size:13px; }
.question-template-type { font-size:10px; color:var(--muted); }
.question-form { padding:10px 0; }
.question-field { margin-bottom:10px; }
.question-label { font-size:11px; color:var(--muted); margin-bottom:4px; display:block; }
.question-form textarea { width:100%; min-height:80px; resize:vertical; }
.question-form select  { width:100%; }

/* ── Lists section ───────────────────────────────────────────────────────── */
.list-selector { display:flex; gap:6px; flex-wrap:wrap; padding:6px 0 10px; border-bottom:1px solid var(--border); margin-bottom:10px; }
.list-selector-btn { padding:3px 10px; font-size:11px; border:1px solid var(--border); border-radius:12px; background:none; color:var(--muted); cursor:pointer; font-family:inherit; }
.list-selector-btn.active { border-color:var(--accent); color:var(--accent); background:rgba(88,166,255,0.07); }
.list-item-row { display:flex; align-items:center; gap:8px; padding:5px 0; border-bottom:1px solid var(--border); }
.list-item-text { flex:1; font-size:12px; }
.list-item-done .list-item-text { text-decoration:line-through; color:var(--muted); }
.list-item-checkbox { width:14px; height:14px; accent-color:var(--accent); }

/* ── Projects section ────────────────────────────────────────────────────── */
.project-group { margin-bottom:14px; }
.project-group-header { font-size:12px; font-weight:500; color:var(--accent); padding:5px 0 4px; border-bottom:1px solid var(--border); margin-bottom:5px; display:flex; align-items:center; gap:6px; }
.project-task-row { display:flex; align-items:center; gap:6px; padding:3px 0 3px 10px; font-size:12px; }
.project-task-status { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.project-task-status.status-pending   { background:var(--muted); }
.project-task-status.status-active    { background:var(--success); }
.project-task-status.status-completed { background:var(--border); }

/* ── Task Expand button ───────────────────────────────────────────────────── */
.task-expand-btn {
  background: none; border: none; color: var(--muted); font-size: 13px;
  cursor: pointer; padding: 1px 4px; border-radius: 2px; opacity: 0;
  transition: opacity 0.1s, transform 0.15s; line-height: 1;
  font-family: inherit;
}
.task-row:hover .task-expand-btn { opacity: 1; }
.task-row.drawer-open .task-expand-btn { opacity: 1; transform: rotate(-90deg); color: var(--accent); }

/* ── Task Drawer ──────────────────────────────────────────────────────────── */
.task-drawer {
  position: fixed; inset: 0; z-index: 900;
  pointer-events: none;
}
.task-drawer:not(.hidden) { pointer-events: auto; }

.task-drawer-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0);
  transition: background 0.2s;
}
.task-drawer:not(.hidden) .task-drawer-backdrop {
  background: rgba(0,0,0,0.55);
}

.task-drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 58%; min-width: 480px; max-width: 860px;
  background: var(--bg);
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.22s cubic-bezier(0.4,0,0.2,1);
  overflow: hidden;
}
.task-drawer:not(.hidden) .task-drawer-panel {
  transform: translateX(0);
}

/* Header */
.tdr-header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0; flex-wrap: wrap; min-height: 44px;
}
.tdr-urgency-score {
  font-size: 13px; font-weight: bold; color: var(--accent);
  background: rgba(88,166,255,0.1); border: 1px solid rgba(88,166,255,0.25);
  border-radius: 4px; padding: 1px 7px; flex-shrink: 0;
}
.tdr-project-badge {
  font-size: 11px; padding: 1px 7px;
  background: rgba(210,180,60,0.1); border: 1px solid rgba(210,180,60,0.25);
  border-radius: 3px; color: #d4b840; flex-shrink: 0;
}
.tdr-header-title {
  font-size: 13px; font-weight: 500; color: var(--text);
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tdr-header-tags { display: flex; gap: 4px; flex-shrink: 0; flex-wrap: wrap; }
.tdr-header-actions { display: flex; gap: 5px; flex-shrink: 0; margin-left: auto; }
.tdr-header-actions button {
  font-size: 11px; padding: 2px 9px;
  border-radius: 3px; cursor: pointer; font-family: inherit;
  border: 1px solid var(--border); background: none; color: var(--muted);
  transition: background 0.1s, color 0.1s;
}
.tdr-header-actions button:hover { background: var(--surface); color: var(--text); }
.tdr-header-actions .tdr-btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.tdr-header-actions .tdr-btn-primary:hover { opacity: 0.85; }
.tdr-close-btn {
  background: none; border: 1px solid var(--border); color: var(--muted); font-size: 14px;
  cursor: pointer; padding: 4px 10px; border-radius: 3px; flex-shrink: 0;
  font-family: inherit; transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.tdr-close-btn:hover { color: var(--error); border-color: var(--error); background: rgba(248,81,73,0.06); }
.tdr-close {
  background: none; border: 1px solid var(--border); color: var(--muted); font-size: 14px;
  cursor: pointer; padding: 4px 10px; border-radius: 3px; flex-shrink: 0;
  font-family: inherit; transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.tdr-close:hover { color: var(--error); border-color: var(--error); background: rgba(248,81,73,0.06); }

/* Body */
.tdr-body {
  flex: 1; overflow-y: auto; padding: 12px 16px 32px;
}

/* Fields */
.tdr-fields { margin-bottom: 10px; }
.tdr-field-row {
  display: flex; align-items: center;
  border-bottom: 1px solid var(--border); min-height: 32px;
}
.tdr-field-row:last-child { border-bottom: none; }
.tdr-label {
  width: 80px; flex-shrink: 0; font-size: 11px; color: var(--muted);
  text-align: right; padding-right: 12px; user-select: none;
}
.tdr-input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--text); font-family: inherit; font-size: 13px;
  padding: 5px 6px; border-radius: 3px; min-width: 0;
}
.tdr-input:focus { background: rgba(255,255,255,0.04); }
#tdr-desc { background: rgba(210,153,34,0.06); border: 1px solid rgba(210,153,34,0.15); font-size: 14px; font-weight: 500; }
#tdr-desc:focus { background: rgba(210,153,34,0.1); border-color: rgba(210,153,34,0.3); }
.tdr-select { cursor: pointer; }
.tdr-select option { background: var(--surface); }
.tdr-field-readonly .tdr-value { font-size: 12px; color: var(--muted); padding: 5px 6px; }

/* Section headers */
.tdr-section-header {
  font-size: 10px; letter-spacing: 0.8px; color: var(--muted);
  text-transform: uppercase; padding: 8px 0 5px; border-top: 1px solid var(--border);
  margin-top: 6px;
}

/* UDA rows */
.tdr-uda-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 12px; width: 100%;
}
.tdr-uda-key { width: 90px; flex-shrink: 0; color: var(--muted); text-align: right; padding-right: 8px; }
.tdr-uda-val { flex: 1; min-width: 0; }
.tdr-uda-val .tdr-uda-typed-input,
.tdr-uda-val .tdr-uda-typed-select,
.tdr-uda-val input[type="text"] { width: 100%; box-sizing: border-box; }
.tdr-uda-del {
  background: none; border: none; color: var(--error); cursor: pointer;
  font-size: 13px; padding: 2px 6px; font-family: inherit; opacity: 0.7;
  transition: opacity 0.12s;
}
.tdr-uda-del:hover { opacity: 1; }
.tdr-uda-add-row {
  display: flex; gap: 6px; align-items: center; margin: 6px 0 4px;
}
.tdr-uda-key-input { flex: 1.2; }
.tdr-uda-val-input { flex: 1.6; }
.tdr-btn-sm { font-size: 11px; padding: 3px 10px; white-space: nowrap; flex-shrink: 0; }

/* Annotations */
.tdr-ann-list { margin: 6px 0 8px; }
.tdr-ann-item {
  font-size: 12px; color: var(--muted); padding: 3px 0 3px 8px;
  border-left: 2px solid var(--border); margin: 2px 0;
  display: flex; align-items: flex-start; gap: 6px;
}
.tdr-ann-date { flex-shrink: 0; font-size: 11px; }
.tdr-ann-text { flex: 1; }
.tdr-ann-del {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 11px; opacity: 0; font-family: inherit; padding: 0 3px;
}
.tdr-ann-item:hover .tdr-ann-del { opacity: 1; }
.tdr-ann-add-row { display: flex; gap: 6px; align-items: center; margin: 4px 0 10px; }

/* Journal row */
.tdr-journal-row { display: flex; gap: 6px; align-items: center; margin: 4px 0 10px; }
.tdr-journal-sel { flex: 0 0 auto; width: 90px; padding: 4px 4px; }

/* Dependencies */
.tdr-dep-list { margin: 4px 0 6px; }
.tdr-dep-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; padding: 4px 0; border-bottom: 1px solid var(--border);
}
.tdr-dep-direction {
  font-size: 10px; padding: 1px 6px; border-radius: 3px; flex-shrink: 0;
  background: rgba(88,166,255,0.1); color: var(--accent); border: 1px solid rgba(88,166,255,0.2);
}
.tdr-dep-desc { flex: 1; }
.tdr-dep-del {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 11px; opacity: 0; font-family: inherit; padding: 0 3px;
}
.tdr-dep-item:hover .tdr-dep-del { opacity: 1; }
.tdr-dep-empty { font-size: 12px; color: var(--muted); padding: 4px 0; }
.tdr-dep-search-row { display: flex; gap: 6px; align-items: center; margin: 4px 0; }
.tdr-dep-results {
  background: var(--surface); border: 1px solid var(--border); border-radius: 4px;
  max-height: 160px; overflow-y: auto; margin-top: 2px;
}
.tdr-dep-result-item {
  padding: 6px 10px; font-size: 12px; cursor: pointer; display: flex; gap: 8px; align-items: center;
  border-bottom: 1px solid var(--border);
}
.tdr-dep-result-item:last-child { border-bottom: none; }
.tdr-dep-result-item:hover { background: rgba(255,255,255,0.05); }
.tdr-dep-result-uuid { font-size: 10px; color: var(--muted); font-family: monospace; }

@media (max-width: 700px) {
  .task-drawer-panel { width: 100%; min-width: 0; }
}

/* ── Journal v2 ───────────────────────────────────────────────────────────── */
.journal-filter-bar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px; gap: 8px; flex-wrap: wrap;
}
.jrnl-filter-tabs { display: flex; gap: 3px; }
.jrnl-filter-tab {
  padding: 3px 11px; font-size: 12px; border: 1px solid var(--border);
  border-radius: 3px; background: none; color: var(--muted);
  cursor: pointer; font-family: inherit; transition: all 0.1s;
}
.jrnl-filter-tab.active { background: var(--surface); color: var(--text); border-color: var(--accent); }
.jrnl-filter-tab:hover:not(.active) { color: var(--text); }
.jrnl-filter-right { display: flex; gap: 4px; align-items: center; }

/* Date group collapsible */
.journal-date-header {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 0 4px; cursor: pointer; user-select: none;
  border-bottom: 1px solid var(--border);
  color: var(--accent); font-size: 13px; font-weight: 500;
}
.journal-date-header:hover { color: var(--text); }
.journal-date-arrow { font-size: 11px; transition: transform 0.15s; display: inline-block; }
.journal-date-group.collapsed .journal-date-arrow { transform: rotate(-90deg); }
.journal-date-group.collapsed .journal-date-entries { display: none; }
.journal-date-count {
  margin-left: auto; font-size: 10px; color: var(--muted);
  background: rgba(255,255,255,0.06); border-radius: 9px; padding: 0 6px; font-weight: normal;
  opacity: 0.55;
}
.journal-date-label { flex: 1; }

/* Entry body */
.journal-entry { padding: 8px 0 4px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.journal-entry-archived { opacity: 0.5; }
.journal-entry-time { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.journal-entry-body {
  font-size: 13px; line-height: 1.6; color: var(--text);
  white-space: pre-wrap; word-break: break-word;
}
.journal-show-more {
  background: none; border: none; color: var(--accent); font-size: 11px;
  cursor: pointer; padding: 2px 0; font-family: inherit; display: block; margin: 2px 0 4px;
}
.journal-show-more:hover { text-decoration: underline; }
.journal-entry-meta { margin: 4px 0 2px; display: flex; gap: 4px; flex-wrap: wrap; }
.journal-annotations { margin: 4px 0; }
.journal-annotation {
  font-size: 11px; color: var(--muted); padding: 2px 0 2px 8px;
  border-left: 2px solid var(--border); margin: 2px 0;
  display: flex; align-items: baseline;
}
.journal-ann-date { font-size: 10px; opacity: 0.6; margin-left: 4px; }
.journal-archived-badge {
  font-size: 10px; padding: 1px 5px; border-radius: 3px;
  background: rgba(125,133,144,0.15); color: var(--muted); border: 1px solid var(--border);
}

/* Entry action pills */
.journal-entry-actions {
  display: flex; gap: 4px; flex-wrap: wrap; margin-top: 5px; padding-bottom: 4px;
  opacity: 0; transition: opacity 0.12s;
}
.journal-entry:hover .journal-entry-actions,
.journal-entry:focus-within .journal-entry-actions { opacity: 1; }
.jrnl-action-pill {
  font-size: 11px; padding: 2px 8px; border-radius: 3px;
  border: 1px solid var(--border); background: none;
  color: var(--muted); cursor: pointer; font-family: inherit;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.jrnl-action-pill:hover { background: var(--surface); color: var(--text); border-color: var(--accent); }
.jrnl-pill-muted:hover { border-color: var(--muted); color: var(--muted); }
.jrnl-pill-danger:hover { border-color: var(--error); color: var(--error); background: rgba(248,81,73,0.05); }

/* Journal drawer body textarea */
.jdr-body-textarea {
  width: 100%; min-height: 120px; resize: vertical;
  background: rgba(255,255,255,0.03); border: 1px solid var(--border);
  border-radius: 4px; color: var(--text); font-family: inherit;
  font-size: 13px; line-height: 1.6; padding: 8px 10px;
  box-sizing: border-box;
}
.jdr-body-textarea:focus { outline: none; border-color: var(--accent); background: rgba(88,166,255,0.03); }

/* ── Journal inline panel ────────────────────────────────────────────────── */
.jrnl-inline-panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.18s ease;
  overflow: hidden;
}
.jrnl-inline-panel.open { grid-template-rows: 1fr; }
.jrnl-inline-panel-inner {
  min-height: 0;
  padding: 0 0 0 0;
  transition: padding 0.18s ease;
}
.jrnl-inline-panel.open .jrnl-inline-panel-inner { padding: 6px 0 8px; }

.jrnl-panel-row {
  display: flex; gap: 6px; align-items: flex-start;
  border-top: 1px solid var(--border); padding-top: 6px;
}
.jrnl-panel-input {
  flex: 1; min-width: 0;
  background: rgba(255,255,255,0.03); border: 1px solid var(--border);
  border-radius: 3px; color: var(--text); font-family: inherit; font-size: 12px;
  padding: 5px 8px; outline: none;
}
.jrnl-panel-input:focus { border-color: var(--accent); background: rgba(88,166,255,0.03); }
.jrnl-panel-textarea {
  resize: vertical; min-height: 60px; width: 100%; box-sizing: border-box;
  display: block;
  background: rgba(255,255,255,0.03); border: 1px solid var(--border);
  border-radius: 3px; color: var(--text); font-family: inherit; font-size: 12px;
  padding: 5px 8px; outline: none; margin-bottom: 6px;
}
.jrnl-panel-textarea:focus { border-color: var(--accent); }
.jrnl-panel-select {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 3px; color: var(--muted); font-family: inherit; font-size: 12px;
  padding: 5px 6px; flex-shrink: 0;
}
.jrnl-panel-confirm {
  font-size: 12px; color: var(--muted); padding: 5px 0; flex: 1;
}
.jrnl-panel-confirm strong { color: var(--text); }
.jrnl-action-pill.pill-active {
  background: rgba(88,166,255,0.1); color: var(--accent); border-color: var(--accent);
}

/* ── Ledger v2 ────────────────────────────────────────────────────────────── */
.ledger-summary {
  display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 10px; min-height: 0;
}
.ledger-summary-chip {
  font-size: 11px; padding: 3px 10px; border: 1px solid; border-radius: 4px;
  cursor: pointer; transition: opacity 0.1s;
}
.ledger-summary-chip:hover { opacity: 0.75; }
.ledger-summary-chip strong { font-size: 12px; }

/* Date group */
.ledger-date-group { margin-bottom: 4px; }
.ledger-date-header {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 0 4px; cursor: pointer; user-select: none;
  border-bottom: 1px solid var(--border);
  color: var(--warning); font-size: 12px;
}
.ledger-date-header:hover { color: var(--text); }
.ledger-date-label { font-size: 12px; font-weight: 500; }
.ledger-date-count {
  font-size: 10px; color: var(--muted);
  background: var(--border); border-radius: 9px; padding: 0 5px;
}
.ledger-day-net { margin-left: auto; font-size: 11px; font-weight: 500; }
.ledger-date-group.collapsed .journal-date-arrow { transform: rotate(-90deg); }
.ledger-date-group.collapsed .ledger-date-entries { display: none; }

/* Transaction row */
.ledger-txn {
  padding: 7px 0 3px; border-bottom: 1px solid rgba(255,255,255,0.04);
  cursor: pointer;
}
.ledger-txn:hover { background: rgba(255,255,255,0.015); }
.ledger-txn-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
}
.ledger-txn-desc { font-size: 13px; color: var(--text); font-weight: 500; flex: 1; }
.ledger-txn-comment { font-size: 11px; color: var(--muted); }
.ledger-txn-expand {
  font-size: 12px; color: var(--muted); opacity: 0;
  transition: opacity 0.1s; flex-shrink: 0;
}
.ledger-txn:hover .ledger-txn-expand { opacity: 1; }

/* Postings */
.ledger-txn-postings { padding: 0 0 4px 2px; }
.ledger-posting-row {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; padding: 1px 0;
}
.ledger-posting-account { flex: 1; min-width: 0; }
.ledger-posting-amount  { flex-shrink: 0; text-align: right; font-variant-numeric: tabular-nums; }
.ledger-posting-comment { font-size: 11px; color: var(--muted); flex: 1; }

/* Posting edit row in drawer */
.ldr-posting-edit-row {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 0; border-bottom: 1px solid var(--border); font-size: 12px;
}
.ldr-posting-edit-acct  { flex: 1.5; }
.ldr-posting-edit-amt   { flex: 0.7; }
.ldr-posting-edit-cmt   { flex: 1; }
.ldr-posting-del {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 11px; opacity: 0; font-family: inherit; padding: 0 3px; flex-shrink: 0;
}
.ldr-posting-edit-row:hover .ldr-posting-del { opacity: 1; }
.ldr-add-posting-row { display: flex; gap: 6px; align-items: center; margin: 6px 0 4px; }

/* Action pills (reused from journal) */
.ledger-txn-actions {
  display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; padding-bottom: 3px;
  opacity: 0; transition: opacity 0.12s;
}
.ledger-txn:hover .ledger-txn-actions,
.ledger-txn:focus-within .ledger-txn-actions { opacity: 1; }

/* ── Time v2 ──────────────────────────────────────────────────────────────── */
.time-tag-summary {
  display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 8px; min-height: 0;
}
.time-tag-chip {
  font-size: 11px; padding: 3px 10px;
  background: rgba(88,166,255,0.07); border: 1px solid rgba(88,166,255,0.2);
  border-radius: 12px; color: var(--accent); cursor: pointer; transition: opacity 0.1s;
}
.time-tag-chip:hover { opacity: 0.75; }
.time-tag-chip strong { font-size: 12px; }
.time-tag-chip.active { background: rgba(88,166,255,0.18); border-color: var(--accent); }

.time-filter-bar { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }

/* Date group */
.time-date-group { margin-bottom: 4px; }
.time-date-header {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 0 4px; cursor: pointer; user-select: none;
  border-bottom: 1px solid var(--border);
  color: var(--accent); font-size: 12px;
}
.time-date-header:hover { color: var(--text); }
.time-date-label { flex: 1; font-weight: 500; }
.time-day-total { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--text); }
.time-date-group.collapsed .journal-date-arrow { transform: rotate(-90deg); }
.time-date-group.collapsed .time-date-entries { display: none; }

/* Interval row */
.time-interval {
  padding: 6px 0 3px; border-bottom: 1px solid rgba(255,255,255,0.04);
  cursor: pointer;
}
.time-interval:hover { background: rgba(255,255,255,0.015); }
.time-interval-active { border-left: 2px solid var(--accent); padding-left: 6px; }
.time-interval-main {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.time-interval-tags-row { flex: 1; display: flex; gap: 3px; flex-wrap: wrap; align-items: center; }
.time-interval-range { font-size: 11px; color: var(--muted); flex-shrink: 0; }
.time-interval-dur {
  font-size: 13px; font-weight: 600; color: var(--text); flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.time-dur-active { color: var(--accent); }
.time-interval-expand {
  font-size: 12px; color: var(--muted); opacity: 0; transition: opacity 0.1s; flex-shrink: 0;
}
.time-interval:hover .time-interval-expand { opacity: 1; }
.time-interval-ann {
  font-size: 11px; color: var(--muted); padding: 2px 0 2px 4px;
  border-left: 2px solid var(--border); margin: 3px 0;
}

/* Action pills */
.time-interval-actions {
  display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; padding-bottom: 2px;
  opacity: 0; transition: opacity 0.12s;
}
.time-interval:hover .time-interval-actions,
.time-interval:focus-within .time-interval-actions { opacity: 1; }

/* ── Community v2 ──────────────────────────────────────────────────────── */

/* Split layout — detail on left, list on right */
#section-community { display: flex; flex-direction: column; height: calc(100vh - var(--term-h) - 38px - 32px - 30px); }
#section-community.hidden { display: none; }
.comm-layout { display: flex; gap: 0; flex: 1; min-height: 0; }
.comm-left { flex: 2; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
.comm-left::-webkit-scrollbar { display: none; }
.comm-right { flex: 1; min-width: 320px; overflow-y: auto; padding-right: 14px; border-right: 1px solid var(--border); margin-right: 14px; order: -1; scrollbar-width: none; -ms-overflow-style: none; }
.comm-right::-webkit-scrollbar { display: none; }
.comm-right.comm-right-hidden { display: none; }
.comm-detail-empty { display: none; }

/* Hide scrollbar on content-area when community is visible */
#content-area:has(#section-community:not(.hidden)) { scrollbar-width: none; -ms-overflow-style: none; }
#content-area:has(#section-community:not(.hidden))::-webkit-scrollbar { display: none; }
#content-area.comm-no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
#content-area.comm-no-scrollbar::-webkit-scrollbar { display: none; }

/* Entry list items */
.comm-entry {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 5px;
  margin-bottom: 10px;
  padding: 10px 12px 8px;
  transition: border-color 0.15s;
}
.comm-entry:hover { border-color: var(--accent); }
.comm-entry.comm-entry-active { border-color: var(--accent); background: rgba(88,166,255,0.04); }
.comm-entry-header {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 6px;
}
.comm-source-ref {
  font-family: var(--font-mono, monospace);
  font-size: 10.5px; color: var(--accent);
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.comm-entry-ts { font-size: 10px; color: var(--muted); flex-shrink: 0; }
.comm-header-actions { display: flex; gap: 4px; flex-shrink: 0; }
.comm-action-sm {
  font-size: 10px; padding: 2px 8px;
  border: 1px solid var(--border); border-radius: 3px;
  background: transparent; color: var(--muted);
  cursor: pointer; transition: border-color 0.12s, color 0.12s;
}
.comm-action-sm:hover { border-color: var(--accent); color: var(--text); }
.comm-action-sm.danger { border-color: rgba(180,80,70,0.4); color: rgba(180,80,70,0.75); }
.comm-action-sm.danger:hover { background: rgba(180,80,70,0.08); color: rgba(200,90,80,0.9); border-color: rgba(180,80,70,0.6); }

.comm-content {
  font-size: 13px; line-height: 1.55; color: var(--text);
  margin-bottom: 5px;
}
.comm-content strong { font-weight: 600; }
.comm-type-badge {
  display: inline-flex; align-items: center;
  font-size: 9px; font-weight: 600; letter-spacing: 0.03em;
  padding: 1px 6px; border-radius: 3px; margin-right: 4px;
  border: 1px solid;
}
.comm-type-badge.type-task    { color: var(--clr-task,#58a6ff);    border-color: var(--clr-task,#58a6ff);    background: rgba(88,166,255,0.08); }
.comm-type-badge.type-journal { color: var(--clr-journal,#3fb950); border-color: var(--clr-journal,#3fb950); background: rgba(63,185,80,0.08); }
.comm-type-badge.type-ledger  { color: var(--warning);              border-color: var(--warning);              background: rgba(210,153,34,0.08); }
.comm-type-badge.type-time    { color: var(--clr-time,#a371f7);    border-color: var(--clr-time,#a371f7);    background: rgba(163,113,247,0.08); }

.comm-entry-meta {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin: 4px 0;
}
.comm-status-badge {
  font-size: 10px; color: var(--muted); padding: 1px 5px;
  border: 1px solid var(--border); border-radius: 3px;
}
.comm-entry-comment-count { font-size: 10px; color: var(--muted); margin-left: auto; }
.comm-comments {
  margin: 6px 0 2px; padding-left: 10px;
  border-left: 2px solid var(--border);
}
.comm-comment-item {
  font-size: 11px; color: var(--muted); padding: 2px 0;
  display: flex; align-items: baseline; gap: 6px;
}
.comm-comment-body { flex: 1; color: var(--text-secondary,var(--text)); }
.comm-comment-meta { font-size: 10px; color: var(--border); flex-shrink: 0; }
.comm-comment-del  { font-size: 10px; color: rgba(180,80,70,0.6); background: none; border: none; cursor: pointer; padding: 0 2px; }

.comm-inline-panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.18s ease;
  overflow: hidden;
}
.comm-inline-panel.open { grid-template-rows: 1fr; }
.comm-inline-panel-inner { overflow: hidden; }
.comm-panel-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 6px 0 2px;
}
.comm-panel-input {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 3px; color: var(--text); font-size: 12px;
  padding: 4px 8px; flex: 1;
}
.comm-panel-input:focus { outline: none; border-color: var(--accent); }

.comm-actions-row {
  display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px;
  opacity: 0; transition: opacity 0.12s;
}
.comm-entry:hover .comm-actions-row,
.comm-entry:focus-within .comm-actions-row { opacity: 1; }
.comm-detail-header { margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.comm-detail-type { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 4px; }
.comm-detail-title { font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.4; margin-bottom: 6px; }
.comm-detail-body { font-size: 13px; color: var(--text); line-height: 1.6; white-space: pre-wrap; word-break: break-word; margin-bottom: 8px; }
.comm-detail-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
.comm-detail-ref { font-size: 10px; color: var(--accent); font-family: monospace; }
.comm-detail-date { font-size: 10px; color: var(--muted); }
.comm-detail-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); }
.comm-detail-refresh { border-color: rgba(88,166,255,0.4); color: var(--accent); }
.comm-detail-refresh:hover { background: rgba(88,166,255,0.08); }

/* Forensics sections */
.comm-forensic-section { margin-top: 14px; }
.comm-forensic-toggle { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; padding: 4px 0; }
.comm-forensic-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 600; }
.comm-forensic-count { font-size: 10px; color: var(--muted); }
.comm-forensic-caret { font-size: 9px; color: var(--muted); transition: transform 0.15s; }
.comm-forensic-caret.collapsed { transform: rotate(-90deg); }
.comm-forensic-body { padding: 4px 0; }
.comm-forensic-body.collapsed { display: none; }

.comm-forensic-item { font-size: 11px; color: var(--text); padding: 4px 0 4px 10px; border-left: 2px solid var(--border); margin: 3px 0; display: flex; align-items: baseline; gap: 6px; }
.comm-forensic-item-meta { font-size: 10px; color: var(--muted); flex-shrink: 0; }
.comm-forensic-item-text { flex: 1; }
.comm-forensic-item-del { font-size: 10px; color: rgba(180,80,70,0.5); background: none; border: none; cursor: pointer; padding: 0 3px; opacity: 0; transition: opacity 0.12s; }
.comm-forensic-item:hover .comm-forensic-item-del { opacity: 1; }

/* Persistent input bars */
.comm-forensic-input-row { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.comm-forensic-input { flex: 1; background: var(--bg); border: 1px solid var(--border); border-radius: 3px; color: var(--text); font-family: inherit; font-size: 12px; padding: 5px 8px; }
.comm-forensic-input:focus { outline: none; border-color: var(--accent); }
.comm-forensic-submit { font-size: 11px; padding: 4px 10px; border: 1px solid var(--accent); border-radius: 3px; background: rgba(88,166,255,0.08); color: var(--accent); cursor: pointer; white-space: nowrap; }
.comm-forensic-submit:hover { background: rgba(88,166,255,0.15); }

/* Detail panel editable pills */
.comm-detail-tags-edit { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.comm-detail-edit-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.comm-detail-pill { display: inline-flex; align-items: center; gap: 2px; font-size: 10px; padding: 1px 6px; border-radius: 3px; background: rgba(88,166,255,0.08); border: 1px solid rgba(88,166,255,0.2); color: var(--accent); }
.comm-detail-pill-del { background: none; border: none; color: var(--error); font-size: 9px; cursor: pointer; padding: 0 2px; opacity: 0.6; }
.comm-detail-pill-del:hover { opacity: 1; }

/* Ledger module in detail panel */
.comm-ledger-module { border-top: 1px solid var(--border); padding-top: 8px; }
.comm-ledger-form { display: flex; flex-direction: column; gap: 4px; }
.comm-ledger-row { display: flex; gap: 4px; align-items: center; }

/* Staged ledger entries */
.comm-ledger-staged { margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--border); }
.comm-ledger-staged-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--warning); margin-bottom: 4px; }
.comm-ledger-staged-item { display: flex; align-items: center; gap: 6px; padding: 3px 0; border-bottom: 1px solid var(--border); font-size: 11px; }
.comm-ledger-staged-item:last-of-type { border-bottom: none; }
.comm-ledger-staged-text { flex: 1; color: var(--text); font-family: monospace; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comm-ledger-staged-meta { font-size: 9px; color: var(--muted); flex-shrink: 0; }


.community-tab {
  font-size: 11px; padding: 3px 10px;
  border: 1px solid var(--border); border-radius: 3px;
  background: transparent; color: var(--muted); cursor: pointer;
}
.community-tab.active { border-color: var(--accent); color: var(--accent); background: rgba(88,166,255,0.08); }

/* ── Lists v2 ──────────────────────────────────────────────────────────── */
.list-item {
  border-bottom: 1px solid var(--border);
  padding: 6px 0;
}
.list-item:last-child { border-bottom: none; }
.list-item-row {
  display: flex; align-items: center; gap: 8px; padding: 2px 0; flex-wrap: nowrap;
}
.list-item-check {
  width: 15px; height: 15px; flex-shrink: 0;
  accent-color: var(--accent); cursor: pointer;
}
.list-item-text {
  flex: 1; font-size: 13px; color: var(--text); line-height: 1.4;
  cursor: default; min-width: 0;
}
.list-item-text.done-text {
  text-decoration: line-through; color: var(--muted);
}
.list-item-note {
  font-size: 11px; color: var(--muted); padding-left: 23px;
  margin-top: 1px; font-style: italic;
}
.list-item-meta {
  font-size: 10px; color: var(--border); flex-shrink: 0;
}
.list-item-actions {
  display: flex; align-items: center; gap: 4px; flex-shrink: 0;
  flex-wrap: nowrap; opacity: 0; transition: opacity 0.12s;
}
.list-item:hover .list-item-actions,
.list-item:focus-within .list-item-actions { opacity: 1; }
.list-action-pill {
  font-size: 10px; padding: 2px 7px;
  border: 1px solid var(--border); border-radius: 3px;
  background: transparent; color: var(--muted);
  cursor: pointer; white-space: nowrap;
  transition: border-color 0.12s, color 0.12s;
}
.list-action-pill:hover { border-color: var(--accent); color: var(--text); }
.list-action-pill.danger { border-color: transparent; color: rgba(200,80,80,0.55); margin-left: 6px; }
.list-action-pill.danger:hover { border-color: rgba(200,80,80,0.5); color: rgba(220,90,90,0.85); background: rgba(200,80,80,0.08); }
.list-action-pill.pill-active { border-color: var(--accent); color: var(--accent); }

/* ── Sub-list toolbar helpers ──────────────────────────────────────────── */
.toolbar-sep {
  display: inline-block; width: 1px; height: 16px;
  background: var(--border); margin: 0 2px; align-self: center;
}

/* ════════════════════════════════════════════════════════════════════════════
   Twain Journal Theme — a literary writing mode
   Warm parchment, serif type, scratch pad, entries in a bottom drawer.
   ════════════════════════════════════════════════════════════════════════════ */

/* Allow the content area to fill without scroll when Twain is active */
#content-area.twain-journal-active { overflow: hidden !important; }

#section-journal.twain-mode {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr auto auto;
  height: 100%;
  overflow: hidden;
  padding: 0;
  background: #ece8e0;
  color: #2a1f14;
  font-family: Georgia, 'Book Antiqua', Palatino, serif;
  transition: grid-template-columns 0.22s ease;
  position: relative;
}

/* Scratch-collapsed: writing area takes full width */
#section-journal.twain-mode.scratch-collapsed {
  grid-template-columns: 1fr 26px;
}

/* ── Grid assignments ────────────────────────────────────────── */

#section-journal.twain-mode #add-journal-form {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  min-height: 0;
  overflow: hidden;
  position: relative;
  border: none;
  border-radius: 0;
  background: #ece8e0;
  gap: 0;
}

#section-journal.twain-mode #twain-scratch-col {
  grid-column: 2;
  grid-row: 1;
  display: flex !important;
  flex-direction: column;
  border-left: none;
  background: #ece8e0;
  overflow: hidden;
}

#section-journal.twain-mode #twain-save-bar {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex !important;
  align-items: center;
  gap: 0;
  padding: 6px 0;
  background: #ece8e0;
  border-top: none;
  box-shadow: inset 0 3px 6px rgba(0,0,0,0.08);
  position: relative;
}

.twain-savebar-spacer { flex: 1; }

.twain-savebar-left {
  width: calc(200% / 3);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px 0 32px;
  box-sizing: border-box;
}
.twain-savebar-right {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px 0 12px;
  box-sizing: border-box;
}

.twain-savebar-btn {
  background: none;
  border: 1px solid rgba(160,140,110,0.4);
  color: #a89070;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 2px;
  cursor: pointer;
  font-family: Georgia, 'Book Antiqua', Palatino, serif;
  line-height: 1;
  transition: color 0.15s, border-color 0.15s;
}
.twain-savebar-btn:hover { color: #5c3d1e; border-color: #8b6040; }
body.river-mode #btn-twain-river { color: #4a8aaa; border-color: rgba(74,138,170,0.5); }

.twain-savebar-divider {
  color: rgba(160,140,110,0.4);
  font-size: 14px;
  line-height: 1;
  user-select: none;
  flex-shrink: 0;
}
.twain-list-input {
  width: 110px;
  background: rgba(255,255,255,0.45);
  border: 1px solid rgba(180,160,120,0.4);
  border-radius: 2px;
  padding: 3px 8px;
  font-family: Georgia, serif;
  font-size: 11px;
  color: #3a2a1c;
  outline: none;
}
.twain-list-input::placeholder { color: #b0997a; font-style: italic; }
.twain-list-input:focus { border-color: #8b6040; background: rgba(255,255,255,0.65); }
.twain-list-select {
  background: rgba(255,255,255,0.45);
  border: 1px solid rgba(180,160,120,0.4);
  border-radius: 2px;
  padding: 2px 4px;
  font-family: Georgia, serif;
  font-size: 10px;
  color: #5c3d1e;
  cursor: pointer;
}
.twain-list-popup {
  position: absolute;
  bottom: 100%;
  right: 0;
  width: calc(100% / 3);
  max-height: 45vh;
  overflow-y: auto;
  background: #f0e8d0;
  border: 1px solid #c8b8a0;
  border-radius: 3px 3px 0 0;
  box-shadow: 0 -6px 16px rgba(0,0,0,0.12);
  padding: 10px 12px;
  z-index: 20;
  font-family: Georgia, serif;
  font-size: 12px;
  color: #3a2a1c;
}
.twain-list-popup.hidden { display: none; }
.twain-list-popup-item {
  padding: 4px 8px;
  border-bottom: 1px solid rgba(200,184,160,0.4);
}
.twain-list-popup-item:last-child { border-bottom: none; }
.twain-list-popup-empty {
  color: #b0997a;
  font-style: italic;
  font-size: 11px;
}

#section-journal.twain-mode #twain-entries-bar {
  grid-column: 1 / 3;
  grid-row: 3;
  display: flex !important;
  flex-direction: column;
  background: #d8d0c4;
  border-top: 2px solid #b8a888;
  cursor: pointer;
  position: relative;
}

/* Hide default journal UI elements in Twain mode */
#section-journal.twain-mode #journal-search,
#section-journal.twain-mode .journal-filter-bar { display: none !important; }

/* ── Form internals ──────────────────────────────────────────── */

/* Meta row reordered above the textarea */
#section-journal.twain-mode .journal-meta-row {
  order: -1;
  background: #ece8e0;
  border-bottom: none;
  padding: 6px 12px;
  height: 34px;
  margin: 0;
  gap: 8px;
  flex-wrap: nowrap;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.06);
  box-sizing: border-box;
}

#section-journal.twain-mode .journal-meta-input {
  background: rgba(255,255,255,0.45);
  border: 1px solid #c8b8a0;
  color: #2a1f14;
  font-family: Georgia, serif;
  font-size: 11px;
  border-radius: 2px;
  height: 22px;
  padding: 2px 7px;
}
#section-journal.twain-mode .journal-meta-input:focus {
  background: rgba(255,255,255,0.72);
  border-color: #8b6840;
  outline: none;
}
#section-journal.twain-mode .journal-meta-input::placeholder {
  color: #a89070;
  font-style: italic;
}

#section-journal.twain-mode .journal-meta-select-sm {
  background: rgba(255,255,255,0.45);
  border: 1px solid #c8b8a0;
  color: #2a1f14;
  font-family: Georgia, serif;
  font-size: 11px;
  height: 22px;
  border-radius: 2px;
  padding: 0 4px;
}

/* Hide default submit button + enter toggle (save bar takes over) */
#section-journal.twain-mode .jrnl-add-btn,
#section-journal.twain-mode .jrnl-enter-label { display: none !important; }

/* ── Main writing textarea ───────────────────────────────────── */

#section-journal.twain-mode #journal-entry-textarea {
  flex: 1;
  resize: none;
  border: none;
  outline: none;
  padding: 18px 160px 20px 42px;
  font-family: Georgia, 'Book Antiqua', Palatino, serif;
  font-size: 15px;
  line-height: 1.92;
  color: #2a1f14;
  background-color: #f5eed8;
  background-image:
    radial-gradient(ellipse at 50% 100%, rgba(92,61,30,0.06) 0%, transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)' opacity='0.028'/%3E%3C/svg%3E");
  min-height: 0;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  caret-color: #6b4e2a;
  letter-spacing: 0.01em;
}

/* Writing wrap: contains the textarea + ink panel overlay */
.twain-writing-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: #f5eed8;
}

/* Status bar at bottom of writing area */
.twain-status-bar {
  display: none;
}
#section-journal.twain-mode .twain-status-bar {
  display: flex;
  align-items: center;
  padding: 3px 32px;
  background: #f5eed8;
  flex-shrink: 0;
  height: 20px;
}
.twain-status-text {
  font-family: Georgia, serif;
  font-size: 9.5px;
  color: rgba(100,80,50,0.4);
  letter-spacing: 0.02em;
}

/* Date/time display above writing area */
.twain-datetime {
  display: none;
  position: absolute;
}
#section-journal.twain-mode .twain-datetime {
  display: block;
  position: absolute;
  top: -24px;
  right: 4px;
  text-align: right;
  font-family: 'Georgia', 'Book Antiqua', Palatino, serif;
  font-style: italic;
  font-size: 11px;
  color: rgba(60,45,30,0.4);
  letter-spacing: 0.02em;
  pointer-events: none;
  z-index: 10;
}
body.twain-focus-mode #section-journal.twain-mode .twain-datetime {
  color: rgba(220,210,190,0.6);
}
body.twain-focus-mode.river-mode #section-journal.twain-mode .twain-datetime {
  color: rgba(240,235,220,0.5);
}
#section-journal.twain-mode #journal-entry-textarea::placeholder {
  color: #b8a07a;
  font-style: italic;
}
#section-journal.twain-mode #journal-entry-textarea:focus { outline: none; }

/* ── Scratch pad ─────────────────────────────────────────────── */

.twain-scratch-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  height: 34px;
  margin: 0;
  background: #ece8e0;
  border-bottom: none;
  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.06);
  flex-shrink: 0;
  box-sizing: border-box;
}
.twain-scratch-label {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #9a8060;
  font-family: Georgia, serif;
  user-select: none;
}
.twain-scratch-toggle-btn {
  background: none;
  border: none;
  color: #9a8060;
  cursor: pointer;
  font-size: 16px;
  padding: 0 3px;
  line-height: 1;
  font-family: Georgia, serif;
  transition: color 0.15s;
}
.twain-scratch-toggle-btn:hover { color: #5c3d1e; }

/* Scratch columns container */
.twain-scratch-cols {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
  border-left: 1px solid rgba(160,140,100,0.3);
  box-shadow: inset 4px 0 8px rgba(0,0,0,0.09);
}

.twain-scratch-textarea {
  flex: 1;
  resize: none;
  border: none;
  outline: none;
  padding: 24px 14px 24px 38px;
  font-family: Georgia, 'Book Antiqua', Palatino, serif;
  font-size: 13px;
  line-height: 24px;
  color: #3a2a1c;
  background-color: #ede5ce;
  background-image:
    linear-gradient(
      to right,
      transparent 30px,
      rgba(175,65,50,0.2) 30px,
      rgba(175,65,50,0.2) 31.5px,
      transparent 31.5px
    ),
    repeating-linear-gradient(
      transparent,
      transparent 23px,
      rgba(100,72,36,0.13) 23px,
      rgba(100,72,36,0.13) 24px
    );
  background-attachment: local;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  caret-color: #5c3d1e;
  overflow-y: auto;
  min-height: 0;
}
.twain-scratch-textarea + .twain-scratch-textarea {
  border-left: 1px solid #c8b8a0;
}
.twain-scratch-textarea::placeholder { color: #b0997a; font-style: italic; }
.twain-scratch-textarea:focus { outline: none; }

/* Extra columns hidden until expanded */
.twain-scratch-extra { display: none; }
#section-journal.twain-mode.scratch-expanded .twain-scratch-extra { display: flex; }

/* Collapsed scratch: narrow strip with rotated label */
#section-journal.twain-mode.scratch-collapsed #twain-scratch-col {
  cursor: pointer;
  justify-content: flex-start;
  align-items: center;
  border-left: 1px solid #c8b8a0;
  overflow: hidden;
}
#section-journal.twain-mode.scratch-collapsed .twain-scratch-header {
  flex-direction: column;
  padding: 14px 0 0 0;
  background: transparent;
  border: none;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  gap: 0;
}
#section-journal.twain-mode.scratch-collapsed .twain-scratch-label {
  writing-mode: vertical-rl;
  letter-spacing: 0.16em;
  font-size: 9px;
}
#section-journal.twain-mode.scratch-collapsed .twain-scratch-toggle-btn {
  writing-mode: vertical-rl;
  font-size: 13px;
  margin-top: 8px;
  color: #b0997a;
}
#section-journal.twain-mode.scratch-collapsed .twain-scratch-cols {
  display: none;
}

/* Expanded scratch: 3 columns — journal shrinks, scratch grows */
#section-journal.twain-mode.scratch-expanded {
  grid-template-columns: 1fr 3fr;
}
#section-journal.twain-mode.scratch-expanded #twain-scratch-col {
  grid-column: 2;
}
#section-journal.twain-mode.scratch-expanded #add-journal-form {
  grid-column: 1;
}
#section-journal.twain-mode.scratch-expanded #twain-ink-panel {
  display: none !important;
}
/* When scratch is expanded, writing panel dims on right to shift focus to scratch */
#section-journal.twain-mode.scratch-expanded .twain-writing-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 60%;
  background: linear-gradient(to right, transparent 0%, rgba(180,175,165,0.12) 40%, rgba(160,155,145,0.22) 100%);
  pointer-events: none;
  z-index: 2;
}
/* Keep textarea content from reflowing — overflow hidden clips gracefully */
#section-journal.twain-mode.scratch-expanded #journal-entry-textarea {
  overflow: hidden;
}

/* ── Save bar ────────────────────────────────────────────────── */

.twain-save-btn {
  background: #5c3d1e;
  border: none;
  color: #f5eed8;
  font-family: Georgia, 'Book Antiqua', Palatino, serif;
  font-size: 12px;
  padding: 5px 22px;
  border-radius: 2px;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: background 0.15s;
}
.twain-save-btn:hover { background: #4a3018; }
.twain-save-hint {
  font-size: 11px;
  color: #a89070;
  font-family: Georgia, serif;
  font-style: italic;
}
.twain-save-hint em { font-style: normal; color: #7a5c30; }
.twain-save-shortcut {
  margin-left: auto;
  font-size: 10px;
  color: #c0a880;
  font-family: Georgia, serif;
  letter-spacing: 0.05em;
}

/* ── Entries bar ─────────────────────────────────────────────── */

.twain-entries-toggle-btn {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  background: none;
  border: none;
  padding: 8px 14px;
  cursor: pointer;
  color: #9a8060;
  font-family: Georgia, serif;
  font-size: 11px;
  letter-spacing: 0.03em;
  text-align: left;
  gap: 8px;
  transition: color 0.15s;
}
.twain-entries-toggle-btn:hover { color: #2a1f14; }
.twain-entries-bar-row {
  display: flex;
  align-items: center;
}
.twain-entries-search {
  width: 120px;
  margin-left: 12px;
  background: rgba(255,255,255,0.45);
  border: 1px solid rgba(180,160,120,0.4);
  border-radius: 2px;
  padding: 3px 8px;
  font-family: Georgia, serif;
  font-size: 11px;
  color: #3a2a1c;
  outline: none;
}
.twain-entries-search::placeholder { color: #b0997a; font-style: normal; }
.twain-entries-search:focus { border-color: #8b6040; background: rgba(255,255,255,0.65); width: 160px; }
.twain-entries-info { flex: 1; }
.twain-entries-caret {
  font-size: 9px;
  transition: transform 0.2s;
  flex-shrink: 0;
}
#twain-entries-bar.open .twain-entries-caret { transform: rotate(180deg); }

.twain-entries-drawer {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  max-height: 50vh;
  overflow-y: auto;
  border-top: 1px solid #c0b090;
  background: #f0e8d0;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
  z-index: 20;
}
.twain-entries-drawer::-webkit-scrollbar { width: 5px; }
.twain-entries-drawer::-webkit-scrollbar-track { background: #f0e8d0; }
.twain-entries-drawer::-webkit-scrollbar-thumb { background: #c8b8a0; border-radius: 3px; }

/* Style journal entries inside the Twain drawer */
.twain-entries-drawer .journal-entry {
  border-bottom: 1px solid #ddd0b8;
}
.twain-entries-drawer .journal-entry:hover { background: rgba(245,238,216,0.6); }
.twain-entries-drawer .journal-date-group-header { background: #e8dfc8; color: #7a6040; }
.twain-entries-drawer .journal-entry-body { color: #3a2a1c; font-family: Georgia, serif; font-size: 13px; }
.twain-entries-drawer .journal-entry-meta { color: #a89070; }
.twain-entries-drawer .jrnl-inline-panel { background: #ede5ce; border-color: #c8b8a0; }

/* ── Twain theme fixes ───────────────────────────────────────────────────── */

/* Fix entries crowding left edge */
.twain-entries-drawer .journal-entry { padding: 8px 14px 6px; }
.twain-entries-drawer .journal-date-group { padding: 0 14px; margin-bottom: 8px; }

/* Date group headers (Today / Yesterday / etc.) in Twain drawer */
.twain-entries-drawer .journal-date-header {
  background: #e4dac8 !important;
  color: #7a5c30 !important;
  border: none !important;
  border-bottom: 1px solid #c8b8a0 !important;
  border-radius: 0 !important;
  font-family: Georgia, serif;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 0 4px;
  margin: 0 0 6px;
}
.twain-entries-drawer .journal-date-header:hover { color: #4a3018 !important; }

/* Soften project badge — warm terracotta, not neon green */
.twain-entries-drawer .task-project-badge {
  background: rgba(160,80,50,0.12) !important;
  border-color: rgba(160,80,50,0.28) !important;
  color: rgba(140,65,40,0.85) !important;
}

/* Soften tag badge — warm dusty blue, not bright accent */
.twain-entries-drawer .task-tag {
  background: rgba(70,95,120,0.1) !important;
  border-color: rgba(70,95,120,0.22) !important;
  color: rgba(60,85,110,0.8) !important;
}

/* Action pills in drawer */
.twain-entries-drawer .jrnl-action-pill {
  border-color: rgba(180,160,130,0.4);
  color: #a08060;
  font-family: Georgia, serif;
}
.twain-entries-drawer .jrnl-action-pill:hover {
  border-color: rgba(160,130,90,0.6);
  color: #6b4e2a;
  background: rgba(255,250,240,0.4);
}
.twain-entries-drawer .jrnl-pill-danger { color: rgba(160,70,50,0.5) !important; }
.twain-entries-drawer .jrnl-entry-body,
.twain-entries-drawer .journal-entry-body { color: #3a2a1c; font-family: Georgia, serif; }
.twain-entries-drawer .journal-entry-time { color: #a08060; }
.twain-entries-drawer .journal-entry-meta { gap: 5px; }
.twain-entries-drawer .journal-entry-actions { opacity: 0; }
.twain-entries-drawer .journal-entry:hover .journal-entry-actions { opacity: 1; }

/* ── Ink panel (sections + tags floating on the parchment) ────────────── */

.twain-ink-panel {
  position: absolute;
  top: 12px;
  right: 12px;
  max-width: 130px;
  max-height: calc(100% - 24px);
  overflow-y: auto;
  text-align: right;
  pointer-events: none;
  z-index: 5;
  padding-left: 14px;
}
.twain-ink-panel > * { pointer-events: auto; }
.twain-ink-panel.hidden { display: none; }

.twain-ink-label {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(140,110,70,0.5);
  font-family: Georgia, serif;
  user-select: none;
  margin-bottom: 4px;
}
.twain-ink-toggle {
  background: none;
  border: none;
  color: rgba(140,110,70,0.45);
  cursor: pointer;
  font-size: 12px;
  padding: 0 2px;
  line-height: 1;
  font-family: Georgia, serif;
  pointer-events: auto;
}
.twain-ink-toggle:hover { color: rgba(90,55,20,0.7); }

/* Sections: vertical list, ink text, no box */
.twain-ink-sections {
  display: flex;
  flex-direction: column;
  gap: 1px;
  align-items: flex-end;
}
.twain-ink-section-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
}
.twain-ink-section-row:hover .twain-ink-section-remove { opacity: 1; }
.twain-ink-section-item {
  background: none;
  border: none;
  font-family: Georgia, serif;
  font-size: 11.5px;
  color: rgba(120,85,45,0.55);
  cursor: pointer;
  padding: 1px 0;
  letter-spacing: 0.02em;
  text-align: right;
  white-space: nowrap;
  transition: color 0.12s;
}
.twain-ink-section-item:hover { color: rgba(90,60,25,0.72); }
.twain-ink-section-item.active { color: rgba(90,60,25,0.82); font-style: italic; }
.twain-ink-section-remove {
  background: none;
  border: none;
  color: rgba(160,80,50,0.4);
  cursor: pointer;
  font-size: 11px;
  padding: 0 1px;
  opacity: 0;
  transition: opacity 0.15s;
  flex-shrink: 0;
}
.twain-ink-section-remove:hover { color: rgba(160,50,30,0.7); }

.twain-ink-drag-handle {
  opacity: 0;
  color: rgba(120,85,45,0.35);
  cursor: grab;
  font-size: 9px;
  line-height: 1;
  user-select: none;
  transition: opacity 0.15s;
  margin-right: 1px;
}
.twain-ink-section-row:hover .twain-ink-drag-handle { opacity: 1; }
.twain-ink-drag-handle:active { cursor: grabbing; }
.twain-ink-section-row.dragging { opacity: 0.35; }
.twain-ink-section-row.drag-over { border-top: 1px dashed rgba(120,85,45,0.4); }

/* Tags: horizontal wrap, inline ink */
.twain-ink-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 6px;
  justify-content: flex-end;
}
.twain-ink-tag-item {
  background: none;
  border: none;
  font-family: Georgia, serif;
  font-size: 10.5px;
  color: rgba(65,85,108,0.5);
  cursor: pointer;
  padding: 1px 0;
  transition: color 0.12s;
}
.twain-ink-tag-item:hover { color: rgba(65,85,108,0.7); }
.twain-ink-tag-item.active {
  color: rgba(65,85,108,0.78);
  font-style: italic;
  text-decoration: underline;
  text-decoration-color: rgba(65,85,108,0.28);
  text-underline-offset: 2px;
}

/* ── Twain task bar ──────────────────────────────────────────── */

.twain-task-bar {
  grid-column: 1 / -1;
  background: #ece8e0;
  border-top: none;
  padding: 6px 12px;
  box-shadow: inset 0 3px 6px rgba(0,0,0,0.08);
  transition: transform 0.2s ease;
}
.twain-task-bar-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.twain-task-input {
  flex: 1;
  background: rgba(255,255,255,0.5);
  border: 1px solid #c8b8a0;
  border-radius: 2px;
  padding: 4px 8px;
  font-family: Georgia, serif;
  font-size: 12px;
  color: #3a2a1c;
  outline: none;
}
.twain-task-input::placeholder { color: #b0997a; font-style: italic; }
.twain-task-input:focus { border-color: #8b6040; background: rgba(255,255,255,0.7); }
.twain-task-meta { flex: 0 0 90px; }
.twain-task-select {
  background: rgba(255,255,255,0.5);
  border: 1px solid #c8b8a0;
  border-radius: 2px;
  padding: 4px 4px;
  font-family: Georgia, serif;
  font-size: 11px;
  color: #5c3d1e;
  cursor: pointer;
}
.twain-task-add-btn {
  background: #5c3d1e;
  border: none;
  color: #f5eed8;
  font-family: Georgia, serif;
  font-size: 11px;
  padding: 4px 12px;
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
}
.twain-task-add-btn:hover { background: #4a2e10; }

/* ── Entry editing highlight ─────────────────────────────────── */

.twain-entries-drawer .journal-entry.twain-entry-editing {
  background: rgba(92,61,30,0.08);
  border-left: 2px solid #8b6040;
  padding-left: 10px;
}
.twain-entries-drawer .journal-entry {
  cursor: pointer;
  transition: background 0.15s;
}
.twain-entries-drawer .journal-entry:hover {
  background: rgba(92,61,30,0.04);
}

/* ── Sidebar toggle in Twain / glass modes ───────────────────── */

#section-journal.twain-mode ~ .sidebar-toggle,
body.river-mode .sidebar-toggle {
  border-top-color: rgba(180,160,120,0.3);
  color: rgba(160,130,90,0.6);
}
body.river-mode .sidebar-toggle {
  border-top-color: rgba(255,255,255,0.08);
  color: rgba(180,200,190,0.5);
}
body.river-mode .sidebar-toggle:hover {
  color: rgba(220,235,225,0.85);
}


/* ── Critical: twain-mode.hidden must win over display:grid ─────────── */
/* #section-journal.twain-mode has specificity 1,1,0 which beats .hidden 0,1,0 */
#section-journal.twain-mode.hidden { display: none !important; }


/* ════════════════════════════════════════════════════════════════════════════
   Twain Focus Mode
   body.twain-focus-mode: hides sidebar, header, terminal — journal takes
   ~2/3 of the window centered, so river/background is visible all around.
   ════════════════════════════════════════════════════════════════════════════ */

body.twain-focus-mode #sidebar,
body.twain-focus-mode .sidebar-peek,
body.twain-focus-mode #content-header,
body.twain-focus-mode #terminal-bar {
  display: none !important;
}
body.twain-focus-mode #main {
  margin-left: 0;
}
body.twain-focus-mode #content-area {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 0 0 0;
  height: 100vh;
}
body.twain-focus-mode #section-journal.twain-mode #journal-entry-textarea {
  padding-right: 100px;
}
body.twain-focus-mode #section-journal.twain-mode .twain-ink-panel {
  max-width: 90px;
}
body.twain-focus-mode #section-journal.twain-mode {
  width: 66vw;
  max-width: 900px;
  height: 78vh;
  margin: auto;
  border-radius: 4px;
  box-shadow:
    0 0 0 1px rgba(180,160,120,0.3),
    0 8px 60px rgba(20,35,20,0.4),
    0 2px 16px rgba(20,35,20,0.2);
}
body.twain-focus-mode #section-journal.twain-mode.scratch-expanded {
  width: 82vw;
  max-width: 1200px;
}
body.twain-focus-mode.river-mode #section-journal.twain-mode {
  width: 62vw;
  height: 74vh;
}
body.twain-focus-mode.river-mode #section-journal.twain-mode.scratch-expanded {
  width: 78vw;
  max-width: 1100px;
}
/* Focus button highlight */
#btn-twain-focus.active {
  color: #4a8aaa;
  border-color: rgba(74,138,170,0.5);
  background: rgba(200,225,235,0.2);
}

/* ════════════════════════════════════════════════════════════════════════════
   Mississippi River Mode
   body.river-mode: full-window river scene wrapping the journal panel.
   The journal panel stays exactly as Twain styled it — the river fills
   everything around it: sidebar, header, margins, content edges.
   ════════════════════════════════════════════════════════════════════════════ */

body.river-mode {
  /* Real photo if provided; CSS scene as fallback */
  background-image:
    url('assets/river.avif'),
    /* CSS fallback — layered Mississippi landscape */
    /* near-bank vegetation silhouettes */
    radial-gradient(ellipse 38% 42% at -3% 100%,  rgba(18,30,12,0.82) 0%, transparent 58%),
    radial-gradient(ellipse 30% 36% at 103% 100%, rgba(18,30,12,0.72) 0%, transparent 58%),
    radial-gradient(ellipse 16% 20% at 22%  100%, rgba(28,42,16,0.55) 0%, transparent 66%),
    radial-gradient(ellipse 12% 15% at 76%  97%,  rgba(28,42,16,0.44) 0%, transparent 66%),
    /* muddy near-shore bank */
    linear-gradient(0deg, rgba(62,46,26,0.40) 0%, transparent 8%),
    /* sun path on water */
    radial-gradient(ellipse 50% 10% at 62% 56%, rgba(228,200,118,0.46) 0%, transparent 100%),
    radial-gradient(ellipse 26% 5%  at 36% 59%, rgba(205,178,96,0.24) 0%, transparent 100%),
    /* river water */
    linear-gradient(180deg,
      transparent 31%,
      rgba(104,122,128,0.62) 35%,
      rgba(116,130,120,0.68) 46%,
      rgba(108,122,110,0.62) 56%,
      rgba(92,108,80,0.46)   64%,
      rgba(72,90,58,0.34)    70%,
      transparent 75%
    ),
    /* far treeline at horizon */
    linear-gradient(180deg,
      transparent 30.5%,
      rgba(26,42,16,0.36) 31%,
      rgba(26,42,16,0.36) 33%,
      transparent 33.5%
    ),
    /* horizon mist / heat haze */
    radial-gradient(ellipse 110% 16% at 50% 32%, rgba(210,224,220,0.64) 0%, transparent 100%),
    /* sky */
    linear-gradient(180deg,
      #a8b8c2  0%,
      #b2bec8  8%,
      #bec9d0 17%,
      #c8d2d8 25%,
      #d2dae0 30%,
      transparent 34%
    );
  background-size: cover, auto;
  background-position: center center, center center;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
  overflow: hidden;
}

/* Gauzy window overlay — soft vignette + mist so it reads as "through glass" */
body.river-mode::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 120% 120% at 50% 50%, transparent 40%, rgba(200,215,210,0.22) 100%),
    linear-gradient(180deg, rgba(220,230,235,0.18) 0%, transparent 20%, transparent 80%, rgba(180,170,150,0.14) 100%);
  backdrop-filter: blur(0.5px);
}

/* ── UI chrome becomes transparent glass ─────────────────────────── */

body.river-mode #app {
  background: transparent;
  position: relative;
  z-index: 2;
}

body.river-mode #sidebar {
  background: rgba(12,18,14,0.38) !important;
  border-right-color: rgba(255,255,255,0.08);
  backdrop-filter: blur(8px) saturate(0.8);
  -webkit-backdrop-filter: blur(8px) saturate(0.8);
}
body.river-mode #sidebar .sidebar-header,
body.river-mode #sidebar .profile-row,
body.river-mode #sidebar .cmd-ctrl-row { background: transparent !important; }
body.river-mode #sidebar .nav-item { color: rgba(200,215,205,0.75); }
body.river-mode #sidebar .nav-item:hover { color: rgba(230,240,230,0.95); background: rgba(255,255,255,0.07); }
body.river-mode #sidebar .nav-item.active { color: #e8f0e4; background: rgba(255,255,255,0.1); }
body.river-mode #sidebar .nav-group-label { color: rgba(160,185,170,0.55); }
body.river-mode #sidebar .wordmark-ww,
body.river-mode #sidebar .wordmark-full { color: rgba(220,235,225,0.8); }
body.river-mode #sidebar .profile-pill { background: rgba(255,255,255,0.1); color: rgba(220,235,220,0.8); border-color: rgba(255,255,255,0.12); }
body.river-mode #sidebar .density-control,
body.river-mode #sidebar .sidebar-footer { background: transparent; border-color: rgba(255,255,255,0.08); }
body.river-mode #sidebar .density-btn { color: rgba(180,200,185,0.6); }
body.river-mode #sidebar-peek { background: rgba(12,18,14,0.35); color: rgba(200,215,205,0.7); }

body.river-mode #main {
  background: transparent;
}

body.river-mode #content-header {
  background: rgba(18,22,20,0.72) !important;
  border-bottom-color: rgba(255,255,255,0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body.river-mode #content-header * { color: rgba(240,248,244,0.88) !important; }
body.river-mode .header-resource-slot .resource-select,
body.river-mode .header-resource-slot .resource-add-btn {
  background: rgba(255,255,255,0.1) !important;
  border-color: rgba(255,255,255,0.15) !important;
  color: rgba(220,235,225,0.8) !important;
}

body.river-mode #content-area {
  background: transparent;
}

/* ── Journal panel floats above the river, exactly as Twain styled it ─ */

body.river-mode #section-journal.twain-mode {
  /* Float with a margin so river is visible all around */
  margin: 10px 12px 10px 10px;
  border-radius: 3px;
  height: calc(100% - 20px) !important;
  box-shadow:
    0 0 0 1px rgba(180,160,120,0.3),
    0 6px 48px rgba(20,35,20,0.35),
    0 2px 12px rgba(20,35,20,0.2);
  /* keep all Twain mode background/layout exactly as-is */
}

/* River mode toggle button — highlight when active */
body.river-mode #btn-twain-river {
  color: #4a8aaa !important;
  border-color: rgba(74,138,170,0.5) !important;
  background: rgba(200,225,235,0.25);
}

/* ── Non-journal sections in river mode: glass panel ─────────────────── */

body.river-mode .section:not(.hidden):not(.twain-mode) {
  background: rgba(10, 18, 14, 0.62);
  backdrop-filter: blur(12px) saturate(0.9);
  -webkit-backdrop-filter: blur(12px) saturate(0.9);
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.08);
  padding: 16px;
  margin: 8px 0;
}

/* Primary text: full brightness */
body.river-mode .section:not(.hidden):not(.twain-mode) .task-desc,
body.river-mode .section:not(.hidden):not(.twain-mode) .task-row,
body.river-mode .section:not(.hidden):not(.twain-mode) .journal-entry-body,
body.river-mode .section:not(.hidden):not(.twain-mode) .ledger-row,
body.river-mode .section:not(.hidden):not(.twain-mode) h3,
body.river-mode .section:not(.hidden):not(.twain-mode) .service-panel-header {
  color: rgba(235,245,240,0.96) !important;
}

/* Secondary / meta text: readable but softer */
body.river-mode .section:not(.hidden):not(.twain-mode) .task-meta,
body.river-mode .section:not(.hidden):not(.twain-mode) .task-meta-muted,
body.river-mode .section:not(.hidden):not(.twain-mode) .journal-entry-time,
body.river-mode .section:not(.hidden):not(.twain-mode) .journal-entry-meta,
body.river-mode .section:not(.hidden):not(.twain-mode) .time-date-label,
body.river-mode .section:not(.hidden):not(.twain-mode) .time-day-total,
body.river-mode .section:not(.hidden):not(.twain-mode) .interval-tags,
body.river-mode .section:not(.hidden):not(.twain-mode) .skeleton-msg,
body.river-mode .section:not(.hidden):not(.twain-mode) .stat-item,
body.river-mode .section:not(.hidden):not(.twain-mode) .profile-list-name,
body.river-mode .section:not(.hidden):not(.twain-mode) [class*="muted"] {
  color: rgba(190,210,200,0.82) !important;
}

/* Borders: visible but subtle on dark glass */
body.river-mode .section:not(.hidden):not(.twain-mode) .task-row,
body.river-mode .section:not(.hidden):not(.twain-mode) .journal-entry,
body.river-mode .section:not(.hidden):not(.twain-mode) .interval-row,
body.river-mode .section:not(.hidden):not(.twain-mode) .ledger-row,
body.river-mode .section:not(.hidden):not(.twain-mode) .profile-list-item,
body.river-mode .section:not(.hidden):not(.twain-mode) .time-date-header {
  border-color: rgba(255,255,255,0.1) !important;
}

/* Row hover */
body.river-mode .section:not(.hidden):not(.twain-mode) .task-row:hover,
body.river-mode .section:not(.hidden):not(.twain-mode) .journal-entry:hover,
body.river-mode .section:not(.hidden):not(.twain-mode) .interval-row:hover {
  background: rgba(255,255,255,0.06) !important;
}

/* Group/date headers */
body.river-mode .section:not(.hidden):not(.twain-mode) .task-group-header,
body.river-mode .section:not(.hidden):not(.twain-mode) .journal-date-header,
body.river-mode .section:not(.hidden):not(.twain-mode) .time-date-header {
  background: rgba(255,255,255,0.06) !important;
  color: rgba(210,230,220,0.9) !important;
}

/* Tags and badges: muted on dark glass */
body.river-mode .section:not(.hidden):not(.twain-mode) .task-tag {
  background: rgba(63,185,80,0.12) !important;
  border-color: rgba(63,185,80,0.22) !important;
  color: rgba(100,210,120,0.8) !important;
}
body.river-mode .section:not(.hidden):not(.twain-mode) .task-project-badge {
  background: rgba(210,180,60,0.1) !important;
  border-color: rgba(210,180,60,0.2) !important;
  color: rgba(212,184,64,0.85) !important;
}

/* Inline form inputs on glass */
body.river-mode .section:not(.hidden):not(.twain-mode) .add-form-inline {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.12) !important;
}
body.river-mode .section:not(.hidden):not(.twain-mode) .add-form-inline input,
body.river-mode .section:not(.hidden):not(.twain-mode) .add-form-inline select,
body.river-mode .section:not(.hidden):not(.twain-mode) .add-form-inline textarea {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.15) !important;
  color: rgba(235,245,240,0.95) !important;
}
body.river-mode .section:not(.hidden):not(.twain-mode) .add-form-inline input::placeholder,
body.river-mode .section:not(.hidden):not(.twain-mode) .add-form-inline textarea::placeholder {
  color: rgba(160,185,175,0.55) !important;
}

/* Buttons and action pills on glass — less bright, more legible */
body.river-mode .section:not(.hidden):not(.twain-mode) .btn-inline-alt {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.15) !important;
  color: rgba(190,210,200,0.78) !important;
}
body.river-mode .section:not(.hidden):not(.twain-mode) .btn-inline-alt:hover {
  background: rgba(255,255,255,0.12) !important;
  color: rgba(235,245,240,0.95) !important;
}
body.river-mode .section:not(.hidden):not(.twain-mode) .jrnl-action-pill {
  border-color: rgba(255,255,255,0.12) !important;
  color: rgba(180,200,190,0.68) !important;
}
body.river-mode .section:not(.hidden):not(.twain-mode) .jrnl-action-pill:hover {
  color: rgba(220,235,225,0.9) !important;
  border-color: rgba(255,255,255,0.28) !important;
}

/* Inline filter / search inputs */
body.river-mode .section:not(.hidden):not(.twain-mode) .inline-filter {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.14) !important;
  color: rgba(235,245,240,0.92) !important;
}
body.river-mode .section:not(.hidden):not(.twain-mode) .inline-filter::placeholder {
  color: rgba(160,185,175,0.5) !important;
}

/* Sidebar cmd buttons in river mode */
body.river-mode #sidebar .cmd-ctrl-btn {
  color: rgba(190,210,200,0.75) !important;
  border-color: rgba(255,255,255,0.12) !important;
  background: rgba(255,255,255,0.05) !important;
}
body.river-mode #sidebar .cmd-ctrl-btn:hover {
  color: rgba(230,245,235,0.95) !important;
  border-color: rgba(255,255,255,0.25) !important;
}

/* Header theme selects in river mode — dark text on translucent glass */
body.river-mode .header-theme-select {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.18) !important;
  color: rgba(235,245,240,0.9) !important;
}

/* ── Attributes section ───────────────────────────────────────────────────── */
.attr-toolbar { display: flex; gap: 6px; margin-bottom: 12px; }
.attr-add-form { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 12px; margin-bottom: 12px; }
.attr-add-form.hidden { display: none; }
.attr-form-grid { display: grid; grid-template-columns: 80px 1fr; gap: 6px 10px; align-items: center; margin-bottom: 10px; }
.attr-form-grid label { font-size: 11px; color: var(--muted); text-align: right; }
.attr-form-grid input, .attr-form-grid select { background: var(--surface); border: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 12px; padding: 4px 8px; border-radius: 3px; height: 28px; box-sizing: border-box; }
.attr-form-grid input:focus, .attr-form-grid select:focus { outline: none; border-color: var(--accent); }
.attr-form-actions { display: flex; gap: 6px; justify-content: flex-end; }
.attr-help-btn { background: none; border: 1px solid var(--border); color: var(--muted); font-size: 10px; width: 16px; height: 16px; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; margin-left: 4px; }
.attr-help-btn:hover { border-color: var(--accent); color: var(--accent); }
.attr-urgency-hint { font-size: 10px; color: var(--muted); font-style: italic; grid-column: 2; }
.attr-checkbox-label { font-size: 12px; color: var(--text); display: flex; align-items: center; gap: 6px; }
.attr-card { background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 10px 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; cursor: pointer; transition: background 0.12s, border-color 0.12s; }
.attr-card:hover { background: var(--bg); border-color: var(--accent); }
.attr-card-name { font-size: 13px; color: var(--text); font-weight: bold; }
.attr-card-label { font-size: 11px; color: var(--muted); }
.attr-card-type { font-size: 10px; padding: 1px 6px; border-radius: 3px; border: 1px solid var(--border); color: var(--accent); }
.attr-card-default { font-size: 11px; color: var(--muted); }
.attr-card-allowed { font-size: 10px; color: var(--muted); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attr-card-urgency { font-size: 11px; color: var(--warning); }
.attr-card-readonly { font-size: 10px; color: var(--error); border: 1px solid var(--error); padding: 1px 5px; border-radius: 3px; opacity: 0.7; }
.attr-card-actions { margin-left: auto; display: flex; gap: 4px; }
.action-btn-sm { font-size: 11px; padding: 3px 8px; height: 22px; display: inline-flex; align-items: center; }
.attr-group-assign { background: var(--bg); border: 1px solid var(--border); color: var(--muted); font-family: inherit; font-size: 10px; padding: 2px 4px; border-radius: 3px; height: 22px; cursor: pointer; width: auto; max-width: none; }
.attr-group-assign:hover { border-color: var(--accent); color: var(--accent); }
.attr-group-assign:focus { outline: none; border-color: var(--accent); }
.attr-assign-profile-btn { background: none; border: 1px solid var(--border); color: var(--muted); font-size: 10px; padding: 2px 6px; border-radius: 3px; height: 22px; cursor: pointer; display: inline-flex; align-items: center; white-space: nowrap; }
.attr-assign-profile-btn:hover { border-color: var(--accent); color: var(--accent); }
/* Profile assignment popup */
.attr-profile-popup { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 950; display: flex; align-items: center; justify-content: center; }
.attr-profile-popup.hidden { display: none; }
.attr-profile-popup-inner { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 16px 20px; min-width: 260px; max-width: 360px; box-shadow: 0 8px 32px rgba(0,0,0,0.5); }
.attr-profile-popup-title { font-size: 13px; color: var(--text); font-weight: bold; margin-bottom: 4px; }
.attr-profile-popup-subtitle { font-size: 11px; color: var(--muted); margin-bottom: 10px; }
.attr-profile-popup-list { max-height: 200px; overflow-y: auto; margin-bottom: 12px; }
.attr-profile-popup-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 3px; cursor: pointer; font-size: 12px; color: var(--text); }
.attr-profile-popup-item:hover { background: var(--bg); }
.attr-profile-popup-item input[type="checkbox"] { accent-color: var(--accent); }
.attr-profile-popup-item.current { color: var(--muted); opacity: 0.5; pointer-events: none; }
.attr-profile-popup-item.assigned { color: var(--success); opacity: 0.7; }
.attr-profile-popup-item.assigned input[type="checkbox"] { accent-color: var(--success); }
.attr-profile-popup-actions { display: flex; gap: 8px; justify-content: flex-end; padding-top: 8px; border-top: 1px solid var(--border); }
/* Group Builder */
.attr-gb-top { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
#attr-gb-group-name { background: rgba(255,255,255,0.06); border: 1px solid var(--border); font-size: 14px; padding: 6px 10px; height: 32px; }
.attr-gb-mode-toggle { display: flex; gap: 2px; }
.attr-gb-mode-btn { background: none; border: 1px solid var(--border); color: var(--muted); font-family: inherit; font-size: 11px; padding: 3px 10px; border-radius: 3px; cursor: pointer; }
.attr-gb-mode-btn:hover { border-color: var(--accent); color: var(--accent); }
.attr-gb-mode-btn.active { border-color: var(--accent); color: var(--accent); background: rgba(88,166,255,0.08); }
.attr-gb-actions { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.attr-gb-count { font-size: 11px; color: var(--muted); margin-left: auto; }
.attr-gb-input-card { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 10px; margin-bottom: 12px; }
.attr-gb-input-card.hidden { display: none; }
.attr-gb-list-title { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.attr-gb-list { max-height: 300px; overflow-y: auto; }
.attr-gb-item { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-bottom: 1px solid var(--border); font-size: 12px; }
.attr-gb-item-name { flex: 1; color: var(--text); }
.attr-gb-item-type { font-size: 10px; color: var(--accent); }
.attr-gb-item-remove { background: none; border: none; color: var(--error); cursor: pointer; font-size: 12px; opacity: 0.6; }
.attr-gb-item-remove:hover { opacity: 1; }
/* Attribute groups */
.attr-group { margin-bottom: 14px; }
.attr-group.collapsed .attr-group-items { display: none; }
.attr-group-header { font-size: 11px; color: var(--accent); font-weight: bold; letter-spacing: 0.04em; padding: 6px 0 4px; border-bottom: 1px solid var(--border); margin-bottom: 6px; display: flex; align-items: center; gap: 8px; border-left: 3px solid var(--accent); padding-left: 8px; cursor: pointer; user-select: none; transition: background 0.12s; }
.attr-group-header:hover { color: var(--text); background: rgba(88,166,255,0.06); }
.attr-group-caret { font-size: 10px; flex-shrink: 0; transition: transform 0.15s; }
.attr-group-count { font-size: 10px; color: var(--muted); font-weight: normal; background: var(--border); border-radius: 9px; padding: 0 6px; }
.attr-group-items { padding-left: 4px; }
/* Attribute tabs */
.attr-tabs { display: flex; gap: 4px; margin-bottom: 12px; }
.attr-tab { background: none; border: 1px solid var(--border); color: var(--muted); font-family: inherit; font-size: 11px; padding: 4px 12px; border-radius: 3px; cursor: pointer; }
.attr-tab:hover { border-color: var(--accent); color: var(--accent); }
.attr-tab.active { border-color: var(--accent); color: var(--accent); background: rgba(88,166,255,0.08); }
.attr-view.hidden { display: none; }
.attr-urgency-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 500; display: flex; align-items: center; justify-content: center; }
.attr-urgency-overlay.hidden { display: none; }
.attr-urgency-overlay-inner { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 20px 24px; max-width: 500px; width: 90%; }
.attr-urgency-overlay-title { font-size: 14px; color: var(--text); margin-bottom: 12px; font-weight: bold; }
.attr-urgency-overlay-body { font-size: 12px; color: var(--muted); line-height: 1.7; }
.attr-urgency-overlay-body p { margin-bottom: 8px; }
.attr-urgency-overlay-body ul { padding-left: 16px; margin-bottom: 8px; }
.attr-urgency-overlay-body li { margin-bottom: 4px; }
.attr-urgency-overlay-body strong { color: var(--text); }
/* UDA type-enforced inputs in task drawer */
.tdr-uda-val-readonly { font-size: 12px; color: var(--muted); font-style: italic; }
.uda-type-warning { font-size: 10px; color: var(--warning); margin-left: 6px; }
.tdr-uda-typed-input { background: var(--bg); border: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 12px; padding: 3px 6px; border-radius: 3px; height: 24px; box-sizing: border-box; }
.tdr-uda-typed-input:focus { outline: none; border-color: var(--accent); }
.tdr-uda-typed-select { background: var(--bg); border: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 12px; padding: 2px 6px; border-radius: 3px; height: 24px; width: 100%; box-sizing: border-box; }

/* Collapsible sections in task drawer */
.tdr-section-toggle { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.tdr-section-toggle .tdr-section-header { cursor: pointer; margin-top: 6px; flex: 1; }
.tdr-section-caret { font-size: 10px; color: var(--muted); transition: transform 0.15s; margin-top: 6px; }
.tdr-section-caret.collapsed { transform: rotate(-90deg); }
.tdr-section-body.collapsed { display: none; }

/* Attribute drawer tasks section */
.atd-tasks-section { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
.atd-tasks-header { font-size: 10px; letter-spacing: 0.8px; color: var(--muted); text-transform: uppercase; padding: 4px 0; }
.atd-subprofile-group { margin-top: 8px; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
.atd-subprofile-header { display: flex; align-items: center; gap: 8px; padding: 6px 10px; cursor: pointer; font-size: 11px; color: var(--muted); transition: background 0.1s; }
.atd-subprofile-header:hover { background: var(--surface); }
.atd-subprofile-caret { font-size: 9px; transition: transform 0.15s; }
.atd-subprofile-caret.collapsed { transform: rotate(-90deg); }
.atd-subprofile-name { font-weight: 600; color: var(--text); }
.atd-subprofile-count { font-size: 10px; color: var(--muted); }
.atd-subprofile-tasks { padding: 0 10px 8px; }
.atd-subprofile-tasks.collapsed { display: none; }
.atd-task-item { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-bottom: 1px solid var(--border); font-size: 11px; }
.atd-task-item:last-child { border-bottom: none; }
.atd-task-desc { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atd-task-val { font-size: 10px; color: var(--accent); flex-shrink: 0; }
.atd-no-tasks { font-size: 11px; color: var(--muted); padding: 6px 0; }
.attr-templates-panel { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 12px; margin-bottom: 12px; }
.attr-templates-panel.hidden { display: none; }
.attr-templates-title { font-size: 12px; color: var(--text); font-weight: bold; margin-bottom: 10px; }
.attr-template-card { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.attr-template-card:last-child { border-bottom: none; }
.attr-template-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.attr-template-name { font-size: 12px; color: var(--text); }
.attr-template-desc { font-size: 10px; color: var(--muted); }
.attr-template-count { font-size: 10px; color: var(--accent); }
.attr-template-import-btn { font-size: 11px !important; padding: 3px 10px !important; }

/* Welcome overlay */
.ww-welcome-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 1000; display: flex; align-items: center; justify-content: center; }
.ww-welcome-overlay.hidden { display: none; }
.ww-welcome-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 32px 40px; text-align: center; max-width: 360px; box-shadow: 0 12px 48px rgba(0,0,0,0.5); }
.ww-welcome-title { font-size: 18px; color: var(--text); font-weight: bold; margin-bottom: 8px; }
.ww-welcome-desc { font-size: 12px; color: var(--muted); margin-bottom: 20px; line-height: 1.6; }
.ww-welcome-actions { display: flex; gap: 10px; justify-content: center; }

/* Glow highlight for demo onboarding */
.glow-highlight { animation: glowPulse 1.5s ease-in-out 2; }
@keyframes glowPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(88,166,255,0); border-color: var(--border); } 50% { box-shadow: 0 0 8px 2px rgba(88,166,255,0.4); border-color: var(--accent); } }

/* Header sync controls */
.header-sync-controls { display: flex; align-items: center; gap: 4px; margin-left: 10px; }
.header-sync-btn { background: none; border: none; color: var(--muted); font-size: 12px; width: 26px; height: 26px; border-radius: 3px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: color 0.15s; }
.header-sync-btn:hover { color: var(--accent); }
.header-sync-btn.active { color: var(--accent); }
.header-sync-highlight { font-size: 15px; width: 30px; height: 30px; color: var(--warning); }
.header-sync-highlight:hover { color: #e8b84a; }

/* Function info panels */
.fn-info-btn { background: none; border: 1px solid rgba(125,133,144,0.3); border-radius: 50%; color: rgba(230,237,243,0.7); font-size: 13px; cursor: pointer; padding: 0; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; transition: color 0.15s, border-color 0.15s; position: absolute; top: 8px; right: 8px; z-index: 5; }
.fn-info-btn:hover { color: var(--accent); border-color: rgba(88,166,255,0.4); }
.fn-info-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 16px 20px; margin-bottom: 14px; position: relative; }
.fn-info-panel.hidden { display: none; }
.fn-info-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.fn-info-origin { font-size: 11px; color: var(--muted); }
.fn-info-origin a { color: var(--accent); text-decoration: none; }
.fn-info-origin a:hover { text-decoration: underline; }
.fn-info-close { background: none; border: 1px solid var(--border); color: var(--muted); font-size: 12px; padding: 2px 8px; border-radius: 3px; cursor: pointer; }
.fn-info-close:hover { color: var(--error); border-color: var(--error); }
.fn-info-body { font-size: 12px; color: var(--text); line-height: 1.7; }
.fn-info-body h3 { font-size: 13px; color: var(--accent); margin: 12px 0 6px; }
.fn-info-body p { margin-bottom: 8px; }
.fn-info-body ul { padding-left: 16px; margin-bottom: 8px; }
.fn-info-body li { margin-bottom: 4px; }
.fn-info-body code { background: var(--bg); padding: 1px 4px; border-radius: 2px; font-size: 11px; }
.fn-info-body strong { color: var(--text); }

/* ── Stream Service ───────────────────────────────────────────────────────── */

/* Top bar controls */
.stream-topbar { display:flex; align-items:center; gap:6px; margin-right:12px; }
.stream-topbar-btn { background:none; border:1px solid var(--border); color:var(--accent); font-size:11px; padding:2px 6px; border-radius:3px; cursor:pointer; font-family:inherit; }
.stream-topbar-btn:hover { background:var(--surface); }
.stream-topbar-btn.active { background:var(--accent); color:var(--bg); border-color:var(--accent); }
.stream-mini-waveform { border:1px solid var(--border); border-radius:3px; background:var(--bg); vertical-align:middle; }

/* Dashboard metrics */
.stream-dashboard { padding:8px 0; border-bottom:1px solid var(--border); margin-bottom:8px; }
.stream-metrics-bar { display:flex; gap:16px; flex-wrap:wrap; }
.stream-metric { display:flex; flex-direction:column; gap:2px; }
.stream-metric-label { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; }
.stream-metric-value { font-size:13px; color:var(--text); font-weight:500; }

/* Controls bar */
.stream-controls { display:flex; justify-content:space-between; align-items:center; padding:6px 0; margin-bottom:8px; gap:8px; flex-wrap:wrap; }
.stream-controls-left, .stream-controls-right { display:flex; gap:6px; align-items:center; }

/* Filter panel */
.stream-filter-panel { padding:8px; background:var(--surface); border:1px solid var(--border); border-radius:4px; margin-bottom:8px; }
.stream-filter-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:6px; }
.stream-filter-row:last-child { margin-bottom:0; }
.stream-filter-label { font-size:11px; color:var(--muted); }

/* Compare bar */
.stream-compare-bar { display:flex; gap:8px; align-items:center; padding:8px; background:var(--surface); border:1px solid var(--border); border-radius:4px; margin-bottom:8px; }
.stream-compare-bar.hidden { display:none; }

/* Custom range row */
.stream-custom-range { display:flex; gap:8px; align-items:center; padding:8px; background:var(--surface); border:1px solid var(--border); border-radius:4px; margin-bottom:8px; }
.stream-custom-range.hidden { display:none; }

/* Comparison overlay */
.stream-comparison-overlay { opacity:0.4; border-top:1px dashed var(--border); margin-top:10px; padding-top:10px; }

/* Stream toggle label */
.stream-toggle-label { display:flex; align-items:center; gap:6px; cursor:pointer; }

/* Two-column panel body */
.stream-panel-body { display:flex; gap:12px; min-height:300px; }
.stream-col-primary { flex:2; min-width:0; }
.stream-col-secondary { flex:1; min-width:200px; }
.stream-col-secondary.hidden { display:none; }

/* Lens view */
.stream-lens-view { background:var(--surface); border:1px solid var(--border); border-radius:4px; padding:10px; min-height:200px; overflow:auto; font-size:12px; line-height:1.6; }
.stream-lens-view pre { white-space:pre-wrap; word-break:break-all; margin:0; font-family:inherit; }
.stream-lens-view table { width:100%; border-collapse:collapse; font-size:11px; }
.stream-lens-view th, .stream-lens-view td { padding:3px 6px; border-bottom:1px solid var(--border); text-align:left; }
.stream-lens-view th { color:var(--muted); font-weight:normal; text-transform:uppercase; font-size:10px; }

/* Regeneration card */
.stream-regen-card { background:var(--surface); border:1px solid var(--border); border-radius:4px; padding:10px; }
.stream-regen-header { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }
.stream-regen-metric { display:flex; justify-content:space-between; padding:4px 0; font-size:12px; border-bottom:1px solid var(--border); }
.stream-regen-metric:last-child { border-bottom:none; }

/* Config panel */
.stream-config-panel { background:var(--surface); border:1px solid var(--border); border-radius:4px; padding:12px; margin-top:10px; }
.stream-config-body { display:flex; flex-direction:column; gap:8px; }
.stream-config-row { display:flex; align-items:center; gap:8px; font-size:12px; }
.stream-config-row label { flex:1; color:var(--muted); min-width:180px; }
.stream-config-row input, .stream-config-row select { background:var(--bg); border:1px solid var(--border); color:var(--text); padding:3px 6px; border-radius:3px; font-family:inherit; font-size:12px; }
.stream-config-row input[type="number"] { width:80px; }

/* ASCII rendering in lens view */
.stream-ascii-output { font-family:ui-monospace, Menlo, Consolas, monospace; font-size:11px; line-height:1.3; white-space:pre; overflow-x:auto; }

/* Bundy bars */
.stream-bundy-bar { display:flex; align-items:center; gap:6px; margin-bottom:4px; font-size:11px; }
.stream-bundy-label { width:100px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); }
.stream-bundy-track { flex:1; height:14px; background:var(--bg); border-radius:2px; overflow:hidden; position:relative; }
.stream-bundy-fill { height:100%; background:var(--accent); border-radius:2px; }
.stream-bundy-duration { width:60px; text-align:right; color:var(--text); }

/* Felt heat map */
.stream-felt-row { display:flex; gap:1px; margin-bottom:2px; }
.stream-felt-cell { width:14px; height:14px; border-radius:2px; }

/* Frick markers */
.stream-frick-marker { display:inline-block; padding:2px 5px; margin:2px; border-radius:3px; font-size:10px; border:1px solid var(--border); }
.stream-frick-marker.start { border-color:var(--success); color:var(--success); }
.stream-frick-marker.stop { border-color:var(--error); color:var(--error); }
.stream-frick-marker.pause { border-color:var(--warning); color:var(--warning); }
.stream-frick-marker.resume { border-color:var(--accent); color:var(--accent); }
.stream-frick-marker.switch { border-color:var(--muted); color:var(--muted); }

/* Cooper canvas */
.stream-cooper-canvas { width:100%; max-width:400px; aspect-ratio:1; border:1px solid var(--border); border-radius:4px; background:var(--bg); }

/* Viz Lens Card */
.viz-lens-card { border:1px solid var(--border); border-radius:6px; width:100%; overflow:hidden; }
.viz-lens-card-header { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; border-bottom:1px solid var(--border); background:var(--surface); }
.viz-lens-card-title { font-weight:600; font-size:13px; color:var(--text); }
.viz-lens-card-meta { font-size:11px; color:var(--muted); }
.viz-lens-card-body { padding:10px 12px; overflow:auto; max-height:60vh; }

/* Viz Filter Bar */
.viz-filter-bar { display:flex; gap:6px; margin-bottom:8px; flex-wrap:wrap; }
.viz-filter-bar .inline-filter { width:120px; font-size:11px; }

/* Viz Active Filter Badges */
.viz-badges { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:8px; min-height:0; }
.viz-badge { display:inline-flex; align-items:center; gap:3px; padding:2px 8px; font-size:11px; background:var(--surface); border:1px solid var(--border); border-radius:12px; color:var(--text); }
.viz-badge-remove { background:none; border:none; color:var(--muted); cursor:pointer; font-size:10px; padding:0 2px; line-height:1; }
.viz-badge-remove:hover { color:var(--error); }

/* Viz Preset Bar */
.viz-preset-bar { display:flex; gap:6px; align-items:center; margin-bottom:10px; }
.viz-preset-bar .toolbar-select-sm { font-size:11px; }

/* Viz Custom Range */
#viz-custom-range { display:flex; gap:6px; align-items:center; margin-bottom:8px; padding:6px 0; }
#viz-custom-range input[type="datetime-local"] { font-size:11px; padding:3px 6px; border:1px solid var(--border); border-radius:3px; background:var(--bg); color:var(--text); }
#viz-custom-range .input-error { border-color:var(--error); }

/* Viz Section Toolbar */
#section-viz .section-toolbar { margin-bottom:8px; }

/* Viz Gallery */
.viz-gallery-panel { margin-top:12px; }
.viz-gallery-card { border:1px solid var(--border); border-radius:6px; margin-bottom:8px; overflow:hidden; transition:all 300ms ease; }
.viz-gallery-card-header { display:flex; align-items:center; gap:8px; padding:8px 12px; cursor:pointer; background:var(--surface); }
.viz-gallery-card-header:hover { background:var(--bg); }
.viz-card-name { font-weight:600; font-size:12px; color:var(--text); }
.viz-card-desc { font-size:10px; color:var(--muted); flex:1; text-align:right; }
.viz-card-preview-icon { font-size:14px; color:var(--muted); }
.viz-gallery-card-body { padding:10px 12px; max-height:0; opacity:0; overflow:hidden; transition:max-height 300ms ease, opacity 300ms ease; }
.viz-card-expanded .viz-gallery-card-body { max-height:2000px; opacity:1; }
.viz-primary-toggles { margin-bottom:8px; }
.viz-pill-row { display:flex; align-items:center; gap:4px; margin-bottom:4px; flex-wrap:wrap; }
.viz-pill-label { font-size:10px; color:var(--muted); width:60px; flex-shrink:0; }
.viz-pill { font-size:10px; padding:2px 6px; border:1px solid var(--border); border-radius:10px; background:none; color:var(--text); cursor:pointer; transition:all 150ms; }
.viz-pill:hover { border-color:var(--accent); }
.viz-pill-active { background:var(--accent); color:var(--bg); border-color:var(--accent); }
.viz-pill-disabled { opacity:0.3; cursor:not-allowed; }
.viz-pill-sm { font-size:9px; padding:1px 5px; }
.viz-adjust-btn { font-size:10px; padding:3px 8px; border:1px solid var(--border); border-radius:4px; background:none; color:var(--muted); cursor:pointer; margin-bottom:8px; }
.viz-adjust-btn:hover { color:var(--text); border-color:var(--accent); }
.viz-compare-btn { font-size:10px; padding:3px 8px; border:1px solid var(--border); border-radius:4px; background:none; color:var(--muted); cursor:pointer; margin-bottom:8px; margin-left:6px; }
.viz-compare-btn:hover { color:var(--text); }
.viz-adjust-drawer { padding:8px; border:1px solid var(--border); border-radius:4px; margin-bottom:8px; background:var(--bg); }
.viz-modifier-row { display:flex; align-items:center; gap:4px; margin-bottom:4px; flex-wrap:wrap; }
.viz-modifier-label { font-size:9px; color:var(--muted); width:70px; flex-shrink:0; }
.viz-bind-label { font-size:9px; color:var(--muted); margin-left:8px; }
.viz-bind-select { font-size:9px; padding:1px 4px; border:1px solid var(--border); border-radius:3px; background:var(--surface); color:var(--text); }
.viz-card-viz-area { min-height:100px; position:relative; margin-top:8px; }
.viz-card-empty, .viz-card-disabled, .viz-card-error { font-size:11px; color:var(--muted); padding:20px; text-align:center; }
.viz-card-error { color:var(--error); }
.viz-card-loading { font-size:11px; color:var(--muted); padding:20px; text-align:center; }
.viz-pipeline-error { font-size:11px; color:var(--error); padding:10px; }
.viz-annotation { font-size:0.75em; color:var(--muted); pointer-events:none; }
.viz-annotation-narrative { font-size:0.8em; color:var(--muted); font-style:italic; margin-top:8px; }
.viz-comparison-overlay { opacity:0.35; position:absolute; top:0; left:0; right:0; bottom:0; pointer-events:none; }
.viz-comparison-legend { font-size:10px; color:var(--muted); margin-top:4px; display:flex; gap:12px; }

/* ── Sidebar header controls (Works Bridge) ───────────────────────────────── */
.sidebar-header-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.bridge-icon {
  background: none;
  border: none;
  font-size: 14px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
  color: #f85149;
  transition: color 0.2s, text-shadow 0.2s;
}

.bridge-icon:hover {
  background: var(--hover);
}