/* Additions layered on top of the base Intricate Solutions stylesheets (see CSS.md). */

body { font-family: 'Lato', sans-serif; }

/* Form controls do NOT inherit font-family -- the browser applies its own UA
   default, which is why every input, select and textarea rendered in a serif
   while the rest of the page was Lato. Nothing was overriding it; it was simply
   never set. */
input, select, textarea, button, optgroup, option {
  font-family: 'Lato', sans-serif;
}
/* Native selects also ignore the parent's size in some browsers. */
input, select, textarea { font-size: 1.3rem; }
h3 { font-family: 'Lato Light', 'Lato', sans-serif; }
h5 { font-family: 'Lato Light', 'Lato', sans-serif; }

/* The base .content is a "centered content div" (css/new-style.css) -- it sets
   text-align:center, which centres every heading and form on an app page. App
   screens are left-aligned documents, so this opts out. */
.app-content {
  text-align: left;
  /* Breathing room on both sides. The base .content only sets a left MARGIN to
     clear the sidebar, so without this the page ran flush from the sidebar edge
     to the window edge. */
  padding: 0 var(--size-8) var(--size-9);
  /* A cap on line length. Full-width text on a wide monitor is what made this
     read as busy -- the eye has too far to travel back. Tables and boards opt
     out below, because they genuinely want the width. */
  max-width: 150rem;
  box-sizing: border-box;
}
.app-content > h1:first-child { margin-top: 0; }
/* Wide content earns the whole window. */
.app-content:has(.table-scroll), .app-content:has(.board-wrapper) { max-width: none; }

/* The breadcrumb must clear the sidebar too.
   The base sheet offsets `div.breadcrumb-content`, but this app's markup is
   `div.breadcrumb`, so no offset applied and the full-height sidebar covered the
   left of it -- a breadcrumb reading "tion TIER" instead of "Acquisition TIER". */
div.breadcrumb { transition: padding-left .3s; box-sizing: border-box; }
div.breadcrumb.sidebar-expanded { padding-left: 28rem; }
div.breadcrumb.sidebar-collapsed { padding-left: 6.6rem; }
@media only screen and (max-width: 600px) {
  div.breadcrumb.sidebar-expanded, div.breadcrumb.sidebar-collapsed { padding-left: var(--size-5); }
  .app-content { padding-left: var(--size-5); padding-right: var(--size-5); }
}

/* The header is position:fixed (4.5rem bar + breadcrumb), so page content needs
   a matching top offset or it slides underneath. This was an inline 97px on the
   wrapper; kept as a rule so it is overridable, and it is empirical rather than
   derived -- the header's two bands are styled in different base stylesheets. */
.wrapper { margin-top: 97px; }

/* Sidebar runs the full height of the window, as in CRM (static/css/crm.css:
   position fixed, top 0, height 100vh). The base header is already padded left
   by 27rem / 5.66rem via .new-ui-topheader.sidebar-expanded|collapsed, so the
   header sits beside the sidebar rather than above it. */
.sidebar-new { top: 0; height: 100vh; bottom: auto; z-index: 10; }

/* Header icons, normalised.
   Two problems here: FontAwesome's .fa-stack is 2em, and this app put fa-stack
   ON the button (CRM nests it inside one), so the icons rendered far larger than
   the plain <i> icons beside them and the header row read as unevenly spaced.
   Everything in the header is now pinned to one visual size. */
#new-toprightnav { gap: 0.4rem !important; }
#new-toprightnav .header-dialog-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.4rem; height: 3.4rem; border: none; background: none;
  color: #EFEFEF; cursor: pointer; transition: color 0.3s;
}
#new-toprightnav .header-dialog-button:hover { color: #fff; }
#new-toprightnav .fa-stack { font-size: 0.85rem; width: 2em; height: 2em; line-height: 2em; }
#new-toprightnav .header-dialog-button > .fal,
#new-toprightnav .header-user-actions .fal { font-size: 1.7rem; }
#new-toprightnav .header-user-actions {
  display: flex; align-items: center; gap: 0.6rem; color: white; margin-left: 0.4rem;
}
#new-toprightnav .header-user-name { font-size: 1.3rem; white-space: nowrap; }
.sidebar-scroll { overflow-y: auto; overflow-x: hidden; height: calc(100vh - 4.5rem); padding-bottom: var(--size-8); }
/* The rail scrolls vertically.
   `overflow: hidden` was fine when the rail was empty; now that it lists every
   space at every depth -- 28 of them here -- hiding the overflow would make
   anything past the fold unreachable without expanding first, which is the
   problem the rail exists to solve. Horizontal stays hidden so a wide row cannot
   widen the rail. */
.sidebar-new.collapsed .sidebar-scroll { overflow-y: auto; overflow-x: hidden; }
/* A thin scrollbar, so it does not eat a rail this narrow. */
.sidebar-new.collapsed .sidebar-scroll { scrollbar-width: thin; }
.sidebar-new.collapsed .sidebar-scroll::-webkit-scrollbar { width: 0.4rem; }
.sidebar-new.collapsed .sidebar-scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.25); border-radius: 0.2rem;
}

