.article {
  flex-grow: 3;
}


:root {
  --cp-font: 'Exo 2',sans-serif;
  --cp-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --cp-bg: #000011; --cp-text: #c8daf0; --cp-muted: #4a6880;
  --cp-accent: #2AFFBC; --cp-link: #f0a500; --cp-strong: #ffffff;
  --cp-surface: #0d1520; --cp-barbg: #0a0f16; --cp-border: #1a2535; --cp-sz: 15px;
  --cp-dim: #2a3a4a;

  --priority-low: #05d9e8;
  --priority-normal: #05d9e8;
  --priority-high: #ff2a6d;
  --priority-critical: #ff2a6d;
}
body { font-family: var(--cp-font); font-size: var(--cp-sz); line-height: 1.7; color: var(--cp-text); background: var(--cp-bg); }

h1 { font-family: var(--cp-font); font-weight: 600; font-size: 30px; text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.15; padding: 0.35em 0; margin: 0 0 0.7em; }
h2 { font-family: var(--cp-font); font-weight: 600; font-size: 23px; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.2; color: var(--cp-accent); border-left: 3px solid var(--cp-accent); background: color-mix(in srgb, var(--cp-accent) 5%, transparent); padding: 0.3em 0.7em; margin: 1.5em 0 0.6em; }
h3 { font-family: var(--cp-font); font-weight: 600; font-size: 18px; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.2; color: var(--cp-accent); margin: 1.5em 0 0.5em; }
h4 { display: inline-block; font-family: var(--cp-mono); font-weight: 500; font-size: 12.0px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cp-accent); border: 1px solid var(--cp-accent); border-radius: 2px; padding: 5px 11px; margin: 1.6em 0 0.6em; }
h5 { display: inline-block; font-family: var(--cp-mono); font-weight: 500; font-size: 11.4px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--cp-bg); background: var(--cp-accent); border-radius: 2px; padding: 5px 11px; margin: 1.6em 0 0.6em; }
h6 { display: inline-block; font-family: var(--cp-mono); font-weight: 400; font-size: 12.3px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--cp-muted); border-bottom: 1px dotted var(--cp-border); padding: 0 0 3px; margin: 1.6em 0 0.6em; }

p { margin: 0 0 1em; }
em { font-style: italic; color: var(--cp-accent); }
strong { font-weight: 600; color: var(--cp-strong); }
small { font-size: 0.8125em; color: var(--cp-muted); }
abbr { text-decoration: underline dotted; text-underline-offset: 3px; color: var(--cp-muted); cursor: help; }
a { color: var(--cp-link); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--cp-link) 40%, transparent); padding-bottom: 1px; }
a:hover { border-color: var(--cp-link); }

blockquote { position: relative; border-top: 2px solid var(--cp-accent); margin: 1.6em 0; padding: 0.9em 1.2em; background: color-mix(in srgb, var(--cp-accent) 5%, transparent); border-radius: 0 0 2px 2px; color: var(--cp-muted); font-style: italic; }
blockquote::before { content: '“ QUOTE'; position: absolute; top: 0; left: 1.2em; transform: translateY(-50%); background: var(--cp-bg); padding: 0 8px; font-family: var(--cp-mono); font-style: normal; font-size: 10.5px; letter-spacing: 0.15em; color: var(--cp-accent); text-transform: uppercase; }
blockquote p { margin: 0; font-size: 1.02em; line-height: 1.55; }

