:root {
  color-scheme: light;
  --bg: #f4f4f1;
  --surface-1: #fcfcfb;
  --surface-2: #f0efec;
  --border: #e2e1dc;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --text-muted: #77766f;
  --accent: #2a78d6;
  --accent-ink: #ffffff;
  --series-1: #2a78d6;
  --grid: #e7e6e1;
  --good: #008300;
  --warning: #b86e00;
  --critical: #d03a39;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.05), 0 2px 8px rgb(0 0 0 / 0.04);
  --radius: 12px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #111110;
    --surface-1: #1a1a19;
    --surface-2: #242422;
    --border: #33332f;
    --text-primary: #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted: #96958c;
    --accent: #3987e5;
    --series-1: #3987e5;
    --grid: #2c2c29;
    --good: #3fae3f;
    --warning: #e0a030;
    --critical: #e66767;
    --shadow: none;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111110;
  --surface-1: #1a1a19;
  --surface-2: #242422;
  --border: #33332f;
  --text-primary: #ffffff;
  --text-secondary: #c3c2b7;
  --text-muted: #96958c;
  --accent: #3987e5;
  --series-1: #3987e5;
  --grid: #2c2c29;
  --good: #3fae3f;
  --warning: #e0a030;
  --critical: #e66767;
  --shadow: none;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text-primary);
  font: 14px/1.45 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
h1 { font-size: 20px; margin: 0; font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: 15px; margin: 0; font-weight: 600; }
.muted { color: var(--text-secondary); }
.small { font-size: 12px; }
.error { color: var(--critical); margin: 8px 0 0; }

#app { max-width: 1320px; margin: 0 auto; padding: 20px 24px 48px; }
main { display: grid; gap: 16px; }

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.topbar p { margin: 2px 0 0; }
.topbar-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.btn {
  font: inherit; font-weight: 500; cursor: pointer;
  background: var(--surface-1); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 8px; padding: 7px 12px;
}
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.05); }
.btn.danger { color: var(--critical); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.small { padding: 4px 10px; font-size: 12px; }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

input, select, textarea {
  font: inherit; color: var(--text-primary); background: var(--surface-1);
  border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; width: 100%;
}
textarea { min-height: 70px; resize: vertical; }

.filters {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: end;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; margin-bottom: 16px;
}
.filters label { display: grid; gap: 4px; font-size: 12px; color: var(--text-secondary); min-width: 150px; }
.filters label.grow { flex: 1; min-width: 200px; }

.card {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow); min-width: 0;
}
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.card-head select { width: auto; max-width: 60%; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.chart-box { position: relative; height: 280px; }

.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.kpi { cursor: pointer; text-align: left; font: inherit; color: inherit; }
.kpi[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.kpi .label { font-size: 12px; color: var(--text-secondary); font-weight: 500; }
.kpi .value { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.kpi .meta { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--text-secondary); flex-wrap: wrap; }

.status { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.status::before { font-size: 11px; }
.status.good { color: var(--good); }
.status.good::before { content: "▲"; }
.status.warn { color: var(--warning); }
.status.warn::before { content: "●"; }
.status.bad { color: var(--critical); }
.status.bad::before { content: "▼"; }

.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
th { font-size: 12px; font-weight: 600; color: var(--text-secondary); position: sticky; top: 0; background: var(--surface-1); cursor: pointer; user-select: none; }
th.num, td.num { text-align: right; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: var(--surface-2); }
.person { display: flex; align-items: center; gap: 10px; }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--surface-2); color: var(--text-secondary); font-weight: 600; font-size: 12px;
}
.pill { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); font-size: 12px; color: var(--text-secondary); }
.empty { text-align: center; padding: 24px; }

.gate { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.gate-card { width: min(380px, 100%); display: grid; gap: 12px; }
.gate-card p { margin: 0; }

.drawer {
  position: fixed; inset: 0 0 0 auto; width: min(520px, 100%); z-index: 20;
  background: var(--surface-1); border-left: 1px solid var(--border); box-shadow: -8px 0 24px rgb(0 0 0 / 0.12);
  overflow-y: auto;
}
.drawer-inner { padding: 20px; display: grid; gap: 16px; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.facts dt { color: var(--text-secondary); }
.facts dd { margin: 0; }
.spark-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.spark { border: 1px solid var(--border); border-radius: 10px; padding: 10px; }
.spark .label { font-size: 12px; color: var(--text-secondary); }
.spark .value { font-size: 18px; font-weight: 600; }
.spark .box { position: relative; height: 56px; }

dialog {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 20px;
  background: var(--surface-1); color: var(--text-primary); width: min(720px, calc(100% - 32px));
  max-height: calc(100vh - 48px);
}
dialog::backdrop { background: rgb(0 0 0 / 0.4); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.form-grid label, .field { display: grid; gap: 4px; font-size: 12px; color: var(--text-secondary); }
.form-grid .full { grid-column: 1 / -1; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.modal-actions .spacer { flex: 1; }
.entry-table input { min-width: 80px; padding: 5px 8px; }
.entry-table td, .entry-table th { padding: 6px; }
.checkbox { display: flex !important; align-items: center; gap: 8px; }
.checkbox input { width: auto; }

.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 50;
  background: var(--text-primary); color: var(--surface-1); padding: 10px 16px; border-radius: 8px; font-weight: 500;
}

@media (max-width: 860px) {
  .grid-2 { grid-template-columns: 1fr; }
  #app { padding: 16px; }
  .form-grid { grid-template-columns: 1fr; }
  .filters label { min-width: calc(50% - 6px); flex: 1; }
  .spark-grid { grid-template-columns: 1fr; }
}

/* ---------- Work Logs page ---------- */
:root { --series-2: #eb6834; --series-3: #1baf7a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --series-2: #d95926; --series-3: #199e70; } }
:root[data-theme="dark"] { --series-2: #d95926; --series-3: #199e70; }

.pages { display: flex; gap: 4px; margin-top: 6px; }
.page { color: var(--text-secondary); text-decoration: none; font-weight: 500; padding: 4px 10px; border-radius: 999px; font-size: 13px; }
.page.active { background: var(--surface-2); color: var(--text-primary); }
.sync-status { display: inline-flex; align-items: center; gap: 6px; }
.sync-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); }
.sync-status .dot.ok { background: var(--good); }
.sync-status .dot.running { background: var(--warning); }
.sync-status .dot.failed { background: var(--critical); }

.menu { position: relative; }
.menu summary { list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu-list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 10; min-width: 220px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; padding: 4px; box-shadow: 0 8px 24px rgb(0 0 0 / 0.12); }
.menu-list button { display: block; width: 100%; text-align: left; font: inherit; color: var(--text-primary); background: none; border: 0; padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.menu-list button:hover { background: var(--surface-2); }

.field { display: grid; gap: 4px; font-size: 12px; color: var(--text-secondary); }
.segmented { display: inline-flex; background: var(--surface-2); border-radius: 9px; padding: 3px; gap: 2px; }
.segmented button { font: inherit; font-size: 13px; font-weight: 500; border: 0; background: transparent; color: var(--text-secondary); padding: 5px 12px; border-radius: 7px; cursor: pointer; }
.segmented button[aria-checked="true"] { background: var(--surface-1); color: var(--text-primary); box-shadow: 0 1px 2px rgb(0 0 0 / 0.08); }
.range-note { margin: 0 0 6px auto; }

.card-head.wrap { flex-wrap: wrap; align-items: flex-start; }
.card-head p { margin: 2px 0 0; }
.inline-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.inline-controls label { display: grid; gap: 4px; font-size: 12px; color: var(--text-secondary); }
.inline-controls select, .inline-controls input { width: auto; min-width: 170px; }
.trend-grid { align-items: start; }

.delta { font-size: 11px; font-weight: 600; margin-left: 4px; white-space: nowrap; }
.delta.up { color: var(--good); }
.delta.down { color: var(--critical); }
.delta.flat { color: var(--text-muted); }
.trend-table td, .trend-table th { padding: 7px 8px; }
.trend-table td.num { font-variant-numeric: tabular-nums; }
.trend-table tr.team td { font-weight: 600; border-top: 2px solid var(--border); }
.bar-cell { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.bar-cell .bar { width: 60px; height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.bar-cell .bar i { display: block; height: 100%; background: var(--series-1); border-radius: 3px; }
tr.selected td { background: var(--surface-2); }
.clip { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.tag { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--surface-2); color: var(--text-secondary); }
.more { text-align: center; margin-top: 10px; }
.kpi-static { cursor: default; }

.kpis { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.trend-grid { grid-template-columns: 1fr; }
.trend-grid .chart-box { height: 220px; }
a.btn { text-decoration: none; text-align: center; display: inline-block; }

/* ---------- App shell (v2) ---------- */
#app { max-width: none; padding: 0; }
.shell {
  position: sticky; top: 0; z-index: 15; display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 10px 24px; background: var(--surface-1); border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.brand-mark { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-size: 12px; letter-spacing: .02em; }
.tabs { display: flex; gap: 4px; flex: 1; }
.tab { color: var(--text-secondary); text-decoration: none; font-weight: 500; padding: 6px 12px; border-radius: 8px; }
.tab:hover { background: var(--surface-2); color: var(--text-primary); }
.tab.active { background: var(--surface-2); color: var(--text-primary); box-shadow: inset 0 -2px 0 var(--accent); }
.shell-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.viewer { padding-left: 8px; border-left: 1px solid var(--border); }
.page-view { max-width: 1320px; margin: 0 auto; padding: 20px 24px 48px; display: grid; gap: 16px; }
.page-head h1 { font-size: 24px; }
.summary { margin: 6px 0 0; color: var(--text-secondary); font-size: 15px; }
.summary strong { color: var(--text-primary); font-weight: 600; }

.toolbar {
  position: sticky; top: 53px; z-index: 12; display: flex; gap: 18px; flex-wrap: wrap; align-items: end;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; box-shadow: var(--shadow);
}
.tool { display: flex; flex-direction: column; gap: 4px; }
.tool > .segmented + select { margin-top: 4px; }
.tool:has(#f-period) { flex-direction: row; align-items: end; gap: 8px; flex-wrap: wrap; }
.tool:has(#f-period) .tool-label { width: 100%; }
.tool-label { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
select.compact { width: auto; min-width: 180px; padding: 6px 10px; }
select.compact.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.segmented button:disabled { opacity: .45; cursor: progress; }
.chips { display: flex; gap: 8px; margin-left: auto; align-self: center; }
.chip { font: inherit; font-size: 12px; font-weight: 500; border: 1px solid var(--accent); color: var(--text-primary); background: var(--surface-2); border-radius: 999px; padding: 4px 10px; cursor: pointer; }

.kpis { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.kpi .meta { margin-top: 4px; }
.meter { height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; margin: 6px 0 2px; }
.meter i { display: block; height: 100%; background: var(--series-1); border-radius: 3px; }

.member { display: flex; align-items: center; gap: 10px; }
.member-name { font-weight: 500; }
.avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--surface-2); color: var(--text-secondary); font-weight: 600; font-size: 12px; }
.flag { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; color: var(--warning); border: 1px solid currentColor; }
.flag::before { content: "● "; }
.count { font-weight: 500; }
.chart-box.short { height: 200px; margin-bottom: 12px; }
#trend-body.dim { opacity: .45; pointer-events: none; }
.loading-note { margin: 8px 0 0; }
.tag.type-actual { color: var(--series-1); }
.tag.type-estimate { color: var(--series-2); }
.tag.type-capacity { color: var(--series-3); }
td.empty { text-align: center; padding: 24px; }

@media (max-width: 860px) {
  .shell { padding: 10px 16px; gap: 10px; position: static; }
  .tabs { order: 3; flex-basis: 100%; }
  .page-view { padding: 16px; }
  .toolbar { position: static; }
  .chips { margin-left: 0; }
}

/* role-based UI (the API enforces access; this only tidies the page) */
.role-member .admin-only { display: none !important; }
.role-badge { font-weight: 600; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-secondary); border: 1px solid var(--border); }

/* ---------- Sign-in screen ---------- */
.gate { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); padding: 0; place-items: stretch; }
.gate-brand {
  position: relative; overflow: hidden; display: flex; align-items: center; padding: 56px clamp(24px, 6vw, 88px);
  background: radial-gradient(1200px 600px at -10% -20%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
              radial-gradient(800px 500px at 110% 120%, color-mix(in srgb, var(--series-3) 16%, transparent), transparent 60%),
              var(--surface-1);
  border-right: 1px solid var(--border);
}
.gate-brand-inner { max-width: 520px; display: grid; gap: 22px; }
.gate-logo { font-size: 15px; }
.gate-headline { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.08; letter-spacing: -0.025em; margin: 8px 0 0; }
.gate-headline span { color: var(--accent); }
.gate-lede { margin: 0; font-size: 16px; color: var(--text-secondary); max-width: 44ch; }
.gate-points { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 14px; }
.gate-points li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; }
.gate-points li span:not(.gp-icon) { color: var(--text-secondary); }
.gp-icon { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-2); color: var(--accent); font-size: 13px; border: 1px solid var(--border); }
.gate-art { width: min(360px, 100%); height: auto; margin-top: 6px; }
.gate-art .ga-axis { stroke: var(--border); stroke-width: 2; }
.gate-art .ga-bars rect { fill: var(--series-1); }
.gate-art .ga-bars rect.est { fill: var(--series-2); opacity: .9; }
.gate-art .ga-cap { stroke: var(--series-3); stroke-width: 2.5; stroke-dasharray: 6 5; fill: none; }

.gate-panel { display: grid; place-items: center; padding: 40px 24px; background: var(--bg); }
.gate-card {
  width: min(400px, 100%); display: grid; gap: 14px; padding: 32px;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 10px 40px rgb(0 0 0 / .08);
}
.gate-card h2 { font-size: 22px; }
.gate-card p { margin: 0; }
.gate-zoho { display: flex !important; align-items: center; justify-content: center; gap: 10px; padding: 11px 14px; font-size: 15px; border-radius: 10px; }
.zoho-dot { width: 18px; height: 18px; border-radius: 5px; background:
  conic-gradient(#e42527 0 25%, #089949 0 50%, #226db4 0 75%, #f9b21d 0); box-shadow: 0 0 0 2px rgb(255 255 255 / .85); }
.gate-alert { font-size: 13px; padding: 10px 12px; border-radius: 10px; color: var(--critical); background: color-mix(in srgb, var(--critical) 10%, transparent); border: 1px solid color-mix(in srgb, var(--critical) 35%, transparent); }
.gate-foot { line-height: 1.5; border-top: 1px solid var(--border); padding-top: 14px; }

@media (max-width: 860px) {
  .gate { grid-template-columns: 1fr; }
  .gate-brand { padding: 32px 20px 24px; border-right: 0; border-bottom: 1px solid var(--border); }
  .gate-points, .gate-art { display: none; }
  .gate-headline { font-size: 28px; }
  .gate-panel { padding: 24px 16px 40px; place-items: start center; }
}
.gate-zoho[hidden] { display: none !important; }
.gate { grid-template-rows: minmax(100vh, auto); }
@media (max-width: 860px) { .gate { grid-template-rows: auto 1fr; min-height: 100vh; } }

.login-tabs { display: flex; width: 100%; }
.login-tabs button { flex: 1; }
.login-embed { height: 52px; transition: height .15s ease; }
.login-embed[data-mode="email"] { height: 190px; }
.login-embed iframe { width: 100% !important; height: 100% !important; border: 0; background: transparent; color-scheme: normal; }
.login-help { margin: -4px 0 0 !important; }
.login-help a { color: var(--accent); }
.gate-foot a { color: var(--accent); }

.segmented button[aria-selected="true"] { background: var(--surface-1); color: var(--text-primary); box-shadow: 0 1px 2px rgb(0 0 0 / 0.08); }

/* ================= Phases ================= */
:root { --series-7: #4a3aa7; --due-soon: #b86e00; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --series-7: #9085e9; --due-soon: #e0a030; } }
:root[data-theme="dark"] { --series-7: #9085e9; --due-soon: #e0a030; }
body.no-scroll { overflow: hidden; }
.grow-tool { flex: 1; min-width: 220px; }
.grow-tool input { width: 100%; }
.seg-count { opacity: .6; font-variant-numeric: tabular-nums; }
.notice { margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--surface-2); color: var(--text-secondary); border: 1px dashed var(--border); }

.phase-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.ph-card {
  position: relative; text-align: left; font: inherit; color: inherit; cursor: pointer; display: grid; gap: 14px;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 16px; padding: 18px 18px 16px 22px; box-shadow: var(--shadow);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.ph-card::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 0 4px 4px 0; background: var(--border); }
.ph-card.due-overdue::before { background: var(--critical); }
.ph-card.due-soon::before { background: var(--due-soon); }
.ph-card.due-later::before, .ph-card.due-none::before { background: var(--series-1); }
.ph-card.due-done::before { background: var(--good); }
.ph-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); box-shadow: 0 8px 28px rgb(0 0 0 / .12); }
.ph-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ph-card-top { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; }
.ph-card-titles { min-width: 0; display: grid; gap: 3px; }
.ph-code { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-name { font-size: 18px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.ph-customer { color: var(--series-2); font-weight: 600; font-size: 14px; }
.ph-stage-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.ph-stage { font-size: 13px; color: var(--text-primary); }
.ph-due { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; border: 1px solid currentColor; }
.ph-due::before { content: "●"; font-size: 9px; }
.ph-due.overdue { color: var(--critical); }
.ph-due.soon { color: var(--due-soon); }
.ph-due.later, .ph-due.none { color: var(--text-secondary); border-color: var(--border); }
.ph-due.done { color: var(--good); }
.ph-due.done::before { content: "✓"; }
.ph-link { color: var(--accent); }

.ph-donut { position: relative; flex: none; }
.ph-donut svg { display: block; }
.ph-donut circle { fill: none; stroke-width: 8; }
.ph-donut .track { stroke: var(--surface-2); }
.ph-donut .value { stroke: var(--due-soon); stroke-linecap: round; }
.ph-donut-label { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; line-height: 1.1; }
.ph-donut-label strong { font-size: 17px; font-weight: 700; color: var(--due-soon); }
.ph-donut-label span { font-size: 10px; letter-spacing: .08em; color: var(--text-muted); font-weight: 600; }

.ph-label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.ph-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.ph-facts.wide { border: 0; padding: 0; margin-top: 12px; }
.ph-fact { display: flex; gap: 8px; align-items: baseline; }
.ph-fact strong { font-size: 14px; }
.ph-section { display: grid; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.ph-card .ph-section:last-child { border: 0; padding-bottom: 0; }
.ph-row-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ph-row-head strong { font-size: 14px; }
.ph-sep { margin: 0 8px; color: var(--text-muted); }
.ph-split { display: flex; gap: 2px; height: 8px; border-radius: 4px; overflow: hidden; background: var(--surface-2); }
.ph-split i { display: block; min-width: 0; }
.ph-split i.done { background: var(--good); }
.ph-split i.pending { background: var(--series-7); }
.ph-legend { display: flex; gap: 14px; color: var(--text-secondary); }
.lg::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: 0; }
.lg.done::before { background: var(--good); }
.lg.pending::before { background: var(--series-7); }
.lg.span-l::before { background: color-mix(in srgb, var(--series-1) 35%, transparent); }
.lg.today-l::before { background: var(--critical); width: 2px; }
.ph-burn { font-weight: 700; color: var(--due-soon); }
.ph-burn.over { color: var(--critical); }
.ph-meter { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.ph-meter i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--due-soon), color-mix(in srgb, var(--due-soon) 70%, #ffd166)); }

.ph-people { display: flex; flex-wrap: wrap; gap: 14px; }
.ph-person { display: grid; justify-items: center; gap: 4px; width: 56px; }
.ph-avatar { position: relative; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--surface-2); color: var(--text-secondary); font-weight: 600; font-size: 13px; border: 1px solid var(--border); }
.ph-avatar img, .avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar { position: relative; overflow: hidden; }
.ph-avatar.more { font-size: 12px; }
.ph-role { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); text-align: center; white-space: nowrap; }

/* detail drawer */
.phase-overlay { position: fixed; inset: 0; z-index: 40; background: rgb(0 0 0 / .45); display: flex; justify-content: flex-end; }
.phase-detail { width: min(980px, 100%); height: 100%; overflow-y: auto; background: var(--bg); border-left: 1px solid var(--border); padding: 24px 28px 48px; display: grid; gap: 18px; align-content: start; box-shadow: -12px 0 40px rgb(0 0 0 / .25); }
.ph-d-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.ph-d-head h2 { font-size: 24px; margin: 4px 0 2px; }
.ph-d-head-right { display: flex; gap: 8px; align-items: flex-start; }
.ph-d-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.ph-d-kpi { background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; display: grid; gap: 4px; min-width: 0; }
.ph-kpi-v { font-size: 17px; font-weight: 700; }
.ph-d-section { background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px; padding: 16px; }
.ph-d-section h3 { margin: 0 0 12px; font-size: 15px; }
.ph-d-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.ph-d-box { background: var(--surface-2); border-radius: 12px; padding: 12px; display: grid; gap: 4px; align-content: start; min-width: 0; }
.ph-big { font-size: 20px; font-weight: 700; }
.ph-bars { display: grid; gap: 6px; margin-top: 8px; }
.ph-bar-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 12px; }
.ph-bar-row .k { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }
.ph-bar-row .b { height: 6px; background: var(--surface-1); border-radius: 3px; overflow: hidden; }
.ph-bar-row .b i { display: block; height: 100%; background: var(--series-1); border-radius: 3px; }
.ph-bar-row .v { font-variant-numeric: tabular-nums; font-weight: 600; }
.ph-req { white-space: pre-wrap; margin: 0; color: var(--text-secondary); }
.ph-tasks td, .ph-tasks th { padding: 7px 8px; font-size: 13px; }
.tag.ok { color: var(--good); }
.tag.wait { color: var(--series-7); }

.ph-timeline-wrap { overflow-x: auto; }
.ph-timeline { width: 100%; min-width: 640px; height: auto; display: block; }
.ph-timeline .grid { stroke: var(--grid); stroke-width: 1; }
.ph-timeline .axis { stroke: var(--border); stroke-width: 2; }
.ph-timeline .tick { fill: var(--text-muted); font-size: 11px; }
.ph-timeline .span { fill: color-mix(in srgb, var(--series-1) 30%, transparent); }
.ph-timeline .mile rect { fill: var(--series-1); stroke: var(--surface-1); stroke-width: 2; }
.ph-timeline .mile.added rect { fill: var(--text-muted); }
.ph-timeline .mile.due rect { fill: var(--due-soon); }
.ph-timeline .mile.overdue rect { fill: var(--critical); }
.ph-timeline .mile.completed rect { fill: var(--good); }
.ph-timeline .mile-label { fill: var(--text-secondary); font-size: 11px; font-weight: 600; }
.ph-timeline .today { stroke: var(--critical); stroke-width: 1.5; stroke-dasharray: 4 3; }
.ph-timeline .today-label { fill: var(--critical); font-size: 11px; font-weight: 600; }
.ph-timeline .task.done { fill: var(--good); }
.ph-timeline .task.pending { fill: var(--series-7); }
.ph-tl-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; }

/* availability */
.av-table td { vertical-align: middle; }
.av-table tr.best td { background: color-mix(in srgb, var(--good) 7%, transparent); }
.av-table .fit { margin-left: 8px; font-size: 11px; font-weight: 600; color: var(--good); border: 1px solid currentColor; border-radius: 999px; padding: 1px 7px; }
.av-table .neg { color: var(--critical); }
.av-bar { width: 160px; height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; margin-bottom: 4px; }
.av-bar i { display: block; height: 100%; background: var(--series-1); border-radius: 4px; }
.av-bar i.over { background: var(--critical); }
.av-phases { display: flex; flex-wrap: wrap; gap: 6px; max-width: 460px; }
.chip-mini { font: inherit; font-size: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-primary); border-radius: 999px; padding: 2px 9px; cursor: pointer; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-mini:hover { border-color: var(--accent); }
@media (max-width: 860px) { .phase-grid { grid-template-columns: 1fr; } .phase-detail { padding: 16px; } }

.page-view { grid-template-columns: minmax(0, 1fr); }
.page-view > * { min-width: 0; }
.segmented { flex-wrap: wrap; }
.toolbar .tool { min-width: 0; max-width: 100%; }
.phase-detail { grid-template-columns: minmax(0, 1fr); overflow-x: hidden; }
.phase-detail > * { min-width: 0; }

/* availability: show every phase, full names */
.av-table td:nth-child(4) { min-width: 320px; }
.av-phases { max-width: none; }
.av-table .chip-mini { max-width: none; white-space: normal; text-align: left; line-height: 1.35; padding: 3px 10px; }
.chip-role { font-size: 10px; font-weight: 700; letter-spacing: .05em; color: var(--text-muted); margin-right: 2px; }

/* Team | Mine */
body.scope-mine .team-only { display: none !important; }
body.scope-mine #members-table, body.scope-mine .card:has(#members-table) { display: none !important; }
/* stakeholder list on phase cards */
.ph-people-list { display: grid; gap: 8px; }
.ph-pl-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: center; }
.ph-pl-role { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--text-muted); }
.ph-pl-names { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.ph-pl-person { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 500; min-width: 0; }
.ph-avatar.sm { width: 26px; height: 26px; font-size: 10px; flex: none; }

.notice.warn { border-style: solid; border-color: color-mix(in srgb, var(--due-soon) 45%, transparent); background: color-mix(in srgb, var(--due-soon) 10%, transparent); color: var(--text-primary); }

.hdr-scope { padding: 2px; }
.hdr-scope button { padding: 4px 12px; font-size: 12px; }

/* add task */
.ph-add { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 14px; margin-bottom: 12px; display: grid; gap: 10px; }
.ph-add .form-grid input, .ph-add .form-grid select, .ph-add .form-grid textarea { background: var(--surface-1); }
.ph-add-msg:empty { display: none; }
.ph-add-msg .btn { margin-left: 8px; }
.ph-add-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ph-tasks tr.selected td { background: color-mix(in srgb, var(--accent) 8%, transparent); }

/* ================= Add Tasks modal ================= */
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.tm-overlay { position: fixed; inset: 0; z-index: 60; background: rgb(0 0 0 / .55); display: grid; place-items: center; padding: 16px; }
.tm-modal { width: min(1180px, 100%); max-height: calc(100vh - 32px); display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; background: var(--bg); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; box-shadow: 0 30px 80px rgb(0 0 0 / .35); }
.tm-header { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, var(--surface-1)), var(--surface-1)); }
.tm-header h2 { font-size: 20px; margin: 0; }
.tm-header p { margin: 2px 0 0; }
.tm-badge { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 26px; font-weight: 500; box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 40%, transparent); flex: none; }
.tm-close { margin-left: auto; font-size: 18px; }
.tm-top-msg:empty { display: none; }
.tm-top-msg { padding: 12px 22px 0; }
.tm-body { overflow-y: auto; padding: 18px 22px; display: grid; gap: 16px; align-content: start; }
.tm-default { display: grid; gap: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.tm-select { max-width: 560px; }
.tm-showall { font-size: 14px; color: var(--text-primary); }
.tm-hint { margin: 0; font-style: italic; }
.tm-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
.tm-label .req, .tm-field .req { color: var(--critical); }
.tm-split { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; align-items: start; }
.tm-list { display: grid; gap: 8px; position: sticky; top: 0; }
.tm-item { position: relative; text-align: left; border: 1px solid var(--border); border-radius: 12px; padding: 10px 30px 10px 12px; background: var(--surface-1); cursor: pointer; }
.tm-item.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.tm-item.bad { border-color: var(--critical); }
.tm-item.ok { border-color: var(--good); opacity: .75; }
.tm-item-k { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.tm-item.ok .tm-item-k { color: var(--good); }
.tm-item.bad .tm-item-k { color: var(--critical); }
.tm-item-n { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-x { position: absolute; top: 6px; right: 6px; border: 0; background: none; color: var(--text-muted); font-size: 16px; cursor: pointer; border-radius: 6px; width: 22px; height: 22px; }
.tm-x:hover { background: var(--surface-2); color: var(--text-primary); }
.tm-add { font: inherit; font-weight: 600; color: var(--accent); background: transparent; border: 1px dashed var(--border); border-radius: 12px; padding: 10px; cursor: pointer; }
.tm-add:hover { border-color: var(--accent); }
.tm-editor { background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; display: grid; gap: 12px; min-width: 0; }
.tm-sec { margin: 6px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); padding-top: 10px; border-top: 1px solid var(--border); }
.tm-editor > .tm-sec:first-of-type { border-top: 0; padding-top: 0; }
.tm-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.tm-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tm-field { display: grid; gap: 6px; min-width: 0; }
.tm-field.full { grid-column: 1 / -1; }
.tm-field input:disabled { opacity: .7; }
.tm-dt { font: inherit; display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-1); color: var(--text-primary); cursor: pointer; }
.tm-dt:hover { border-color: var(--accent); }
.tm-cal { color: var(--text-muted); }
.tm-total { padding: 8px 12px; border: 1px dashed var(--border); border-radius: 8px; font-weight: 600; }
.tm-multi { position: relative; }
.tm-multi summary { list-style: none; cursor: pointer; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.tm-multi summary::-webkit-details-marker { display: none; }
.tm-multi summary::after { content: '▾'; float: right; color: var(--text-muted); }
.tm-multi-list { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px); max-height: 240px; overflow-y: auto; background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; padding: 6px; box-shadow: 0 10px 30px rgb(0 0 0 / .2); display: grid; gap: 2px; }
.tm-multi-list label { padding: 6px 8px; border-radius: 6px; font-size: 14px; }
.tm-multi-list label:hover { background: var(--surface-2); }
.tm-foot { display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--border); background: var(--surface-1); }
.tm-submit { padding: 10px 18px; }

/* date-time picker */
.dt-picker { position: fixed; z-index: 70; width: 320px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 16px; padding: 14px; box-shadow: 0 20px 50px rgb(0 0 0 / .35); display: grid; gap: 10px; }
.dt-head { display: flex; align-items: center; justify-content: space-between; }
.dt-nav { font: inherit; font-size: 18px; border: 0; background: none; color: var(--text-secondary); cursor: pointer; width: 30px; height: 30px; border-radius: 8px; }
.dt-nav:hover { background: var(--surface-2); }
.dt-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.dt-dow { font-size: 11px; font-weight: 700; color: var(--text-muted); padding: 4px 0; text-transform: uppercase; }
.dt-day { font: inherit; border: 0; background: none; color: var(--text-primary); height: 34px; border-radius: 8px; cursor: pointer; }
.dt-day:hover { background: var(--surface-2); }
.dt-day.today { box-shadow: inset 0 0 0 1px var(--border); }
.dt-day.sel { background: var(--accent); color: #fff; font-weight: 700; }
.dt-time { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--border); padding-top: 10px; }
.dt-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); margin-right: auto; }
.dt-col { display: grid; justify-items: center; gap: 2px; }
.dt-step { font: inherit; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-primary); width: 40px; height: 22px; border-radius: 6px; cursor: pointer; line-height: 1; }
.dt-val { font-weight: 700; font-size: 16px; min-width: 40px; text-align: center; padding: 2px 0; border: 1px solid var(--border); border-radius: 8px; }
.dt-colon { font-weight: 700; }
.dt-ampm { display: grid; gap: 4px; margin-left: 6px; }
.dt-ampm button { font: inherit; font-weight: 700; font-size: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-secondary); border-radius: 6px; padding: 4px 10px; cursor: pointer; }
.dt-ampm button.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.dt-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.dt-quick button { font: inherit; font-weight: 600; font-size: 13px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-primary); border-radius: 8px; padding: 7px 0; cursor: pointer; }
.dt-quick button:hover { border-color: var(--accent); }
.dt-done { width: 100%; padding: 10px; font-size: 15px; }
@media (max-width: 860px) { .tm-split { grid-template-columns: 1fr; } .tm-list { position: static; grid-auto-flow: column; overflow-x: auto; grid-auto-columns: 180px; } .tm-row, .tm-row.three { grid-template-columns: 1fr; } }

