:root {
    color-scheme: light;
    --shadow-sm: 0 1px 2px rgba(20,20,18,.05), 0 1px 1px rgba(20,20,18,.04);
    --shadow-md: 0 2px 8px rgba(20,20,18,.06), 0 1px 2px rgba(20,20,18,.05);
    --shadow-lg: 0 12px 32px rgba(20,20,18,.10), 0 2px 6px rgba(20,20,18,.06);
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 26px;
    --border: #eceae6;
    --ink: #171614;
    --ink-soft: #6b6a67;
    --accent: #4338ca;
    --accent2: #db2777;
    --accent-grad: linear-gradient(135deg, #4338ca, #7c3aed 55%, #db2777);
  }
  * { box-sizing: border-box; }
  ::selection { background: #ddd6fe; }
  body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: #e7e8f2;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
  }
  .wrap {
    max-width: 98vw; margin: 12px auto; padding: 24px 28px 60px;
    background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
  }
  .app-header {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--border);
    position: relative;
  }
  .app-header::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
    background: var(--accent-grad); border-radius: 2px;
  }
  .app-header-title { display: flex; align-items: center; gap: 12px; }
  .app-mark {
    width: 38px; height: 38px; border-radius: 13px; background: var(--accent-grad);
    color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px;
    flex-shrink: 0; box-shadow: 0 4px 12px rgba(124,58,237,.35);
  }
  h1 { font-size: 19px; font-weight: 800; margin: 0; letter-spacing: -.01em; }
  .sub { color: var(--ink-soft); font-size: 12.5px; margin: 2px 0 0; }

  .app-shell { display: flex; gap: 22px; align-items: flex-start; }
  .main-col { flex: 1; min-width: 0; }

  .sidebar {
    width: 220px; flex-shrink: 0; background: #fafaff; border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 14px 10px; position: sticky; top: 20px;
  }
  .sidebar-group { margin-bottom: 14px; }
  .sidebar-group:last-of-type { margin-bottom: 10px; }
  .sidebar-group-title {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: #a3a19c; margin-bottom: 6px; padding: 0 8px;
  }
  .sidebar-item {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; text-align: left; background: transparent; border: none; border-radius: 999px;
    padding: 8px 12px; font-size: 13px; font-weight: 600; color: #333; margin-bottom: 2px;
    transition: background .12s ease, color .12s ease, transform .1s ease;
  }
  .sidebar-item:hover { background: #eeeafc; }
  .sidebar-item:active { transform: scale(.98); }
  .sidebar-item.active { background: var(--accent-grad); color: #fff; box-shadow: 0 3px 10px rgba(124,58,237,.28); }
  .sidebar-item.active .sidebar-count { background: rgba(255,255,255,.2); color: #fff; }
  .sidebar-count {
    font-size: 11px; font-weight: 700; background: #f0efec; color: #6b6a67;
    border-radius: 999px; padding: 1px 8px; min-width: 20px; text-align: center;
  }
  .sidebar-all { border-top: 1px solid #eeece8; padding-top: 10px; margin-top: 4px; color: #6b6a67; }
  .sidebar-meeting-group { margin-top: 14px; }
  .sidebar-item.sidebar-meeting-header {
    text-transform: uppercase; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: #a3a19c;
  }
  .sidebar-item.sidebar-meeting-header.active { color: #fff; }
  .sidebar-subunit-tag {
    font-size: 9px; font-weight: 700; text-transform: uppercase; color: #8a8a86;
    background: #f0efec; border-radius: 4px; padding: 1px 4px; margin-right: 5px;
  }
  .sidebar-item.active .sidebar-subunit-tag { background: rgba(255,255,255,.2); color: #fff; }
  .sidebar-empty-hint { font-size: 11px; color: #a8a7a3; font-style: italic; padding: 4px 10px 8px; }

  .sidebar-subunit-nested {
    margin: 0 0 4px 14px; padding-left: 8px; border-left: 2px solid #eeece8;
  }
  .sidebar-subunit-nested .sidebar-item {
    font-size: 12px; font-weight: 500; color: #6b6a67; padding: 6px 12px; border-radius: 999px;
  }
  .sidebar-subunit-nested .sidebar-item .sidebar-count { font-size: 10px; padding: 1px 6px; }
  .sidebar-subunit-nested .sidebar-item.active { background: var(--accent-grad); color: #fff; }

  /* Color-code every team (built-in or newly added in CMS) so each is easy to spot at a glance —
     each team carries its own --team-color custom property, set inline per button/card, so any
     number of teams can each get a distinct color without needing a dedicated CSS class per team. */
  .sidebar-item.team-dynamic { color: var(--team-color, #333); }
  .sidebar-item.team-dynamic.active { color: #fff; }

  .sidebar-subunit-nested.team-dynamic { border-left-color: var(--team-color, #eeece8); }
  .sidebar-subunit-nested.team-dynamic .sidebar-item { color: var(--team-color, #6b6a67); }
  .sidebar-subunit-nested .sidebar-item.active { color: #fff; }

  .tabs {
    display: inline-flex; gap: 2px; margin-bottom: 18px; background: #f0efeb;
    border-radius: var(--radius-sm); padding: 3px;
  }
  .tab-btn {
    background: transparent; border: none; padding: 7px 16px; font-size: 13px; font-weight: 600;
    color: var(--ink-soft); border-radius: 6px; cursor: pointer; transition: background .15s ease, color .15s ease, box-shadow .15s ease;
  }
  .tab-btn:hover:not(.active) { color: var(--ink); }
  .tab-btn.active { color: #fff; background: var(--accent-grad); box-shadow: 0 3px 10px rgba(124,58,237,.3); }
  .tab-btn[style*="margin-left"] { background: transparent; box-shadow: none; border: 1px solid var(--border); }
  .view { display: none; }
  .view.active { display: block; }

  .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 22px; }
  .stat-card {
    border: none; border-radius: var(--radius-lg);
    padding: 18px 18px; position: relative; overflow: hidden;
    transition: box-shadow .15s ease, transform .15s ease;
  }
  .stat-card:hover { transform: translateY(-3px) scale(1.01); }
  .stat-card .n { font-size: 27px; font-weight: 800; letter-spacing: -.02em; color: #fff; }
  .stat-card .l { font-size: 12.5px; color: rgba(255,255,255,.85); margin-top: 3px; font-weight: 600; }
  /* Every team stat tile (built-in or added later) is colored from its own --team-color custom
     property set inline, so any number of teams can each get a distinct-colored tile. */
  .stat-card.team-dynamic {
    background: var(--team-color);
    box-shadow: 0 8px 20px rgba(0,0,0,.2);
    background: linear-gradient(135deg, var(--team-color), color-mix(in srgb, var(--team-color) 65%, black));
    box-shadow: 0 8px 20px color-mix(in srgb, var(--team-color) 45%, transparent);
  }
  .stat-card.open { background: linear-gradient(135deg, #fb7185, #e11d48); box-shadow: 0 8px 20px rgba(225,29,72,.28); }
  .stat-card.team-dynamic .n, .stat-card.open .n { color: #fff; }

  /* Open/Close breakdown inside a stat tile — a "Closed" ticket/meeting is one whose Next Action
     checklist has items and every one of them is checked; anything else (nothing checked, only
     some checked, or no sub-tasks added yet) counts as "Open". Only these 2 buckets are shown here
     — the finer-grained "In Progress" status still exists everywhere else in the app (badges,
     filters), this dashboard tile just deliberately collapses it into "Open" for a quick headcount. */
  .stat-oc-row { display: flex; gap: 16px; }
  .stat-oc-item .n { font-size: 22px; }
  .stat-oc-label { font-size: 10px; color: rgba(255,255,255,.85); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-top: -2px; }
  .stat-oc-ratio { font-size: 12px; font-weight: 700; color: rgba(255,255,255,.92); margin-top: 6px; }

  .toolbar {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    margin-bottom: 14px; background: #fff; border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 12px; box-shadow: var(--shadow-sm);
  }
  select, input[type=text] {
    padding: 7px 11px; border: 1px solid #e2e0dc; border-radius: var(--radius-sm);
    font-size: 13px; background: #fbfbfa; transition: border-color .12s ease, box-shadow .12s ease;
  }
  select:hover, input[type=text]:hover { border-color: #cfcdc8; }
  select:focus, input[type=text]:focus {
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(67,56,202,.12);
  }
  .spacer { flex: 1; }
  button {
    cursor: pointer; border: none; border-radius: var(--radius-sm); font-size: 13px;
    padding: 8px 14px; font-weight: 600; transition: background .12s ease, box-shadow .12s ease, transform .08s ease;
  }
  button:active { transform: scale(.97); }
  .btn-primary { background: var(--accent-grad); color: #fff; box-shadow: 0 3px 10px rgba(124,58,237,.3); border-radius: 999px; }
  .btn-primary:hover { box-shadow: 0 5px 16px rgba(124,58,237,.4); filter: brightness(1.05); }
  .btn-ghost { background: #fff; color: var(--ink); border: 1px solid #e2e0dc; border-radius: 999px; }
  .btn-ghost:hover { background: #f7f6f4; border-color: #cfcdc8; }
  .btn-danger { background: transparent; color: #c0392b; }
  button:disabled { opacity: .5; cursor: not-allowed; }

  .table-scroll { overflow-x: auto; border-radius: var(--radius-md); }
  table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); }
  thead th {
    text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--ink-soft); background: #f7f6f4; padding: 11px 12px; border-bottom: 1px solid var(--border); white-space: nowrap;
  }
  tbody td { padding: 11px 12px; font-size: 13px; border-bottom: 1px solid #f1f0ed; vertical-align: top; }
  tbody tr:last-child td { border-bottom: none; }
  tbody tr { transition: background .1s ease; }
  tbody tr:hover { background: #fafaf9; }

  /* Edit button pinned to the front of the table, staying visible even when scrolled sideways */
  .col-actions {
    position: sticky; left: 0; z-index: 2; background: #fff;
    box-shadow: 2px 0 4px rgba(0,0,0,.05);
  }
  thead th.col-actions { background: #f0efec; z-index: 3; }
  tbody tr:hover .col-actions { background: #fafaf8; }

  .badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
  .badge-strategy { background: #fbe8d6; color: #b5651d; }
  .badge-bd { background: #dcefe3; color: #2e6f4e; }
  .badge-cmo { background: #ede3fc; color: #7c3aed; }

  .badge-status-open { background: #fdeaea; color: #c0392b; }
  .badge-status-progress { background: #fef6dc; color: #a17a00; }
  .badge-status-resolved { background: #e5f3e8; color: #2e7d32; }

  .badge-type-esc { background: #fde9e9; color: #b23b3b; }
  .badge-type-fb { background: #eef1f3; color: #2e5c8a; }

  .badge-priority-short { background: #fdeaea; color: #b23b3b; }
  .badge-priority-medium { background: #fef6dc; color: #a17a00; }
  .badge-priority-long { background: #e5f3e8; color: #2e7d32; }

  /* Next Action's own badge palette (blue family) — keeps it visually distinct from the main
     Status badges (red/amber/green) elsewhere in the app. */
  .badge-next-open { background: #dbeafe; color: #1d4ed8; }
  .badge-next-progress { background: #bfdbfe; color: #1e40af; }
  .badge-next-resolved { background: #93c5fd; color: #1e3a8a; }
  .label-next { color: #1d4ed8; }

  .recipient { font-size: 12px; color: #555; }
  .proj-cell { max-width: 170px; font-weight: 600; }
  .desc { max-width: 260px; font-size: 10.5px; color: #6b6a67; line-height: 1.45; }
  .subunit-cell { max-width: 140px; font-size: 10.5px; font-weight: 400; color: #6b6a67; line-height: 1.45; }
  .next { max-width: 300px; min-width: 220px; color: #444; font-size: 11px; line-height: 1.4; }
  .cell-empty { color: #b0afab; font-style: italic; }
  .pic-cell { max-width: 120px; font-size: 11px; }
  .due-overdue { color: #b23b3b; font-weight: 700; }
  .progress-note { font-size: 10.5px; color: #8a8a86; margin-top: 4px; white-space: nowrap; }

  /* Log table "Progress" column — done Next Action sub-tasks ÷ total */
  .progress-cell { min-width: 90px; }
  .progress-pct { font-size: 12.5px; font-weight: 700; color: #171614; }
  .progress-bar-track-sm { height: 5px; margin: 3px 0; }
  .progress-pct-note { font-size: 9.5px; color: #a8a7a3; white-space: nowrap; }

  .st-line { white-space: normal; word-break: break-word; }
  .subtasks-cell { max-width: 210px; }
  .subtasks-cell .st-line { font-size: 12px; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .next .st-line {
    font-size: 10.5px; line-height: 1.35; padding: 3px 0; border-bottom: 1px solid #eeece8;
  }
  .next .st-line:last-child { border-bottom: none; }
  .subtasks-cell .st-line .mark { display: inline-block; width: 13px; }
  .subtasks-cell .st-line.done { }
  .subtasks-cell .st-none { font-size: 12px; color: #b0afab; font-style: italic; }

  /* Drag handle for reordering sub-tasks — shared look in both the Log table and the ticket edit
     window. Only the handle itself is draggable, so clicking/selecting text elsewhere in the row
     still behaves normally. */
  .st-drag {
    flex-shrink: 0; cursor: grab; color: #c4c3bf; font-size: 12px; line-height: 1; padding: 2px 1px 0;
    user-select: none; touch-action: none;
  }
  .st-drag:hover { color: #8a8a86; }
  .st-drag:active { cursor: grabbing; }
  [data-row-id].dragging { opacity: .4; }
  [data-row-id].drag-over { box-shadow: inset 0 2px 0 var(--accent); }

  /* Live tick-boxes for Next Action in the dashboard table itself */
  .st-line-chk {
    display: flex; align-items: flex-start; gap: 5px; cursor: pointer;
    border-radius: 6px; padding: 1px 4px; margin: 0 -4px; transition: background .12s ease;
  }
  .st-line-chk:hover { background: #f5f4ff; }
  .st-line-chk .st-drag { margin-top: 1px; }
  .st-line-chk input[type=checkbox] {
    width: 11px; height: 11px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--accent); cursor: pointer;
  }
  /* Text and its tags stack — all tags for a sub-task line up together on their own line right
     below the text, instead of running on after it. */
  .st-line-body { display: flex; flex-direction: column; min-width: 0; cursor: pointer; }
  .st-line-tags { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; }
  .st-line-tags .tag-chip { margin-left: 0; }
  .next .st-line.done { }
  .st-toggle {
    display: block; background: transparent; border: none; color: var(--accent); font-size: 10.5px;
    font-weight: 700; padding: 3px 0 0; cursor: pointer;
  }
  .st-toggle:hover { text-decoration: underline; }

  /* Customizable sub-task tags (set in CMS, shared across every sub-task list) — kept
     deliberately tiny so a sub-task line can carry several without crowding out the text. */
  .tag-chip {
    display: inline-flex; align-items: center; gap: 1px; font-size: 7px; font-weight: 700;
    line-height: 1.3; padding: 0 4px; border-radius: 999px; margin-left: 3px; white-space: nowrap; vertical-align: middle;
  }
  .tag-chip-x {
    background: transparent; border: none; color: inherit; font-weight: 700; font-size: 7px;
    padding: 0; margin-left: 1px; line-height: 1; opacity: .6; cursor: pointer;
  }
  .tag-chip-x:hover { opacity: 1; }

  .row-actions { display: flex; gap: 6px; white-space: nowrap; }
  .row-actions button { padding: 4px 8px; font-size: 11px; }

  .empty { text-align: center; padding: 40px; color: #8a8a86; font-size: 13px; }

  /* modal */
  .overlay {
    position: fixed; inset: 0; background: rgba(20,20,18,.55); backdrop-filter: blur(2px);
    display: none; align-items: center; justify-content: center; z-index: 50;
  }
  .overlay.show { display: flex; animation: fadeIn .15s ease; }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  .modal {
    background: #fff; border-radius: var(--radius-lg); padding: 28px 32px; width: 1120px; max-width: 96vw;
    max-height: 92vh; overflow-y: auto; box-shadow: var(--shadow-lg);
  }
  .modal h2 { margin: 0 0 18px; font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
  /* "Sum" quick-summary popup — a single Sub-units-style card for one ticket, opened from the Log table */
  .sum-modal { width: 340px; padding: 20px; }
  .sum-modal .su-card { box-shadow: none; border: none; padding: 0; margin: 0; }
  /* Sub-task note popup */
  .note-modal { width: 920px; max-width: 95vw; padding: 32px; }
  #noteTextarea {
    width: 100%; min-height: 640px; padding: 18px 20px; border: 1px solid #e2e0dc; border-radius: var(--radius-sm);
    font-size: 15px; line-height: 1.6; font-family: inherit; resize: vertical; transition: border-color .12s ease, box-shadow .12s ease;
  }
  #noteTextarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(67,56,202,.12); }
  .st-note-flag { font-size: 9px; margin-left: 2px; }
  .modal-columns { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 0 32px; align-items: start; }
  .modal-full { grid-column: 1 / -1; }
  .field { margin-bottom: 14px; }
  .field label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; color: #444; }
  .field select, .field input, .field textarea {
    width: 100%; padding: 10px 12px; border: 1px solid #e2e0dc; border-radius: var(--radius-sm); font-size: 14px; font-family: inherit;
    transition: border-color .12s ease, box-shadow .12s ease;
  }
  .field select:focus, .field input:focus, .field textarea:focus {
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(67,56,202,.12);
  }
  .field textarea { resize: vertical; min-height: 80px; }
  .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
  .hint { font-size: 11.5px; color: #8a8a86; margin-top: 4px; }

  @media (max-width: 760px) {
    .modal-columns { grid-template-columns: 1fr; }
  }

  /* sub-tasks */
  .subtasks-section { border-top: 1px solid #eeece8; margin-top: 18px; padding-top: 18px; padding-bottom: 4px; }
  .subtasks-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
  .subtasks-header label { margin: 0; }
  .subtasks-progress { font-size: 11px; font-weight: 700; color: #6b6a67; }
  .progress-bar-track { height: 6px; background: #f0efec; border-radius: 999px; overflow: hidden; margin-bottom: 10px; }
  .progress-bar-fill { height: 100%; background: #2e7d32; border-radius: 999px; width: 0%; transition: width .2s; }
  .subtasks-list { max-height: 340px; overflow-y: auto; margin-bottom: 8px; }
  .subtask-row { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; font-size: 10.5px; }
  .subtask-row .st-drag { margin-top: 4px; }
  .subtask-row input[type=checkbox] { width: auto; margin: 5px 0 0; flex-shrink: 0; }
  .subtask-row .st-text {
    flex: 1; width: auto; border: 1px solid transparent; background: transparent;
    padding: 8px 10px; font-size: 13px; line-height: 1.45; font-family: inherit; color: inherit; border-radius: 5px;
    resize: vertical; min-height: 40px; overflow-y: hidden; box-sizing: border-box;
  }
  .subtask-row .st-text:hover { background: #f5f4f2; }
  .subtask-row .st-text:focus { border-color: #d8d7d2; background: #fbfbfa; resize: vertical; }
  .subtask-row.done .st-text { }
  .subtask-row .st-note-btn, .subtask-row .st-del { margin-top: 3px; }
  .subtask-row .st-del { background: transparent; border: none; color: #c0392b; font-size: 15px; padding: 0 4px; font-weight: 700; flex-shrink: 0; }
  .st-note-btn {
    background: transparent; border: none; font-size: 12px; padding: 0 3px; flex-shrink: 0; cursor: pointer;
    opacity: .35; transition: opacity .12s ease;
  }
  .st-note-btn:hover, .st-note-btn.has-note { opacity: 1; }
  .st-tags-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 0 0 4px 22px; margin-top: -4px;
  }
  /* Each Next Action sub-task (ticket or meeting) can carry its own scheduled date/time and its
     own PIC (person in charge) — separate from the parent ticket/meeting's own Date/Due Date/PIC
     fields — for tracking a pipeline of several follow-up occurrences/owners off of one record,
     instead of just a single date and a single person for the whole thing. */
  .st-schedule-row {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 0 0 6px 22px; margin-top: -2px; font-size: 11px; color: #6b6a67;
  }
  .st-schedule-row .st-schedule-label { font-weight: 600; white-space: nowrap; }
  .st-schedule-row input[type=date], .st-schedule-row input[type=time] {
    padding: 3px 6px; font-size: 11px; border-radius: 6px;
  }
  .st-schedule-row input[type=text].st-pic-input {
    padding: 3px 6px; font-size: 11px; border-radius: 6px; width: 110px;
  }

  /* Per-sub-task file/photo attachments — upload button + a row of small clickable chips, each
     opening its file in a new tab ("view live") via an on-demand IndexedDB blob URL. */
  .st-attach-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 4px 0 6px 22px; }
  .st-attach-btn {
    display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600;
    color: #444; background: #f0efec; border: 1px solid #e2e0dc; border-radius: 999px;
    padding: 3px 9px; cursor: pointer; white-space: nowrap;
  }
  .st-attach-btn:hover { background: #eeeafc; }
  .st-attach-list { display: flex; flex-wrap: wrap; gap: 4px; }
  .st-attach-chip {
    display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; color: #333;
    background: #eef1f3; border-radius: 999px; padding: 2px 3px 2px 8px; cursor: pointer; white-space: nowrap;
  }
  .st-attach-chip:hover { background: #e2e7ea; }
  .st-tags-row .tag-chip { margin-left: 0; }
  .proj-tags-row { padding-left: 0; margin-top: 3px; }
  .ticket-meeting-tag {
    font-size: 9.5px; font-weight: 700; color: #6b6a67; margin-top: 4px; cursor: default; white-space: nowrap;
  }
  .st-tag-picker {
    font-size: 7.5px; padding: 0 3px; height: 13px; border-radius: 999px; background: #f5f4f2; color: #8a8a86;
    border: 1px dashed #d8d7d2; max-width: 46px;
  }
  .proj-tag-multiselect { position: relative; margin-top: 2px; display: inline-block; }
  .proj-tag-multiselect-btn { font-size: 11px; padding: 4px 10px; }
  .proj-tag-dropdown {
    display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 20; min-width: 190px;
    background: #fff; border: 1px solid #e2e0dc; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12);
    padding: 8px; max-height: 220px; overflow-y: auto;
  }
  .proj-tag-multiselect.open .proj-tag-dropdown { display: block; }
  .proj-tag-option {
    display: flex; align-items: center; gap: 7px; padding: 5px 4px; border-radius: 6px; cursor: pointer; font-size: 12px;
  }
  .proj-tag-option:hover { background: #f5f4f2; }
  .proj-tag-option input[type="checkbox"] { margin: 0; cursor: pointer; }
  .proj-tag-option .swatch { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
  .proj-tag-dropdown-empty { font-size: 12px; color: #8a8a86; padding: 5px 4px; }
  /* Second, always-visible way to type a sub-task's note right here in the ticket edit window —
     same underlying note as the 📝 popup, just inline for quick jotting. */
  .st-inline-note {
    display: block; width: calc(100% - 22px); margin: 2px 0 8px 22px; padding: 8px 10px; box-sizing: border-box;
    border: 1px dashed #e2e0dc; border-radius: 6px; font-size: 12px; line-height: 1.45; font-family: inherit; color: #444;
    resize: vertical; min-height: 52px; background: #fbfbfa; transition: border-color .12s ease, background .12s ease;
  }
  .st-inline-note:focus { outline: none; border-style: solid; border-color: var(--accent); background: #fff; }
  .subtasks-empty { font-size: 12px; color: #a8a7a3; font-style: italic; padding: 4px 0 8px; }
  .subtask-add-row { display: flex; gap: 6px; margin-bottom: 6px; align-items: flex-end; }
  .subtask-add-row textarea {
    flex: 1; resize: vertical; min-height: 68px; font-size: 13px; line-height: 1.45;
    font-family: inherit; padding: 10px 12px; border: 1px solid #e2e0dc; border-radius: var(--radius-sm);
    transition: border-color .12s ease, box-shadow .12s ease;
  }
  .subtask-add-row textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(67,56,202,.12); }
  .subtask-add-row button { white-space: nowrap; align-self: flex-end; }
  .status-auto-note { font-size: 11px; color: #2e7d32; margin-top: 4px; font-weight: 600; }

  .updates-section { border-top: 1px solid #eeece8; margin-top: 14px; padding-top: 14px; }
  .updates-section label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 6px; color: #444; }
  .updates-list { max-height: 220px; overflow-y: auto; margin-bottom: 10px; }
  .update-row {
    padding: 8px 10px; margin-bottom: 6px; font-size: 10.5px; border-radius: 8px;
    border-left: 3px solid #d8d7d2; background: #fafaf8;
  }
  .update-row.from-team { border-left-color: #2e6f4e; background: #f2f8f4; }
  .update-row.from-command { border-left-color: #5b21b6; background: #f6f2fc; }
  .update-row.from-note { border-left-color: #8a8a86; background: #f5f5f4; }
  .update-row.from-auto { border-left-color: #6366f1; background: #eef2ff; font-style: italic; }
  .update-row .who {
    display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    padding: 1px 7px; border-radius: 999px; margin-right: 6px;
  }
  .update-row.from-team .who { background: #dcefe3; color: #1e5c3a; }
  .update-row.from-command .who { background: #ede3fc; color: #5b21b6; }
  .update-row.from-note .who { background: #eeece8; color: #6b6a67; }
  .update-row.from-auto .who { background: #e0e7ff; color: #4338ca; }
  .update-row .ud { font-weight: 700; color: #6b6a67; font-size: 11px; margin-right: 6px; }
  .update-row { position: relative; padding-right: 26px; }
  .update-row .ut-edit {
    display: block; width: 100%; margin-top: 3px; color: #262523; border: 1px solid transparent;
    background: transparent; padding: 2px 4px; font-size: inherit; font-family: inherit; border-radius: 5px;
  }
  .update-row .ut-edit:hover { background: rgba(255,255,255,.6); }
  .update-row .ut-edit:focus { outline: none; border-color: #d8d7d2; background: #fff; }
  .update-row .ut-del {
    position: absolute; top: 6px; right: 6px; background: transparent; border: none; color: #c0392b;
    font-size: 15px; font-weight: 700; padding: 0 4px; line-height: 1; opacity: .55; cursor: pointer;
  }
  .update-row .ut-del:hover { opacity: 1; }
  .updates-empty { font-size: 12px; color: #a8a7a3; font-style: italic; padding: 4px 0 10px; }
  .update-add-row { display: flex; gap: 6px; margin-bottom: 8px; }
  .update-add-row input { flex: 1; }
  .update-add-row textarea {
    flex: 1; resize: vertical; min-height: 56px; font-size: 13px; line-height: 1.45;
    font-family: inherit; padding: 9px 11px; border: 1px solid #e2e0dc; border-radius: var(--radius-sm);
    transition: border-color .12s ease, box-shadow .12s ease;
  }
  .update-add-row textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(67,56,202,.12); }
  .update-add-actions { display: flex; flex-wrap: wrap; gap: 6px; }
  /* flex-basis of 140px (instead of plain flex:1) means these two buttons sit side by side when
     there's room, but cleanly drop to their own full-width line instead of getting squeezed
     illegibly thin (or spilling out past the card) once the container gets too narrow — e.g. a
     tighter ticket card in the Present view's agenda grid. */
  .update-add-actions button { flex: 1 1 140px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Small red pill delete button — used for deleting a meeting from its Summary-tab card. */
  .btn-delete-pill {
    background: transparent; border: 1px solid #f0c9c5; color: #c0392b; font-size: 10.5px; font-weight: 700;
    padding: 3px 10px; border-radius: 999px; cursor: pointer; flex-shrink: 0; transition: background .12s ease;
    margin-left: auto;
  }
  .btn-delete-pill:hover { background: #fdedec; }

  .btn-team { border-color: #2e6f4e; color: #1e5c3a; }
  .btn-team:hover { background: #eaf5ee; }
  .btn-command { border-color: #5b21b6; color: #5b21b6; }
  .btn-command:hover { background: #f3ecfc; }
  .updates-hint { font-size: 11px; color: #8a8a86; margin-top: 6px; }

  .updates-cell { max-width: 300px; min-width: 220px; }
  .updates-cell .u-latest { font-size: 10.5px; line-height: 1.35; color: #333; white-space: normal; word-break: break-word; }
  .updates-cell .u-who { font-size: 9.5px; font-weight: 700; text-transform: uppercase; margin-right: 4px; }
  .updates-cell .u-who.team { color: #1e5c3a; }
  .updates-cell .u-who.command { color: #5b21b6; }
  .updates-cell .u-who.auto { color: #4338ca; }
  .updates-cell .u-date { font-size: 11px; color: #8a8a86; margin-top: 2px; }
  .updates-cell .u-none { font-size: 13px; color: #b0afab; font-style: italic; }
  .u-count { display: inline-block; font-size: 10px; font-weight: 700; color: #6b6a67; background: #f0efec; border-radius: 999px; padding: 1px 7px; margin-left: 5px; }

  /* present view */
  .present-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
  .present-meta { font-size: 12px; color: #8a8a86; }
  .partition-badge { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 5px 12px; border-radius: 999px; }
  .partition-badge.escalation { background: #fde9e9; color: #b23b3b; }
  .partition-badge.feedback { background: #eef1f3; color: #2e5c8a; }

  .present-card {
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 20px; margin-bottom: 16px;
    box-shadow: var(--shadow-sm); transition: box-shadow .15s ease;
  }
  .present-card:hover { box-shadow: var(--shadow-md); }

  /* Sub-unit Summary view: one heading per team, colored via --team-color, above that team's cards */
  .subunit-team-section:first-child .subunit-team-heading { margin-top: 0; }
  .subunit-team-heading {
    display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--ink);
    margin: 26px 0 10px; padding-bottom: 6px; border-bottom: 2px solid var(--team-color, var(--border));
  }
  .subunit-team-heading span { color: var(--ink-soft); font-weight: 600; font-size: 12.5px; }
  .present-card .ph {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px;
  }
  .present-card .ph h3 { margin: 0; font-size: 16px; }
  .present-card .ph .recip { font-size: 12px; color: #6b6a67; font-weight: 600; }

  /* Sub-unit Summary cards — a denser, 2-up layout with one line per checklist so a card stays
     short enough to screenshot cleanly straight into a PowerPoint slide. */
  #subunitCards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; align-items: start; }
  .subunit-team-section { grid-column: 1 / -1; }
  .su-card { padding: 14px 16px; margin-bottom: 0; background: transparent; box-shadow: none; border: none; }
  .su-ph { margin-bottom: 8px; }
  .su-ph h3 { font-size: 13px; }
  .su-count { font-size: 11px; color: #8a8a86; font-weight: 700; }
  /* "Event ticket" mood — colored top strip (team color) with status + command, rounded card,
     dashed divider before the description. */
  .su-item {
    background: #fff; border-radius: 12px; overflow: hidden; margin-bottom: 10px;
    box-shadow: 0 6px 16px rgba(20,20,18,.09); transition: transform .15s ease, box-shadow .15s ease;
  }
  .su-item:last-of-type { margin-bottom: 0; }
  .su-item:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(20,20,18,.13); }
  .su-item-top {
    background: var(--su-color, #6C7EF2); color: #fff; font-size: 9.5px; font-weight: 700;
    padding: 6px 10px; letter-spacing: .01em; text-transform: uppercase;
    display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 6px;
  }
  .su-item-body { padding: 9px 11px 10px; }
  .su-item-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
  .su-item-tags .badge { font-size: 8.5px; padding: 1px 6px; }
  .su-title { font-size: 12.5px; font-weight: 800; color: #1f1e1c; margin-bottom: 6px; }
  .su-item-divider { border-top: 1px dashed #e2e0dc; margin: 0 0 6px; }
  .su-desc { font-size: 11px; color: #6b6a67; line-height: 1.4; margin-bottom: 2px; }
  .su-line { font-size: 9px; color: #6b6a67; margin-top: 2px; line-height: 1.3; }
  .su-line .badge { font-size: 8px; padding: 0 4px; margin: 0 2px; }
  .su-count-note { color: #a8a7a3; font-weight: 600; }
  /* Individual sub-task lines under each Next Action summary header */
  .su-sub-line { font-size: 9px; color: #6b6a67; line-height: 1.35; padding: 1px 0 1px 2px; }
  .su-sub-line .mark { display: inline-block; width: 12px; }
  .su-resolved { font-size: 10px !important; color: #a8a7a3 !important; margin: 8px 0 0 !important; }
  @media (max-width: 900px) {
    #subunitCards { grid-template-columns: 1fr; }
  }

  /* Meetings panel — a prominent banner at the top of the Summary tab for logging the regular
     Family Meeting or an adhoc meeting, scheduling it, and pulling tickets straight out of the
     summary below into that meeting's agenda. */
  .meetings-panel {
    background: linear-gradient(135deg, #fff9ec, #fff);
    border: 1px solid #f0dfa8; border-radius: var(--radius-lg); padding: 18px 20px 16px; margin-bottom: 22px;
    box-shadow: var(--shadow-sm);
  }
  .meetings-panel-header { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
  .meetings-panel-header h3 { margin: 0 auto 0 0; font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
  .meetings-list { margin-top: 14px; }

  /* Board View — an alternative to the plain Meetings list, grouping every meeting into a column
     by its Priority (Short/Medium/Long "Urgency Horizon"), most-urgent-first within each column
     (soonest Due Date on top) — a quick "what needs attention, and in what order" view across all
     scheduled meetings, independent of whatever the su* toolbar above happens to be filtered to
     (same "always shows everything" behavior as the stat tiles). Drag a card to a different column
     to change that meeting's Priority. */
  .meetings-board { display: flex; gap: 14px; margin-top: 14px; align-items: flex-start; }
  .board-col { flex: 1; min-width: 0; background: #f7f7f5; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 10px; }
  .board-col-header { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: 4px 6px 10px; }
  .board-col-count { background: #fff; border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 700; color: #6b6a67; }
  .board-col-body { min-height: 60px; display: flex; flex-direction: column; gap: 8px; border-radius: 8px; transition: background .1s ease; }
  .board-col-body.drag-over { background: #eeeafc; outline: 2px dashed var(--accent); outline-offset: -2px; }
  .board-col-empty { font-size: 12px; color: #a8a7a3; font-style: italic; padding: 10px 6px; text-align: center; }
  .board-card {
    background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--su-color, var(--accent));
    border-radius: 10px; padding: 10px 12px; cursor: grab; box-shadow: var(--shadow-sm);
  }
  .board-card.dragging { opacity: .4; }
  .board-card-top { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
  .board-card-title { font-weight: 700; font-size: 13px; margin-bottom: 3px; }
  .board-card-meta { font-size: 11px; color: #6b6a67; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
  .board-card-actions { display: flex; gap: 6px; margin-top: 8px; }
  .board-card-actions button { font-size: 11px; padding: 3px 8px; }
  .meeting-card {
    background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px;
    cursor: pointer; transition: box-shadow .12s ease;
  }
  .meeting-card:hover { box-shadow: var(--shadow-md); }
  .meeting-card:last-child { margin-bottom: 0; }
  .meeting-card-top { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
  .meeting-title { font-size: 13.5px; font-weight: 700; color: #171614; }
  .meeting-dt { font-size: 11.5px; color: #8a8a86; font-weight: 600; }
  .meeting-desc { font-size: 11.5px; color: #6b6a67; line-height: 1.4; margin-top: 8px; }
  .meeting-card-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
  .meeting-card-actions button { font-size: 10.5px; padding: 4px 10px; white-space: nowrap; }
  .meeting-agenda-empty { font-size: 11.5px; color: #a8a7a3; font-style: italic; }
  /* Collapsed-by-default summary line — ticket count + next-action badge + the Show more/less
     toggle — so a meeting card stays short until you deliberately ask to see its full detail. */
  .meeting-card-summary {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; font-size: 11.5px; color: #444;
  }
  .meeting-card-summary .st-toggle { margin-left: auto; padding: 0; }
  /* Full "event ticket" summary cards (same suItemHtml() card used on the Summary tab) for every
     ticket tied to a meeting — so the meeting shows what it contains, and each ticket's status/
     priority/next-action, upfront without opening anything. */
  .meeting-agenda-cards {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-top: 10px;
  }
  .meeting-agenda-card { cursor: pointer; }
  .meeting-agenda-card .su-item { margin-bottom: 0; }
  /* One cluster per Team + Sub-unit inside a meeting's tickets — same idea as the Summary tab's
     own team/sub-unit sectioning, so a meeting spanning several sub-units reads as clearly
     separated groups instead of one undifferentiated grid. */
  .meeting-subunit-group { margin-top: 14px; }
  .meeting-subunit-group:first-of-type { margin-top: 10px; }
  .meeting-subunit-heading {
    display: flex; align-items: center; gap: 6px; margin-bottom: 8px; padding-bottom: 5px; border-bottom: 1px solid var(--border);
  }
  .meeting-subunit-count { font-size: 10.5px; color: #8a8a86; font-weight: 700; }

  /* Checkbox overlay on a summary ticket card while a meeting's "Select Tickets" is active */
  .meeting-select-wrap {
    display: block; position: relative; cursor: pointer; margin-bottom: 10px; border-radius: 12px;
    transition: box-shadow .12s ease;
  }
  .meeting-select-wrap:last-of-type { margin-bottom: 0; }
  .meeting-select-wrap .su-item { margin-bottom: 0; pointer-events: none; }
  .meeting-select-wrap.checked { box-shadow: 0 0 0 2px var(--accent), 0 6px 16px rgba(20,20,18,.09); border-radius: 12px; }
  .meeting-select-cb {
    position: absolute; top: 8px; right: 8px; width: 17px; height: 17px; z-index: 2; cursor: pointer; accent-color: var(--accent);
  }
  .meeting-select-count { font-size: 11.5px; font-weight: 700; color: var(--accent); white-space: nowrap; }

  .present-sub { font-size: 12px; color: #8a8a86; margin-bottom: 12px; }
  .present-item { padding: 10px 0; border-top: 1px solid #f0efec; }
  .present-item:first-of-type { border-top: none; }
  .present-item .row1 { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
  .present-item .proj-title { font-size: 13.5px; font-weight: 700; color: #1f1e1c; margin-bottom: 2px; }
  .present-item .txt { font-size: 13px; color: #444; line-height: 1.4; }
  .present-item .nx { font-size: 12.5px; color: #6b6a67; margin-top: 3px; }
  .present-item .nx b { color: #444; font-weight: 600; }
  .present-empty { font-size: 13px; color: #a8a7a3; font-style: italic; padding: 8px 0; }

  /* CMS (admin) */
  .cms-add-team-row { display: flex; gap: 8px; margin-bottom: 18px; max-width: 480px; }
  .cms-add-team-row input { flex: 1; }
  .cms-add-team-row button { white-space: nowrap; }
  .cms-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; align-items: start; }
  .cms-card {
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px;
    box-shadow: var(--shadow-sm);
  }
  .cms-card h3 { margin: 0 0 2px; font-size: 15px; }
  .cms-team-head { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
  /* Every team's color comes from its own --team-color custom property (set inline per card),
     so newly added teams get a distinct dot/name color with no extra CSS needed. */
  .cms-team-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background: var(--team-color, #999); }
  .cms-team-name {
    flex: 1; border: 1px solid transparent; background: transparent; padding: 3px 6px; margin: -3px -6px;
    font-size: 15px; font-weight: 800; color: var(--ink); border-radius: 6px; transition: background .12s ease, border-color .12s ease;
  }
  .cms-team-name:hover { background: #f5f4f2; }
  .cms-team-name:focus { outline: none; background: #fbfbfa; border-color: #d8d7d2; }
  .cms-remove-team-btn {
    background: transparent; border: none; color: #b0afab; font-size: 16px; font-weight: 700;
    padding: 0 2px; flex-shrink: 0; line-height: 1; border-radius: 5px;
  }
  .cms-remove-team-btn:hover { color: #c0392b; background: #fdedec; }
  .cms-card .cms-sub { font-size: 11.5px; color: #8a8a86; margin-bottom: 12px; }
  .cms-unit-list { margin-bottom: 10px; }
  .cms-unit-row {
    display: flex; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 1px solid #f0efec;
  }
  .cms-unit-row:last-child { border-bottom: none; }
  .cms-unit-row input[type=text] {
    flex: 1; border: 1px solid transparent; background: transparent; padding: 4px 6px; font-size: 13px;
  }
  .cms-unit-row input[type=text]:focus { border-color: #d8d7d2; background: #fbfbfa; }
  .cms-unit-row .cms-del {
    background: transparent; border: none; color: #c0392b; font-size: 15px; font-weight: 700; padding: 0 4px;
  }
  .cms-unit-empty { font-size: 12px; color: #a8a7a3; font-style: italic; padding: 4px 0 10px; }
  .cms-add-row { display: flex; gap: 6px; }
  .cms-add-row input[type=text] { flex: 1; }
  .cms-add-row button { white-space: nowrap; }
  .cms-add-row input[type=color] {
    width: 26px; height: 26px; padding: 2px; border: 1px solid #e2e0dc; border-radius: 7px;
    flex-shrink: 0; cursor: pointer; background: #fff;
  }

  /* CMS: Sub-task Tags (Next Action) */
  .cms-tags-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
  .cms-tag-group {
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px;
    box-shadow: var(--shadow-sm);
  }
  .cms-tag-group h3 { margin: 0 0 12px; font-size: 15px; }
  .cms-tag-def-row { padding: 4px 0; gap: 5px; }
  .cms-tag-def-row input[type=text] { font-size: 12px; padding: 3px 5px; }
  .cms-tag-def-row input[type=color] {
    width: 16px; height: 16px; padding: 0; border: none; border-radius: 50%; flex-shrink: 0; cursor: pointer;
    overflow: hidden;
  }
  .cms-tag-def-row input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
  .cms-tag-def-row input[type=color]::-webkit-color-swatch { border: none; border-radius: 50%; }

  @media print {
    .tabs, .toolbar, #logView, .present-toolbar button, .btn-ghost, .btn-primary, .sidebar { display: none !important; }
    body { background: #fff; }
    .present-card { break-inside: avoid; border: 1px solid #ccc; }
    .view { display: none !important; }
    .view.active { display: block !important; }
  }