/* Task Manager.
   Layout follows Microsoft Planner Basic: app bar, left navigation, a list or board,
   and a two-pane detail dialog. Colours, type and icons follow the Gaiamesh Brand Kit
   (XG-26-0023): Forest, Paper and Mist greens, Arial, Lucide line icons.
   Status colours (alert, warning, info) come from the Brand Kit's status set. */

:root {
  --paper: #f7fbfa;        /* page */
  --canvas: #ffffff;       /* lists, tiles, dialog */
  --nav: #eef5f2;          /* left navigation */
  --side: #f3f8f6;         /* detail side pane */
  --ink: #143832;          /* Forest: main text */
  --ink-2: #46655d;        /* secondary text */
  --ink-3: #7d958e;        /* icons, empty rings */
  --line: #dae7e3;
  --line-2: #c3d6d0;
  --hover: #eef5f2;
  --brand: #143832;        /* primary buttons */
  --brand-hover: #2a5249;
  --on-brand: #f7fbfa;
  --accent: #1f6a49;       /* selection, progress, links */
  --accent-soft: #e3f0ea;
  --avatar: #bfeedf;       /* Leaf */
  --avatar-ink: #143832;
  --alert: #b23a3a;
  --alert-soft: #fcecec;
  --alert-line: #eebcbc;
  --alert-strong: #b23a3a;
  --warn: #87580b;
  --warn-soft: #fdf3df;
  --warn-line: #ecd096;
  --info: #2a649a;
  --info-soft: #e8f1fa;
  --info-line: #bad2ea;
  --dot-new: #2b7de9;      /* the co-work app's dots on a card (Change 64): an answer not yet opened */
  --dot-input: #f2a316;    /* and an answer waiting for the person */
  --ok: #2f9d6e;
  --toast: #143832;
  --toast-ink: #f7fbfa;
  --toast-link: #bfeedf;
  --demo: #fdf3df;
  --scrim: rgba(9, 25, 21, 0.34);
  --shadow: 0 1px 2px rgba(20, 56, 50, 0.07);
  --shadow-hover: 0 2px 8px rgba(20, 56, 50, 0.10);
  --shadow-pop: 0 10px 32px rgba(9, 25, 21, 0.18), 0 1px 3px rgba(9, 25, 21, 0.08);
  --font: Arial, "Helvetica Neue", Helvetica, "Microsoft YaHei", "PingFang SC", sans-serif;
  --mark: url("../icons/gaiamesh-mark.svg");
  --appbar-h: 48px;
  --nav-w: 232px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #091915;
    --canvas: #0f221d;
    --nav: #0c1e19;
    --side: #0d1f1a;
    --ink: #e3efeb;
    --ink-2: #a3bdb5;
    --ink-3: #6f8c84;
    --line: #1f3a33;
    --line-2: #2f4f46;
    --hover: #15302a;
    --brand: #bfeedf;
    --brand-hover: #d8f6ec;
    --on-brand: #0b1f1a;
    --accent: #8fd9be;
    --accent-soft: #173a31;
    --avatar: #24483f;
    --avatar-ink: #d8f6ec;
    --alert: #f2a3a3;
    --alert-soft: #3a1d1d;
    --alert-line: #6b3232;
    --alert-strong: #c24848;
    --warn: #f0c46b;
    --warn-soft: #33290f;
    --warn-line: #5f4a1b;
    --info: #a3c8ee;
    --info-soft: #15293c;
    --info-line: #2c4b6c;
    --dot-new: #6aa8f0;
    --dot-input: #f2b03a;
    --ok: #5fc797;
    --toast: #e3efeb;
    --toast-ink: #0b1f1a;
    --toast-link: #1f6a49;
    --demo: #33290f;
    --scrim: rgba(0, 0, 0, 0.55);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-hover: 0 2px 10px rgba(0, 0, 0, 0.45);
    --shadow-pop: 0 12px 36px rgba(0, 0, 0, 0.55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #091915;
  --canvas: #0f221d;
  --nav: #0c1e19;
  --side: #0d1f1a;
  --ink: #e3efeb;
  --ink-2: #a3bdb5;
  --ink-3: #6f8c84;
  --line: #1f3a33;
  --line-2: #2f4f46;
  --hover: #15302a;
  --brand: #bfeedf;
  --brand-hover: #d8f6ec;
  --on-brand: #0b1f1a;
  --accent: #8fd9be;
  --accent-soft: #173a31;
  --avatar: #24483f;
  --avatar-ink: #d8f6ec;
  --alert: #f2a3a3;
  --alert-soft: #3a1d1d;
  --alert-line: #6b3232;
  --alert-strong: #c24848;
  --warn: #f0c46b;
  --warn-soft: #33290f;
  --warn-line: #5f4a1b;
  --info: #a3c8ee;
  --info-soft: #15293c;
  --info-line: #2c4b6c;
  --dot-new: #6aa8f0;
  --dot-input: #f2b03a;
  --ok: #5fc797;
  --toast: #e3efeb;
  --toast-ink: #0b1f1a;
  --toast-link: #1f6a49;
  --demo: #33290f;
  --scrim: rgba(0, 0, 0, 0.55);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-hover: 0 2px 10px rgba(0, 0, 0, 0.45);
  --shadow-pop: 0 12px 36px rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}

/* -- base ---------------------------------------------------------------------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.has-detail, html.has-nav { overflow: hidden; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 14px/1.45 var(--font);
}
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 25;
  background: var(--canvas);
}
a { color: var(--accent); }
code { font: 13px Consolas, "Courier New", monospace; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
button, input, select, textarea { font-family: var(--font); }
button { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.ic { width: 18px; height: 18px; flex: none; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--ink-2); }
.ellipsis { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spin { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* -- demo strip and app bar ------------------------------------------------------- */
.demo-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--demo);
  font-size: 13px;
  padding-block: 6px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.demo-as { display: flex; align-items: center; gap: 8px; }
.demo-as select {
  font-size: 13px; padding: 3px 6px; border: 1px solid var(--line-2); border-radius: 4px;
  background: var(--canvas); color: var(--ink);
}

.appbar {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  height: var(--appbar-h);
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--canvas);
  border-bottom: 1px solid var(--line);
  padding-left: max(12px, env(safe-area-inset-left, 0px));
  padding-right: max(12px, env(safe-area-inset-right, 0px));
}
.appname { display: flex; align-items: center; gap: 10px; min-width: 0; padding-left: 4px; }
.mark {
  width: 24px; height: 24px; flex: none;
  background: var(--brand);
  -webkit-mask: var(--mark) center / contain no-repeat;
  mask: var(--mark) center / contain no-repeat;
}
.appname-text { font-size: 16px; font-weight: 700; white-space: nowrap; letter-spacing: -0.01em; }
.appbar-tools { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.loaded { font-size: 12px; color: var(--ink-2); margin-right: 4px; white-space: nowrap; }
.icon-btn.nav-toggle { display: inline-grid; }

.icon-btn {
  width: 32px; height: 32px; flex: none;
  display: inline-grid; place-items: center;
  border: 0; border-radius: 4px; background: transparent; color: var(--ink-2);
  cursor: pointer;
}
.icon-btn:hover { background: var(--hover); color: var(--ink); }
.icon-btn:disabled { cursor: default; opacity: 0.6; }
.avatar-btn { border: 0; background: none; padding: 2px; border-radius: 50%; cursor: pointer; }
.avatar {
  width: 28px; height: 28px; flex: none; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: var(--avatar); color: var(--avatar-ink);
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
}
.avatar-sm { width: 22px; height: 22px; font-size: 9px; }

/* -- frame and navigation -------------------------------------------------------------- */
.frame {
  display: grid;
  grid-template-columns: var(--nav-w) minmax(0, 1fr);
  min-height: calc(100vh - var(--appbar-h));
}
.nav {
  position: sticky;
  top: calc(var(--appbar-h) + env(safe-area-inset-top, 0px));
  height: calc(100vh - var(--appbar-h) - env(safe-area-inset-top, 0px));
  overflow-y: auto;
  background: var(--nav);
  border-right: 1px solid var(--line);
  padding: 12px 8px 16px max(8px, env(safe-area-inset-left, 0px));
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.nav-group { display: grid; gap: 2px; }
.nav-brand { display: none; align-items: center; gap: 10px; padding: 0 2px 6px 10px; font-size: 16px; font-weight: 700; }
.nav-brand .icon-btn { margin-left: auto; }
.nav-head { font-size: 12px; color: var(--ink-2); padding: 0 10px 4px; }
.nav-item {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 36px; padding: 0 10px;
  border: 0; border-radius: 6px; background: transparent;
  font-size: 14px; color: var(--ink); text-align: left; cursor: pointer;
}
.nav-item .ic { color: var(--ink-2); width: 17px; height: 17px; }
.nav-item:hover { background: var(--hover); }
.nav-item.is-selected { background: var(--accent-soft); font-weight: 700; }
.nav-item.is-selected .ic { color: var(--accent); }
.nav-item.is-selected::before {
  content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px;
  border-radius: 2px; background: var(--accent);
}
/* Mine or Team, chosen while a source, team or channel narrows it: marked, not filled. */
.nav-item.is-scope { font-weight: 700; }
.nav-item.is-scope .ic { color: var(--accent); }
.nav-item.is-scope::before {
  content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px;
  border-radius: 2px; background: var(--line-2);
}
.nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-count { font-size: 12px; font-weight: 400; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.nav-foot { margin-top: auto; font-size: 12px; color: var(--ink-3); padding: 8px 10px 0; }
.scrim { display: none; }

html.nav-hidden .frame { grid-template-columns: minmax(0, 1fr); }
html.nav-hidden .nav { display: none; }

/* -- main column ---------------------------------------------------------------------------- */
.main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-block: 20px 96px;
  padding-left: 28px;
  padding-right: max(28px, env(safe-area-inset-right, 0px));
}
.banner { padding: 10px 14px; border-radius: 6px; font-size: 13px; }
.banner-error { background: var(--alert-soft); border: 1px solid var(--alert-line); }
.banner-warn { background: var(--warn-soft); border: 1px solid var(--warn-line); }
.banner-warn summary { cursor: pointer; }

.page-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 20px; font-weight: 700; }
.crumb-sep { width: 16px; height: 16px; color: var(--ink-3); }
.crumb {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 14px; font-weight: 400; padding: 2px 2px 2px 10px;
  border: 1px solid var(--line-2); border-radius: 999px; background: var(--canvas);
}
.crumb-x {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 50%;
  background: none; color: var(--ink-2); cursor: pointer;
}
.crumb-x:hover { background: var(--hover); color: var(--ink); }
.crumb-x .ic { width: 14px; height: 14px; }
.crumb-link { border: 0; background: none; font: inherit; color: var(--accent); cursor: pointer; padding: 0; }
.page-count { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* Today band, after Planner's My day header */
.today {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(180px, 240px);
  align-items: center;
  gap: 20px;
  padding: 14px 20px;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.today-date {
  display: grid; justify-items: center; width: 56px; padding: 6px 0 7px;
  border: 1px solid var(--line); border-radius: 6px; line-height: 1.15;
}
.today-date span { font-size: 10px; letter-spacing: 0.08em; color: var(--ink-2); }
.today-date strong { font-size: 22px; }
.today-text { display: grid; gap: 4px; min-width: 0; }
.today-text h2 { font-size: 18px; color: var(--accent); }
.today-text p { font-size: 13px; color: var(--ink-2); }
.today-progress { display: grid; gap: 6px; }

/* The greeting's pen opens the Daily notes panel. A dot says today's notes have something in them. */
.today.has-notes-btn { padding-right: 52px; }
.today.today-plain { grid-template-columns: auto minmax(0, 1fr); }     /* no progress beside the text */
.today-notes { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; }
.today-notes.is-on { background: var(--accent-soft); color: var(--accent); }
.today-notes.has-notes::after {
  content: ""; position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
/* Daily notes: a panel docked at the right of the list, with no scrim. The list narrows to make room for it. */
html.has-notes .frame { grid-template-columns: var(--nav-w) minmax(0, 1fr) 340px; }
html.has-notes.nav-hidden .frame { grid-template-columns: minmax(0, 1fr) 340px; }
.notes-panel {
  position: sticky; top: calc(var(--appbar-h) + env(safe-area-inset-top, 0px));
  height: calc(100vh - var(--appbar-h) - env(safe-area-inset-top, 0px));
  display: flex; flex-direction: column; min-width: 0;
  background: var(--canvas); border-left: 1px solid var(--line);
}
.notes-panel.is-opening { animation: notes-in 0.18s ease-out; }
@keyframes notes-in { from { opacity: 0; } }      /* a fade: sliding in from the right would widen the page for a moment */
.notes-when { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px 6px; font-size: 13px; }
.notes-when .btn { height: 28px; }
.notes-state { margin-left: auto; font-size: 12px; color: var(--ink-3); }
.notes-text {
  flex: 1; min-height: 0; margin: 0 16px; padding: 10px 12px; resize: none;
  border: 1px solid var(--line); border-radius: 6px; background: var(--paper, var(--canvas));
  font: inherit; font-size: 14px; line-height: 1.5; color: var(--ink);
}
.notes-text:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: var(--canvas); }
.notes-hint { padding: 8px 16px 14px; }
/* A task's notes on its card: the hint, and on the right whether they are saved. */
.task-notes-hint { display: flex; gap: 12px; align-items: baseline; }
.task-notes-kept { margin-top: 4px; }
/* The calendar opens inside the panel, under its bar, whatever the panel's width. */
.notes-bar .menu-anchor { position: static; }
.notes-panel .notes-cal { top: 52px; left: auto; right: 12px; max-width: calc(100% - 24px); }
.notes-cal { width: 264px; padding: 10px; gap: 8px; }
.notes-cal-head { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 700; }
.notes-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.notes-cal-dow { font-size: 11px; color: var(--ink-3); text-align: center; padding: 2px 0; }
.notes-cal-day {
  position: relative; height: 30px; border: 0; border-radius: 6px; background: none;
  font: inherit; font-size: 13px; color: var(--ink); cursor: pointer;
}
.notes-cal-day:hover:not(:disabled) { background: var(--hover); }
.notes-cal-day:disabled { color: var(--ink-3); cursor: default; }
.notes-cal-day.is-today { box-shadow: inset 0 0 0 1px var(--accent); font-weight: 700; }
.notes-cal-day.is-shown { background: var(--accent-soft); }
.notes-cal-day.has-notes::after {
  content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--accent);
}
.today-progress p { font-size: 12px; color: var(--ink-2); }
.today-progress strong { color: var(--ink); }
.bar { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.bar span { display: block; height: 100%; border-radius: 2px; background: var(--accent); }

/* Toolbar: view pills, search, filter, group by */
.toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.seg { display: inline-flex; gap: 6px; }
.seg-tabs { display: none; }
.seg-btn, .tool-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--canvas); color: var(--ink);
  font-size: 14px; cursor: pointer; white-space: nowrap;
}
.seg-btn .ic, .tool-btn .ic { width: 16px; height: 16px; color: var(--ink-2); }
.seg-btn:hover, .tool-btn:hover { background: var(--hover); }
.seg-btn[aria-pressed="true"], .seg-btn[aria-selected="true"], .tool-btn.is-on {
  border-color: var(--accent); background: var(--accent-soft); font-weight: 700;
}
.seg-btn[aria-pressed="true"] .ic, .tool-btn.is-on .ic { color: var(--accent); }
.toolbar-sep { width: 1px; height: 20px; background: var(--line); margin: 0 2px; }
.search {
  display: flex; align-items: center; gap: 6px;
  height: 32px; width: 220px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--canvas);
}
.search .ic { width: 16px; height: 16px; color: var(--ink-2); }
.search:focus-within { border-color: var(--accent); }
.search input {
  flex: 1; min-width: 0; width: 0; border: 0; outline: 0; background: transparent;
  font-size: 14px; color: var(--ink);
}
.search input::placeholder { color: var(--ink-3); }
.group-by {
  position: relative; margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--ink-2);
}
.group-by > .ic { width: 16px; height: 16px; }
.group-by select {
  appearance: none; -webkit-appearance: none;
  border: 0; background: transparent; color: var(--ink);
  font-size: 14px; font-weight: 700; padding: 4px 20px 4px 2px; cursor: pointer; border-radius: 4px;
}
.group-by select:hover { background: var(--hover); }
.group-by .select-caret { position: absolute; right: 2px; width: 14px; height: 14px; pointer-events: none; color: var(--ink-2); }