.ph-act { white-space: nowrap; text-align: right; }
.ph-complete { color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, var(--border)); }
.ph-complete:hover { background: color-mix(in srgb, var(--good) 10%, transparent); }
.ph-status { white-space: nowrap; }
.ph-status .ph-complete { margin-left: 8px; padding: 2px 8px; }

/* test cases & complete */
.tc-modal { width: min(920px, 100%); }
.tc-badge { background: var(--good); box-shadow: 0 6px 16px color-mix(in srgb, var(--good) 40%, transparent); font-size: 22px; }
.tc-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.tc-summary .neg { color: var(--critical); font-weight: 700; }
.tc-existing { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 4px; font-size: 14px; }
.tc-row { background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; display: grid; gap: 10px; position: relative; }
.tc-row-head { display: flex; justify-content: space-between; align-items: center; }
.tc-row .tm-x { position: static; }

input.dt-val { width: 48px; height: 36px; padding: 0; text-align: center; font: inherit; font-weight: 700; font-size: 16px; background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--border); border-radius: 8px; cursor: text; }
input.dt-val:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

/* log actual */
.la-modal { width: min(640px, 100%); }
.la-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.la-cell { padding: 12px 14px; min-width: 0; }
.la-cell + .la-cell { border-left: 1px solid var(--border); }
.la-val { font-weight: 600; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.la-sec { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.la-sec::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.la-time { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 150px; gap: 12px; align-items: end; }
.la-dur { border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: 12px; padding: 10px; text-align: center; }
.la-dur .tm-label { color: var(--accent); }
.la-dur-v { font-size: 20px; font-weight: 700; margin-top: 2px; }
.la-dur.empty .la-dur-v { color: var(--text-muted); }
.ph-actual { margin-left: 8px; padding: 2px 8px; color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.ph-actual:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
@media (max-width: 640px) { .la-grid { grid-template-columns: 1fr; } .la-cell + .la-cell { border-left: 0; border-top: 1px solid var(--border); } .la-time { grid-template-columns: 1fr; } }

/* ---------- Boot loader ---------- */
.boot { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(1200px 600px at 50% 38%, color-mix(in oklab, var(--accent) 7%, var(--bg)), var(--bg));
  transition: opacity .45s ease, visibility .45s; }
.boot.is-done { opacity: 0; visibility: hidden; }
.boot.is-done .boot-card { transform: translateY(-6px) scale(.985); }
.boot-card { width: min(360px, 100%); display: grid; justify-items: center; gap: 18px; transition: transform .45s ease; }
.boot-art { width: 184px; height: 104px; overflow: visible; }
.boot-art .bt-axis { stroke: var(--border); stroke-width: 2; stroke-linecap: round; }
.boot-art .bt-bars rect { fill: var(--accent); transform-box: fill-box; transform-origin: 50% 100%;
  animation: bt-fill 2.4s cubic-bezier(.3,.7,.2,1) var(--d) infinite; }
.boot-art .bt-bars rect:nth-child(even) { fill: color-mix(in oklab, var(--accent) 55%, var(--surface-1)); }
.boot-art .bt-cap { stroke: var(--text-muted); stroke-width: 2; stroke-dasharray: 4 5; stroke-linecap: round;
  animation: bt-cap 2.4s ease-in-out infinite; }
.boot-art .bt-scan { fill: var(--accent); opacity: .12; animation: bt-scan 2.4s cubic-bezier(.6,0,.4,1) infinite; }
.boot-art .bt-days text { fill: var(--text-muted); font: 600 10px/1 Inter, system-ui, sans-serif; text-anchor: middle; }
@keyframes bt-fill {
  0% { transform: scaleY(.04); }
  35%, 70% { transform: scaleY(var(--h)); }
  100% { transform: scaleY(.04); }
}
@keyframes bt-cap { 0%, 100% { stroke-dashoffset: 0; opacity: .5; } 50% { stroke-dashoffset: -18; opacity: 1; } }
@keyframes bt-scan { 0% { transform: translateX(4px); } 60% { transform: translateX(170px); opacity: .12; } 61%, 100% { transform: translateX(170px); opacity: 0; } }
.boot-brand { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--text-primary); }
.boot-term { width: 100%; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-1);
  padding: 12px 14px; font: 12px/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--text-secondary);
  box-shadow: var(--shadow); min-height: 88px; }
.boot-log { list-style: none; margin: 0; padding: 0; }
.boot-log li { display: flex; gap: 8px; white-space: nowrap; overflow: hidden; animation: bt-in .25s ease; }
.boot-log .mark { color: var(--good); font-weight: 700; }
.boot-log li.fail .mark { color: var(--critical); }
.boot-log .c { overflow: hidden; text-overflow: ellipsis; color: var(--text-muted); }
.boot-log .t { margin-left: auto; color: var(--text-muted); opacity: .8; }
.boot-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-primary); }
.boot-prompt { color: var(--accent); font-weight: 600; }
.boot-caret { display: inline-block; width: 7px; height: 14px; margin-left: 2px; vertical-align: -2px; background: var(--accent);
  animation: bt-blink 1s steps(1) infinite; }
@keyframes bt-blink { 50% { opacity: 0; } }
@keyframes bt-in { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) {
  .boot, .boot-card { transition: none; }
  .boot-art .bt-bars rect { animation: none; transform: scaleY(var(--h)); }
  .boot-art .bt-cap, .boot-art .bt-scan, .boot-caret, .boot-log li { animation: none; }
  .boot-art .bt-scan { opacity: 0; }
}

/* ---------- Module motion ---------- */
:root { --sk-base: var(--surface-2); --sk-shine: color-mix(in oklab, var(--surface-2) 55%, var(--surface-1)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sk-shine: color-mix(in oklab, var(--surface-2) 70%, #ffffff 8%); } }
:root[data-theme="dark"] { --sk-shine: color-mix(in oklab, var(--surface-2) 70%, #ffffff 8%); }

/* network activity bar */
.net-bar { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 900; pointer-events: none; opacity: 0; transition: opacity .3s; overflow: hidden; }
.net-bar.on { opacity: 1; }
.net-bar i { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--accent) 30%, color-mix(in oklab, var(--accent) 60%, var(--series-3, var(--accent))) 70%, transparent);
  transform: translateX(-100%); animation: net-run 1.1s cubic-bezier(.6,.1,.3,1) infinite; }
.net-bar.done i { animation: net-done .4s ease-out forwards; background: var(--accent); }
@keyframes net-run { to { transform: translateX(100%); } }
@keyframes net-done { from { transform: translateX(-10%); } to { transform: translateX(0); opacity: 0; } }

/* staggered entrance */
.m-enter > * { animation: m-rise .5s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * var(--step, 45ms)); }
tbody.m-enter > tr { animation-name: m-fade; }
@keyframes m-rise { from { opacity: 0; transform: translateY(10px) scale(.99); } }
@keyframes m-fade { from { opacity: 0; transform: translateX(-4px); } }
/* bars and meters grow from zero inside an entering block */
.m-enter :is(.meter, .bar, .ph-meter, .av-bar) > i { transform-origin: left center; animation: m-grow .8s cubic-bezier(.2,.8,.2,1) both;
  animation-delay: calc(var(--i, 0) * var(--step, 45ms) + 120ms); }
@keyframes m-grow { from { transform: scaleX(0); } }

/* page switch, drawer, modals */
.page-view:not([hidden]) { animation: m-page .35s ease both; }
@keyframes m-page { from { opacity: 0; transform: translateY(6px); } }
.phase-overlay:not([hidden]) { animation: m-dim .25s ease both; }
.phase-overlay:not([hidden]) .phase-detail { animation: m-drawer .38s cubic-bezier(.2,.8,.2,1) both; }
@keyframes m-dim { from { background: rgb(0 0 0 / 0); } }
@keyframes m-drawer { from { transform: translateX(40px); opacity: .4; } }
.tm-overlay { animation: m-dim .2s ease both; }
.tm-modal { animation: m-modal .32s cubic-bezier(.2,.8,.2,1) both; }
@keyframes m-modal { from { opacity: 0; transform: translateY(12px) scale(.98); } }

/* trend waiting for earlier weeks: a light sweep over the dimmed body */
#trend-body.dim { position: relative; overflow: hidden; }
#trend-body.dim::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, color-mix(in oklab, var(--accent) 10%, transparent) 50%, transparent 70%);
  transform: translateX(-100%); animation: sk-sweep 1.6s ease-in-out infinite; pointer-events: none; }
.loading-note::after, .sk-label::after { content: ""; display: inline-block; width: 1.2em; text-align: left; animation: m-dots 1.2s steps(4) infinite; }
@keyframes m-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

/* skeletons */
.sk { display: block; height: 10px; border-radius: 6px; background: linear-gradient(90deg, var(--sk-base) 0%, var(--sk-shine) 40%, var(--sk-base) 80%) 0 0 / 300% 100%;
  animation: sk-shimmer 1.4s ease-in-out infinite; }
@keyframes sk-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@keyframes sk-sweep { to { transform: translateX(100%); } }
.sk-row { display: flex; align-items: center; gap: 10px; }
.sk-row > .sk:not(.sk-avatar):not(.sk-dot):not(.sk-pill) { flex: 0 1 auto; }
.sk-col { display: grid; gap: 8px; flex: 1; min-width: 0; }
.sk-title { height: 14px; }
.sk-h1 { height: 20px; }
.sk-pill { height: 22px; border-radius: 999px; flex: none; }
.sk-avatar { height: 28px; border-radius: 50%; flex: none; }
.sk-dot { height: 18px; border-radius: 50%; flex: none; }
.sk-meter { height: 6px; }
.sk-card { display: grid; gap: 16px; padding: 18px; min-height: 180px; pointer-events: none; }
.sk-people { gap: 6px; }
.sk-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.sk-kpi { display: grid; gap: 10px; padding: 14px; }
.sk-gantt { display: grid; gap: 10px; padding: 18px; }
.sk-gbar { height: 12px; }
.sk-list { display: grid; gap: 14px; padding: 18px; }
.sk-tr td { padding-top: 14px; padding-bottom: 14px; }
.sk-modal { display: grid; gap: 12px; padding: 28px; min-width: min(520px, 90vw); }
.sk-card .sk-row:first-child .sk-col .sk:first-child { animation-delay: .05s; }
.phase-grid .sk-card:nth-child(2) .sk { animation-delay: .1s; } .phase-grid .sk-card:nth-child(3) .sk { animation-delay: .2s; }
.phase-grid .sk-card:nth-child(4) .sk { animation-delay: .15s; } .phase-grid .sk-card:nth-child(5) .sk { animation-delay: .25s; }

@media (prefers-reduced-motion: reduce) {
  .m-enter > *, .m-enter :is(.meter, .bar, .ph-meter, .av-bar) > i, .page-view:not([hidden]), .phase-overlay:not([hidden]),
  .phase-overlay:not([hidden]) .phase-detail, .tm-overlay, .tm-modal, .sk, #trend-body.dim::after, .net-bar i,
  .loading-note::after, .sk-label::after { animation: none !important; }
}

/* ---------- Tasks page ---------- */
.tk-list { display: grid; gap: 16px; }
.tk-group { padding: 0; overflow: hidden; }
.tk-group-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--border); position: relative; }
.tk-group-head h2 { margin: 0; font-size: 15px; }
.tk-group-head::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0; background: var(--series-1); }
.tk-group.g-overdue .tk-group-head::before { background: var(--critical); }
.tk-group.g-today .tk-group-head::before { background: var(--due-soon, var(--warning)); }
.tk-group.g-done .tk-group-head::before { background: var(--good); }
.tk-group.g-none .tk-group-head::before { background: var(--border); }
.tk-rows { display: grid; }
.tk-row { display: grid; grid-template-columns: 14px minmax(0, 1fr) 150px 110px 120px 300px; align-items: center; gap: 14px; padding: 12px 18px; border-top: 1px solid var(--grid); transition: background .15s; }
.tk-rows > .tk-row:first-child { border-top: 0; }
.tk-row:hover { background: color-mix(in oklab, var(--accent) 4%, transparent); }
.tk-row.is-mine { box-shadow: inset 3px 0 0 color-mix(in oklab, var(--accent) 60%, transparent); }
.scope-mine .tk-row { grid-template-columns: 14px minmax(0, 1fr) 110px 120px 420px; }
.tk-state { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--text-muted); }
.tk-row.st-progress .tk-state { border-color: var(--accent); background: conic-gradient(var(--accent) 0 50%, transparent 50% 100%); }
.tk-row.st-done .tk-state { border-color: var(--good); background: var(--good); }
.tk-row.st-hold .tk-state { border-color: var(--warning); border-style: dashed; }
.tk-main { min-width: 0; display: grid; gap: 5px; }
.tk-name { display: flex; gap: 8px; min-width: 0; font-weight: 500; }
.tk-name .clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-no { color: var(--text-muted); font-variant-numeric: tabular-nums; flex: none; }
.tk-row.st-done .tk-name .clip { color: var(--text-secondary); text-decoration: line-through; text-decoration-color: color-mix(in oklab, var(--text-muted) 60%, transparent); }
.tk-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; min-width: 0; }
.tk-wi { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag.tk-dev { color: var(--accent); }
.tk-test { font-size: 11px; color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px; padding: 0 7px; }
.tk-test b { font-weight: 600; color: var(--text-secondary); }
.tk-test.ok b { color: var(--good); } .tk-test.bad b { color: var(--critical); }
.tk-owner { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tk-owner .clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-avatar { width: 24px; height: 24px; font-size: 10px; }
.tk-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tk-due { font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.tk-due.due-overdue { color: var(--critical); font-weight: 600; }
.tk-due.due-today { color: var(--due-soon, var(--warning)); font-weight: 600; }
.tk-hours { display: grid; gap: 4px; }
.tk-hours-t { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.tk-hours-t b { color: var(--text-primary); }
.tk-hours .meter { margin: 0; }
.meter.over i { background: var(--critical); }
.tk-actions { display: grid; grid-template-columns: 96px minmax(0, 1fr) 34px; gap: 6px; align-items: center; }
.tk-act-state { display: flex; }
.tk-act-mid { display: flex; gap: 6px; align-items: center; justify-content: flex-end; min-width: 0; flex-wrap: wrap; }
.tk-act-edit { display: flex; justify-content: center; }
.tk-act-edit .tk-edit { width: 32px; min-width: 32px; padding: 0; display: inline-grid; place-items: center; }
.tk-state-tag { margin-right: 4px; }
.kpi-bad .value { color: var(--critical); }
.kpi-warn .value { color: var(--warning); }
.sk-tkrow { pointer-events: none; }
.tc-comment textarea { width: 100%; font: inherit; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-1); color: var(--text-primary); resize: vertical; }
.tc-comment textarea:focus { outline: 2px solid color-mix(in oklab, var(--accent) 50%, transparent); border-color: var(--accent); }
.tc-comment { display: grid; gap: 8px; }
.tc-prev summary { cursor: pointer; }
.tc-prev-text { white-space: pre-wrap; font: 12px/1.5 ui-monospace, Menlo, monospace; background: var(--surface-2); border-radius: 8px; padding: 10px; max-height: 160px; overflow: auto; margin: 6px 0 0; }
@media (max-width: 900px) {
  .tk-row, .scope-mine .tk-row { grid-template-columns: 14px minmax(0, 1fr) auto; grid-template-areas: "s m m" ". o d" ". h h" ". a a"; row-gap: 8px; }
  .tk-state { grid-area: s; } .tk-main { grid-area: m; } .tk-owner { grid-area: o; } .tk-due { grid-area: d; text-align: right; }
  .tk-hours { grid-area: h; } .tk-actions { grid-area: a; justify-content: flex-start; }
}
.tk-more { display: block; width: 100%; padding: 10px; border: 0; border-top: 1px solid var(--grid); background: transparent; color: var(--accent); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.tk-more:hover { background: color-mix(in oklab, var(--accent) 6%, transparent); }
.tag.tk-launched { color: var(--good); }
/* search filter: the column keeps a usable width and wraps as a unit; the input only fills it (never overflows the toolbar) */
.toolbar .tool.grow-tool { flex: 1 1 240px; min-width: min(240px, 100%); }
.toolbar .tool.grow-tool input { width: 100%; min-width: 0; box-sizing: border-box; }

/* ---------- Test cases subform (completion window) ---------- */
.sf-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.sf-head .tm-sec { margin: 0; }
.sf-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-1); }
.sf-table { width: 100%; min-width: 860px; border-collapse: collapse; }
.sf-table th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--text-muted); padding: 9px 8px; background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap; }
.sf-table td { padding: 6px 6px; border-top: 1px solid var(--grid); vertical-align: top; }
.sf-table tbody tr:first-child td { border-top: 0; }
.sf-table :is(input, select, textarea) { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; padding: 7px 9px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--text-primary); }
.sf-table :is(input, select, textarea):hover { border-color: var(--border); }
.sf-table :is(input, select, textarea):focus { outline: none; border-color: var(--accent); background: var(--bg); box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 25%, transparent); }
.sf-table textarea { resize: none; min-height: 36px; line-height: 1.4; overflow-y: auto; white-space: pre-wrap; word-break: break-word; }
.sf-table textarea.sf-missing { border-color: var(--critical); background: color-mix(in oklab, var(--critical) 8%, transparent); }
.sf-table .sf-no { width: 44px; text-align: center; color: var(--text-muted); font-variant-numeric: tabular-nums; padding-top: 13px; }
.sf-table th.sf-no { padding-top: 9px; }
.sf-table .sf-name { width: 17%; } .sf-table .sf-module { width: 16%; } .sf-table .sf-component { width: 15%; }
.sf-table .sf-description { width: 26%; } .sf-table .sf-expected { width: 22%; }
.sf-table .sf-x { width: 36px; text-align: center; }
.sf-table .sf-x .tm-x { position: static; margin-top: 4px; }
.sf-table tr.sf-existing td { background: color-mix(in oklab, var(--good) 5%, transparent); padding: 9px 8px; font-size: 13px; }
.sf-table tr:not(.sf-existing):hover td { background: color-mix(in oklab, var(--accent) 3%, transparent); }
.sf-table .sf-empty { text-align: center; padding: 18px; }
.sf-add { justify-self: start; padding: 8px 14px; }
.sf-table :is(input, select, textarea) { border-color: var(--grid); background: color-mix(in oklab, var(--surface-2) 45%, transparent); }