pre { position: relative; font-family: var(--cp-mono); font-size: 0.8125em; color: var(--cp-accent); background: var(--cp-surface); border: 1px solid var(--cp-border); border-top: 2px solid var(--cp-accent); border-radius: 2px; padding: 42px 16px 14px; margin: 1.2em 0; overflow-x: auto; line-height: 1.6; }
pre::before { content: attr(data-file); position: absolute; top: 0; left: 0; right: 0; height: 30px; display: flex; align-items: center; padding: 0 12px 0 28px; box-sizing: border-box; background: var(--cp-barbg); border-bottom: 1px solid var(--cp-border); font-family: var(--cp-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: #7a98b0; white-space: nowrap; }
pre::after { content: attr(data-lang); position: absolute; top: 0; right: 12px; height: 30px; display: flex; align-items: center; font-family: var(--cp-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--cp-accent); opacity: 0.7; }
pre code { all: unset; font: inherit; color: inherit; display: block; }
code { font-family: var(--cp-mono); font-size: 0.875em; color: var(--cp-accent); background: var(--cp-surface); padding: 2px 6px; border-radius: 2px; border: 1px solid var(--cp-border); }
mark { background: color-mix(in srgb, var(--cp-accent) 15%, transparent); color: var(--cp-accent); padding: 1px 4px; border-radius: 2px; }
kbd { font-family: var(--cp-mono); font-size: 0.8125em; color: var(--cp-accent); background: var(--cp-surface); border: 1px solid var(--cp-border); border-bottom-width: 2px; padding: 1px 6px; border-radius: 2px; }

figure { margin: 1.5em 0; }
figure img { display: block; width: 100%; object-fit: cover; border: 1px solid var(--cp-border); border-top: 2px solid var(--cp-accent); border-radius: 2px; }
figcaption { font-family: var(--cp-mono); font-size: 0.74em; color: var(--cp-muted); letter-spacing: 0.04em; padding-top: 8px; }
figcaption::before { content: '▍ '; color: var(--cp-accent); }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px,1fr)); gap: 10px; margin: 1.2em 0; }
.gallery figure { margin: 0; }
.gallery img { height: 72px; cursor: pointer; transition: filter .15s; }
.gallery img:hover { filter: brightness(1.2); }
.gallery figcaption { font-size: 0.66em; padding-top: 5px; }

ul,ol { margin: 0.5em 0 1em; padding-left: 1.4em; }
li { margin: 0.25em 0; }
ul { list-style: none; padding-left: 0; }
ul li { padding-left: 1em; position: relative; }
ul li::before { content: '▸'; position: absolute; left: 0; color: var(--cp-accent); font-size: 0.8em; top: 0.15em; }

ul li.task-list-item::before { content: none; }
.task-list-item-checkbox { margin-right: 10px; }

ol { list-style: decimal; padding-left: 1.4em; }
ol li::marker { color: var(--cp-accent); }
hr { border: none; border-top: 1px solid var(--cp-border); margin: 2em 0; }

/* table */
table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: 0.92em; }
th { text-align: left; font-family: var(--cp-mono); font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cp-accent); background: var(--cp-barbg); padding: 9px 12px; border-bottom: 2px solid var(--cp-accent); white-space: nowrap; }
td { padding: 9px 12px; border-bottom: 1px solid var(--cp-border); color: var(--cp-text); }
tbody tr:hover td { background: color-mix(in srgb, var(--cp-accent) 4%, transparent); }

/* tag list */
.tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 1.2em 0; padding: 0; }
.tag { font-family: var(--cp-mono); font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cp-accent); border: 1px solid color-mix(in srgb, var(--cp-accent) 40%, transparent); background: color-mix(in srgb, var(--cp-accent) 6%, transparent); padding: 3px 10px; border-radius: 2px; }

label, .form-label { font-family: var(--cp-mono); font-size: 0.75em; color: var(--cp-muted); letter-spacing: 0.08em; text-transform: uppercase; display: block; margin-bottom: 6px; }
input[type=text],input[type=email],input[type=password],input[type=number],textarea,select { font-family: var(--cp-font); font-size: var(--cp-sz); color: var(--cp-text); background: var(--cp-surface); border: 1px solid var(--cp-border); border-radius: 2px; padding: 9px 12px; width: 90%; outline: none; line-height: 1.5; transition: border-color .15s; }
input:focus,textarea:focus,select:focus { border-color: var(--cp-accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--cp-accent) 33%, transparent); }
textarea { resize: vertical; min-height: 54px; font-family: Fira Code, monospace; }
::placeholder { color: #2a4060; }

input[type=radio],input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; border: 1px solid #2a4060; background: var(--cp-surface); cursor: pointer; position: relative; flex-shrink: 0; vertical-align: middle; transition: border-color .12s, background .12s; }
input[type=radio] { border-radius: 50%; }
input[type=checkbox] { border-radius: 2px; }
input[type=radio]:checked,input[type=checkbox]:checked { border-color: var(--cp-accent); background: color-mix(in srgb, var(--cp-accent) 9%, transparent); }
input[type=radio]:checked::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 8px; height: 8px; border-radius: 50%; background: var(--cp-accent); }
input[type=checkbox]:checked::after { content: '✓'; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-52%); font-family: var(--cp-mono); font-size: 11px; font-weight: 600; color: var(--cp-accent); }