.sidebar-nav { list-style: none; padding: 0.5rem 0 0; margin: 0; }
.sidebar-link {
  display: flex; align-items: center; gap: var(--size-6);
  padding: var(--size-5) var(--size-7); color: white; text-decoration: none;
  white-space: nowrap;
}
.sidebar-link:hover { background-color: rgba(255,255,255,0.15); color: #FFDB9F; }
.sidebar-link.active { background-color: rgba(255,255,255,0.15); border-left: var(--size-2) solid #FFDB9F; }
.sidebar-link .fal { width: 2rem; text-align: center; flex: 0 0 2rem; }

/* Collapsed rail: icons only. The base rule hides .sidebar-item children, but
   this tree uses its own markup, so labels and the tree are hidden here. */
/* Collapsed rail keyed on .collapsed, as in CRM's crm.css, rather than the base
   sheet's :not(.expanded) -- so the toggle matches the other ERP apps. */
.sidebar-new.collapsed { width: 5.66rem; }
.sidebar-new.collapsed .sidebar-label,
.sidebar-new.collapsed .sidebar-filter,
.sidebar-new.collapsed .sidebar-filter-empty,
.sidebar-new.collapsed .sidebar-section-head { display: none; }

/* Collapsed, the tree becomes a rail of space initials rather than nothing.
   The avatars already exist in the markup (nav-spaces.ejs renders sp.initial);
   collapsing simply hid the whole tree, so the rail was all-or-nothing and gave
   no way to reach a space without expanding first.

   SPACES only, at every depth. Folders and programs stay hidden: a rail of
   indistinguishable letters for every list would be noise, while a nested space
   is still a client or a business unit and worth reaching in one click. Each
   link keeps a title, so hovering names it. */
.sidebar-new.collapsed .sidebar-tree { display: block; padding: 0; }

/* Only the branch you are IN expands in the rail.
   Overriding [hidden] here showed every space at every depth -- 28 of them --
   which made the rail dense enough to be useless. So the rail follows the same
   [hidden] the full tree uses: top-level spaces always, plus the path down to
   wherever you are, which navTree marks as containsActive. */
.sidebar-new.collapsed .sidebar-tree .tree-children:not([hidden]) {
  display: block; padding: 0; margin: 0;
}
/* :not([hidden]) is doing real work here, and leaving it off is what put every
   space at every depth back on the rail -- 28 letters in one 5.66rem column,
   which is what this rule set out to avoid.
   [hidden] hides an element via `display: none` in the UA stylesheet, and ANY
   author `display` declaration outranks the UA one. So an unqualified
   `display: block` on .tree-children re-showed the shut branches while looking
   like it was only laying out the open ones. Stated again explicitly, so the
   next person to touch this cannot silently undo it. */
.sidebar-new.collapsed .sidebar-tree .tree-children[hidden] { display: none; }
/* Everything that is not a space. A folder's own spaces still show, because the
   folder is only a grouping -- what is inside it is not. */
.sidebar-new.collapsed .sidebar-tree .tree-folder > .tree-row,
.sidebar-new.collapsed .sidebar-tree .tree-list { display: none; }

/* Depth, at a step small enough to survive a 5.66rem rail. It compounds through
   the nested lists, so a grandchild sits further in than a child without anyone
   counting levels. */
.sidebar-new.collapsed .sidebar-tree .tree-children:not([hidden]) { padding-left: 0.45rem; }
/* Past about three levels the indent would push the avatar off the rail, so it
   stops rather than overflowing. */
.sidebar-new.collapsed .sidebar-tree .tree-children .tree-children .tree-children {
  padding-left: 0;
}
/* Nested avatars read as subordinate rather than as more top-level spaces. */
.sidebar-new.collapsed .sidebar-tree .tree-children .space-avatar {
  flex-basis: 1.6rem; width: 1.6rem; height: 1.6rem; font-size: 0.95rem;
}
.sidebar-new.collapsed .sidebar-tree .tree-name,
.sidebar-new.collapsed .sidebar-tree .tree-count,
.sidebar-new.collapsed .sidebar-tree .tree-toggle,
.sidebar-new.collapsed .sidebar-tree .tree-add,
.sidebar-new.collapsed .sidebar-tree .tree-remove,
.sidebar-new.collapsed .sidebar-tree .tree-drag-handle { display: none; }
.sidebar-new.collapsed .sidebar-tree .tree-row {
  justify-content: center; padding: 0.3rem 0;
}
.sidebar-new.collapsed .sidebar-tree .tree-link {
  justify-content: center; padding: 0; width: 100%;
}
.sidebar-new.collapsed .sidebar-tree .space-avatar { margin: 0; }
.sidebar-new.collapsed .sidebar-link { justify-content: center; padding-left: 0; padding-right: 0; }
.sidebar-toggle-row {
  display: flex; align-items: center; height: 4.5rem;
  padding: 0 var(--size-5); border-bottom: 1px solid rgba(255,255,255,0.15);
}
.sidebar-toggle-btn { color: #fff; font-size: 1.5rem; background: none; border: none; cursor: pointer; }
.sidebar-toggle-btn:hover { color: #FFDB9F; }

.sidebar-section-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--size-6) var(--size-7) var(--size-3);
  margin-top: var(--size-4); border-top: 1px solid rgba(255,255,255,0.18);
}
.sidebar-section-title {
  color: rgba(255,255,255,0.72); text-decoration: none;
  font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: bold;
}
.sidebar-section-title:hover, .sidebar-section-title.active { color: #FFDB9F; }
.sidebar-section-action { color: rgba(255,255,255,0.72); text-decoration: none; }
.sidebar-section-action:hover { color: #FFDB9F; }

/* Type-to-filter (spec 6.1) */
.sidebar-filter {
  display: flex; align-items: center; gap: var(--size-3);
  margin: 0 var(--size-6) var(--size-4);
  background: rgba(0,0,0,0.18); border-radius: var(--size-4); padding: 0 var(--size-4);
}
.sidebar-filter input {
  flex: 1; background: transparent; border: none; outline: none;
  color: white; padding: var(--size-4) 0; font-size: 1.25rem; min-width: 0;
}
.sidebar-filter input::placeholder { color: rgba(255,255,255,0.55); }
.sidebar-filter .fal { color: rgba(255,255,255,0.6); font-size: 1.2rem; }
.sidebar-filter-clear { cursor: pointer; visibility: hidden; }
.sidebar-filter.has-value .sidebar-filter-clear { visibility: visible; }
.sidebar-filter-empty {
  display: none; color: rgba(255,255,255,0.6); font-style: italic;
  padding: var(--size-4) var(--size-7); font-size: 1.2rem;
}
.sidebar-filter-empty.show { display: block; }

/* Tree */
.sidebar-tree, .tree-children { list-style: none; margin: 0; padding: 0; }
.tree-children { padding-left: 1.5rem; }
.tree-row {
  display: flex; align-items: center; gap: var(--size-3);
  padding: 0.35rem var(--size-6); border-left: var(--size-2) solid transparent;
}
.tree-row:hover { background: rgba(255,255,255,0.12); }
.tree-row.active { background: rgba(255,255,255,0.18); border-left-color: #FFDB9F; }
.tree-toggle {
  cursor: pointer; width: 1.6rem; flex: 0 0 1.6rem; text-align: center;
  font-size: 1.2rem; transition: transform 0.12s; color: rgba(255,255,255,0.7);
}
.tree-toggle.open { transform: rotate(90deg); }
.tree-toggle:hover { color: #FFDB9F; }
.tree-icon { width: 1.6rem; flex: 0 0 1.6rem; text-align: center; font-size: 1.2rem; color: rgba(255,255,255,0.7); }
.tree-link {
  display: flex; align-items: center; gap: var(--size-4);
  color: white; text-decoration: none; flex: 1; min-width: 0; font-size: 1.25rem;
}
.tree-link:hover { color: #FFDB9F; }
.tree-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-folder-name { cursor: default; color: rgba(255,255,255,0.9); }
.tree-count {
  background: rgba(0,0,0,0.28); border-radius: 1rem; padding: 0 0.5rem;
  font-size: 1rem; min-width: 1.8rem; text-align: center; flex: 0 0 auto;
}
.space-avatar {
  flex: 0 0 2rem; width: 2rem; height: 2rem; border-radius: 0.4rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: bold; font-size: 1.15rem; color: white;
}
/* Filtering hides non-matching rows; matches keep their ancestors visible. */
.tree-space.filtered-out, .tree-folder.filtered-out, .tree-list.filtered-out { display: none; }

#header-bar .header-dialog-button { position: relative; }
.header-dialog { display: none; }
.header-dialog.open { display: block; }

/* Admin flyout from the header cog. Admin screens are configuration, visited
   rarely and deliberately, so they live here rather than competing with the
   four day-to-day destinations in the sidebar. */
.admin-menu-item {
  display: flex; align-items: flex-start; gap: var(--size-6);
  padding: var(--size-5) var(--size-6);
  color: var(--dark); text-decoration: none;
  border-left: var(--size-3) solid transparent;
}
.admin-menu-item:hover { background: var(--primary-faded); border-left-color: var(--primary); }
.admin-menu-item.active { background: var(--primary-faded); border-left-color: var(--primary); }
.admin-menu-item .fal { color: var(--primary); font-size: 1.5rem; margin-top: 0.1rem; width: 1.8rem; text-align: center; }
.admin-menu-label { display: block; font-weight: bold; }
.admin-menu-hint { display: block; color: var(--accent); font-size: 1.1rem; }

@media only screen and (max-width: 600px) {
  .sidebar-new.sidebar-expanded { width: 0; display: none; }
  .content.sidebar-expanded { margin-left: 0; }
}

/* Dashboard / My Work */
.my-work-section { margin-bottom: var(--size-8); }
.my-work-section h3 { color: var(--dark); }
.task-row-mini {
  display: flex; align-items: center; gap: var(--size-6);
  padding: var(--size-5) var(--size-6); border-bottom: var(--size-1) solid var(--accent-faded);
}
.task-row-mini a { color: var(--primary); font-weight: bold; text-decoration: none; }
.task-row-mini .due { font-style: italic; color: var(--accent); margin-left: auto; }

/* Board (Kanban) */
.board-wrapper { display: flex; gap: var(--size-6); overflow-x: auto; padding-bottom: var(--size-6); }
.board-column {
  background: #F4F4F4; border-radius: var(--size-4); width: 24rem; min-width: 24rem;
  padding: var(--size-5); box-shadow: var(--shadow);
}
.board-column-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--size-4) var(--size-3); font-weight: bold; border-bottom: var(--size-2) solid;
}
.board-column-count { color: var(--accent); font-weight: normal; }
.board-cards { min-height: 4rem; padding-top: var(--size-4); }
.board-card {
  background: white; border-radius: var(--size-4); box-shadow: var(--shadow);
  padding: var(--size-6); margin-bottom: var(--size-5); cursor: grab;
}
.board-card:active { cursor: grabbing; }
.board-card .ref { color: var(--accent); font-size: 1.2rem; font-family: monospace; }
.board-card .title { color: var(--dark); font-weight: bold; display: block; margin: var(--size-3) 0; text-decoration: none; }
.board-card .meta { display: flex; align-items: center; gap: var(--size-5); font-size: 1.2rem; color: var(--accent); }
.board-card .priority-urgent { color: #f00; font-weight: bold; }
.board-card .priority-high { color: var(--secondary); font-weight: bold; }
.board-add-task { width: 100%; text-align: left; }

/* Task detail */
.task-detail-grid { display: flex; gap: var(--size-8); }
.task-main { flex: 2; min-width: 0; }
.task-side { flex: 1; min-width: 26rem; }
.field-row { display: flex; align-items: center; padding: var(--size-4) 0; border-bottom: var(--size-1) solid var(--accent-faded); }
.field-row .field-label { width: 14rem; color: var(--accent); font-weight: bold; }
.field-row .field-label.required::after { content: ' *'; color: #f00; }
.field-row .field-input { flex: 1; }
.assignee-chip, .tag-chip {
  display: inline-flex; align-items: center; gap: var(--size-3);
  background: var(--primary-faded); color: var(--primary-darker); border-radius: 1rem;
  padding: var(--size-3) var(--size-6); margin: var(--size-2); font-size: 1.1rem;
}
.tag-chip { background: var(--accent-faded); color: var(--dark); }

/* Comments */
.comment { padding: var(--size-6) 0; border-bottom: var(--size-1) solid var(--accent-faded); }
.comment .comment-author { font-weight: bold; color: var(--primary); }
.comment .comment-date { font-style: italic; color: var(--accent); font-size: 1.1rem; margin-left: var(--size-4); }
.comment .comment-body { margin-top: var(--size-3); }

/* Status / severity badges */
.status-badge, .severity-badge {
  display: inline-block; padding: var(--size-3) var(--size-6); border-radius: 1rem;
  color: white; font-weight: bold; font-size: 1.1rem; text-transform: uppercase;
}
.severity-low { background: var(--accent); }
.severity-medium { background: #D07B18; }
.severity-high { background: var(--secondary); }
.severity-critical { background: #f00; }
.issue-status-open { background: #f00; }
.issue-status-in_progress { background: #D07B18; }
.issue-status-resolved { background: #2e7d32; }
.issue-status-closed { background: var(--accent); }
.issue-status-wont_fix { background: var(--accent); font-style: italic; }

/* Client Hub */
.client-hub-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--size-7); }
.client-panel { background: white; border-radius: var(--size-4); box-shadow: var(--shadow); padding: var(--size-6); }
.client-panel h4 { margin-top: 0; }
@media only screen and (max-width: 1110px) { .client-hub-grid { grid-template-columns: 1fr; } }

/* Docs */
.doc-shell { display: flex; gap: var(--size-7); }
.doc-sections { flex: 0 0 22rem; }
.doc-section-tab {
  border-left: var(--size-3) solid; padding: var(--size-5) var(--size-6);
  background: white; margin-bottom: var(--size-4); border-radius: 0 var(--size-4) var(--size-4) 0;
}
.doc-page-content { flex: 1; }
#pageEditor {
  min-height: 40rem; background: white; border: var(--size-1) solid var(--accent-faded);
  border-radius: var(--size-4); padding: var(--size-6); outline: none;
}
.editor-toolbar { margin-bottom: var(--size-4); }
.editor-toolbar button { margin-right: var(--size-3); }

/* Notification list */
.notif-item { display: block; padding: var(--size-6); border-bottom: var(--size-1) solid var(--accent-faded); text-decoration: none; color: var(--dark); }
.notif-item.unread { background: var(--primary-faded); }
.notif-item .notif-title { font-weight: bold; }
.notif-item .notif-date { font-style: italic; color: var(--accent); font-size: 1.1rem; }

/* Compliance dashboard (spec 13.3) */
.stat-card {
  background: white; border-radius: var(--size-4); box-shadow: var(--shadow);
  padding: var(--size-5) var(--size-6); min-width: 14rem;
}
.stat-card .stat-value { font-size: 2.8rem; font-weight: bold; line-height: 1.1; color: var(--dark); }
.stat-card .stat-label { color: var(--accent); font-size: 1.2rem; }
.stat-card .stat-sub { color: var(--accent); font-size: 1.1rem; font-style: italic; margin-top: var(--size-2); }
.pill {
  display: inline-block; padding: var(--size-2) var(--size-4); border-radius: var(--size-4);
  color: white; font-size: 1.1rem; white-space: nowrap;
}

/* Compliance tabs */
.compliance-tabs {
  display: flex; gap: var(--size-2); border-bottom: var(--size-1) solid var(--accent-faded);
  margin-bottom: var(--size-6);
}
.compliance-tab {
  padding: var(--size-4) var(--size-6); text-decoration: none; color: var(--accent);
  border-bottom: var(--size-3) solid transparent; display: flex; align-items: center; gap: var(--size-3);
}
.compliance-tab:hover { color: var(--primary); }
.compliance-tab.active { color: var(--primary); font-weight: bold; border-bottom-color: var(--primary); }
.tab-badge {
  background: var(--primary); color: white; border-radius: var(--size-4);
  padding: 0 var(--size-3); font-size: 1.1rem; font-weight: bold;
}
.watchdog-status {
  background: var(--primary-faded); border-left: var(--size-3) solid var(--primary);
  border-radius: 0 var(--size-4) var(--size-4) 0;
  padding: var(--size-5) var(--size-6); margin-bottom: var(--size-6); font-size: 1.2rem;
}

/* Notification settings */
.settings-panel {
  background: white; border-radius: var(--size-4); box-shadow: var(--shadow);
  padding: var(--size-5) var(--size-6); margin-bottom: var(--size-5);
}
.settings-row {
  display: flex; gap: var(--size-4); align-items: flex-start;
  padding: var(--size-4) 0; border-bottom: var(--size-1) solid var(--accent-faded);
}
.settings-row:last-child { border-bottom: none; }
.settings-row input[type="checkbox"] { margin-top: 0.3rem; }
.settings-hint { display: block; color: var(--accent); font-size: 1.15rem; }
.settings-warning {
  background: #fff4e5; border-left: var(--size-3) solid #e16b16;
  border-radius: 0 var(--size-4) var(--size-4) 0;
  padding: var(--size-5) var(--size-6); margin-bottom: var(--size-5);
}

/* Space page: engagements and empty states */
.engagement-card {
  background: white; border-radius: var(--size-4); box-shadow: var(--shadow);
  border-left: var(--size-3) solid var(--primary);
  padding: var(--size-5) var(--size-6); margin-bottom: var(--size-5);
}
.engagement-head {
  display: flex; align-items: center; gap: var(--size-4);
  margin-bottom: var(--size-4); font-size: 1.4rem;
}
.engagement-head .fal { color: var(--primary); }
.empty-state {
  background: white; border-radius: var(--size-4); box-shadow: var(--shadow);
  padding: var(--size-8); margin: var(--size-6) 0; max-width: 62rem;
}
.empty-state .fal { font-size: 3.5rem; color: var(--primary); opacity: 0.5; }
.empty-state h3 { margin: var(--size-5) 0 var(--size-4); }
.empty-state p { color: var(--accent); }

/* Editable list view */
.list-toolbar {
  display: flex; gap: var(--size-6); align-items: center;
  margin-bottom: var(--size-5); flex-wrap: wrap;
}
.list-toolbar kbd {
  background: var(--accent-faded); border-radius: 0.3rem; padding: 0 0.4rem;
  font-family: monospace; font-size: 1.05rem;
}
.table-scroll { overflow-x: auto; background: white; border-radius: var(--size-4); box-shadow: var(--shadow); }
/* min-width, not width.
   width:100% forced every column to share the viewport, so with a dozen columns
   shown the Task Name column was crushed to a few characters and its text
   wrapped onto three lines inside a row sized for one. The table may now exceed
   its container and .table-scroll scrolls -- which is what a spreadsheet does,
   and the reason that container exists. */
.task-table { min-width: 100%; width: auto; border-collapse: collapse; font-size: 1.25rem; }
/* Auto by default, per the min-width/width note above. A table only switches
   to fixed once a column has actually been resized (column-tools.js adds this
   class then), because fixed layout needs every column pinned to a pixel width
   to look right, and an untouched grid has none. */
.task-table.cols-fixed { table-layout: fixed; }
.task-table th {
  text-align: left; padding: var(--size-4) var(--size-5); white-space: nowrap;
  background: var(--primary); color: white; font-weight: bold; position: sticky; top: 0; z-index: 2;
  /* So the pixel width column-tools.js measures (getBoundingClientRect) is the
     same pixel width it later writes back to style.width -- with the default
     content-box a round trip through padding would grow the column every time. */
  box-sizing: border-box;
}
.task-table th.th-actions { width: 9rem; }
.task-table td { padding: 0; border-bottom: 1px solid var(--accent-faded); vertical-align: middle; }
.task-table tr.task-row:hover { background: var(--primary-faded); }
.task-table tr.dragging { opacity: 0.4; }

/* Cells read as cells: the whole box is the click target, and hovering shows it
   is editable rather than requiring the user to guess. */
.task-table td.cell, .task-table td.cell-ref, .task-table td.cell-comments,
.task-table td.cell-sow, .task-table td.cell-client { padding: var(--size-4) var(--size-5); }
.task-table td.editable { cursor: text; position: relative; }
.task-table td.editable:hover { box-shadow: inset 0 0 0 2px var(--primary); border-radius: 0.3rem; }
.task-table td.editable.editing { box-shadow: inset 0 0 0 2px var(--primary); padding: 0.2rem; }
.task-table td.cell-saved { background: #e6f4ea; transition: background 0.6s; }
.cell-empty { color: var(--accent); font-style: italic; }
.cell-editor {
  width: 100%; box-sizing: border-box; border: none; outline: none;
  font-family: inherit; font-size: inherit; padding: var(--size-3) var(--size-4);
  background: white;
}
select.cell-editor[multiple] { min-height: 8rem; }
.task-table td.cell-date { white-space: nowrap; }

/* One row, one line.
   A wrapped cell makes the row grow and knocks every other column out of
   alignment, which is the opposite of what a grid is for. Long values are
   ellipsised with the full text on hover (the title attribute is set by
   render/taskGrid.js) rather than being allowed to reflow the row. */
.task-table td.cell-title { max-width: 34rem; min-width: 22rem; }
.task-table td.cell-title .title-text {
  display: inline-block; max-width: 100%; vertical-align: bottom;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.task-table td.cell-parent, .task-table td.cell-client {
  max-width: 20rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The spreadsheet view holds every column to a single line. The hierarchy view
   leaves the rest alone -- its indent already implies a taller, softer row. */
.task-table.is-table td { white-space: nowrap; }
.task-table.is-table td.cell-title { max-width: 40rem; }
/* While a cell is being edited the input needs the room, so the clamp lifts. */
.task-table td.cell.editing { max-width: none; white-space: normal; }
.task-table td.cell.editing .title-text { max-width: none; overflow: visible; }
.task-table td.cell-sow { max-width: 20rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Row actions: dimmed at rest, full strength on hover.
   They used to be opacity 0, i.e. invisible until you hovered the row -- which
   made the drag grip and every row control undiscoverable, since there is
   nothing to tell you the lane holds anything at all. Dimmed still keeps the
   table readable while saying the controls are there. */
.cell-actions { white-space: nowrap; padding: 0 var(--size-4) !important; width: 9rem; }
.drag-handle { cursor: grab; color: var(--accent); opacity: 0.4; padding: 0 0.3rem; }
.row-btn {
  background: none; border: none; cursor: pointer; color: var(--accent);
  padding: 0 0.25rem; font-size: 1.15rem; opacity: 0.4;
}
.task-row:hover .drag-handle, .task-row:hover .row-btn { opacity: 1; }
.row-btn:hover { color: var(--primary); }
.row-btn:disabled { opacity: 0.15 !important; cursor: default; }
.row-btn:disabled:hover { color: var(--accent); }

.toggle-subtasks { cursor: pointer; margin-right: 0.4rem; color: var(--accent); width: 1.2rem; }
.toggle-spacer { display: inline-block; width: 1.6rem; }
/* Row depth, on the cell that holds the task name rather than on the Ref column
   -- so hiding Ref cannot flatten the tree.

   PADDING, not a spacer box. As an inline box the indent competed with the title
   for the line, and the title is `inline-block; max-width: 100%` measured against
   the CELL rather than against what is left beside the indent. Long titles
   therefore wrapped onto their own line, flush left, and the row looked un-nested
   precisely because its text was long. Padding sits outside that measurement, so
   it cannot push the content off the line.

   The indent step lives here and nowhere else; the renderer only says how deep a
   row is (--tree-depth). Declared after the general cell padding rule, which it
   overrides at equal specificity by source order. */
.task-table td.tree-cell {
  padding-left: calc(var(--size-5) + var(--tree-depth, 0) * 1.6rem);
}
/* Room for the chevron beside the name. Without this the title can still ask for
   the full cell width and wrap below a chevron only ~1.2rem wide. */
.task-table td.tree-cell > .title-text { max-width: calc(100% - 2rem); }
.ref-link { color: var(--primary); font-weight: bold; font-family: monospace; font-size: 1.1rem; }
.subtask-count {
  background: var(--accent-faded); color: var(--dark); border-radius: 1rem;
  padding: 0 0.5rem; font-size: 1.05rem; font-weight: normal;
}
.group-header-row td { font-weight: bold; padding: var(--size-4) var(--size-5) !important; }

/* Add rows */
.add-row td, .inline-add-row td { padding: var(--size-3) var(--size-5); background: #fafafa; }
.add-row-input {
  width: 100%; border: none; outline: none; background: transparent;
  font-family: inherit; font-size: 1.25rem; padding: var(--size-3) 0;
}
.add-row-input::placeholder { color: var(--accent); font-style: italic; }

/* Drop targets */
.task-row.drop-above { box-shadow: inset 0 3px 0 0 var(--primary); }
.task-row.drop-below { box-shadow: inset 0 -3px 0 0 var(--primary); }
.task-row.drop-into { background: var(--primary-faded); box-shadow: inset 0 0 0 2px var(--primary); }

/* Customize view panel (spec 6.3) */
.customize-panel {
  position: fixed; top: 10rem; right: 2rem; width: 34rem; max-height: 75vh; overflow-y: auto;
  background: white; border-radius: var(--size-4); box-shadow: 0 0.4rem 2rem rgba(0,0,0,0.25);
  z-index: 20;
}
.customize-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--size-5) var(--size-6); background: var(--primary); color: white;
  border-radius: var(--size-4) var(--size-4) 0 0; position: sticky; top: 0;
}
.customize-head .fal { cursor: pointer; font-size: 1.6rem; }
.customize-section { padding: var(--size-5) var(--size-6); border-bottom: 1px solid var(--accent-faded); }
.customize-section:last-child { border-bottom: none; }
.customize-subhead { font-weight: bold; margin-bottom: var(--size-4); }
.customize-tier {
  color: var(--accent); font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.06em;
  margin: var(--size-4) 0 var(--size-2);
}
.customize-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--size-3) 0; gap: var(--size-5);
}
.customize-row.field-row { padding: 0.25rem 0; }
.customize-row input[type="checkbox"]:disabled { opacity: 0.4; }

/* Row height */
.task-table.row-small td { padding-top: var(--size-3); padding-bottom: var(--size-3); }
.task-table.row-medium td { padding-top: var(--size-5); padding-bottom: var(--size-5); }
.task-table.row-large td { padding-top: var(--size-7); padding-bottom: var(--size-7); }
.cell-days { text-align: right; padding-right: var(--size-5) !important; white-space: nowrap; }

/* Row context menu + pickers */
.row-menu, .row-picker {
  position: fixed; z-index: 40; width: 30rem; background: white;
  border-radius: var(--size-4); box-shadow: 0 0.4rem 2rem rgba(0,0,0,0.28);
  padding: var(--size-3) 0; max-height: 80vh; overflow-y: auto;
}
.row-picker { top: 12rem; right: 3rem; width: 40rem; padding: 0; }
.row-menu-head {
  display: flex; gap: var(--size-3); padding: var(--size-3) var(--size-5);
  border-bottom: 1px solid var(--accent-faded); align-items: center; justify-content: space-between;
}
.row-menu-btn {
  flex: 1; background: none; border: 1px solid var(--accent-faded); border-radius: var(--size-3);
  padding: var(--size-3); cursor: pointer; font-family: inherit; font-size: 1.15rem; color: var(--dark);
}
.row-menu-btn:hover { background: var(--primary-faded); border-color: var(--primary); }
.row-menu-item {
  display: flex; align-items: center; gap: var(--size-5); width: 100%;
  background: none; border: none; text-align: left; cursor: pointer;
  padding: var(--size-4) var(--size-6); font-family: inherit; font-size: 1.25rem; color: var(--dark);
}
.row-menu-item:hover { background: var(--primary-faded); }
.row-menu-item .fal { width: 1.8rem; text-align: center; color: var(--primary); }
.row-menu-item.danger { color: #d33d44; }
.row-menu-item.danger .fal { color: #d33d44; }
.row-menu-item.danger:hover { background: #fdeaea; }
.row-menu-sep { height: 1px; background: var(--accent-faded); margin: var(--size-3) 0; }
.row-picker .text-input { width: calc(100% - 2 * var(--size-5)); margin: var(--size-4) var(--size-5); }
.row-picker-options { max-height: 40rem; overflow-y: auto; padding-bottom: var(--size-4); }
.row-picker-option {
  display: block; width: 100%; background: none; border: none; text-align: left;
  cursor: pointer; padding: var(--size-4) var(--size-6); font-family: inherit;
  font-size: 1.2rem; color: var(--dark);
}
.row-picker-option:hover { background: var(--primary-faded); }

/* Completed rows read as completed. */
.row-btn.row-complete .fa-circle { color: var(--accent); }
.row-btn.row-complete.is-done .fa-check-circle { color: #2e7d32; }  /* the status set's own "done" green */
.row-btn.row-complete { opacity: 1 !important; }
.task-row.row-done td.cell[data-field="title"] { text-decoration: line-through; color: var(--accent); }

/* A row kept only because something under it matched the filter. Dimmed and
   left-marked, so the work breakdown around a match is still readable without
   the ancestor looking like a result of its own. */
.task-row.row-filter-context > td { opacity: 0.55; }
.task-row.row-filter-context > td:first-child { box-shadow: inset 0.2rem 0 0 var(--accent); }

/* The sort chip's clear control. White on the pill it sits in, so it reads as
   part of the chip rather than as a link that wandered in. */
.sort-active-pill .sort-clear { color: #fff; margin-left: 0.4rem; opacity: 0.75; }
.sort-active-pill .sort-clear:hover { opacity: 1; }
.cell-actions { width: 13rem; }
.task-table th.th-actions { width: 13rem; }
.saved-view-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--size-4); padding: var(--size-3) 0; border-bottom: 1px solid var(--accent-faded);
}
.saved-view-row:last-of-type { border-bottom: none; }
.saved-view-name { display: flex; align-items: center; gap: var(--size-3); flex-wrap: wrap; min-width: 0; }
.saved-view-name .fal { color: var(--primary); }
.saved-view-toggles { display: flex; align-items: center; gap: var(--size-2); flex: 0 0 auto; }
.saved-view-toggles label { display: inline-flex; align-items: center; gap: 0.15rem; cursor: pointer; }
.saved-view-toggles .fal { color: var(--accent); font-size: 1.1rem; }
.saved-view-toggles input:checked + .fal { color: var(--primary); }

/* Board quick-edit popup */
.card-popup {
  position: fixed; z-index: 45; width: 34rem; background: white;
  border-radius: var(--size-4); box-shadow: 0 0.4rem 2rem rgba(0,0,0,0.3);
  max-height: 90vh; overflow-y: auto;
}
.card-popup-head {
  display: flex; align-items: center; gap: var(--size-4);
  padding: var(--size-4) var(--size-5); background: var(--primary); color: white;
  border-radius: var(--size-4) var(--size-4) 0 0;
}
.card-popup-head .ref { font-family: monospace; font-weight: bold; }
.card-popup-head a { color: white; }
.card-popup-body { padding: var(--size-5); display: flex; flex-direction: column; gap: var(--size-4); }
.popup-field { display: flex; align-items: center; gap: var(--size-4); }
.popup-field > span { flex: 0 0 10rem; color: var(--accent); font-size: 1.2rem; }
.popup-field .text-input { flex: 1; }
.popup-comment { display: flex; gap: var(--size-4); align-items: flex-start; margin-top: var(--size-3); }
.popup-comment textarea { flex: 1; }
.card-popup-foot {
  display: flex; gap: var(--size-4); align-items: center; flex-wrap: wrap;
  padding: var(--size-4) var(--size-5); border-top: 1px solid var(--accent-faded);
}
.board-card .ref { display: flex; align-items: center; justify-content: space-between; }
.card-edit-btn {
  background: none; border: none; cursor: pointer; color: var(--accent);
  opacity: 0; padding: 0 0.2rem; font-size: 1.1rem;
}
.board-card:hover .card-edit-btn { opacity: 1; }
.card-edit-btn:hover { color: var(--primary); }

/* Channel */
.channel-shell { display: flex; gap: var(--size-7); align-items: flex-start; }
.channel-main {
  flex: 1; min-width: 0; background: white; border-radius: var(--size-4);
  box-shadow: var(--shadow); display: flex; flex-direction: column;
}
.channel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--size-5) var(--size-6); border-bottom: 1px solid var(--accent-faded);
}
.channel-log { max-height: 55vh; overflow-y: auto; padding: var(--size-5) var(--size-6); }
.channel-msg { padding: var(--size-4) 0; border-bottom: 1px solid var(--accent-faded); }
.channel-msg:last-child { border-bottom: none; }
.channel-msg-head { display: flex; gap: var(--size-4); align-items: baseline; }
.channel-msg-time { color: var(--accent); font-size: 1.1rem; font-style: italic; }
/* Spec 6.8: one message pastes ~200 raw facility IDs, so long content must wrap
   rather than stretch the pane, and monospace runs must stay legible. */
.channel-msg-body { margin-top: var(--size-2); white-space: pre-wrap; word-break: break-word; }
.channel-composer { padding: var(--size-5) var(--size-6); border-top: 1px solid var(--accent-faded); }
.channel-composer-actions {
  display: flex; gap: var(--size-4); align-items: center; margin-top: var(--size-4); flex-wrap: wrap;
}
.channel-side {
  flex: 0 0 26rem; background: white; border-radius: var(--size-4);
  box-shadow: var(--shadow); padding: var(--size-6);
}
@media only screen and (max-width: 1110px) {
  .channel-shell { flex-direction: column; }
  .channel-side { flex: 1 1 auto; width: 100%; }
}

/* Coloured pickers (status, tags). A native <select> cannot show a swatch per
   option, so these are small bordered panels instead. */
.cell-panel {
  position: fixed; z-index: 50; min-width: 24rem; max-width: 34rem; background: white;
  border: 1px solid var(--accent-faded); border-radius: var(--size-4);
  box-shadow: 0 0.4rem 2rem rgba(0,0,0,0.28); padding: var(--size-3) 0;
  max-height: 45vh; overflow-y: auto;
}
.cell-panel-head {
  padding: var(--size-3) var(--size-5); color: var(--accent);
  font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: bold;
}
.cell-panel-option {
  display: flex; align-items: center; gap: var(--size-4); width: 100%;
  background: none; border: none; text-align: left; cursor: pointer;
  padding: var(--size-3) var(--size-5); font-family: inherit; font-size: 1.2rem;
}
.cell-panel-option:hover { background: var(--primary-faded); }
.cell-panel-option.is-current, .cell-panel-option.is-on { background: var(--primary-faded); }
.cell-panel-option .fa-check { margin-left: auto; color: var(--primary); }
.cell-caret { color: var(--accent); font-size: 1.1rem; margin-left: var(--size-3); }
td.cell-status { white-space: nowrap; cursor: pointer; }

/* Tags */
.tag-pill {
  display: inline-block; padding: 0.1rem var(--size-4); border-radius: 1rem;
  color: white; font-size: 1.1rem; white-space: nowrap; margin-right: 0.3rem;
}
td.cell-tags { cursor: pointer; }
.tag-panel { min-width: 30rem; }
.tag-panel .tag-input { width: calc(100% - 2 * var(--size-5)); margin: 0 var(--size-5) var(--size-3); }
.tag-options { max-height: 26rem; overflow-y: auto; }
.tag-count {
  margin-left: auto; color: var(--accent); font-size: 1.05rem;
  background: var(--accent-faded); border-radius: 1rem; padding: 0 0.5rem;
}
.tag-option.is-on .tag-count { margin-left: 0; }
.tag-create { color: var(--primary); font-weight: bold; }
.tag-empty { padding: var(--size-4) var(--size-5); color: var(--accent); font-style: italic; }

/* Explicit Open button, always visible -- a clear way into the task rather than
   relying on the ref link. */
.cell-open { text-align: right; padding-right: var(--size-5) !important; white-space: nowrap; }
.task-table th.th-open { width: 7rem; }
.open-btn { padding: 0.2rem var(--size-5) !important; font-size: 1.15rem !important; }
/* Popup fields sit in a bordered container so the controls read as a form
   rather than as loose inputs. */
.popup-field { display: flex; align-items: center; gap: var(--size-4); }
.status-trigger {
  flex: 1; display: flex; align-items: center; gap: var(--size-4);
  background: white; border: 1px solid var(--accent-faded); border-radius: var(--size-3);
  padding: var(--size-3) var(--size-4); cursor: pointer; font-family: inherit; text-align: left;
}
.status-trigger:hover { border-color: var(--primary); }
.status-trigger .fa-angle-down { margin-left: auto; color: var(--accent); }
.card-popup-body .text-input, .card-popup-body select { background: white; }

/* Task detail: content on the left, a single right rail carrying fields above
   activity. Three side-by-side columns squeezed all three into unreadable
   strips; stacking the two narrow ones gives the content real width. */
.task-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42rem;
  gap: var(--size-7);
  align-items: start;
}
.task-main     { grid-column: 1; grid-row: 1 / span 2; min-width: 0; }
.task-side     { grid-column: 2; grid-row: 1; min-width: 0; }
.task-activity { grid-column: 2; grid-row: 2; min-width: 0; }
@media only screen and (max-width: 1200px) {
  .task-detail-grid { grid-template-columns: 1fr; }
  .task-main, .task-side, .task-activity { grid-column: 1; grid-row: auto; }
}

.detail-section { margin-top: var(--size-7); }
.detail-section-head { display: flex; align-items: center; gap: var(--size-4); margin-bottom: var(--size-4); }
.detail-section-head h4 { margin: 0; }
.detail-section-head .fal { color: var(--primary); }
.detail-action {
  display: inline-flex; align-items: center; gap: var(--size-4);
  background: none; border: none; cursor: pointer; color: var(--primary);
  font-family: inherit; font-size: 1.25rem; padding: var(--size-4) 0;
}
.detail-action:hover { text-decoration: underline; }

/* Checklists */
.checklist {
  background: white; border-radius: var(--size-4); box-shadow: var(--shadow);
  padding: var(--size-5); margin-bottom: var(--size-5);
}
.checklist-head { display: flex; align-items: center; gap: var(--size-4); margin-bottom: var(--size-4); }
.checklist-name { flex: 1; outline: none; }
.checklist-name:focus { background: var(--primary-faded); border-radius: var(--size-2); }
.checklist-progress { color: var(--accent); font-size: 1.15rem; }
.checklist-item {
  display: flex; align-items: center; gap: var(--size-4);
  padding: var(--size-3) 0; border-bottom: 1px solid var(--accent-faded);
}
.checklist-item:last-child { border-bottom: none; }
.item-label { flex: 1; outline: none; min-width: 0; }
.item-label:focus { background: var(--primary-faded); border-radius: var(--size-2); }
.checklist-item.is-done .item-label { text-decoration: line-through; color: var(--accent); }
.item-assignee { width: 15rem; flex: 0 0 15rem; font-size: 1.15rem; padding: 0.1rem var(--size-3); }
.checklist-add { display: flex; align-items: center; gap: var(--size-4); margin-top: var(--size-4); }
.checklist-add .fal { color: var(--accent); }
.item-add-input { flex: 1; border: none; outline: none; background: transparent; font-family: inherit; font-size: 1.2rem; padding: var(--size-3) 0; }
.item-add-input::placeholder { color: var(--accent); font-style: italic; }

/* Attachments */
.attachment-row {
  display: flex; align-items: center; gap: var(--size-4);
  padding: var(--size-4); background: white; border-radius: var(--size-3);
  box-shadow: var(--shadow); margin-bottom: var(--size-3);
}
.attachment-row .fal { color: var(--primary); }
.attachment-label { font-weight: bold; color: var(--dark); }
a.attachment-label { color: var(--primary); }
.attachment-path {
  font-family: monospace; font-size: 1.05rem; color: var(--accent);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 28rem;
}
.attachment-add { display: flex; flex-direction: column; gap: var(--size-3); margin: var(--size-4) 0; }

/* Activity pane */
.task-activity { background: white; border-radius: var(--size-4); box-shadow: var(--shadow); display: flex; flex-direction: column; }
.activity-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--size-5); border-bottom: 1px solid var(--accent-faded);
}
.activity-log { max-height: 50vh; overflow-y: auto; padding: var(--size-5); }
.activity-entry { padding: var(--size-4) 0; }
.activity-entry.is-comment { border-bottom: 1px solid var(--accent-faded); }
.activity-entry-head { display: flex; gap: var(--size-4); align-items: baseline; }
.activity-time { color: var(--accent); font-size: 1.05rem; font-style: italic; }
/* Spec 6.8: comment bodies carry pasted bulk data, so they must wrap. */
.activity-body { margin-top: var(--size-2); white-space: pre-wrap; word-break: break-word; }
.activity-entry.is-change {
  display: flex; gap: var(--size-4); align-items: baseline;
  color: var(--accent); font-size: 1.15rem;
}
.activity-entry.is-change em { color: var(--dark); font-style: normal; font-weight: bold; }
.activity-entry.is-change .fal { color: var(--accent); }
.activity-composer { padding: var(--size-5); border-top: 1px solid var(--accent-faded); }
.activity-composer-actions { display: flex; gap: var(--size-4); align-items: center; margin-top: var(--size-4); flex-wrap: wrap; }

/* Typeahead people picker. Replaces boxed <select multiple> controls. */
.pp-hidden { display: none !important; }
.pp { position: relative; }
.pp-chips {
  display: flex; flex-wrap: wrap; gap: var(--size-3); align-items: center;
  min-height: 3.4rem; padding: var(--size-3); cursor: text;
  background: white; border: 1px solid var(--accent-faded); border-radius: var(--size-3);
}
.pp-chips:focus-within { border-color: var(--primary); }
.pp-chip {
  display: inline-flex; align-items: center; gap: var(--size-3);
  background: var(--primary-faded); border-radius: 1.4rem;
  padding: 0.15rem var(--size-3) 0.15rem 0.15rem; font-size: 1.15rem; max-width: 100%;
}
.pp-chip > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-avatar {
  flex: 0 0 2.2rem; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: var(--primary); color: white; font-size: 0.95rem; font-weight: bold;
  display: inline-flex; align-items: center; justify-content: center;
}
.pp-remove { cursor: pointer; color: var(--accent); font-size: 1.1rem; }
.pp-remove:hover { color: #d33d44; }
.pp-input {
  flex: 1; min-width: 8rem; border: none; outline: none; background: transparent;
  font-family: inherit; font-size: 1.2rem; padding: 0.2rem 0;
}
.pp-input::placeholder { color: var(--accent); }
.pp-menu {
  position: absolute; z-index: 60; top: 100%; left: 0; right: 0; margin-top: 0.2rem;
  background: white; border: 1px solid var(--accent-faded); border-radius: var(--size-3);
  box-shadow: 0 0.4rem 1.6rem rgba(0,0,0,0.22); max-height: 24rem; overflow-y: auto;
}
.pp-option {
  display: flex; align-items: center; gap: var(--size-4); width: 100%;
  background: none; border: none; text-align: left; cursor: pointer;
  padding: var(--size-3) var(--size-4); font-family: inherit; font-size: 1.2rem; color: var(--dark);
}
.pp-option:hover, .pp-option.is-active { background: var(--primary-faded); }
.pp-empty { padding: var(--size-4); color: var(--accent); font-style: italic; font-size: 1.15rem; }

/* In a table cell the picker needs to escape the row's height. */
td.editable.editing .pp-chips { border: none; min-height: 0; padding: 0.1rem; }
td.editable.editing .pp-menu { min-width: 22rem; }

/* Field rows read as rows again: label and control aligned, not sprawling. */
.task-side .field-row {
  display: flex; align-items: flex-start; gap: var(--size-5);
  padding: var(--size-4) 0; border-bottom: 1px solid var(--accent-faded);
}
.task-side .field-row:last-child { border-bottom: none; }
.task-side .field-label { flex: 0 0 13rem; color: var(--accent); font-size: 1.2rem; padding-top: 0.4rem; }
.task-side .field-label.required::after { content: ' *'; color: #d33d44; }
.task-side .field-input { flex: 1; min-width: 0; }
.task-side .field-input .text-input { width: 100%; }
.task-side {
  background: white; border-radius: var(--size-4); box-shadow: var(--shadow);
  padding: var(--size-5) var(--size-6);
}

/* Comments: avatar, reactions, threaded replies */
.activity-entry.is-comment { display: flex; gap: var(--size-4); align-items: flex-start; }
.comment-avatar {
  flex: 0 0 3rem; width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--primary); color: white; font-weight: bold; font-size: 1.15rem;
  display: flex; align-items: center; justify-content: center;
}
.comment-avatar.sm { flex-basis: 2.4rem; width: 2.4rem; height: 2.4rem; font-size: 1rem; }
.comment-main { flex: 1; min-width: 0; }
.comment-actions { display: flex; align-items: center; gap: var(--size-4); margin-top: var(--size-3); flex-wrap: wrap; }
.reaction-row { display: flex; align-items: center; gap: var(--size-2); flex-wrap: wrap; }
.reaction, .reaction-add {
  background: var(--accent-faded); border: 1px solid transparent; border-radius: 1.2rem;
  padding: 0.1rem var(--size-4); cursor: pointer; font-family: inherit; font-size: 1.15rem;
  display: inline-flex; align-items: center; gap: 0.3rem;
}
.reaction:hover, .reaction-add:hover { border-color: var(--primary); }
.reaction.mine { background: var(--primary-faded); border-color: var(--primary); }
.reaction-count { font-size: 1.05rem; color: var(--accent); }
.reaction.mine .reaction-count { color: var(--primary); font-weight: bold; }
.reaction-add { color: var(--accent); background: none; }
.comment-reply-btn { background: none; border: none; cursor: pointer; color: var(--primary); font-family: inherit; font-size: 1.15rem; padding: 0; }
.comment-reply-btn:hover { text-decoration: underline; }
.reaction-picker {
  position: fixed; z-index: 70; background: white; border-radius: 1.4rem;
  box-shadow: 0 0.3rem 1.4rem rgba(0,0,0,0.25); padding: var(--size-3);
  display: flex; gap: var(--size-2);
}
.reaction-picker button { background: none; border: none; cursor: pointer; font-size: 1.6rem; border-radius: 50%; width: 3rem; height: 3rem; }
.reaction-picker button:hover { background: var(--primary-faded); }
.comment-replies { margin-top: var(--size-4); padding-left: var(--size-5); border-left: 2px solid var(--accent-faded); }
.comment-replies .activity-entry.is-comment { border-bottom: none; padding: var(--size-3) 0; }
.reply-box { display: flex; gap: var(--size-3); margin-top: var(--size-4); align-items: flex-start; }
.reply-box textarea { flex: 1; }

/* Grid affordances. Sortable headers apply to BOTH layouts -- the table sorts in
   the browser, the list reloads with ?sort= -- so these are deliberately not
   scoped to .is-table. The filter row below is table-only. */
.task-table thead th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.task-table thead th.sortable:hover { background: var(--primary-darker); }
.sort-icon { opacity: 0.4; margin-left: 0.3rem; font-size: 1rem; }
.sort-icon.active { opacity: 1; }
.task-table tr.filter-row th {
  background: #f4f6f7; padding: var(--size-2) var(--size-3);
  position: sticky; top: 3.4rem; z-index: 2;
}
.col-filter {
  width: 100%; box-sizing: border-box; border: 1px solid var(--accent-faded);
  border-radius: var(--size-2); padding: 0.15rem var(--size-3);
  font-family: inherit; font-size: 1.1rem; background: white;
}
.col-filter:focus { outline: none; border-color: var(--primary); }
.col-filter::placeholder { color: var(--accent); font-style: italic; }
.task-table.is-filtered thead th.sortable { background: var(--primary-darker); }
/* Depth marker for the flat grid, where the indent is gone. */
.depth-badge {
  background: var(--accent-faded); color: var(--accent); border-radius: 0.3rem;
  padding: 0 0.3rem; font-size: 1rem; font-weight: normal;
}
.cell-parent { color: var(--accent); max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Quick-react buttons sit quiet until hovered, so they do not compete with real
   counted reactions. */
.reaction.quick { background: none; opacity: 0.45; }
.activity-entry:hover .reaction.quick { opacity: 1; }
.reaction.quick:hover { background: var(--primary-faded); }

/* Comment composers: full width, height follows the content. */
textarea.autogrow {
  width: 100%; box-sizing: border-box; display: block;
  resize: none;              /* the height is managed, so the grabber would lie */
  overflow-y: hidden;        /* no inner scrollbar -- the box grows instead */
  min-height: 4.2rem; line-height: 1.45;
}
.activity-composer textarea, .channel-composer textarea { width: 100%; }
.activity-composer-actions, .channel-composer-actions { justify-content: space-between; }
.composer-hint { color: var(--accent); font-size: 1.1rem; }
.composer-hint strong { color: var(--primary); font-family: monospace; }

/* @-mention typeahead */
.mention-menu {
  position: fixed; z-index: 80; background: white;
  border: 1px solid var(--accent-faded); border-radius: var(--size-3);
  box-shadow: 0 0.4rem 1.6rem rgba(0,0,0,0.24);
  max-height: 24rem; overflow-y: auto; padding: var(--size-2) 0; min-width: 22rem;
}
.mention-option {
  display: flex; align-items: center; gap: var(--size-4); width: 100%;
  background: none; border: none; text-align: left; cursor: pointer;
  padding: var(--size-3) var(--size-4); font-family: inherit; font-size: 1.2rem; color: var(--dark);
}
.mention-option:hover, .mention-option.is-active { background: var(--primary-faded); }
/* The menu opens even with nothing to show, so the reason is visible rather
   than the widget simply not appearing. */
.mention-empty {
  padding: var(--size-3) var(--size-4); color: var(--accent);
  font-size: 1.2rem; font-style: italic; white-space: nowrap;
}

/* Breadcrumb: the way back up a level, so it needs to be legible rather than
   a thin italic afterthought. */
div.breadcrumb { font-style: normal; }
.crumbs { display: flex; align-items: center; gap: var(--size-3); padding-left: var(--size-6); flex-wrap: wrap; }
.crumb { color: var(--accent); text-decoration: none; font-size: 1.25rem; white-space: nowrap; }
a.crumb:hover { color: var(--primary); text-decoration: underline; }
.crumb.current { color: var(--dark); font-weight: bold; }
.crumb-sep { color: var(--accent); font-size: 1rem; opacity: 0.7; }

/* Inline create in the tree */
/* Hidden was opacity-only, which left the button's full width sitting empty
   on the left of the row (moved there so it groups with the row's other
   controls -- see nav-lists.ejs) whenever it was not being hovered. Collapsing
   max-width and padding to 0 along with it gives that space back to the name
   instead of leaving it dead; overflow:hidden keeps the icon glyph from
   spilling out while it is squeezed to nothing. :focus-visible expands it the
   same as :hover so tabbing to it does not land on an invisible 0-width
   target. */
.tree-add {
  background: none; border: none; cursor: pointer; color: rgba(255,255,255,0.65);
  opacity: 0; max-width: 0; padding: 0; overflow: hidden; font-size: 1.1rem; flex: 0 0 auto;
  transition: max-width 0.12s, padding 0.12s, opacity 0.12s, color 0.12s;
}
.tree-row:hover .tree-add, .tree-add:focus-visible {
  opacity: 1; max-width: 2rem; padding: 0 0.3rem;
}
.tree-add:hover { color: #FFDB9F; }
.tree-create { padding: var(--size-3) var(--size-4) var(--size-3) var(--size-6); }
.tree-create-input {
  width: 100%; box-sizing: border-box; border: none; outline: none;
  border-radius: var(--size-2); padding: var(--size-3);
  background: rgba(0,0,0,0.25); color: white; font-size: 1.2rem;
}
.tree-create-input::placeholder { color: rgba(255,255,255,0.55); }
.tree-create-hint { color: rgba(255,255,255,0.55); font-size: 1rem; margin-top: 0.2rem; }

/* Space header: a client is a place you navigate, with its own views. */
.space-header { margin-bottom: var(--size-6); }
.space-header-title { display: flex; align-items: center; gap: var(--size-5); flex-wrap: wrap; }
.space-views {
  display: flex; gap: var(--size-2); flex-wrap: wrap;
  border-bottom: var(--size-1) solid var(--accent-faded); margin-top: var(--size-5);
}
.space-view {
  display: flex; align-items: center; gap: var(--size-3);
  padding: var(--size-4) var(--size-5); text-decoration: none; color: var(--accent);
  border-bottom: var(--size-3) solid transparent; white-space: nowrap;
}
.space-view:hover { color: var(--primary); }
.space-view.active { color: var(--primary); font-weight: bold; border-bottom-color: var(--primary); }
.space-view .fal { font-size: 1.2rem; }

/* Prompt on a space with no client record linked. */
.link-client-bar {
  display: flex; align-items: center; gap: var(--size-4); flex-wrap: wrap;
  padding: var(--size-4) var(--size-5); margin-bottom: var(--size-5);
  background: var(--primary-faded); border-radius: var(--size-3);
  color: var(--accent); font-size: 1.25rem;
}

/* ==========================================================================
   Avatars. One person, drawn the same way everywhere -- see src/render/avatar.js
   for the server-side half and cell-pickers.js for the client-side one.
   ========================================================================== */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; color: #fff; font-weight: bold; line-height: 1;
  flex-shrink: 0; box-sizing: border-box; text-transform: uppercase;
  letter-spacing: 0.02em; user-select: none;
}
.avatar-xs { width: 2rem;   height: 2rem;   font-size: 0.85rem; }
.avatar-sm { width: 2.4rem; height: 2.4rem; font-size: 1rem; }
.avatar-md { width: 3.2rem; height: 3.2rem; font-size: 1.3rem; }
.avatar-lg { width: 4.4rem; height: 4.4rem; font-size: 1.8rem; }

/* Unassigned is a target to click, not a blank -- otherwise there is nothing
   to aim at to assign someone. */
.avatar-empty {
  background: transparent !important; color: var(--accent);
  border: 0.12rem dashed var(--accent); cursor: pointer;
}
.avatar-empty:hover { border-color: var(--primary); color: var(--primary); }
.avatar-more { background: var(--accent) !important; font-size: 0.85rem; }

/* Overlapping, so three assignees do not widen the column. */
.avatar-stack { display: inline-flex; align-items: center; }
.avatar-stack .avatar + .avatar { margin-left: -0.7rem; box-shadow: 0 0 0 0.15rem var(--white, #fff); }

/* ==========================================================================
   Container header: the same title block and view tabs at client, engagement
   and program level.
   ========================================================================== */
.ctr-header { margin-bottom: var(--size-6); }
.ctr-title-row { display: flex; align-items: center; gap: var(--size-5); flex-wrap: wrap; }
.ctr-avatar { width: 3.2rem; height: 3.2rem; font-size: 1.8rem; border-radius: 0.6rem; }
.ctr-title { margin: 0; font-size: 2.2rem; }
.ctr-key {
  font-family: monospace; font-size: 1.15rem; color: var(--accent);
  background: var(--accent-faded); padding: 0.1rem var(--size-4); border-radius: var(--size-3);
}
.ctr-scope-note { color: var(--accent); font-size: 1.25rem; }
.ctr-title-actions { margin-left: auto; display: flex; gap: var(--size-3); align-items: center; }

.ctr-views {
  display: flex; gap: var(--size-2); flex-wrap: wrap; align-items: stretch;
  border-bottom: var(--size-1) solid var(--accent-faded); margin-top: var(--size-5);
}
.ctr-view {
  display: flex; align-items: center; gap: var(--size-3);
  padding: var(--size-4) var(--size-5); text-decoration: none; color: var(--accent);
  border-bottom: var(--size-3) solid transparent; white-space: nowrap;
  background: none; border-left: 0; border-right: 0; border-top: 0;
  font-size: 1.3rem; font-family: 'Lato', sans-serif; cursor: pointer;
}
.ctr-view:hover { color: var(--primary); }
.ctr-view.active { color: var(--primary); font-weight: bold; border-bottom-color: var(--primary); }
.ctr-view i { font-size: 1.2rem; }
.ctr-view-add { color: var(--accent); }

/* The work breakdown, one level down. */
.ctr-sublists {
  display: flex; align-items: center; gap: var(--size-3);
  flex-wrap: wrap; margin-top: var(--size-4);
}
.ctr-sublists-label { color: var(--accent); font-size: 1.15rem; }
.ctr-sublist {
  display: inline-flex; align-items: center; gap: var(--size-3);
  padding: 0.2rem var(--size-4); border-radius: var(--size-3);
  background: var(--primary-faded); color: var(--primary);
  text-decoration: none; font-size: 1.2rem; border: 0; cursor: pointer;
  font-family: 'Lato', sans-serif;
}
.ctr-sublist:hover { background: var(--primary); color: #fff; }
.ctr-sublist-add { background: transparent; border: 0.1rem dashed var(--accent); color: var(--accent); }
.ctr-sublist-add:hover { border-color: var(--primary); background: transparent; color: var(--primary); }
.sublist-create-input { width: 32rem; max-width: 100%; font-size: 1.2rem; }

/* ==========================================================================
   One section per program, on the aggregated views.
   ========================================================================== */
.list-section {
  margin-bottom: var(--size-6); border-left: 0.35rem solid var(--primary);
  border-radius: var(--size-3); background: var(--primary-faded);
  padding: var(--size-4) var(--size-4) var(--size-2);
}
.list-section-head {
  display: flex; align-items: flex-start; gap: var(--size-4);
  padding: var(--size-3) var(--size-4) var(--size-4);
}
.section-toggle { cursor: pointer; color: var(--accent); padding-top: 0.5rem; }
.section-toggle:hover { color: var(--primary); }
.list-section-titles { min-width: 0; }
.list-section-path { color: var(--accent); font-size: 1.1rem; }
.list-section-name {
  display: flex; align-items: center; gap: var(--size-4);
  flex-wrap: wrap; font-size: 1.6rem; font-weight: bold;
}
.list-section-name a { text-decoration: none; }
.list-section-dates { color: var(--accent); font-size: 1.15rem; font-weight: normal; }
.list-section-meta {
  margin-left: auto; color: var(--accent); font-size: 1.2rem;
  display: flex; align-items: center; gap: var(--size-4); white-space: nowrap;
}
.list-section.is-collapsed { padding-bottom: var(--size-4); }
.list-section-body .table-scroll { background: #fff; border-radius: var(--size-3); }

/* ==========================================================================
   Cell panels: status, people and comments, all anchored to the cell clicked.
   ========================================================================== */
.cell-panel-body { max-height: 30rem; overflow-y: auto; }
.panel-search { width: 100%; margin-bottom: var(--size-3); font-size: 1.2rem; }
.cell-panel-group {
  color: var(--accent); font-size: 1.05rem; text-transform: uppercase;
  letter-spacing: 0.05em; padding: var(--size-4) var(--size-3) var(--size-2);
}
.status-age {
  margin-left: auto; color: var(--accent); font-size: 1.05rem;
  background: var(--accent-faded); padding: 0 var(--size-3); border-radius: var(--size-3);
}
.people-panel { min-width: 26rem; }
.person-option { gap: var(--size-4); }
.person-name { flex: 1; text-align: left; }
.panel-clear { color: var(--accent); border-top: var(--size-1) solid var(--accent-faded); }

/* Quick comments, without leaving the grid. */
.comment-panel { width: 40rem; max-width: 92vw; }
.comment-panel-title {
  font-weight: bold; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; max-width: 30rem;
}
.comment-panel-open { margin-left: auto; color: var(--accent); }
.comment-panel-open:hover { color: var(--primary); }
.comment-panel-log {
  max-height: 26rem; overflow-y: auto;
  padding: var(--size-3) 0; border-top: var(--size-1) solid var(--accent-faded);
}
.comment-panel-msg { padding: var(--size-4) var(--size-3); }
.comment-panel-msg + .comment-panel-msg { border-top: var(--size-1) solid var(--accent-faded); }
.comment-panel-msg-head {
  display: flex; align-items: center; gap: var(--size-3); margin-bottom: var(--size-3);
}
.comment-panel-time { color: var(--accent); font-size: 1.05rem; margin-left: auto; }
.comment-panel-body { font-size: 1.25rem; word-break: break-word; }
.comment-panel-form {
  display: flex; gap: var(--size-3); align-items: flex-end;
  border-top: var(--size-1) solid var(--accent-faded); padding-top: var(--size-4);
}
.comment-panel-input { flex: 1; resize: none; font-size: 1.25rem; }

/* Row markers on the title cell: description, checklist progress. */
.row-marker { color: var(--accent); font-size: 1.05rem; }
.checklist-chip {
  display: inline-flex; align-items: center; gap: 0.2rem;
  background: var(--accent-faded); padding: 0 var(--size-3);
  border-radius: var(--size-3); white-space: nowrap;
}

/* The comment cell is a control, so it has to look like one. */
.cell-comments { cursor: pointer; color: var(--accent); white-space: nowrap; }
.cell-comments:hover { color: var(--primary); }
.cell-comments .comment-n { font-size: 1.15rem; }
.cell-assignees { cursor: pointer; }

/* "+ Add" at the right of the header row -- the way into column choice.
   It sits inside .task-table th, which is --primary with white text, so it is
   white like every other label on that row. Accent grey read as disabled
   against the teal. */
.add-column-btn {
  background: none; border: 0; cursor: pointer; color: #fff;
  font-family: 'Lato', sans-serif; font-size: 1.15rem; font-weight: bold;
  display: inline-flex; align-items: center; gap: var(--size-3); white-space: nowrap;
  opacity: 0.85;
}
.add-column-btn:hover { color: #fff; opacity: 1; }

/* ==========================================================================
   Timeline: a calendar grid with fixed day columns, and a rail for everything
   that cannot be drawn on one.
   ========================================================================== */
.tl-toolbar {
  display: flex; align-items: center; gap: var(--size-5);
  flex-wrap: wrap; margin-bottom: var(--size-5);
}

.tl-shell { display: flex; gap: var(--size-5); align-items: flex-start; }

.tl-chart {
  flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden;
  background: #fff; border-radius: var(--size-4); box-shadow: var(--shadow);
}
.tl-grid { position: relative; }

/* Month band */
.tl-months { display: flex; border-bottom: var(--size-1) solid var(--accent-faded); }
.tl-month {
  flex: 0 0 auto; overflow: hidden; white-space: nowrap;
  padding: var(--size-4) var(--size-4); font-weight: bold; font-size: 1.3rem;
  border-left: var(--size-1) solid var(--accent-faded); box-sizing: border-box;
}
.tl-month:first-child { border-left: 0; }
/* Sticks to the left edge while scrolling so the month stays named even when
   its start has scrolled out of view. */
.tl-month span { position: sticky; left: var(--size-4); }

/* Day numbers */
.tl-days { display: flex; border-bottom: var(--size-1) solid var(--accent-faded); }
.tl-day {
  flex: 0 0 var(--tl-day); width: var(--tl-day); box-sizing: border-box;
  text-align: center; font-size: 1.05rem; color: var(--accent);
  padding: var(--size-3) 0; position: relative; overflow: visible;
}
.tl-weekend { background: var(--accent-faded); }
.tl-day-num { display: inline-block; }
/* Today gets the marker from the reference product: a filled circle on the
   date, not just a line in the body. */
.tl-is-today .tl-day-num {
  background: #d33d44; color: #fff; font-weight: bold;
  border-radius: 50%; min-width: 1.9rem; height: 1.9rem; line-height: 1.9rem;
  padding: 0 0.2rem;
}

/* Bars */
.tl-rows { position: relative; padding: var(--size-5) 0; min-height: 18rem; }
.tl-col-shade {
  position: absolute; top: 0; bottom: 0; background: var(--accent-faded);
  opacity: 0.55; pointer-events: none;
}
.tl-today-line {
  position: absolute; top: 0; bottom: 0; width: 0;
  border-left: var(--size-2) solid #d33d44; z-index: 2; pointer-events: none;
}
.tl-row { position: relative; height: 2.8rem; }
.tl-bar {
  position: absolute; top: 0.3rem; height: 2.2rem;
  border-radius: var(--size-3); display: flex; align-items: center;
  padding: 0 var(--size-4); overflow: hidden; white-space: nowrap;
  box-shadow: var(--shadow); text-decoration: none; color: #fff;
  font-size: 1.15rem; font-weight: bold; box-sizing: border-box; z-index: 1;
}
.tl-bar:hover { filter: brightness(1.08); color: #fff; }
.tl-bar-overdue { outline: var(--size-2) solid #d33d44; outline-offset: -0.2rem; }
/* A one-day bar is narrower than its own label, so the label escapes to the
   right of the bar rather than being clipped to nothing. */
.tl-bar-label { position: sticky; left: var(--size-4); }
.tl-empty {
  display: flex; align-items: center; gap: var(--size-4);
  padding: var(--size-6); color: var(--accent); max-width: 60rem;
  position: sticky; left: var(--size-6);
}
.tl-empty .fal { font-size: 2.4rem; color: var(--primary); }

/* ---- the rail ---- */
.tl-rail {
  flex: 0 0 30rem; max-width: 30rem;
  background: #fff; border-radius: var(--size-4); box-shadow: var(--shadow);
  padding: var(--size-5); box-sizing: border-box;
  max-height: 70vh; display: flex; flex-direction: column;
}
.tl-rail-head {
  display: flex; align-items: center; gap: var(--size-4);
  font-size: 1.5rem; margin-bottom: var(--size-4);
}
.tl-rail-search-icon { margin-left: auto; color: var(--accent); cursor: pointer; }
.tl-rail-search-icon:hover { color: var(--primary); }

.tl-rail-tabs {
  display: flex; gap: var(--size-3); flex-wrap: wrap;
  border-bottom: var(--size-1) solid var(--accent-faded);
}
.tl-rail-tab {
  background: none; border: 0; cursor: pointer; color: var(--accent);
  font-family: 'Lato', sans-serif; font-size: 1.2rem;
  padding: var(--size-3) var(--size-4);
  border-bottom: var(--size-3) solid transparent; white-space: nowrap;
}
.tl-rail-tab:hover { color: var(--primary); }
.tl-rail-tab.active { color: var(--primary); font-weight: bold; border-bottom-color: var(--primary); }

.tl-rail-filter { width: 100%; margin: var(--size-4) 0; font-size: 1.2rem; }
.tl-rail-pane { overflow-y: auto; flex: 1; }
.tl-rail-sort {
  display: flex; align-items: center; color: var(--accent);
  font-size: 1.1rem; padding: var(--size-3) 0;
}
.tl-rail-item {
  display: flex; align-items: center; gap: var(--size-4);
  padding: var(--size-4) var(--size-3); text-decoration: none;
  border-bottom: var(--size-1) solid var(--accent-faded); color: inherit;
}
.tl-rail-item:hover { background: var(--primary-faded); }
.tl-rail-dot {
  flex: 0 0 1.1rem; width: 1.1rem; height: 1.1rem; border-radius: 50%;
}
.tl-rail-title {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: 1.25rem;
}
.tl-rail-list { color: var(--accent); font-size: 1.05rem; white-space: nowrap; }
.tl-rail-empty { color: var(--accent); padding: var(--size-5) var(--size-3); font-size: 1.2rem; }

/* .hidden is already defined by the base sheet (css/new-style.css) as
   display:none. Redefining it here with !important would silently outrank every
   other display rule in the app for any element that ever carries the class. */

@media (max-width: 62rem) {
  .tl-shell { flex-direction: column; }
  .tl-rail { flex: 1 1 auto; max-width: none; width: 100%; }
}

/* ==========================================================================
   Client notes: a block per line, edited in place.
   ========================================================================== */
.nb-shell { display: flex; gap: var(--size-6); align-items: flex-start; }

.nb-pages {
  flex: 0 0 22rem; max-width: 22rem; box-sizing: border-box;
  background: #fff; border-radius: var(--size-4); box-shadow: var(--shadow);
  padding: var(--size-5);
}
.nb-add-page { width: 100%; margin-bottom: var(--size-4); }
.nb-page-link {
  display: flex; align-items: center; gap: var(--size-4);
  padding: var(--size-4); border-radius: var(--size-3);
  text-decoration: none; color: inherit; font-size: 1.25rem;
}
.nb-page-link:hover { background: var(--primary-faded); }
.nb-page-link.active { background: var(--primary-faded); color: var(--primary); font-weight: bold; }
.nb-page-link .fal { color: var(--accent); }
.nb-page-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nb-main {
  flex: 1; min-width: 0;
  background: #fff; border-radius: var(--size-4); box-shadow: var(--shadow);
  padding: var(--size-7);
}

.nb-head { margin-bottom: var(--size-6); }
.nb-doc-name { color: var(--accent); font-size: 1.2rem; margin-bottom: var(--size-4); }
.nb-link-btn {
  background: none; border: 0; cursor: pointer; color: var(--accent);
  font-family: 'Lato', sans-serif; font-size: 1.15rem; padding: 0;
  display: inline-flex; align-items: center; gap: var(--size-3);
}
.nb-link-btn:hover { color: var(--primary); }

.nb-title-form { display: flex; gap: var(--size-4); align-items: center; margin: var(--size-4) 0; }
/* The title is the page's h1 -- it should look like one, not like a form field,
   until you put the cursor in it. */
.nb-title-input {
  flex: 1; min-width: 0; font-size: 2.6rem; font-weight: bold;
  font-family: 'Lato', sans-serif; border: 0; background: transparent;
  padding: var(--size-3) 0; color: inherit;
}
.nb-title-input:focus {
  outline: none; border-bottom: var(--size-1) solid var(--primary);
}
.nb-title-save { opacity: 0; transition: opacity 0.15s; }
.nb-title-form:focus-within .nb-title-save { opacity: 1; }

.nb-meta {
  display: flex; align-items: center; gap: var(--size-4); flex-wrap: wrap;
  color: var(--accent); font-size: 1.15rem;
}
.nb-meta-sep { color: var(--accent-faded); }
.nb-save-status { font-style: italic; }

/* Tasks this note produced */
.nb-task-roll {
  display: flex; align-items: center; gap: var(--size-3); flex-wrap: wrap;
  margin-top: var(--size-5); padding: var(--size-4);
  background: var(--primary-faded); border-radius: var(--size-3);
}
.nb-task-roll-label { color: var(--accent); font-size: 1.15rem; margin-right: var(--size-3); }
.nb-task-chip {
  display: inline-flex; align-items: center; gap: var(--size-3);
  background: #fff; border-radius: var(--size-3); padding: 0.1rem var(--size-4);
  text-decoration: none; font-size: 1.15rem; font-family: monospace;
  color: var(--primary);
}
.nb-task-chip.is-done { opacity: 0.6; text-decoration: line-through; }
.nb-task-dot { width: 0.8rem; height: 0.8rem; border-radius: 50%; flex-shrink: 0; }

/* ---- the blocks ---- */
.nb-blocks { margin: var(--size-5) 0; }
.nb-block {
  display: flex; align-items: flex-start; gap: var(--size-3);
  padding: 0.1rem 0; position: relative;
}
.nb-block.nb-folded { display: none; }

/* The gutter appears on hover, so a note reads as text rather than as a
   scaffold of controls. */
.nb-gutter {
  flex: 0 0 3.6rem; display: flex; align-items: center; justify-content: flex-end;
  gap: 0.1rem; opacity: 0; transition: opacity 0.12s; padding-top: 0.3rem;
}
.nb-block:hover .nb-gutter, .nb-block:focus-within .nb-gutter { opacity: 1; }
.nb-handle, .nb-menu-btn {
  background: none; border: 0; cursor: pointer; color: var(--accent);
  padding: 0 0.2rem; font-size: 1.2rem;
}
.nb-handle { cursor: grab; }
.nb-handle:hover, .nb-menu-btn:hover { color: var(--primary); }

.nb-text {
  flex: 1; min-width: 0; padding: var(--size-3) 0; line-height: 1.5;
  font-size: 1.4rem; outline: none; word-break: break-word;
}
.nb-text:empty::before {
  content: attr(data-placeholder); color: var(--accent); font-style: italic;
}
/* Only the focused empty line prompts; every empty line prompting at once reads
   as broken. */
.nb-text:empty:not(:focus)::before { content: ''; }

.nb-t-h1 .nb-text { font-size: 2.4rem; font-weight: bold; margin-top: var(--size-5); }
.nb-t-h2 .nb-text { font-size: 2rem; font-weight: bold; margin-top: var(--size-5); }
.nb-t-h3 .nb-text { font-size: 1.7rem; font-weight: bold; margin-top: var(--size-4); }
.nb-t-h4 .nb-text { font-size: 1.5rem; font-weight: bold; }
.nb-t-code .nb-text {
  font-family: monospace; font-size: 1.25rem; background: var(--accent-faded);
  padding: var(--size-4); border-radius: var(--size-3); white-space: pre-wrap;
}
.nb-t-quote {
  border-left: var(--size-3) solid var(--accent-faded); padding-left: var(--size-5);
}
.nb-t-quote .nb-text { font-style: italic; color: var(--accent); }
.nb-t-banner .nb-text {
  background: var(--primary-faded); border-left: var(--size-3) solid var(--primary);
  padding: var(--size-4) var(--size-5); border-radius: var(--size-3);
}

.nb-bullet {
  flex: 0 0 auto; padding: var(--size-3) 0; color: var(--accent);
  min-width: 1.6rem; text-align: right; font-size: 1.4rem;
}
.nb-check, .nb-toggle {
  background: none; border: 0; cursor: pointer; color: var(--accent);
  padding: var(--size-3) 0; font-size: 1.4rem; flex: 0 0 auto;
}
.nb-check:hover { color: var(--primary); }
.nb-check.is-checked { color: #2e7d32; }
.nb-block.is-checked .nb-text { text-decoration: line-through; color: var(--accent); }

.nb-block-task {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--size-3);
  margin-top: var(--size-3); padding: 0.1rem var(--size-4);
  background: var(--primary-faded); border-radius: var(--size-3);
  font-family: monospace; font-size: 1.1rem; text-decoration: none;
  color: var(--primary); white-space: nowrap;
}
.nb-block-task:hover { background: var(--primary); color: #fff; }

.nb-add-block {
  background: none; border: 0; cursor: pointer; color: var(--accent);
  font-family: 'Lato', sans-serif; font-size: 1.25rem;
  padding: var(--size-4) 0 var(--size-4) 3.9rem;
  display: flex; align-items: center; gap: var(--size-3);
}
.nb-add-block:hover { color: var(--primary); }

.nb-section-head { margin-top: var(--size-7); }
.nb-version-form { display: flex; gap: var(--size-4); margin-top: var(--size-5); flex-wrap: wrap; }

/* ---- the block menus ---- */
.nb-menu {
  position: fixed; z-index: 50; min-width: 22rem;
  background: #fff; border-radius: var(--size-3); box-shadow: var(--shadow-heavy, 0 0.4rem 1.6rem rgba(0,0,0,0.25));
  border: var(--size-1) solid var(--accent-faded); padding: var(--size-3);
}
.nb-submenu { min-width: 24rem; }
.nb-menu-label {
  color: var(--accent); font-size: 1.05rem; text-transform: uppercase;
  letter-spacing: 0.05em; padding: var(--size-3) var(--size-4);
}
.nb-menu-item {
  display: flex; align-items: center; gap: var(--size-4); width: 100%;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: 'Lato', sans-serif; font-size: 1.25rem; color: inherit;
  padding: var(--size-4); border-radius: var(--size-3);
}
.nb-menu-item:hover { background: var(--primary-faded); }
.nb-menu-item .fal:first-child { color: var(--accent); width: 1.6rem; text-align: center; }
.nb-menu-item.danger { color: #d33d44; }
.nb-menu-item.danger .fal:first-child { color: #d33d44; }
.nb-menu-more { margin-left: auto; color: var(--accent); }
.nb-menu-hint { margin-left: auto; color: var(--accent); font-size: 1.05rem; font-family: monospace; }
.nb-menu-empty { color: var(--accent); font-size: 1.15rem; padding: var(--size-4); max-width: 26rem; }

@media (max-width: 62rem) {
  .nb-shell { flex-direction: column; }
  .nb-pages { flex: 1 1 auto; max-width: none; width: 100%; }
}

/* ==========================================================================
   The "+ View" picker, and the saved views beside the built-in tabs.
   ========================================================================== */
/* Intricate brand colours, alongside the design system's own tokens. Declared
   once here so nothing has to repeat the hex. */
:root {
  --intricate-warm-red: #eb6419;
  --intricate-gray: #636466;
}

.vp-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.28); z-index: 60; }

/* THE reason the picker would not go away.
   `hidden` is only display:none from the user-agent stylesheet, so ANY author
   display rule outranks it -- and .vp sets display:flex to lay the panel out.
   The result was a popup that ignored every attempt to close it and sat on top
   of every screen. Restated at higher specificity so the attribute wins.
   Scoped to these two selectors rather than a blanket [hidden] rule, which
   would reach markup this stylesheet does not own. */
.vp[hidden], .vp-overlay[hidden] { display: none; }

.vp {
  position: fixed; z-index: 61; top: 12vh; left: 50%; transform: translateX(-50%);
  width: 46rem; max-width: 94vw; max-height: 74vh;
  background: #fff; border-radius: var(--size-4);
  box-shadow: 0 1rem 3rem rgba(0,0,0,0.3);
  display: flex; flex-direction: column; overflow: hidden;
}
.vp-search-row {
  display: flex; align-items: center; gap: var(--size-3);
  padding: var(--size-5); border-bottom: var(--size-1) solid var(--accent-faded);
}
.vp-search {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  font-family: 'Lato', sans-serif; font-size: 1.4rem; color: inherit;
}
.vp-create {
  background: none; border: 0; cursor: pointer; color: var(--intricate-warm-red);
  font-size: 1.4rem; padding: 0 var(--size-3);
}
.vp-create:hover { color: var(--dark); }

.vp-scroll { overflow-y: auto; padding: var(--size-4) var(--size-5); flex: 1; }
.vp-section-label {
  color: var(--accent); font-size: 1.05rem; text-transform: uppercase;
  letter-spacing: 0.05em; padding: var(--size-3) 0;
}
/* Two columns, matching the reference product's shape. */
.vp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--size-2); }
.vp-tile {
  display: flex; align-items: center; gap: var(--size-4);
  padding: var(--size-4); border: 0; border-radius: var(--size-3);
  background: none; cursor: pointer; text-align: left;
  font-family: 'Lato', sans-serif; font-size: 1.3rem; color: inherit;
}
.vp-tile:hover { background: var(--primary-faded); }
.vp-tile-icon {
  flex: 0 0 2.8rem; width: 2.8rem; height: 2.8rem; border-radius: var(--size-3);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.4rem;
}
/* Two tints, carrying the only distinction worth a colour: this creates a view
   of the work here, versus this takes you somewhere that already exists. */
.vp-tile-layout { background: var(--primary); }
.vp-tile-goto { background: var(--intricate-gray); }
.vp-tile-label { font-weight: bold; }
.vp-tile-sub { color: var(--accent); }
.vp-empty { color: var(--accent); font-size: 1.2rem; padding: var(--size-5) 0; }

.vp-footer {
  display: flex; align-items: center; gap: var(--size-6); flex-wrap: wrap;
  padding: var(--size-5); border-top: var(--size-1) solid var(--accent-faded);
  background: var(--primary-faded);
}
.vp-check { display: inline-flex; align-items: center; gap: var(--size-3); font-size: 1.2rem; }
.vp-check .fal { color: var(--accent); cursor: help; }
.vp-perm-note { margin-left: auto; color: var(--accent); font-size: 1.1rem; }

/* Saved views in the tab row */
.ctr-view-saved { gap: var(--size-3); }
.ctr-view-saved .fa-thumbtack, .ctr-view-saved .fa-lock { font-size: 1rem; }
.vp-locked { color: var(--accent); font-size: 1rem; }
.saved-view-owner { color: var(--accent); font-size: 1.05rem; }
.saved-view-locked {
  color: var(--accent); font-size: 1.05rem; white-space: nowrap;
  display: inline-flex; align-items: center; gap: var(--size-3);
}

/* ==========================================================================
   Calendar
   ========================================================================== */
.cal-toolbar {
  display: flex; align-items: center; gap: var(--size-4);
  flex-wrap: wrap; margin-bottom: var(--size-5);
}
.cal-month-name { margin: 0 var(--size-4) 0 0; }
.cal-grid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--size-1); background: var(--accent-faded);
  border-radius: var(--size-4); overflow: hidden; box-shadow: var(--shadow);
}
.cal-dow {
  background: var(--primary); color: #fff; font-weight: bold;
  padding: var(--size-4); text-align: center; font-size: 1.15rem;
}
.cal-day {
  background: #fff; min-height: 9rem; padding: var(--size-3);
  display: flex; flex-direction: column; gap: 0.2rem;
}
/* Days from the neighbouring months are dimmed rather than blank: the grid keeps
   whole weeks, and an empty cell reads as "nothing due" instead of "not this
   month". */
.cal-outside { background: #fafafa; }
.cal-outside .cal-day-num { color: var(--accent); }
.cal-weekend { background: #f7f7f7; }
.cal-outside.cal-weekend { background: #f2f2f2; }
.cal-day-head { display: flex; align-items: center; justify-content: space-between; }
.cal-day-num { font-size: 1.15rem; color: var(--dark); font-weight: bold; }
.cal-today .cal-day-num {
  background: #d33d44; color: #fff; border-radius: 50%;
  min-width: 2rem; height: 2rem; line-height: 2rem; text-align: center;
}
.cal-day-count { color: var(--accent); font-size: 1rem; }
.cal-item {
  display: block; text-decoration: none; color: inherit;
  border-left: var(--size-3) solid var(--accent);
  background: var(--primary-faded); border-radius: var(--size-2);
  padding: 0.1rem var(--size-3); font-size: 1.05rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-item:hover { background: var(--primary); color: #fff; }
.cal-item.is-done { opacity: 0.55; text-decoration: line-through; }
.cal-item.is-overdue { box-shadow: inset 0 0 0 0.12rem #d33d44; }
.cal-item-ref { font-family: monospace; margin-right: var(--size-3); }
.cal-more { font-size: 1rem; color: var(--accent); text-decoration: none; }
.cal-more:hover { color: var(--primary); }
.cal-undated { margin-top: var(--size-7); }
.cal-undated-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
  gap: var(--size-3);
}

/* Which saved view is open, and whether you may change it. */
.open-view-chip {
  display: inline-flex; align-items: center; gap: var(--size-3);
  background: var(--primary-faded); color: var(--primary);
  padding: 0.2rem var(--size-4); border-radius: var(--size-3); font-size: 1.2rem;
}
.filters-restored { color: var(--intricate-warm-red); font-weight: bold; margin-right: var(--size-4); }

/* ==========================================================================
   Column header tools: the right-click menu, and the drag affordance.
   ========================================================================== */
.col-menu {
  position: fixed; z-index: 55; min-width: 20rem;
  background: #fff; border-radius: var(--size-3);
  border: var(--size-1) solid var(--accent-faded);
  box-shadow: 0 0.4rem 1.6rem rgba(0,0,0,0.25); padding: var(--size-3);
}
.col-menu-item {
  display: flex; align-items: center; gap: var(--size-4); width: 100%;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: 'Lato', sans-serif; font-size: 1.25rem; color: inherit;
  padding: var(--size-4); border-radius: var(--size-3);
}
.col-menu-item:hover { background: var(--primary-faded); }
.col-menu-item .fal { color: var(--accent); width: 1.6rem; text-align: center; }
.col-menu-sep {
  height: var(--size-1); background: var(--accent-faded); margin: var(--size-3) 0;
}

/* The header is grabbable, so it should say so -- but only where a drag is
   actually wired, which is the header row and not the filter row. */
.task-table thead tr:first-child th[data-col]:not([data-col="parent"]) { cursor: grab; }
.task-table thead th.col-dragging {
  opacity: 0.6; background: var(--intricate-warm-red); cursor: grabbing;
}
/* jQuery UI's clone helper is absolutely positioned outside the table, so it
   needs its own background or it renders as transparent text over the page. */
.ui-sortable-helper.th, th.ui-sortable-helper {
  background: var(--primary); color: #fff; box-shadow: 0 0.2rem 0.8rem rgba(0,0,0,0.3);
}

/* Column resize handle -- a thin strip on the right edge of the header cell.
   `th` is already a positioned element (position: sticky above), so this
   needs nothing of its own to anchor against. */
.col-resize-handle {
  position: absolute; top: 0; right: 0; bottom: 0; width: 0.6rem;
  cursor: col-resize; z-index: 3;
}
.col-resize-handle:hover, .col-resize-handle:active { background: rgba(255,255,255,0.25); }
/* Set for the duration of a drag so the cursor stays col-resize even while
   the pointer crosses cells that would otherwise claim it (editable text,
   the grab cursor on a draggable header). */
body.col-resizing, body.col-resizing * { cursor: col-resize !important; user-select: none; }

/* ==========================================================================
   "View changed — save it?" prompt.
   ========================================================================== */
.vs-prompt {
  position: fixed; bottom: var(--size-6); left: 50%; transform: translateX(-50%);
  z-index: 58; display: flex; align-items: flex-start; gap: var(--size-5);
  max-width: 92vw; padding: var(--size-5) var(--size-6);
  background: #fff; border-radius: var(--size-4);
  border-left: var(--size-3) solid var(--intricate-warm-red);
  box-shadow: 0 0.5rem 2rem rgba(0,0,0,0.28);
}
/* Sits at the bottom rather than over the grid: the change it is asking about
   is on screen, and covering it would be self-defeating. */
.vs-prompt[hidden] { display: none; }
.vs-icon { font-size: 2rem; color: var(--intricate-warm-red); margin-top: 0.2rem; }
.vs-body { min-width: 0; }
.vs-line { font-size: 1.3rem; margin-bottom: var(--size-4); }
.vs-note { color: var(--accent); }
.vs-fields { display: flex; align-items: center; gap: var(--size-4); flex-wrap: wrap; }
.vs-name { width: 22rem; max-width: 60vw; font-size: 1.25rem; }
.vs-check { display: inline-flex; align-items: center; gap: var(--size-3); font-size: 1.2rem; cursor: help; }
.vs-dismiss {
  background: none; border: 0; cursor: pointer; color: var(--accent);
  font-family: 'Lato', sans-serif; font-size: 1.2rem; text-decoration: underline;
}
.vs-dismiss:hover { color: var(--dark); }

@media (max-width: 62rem) {
  .vs-prompt { left: var(--size-5); right: var(--size-5); transform: none; }
}

/* ── Moving spaces in the sidebar tree (043) ───────────────────────────────── */
/* The grip handle, not the row, is what starts a drag (see the dragstart
   comment in sidebar.js) -- it only exists in the markup when the tree is
   unlocked, so no extra selector is needed to hide it otherwise. Collapsed to
   zero width along with .tree-add / .tree-remove (see the comment on
   .tree-add) rather than just faded, so the space it would otherwise reserve
   on the left of the row goes back to the name. */
.tree-drag-handle {
  cursor: grab; color: rgba(255,255,255,0.55);
  opacity: 0; max-width: 0; padding: 0; overflow: hidden; font-size: 1.1rem; flex: 0 0 auto;
  transition: max-width 0.12s, padding 0.12s, opacity 0.12s, color 0.12s;
}
.tree-row:hover .tree-drag-handle {
  opacity: 1; max-width: 2rem; padding: 0 0.3rem;
}
.tree-drag-handle:hover { color: #FFDB9F; }
.tree-drag-handle:active { cursor: grabbing; }
.tree-space.dragging > .tree-row { opacity: 0.45; }
.tree-row.drop-target,
.tree-root-drop.drop-target {
  outline: 2px solid #FFDB9F;
  outline-offset: -2px;
  border-radius: 0.25rem;
}
/* "Move to top level" only means anything mid-drag, so it stays out of the way
   until the tree is unlocked. */
.tree-root-drop { display: none; }
.tree-unlocked .tree-root-drop {
  display: block;
  margin: 0.35rem 0.5rem 0;
  padding: 0.4rem 0.6rem;
  border: 1px dashed rgba(255,255,255,0.35);
  border-radius: 0.25rem;
  color: rgba(255,255,255,0.7);
  font-size: 0.85rem;
}
.tree-lock-toggle { background: none; border: none; cursor: pointer; }
.tree-lock-toggle[data-unlocked="1"] { color: #FFDB9F; }

/* The remove control sits alongside the add control, and stays out of the way
   until the row is hovered -- a trash icon on every row of a client index reads
   as an invitation to lose something. */
.tree-remove {
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,0.55);
  opacity: 0; max-width: 0; padding: 0; overflow: hidden;
  transition: max-width 0.12s, padding 0.12s, opacity 0.12s, color 0.12s;
}
.tree-row:hover .tree-remove, .tree-remove:focus-visible {
  opacity: 1; max-width: 2rem; padding: 0 0.35rem;
}
.tree-remove:hover { color: #E4572E; }
.tree-remove:focus-visible { outline: 2px solid #FFDB9F; }


/* Lists are draggable too when the tree is unlocked (move between spaces). */
.tree-list.dragging > .tree-row { opacity: 0.45; }

/* ── Space groups on an aggregating view ──────────────────────────────────────
   A parent space shows its own work first, then each nested space. The heading
   carries the full path (grouping folder included) so it reads the same as the
   sidebar. */
.space-group { margin: 0 0 var(--size-7); }
.space-group-head {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.45rem 0.7rem;
  background: var(--accent-faded);
  border-left: 3px solid var(--primary);
  border-radius: 0.25rem;
  position: sticky; top: 0; z-index: 2;
}
.space-group-path { font-weight: 700; color: var(--primary); }
.space-group-count { color: var(--accent); font-size: 0.85rem; margin-left: auto; }
.space-group-toggle { cursor: pointer; color: var(--accent); }
.space-group.collapsed .space-group-body { display: none; }
.space-group.collapsed .space-group-toggle { transform: rotate(-90deg); }
.space-group-body { padding-left: 0.5rem; }

/* Work a space owns by code rather than containment (047). Marked, because a
   heading identical to the tree groups would imply it is filed here. */
.space-group-tag {
  font-size: 0.78rem; color: var(--primary);
  background: #fff; border: 1px solid var(--accent-faded);
  border-radius: 0.75rem; padding: 0.05rem 0.45rem;
}

/* My Work: a count per section, so an empty one reads as "nothing here" rather
   than as something failing to load, and the list a task belongs to. */
.my-work-section h3 .mw-count {
  display: inline-block; min-width: 1.6rem; padding: 0 0.4rem; margin-left: 0.4rem;
  border-radius: 1rem; background: var(--accent-faded); color: var(--accent);
  font-size: 1.1rem; text-align: center; vertical-align: middle;
}
.task-row-mini .mw-list { color: var(--accent); font-size: 1.1rem; }

/* Field assignments on the admin screen: one line per scope, so what a field is
   required on can be read at a glance and taken off without SQL. */
.fa-scope { display: flex; align-items: center; gap: var(--size-3); margin-bottom: 0.3rem; }
.fa-scope .fa-req { color: var(--accent); font-size: 1.1rem; }

/* The fields admin screen.

   One assign form instead of one per field row, and the machine-created
   placement rows folded away behind a count so the handful of real rules are
   readable. See the note at the top of views/admin/fields.ejs. */
.fields-intro { max-width: 78rem; color: var(--dark); font-size: 1.25rem; }
.fields-count {
  display: inline-block; margin-left: var(--size-4); color: var(--accent);
  font-size: 1.15rem; white-space: nowrap;
}
/* The drill-in window. Same visual language as the board's card popup -- a
   coloured head, a padded body -- because it is the same kind of thing: a small
   window over the page you are on, not a page of its own. Centred and scrimmed,
   since unlike the card popup it is not anchored to anything. */
.admin-scrim {
  position: fixed; inset: 0; z-index: 44; background: rgba(0,0,0,0.35);
}
.admin-window {
  position: fixed; z-index: 45; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56rem; max-width: calc(100vw - 3rem); max-height: 86vh;
  display: flex; flex-direction: column;
  background: white; border-radius: var(--size-4);
  box-shadow: 0 0.4rem 2rem rgba(0,0,0,0.35);
}
.admin-window-head {
  display: flex; align-items: center; gap: var(--size-4);
  padding: var(--size-4) var(--size-5); background: var(--primary); color: white;
  border-radius: var(--size-4) var(--size-4) 0 0; font-size: 1.4rem;
}
.admin-window-key {
  font-family: monospace; font-size: 1.15rem; opacity: 0.85;
}
.admin-window-head .fa-times { margin-left: auto; cursor: pointer; }
.admin-window-body {
  padding: var(--size-5); overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--size-4);
}
.scope-block { border-top: 1px solid var(--accent-faded); padding-top: var(--size-4); }
.scope-block:first-child { border-top: 0; padding-top: 0; }
.scope-h {
  margin: 0 0 var(--size-3); font-size: 1.1rem; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--accent);
}
.scope-add {
  display: flex; gap: var(--size-5); align-items: flex-end; flex-wrap: wrap;
  background: var(--primary-faded); border-radius: var(--size-4);
  padding: var(--size-5); 
}
.scope-add .text-input { min-width: 18rem; }
.fa-summary { white-space: nowrap; }
.fa-drill { padding: 0.2rem var(--size-5); font-size: 1.15rem; }

.assign-form {
  display: flex; gap: var(--size-5); align-items: flex-end; flex-wrap: wrap;
  background: var(--primary-faded); border-radius: var(--size-4);
  padding: var(--size-5) var(--size-6); margin: var(--size-5) 0 var(--size-3);
}
.assign-cell { display: flex; flex-direction: column; gap: 0.2rem; }
.assign-label {
  font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--accent);
}
.assign-cell .text-input { min-width: 20rem; }
.assign-note { color: var(--accent); font-size: 1.15rem; margin: 0 0 var(--size-5); }
.fa-none { color: var(--accent); font-size: 1.15rem; }
.fa-where { font-size: 1.2rem; }
.pill-quiet {
  background: var(--accent-faded); color: var(--accent);
  font-size: 1.0rem; padding: 0 var(--size-3); border-radius: 1rem;
  margin-left: var(--size-3); text-transform: uppercase; letter-spacing: 0.04em;
}
.fa-placement {
  display: flex; flex-wrap: wrap; gap: var(--size-3) var(--size-5);
  padding: var(--size-3) 0 0;
}
.fa-placement .fa-scope { margin: 0; }

/* Structure templates: one card per template, with its variables asked for up
   front so applying is a single considered action rather than a wizard. */
.tpl-card {
  border: 1px solid var(--accent-faded); border-radius: 0.4rem;
  padding: var(--size-5); margin-bottom: var(--size-5); background: #fff;
}
.tpl-head { display: flex; align-items: center; gap: var(--size-3); flex-wrap: wrap; }
.tpl-apply { display: flex; align-items: flex-end; gap: var(--size-4); flex-wrap: wrap; margin-top: var(--size-4); }
.tpl-var { display: flex; flex-direction: column; gap: 0.2rem; }
.tpl-var > span { color: var(--accent); font-size: 1.1rem; }
.tpl-def { margin-top: var(--size-4); }
.tpl-def summary { cursor: pointer; color: var(--accent); }
.tpl-def pre {
  background: #f4f6f7; padding: var(--size-4); border-radius: 0.3rem;
  overflow-x: auto; font-size: 1.1rem; max-height: 30rem;
}

/* Inline result banners. */
.notice { padding: var(--size-4); border-radius: 0.3rem; background: #e6f4ea; margin-bottom: var(--size-5); }
.notice-error { background: #fdecea; }

/* The work-breakdown position. Quieter than the reference beside it, because
   the reference is the one to quote and this one moves. */
.wbs-chip {
  font-family: monospace; font-size: 1.15rem; color: var(--accent);
  background: var(--accent-faded); padding: 0.1rem 0.5rem; border-radius: 0.3rem;
}

/* How the sidebar is grouped. Sits in the section head, quiet enough not to
   compete with the tree itself. */
.sidebar-view-picker {
  background: transparent; color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.25); border-radius: 0.3rem;
  font-size: 1.1rem; padding: 0.1rem 0.3rem; max-width: 12rem; margin-left: auto;
}
.sidebar-view-picker option { color: #1d1d1d; }
.sidebar-new.collapsed .sidebar-view-picker { display: none; }
/* A grouping node is not a space: no pointer, and it does not light up as a link. */
.tree-row.tree-group .tree-link-static { cursor: default; }
.tree-row.tree-group { opacity: 0.95; }

/* The way from the dropdown to the full history. */
/* The push-to-subtasks offer: a bar, because it is an offer and not a decision
   about what just happened. Bottom-centre so it cannot cover the row that was
   just changed, which is the thing the person is looking at. */
.cascade-offer {
  position: fixed; z-index: 90; left: 50%; transform: translateX(-50%);
  bottom: var(--size-7); display: flex; align-items: center; gap: var(--size-5);
  background: white; color: var(--dark);
  border: 1px solid var(--accent-faded); border-radius: var(--size-4);
  box-shadow: 0 0.4rem 1.8rem rgba(0,0,0,0.26);
  padding: var(--size-4) var(--size-6); max-width: calc(100vw - 3rem);
}
.cascade-offer-text { font-size: 1.25rem; }
.cascade-offer .button { padding: 0.3rem var(--size-5); font-size: 1.2rem; }

.notif-foot { padding: var(--size-3) var(--size-4); border-top: 1px solid var(--accent-faded); text-align: center; }
.notif-foot a { color: var(--primary); font-size: 1.15rem; }

/* Header flyouts: the notification bell, Report a Bug, the admin cog.

   The shared base (css/new-style.css) makes .header-dialog a FULL-SCREEN fixed
   overlay and its .header-dialog-content `position: fixed` with no width and no
   offsets. A fixed box with auto width shrink-wraps to its content, so the panel
   was only ever the right size by accident -- and a notification whose body is
   one long line (the watchdog digest names every overdue item) stretched it
   across the whole window and off the left edge, with "Notifications" itself cut
   off the screen.

   The inline width on each wrapper looked like it bounded the panel. It does not:
   it bounds the WRAPPER, and the content is positioned independently of it. What
   the inline width actually did was keep the invisible full-screen overlay down
   to a narrow strip, which is the only reason the rest of the page stayed
   clickable while a flyout was open.

   So both halves are made explicit here rather than left to that accident: the
   overlay stops swallowing clicks, and the panel is anchored and bounded. */
.header-dialog { pointer-events: none; }
.header-dialog div.header-dialog-content {
  pointer-events: auto;
  top: 5.5rem; right: 1.5rem; left: auto; bottom: auto;
  width: 38rem; max-width: calc(100vw - 3rem);
  max-height: calc(100vh - 7rem);
  display: flex; flex-direction: column; margin: 0;
}
#notifDialog div.header-dialog-content { width: 46rem; }

/* Long words and pasted URLs break rather than widening the panel. Belt and
   braces alongside the width above: the width stops the panel growing, this
   stops the text spilling out of it. */
.notif-item { overflow-wrap: anywhere; }
.notif-item .notif-body {
  /* Three lines and an ellipsis. The watchdog digest is a paragraph; showing it
     whole pushes every other notification below the fold, and the full text is
     one click away on the item itself. */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; font-size: 1.15rem; margin: 0.2rem 0;
}

/* The work type on a row. Always present so the kind of work is legible without
   the Work Type column, and clickable because that is the quickest way to change
   one. Untyped rows show a faint tag rather than nothing, so the control is
   findable on the rows that most need it. */
.type-marker { cursor: pointer; margin-left: 0.3rem; font-size: 1.15rem; }
.type-marker:hover { transform: scale(1.15); }
.type-marker-none { color: var(--accent); opacity: 0.35; }
.task-row:hover .type-marker-none { opacity: 0.8; }
.type-menu .mention-option { gap: var(--size-3); }

/* Which gesture a list drop will perform: a line above or below means reorder
   beside that list, the plain highlight means nest inside it. */
.tree-row.drop-above, .sidebar-tree .drop-above > .tree-row { box-shadow: inset 0 3px 0 0 #fff; }
.tree-row.drop-below, .sidebar-tree .drop-below > .tree-row { box-shadow: inset 0 -3px 0 0 #fff; }