/* ---------- Task detail drawer ---------- */
.td-overlay { z-index: 50; }
.tk-open { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-open:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.tk-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.td-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.td-titles h2 { margin: 2px 0 0; font-size: 22px; letter-spacing: -.01em; }
.td-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.td-actions { display: flex; gap: 8px; }
.td-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.td-kpi { padding: 14px 16px; display: grid; gap: 4px; }
.td-kpi .label { font-size: 12px; color: var(--text-secondary); font-weight: 500; }
.td-kpi .value { font-size: 24px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.td-var { font-size: 18px !important; }
.td-var .neg { color: var(--critical); } .td-var .pos { color: var(--good); }
.td-cmp { padding: 14px 16px; display: grid; gap: 10px; margin-top: 12px; }
.td-cmp-row { display: grid; grid-template-columns: 80px minmax(0, 1fr) 64px; gap: 12px; align-items: center; }
.td-cmp-bar { height: 12px; background: var(--surface-2); border-radius: 6px; overflow: hidden; }
.td-cmp-bar i { display: block; height: 100%; border-radius: 6px; background: var(--series-2); }
.td-cmp-bar.act i { background: var(--series-1); } .td-cmp-bar.over i { background: var(--critical); }
.td-cmp-v { text-align: right; font-variant-numeric: tabular-nums; }
.td-window { display: flex; gap: 18px; flex-wrap: wrap; padding-top: 4px; border-top: 1px solid var(--grid); }
.td-window b { color: var(--text-primary); font-weight: 600; }
.m-enter .td-cmp-bar > i { transform-origin: left center; animation: m-grow .8s cubic-bezier(.2,.8,.2,1) both; animation-delay: .25s; }
.td-tl { padding: 10px 12px; margin-top: 12px; }
.td-timeline { width: 100%; height: auto; display: block; }
.td-timeline .td-grid { stroke: var(--grid); stroke-width: 1; }
.td-timeline .td-tick, .td-timeline .td-rowlabel { fill: var(--text-muted); font: 500 10px Inter, system-ui, sans-serif; }
.td-timeline .td-rowlabel { fill: var(--text-secondary); font-size: 11px; }
.td-timeline .td-plan { fill: color-mix(in oklab, var(--text-muted) 35%, transparent); stroke: var(--text-muted); stroke-dasharray: 3 3; }
.td-timeline .td-est { fill: var(--series-2); }
.td-timeline .td-act { fill: var(--series-1); }
.td-timeline .td-now { stroke: var(--critical); stroke-width: 1.5; stroke-dasharray: 2 3; }
.td-people, .td-logs { width: 100%; margin-top: 12px; }
.td-notes { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }
.td-history { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 0; }
.td-h { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; position: relative; padding-bottom: 16px; }
.td-h::before { content: ""; position: absolute; left: 10px; top: 16px; bottom: 0; width: 2px; background: var(--grid); }
.td-h:last-child::before { display: none; }
.td-h-dot { width: 12px; height: 12px; margin: 4px 0 0 5px; border-radius: 50%; background: var(--surface-1); border: 2px solid var(--text-muted); position: relative; z-index: 1; }
.td-h.now .td-h-dot { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 20%, transparent); }
.td-h.new .td-h-dot { border-color: var(--good); }
.td-h.status .td-h-dot { border-color: var(--series-2); background: var(--series-2); }
.td-h-title { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.td-h-changes { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.td-h-changes li { display: grid; grid-template-columns: 110px minmax(0, auto) 16px minmax(0, auto); gap: 6px; align-items: baseline; justify-content: start; }
.td-h-field { color: var(--text-muted); font-size: 12px; }
.td-h-from { color: var(--text-secondary); text-decoration: line-through; text-decoration-color: color-mix(in oklab, var(--text-muted) 50%, transparent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.td-h-arrow { color: var(--text-muted); }
.td-h-to { color: var(--text-primary); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.td-text { margin-top: 14px; display: grid; gap: 6px; }
.td-pre { white-space: pre-wrap; background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font-size: 13px; line-height: 1.55; max-height: 260px; overflow: auto; }
.td-tc { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 4px; font-size: 13px; }
@media (max-width: 700px) { .td-h-changes li { grid-template-columns: minmax(0, auto) 16px minmax(0, 1fr); } .td-h-field { grid-column: 1 / -1; } .td-cmp-row { grid-template-columns: 64px minmax(0, 1fr) 56px; } }

/* ======================================================================
   Responsive: tablets (≤1024) and phones (≤640), plus touch ergonomics
   ====================================================================== */
.btn .ic { display: none; }
.tab-ic, .tab-s { display: none; }
.tb-more { display: none; }
.tab { white-space: nowrap; }
html { -webkit-text-size-adjust: 100%; }
body { overscroll-behavior-y: none; }
.table-wrap { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.menu-list { max-width: calc(100vw - 24px); }

/* sticky drawer headers keep Close in reach while scrolling long details */
.phase-detail > .ph-d-head, .phase-detail > .td-head { position: sticky; top: -24px; z-index: 3; background: var(--bg); margin: -24px -28px 0; padding: 20px 28px 12px; border-bottom: 1px solid transparent; }
.phase-detail > .ph-d-head:has(+ *), .phase-detail > .td-head { box-shadow: 0 1px 0 var(--border); }

/* ---------- tablets ---------- */
@media (max-width: 1024px) {
  .shell { gap: 12px 16px; }
  .tabs { overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); mask-image: linear-gradient(90deg, #000 90%, transparent); }
  .tabs::-webkit-scrollbar { display: none; }
  .phase-detail { width: min(860px, 100%); }
}
@media (min-width: 901px) and (max-width: 1024px) { .tk-row { grid-template-columns: 14px minmax(0, 1fr) 130px 100px 110px 270px; gap: 12px; } .scope-mine .tk-row { grid-template-columns: 14px minmax(0, 1fr) 100px 110px 330px; } }
@media (max-width: 860px) {
  .phase-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .phase-detail { padding: 16px 16px 40px; }
  .phase-detail > .ph-d-head, .phase-detail > .td-head { top: -16px; margin: -16px -16px 0; padding: 14px 16px 10px; }
  .kpis { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  #app { padding: 0; }
  .tabs { -webkit-mask-image: none; mask-image: none; }
}

/* ---------- phones ---------- */
@media (max-width: 640px) {
  /* one-row header: brand + icon actions; navigation moves to a bottom tab bar */
  .shell { flex-wrap: nowrap; padding: 8px 12px; gap: 8px; position: sticky; top: 0; padding-top: max(8px, env(safe-area-inset-top)); }
  .brand-name { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .shell-actions { margin-left: auto; flex-wrap: nowrap; gap: 4px; }
  .shell-actions .viewer, .shell-actions .role-badge { display: none !important; }
  .sync-status { font-size: 0; gap: 0; padding: 0 4px; }
  .sync-status .dot { width: 9px; height: 9px; }
  #btn-sync .lbl, #btn-signout .lbl { display: none; }
  #btn-sync .ic, #btn-signout .ic { display: inline-grid; place-items: center; line-height: 0; }
  .shell-actions > .btn, .shell-actions > .menu > summary { min-width: 36px; min-height: 36px; padding: 0 8px; display: inline-grid; place-items: center; }
  .hdr-scope button { padding: 6px 10px; }
  .menu-list { position: fixed; right: 12px; left: auto; top: 56px; }

  .tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; order: 0; flex: none; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: color-mix(in oklab, var(--surface-1) 92%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-top: 1px solid var(--border); overflow: visible; }
  .tab { display: grid; justify-items: center; gap: 2px; padding: 6px 2px 4px; font-size: 11px; font-weight: 600; border-radius: 12px; box-shadow: none !important; color: var(--text-muted); background: transparent; -webkit-tap-highlight-color: transparent; transition: color .15s, background .15s; }
  .tab .tab-l { display: none; }
  .tab .tab-s { display: block; }
  .tab .tab-ic { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s cubic-bezier(.2,.8,.2,1); }
  .tab.active { color: var(--accent); background: color-mix(in oklab, var(--accent) 12%, transparent); }
  .tab.active .tab-ic { transform: translateY(-1px) scale(1.06); }
  .page-view { padding: 14px 12px calc(88px + env(safe-area-inset-bottom)); gap: 12px; }
  .toast { bottom: calc(80px + env(safe-area-inset-bottom)) !important; left: 12px; right: 12px; transform: none; text-align: center; }

  .page-head { flex-wrap: wrap; }
  .page-head h1 { font-size: 21px; }
  .page-head .summary { font-size: 14px; }
  .page-head > .btn, .page-head .inline-controls { width: 100%; }
  .page-head .inline-controls .btn.primary { flex: 1; }

  /* KPIs two per row */
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpi, .kpis .card { padding: 12px; }
  .kpi .value { font-size: 22px; }
  .kpi .meta, .kpis .meta { font-size: 11px; line-height: 1.35; }
  .kpis .meta, .kpis .meta * { white-space: normal !important; overflow-wrap: anywhere; min-width: 0; }
  .kpis > :last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* filters: primary ones visible, the rest behind "More filters" */
  .toolbar { gap: 10px; padding: 10px; }
  .toolbar .tool { width: 100%; }
  .toolbar:not(.open) .tool:not([data-primary]) { display: none; }
  .toolbar:not(.open) .chips { display: none; }
  .tb-more { display: inline-flex; width: 100%; justify-content: center; }
  .tb-more[hidden] { display: none; }
  select.compact, .toolbar select, .toolbar input { width: 100%; min-width: 0; }
  .segmented { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .segmented::-webkit-scrollbar { display: none; }
  .segmented button { white-space: nowrap; flex: 1 0 auto; }
  .tool > .segmented + select { margin-top: 6px; }
  .card-head.wrap .inline-controls { width: 100%; }
  .card-head.wrap .inline-controls > * { flex: 1 1 140px; }

  /* tables: the first column stays put while the rest scrolls sideways */
  .table-wrap table :is(th, td):first-child { position: sticky; left: 0; z-index: 1; background: var(--surface-1); box-shadow: 1px 0 0 var(--grid); }
  .chart-box { height: 230px; }

  /* phase + task drawers use the full screen */
  .phase-overlay { background: var(--bg); }
  .phase-detail { width: 100%; border-left: 0; box-shadow: none; padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
  .ph-d-head h2, .td-titles h2 { font-size: 19px; }
  .td-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .td-kpi .value { font-size: 20px; }
  .td-tags { gap: 6px; }
  .td-actions { width: 100%; }
  .td-actions .btn { flex: 1; }

  /* pop-up windows become full-screen sheets */
  .tm-overlay { padding: 0; place-items: stretch; }
  .tm-modal { width: 100%; max-height: none; height: 100dvh; border-radius: 0; border: 0; }
  .tm-header { padding: max(14px, env(safe-area-inset-top)) 16px 14px; }
  .tm-body { padding: 14px 16px; }
  .tm-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); flex-wrap: wrap; }
  .tm-foot > .muted.small { flex-basis: 100%; order: -1; }
  .tm-foot > span[style*="flex"] { display: none; }
  .tm-foot .btn { flex: 1; min-height: 44px; }
  .tm-modal { animation-name: m-sheet; }
  @keyframes m-sheet { from { transform: translateY(24px); opacity: 0; } }

  /* tasks list rows */
  .tk-group-head { padding: 12px 14px; }
  .tk-row, .scope-mine .tk-row { padding: 12px 14px; grid-template-columns: 14px minmax(0, 1fr) auto; column-gap: 10px; align-items: start; }
  .tk-state { margin-top: 4px; }
  .tk-name { align-items: baseline; }
  .tk-name .tk-open { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; }
  .tk-owner .clip { max-width: 55vw; }
  .tk-hours { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; }
  .tk-actions { justify-content: flex-start; }
  .tk-actions .btn { flex: 1; min-height: 38px; }
  .tk-actions .tag { flex: none; }
  .phase-grid { grid-template-columns: 1fr; gap: 12px; }
  .boot-card { gap: 14px; }
}
@media (max-width: 380px) { .shell .brand-name { display: none; } }

/* ---------- touch screens: bigger targets, no zoom-on-focus, no sticky hover ---------- */
@media (pointer: coarse) {
  .btn { min-height: 40px; }
  .btn.small { min-height: 36px; padding: 6px 12px; font-size: 13px; }
  .segmented button { min-height: 36px; padding: 6px 14px; }
  input, select, textarea { font-size: 16px !important; }
  input:not([type=checkbox]):not([type=radio]):not(.dt-val), select { min-height: 42px; }
  .chip-mini { min-height: 30px; padding: 4px 11px; }
  .tm-x, .td-close { min-width: 40px; min-height: 40px; }
  .menu-list button { padding: 12px 12px; }
  .tk-open { padding: 4px 0; }
  .sf-table :is(input, select, textarea) { min-height: 40px; }
}
@media (hover: none) {
  .ph-card:hover { transform: none; box-shadow: var(--shadow); border-color: var(--border); }
  .tk-row:hover, .sf-table tr:not(.sf-existing):hover td { background: transparent; }
  .ph-card:active { transform: scale(.99); }
  .btn:active, .tab:active, .segmented button:active { transform: scale(.97); }
}

@media (max-width: 640px) {
  /* task timeline stays legible: scroll it sideways instead of shrinking */
  .td-tl { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .td-timeline { min-width: 620px; }
  /* facts: two columns, label above value */
  .ph-facts { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
  .ph-fact { display: grid !important; gap: 2px; min-width: 0; }
  .ph-fact strong { overflow-wrap: anywhere; }
  .ph-d-section { padding: 14px; }
  /* complete window: summary in two columns; test cases as stacked cards */
  .tc-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-wrap { border: 0; background: transparent; overflow: visible; }
  .sf-table, .sf-table tbody { display: block; min-width: 0; width: 100%; }
  .sf-table thead { display: none; }
  .sf-table tr { display: grid; grid-template-columns: 1fr 40px; gap: 8px 10px; padding: 12px; margin-bottom: 10px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; }
  .sf-table tr.sf-existing { grid-template-columns: 1fr; padding: 10px 12px; }
  .sf-table td { display: grid; gap: 4px; padding: 0; border: 0; grid-column: 1 / 2; }
  .sf-table td::before { content: attr(data-label); font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--text-muted); }
  .sf-table td.sf-no { grid-column: 1; grid-row: 1; text-align: left; padding: 0; font-weight: 700; color: var(--text-primary); display: flex; gap: 6px; }
  .sf-table td.sf-no::before { content: "Test case"; font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--text-primary); }
  .sf-table td.sf-x { grid-column: 2; grid-row: 1; }
  .sf-table td.sf-x::before, .sf-table tr.sf-existing td::before, .sf-table .sf-empty::before { content: none; }
  .sf-table tr.sf-existing td { background: none; padding: 0; display: block; }
  .sf-table tr.sf-existing td.sf-no { display: none; }
  .sf-table td, .sf-table th { width: auto !important; }
  .sf-table td :is(input, select, textarea) { width: 100%; }
  .sf-table tr.sf-existing td:empty { display: none; }
  .sf-table :is(input, select, textarea) { border-color: var(--border); background: var(--bg); }
  .sf-add { width: 100%; justify-content: center; }
}

/* KPI comparison text wraps instead of clipping (all sizes) */
.kpis .meta, .kpis .meta * { white-space: normal !important; overflow-wrap: anywhere; min-width: 0; }
/* tablets: balanced KPI rows (5 → 3 + 2, 4 → 2 + 2) and a slimmer header */
@media (min-width: 641px) and (max-width: 1024px) {
  .kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .kpis > * { grid-column: span 2; }
  .kpis > :nth-child(4):nth-last-child(2), .kpis > :nth-child(5):last-child { grid-column: span 3; }
  .kpis:has(> :nth-child(4):last-child) > * { grid-column: span 3; }
  .td-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shell-actions .viewer, .shell-actions .role-badge { display: none !important; }
  .shell { row-gap: 8px; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .sync-status { font-size: 0; gap: 0; }
  .sync-status .dot { width: 9px; height: 9px; }
}
@media (min-width: 861px) and (max-width: 1024px) {
  .shell-actions { margin-left: auto; }
  .tabs { order: 3; flex-basis: 100%; -webkit-mask-image: none; mask-image: none; }
}

/* phones: the header must fit any width down to 320px, including touch-sized controls */
@media (max-width: 640px) {
  html, body { overflow-x: clip; max-width: 100%; }
  .shell { max-width: 100vw; }
  .shell .brand { flex: none; min-width: 0; }
  .shell .brand-name { display: none; }
  .shell-actions { min-width: 0; gap: 4px; }
  .shell-actions > .btn, .shell-actions > .menu > summary.btn { width: 36px; min-width: 36px; height: 36px; min-height: 36px; padding: 0; }
  .hdr-scope { padding: 2px; flex: none; }
  .hdr-scope button { min-height: 32px; padding: 4px 10px; font-size: 13px; }
}
@media (max-width: 360px) {
  .shell { padding-left: 8px; padding-right: 8px; gap: 6px; }
  .shell-actions { gap: 2px; }
  .shell-actions > .btn, .shell-actions > .menu > summary.btn { width: 34px; min-width: 34px; }
  .hdr-scope button { padding: 4px 8px; }
}
/* phase drawer header: long names wrap instead of widening the header */
.ph-d-head > :first-child { min-width: 0; flex: 1 1 auto; }
.ph-d-head :is(.ph-code, h2, .ph-customer) { overflow-wrap: anywhere; }
.ph-d-head-right { flex: none; }
@media (max-width: 640px) { .ph-d-head-right { flex-wrap: wrap; justify-content: flex-end; gap: 6px; } }

/* ---------- Availability on phones: one card per member ---------- */
@media (max-width: 640px) {
  #ph-avail { padding: 14px 12px; }
  #ph-avail .card-head { gap: 10px; }
  #ph-avail .table-wrap { overflow: visible; }
  .av-table, .av-table tbody { display: block; width: 100%; }
  .av-table thead { display: none; }
  .av-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "m f" "b b" "t t" "p p"; gap: 12px 12px;
    padding: 14px; margin-bottom: 10px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-1); }
  .av-table tr.best { border-color: color-mix(in srgb, var(--good) 45%, var(--border)); }
  .av-table tr.best td { background: none; }
  .av-table td { display: block; padding: 0; border: 0; min-width: 0 !important; position: static !important; box-shadow: none !important; background: none !important; text-align: left; }
  .av-table td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
  .av-table .av-m { grid-area: m; align-self: center; }
  .av-table .av-m .member-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .av-table .av-m .fit { margin-left: 0; }
  .av-table .av-f { grid-area: f; text-align: right; align-self: center; }
  .av-table .av-f strong { font-size: 22px; letter-spacing: -.02em; }
  .av-table .av-b { grid-area: b; }
  .av-table .av-b .av-bar { width: 100%; height: 10px; margin-bottom: 6px; }
  .av-table .av-t { grid-area: t; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--grid); }
  .av-table .av-t::before { margin: 0 4px 0 0; }
  .av-table .av-t strong { font-size: 16px; }
  .av-table .av-p { grid-area: p; }
  .av-table .av-phases { gap: 6px; }
  .av-table .chip-mini { font-size: 12px; }
  .av-table .sk-tr { display: block; }
}

/* ---------- Clean-up ---------- */
.tk-mode .cu-badge { color: var(--warning); opacity: 1; font-weight: 700; }
.cu-nudge { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-style: solid; border-color: color-mix(in srgb, var(--warning) 45%, transparent); background: color-mix(in srgb, var(--warning) 9%, transparent); color: var(--text-primary); }
.cu { display: grid; gap: 12px; }
.cu-head { display: grid; gap: 10px; padding: 16px 18px; }
.cu-head h2 { margin: 0; font-size: 17px; }
.cu-bulk { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px; border-radius: 10px; background: var(--surface-2); }
.cu-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; }
.cu-bulk-comment { flex: 1 1 260px; min-width: 0; }
.cu-search { width: 100%; }
.cu-list { padding: 0; overflow: hidden; }
.cu-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) minmax(260px, auto); gap: 12px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--grid); transition: background .15s; }
.cu-row:first-child { border-top: 0; }
.cu-row.changed { background: color-mix(in oklab, var(--accent) 7%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.cu-row.r-ok { background: color-mix(in oklab, var(--good) 8%, transparent); box-shadow: inset 3px 0 0 var(--good); }
.cu-row.r-err { background: color-mix(in oklab, var(--critical) 8%, transparent); box-shadow: inset 3px 0 0 var(--critical); }
.cu-sel { width: 18px; height: 18px; accent-color: var(--accent); }
.cu-main { min-width: 0; display: grid; gap: 5px; }
.cu-edit { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.cu-edit select { min-width: 170px; }
.cu-comment { flex: 1 1 200px; min-width: 0; }
.cu-why { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-secondary); }
.cu-why.w-overdue { color: var(--critical); border-color: color-mix(in srgb, var(--critical) 40%, transparent); }
.cu-why.w-launched { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, transparent); }
.cu-res { font-size: 12px; font-weight: 600; }
.cu-res.ok { color: var(--good); } .cu-res.err { color: var(--critical); max-width: 280px; }
.cu-savebar { position: sticky; bottom: 12px; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; background: var(--surface-1); border: 1px solid var(--accent); box-shadow: 0 10px 30px rgb(0 0 0 / .25); animation: m-rise .3s ease both; }
.cu-team td, .cu-team th { white-space: nowrap; }

/* ---------- Plan ---------- */
.pl-body { display: grid; gap: 16px; }
.pl-card { display: grid; gap: 12px; }
.pl-lines { display: grid; gap: 8px; }
.pl-line { display: grid; grid-template-columns: 120px minmax(0, 1fr) 110px 110px 36px; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); }
.pl-line.k-leave { background: color-mix(in oklab, var(--warning) 10%, var(--surface-2)); }
.pl-line.k-internal { background: color-mix(in oklab, var(--series-2) 8%, var(--surface-2)); }
.pl-kind { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.pl-line select, .pl-line input:not([type=number]) { width: 100%; min-width: 0; }
.pl-hours { display: flex; align-items: center; gap: 4px; }
.pl-hours input { width: 72px; text-align: right; font-variant-numeric: tabular-nums; }
.pl-act { text-align: right; }
.pl-add { display: flex; gap: 8px; flex-wrap: wrap; }
.pl-foot { border-top: 1px solid var(--border); margin: 4px -18px -18px; border-radius: 0 0 var(--radius) var(--radius); }
.pl-group { justify-self: start; }
.pl-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.pl-chip { cursor: default; max-width: 280px; }
.pl-chip.k-leave { color: var(--warning); } .pl-chip.k-internal { color: var(--series-2); }
.pl-team tr.pl-missing td { background: color-mix(in oklab, var(--warning) 6%, transparent); }

/* ---------- Insights ---------- */
.in-body { display: grid; gap: 16px; }
.in-controls { display: flex; gap: 10px; flex-wrap: wrap; }
.in-heat td.heat { font-variant-numeric: tabular-nums; font-size: 12px; }
.in-heat td.h-hi { background: color-mix(in oklab, var(--good) 22%, transparent); }
.in-heat td.h-mid { background: color-mix(in oklab, var(--good) 10%, transparent); }
.in-heat td.h-lo { background: color-mix(in oklab, var(--warning) 14%, transparent); }
.in-heat td.h-none { color: var(--text-muted); }
.in-heat th, .in-heat td { white-space: nowrap; }
.in-cov .bar-cell .bar i.low { background: var(--critical); }
.in-weeks { display: flex; gap: 10px; align-items: flex-end; overflow-x: auto; padding: 6px 2px 2px; }
.in-week { display: grid; justify-items: center; gap: 4px; min-width: 56px; }
.in-week-bar { width: 26px; height: 110px; border-radius: 6px; background: var(--surface-2); display: flex; align-items: flex-end; overflow: hidden; }
.in-week-bar i { display: block; width: 100%; background: var(--series-1); border-radius: 6px; }
.m-enter .in-week-bar i { animation: m-grow-y .8s cubic-bezier(.2,.8,.2,1) both; transform-origin: bottom; }
@keyframes m-grow-y { from { transform: scaleY(0); } }
.in-gaps .tk-open { max-width: 420px; }

@media (max-width: 640px) {
  .cu-row { grid-template-columns: 22px minmax(0, 1fr); align-items: start; }
  .cu-edit { grid-column: 2; justify-content: flex-start; }
  .cu-edit select { flex: 1 1 100%; }
  .cu-savebar { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .cu-bulk > * { flex: 1 1 100%; }
  .pl-line { grid-template-columns: 1fr auto 36px; grid-template-areas: "k k x" "f f f" "h a a"; }
  .pl-line .pl-kind { grid-area: k; } .pl-line > select, .pl-line > input { grid-area: f; } .pl-line .pl-hours { grid-area: h; } .pl-line .pl-act { grid-area: a; } .pl-line > .tm-x, .pl-line > span:last-child { grid-area: x; }
  .pl-foot { margin: 4px -12px -14px; }
  #pl-week, #in-tabs { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .cu-savebar, .m-enter .in-week-bar i { animation: none; } }
.in-heat td.h-odd { background: color-mix(in oklab, var(--critical) 16%, transparent); color: var(--critical); font-weight: 600; }
.cu-check { white-space: nowrap; } .cu-why-filter { justify-self: start; max-width: 100%; }
.pl-line .tm-x { position: static; justify-self: end; }
/* the list wrapper on Tasks must keep the page's card spacing */
.tk-listview { display: grid; gap: 16px; min-width: 0; }
.tk-listview > * { min-width: 0; }
@media (max-width: 640px) { .tk-listview { gap: 12px; } }
.cu-res.err { white-space: normal; }
.cu-need { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--warning); }
.cu-needbox { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: space-between; }
.cu-row { grid-template-columns: 22px minmax(0, 1fr) minmax(240px, 420px); }
.cu-need { flex-basis: 100%; justify-content: flex-end; }
@media (max-width: 640px) { .cu-row { grid-template-columns: 22px minmax(0, 1fr); } .cu-need { justify-content: flex-start; } }
.la-checks { display: grid; gap: 6px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-1); }
.la-checks ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; }
.la-checks li { display: inline-flex; gap: 6px; align-items: center; color: var(--text-secondary); }
.la-checks li.bad { color: var(--critical); font-weight: 600; }
.la-ck { font-weight: 700; } .la-checks li.ok .la-ck { color: var(--good); }
.la-checks:not(.ok) { border-color: color-mix(in srgb, var(--critical) 45%, var(--border)); }
.tag.cu-skip { color: var(--series-7); }

/* Pop-up windows: a column that never pushes the footer off-screen, whatever the zoom level.
   (The old 4-row grid broke when the empty message row collapsed — body took an 'auto' row and the
   footer got a 0-height one, which hid the buttons on short, zoomed Windows screens.) */
.tm-modal { display: flex; flex-direction: column; }
.tm-modal > .tm-header, .tm-modal > .tm-top-msg, .tm-modal > .tm-foot { flex: none; }
.tm-modal > .tm-body { flex: 1 1 auto; min-height: 0; overscroll-behavior: contain; }
/* short viewports (Windows 125–150 % scaling on laptops): compact chrome, use the full height */
@media (max-height: 700px) {
  .tm-overlay { padding: 8px; }
  .tm-modal { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
  .tm-header { padding: 10px 18px; gap: 10px; }
  .tm-header .tm-badge { width: 32px; height: 32px; font-size: 15px; }
  .tm-header h2 { font-size: 17px; }
  .tm-body { padding: 12px 18px; gap: 12px; }
  .tm-foot { padding: 10px 18px; }
  .tc-summary { padding: 8px 12px; }
  .tc-comment textarea { min-height: 56px; }
}
/* Grid tracks in a height-limited, scrolling body must be content-sized: otherwise items that scroll
   sideways (the test-case table wrapper) have a 0 automatic minimum and collapse to ~0px on short screens. */
.tm-body { grid-auto-rows: max-content; }
.tm-body > * { min-height: min-content; }

/* ---------- Zoho Creator connection (home + header) ---------- */
.cr-home { display: flex; align-items: center; gap: 6px; }
.cr-state { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--good) 40%, var(--border)); background: color-mix(in srgb, var(--good) 8%, var(--surface-1)); font-size: 13px; }
.cr-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-muted); flex: none; }
.cr-state.ok .cr-dot, .cr-pill.ok .cr-dot { background: var(--good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 22%, transparent); }
.cr-pill.warn .cr-dot { background: var(--warning); } .cr-pill.off .cr-dot { background: var(--critical); }
.cr-menu .menu-list { right: 0; }
.cr-banner { display: flex; align-items: center; gap: 14px; justify-content: space-between; flex-wrap: wrap; padding: 14px 18px; border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 9%, var(--surface-1)); }
.cr-banner[hidden] { display: none; }
.cr-banner-text { display: grid; gap: 4px; max-width: 70ch; }
.cr-pill { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-secondary); cursor: pointer; }
.cr-pill.warn, .cr-pill.off { color: var(--text-primary); border-color: color-mix(in srgb, var(--warning) 50%, var(--border)); }
.cr-pill[hidden] { display: none; }
@media (max-width: 1024px) { .cr-pill .cr-pill-l { display: none; } .cr-pill { padding: 6px; } }
@media (max-width: 640px) { .cr-pill { display: none !important; } .cr-home { width: 100%; } .cr-home .cr-connect { flex: 1; justify-content: center; } .cr-banner .btn { width: 100%; justify-content: center; } }
/* phases whose SA is outside the team (admins reassign) */
.ph-card.needs-sa { border-color: color-mix(in srgb, var(--warning) 55%, var(--border)); }
.ph-sa-flag { margin: -4px -4px 4px; padding: 6px 10px; border-radius: 8px; font-size: 12px; color: var(--text-primary); background: color-mix(in srgb, var(--warning) 14%, transparent); border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent); }
.ph-sa-flag strong { color: var(--warning); }
.ph-sa-notice { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ph-sa-notice[hidden] { display: none; }
.ph-sa-flag-detail { margin: 0; order: 1; }

/* ---------- sync in progress (everyone) ---------- */
.sync-banner { position: sticky; top: 53px; z-index: 14; display: flex; align-items: center; gap: 10px; padding: 8px 24px; font-size: 13px;
  background: color-mix(in oklab, var(--accent) 12%, var(--surface-1)); border-bottom: 1px solid color-mix(in oklab, var(--accent) 35%, var(--border)); overflow: hidden; animation: m-rise .3s ease both; }
.sync-banner[hidden] { display: none; }
.sb-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid color-mix(in oklab, var(--accent) 30%, transparent); border-top-color: var(--accent); animation: sb-rot .8s linear infinite; flex: none; }
@keyframes sb-rot { to { transform: rotate(360deg); } }
.sb-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: net-run 1.2s ease-in-out infinite; }
#btn-sync.is-syncing { opacity: .6; }
@media (max-width: 860px) { .sync-banner { top: 0; padding: 8px 16px; } }
@media (max-width: 640px) { .sync-banner { top: 52px; font-size: 12px; } .sync-banner .muted { display: none; } }
@media (prefers-reduced-motion: reduce) { .sb-spin, .sb-bar, .sync-banner { animation: none; } }

