/* App styles — the screen layer on top of nocturne.css.
 *
 * nocturne.css ships verbatim and stays the source of truth for colour, type,
 * space, radius and shadow. Nothing here invents a value: every number below
 * is either a token or a measurement lifted from design/Task System.dc.html.
 * Load order is nocturne.css → this file. */

/* ── Shell ─────────────────────────────────────────────────────────────── */
.shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100dvh; }
.main { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }

/* ── Left rail ─────────────────────────────────────────────────────────── */
.rail {
  display: flex; flex-direction: column; gap: 22.4px;
  padding: 16.8px 11.2px;
  background: linear-gradient(180deg, #1a1c2b, #161826);
  box-shadow: inset -1px 0 0 rgba(233, 233, 237, .08);
}
.rail-brand { display: flex; align-items: center; gap: 9px; padding: 5.6px 8px; text-decoration: none; color: inherit; }
.rail-mark {
  width: 22px; height: 22px; flex: none; border-radius: 6px;
  background: var(--color-accent); color: #161826;
  display: grid; place-items: center; font-size: 12px; font-weight: 600;
}
.rail-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.rail-brand-name { font-size: 13.5px; font-weight: 500; }
.rail-brand-sub { font-size: 10.5px; color: color-mix(in srgb, var(--color-text) 45%, transparent); }

.rail-section { display: flex; flex-direction: column; gap: 2.8px; }
.rail-heading {
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 35%, transparent);
  padding: 0 8px 5.6px;
}
.rail-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 11px; border-radius: 8px; font-size: 13.5px; text-decoration: none;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
}
.rail-link i { font-size: 17px; }
.rail-link:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.rail-link.is-active {
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 32%, transparent);
}
.rail-link--dept { gap: 9px; padding: 6px 11px; font-size: 13px; }
.rail-count {
  margin-left: auto; font-size: 10.5px; font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--color-text) 40%, transparent);
}
.rail-badge {
  margin-left: auto; font-size: 10px; padding: 1px 6px; border-radius: 6px;
  background: var(--color-accent-800); color: var(--color-accent-100);
}
.rail-user {
  margin-top: auto; display: flex; align-items: center; gap: 9px;
  padding: 8px; border-radius: 8px; color: inherit; text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(233, 233, 237, .1);
}
.rail-user-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.rail-user-name { font-size: 12px; }
.rail-user-role { font-size: 10px; color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.rail-user i { margin-left: auto; font-size: 14px; color: color-mix(in srgb, var(--color-text) 40%, transparent); }

/* ── Shared marks ──────────────────────────────────────────────────────── */
.avatar {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  background: var(--color-accent-800); color: var(--color-accent-100);
  display: grid; place-items: center; font-size: 11px;
}
.avatar--sm { width: 20px; height: 20px; font-size: 9.5px; }
.avatar--neutral { background: var(--color-neutral-800); color: var(--color-neutral-100); }

/* Departments are coded by a tonal dot, never by five hues — see the design
 * system note in README.md before changing any of these. */
.dot { width: 7px; height: 7px; flex: none; border-radius: 50%; }
.dot--sm { width: 6px; height: 6px; }
.dot--marketing { background: #b5abfc; }  /* accent-400 */
.dot--sales     { background: #5d5294; }  /* accent-700 — the darkest accent
                                             step, so it separates cleanly from
                                             both Marketing and IT */
.dot--it        { background: #796cbf; }  /* accent-600 */
.dot--finance   { background: #b2b6ca; }  /* neutral-400 */
.dot--ops       { background: #75798c; }  /* neutral-600 */
.dot--ceo       { box-shadow: inset 0 0 0 1.5px #d2cefd; }

/* The fourth status treatment, which nocturne.css does not ship a class for. */
.tag-ghost {
  border: 1px solid var(--color-divider);
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
.tag.is-dim { opacity: .65; }

.overline {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 40%, transparent);
}
.truncate { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link { margin-left: auto; font-size: 11.5px; text-decoration: none; }
.link i { font-size: 11px; }
.empty { font-size: 12px; color: color-mix(in srgb, var(--color-text) 45%, transparent); }

/* ── Page header ───────────────────────────────────────────────────────── */
.page-header { display: flex; align-items: center; gap: 11.2px; padding: 16.8px 22.4px 11.2px; }
.page-heading { display: flex; flex-direction: column; margin-right: auto; min-width: 0; }
.page-title { margin: 0; font-size: 20px; }
.page-sub { font-size: 12px; color: color-mix(in srgb, var(--color-text) 50%, transparent); }

/* ── Filter row ────────────────────────────────────────────────────────── */
.filter-row { display: flex; align-items: center; gap: 8.4px; padding: 0 22.4px 16.8px; flex-wrap: wrap; }
.filter-row .overline { margin-right: 2.8px; }
.pill { padding: 5px 12px; gap: 7px; text-decoration: none; }
a.pill:hover { filter: brightness(1.18); }
.pill.is-muted { opacity: .55; }
.month-picker {
  margin-left: auto; display: flex; align-items: center; gap: 7px;
  font-size: 12px; text-decoration: none;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.month-picker i { font-size: 15px; }
.month-picker i.ph-caret-down { font-size: 12px; }

/* ── KPI row ───────────────────────────────────────────────────────────── */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11.2px; padding: 0 22.4px 16.8px; }
.kpi { background: var(--color-surface); border-radius: 8px; padding: 14px 16.8px; box-shadow: var(--shadow-sm); }
.kpi-kicker { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent); }
.kpi-figure { display: flex; align-items: flex-end; gap: 7px; margin-top: 6px; }
.kpi-value { font-size: 30px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi-qual { font-size: 11.5px; padding-bottom: 4px; color: color-mix(in srgb, var(--color-text) 50%, transparent); }

/* ── Dashboard body ────────────────────────────────────────────────────── */
.dash-body {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 16.8px;
  padding: 0 22.4px 22.4px; flex: 1; min-height: 0;
}
.panel {
  background: var(--color-surface); border-radius: 8px; padding: 16.8px;
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 14px;
}
.panel .hr { margin: 2.8px 0; }
.panel-head { display: flex; align-items: baseline; gap: 9px; }
.panel-title { margin: 0; font-size: 15px; }
.panel-note { font-size: 11px; color: color-mix(in srgb, var(--color-text) 45%, transparent); }

/* Department activity bars */
.bars { display: flex; flex-direction: column; gap: 12.6px; }
.bar-row { display: grid; grid-template-columns: 78px 1fr 46px; align-items: center; gap: 11.2px; }
.bar-row.is-empty { opacity: .6; }
.bar-label { display: flex; align-items: center; gap: 7px; font-size: 12.5px; }
.track { height: 10px; border-radius: 5px; background: var(--color-neutral-900); }
.track.is-empty { box-shadow: inset 0 0 0 1px rgba(233, 233, 237, .06); }
.track-fill { height: 100%; border-radius: 5px; background: var(--color-accent); }
.track-fill--marketing { background: linear-gradient(90deg, #796cbf, #b5abfc); }
.track-fill--sales     { background: linear-gradient(90deg, #2b2741, #5d5294); }
.track-fill--finance   { background: linear-gradient(90deg, #5d5294, #968ae0); }
.track-fill--it        { background: linear-gradient(90deg, #423a6a, #796cbf); }
.track-fill--ops       { background: linear-gradient(90deg, #3f424d, #75798c); }
.track-fill--ceo       { background: linear-gradient(90deg, #423a6a, #d2cefd); }
.bar-value { font-size: 12.5px; text-align: right; font-variant-numeric: tabular-nums; }

/* Latest entries */
.latest { display: flex; flex-direction: column; gap: 9px; }
.latest-row { display: flex; align-items: center; gap: 9px; font-size: 12.5px; }
.latest-date { font-size: 11px; color: color-mix(in srgb, var(--color-text) 40%, transparent); }

/* Quarterly column */
.dash-right { display: flex; flex-direction: column; gap: 11.2px; min-height: 0; }
.quarter-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11.2px; }
.quarter-card {
  background: var(--color-surface); border-radius: 8px; padding: 14px;
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 9px;
}
.quarter-card.is-current { box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 40%, transparent); }
.quarter-label { font-size: 11px; letter-spacing: .06em; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.quarter-card.is-current .quarter-label { color: var(--color-accent); }
.quarter-value { font-size: 26px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.quarter-card.is-past .quarter-value { color: var(--color-accent-300); }
.quarter-track { height: 6px; border-radius: 3px; background: var(--color-neutral-900); }
.quarter-fill { height: 100%; border-radius: 3px; background: var(--color-accent); }
.quarter-card.is-future .quarter-fill { background: var(--color-accent-600); }
.quarter-meta { font-size: 10.5px; color: color-mix(in srgb, var(--color-text) 45%, transparent); }

/* Needs attention */
.attention { flex: 1; min-height: 0; gap: 11.2px; }
.attention-head { display: flex; align-items: baseline; gap: 9px; }
.attention-title { font-size: 13.5px; font-weight: 500; }
.attention-rows { display: flex; flex-direction: column; gap: 8.4px; }
.attention-row { display: flex; align-items: center; gap: 11.2px; }
.attention-row .tag { flex: none; }
.attention-name { flex: 1; min-width: 0; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attention-note { color: color-mix(in srgb, var(--color-text) 40%, transparent); }
.mini-track { width: 74px; height: 6px; flex: none; border-radius: 3px; background: var(--color-neutral-900); }
.mini-fill { height: 100%; border-radius: 3px; background: var(--color-accent); }
.mini-fill--hold { background: var(--color-neutral-500); }
.attention-value {
  width: 32px; font-size: 11.5px; text-align: right; font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

/* Telegram nudge, pinned to the bottom of the attention card */
.nudge {
  margin-top: auto; display: flex; align-items: center; gap: 9px;
  padding: 9px 11.2px; border-radius: 8px;
  background: color-mix(in srgb, var(--color-accent) 9%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 22%, transparent);
}
.nudge i { font-size: 17px; color: var(--color-accent); }
.nudge-text { font-size: 12px; color: color-mix(in srgb, var(--color-text) 75%, transparent); }

/* ── Sign in ───────────────────────────────────────────────────────────── */
.auth { min-height: 100dvh; display: grid; place-items: center; padding: 22.4px; }
.auth-card {
  width: min(360px, 100%); display: flex; flex-direction: column; gap: 14px;
  background: var(--color-surface); border-radius: var(--radius-lg);
  padding: 22.4px; box-shadow: var(--shadow-lg);
}
.auth-brand { display: flex; align-items: center; gap: 9px; }
.auth-error {
  font-size: 12px; padding: 8px 10px; border-radius: 6px;
  color: var(--color-accent-300);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
}

/* ── Screens not built yet ─────────────────────────────────────────────── */
.placeholder { flex: 1; display: grid; place-items: center; padding: 22.4px; }
.placeholder-inner { display: flex; flex-direction: column; align-items: center; gap: 8.4px; max-width: 420px; text-align: center; }

/* ── Utility ───────────────────────────────────────────────────────────── */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.rail-link--dept i { font-size: 15px; }

/* ── Flash ─────────────────────────────────────────────────────────────── */
.flash {
  position: fixed; top: 11.2px; left: 50%; transform: translateX(-50%); z-index: 60;
  display: flex; align-items: center; gap: 9px;
  padding: 8px 14px; border-radius: 8px; font-size: 12.5px;
  background: var(--color-surface); box-shadow: var(--shadow-md);
}
.flash i { font-size: 15px; color: var(--color-accent); }
.flash--warn i { color: var(--color-neutral-400); }
.flash form { margin: 0; }
.flash .btn { font-size: 12px; padding: 2px 6px; }

/* ── Screen 1b — Daily Work Log ────────────────────────────────────────── */
.log-shell { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 316px; }
.log-shell.drawer-closed { grid-template-columns: 1fr 48px; }
.log-main { display: flex; flex-direction: column; min-width: 0; padding: 16.8px 0 0 22.4px; }
.log-header { padding: 0 16.8px 0 0; }

/* Filter bar: four controls sharing one treatment. */
.log-controls { display: flex; align-items: center; gap: 8.4px; padding: 16.8px 16.8px 14px 0; }
.control {
  display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 10px;
  border-radius: 8px; font-size: 13px;
  background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-divider);
  color: color-mix(in srgb, var(--color-text) 75%, transparent);
}
.control:focus-within { box-shadow: inset 0 0 0 1px var(--color-accent); }
.control > i { flex: none; font-size: 15px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.control select,
.control input {
  min-width: 0; padding: 0; border: 0; background: transparent;
  font: inherit; font-size: 13px; color: inherit;
}
.control select { appearance: none; cursor: pointer; }
.control select:focus-visible,
.control input:focus-visible { outline: none; }
.control input[type="date"] { color-scheme: dark; font-variant-numeric: tabular-nums; }
.control input::placeholder { color: color-mix(in srgb, var(--color-text) 38%, transparent); }
.control-caret { font-size: 11px; opacity: .6; flex: none; }
.control-arrow { color: color-mix(in srgb, var(--color-text) 35%, transparent); }
.control--search { flex: 1; }
.control--search input { width: 100%; }

/* Table */
.log-table-wrap { flex: 1; min-height: 0; overflow-y: auto; padding-right: 16.8px; }
.log-table { font-size: 13px; }
.log-table .col-when {
  width: 104px; padding-left: 0; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.log-table td.col-when { color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.log-table .col-dept { width: 124px; }
.log-table .col-status { width: 96px; }
.log-table .col-remark { width: 150px; }
.log-table td.col-remark { color: color-mix(in srgb, var(--color-text) 50%, transparent); }
.log-table .col-actions { width: 34px; padding-right: 0; text-align: right; }
.dept-tag { gap: 7px; }
.log-source { font-size: 13px; vertical-align: -2px; }
.log-project { font-size: 11.5px; color: color-mix(in srgb, var(--color-text) 40%, transparent); }
.log-empty { display: flex; align-items: center; gap: 8px; padding: 22.4px 0; }

/* Row actions — a <details> popover, so it opens without scripts too. */
.row-menu { position: relative; display: inline-block; }
.row-menu > summary {
  list-style: none; cursor: pointer; display: inline-flex; padding: 2px 4px; border-radius: 6px;
  color: color-mix(in srgb, var(--color-text) 35%, transparent);
}
.row-menu > summary::-webkit-details-marker { display: none; }
.row-menu > summary:hover,
.row-menu[open] > summary { color: var(--color-text); background: color-mix(in srgb, var(--color-text) 8%, transparent); }
.row-menu-body {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 132px;
  display: flex; flex-direction: column; padding: 4px; border-radius: 8px;
  background: #1d1f2e; box-shadow: var(--shadow-md);
}
.row-menu-body form { margin: 0; }
.row-menu-body a,
.row-menu-body button {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 8px; border: 0; border-radius: 6px; background: none;
  font: inherit; font-size: 12.5px; color: var(--color-text);
  text-align: left; text-decoration: none; cursor: pointer;
}
.row-menu-body a:hover,
.row-menu-body button:hover { background: color-mix(in srgb, var(--color-text) 8%, transparent); }
.row-menu-body i { font-size: 14px; opacity: .7; }

/* Footer + pager */
.log-footer {
  display: flex; align-items: center; gap: 11.2px; padding: 14px 0;
  font-size: 11.5px; color: color-mix(in srgb, var(--color-text) 45%, transparent);
}
.pager { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.pager a { padding: 3px 8px; border-radius: 6px; color: inherit; text-decoration: none; }
.pager a:hover { background: color-mix(in srgb, var(--color-text) 8%, transparent); }
.pager-current {
  padding: 3px 8px; border-radius: 6px; color: var(--color-text);
  box-shadow: inset 0 0 0 1px var(--color-divider);
}

/* ── Telegram drawer ───────────────────────────────────────────────────── */
.drawer {
  display: flex; flex-direction: column; min-width: 0;
  background: linear-gradient(180deg, #1c1e2d, #191b28);
  box-shadow: inset 1px 0 0 rgba(233, 233, 237, .09);
}
.drawer-reopen {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 16.8px 0; color: var(--color-accent); text-decoration: none;
}
.drawer-reopen i { font-size: 18px; }
.drawer-pip { margin-left: 0; }
.drawer-head { display: flex; align-items: center; gap: 9px; padding: 16.8px 16.8px 11.2px; }
.drawer-mark { font-size: 18px; color: var(--color-accent); }
.drawer-title { display: flex; flex-direction: column; line-height: 1.2; margin-right: auto; min-width: 0; }
.drawer-name { font-size: 13.5px; font-weight: 500; }
.drawer-bot { font-size: 10.5px; color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.drawer-collapse { font-size: 16px; text-decoration: none; color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.drawer-tabs { display: flex; gap: 6px; padding: 0 16.8px 11.2px; }
.drawer-tabs .tag { padding: 4px 10px; }
.drawer-hr { margin: 0 0 11.2px; }
.drawer-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 9px; padding: 0 16.8px; }
.drawer-empty { padding: 11.2px 0; line-height: 1.5; }
.msg {
  display: flex; flex-direction: column; gap: 8px;
  padding: 11.2px; border-radius: 8px; background: var(--color-surface); box-shadow: var(--shadow-sm);
}
/* The newest unfiled card is the one to act on. */
.msg.is-focused { box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 32%, transparent); }
/* A change to something already logged, rather than a new entry. */
.msg-update {
  margin: 0; font-size: 11px; line-height: 1.4;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.msg-update i { font-size: 12px; margin-right: 4px; vertical-align: -2px; color: var(--color-accent); }
.msg-update strong { font-weight: 500; color: var(--color-accent-300); }
.msg-head { display: flex; align-items: center; gap: 7px; font-size: 10.5px; color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.msg-head .avatar--sm { width: 18px; height: 18px; font-size: 9px; }
.msg-body { margin: 0; font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }
/* What was actually typed, kept under the classifier's rewrite so a
 * suggestion can be checked against its source before it is filed. */
.msg-source {
  margin: 0; font-size: 11px; line-height: 1.4; overflow-wrap: anywhere;
  color: color-mix(in srgb, var(--color-text) 40%, transparent);
}
.msg-source i { font-size: 11px; margin-right: 4px; vertical-align: -1px; }
.msg-merged {
  margin-left: 4px; padding: 1px 5px; border-radius: 4px; white-space: nowrap;
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  color: var(--color-accent-300);
}
.msg-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.msg-actions > form { margin: 0; }
.msg-actions > form,
.msg-actions > .msg-btn { margin-left: auto; }
.msg-tag { font-size: 10px; }
.msg-btn { font-size: 11.5px; padding: 4px 9px; white-space: nowrap; }
.msg-blocked { margin-left: auto; }
.msg-tag { white-space: nowrap; }
.drawer-info {
  display: flex; align-items: center; gap: 8px; padding: 9px 11.2px; border-radius: 8px;
  background: color-mix(in srgb, var(--color-text) 4%, transparent);
  font-size: 11.5px; color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.drawer-info i { font-size: 14px; }
.drawer-foot { padding: 14px 16.8px; }
.drawer-foot form { margin: 0; }

/* ── Screen 1c — Project Roadmap ───────────────────────────────────────── */
.roadmap { display: flex; flex-direction: column; min-width: 0; padding: 16.8px 22.4px 0; }
.roadmap-header { padding: 0; }

.roadmap-controls { display: flex; align-items: center; gap: 11.2px; padding: 16.8px 0 14px; flex-wrap: wrap; }

/* Quarter tabs: one rounded container, the active tab ringed in accent. */
.qtabs { display: flex; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--color-divider); }
.qtab {
  padding: 7px 14px; font-size: 13px; text-decoration: none; white-space: nowrap;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
.qtab:hover { color: var(--color-text); }
.qtab-pct { font-size: 11px; opacity: .7; font-variant-numeric: tabular-nums; }
.qtab.is-active {
  color: var(--color-accent); border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--color-accent);
}
.qtab.is-active .qtab-pct { opacity: .8; }

.roadmap-filters { display: flex; align-items: center; gap: 11.2px; }

.legend {
  margin-left: auto; display: flex; align-items: center; gap: 14px;
  font-size: 11.5px; color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.legend-item { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.swatch { width: 8px; height: 8px; flex: none; border-radius: 2px; }
.swatch--complete    { background: var(--color-accent); }
.swatch--in_progress { box-shadow: inset 0 0 0 1.5px var(--color-accent); }
.swatch--on_hold     { background: var(--color-neutral-600); }
.swatch--not_started { background: var(--color-neutral-800); }

.roadmap-card { padding: 5.6px 16.8px 11.2px; gap: 0; overflow: visible; }
.roadmap-table { font-size: 13px; }
/* The chat-facing project number. Quiet on screen — it is a handle, not
 * information — but it has to be there, because it is what /p 7 75 means. */
.roadmap-table .col-id { width: 34px; padding-left: 0; font-variant-numeric: tabular-nums; }
.roadmap-table td.col-id { color: color-mix(in srgb, var(--color-text) 35%, transparent); }
.roadmap-table .col-priority { width: 78px; }
.roadmap-table .col-owner { width: 132px; }
.roadmap-table .col-status { width: 130px; }
.roadmap-table .col-pct { width: 168px; }
.roadmap-table .col-deadline { width: 96px; }
.roadmap-table .col-actions { width: 34px; padding-right: 0; text-align: right; }
.row-edit {
  padding: 2px 5px; font-size: 14px; line-height: 1;
  color: color-mix(in srgb, var(--color-text) 35%, transparent);
}
.row-edit:hover { color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.roadmap-table td.col-deadline {
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
}
.project-cell { display: flex; flex-direction: column; line-height: 1.35; }
.project-sub { font-size: 11px; color: color-mix(in srgb, var(--color-text) 42%, transparent); }
.project-link { font-size: 11px; text-decoration: none; }
.owner-cell { display: flex; align-items: center; gap: 7px; }
.owner-cell .avatar--sm { font-size: 9px; }
.roadmap-empty { padding: 16.8px 0; }

/* Status dropdown — the trigger carries the status treatment itself. */
.status-menu { position: relative; display: inline-block; }
.status-trigger {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 4px 9px; border-radius: 6px; font-size: 11.5px; list-style: none;
}
.status-trigger::-webkit-details-marker { display: none; }
.status-trigger i { font-size: 10px; }
.status--complete    { background: var(--color-accent-800); color: var(--color-accent-100); }
.status--in_progress { color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.status--on_hold     { background: var(--color-neutral-800); color: var(--color-neutral-100); }
.status--not_started {
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  box-shadow: inset 0 0 0 1px var(--color-divider);
}
.status-menu-body {
  position: absolute; left: 0; top: calc(100% + 4px); z-index: 20; min-width: 140px; margin: 0;
  display: flex; flex-direction: column; padding: 4px; border-radius: 8px;
  background: #1d1f2e; box-shadow: var(--shadow-md);
}
.status-menu-body button {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 8px; border: 0; border-radius: 6px; background: none;
  font: inherit; font-size: 12.5px; color: var(--color-text); text-align: left; cursor: pointer;
}
.status-menu-body button:hover { background: color-mix(in srgb, var(--color-text) 8%, transparent); }
.status-menu-body button[aria-current] { color: var(--color-accent); }

/* % done — a native range input dressed as the design's slider, so it is
 * draggable, keyboard-operable and submits without any script. */
.pct { display: flex; align-items: center; gap: 9px; margin: 0; }
.pct-value { width: 34px; flex: none; text-align: right; font-variant-numeric: tabular-nums; }
.pct .slider.is-zero ~ .pct-value,
.pct .pct-fill.is-zero ~ .pct-value { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.slider {
  --fill: var(--color-accent);
  flex: 1; min-width: 0; height: 13px; margin: 0; padding: 0;
  appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer;
}
.slider.is-hold { --fill: var(--color-neutral-500); }
.slider.is-zero { --fill: var(--color-neutral-600); }
.slider::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(to right,
    var(--fill) 0 var(--pct), var(--color-neutral-900) var(--pct) 100%);
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 13px; height: 13px; margin-top: -3.5px;
  border-radius: 50%; background: var(--fill);
  /* The thumb punches out of the track rather than sitting on it. */
  box-shadow: 0 0 0 3px var(--color-surface);
}
.slider::-moz-range-track { height: 6px; border-radius: 3px; background: var(--color-neutral-900); }
.slider::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--fill); }
.slider::-moz-range-thumb {
  width: 13px; height: 13px; border: 0; border-radius: 50%;
  background: var(--fill); box-shadow: 0 0 0 3px var(--color-surface);
}
.slider:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
/* Read-only rendering for the CEO view. */
.pct-static { flex: 1; height: 6px; border-radius: 3px; background: var(--color-neutral-900); }
.pct-fill { height: 100%; border-radius: 3px; background: var(--color-accent); }
.pct-fill.is-hold { background: var(--color-neutral-500); }
.pct-save { display: none; font-size: 11.5px; }
.no-js .pct-save { display: inline-flex; }

/* Column visibility */
.columns-menu { position: relative; }
.columns-menu > summary { list-style: none; }
.columns-menu > summary::-webkit-details-marker { display: none; }
.columns-menu-body {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 150px;
  display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: 8px;
  background: #1d1f2e; box-shadow: var(--shadow-md);
}
.columns-menu-body label {
  display: flex; align-items: center; gap: 8px; padding: 5px 6px;
  border-radius: 6px; font-size: 12.5px; cursor: pointer;
}
.columns-menu-body label:hover { background: color-mix(in srgb, var(--color-text) 8%, transparent); }
.columns-menu-body input { accent-color: var(--color-accent); }
.no-js .columns-menu { display: none; }
.hide-owner .col-owner,
.hide-deadline .col-deadline,
.hide-subtitle .project-sub,
.hide-subtitle .project-link { display: none; }

/* "Other quarters" accordion */
.quarters-more { display: flex; flex-direction: column; gap: 8.4px; padding: 16.8px 0; }
.qrow { border-radius: 8px; background: var(--color-surface); box-shadow: var(--shadow-sm); }
.qrow-head {
  display: flex; align-items: center; gap: 11.2px; padding: 11.2px 16.8px;
  cursor: pointer; list-style: none;
}
.qrow-head::-webkit-details-marker { display: none; }
.qrow-caret { font-size: 14px; color: color-mix(in srgb, var(--color-text) 45%, transparent); transition: transform .12s ease; }
.qrow[open] .qrow-caret { transform: rotate(90deg); }
.qrow-name { font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.qrow-summary {
  font-size: 11.5px; color: color-mix(in srgb, var(--color-text) 45%, transparent);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.qrow-progress { margin-left: auto; display: flex; align-items: center; gap: 9px; flex: none; }
.qrow-track { width: 150px; height: 6px; border-radius: 3px; background: var(--color-neutral-900); }
.qrow-fill { display: block; height: 100%; border-radius: 3px; background: var(--color-accent); }
.qrow-fill.is-future { background: var(--color-accent-600); }
.qrow-value { width: 36px; text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; }
.qrow-body { padding: 0 16.8px 11.2px; }

.rail-avatar { font-size: 9px; }

/* ── Members (admin) and your own account ──────────────────────────────── */
.members-wrap { display: flex; flex-direction: column; gap: 11.2px; padding: 16.8px 22.4px 22.4px; min-width: 0; }
.members-card { padding: 5.6px 16.8px 11.2px; gap: 0; }
.members-table { font-size: 13px; }
.members-table .col-dept { width: 132px; }
.members-table .col-role { width: 148px; }
.members-table .col-telegram { width: 128px; }
.members-table .col-carries { width: 172px; white-space: nowrap; }
.members-table td.col-carries {
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
}
.members-table .col-actions { width: 56px; padding-right: 0; text-align: right; }
/* Deactivated people stay listed — their work still points at them. */
.members-table tr.is-inactive td { opacity: .5; }
.member-cell { display: flex; align-items: center; gap: 9px; }
.member-identity { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.member-name { display: flex; align-items: center; gap: 6px; }
.member-email { font-size: 11px; color: color-mix(in srgb, var(--color-text) 42%, transparent); }
.member-you {
  padding: 0 5px; border-radius: 4px; font-size: 10px;
  background: color-mix(in srgb, var(--color-accent) 16%, transparent);
  color: var(--color-accent-300);
}
.member-linked { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.member-linked i { font-size: 13px; color: var(--color-accent); }
.member-edit { font-size: 12px; }
.members-note { display: flex; align-items: center; gap: 8px; padding: 0 2.8px; line-height: 1.5; }
.members-note i { font-size: 14px; flex: none; }
.members-note strong { color: var(--color-text); font-weight: 500; }
.field-hint { display: block; margin-top: 4px; font-size: 11.5px; color: color-mix(in srgb, var(--color-text) 45%, transparent); }

.account { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16.8px; padding: 16.8px 22.4px 22.4px; align-items: start; }
.account-card { gap: 14px; }
.account-form { display: flex; flex-direction: column; gap: 11.2px; margin: 0; }
.account-form .btn { align-self: flex-start; }
.account code {
  padding: 1px 5px; border-radius: 4px; font-size: 12px;
  background: color-mix(in srgb, var(--color-text) 8%, transparent);
}
.account strong { font-weight: 500; color: var(--color-text); }

/* The rail chip is a link to your own account; sign out sits beside it. */
.rail-user-link {
  display: flex; align-items: center; gap: 9px; min-width: 0;
  color: inherit; text-decoration: none;
}

/* ── Screen 1d — Quick Entry modal ─────────────────────────────────────── */
.qe-overlay {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 22.4px;
  background: color-mix(in srgb, var(--color-neutral-900) 55%, transparent);
}
/* display:grid above outranks the UA stylesheet's [hidden] rule, so the
 * closed state has to be stated explicitly or the modal shows on every page. */
.qe-overlay[hidden] { display: none; }
/* The page behind recedes rather than disappears — the modal is a step in the
 * page's own flow, not a different place. */
body.is-modal-open .shell { filter: blur(2px); opacity: .4; }
.qe-dialog { width: min(452px, 100%); gap: 14px; padding: 16.8px; max-height: calc(100dvh - 44.8px); overflow-y: auto; }
.qe-dialog .input { background-color: var(--color-bg); }
.qe-head { display: flex; align-items: baseline; gap: 9px; }
.qe-when {
  padding: 0; border: 0; background: none; font: inherit; font-size: 11px; cursor: pointer;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
  text-decoration: underline dotted; text-underline-offset: 3px;
}
.qe-close { margin-left: auto; font-size: 16px; line-height: 1; text-decoration: none; color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.qe-optional { opacity: .5; }
.qe-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 11.2px; }
.qe-seg { width: 100%; }
.qe-seg .seg-opt { flex: 1; justify-content: center; }
.qe-dialog .qe-select {
  appearance: none; padding-right: 26px; background-repeat: no-repeat;
  background-position: right 8px center; background-size: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23e9e9ed' stroke-opacity='.55' stroke-width='1.5'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
}
.field-error { display: block; margin-top: 4px; font-size: 11.5px; color: var(--color-accent-300); }

/* Department single-select */
.dept-pick { display: flex; gap: 6px; flex-wrap: wrap; }
.dept-opt { cursor: pointer; }
.dept-opt input { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
.dept-opt .tag { padding: 5px 11px; gap: 7px; opacity: .75; }
.dept-opt:hover .tag { opacity: 1; }
.dept-opt input:checked + .tag {
  opacity: 1; background: transparent; color: var(--color-accent);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}
.dept-opt input:focus-visible + .tag { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* History auto-complete */
.qe-describe { position: relative; }
.qe-suggest {
  position: absolute; left: 0; right: 0; top: 64px; z-index: 2; overflow: hidden;
  border-radius: 8px; background: #1d1f2e; box-shadow: var(--shadow-md);
}
.qe-suggest-head {
  padding: 6px 10px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 40%, transparent);
}
.qe-suggest-row {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 10px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 13px; text-align: left;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
}
.qe-suggest-row i { flex: none; font-size: 14px; }
.qe-suggest-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qe-suggest-meta { margin-left: auto; flex: none; font-size: 10.5px; opacity: .6; }
.qe-suggest-row.is-active {
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  color: var(--color-accent-200);
}
.qe-suggest-row.is-active .qe-suggest-meta { opacity: .65; }

/* Destructive, so it sits at the far left with the whole action row between it
 * and the primary button — never adjacent to Save. */
.qe-danger-btn { margin-right: auto; font-size: 12px; color: var(--color-neutral-400); }
.qe-danger-btn:hover { color: var(--color-accent-300); background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.qe-danger-note { font-size: 11px; color: color-mix(in srgb, var(--color-text) 40%, transparent); }
.qe-when-static { font-size: 11px; color: color-mix(in srgb, var(--color-text) 45%, transparent); font-variant-numeric: tabular-nums; }

.qe-hr { margin: 0; }
.qe-actions { display: flex; align-items: center; gap: 8.4px; }
.qe-keep { font-size: 12px; color: color-mix(in srgb, var(--color-text) 65%, transparent); }
.qe-keep .dot { width: 16px; height: 16px; border-radius: 4px; }
.qe-actions .btn-secondary { margin-left: auto; }
.qe-actions .qe-danger-btn ~ .btn-secondary { margin-left: 0; }

/* Without JavaScript the timestamp toggle and the popover cannot work, so the
 * date field is simply always visible instead. */
.no-js .qe-when { display: none; }
.no-js .qe-when-field[hidden] { display: block; }
.no-js .qe-suggest { display: none; }

/* ── Responsive ────────────────────────────────────────────────────────── */
/* These are desktop screens. Below 1100px the rail collapses to icons; the
 * drawer and the log table get their own treatments when those screens land. */
@media (max-width: 1100px) {
  .shell { grid-template-columns: 60px 1fr; }
  .rail { padding: 16.8px 8px; align-items: center; }
  /* The sign-out button stays: collapsing the rail must not strand the user. */
  .rail-brand-text,
  .rail-heading,
  .rail-user-text,
  .rail-link span:not(.dot) { display: none; }
  .rail-user { flex-direction: column; gap: 4px; padding: 6px; }
  .rail-link { justify-content: center; padding: 9px; }
  .rail-link--dept { padding: 7px; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-body { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
  .log-shell { grid-template-columns: 1fr 280px; }
}
@media (max-width: 820px) {
  .page-header { flex-wrap: wrap; }
  .quarter-grid { grid-template-columns: 1fr; }

  /* The drawer stops being a column and becomes a block under the table —
   * still reachable, which a display:none would not be. */
  .log-shell,
  .log-shell.drawer-closed { grid-template-columns: 1fr; }
  .drawer { box-shadow: inset 0 1px 0 rgba(233, 233, 237, .09); }
  .drawer-list { overflow-y: visible; }
  .log-controls { flex-wrap: wrap; }
  .log-table .col-remark { display: none; }
  .qe-pair { grid-template-columns: 1fr; }
}