/* -- menus ------------------------------------------------------------------------------------------ */
.menu-anchor { position: relative; }
.menu {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 30;
  min-width: 210px; padding: 4px;
  background: var(--canvas); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: var(--shadow-pop);
  display: grid; cursor: default;
}
.menu-right { left: auto; right: 0; }
.menu-item {
  display: flex; align-items: center; gap: 10px;
  min-height: 34px; padding: 0 10px; width: 100%;
  border: 0; border-radius: 4px; background: none;
  font-size: 14px; color: var(--ink); text-align: left; cursor: pointer; white-space: nowrap;
}
.menu-item .ic { width: 16px; height: 16px; color: var(--ink-2); }
.menu-item:hover { background: var(--hover); }
.menu-item:disabled { opacity: 0.5; cursor: default; }
.menu-sep { height: 1px; background: var(--line); margin: 4px 0; }
.menu-head { display: grid; gap: 2px; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.menu-head span { font-size: 12px; color: var(--ink-2); }
.menu-panel { width: 290px; padding: 14px; gap: 12px; }
.menu-foot { display: flex; justify-content: space-between; gap: 8px; }

/* "Goes to": where a new post goes, in the card dialog and in the list. */
.channel-anchor { min-width: 0; width: 100%; }
.channel-pick {
  display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; min-height: 30px; padding: 0 6px;
  border: 1px solid transparent; border-radius: 4px; background: none;
  font-size: 13px; color: var(--ink); text-align: left; cursor: pointer;
}
.channel-pick:hover, .channel-pick[aria-expanded="true"] { border-color: var(--line); background: var(--canvas); }
.channel-pick .ic { flex: none; width: 14px; height: 14px; color: var(--ink-2); }
.channel-pick .ellipsis { flex: 1; min-width: 0; }
.channel-pick.is-empty, .channel-pick.is-empty .ic { color: var(--accent); font-weight: 600; }
.channel-menu { width: 560px; max-width: calc(100vw - 32px); padding: 8px; gap: 6px; }
/* A task of the person's own: Task or Email, each with what it does. */
.type-menu { width: 420px; max-width: calc(100vw - 32px); }
.type-item { align-items: flex-start; min-height: 0; padding: 8px 10px; white-space: normal; }
.type-item > .ic { margin-top: 2px; }
.type-text { flex: 1; display: grid; gap: 2px; min-width: 0; }
.type-text span { font-size: 12px; color: var(--ink-2); }
.type-item .type-on { color: var(--accent); margin-top: 2px; }
.channel-search {
  width: 100%; min-height: 34px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 4px; background: var(--canvas); font-size: 14px; color: var(--ink);
}
.channel-list { display: grid; max-height: 280px; overflow-y: auto; }
.channel-option { min-width: 0; }
.channel-option .ellipsis { flex: 1; min-width: 0; }
.channel-option[aria-pressed="true"] { font-weight: 600; }
.channel-option[aria-pressed="true"] .ic { color: var(--accent); }
.channel-code { flex: none; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.channel-note { padding: 6px 4px; }
.fact-pick .fact-value { padding: 0; }
.fact-pick .channel-pick { min-height: 32px; padding: 0 10px; font-size: 14px; }
/* A card's own fields, changed on the card as a Planner task's are (0.2.5 Change 61). */
.fact-edit .fact-value { padding: 0; border: 0; background: none; }
.fact-edit select, .fact-edit input {
  width: 100%; min-height: 34px; padding: 4px 8px;
  font: inherit; font-size: 14px; color: var(--ink);
  background: var(--canvas); border: 1px solid var(--line-2); border-radius: 4px;
}
.fact-edit select:focus, .fact-edit input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.fact-owner .fact-value .ellipsis { flex: 1; min-width: 0; }
/* An agenda's topic, and a channel's kinds (Change 68). */
.fact-edit .fact-value:has(.topic-hint) { flex-wrap: wrap; gap: 4px; }
.topic-hint { flex-basis: 100%; }
.kinds-note { align-items: center; }
.kinds-note > span { flex: 1; min-width: 0; }
.owner-give { flex: none; height: 26px; margin-right: -6px; font-size: 13px; }
.cell-team .channel-menu { left: auto; right: 0; }
.row-meta .channel-anchor { width: auto; max-width: 100%; }
.row-meta .channel-pick { min-height: 22px; padding: 0 2px; font-size: 12px; color: var(--ink-2); }
.check-row { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.check-row input { width: 18px; height: 18px; accent-color: var(--accent); }

/* -- fields and buttons -------------------------------------------------------------------------------- */
.field { display: grid; gap: 4px; font-size: 12px; color: var(--ink-2); min-width: 0; }
.field input, .field textarea, .field select, .typed input {
  width: 100%; min-height: 34px; padding: 7px 10px;
  font-size: 14px; line-height: 1.45; color: var(--ink);
  background: var(--canvas); border: 1px solid var(--line-2); border-radius: 4px;
}
.field textarea { resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus, .typed input:focus {
  outline: 0; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hint { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; color: var(--ink-2); }
.hint .ic { width: 14px; height: 14px; margin-top: 1px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 14px;
  border: 1px solid transparent; border-radius: 4px;
  font-size: 14px; cursor: pointer; white-space: nowrap; background: transparent; color: var(--ink);
}
.btn .ic { width: 16px; height: 16px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--brand); color: var(--on-brand); font-weight: 700; }
.btn-primary:hover:not(:disabled) { background: var(--brand-hover); }
.btn-secondary { background: var(--canvas); border-color: var(--line-2); }
.btn-secondary:hover:not(:disabled) { background: var(--hover); }
.btn-quiet { color: var(--accent); padding: 0 8px; }
.btn-quiet:hover { background: var(--hover); }

/* -- small parts: check circle, status, labels, due, priority -------------------------------------------- */
.check {
  position: relative; flex: none;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; background: none; color: var(--accent); cursor: pointer; padding: 0;
}
.check::before {
  content: ""; position: absolute; inset: 7px;
  border: 1.5px solid var(--ink-3); border-radius: 50%;
}
.check .ic { position: relative; width: 11px; height: 11px; stroke-width: 3.5; opacity: 0; }
button.check:hover::before { border-color: var(--accent); }
button.check:hover .ic { opacity: 1; }
.check.is-done::before { background: var(--accent); border-color: var(--accent); }
.check.is-done .ic { opacity: 1; color: var(--canvas); }
.check.is-static { cursor: inherit; }
.check.is-static::before { display: none; }
.check.is-static .avatar { display: none; }
.check-lg::before { inset: 5px; }
.check-lg .ic { width: 13px; height: 13px; }

.status-glyph {
  width: 14px; height: 14px; flex: none; border-radius: 50%;
  display: inline-grid; place-items: center;
  border: 1.5px solid var(--ink-3);
}
.status-glyph .ic { width: 14px; height: 14px; }
.st-progress { border-color: var(--accent); background: linear-gradient(90deg, var(--accent) 50%, transparent 50%); }
.st-revise { border-color: var(--warn); border-style: dashed; }
.st-later, .st-check { border: 0; }
.st-later { color: var(--ink-3); }
.st-check { color: var(--alert); }
.st-done { border: 0; background: var(--accent); color: var(--canvas); }
.st-done .ic { width: 9px; height: 9px; stroke-width: 4; }
.in-check { width: 18px; height: 18px; }
.in-check .ic { width: 16px; height: 16px; }

.label {
  display: inline-flex; align-items: center; gap: 4px;
  height: 20px; padding: 0 6px; border-radius: 4px;
  font-size: 12px; line-height: 1; white-space: nowrap;
  background: var(--accent-soft); color: var(--ink);
}
.label .ic { width: 12px; height: 12px; }
.label-high { background: var(--alert-soft); color: var(--alert); }
.label-esc { background: var(--info-soft); color: var(--info); }
.label-gap, .label-attach { background: var(--warn-soft); color: var(--warn); }
.label-ok { background: var(--accent-soft); color: var(--accent); }
.label-src .ic { color: var(--accent); }

.due {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 6px; border-radius: 4px;
  border: 1px solid transparent; font-size: 12px; color: var(--ink-2); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.due .ic { width: 13px; height: 13px; }
.due-late { color: var(--alert); background: var(--alert-soft); border-color: var(--alert-line); }
.due-soon { color: var(--warn); background: var(--warn-soft); border-color: var(--warn-line); }
.due-later { padding: 0; }
.cell .due { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

.prio { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; white-space: nowrap; }
.prio-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.prio-low .prio-dot { background: var(--ink-3); }
.prio-high { color: var(--alert); }
.prio-mark { width: 6px; text-align: center; font-weight: 700; }

/* -- list (grid) --------------------------------------------------------------------------------------------- */
.grid {
  container: grid / inline-size;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.grid-head, .row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 128px 168px 124px 84px 128px;
  column-gap: 10px;
  align-items: center;
  padding: 0 6px 0 8px;
}
.grid-head { height: 38px; font-size: 12px; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.row {
  position: relative;
  min-height: 54px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.grid-group:last-child > .row:last-child, .grid-group:last-child > .done-toggle:last-child { border-bottom: 0; }
.row:hover { background: var(--hover); }
/* The card's name, with its … menu at the right end of the Card column. */
.row-cell { display: flex; align-items: center; gap: 2px; min-width: 0; }
.row-cell > .row-main { flex: 1 1 auto; }
.row-cell > .more-anchor, .row-cell > .more-slot { flex: none; }
/* The co-work app's state on a card (0.2.5 Change 64), a dot where its … button is: blue for an answer not yet opened,
   orange for one waiting for the person, grey and pulsing while it works. It gives way to the button under the mouse. */
.more-slot { position: relative; display: flex; align-items: center; }
/* Change 67: its own name, as .agent-dot is the co-work app picker's round button, whose size and ring it took on. Small,
   with no ring, and on the middle of the … button, which is on the middle of the row. */
.cowork-dot {
  position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; margin: 0; transform: translate(-50%, -50%);
  border: 0; border-radius: 50%; box-shadow: none; pointer-events: none;
}
.cowork-new { background: var(--dot-new); }
.cowork-input { background: var(--dot-input); }
.cowork-working { background: var(--ink-3); animation: cowork-pulse 1.4s ease-in-out infinite; }
@keyframes cowork-pulse { 0%, 100% { opacity: 0.35; transform: translate(-50%, -50%) scale(0.75); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@media (prefers-reduced-motion: reduce) { .cowork-working { animation: none; } }
/* While the … button shows, the dot does not, as in Claude's own list. visibility, not opacity: the grey dot's pulse
   animates its opacity, which would win over a rule. */
@media (hover: hover) {
  .row:hover .cowork-dot, .row:has(:focus-visible) .cowork-dot, .tile:hover .cowork-dot, .tile:has(:focus-visible) .cowork-dot,
  .more-slot:has(.more[aria-expanded="true"]) .cowork-dot { visibility: hidden; }
}
@media (hover: none) { .more-slot .cowork-dot { position: static; transform: none; margin: 0 6px 0 2px; } }
.row-main {
  display: grid; gap: 2px; min-width: 0;
  padding: 8px 0; border: 0; background: none; text-align: left; cursor: pointer;
}
/* Under a name: the My Day mark, what happened to it, and where it is from. */
.sub-dot { margin: 0 5px; color: var(--ink-3); }
.day-mark { display: inline-flex; align-items: center; gap: 3px; color: var(--accent); vertical-align: -2px; }
.day-mark .ic, .cell .day-mark .ic { width: 12px; height: 12px; color: inherit; }
.row-note { color: var(--ink); }
.on-list { display: inline-flex; align-items: center; gap: 4px; vertical-align: -2px; }
.row-sub .on-list .ic { width: 12px; height: 12px; }
.row.is-closed.has-note .row-sub { display: block; }
.tile-day { display: flex; font-size: 12px; }
.group-head.day-head { cursor: default; background: var(--paper); }
.column-since .column-head > .ic { width: 16px; height: 16px; color: var(--ink-2); }
.group-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.row-title { font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-sub { font-size: 12px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; }
.cell .ic { width: 15px; height: 15px; color: var(--ink-2); }
.row-meta { display: none; }
.row.is-closed .row-title { text-decoration: line-through; color: var(--ink-2); }
.row.is-closed .row-sub { display: none; }
.row.is-later .row-title { color: var(--ink-2); }

.group-head {
  display: flex; align-items: center; gap: 8px; width: 100%;
  min-height: 42px; padding: 0 12px;
  border: 0; border-bottom: 1px solid var(--line); background: var(--canvas);
  font-size: 14px; font-weight: 700; text-align: left; cursor: pointer;
}
.grid-group:first-of-type .group-head { border-top: 0; }
.group-head > .ic { width: 16px; height: 16px; color: var(--ink-2); }
.group-head[aria-expanded="false"] .fold-caret { transform: rotate(-90deg); }
.fold-caret { transition: transform 0.12s; }
.group-count { font-size: 12px; font-weight: 400; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.group-meta { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--ink-2); }

.done-toggle {
  display: flex; align-items: center; gap: 6px; width: 100%;
  min-height: 38px; padding: 0 12px 0 52px;
  border: 0; border-bottom: 1px solid var(--line); background: none;
  font-size: 13px; color: var(--ink-2); text-align: left; cursor: pointer;
}
.done-toggle:hover { color: var(--ink); background: var(--hover); }
.done-toggle .ic { width: 14px; height: 14px; }
.done-count { margin-left: 4px; font-variant-numeric: tabular-nums; }

/* The "more" button appears on hover where there is a mouse, and always on touch screens. With the keyboard, it shows
   while the focus is in the row; a click leaves it to the mouse, so it goes once the mouse leaves (Change 117). */
@media (hover: hover) {
  .row .more, .tile .more { opacity: 0; }
  .row:hover .more, .row:has(:focus-visible) .more, .tile:hover .more, .tile:has(:focus-visible) .more,
  .more[aria-expanded="true"] { opacity: 1; }
}

/* As narrow as a phone's, and not beside a panel, a list stacks each row (Change 79: not where the page fitted it). */
@container grid (max-width: 760px) {
  :where(.grid:not([data-fit])) .grid-head { display: none; }
  :where(.grid:not([data-fit])) .row {
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: start;
    padding: 6px 4px 10px 6px;
  }
  :where(.grid:not([data-fit])) .row .check { grid-column: 1; grid-row: 1; }
  :where(.grid:not([data-fit])) .row .check.is-static .avatar { display: inline-grid; }
  :where(.grid:not([data-fit])) .row-cell { grid-column: 2; grid-row: 1; align-items: flex-start; }
  :where(.grid:not([data-fit])) .row-main { padding: 5px 0 4px; }
  :where(.grid:not([data-fit])) .row-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 15px; }
  :where(.grid:not([data-fit])) .row-sub { display: none; }
  :where(.grid:not([data-fit])) .row-sub:has(.day-mark, .row-note) { display: block; }
  :where(.grid:not([data-fit])) .row .more { margin-top: 2px; }
  :where(.grid:not([data-fit])) .cell { display: none; }
  :where(.grid:not([data-fit])) .row-meta {
    grid-column: 2; grid-row: 2;
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
    font-size: 12px; color: var(--ink-2);
  }
  :where(.grid:not([data-fit])) .row-meta .ic { width: 13px; height: 13px; }
  :where(.grid:not([data-fit])) .meta-src, :where(.grid:not([data-fit])) .meta-status, :where(.grid:not([data-fit])) .meta-owner { display: inline-flex; align-items: center; gap: 4px; }
  :where(.grid:not([data-fit])) .row-meta .status-glyph { width: 12px; height: 12px; }
  :where(.grid:not([data-fit])) .done-toggle { padding-left: 44px; }
}

/* -- board ------------------------------------------------------------------------------------------------ */
.board {
  display: flex; align-items: flex-start; gap: 16px;
  overflow-x: auto; padding: 2px 2px 16px;
  scroll-snap-type: x proximity;
}
.column { flex: 0 0 276px; display: grid; gap: 8px; scroll-snap-align: start; }
.column-head { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 2px; font-size: 15px; }
.column-head > .ic { width: 16px; height: 16px; color: var(--ink-2); }
.column-meta { font-size: 12px; color: var(--ink-2); margin-top: -6px; padding: 0 2px; }
.column-body { display: grid; gap: 8px; }
.column .done-toggle { border: 0; padding-left: 4px; border-radius: 4px; }
.tile {
  position: relative;
  display: grid; gap: 6px;
  padding: 10px 12px 0;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: var(--shadow);
  cursor: pointer;
}
.tile:hover { border-color: var(--line-2); box-shadow: var(--shadow-hover); }
.tile-labels { display: flex; flex-wrap: wrap; gap: 4px; padding-right: 26px; min-height: 20px; }
.tile-head { display: flex; align-items: flex-start; gap: 2px; margin-left: -8px; }
.tile-head .check { margin-top: -6px; }
.tile-head.no-check { margin-left: 0; }
.tile-title {
  border: 0; background: none; padding: 0; text-align: left; cursor: pointer;
  font-size: 14px; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere;
}
.tile-sub {
  font-size: 12px; color: var(--ink-2); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tile-status { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.tile-foot {
  display: flex; align-items: center; gap: 8px;
  margin: 4px -12px 0; padding: 8px 12px;
  border-top: 1px solid var(--line);
  font-size: 12px;
}
.tile-icons { display: flex; align-items: center; gap: 10px; margin-left: auto; color: var(--ink-3); }
.tile-icons > span { display: inline-flex; align-items: center; gap: 2px; }
.tile-icons .ic { width: 15px; height: 15px; }
.tile-icons small { font-size: 11px; }
.tile .more-slot { position: absolute; top: 4px; right: 4px; }
.tile.is-closed .tile-title { text-decoration: line-through; color: var(--ink-2); }
.tile.is-closed { box-shadow: none; }

/* -- empty states ---------------------------------------------------------------------------------------------- */
.empty {
  display: grid; justify-items: center; gap: 12px;
  padding: 56px 16px; text-align: center; color: var(--ink-2);
  background: var(--canvas); border: 1px solid var(--line); border-radius: 8px;
}
.empty-mark {
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; background: var(--accent-soft); color: var(--accent);
}
.empty-mark .ic { width: 22px; height: 22px; }

/* -- detail dialog ------------------------------------------------------------------------------------------------ */
.scrim-detail { display: block; position: fixed; inset: 0; z-index: 40; background: var(--scrim); }
.detail {
  position: fixed; z-index: 41;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(1060px, calc(100vw - 48px));
  height: min(840px, calc(100vh - 48px));
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--canvas); color: var(--ink);
  border-radius: 8px; box-shadow: var(--shadow-pop); overflow: hidden;
}
.detail-bar {
  display: flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 0 8px 0 20px;
  border-bottom: 1px solid var(--line);
}
.detail-back { display: none; }
.detail-crumb { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.detail-crumb .ic { width: 15px; height: 15px; color: var(--accent); }
.dot-sep { color: var(--ink-3); }
.detail-tools { display: flex; align-items: center; gap: 2px; }
.detail-panes { display: grid; grid-template-columns: minmax(0, 1fr) 340px; min-height: 0; }
.detail-main { overflow-y: auto; padding: 18px 24px 28px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.detail-side {
  overflow-y: auto; background: var(--side); border-left: 1px solid var(--line);
  padding: 18px 20px 28px; display: flex; flex-direction: column; gap: 22px; min-width: 0;
}
.detail-title-row { display: flex; align-items: flex-start; gap: 6px; margin-left: -6px; }
.detail-title-row h2 { font-size: 20px; line-height: 1.3; padding-top: 3px; outline: 0; overflow-wrap: anywhere; }
.detail-meta { font-size: 12px; color: var(--ink-2); margin-top: -8px; padding-left: 32px; }
.labels { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 32px; }
.labels:empty { display: none; }
.detail-context { font-size: 13px; color: var(--ink-2); }
.esc-box {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px; border-radius: 6px;
  background: var(--info-soft); border: 1px solid var(--info-line); font-size: 13px;
}
.esc-box > .ic { color: var(--info); width: 16px; height: 16px; margin-top: 1px; }
.chain { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; font-size: 12px; color: var(--ink-2); }
.chain-now { font-weight: 700; color: var(--info); }
.chain-sep { width: 12px; height: 12px; }

.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.fact { display: grid; gap: 4px; min-width: 0; }
.fact-wide { grid-column: 1 / -1; }
.fact-label { font-size: 12px; color: var(--ink-2); }
.fact-value {
  display: flex; align-items: center; gap: 8px; min-height: 34px; min-width: 0;
  padding: 4px 10px; border: 1px solid var(--line); border-radius: 4px;
  background: var(--paper); font-size: 13px; overflow-wrap: anywhere;
}
.fact-value > .ic { width: 16px; height: 16px; color: var(--ink-2); }

.subtabs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.subtab {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px;
  border: 1px solid var(--line-2); border-radius: 999px; background: var(--canvas);
  font-size: 13px; cursor: pointer;
}
.subtab .ic { width: 15px; height: 15px; }
.subtab[aria-selected="true"] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); font-weight: 700; }
.count {
  display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 999px;
  font-size: 11px; line-height: 17px; font-weight: 400; text-align: center;
  background: var(--accent-soft); color: var(--ink);
}
.subtab[aria-selected="true"] .count { background: var(--on-brand); color: var(--brand); }

.message { display: grid; gap: 12px; }
.subject { font-weight: 700; font-size: 15px; }
.md { font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.md p + p, .md p + ul, .md ul + p { margin-top: 8px; }
.md ul { margin: 0; padding-left: 20px; }
.gap-warn {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 10px; border-radius: 6px; font-size: 13px;
  background: var(--warn-soft); border: 1px solid var(--warn-line);
}
.gap-warn .ic { width: 16px; height: 16px; color: var(--warn); margin-top: 1px; }
.files {
  list-style: none; margin: 0; padding: 0;
  border: 1px solid var(--line); border-radius: 6px;
}
.files li {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 13px;
}
.files li:last-child { border-bottom: 0; }
.files li > .ic { width: 16px; height: 16px; color: var(--ink-2); }
.file-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.files-empty { padding: 12px 0; }

.side-block { display: grid; gap: 10px; }
.side-block h3 { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.side-block h3 .count { background: var(--canvas); border: 1px solid var(--line); }
.side-block .btn-quiet { justify-self: start; padding-left: 0; }
/* The co-work app's questions, in the chat (0.2.5 Change 140). */
.chat-question .chat-bubble { display: grid; gap: 8px; }
.chat-question .q-text { margin: 0; font-weight: 600; }
.chat-question .q-hint { margin: 0; font-size: 12px; color: var(--ink-2); }
.chat-question .typed input, .chat-question .typed .btn { height: 34px; min-height: 34px; }
/* The answer picked keeps its colours under the pointer, so its words stay readable. */
.opt[aria-pressed="true"]:hover:not(:disabled) { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }

.chat-head .count.q-open { margin-left: 6px; background: var(--warn-soft); border: 1px solid var(--warn-line); color: var(--ink); font-weight: 600; }
.questions { display: grid; gap: 10px; }
.question {
  display: grid; gap: 10px; min-width: 0; margin: 0;
  padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--canvas);
}
.question legend { float: left; width: 100%; padding: 0; font-size: 13px; font-weight: 700; display: flex; gap: 6px; align-items: flex-start; }
.question.is-answered { border-color: var(--line-2); }
.q-done { width: 15px; height: 15px; color: var(--accent); stroke-width: 3; margin-top: 1px; }
.options { clear: both; display: flex; flex-wrap: wrap; gap: 6px; }
.opt {
  min-height: 30px; padding: 4px 12px;
  border: 1px solid var(--line-2); border-radius: 999px; background: var(--canvas);
  font-size: 13px; color: var(--ink); cursor: pointer; text-align: left;
}
.opt:hover:not(:disabled) { background: var(--hover); }
.opt[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.opt:disabled { cursor: default; opacity: 0.8; }
.typed { display: flex; gap: 6px; }
.typed input { flex: 1; min-width: 0; min-height: 30px; padding: 4px 10px; font-size: 13px; }
.typed .btn { height: 30px; font-size: 13px; }
.answer { font-size: 12px; color: var(--ink-2); }
.notes { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13px; }
.related { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.related li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; }
.rel-text { display: grid; gap: 2px; min-width: 0; }
.rel-status { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.rel-status .status-glyph { width: 12px; height: 12px; }
.side-empty { margin: auto 0; display: grid; justify-items: center; gap: 6px; text-align: center; font-size: 13px; color: var(--ink-2); padding: 24px 0; }
.side-empty > .ic {
  width: 44px; height: 44px; padding: 11px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent); margin-bottom: 4px;
}
.side-empty strong { color: var(--ink); }

.detail-actions {
  display: grid; gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid var(--line); background: var(--canvas);
}
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.actions-gap { flex: 1; }
.form {
  display: grid; gap: 8px; padding: 12px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--paper);
}
.hint-attach { color: var(--warn); }

/* -- a question that must be answered, over everything else ------------------------------------------------------- */
.scrim-modal { display: block; position: fixed; inset: 0; z-index: 55; background: var(--scrim); }
.modal {
  position: fixed; z-index: 56;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto;
  display: grid; gap: 12px; padding: 20px 24px;
  background: var(--canvas); color: var(--ink);
  border-radius: 8px; box-shadow: var(--shadow-pop);
}
.modal h2 { font-size: 20px; line-height: 1.3; }
.modal-about { font-size: 13px; color: var(--ink-2); margin-top: -8px; overflow-wrap: anywhere; }
.modal-actions { margin-top: 4px; }
/* Agent and Context, from the profile menu. */
.modal-agent, .modal-context { width: min(580px, calc(100vw - 32px)); }
.agent-list { display: grid; gap: 6px; }
.agent-row {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--canvas); color: var(--ink);
  font: inherit; text-align: left; cursor: pointer;
}
.agent-row:hover { background: var(--hover); }
.agent-row.is-picked { border-color: var(--accent); background: var(--accent-soft); }
.agent-row.is-missing .agent-name { color: var(--ink-2); }
.agent-dot { flex: none; width: 16px; height: 16px; margin-top: 2px; border: 2px solid var(--line-2); border-radius: 50%; }
.agent-row.is-picked .agent-dot { border-color: var(--accent); box-shadow: inset 0 0 0 3px var(--canvas); background: var(--accent); }
.agent-text { display: grid; gap: 2px; min-width: 0; }
.agent-name { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; }
.agent-state { font-size: 12px; color: var(--ink-2); overflow-wrap: anywhere; }
.agent-trying, .agent-ok { display: flex; align-items: flex-start; gap: 8px; }
.agent-ok .ic { width: 15px; height: 15px; color: var(--accent); flex: none; margin-top: 1px; }
.context-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.context-row { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 4px 4px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; }
.context-row > .ic { width: 15px; height: 15px; color: var(--ink-2); flex: none; }
.context-row .ellipsis { flex: 1; }
.context-row .icon-btn { width: 28px; height: 28px; }
.context-offer { display: grid; gap: 6px; }
.context-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.context-chips .btn { height: 28px; font-size: 12px; }
.context-edit { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.context-edit input { margin-top: 3px; flex: none; accent-color: var(--accent); }
.context-edit > span { display: grid; gap: 2px; font-size: 13px; }
.context-edit > span > span { font-size: 12px; color: var(--ink-2); }

/* -- the chat on a card ---------------------------------------------------------------------------------------------- */
/* The chat fills what the side has left, and is never less than 320px: when the questions, the notes and the group
   above it need more room, the side scrolls, and the chat's own log scrolls inside it. */
.detail-side:has(.chat) { overflow-y: auto; }
.chat { flex: 1 0 320px; display: flex; flex-direction: column; gap: 10px; min-height: 320px; }
.chat-log { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding-right: 2px; }
.chat-msg { display: grid; gap: 3px; max-width: 92%; }
.chat-msg.chat-you { align-self: flex-end; justify-items: end; }
.chat-bubble {
  padding: 8px 12px; border-radius: 8px; font-size: 13px; line-height: 1.5;
  background: var(--canvas); border: 1px solid var(--line);
}
.chat-you .chat-bubble { background: var(--accent-soft); border-color: transparent; }
.chat-msg.is-pending .chat-bubble { opacity: 0.85; }
.chat-bubble ul { padding-left: 18px; }
.chat-sources { display: flex; gap: 6px; align-items: flex-start; margin-top: 6px; font-size: 12px; color: var(--ink-2); }
.chat-sources .ic { width: 13px; height: 13px; margin-top: 2px; flex: none; }
.chat-meta { font-size: 11px; color: var(--ink-2); }
.is-thinking .chat-bubble { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); }
/* What the co-work session is doing, step by step, above Thinking… (Change 158): its words as small messages, its
   thoughts and tools as quiet lines. */
.chat-progress { display: grid; gap: 6px; }
.progress-head { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.progress-head .ic { width: 14px; height: 14px; color: var(--accent); }
.progress-earlier { margin: 0; font-size: 12px; color: var(--ink-2); }
.progress-more { justify-self: start; font-size: 12px; }
.chat-step { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; line-height: 1.45; color: var(--ink-2); }
.chat-step .ic { flex: none; width: 13px; height: 13px; margin-top: 2px; }
.chat-step span { min-width: 0; overflow-wrap: anywhere; }
.chat-step.step-think { font-style: italic; }
.chat-step.step-error { color: var(--alert); }
.chat-step-say .chat-bubble { padding: 6px 10px; font-size: 12.5px; }
/* A message stopped before it was answered, as in Claude's chat (Change 161). */
.chat-stopped { display: inline-flex; align-items: center; gap: 2px; color: var(--alert); }
.chat-stopped .ic { width: 11px; height: 11px; }
/* Stop sits in the box, beside send, as in Claude's chat: it stays where it is while the chat moves. */
.chat-stop-btn { color: var(--alert); }
.chat-stop-btn .ic { fill: currentColor; }
/* Stop sits beside Thinking…, for a question sent too soon. */
.chat-thinking-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chat-stop { height: 28px; padding: 0 10px; font-size: 12px; gap: 4px; }
.chat-stop .ic { width: 14px; height: 14px; }
.thinking-ring {
  width: 14px; height: 14px; flex: none; border: 2px solid var(--line-2); border-top-color: var(--accent); border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
/* One rounded box, the send key inside it on the right, as in a chat app. It grows with what is typed. */
.chat-box {
  display: flex; align-items: flex-end; gap: 6px; padding: 6px 6px 6px 14px;
  border: 1px solid var(--line-2); border-radius: 14px; background: var(--canvas);
  box-shadow: 0 1px 2px rgba(20, 56, 50, 0.05); transition: border-color 0.12s, box-shadow 0.12s;
}
.chat-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* Files dragged over the chat (Change 65): the box shows where they go. */
.chat.is-drop .chat-box, .chat-dock.is-drop .chat-box { border-color: var(--accent); border-style: dashed; background: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-soft); }
/* The question box at the card's foot, above its buttons, out of the part that scrolls (Change 70). */
.chat-dock { flex: none; display: grid; gap: 8px; padding: 10px 20px; background: var(--side); border-top: 1px solid var(--line); }
.chat-dock .chat-files-draft, .chat-dock .chat-folder-form { margin: 0; }
.detail:has(.chat-dock) .chat { min-height: 0; }
.detail:has(.chat-dock) { grid-template-rows: auto minmax(0, 1fr) auto auto; }
.chat-box textarea {
  flex: 1; min-width: 0; resize: none; field-sizing: content; min-height: 22px; max-height: 160px; padding: 5px 0; margin: 0;
  border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 13px; line-height: 1.5;
}
.chat-box textarea:focus, .chat-box textarea:focus-visible { outline: 0; }
.chat-box textarea::placeholder { color: var(--ink-3); }
.chat-send {
  display: grid; place-items: center; width: 30px; height: 30px; flex: none; padding: 0;
  border: 0; border-radius: 9px; background: transparent; color: var(--ink-3); cursor: pointer;
}
.chat-send .ic { width: 17px; height: 17px; }
.chat-send:hover { background: var(--hover); color: var(--ink); }
.chat-box:has(textarea:not(:placeholder-shown)) .chat-send { background: var(--brand); color: var(--on-brand); }
.chat-box:has(textarea:not(:placeholder-shown)) .chat-send:hover { background: var(--brand-hover); }

/* -- a Planner task on a card -------------------------------------------------------------------------------------- */
.planner-title { flex: 1; min-width: 0; padding-top: 0 !important; }
.planner-title input {
  width: 100%; padding: 2px 6px;
  border: 1px solid transparent; border-radius: 4px; background: none;
  font: inherit; color: inherit;
}
.planner-title input:hover:not(:disabled) { border-color: var(--line-2); }
.planner-title input:focus { outline: 0; border-color: var(--accent); }
.planner-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-size: 13px; padding-left: 38px; margin-top: -8px; }
.planner-links a { display: inline-flex; align-items: center; gap: 5px; }
.planner-links .ic { width: 14px; height: 14px; }
.planner-meta { padding-left: 38px; }
.planner-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 28px; font-size: 13px; }
.planner-row > .ic { width: 16px; height: 16px; color: var(--ink-2); margin-right: 16px; margin-left: 6px; }
.person-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 8px 0 3px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--canvas); font-size: 13px;
}
.chip-x { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 2px; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.chip-x:hover { background: var(--hover); }
.chip-x .ic { width: 11px; height: 11px; }
.planner-add {
  height: 28px; padding: 0 8px;
  border: 1px dashed var(--line-2); border-radius: 999px; background: var(--canvas);
  font: inherit; font-size: 13px; color: var(--ink-2); cursor: pointer;
}
.planner-add:hover { background: var(--hover); }
.field-static {
  display: flex; align-items: center; min-height: 36px; padding: 4px 10px;
  border: 1px solid var(--line); border-radius: 4px; background: var(--paper);
  font-size: 14px; color: var(--ink);
}
.planner-block { display: grid; gap: 8px; }
.planner-block h3 { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.planner-off { flex-wrap: wrap; align-items: center; }
.planner-off span { flex: 1 1 240px; }
.planner-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.planner-check-title {
  flex: 1; min-width: 0; padding: 4px 6px;
  border: 1px solid transparent; border-radius: 4px; background: none;
  font: inherit; color: var(--ink);
}
.planner-check-title:hover:not(:disabled) { border-color: var(--line-2); }
.planner-check-title:focus { outline: 0; border-color: var(--accent); }
.planner-check-title.is-done { text-decoration: line-through; color: var(--ink-2); }

/* -- toast ----------------------------------------------------------------------------------------------------------- */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 60;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  max-width: min(560px, calc(100% - 32px));
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px; border-radius: 6px;
  background: var(--toast); color: var(--toast-ink);
  font-size: 14px; box-shadow: var(--shadow-pop);
}
.toast a, .toast-undo { color: var(--toast-link); font-weight: 700; }
.toast-undo { border: 0; background: none; padding: 4px 2px; font-size: 14px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.toast-error { background: var(--alert-strong); color: #ffffff; }
.toast-error a { color: #ffffff; }

/* -- signed-out and setup pages ------------------------------------------------------------------------------------------- */
.main-plain { max-width: 560px; margin: 48px auto; }
.plain-card {
  display: grid; gap: 14px; padding: 28px;
  background: var(--canvas); border: 1px solid var(--line); border-radius: 8px;
}
.plain-card h1 { font-size: 22px; }

/* -- narrower screens -------------------------------------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .frame { grid-template-columns: minmax(0, 1fr); }
  html.has-notes .frame, html.has-notes.nav-hidden .frame { grid-template-columns: minmax(0, 1fr) 300px; }
  .nav {
    position: fixed; z-index: 50; top: 0; bottom: 0; left: 0;
    width: min(300px, 86vw); height: auto;
    padding-top: calc(16px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-102%); transition: transform 0.18s ease-out;
  }
  html.has-nav .nav { transform: none; box-shadow: var(--shadow-pop); }
  html.nav-hidden .nav { display: flex; }
  .nav-brand { display: flex; }
  html.has-nav .scrim-nav { display: block; position: fixed; inset: 0; z-index: 45; background: var(--scrim); }
  .seg-tabs { display: inline-flex; }
}

@media (max-width: 760px) {
  body { font-size: 15px; }
  .appname-text { font-size: 17px; }
  .loaded { display: none; }
  .main {
    gap: 12px;
    padding-block: 14px 96px;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  .crumbs { font-size: 18px; }
  .today { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px 16px; }
  /* A phone has no room beside the list: the panel lies over it, under the bar, until it is closed. */
  html.has-notes .frame, html.has-notes.nav-hidden .frame { grid-template-columns: minmax(0, 1fr); }
  .notes-panel { position: fixed; z-index: 40; inset: calc(var(--appbar-h) + env(safe-area-inset-top, 0px)) 0 0 0; height: auto; box-shadow: var(--shadow-pop); }
  .today-date { display: none; }
  .toolbar { gap: 8px; }
  .seg-btn span { display: none; }
  .seg-tabs .seg-btn { padding: 0 14px; }
  .seg-btn, .tool-btn { height: 36px; }
  .toolbar-sep { display: none; }
  .search { order: 4; flex: 1 1 150px; width: auto; height: 38px; }
  .group-by { order: 5; margin-left: 0; }
  .search input { font-size: 16px; }
  .tool-btn span { display: none; }
  .group-by > span { display: none; }
  .menu-panel, .channel-menu { position: fixed; left: 12px; right: 12px; top: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); width: auto; max-width: none; }
  .channel-search { font-size: 16px; }
  .field input, .field textarea, .field select, .typed input { font-size: 16px; }
  .field-row { grid-template-columns: 1fr; }
  .column { flex-basis: min(300px, 82vw); }

  /* The detail becomes a full-screen page, like the Teams mobile task view. */
  .detail {
    inset: 0; top: 0; left: 0; transform: none;
    width: 100%; height: 100%; border-radius: 0;
    padding-top: env(safe-area-inset-top, 0px);
  }
  .detail-bar { padding: 0 6px; min-height: 52px; }
  .detail-back { display: inline-grid; }
  .detail-close { display: none; }
  .detail-crumb { font-size: 13px; }
  .detail-panes { display: block; overflow-y: auto; }
  .detail-main, .detail-side { overflow: visible; }
  .detail-main { padding: 16px max(16px, env(safe-area-inset-right, 0px)) 20px max(16px, env(safe-area-inset-left, 0px)); }
  .detail-side { border-left: 0; border-top: 1px solid var(--line); padding: 18px max(16px, env(safe-area-inset-right, 0px)) 24px max(16px, env(safe-area-inset-left, 0px)); }
  .detail-title-row h2 { font-size: 19px; }
  .facts { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--line); }
  .fact { grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--line); }
  .fact-value { border: 0; background: none; padding: 0; min-height: 24px; font-size: 14px; }
  .opt { min-height: 36px; font-size: 14px; }
  .typed input { min-height: 36px; }
  .typed .btn { height: 36px; }
  .detail-actions {
    padding: 10px max(12px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
  }
  .detail-actions .actions .btn { flex: 1 1 40%; height: 40px; }
  .detail-actions .actions .btn-minor { height: 36px; }
  .detail-actions .actions-gap { display: none; }
  .modal { padding: 16px; }
  .detail-side:has(.chat) { overflow: visible; }
  .chat { flex: none; min-height: 0; }
  .chat-log { max-height: none; overflow: visible; }
  .chat-box textarea { font-size: 16px; }
  .modal .actions .btn { flex: 1 1 30%; height: 40px; }
  .modal .actions-gap { display: none; }
  .planner-links, .planner-meta { padding-left: 0; }
  .planner-add, .planner-check-title { font-size: 16px; }
}

/* -- a channel's own view: teams open to show their channels, every task in the plan, goals and labels -- */

.nav-team { position: relative; display: flex; align-items: center; }
.nav-team .nav-item { flex: 1 1 auto; min-width: 0; }
.nav-team.has-channels .nav-item { padding-right: 34px; }
.nav-expand { position: absolute; right: 2px; width: 28px; height: 28px; }
.nav-expand .ic { width: 15px; height: 15px; transition: transform 0.12s; }
.nav-expand[aria-expanded="false"] .ic { transform: rotate(-90deg); }
.nav-channels { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; margin: 0 0 4px 18px; padding-left: 8px; border-left: 1px solid var(--line); }
.nav-channels .nav-item { min-width: 0; min-height: 32px; font-size: 13px; }
.nav-channels .nav-item .ic { flex: none; width: 14px; height: 14px; }
.nav-channels .nav-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A channel's … menu at its right: Open in new tab, Pin or Unpin, Copy link. A pinned channel has a small pin after its
   name (0.2.5 Change 170). The button shows as a row's does: on hover, or with the focus in it. */
.nav-ch { position: relative; display: flex; align-items: center; min-width: 0; }
.nav-ch .nav-item { flex: 1 1 auto; padding-right: 34px; }
.nav-ch-anchor { position: absolute; top: 0; bottom: 0; right: 2px; display: flex; align-items: center; }
.nav-ch .more { width: 28px; height: 28px; }
.nav-ch .more .ic { width: 15px; height: 15px; }
.nav-channels .nav-item .ic.nav-pin { width: 12px; height: 12px; color: var(--ink-3); }
@media (hover: hover) {
  .nav-ch .more { opacity: 0; }
  .nav-ch:hover .more, .nav-ch:has(:focus-visible) .more, .nav-ch .more[aria-expanded="true"] { opacity: 1; }
}

.crumb-channel { display: inline-flex; align-items: center; gap: 4px; }
.crumb-channel .ic { width: 18px; height: 18px; color: var(--ink-2); }
.toolbar-push { flex: 1 1 auto; }
.toolbar-project .search { flex: 0 1 320px; }
.project-note { margin: 0 0 10px; color: var(--warn); }
.project-help { margin: 10px 2px 0; }

.grid-project { container: pgrid / inline-size; overflow: visible; }
/* A channel's columns, in the one order every list keeps (Change 79): Task, Quick look, Assigned to, Status, Priority,
   Due, Bucket, Goal, Kind, Start, Finish. The page shows as many as fit, and a narrower list gives up the last first. */
.grid-project .grid-head, .grid-project .row {
  grid-template-columns: 36px minmax(200px, 1fr) 80px 130px 110px 100px 100px 72px 72px 72px 100px 140px 140px 76px 76px;
}
.cell-bucket .ellipsis { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-start, .cell-finish { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.quick { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); }
.quick > span { display: inline-flex; align-items: center; gap: 2px; }
.quick .ic { width: 14px; height: 14px; }
.quick small { font-size: 12px; font-variant-numeric: tabular-nums; }
.toolbar-project .seg-tabs { display: inline-flex; }

/* "Add new task" closes each group; "Add task" heads each Board column. */
.add-task {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 0 12px 0 46px;
  border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--accent);
  font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.add-task .ic { width: 15px; height: 15px; }
.add-task:hover { background: var(--hover); }
.add-task.add-board { min-height: 36px; padding: 0 8px; border: 0; border-radius: 6px; color: var(--ink-2); }
.add-task.add-board:hover { color: var(--accent); }
.add-task-edit { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 46px; border-bottom: 1px solid var(--line); background: var(--canvas); }
.add-task-edit input {
  flex: 1; min-width: 0; height: 34px; padding: 0 10px; border: 1px solid var(--accent); border-radius: 6px;
  background: var(--canvas); color: var(--ink); font: inherit; font-size: 14px;
}
.add-task-edit input:focus { outline: 0; box-shadow: 0 0 0 3px var(--accent-soft); }
.add-task-edit .btn { height: 34px; }
.add-task-edit .add-plan {
  height: 34px; max-width: 200px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: 6px;
  background: var(--canvas); color: var(--ink); font: inherit; font-size: 13px;
}
.add-task-edit.add-board { flex-wrap: wrap; padding: 8px; border: 1px solid var(--line); border-radius: 8px; }
.add-task-edit.add-board input { flex-basis: 100%; }
.grid .add-task.add-list { padding-left: 46px; }

.board-project .column-head { display: flex; align-items: center; gap: 8px; }
.board-project .column-head .goal-name { font-size: inherit; }
.ptile .tile-head { margin-left: -8px; }
.ptile .tile-icons { display: inline-flex; align-items: center; gap: 8px; }
.ptile .who { margin-left: auto; }
.modal-task h2 { display: flex; align-items: center; gap: 8px; }
.modal-task h2 .ic { width: 20px; height: 20px; color: var(--accent); }
.modal-task .field-static { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; }
.grid-project .row { cursor: default; min-height: 48px; }
.grid-project .row-main { cursor: pointer; }
.grid-project .row-main:hover .row-title { text-decoration: underline; text-decoration-color: var(--line-2); }
.grid-project .row-sub { display: flex; align-items: center; gap: 4px; }
.grid-project .row-sub .ic { width: 12px; height: 12px; }
.grid-project .row.is-closed .row-sub { display: flex; }
.sub-count { display: inline-flex; flex: none; align-items: center; gap: 3px; margin-right: 6px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.who { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.who .avatar + .avatar { margin-left: -10px; box-shadow: 0 0 0 2px var(--canvas); }

/* A tag: a light pill in its own colour, in the app's shape and font. */
.tag {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-width: 0;
  height: 22px; padding: 0 9px; border: 1px solid var(--tag-line); border-radius: 999px;
  background: var(--tag-bg); color: var(--tag-fg); font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap;
}
.tag-text { overflow: hidden; text-overflow: ellipsis; }
.tag .ic { flex: none; width: 12px; height: 12px; color: currentColor; }
.tag-chip { height: 28px; padding-right: 4px; font-size: 13px; }

.cell-tag { position: relative; flex-wrap: wrap; gap: 4px; align-self: stretch; padding: 6px; margin: 0 -6px; border-radius: 6px; outline: 0; }
.cell-tag[data-act] { cursor: pointer; }
.cell-tag[data-act]:hover { background: var(--canvas); box-shadow: inset 0 0 0 1px var(--line-2); }
/* Selected cells, as in a spreadsheet: square corners, the first framed in dark green, the rest shaded light green. */
.cell-tag[data-act].is-selected, .cell-tag[data-act].is-selected:hover,
.cell-tag[data-act].is-fill, .cell-tag[data-act].is-fill:hover { border-radius: 0; background: var(--accent-soft); box-shadow: none; }
.cell-tag[data-act].is-anchor, .cell-tag[data-act].is-anchor:hover { background: var(--canvas); box-shadow: inset 0 0 0 2px var(--accent); }
.cell-tag[data-act].is-fill { box-shadow: inset 0 0 0 1px var(--accent); }
/* The grip at a row's left, shown on hover: drag it to move the row up, down or into another group. */
.drag-grip {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 2;
  display: grid; place-items: center; width: 14px; height: 28px; border-radius: 4px;
  color: var(--ink-3); cursor: grab; opacity: 0; touch-action: none;
}
.drag-grip .ic { width: 14px; height: 14px; }
.drag-grip:hover { color: var(--ink); background: var(--hover); }
.row:hover > .drag-grip, .row:has(:focus-visible) > .drag-grip { opacity: 1; }
.subtasks .sub-row { position: relative; }
.subtasks .sub-row > .drag-grip { left: -16px; }
.subtasks .sub-row:hover > .drag-grip, .subtasks .sub-row:has(:focus-visible) > .drag-grip { opacity: 1; }
.sub-row.is-dragging { opacity: 0.4; }
/* Today and Yesterday, two tables with a gap between them. */
.day-tables { display: grid; gap: 20px; }
/* A column head: its name, the sort it holds, and its menu, shown on hover. */
.col-head { display: flex; align-items: center; gap: 2px; min-width: 0; }
.col-head .menu-anchor { flex: none; }
.col-head .col-menu { width: 22px; height: 22px; opacity: 0; }
.col-head .col-menu .ic { width: 14px; height: 14px; }
.grid-head .col-head:hover .col-menu, .col-head .col-menu[aria-expanded="true"], .col-head .col-menu:focus-visible { opacity: 1; }
.col-head.is-sorted { color: var(--ink); font-weight: 700; }
.col-sorted { width: 14px; height: 14px; flex: none; color: var(--accent); }
.col-sort-menu { font-weight: 400; }
@media (hover: none) { .col-head .col-menu { opacity: 1; } }
/* A group's grip, at the left of its head: drag it to move the whole group up or down the list. */
.group-head { position: relative; }
.group-head > .group-grip { left: -6px; }
.group-head:hover > .group-grip, .group-head:has(:focus-visible) > .group-grip { opacity: 1; }
.grid-group.is-dragging { opacity: 0.5; }
/* A card's own checklist: each item's text is its own box, renamed in place. */
.card-checklist { margin: 4px 0 8px; }
.cl-text {
  flex: 1; min-width: 0; padding: 4px 6px; border: 1px solid transparent; border-radius: 4px; background: none;
  font: inherit; font-size: 14px; color: var(--ink);
}
.cl-text:hover:not([readonly]) { background: var(--canvas); box-shadow: inset 0 0 0 1px var(--line-2); }
.cl-text:focus { outline: 0; border-color: var(--accent); background: var(--canvas); }
.sub-row.is-done .cl-text { color: var(--ink-2); text-decoration: line-through; }
.cl-remove { width: 26px; height: 26px; opacity: 0; }
.sub-row:hover .cl-remove, .sub-row:has(:focus-visible) .cl-remove { opacity: 1; }
@media (hover: none) { .cl-remove { opacity: 1; } }
@media (hover: none) { .drag-grip { opacity: 0.6; } }
.row.is-dragging, .tile.is-dragging { opacity: 0.4; }
.tile[data-drag-id] { cursor: grab; }
.drag-ghost {
  position: fixed; left: 0; top: 0; z-index: 60; max-width: 320px; padding: 6px 10px; pointer-events: none;
  border: 1px solid var(--line-2); border-radius: 6px; background: var(--canvas); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
  font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.drop-line { position: fixed; z-index: 59; height: 2px; background: var(--accent); pointer-events: none; }
.drop-line::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
html.is-row-dragging, html.is-row-dragging * { cursor: grabbing !important; user-select: none; }

/* The fill handle: drag it down to fill the cells below. */
.fill-handle {
  position: absolute; right: -4px; bottom: -4px; z-index: 4; width: 8px; height: 8px;
  background: var(--accent); box-shadow: 0 0 0 1.5px var(--canvas); cursor: crosshair; touch-action: none;
}
html.is-filling, html.is-filling * { cursor: crosshair !important; user-select: none; }
.cell-tag.is-fixed { cursor: default; }
.cell-tag.is-inherited .tag { opacity: 0.6; }
.tag-empty { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--ink-3); opacity: 0; }
.tag-empty .ic { width: 14px; height: 14px; }
.cell-tag:hover .tag-empty, .cell-tag.is-anchor .tag-empty { opacity: 1; }
.tag-clip { position: fixed; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; resize: none; border: 0; padding: 0; }

.tag-menu {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; width: 270px; padding: 8px;
  display: grid; gap: 6px; cursor: default; font-weight: 400;
}
.tag-search { width: 100%; height: 34px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--canvas); color: var(--ink); font: inherit; font-size: 14px; }
.tag-search:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.tag-options { display: grid; gap: 2px; max-height: 280px; overflow-y: auto; }
.tag-option {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 34px; padding: 4px 8px;
  border: 0; border-radius: 6px; background: none; color: var(--ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.tag-option:hover, .tag-option:focus-visible { background: var(--hover); }
.tag-option > .ic { width: 15px; height: 15px; color: var(--ink-2); }
.tag-option .tag-on { margin-left: auto; color: var(--accent); }
.tag-add { color: var(--ink-2); border-top: 1px solid var(--line); border-radius: 0 0 6px 6px; }
/* The three kinds, a fixed set, each with what it is for (Change 70). A task with no kind shows Action faintly. */
.kind-menu { width: 300px; }
.kind-option { align-items: flex-start; flex-wrap: wrap; row-gap: 2px; padding: 6px 8px; }
.kind-option .tag-on { order: 1; }
.kind-about { order: 2; flex-basis: 100%; font-size: 12px; color: var(--ink-2); line-height: 1.35; }
.kind-implied { opacity: .5; }
.kind-implied:hover { opacity: .8; }

/* A list's cells, each its own editor (Change 71): a quiet dropdown that reads as the cell's text until hovered, and a
   date that shows as it did until clicked. */
.cell-edit {
  min-width: 0; max-width: calc(100% + 10px); height: 28px; padding: 0 18px 0 5px; margin: 0 -6px;
  font: inherit; font-size: inherit; color: inherit; text-overflow: ellipsis;
  border: 1px solid transparent; border-radius: 4px; background: transparent; cursor: pointer;
  appearance: none; -webkit-appearance: none;
}
/* A list's cell shows its arrow under the pointer, the one every dropdown has, as far in (Change 82). */
select.cell-edit { padding-right: 30px; background-repeat: no-repeat; background-position: right 12px center; background-size: 12px 12px; }
select.cell-edit:hover, select.cell-edit:focus-visible {
  border-color: var(--line-2); background-color: var(--canvas); background-image: var(--select-arrow);
}
.cell-edit:focus-visible, input.cell-date:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
select.cell-edit option { color: var(--ink); background: var(--canvas); }
input.cell-date { width: 100%; padding: 0 6px; margin-left: -6px; border-color: var(--line-2); background: var(--canvas); color: var(--ink); cursor: text; }
.cell-status .cell-edit, .cell-prio .cell-edit, .cell-bucket .cell-edit { flex: 1; }
.cell-bucket { display: flex; align-items: center; }
.cell-btn {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: calc(100% + 8px); min-height: 28px; padding: 0 3px; margin: 0 -4px;
  border: 1px solid transparent; border-radius: 4px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.cell-btn:hover, .cell-btn:focus-visible { border-color: var(--line-2); background: var(--canvas); }
.cell-btn:focus-visible { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.cell-empty { display: inline-flex; color: var(--ink-3); opacity: 0; }
.cell-empty .ic { width: 14px; height: 14px; }
.row:hover .cell-empty, .cell-btn:focus-visible .cell-empty { opacity: 1; }
.cell-who.menu-anchor { position: relative; overflow: visible; }
.who-btn { width: 100%; }
.who-menu { position: absolute; top: calc(100% + 2px); left: 0; z-index: 30; width: 240px; max-height: 300px; overflow-y: auto; padding: 6px; }
.who-option { gap: 8px; }
.who-option .tag-on { margin-left: auto; color: var(--accent); }
.who-hint { padding: 6px 8px; }

/* Copy link on a doc or an attachment, on a card or in the co-work app's answer (Change 77). */
.copy-pill {
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; margin: 0 0 0 6px; vertical-align: middle;
  border: 1px solid var(--line-2); border-radius: 999px; background: var(--canvas); color: var(--ink);
  font: inherit; font-size: 12.5px; font-weight: 400; line-height: 1; white-space: nowrap; cursor: pointer;
}
.copy-pill:hover { background: var(--hover); }
.copy-pill:focus-visible { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.copy-pill .ic { width: 13px; height: 13px; }
.link-row .copy-pill { flex: none; margin: 0 4px 0 0; }
.chat-bubble .copy-pill { height: 22px; padding: 0 8px; font-size: 12px; }
.tag-hint { padding: 4px 8px; }

.fold-btn { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--ink-2); cursor: pointer; }
.fold-btn:hover { background: var(--hover); }
.fold-btn .ic { width: 16px; height: 16px; }
.group-head.is-folded .fold-caret { transform: rotate(-90deg); }
.grid-project .group-head { cursor: default; gap: 8px; padding: 0 10px 0 8px; background: var(--paper); }
.group-goal { min-height: 52px; flex-wrap: wrap; }
.goal-icon { width: 16px; height: 16px; color: var(--accent); }
.goal-name { padding: 2px 4px; border: 0; border-radius: 4px; background: none; color: var(--ink); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.goal-name:hover { background: var(--hover); text-decoration: underline; }
/* A goal's facts in fixed columns, so they line up from goal to goal, as in Planner's Goals view (Change 72). */
.goal-facts {
  display: grid; grid-template-columns: 104px 132px 112px 84px; align-items: center; column-gap: 28px;
  margin-left: auto; padding-right: 8px; font-size: 13px; font-weight: 400; color: var(--ink-2);
}
.goal-facts > * { justify-self: start; min-width: 0; white-space: nowrap; }
.goal-end, .goal-count { display: inline-flex; align-items: center; gap: 6px; }
.goal-end .ic, .goal-count .ic { width: 14px; height: 14px; }
.goal-count { justify-self: end; font-variant-numeric: tabular-nums; }
.goal-prio { gap: 6px; }
@container pgrid (max-width: 1020px) {
  .goal-facts { grid-template-columns: repeat(4, auto); column-gap: 16px; }
}
@container pgrid (max-width: 720px) {
  .goal-facts { width: 100%; margin-left: 32px; grid-template-columns: repeat(4, auto); justify-content: start; }
}
.goal-status { padding: 2px 8px; border-radius: 4px; background: var(--hover); color: var(--ink-2); font-weight: 700; }
.gs-on-track, .gs-done { background: var(--accent-soft); color: var(--accent); }
.gs-at-risk { background: var(--warn-soft); color: var(--warn); }
.gs-behind { background: var(--alert-soft); color: var(--alert); }
.group-empty { padding: 10px 12px 12px 52px; font-size: 13px; color: var(--ink-2); border-bottom: 1px solid var(--line); }

.pstat { display: inline-grid; place-items: center; flex: none; width: 15px; height: 15px; border: 1.5px solid var(--ink-3); border-radius: 50%; }
.pstat-in-progress { border-color: var(--accent); background: linear-gradient(90deg, var(--accent) 50%, transparent 50%); }
.pstat-completed { border-color: var(--accent); background: var(--accent); }
.pstat-completed .ic { width: 10px; height: 10px; stroke-width: 3.5; color: var(--canvas); }
.prio-imp { color: var(--warn); }

.modal-goal h2 { display: flex; align-items: center; gap: 8px; }
.modal-goal h2 .ic { width: 20px; height: 20px; color: var(--accent); }
.modal-top .scrim-modal { z-index: 57; }
.modal-top .modal { z-index: 58; }
.btn-danger { color: var(--alert); }
.btn-danger-fill { background: var(--alert-strong); color: #fff; }
.btn-danger-fill:hover:not(:disabled) { background: var(--alert); }

.sub-of { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); padding-left: 46px; }
.sub-of .ic { width: 14px; height: 14px; }
.link-btn { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; }
.subtasks .sub-row { min-height: 32px; }
.subtasks .check { width: 26px; height: 26px; flex: none; }
.sub-name { flex: 1 1 auto; min-width: 0; padding: 4px 6px; border: 0; border-radius: 4px; background: none; color: var(--ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub-name:hover { background: var(--hover); text-decoration: underline; }
.sub-row.is-done .sub-name { color: var(--ink-2); text-decoration: line-through; }
.sub-row.is-pending .sub-name { color: var(--ink-2); }
.sub-adding { margin-left: auto; font-size: 12px; color: var(--ink-3); }

/* A task's name, as in Planner: click to rename, then ⓘ for its details and … for its menu, shown on hover. */
.grid-project .row-main.task-cell { cursor: default; }
/* A task's row opens its details from anywhere that is not a button or a field (Change 142). */
.row[data-act="task-row-open"], .grid-project .row[data-act="task-row-open"] .row-main.task-cell { cursor: pointer; }
.task-cell, .task-line { position: relative; }
.task-line { display: flex; align-items: center; gap: 4px; min-width: 0; }
.task-name {
  flex: 0 1 auto; min-width: 0; padding: 4px 6px; margin-left: -6px; border: 0; border-radius: 4px; background: none;
  color: var(--ink); font: inherit; font-size: 14px; text-align: left; cursor: text; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.task-name:hover { background: var(--canvas); box-shadow: inset 0 0 0 1px var(--line-2); }
.row.is-closed .task-name { color: var(--ink-2); text-decoration: line-through; }
/* The two buttons sit over the end of the name when the pointer is on the row, so the name keeps its room. */
.task-tools {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center;
  padding-left: 12px; border-radius: 6px; background: linear-gradient(90deg, transparent, var(--hover) 12px); opacity: 0; pointer-events: none;
}
.sub-row .task-tools { position: static; transform: none; padding-left: 0; background: none; margin-left: auto; }
.task-tools .icon-btn { width: 28px; height: 28px; }
.task-tools .ic { width: 16px; height: 16px; }
.row:hover .task-tools, .row:has(:focus-visible) .task-tools, .has-menu .task-tools,
.sub-row:hover .task-tools, .sub-row:has(:focus-visible) .task-tools { opacity: 1; pointer-events: auto; }
@media (hover: none) {
  .task-tools { position: static; transform: none; padding-left: 0; background: none; opacity: 1; pointer-events: auto; }
}
.has-menu { position: relative; z-index: 6; }
.task-menu { min-width: 236px; }
.rename-input {
  flex: 1; min-width: 0; height: 30px; padding: 0 8px; margin-left: -6px; border: 1px solid var(--accent); border-radius: 4px;
  background: var(--canvas); color: var(--ink); font: inherit; font-size: 14px;
}
.rename-input:focus { outline: 0; box-shadow: 0 0 0 3px var(--accent-soft); }
.subtasks .sub-row { display: flex; align-items: center; gap: 6px; }
.subtasks .rename-input { margin-left: 0; }
.ptile .tile-head { align-items: flex-start; }
.ptile .tile-head .task-menu-anchor { margin-left: auto; }
.copy-fields { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; }
.copy-fields legend { padding: 0 4px; font-size: 13px; color: var(--ink-2); }
.check-field { display: flex; align-items: center; gap: 8px; font-size: 14px; }

/* My Day: Task Manager's own list for today, above Mine. */
.crumb-myday { display: inline-flex; align-items: center; gap: 8px; }
.crumb-myday .ic { width: 20px; height: 20px; color: var(--accent); }

/* A subtask opens beside its parent's card: docked on the right on a PC, over the card on a phone. */
.scrim-sub { display: block; position: fixed; inset: 0; z-index: 50; background: var(--scrim); }
.sub-panel {
  position: fixed; z-index: 51; top: 0; right: 0; bottom: 0; width: min(480px, 100vw);
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  background: var(--canvas); color: var(--ink); box-shadow: var(--shadow-pop); outline: 0;
}
.sub-panel-body { overflow-y: auto; padding: 18px 20px 28px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (min-width: 1100px) {
  html.has-sub .detail { left: calc((100vw - 480px) / 2); width: min(1060px, calc(100vw - 480px - 40px)); }
}

@container pgrid (max-width: 720px) {
  .grid-project:where(:not([data-fit])) .grid-head { display: none; }
  .grid-project:where(:not([data-fit])) .row {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    grid-template-areas: "check main status" ". goal goal" ". labels labels";
    row-gap: 2px; padding-bottom: 8px;
  }
  .grid-project:where(:not([data-fit])) .row > .check { grid-area: check; }
  .grid-project:where(:not([data-fit])) .row > .row-main { grid-area: main; }
  .grid-project:where(:not([data-fit])) .row > .cell-status { grid-area: status; }
  .grid-project:where(:not([data-fit])) .row > .cell-goal { grid-area: goal; }
  .grid-project:where(:not([data-fit])) .row > .cell-labels { grid-area: labels; }
  .grid-project:where(:not([data-fit])) .cell-who, .grid-project:where(:not([data-fit])) .cell-due, .grid-project:where(:not([data-fit])) .cell-prio,
  .grid-project:where(:not([data-fit])) .cell-quick, .grid-project:where(:not([data-fit])) .cell-bucket,
  .grid-project:where(:not([data-fit])) .cell-start, .grid-project:where(:not([data-fit])) .cell-finish { display: none; }
  .grid-project:where(:not([data-fit])) .add-task, .grid-project:where(:not([data-fit])) .add-task-edit { padding-left: 12px; }
  .grid-project:where(:not([data-fit])) .cell-tag { margin: 0; min-height: 34px; }
  .grid-project:where(:not([data-fit])) .cell-tag.is-fixed:empty { display: none; }
  .tag-menu { width: min(270px, calc(100vw - 48px)); }
  .goal-facts { margin-left: 32px; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* -- Today and Mine: Labels and Goal columns; Today and Yesterday as titled tables; "Add new task" in view ---------- */
.day-table { display: grid; gap: 8px; }
.day-table-title { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0 2px; font-size: 15px; font-weight: 700; color: var(--ink); }
.day-table-title > .ic, .day-table-title > .goal-icon { width: 16px; height: 16px; color: var(--ink-2); }
/* Mine's and Today's order: Type, Status, Priority, Due, Team, Goal, Kind (Change 79). */
.grid.has-tags .grid-head, .grid.has-tags .row { grid-template-columns: 36px minmax(0, 1fr) 112px 116px 84px 118px 72px 72px 72px 150px 130px 150px; }
.col-tag { min-width: 0; }
.tag-whose { padding: 6px 8px 2px; border-top: 1px solid var(--line); font-size: 12px; }
@container grid (max-width: 760px) {
  .grid.has-tags:where(:not([data-fit])) .row { grid-template-columns: 34px minmax(0, 1fr); }
}
/* A dropdown open in one table shows over the next. */
.grid:has(.tag-menu) { position: relative; z-index: 6; }
/* On a long list, "Add new task" stays at the foot of the screen until its group ends, as in Planner. */
.grid .add-task.add-list, .grid .add-task-edit.add-list {
  position: sticky; bottom: 0; z-index: 4; background: var(--canvas); box-shadow: 0 -1px 0 var(--line);
}
.grid .add-task.add-list:hover { background: linear-gradient(var(--hover), var(--hover)), var(--canvas); }
.grid > .add-task:last-child, .grid > .add-task-edit:last-child { border-bottom: 0; border-radius: 0 0 8px 8px; }

/* -- a card's chat: files on a message, and folders opened to the card's sessions --------------------------------- */
.chat-tool {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: 8px; background: none; color: var(--ink-2); cursor: pointer;
}
.chat-tool .ic { width: 16px; height: 16px; }
.chat-tool:hover { background: var(--hover); color: var(--ink); }
.chat-files-draft, .chat-folders { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chat-folders-label { font-size: 12px; color: var(--ink-2); }
.chat-chip {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-width: 0; height: 26px; padding: 0 4px 0 8px;
  border: 1px solid var(--line-2); border-radius: 13px; background: var(--canvas); font-size: 12px; color: var(--ink);
}
.chat-chip .ic { width: 13px; height: 13px; flex: none; color: var(--ink-2); }
.chat-chip.is-adding { padding-right: 10px; color: var(--ink-2); }
.chat-chip-x { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--ink-2); cursor: pointer; }
.chat-chip-x:hover { background: var(--hover); color: var(--ink); }
.chat-chip-x .ic { width: 12px; height: 12px; }
.chat-folder-form { display: grid; gap: 6px; }
.chat-attached { color: var(--ink); }

/* -- a card's chat, filling the whole card: its button sits at the chat's top left ---------------------------------- */
.chat-head { display: flex; align-items: center; gap: 4px; }
/* A task's pane: the co-work chat, the team chat or the history, picked at its top right, as in Planner (Change 176). */
.pane-switch { margin-left: auto; display: inline-flex; gap: 2px; }
.pane-switch .icon-btn { width: 28px; height: 28px; }
.pane-switch .icon-btn .ic { width: 15px; height: 15px; }
.pane-switch .icon-btn[aria-selected="true"] { background: var(--accent-soft); color: var(--accent); }
.pane-log { gap: 10px; }
.task-history { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hist-line { display: grid; gap: 2px; font-size: 13px; line-height: 1.45; padding-left: 10px; border-left: 2px solid var(--line); }
.hist-line.is-own { border-left-color: var(--accent-soft); }
.hist-line.is-own .hist-text { color: var(--ink-2); }
.hist-meta { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--ink-2); }
.hist-meta .ic { width: 12px; height: 12px; color: var(--accent); }
.pane-note { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; margin: 0; }
.pane-note .ic { width: 13px; height: 13px; margin-top: 2px; flex: none; }
.pane-actions { margin: 0; }
.pane-actions .btn { text-decoration: none; }
.chat-msg.chat-team { align-self: flex-start; }
.ns-none { font-size: 13px; margin: 4px 0 0; }
.chat-head h3 { margin: 0; }
.chat-wide { width: 28px; height: 28px; margin-left: -6px; flex: none; }
.chat-wide .ic { width: 15px; height: 15px; }
.detail.is-chat-wide .detail-panes { grid-template-columns: minmax(0, 1fr); }
.detail.is-chat-wide .detail-main { display: none; }
.detail.is-chat-wide .detail-side { border-left: 0; }
.detail.is-chat-wide .detail-side > :not(.chat) { display: none; }
.detail.is-chat-wide .chat { flex: 1 1 auto; min-height: 0; }
.detail.is-chat-wide .chat-msg { max-width: 72%; }
/* A long question shows twice as much of itself while the chat fills the card (0.2.5 Change 63), and in a short window
   still leaves room above it for the answers. */
.detail.is-chat-wide .chat-box textarea { max-height: min(320px, 45vh); }

/* -- a path on this PC, in an answer, a note or a card's files: Open, and Show in folder ---------------------------- */
.local-file {
  display: inline-flex; align-items: center; max-width: 100%; vertical-align: bottom; margin: 1px 0;
  border: 1px solid var(--line-2); border-radius: 11px; background: var(--canvas); font-size: inherit; line-height: 20px;
}
.local-open {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 4px 0 8px; border: 0;
  background: none; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.local-reveal {
  display: grid; place-items: center; flex: none; width: 22px; height: 20px; padding: 0; border: 0;
  border-left: 1px solid var(--line-2); border-radius: 0 11px 11px 0; background: none; color: var(--ink-2); cursor: pointer;
}
.local-open:hover, .local-reveal:hover { background: var(--hover); color: var(--ink); }
.local-open:hover { border-radius: 11px 0 0 11px; }
.local-reveal .ic { width: 12px; height: 12px; }
.local-open:focus-visible, .local-reveal:focus-visible, .chat-chip-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.chat-sources .local-file { font-size: 12px; }
.chat-chip-open {
  display: inline-flex; align-items: center; gap: 4px; min-width: 0; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; cursor: pointer;
}
.chat-chip-open:hover .ellipsis { text-decoration: underline; }
.local-nowrap { white-space: nowrap; }

/* -- Today's Board: Not assigned, last, for a card with no team, label or goal ------------------------------------- */
.column-unassigned .column-head { color: var(--ink-2); }
.column-unassigned .column-head > .ic { color: var(--ink-3); }

/* -- Today's Board: every column as tall as the board, so a card can be dropped anywhere down it, an empty one too -- */
.board[aria-label="Today board"] { align-items: stretch; min-height: 60vh; }
.board[aria-label="Today board"] .column { align-content: start; }

/* -- the card, docked on the right, and a link's doc beside it (Change 54) ------------------------------------------- */
/* Each takes half of the cards' space, right of the navigation and left of Daily notes; where that is narrow, all of it,
   the doc over the card. layoutPanels() measures the space. The list behind is not greyed, and stays in reach. */
:root { --panel-top: var(--appbar-h); --panel-right: 0px; --panel-w: 50vw; }
@media (min-width: 761px) {
  html.has-detail:not(.has-nav) { overflow: visible; }
  .detail {
    top: var(--panel-top); bottom: 0; right: var(--panel-right); left: auto; transform: none;
    width: var(--panel-w); height: auto; border-radius: 0;
    border-left: 1px solid var(--line); box-shadow: -10px 0 28px rgba(9, 25, 21, 0.10);
  }
  html.has-doc.panels-split .detail { right: calc(var(--panel-right) + var(--panel-w)); }
  html.has-sub .detail { left: auto; width: var(--panel-w); }

  /* Maximized (Change 181): the card fills the page right of the navigation, beside an open doc and left of Daily
     notes. Wide enough, its fields and its pane go side by side, each scrolling on its own, half and half (Change 235). */
  html.detail-max .detail { left: var(--panel-left, 0px); width: auto; box-shadow: none; }
  html.detail-max.has-sub .detail { left: var(--panel-left, 0px); width: auto; }
  html.detail-max-wide .detail:not(.is-chat-wide) {
    grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto minmax(0, 1fr) auto auto;
  }
  html.detail-max-wide .detail:not(.is-chat-wide) > .detail-bar { grid-column: 1 / -1; grid-row: 1; }
  html.detail-max-wide .detail:not(.is-chat-wide) .detail-panes { display: contents; }
  html.detail-max-wide .detail:not(.is-chat-wide) .detail-main { grid-column: 1; grid-row: 2 / 4; overflow-y: auto; min-height: 0; }
  html.detail-max-wide .detail:not(.is-chat-wide) .detail-side {
    grid-column: 2; grid-row: 2; display: flex; flex-direction: column; overflow-y: auto; min-height: 0;
    border-top: 0; border-left: 1px solid var(--line);
  }
  html.detail-max-wide .detail:not(.is-chat-wide) .detail-side > .chat { flex: 1 1 auto; min-height: 0; }
  html.detail-max-wide .detail:not(.is-chat-wide) > .chat-dock { grid-column: 2; grid-row: 3; border-left: 1px solid var(--line); }
  html.detail-max-wide .detail:not(.is-chat-wide) > .detail-actions { grid-column: 1 / -1; grid-row: 4; }

  /* The chat under the card's fields, one column that scrolls as one; expanded, it fills the panel. */
  .detail-panes { display: block; overflow-y: auto; }
  .detail-main, .detail-side, .detail-side:has(.chat) { overflow: visible; }
  .detail-side { border-left: 0; border-top: 1px solid var(--line); }
  .detail .chat { min-height: 360px; }
  .detail.is-chat-wide .detail-panes { display: flex; flex-direction: column; overflow: hidden; }
  .detail.is-chat-wide .detail-side { flex: 1 1 auto; min-height: 0; overflow: hidden; border-top: 0; }
  .detail.is-chat-wide .chat-msg { max-width: 86%; }

  /* A subtask: a pop-up the shape the card's was, over everything, the rest greyed. */
  .sub-panel {
    top: 50%; left: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%);
    width: min(1060px, calc(100vw - 48px)); height: min(840px, calc(100vh - 48px)); border-radius: 8px;
  }
}

/* Previous and next, in the card's bar. A phone has the card over the list, so no list beside it to step through. */
.detail-step { display: inline-flex; gap: 2px; }
.detail-step .icon-btn:disabled { opacity: 0.35; cursor: default; }
@media (max-width: 760px) { .detail-step { display: none; } }

/* Links, above the checklist. */
.card-links h3 { display: flex; align-items: center; gap: 6px; }
.link-list { display: grid; gap: 2px; margin: 6px 0 8px; padding: 0; list-style: none; }
.link-row { position: relative; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 6px; border-radius: 6px; }
.link-row:hover { background: var(--hover); }
.link-row.is-open { background: var(--accent-soft); }
.link-row.is-open::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--accent); }
.link-row.has-menu { z-index: 6; }
.link-ic { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 6px; background: var(--hover); color: var(--ink-2); }
.link-ic .ic { width: 15px; height: 15px; }
.link-ic.w-feishu { background: hsl(212 80% 94%); color: hsl(212 60% 36%); }
.link-ic.w-sharepoint { background: hsl(176 50% 90%); color: hsl(176 60% 24%); }
.link-ic.w-web { background: hsl(40 70% 90%); color: hsl(36 60% 30%); }
.link-main { display: grid; gap: 2px; min-width: 0; flex: 1; text-align: left; border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }
div.link-main { cursor: default; }
.link-name { font-size: 14px; color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.link-main:hover .link-name { text-decoration: underline; text-underline-offset: 2px; }
.link-sub { font-size: 12px; color: var(--ink-2); }
.link-row .menu { min-width: 210px; }
.link-add { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.link-add input {
  flex: 1; min-width: 0; height: 34px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 6px;
  background: var(--canvas); color: var(--ink); font: inherit; font-size: 13px;
}
.link-add input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.link-adds { display: inline-block; }
.link-adds .btn .ic { width: 16px; height: 16px; }
@media (prefers-color-scheme: dark) {
  .link-ic.w-feishu { background: hsl(212 40% 24%); color: hsl(212 80% 82%); }
  .link-ic.w-sharepoint { background: hsl(176 35% 20%); color: hsl(176 60% 78%); }
  .link-ic.w-web { background: hsl(36 35% 22%); color: hsl(40 70% 80%); }
}

/* The doc: the other half, the doc alone, with three small buttons in its corner. */
.doc-panel {
  position: fixed; z-index: 42; top: var(--panel-top); bottom: 0; right: var(--panel-right); width: var(--panel-w);
  display: flex; background: var(--paper, var(--canvas)); border-left: 1px solid var(--line); box-shadow: -10px 0 28px rgba(9, 25, 21, 0.10);
}
.doc-panel[hidden] { display: none; }
.doc-frame { flex: 1; width: 100%; border: 0; background: #ffffff; }
.doc-tools {
  position: absolute; top: 8px; right: 12px; display: flex; gap: 2px; padding: 2px; border-radius: 8px;
  background: var(--canvas); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); opacity: 0.35; transition: opacity 0.15s;
}
.doc-panel:hover .doc-tools, .doc-tools:focus-within, html:not(.has-detail) .doc-tools { opacity: 1; }
@media (max-width: 760px) {
  .doc-panel { inset: 0; width: auto; z-index: 60; }
  .doc-tools { opacity: 1; }
}

/* -- a SharePoint Office file in its desktop app over the doc panel (Change 55): the panel shows what is there, and a
   strip at its top, with its three buttons, that the app's window leaves free --------------------------------------- */
.doc-frame[hidden], .doc-office[hidden], .doc-office-strip[hidden] { display: none; }
.doc-panel.is-office { background: var(--canvas); }
.doc-panel.is-office .doc-tools { opacity: 1; box-shadow: none; }
.doc-office-strip {
  position: absolute; top: 0; left: 0; right: 120px; height: 44px; margin: 0; padding: 0 16px;
  display: flex; align-items: center; font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.doc-office { margin: auto; max-width: 380px; display: grid; gap: 12px; justify-items: center; text-align: center; padding: 24px; color: var(--ink-2); }
.doc-office-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: hsl(214 70% 92%); color: hsl(214 70% 36%); }
.doc-office-ic .ic { width: 22px; height: 22px; }
.doc-office strong { color: var(--ink); }
.doc-office .actions { justify-content: center; }

/* -- the search beside Teams in the navigation (Change 56) ----------------------------------------------------------- */
/* The input's own width (about 20 characters) pushed the row past the panel: the row may shrink, and the input takes
   only the room left beside Teams (Change 58). */
.nav-head-row { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 2px 4px 10px; }
.nav-head-row .nav-head { padding: 0; flex: none; }
.nav-empty { padding: 4px 10px; font-size: 12px; color: var(--ink-3); }

/* -- a Planner card's Channel and Assigned to, then Labels and Goal, two columns (Change 57) -------------------------- */
.planner-grid { align-items: start; }
.planner-cell .planner-row { font-size: 13px; color: var(--ink); }
.planner-cell .planner-row .hint { color: var(--ink-3); }
.field select.planner-add { width: auto; min-height: 0; height: 28px; padding: 0 8px; border: 1px dashed var(--line-2); border-radius: 999px; font-size: 13px; color: var(--ink-2); }

/* -- every list's columns, as many as fit, in one order (0.2.5 Change 79) -------------------------------------------- */
/* fitGrids() sets the template and the columns left out, for the list's width now. */
.grid[data-fit] .grid-head, .grid[data-fit] .row { grid-template-columns: var(--fit-cols); }
.grid[data-hide~="quick"] .cell-quick, .grid[data-hide~="who"] .cell-who, .grid[data-hide~="status"] .cell-status,
.grid[data-hide~="prio"] .cell-prio, .grid[data-hide~="due"] .cell-due, .grid[data-hide~="bucket"] .cell-bucket,
.grid[data-hide~="goal"] .cell-goal, .grid[data-hide~="labels"] .cell-labels, .grid[data-hide~="start"] .cell-start,
.grid[data-hide~="finish"] .cell-finish, .grid[data-hide~="src"] .cell-src, .grid[data-hide~="team"] .cell-team,
.grid[data-hide~="planned"] .cell-planned, .grid[data-hide~="spent"] .cell-spent, .grid[data-hide~="total"] .cell-total,
.grid[data-hide~="difficulty"] .cell-difficulty { display: none; }
/* Beside an open card or doc, the list keeps to the room left of it, so none of it is under the panel. A maximized card
   leaves it no room: it is under the card, and the panel's Restore brings it back (Change 181). */
.panel-max { display: none; }
@media (min-width: 761px) { .panel-max { display: inline-flex; } }
@media (min-width: 761px) {
  html.list-beside .main { padding-right: calc(var(--panel-w) + 24px); }
}

/* -- a doc's grip, on the right of its row: drag it up or down the card's docs (0.2.5 Change 80) --------------------- */
.link-row > .link-grip { position: static; transform: none; flex: none; width: 16px; opacity: 0.45; }
.link-row:hover > .link-grip, .link-row:has(:focus-visible) > .link-grip { opacity: 1; }
.link-row.is-dragging { opacity: 0.4; }

/* -- every dropdown's arrow: one arrow, 12 px in from the right edge, with room for it (0.2.5 Change 82) ------------- */
:root { --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%2346655d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23a3bdb5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
}
:root[data-theme="dark"] { --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23a3bdb5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
:root select:not(.cell-edit) {
  appearance: none; -webkit-appearance: none; padding-right: 34px;
  background-image: var(--select-arrow); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px 12px;
}

/* -- View options: the ... beside Search (0.2.5 Change 87) ----------------------------------------------------------- */
.tool-btn.icon-only { padding: 0 8px; min-width: 34px; justify-content: center; }
.view-options .menu { min-width: 220px; }
/* -- a sent card says what went out, above the message (Change 86) -- */
.message .sent-note { display: flex; gap: 6px; align-items: flex-start; margin: 0 0 10px; }
.message .sent-note .ic { flex: none; margin-top: 2px; color: var(--accent); }
/* -- a card's Docs fold away, folded by default (Change 89) -- */
.card-links h3 .block-toggle {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px; margin: -2px -4px;
  background: none; border: 0; border-radius: 6px; font: inherit; color: inherit; cursor: pointer;
}
.card-links h3 .block-toggle:hover { background: var(--hover); }
.card-links h3 .block-toggle .ic { width: 16px; height: 16px; color: var(--ink-2); }
/* -- a checklist row: name, then its assignee and due date, edited where they are (Change 95) -- */
.sub-row .sub-cell { flex: none; display: flex; align-items: center; min-width: 0; font-size: 13px; color: var(--ink-2); }
.sub-row .sub-who { width: 132px; }
.sub-row .sub-due { width: 112px; }
.sub-row .sub-hours { width: 60px; }            /* a subtask's Planned, Spent and Total (Change 111) */
.sub-row .sub-hours > .cell { width: 100%; }
.sub-row .sub-hours .hours-in { width: 100%; height: 28px; }      /* not the 18 px of a checklist's own tick box */
.sub-row:hover .cell-empty, .sub-row:has(:focus-visible) .cell-empty { opacity: 1; }      /* as a list's row shows them */
.check-head .sub-hours { justify-content: flex-end; padding-right: 6px; }
.check-head .check { width: 26px; height: 22px; }      /* as wide as the rows' own, so the names sit over their cells */
.check-head .check-head-name { padding-left: 6px; }      /* over the names' text, inside their own padding */
.check-head .sub-cell, .check-head .check-head-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* A card is often about 500 px wide: there the subtasks keep every column, the people as faces (their names on hover),
   the dates and hours tighter, and the name the rest. */
.checks-fit { container: checks / inline-size; grid-template-columns: minmax(0, 1fr); }
.checks-fit .planner-checks { grid-template-columns: minmax(0, 1fr); }
.check-head { gap: 6px; }      /* the rows' own gap, so each name sits over its cell */
@container checks (max-width: 700px) {
  .sub-row, .subtasks .sub-row, .check-head { gap: 4px; }
  .sub-row .sub-confirm { width: 90px; }
  .sub-row .sub-source { width: 40px; }
  .sub-row .sub-source .ns-source > .ellipsis { display: none; }
  .sub-row .sub-who .muted { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
  .sub-row .sub-who { width: 68px; }
  .sub-row .sub-who .who > .ellipsis { display: none; }
  .sub-row .sub-due { width: 80px; }
  .sub-row .sub-hours { width: 48px; }
  .sub-row .sub-hours .hours-in, .sub-row .sub-hours .hours-total { padding: 0 4px; }
  .sub-row .sub-hours .hours-total { height: 28px; }
  .check-head .sub-cell { padding-left: 4px; }
  .check-head .sub-hours { padding-right: 4px; }
}
.sub-row .sub-cell .cell, .sub-row .sub-cell .cell-btn, .sub-row .sub-cell select, .sub-row .sub-cell input[type="date"] { width: 100%; min-width: 0; }
.sub-row .sub-cell select.cell-edit, .sub-row .sub-cell input.cell-edit { height: 28px; font-size: 13px; }
.sub-row .cl-text { flex: 1 1 auto; min-width: 0; }
@media (max-width: 760px) { .sub-row .sub-who { width: 96px; } .sub-row .sub-due { width: 96px; } }
/* -- a Board's Add task: a small card with the name, Set due date and Assign (Change 96) -- */
.add-task-card { display: grid; gap: 10px; padding: 14px; margin: 0 0 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--canvas); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }
.add-task-card .atc-line { display: flex; align-items: center; gap: 10px; min-height: 32px; color: var(--ink-2); font-size: 14px; }
.add-task-card .atc-line > .ic { width: 18px; height: 18px; flex: none; margin: 0 3px; }
.add-task-card .atc-circle { width: 20px; height: 20px; flex: none; margin: 0 2px; border: 1.5px solid var(--ink-2); border-radius: 50%; }
.add-task-card input[data-new-task] { flex: 1 1 auto; min-width: 0; height: 36px; padding: 0 10px; border: 1px solid transparent; border-radius: 6px; background: var(--hover); font: inherit; color: var(--ink); }
.add-task-card input[data-new-task]:focus { border-color: var(--accent); background: var(--canvas); outline: none; }
.add-task-card .atc-link { padding: 4px 0; border: 0; background: none; font: inherit; color: var(--ink); cursor: pointer; }
.add-task-card .atc-link:hover { color: var(--accent); }
.add-task-card .atc-date, .add-task-card .atc-assign { height: 32px; min-width: 0; flex: 1 1 auto; font: inherit; }
.add-task-card .atc-assign:not(.is-set) { color: var(--ink-2); }
.add-task-card .atc-fixed { color: var(--ink); }
.add-task-card .atc-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
/* -- an agenda's Next steps (Change 99) -- */
.next-steps .ns-row.is-asking .cl-text, .next-steps .ns-row.is-pending .cl-text { color: var(--ink-2); }
.next-steps .ns-flag { flex: none; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--warn-bg, #fdf0d5); color: var(--warn, #9a5b00); font-weight: 700; font-size: 12px; }
.next-steps .ns-confirm { flex: none; display: inline-flex; gap: 4px; }
.btn.btn-xs { height: 24px; padding: 0 8px; font-size: 12px; }
/* -- Repeat, as in Planner (Change 100) -- */
.field-repeat .field-label { display: inline-flex; align-items: center; gap: 4px; }
.info-tip { display: inline-flex; color: var(--accent); cursor: help; }
.info-tip .ic { width: 14px; height: 14px; }
.repeat-pick { position: relative; display: flex; align-items: center; }
.repeat-pick > .ic { position: absolute; left: 10px; width: 16px; height: 16px; color: var(--ink-2); pointer-events: none; }
.repeat-pick select { width: 100%; padding-left: 34px; }
.modal-repeat { width: min(560px, calc(100vw - 32px)); }
.modal-repeat .modal-head { display: flex; align-items: center; justify-content: space-between; }
.modal-repeat .repeat-row { display: flex; align-items: center; gap: 12px; margin: 16px 0 8px; }
.modal-repeat .repeat-row input[type="number"] { width: 96px; }
.modal-repeat .repeat-row select { flex: 1 1 auto; }
.modal-repeat .repeat-days { display: flex; gap: 6px; margin: 4px 0 8px; }
.modal-repeat .day-pill { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--canvas); color: var(--ink); font: inherit; cursor: pointer; }
.modal-repeat .day-pill.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.modal-repeat .repeat-sentence { margin: 8px 0 4px; color: var(--ink); }

/* -- Hours: planned, spent and total (Change 101) -- */
.cell-planned, .cell-spent, .cell-total { display: flex; align-items: center; min-width: 0; }
:where(.grid:not([data-fit])) .cell-planned, :where(.grid:not([data-fit])) .cell-spent, :where(.grid:not([data-fit])) .cell-total,
:where(.grid:not([data-fit])) .col-hours { display: none; }
.col-hours { font-size: 12px; color: var(--ink-2); }
.hours-in { width: 100%; min-width: 0; height: 28px; padding: 0 6px; border: 1px solid transparent; border-radius: 4px; background: none;
  font: inherit; font-size: 13px; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.hours-in:hover { border-color: var(--line-2); background: var(--canvas); }
.hours-in:focus { outline: 0; border-color: var(--accent); background: var(--canvas); }
.hours-in::placeholder { color: var(--ink-3); }
.hours-sum { width: 100%; text-align: right; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.hours-total { width: 100%; padding: 4px 6px; border: 0; border-radius: 4px; background: none; font: inherit; font-size: 13px; color: var(--ink);
  text-align: right; cursor: pointer; font-variant-numeric: tabular-nums; }
.hours-total:hover { background: var(--hover); }
.hours-total .ic { width: 14px; height: 14px; color: var(--ink-3); }
.hours-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hours-row .field .hours-in { height: 36px; border-color: var(--line-2); background: var(--canvas); text-align: left; font-size: 14px; padding: 0 10px; }
.field-sub { color: var(--ink-3); }
.hours-total-field { justify-content: space-between; gap: 6px; }
.btn.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
.modal-hours { width: min(1180px, calc(100vw - 32px)); min-height: min(640px, calc(100vh - 48px)); }      /* a task card's size */
.modal-hours .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.modal-hours h2 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hours-heads { display: flex; gap: 32px; margin: 12px 0 8px; }
.hours-head { display: grid; }
.hours-big { font-size: 32px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.hours-head.is-spent .hours-big { color: var(--accent); }
.hours-label { font-size: 13px; color: var(--ink-2); }
.hours-chart { width: 100%; height: auto; }
.hours-chart .tick line { stroke: var(--line); stroke-width: 1; }
.hours-chart text { font-size: 11px; fill: var(--ink-2); }
.hours-chart .line-planned { fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-dasharray: 5 4; }
.hours-chart .line-spent { fill: none; stroke: var(--accent); stroke-width: 2.5; }
.hours-chart .dot-planned { fill: var(--canvas); stroke: var(--ink-3); stroke-width: 2; }
.hours-chart .dot-spent { fill: var(--accent); }
.hours-legend { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.hours-legend .key { display: inline-block; width: 18px; height: 0; border-top: 2px solid var(--accent); margin-left: 8px; }
.hours-legend .key-planned { border-top: 2px dashed var(--ink-3); margin-left: 0; }
@media (max-width: 760px) { .hours-row { grid-template-columns: 1fr 1fr; } }

/* -- one look for a card's fields, the Planner card's (Change 102): names above, white boxes with the one dropdown arrow,
   the same height and padding, half the width each. A field shown only to read keeps the paper fill, as Planner's own do. -- */
.facts { gap: 14px 16px; }
.fact-label { font-size: 12px; color: var(--ink-2); }
.fact-value { min-height: 36px; padding: 4px 10px; font-size: 14px; }
.fact-edit select, .fact-edit input { min-height: 36px; padding: 7px 10px; font-size: 14px; line-height: 1.45; }
.fact-pick .fact-value { padding: 0; border-color: var(--line-2); background: var(--canvas); }
.fact-pick .fact-value > select { width: 100%; min-height: 36px; padding: 7px 34px 7px 10px; border: 0; background-color: transparent; font-size: 14px; color: var(--ink); }
.fact-pick .channel-pick { min-height: 36px; padding: 0 34px 0 10px; border: 0; border-radius: 4px; background: var(--select-arrow) no-repeat right 12px center / 12px 12px;
  font-size: 14px; }
.fact-pick .channel-pick:hover, .fact-pick .channel-pick[aria-expanded="true"] { background-color: var(--hover); }
.fact-pick .channel-pick > .ic:last-child:not(:first-child) { display: none; }
.fact-edit .topic-hint { grid-column: 1 / -1; font-size: 12px; }
/* -- Today: Source at the right (Change 103), before the page fits the columns to the width -- */
/* only before the page fits the columns: once fitted (data-fit), the fitted ones rule, as in every list (Change 107 fix) */
.grid.has-tags[data-cols="day"]:not([data-fit]) .grid-head, .grid.has-tags[data-cols="day"]:not([data-fit]) .row { grid-template-columns: 36px minmax(0, 1fr) 116px 84px 118px 72px 72px 72px 150px 130px 150px 112px; }
/* As narrow as a phone's, Today's rows stack as every list's do: the rule above outranked that, and gave the name no
   room, so a task's name and its ⓘ were gone in a half-width window (Change 141). */
@container grid (max-width: 760px) {
  .grid.has-tags[data-cols="day"]:not([data-fit]) .row { grid-template-columns: 34px minmax(0, 1fr); }
  .grid:not([data-fit]) .row:has(> .drag-grip) { padding-left: 16px; }      /* the grip has its own room, left of the tick */
}

/* -- Formatting in notes and questions (Change 104): a small toolbar, and an editor that looks like the text box it replaces -- */
.md-editor { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line-2); border-radius: 4px; background: var(--canvas); }
.md-editor:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.md-toolbar { display: flex; gap: 2px; padding: 3px 4px; border-bottom: 1px solid var(--line); }
.md-btn { display: grid; place-items: center; min-width: 26px; height: 24px; padding: 0 5px; border: 0; border-radius: 4px; background: none;
  color: var(--ink-2); font: inherit; font-size: 13px; cursor: pointer; }
.md-btn:hover { background: var(--hover); color: var(--ink); }
.md-btn .ic { width: 15px; height: 15px; }
.md-num { font-size: 12px; font-weight: 600; }
.md-area { min-height: calc(var(--md-rows, 4) * 1.5em + 14px); max-height: 60vh; overflow: auto; padding: 7px 10px; outline: 0;
  font-size: 14px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; white-space: pre-wrap; }
/* Every line one line high, whatever holds it: a line, an empty line, a bullet or a numbered item (Change 119). */
.md-area p, .md-area div, .md-area ul, .md-area ol, .md-area li { margin: 0; }
.md-area ul, .md-area ol { padding-left: 22px; }
.md-area:empty::before { content: attr(data-placeholder); color: var(--ink-3); pointer-events: none; }
.md-area[aria-readonly="true"] { background: var(--paper); }
.field > .md-editor { margin-top: 4px; }
/* the daily notes fill their panel; the chat's question stays one line until more is typed, its toolbar shown while typing */
.md-editor.notes-text { flex: 1 1 auto; min-height: 0; }
.md-editor.notes-text .md-area { flex: 1 1 auto; max-height: none; }
.chat-box .md-editor.md-chat { flex: 1; border: 0; box-shadow: none; background: transparent; }
.chat-box .md-chat .md-toolbar { display: none; border: 0; padding: 0 0 2px; }
.chat-box:focus-within .md-chat .md-toolbar { display: flex; }
.chat-box .md-chat .md-area { min-height: 22px; max-height: 160px; padding: 5px 0; font-size: 13px; }

/* -- Daily notes, enlarged (Change 105): the right half of the view, over a card or a doc, the list beside them -- */
@media (min-width: 761px) {
  html.has-notes.notes-wide .frame { grid-template-columns: var(--nav-w) minmax(0, 1fr); }
  html.has-notes.notes-wide.nav-hidden .frame { grid-template-columns: minmax(0, 1fr); }
  html.notes-wide .notes-panel {
    position: fixed; z-index: 45; top: var(--panel-top); right: 0; bottom: 0; width: var(--panel-w); height: auto;
    box-shadow: -10px 0 28px rgba(9, 25, 21, 0.12);
  }
  html.notes-wide.has-doc.panels-split .detail { right: var(--panel-right); }      /* a card and a doc both stay under the notes */
}
@media (max-width: 760px) { .notes-wide-btn { display: none; } }

/* -- a checklist's rows look like a list's (Change 106): its column names above, the people menu and the date chip -- */
.check-head { min-height: 22px !important; font-size: 12px; color: var(--ink-2); }
.check-head .check { visibility: hidden; border-color: transparent; }
.check-head .drag-grip, .check-head .icon-btn, .check-head .cl-remove { visibility: hidden; }
.check-head .check-head-name { flex: 1 1 auto; min-width: 0; }
.check-head .sub-cell { padding-left: 6px; color: var(--ink-2); font-size: 12px; }
.sub-row .sub-cell .cell { width: 100%; min-width: 0; }
.sub-row .sub-cell .cell-btn { width: 100%; justify-content: flex-start; }
.sub-row .sub-who .menu { min-width: 220px; }
.sub-row .cl-remove { flex: none; }
.ns-row .task-tools { flex: none; }

/* -- the hours fields start at one height: a name and a line under each, the chart left of Total's (Change 108) -- */
.hours-row { align-items: start; }
.hours-row > .field { align-content: start; }
.hours-label { display: grid; gap: 2px; min-height: 34px; align-content: start; }
.hours-label-icon { display: flex; align-items: flex-start; gap: 6px; min-height: 34px; }
.hours-label-icon .hours-chart-btn { width: 30px; height: 30px; flex: none; margin: 0 0 0 -6px; color: var(--accent); }
.hours-row .field .hours-in, .hours-row .field-static { height: 36px; min-height: 36px; box-sizing: border-box; }
.hours-total-field { justify-content: flex-start; gap: 6px; }

/* -- a task of one's own, laid out as a Planner task's card (Change 109): the Type menu looks like the dropdowns beside it,
   a field shown only to read keeps the paper fill, and Hand over sits beside the person as Planner's Assign does -- */
.own-grid > .field { align-content: start; }      /* a date box is a little taller: the field beside it keeps its top */
.own-grid .channel-anchor { width: 100%; }
.own-grid .channel-pick { min-height: 36px; padding: 0 34px 0 10px; border: 1px solid var(--line-2); border-radius: 4px;
  background: var(--canvas) var(--select-arrow) no-repeat right 12px center / 12px 12px; font-size: 14px; color: var(--ink); }
.own-grid .channel-pick:hover, .own-grid .channel-pick[aria-expanded="true"] { border-color: var(--line-2); background-color: var(--hover); }
.own-grid .channel-pick > .ic:last-child:not(:first-child) { display: none; }
.own-grid .field-static { gap: 8px; }
.own-grid .field-static > .ic { width: 16px; height: 16px; color: var(--ink-2); }
.hand-over-pill { display: inline-flex; align-items: center; gap: 4px; }
.hand-over-pill .ic { width: 14px; height: 14px; }


/* Goal on any card (Change 113): the list's goal cell, drawn as the field beside it, with its own menu. A box as the
   fields beside it on a card; a dashed pill, as Type's, on a Planner task's card. */
.goal-box { position: relative; min-width: 0; width: 100%; }
.goal-box .cell-tag { display: flex; align-items: center; margin: 0; min-height: 36px; padding: 4px 10px; box-sizing: border-box;
  border: 1px solid var(--line-2); border-radius: 4px; background: var(--canvas); }
.goal-box .cell-tag[data-act]:hover, .goal-box .cell-tag.is-open { background: var(--hover); box-shadow: none; }
.goal-box .cell-tag.is-fixed { border-style: dashed; color: var(--ink-2); }
.tag-empty-text { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--ink-2); }
.tag-empty-text .ic { width: 14px; height: 14px; }
.goal-box.goal-pill { width: auto; }
.goal-box.goal-pill .cell-tag { min-height: 28px; padding: 0 10px; border-style: dashed; border-radius: 999px; }
.goal-box.goal-pill .tag-empty-text { font-size: 13px; }
.fact-goal .goal-box .cell-tag { min-height: 34px; }
.goal-box .tag-menu { top: calc(100% + 2px); left: 0; }

/* An agenda's Next steps (Change 114): Confirm after the name, Source after Due, and Regenerate and Clear unused beside
   the title. On a narrow card, Source is its icon, the doc's name on hover. */
.next-steps h3 { flex-wrap: wrap; }
.next-steps .ns-actions { display: inline-flex; gap: 6px; margin-left: 4px; font-weight: 400; }
.next-steps .ns-actions .btn .ic { width: 13px; height: 13px; }
.next-steps .ns-regen-hint { margin: -2px 0 0; }
/* While File Explorer's folder window is open (Change 116). */
.chat-folder-picking { display: flex; align-items: center; gap: 6px; margin: 0; }
.chat-folder-picking .ic { width: 15px; height: 15px; flex: none; }
/* How far a Regenerate is, beside its word: a steady width, so the button keeps its size (Change 115). */
.next-steps .ns-regen-pct { display: inline-block; min-width: 3.4ch; margin-left: 2px; text-align: right; font-variant-numeric: tabular-nums; }
.sub-row .sub-confirm { width: 104px; }
.sub-row .sub-source { width: 140px; }
.ns-confirm-anchor { position: relative; width: 100%; }
/* Every Confirm's words start where the column's name does: Yes, Duplicate, No and "!" alike (Change 134). */
.ns-confirm-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 4px; width: 100%; height: 28px; padding: 0 3px;
  border: 1px solid transparent; border-radius: 4px; background: none; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; }
.ns-confirm-btn:hover, .ns-confirm-btn[aria-expanded="true"] { border-color: var(--line-2); background: var(--canvas); }
.ns-confirm-btn .ns-caret { width: 12px; height: 12px; color: var(--ink-3); }
.ns-confirm-btn.is-no, .ns-confirm-fixed.is-no { color: var(--ink-2); }
.ns-confirm-btn.is-duplicate { color: var(--warn, #9a5b00); }
.ns-confirm-fixed { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-width: 0; padding: 0; font-size: 13px; color: var(--ink); }
/* A next step on its way onto a task: the task it would be a subtask of (Change 132). */
main .prow.is-drop-into, main .tile.is-drop-into { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); border-radius: 4px; }
/* Where a step's person or date came from, when none was given (Change 131). */
.modal-step .step-default { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-3); }
.modal-step .field-row { align-items: start; }      /* a hint under one box leaves the box beside it where it is */
.ns-confirm-menu { position: absolute; top: calc(100% + 2px); left: 0; z-index: 30; min-width: 260px; }
.ns-confirm-item { display: flex; align-items: center; gap: 8px; }
.ns-confirm-value { flex: none; min-width: 64px; font-weight: 600; }
.ns-confirm-item .ellipsis { flex: 1; min-width: 0; color: var(--ink-2); font-size: 13px; }
.ns-source { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; padding: 0 6px; font-size: 13px; color: var(--accent); text-decoration: none; }
a.ns-source:hover, button.ns-source:hover { text-decoration: underline; }
button.ns-source { border: 0; background: none; font: inherit; font-size: 13px; cursor: pointer; }
button.ns-source.is-open { font-weight: 600; }
span.ns-source { color: var(--ink-2); }
.ns-source .ic { flex: none; width: 14px; height: 14px; }
.next-steps .ns-row.is-no .cl-text { color: var(--ink-2); }

/* -- Docs open, ten to a page: the pages turn at the bottom right, in line with Add doc (Change 125) -------------- */
.card-links .links-foot { display: flex; align-items: center; gap: 8px; min-height: 32px; }
/* The box to paste a doc's link takes the row's width, the pages beside it at the right (fix to Change 125). */
.card-links .links-foot > .link-add { flex: 1 1 auto; min-width: 0; }
/* Link a Feishu Doc's hint goes on a line of its own under the box, which keeps the row's width (Change 199). */
.card-links .links-foot:has(> .link-clip-hint) { flex-wrap: wrap; }
.card-links .links-foot > .link-clip-hint { flex: 1 0 100%; order: 3; }
.card-links .links-foot .docs-pager { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; font-size: 13px; color: var(--ink-2); }
.card-links .links-foot .docs-range { margin-right: 6px; font-variant-numeric: tabular-nums; }

/* -- A date chip keeps to its cell, its text cut short: it no longer runs into Source (Change 126) ----------------- */
.due-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sub-row .sub-due { overflow: hidden; }
.sub-row .sub-due .cell-btn, .sub-row .sub-due .due { max-width: 100%; min-width: 0; overflow: hidden; }

/* -- Every people menu has a search box on top (Change 127) --------------------------------------------------------- */
.who-menu .who-search { width: 100%; height: 30px; margin: 0 0 6px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: 4px;
  background: var(--canvas); color: var(--ink); font: inherit; font-size: 13px; }
.who-menu .who-search:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.planner-assign .cell-who, .atc-assign .cell-who { display: inline-flex; }
.planner-assign .who-btn { height: 28px; padding: 0 10px; gap: 6px; border: 1px dashed var(--line-2); border-radius: 999px; font-size: 13px; color: var(--ink-2); }
.planner-assign .who-btn .ic { width: 14px; height: 14px; }
.add-task-card .atc-assign .who-btn { height: 32px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: 4px; width: 100%; justify-content: flex-start; }

/* -- A next step's (i), at the right of its name, as a task's row has it (Change 128) ----------------------------- */
.ns-row .ns-name { flex: 1 1 auto; display: flex; align-items: center; min-width: 0; }
.ns-row .ns-name .cl-text { flex: 1 1 auto; min-width: 0; }
.ns-row .ns-info { flex: none; width: 26px; height: 26px; opacity: 0; }
.ns-row:hover .ns-info, .ns-row:has(:focus-visible) .ns-info { opacity: 1; }
.ns-row .ns-info .ic { width: 15px; height: 15px; }
@media (hover: none) { .ns-row .ns-info { opacity: 1; } }

/* -- A next step's details: a card in the middle of the page, as Planner's task card, the rest greyed (Change 128) - */
.modal.modal-step { width: min(960px, calc(100vw - 48px)); height: min(760px, calc(100vh - 64px)); max-height: none; padding: 0; gap: 0;
  grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
.modal-step .step-bar { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 12px 0 20px; border-bottom: 1px solid var(--line); }
.modal-step .step-crumb { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; font-size: 13px; color: var(--ink-2); }
.modal-step .step-crumb .ic { width: 15px; height: 15px; flex: none; }
.modal-step .step-panes { display: grid; grid-template-columns: minmax(0, 1fr) 300px; min-height: 0; }
.modal-step .step-main { overflow-y: auto; padding: 18px 24px 24px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.modal-step .step-side { overflow-y: auto; padding: 18px 20px; background: var(--side); border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.modal-step .step-side h3 { font-size: 13px; font-weight: 600; color: var(--ink); }
.modal-step .step-from { color: var(--ink-2); }
.modal-step .step-source { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); text-decoration: none; }
.modal-step .step-source:hover { text-decoration: underline; }
.modal-step .step-source .ic { width: 14px; height: 14px; }
.modal-step .step-quote { margin: 0; padding: 8px 10px; border-left: 3px solid var(--line-2); color: var(--ink-2); font-style: italic; overflow-wrap: anywhere; }
.modal-step .modal-actions { margin: 0; padding: 12px 20px; border-top: 1px solid var(--line); display: flex; gap: 8px; }
@media (max-width: 760px) {
  .modal.modal-step { width: 100vw; height: 100vh; border-radius: 0; }
  .modal-step .step-panes { grid-template-columns: minmax(0, 1fr); overflow-y: auto; }
  .modal-step .step-main, .modal-step .step-side { overflow: visible; }
  .modal-step .step-side { border-left: 0; border-top: 1px solid var(--line); }
}
/* The person on one line, beside their face, in a step's details (Change 128). */
.modal-step .planner-row .cell-who, .modal-step .planner-row .who-btn { width: auto; max-width: 100%; white-space: nowrap; gap: 6px; }
.modal-step .planner-row .who-btn > span { overflow: hidden; text-overflow: ellipsis; }

/* -- A card's Message and Attachments (0.2.5 Changes 136 to 139) ------------------------------------------------------ */
.task-msg-tabs { margin-top: 16px; }
.task-message { margin-top: 12px; }
.task-message .rewrite-wait, .rewrite-wait { display: flex; align-items: flex-start; gap: 6px; margin: 0; }
.rewrite-wait .ic { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--accent); }
.card-attachments { display: grid; gap: 10px; margin-top: 12px; }
.attach-zone { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 12px 14px; border: 1px dashed var(--line-2); border-radius: 8px;
  background: var(--canvas); font-size: 13px; color: var(--ink-2); outline: 0; }
.attach-zone > .ic { flex: none; width: 18px; height: 18px; color: var(--ink-2); }
.attach-zone .attach-say { flex: 1 1 260px; min-width: 0; }
.attach-zone .attach-tools { display: inline-flex; gap: 6px; flex: none; }
.attach-zone:focus-visible, .attach-zone:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.card-attachments.is-drop .attach-zone, .message.is-drop textarea { border-color: var(--accent); border-style: dashed; background: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-soft); }
.attach-link-form { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 8px 12px; align-items: end; }
.attach-link-form .actions { grid-column: 1 / -1; display: flex; gap: 6px; }
@media (max-width: 760px) { .attach-link-form { grid-template-columns: 1fr; } }
.att-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.att-row { position: relative; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 6px; border-radius: 6px; font-size: 13px; }
.att-row:hover { background: var(--hover); }
.att-row.is-pending { color: var(--ink-2); }
.att-row.is-pending > .ic { width: 15px; height: 15px; }
.att-open { display: inline-flex; align-items: center; gap: 8px; flex: 1; min-width: 0; padding: 0; border: 0; background: none; font: inherit; font-size: 14px;
  color: var(--accent); text-align: left; cursor: pointer; }
.att-open .ic { flex: none; width: 15px; height: 15px; color: var(--ink-2); }
.att-open:hover .ellipsis { text-decoration: underline; text-underline-offset: 2px; }
.att-open.is-open .ellipsis { font-weight: 700; }
.att-meta { flex: none; font-size: 12px; color: var(--ink-2); }
.att-row .copy-pill { flex: none; margin: 0; }
.att-remove { flex: none; }
.on-list.off-list { color: var(--ink-2); }
.on-list.off-list.is-new { color: var(--accent); font-weight: 600; }

/* -- The app, model and effort: the default's in the Agent dialog, a card's own in its chat (0.2.5 Changes 150, 151) -- */
.agent-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 12px; align-items: end; }
.agent-fields .agent-no-effort { margin: 0 0 8px; }
@media (max-width: 760px) { .agent-fields { grid-template-columns: 1fr; } }
.agent-row:disabled { cursor: default; opacity: 0.6; }
/* Under the chat box: Runs in, then the app, the model and the effort, each a small dropdown (Change 156). */
.chat-runs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; font-size: 12px; color: var(--ink-2); }
.chat-runs-label { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.chat-runs-label .ic { width: 14px; height: 14px; color: var(--accent); }
.chat-runs select.runs-pick {
  height: 26px; min-width: 0; max-width: 220px; padding: 0 26px 0 10px; border: 1px solid var(--line-2); border-radius: 999px;
  background-color: var(--canvas); background-position: right 9px center; color: var(--ink); font: inherit; font-size: 12px;
  text-overflow: ellipsis; cursor: pointer;
}
.chat-runs select.runs-pick:hover { border-color: var(--accent); }
.chat-runs.is-own select.runs-pick { border-color: var(--accent); background-color: var(--accent-soft); }
.chat-runs .runs-default { font-size: 12px; }
.chat-runs .runs-note { color: var(--ink-3); }


/* -- 0.2.5 Change 153: a subtask's ⓘ and … at the right of its name, before Assigned to, as a next step's ⓘ is --------- */
.sub-row .sub-name-cell { flex: 1 1 auto; display: flex; align-items: center; gap: 2px; min-width: 0; }
.sub-row .sub-name-cell > .sub-name, .sub-row .sub-name-cell > .rename-input { flex: 1 1 auto; min-width: 0; }
.sub-row .sub-name-cell > .task-tools { flex: none; margin-left: 0; }
/* Its name keeps room to be read on a narrow card, with ⓘ and … beside it: the checklist scrolls sideways first. */
.subtask-block .sub-row .sub-name-cell, .subtask-block .check-head .check-head-name { min-width: 150px; }

/* -- Change 155: a subtask's simple checklist, a tick and a name; on its parent's row, how much of it is done -------- */
.simple-checks .simple-row { min-height: 30px; }
.sub-checks { flex: none; display: inline-flex; align-items: center; gap: 2px; padding: 0 4px; font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.sub-checks .ic { width: 12px; height: 12px; }
.sub-checks.is-done { color: var(--accent); }

/* -- Change 154: a minimized side panel, a circle each at the bottom right: the card's, the doc's, Daily notes' ------- */
.min-dock, .assistant-dock {
  position: fixed; z-index: 47; display: flex; gap: 10px;
  right: calc(20px + env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}
.min-dot, .assistant-dot {
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid var(--line-2); border-radius: 50%;
  background: var(--canvas); color: var(--accent); box-shadow: var(--shadow-pop); cursor: pointer;
}
.min-dot .ic, .assistant-dot .ic { width: 20px; height: 20px; }
.min-dot:hover, .assistant-dot:hover { background: var(--hover); color: var(--ink); }
.min-dot:focus-visible, .assistant-dot:focus-visible { border-radius: 50%; }

/* The account menu opens over the side panels, the doc's among them, so My daily notes and the rest are in reach while
   a doc is open (found with Change 154). */
.appbar:has(.menu-anchor > .menu) { z-index: 46; }

/* -- 0.2.5 Change 172: Today's View options say how early agendas and business updates come in ---------------------- */
.menu-label { margin: 0; padding: 6px 10px 2px; font-size: 12px; color: var(--ink-2); }
.ahead-option .tag-on { margin-left: auto; color: var(--accent); }

/* -- 0.2.5 Change 173: the Task Manager chat, a circle at the bottom left, as the side panels' are at the bottom right
   (Change 154), and its pop-out in the circle's place. An answer may offer a setting, with Apply, and say what it did. */
.assistant-dock { right: auto; left: calc(16px + env(safe-area-inset-left, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.assistant-dot { position: relative; }
.assistant-dot .cowork-dot { top: 11px; left: 37px; }
.assistant-pop {
  position: fixed; z-index: 47;
  left: calc(16px + env(safe-area-inset-left, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: min(400px, calc(100vw - 32px)); height: min(560px, calc(100vh - 96px));
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  background: var(--canvas); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-pop); overflow: hidden;
}
.assistant-head { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 6px 0 14px; border-bottom: 1px solid var(--line); }
.assistant-head h2 { flex: 1; display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 600; }
.assistant-head h2 .ic { width: 18px; height: 18px; color: var(--accent); }
.assistant-chat { flex: none; min-height: 0; padding: 12px 14px; }
.assistant-chat .chat-box.is-off { padding: 8px 12px; background: var(--side); }
.assistant-wait { margin: 0; font-size: 13px; }
/* Its box keeps its formatting bar shown, so nothing in the chat moves when the box loses the focus, as when Apply is
   pressed while typing. */
.assistant-pop .chat-box .md-chat .md-toolbar { display: flex; }
/* The nav's foot keeps clear of the circle. */
.nav-foot { padding-bottom: 84px; }
.chat-setting { display: grid; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.chat-setting-says { display: flex; gap: 6px; align-items: flex-start; margin: 0; font-size: 12.5px; color: var(--ink); }
.chat-setting-says .ic { flex: none; width: 13px; height: 13px; margin-top: 2px; color: var(--ink-2); }
.chat-setting .btn { justify-self: start; }

/* -- 0.2.5 Change 175: the pinned channels in a Pinned section of their own, under Teams and its search, as in Planner's
   navigation: each with its name, cut short when long, and its team under it, smaller and muted. */
.nav-pinned-head { padding-top: 6px; }
.nav-pinned { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; margin: 0 0 6px; }
/* A pinned channel's grip, left of its icon, shown on hover, to drag it up or down the list (Change 197). */
.nav-pinned .nav-ch > .drag-grip { left: -2px; height: 32px; }
.nav-pinned .nav-ch:hover > .drag-grip, .nav-pinned .nav-ch:has(:focus-visible) > .drag-grip { opacity: 1; }
.nav-pinned .nav-ch.is-dragging { opacity: 0.4; }
.nav-item.nav-item-2 { min-height: 44px; padding-top: 4px; padding-bottom: 4px; }
.nav-item-2 .ic { flex: none; width: 14px; height: 14px; align-self: flex-start; margin-top: 3px; }
.nav-two { flex: 1 1 auto; min-width: 0; display: grid; line-height: 1.3; }
.nav-two .nav-label { font-size: 13px; }
.nav-sub { font-size: 11.5px; font-weight: 400; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* -- what a card's chat changed, and what the Task Manager chat passed on (0.2.5 Changes 188, 189) ------------------- */
.chat-edits .ic, .chat-passed .ic { color: var(--accent); }
.chat-edits.is-pending, .chat-passed.is-pending { color: var(--ink-3); }
.chat-edits-failed .ic { color: var(--warn); }
.chat-passed-card { font-size: 12px; }

/* -- Link a Feishu Doc (0.2.5 Changes 191 and 199): the hint under the box the copied link comes into -------------------- */
.link-clip-hint { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0 0; font-size: 12.5px; }
.link-clip-hint .ic { flex: none; width: 14px; height: 14px; margin-top: 2px; color: var(--accent); }

/* -- New Feishu Doc's dialog (0.2.5 Change 192) ---------------------------------------------------------------------- */
.modal-fdoc { width: min(560px, calc(100vw - 32px)); }
.fdoc-preview { gap: 6px; }
.fdoc-path {
  display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--canvas); font-family: var(--mono, ui-monospace, Consolas, monospace); font-size: 12.5px;
  color: var(--ink); overflow-wrap: anywhere;       /* breaks at a space where it can, so a word stays whole */
}
.fdoc-path .ic { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--accent); }
.fdoc-wait { margin: 0; font-size: 13px; }


/* -- "+ Add new task" under an agenda's Next steps (0.2.5 Change 193): the list's own row, at the list's indent -------- */
.next-steps .ns-add, .next-steps .ns-add-edit { padding-left: 36px; border-bottom: 0; }
.next-steps .ns-add { min-height: 36px; border-radius: 6px; }
.ns-source-hand .ic { color: var(--accent); }


/* -- the co-work app's dot in a channel's list (0.2.5 Change 195): where a task's … button shows on hover, and at the
   end of a card's name, the same size; the … button hides it while it shows, as in every list ------------------------ */
.task-line > .row-dot, .prow-card .card-row-dot {
  position: absolute; right: 0; top: 50%; width: 28px; height: 28px; transform: translateY(-50%); pointer-events: none;
}
.prow-card .row-main { position: relative; padding-right: 30px; }
@media (hover: hover) { .prow-card:hover .card-row-dot .cowork-dot { visibility: visible; } }


/* -- Stop for Gather next steps and Provide meeting summary (0.2.5 Change 196): a small x right of the percentage ------ */
.ns-busy { display: inline-flex; align-items: center; gap: 0; }
.ns-busy .ns-stop { width: 24px; height: 24px; margin-left: 2px; color: var(--ink-2); }
.ns-busy .ns-stop .ic { width: 14px; height: 14px; }
.ns-busy .ns-stop:hover { color: var(--danger, var(--warn)); background: var(--hover); }

/* -- 0.2.5 Change 210: ⓘ and … on every checklist item, and an item's own details under it ---------------------------- */
.sub-row .sub-name-cell > .cl-text { flex: 1 1 auto; min-width: 0; }
.card-checklist .sub-row .sub-name-cell, .card-checklist .check-head .check-head-name { min-width: 150px; }
.sub-row.is-open .task-tools { opacity: 1; pointer-events: auto; }
.cl-panel { list-style: none; margin: 2px 0 8px 34px; padding: 12px 14px; display: grid; gap: 10px;
  border: 1px solid var(--line-2); border-radius: 8px; background: var(--canvas); }
.cl-panel-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; align-items: start; }
.cl-panel-facts .cell-btn, .cl-panel-facts .cell { justify-self: start; }
.cl-panel-done { justify-self: start; }
.cl-panel-done.is-done { color: var(--accent); }
.cl-panel-hours { font-size: 13px; color: var(--ink); padding-top: 6px; }
.cl-panel-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cl-panel-actions .btn:last-child { margin-left: auto; }
/* Its Assigned to and Due look like the fields beside them, and show in full (Change 210). */
.cl-panel-facts .cell-who, .cl-panel-facts .who-btn { width: auto; max-width: 100%; white-space: nowrap; }
.cl-panel-facts .cell-btn { height: 34px; padding: 0 10px; gap: 6px; border: 1px solid var(--line-2); border-radius: 4px; background: var(--canvas);
  display: inline-flex; align-items: center; justify-content: flex-start; }
.cl-panel-facts .cell-btn .ic { width: 14px; height: 14px; }
.cl-panel-facts { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.cl-panel-facts .who > .ellipsis { flex: none; }       /* the whole name: the field has room for it */
.cl-panel-facts .cell-btn { margin: 0; width: max-content; max-width: 100%; }      /* lined up with Status, and as wide as its name */

/* -- Teams: every channel, grouped by team (0.2.5 Change 215) ------------------------------------------------------- */
/* As the task list: its name, then Accessed by you. The pin is where a task's circle is. */
/* Its columns are fitted as every list's are (LIST_COLS.teams); as narrow as a phone's, each row stacks. */
.teams-row { min-height: 48px; }
.teams-row .row-title { display: flex; align-items: center; gap: 6px; }
.teams-row .row-title > .ellipsis { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.teams-ic { flex: none; width: 15px; height: 15px; color: var(--ink-2); }
.teams-row.is-team .row-title { font-weight: 600; }
.teams-pin { justify-self: center; color: var(--ink-3); }
.teams-pin .ic { width: 16px; height: 16px; }
.teams-pin:hover { color: var(--ink); }
.teams-row.is-pinned .teams-pin { color: var(--accent); }
.teams-row.is-pinned .teams-pin .ic { fill: currentColor; }
@media (hover: hover) {
  .teams-row:not(.is-pinned) .teams-pin { opacity: 0; }
  .teams-row:hover .teams-pin, .teams-row .teams-pin:focus-visible { opacity: 1; }
}
.cell-accessed { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cell-accessed .cell-none { color: var(--ink-3); }
.grid[data-hide~="accessed"] .cell-accessed { display: none; }
@container grid (max-width: 480px) {
  :where(.grid-teams:not([data-fit])) .row .teams-pin { grid-column: 1; grid-row: 1; margin-top: 2px; }
}

/* -- 0.2.5 Change 216: a checklist item's details look as a next step's, and each has a chat of its own --------------- */
/* The side is where it came from, or where it is, above the item's own chat; the chat takes the room left, its log
   scrolls, and its box stays at the foot. */
.modal.modal-step { width: min(1080px, calc(100vw - 48px)); }
.modal-step .step-panes { grid-template-columns: minmax(0, 1fr) 380px; }
.modal-step .step-side { overflow: hidden; padding: 0; gap: 0; }
.modal-step .step-about { flex: none; max-height: 42%; overflow-y: auto; padding: 18px 20px 14px; display: flex; flex-direction: column; gap: 10px;
  border-bottom: 1px solid var(--line); }
.modal-step .step-about > * { margin: 0; }
.modal-step .pop-chat { flex: 1 1 auto; min-height: 0; padding: 14px 20px 16px; gap: 10px; }
.modal-step .pop-chat > h3 { display: flex; align-items: center; gap: 6px; margin: 0; }
.modal-step .pop-chat > h3 .ic { width: 15px; height: 15px; color: var(--accent); }
.modal-step .pop-chat .chat-log { min-height: 80px; }
.modal-step .pop-chat .chat-msg { max-width: 96%; }
.modal-step .pop-chat .chat-box .md-chat .md-toolbar { display: flex; }      /* nothing moves when the box loses the focus */
/* The person's whole name beside their face, in either pop-up: the field has room for it (it was cut to "Me…"). */
.modal-step .planner-row .who-btn > span:last-child { flex: none; }
.modal-step .cl-on { display: flex; align-items: flex-start; gap: 6px; color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.modal-step .cl-on .ic { flex: none; width: 14px; height: 14px; margin-top: 2px; color: var(--ink-2); }
@media (max-width: 760px) {
  .modal-step .step-side { overflow: visible; }
  .modal-step .step-about { max-height: none; }
  .modal-step .pop-chat { min-height: 420px; }
}

/* -- 0.2.5 Change 221: the Teams list says when gm last read the person's teams and channels, with Sync now; a channel
   added in the last week says New -------------------------------------------------------------------------------- */
.toolbar .teams-sync { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-2); }
.toolbar .teams-sync .ic { width: 13px; height: 13px; color: var(--alert); }
.teams-row .label-new { flex: none; margin-left: 8px; background: var(--accent-soft); color: var(--accent); font-weight: 600; }

/* -- 0.2.5 Change 222: a long list's foot, which draws its next rows as it comes near the screen, or when clicked ---- */
.rows-more { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 44px; padding: 0 12px;
  border: 0; border-top: 1px solid var(--line); background: var(--canvas); color: var(--ink-2); font: inherit; font-size: 13px; cursor: pointer; }
.rows-more:hover { background: var(--hover); color: var(--ink); }
.rows-more .ic { width: 15px; height: 15px; }

/* -- 0.2.5 Change 223: a breadcrumb goes back up a level, as Planner's: plain until the pointer is on it, then a light
   fill and a thin border; the place you are stays bold -------------------------------------------------------------- */
.crumbs .crumb-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; margin: 0 -4px;
  border: 1px solid transparent; border-radius: 6px; background: none; color: var(--ink); font: inherit; font-size: 15px; font-weight: 500;
  cursor: pointer; white-space: nowrap; }
.crumbs .crumb-btn:hover { background: var(--hover); border-color: var(--line-2); }
.crumbs .crumb-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.crumbs .crumb-btn .ic { width: 16px; height: 16px; color: var(--ink-2); }
.crumbs .crumb-here { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; }
.crumbs .crumb-here .ic { width: 16px; height: 16px; color: var(--ink-2); }

/* -- 0.2.5 Change 228: the Usage dashboard. Four charts, two by two, each with This month, This week and Today above its
   line chart. The series colours are the validated categorical slots, light and dark (dataviz palette); text stays in
   the page's ink; gridlines are hairlines; lines 2px with a dot at their last value. ------------------------------------ */
:root {
  --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100; --series-5: #e87ba4; --series-6: #6250d6;
  --series-other: #9aa8a4;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --series-5: #d55181; --series-6: #9085e9;
    --series-other: #6f7f7a;
  }
}
:root[data-theme="dark"] {
  --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --series-5: #d55181; --series-6: #9085e9;
  --series-other: #6f7f7a;
}
.usage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: 16px; margin-top: 16px; }
.usage-card { background: var(--canvas); border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.usage-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.usage-head h2 { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.usage-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.usage-stat { display: grid; gap: 2px; min-width: 0; }
.usage-stat-label { font-size: 12px; color: var(--ink-2); }
.usage-stat-value { font-size: 24px; font-weight: 600; color: var(--ink); line-height: 1.2; overflow-wrap: anywhere; }
.usage-plot { position: relative; }
.usage-plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.usage-grid-line { stroke: var(--line); stroke-width: 1; }
.usage-tick { fill: var(--ink-2); font-size: 11px; font-variant-numeric: tabular-nums; }
.usage-line { fill: none; stroke: var(--k); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.usage-dot { fill: var(--k); stroke: var(--canvas); stroke-width: 2; }
.usage-cross { stroke: var(--ink-3); stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }
.usage-hit { fill: transparent; cursor: crosshair; }
.usage-tip { position: absolute; top: 4px; z-index: 2; min-width: 150px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--canvas); box-shadow: var(--shadow-pop); font-size: 12px; color: var(--ink-2); pointer-events: none; }
.usage-tip p { display: flex; align-items: center; gap: 6px; margin: 0; white-space: nowrap; }
.usage-tip p + p { margin-top: 3px; }
.usage-tip strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.usage-tip-when { color: var(--ink); font-weight: 600; margin-bottom: 4px !important; }
.usage-key { flex: none; width: 14px; height: 2px; border-radius: 1px; background: var(--k); }
.usage-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: 12px; color: var(--ink-2); }
.usage-legend li { display: inline-flex; align-items: center; gap: 6px; }
.usage-table summary { cursor: pointer; font-size: 12px; color: var(--ink-2); }
.usage-table-wrap { max-height: 240px; overflow: auto; margin-top: 8px; }
.usage-table table { border-collapse: collapse; width: 100%; font-size: 12px; font-variant-numeric: tabular-nums; }
.usage-table th, .usage-table td { padding: 4px 8px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.usage-table th:first-child { text-align: left; }
.usage-table thead th { color: var(--ink-2); font-weight: 600; position: sticky; top: 0; background: var(--canvas); }

/* -- 0.2.5 Change 234: an email card's Outlook draft, first in its Docs, in its own short list above the links. -------- */
.link-list-draft { margin-bottom: 4px; }
.link-ic.w-outlook { background: hsl(208 80% 93%); color: hsl(208 75% 34%); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .link-ic.w-outlook { background: hsl(208 40% 24%); color: hsl(208 80% 82%); }
}
:root[data-theme="dark"] .link-ic.w-outlook { background: hsl(208 40% 24%); color: hsl(208 80% 82%); }
.link-list-draft .link-row > .btn { flex: none; align-self: center; }