/* ---------- Plan: week calendar ---------- */
.pl-cal { display: grid; gap: 10px; }
.pl-day { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 14px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-1); }
.pl-day.today { border-color: color-mix(in oklab, var(--accent) 60%, var(--border)); box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 35%, transparent); }
.pl-day.past { opacity: .92; }
.pl-day-head { display: grid; gap: 4px; align-content: start; }
.pl-day-head strong { font-size: 15px; }
.pl-today { margin-left: 6px; color: var(--accent); }
.pl-day-sum .neg { color: var(--critical); font-weight: 600; }
.pl-day-bar { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.pl-day-bar i { display: block; height: 100%; background: var(--series-1); border-radius: 3px; transition: width .3s; }
.pl-day-bar i.over { background: var(--critical); }
.pl-rows { display: grid; gap: 6px; align-content: start; }
.pl-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px 32px; gap: 8px; align-items: center; }
.pl-row .pl-work { width: 100%; min-width: 0; }
.pl-row.k-leave .pl-work { color: var(--warning); font-weight: 600; }
.pl-row .pl-hours input { width: 64px; }
.pl-row .tm-x { position: static; }
.pl-sub { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding-left: 2px; }
.pl-task { max-width: 360px; font-size: 12px; }
.pl-logged { font-size: 12px; font-weight: 600; color: var(--good); }
.pl-auto { font-size: 11px; font-weight: 600; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 999px; padding: 1px 8px; }
.pl-empty { margin: 4px 0; }
.pl-day-actions { display: flex; gap: 6px; }
.pl-legacy { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); display: grid; gap: 6px; }
.pl-work-static { font-weight: 500; }
@media (max-width: 720px) { .pl-day { grid-template-columns: 1fr; gap: 8px; } .pl-row { grid-template-columns: minmax(0, 1fr) 88px 32px; } }

/* ---------- Quick entry ---------- */
.qe-modal { width: min(1240px, 100%); }
.qe-split { align-items: start; }
.qe-editor { display: grid; gap: 12px; min-width: 0; }
.qe-list .tm-item .muted.small { font-size: 11px; }
.qe-acts { display: grid; gap: 8px; }
.qe-act { display: grid; grid-template-columns: 150px 104px 10px 104px minmax(0, 1fr) 32px; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--surface-1); border: 1px solid var(--border); }
.qe-act.bad { border-color: color-mix(in srgb, var(--critical) 55%, var(--border)); }
.qe-act.warn { border-color: color-mix(in srgb, var(--warning) 55%, var(--border)); }
.qe-act input { width: 100%; min-width: 0; }
.qe-act .tm-x { position: static; }
.qe-act-msg { grid-column: 1 / -1; font-weight: 600; }
.qe-act.bad .qe-act-msg { color: var(--critical); } .qe-act.warn .qe-act-msg { color: var(--warning); }
.qe-hint { align-self: end; margin: 0 0 8px; }
.qe-done { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.qe-result ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 2px; }
@media (max-width: 860px) { .qe-split { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .qe-act { grid-template-columns: 1fr 1fr 32px; } .qe-act > input[type=date] { grid-column: 1 / -1; } .qe-act > span.muted { display: none; } .qe-act .qe-notes { grid-column: 1 / -1; } }

/* ---------- "Your day" strip (Log Actual + Quick entry) ---------- */
.ds { display: grid; gap: 6px; padding: 10px 12px; border-radius: 10px; border: 1px dashed var(--border); background: color-mix(in oklab, var(--surface-2) 50%, transparent); }
.ds-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.ds-bar { position: relative; height: 12px; border-radius: 6px; background: var(--surface-2); overflow: hidden; }
.ds-blk { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: var(--series-1); }
.ds-blk.pending { background: repeating-linear-gradient(45deg, var(--series-2), var(--series-2) 4px, color-mix(in oklab, var(--series-2) 60%, transparent) 4px, color-mix(in oklab, var(--series-2) 60%, transparent) 8px); }
.ds-gap { position: absolute; top: 3px; bottom: 3px; border-radius: 3px; border: 1px dashed color-mix(in oklab, var(--good) 70%, transparent); }
.ds-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ds-chip { font: inherit; font-size: 12px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-1); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.ds-chip.saved { border-color: color-mix(in oklab, var(--series-1) 45%, var(--border)); }
.ds-chip.pending { border-style: dashed; border-color: color-mix(in oklab, var(--series-2) 60%, var(--border)); }
.ds-chip.gap { cursor: pointer; color: var(--good); font-weight: 600; border-color: color-mix(in oklab, var(--good) 45%, var(--border)); background: color-mix(in oklab, var(--good) 8%, var(--surface-1)); }
.ds-chip.gap:hover { background: color-mix(in oklab, var(--good) 16%, var(--surface-1)); }
/* quick entry rows now use the picker buttons */
.qe-act { grid-template-columns: minmax(170px, 210px) 14px minmax(170px, 210px) minmax(0, 1fr) 32px; }
.qe-act .tm-dt { width: 100%; justify-content: flex-start; }
@media (max-width: 640px) { .qe-act { grid-template-columns: 1fr 32px; } .qe-act > .tm-dt { grid-column: 1 / 2; } .qe-act > span.muted { display: none; } .qe-act .qe-notes { grid-column: 1 / -1; } }
/* Log Actual: close the task in the same window */
.la-close { display: grid; gap: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-1); }
.la-close.on { border-color: color-mix(in oklab, var(--good) 50%, var(--border)); background: color-mix(in oklab, var(--good) 6%, var(--surface-1)); }
.la-close-toggle { display: flex; gap: 8px; align-items: center; }
.la-close-body { display: grid; gap: 10px; }
.la-close textarea { width: 100%; font: inherit; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text-primary); resize: vertical; }
.la-tcs { display: grid; gap: 8px; }
.ds-chip.gap.off { opacity: .5; cursor: default; font-weight: 500; }
/* Daily actuals */
.dl-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; }
@media (max-width: 900px) { .dl-grid { grid-template-columns: minmax(0, 1fr); } }
.dl-badge { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; white-space: nowrap; color: var(--text-secondary); background: color-mix(in srgb, var(--text-muted) 14%, transparent); }
.dl-badge.v-hi { color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); }
.dl-badge.v-lo { color: var(--warning); background: color-mix(in srgb, var(--warning) 16%, transparent); }
.dl-verdict .meta { justify-content: flex-start; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.dl-table th.dl-focus, .dl-table td.dl-focus { box-shadow: inset 0 -2px 0 var(--series-1); }
/* Phases grouped by SA */
.ph-group-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 10px 2px 2px; border-bottom: 1px solid var(--grid); }
.ph-group-head:not(:first-child) { margin-top: 14px; }
.ph-group-head h3 { margin: 0; font-size: 16px; }
.ph-group-head .avatar { width: 28px; height: 28px; font-size: 11px; }
.wl-daily { display: grid; gap: 16px; }
.wl-daily:empty { display: none; }
.dl-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.dl-head h2 { margin: 0 0 2px; }
/* AI drafts: marked until edited or confirmed */
.ai-tag { display: inline-flex; align-items: center; margin-left: 6px; padding: 0 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
  color: var(--series-1); background: color-mix(in srgb, var(--series-1) 14%, transparent); vertical-align: middle; }