.radio-row, .check-row { display: flex; align-items: center; gap: 9px; cursor: pointer; margin-bottom: 6px; opacity: 0.4; transition: opacity .15s; }
.radio-row:hover, .check-row:hover { opacity: 0.7; }
.radio-row:has(input:checked), .check-row:has(input:checked) { opacity: 1; }

button { font-family: var(--cp-mono); font-size: 0.85em; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 2px; padding: 10px 20px; cursor: pointer; transition: all .15s; }
.btn-primary { color: var(--cp-bg); background: var(--cp-accent); border: 1px solid var(--cp-accent); font-weight: 500; }
.btn-primary:hover { filter: brightness(1.15); }
.btn-regular { color: var(--cp-accent); background: transparent; border: 1px solid color-mix(in srgb, var(--cp-accent) 40%, transparent); }
.btn-regular:hover { background: color-mix(in srgb, var(--cp-accent) 7%, transparent); border-color: var(--cp-accent); }
.btn-ghost { color: var(--cp-muted); background: transparent; border: 1px solid var(--cp-border); }
.btn-ghost:hover { color: var(--cp-text); border-color: #2a4060; }

.cp-full h1 { color: #00ffc8; border-color: #00ffc8; }
.cp-full h2 { color: #4a9eff; border-left-color: #4a9eff; background: color-mix(in srgb, #4a9eff 6%, transparent); }
.cp-full h3 { color: #9060ff; }
.cp-full h4 { color: #f0a500; border-color: #f0a500; }
.cp-full h5 { color: var(--cp-bg); background: #ff2d78; }
.cp-full h6 { color: #00d4ff; }
.cp-full blockquote { border-top-color: #9060ff; background: color-mix(in srgb, #9060ff 5%, transparent); }
.cp-full blockquote::before { color: #9060ff; }
.cp-full pre { border-top-color: #00d4ff; color: #00d4ff; }
.cp-full pre::after { color: #00d4ff; }
.cp-full figure img { border-top-color: #00d4ff; }
.cp-full em { color: #f0a500; }
.cp-full strong { color: #ffffff; }
.cp-full a { color: #f0a500; border-bottom-color: color-mix(in srgb, #f0a500 40%, transparent); }
.cp-full code, .cp-full kbd { color: #00d4ff; }
.cp-full mark { color: #f0a500; background: color-mix(in srgb, #f0a500 15%, transparent); }
.cp-full ul li::before { color: #4a9eff; }
.cp-full ol li::marker { color: #4a9eff; }
.cp-full th { color: #00d4ff; border-bottom-color: #00d4ff; }




.card {
  font-family: var(--cp-font);
  background: var(--cp-surface);
  border: 1px solid var(--cp-border);
  border-top: 2px solid var(--cp-accent);
  border-radius: 2px;
}

.card + .card {
  margin-top: 20px;
}

.card.subtask-status-not-started-yet,
.card.subtask-status-done {
  border-color: var(--cp-dim);
}
.task-status{
  position: relative;
  border-radius: 0;
}

.task-status.task-status-in_progress {
  border-color: var(--cp-accent);
  color: var(--cp-accent);
}

.task-status.task-status-done {
  background-color: var(--cp-accent);
}

.card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px 10px;
}

.card-row {
  display: flex;
  background: var(--cp-barbg);
  border-bottom: 1px solid var(--cp-border);
}

.card-row .row-cell{
  flex: 1;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.card-row .row-cell + .row-cell {
  border-left: 1px solid var(--cp-border);
}

.card-content {
  padding: 12px 14px;
}

.card-footer {
  border-top: 1px solid var(--cp-border);
  padding: 12px 14px;
  background: var(--cp-barbg);
}




.subtask {
  --t-git: #f0a500; --t-doc: #4a9eff; --t-mr: #9060ff; --t-file: #00ffc8; --t-img: #ff2d78;
  font-family: var(--cp-font);
  background: var(--cp-surface); border: 1px solid var(--cp-border);
  border-top: 2px solid var(--cp-accent); border-radius: 2px;
}

.subtask-status-done {
  border-color: var(--cp-dim);
}

.subtask-status-done {
  border-color: var(--cp-dim);
}

/* ── заголовок ── */
.subtask-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 14px 10px; }
.subtask-title { font-size: 15px; font-weight: 600; color: var(--cp-text); line-height: 1.25; }

/* переиспользуемая пилюля (роль, заголовок артефактов) */
.pill {
  flex-shrink: 0; font-family: var(--cp-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--cp-accent);
  border: 1px solid color-mix(in srgb, var(--cp-accent) 40%, transparent);
  background: color-mix(in srgb, var(--cp-accent) 8%, transparent);
  padding: 3px 9px; border-radius: 2px; white-space: nowrap;
}
.subtask-role { margin-top: 2px; }

/* ── ответственный ── */
.subtask-assignee { display: flex; align-items: center; gap: 9px; padding: 0 14px 12px; border-bottom: 1px solid var(--cp-border); }
.assignee-avatar {
  width: 28px; height: 28px; border-radius: 2px; flex-shrink: 0;
  background: color-mix(in srgb, var(--cp-accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--cp-accent) 40%, transparent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--cp-mono); font-size: 10px; font-weight: 500; color: var(--cp-accent);
}
.assignee-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.assignee-name { font-size: 13px; font-weight: 500; color: var(--cp-text); line-height: 1.2; }
.assignee-handle { font-family: var(--cp-mono); font-size: 10px; color: var(--cp-muted); }
.assignee-meta { margin-left: auto; font-family: var(--cp-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cp-muted); }

/* ── даты ── */
.subtask-dates { display: flex; background: var(--cp-barbg); border-bottom: 1px solid var(--cp-border); }
.date-cell { flex: 1; padding: 8px 12px; display: flex; flex-direction: column; gap: 3px; }
.date-cell + .date-cell { border-left: 1px solid var(--cp-border); }
.date-label { font-family: var(--cp-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cp-muted); }
.date-value { font-family: var(--cp-mono); font-size: 12px; color: var(--cp-text); }
.date-value.eta { color: var(--t-git); }
.date-value.actual { color: var(--cp-accent); }

/* ── описание ── */
.subtask-desc { padding: 12px 14px; }
.subtask-desc p { margin: 0 0 10px; font-size: 13px; line-height: 1.6; color: #8aa8c0; }
.subtask-desc p:last-child { margin-bottom: 0; }
.subtask-desc code { font-family: var(--cp-mono); font-size: 12px; color: var(--cp-accent); background: var(--cp-bg); padding: 1px 5px; border-radius: 2px; border: 1px solid var(--cp-border); }
.check-item { display: flex; align-items: flex-start; gap: 9px; margin: 7px 0; font-size: 13px; line-height: 1.5; cursor: pointer; color: var(--cp-text); }
.check-item input { appearance: none; -webkit-appearance: none; width: 15px; height: 15px; margin-top: 1px; border: 1px solid #2a4060; border-radius: 2px; background: var(--cp-bg); cursor: pointer; position: relative; flex-shrink: 0; transition: border-color .12s, background .12s; }
.check-item input:checked { border-color: var(--cp-accent); background: color-mix(in srgb, var(--cp-accent) 9%, transparent); }
.check-item input:checked::after { content: '✓'; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-54%); font-family: var(--cp-mono); font-size: 10px; font-weight: 600; color: var(--cp-accent); }
.check-item:has(input:not(:checked)) { color: var(--cp-muted); }

/* ── артефакты ── */
.subtask-foot { border-top: 1px solid var(--cp-border); padding: 12px 14px; background: var(--cp-barbg); }
.artifacts-title { display: inline-block; margin-bottom: 10px; }
.artifact-list { display: flex; flex-direction: column; gap: 2px; }
.artifact { display: flex; align-items: baseline; gap: 8px; padding: 5px 6px; border-radius: 2px; text-decoration: none; transition: background .12s; font-family: var(--cp-mono); font-size: 12px; line-height: 1.4; }
.artifact:hover { background: color-mix(in srgb, var(--cp-accent) 6%, transparent); }
.artifact-type { flex-shrink: 0; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; min-width: 34px; }
.artifact-type::after { content: ':'; color: var(--cp-muted); }
.artifact-value { color: #8aa8c0; word-break: break-all; border-bottom: 1px solid transparent; }
.artifact:hover .artifact-value { color: var(--cp-text); border-bottom-color: color-mix(in srgb, var(--cp-accent) 40%, transparent); }

/* типы артефактов — цвет через класс */
.t-git  .artifact-type { color: var(--t-git); }
.t-doc  .artifact-type { color: var(--t-doc); }
.t-mr   .artifact-type { color: var(--t-mr); }
.t-file .artifact-type { color: var(--t-file); }
.t-img  .artifact-type { color: var(--t-img); }











.task {
  background: var(--cp-surface); border: 1px solid var(--cp-border);
  border-left: 2px solid var(--row-c, var(--cp-muted)); border-radius: 2px; overflow: hidden;
}

/* ряд 1 */
.task-head { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 11px 14px; }
.task-status , .task-priority {
  font-family: var(--cp-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--row-c, var(--cp-muted));
  border: 1px solid color-mix(in srgb, var(--row-c, var(--cp-muted)) 40%, transparent);
  background: color-mix(in srgb, var(--row-c, var(--cp-muted)) 8%, transparent);
  padding: 3px 9px; white-space: nowrap;
}

.task-priority-0 {
  color: var(--priority-low);
  border-color: var(--priority-low);
}

.task-priority-1 {
  color: var(--priority-normal);
  border-color: var(--priority-normal);
}

.task-priority-2 {
  color: var(--priority-high);
  border-color: var(--priority-high);
}

.task-priority-3 {
  color: var(--cp-bg);
  border-color: var(--priority-critical);
  background-color: var(--priority-critical);
}

.task-title { font-size: 14px; font-weight: 600; color: var(--cp-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-id { font-family: var(--cp-mono); font-size: 10px; color: var(--cp-muted); margin-right: 8px; }
.task-eta { font-family: var(--cp-mono); font-size: 11px; color: var(--cp-muted); white-space: nowrap; }
.task-eta b { color: var(--s-eta); font-weight: 400; }

/* ряд 2 */
.task-subs { border-top: 1px solid var(--cp-border); background: var(--cp-barbg); padding: 6px 0; }
.sub-row { display: grid; grid-template-columns: 14px minmax(0,1fr) auto auto; align-items: center; gap: 10px; padding: 5px 14px 5px 22px; }
.sub-dot { width: 8px; height: 8px; border-radius: 50%; justify-self: center;
  background: var(--cp-accent); box-shadow: 0 0 5px color-mix(in srgb, var(--cp-accent) 70%, transparent); }
.sub-name { font-size: 12px; color: var(--cp-text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub-role { font-family: var(--cp-mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--cp-muted); border: 1px solid var(--cp-border); border-radius: 2px; padding: 1px 6px; white-space: nowrap; }
.sub-assignee { display: flex; align-items: center; gap: 6px; }
.sub-avatar { width: 20px; height: 20px; border-radius: 2px; flex-shrink: 0;
  background: color-mix(in srgb, var(--cp-accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--cp-accent) 35%, transparent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--cp-mono); font-size: 8px; font-weight: 500; color: var(--cp-accent); }
.sub-who { font-family: var(--cp-mono); font-size: 10px; color: var(--cp-muted); }


.task-empty { padding: 7px 14px 7px 22px; font-family: var(--cp-mono); font-size: 10px; color: var(--cp-dim); letter-spacing: 0.06em; }

/* dates — created / eta / deadline */
.rel-dates { display: flex; background: var(--cp-barbg); border-top: 1px solid var(--cp-border); border-bottom: 1px solid var(--cp-border); }
.rel-cell { flex: 1; padding: 8px 14px; display: flex; flex-direction: column; gap: 3px; }
.rel-big-cell { flex: 5; padding: 8px 14px; display: flex; flex-direction: column; gap: 3px; }
.rel-cell + .rel-cell { border-left: 1px solid var(--cp-border); }
.rel-label { font-family: var(--cp-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cp-muted); }
.rel-val { font-family: var(--cp-mono); font-size: 13px; color: var(--cp-text); }
.rel-val.eta  { color: var(--s-eta); }
.rel-val.dead { color: var(--s-dead); }





section.task-section {
    position: relative;
    background: var(--cp-barbg);
    border: 1px solid var(--cp-border);
    border-radius: 2px;

    margin: 1.2em 0;
    overflow-x: auto;
    line-height: 1.6;
}

section.task-section .subheader {
  padding: 0;
}

section.task-section .content {
  padding: 16px;
}

.artifact-compact-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

section.task-section header, section.task-section footer{
    content: attr(data-name);

    min-height: 30px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 12px 6px 28px;
    box-sizing: border-box;

    background: var(--cp-surface);
    border-bottom: 1px solid var(--cp-border);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: #7a98b0;
    white-space: nowrap;
}

a.horizon-button {
    display: inline-block;
    font-family: var(--cp-mono);
    font-weight: 500;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cp-bg);
    background: var(--cp-accent);
    border-radius: 2px;
    padding: 3px 11px;

    color: var(--cp-accent);
    border: 1px solid color-mix(in srgb, var(--row-c, var(--cp-muted)) 40%, transparent);
    background: color-mix(in srgb, var(--row-c, var(--cp-muted)) 8%, transparent);
}

a.horizon-button:hover {
    display: inline-block;
    font-family: var(--cp-mono);
    font-weight: 500;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cp-bg);
    background: var(--cp-accent);
    border-radius: 2px;
    padding: 3px 11px;
}



.bc {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    font-size: 90%;
}
.bc a {
  color: var(--cp-muted);
  text-decoration: none;
  padding: 2px 5px;
  white-space: nowrap;
  border: none;
}

.bc a:hover { color: var(--cp-text); background: color-mix(in srgb, var(--cp-accent) 8%, transparent); }
.bc .sep { color: var(--cp-dim); padding: 0 1px; user-select: none; font-family: var(--cp-mono); }
.id { color: var(--cp-dim); }


.bc-project {
  color: var(--cp-accent);
  letter-spacing: 0.04em;
  border-radius: 2px;
  border: solid 1px var(--cp-dim);
}
.bc-project {

  background: color-mix(in srgb, var(--cp-accent) 8%, transparent);
  text-transform: uppercase; letter-spacing: 0.08em; margin-right: 4px;
}

.task .subtasks {
  margin: 10px 20px;
}

#main{
  display: flex;
}

#left-sidebar {
  flex-grow: 1;
  min-width: 240px;
}

#top-level-navigation {
  width: 200px;
  padding:20px 0 0 20px;
  position:fixed;
}

#top-level-navigation .filters a {
  text-decoration: none;
  border: none;
  color: var(--cp-text);
}

#top-level-navigation li::before {
  content: none;
}

#top-level-navigation li.active {
  text-decoration: none;
  border: none;
  border-left: solid 2px var(--cp-accent);
  margin-left: -2px;
  color: var(--cp-accent);
  background: color-mix(in srgb, var(--cp-accent) 5%, transparent);
}

#top-level-navigation li a {
  display: block;
}

#top-level-navigation li a:hover {
  color: var(--cp-accent);
  background: color-mix(in srgb, var(--cp-accent) 5%, transparent);
}

a.back_to_all_projects {
  text-decoration: none;
  border: none;
  background: none;
  color: var(--cp-muted);

}

.task-extended-status {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  padding: 5px 14px;
}

.message {
  border: solid 1px var(--cp-dim);
  color: var(--cp-accent);
  padding: 20px;
  background: var(--cp-bg);
}

.message-error {
  color: var(--priority-critical);
}