.sf-table tr.sf-ai td { background: color-mix(in srgb, var(--series-1) 6%, transparent); }
.sf-table tr.sf-ai td:first-child { box-shadow: inset 3px 0 0 var(--series-1); }
.sf-table td.sf-no .ai-tag { display: flex; width: max-content; margin: 4px 0 0; }
.tm-field.ai-field input, .tm-field.ai-field select, .tm-field.ai-field textarea { border-color: color-mix(in srgb, var(--series-1) 60%, var(--border, #444)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--series-1) 14%, transparent); }
.ai-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; border-left: 3px solid var(--series-1); }
.ai-bar[hidden] { display: none !important; }
.ai-btn { border-style: dashed; color: var(--series-1); }
.sf-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 600px) { .sf-actions { grid-template-columns: 1fr; } }
.lv-modal { max-width: 720px; }
.qe-existing .la-grid { margin-bottom: 4px; }
/* searchable select (Phase) */
.ss-btn { width: 100%; display: flex; align-items: center; gap: 8px; text-align: left; font: inherit; color: var(--text-primary); background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; cursor: pointer; min-height: 40px; }
.ss-btn:hover { border-color: color-mix(in srgb, var(--series-1) 45%, var(--border)); }
.ss-btn:focus-visible { outline: 2px solid var(--series-1); outline-offset: 1px; }
.ss-btn.empty .ss-val { color: var(--text-muted); }
.ss-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-caret { color: var(--text-muted); font-size: 12px; }
.ss-pop { padding: 10px; gap: 8px; max-height: 420px; grid-template-rows: auto minmax(0, 1fr); }
.ss-q { width: 100%; }
.ss-list { overflow-y: auto; display: grid; gap: 2px; align-content: start; max-height: 340px; }
.ss-group { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); padding: 8px 8px 2px; }
.ss-opt { display: grid; gap: 1px; text-align: left; font: inherit; background: none; border: 0; border-radius: 8px; padding: 7px 10px; cursor: pointer; color: var(--text-primary); }
.ss-opt.at { background: var(--surface-2); }
.ss-opt.on .ss-l { font-weight: 700; color: var(--series-1); }
.ss-s { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-none { color: var(--text-muted); font-size: 13px; padding: 10px; }
.tm-field.ai-field .ss-btn { border-color: color-mix(in srgb, var(--series-1) 60%, var(--border, #444)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--series-1) 14%, transparent); }
.tm-field { min-width: 0; }
.ss-btn { min-width: 0; max-width: 100%; overflow: hidden; }
.qe-phase { display: grid; gap: 6px; min-width: 0; }
.qe-allph { font-size: 12px; color: var(--text-secondary); gap: 6px; }
.ai-btn:disabled { opacity: .55; cursor: not-allowed; }
.tm-field { align-content: start; }
.tm-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.tm-label-row .qe-allph { font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; margin: 0; white-space: nowrap; }
.tm-label-row .qe-allph input { width: 14px; height: 14px; }
.tm-field .ss-btn { padding: 7px 10px; border-radius: 8px; min-height: 0; line-height: inherit; }
.tm-label-row .qe-allph { margin: -6px 0; line-height: 1; }
.tm-field > input, .tm-field > select, .tm-field .ss-btn, .tm-field > .tm-dt { min-height: 36px; }
textarea.grow { resize: vertical; min-height: 60px; line-height: 1.45; overflow-y: auto; }
.sf-table td { vertical-align: top; }
.sf-table td.sf-x { vertical-align: middle; }
/* entry list never grows over the editor: long names wrap to 2 lines */
.tm-list { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.tm-item { min-width: 0; overflow: hidden; }
.tm-item-n { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; line-height: 1.3; }
.qe-editor { min-width: 0; }
.qe-ai-bar .qe-note { font-style: italic; }
/* AI extras */
.sm-modal { max-width: 820px; }
.sm-body { display: grid; gap: 14px; }
.sm-headline { font-size: 16px; font-weight: 600; margin: 0; }
.sm-people { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sm-chip { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); }
.sm-sec h3 { margin: 0 0 6px; font-size: 14px; }
.sm-sec ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.ai-sum-btn { margin-top: 6px; }
.ai-draft { white-space: nowrap; }
.ai-ok { padding: 2px 8px; font-size: 11px; margin-left: 6px; }
.ai-tag-wrap { display: inline-flex; align-items: center; }
textarea.ai-text { border-color: color-mix(in srgb, var(--series-1) 60%, var(--border)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--series-1) 14%, transparent); }
.tc-comment-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.qe-notes-wrap { display: flex; gap: 6px; min-width: 0; }
.qe-notes-wrap .qe-notes { flex: 1; min-width: 0; }
.qe-note-ai { padding: 4px 8px; }
.qe-done-box { display: grid; gap: 6px; }
.tm-req { display: grid; gap: 8px; margin-top: 10px; padding: 12px; border: 1px dashed color-mix(in srgb, var(--series-1) 50%, var(--border)); border-radius: 12px; }
.tm-req-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tm-req-open { margin-top: 10px; }
.pl-head-actions { display: flex; gap: 8px; align-items: center; }
tr.ai-fail td { color: var(--warning); }
@media (max-width: 640px) { .qe-act .qe-notes-wrap { grid-column: 1 / -1; } }
.ai-balance .meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .ai-kpis2 { margin-top: -4px; }
.pl-row .pl-note { grid-column: 1 / -1; font-size: 13px; padding: 6px 10px; }
/* plan: one box — @phase tag chip + description */
.pl-workbox { display: flex; align-items: center; gap: 6px; min-width: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-1); padding: 3px 6px 3px 4px; }
.pl-workbox:focus-within { border-color: var(--series-1); box-shadow: 0 0 0 2px color-mix(in srgb, var(--series-1) 18%, transparent); }
.pl-workbox .pl-work { border: 0; background: transparent; padding: 4px 4px; min-width: 0; flex: 1; box-shadow: none; outline: none; }
.pl-tag { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 12.5px; font-weight: 600; padding: 3px 4px 3px 9px; border-radius: 999px;
  color: var(--series-1); background: color-mix(in srgb, var(--series-1) 14%, transparent); max-width: 55%; overflow: hidden; text-overflow: ellipsis; }
.pl-tag-x { border: 0; background: none; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 4px; border-radius: 999px; }
.pl-tag-x:hover { background: color-mix(in srgb, var(--series-1) 22%, transparent); }
.pl-workbox.is-leave { background: color-mix(in srgb, var(--warning) 8%, var(--surface-1)); }
.pl-mention { padding: 6px; max-height: 360px; overflow-y: auto; display: grid; gap: 2px; }
.pl-mention { grid-template-rows: none; grid-auto-rows: max-content; align-content: start; }
/* Feedback Tracker */
.fb-list { display: grid; gap: 12px; }
.fb-card { display: grid; gap: 10px; padding: 14px 16px; border-left: 3px solid transparent; }
.fb-card.late { border-left-color: var(--critical); }
.fb-card.closed { opacity: .72; }
.fb-top { display: flex; gap: 16px; justify-content: space-between; align-items: flex-start; }
.fb-main { display: grid; gap: 4px; min-width: 0; }
.fb-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fb-id { font-weight: 700; color: var(--text-secondary); }
.fb-title { font: inherit; font-size: 15.5px; font-weight: 650; text-align: left; background: none; border: 0; padding: 0; color: var(--text-primary); cursor: pointer; }
.fb-title:hover { color: var(--series-1); }
.fb-side { display: grid; justify-items: end; gap: 4px; flex-shrink: 0; text-align: right; }
.fb-prio { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--surface-2); }
.fb-prio.p-high { color: var(--critical); background: color-mix(in srgb, var(--critical) 14%, transparent); }
.fb-prio.p-med { color: var(--warning); background: color-mix(in srgb, var(--warning) 14%, transparent); }
.fb-status { font-size: 12.5px; font-weight: 600; }
.fb-desc { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; display: grid; gap: 6px; }
.fb-desc p { margin: 0; white-space: pre-wrap; }
.fb-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fb-tasks { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip-mini.ok { color: var(--good); }
.fb-link { border-left: 3px solid var(--series-1); }
@media (max-width: 640px) { .fb-top { flex-direction: column; } .fb-side { justify-items: start; text-align: left; } }
.ph-pill { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-1); }
.tc-parent.need .ss-btn, .cu-parent .ss-btn { border-color: color-mix(in srgb, var(--warning) 70%, var(--border)); }
.cu-parent { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.cu-parent .ss-btn { max-width: 460px; }
.ph-pill-btn { cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 600; color: var(--series-1); }
.ph-pill-btn:hover { background: color-mix(in srgb, var(--series-1) 12%, transparent); }
.fb-drafting { margin-top: 6px; font-weight: 600; color: var(--series-1); }
.qe-fb { border: 1px dashed var(--border); border-radius: 12px; padding: 10px 12px; display: grid; gap: 10px; margin-bottom: 4px; }
.qe-fb.on { border-style: solid; border-color: color-mix(in srgb, var(--series-1) 50%, var(--border)); background: color-mix(in srgb, var(--series-1) 4%, transparent); }
.qe-fb-toggle { gap: 8px; align-items: center; flex-wrap: wrap; }
.qe-fb-body { display: grid; gap: 10px; }
.qe-fb-oos { align-self: end; padding-bottom: 8px; }
.qe-fb-type { display: grid; gap: 6px; }
.fb-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.fb-type { display: grid; gap: 2px; text-align: left; font: inherit; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-1); color: var(--text-primary); cursor: pointer; }
.fb-type strong { font-size: 13px; }
.fb-type span { font-size: 11.5px; color: var(--text-muted); line-height: 1.3; }
.fb-type:hover { border-color: color-mix(in srgb, var(--series-1) 45%, var(--border)); }
.fb-type.on { border-color: var(--series-1); background: color-mix(in srgb, var(--series-1) 12%, transparent); box-shadow: 0 0 0 1px var(--series-1); }
.ai-fill-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--series-1) 6%, transparent); } .ai-fill { border-color: color-mix(in srgb, var(--series-1) 55%, var(--border)); color: var(--series-1); }
.pl-logged-day { color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); font-weight: 600; }
.pl-row.locked { opacity: .78; } .pl-row.locked .pl-workbox { background: var(--surface-2); } .pl-lock { font-size: 13px; text-align: center; }
.pl-workbox.needs-phase { border-color: var(--warning); box-shadow: 0 0 0 2px color-mix(in srgb, var(--warning) 18%, transparent); }
.tm-import { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.tm-import label.btn { cursor: pointer; }
.imp-tag { margin-left: 6px; color: var(--warning); font-weight: 700; }
/* development planner */
.dp-modal { max-width: 1100px; }
.dp-body { display: grid; gap: 12px; }
.dp-controls { display: grid; grid-template-columns: 260px auto minmax(0, 1fr); gap: 12px 16px; align-items: end; }
@media (max-width: 800px) { .dp-controls { grid-template-columns: 1fr; } }
.dp-table { width: 100%; border-collapse: collapse; }
.dp-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); padding: 6px 8px; }
.dp-table td { padding: 6px 8px; border-top: 1px solid var(--border); vertical-align: middle; }
.dp-table tr.dp-owner td { background: var(--surface-2); padding: 8px 10px; }
.dp-table tr.off td { opacity: .5; }
.dp-table tr.bad td { background: color-mix(in srgb, var(--critical) 6%, transparent); }
.dp-name { min-width: 240px; }
.dp-hours { width: 80px; }
.dp-dt { white-space: nowrap; padding: 6px 10px; }
.dp-dt.pinned { border-color: var(--series-1); }
.dp-move { white-space: nowrap; }
.dp-ok { color: var(--good); }
.dp-table tr.dp-week td { padding: 6px 10px; border-top: 2px solid color-mix(in srgb, var(--series-1) 45%, var(--border)); background: color-mix(in srgb, var(--series-1) 5%, transparent); font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.dp-week-n { color: var(--series-1); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 11.5px; }
.dp-controls { grid-template-columns: 240px 130px auto minmax(0, 1fr); }
@media (max-width: 900px) { .dp-controls { grid-template-columns: 1fr 1fr; } }
.dp-hpd input { width: 100%; }
.dp-week-tot { float: right; font-weight: 700; color: var(--text-primary); }
.dp-table tr.dp-day td { padding: 4px 10px 4px 22px; font-size: 12px; font-weight: 600; color: var(--text-muted); background: var(--surface-1); }
.dp-day-tot { font-weight: 700; color: var(--text-secondary); }
.dp-table tr.dp-task { cursor: grab; }
.dp-table tr.dp-task.dragging { opacity: .45; }
.dp-table tr.drop-above td { box-shadow: inset 0 2px 0 var(--series-1); }
.dp-table tr.drop-below td { box-shadow: inset 0 -2px 0 var(--series-1); }
.dp-drag-cell { white-space: nowrap; }
.dp-grip { color: var(--text-muted); margin-right: 6px; cursor: grab; user-select: none; }
.dp-table tr.dp-leave td { padding: 5px 10px 5px 22px; font-size: 12.5px; background: color-mix(in srgb, var(--warning) 10%, transparent); color: var(--text-secondary); }
.dp-table tr.dp-leave.wfh td { background: color-mix(in srgb, var(--series-1) 6%, transparent); }
.dp-table tr.dp-leave.demo td { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.dp-day-leave { font-weight: 600; color: var(--series-1); }
.dp-day-leave.off { color: var(--warning); }

/* Development plan (milestones) */
.dv-modal { max-width: 720px; }
.dv-list { display: flex; flex-direction: column; gap: 0; position: relative; }
.dv-row { display: grid; grid-template-columns: 18px minmax(140px, 1fr) 150px minmax(120px, 1.4fr) auto; gap: 10px; align-items: center; padding: 8px 0; position: relative; }
.dv-row + .dv-row::before { content: ''; position: absolute; left: 8px; top: -8px; height: 16px; border-left: 2px solid var(--border); }
.dv-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--surface-1); border: 2px solid var(--accent); justify-self: center; }
.dv-row.key .dv-dot { background: var(--accent); }
.dv-label { font-weight: 600; font-size: 13px; }
.dv-label-in, .dv-note { width: 100%; min-width: 0; }
.dv-add { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
@media (max-width: 640px) { .dv-row { grid-template-columns: 18px 1fr auto; } .dv-row > :nth-child(n+3) { grid-column: 2 / -1; } }
.dp-plan-strip { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.dp-ms { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--text-primary); margin-left: 6px; white-space: nowrap; }
.dp-plan-strip .dp-ms { margin-left: 0; }
.dp-ms.k-dev_complete, .dp-ms.k-demo { background: color-mix(in srgb, var(--good) 14%, transparent); }
.dp-late { color: var(--critical); font-size: 11.5px; font-weight: 600; }
.ph-next-ms { font-size: 12px; color: var(--text-secondary); background: color-mix(in srgb, var(--accent) 9%, transparent); border-radius: 8px; padding: 4px 8px; margin: 6px 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-dp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.ph-dp-head h3 { margin: 0 !important; }
.ph-dp-next { font-size: 13px; color: var(--text-secondary); }
.ph-dp-track { position: relative; padding-top: 22px; }
.ph-dp-line { position: absolute; top: 27px; height: 4px; border-radius: 4px; background: var(--grid); overflow: hidden; }
.ph-dp-line i { display: block; height: 100%; background: var(--accent); opacity: .55; }
.ph-dp-today { position: absolute; top: 17px; width: 2px; height: 24px; background: var(--critical); transform: translateX(-1px); z-index: 1; }
.ph-dp-today::after { content: 'Today'; position: absolute; top: -17px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 700; color: var(--critical); }
.ph-dp-cols { display: grid; gap: 8px; position: relative; }
.ph-dp-ms { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.ph-dp-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--surface-1); border: 2px solid var(--accent); box-sizing: border-box; position: relative; z-index: 2; }
.ph-dp-ms.done .ph-dp-dot { background: var(--accent); }
.ph-dp-ms.next .ph-dp-dot { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); }
.ph-dp-label { display: flex; flex-direction: column; align-items: center; text-align: center; font-size: 11.5px; line-height: 1.3; color: var(--text-secondary); margin-top: 8px; max-width: 100%; overflow-wrap: anywhere; }
.ph-dp-label strong { color: var(--text-primary); font-size: 12px; }
.ph-dp-when { color: var(--text-muted); font-size: 11px; }
.ph-dp-ms.done .ph-dp-label, .ph-dp-ms.done .ph-dp-label strong { color: var(--text-muted); }
.ph-dp-ms.next .ph-dp-label strong { color: var(--accent); }
.ph-dp-ms.next .ph-dp-when { color: var(--text-secondary); font-weight: 600; }
.ph-dp-empty { margin: 0; }
@media (max-width: 640px) {
  .ph-dp-track { padding-top: 0; }
  .ph-dp-line, .ph-dp-today { display: none; }
  .ph-dp-cols { grid-template-columns: 1fr !important; }
  .ph-dp-ms { flex-direction: row; gap: 10px; align-items: flex-start; }
  .ph-dp-label { align-items: flex-start; text-align: left; margin-top: 0; }
}
/* Plan page: development plans */
.pl-dp-card { margin-bottom: 16px; }
.pl-dp-list { display: flex; flex-direction: column; }
.pl-dp-row { display: grid; grid-template-columns: minmax(140px, 200px) 1fr minmax(110px, 150px); gap: 14px; align-items: center; padding: 10px 0; }
.pl-dp-row + .pl-dp-row { border-top: 1px solid var(--border); }
.pl-dp-phase { all: unset; cursor: pointer; display: flex; flex-direction: column; min-width: 0; }
.pl-dp-phase span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-dp-phase:hover strong, .pl-dp-phase:focus-visible strong { color: var(--accent); text-decoration: underline; }
.pl-dp-phase:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.pl-dp-track { display: flex; gap: 0; overflow-x: auto; padding-bottom: 2px; }
.pl-dp-ms { position: relative; flex: 1 1 0; min-width: 68px; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 18px; font-size: 11px; color: var(--text-secondary); }
.pl-dp-ms::before { content: ''; position: absolute; top: 6px; left: 0; right: 0; height: 2px; background: var(--grid); }
.pl-dp-ms:first-child::before { left: 50%; } .pl-dp-ms:last-child::before { right: 50%; }
.pl-dp-ms.done::before { background: color-mix(in srgb, var(--accent) 55%, transparent); }
.pl-dp-ms i { position: absolute; top: 1px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface-1); border: 2px solid var(--accent); box-sizing: border-box; }
.pl-dp-ms.done i { background: var(--accent); }
.pl-dp-ms.next i { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); }
.pl-dp-l { font-weight: 600; color: var(--text-primary); line-height: 1.25; }
.pl-dp-ms.done .pl-dp-l, .pl-dp-ms.done .pl-dp-d { color: var(--text-muted); }
.pl-dp-ms.wk .pl-dp-l { color: var(--accent); }
.pl-dp-ms.wk .pl-dp-d { font-weight: 600; }
.pl-dp-next { text-align: right; }
.pl-day-head .dp-ms { font-size: 11px; }
@media (max-width: 760px) { .pl-dp-row { grid-template-columns: 1fr; gap: 8px; } .pl-dp-next { text-align: left; } }
/* Plan page: tasks scheduled by Update estimates */
.pl-sched { margin: 8px 0 4px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 7%, transparent); border: 1px dashed color-mix(in srgb, var(--accent) 35%, transparent); }
.pl-sched-head { display: flex; justify-content: space-between; align-items: center; font-weight: 600; color: var(--text-secondary); margin-bottom: 4px; }
.pl-sched-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 3px 0; }
.pl-sched-task { all: unset; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.pl-sched-task:hover, .pl-sched-task:focus-visible { color: var(--accent); text-decoration: underline; }
.pl-sched-task:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.pl-sched-ok { color: var(--good); font-weight: 600; white-space: nowrap; }
@media (max-width: 640px) { .pl-sched-row { grid-template-columns: 1fr auto; } .pl-sched-row > .muted { grid-column: 1 / -1; grid-row: 2; } }
.pl-sched { margin: 0 0 4px; }
.pl-sched.done { padding: 6px 10px; color: var(--text-secondary); border-style: solid; background: transparent; }
.pl-member { all: unset; cursor: pointer; display: block; }
.pl-member:hover .member-name, .pl-member:focus-visible .member-name { color: var(--accent); text-decoration: underline; }
.pl-member:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
#pl-title .pl-back { vertical-align: middle; margin-right: 6px; font-size: 13px; }
/* Feedback Tracker: grouped by project */
.fb-groups { display: grid; gap: 18px; }
.fb-group-head { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 4px; margin-bottom: 8px; border-bottom: 1px solid var(--border); }
.fb-group-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.fb-group-head:hover .fb-group-title strong { color: var(--accent); }
.fb-group.shut .fb-group-head { margin-bottom: 0; }
.fb-caret { width: 14px; color: var(--text-muted); }
.fb-group-title { flex: 1; min-width: 0; font-size: 14px; }
.fb-group-stats { display: flex; gap: 8px; align-items: center; color: var(--text-secondary); }
.fb-late { color: var(--critical); font-weight: 600; }
/* Feedback Tracker: change status with a comment */
.fb-status-form { display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; gap: 10px 12px; align-items: end; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }
.fb-status-form textarea { width: 100%; min-height: 38px; resize: vertical; box-sizing: border-box; }
.fb-status-actions { display: flex; gap: 8px; }
.fb-status-err { grid-column: 1 / -1; }
@media (max-width: 720px) { .fb-status-form { grid-template-columns: 1fr; } }
/* Insights → AI usage: failure logs */
.in-cov tr.ai-log > td { padding: 0 12px 12px; background: color-mix(in srgb, var(--critical) 6%, transparent); }
.ai-log-box { display: grid; gap: 8px; padding-top: 10px; }
.ai-log-err { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; word-break: break-word; color: var(--text-primary); }
.ai-log-fix { margin: 0; color: var(--text-secondary); }
.ai-log-modal { max-width: 720px; }
/* desktop header: always one row — the nav scrolls and the actions compact as the window narrows */
@media (min-width: 1025px) {
  .shell { flex-wrap: nowrap; gap: 16px; }
  .shell .brand { flex: none; }
  .tabs { min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { white-space: nowrap; }
  .shell-actions { flex: none; flex-wrap: nowrap; margin-left: auto; }
  .sync-status { white-space: nowrap; }
}
@media (min-width: 1025px) and (max-width: 1760px) {
  .shell { gap: 12px; padding-left: 18px; padding-right: 18px; }
  .tab { padding: 6px 10px; }
  .shell-actions { gap: 6px; }
  .shell-actions .btn .lbl { display: none; }             /* Sync now / Sign out → icons (names in tooltips) */
  #btn-sync .ic, #btn-signout .ic { display: inline-grid; place-items: center; line-height: 0; }
  .shell-actions > .btn:has(.ic) { width: 34px; min-width: 34px; padding: 0; display: inline-grid; place-items: center; }
  .shell-actions .viewer, .shell-actions .role-badge { display: none !important; } /* shown in the Sign out tooltip */
}
@media (min-width: 1025px) and (max-width: 1500px) {
  .shell .brand-name { display: none; }
  .sync-status .ss-pre { display: none; }                  /* "16:34 IST" — full text in the tooltip */
}
.in-period { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.in-period input[type="date"] { min-width: 140px; }
/* Issues (SAs) */
.nav-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 999px; background: var(--critical); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; vertical-align: middle; }
.is-list { display: grid; gap: 12px; }
.is-card { padding: 14px 16px; border-left: 3px solid var(--warning); }
.is-card.k-server_error, .is-card.k-access_denied { border-left-color: var(--critical); }
.is-card.k-creator_connection { border-left-color: var(--accent); }
.is-card.resolved { border-left-color: var(--good); opacity: .85; }
.is-top { display: flex; gap: 16px; justify-content: space-between; align-items: flex-start; }
.is-main { min-width: 0; flex: 1; }
.is-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.is-msg { margin: 6px 0 0; overflow-wrap: anywhere; }
.is-side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; white-space: nowrap; }
.is-res { margin: 8px 0 0; color: var(--good); }
.is-foot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.is-note { width: min(320px, 100%); }
.is-details { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }
.is-help { margin: 0 0 10px; color: var(--text-secondary); }
.is-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: 12.5px; }
.is-dl dt { color: var(--text-muted); }
.is-dl dd { margin: 0; min-width: 0; }
.is-dl pre { margin: 0; white-space: pre-wrap; word-break: break-word; font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; }
@media (max-width: 640px) { .is-top { flex-direction: column; gap: 6px; } .is-side { align-items: flex-start; flex-direction: row; gap: 8px; } .is-dl { grid-template-columns: 1fr; } }
.is-sync { margin-bottom: 14px; }
.is-sync-msg { margin: 8px 0; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; word-break: break-word; }
.is-sync p { margin: 0; }
.is-calls { margin-top: 14px; display: grid; gap: 10px; }
.is-calls h4 { margin: 0; font-size: 13px; }
.is-call { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; display: grid; gap: 6px; background: var(--surface-2); }
.is-call.bad { border-color: color-mix(in srgb, var(--critical) 45%, var(--border)); }
.is-call-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.is-call-n { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--surface-1); font-size: 11px; font-weight: 700; }
.is-call-url { font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; flex: 1 1 320px; min-width: 0; }
.is-call pre { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--surface-1); max-height: 260px; overflow: auto; white-space: pre-wrap; word-break: break-word; font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; }
.is-call details summary { cursor: pointer; color: var(--text-secondary); }
.is-nocalls { margin: 12px 0 0; }
/* Edit task (owner / admin) */
.te-modal { max-width: 640px; }
.te-body { display: grid; gap: 12px; }
.te-body textarea { width: 100%; box-sizing: border-box; resize: vertical; }
.te-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .te-row { grid-template-columns: 1fr; } }
/* Clean-up: admin team view */
.cu-summary { padding: 12px 16px; margin-bottom: 12px; }
.cu-summary > summary { cursor: pointer; }
.cu-summary .table-wrap { margin-top: 10px; }
.cu-team-row { cursor: pointer; }
.cu-team-row:hover td, .cu-team-row:focus-visible td { background: var(--surface-2); }
.cu-team-row.sel td { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.cu-team-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cu-owner-tag { font-weight: 600; }
/* header: Hide SAs (team views) */
.hdr-hide-sa { white-space: nowrap; }
.hdr-hide-sa.on { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--text-primary); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
@media (max-width: 640px) { .hdr-hide-sa { font-size: 12px; padding: 4px 8px; } }
/* nav: "More ▾" (Issues, DS Analyser, Availability) */
.nav-more { position: relative; flex: none; }
.nav-more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.nav-more > summary::-webkit-details-marker { display: none; }
.nav-more-menu { position: fixed; z-index: 70; width: 220px; padding: 6px; border-radius: 12px; background: var(--surface-1); border: 1px solid var(--border); box-shadow: 0 10px 30px rgb(0 0 0 / .18); display: grid; gap: 2px; }
.nav-more-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--text-primary); text-decoration: none; font-weight: 500; }
.nav-more-item:hover, .nav-more-item:focus-visible { background: var(--surface-2); outline: none; }
.nav-more-item.active { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.nav-more-item .tab-ic { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.nav-more-item .nav-badge { margin-left: auto; }
@media (max-width: 640px) { .nav-more > summary.tab { display: grid; justify-items: center; } .nav-more { display: grid; } }
.hdr-hide-sa .lbl-short { display: none; }
@media (max-width: 1100px) { .hdr-hide-sa .lbl-long { display: none; } .hdr-hide-sa .lbl-short { display: inline; } .hdr-hide-sa { padding: 4px 8px; } }
@media (max-width: 420px) { .hdr-scope button { padding: 4px 7px; } .shell-actions { gap: 3px; } .hdr-hide-sa { padding: 4px 6px; } }

/* ===== Tools ===== */
.tl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.tl-card { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 18px; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
a.tl-card:hover, a.tl-card:focus-visible { border-color: var(--accent); transform: translateY(-1px); outline: none; }
.tl-card h2 { margin: 0 0 4px; font-size: 16px; }
.tl-card p { margin: 0; }
.tl-card-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.tl-ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tl-card-go { color: var(--text-muted); font-size: 18px; }
.tl-soon { border-style: dashed; opacity: .8; grid-template-columns: 44px minmax(0, 1fr); }
.tl-soon .tl-card-ic { background: var(--surface-2); color: var(--text-muted); }
.tl-crumb { color: var(--text-secondary); text-decoration: none; display: inline-block; margin-bottom: 4px; }
.tl-crumb:hover { color: var(--accent); }
/* ===== DS Analyser ===== */
.ds-drop { display: flex; gap: 16px; align-items: center; padding: 26px; border: 2px dashed var(--border); cursor: pointer; transition: border-color .15s, background .15s; }
.ds-drop:hover, .ds-drop:focus-visible, .ds-drop.over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--surface-1)); outline: none; }
.ds-drop.compact { padding: 14px 18px; margin-top: 16px; }
.ds-drop.busy { cursor: progress; border-style: solid; border-color: var(--accent); }
.ds-drop-ic { width: 34px; height: 34px; flex: none; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ds-drop.compact .ds-drop-ic { width: 24px; height: 24px; }
.ds-intro { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 16px; }
.ds-intro-card { padding: 14px 16px; }
.ds-intro-card p { margin: 6px 0 0; }
.ds-apphead { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 16px 18px; margin-bottom: 14px; }
.ds-apphead h2 { margin: 0 0 4px; font-size: 20px; }
.ds-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ds-kpis { margin-bottom: 14px; }
.dsa-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.ds-tabs { flex-wrap: wrap; }
.ds-search { flex: 1 1 220px; max-width: 340px; margin-left: auto; }
.ds-panel { min-height: 120px; }
.ds-list { display: grid; gap: 10px; }
.ds-item { padding: 0; overflow: hidden; }
.ds-item-head { all: unset; box-sizing: border-box; width: 100%; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 12px 16px; cursor: pointer; }
.ds-item-head:hover { background: var(--surface-2); }
.ds-item-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ds-caret { width: 14px; color: var(--text-muted); }
.ds-item-body { padding: 4px 16px 16px; display: grid; gap: 10px; border-top: 1px solid var(--border); }
.ds-item-body .ds-table { box-shadow: none; }
.ds-table table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ds-table th { text-align: left; font-size: 12px; color: var(--text-muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.ds-table td { padding: 8px 10px; border-bottom: 1px solid var(--grid); vertical-align: top; }
.ds-table tr:last-child td { border-bottom: 0; }
.ds-table code, .ds-item-head code { font-size: 12px; }
.ds-unres td { color: var(--warning); }
.ds-code { margin: 0; max-height: 420px; overflow: auto; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; tab-size: 4; }
.ds-snippet { max-height: 160px; }
.ds-meta { margin: 6px 0 0; }
.ds-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ds-flag { font-size: 11px; }
.ds-flag.warn { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 45%, var(--border)); }
.ds-flag.info { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.tag.info { color: var(--accent); }
.ds-overview { display: grid; gap: 14px; }
.ds-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.ds-card { padding: 16px 18px; }
.ds-card h3 { margin: 0 0 10px; font-size: 14px; }
.ds-card h4 { margin: 12px 0 4px; font-size: 13px; color: var(--text-secondary); }
.ds-card ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.ds-summary .ds-headline { font-size: 15px; font-weight: 600; margin: 0 0 6px; }
.ds-bars { display: grid; gap: 6px; }
.ds-barrow { display: grid; grid-template-columns: minmax(80px, 140px) minmax(0, 1fr) 36px; gap: 10px; align-items: center; font-size: 12.5px; }
.ds-bar-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }
.ds-bar-t { height: 8px; border-radius: 4px; background: var(--grid); overflow: hidden; }
.ds-bar-t i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.ds-bar-v { text-align: right; font-variant-numeric: tabular-nums; }
.ds-top { list-style: none; padding: 0 !important; }
.sev { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); color: var(--text-secondary); }
.sev.s-critical { background: color-mix(in srgb, var(--critical) 15%, transparent); color: var(--critical); }
.sev.s-warning { background: color-mix(in srgb, var(--warning) 15%, transparent); color: var(--warning); }
.sev.s-info { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.ds-sev { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.ds-sev-btn { all: unset; cursor: pointer; display: grid; gap: 2px; min-width: 92px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-1); }
.ds-sev-btn strong { font-size: 20px; }
.ds-sev-btn span { font-size: 12px; color: var(--text-muted); }
.ds-sev-btn[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.ds-sev-btn.s-critical strong { color: var(--critical); } .ds-sev-btn.s-warning strong { color: var(--warning); } .ds-sev-btn.s-info strong { color: var(--accent); }
.ds-sev-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ds-finding { padding: 14px 16px; display: grid; gap: 6px; }
.ds-finding-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.ds-fix { margin: 0; color: var(--text-secondary); }
.ds-graph-controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.ds-graph { padding: 16px; margin-bottom: 14px; overflow: auto; min-height: 120px; }
.ds-wf-mini h4 { margin: 4px 0 6px; font-size: 13px; }
.ds-wf-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 4px 0; }
.linkish { all: unset; cursor: pointer; color: var(--accent); font-weight: 600; }
.linkish:hover, .linkish:focus-visible { text-decoration: underline; }
.ds-foot { margin-top: 12px; }
@media (max-width: 640px) { .ds-drop { padding: 18px; } .ds-search { max-width: none; margin-left: 0; } .ds-barrow { grid-template-columns: 90px minmax(0, 1fr) 30px; } }
@media print { .shell, .ds-drop, .dsa-bar, .ds-actions, .ds-foot, .tl-crumb { display: none !important; } .ds-item-body { display: grid !important; } }
/* DS Analyser: modules, AI reviews, numbered code */
.ds-code.numbered { white-space: pre; padding-left: 0; }
.ds-code.numbered .ln { display: block; padding-right: 12px; }
.ds-code.numbered .ln i { display: inline-block; width: 44px; padding-right: 12px; margin-right: 10px; text-align: right; color: var(--text-muted); font-style: normal; border-right: 1px solid var(--border); user-select: none; }
.ds-code.numbered .ln.hl { background: color-mix(in srgb, var(--warning) 16%, transparent); }
.ds-modgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 8px 24px; }
.ds-modgrid h4, .ds-item-body h4 { margin: 10px 0 6px; font-size: 12.5px; color: var(--text-secondary); text-transform: none; }
.ds-ev { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; align-items: start; padding: 4px 0; }
.ds-ev > .tag { justify-self: start; }
.ds-modlist { display: grid; gap: 2px; margin: 4px 0 10px; }
.ds-modrow { all: unset; cursor: pointer; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 7px 8px; border-radius: 8px; }
.ds-modrow:hover, .ds-modrow:focus-visible { background: var(--surface-2); }
.ds-review { border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); background: color-mix(in srgb, var(--accent) 4%, var(--surface-1)); border-radius: 12px; padding: 12px 14px; display: grid; gap: 8px; }
.ds-review p { margin: 0; }
.ds-review h4 { margin: 6px 0 2px; }
.ds-review ol, .ds-review ul { margin: 0; padding-left: 20px; display: grid; gap: 3px; }
.ds-review-head { display: flex; gap: 8px; align-items: center; }
.ds-review-list { display: grid; gap: 8px; }
.ds-review-item { border-left: 3px solid var(--border); padding: 6px 10px; display: grid; gap: 4px; background: var(--surface-1); border-radius: 0 8px 8px 0; }
.ds-review-item.s-critical { border-left-color: var(--critical); } .ds-review-item.s-warning { border-left-color: var(--warning); }
.ds-review-item p { margin: 0; }
.ds-explain { display: grid; gap: 10px; justify-items: start; }
.ds-explain .ds-review { width: 100%; box-sizing: border-box; }
.ds-kinds { margin-bottom: 10px; flex-wrap: wrap; }
.ds-more { justify-self: center; margin-top: 4px; }
.ds-hot { display: inline-flex; gap: 6px; align-items: center; }
/* DS Analyser: code improvements */
.ds-rule { padding: 0; overflow: hidden; border-left: 3px solid var(--border); }
.ds-rule.s-critical { border-left-color: var(--critical); } .ds-rule.s-warning { border-left-color: var(--warning); }
.ds-rule.demoted { opacity: .7; }
.ds-rule-head { display: flex; align-items: center; gap: 8px; padding-right: 12px; }
.ds-rule-toggle { flex: 1; }
.ds-vote { display: flex; gap: 4px; }
.ds-vote .btn.on { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.ds-rule-why { padding: 0 16px 12px 38px; display: grid; gap: 4px; }
.ds-rule-why p { margin: 0; color: var(--text-secondary); }
.ds-rule-list { border-top: 1px solid var(--border); padding: 10px 16px 14px 38px; display: grid; gap: 10px; }
.ds-rule-row { display: grid; gap: 4px; }
.ds-cr-mini h4 { margin: 4px 0 6px; }
.ds-modal { max-width: min(1100px, 96vw); width: 100%; }
.ds-modal-body { display: grid; gap: 12px; }
.ds-modal-body .ds-code { max-height: 58vh; }
.ds-code.numbered .ln.focus { background: color-mix(in srgb, var(--critical) 18%, transparent); outline: 1px solid color-mix(in srgb, var(--critical) 50%, transparent); }
.ds-code.numbered { position: relative; }

/* ---------- Tools → Task List Generator ---------- */
#tl-task-list { display: grid; gap: 14px; }
.tg-step { padding: 16px 18px; display: grid; gap: 10px; min-width: 0; }
.tg-h { display: flex; align-items: center; gap: 10px; font-size: 15px; margin: 0; }
.tg-n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); color: var(--text-secondary); font-size: 12px; font-weight: 600; flex: none; }
.tg-sec-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tg-field { display: grid; gap: 4px; max-width: 520px; }
.tg-field select, .tg-field input { width: 100%; }
.tg-ms { display: flex; flex-wrap: wrap; gap: 8px; }
.tg-m { display: grid; gap: 2px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-1); }
.tg-m.key { border-color: var(--accent); }
.tg-warn { padding: 10px 12px; border-radius: 10px; background: var(--surface-2); display: grid; gap: 8px; justify-items: start; }
.tg-err { margin: 0; }
.tg-review { display: grid; gap: 14px; }
.tg-row { display: grid; grid-template-columns: minmax(140px, 220px) minmax(0, 1fr) 124px 32px; gap: 8px; align-items: start; }
.tg-row > .tag { justify-self: start; margin-top: 8px; }
.tg-wi .tg-chips { grid-column: 1 / -1; }
.tg-step > .btn, .tg-group > .btn { justify-self: start; }
.tg-row textarea, .tg-task textarea { width: 100%; resize: vertical; min-height: 38px; }
.tg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tg-chip { font: inherit; font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-1); color: var(--text-secondary); cursor: pointer; }
.tg-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.tg-rev { font-size: 13px; font-weight: 600; }
.tg-group { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; display: grid; gap: 8px; }
.tg-group > summary { cursor: pointer; padding: 2px 0; }
.tg-group[open] { padding-bottom: 12px; }
.tg-task { display: grid; gap: 6px; padding: 10px 0 0; border-top: 1px solid var(--border); }
.tg-task.ok { opacity: 0.65; }
.tg-task-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(110px, 170px) minmax(110px, 150px) minmax(100px, 130px) 74px auto; gap: 8px; align-items: center; }
.tg-task-top input.tg-name { min-width: 0; }
.tg-hrs { display: inline-flex; align-items: center; gap: 4px; }
.tg-hrs input { width: 58px; }
.tg-send { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.tg-send .tg-field { min-width: 160px; }
.tg-send p { flex: 1 1 280px; margin: 0; }
.tg-assume ul { margin: 0; padding-left: 18px; }
.tg-done { padding: 14px 18px; border-color: var(--accent); }
@media (max-width: 760px) {
  .tg-row { grid-template-columns: minmax(0, 1fr) auto 32px; }
  .tg-row textarea { grid-column: 1 / -1; grid-row: 2; }
  .tg-task-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tg-task-top input.tg-name { grid-column: 1 / -1; }
}
.tg-step .ds-drop.compact { margin-top: 0; }
.tg-gen-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.tg-log { margin-top: 4px; max-height: 260px; overflow: auto; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; display: grid; gap: 3px; }
.tg-log-l { display: grid; grid-template-columns: 14px 64px minmax(0, 1fr); gap: 8px; color: var(--text-primary); overflow-wrap: anywhere; }
.tg-log-l.run .tg-log-ic { color: var(--accent); animation: tg-pulse 1s ease-in-out infinite; }
.tg-log-l.ok .tg-log-ic { color: var(--good); }
.tg-log-l.err .tg-log-ic, .tg-log-l.err .tg-log-d { color: var(--critical); }
.tg-log-t, .tg-log-d { color: var(--text-secondary); }
@keyframes tg-pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .tg-log-l.run .tg-log-ic { animation: none; } }
.pl-onleave { margin-left: 6px; color: var(--warning); }
.pl-row.pl-blocked .pl-work, .pl-row.pl-blocked .pl-hours input { text-decoration: line-through; opacity: .6; }
/* Tools: room between the page heading and the cards / tool body */
#tl-body > .page-head { margin-bottom: 24px; }
#tl-body .page-head .summary { margin-top: 6px; }
/* which AI engine an AI control runs on */
.ai-eng { display: inline-flex; align-items: center; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 18px; white-space: nowrap; vertical-align: middle; border: 1px solid var(--border); color: var(--text-secondary); background: var(--surface-1); }
.ai-eng.pai { color: #8a5a00; border-color: color-mix(in srgb, var(--warning) 45%, var(--border)); background: color-mix(in srgb, var(--warning) 10%, var(--surface-1)); }
.ai-eng.gen { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); background: color-mix(in srgb, var(--accent) 8%, var(--surface-1)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ai-eng.pai { color: #e8b25c; } }
:root[data-theme="dark"] .ai-eng.pai { color: #e8b25c; }
.tg-plans { display: grid; gap: 6px; margin-top: 6px; }
.tg-plan { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; }
.tg-plan.on { border-color: var(--accent); }
.tg-plan .small.muted { flex: 1 1 260px; }
.tg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* ---------- Tools → Deluge Code Checker ---------- */
#tl-code-check { display: grid; gap: 14px; }
.cc-meta { display: flex; flex-wrap: wrap; gap: 12px; }
.cc-meta .tg-field { flex: 1 1 220px; max-width: none; }
.cc-code { width: 100%; min-height: 260px; resize: vertical; font: 12.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; tab-size: 4; white-space: pre; overflow: auto; }
.cc-kpis { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cc-ai-sum { padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
.cc-ai-sum p { margin: 4px 0 0; }
.cc-list { display: grid; gap: 8px; }
.cc-item { border: 1px solid var(--border); border-left-width: 3px; border-radius: 10px; padding: 10px 12px; display: grid; gap: 4px; min-width: 0; }
.cc-item.s-critical { border-left-color: var(--critical); }
.cc-item.s-warning { border-left-color: var(--warning); }
.cc-item.s-info { border-left-color: var(--accent); }
.cc-item p { margin: 0; }
.cc-item-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cc-item-h strong { flex: 1 1 200px; min-width: 0; }
.cc-line { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.cc-vote { display: inline-flex; gap: 2px; }
.cc-vote .btn.on { background: var(--surface-2); outline: 1px solid var(--border); }
.cc-fix { margin: 2px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.cc-src { margin-top: 8px; max-height: 480px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-1); font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; position: relative; }
.cc-ln { display: grid; grid-template-columns: 48px minmax(0, 1fr); border-left: 3px solid transparent; }
.cc-ln code { white-space: pre; padding-right: 12px; }
.cc-no { color: var(--text-muted); text-align: right; padding-right: 10px; user-select: none; }
.cc-ln.m-critical { border-left-color: var(--critical); background: color-mix(in srgb, var(--critical) 7%, transparent); }
.cc-ln.m-warning { border-left-color: var(--warning); background: color-mix(in srgb, var(--warning) 7%, transparent); }
.cc-ln.m-info { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.cc-ln.focus { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Task List Generator: change with a prompt + rules */
.tg-change textarea { width: 100%; resize: vertical; }
.tg-chg-list ul { margin: 4px 0 0; padding-left: 18px; }
.tg-chg-list li.kadd { color: var(--good); } .tg-chg-list li.kdel { color: var(--critical); }
.tg-learned, .tg-rules { display: grid; gap: 6px; }
.tg-rules > summary { cursor: pointer; }
.tg-rules[open] { gap: 8px; }
.tg-rule { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tg-rule > .small:not(.muted) { flex: 1 1 260px; }
.tg-rule-add { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.tg-rule-add input { flex: 1 1 260px; }
.tg-task.chg-added { box-shadow: inset 3px 0 0 var(--good); padding-left: 10px; }
.tg-task.chg-changed { box-shadow: inset 3px 0 0 var(--accent); padding-left: 10px; }
.tag.bad { color: var(--critical); }
.tg-row.chg-added { box-shadow: inset 3px 0 0 var(--good); padding-left: 8px; }
.tg-row.chg-changed { box-shadow: inset 3px 0 0 var(--accent); padding-left: 8px; }
.tg-rule-add select { width: auto; flex: 0 0 auto; }

/* ---------- Tools → Snippet Library ---------- */
#tl-snippets { display: grid; gap: 14px; }
.sn-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sn-q { flex: 1 1 280px; }
.sn-bar select { width: auto; }
.sn-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.sn-list { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); align-items: stretch; }
.sn-card { padding: 14px 16px; display: grid; gap: 8px; min-width: 0; }
.sn-head { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.sn-head h3 { margin: 0; font-size: 15px; }
.sn-head p { margin: 4px 0 0; }
.sn-acts { display: flex; gap: 4px; flex-wrap: wrap; }
.sn-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.sn-tag { color: var(--accent); }
.sn-ok { color: var(--good); } .sn-bad { color: var(--critical); }
.sn-code { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; overflow: auto; max-height: 520px; }
.sn-code.clipped { -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.sn-more { justify-self: start; }
.sn-fill { padding: 10px 12px; border: 1px dashed var(--border); border-radius: 10px; display: grid; gap: 8px; }
.sn-fill-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.sn-form-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.sn-form .tg-field { max-width: none; }
.sn-wide textarea { width: 100%; }
.sn-empty { justify-items: start; }
/* Snippet Library = Developer Arsenal */
.sn-sync { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sn-sync > span:first-child { flex: 1 1 260px; }
.sn-open { all: unset; cursor: pointer; font-weight: 600; }
.sn-open:hover, .sn-open:focus-visible { color: var(--accent); text-decoration: underline; }
.sn-modal { width: min(980px, calc(100vw - 32px)); max-height: calc(100vh - 48px); display: flex; flex-direction: column; }
.sn-modal .tm-body { overflow: auto; }
.sn-title { margin: 0 0 6px; font-size: 18px; }
.sn-detail { display: grid; gap: 14px; }
.sn-rich { line-height: 1.55; overflow-wrap: anywhere; overflow-x: auto; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; }
.sn-rich table { border-collapse: collapse; } .sn-rich td, .sn-rich th { border: 1px solid var(--border); padding: 4px 8px; }
.sn-rich a { color: var(--accent); }
.sn-imgs { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-top: 6px; }
.sn-img { display: grid; gap: 4px; text-decoration: none; color: inherit; }
.sn-img img { width: 100%; height: 150px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); }
.sn-files { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.sn-files a { color: var(--accent); }
.sn-links { display: grid; gap: 6px; }
.sn-link-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; gap: 6px; }
/* Add work item (like Creator's Work Items form) */
.wi-ov { z-index: 80; }
.wi-modal { width: min(560px, 100%); }
.wi-body { display: grid; gap: 12px; padding: 16px 20px; overflow: auto; }
.wi-row { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 10px; align-items: start; }
.wi-row input, .wi-row textarea { width: 100%; }
.wi-row input[disabled] { opacity: .75; }
.wi-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--border); }
@media (max-width: 560px) { .wi-row { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- Welcome guide: launcher, drawer, spotlight tour, welcome ---------- */
.gd-launch { position: fixed; right: 18px; bottom: 18px; z-index: 55; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-1); color: var(--text-primary); display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 20px rgb(0 0 0 / .18); }
.gd-launch:hover, .gd-launch:focus-visible { border-color: var(--accent); outline: none; }
.gd-launch > * { grid-area: 1 / 1; }
.gd-q { font-weight: 700; font-size: 16px; }
.gd-ring { overflow: visible; }
.gd-ring-bg { fill: none; stroke: var(--surface-2); stroke-width: 3.5; }
.gd-ring-fg { fill: none; stroke: var(--accent); stroke-width: 3.5; stroke-linecap: round; transition: stroke-dashoffset .5s ease; }
.gd-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 70; width: min(400px, 100vw); background: var(--surface-1); border-left: 1px solid var(--border); box-shadow: -12px 0 40px rgb(0 0 0 / .2); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .2s ease; }
.gd-drawer.in { transform: none; }
.gd-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 20px 10px; }
.gd-head h2 { margin: 0; font-size: 20px; }
.gd-head p { margin: 2px 0 0; }
.gd-x { all: unset; cursor: pointer; font-size: 22px; line-height: 1; padding: 2px 6px; border-radius: 6px; color: var(--text-secondary); }
.gd-x:hover, .gd-x:focus-visible { background: var(--surface-2); color: var(--text-primary); }
.gd-tabs { margin: 0 20px 6px; align-self: flex-start; }
.gd-body { overflow: auto; padding: 10px 20px 24px; display: grid; gap: 14px; align-content: start; }
.gd-prog { display: flex; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); }
.gd-prog p { margin: 2px 0 0; }
.gd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gd-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; }
.gd-list li p { margin: 2px 0 0; }
.gd-list li.ok { background: color-mix(in srgb, var(--good) 7%, transparent); border-color: color-mix(in srgb, var(--good) 35%, var(--border)); }
.gd-list li.ok strong { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--good) 70%, transparent); }
.gd-check { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border); display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff; margin-top: 1px; }
.gd-list li.ok .gd-check { background: var(--good); border-color: var(--good); }
.gd-tour-card { all: unset; cursor: pointer; display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; }
.gd-tour-card:hover, .gd-tour-card:focus-visible { border-color: var(--accent); }
.gd-words { margin: 0; display: grid; gap: 4px 0; }
.gd-words dt { font-weight: 600; margin-top: 8px; }
.gd-words dd { margin: 0; color: var(--text-secondary); }
.gd-tour { position: fixed; inset: 0; z-index: 90; }
.gd-spot { position: fixed; border-radius: 12px; box-shadow: 0 0 0 9999px rgb(0 0 0 / .55), 0 0 0 2px var(--accent); transition: all .25s ease; pointer-events: none; }
.gd-card { position: fixed; z-index: 1; width: 340px; padding: 14px 16px; border-radius: 14px; background: var(--surface-1); border: 1px solid var(--border); box-shadow: 0 16px 40px rgb(0 0 0 / .3); outline: none; transition: top .25s ease, left .25s ease; }
.gd-card h3 { margin: 4px 0 6px; font-size: 16px; }
.gd-card p { margin: 0 0 8px; line-height: 1.5; }
.gd-card-top { display: flex; justify-content: space-between; align-items: center; }
.gd-step { color: var(--accent); font-weight: 600; }
.gd-dots { display: flex; gap: 5px; margin: 6px 0 10px; }
.gd-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--surface-2); }
.gd-dots i.on { background: var(--accent); width: 16px; border-radius: 3px; }
.gd-card-btns { display: flex; justify-content: space-between; gap: 8px; }
.gd-w-modal { width: min(620px, 100%); }
.gd-w-body { padding: 24px 26px 8px; overflow: auto; }
.gd-w-kicker { color: var(--accent); font-weight: 600; margin: 0; }
.gd-w-body h2 { margin: 4px 0 8px; font-size: 24px; }
.gd-w-intro { margin: 0 0 14px; color: var(--text-secondary); line-height: 1.5; }
.gd-flow { width: 100%; height: auto; margin: 4px 0 12px; }
.gd-flow .n rect { fill: var(--surface-2); stroke: var(--border); }
.gd-flow .n.hl rect { fill: color-mix(in srgb, var(--accent) 14%, var(--surface-1)); stroke: var(--accent); }
.gd-flow text { fill: var(--text-primary); font-size: 14px; font-weight: 600; text-anchor: middle; }
.gd-flow text.s { fill: var(--text-secondary); font-size: 11px; font-weight: 400; }
.gd-flow .a { stroke: var(--accent); stroke-width: 2; fill: none; }
.gd-flow .a.b { stroke-dasharray: 4 3; }
.gd-flow marker path { fill: var(--accent); }
.gd-w-points { margin: 0; padding-left: 18px; display: grid; gap: 6px; line-height: 1.5; }
.gd-w-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border); }
@media (max-width: 600px) { .gd-launch { right: 12px; bottom: 12px; width: 44px; height: 44px; } .gd-w-foot .btn { flex: 1 1 100%; } }
@media (prefers-reduced-motion: reduce) { .gd-spot, .gd-card, .gd-drawer, .gd-ring-fg { transition: none; } }
@media print { .gd-launch { display: none; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* welcome: more room */
.gd-w-body { padding: 30px 32px 16px; }
.gd-w-body h2 { margin: 6px 0 12px; }
.gd-w-intro { margin: 0 0 22px; }
.gd-flow { margin: 6px 0 24px; max-width: 600px; display: block; margin-inline: auto; }
.gd-flow text.s { font-size: 12px; }
.gd-w-points { gap: 10px; padding-left: 20px; margin-bottom: 8px; }
.gd-w-foot { padding: 16px 24px; }
.gd-reset { justify-self: start; margin-top: 4px; }
@media (max-width: 600px) { .gd-w-body { padding: 22px 18px 10px; } }
.ss-opt.off { opacity: .5; cursor: not-allowed; }
/* guide: "This page" + first-visit hint */
.gd-page { display: grid; gap: 8px; }
.gd-page-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.gd-page-h h3 { margin: 0; font-size: 17px; }
.gd-page-what { margin: 0 0 4px; line-height: 1.55; }
.gd-page-list { margin: 0 0 6px; padding-left: 18px; display: grid; gap: 4px; line-height: 1.5; }
.gd-tips li::marker { content: '💡 '; }
.gd-page-tour { justify-self: start; margin-top: 4px; }
.gd-hint { position: fixed; right: 76px; bottom: 22px; z-index: 56; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; max-width: calc(100vw - 100px); padding: 8px 10px 8px 14px; border-radius: 12px; background: var(--surface-1); border: 1px solid var(--accent); box-shadow: 0 8px 24px rgb(0 0 0 / .2); animation: m-modal .3s ease both; }
@media (max-width: 600px) { .gd-hint { right: 64px; bottom: 14px; } }
@media (prefers-reduced-motion: reduce) { .gd-hint { animation: none; } }
/* Work Logs: time by work item */
.wl-wi { padding: 16px 18px; display: grid; gap: 12px; margin: 16px 0; }
.wi-score { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; padding: 10px 14px; border-radius: 10px; background: var(--surface-2); border-left: 4px solid var(--good); }
.wi-score.warn { border-left-color: var(--warning); } .wi-score.bad { border-left-color: var(--critical); }
.wi-score strong { font-size: 16px; }
.wi-rows { display: grid; gap: 10px; }
.wi-row { display: grid; gap: 4px; }
.wi-row-h { display: flex; justify-content: space-between; gap: 10px; }
.wi-name { font-weight: 600; }
.wi-row.other .wi-name { color: var(--warning); }
.wi-row.unknown .wi-name { color: var(--text-secondary); font-style: italic; }
.wi-bar { display: block; width: 100%; height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.wi-bar i { display: block; height: 100%; background: var(--series-1); border-radius: 3px; }
.wi-row.other .wi-bar i { background: var(--warning); }
.wi-tasks { margin: 2px 0 0; padding-left: 18px; display: grid; gap: 2px; color: var(--text-secondary); }
.tag.wi-other { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 40%, var(--border)); }
.warn-txt { color: var(--warning); }
.cc-restore { justify-self: start; }
.wl-wi .wi-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.wl-wi .wi-row-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; width: 100%; }
.wl-wi .wi-row-h .num { white-space: nowrap; }
.wl-wi .wi-bar { width: 100%; margin: 0; }
/* AI engine badge, inside its button */
[data-ai-eng]::after { content: attr(data-ai-eng); display: inline-block; margin-left: 8px; padding: 0 7px; border-radius: 999px; font-size: 10.5px; font-weight: 600; line-height: 17px; letter-spacing: .01em; white-space: nowrap; vertical-align: 1px; border: 1px solid var(--border); color: var(--text-secondary); background: var(--surface-1); }
.ai-eng-gen[data-ai-eng]::after { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); background: color-mix(in srgb, var(--accent) 10%, var(--surface-1)); }
.ai-eng-pai[data-ai-eng]::after { color: #8a5a00; border-color: color-mix(in srgb, var(--warning) 45%, var(--border)); background: color-mix(in srgb, var(--warning) 12%, var(--surface-1)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ai-eng-pai[data-ai-eng]::after { color: #e8b25c; } }
:root[data-theme="dark"] .ai-eng-pai[data-ai-eng]::after { color: #e8b25c; }
.btn.primary.ai-eng-gen[data-ai-eng]::after, .btn.primary.ai-eng-pai[data-ai-eng]::after { background: rgb(255 255 255 / .16); color: #fff; border-color: rgb(255 255 255 / .35); }
/* Other Phase Activities: warning + Fix work items */
.wi-opa-warn { margin: 6px 0 0; grid-column: 1 / -1; }
.wi-field { display: grid; gap: 0; }
.tk-opa { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 12px; }
.fw-modal { width: min(900px, 100%); }
.fw-body { padding: 14px 20px; overflow: auto; display: grid; gap: 14px; align-content: start; }
.fw-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.fw-group { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; display: grid; gap: 8px; }
.fw-gh { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.fw-gh .fw-all { margin-left: auto; width: auto; }
.fw-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 280px); gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--border); }
.fw-row.ok { opacity: .75; }
.fw-row .error { grid-column: 1 / -1; margin: 0; }
.fw-task { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; min-width: 0; }
.fw-no { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.fw-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.fw-row select { width: 100%; }
.fw-empty { padding: 24px; text-align: center; }
@media (max-width: 640px) { .fw-row { grid-template-columns: 1fr; } }
/* My Plan: all phases on one timeline (SAs) */
.pl-tl { padding: 16px 18px; margin-bottom: 16px; }
.tl-wrap { overflow-x: auto; margin-top: 8px; }
.tlx-grid { display: grid; grid-template-columns: minmax(200px, 280px) minmax(560px, 1fr); row-gap: 2px; min-width: max-content; }
.tl-axis { position: relative; height: 34px; border-bottom: 1px solid var(--border); }
.tl-month { position: absolute; top: 0; font-size: 11px; font-weight: 600; color: var(--text-secondary); transform: translateX(2px); white-space: nowrap; }
.tl-week { position: absolute; bottom: 3px; font-size: 10px; color: var(--text-muted); transform: translateX(-50%); }
.tl-label { display: grid; gap: 1px; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--border); min-width: 0; }
.tl-label > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-next { color: var(--accent); }
button.tl-label { background: none; border: 0; border-bottom: 1px solid var(--border); text-align: left; font: inherit; color: inherit; cursor: pointer; border-radius: 0; }
button.tl-label:hover strong { color: var(--accent); }
button.tl-label:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tl-group { grid-column: 1 / -1; padding: 14px 0 6px; border-bottom: 1px solid var(--border); font-size: 13px; }
.tl-track { position: relative; min-height: 74px; border-bottom: 1px solid var(--border); }
.tl-gl { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border); opacity: .5; }
.tl-bar { position: absolute; top: 50%; height: 8px; transform: translateY(-50%); border-radius: 4px; background: color-mix(in srgb, var(--accent) 35%, transparent); }
.tl-bar.nop { background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 4px, transparent 4px, transparent 8px); border: 1px dashed var(--border); }
.tl-ms { position: absolute; top: 50%; width: 14px; height: 14px; transform: translate(-50%, -50%); z-index: 1; cursor: default; }
.tl-ms::before { content: ''; position: absolute; inset: 1px; transform: rotate(45deg); background: var(--accent); border: 2px solid var(--surface-1); border-radius: 2px; }
.tl-ms.k-interim_1::before, .tl-ms.k-interim_2::before { background: var(--warning); }
.tl-ms.k-demo::before { background: var(--good); }
.tl-ms.past { opacity: .45; }
.tl-ms em { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 10px; line-height: 1; color: var(--text-secondary); white-space: nowrap; pointer-events: none; }
.tl-due { position: absolute; bottom: 4px; transform: translateX(-50%); font-size: 11px; color: var(--critical); line-height: 1; }
.tl-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent); opacity: .8; z-index: 2; pointer-events: none; }
.tl-axis .tl-today { opacity: 1; }
/* Notifications */
.nt-btn { position: relative; }
.nt-badge { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--critical); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.nt-panel { position: fixed; z-index: 65; max-height: min(520px, calc(100vh - 90px)); overflow: auto; background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 16px 40px rgb(0 0 0 / .25); padding: 12px 12px 10px; display: grid; gap: 6px; align-content: start; }
.nt-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.nt-sub { margin: 0; }
.nt-empty { margin: 8px 0; text-align: center; }
.nt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.nt-item { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 6px; align-items: start; padding: 8px; border-radius: 10px; border: 1px solid var(--border); background: color-mix(in srgb, var(--accent) 6%, var(--surface-1)); }
.nt-item.today { border-color: color-mix(in srgb, var(--warning) 55%, var(--border)); background: color-mix(in srgb, var(--warning) 9%, var(--surface-1)); }
.nt-item.read { background: var(--surface-1); opacity: .7; }
.nt-ic { font-size: 18px; line-height: 1.2; text-align: center; }
.nt-main { all: unset; cursor: pointer; display: grid; gap: 1px; min-width: 0; }
.nt-main:focus-visible { outline: 2px solid var(--accent); border-radius: 6px; }
.nt-main > * { overflow: hidden; text-overflow: ellipsis; }
.nt-when { color: var(--accent); font-weight: 600; }
.nt-item.today .nt-when { color: var(--warning); }
.nt-x { all: unset; cursor: pointer; padding: 2px 6px; border-radius: 6px; color: var(--text-secondary); }
.nt-x:hover, .nt-x:focus-visible { background: var(--surface-2); color: var(--text-primary); }
.nt-foot { padding-top: 6px; border-top: 1px solid var(--border); }
/* Help → Feedback */
.gd-tabs { flex-wrap: wrap; }
.hf { display: grid; gap: 12px; }
.hf-mode { justify-self: start; }
.hf-body { display: grid; gap: 12px; }
.hf-body > p { margin: 0; }
.hf-field { display: grid; gap: 6px; }
.hf-field input, .hf-field textarea { width: 100%; }
.hf-field .segmented { justify-self: start; }
.hf-proj-list { display: grid; gap: 2px; justify-items: stretch; text-align: left; max-height: 180px; overflow: auto; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; }
.hf-proj-list .hf-proj-opt { display: grid !important; grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: 8px; width: 100%; padding: 5px 4px; border-radius: 6px; cursor: pointer; text-align: left; justify-content: start; margin: 0; }
.hf-proj-list .hf-proj-opt:hover { background: var(--surface-2); }
.hf-proj-list .hf-proj-opt input { width: 16px; height: 16px; margin: 2px 0 0; }
.hf-proj-list .hf-proj-opt span { min-width: 0; overflow-wrap: anywhere; }
.hf-drop { display: block; padding: 12px; border: 2px dashed var(--border); border-radius: 10px; cursor: pointer; text-align: center; }
.hf-drop:hover, .hf-drop:focus-visible { border-color: var(--accent); outline: none; }
.hf-files { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.hf-file { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 6px; align-items: center; padding: 4px 6px; border: 1px solid var(--border); border-radius: 8px; }
.hf-file img { width: 36px; height: 36px; object-fit: cover; border-radius: 6px; }
.hf-file-ic { font-size: 20px; text-align: center; }
.hf-file .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hf-actions { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.hf-ok { display: grid; gap: 4px; }
.hf-recent summary { cursor: pointer; }
.hf-recent ul { margin: 6px 0; padding-left: 18px; display: grid; gap: 4px; }
.hf-stars { display: flex; gap: 2px; }
.hf-stars button { all: unset; cursor: pointer; font-size: 22px; line-height: 1; color: var(--surface-2); -webkit-text-stroke: 1px var(--border); }
.hf-stars button.on { color: #f5b301; -webkit-text-stroke: 0; }
.hf-stars button:focus-visible { outline: 2px solid var(--accent); border-radius: 4px; }
.hf-list { display: grid; gap: 8px; }
.hf-item { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; display: grid; gap: 4px; }
.hf-item.s-new { border-color: var(--accent); }
.hf-item p { margin: 0; white-space: pre-wrap; }
.hf-item-h { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.hf-item-h select { margin-left: auto; width: auto; }
.hf-mini { color: #f5b301; }
.fw-sug { all: unset; cursor: pointer; grid-column: 1 / -1; display: block; padding: 5px 10px; border-radius: 8px; border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--border)); font-size: 13px; overflow-wrap: anywhere; }
.fw-sug:hover, .fw-sug:focus-visible { border-style: solid; border-color: var(--accent); }
.fw-sug.on { background: color-mix(in srgb, var(--accent) 10%, var(--surface-1)); border-style: solid; border-color: var(--accent); }
/* Admin (owner only) */
#ad-body { display: grid; gap: 16px; }
.ad-card { padding: 16px 18px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ad-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ad-scroll .ad-table { min-width: 560px; }
.ad-card .card-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.ad-group { border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px 12px; margin: 0; display: grid; gap: 10px; }
.ad-group legend { padding: 0 6px; font-weight: 600; font-size: 13px; }
.ad-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 340px); gap: 12px; align-items: center; }
.ad-cliq { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.ad-cliq .notice { flex-basis: 100%; display: grid; gap: 4px; }
.ad-pre { margin: 4px 0 0; padding: 8px 10px; background: var(--surface-2); border-radius: 8px; font-size: 12px; overflow: auto; max-height: 220px; }
.ad-row > span { display: grid; gap: 2px; }
.ad-row input { width: 100%; }
.ad-eng { display: grid; gap: 6px; }
.ad-eng-row { display: grid; grid-template-columns: minmax(0, 1fr) 210px 150px; gap: 10px; align-items: center; }
.ad-add { display: flex; flex-wrap: wrap; gap: 8px; }
.ad-add input { flex: 1 1 200px; }
.ad-table { width: 100%; }
.ad-table td, .ad-table th { padding: 6px 8px; }
@media (max-width: 680px) { .ad-row, .ad-eng-row { grid-template-columns: 1fr; } }
/* Keel icon set */
.kic { width: 1.15em; height: 1.15em; flex: none; display: inline-block; vertical-align: -0.2em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kic-sparkle { color: #f5b301; }
.btn.primary .kic-sparkle, .ai-eng-gen .kic-sparkle { color: currentColor; }
.ai-btn .kic-sparkle, .ai-tag .kic-sparkle, .ai-fill .kic-sparkle, .ai-draft .kic-sparkle, .ai-sum-btn .kic-sparkle { color: #f5b301; }
.btn.primary.ai-btn .kic-sparkle { color: #ffe08a; }
.kic-bug { color: var(--critical); } .kic-bulb { color: #f5b301; } .kic-heart { color: #e5487c; } .kic-checkCircle, .kic-check { color: var(--good); }
.btn .kic, .tag .kic { margin-right: 1px; }
.nt-ic .kic { width: 22px; height: 22px; color: var(--accent); }
.nt-item.today .nt-ic .kic { color: var(--warning); }
.nt-bell { width: 18px; height: 18px; }
.gd-q .kic { width: 20px; height: 20px; stroke-width: 2; }
.gd-launch .gd-q { display: grid; place-items: center; }
.tm-badge .kic { width: 22px; height: 22px; }
#btn-theme .kic-theme { width: 17px; height: 17px; }
/* Keel logo mark (follows the theme's accent) */
.brand-mark .keel-logo { width: 72%; height: 72%; display: block; }
/* Theme picker */
.th-pop { position: fixed; z-index: 66; background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 16px 40px rgb(0 0 0 / .25); padding: 14px; display: grid; gap: 12px; max-height: calc(100vh - 80px); overflow: auto; }
.th-head { display: grid; gap: 1px; }
.th-sub, .th-note { font-size: 12px; color: var(--text-secondary); margin: 0; }
.th-modes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.th-mode { all: unset; cursor: pointer; display: grid; gap: 6px; justify-items: center; padding: 8px 6px; border-radius: 10px; border: 1.5px solid var(--border); font-size: 13px; font-weight: 600; }
.th-mode.on { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.th-mode:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.th-prev { display: grid; grid-template-columns: 1fr 2fr; grid-template-rows: 1fr 1fr; gap: 3px; width: 64px; height: 40px; padding: 4px; border-radius: 7px; background: #f4f4f1; border: 1px solid #e2e1dc; }
.th-prev i { border-radius: 3px; background: #fcfcfb; border: 1px solid #e2e1dc; }
.th-prev i:first-child { grid-row: span 2; background: var(--accent); border: 0; opacity: .85; }
.m-dark .th-prev { background: #111110; border-color: #33332f; }
.m-dark .th-prev i { background: #242422; border-color: #33332f; }
.th-sec { display: grid; gap: 6px; }
.th-sec.dim { opacity: .55; }
.th-sec.dim:hover, .th-sec.dim:focus-within { opacity: 1; }
.th-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); }
.th-sw { display: flex; flex-wrap: wrap; gap: 6px; }
.th-swatch { all: unset; cursor: pointer; display: grid; justify-items: center; gap: 3px; width: 44px; font-size: 10.5px; color: var(--text-secondary); }
.th-dot { width: 26px; height: 26px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12); transition: transform .12s; }
.bgsw .th-dot { background: linear-gradient(135deg, var(--sw) 55%, var(--sw2) 55%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18); }
.th-swatch.on .th-dot { box-shadow: 0 0 0 2px var(--surface-1), 0 0 0 4px var(--accent); }
.th-swatch.on .th-name { color: var(--text-primary); font-weight: 600; }
.th-swatch:hover .th-dot { transform: scale(1.08); }
.th-swatch:focus-visible .th-dot { outline: 2px solid var(--accent); outline-offset: 2px; }
.th-name { white-space: nowrap; }
.th-reset { all: unset; cursor: pointer; justify-self: start; font-size: 12px; color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .th-dot { transition: none; } }
#btn-theme .theme-ic { display: block; }
#btn-theme .theme-ic-acc { fill: var(--accent); }
/* phones: the tab bar is fixed at the bottom (≈65 px) — floating help, hints and the guide never sit on top of it */
@media (max-width: 640px) {
  .gd-launch { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .gd-hint { bottom: calc(76px + env(safe-area-inset-bottom)); right: 64px; left: 12px; max-width: none; }
}
/* SA timeline: phase names stay pinned while the track scrolls sideways */
.tlx-grid > .tl-label, .tlx-grid > .tl-axis-l { position: sticky; left: 0; z-index: 4; background: var(--surface-1); }
.tlx-grid > .tl-group { position: sticky; left: 0; z-index: 4; background: var(--surface-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100vw - 64px); }
@media (max-width: 640px) { .tlx-grid { grid-template-columns: minmax(130px, 150px) minmax(520px, 1fr); } }
/* ===== SA timeline — one row (tl1-) ===== */
.tl1-scroll { overflow-x: auto; margin-top: 10px; }
.tl1 { position: relative; min-width: 640px; }
.tl1-axis { position: relative; height: 38px; border-bottom: 1px solid var(--border); }
.tl1-month { position: absolute; top: 0; font-size: 12px; font-weight: 600; color: var(--text-secondary); transform: translateX(2px); white-space: nowrap; }
.tl1-week { position: absolute; bottom: 4px; font-size: 11px; color: var(--text-muted); transform: translateX(-50%); }
.tl1-today-l { position: absolute; top: 0; transform: translateX(-50%); font-size: 10px; font-weight: 600; color: var(--accent); background: var(--surface-1); padding: 0 4px; border-radius: 4px; }
.tl1-track { position: relative; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface-2) 45%, transparent); border-radius: 0 0 8px 8px; }
.tl1-gl { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border); opacity: .55; }
.tl1-today { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--accent); }
.tl1-m { position: absolute; width: 16px; height: 16px; margin-left: -8px; padding: 0; border: 0; background: none; cursor: pointer; z-index: 1; }
.tl1-m::before { content: ''; position: absolute; inset: 2px; transform: rotate(45deg); border-radius: 2px; background: var(--accent); border: 2px solid var(--surface-1); }
.tl1-m.due::before { transform: none; inset: 1px; border: 0; border-radius: 0; background: var(--critical); clip-path: polygon(50% 8%, 96% 92%, 4% 92%); }
.tl1-m.past { opacity: .45; }
.tl1-m:hover, .tl1-m:focus-visible { z-index: 3; outline: none; transform: scale(1.35); }
.tl1-m:focus-visible::after { content: ''; position: absolute; inset: -4px; border: 2px solid var(--accent); border-radius: 50%; }
.k-dev_start.tl1-m::before, .tl1-key.k-dev_start { background: var(--accent); }
.k-interim_1.tl1-m::before, .k-interim_2.tl1-m::before, .tl1-key.k-interim_1 { background: var(--warning); }
.k-dev_complete.tl1-m::before, .tl1-key.k-dev_complete { background: color-mix(in srgb, var(--accent) 55%, var(--good)); }
.k-testing_complete.tl1-m::before, .tl1-key.k-testing_complete { background: var(--text-secondary); }
.k-demo.tl1-m::before, .tl1-key.k-demo { background: var(--good); }
.tl1-tip { position: fixed; z-index: 80; width: min(300px, 90vw); padding: 10px 12px; border-radius: 10px; background: var(--surface-1); border: 1px solid var(--border); box-shadow: 0 10px 28px rgb(0 0 0 / .22); display: grid; gap: 3px; pointer-events: none; }
.tl1-tip-h { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.tl1-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; }
.tl1-legend span { display: inline-flex; align-items: center; gap: 6px; }
.tl1-key { display: inline-block; width: 9px; height: 9px; transform: rotate(45deg); border-radius: 2px; }
.tl1-key.due { transform: none; border-radius: 0; background: var(--critical); clip-path: polygon(50% 0, 100% 100%, 0 100%); width: 10px; }
.tl1-missing { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-top: 10px; }
/* Task List Generator — enhancement of an existing app */
.tg-enh { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; }
.tg-enh input { margin-top: 3px; }
.tg-app { display: grid; gap: 8px; }
.tg-app-map ul { margin: 6px 0 0; padding-left: 18px; columns: 2 260px; column-gap: 24px; }
.tg-app-map li { break-inside: avoid; margin-bottom: 2px; }
.tg-impact { display: grid; gap: 8px; }
.tg-impact ul { margin: 4px 0 0; padding-left: 18px; }
.tg-imp-row { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.tg-task-enh .tg-task-top { grid-template-columns: minmax(0, 1fr) minmax(130px, 160px) minmax(120px, 150px) minmax(130px, 150px) minmax(150px, 170px) 74px auto; }
@media (max-width: 1400px) { .tg-task-enh .tg-task-top { grid-template-columns: repeat(4, minmax(0, 1fr)) 74px auto; } .tg-task-enh .tg-task-top input.tg-name { grid-column: 1 / -1; } }
.tg-kind.k-modify { border-color: var(--warning); }
.tg-kind.k-regression-test { border-color: var(--accent); }
.tg-kind.k-data-update { border-color: var(--text-secondary); }
@media (max-width: 900px) { .tg-task-enh .tg-task-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .tg-task-enh .tg-task-top input.tg-name { grid-column: 1 / -1; } }
/* ===== Machi (mc-) — the stage is always dark (a deliberate, cinematic look in both themes) ===== */
.mc-page .page-head { align-items: flex-end; }
.mc-head-acts { display: flex; gap: 8px; align-items: center; flex-wrap: nowrap; flex: none; }
.mc-stage { position: relative; display: grid; justify-items: center; gap: 6px; padding: 44px 20px 22px; border-radius: 18px; overflow: hidden; isolation: isolate;
  background: radial-gradient(ellipse at 50% 42%, #0d1a3a 0%, #070b1c 55%, #04060f 100%); border: 1px solid #1d2a4d; color: #dbe6ff; box-shadow: 0 18px 50px rgb(3 6 20 / .35); }
.mc-corner { position: absolute; width: 22px; height: 22px; border: 0 solid #3b4f86; pointer-events: none; }
.mc-corner.c1 { top: 14px; left: 14px; border-top-width: 2px; border-left-width: 2px; } .mc-corner.c2 { top: 14px; right: 14px; border-top-width: 2px; border-right-width: 2px; }
.mc-corner.c3 { bottom: 14px; left: 14px; border-bottom-width: 2px; border-left-width: 2px; } .mc-corner.c4 { bottom: 14px; right: 14px; border-bottom-width: 2px; border-right-width: 2px; }
.mc-hud { position: absolute; font: 600 11.5px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; color: #6fd3a8; opacity: .85; pointer-events: none; white-space: nowrap; }
.mc-hud.tl { top: 44px; left: 24px; } .mc-hud.tr { top: 44px; right: 24px; color: #a99bff; }
.mc-hud.bl { bottom: 44px; left: 24px; } .mc-hud.br { bottom: 44px; right: 24px; color: #a99bff; }
.mc-hud.bc { top: 18px; left: 50%; transform: translateX(-50%); color: #7d8bb5; }
.mc-stage[data-mode="listening"] .mc-hud.tl { color: #ffb86b; }
.mc-stage[data-mode="thinking"] .mc-hud.tr { color: #d6c8ff; }
.mc-title { display: grid; justify-items: center; line-height: .95; margin-top: 8px; user-select: none; }
.mc-name { font: 900 clamp(34px, 6vw, 56px)/1 system-ui, sans-serif; letter-spacing: .06em; color: #f4f7ff; text-shadow: 0 0 24px rgb(90 150 255 / .35); }
.mc-orb { position: relative; width: min(420px, 100%); aspect-ratio: 1.25; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.mc-orb:focus-visible { outline: 2px solid #7fb4ff; outline-offset: -18px; }
.mc-canvas { width: 100%; height: 100%; display: block; }
.mc-state { font: 600 13px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; color: #8fb6ff; min-height: 1.2em; }
.mc-stage[data-mode="listening"] .mc-state { color: #ffb86b; }
.mc-caption { display: grid; gap: 6px; justify-items: center; text-align: center; width: min(720px, 100%); min-height: 64px; margin-top: 4px; padding: 0 8px 18px; }
.mc-you { font-size: 14px; font-style: italic; color: #8e9bc4; }
.mc-me { font-size: 17px; line-height: 1.5; color: #eef3ff; }
.mc-ghost { color: rgb(238 243 255 / .22); }
.mc-compose { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 14px; }
.mc-input { width: 100%; min-height: 42px; }
.mc-note { margin: 6px 2px 14px; }
.mc-convo { padding: 14px 16px; display: grid; gap: 10px; }
.mc-convo-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mc-log { max-height: 420px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.mc-msg { display: flex; gap: 10px; align-items: flex-end; max-width: min(760px, 92%); }
.mc-msg.me { align-self: flex-end; flex-direction: row-reverse; }
.mc-av { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: #fff; background: radial-gradient(circle at 40% 35%, #8fd0ff, #2a6fe0 70%); }
.mc-bub { padding: 9px 13px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--border); line-height: 1.5; min-width: 0; overflow-wrap: anywhere; }
.mc-bub p { margin: 0; } .mc-bub p + p, .mc-bub p + ul, .mc-bub ul + p { margin-top: 6px; }
.mc-bub ul { margin: 4px 0 0; padding-left: 18px; }
.mc-msg.bot .mc-bub { border-bottom-left-radius: 4px; }
.mc-msg.me .mc-bub { background: var(--accent); color: var(--accent-ink, #fff); border-color: transparent; border-bottom-right-radius: 4px; }
.mc-msg.err .mc-bub { border-color: var(--critical); }
.mc-meta { display: flex; gap: 10px; align-items: center; margin-top: 6px; font-size: 12px; }
.mc-say { font: inherit; font-size: 12px; border: 0; background: none; color: var(--accent); padding: 0; cursor: pointer; }
.mc-say:hover, .mc-say:focus-visible { text-decoration: underline; outline: none; }
.mc-sugs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@media (max-width: 640px) {
  .mc-stage { padding: 22px 12px 16px; border-radius: 14px; }
  .mc-hud { font-size: 10px; } .mc-hud.tl, .mc-hud.tr { top: 19px; } .mc-hud.tl { left: 42px; } .mc-hud.tr { right: 42px; } .mc-hud.bl { left: 42px; } .mc-hud.br { right: 42px; } .mc-hud.bl, .mc-hud.br { bottom: 19px; }
  .mc-hud.bc { display: none; }
  .mc-orb { aspect-ratio: 1.1; }
  .mc-me { font-size: 15.5px; } .mc-caption { padding-bottom: 22px; }
  .mc-msg { max-width: 100%; }
}
@media (max-width: 640px) { .mc-head-acts { flex-wrap: wrap; flex: 1 1 100%; } .mc-page .page-head { align-items: stretch; } }
/* 🔔 SLA countdown */
.nt-main .nt-when { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.nt-sla { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nt-sla.ok { color: var(--good); } .nt-sla.soon { color: var(--warning); } .nt-sla.over { color: var(--critical); background: color-mix(in srgb, var(--critical) 10%, transparent); }
.nt-item.overdue { border-color: var(--critical); background: color-mix(in srgb, var(--critical) 8%, var(--surface-1)); }
.nt-item.overdue .nt-when, .nt-item.overdue .nt-ic { color: var(--critical); }
.nt-item.overdue .nt-ic .kic { color: var(--critical); }
/* overlap warnings carry a one-tap fix */
.la-overlap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.la-overlap > span { flex: 1 1 260px; }
.qe-act-msg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.qe-move { font-weight: 600; }
/* Cleanup: total hours of the task (trim the estimate to the actuals, then complete) */
.cu-total { display: inline-flex; align-items: center; gap: 6px; }
.cu-total input { width: 72px; }
.cu-total.changed input { border-color: var(--accent); }
/* Cleanup save bar on phones: the summary on its own line, the buttons share the next one */
@media (max-width: 640px) {
  .cu-savebar { flex-wrap: wrap; gap: 8px; }
  .cu-savebar > span:first-child { flex: 1 1 100%; }
  .cu-savebar > span[style] { display: none; }
  .cu-savebar > .btn { flex: 1 1 auto; justify-content: center; white-space: normal; text-align: center; }
}
/* "Creator needs a few details" (fields missing on an old task) */
.nf-ov { z-index: 85; }
.nf-modal { width: min(460px, 100%); height: auto; max-height: calc(100vh - 32px); }
.nf-body { display: grid; gap: 12px; padding: 16px 18px; }
.nf-row { display: grid; gap: 4px; }
.nf-row select, .nf-row input, .nf-row textarea { width: 100%; }

/* ---------- Home: the day's briefing as a conversation (hm-) ---------- */
#hm-body { display: grid; gap: 14px; min-width: 0; }
.hm-convo { padding: 14px 16px; }
.hm-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.hm-log { display: grid; gap: 10px; min-width: 0; }
.hm-msg { display: flex; align-items: flex-start; gap: 10px; min-width: 0; animation: hm-in .25s ease-out; }
.hm-av { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--accent); border: 1px solid var(--border); }
.hm-av svg { width: 18px; height: 18px; }
.hm-bub { min-width: 0; max-width: min(720px, 100%); padding: 9px 13px; border-radius: 4px 14px 14px 14px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-primary); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.hm-bub.warn { border-color: var(--warning); }
.hm-text { white-space: pre-wrap; }
.hm-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.hm-acts .btn { text-decoration: none; }
.hm-typing { display: inline-flex; gap: 4px; align-items: center; padding: 12px 14px; }
.hm-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); animation: hm-dot 1s infinite ease-in-out; }
.hm-typing i:nth-child(2) { animation-delay: .15s; }
.hm-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes hm-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes hm-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hm-msg, .hm-typing i { animation: none; } }
.hm-today h2 { margin: 0 0 10px; font-size: 15px; }
.hm-tasks { display: grid; gap: 8px; }
.hm-task { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-1); min-width: 0; }
.hm-task-main { display: grid; gap: 3px; min-width: 0; }
.hm-task-name { all: unset; cursor: pointer; font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; }
.hm-task-name:hover { color: var(--accent); }
.hm-task-name:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.hm-desc { color: var(--text-secondary); }
.hm-task-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: 0 0 auto; }
.hm-empty p { margin: 0; }
@media (max-width: 640px) {
  .hm-convo { padding: 12px; }
  .hm-bub { font-size: 13.5px; }
  .hm-task { flex-direction: column; }
  .hm-task-side { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
}

/* header brand = link to Home; Insights' sections bar (pg-) */
.shell a.brand { color: inherit; text-decoration: none; border-radius: 8px; }
.shell a.brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.pg-subnav { display: inline-flex; flex-wrap: wrap; gap: 2px; margin: 0 0 14px; max-width: 100%; }
.pg-subnav .pg-sub { padding: 6px 14px; border-radius: 7px; font-size: 13px; color: var(--text-secondary); text-decoration: none; white-space: nowrap; }
.pg-subnav .pg-sub:hover { color: var(--text-primary); }
.pg-subnav .pg-sub.on { background: var(--surface-1); color: var(--text-primary); font-weight: 600; box-shadow: var(--shadow); }
.pg-subnav.pg-crumb { display: block; }
.pg-subnav.pg-crumb a { color: var(--text-secondary); text-decoration: none; }
.pg-subnav.pg-crumb a:hover { color: var(--accent); }

/* guide drawer: Help sections (one open at a time) */
.gd-sec { border: 1px solid var(--border); border-radius: 10px; background: var(--surface-1); margin: 0; min-width: 0; }
.gd-sec > summary { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 11px 14px; cursor: pointer; list-style: none; border-radius: 10px; }
.gd-sec > summary::-webkit-details-marker { display: none; }
.gd-sec > summary::after { content: ''; flex: 0 0 auto; width: 7px; height: 7px; border-right: 1.6px solid var(--text-muted); border-bottom: 1.6px solid var(--text-muted); transform: translateY(-2px) rotate(-45deg); transition: transform .15s; align-self: center; }
.gd-sec[open] > summary::after { transform: translateY(-3px) rotate(45deg); }
.gd-sec > summary strong { flex: 1; min-width: 0; }
.gd-sec > summary:hover { background: var(--surface-2); }
.gd-sec > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.gd-sec-body { padding: 4px 14px 14px; min-width: 0; }
@media (prefers-reduced-motion: reduce) { .gd-sec > summary::after { transition: none; } }
.fb-card.fb-focus { outline: 2px solid var(--accent); outline-offset: 2px; transition: outline-color .6s; }
/* Home: my active projects */
.hm-projects { display: grid; gap: 10px; }
.hm-ph { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.hm-ph h2 { margin: 0; font-size: 15px; }
.hm-plist { display: grid; gap: 8px; }
.hm-proj { all: unset; box-sizing: border-box; display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-1); cursor: pointer; min-width: 0; }
.hm-proj:hover { border-color: var(--accent); }
.hm-proj:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hm-proj-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; min-width: 0; }
.hm-proj-name { min-width: 0; overflow-wrap: anywhere; color: var(--text-primary); }
.hm-dl { color: var(--text-secondary); white-space: nowrap; }
.hm-dl.soon strong, .hm-dl.soon { color: var(--warning); }
.hm-dl.late strong, .hm-dl.late { color: var(--critical); }
.hm-cmt { color: var(--text-secondary); overflow-wrap: anywhere; }
.hm-cmt-t { color: var(--text-primary); }
@media (max-width: 640px) { .hm-dl { white-space: normal; } }

/* Edit phase / Extend SLA (pe-) */
.pe-modal { width: min(760px, 100%); max-height: min(92vh, 900px); display: flex; flex-direction: column; }
.pe-body { overflow: auto; display: grid; gap: 14px; min-width: 0; }
.pe-sec { display: grid; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--border); min-width: 0; }
.pe-sec:last-child { border-bottom: 0; }
.pe-sec h3 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); }
.pe-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pe-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pe-f { display: grid; gap: 4px; min-width: 0; }
.pe-f input, .pe-f select, .pe-f textarea { width: 100%; min-width: 0; box-sizing: border-box; }
.pe-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--text-secondary); }
.pe-facts strong { color: var(--text-primary); }
.pe-devs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pe-devs select { width: auto; min-width: 160px; }
.tm-foot.pe-foot { display: grid; gap: 8px; border-top: 1px solid var(--border); padding-top: 10px; }
.pe-probs { margin: 0; padding-left: 18px; color: var(--warning); display: grid; gap: 2px; }
.pe-btns { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.pe-srv { margin: 0; }
.ph-edit-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
@media (max-width: 640px) { .pe-row, .pe-row.three { grid-template-columns: minmax(0, 1fr); } }
.pe-btns .btn:disabled { opacity: .5; cursor: not-allowed; }

/* tasks missing Creator-required fields */
.tk-row.tk-needfix { box-shadow: inset 3px 0 0 var(--warning); }
.tk-meta .tk-missing { cursor: pointer; border: 1px solid var(--warning); color: var(--warning); background: transparent; font: inherit; font-size: 11px; }
.tk-meta .tk-missing:hover { background: color-mix(in srgb, var(--warning) 14%, transparent); }
.tk-fix-note { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.te-modal .tm-field.te-miss select, .te-modal .tm-field.te-miss input, .te-modal .tm-field.te-miss textarea { border-color: var(--warning); }
.te-modal .te-miss-t { color: var(--warning); }