* { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
      background: #f3f4f6;
      color: #1f2937;
      min-height: 100vh;
    }

    /* ── Header ─────────────────────────────────────────── */
    .notif-bell { position: relative; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
    .notif-bell:hover { background: rgba(255,255,255,0.15); }
    .notif-bell svg { width: 18px; height: 18px; fill: rgba(255,255,255,0.8); vertical-align: middle; }
    .notif-badge { position: absolute; top: 0; right: 2px; background: #ef4444; color: white; font-size: 0.6rem; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; line-height: 1; }
    .notif-dropdown { position: fixed; bottom: 60px; left: var(--sidebar-width); width: 420px; max-height: 480px; overflow-y: auto; background-color: #ffffff; opacity: 1; border: 1px solid #c9cdd3; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,0.3); z-index: 10001; display: none; }
    .notif-dropdown.open { display: block; }
    .sidebar.collapsed .notif-dropdown { left: var(--sidebar-collapsed-width); }
    .notif-header { padding: 12px 16px; border-bottom: 1px solid #f3f4f6; display: flex; justify-content: space-between; align-items: center; }
    .notif-header h3 { margin: 0; font-size: 0.85rem; color: #1f2937; }
    .notif-mark-all { font-size: 0.7rem; color: var(--bs-secondary); cursor: pointer; background: none; border: none; }
    .notif-mark-all:hover { text-decoration: underline; }
    .notif-item { padding: 10px 16px; border-bottom: 1px solid #f9fafb; cursor: pointer; display: flex; gap: 10px; align-items: flex-start; transition: background 0.15s; }
    .notif-item:hover { background: #f0f4ff; }
    .notif-item.unread { background: #f0f7ff; }
    .notif-item.unread:hover { background: #e0efff; }
    .notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bs-accent); flex-shrink: 0; margin-top: 5px; }
    .notif-dot.read { background: transparent; }
    .notif-body { flex: 1; min-width: 0; }
    .notif-project { font-size: 0.78rem; font-weight: 700; color: var(--bs-primary); line-height: 1.3; }
    .notif-detail { font-size: 0.76rem; color: #374151; margin-top: 2px; line-height: 1.3; }
    .notif-meta { font-size: 0.65rem; color: #9ca3af; margin-top: 3px; }
    .notif-title { font-size: 0.8rem; font-weight: 600; color: #1f2937; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .notif-desc { font-size: 0.72rem; color: #6b7280; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .notif-time { font-size: 0.65rem; color: #9ca3af; margin-top: 3px; }
    .notif-empty { padding: 32px 16px; text-align: center; color: #9ca3af; font-size: 0.8rem; }
    .notif-dismiss { background: none; border: none; color: #9ca3af; font-size: 0.75rem; cursor: pointer; padding: 2px 6px; border-radius: 4px; flex-shrink: 0; align-self: center; }
    .notif-dismiss:hover { background: rgba(255,255,255,0.12); color: #fff; }
    .notif-settings-link { display: block; padding: 10px 16px; text-align: center; font-size: 0.72rem; color: var(--bs-secondary); border-top: 1px solid #f3f4f6; cursor: pointer; }
    .notif-settings-link:hover { background: #f0f4ff; }
    .notif-toast { position:fixed;bottom:16px;right:16px;z-index:10000;background:var(--bs-primary);color:#fff;padding:12px 20px;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,0.3);font-size:0.82rem;max-width:380px;cursor:pointer;animation:notifSlideIn 0.3s ease-out;display:flex;align-items:flex-start;gap:10px }
    .notif-toast-body { flex:1;min-width:0 }
    .notif-toast-title { font-weight:700;margin-bottom:2px }
    .notif-toast-desc { font-size:0.75rem;opacity:0.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
    .notif-toast-close { background:none;border:none;color:rgba(255,255,255,0.6);font-size:1rem;cursor:pointer;padding:0 4px;flex-shrink:0 }
    .notif-toast-close:hover { color:#fff }
    @keyframes notifSlideIn { from { transform:translateX(100%);opacity:0 } to { transform:translateX(0);opacity:1 } }
    @keyframes notifSlideOut { from { transform:translateX(0);opacity:1 } to { transform:translateX(100%);opacity:0 } }

    /* ── Design Tokens ── */
    :root {
      /* Brand palette */
      --bs-primary: #23486A;
      --bs-primary-hover: #3B6790;
      --bs-primary-light: #eef3f9;
      --bs-accent: #EFB036;
      --bs-accent-hover: #D9960B;
      --bs-accent-light: #fef6e0;
      --bs-secondary: #3B6790;
      --bs-tertiary: #4C7B8B;

      /* Focus & interaction */
      --bs-focus-ring: rgba(239, 176, 54, 0.25);
      --bs-focus-border: #EFB036;

      /* Sidebar */
      --sidebar-width: 240px;
      --sidebar-collapsed-width: 56px;
      --sidebar-bg: #152d4a;
      --sidebar-text: rgba(255,255,255,0.55);
      --sidebar-text-hover: rgba(255,255,255,0.85);
      --sidebar-text-active: #ffffff;
      --sidebar-accent: #EFB036;
      --sidebar-divider: rgba(255,255,255,0.1);
      --topbar-height: 0px;
    }

    .app-layout {
      display: flex;
      height: 100vh;
      overflow: hidden;
    }

    .sidebar {
      width: var(--sidebar-width);
      min-width: var(--sidebar-width);
      background: var(--sidebar-bg);
      display: flex;
      flex-direction: column;
      height: 100vh;
      overflow-y: auto;
      overflow-x: hidden;
      transition: width 0.2s ease, min-width 0.2s ease;
      z-index: 100;
    }

    .sidebar.collapsed {
      width: var(--sidebar-collapsed-width);
      min-width: var(--sidebar-collapsed-width);
    }

    .app-content {
      flex: 1;
      overflow-y: auto;
      height: 100vh;
    }

    .sidebar-header {
      display: flex;
      align-items: center;
      padding: 12px 16px;
      gap: 10px;
      border-bottom: 1px solid var(--sidebar-divider);
      min-height: 48px;
    }

    .sidebar-icon { width:28px;height:28px;border-radius:6px;flex-shrink:0;cursor:pointer;transition:transform 0.15s }
    .sidebar-icon:hover { transform:scale(1.1) }
    .sidebar-header .logo-text {
      font-size: 0.9rem;
      font-weight: 700;
      color: var(--sidebar-text-active);
      letter-spacing: 0.5px;
      white-space: nowrap;
      overflow: hidden;
    }

    .sidebar.collapsed .logo-text { display: none; }

    .sidebar-toggle {
      background: none;
      border: none;
      color: var(--sidebar-text);
      cursor: pointer;
      padding: 4px;
      font-size: 1.2rem;
      flex-shrink: 0;
    }
    .sidebar-toggle:hover { color: var(--sidebar-text-active); }

    .nav-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 16px;
      color: var(--sidebar-text);
      cursor: pointer;
      font-size: 0.84rem;
      font-weight: 500;
      font-family: inherit;
      border: none;
      background: none;
      width: 100%;
      text-align: left;
      white-space: nowrap;
      transition: color 0.12s, background 0.12s;
      position: relative;
    }

    .nav-item:hover {
      color: var(--sidebar-text-hover);
      background: rgba(255,255,255,0.05);
    }

    .nav-item.active {
      color: var(--sidebar-text-active);
      background: rgba(255,255,255,0.1);
      border-right: 3px solid var(--sidebar-accent);
    }

    .nav-item .nav-icon {
      width: 20px;
      text-align: center;
      flex-shrink: 0;
      font-size: 1rem;
    }

    .nav-item .nav-label {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .sidebar.collapsed .nav-label { display: none; }
    .sidebar.collapsed .nav-item { justify-content: center; padding: 10px 0; }

    .nav-section {
      padding: 20px 16px 6px;
      font-size: 0.65rem;
      font-weight: 700;
      color: rgba(255,255,255,0.5);
      text-transform: uppercase;
      letter-spacing: 1.5px;
      white-space: nowrap;
      overflow: visible;
      line-height: 1.2;
      flex-shrink: 0;
    }

    .sidebar.collapsed .nav-section {
      padding: 8px 0;
      font-size: 0;
      border-top: 1px solid var(--sidebar-divider);
      margin: 4px 8px;
    }

    .sidebar.collapsed .nav-item[data-tooltip]:hover::after {
      content: attr(data-tooltip);
      position: absolute;
      left: calc(var(--sidebar-collapsed-width) + 4px);
      top: 50%;
      transform: translateY(-50%);
      background: #1e293b;
      color: white;
      padding: 4px 10px;
      border-radius: 4px;
      font-size: 0.78rem;
      white-space: nowrap;
      z-index: 200;
      pointer-events: none;
      box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    }

    .sidebar-user {
      margin-top: auto;
      border-top: 1px solid var(--sidebar-divider);
      padding: 10px 16px;
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      position: relative;
    }

    .sidebar-user:hover { background: rgba(255,255,255,0.05); }

    .sidebar-user .user-avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--sidebar-accent);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.75rem;
      font-weight: 600;
      flex-shrink: 0;
    }

    .sidebar-user .user-name {
      color: var(--sidebar-text);
      font-size: 0.8rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .sidebar.collapsed .user-name { display: none; }
    .sidebar.collapsed .sidebar-user { justify-content: center; padding: 10px 0; }

    .user-dropdown {
      position: fixed;
      background: #1e293b;
      border-radius: 6px;
      padding: 4px 0;
      min-width: 160px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.4);
      z-index: 300;
      display: none;
    }

    .user-dropdown.open { display: block; }

    .user-dropdown button {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      padding: 8px 14px;
      background: none;
      border: none;
      color: rgba(255,255,255,0.8);
      font-size: 0.82rem;
      cursor: pointer;
      font-family: inherit;
    }

    .user-dropdown button:hover {
      background: rgba(255,255,255,0.1);
      color: white;
    }

    .mobile-topbar {
      display: none;
      background: var(--sidebar-bg);
      height: 48px;
      align-items: center;
      padding: 0 14px;
      gap: 12px;
      position: sticky;
      top: 0;
      z-index: 90;
    }

    .mobile-icon {
      width: 28px;
      height: 28px;
      border-radius: 6px;
      cursor: pointer;
    }

    .mobile-topbar .page-title {
      color: var(--sidebar-text-active);
      font-size: 0.9rem;
      font-weight: 600;
    }

    /* ── App refresh button (sidebar header + mobile topbar) ── */
    .app-refresh-btn-header { margin-left: auto; }
    .sidebar.collapsed .app-refresh-btn-header { display: none; }

    .app-refresh-btn {
      background: transparent;
      border: 1px solid rgba(255,255,255,0.18);
      color: rgba(255,255,255,0.7);
      width: 28px; height: 28px;
      border-radius: 6px;
      font-size: 1rem;
      line-height: 1;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: background 0.1s, color 0.1s, border-color 0.1s;
      flex-shrink: 0;
    }
    .app-refresh-btn:hover {
      background: rgba(255,255,255,0.1);
      color: #fff;
      border-color: rgba(255,255,255,0.35);
    }
    .app-refresh-btn:focus-visible {
      outline: none;
      box-shadow: 0 0 0 2px var(--bs-focus-ring);
      border-color: var(--bs-accent);
    }
    .app-refresh-btn.spinning {
      animation: app-refresh-spin 0.6s linear infinite;
      pointer-events: none;
    }
    .app-refresh-btn-topbar { margin-left: auto; }
    @keyframes app-refresh-spin { to { transform: rotate(360deg); } }

    .sidebar-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.5);
      z-index: 99;
    }

    .sidebar-overlay.open { display: block; }

    @media (max-width: 768px) {
      .mobile-topbar { display: flex; }
      :root { --topbar-height: 48px; }

      .sidebar {
        position: fixed;
        left: calc(-1 * var(--sidebar-width) - 20px);
        top: 0;
        width: var(--sidebar-width) !important;
        min-width: var(--sidebar-width) !important;
        transition: left 0.25s ease;
        z-index: 200;
      }

      .sidebar.mobile-open { left: 0; }
      .sidebar.collapsed { width: var(--sidebar-width) !important; }

      .app-content {
        width: 100%;
        height: calc(100vh - var(--topbar-height));
      }
    }

    /* ── Controls bar ────────────────────────────────────── */
    .controls {
      background: white;
      border-bottom: 1px solid #e5e7eb;
      padding: 12px 24px;
      display: flex; gap: 10px;
      flex-wrap: wrap; align-items: center;
    }
    .search-wrap { flex: 1 1 260px; position: relative; }
    .search-wrap svg {
      position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
      color: #9ca3af; pointer-events: none;
    }
    .controls input[type="text"] {
      width: 100%; padding: 8px 12px 8px 34px;
      border: 1px solid #d1d5db; border-radius: 6px;
      font-size: 0.875rem; outline: none;
      transition: border-color 0.15s;
    }
    .controls input[type="text"]:focus { border-color: var(--bs-accent); }
    .controls select {
      padding: 8px 10px; border: 1px solid #d1d5db;
      border-radius: 6px; font-size: 0.875rem;
      background: white; outline: none; cursor: pointer; color: #374151;
    }
    .controls select:focus { border-color: var(--bs-accent); }
    /* Search clear (×) button — shown when input has content */
    .search-wrap input { padding-right: 26px; }
    .search-clear {
      position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
      background: none; border: none; padding: 2px 4px; cursor: pointer;
      color: #9ca3af; font-size: 13px; line-height: 1; display: none;
      border-radius: 50%;
    }
    .search-clear:hover { color: #374151; background: #f3f4f6; }
    input:not(:placeholder-shown) ~ .search-clear { display: block; }

    /* ── Main content area ───────────────────────────────── */
    .main {
      padding: 18px 24px;
      max-width: 1280px;
      margin: 0 auto;
    }
    .status-bar {
      font-size: 0.78rem; color: #6b7280; margin-bottom: 10px;
    }

    /* ── Activity table ──────────────────────────────────── */
    .table-wrap {
      background: white; border-radius: 8px; overflow: hidden;
      box-shadow: 0 1px 3px rgba(0,0,0,0.07);
    }
    table { width: 100%; border-collapse: collapse; }
    thead th {
      text-align: left; padding: 10px 14px;
      background: #f9fafb; border-bottom: 2px solid #e5e7eb;
      font-size: 0.7rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.07em;
      color: #6b7280; white-space: nowrap;
    }
    tbody td {
      padding: 11px 14px; border-bottom: 1px solid #f3f4f6;
      font-size: 0.875rem; vertical-align: top;
    }
    tbody tr:last-child td { border-bottom: none; }
    tbody tr:hover td { background: #f8faff; cursor: pointer; }
    tbody tr.expanded td { background: #eef4ff; }

    .date-cell { white-space: nowrap; color: #6b7280; font-size: 0.8rem; min-width: 90px; }
    .job-cell  { min-width: 80px; }
    .job-num {
      font-family: "Consolas", "Courier New", monospace;
      font-weight: 700; font-size: 0.825rem; color: var(--bs-primary);
      cursor: pointer; text-decoration: none;
    }
    .job-num:hover { text-decoration: underline; }
    .proj-name {
      font-size: 0.72rem; color: #6b7280; margin-top: 2px;
      max-width: 160px; white-space: nowrap;
      overflow: hidden; text-overflow: ellipsis;
    }
    .type-cell { min-width: 110px; }
    .tag {
      display: inline-block; padding: 2px 9px;
      border-radius: 9999px; font-size: 0.7rem;
      font-weight: 600; white-space: nowrap;
    }
    .tag-meeting,
    .tag-call,
    .tag-decision,
    .tag-field,
    .tag-design,
    .tag-note     { background: var(--bs-zebra-odd); color: var(--bs-ink-muted); }
    .attachment-badge {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 3px 10px; margin-top: 4px;
      background: var(--bs-accent-light); color: var(--bs-secondary); border: 1px solid #e0d5b8;
      border-radius: 6px; font-size: 0.72rem; font-weight: 600;
      text-decoration: none; white-space: nowrap;
      transition: background 0.15s, border-color 0.15s;
    }
    .attachment-badge:hover { background: #dbeafe; border-color: #93c5fd; }
    .desc-cell { max-width: 520px; }
    .desc-text {
      color: #374151; line-height: 1.5;
      white-space: pre-wrap; word-break: break-word;
    }
    .desc-text.clamped {
      display: -webkit-box;
      -webkit-line-clamp: 2; -webkit-box-orient: vertical;
      overflow: hidden; white-space: normal;
    }
    .expand-hint { font-size: 0.7rem; color: var(--bs-primary); margin-top: 3px; }
    .by-cell { font-size: 0.78rem; color: #6b7280; white-space: nowrap; min-width: 80px; }
    .act-del-btn { background:none; border:none; cursor:pointer; font-size:0.85rem; opacity:0.3; padding:2px 4px; transition:opacity 0.15s; }
    .act-del-btn:hover { opacity:1; }

    .load-more-btn {
      display: block; width: 100%; margin-top: 14px; padding: 11px;
      background: white; border: 1px solid #d1d5db; border-radius: 6px;
      cursor: pointer; font-size: 0.875rem; color: #374151;
      font-family: inherit; transition: background 0.12s;
    }
    .load-more-btn:hover { background: #f3f4f6; }
    .pm-cell { min-width:120px;padding-top:8px;padding-bottom:8px }
    .act-del-cell { text-align:center;padding:0 4px }

    /* Activity log — scoped so the rules don't leak into email-log (which also uses .table-wrap). */
    /* Zebra striping at ≥768px per UI standards v8.92.10+ */
    @media (min-width:768px) {
      #view-activity .table-wrap tbody tr { background:#eef3f9 }
      #view-activity .table-wrap tbody tr:nth-child(even) { background:#dce8f5 }
      #view-activity .table-wrap tbody tr:hover td { background:#c8ddf0 }
      #view-activity .table-wrap tbody tr.expanded td { background:#cfdcec }
    }
    /* Tablet (iPad portrait/landscape, phone landscape): tighten typography + padding */
    @media (min-width:641px) and (max-width:1100px) {
      #view-activity .controls { padding:8px 16px;gap:6px }
      #view-activity .main { padding:14px 16px }
      #view-activity .table-wrap thead th { font-size:0.62rem;padding:7px 10px }
      #view-activity .table-wrap tbody td { padding:8px 10px;font-size:0.78rem }
      #view-activity .date-cell { font-size:0.72rem;min-width:78px }
      #view-activity .job-num { font-size:0.78rem }
      #view-activity .proj-name { font-size:0.68rem;max-width:140px }
      #view-activity .tag { font-size:0.64rem;padding:1px 8px }
      #view-activity .by-cell { font-size:0.72rem }
    }
    /* Phone (≤640px): table → card grid per entry. Override .hide-sm so the cells
       we want in the card (Type, PM, Logged By) can render in stacked positions. */
    @media (max-width:640px) {
      #view-activity .controls { padding:10px 14px;gap:6px;flex-wrap:wrap }
      #view-activity .controls select { font-size:16px;padding:8px 10px;min-height:36px }   /* iOS zoom kill + touch target */
      #view-activity .controls .search-wrap { flex:1 1 100% }
      #view-activity .main { padding:12px 14px }
      #view-activity .table-wrap { background:transparent;box-shadow:none;border-radius:0;overflow:visible }
      #view-activity .table-wrap thead { display:none }
      #view-activity .table-wrap table, #view-activity .table-wrap tbody { display:block;width:100% }
      #view-activity .table-wrap tbody tr {
        display:grid;
        grid-template-columns:1fr auto;
        gap:4px 12px;
        background:#fff;
        border:1px solid #e5e7eb;
        border-radius:10px;
        padding:10px 12px;
        margin-bottom:8px;
        align-items:center;
      }
      #view-activity .table-wrap tbody tr:hover td { background:transparent }
      #view-activity .table-wrap tbody td { display:block;padding:0;border:none;font-size:0.82rem }
      /* Surface hidden cells so they can take their slot in the card */
      #view-activity .table-wrap td.hide-sm { display:block !important }
      /* Slots — col order in HTML: 1=Date 2=Job 3=Type 4=Desc 5=PM 6=LoggedBy 7=Delete(opt) */
      #view-activity .table-wrap td.date-cell { grid-column:1;grid-row:1;font-size:0.72rem;color:#6b7280 }
      #view-activity .table-wrap td.type-cell { grid-column:2;grid-row:1;text-align:right;min-width:0 }
      #view-activity .table-wrap td.job-cell  { grid-column:1 / -1;grid-row:2 }
      #view-activity .table-wrap td.job-cell .proj-name { max-width:none;white-space:normal;overflow:visible }
      #view-activity .table-wrap td.desc-cell { grid-column:1 / -1;grid-row:3;max-width:none }
      #view-activity .table-wrap td.pm-cell {
        grid-column:1;grid-row:4;
        padding-top:6px;border-top:1px dashed #f3f4f6;min-width:0;
      }
      #view-activity .table-wrap td.by-cell {
        grid-column:2;grid-row:4;
        padding-top:6px;border-top:1px dashed #f3f4f6;
        text-align:right;min-width:0;font-size:0.72rem;
      }
      #view-activity .table-wrap td.by-cell:empty { display:none }
      #view-activity .table-wrap td.act-del-cell { display:none !important }   /* delete via long-press elsewhere — drop on phone */
      #view-activity .load-more-btn { padding:14px;font-size:0.85rem }
    }

    /* ── Projects grid ───────────────────────────────────── */
    .proj-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
      gap: 14px;
    }
    .proj-card {
      background: white; border-radius: 10px; padding: 16px 18px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.07);
      cursor: pointer; transition: box-shadow 0.15s, transform 0.1s;
      border: 1px solid #e5e7eb;
    }
    .proj-card:hover { box-shadow: 0 4px 14px rgba(35,72,106,0.14); transform: translateY(-1px); }
    .card-job  { font-family: monospace; font-weight: 700; font-size: 0.825rem; color: var(--bs-primary); margin-bottom: 3px; }
    .card-name { font-size: 0.95rem; font-weight: 600; color: #111827; line-height: 1.3; margin-bottom: 5px; }
    .card-pm   { font-size: 0.75rem; color: #6b7280; margin-bottom: 2px; }
    .card-client { font-size: 0.7rem; color: #9ca3af; margin-bottom: 10px; font-style: italic; }
    .card-progress-label {
      display: flex; justify-content: space-between;
      font-size: 0.75rem; color: #6b7280; margin-bottom: 4px;
    }
    .progress-bar-bg  { background: #e5e7eb; border-radius: 999px; height: 6px; overflow: hidden; }
    .progress-bar-fill { background: var(--bs-primary); height: 100%; border-radius: 999px; }
    .card-footer {
      margin-top: 10px; display: flex; gap: 10px; flex-wrap: wrap;
      font-size: 0.7rem; color: #9ca3af;
    }
    .no-dv { font-size: 0.68rem; color: #d1d5db; font-style: italic; }

    .card-goals { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
    .goal-pill {
      font-size: 0.68rem; padding: 2px 8px; border-radius: 9999px;
      color: #1f2937; font-weight: 500; position: relative; overflow: hidden;
      white-space: nowrap; border: 2px solid transparent;
    }
    .goal-pill-fill {
      position: absolute; left: 0; top: 0; bottom: 0;
      background: rgba(255,255,255,0.45); pointer-events: none;
    }
    .goal-pill.status-on-track { border-color: #107C10; color: #0a0a0a; font-weight: 600; }
    .goal-pill.status-behind { border-color: #F0C040; color: #0a0a0a; font-weight: 600; }
    .goal-pill.status-at-risk { border-color: #E07070; color: #0a0a0a; font-weight: 600; }
    .goal-pill.status-not-started { border-color: transparent; opacity: 0.6; }
    .goal-pill.closed { text-decoration: line-through; opacity: 0.4; border-color: transparent; }

    /* ── LIST VIEW ── */
    .proj-list { display: flex; flex-direction: column; gap: 2px; overflow-x: auto; }
    .proj-list-header {
      display: flex; align-items: center; padding: 6px 12px;
      position: sticky; top: 0; z-index: 5;
      background: #fff; border-bottom: 1px solid #e5e7eb; color: var(--bs-primary);
      font-size: 0.72rem; font-weight: 600;
      text-transform: uppercase;
      margin-bottom: 2px;
      min-width: 1100px;
    }
    .proj-list-row {
      display: flex; align-items: center;
      padding: 7px 12px;
      border-radius: 5px;
      cursor: pointer; transition: background 0.1s;
      overflow: hidden;
      background: #eef3f9; gap: 0;
      min-width: 1100px;
    }
    .proj-list-row:nth-child(even) { background: #dce8f5; }
    .proj-list-row:hover { background: #c8ddf0; }
    .pl-cell { padding: 0 5px; font-size: 0.77rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; flex-shrink: 0; }
    .pl-job   { width: 72px; font-family: monospace; font-weight: 700; color: var(--bs-primary); font-size: 0.74rem; }
    .pl-name  { width: 260px; font-weight: 600; color: #111827; font-size: 0.81rem; }
    .pl-status { width: 140px; }
    .pl-city-num { width: 120px; }
    .pl-date  { width: 80px; color: #6b7280; font-size: 0.73rem; }
    .pl-client { width: 160px; color: #6b7280; font-style: italic; font-size: 0.73rem; }
    .pl-sp    { width: 52px; text-align: center; flex-shrink: 0; padding: 0; }
    .pl-pm    { width: 80px; color: #6b7280; }
    .pl-city  { width: 90px; color: #6b7280; }
    .pl-planner  { width: 110px; color: #6b7280; }
    .pl-engineer { width: 110px; color: #6b7280; }
    .pl-goals { flex: 1; min-width: 0; padding: 0 5px; display: flex; flex-wrap: nowrap; gap: 3px; align-items: center; overflow: hidden; }
    #view-projects.list-mode .main { max-width: none; }
    .pl-city-link { color: var(--bs-primary); text-decoration: none; font-size: 0.72rem; font-weight: 600; font-family: monospace; }
    .pl-city-link:hover { text-decoration: underline; }
    .pl-sp-link { color: #9ca3af; text-decoration: none; font-size: 0.9rem; line-height: 1; }
    .pl-sp-link:hover { color: var(--bs-primary); }
    .proj-view-toggle { display: flex; gap: 2px; }
    .proj-view-btn {
      background: #f3f4f6; border: 1px solid #d1d5db;
      color: #6b7280; font-size: 0.8rem; padding: 4px 9px; border-radius: 5px;
      cursor: pointer; transition: background 0.1s; line-height: 1;
    }
    .proj-view-btn.active { background: var(--bs-primary); color: #fff; border-color: var(--bs-primary); }
    .task-edit-row {
      display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
      padding: 4px 0 8px 22px; border-bottom: 1px solid #f3f4f6;
    }
    .task-edit-row select, .task-edit-row input {
      font-size: 0.72rem; padding: 3px 6px; border: 1px solid #d1d5db;
      border-radius: 4px; font-family: inherit;
    }
    .task-edit-row select { background: white; cursor: pointer; }
    .task-edit-row input[type="date"] { width: 120px; }
    .task-edit-row input[type="number"] { width: 60px; }
    .task-edit-label { font-size: 0.65rem; color: #9ca3af; min-width: 45px; }
    .task-save-btn {
      font-size: 0.68rem; padding: 3px 10px; background: var(--bs-primary); color: white;
      border: none; border-radius: 4px; cursor: pointer; font-family: inherit;
    }
    .task-save-btn:hover { background: var(--bs-primary-hover); }

    /* ── Drawer ──────────────────────────────────────────── */
    .drawer-overlay {
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.4);
      z-index: 200; opacity: 0; pointer-events: none;
      transition: opacity 0.25s;
    }
    .drawer-overlay.open { opacity: 1; pointer-events: all; }

    .drawer {
      position: fixed; top: 0; right: 0;
      width: min(780px, 100vw); height: 100vh;
      background: white; z-index: 300;
      display: flex; flex-direction: column;
      box-shadow: -8px 0 32px rgba(0,0,0,0.15);
      transform: translateX(100%);
      transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .drawer.open { transform: translateX(0); }

    .drawer-header {
      background: var(--bs-primary); color: white;
      padding: 16px 20px; flex-shrink: 0;
      display: flex; align-items: flex-start;
      justify-content: space-between; gap: 12px;
    }
    .dh-job   { font-family: monospace; font-size: 0.85rem; opacity: 0.7; font-weight: 700; margin-bottom: 2px; }
    .dh-name  { font-size: 1.05rem; font-weight: 600; line-height: 1.3; }
    .dh-pm    { font-size: 0.75rem; opacity: 0.6; margin-top: 4px; }
    .drawer-close {
      background: rgba(255,255,255,0.15); border: none; color: white;
      width: 28px; height: 28px; border-radius: 5px;
      font-size: 0.9rem; cursor: pointer; flex-shrink: 0;
      font-family: inherit; transition: background 0.12s; margin-top: 2px;
    }
    .drawer-close:hover { background: rgba(255,255,255,0.25); }

    /* Drawer hero band — calculated totals/counts for the rows below. */
    .drawer-hero {
      flex-shrink: 0;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 14px;
      padding: 12px 20px;
      background: #f8fafc;
      border-bottom: 1px solid #e5e7eb;
    }
    .drawer-hero:empty { display: none; }
    .drawer-hero-tile { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .drawer-hero-label {
      font-size: 0.6rem; font-weight: 700;
      letter-spacing: 0.08em; text-transform: uppercase;
      color: #6b7280;
    }
    .drawer-hero-value {
      font-size: 1.3rem; font-weight: 800;
      font-family: ui-monospace, monospace;
      color: #111827; line-height: 1.1;
      font-variant-numeric: tabular-nums;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .drawer-hero-value.drawer-hero-text {
      font-family: inherit; font-size: 1.05rem;
      letter-spacing: 0.02em; font-weight: 700;
    }
    .drawer-hero-sub { font-size: 0.7rem; color: #6b7280; margin-top: 1px; }
    @media (max-width: 600px) {
      .drawer-hero { padding: 10px 14px; gap: 10px; }
      .drawer-hero-value { font-size: 1.1rem; }
    }

    .drawer-body { flex: 1; overflow-y: auto; padding: 20px; }
    .fin-drawer-controls { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid #e5e7eb }
    .fin-drawer-filter-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap }
    .fin-drawer-filter-row .fin-filter-label { min-width:42px }
    .fin-drawer-pm-bar { display:flex; gap:4px; flex-wrap:wrap }
    .drawer-body .fin-table { font-size:0.72rem; width:100% }
    .drawer-body .fin-table th, .drawer-body .fin-table td { padding:5px 6px; white-space:nowrap }
    .drawer-body .fin-table td:nth-child(3) { white-space:normal; max-width:220px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical }

    /* Drawer sections */
    .d-sec       { margin-bottom: 24px; }
    .d-sec-title {
      font-size: 0.7rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.07em;
      color: #9ca3af; margin-bottom: 10px;
      padding-bottom: 6px; border-bottom: 1px solid #f3f4f6;
    }

    /* Progress in drawer */
    .d-prog-row { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
    .d-prog-bg  { flex: 1; background: #e5e7eb; border-radius: 999px; height: 8px; overflow: hidden; }
    .d-prog-fill { background: var(--bs-primary); height: 100%; border-radius: 999px; }
    .d-prog-pct { font-size: 0.9rem; font-weight: 700; color: var(--bs-primary); min-width: 38px; text-align: right; }
    .d-dates    { font-size: 0.73rem; color: #9ca3af; margin-top: 3px; }

    /* Goal items */
    .goal-item  { border: 1px solid #e5e7eb; border-radius: 8px; margin-bottom: 8px; overflow: hidden; }
    .goal-head  {
      display: flex; align-items: center; gap: 9px;
      padding: 10px 14px; cursor: pointer;
      background: #fafafa; transition: background 0.1s;
      user-select: none;
    }
    .goal-head:hover { background: #f0f4ff; }
    .goal-dot   { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
    .goal-name  { font-size: 0.875rem; font-weight: 600; color: #111827; flex: 1; }
    .goal-due   { font-size: 0.7rem; color: #9ca3af; white-space: nowrap; }
    .goal-arrow { font-size: 0.75rem; color: #9ca3af; transition: transform 0.15s; }
    .goal-arrow.open { transform: rotate(90deg); }
    .goal-tasks { display: none; padding: 4px 14px 10px; }
    .goal-tasks.open { display: block; }

    .task-row {
      display: flex; align-items: flex-start; gap: 8px;
      padding: 7px 0; border-bottom: 1px solid #f9fafb;
      font-size: 0.8rem;
    }
    .task-row:last-child { border-bottom: none; }
    .task-box {
      width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px;
      border: 1.5px solid #d1d5db; border-radius: 3px;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.6rem;
    }
    .task-box.done { background: var(--bs-primary); border-color: var(--bs-primary); color: white; }
    .task-subj { flex: 1; color: #374151; line-height: 1.4; }
    .task-due  { font-size: 0.68rem; color: #9ca3af; white-space: nowrap; margin-left: auto; }
    .task-assignee {
      font-size: 0.68rem; color: #1f2937; background: #e8f0fe;
      padding: 1px 7px; border-radius: 9999px; white-space: nowrap;
      flex-shrink: 0; font-weight: 500;
    }
    .task-unassigned { color: #9ca3af; font-style: italic; font-size: 0.68rem; flex-shrink: 0; cursor: pointer; }
    /* Assign pill picker */
    .assign-picker { position: relative; }
    .assign-pills {
      display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
      min-height: 28px; padding: 3px 6px;
      border: 1px solid #d1d5db; border-radius: 6px;
      background: white; cursor: pointer; min-width: 130px;
    }
    .assign-pills:hover { border-color: #9ca3af; }
    .assign-caret { font-size: 0.65rem; color: #9ca3af; padding: 0 2px; pointer-events: none; }
    .assign-dropdown {
      position: absolute; top: calc(100% + 3px); left: 0; z-index: 999;
      background: white; border: 1px solid #d1d5db; border-radius: 6px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.13);
      min-width: 185px; max-height: 220px; overflow-y: auto;
    }
    .assign-option {
      display: flex; align-items: center; gap: 8px;
      padding: 8px 12px; cursor: pointer; font-size: 0.85rem;
    }
    .assign-option:hover { background: #f3f4f6; }
    .assign-option.selected { background: #eff6ff; }
    .assign-option.selected .assign-check { visibility: visible; }
    .assign-check { visibility: hidden; color: var(--bs-accent); font-size: 0.7rem; margin-left: auto; }
    .task-pri-emoji { font-size: 0.75rem; flex-shrink: 0; cursor: default; }
    .task-notes-area {
      width: 100%; min-height: 48px; max-height: 120px; resize: vertical;
      font-size: 0.75rem; padding: 6px 8px; border: 1px solid #d1d5db;
      border-radius: 4px; font-family: inherit; line-height: 1.4;
    }
    .task-notes-area:focus { border-color: var(--bs-accent); outline: none; }
    .assign-select {
      font-size: 0.68rem; padding: 1px 4px; border: 1px solid #d1d5db;
      border-radius: 4px; background: white; color: #374151;
      cursor: pointer; max-width: 120px; flex-shrink: 0;
    }
    .task-box { cursor: pointer; }
    .task-box:hover { border-color: var(--bs-primary); }
    .saving { opacity: 0.5; pointer-events: none; }
    .goal-status-select {
      font-size: 0.7rem; padding: 2px 6px; border: 1px solid #d1d5db;
      border-radius: 4px; background: white; cursor: pointer; margin-left: 6px;
    }

    .pm-btn {
      font-size: 0.75rem; padding: 3px 10px 3px 3px; border-radius: 9999px;
      border: 1px solid #d1d5db; background: white; color: #374151;
      cursor: pointer; font-family: inherit; transition: all 0.12s;
      white-space: nowrap; display: inline-flex; align-items: center; gap: 4px;
    }
    .pm-btn:hover { filter: brightness(0.95); }
    .pm-btn.active { color: white; }
    .filter-toggle { display: flex; gap: 0; }
    .filter-toggle-btn {
      font-size: 0.7rem; padding: 3px 10px;
      border: 1px solid #d1d5db; background: white; color: #374151;
      cursor: pointer; font-family: inherit; transition: all 0.12s;
      white-space: nowrap;
    }
    .filter-toggle-btn:first-child { border-radius: 9999px 0 0 9999px; border-right: none; }
    .filter-toggle-btn:not(:first-child):not(:last-child) { border-radius: 0; border-right: none; }
    .filter-toggle-btn:last-child { border-radius: 0 9999px 9999px 0; }
    .filter-toggle-btn:hover { background: #f3f4f6; }
    .filter-toggle-btn.active { background: var(--bs-primary); color: #fff; border-color: var(--bs-primary); }
    .filter-toggle-btn.active:hover { background: var(--bs-primary-hover); }
    .sort-btn {
      font-size: 0.7rem; padding: 3px 10px; border-radius: 9999px;
      border: 1px solid #d1d5db; background: white; color: #374151;
      cursor: pointer; font-family: inherit; transition: all 0.12s;
      white-space: nowrap;
    }
    .sort-btn:hover { background: #f3f4f6; }
    .sort-btn.seq { background: #f0f4ff; border-color: var(--bs-primary); color: var(--bs-primary); }
    .sort-btn.active { background: var(--bs-primary); color: #fff; border-color: var(--bs-primary); }
    .sort-btn.active:hover { background: var(--bs-primary-hover); }
    .goal-drop-btn {
      font-size: 0.8rem; padding: 7px 12px; border: 1px solid #d1d5db;
      border-radius: 6px; background: white; cursor: pointer; font-family: inherit;
      color: #374151; white-space: nowrap;
    }
    .goal-drop-btn:hover { border-color: var(--bs-primary); }
    .goal-drop-menu {
      position: absolute; top: 100%; left: 0; z-index: 50;
      background: white; border: 1px solid #d1d5db; border-radius: 8px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.12); padding: 6px;
      min-width: 220px; max-height: 360px; overflow-y: auto;
      display: flex; flex-direction: column; gap: 3px;
    }
    .goal-drop-item {
      font-size: 0.72rem; padding: 5px 10px; border-radius: 9999px;
      cursor: pointer; font-weight: 500; border: none; text-align: left;
      font-family: inherit; transition: opacity 0.1s;
    }
    .goal-drop-item:hover { opacity: 0.8; }
    .goal-drop-item.selected { box-shadow: inset 0 0 0 2px var(--bs-primary); }

    .d-goal-pill {
      border-radius: 10px; margin-bottom: 8px; overflow: visible;
      position: relative; cursor: pointer; user-select: none;
    }
    .d-goal-pill-bg {
      display: flex; align-items: center; gap: 9px;
      padding: 10px 14px; position: relative; z-index: 1;
    }
    .d-goal-pill-fill {
      position: absolute; left: 0; top: 0; bottom: 0;
      background: rgba(255,255,255,0.35); z-index: 0;
      border-radius: 10px;
    }
    .d-goal-stats {
      font-size: 0.68rem; color: #6b7280; margin-left: auto;
      display: flex; gap: 8px; align-items: center; white-space: nowrap;
    }
    .d-stats-summary {
      display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
      padding: 12px 16px; background: #f8fafc; border-radius: 8px;
      border: 1px solid #e5e7eb;
    }
    .d-stat-item { text-align: center; }
    .d-stat-val { font-size: 1.1rem; font-weight: 700; color: var(--bs-primary); }
    .d-stat-label { font-size: 0.65rem; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.05em; }

    /* Status dot colors */
    .dot-on-track  { background: #16a34a; }
    .dot-at-risk   { background: #d97706; }
    .dot-off-track { background: #dc2626; }
    .dot-completed { background: var(--bs-primary); }
    .dot-default   { background: #9ca3af; }

    /* Activity in drawer */
    .d-act-item  { padding: 10px 0; border-bottom: 1px solid #f3f4f6; }
    .d-act-item:last-child { border-bottom: none; }
    .d-act-meta  { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; flex-wrap: wrap; }
    .d-act-date  { font-size: 0.72rem; color: #9ca3af; }
    .d-act-by    { font-size: 0.72rem; color: #9ca3af; }
    .d-act-desc  { font-size: 0.825rem; color: #374151; line-height: 1.45; }

    /* Info / error boxes */
    .info-box {
      background: var(--bs-primary-light); border: 1px solid var(--bs-border);
      border-radius: 7px; padding: 11px 14px;
      color: var(--bs-ink-muted); font-size: 0.8rem; line-height: 1.5;
      margin-bottom: 12px;
    }
    .error-box {
      background: #fef2f2; border: 1px solid #fca5a5;
      border-radius: 8px; padding: 16px 20px;
      color: #991b1b; font-size: 0.875rem; line-height: 1.6;
    }
    .error-box strong { display: block; margin-bottom: 6px; }
    .error-box code {
      background: rgba(0,0,0,0.06); padding: 1px 5px;
      border-radius: 3px; font-family: monospace; font-size: 0.82rem;
    }
    .state-box { text-align: center; padding: 48px 24px; color: #9ca3af; font-size: 0.9rem; }
    .state-box .icon { font-size: 2.5rem; margin-bottom: 10px; }
    .state-box strong { display: block; color: #374151; margin-bottom: 4px; font-size: 1rem; }

    /* ── Goal View (flat table) ─────────────────────────── */
    #view-meeting .main { max-width: none; }
    .gv-list { display: flex; flex-direction: column; gap: 2px; }
    .gv-header {
      display: flex; align-items: center; padding: 5px 12px;
      position: sticky; top: 0; z-index: 5;
      background: var(--bs-primary); color: #ffffff;
      font-size: 0.66rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.05em;
    }
    .gv-header > * { color: #ffffff !important; }
    /* Sortable header cell — clickable, with hover affordance + sort indicator */
    .mv-th { cursor: pointer; user-select: none; transition: opacity 0.12s; }
    .mv-th:hover { opacity: 0.78; }
    .gv-row {
      display: flex; align-items: center;
      padding: 7px 12px; cursor: pointer; transition: background 0.1s;
      overflow: hidden; background: #eef3f9; gap: 0;
    }
    .gv-row:nth-child(even) { background: #dce8f5; }
    .gv-row:hover { background: #c8ddf0; }
    .gv-cell { padding: 0 5px; font-size: 0.77rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; flex-shrink: 0; }
    .gv-job   { width: 72px; font-family: monospace; font-weight: 700; color: var(--bs-primary); font-size: 0.74rem; }
    .gv-name  { width: 260px; font-weight: 600; color: #111827; font-size: 0.81rem; }
    .gv-pm    { width: 80px; color: #6b7280; }
    .gv-stats { width: 130px; color: #6b7280; font-size: 0.72rem; }
    .gv-stats strong { color: var(--bs-primary); }
    .gv-goals {
      flex: 1; min-width: 0; padding: 0 5px;
      display: flex; flex-wrap: nowrap; gap: 4px; align-items: center;
      overflow-x: auto; overflow-y: hidden;
      scrollbar-width: thin; scrollbar-color: #c8d6e5 transparent;
    }
    .gv-goals::-webkit-scrollbar { height: 4px; }
    .gv-goals::-webkit-scrollbar-thumb { background: #c8d6e5; border-radius: 4px; }
    .gv-goals::-webkit-scrollbar-track { background: transparent; }
    .gv-goal-wrap { display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; }
    .gv-dot {
      width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
      cursor: pointer; transition: transform 0.1s, opacity 0.15s;
    }
    .gv-dot:hover { transform: scale(1.4); }
    .gv-due { font-size: 0.65rem; font-weight: 600; white-space: nowrap; flex-shrink: 0; }

    /* Status badge / dropdown (used by drawer) */
    .mv-badge-wrap    { position: relative; flex-shrink: 0; }
    .mv-status-badge  {
      font-size: 0.68rem; font-weight: 600; padding: 2px 8px;
      border-radius: 9999px; white-space: nowrap; cursor: pointer;
      min-width: 76px; text-align: center; display: inline-block;
      user-select: none; transition: opacity 0.12s;
    }
    .mv-status-badge:hover { opacity: 0.82; }
    .mv-badge-on-track { background: #dcfce7; color: #15803d; }
    .mv-badge-behind   { background: #fef9c3; color: #a16207; }
    .mv-badge-at-risk  { background: #fee2e2; color: #991b1b; }
    .mv-badge-closed   { background: rgba(147,197,253,0.35); color: #3b82f6; }
    .mv-badge-default  { background: #f3f4f6; color: #6b7280; }
    .mv-status-dd {
      position: absolute; top: calc(100% + 4px); left: 0; z-index: 200;
      background: white; border: 1px solid #d1d5db; border-radius: 8px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.13); padding: 4px; min-width: 118px;
    }
    .d-goal-pill .mv-badge-wrap { position: relative; z-index: 50; }
    .d-goal-pill .mv-status-dd { z-index: 300; }
    .mv-sdd-item {
      font-size: 0.71rem; font-weight: 600; padding: 5px 12px; border-radius: 9999px;
      cursor: pointer; border: none; width: 100%;
      text-align: left; font-family: inherit; display: block;
      margin: 2px 0;
    }
    .mv-sdd-item:hover { filter: brightness(0.9); }

    /* Drawer collapsed goals (Not Started / Completed) */
    .d-goal-pill.d-collapsed {
      margin-bottom: 4px;
    }
    .d-goal-pill.d-collapsed .d-goal-pill-bg { padding: 6px 12px; }
    .d-goal-pill.d-collapsed .goal-dot,
    .d-goal-pill.d-collapsed .mv-status-badge,
    .d-goal-pill.d-collapsed .goal-name,
    .d-goal-pill.d-collapsed .d-goal-stats,
    .d-goal-pill.d-collapsed .goal-arrow { opacity: 0.4; }
    .d-goal-pill.d-collapsed:hover .goal-dot,
    .d-goal-pill.d-collapsed:hover .mv-status-badge,
    .d-goal-pill.d-collapsed:hover .goal-name,
    .d-goal-pill.d-collapsed:hover .d-goal-stats,
    .d-goal-pill.d-collapsed:hover .goal-arrow { opacity: 0.65; }
    .d-goal-pill.d-collapsed .goal-name { font-size: 0.75rem; }
    .d-goal-pill.d-collapsed .d-goal-stats { font-size: 0.6rem; }
    .d-goal-pill.d-done .goal-name { text-decoration: line-through; }

    /* ── High Effort View ────────────────────────────────── */
    .he-task {
      background: white; border-radius: 8px; border: 1px solid #e5e7eb;
      margin-bottom: 8px; overflow: visible;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      transition: box-shadow 0.12s;
    }
    .he-task:hover { box-shadow: 0 2px 8px var(--bs-focus-ring); }
    .he-task-header {
      display: flex; align-items: center; gap: 10px; padding: 10px 16px;
      cursor: pointer; flex-wrap: wrap;
    }
    .he-task-name { font-size: 0.88rem; font-weight: 600; color: #111827; flex: 1; min-width: 150px; }
    .he-task-proj {
      font-size: 0.72rem; color: #6b7280; flex-shrink: 0;
      display: flex; align-items: center; gap: 6px;
    }
    .he-task-proj-job {
      font-family: monospace; font-weight: 700; font-size: 0.75rem; color: var(--bs-primary);
      cursor: pointer;
    }
    .he-task-proj-job:hover { text-decoration: underline; }
    .he-task-effort {
      font-size: 0.85rem; font-weight: 700; color: var(--bs-primary);
      background: var(--bs-accent-light); padding: 2px 10px; border-radius: 9999px;
      flex-shrink: 0; white-space: nowrap;
    }
    .he-task-meta {
      display: flex; gap: 6px; align-items: center; flex-shrink: 0;
    }
    .he-progress-bar {
      width: 60px; height: 5px; background: #e5e7eb; border-radius: 999px;
      overflow: hidden; flex-shrink: 0;
    }
    .he-progress-fill { height: 100%; background: var(--bs-primary); border-radius: 999px; }

    /* ── Employee Tasks View ──────────────────────────────── */
    .et-header {
      display: flex; justify-content: space-between; align-items: baseline;
      padding: 14px 16px 10px; background: #374151; color: white;
    }
    .et-header h2 { font-size: 1.25rem; font-weight: 700; color: white; }
    .et-header .et-date { font-size: 0.82rem; color: rgba(255,255,255,0.7); }
    .et-legend {
      display: flex; gap: 18px; flex-wrap: wrap; padding: 8px 16px;
      font-size: 0.72rem; color: #6b7280; align-items: center;
      background: #f9fafb; border-bottom: 1px solid #e5e7eb;
    }
    .et-legend-group { display: flex; gap: 10px; align-items: center; }
    .et-legend-label { font-weight: 600; color: #374151; text-transform: uppercase; letter-spacing: 0.04em; }
    .et-section {
      margin-bottom: 10px; border: 1px solid #d9d9d9; border-radius: 8px;
      overflow: hidden; background: #fff;
    }
    .et-section-header {
      font-size: 1rem; font-weight: 800; color: #111;
      padding: 8px 16px; display: flex; align-items: center;
    }
    .et-row {
      display: flex; align-items: center; gap: 8px;
      padding: 5px 16px; font-size: 0.78rem;
      border-bottom: 1px solid #f0f0f0;
      min-height: 32px;
    }
    .et-row:hover { filter: brightness(0.97); }
    .et-pri { width: 20px; text-align: center; flex-shrink: 0; font-size: 0.82rem; }
    .et-job { font-weight: 700; width: 60px; flex-shrink: 0; color: #1f2937; }
    .et-proj { width: 200px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #4b5563; }
    .et-task { flex: 1; font-weight: 600; color: #1f2937; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .et-check { width: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
    .et-effort { width: 45px; flex-shrink: 0; text-align: right; font-size: 0.7rem; color: #6b7280; }
    .et-row.et-done { opacity: 0.5; }
    .et-row.et-done .et-task { text-decoration: line-through; }
    .et-task-link { color: #1f2937; text-decoration: none; font-weight: 600; }
    .et-job-link { color: #1f2937; text-decoration: none; font-weight: 700; }
    .et-job-link:hover { text-decoration: underline; color: var(--bs-secondary); }
    .et-date-col { width: 90px; flex-shrink: 0; text-align: right; font-size: 0.75rem; color: #374151; white-space: nowrap; }
    .et-status-dot {
      width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
      display: inline-block; vertical-align: middle;
    }
    .et-dot-overdue { background: #C50F1F; }
    .et-dot-soon { background: #F59E0B; }
    .et-no-tasks { padding: 16px; text-align: center; color: #9ca3af; font-size: 0.85rem; }
    .et-pool-section { margin-bottom: 14px; border: 2px dashed var(--bs-accent); border-radius: 10px; overflow: hidden; background: var(--bs-accent-light); }
    .et-pool-header {
      font-size: 1rem; font-weight: 800; color: var(--bs-primary);
      padding: 10px 16px; display: flex; align-items: center; gap: 8px;
      background: var(--bs-accent-light); border-bottom: 1px solid #e8d9a8;
    }
    .et-pool-header .pool-count { font-size: 0.75rem; font-weight: 600; background: var(--bs-accent); color: #1f2937; padding: 1px 8px; border-radius: 10px; }
    .et-claim-btn {
      background: var(--bs-accent); color: #1f2937; border: none; border-radius: 4px;
      padding: 2px 10px; font-size: 0.68rem; font-weight: 700; cursor: pointer;
      white-space: nowrap; flex-shrink: 0;
    }
    .et-claim-btn:hover { background: var(--bs-accent-hover); }
    .et-unclaim-btn {
      background: transparent; color: #6b7280; border: 1px solid #d1d5db; border-radius: 4px;
      padding: 2px 8px; font-size: 0.62rem; font-weight: 600; cursor: pointer;
      white-space: nowrap; flex-shrink: 0;
    }
    .et-unclaim-btn:hover { background: var(--bs-zebra-hover); color: var(--bs-ink-muted); border-color: var(--bs-border-strong); }

    /* ── Responsive ──────────────────────────────────────── */
    @media (max-width: 640px) {
      header, .controls, .main { padding-left: 14px; padding-right: 14px; }
      .hide-sm { display: none !important; }
      tbody td { padding: 10px; }
      .desc-cell { max-width: 200px; }
      .drawer { width: 100vw; }

      /* Goal Review "My Goals" — flex rows don't fit on phones, convert
         to stacked tile cards so the goal pills can wrap. */
      .gv-header { display: none; }
      .gv-list { gap: 6px; }
      .gv-row {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
          "job  name  pm"
          "stats stats stats"
          "goals goals goals";
        column-gap: 8px; row-gap: 4px;
        padding: 10px 12px;
        border: 1px solid #e5e7eb; border-radius: 8px;
        background: #fff;
      }
      .gv-row .gv-cell { padding: 0; }
      .gv-row .gv-job  { grid-area: job;  width: auto; }
      .gv-row .gv-name { grid-area: name; width: auto; white-space: normal; overflow: visible; }
      .gv-row .gv-pm   { grid-area: pm;   width: auto; text-align: right; }
      .gv-row .gv-stats{ grid-area: stats; width: auto; display: block; }
      .gv-row .gv-goals{
        grid-area: goals; flex-wrap: wrap; padding: 0;
        overflow-x: visible; row-gap: 6px;
      }
      /* Employee tasks responsive */
      .et-proj { width: 120px; }
      .et-row { gap: 5px; padding: 5px 10px; font-size: 0.72rem; }
      .et-job { width: 50px; }
      .et-date-col { width: 75px; }
      .et-effort { width: 35px; font-size: 0.65rem; }
      .et-check { width: 16px; }
    }

    /* ── My Week Dashboard ─────────────────────────────────── */
    .mw-dashboard {
      display: grid;
      grid-template-columns: 340px 1fr;
      gap: 16px;
      min-height: 500px;
    }
    .mw-sidebar {
      display: flex; flex-direction: column; gap: 14px;
    }
    .mw-section {
      background: white; border-radius: 10px; border: 1px solid #e5e7eb;
      box-shadow: 0 1px 3px rgba(0,0,0,0.07); overflow: hidden;
    }
    .mw-section-header {
      display: flex; align-items: center; gap: 8px;
      padding: 10px 14px; background: var(--bs-primary);
      border-bottom: 1px solid #e5e7eb;
    }
    .mw-section-header .d-sec-title { color: white !important; }
    .mw-section-header .sort-btn {
      background: rgba(255,255,255,0.2); color: white; border-color: rgba(255,255,255,0.3);
    }
    .mw-section-header .sort-btn:hover {
      background: rgba(255,255,255,0.35);
    }
    .mw-badge {
      background: #ef4444; color: white; font-size: 0.6rem; font-weight: 700;
      padding: 1px 6px; border-radius: 9999px; margin-left: 4px;
    }
    .mw-badge:empty, .mw-badge[data-count="0"] { display: none; }
    .mw-item-list {
      max-height: 320px; overflow-y: auto; padding: 6px;
      min-height: 40px;
    }
    .mw-item {
      display: flex; align-items: flex-start; gap: 8px;
      padding: 8px 10px; border-radius: 6px; cursor: grab;
      border: 1px solid transparent; transition: all 0.12s;
      font-size: 0.82rem; margin-bottom: 3px;
    }
    .mw-item:hover { border-color: #d1d5db; background: #fafbff; }
    .mw-item.dragging { opacity: 0.5; border-color: var(--bs-accent); }
    .mw-item-dot {
      width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px;
    }
    .mw-item-body { flex: 1; min-width: 0; }
    .mw-item-title {
      font-weight: 600; color: #111827; white-space: nowrap;
      overflow: hidden; text-overflow: ellipsis;
    }
    .mw-item-meta {
      font-size: 0.7rem; color: #9ca3af; margin-top: 2px;
    }
    .mw-item-actions {
      display: flex; gap: 4px; flex-shrink: 0; opacity: 0;
      transition: opacity 0.12s;
    }
    .mw-item:hover .mw-item-actions { opacity: 1; }
    .mw-item-btn {
      background: none; border: none; cursor: pointer;
      font-size: 0.8rem; color: #9ca3af; padding: 2px 4px; border-radius: 3px;
    }
    .mw-item-btn:hover { color: var(--bs-primary); background: #f0f4ff; }
    .mw-scratchpad {
      width: 100%; min-height: 120px; resize: vertical;
      font-size: 0.82rem; padding: 8px 14px; border: none;
      font-family: inherit; line-height: 1.8; outline: none;
    }

    /* ── Timeline (Daily 15-min view) ──────────────────── */
    .mw-timeline-area {
      background: white; border-radius: 10px; border: 1px solid #e5e7eb;
      box-shadow: 0 1px 3px rgba(0,0,0,0.07); overflow: hidden;
    }
    .mw-tl-daily {
      display: grid; grid-template-columns: 60px 1fr;
      overflow-y: auto; max-height: 640px;
    }
    .mw-tl-time {
      font-size: 0.72rem; color: #9ca3af; text-align: right;
      padding: 0 8px; height: 36px; line-height: 36px;
      border-bottom: 1px dotted #e5e7eb;
    }
    .mw-tl-time.on-hour {
      font-weight: 700; color: #374151;
      border-top: 1px solid #cbd5e1; border-bottom: 1px dotted #e5e7eb;
      margin-top: -1px;
    }
    .mw-tl-slot {
      height: 36px; border-bottom: 1px dotted #e5e7eb;
      position: relative; cursor: pointer;
      transition: background 0.1s;
    }
    .mw-tl-slot.on-hour { border-top: 1px solid #cbd5e1; margin-top: -1px; }
    .mw-tl-slot:hover { background: #f0f4ff; }
    .mw-tl-slot.drop-target { background: var(--bs-primary-light); }
    .mw-add-time-btn {
      position: absolute; bottom: 2px; right: 2px; width: 22px; height: 22px;
      border-radius: 50%; border: 1.5px solid rgba(0,0,0,0.15); background: rgba(255,255,255,0.85);
      font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer;
      opacity: 0; transition: opacity 0.15s; color: #374151; display: flex; align-items: center; justify-content: center;
    }
    .mw-tl-block:hover .mw-add-time-btn, .mw-wk-block:hover .mw-add-time-btn { opacity: 1; }
    .mw-add-time-popup {
      position: fixed; z-index: 9999; background: white; border-radius: 10px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.18); padding: 12px; min-width: 180px;
    }
    .mw-add-time-popup .mw-atp-row { display: flex; gap: 6px; margin-bottom: 8px; justify-content: center; }
    .mw-add-time-popup button {
      padding: 6px 10px; border-radius: 6px; border: 1px solid #e5e7eb;
      background: #f9fafb; cursor: pointer; font-size: 0.8rem; font-weight: 600;
    }
    .mw-add-time-popup button:hover { background: var(--bs-accent-light); border-color: var(--bs-accent); }
    .mw-add-time-popup .mw-atp-sub { color: #dc2626; }
    .mw-add-time-popup .mw-atp-add { color: #059669; }
    /* ── Task Hover Card ────────────────────────────────── */
    /* ── Month View ──────────────────────────────────────── */
    .mw-month-grid { display: grid; grid-template-columns: 0.5fr repeat(5, 1fr) 0.5fr; gap: 1px; background: #e5e7eb; border-radius: 8px; overflow: hidden; }
    .mw-month-hdr { background: var(--bs-primary); color: white; font-size: 0.7rem; font-weight: 700; text-align: center; padding: 6px 0; }
    .mw-month-cell { background: white; min-height: 85px; padding: 3px 4px; vertical-align: top; }
    .mw-month-cell.weekend { background: #f9fafb; }
    .mw-month-cell.outside { opacity: 0.35; }
    .mw-month-cell.today { box-shadow: inset 0 0 0 2px var(--bs-primary); }
    .mw-month-day { font-size: 0.72rem; font-weight: 700; color: #374151; margin-bottom: 2px; cursor: pointer; display: inline-block; }
    .mw-month-day:hover { color: var(--bs-accent); }
    .mw-month-chip { font-size: 0.62rem; padding: 2px 5px; border-radius: 3px; margin-bottom: 1px;
                      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; color: #1f2937; }
    .mw-month-chip:hover { filter: brightness(0.92); }
    .mw-month-more { font-size: 0.58rem; color: #6b7280; cursor: pointer; padding: 1px 4px; }
    .mw-month-more:hover { color: var(--bs-accent); }
    .task-hover-card {
      position: fixed; z-index: 10000; background: white; border-radius: 10px;
      box-shadow: 0 6px 24px rgba(0,0,0,0.18); padding: 14px 16px; max-width: 340px;
      min-width: 240px; pointer-events: auto; font-size: 0.8rem; line-height: 1.5;
    }
    .task-hover-card .thc-name { font-weight: 700; color: #111827; font-size: 0.85rem; margin-bottom: 8px; }
    .task-hover-card .thc-row { display: flex; gap: 8px; align-items: center; margin-bottom: 3px; }
    .task-hover-card .thc-label { color: #9ca3af; font-size: 0.7rem; min-width: 48px; flex-shrink: 0; }
    .task-hover-card .thc-val { color: #374151; font-size: 0.78rem; }
    .task-hover-card .thc-sep { border-top: 1px solid #f3f4f6; margin: 6px 0; }
    .task-hover-card .thc-bottom { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
    .task-hover-card .thc-pill { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 0.7rem; font-weight: 600; }
    .task-hover-card .thc-status { padding: 1px 8px; border-radius: 10px; font-size: 0.68rem; font-weight: 600; background: #f3f4f6; color: #6b7280; }
    .mw-tl-block {
      position: absolute; left: 2px; right: 2px;
      border-radius: 6px; padding: 4px 8px;
      font-size: 0.75rem; font-weight: 600; overflow: hidden;
      cursor: grab; z-index: 5;
      box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    }
    .mw-tl-block-line1 {
      display: flex; align-items: baseline; gap: 4px; min-width: 0;
    }
    .mw-tl-block-line1 .tl-task-label {
      flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .mw-tl-block-line1 .tl-due-label {
      flex-shrink: 0; font-size: 0.65rem; font-weight: 500;
    }
    .mw-tl-block-proj {
      font-size: 0.65rem; color: #6b7280; margin-top: 1px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .mw-tl-block .mw-resize-handle {
      position: absolute; bottom: 0; left: 0; right: 0; height: 6px;
      cursor: ns-resize; background: transparent;
      border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;
    }
    .mw-tl-block .mw-resize-handle:hover {
      background: rgba(0,0,0,0.15);
    }
    .mw-tl-now-line {
      position: absolute; left: 60px; right: 0; height: 2px;
      background: #ef4444; z-index: 10; pointer-events: none;
    }
    .mw-tl-now-dot {
      position: absolute; left: -4px; top: -3px;
      width: 8px; height: 8px; border-radius: 50%; background: #ef4444;
    }

    /* ── Timeline (Weekly 15-min slot view) ──────────────────── */
    .mw-tl-weekly {
      display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px;
      background: #d1d5db;
    }
    .mw-tl-day-col {
      background: white; display: flex; flex-direction: column;
    }
    .mw-tl-day-header {
      font-size: 0.72rem; font-weight: 700; color: #6b7280;
      text-transform: uppercase; letter-spacing: 0.05em;
      padding: 10px 8px; border-bottom: 2px solid #d1d5db;
      text-align: center; background: #f8fafc;
    }
    .mw-tl-day-header.today { color: white; background: var(--bs-primary); }
    .mw-wk-section-label {
      font-size: 0.58rem; color: #9ca3af; text-transform: uppercase;
      letter-spacing: 0.08em; padding: 4px 6px; font-weight: 700;
      background: #f1f5f9; border-bottom: 2px solid #cbd5e1;
      text-align: center;
    }
    .mw-wk-slot {
      height: 24px; position: relative; cursor: pointer;
      border-bottom: 1px dotted #e5e7eb;
      transition: background 0.1s;
    }
    .mw-wk-slot.on-hour { border-top: 1px solid #cbd5e1; margin-top: -1px; border-bottom: 1px dotted #e5e7eb; }
    .mw-wk-slot:hover { background: #f0f4ff; }
    .mw-wk-slot.drop-target { background: var(--bs-primary-light); }
    .mw-wk-hour-label {
      position: absolute; left: 3px; top: 0; font-size: 0.5rem;
      color: #9ca3af; line-height: 24px; pointer-events: none;
    }
    .mw-wk-block {
      position: absolute; left: 1px; right: 1px;
      border-radius: 4px; padding: 1px 3px;
      font-size: 0.58rem; font-weight: 600; overflow: hidden;
      white-space: nowrap; text-overflow: ellipsis;
      cursor: grab; z-index: 5; line-height: 1.3;
      box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }
    .mw-wk-block .mw-resize-handle {
      position: absolute; bottom: 0; left: 0; right: 0; height: 5px;
      cursor: ns-resize;
    }
    .mw-wk-block .mw-resize-handle:hover {
      background: rgba(0,0,0,0.12);
    }

    /* ── PARA section ──────────────────────────────────── */
    .mw-para-nav {
      display: flex; gap: 6px; margin-bottom: 12px;
    }
    .mw-para-content {
      background: white; border-radius: 10px; border: 1px solid #e5e7eb;
      box-shadow: 0 1px 3px rgba(0,0,0,0.07); padding: 16px; min-height: 120px;
    }

    /* ── Note compose modal ────────────────────────────── */
    .mw-modal-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,0.4);
      z-index: 400; display: flex; align-items: center; justify-content: center;
    }
    .mw-modal {
      background: white; border-radius: 12px; width: min(500px, 95vw);
      box-shadow: 0 8px 32px rgba(0,0,0,0.2);
      display: flex; flex-direction: column; max-height: 90vh;
    }
    .mw-modal-header {
      padding: 14px 18px; border-bottom: 1px solid #e5e7eb;
      font-weight: 700; font-size: 0.95rem; color: var(--bs-primary);
      display: flex; justify-content: space-between; align-items: center;
      flex-shrink: 0;
    }
    .pp-tm-guide-jump {
      background: #4338ca; color: #fff; border: 1px solid #3730a3;
      padding: 4px 12px; border-radius: 999px; font-size: 0.74rem; font-weight: 600;
      cursor: pointer; font-family: inherit; line-height: 1.2; white-space: nowrap;
      transition: background 0.12s, border-color 0.12s, color 0.12s;
    }
    .pp-tm-guide-jump:hover { background: #3730a3; border-color: #312e81; }
    .pp-tm-guide-jump.pp-tm-guide-add {
      background: transparent; color: #4b5563; border: 1px dashed #9ca3af;
    }
    .pp-tm-guide-jump.pp-tm-guide-add:hover { background: #f3f4f6; color: #1f2937; border-color: #4b5563; }
    .mw-modal-body { padding: 16px 18px; overflow-y: auto; flex: 1 1 auto; }
    .mw-modal-footer {
      padding: 12px 18px; border-top: 1px solid #e5e7eb;
      display: flex; justify-content: flex-end; gap: 8px;
    }
    .mw-btn-primary {
      background: var(--bs-primary); color: white; border: none; padding: 7px 16px;
      border-radius: 6px; font-size: 0.82rem; font-family: inherit;
      cursor: pointer; font-weight: 600;
    }
    .mw-btn-primary:hover { background: var(--bs-primary-hover); }
    .mw-btn-secondary {
      background: white; color: #374151; border: 1px solid #d1d5db;
      padding: 7px 16px; border-radius: 6px; font-size: 0.82rem;
      font-family: inherit; cursor: pointer;
    }
    .mw-btn-secondary:hover { background: #f3f4f6; }
    .mw-input {
      width: 100%; padding: 8px 10px; border: 1px solid #d1d5db;
      border-radius: 6px; font-size: 0.82rem; font-family: inherit;
      outline: none;
    }
    .mw-input:focus { border-color: var(--bs-accent); box-shadow: 0 0 0 2px var(--bs-focus-ring); }
    .mw-label {
      font-size: 0.75rem; color: #6b7280; display: block; margin-bottom: 4px;
    }
    .mw-field { margin-bottom: 12px; }

    /* ── Settings modal color swatches ─────────────────── */
    .mw-color-row { display: flex; gap: 6px; flex-wrap: wrap; }
    .mw-color-swatch {
      width: 28px; height: 28px; border-radius: 6px; cursor: pointer;
      border: 2px solid transparent; transition: border-color 0.12s;
    }
    .mw-color-swatch:hover { border-color: #374151; }
    .mw-color-swatch.selected { border-color: var(--bs-primary); box-shadow: 0 0 0 2px var(--bs-accent); }

    /* ── My Week Responsive ────────────────────────────── */
    @media (max-width: 900px) {
      .mw-dashboard { grid-template-columns: 1fr; }
      .mw-tl-weekly { grid-template-columns: repeat(3, 1fr); }
    }
    @media (max-width: 640px) {
      .mw-tl-weekly { grid-template-columns: 1fr 1fr; }
      .mw-sidebar { min-width: 0; }
    }

    /* Destructive button */
    .mw-btn-danger {
      background: #dc2626; color: white; border: none; padding: 7px 16px;
      border-radius: 6px; font-size: 0.82rem; font-family: inherit;
      cursor: pointer; font-weight: 600;
    }
    .mw-btn-danger:hover { background: #b91c1c; }

    /* Status pill picker */
    .bs-status-picker {
      position: relative; display: inline-block; width: 100%;
    }
    .bs-status-selected {
      display: flex; align-items: center; gap: 6px; padding: 6px 10px;
      border: 1px solid #d1d5db; border-radius: 6px; cursor: pointer;
      background: white; font-size: 0.82rem; font-family: inherit;
      transition: border-color 0.12s;
    }
    .bs-status-selected:hover { border-color: #93c5fd; }
    .bs-status-dot {
      width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
    }
    .bs-status-dropdown {
      position: absolute; top: 100%; left: 0; right: 0; z-index: 450;
      background: white; border: 1px solid #d1d5db; border-radius: 6px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15); margin-top: 2px;
      display: none;
    }
    .bs-status-dropdown.open { display: block; }
    .bs-status-option {
      display: flex; align-items: center; gap: 8px; padding: 8px 12px;
      cursor: pointer; font-size: 0.82rem; transition: background 0.1s;
    }
    .bs-status-option:hover { background: #f3f4f6; }
    .bs-status-option:first-child { border-radius: 6px 6px 0 0; }
    .bs-status-option:last-child { border-radius: 0 0 6px 6px; }
    .bs-status-option.selected { background: #eff6ff; font-weight: 600; }

    /* Toast notification */
    .mw-toast {
      position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
      background: var(--bs-primary); color: #fff; padding: 10px 20px; border-radius: 8px;
      font-size: 0.85rem; z-index: 10001; box-shadow: 0 4px 12px rgba(0,0,0,0.25);
      opacity: 0; transition: opacity 0.3s;
    }
    .mw-toast.show { opacity: 1; }

    /* ── Project Page ──────────────────────────────────────── */
    .project-page { margin: 0; padding: 0 0 40px; }
    .pp-header {
      display: flex; align-items: center; gap: 16px; padding: 10px 24px;
      background: var(--sidebar-bg); color: #fff;
      border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .pp-body { max-width: 1440px; margin: 0 auto; padding: 0 20px; }
    .pp-back {
      background: none; border: none; color: rgba(255,255,255,0.7);
      padding: 4px 8px; border-radius: 4px; cursor: pointer; font-size: 0.85rem;
      font-family: inherit; transition: color 0.12s, background 0.12s;
    }
    .pp-back:hover { color: #fff; background: rgba(255,255,255,0.1); }
    .pp-title { flex: 1; display: flex; align-items: baseline; gap: 10px; min-width: 0; }
    .pp-job { font-size: 0.8rem; opacity: 0.7; white-space: nowrap; }
    .pp-name { font-size: 1.1rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pp-name-edit {
      background: none; border: none; color: rgba(255,255,255,0.4); cursor: pointer;
      font-size: 0.85rem; padding: 2px 4px; border-radius: 3px; transition: color 0.12s, background 0.12s;
      flex-shrink: 0;
    }
    .pp-name-edit:hover { color: #fff; background: rgba(255,255,255,0.15); }
    .pp-pm { font-size: 0.78rem; opacity: 0.8; white-space: nowrap; }
    .pp-sp-link {
      color: #fff; font-size: 0.78rem; text-decoration: none; white-space: nowrap;
      opacity: 0.8; transition: opacity 0.12s;
    }
    .pp-sp-link:hover { opacity: 1; }
    .pp-ledger-btn { background: none; border: none; padding: 0; cursor: pointer; }
    .pp-nav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
    .pp-nav-count { font-size: 0.72rem; color: rgba(255,255,255,0.65); font-variant-numeric: tabular-nums; white-space: nowrap; }
    .pp-nav-btn {
      padding: 5px 10px; border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.08);
      color: #fff; border-radius: 6px; font-size: 0.75rem; cursor: pointer; font-weight: 600;
      font-family: inherit; white-space: nowrap; transition: background 0.12s, border-color 0.12s, opacity 0.12s;
    }
    .pp-nav-btn:hover:not(:disabled) { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.4); }
    .pp-nav-btn:disabled { opacity: 0.35; cursor: not-allowed; }
    .pp-nav-btn-primary { background: var(--bs-primary, #23486A); border-color: rgba(255,255,255,0.4); }
    .pp-nav-btn-primary:hover:not(:disabled) { background: #2f5d8a; border-color: #fff; }
    .pp-delete-btn {
      background: rgba(220,38,38,0.15); color: #fca5a5; border: 1px solid rgba(220,38,38,0.3);
      padding: 4px 12px; border-radius: 4px; cursor: pointer; font-size: 0.75rem;
      font-family: inherit; font-weight: 500; transition: all 0.12s; white-space: nowrap;
    }
    .pp-delete-btn:hover { background: rgba(220,38,38,0.35); color: #fff; border-color: rgba(220,38,38,0.6); }

    .pp-tabs {
      display: flex; gap: 0; border-bottom: 2px solid #e5e7eb; margin-top: 0;
    }
    /* Mobile-only tab picker; hidden on desktop. */
    .pp-tabs-mobile { display: none; }
    .pp-tab {
      padding: 10px 20px; background: none; border: none; cursor: pointer;
      font-size: 0.88rem; font-weight: 500; color: #6b7280;
      border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.12s;
    }
    .pp-tab:hover { color: var(--bs-primary); }
    .pp-tab.active { color: var(--bs-primary); font-weight: 700; border-bottom-color: var(--bs-primary); }
    .pp-tab-content { padding-top: 20px; }

    /* Goal Review (meeting) tabs */
    .mv-tabs {
      display: flex; gap: 0; border-bottom: 2px solid #e5e7eb; margin: 0 0 16px;
    }
    .mv-tab {
      padding: 10px 20px; background: none; border: none; cursor: pointer;
      font-size: 0.88rem; font-weight: 500; color: #6b7280;
      border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.12s;
    }
    .mv-tab:hover { color: var(--bs-primary); }
    .mv-tab.active { color: var(--bs-primary); font-weight: 700; border-bottom-color: var(--bs-primary); }

    /* Team View — KPI strip + Last Week / This Week */
    .mv-kpis {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px;
    }
    .mv-kpi {
      background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
      padding: 14px 18px; display: flex; flex-direction: column; gap: 4px;
    }
    .mv-kpi-num { font-size: 1.6rem; font-weight: 700; color: #111827; line-height: 1.1; }
    .mv-kpi-lbl { font-size: 0.72rem; color: #6b7280; text-transform: uppercase; letter-spacing: 0.04em; }
    .mv-kpi.warn .mv-kpi-num { color: #b45309; }
    .mv-kpi.bad  .mv-kpi-num { color: #b91c1c; }
    .mv-kpi.good .mv-kpi-num { color: #047857; }
    /* Clickable KPIs — hover affordance + selected state for active filters */
    .mv-kpi-clickable {
      cursor: pointer; user-select: none;
      transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
    }
    .mv-kpi-clickable:hover {
      transform: translateY(-1px);
      box-shadow: 0 2px 6px rgba(0,0,0,0.08);
      border-color: var(--bs-secondary);
    }
    .mv-kpi.mv-kpi-active {
      border-color: var(--bs-primary);
      box-shadow: 0 0 0 2px rgba(0,30,60,0.08);
      background: #f5f9ff;
    }
    /* When a hygiene filter is active, Last Week is hidden and This Week
       gets the full row width to itself. */
    .mv-week-cols.mv-week-cols-single { grid-template-columns: 1fr; }
    /* Section header for the commitments-review modal */
    .mv-commits-section-head {
      font-size: 0.72rem; font-weight: 700; color: #374151;
      text-transform: uppercase; letter-spacing: 0.04em;
      padding: 6px 4px; border-bottom: 1px solid #e5e7eb; margin-bottom: 4px;
    }

    .mv-week-cols {
      display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
    }
    @media (max-width: 1100px) { .mv-week-cols { grid-template-columns: 1fr; } }
    .mv-col {
      background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
      padding: 14px 0; overflow: hidden;
    }
    .mv-col-head {
      display: flex; justify-content: space-between; align-items: baseline;
      margin: 0 14px 10px; padding-bottom: 8px; border-bottom: 1px solid #f3f4f6;
    }
    .mv-col-title { font-size: 0.95rem; font-weight: 700; color: #111827; }
    .mv-col-meta { font-size: 0.72rem; color: #6b7280; }
    /* Team View column header — matches .et-row column widths so the
       header cells line up with the row cells below. */
    .mv-team-header {
      display: flex; align-items: center; gap: 8px;
      padding: 6px 16px; margin: 0 0 6px;
      background: var(--bs-primary); color: #fff;
      font-size: 0.66rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.05em;
      border-radius: 4px;
    }
    .mv-team-header .et-pri,
    .mv-team-header .mv-pm-col,
    .mv-team-header .et-job,
    .mv-team-header .et-proj,
    .mv-team-header .mv-row-pill,
    .mv-team-header .mv-row-date-col {
      color: #fff;
    }
    /* "Pri" label is wider than the 20px row cell — let it overflow into the
       8px gap so the header text reads clearly while row alignment is kept. */
    .mv-team-header .et-pri {
      overflow: visible; white-space: nowrap;
    }
    .mv-team-header .mv-row-pill {
      flex: 1; min-width: 0; text-align: center;
    }
    .mv-team-header .mv-row-date-col {
      width: 110px; flex-shrink: 0; text-align: right;
    }
    /* PM identity column — small fixed slot for the colored initial chip. */
    .mv-pm-col {
      width: 26px; flex-shrink: 0; text-align: center;
      display: inline-flex; align-items: center; justify-content: center;
    }
    .mv-pm-chip {
      display: inline-flex; align-items: center; justify-content: center;
      width: 22px; height: 22px; border-radius: 50%;
      color: #fff; font-size: 0.72rem; font-weight: 700;
      flex-shrink: 0; cursor: pointer; user-select: none;
      transition: transform 0.1s, box-shadow 0.12s;
    }
    .mv-pm-chip:hover { transform: scale(1.1); box-shadow: 0 0 0 2px rgba(0,0,0,0.08); }
    @media (max-width: 640px) {
      /* On mobile, rows become stacked tiles — header row no longer aligns
         to anything useful, so hide it. */
      .mv-team-header { display: none; }
    }
    .mv-pm-name {
      font-size: 0.75rem; font-weight: 700; color: #374151;
      text-transform: uppercase; letter-spacing: 0.03em;
      padding: 4px 8px; border-radius: 4px;
      display: inline-block; margin: 0 14px 4px;
    }

    /* Goal Review row — mirrors .et-row pattern: pri / job# / proj name /
       goal pill (flex) / date. Zebra striping matches .gv-row colors so
       Team View and My Goals look like the same surface. */
    .mv-row.et-row { cursor: pointer; background: #eef3f9; }
    .mv-row.et-row:hover { background: #c8ddf0; }
    .mv-row .mv-row-job {
      cursor: pointer; color: var(--bs-secondary); text-decoration: underline;
    }
    .mv-row .mv-row-job:hover { color: var(--bs-primary); }
    .mv-row .mv-row-pill {
      flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
      white-space: nowrap; text-align: center;
    }
    .mv-row .mv-row-date-col {
      width: 110px; flex-shrink: 0; text-align: right; font-size: 0.72rem;
      font-weight: 600;
    }
    .mv-row .mv-row-date-col .mv-due-input {
      width: 100%; max-width: none; text-align: right;
    }
    .mv-row.mv-row-zebra { background: #dce8f5; }
    .mv-row.mv-row-zebra:hover { background: #c8ddf0; }

    /* Mobile — Team View rows become tiles (3-row stacked card) so all the
       info fits without ellipsis truncation on narrow screens. */
    @media (max-width: 640px) {
      .mv-row.et-row {
        display: grid;
        grid-template-columns: auto auto auto 1fr auto;
        grid-template-areas:
          "pri  pm   job  .    date"
          "proj proj proj proj proj"
          "pill pill pill pill pill";
        column-gap: 6px; row-gap: 4px;
        padding: 10px 12px;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        margin: 6px 12px;
        background: #fff; min-height: auto;
      }
      .mv-row.et-row.mv-row-zebra { background: #fafafa; }
      .mv-row.et-row .et-pri  { grid-area: pri; width: auto; }
      .mv-row.et-row .mv-pm-col { grid-area: pm; width: auto; }
      .mv-row.et-row .et-job  { grid-area: job; width: auto; }
      .mv-row.et-row .et-proj {
        grid-area: proj; width: auto; white-space: normal;
        font-weight: 600; color: #1f2937; font-size: 0.85rem;
      }
      .mv-row.et-row .mv-row-pill {
        grid-area: pill; flex: none; text-align: center;
        justify-self: start; padding: 4px 12px; font-size: 0.78rem;
      }
      .mv-row.et-row .mv-row-date-col {
        grid-area: date; width: auto; text-align: right;
      }
      .mv-row.et-row .mv-row-date-col .mv-due-input { width: auto; }
      /* Lose the table-row dividers when tiles take over */
      .mv-row.et-row { border-bottom: 1px solid #e5e7eb; }
    }

    .mv-empty {
      text-align: center; padding: 24px 12px; color: #9ca3af; font-size: 0.85rem;
      font-style: italic; margin: 0 14px;
    }

    /* Notes panel (Team View — bottom section) */
    .mv-notes-loading { padding: 16px; color: #9ca3af; font-style: italic; }
    .mv-notes-panel {
      margin-top: 16px; background: #fff; border: 1px solid #e5e7eb;
      border-radius: 10px; padding: 14px;
    }
    .mv-notes-head {
      display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
      margin-bottom: 10px;
    }
    .mv-notes-label {
      font-size: 0.75rem; color: #6b7280; display: flex; align-items: center; gap: 6px;
    }
    .mv-notes-label input[type="date"] {
      font-size: 0.82rem; padding: 4px 6px; border: 1px solid #d1d5db; border-radius: 4px;
    }
    .mv-notes-meta { font-size: 0.78rem; color: #6b7280; flex: 1 1 auto; }
    .mv-notes-locked {
      font-size: 0.7rem; color: #b45309; background: #fef3c7; padding: 2px 8px;
      border-radius: 4px; font-weight: 600;
    }
    .mv-notes-textarea {
      width: 100%; min-height: 180px; padding: 10px; border: 1px solid #d1d5db;
      border-radius: 6px; font-family: inherit; font-size: 0.88rem; line-height: 1.5;
      resize: vertical; box-sizing: border-box;
    }
    .mv-notes-textarea:focus { outline: none; border-color: var(--bs-primary); }
    .mv-notes-textarea[readonly] { background: #f9fafb; color: #6b7280; cursor: not-allowed; }
    .mv-notes-savestate {
      text-align: right; font-size: 0.7rem; color: #6b7280; min-height: 1.1em;
      margin-top: 4px;
    }
    .mv-commits-list { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
    .mv-commit-row {
      display: flex; align-items: center; gap: 8px; padding: 6px 8px;
      border-radius: 4px; font-size: 0.85rem; color: #374151; cursor: pointer;
    }
    .mv-commit-row:hover { background: #f9fafb; }
    .mv-commit-row input[type="checkbox"] { cursor: pointer; }
    .mv-commit-row.done .mv-commit-desc { text-decoration: line-through; color: #9ca3af; }
    /* Linked-existing-task variant: the .mv-commit-linked pill carries the signal. */
    .mv-commit-row.linked { padding-left: 8px; }
    .mv-commit-linked {
      flex-shrink: 0; font-size: 0.68rem; font-weight: 600;
      color: var(--bs-text-secondary); background: var(--bs-page-bg);
      border: 1px solid var(--bs-border);
      padding: 1px 6px; border-radius: 10px; letter-spacing: 0.02em;
      text-transform: uppercase; white-space: nowrap;
    }
    .mv-commit-pm {
      padding: 2px 8px; border-radius: 4px; font-size: 0.7rem; font-weight: 700;
      color: #374151; text-transform: uppercase; letter-spacing: 0.03em;
    }
    .mv-commit-job {
      color: var(--bs-secondary); font-weight: 600; text-decoration: none;
      font-size: 0.78rem; cursor: pointer;
      max-width: 220px; overflow: hidden; text-overflow: ellipsis;
      white-space: nowrap; display: inline-block; vertical-align: middle;
    }
    .mv-commit-job:hover { text-decoration: underline; }
    .mv-commit-desc { flex: 1; }
    /* Curator link button — appears at the end of each commitment row.
       "Needs link" variant is more prominent (filled pill) to surface
       commitments the LLM couldn't resolve to a goal. */
    .mv-commit-link-btn {
      flex-shrink: 0; cursor: pointer; user-select: none;
      background: transparent; border: 1px solid transparent;
      color: #9ca3af; font-size: 0.78rem;
      padding: 2px 6px; border-radius: 4px;
      transition: background 0.12s, color 0.12s, border-color 0.12s;
    }
    .mv-commit-link-btn:hover {
      background: #f3f4f6; color: #1f2937; border-color: #d1d5db;
    }
    .mv-commit-link-btn.needs-link {
      background: #fef3c7; color: #b45309; border-color: #fcd34d;
      font-weight: 600; font-size: 0.72rem;
    }
    .mv-commit-link-btn.needs-link:hover {
      background: #fde68a; color: #92400e; border-color: #f59e0b;
    }

    /* Drawer — due date inline editor inside the goal pill header. */
    .d-goal-due { display: inline-flex; align-items: center; flex-shrink: 0; }
    .d-goal-due .mv-due-input { font-size: 0.72rem; max-width: 100px; }

    /* Inline goal editors (priority + due date — both tabs) */
    /* Priority chip reuses .task-pri-emoji from the rest of the app — only
       override cursor (task-pri-emoji has cursor:default since it's static
       elsewhere; in Goal Review it's clickable to cycle). */
    .mv-prio-chip { cursor: pointer; }
    .mv-prio-chip:hover { transform: scale(1.15); }
    .mv-due-input {
      font-size: 0.78rem; font-weight: 600; padding: 1px 4px;
      border: 1px solid transparent; border-radius: 4px;
      background: transparent; cursor: pointer; font-family: inherit;
      max-width: 110px;
    }
    .mv-due-input:hover, .mv-due-input:focus {
      border-color: #d1d5db; background: #fff; outline: none;
    }
    .mv-due-input:invalid { color: #9ca3af; }

    /* Hygiene strip (My Goals tab — top of project list) */
    .mv-hyg-strip {
      display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px;
    }
    .mv-hyg-chip {
      display: flex; align-items: center; gap: 6px;
      padding: 6px 12px; border: 1px solid #e5e7eb; border-radius: 6px;
      background: #fff; cursor: pointer; font-family: inherit;
      transition: all 0.12s;
    }
    .mv-hyg-chip:hover:not(.muted) { border-color: var(--bs-primary); }
    .mv-hyg-chip.muted { opacity: 0.55; cursor: default; }
    .mv-hyg-chip.active { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
    .mv-hyg-chip.active .mv-hyg-num { color: #fff; }
    .mv-hyg-chip.active .mv-hyg-lbl { color: #fff; }
    .mv-hyg-num { font-size: 1.05rem; font-weight: 700; color: #111827; }
    .mv-hyg-lbl { font-size: 0.78rem; color: #6b7280; }
    .mv-hyg-chip.warn:not(.active):not(.muted) .mv-hyg-num { color: #b45309; }
    .mv-hyg-chip.bad:not(.active):not(.muted) .mv-hyg-num { color: #b91c1c; }

    /* Prior-meeting commitments slot at the top of the Last Week column */
    .mv-prior-commits {
      background: #fef3c7; border: 1px solid #fde68a; border-radius: 6px;
      padding: 8px 10px; margin: 0 14px 12px;
    }
    .mv-prior-commits-head {
      font-size: 0.72rem; font-weight: 700; color: #92400e;
      text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px;
    }
    .mv-prior-commits .mv-commit-row { padding: 4px 4px; font-size: 0.82rem; }
    .mv-prior-commits .mv-commit-row:hover { background: rgba(255,255,255,0.5); }

    /* Summary layout */
    .pp-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    @media (max-width: 768px) { .pp-summary { grid-template-columns: 1fr; } }

    /* Mobile: 3-row hero with the project number as the visual anchor.
       Row 1: Back (left) + SharePoint/City/Ledger chip cluster (right).
       Row 2: Job # (big, tap-to-switch) + project name + PM.
       Row 3: Prev / count / Next (left) + Delete (right). */
    @media (max-width: 768px) {
      .app-content { overflow-x: hidden; }
      .pp-header {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 12px;
        align-items: center;
      }

      /* --- Row 1 (top utility row) --- */
      .pp-back {
        order: 1; flex: 0 0 auto;
        padding: 6px 10px; font-size: 0.82rem;
        background: rgba(255,255,255,0.06);
        border-radius: 6px;
      }
      #ppSyncLink { display: none !important; }
      /* Push the action chip cluster to the right of the back button. */
      #ppSPLink { margin-left: auto; }
      #ppSPLink, #ppCityLink, .pp-ledger-btn { order: 1; }
      .pp-sp-link {
        font-size: 0.7rem; padding: 5px 9px; border-radius: 6px;
        background: rgba(255,255,255,0.08);
        border: 1px solid rgba(255,255,255,0.15);
        opacity: 1;
      }
      .pp-sp-link:hover { background: rgba(255,255,255,0.18); }
      .pp-ledger-btn { padding: 5px 9px !important; }

      /* --- Row 2 (hero) --- Job # is the headline. Tap opens the switcher. */
      .pp-title {
        order: 2;
        flex: 1 1 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        margin-top: 4px;
      }
      .pp-job {
        font-size: 1.45rem;
        font-weight: 800;
        color: #fff;
        opacity: 1;
        padding: 4px 12px;
        background: rgba(255,255,255,0.1);
        border: 1px solid rgba(255,255,255,0.22);
        border-radius: 8px;
        letter-spacing: 0.01em;
        font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
      }
      /* Inline caret signals "this is a picker." */
      .pp-job::after {
        content: " \25BE";
        opacity: 0.65;
        font-size: 0.75em;
        font-family: inherit;
      }
      .pp-name {
        font-size: 1.05rem;
        font-weight: 600;
        white-space: normal;
        line-height: 1.25;
      }
      .pp-name-edit { font-size: 0.95rem; }
      .pp-pm {
        order: 3;
        flex: 1 1 100%;
        font-size: 0.74rem;
        opacity: 0.7;
        margin-top: -2px;
      }

      /* Switcher popup goes full-width below the job# trigger. */
      .pp-switcher {
        position: absolute; top: calc(100% + 6px); left: 0; right: 0;
        width: auto; max-width: none;
      }
      .pp-switcher-list { max-height: 60vh; }

      /* --- Row 3 (nav + delete) --- */
      .pp-nav {
        order: 4; flex: 1 1 auto;
        margin-left: 0; gap: 6px;
        margin-top: 4px;
      }
      .pp-nav-btn { padding: 5px 10px; font-size: 0.74rem; }
      .pp-nav-count { font-size: 0.7rem; }
      .pp-delete-btn {
        order: 5; flex: 0 0 auto;
        margin-left: auto;
        margin-top: 4px;
        padding: 5px 10px; font-size: 0.72rem;
      }

      .pp-body { padding: 0 12px; max-width: 100%; }

      /* Replace 9-tab horizontal strip with a section picker — no scrollbar,
         no clipped tabs, taps open the native picker on iOS/Android.
         Hamburger on the left telegraphs "this opens a menu"; primary-blue
         fill makes it the most prominent control on the page. */
      .pp-tabs { display: none; }
      .pp-tabs-mobile {
        display: block;
        width: 100%;
        margin: 10px 0 14px;
        padding: 11px 38px 11px 44px;
        font-size: 0.95rem;
        font-weight: 700;
        color: #fff;
        background-color: var(--bs-primary, #23486A);
        border: 1px solid var(--bs-primary, #23486A);
        border-radius: 8px;
        appearance: none;
        -webkit-appearance: none;
        background-image:
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12'%3E%3Crect width='16' height='2' fill='%23ffffff' rx='1'/%3E%3Crect y='5' width='16' height='2' fill='%23ffffff' rx='1'/%3E%3Crect y='10' width='16' height='2' fill='%23ffffff' rx='1'/%3E%3C/svg%3E"),
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23ffffff' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
        background-repeat: no-repeat, no-repeat;
        background-position: left 14px center, right 14px center;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12);
      }
      .pp-tabs-mobile:focus { outline: 2px solid var(--bs-focus-ring, rgba(35,72,106,0.25)); outline-offset: 1px; }

      .pp-card { min-width: 0; max-width: 100%; overflow: hidden; }
    }
    .pp-card {
      border: 1px solid #e5e7eb; border-radius: 10px; padding: 16px;
      background: #fff;
    }
    .pp-card-title {
      font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
      letter-spacing: 0.05em; color: #6b7280; margin-bottom: 10px;
    }
    .pp-stat-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
    .pp-stat-label { font-size: 0.8rem; color: #6b7280; }
    .pp-stat-value { font-size: 0.88rem; font-weight: 600; color: #1f2937; }
    .pp-goal-item {
      display: flex; align-items: center; gap: 10px; padding: 8px 0;
      border-bottom: 1px solid #f1f5f9; cursor: pointer; transition: background 0.12s;
    }
    .pp-goal-item:hover { background: #f8fafc; margin: 0 -8px; padding: 8px; border-radius: 6px; }
    .pp-goal-item:last-child { border-bottom: none; }
    /* Gantt Chart */
    .pp-gantt { width: 100%; position: relative; overflow: hidden; }
    .pp-gantt-header { display: flex; align-items: flex-end; margin-bottom: 4px; border-bottom: 1px solid #e5e7eb; padding-bottom: 4px; }
    .pp-gantt-label-col { display: none; }
    .pp-gantt-timeline { flex: 1; position: relative; height: 18px; }
    .pp-gantt-date-col { display: none; }
    .pp-gantt-month { position: absolute; bottom: 0; font-size: 0.65rem; color: #9ca3af; transform: translateX(-50%); }
    .pp-gantt-today { position: absolute; top: 0; width: 2px; height: 100%; background: #ef4444; opacity: 0.4; z-index: 1; pointer-events: none; }
    .pp-gantt-body { position: relative; overflow: hidden; }
    .pp-gantt-row { display: flex; align-items: center; min-height: 46px; border-bottom: 1px solid #f1f5f9; }
    .pp-gantt-row:hover { background: #f8fafc; }
    .pp-gantt-label { display: none; }
    .pp-gantt-track { flex: 1; position: relative; height: 40px; }
    .pp-gantt-bar { position: absolute; top: 1px; height: 22px; border-radius: 9999px; cursor: pointer; overflow: hidden; min-width: 8px; transition: all 0.15s; display: flex; align-items: center; border: 2px solid transparent; }
    .pp-gantt-bar:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
    .pp-gantt-bar.status-on_track { border-color: #107C10; }
    .pp-gantt-bar.status-behind { border-color: #F0C040; }
    .pp-gantt-bar.status-at_risk { border-color: #E07070; }
    .pp-gantt-bar.status-not_started { border-color: transparent; opacity: 0.7; }
    .pp-gantt-bar.status-closed { border-color: transparent; opacity: 0.4; }
    .pp-gantt-bar-fill { position: absolute; right: 0; top: 0; bottom: 0; background: rgba(255,255,255,0.45); pointer-events: none; }
    .pp-gantt-bar-label { position: relative; z-index: 1; font-size: 0.62rem; font-weight: 500; color: #1f2937; padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.7; }
    .pp-gantt-sublabel { position: absolute; top: 24px; font-size: 0.72rem; font-weight: 600; color: #374151; white-space: nowrap; pointer-events: none; }
    .pp-gantt-start-inline { position: absolute; top: 4px; font-size: 0.62rem; color: #6b7280; white-space: nowrap; margin-right: 4px; text-align: right; }
    .pp-gantt-due-inline { position: absolute; top: 4px; font-size: 0.62rem; color: #6b7280; white-space: nowrap; margin-left: 4px; cursor: pointer; }
    .pp-gantt-due-inline:hover { color: var(--bs-secondary); text-decoration: underline; }
    .pp-gantt-milestone { position: absolute; top: 4px; width: 12px; height: 12px; transform: translateX(-6px) rotate(45deg); border: 2px solid #6b7280; background: white; cursor: pointer; z-index: 2; }
    .pp-gantt-milestone:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.2); }
    .pp-flow-del { background: none; border: none; cursor: pointer; opacity: 0.2; font-size: 0.6rem; padding: 0; }
    .pp-flow-del:hover { opacity: 1; }
    /* Goal Editor modal */
    .pp-ge-dep-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin-bottom: 4px; background: #f8fafc; border-radius: 6px; border: 1px solid #e5e7eb; flex-wrap: wrap; }
    .pp-ge-dep-row:hover { border-color: #93c5fd; }
    .pg-edit-goal-btn { cursor: pointer; font-size: 0.78rem; opacity: 0.3; position: relative; z-index: 1; padding: 0 4px; }
    .pg-edit-goal-btn:hover { opacity: 1; }
    .pp-flow-ext { margin-top: 12px; background: #f8fafc; border-radius: 8px; padding: 10px 14px; }
    .pp-flow-ext-title { font-size: 0.72rem; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
    .pp-flow-ext-item { font-size: 0.73rem; color: #374151; padding: 3px 0; border-bottom: 1px solid #e5e7eb; display: inline-block; margin-right: 12px; }
    .pp-flow-ext-item:last-child { border-bottom: none; }
    .pp-deliv-pill {
      font-size: 0.7rem; font-weight: 600; padding: 3px 10px; border-radius: 9999px;
      white-space: nowrap; color: #1f2937;
    }
    .pp-deliv-stats { font-size: 0.75rem; color: #6b7280; margin-left: auto; white-space: nowrap; }
    .pp-team-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #f1f5f9; }
    .pp-team-row:last-child { border-bottom: none; }
    .pp-team-role { font-size: 0.78rem; color: #6b7280; }
    .pp-team-name { font-size: 0.78rem; font-weight: 600; color: #1f2937; }
    .pp-activity-item { padding: 8px 0; border-bottom: 1px solid #f1f5f9; }
    .pp-activity-item:last-child { border-bottom: none; }
    .pp-activity-date { font-size: 0.75rem; color: #6b7280; }
    .pp-activity-text { font-size: 0.8rem; color: #1f2937; margin-top: 2px; }

    /* Grid layout — controls */
    .pp-grid-controls { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
    .pp-grid-toggle {
      display: inline-flex; border: 1px solid #d1d5db; border-radius: 6px; overflow: hidden;
    }
    .pp-grid-toggle-btn {
      padding: 6px 14px; font-size: 0.78rem; background: #fff; border: none;
      cursor: pointer; color: #6b7280; transition: all 0.12s;
    }
    .pp-grid-toggle-btn.active { background: var(--bs-primary); color: #fff; }
    .pp-grid-toggle-btn:not(:last-child) { border-right: 1px solid #d1d5db; }
    .pp-grid-stats { font-size: 0.75rem; color: #6b7280; }

    /* Grid — section containers */
    .pg-section {
      margin-bottom: 10px; border: 1px solid #e0e0e0; border-radius: 8px;
      overflow: visible; background: #fff;
    }

    /* Grid — goal header */
    .pg-deliv-header {
      display: flex; align-items: center; gap: 8px; padding: 8px 16px;
      font-weight: 700; font-size: 0.85rem; cursor: pointer; position: relative;
      overflow: visible; user-select: none; transition: filter 0.12s;
      border-radius: 8px 8px 0 0;
    }
    .pg-deliv-header:hover { filter: brightness(0.95); }
    .pg-deliv-fill {
      position: absolute; right: 0; top: 0; bottom: 0;
      background: rgba(255,255,255,0.45); pointer-events: none;
      transition: width 0.3s; border-radius: 0 8px 0 0;
    }
    .pg-deliv-name {
      font-size: 0.85rem; font-weight: 700; color: #1f2937;
      white-space: nowrap; position: relative; z-index: 1;
    }
    .pg-deliv-meta {
      display: flex; align-items: center; gap: 4px; font-size: 0.75rem;
      font-weight: 500; color: #374151; position: relative; z-index: 1;
      white-space: nowrap;
    }
    .pg-deliv-pct {
      margin-left: auto; font-size: 0.82rem; font-weight: 700; color: #1f2937;
      position: relative; z-index: 1; white-space: nowrap;
    }
    .pg-add-task-btn {
      position: relative; z-index: 1; margin-left: 8px;
      width: 22px; height: 22px; border-radius: 50%;
      background: rgba(255,255,255,0.7); border: 1px solid rgba(0,0,0,0.15);
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 1rem; font-weight: 700; color: var(--bs-primary); cursor: pointer;
      line-height: 1; transition: background 0.15s, transform 0.15s;
    }
    .pg-add-task-btn:hover { background: #fff; transform: scale(1.15); box-shadow: 0 1px 4px rgba(0,0,0,0.15); }

    /* Task modal form styles */
    .pp-tm-label { display: block; font-size: 0.75rem; font-weight: 600; color: #6b7280; margin-bottom: 4px; margin-top: 10px; }
    .pp-tm-input { display: block; width: 100%; padding: 7px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.85rem; margin-bottom: 4px; box-sizing: border-box; }
    .pp-tm-input:focus { outline: none; border-color: var(--bs-accent); box-shadow: 0 0 0 2px var(--bs-focus-ring); }
    .pp-tm-deliv-pill { border: 2px solid transparent; transition: border-color 0.15s; }
    .pp-tm-deliv-pill:hover { filter: brightness(0.95); }
    .pp-tm-selected { border-color: var(--bs-primary) !important; }

    /* Grid — column header */
    .pg-col-header {
      display: flex; align-items: center; gap: 8px; padding: 6px 16px;
      font-size: 0.72rem; font-weight: 600; text-transform: uppercase; color: #6b7280;
      border-bottom: 1px solid #e5e7eb; background: #fff;
      position: sticky; top: 0; z-index: 2;
    }

    /* Grid — parent/summary row */
    .pg-parent-row {
      display: flex; align-items: center; gap: 8px; padding: 6px 16px;
      font-weight: 600; font-size: 0.82rem; cursor: pointer; position: relative;
      overflow: hidden; user-select: none; transition: filter 0.12s;
      border-bottom: 1px solid #f0f0f0;
    }
    .pg-parent-row:hover { filter: brightness(0.95); }
    .pg-parent-fill {
      position: absolute; right: 0; top: 0; bottom: 0;
      background: rgba(255,255,255,0.5); pointer-events: none;
    }
    .pg-parent-meta {
      display: flex; align-items: center; gap: 4px; font-size: 0.75rem;
      font-weight: 500; color: #374151; position: relative; z-index: 1;
      white-space: nowrap;
    }
    .pg-parent-pct {
      margin-left: auto; font-size: 0.78rem; font-weight: 700; color: #1f2937;
      position: relative; z-index: 1;
    }

    /* Grid — leaf task row */
    .pg-row {
      display: flex; align-items: center; gap: 8px; padding: 5px 16px;
      font-size: 0.82rem; min-height: 32px; background: #fff;
      border-bottom: 1px solid #f0f0f0; transition: filter 0.08s;
    }
    .pg-row:hover { filter: brightness(0.97); }
    .pg-row.flash-green { background: #dcfce7 !important; transition: background 0.3s; }
    .pg-row.flash-red { background: #fee2e2 !important; transition: background 0.3s; }
    .pg-row.pg-done { opacity: 0.5; }
    .pg-row.pg-done .pg-col-name { text-decoration: line-through; }

    /* Grid — column widths */
    .pg-col-check { width: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
    .pg-col-pri { width: 24px; flex-shrink: 0; text-align: center; }
    .pg-col-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #1f2937; }
    .pg-trigger-bolt { color: #f59e0b; font-size: 0.7rem; cursor: help; margin-left: 3px; }
    .pg-guide-btn {
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 0.78rem; cursor: pointer; margin-left: 5px;
      background: var(--bs-primary-light); color: var(--bs-primary); border: 1px solid var(--bs-border);
      border-radius: 999px; padding: 1px 6px; line-height: 1;
      transition: background 0.12s, border-color 0.12s, color 0.12s;
    }
    .pg-guide-btn:hover { background: var(--bs-zebra-hover); border-color: var(--bs-border-strong); color: var(--bs-primary-hover); }
    .pg-col-deliv { width: 140px; flex-shrink: 0; }
    .pg-col-assignee { width: 120px; flex-shrink: 0; }
    .pg-col-due { width: 100px; flex-shrink: 0; }
    .pg-col-wait { width: 45px; flex-shrink: 0; text-align: center; font-size: 0.75rem; }
    .pg-col-offset { width: 55px; flex-shrink: 0; color: #6b7280; font-size: 0.75rem; }
    .pg-col-effort { width: 55px; flex-shrink: 0; }
    .pg-col-pct { width: 70px; flex-shrink: 0; text-align: right; display: flex; align-items: center; justify-content: flex-end; gap: 4px; }

    /* Grid — shared elements */
    .pg-sep { color: #9ca3af; margin: 0 2px; font-size: 0.75rem; position: relative; z-index: 1; }
    .pp-chevron {
      display: inline-block; width: 16px; cursor: pointer; font-size: 0.7rem;
      transition: transform 0.15s; color: #6b7280; user-select: none;
      flex-shrink: 0; position: relative; z-index: 1;
    }
    .pp-chevron.open { transform: rotate(90deg); }
    .pp-task-checkbox {
      width: 16px; height: 16px; border: 1.5px solid #d1d5db; border-radius: 3px;
      display: flex; align-items: center; justify-content: center; cursor: pointer;
      font-size: 0.65rem; color: transparent; transition: all 0.12s; flex-shrink: 0;
    }
    .pp-task-checkbox.done { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
    .pp-inline-input {
      border: 1px solid var(--bs-accent); border-radius: 4px; padding: 2px 6px;
      font-size: 0.82rem; font-family: inherit; outline: none;
      box-shadow: 0 0 0 2px rgba(96,165,250,0.2);
    }
    .pp-pct-bar {
      display: inline-block; width: 40px; height: 6px; background: #e5e7eb;
      border-radius: 3px; overflow: hidden; vertical-align: middle;
    }
    .pp-pct-fill { height: 100%; background: var(--bs-primary); border-radius: 3px; }
    .pp-pct-text { font-size: 0.75rem; color: #6b7280; margin-left: 4px; }
    .pp-assignee-pill {
      font-size: 0.72rem; padding: 1px 7px; border-radius: 9999px;
      white-space: nowrap; display: inline-block;
    }
    .pp-no-goal { color: #6b7280; font-style: italic; font-size: 0.78rem; }
    .pp-deliv-tag {
      font-size: 0.68rem; padding: 1px 6px; border-radius: 9999px;
      white-space: nowrap; display: inline-block; margin-left: 6px;
    }
    /* Indent levels */
    .pg-indent-0 { padding-left: 8px; }
    .pg-indent-1 { padding-left: 28px; }
    .pg-indent-2 { padding-left: 48px; }
    .pg-indent-3 { padding-left: 68px; }
    .pg-indent-4 { padding-left: 88px; }
    .pg-indent-5 { padding-left: 108px; }

    /* ═══ PROJECT WIZARD ═══ */
    .wiz-overlay { position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.5);animation:fadeIn 0.15s ease }
    .wiz-modal { background:#fff;border-radius:14px;width:94vw;max-width:520px;max-height:90vh;overflow-y:auto;box-shadow:0 12px 48px rgba(0,0,0,0.25);display:flex;flex-direction:column }
    .wiz-header { background:var(--sidebar-bg);padding:16px 20px;border-radius:14px 14px 0 0;display:flex;justify-content:space-between;align-items:center }
    .wiz-close { background:none;border:none;color:rgba(255,255,255,0.7);font-size:1.2rem;cursor:pointer;padding:4px 8px }
    .wiz-close:hover { color:#fff }
    .wiz-steps { display:flex;align-items:center;padding:16px 20px 8px;gap:0 }
    .wiz-step { display:flex;align-items:center;gap:6px;white-space:nowrap }
    .wiz-step-num { width:24px;height:24px;border-radius:50%;background:#e5e7eb;color:#6b7280;display:flex;align-items:center;justify-content:center;font-size:0.72rem;font-weight:600 }
    .wiz-step.active .wiz-step-num { background:var(--bs-primary);color:#fff }
    .wiz-step.done .wiz-step-num { background:#22c55e;color:#fff }
    .wiz-step-label { font-size:0.7rem;color:#9ca3af }
    .wiz-step.active .wiz-step-label { color:var(--bs-primary);font-weight:600 }
    .wiz-step-line { flex:1;height:2px;background:#e5e7eb;margin:0 6px;min-width:12px }
    .wiz-step-line.done { background:#22c55e }
    .wiz-body { padding:20px;flex:1 }
    .wiz-nav { display:flex;justify-content:space-between;padding:12px 20px 20px;border-top:1px solid #f3f4f6 }
    .wiz-field { margin-bottom:14px }
    .wiz-label { display:block;font-size:0.78rem;font-weight:600;color:#374151;margin-bottom:4px }
    .wiz-input { width:100%;padding:8px 12px;border:1px solid #d1d5db;border-radius:8px;font-size:0.85rem;box-sizing:border-box;outline:none;transition:border 0.15s }
    .wiz-input:focus { border-color:var(--bs-accent);box-shadow:0 0 0 2px var(--bs-focus-ring) }
    .wiz-error { color:#dc2626;font-size:0.78rem;margin-top:8px;padding:8px 12px;background:#fef2f2;border-radius:6px }
    .wiz-city-grid { display:flex;gap:10px;flex-wrap:wrap }
    .wiz-city-card { flex:1;min-width:120px;padding:14px;border:2px solid #e5e7eb;border-radius:10px;cursor:pointer;text-align:center;transition:all 0.15s }
    .wiz-city-card:hover { border-color:#93c5fd }
    .wiz-city-card.selected { border-color:var(--bs-primary);background:#f0f6ff }
    .wiz-city-name { font-weight:600;font-size:0.88rem;color:#111827 }
    .wiz-city-sub { font-size:0.68rem;color:#6b7280;margin-top:4px }
    .wiz-toggle-row { display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid #f3f4f6 }
    .wiz-toggle-label { font-size:0.85rem;font-weight:500;color:#111827 }
    .wiz-toggle-sub { font-size:0.7rem;color:#6b7280;margin-top:2px }
    .wiz-toggle { display:flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;padding:4px }
    .wiz-toggle-track { width:40px;height:22px;border-radius:11px;background:#d1d5db;position:relative;transition:background 0.2s }
    .wiz-toggle.on .wiz-toggle-track { background:var(--bs-primary) }
    .wiz-toggle-thumb { position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform 0.2s;box-shadow:0 1px 3px rgba(0,0,0,0.2) }
    .wiz-toggle.on .wiz-toggle-thumb { transform:translateX(18px) }
    .wiz-toggle-text { font-size:0.75rem;color:#6b7280;min-width:24px }
    .wiz-check-row { display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid #f3f4f6;cursor:pointer }
    .wiz-check-row input[type=checkbox] { margin-top:3px;accent-color:var(--bs-primary);width:18px;height:18px }
    .wiz-hint { font-size:0.72rem;color:#ea580c;background:#fff7ed;padding:8px 12px;border-radius:6px;margin-bottom:14px }
    .wiz-review-section { margin-bottom:16px }
    .wiz-review-header { font-size:0.82rem;font-weight:600;color:var(--bs-primary);margin-bottom:8px;padding-bottom:4px;border-bottom:1px solid #e5e7eb }
    .wiz-review-row { display:flex;justify-content:space-between;font-size:0.8rem;padding:3px 0 }
    .wiz-review-key { color:#6b7280 }
    .wiz-block-grid { display:flex;flex-wrap:wrap;gap:6px }
    .wiz-block-pill { padding:5px 12px;border-radius:16px;font-size:0.72rem;font-weight:500;border:1.5px solid;cursor:pointer;transition:all 0.15s }
    .wiz-block-pill.on { background:#f0f6ff;border-color:var(--bs-primary);color:var(--bs-primary) }
    .wiz-block-pill.off { background:#f9fafb;border-color:#d1d5db;color:#9ca3af;text-decoration:line-through }
    .wiz-block-pill:hover { opacity:0.85 }
    .wiz-review-footer { font-size:0.72rem;color:#6b7280;text-align:center;margin-top:12px;padding-top:10px;border-top:1px solid #f3f4f6 }
    .wiz-dropdown { position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #d1d5db;border-radius:8px;max-height:200px;overflow-y:auto;z-index:10;box-shadow:0 4px 12px rgba(0,0,0,0.1);margin-top:2px }
    .wiz-dd-item { padding:8px 12px;font-size:0.82rem;cursor:pointer;border-bottom:1px solid #f3f4f6 }
    .wiz-dd-item:hover { background:#f0f6ff }
    .wiz-dd-item:last-child { border-bottom:none }

    /* ═══ CITY CONTACTS ═══ */
    .pp-contact-input { border:1px solid #d1d5db;border-radius:6px;padding:3px 8px;font-size:0.8rem;width:200px;background:#fff }
    .pp-contact-input:focus { outline:none;border-color:var(--bs-accent);box-shadow:0 0 0 2px var(--bs-focus-ring) }
    /* ── Contacts page (city-contacts.js) ─────────────────── */
    .cc-page { padding: 16px 24px; }
    .cc-toolbar { display:flex; align-items:center; gap:12px; padding:8px 0 12px; flex-wrap:wrap; }
    .cc-title { margin:0; font-size:1.1rem; font-weight:700; color:var(--bs-primary); }
    .cc-tabs { display:flex; gap:6px; flex-wrap:wrap; }
    .cc-tab-btn { font-size:0.82rem; padding:6px 16px; }
    .cc-toolbar-spacer { flex:1; }
    .cc-filter-toggle { display:flex; gap:0; border:1px solid #d1d5db; border-radius:6px; overflow:hidden; }
    .cc-filter-btn { font-size:0.75rem; padding:5px 12px; border:none; cursor:pointer; background:#fff; color:#374151; }
    .cc-filter-btn.active { background:var(--bs-primary); color:#fff; }
    .cc-add-btn { font-size:0.78rem; padding:6px 14px; }

    .cc-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
    .cc-del-btn { font-size:0.85rem; padding:4px 8px; background:none; border:1px solid #e5e7eb; border-radius:4px; color:#ef4444; cursor:pointer; }
    .cc-del-btn:hover { background:#fef2f2; border-color:#fca5a5; }
    .cc-row-saved { animation: cc-flash 0.6s ease-out; }
    @keyframes cc-flash {
      0%   { background: #ecfdf5; box-shadow: inset 3px 0 0 #22c55e; }
      100% { background: transparent; box-shadow: inset 3px 0 0 transparent; }
    }

    /* Search + sub-filters */
    .cc-search { font-size:0.85rem; padding:6px 10px; border:1px solid #d1d5db; border-radius:6px; width:200px; min-width:140px; }
    .cc-search:focus { outline:none; border-color:var(--bs-accent); box-shadow:0 0 0 2px var(--bs-focus-ring); }
    .cc-subfilters { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:10px; }
    .cc-subfilter-group { display:flex; gap:4px; padding:3px; background:#f3f4f6; border-radius:6px; }
    .cc-subfilter-btn { font-size:0.74rem; padding:4px 10px; border:none; background:transparent; color:#6b7280; cursor:pointer; border-radius:4px; font-family:inherit; }
    .cc-subfilter-btn:hover { background:#fff; color:#374151; }
    .cc-subfilter-btn.active { background:#fff; color:var(--bs-primary); font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,0.06); }

    /* Phone/email tap actions (mobile only) */
    .cc-input-with-action { display:flex; align-items:center; gap:6px; width:100%; }
    .cc-input-with-action input { flex:1; min-width:0; }
    .cc-tel-link, .cc-mail-link { display:none; }
    .cc-table { width:100%;border-collapse:collapse;font-size:0.8rem }
    .cc-table th { text-align:left;padding:6px 8px;background:#f3f4f6;border-bottom:2px solid #e5e7eb;font-weight:600;font-size:0.72rem;text-transform:uppercase;letter-spacing:0.03em;color:#6b7280 }
    .cc-table td { padding:4px 8px;border-bottom:1px solid #e5e7eb }
    .cc-table input:not([type=checkbox]) { border:1px solid transparent;padding:2px 4px;width:100%;font-size:0.78rem;border-radius:4px;background:transparent }
    .cc-table input:not([type=checkbox]):focus { border-color:var(--bs-accent);outline:none;background:#fff }
    .cc-table tr:hover input:not([type=checkbox]) { background:#f9fafb }

    /* Zebra striping — tablet + desktop only (phone is card layout).
       Palette matches the standard Projects list-view rows: base #eef3f9,
       even #dce8f5, hover #c8ddf0. See ui-standards "Zebra Striping". */
    @media (min-width: 768px) {
      .cc-table tbody tr { background: #eef3f9; }
      .cc-table tbody tr:nth-child(even) { background: #dce8f5; }
      .cc-table tbody tr:hover { background: #c8ddf0; }
    }

    /* iPad portrait — keep table but scrollable inside wrap; wrap toolbar */
    @media (max-width: 1023px) and (min-width: 768px) {
      .cc-page { padding: 12px 14px; }
      .cc-table { min-width: 900px; }
      .cc-toolbar { gap: 8px; padding: 4px 0 10px; }
      .cc-toolbar-spacer { flex-basis: 100%; height: 0; }
    }

    /* Phone + small tablet — transform each row into a compact stacked card */
    @media (max-width: 767px) {
      .cc-page { padding: 8px 10px; }
      .cc-title { font-size: 1rem; }
      .cc-toolbar { gap: 6px; padding: 4px 0 10px; }
      .cc-toolbar-spacer { flex-basis: 100%; height: 0; }
      .cc-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; order: 0; }
      .cc-tabs::-webkit-scrollbar { display: none; }
      .cc-tab-btn { padding: 7px 12px; font-size: 0.78rem; white-space: nowrap; flex-shrink: 0; min-height: 36px; }
      .cc-search { flex:1; min-width: 0; }
      .cc-filter-btn { padding: 7px 12px; font-size: 0.76rem; min-height: 36px; }
      .cc-add-btn { padding: 7px 12px; font-size: 0.78rem; min-height: 36px; }

      .cc-subfilters { gap: 8px; }
      .cc-subfilter-btn { padding: 6px 10px; min-height: 32px; font-size: 0.72rem; }

      .cc-table-wrap { overflow-x: visible; }
      .cc-table { border: none; }
      .cc-table thead { display: none; }
      .cc-table, .cc-table tbody, .cc-table tr, .cc-table td { display: block; width: 100%; }
      .cc-table tr {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        margin-bottom: 8px;
        padding: 8px 10px;
        box-shadow: 0 1px 2px rgba(0,0,0,0.04);
      }
      .cc-table td {
        border-bottom: 1px solid #f3f4f6;
        padding: 5px 0;
        text-align: left !important;
        display: grid;
        grid-template-columns: 92px 1fr;
        align-items: center;
        gap: 8px;
      }
      .cc-table td:last-child { border-bottom: none; }
      .cc-table td::before {
        content: attr(data-label);
        font-size: 0.64rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: #6b7280;
      }
      .cc-table td[data-label=""]::before { content: none; }
      .cc-table td[data-label=""] { grid-template-columns: 1fr; justify-items: end; padding-top: 8px; }
      .cc-table td.cc-actions-cell { display: flex; justify-content: flex-end; gap: 6px; }
      .cc-table td.cc-actions-cell button { font-size: 0.8rem !important; padding: 6px 12px !important; min-height: 32px; }

      .cc-table input:not([type=checkbox]) {
        font-size: 16px; padding: 5px 8px; min-height: 32px;
        border: 1px solid #e5e7eb; background: #fafafa; border-radius: 5px;
      }
      .cc-table input:not([type=checkbox]):focus { background: #fff; border-color: var(--bs-accent); }
      .cc-table tr:hover input:not([type=checkbox]) { background: #fafafa; }
      .cc-table select { font-size: 16px !important; min-height: 32px; padding: 5px 8px !important; border: 1px solid #e5e7eb !important; background: #fafafa !important; border-radius: 5px; }
      .cc-table input[type=checkbox] { width: 20px; height: 20px; }

      /* Show tap-to-call / tap-to-email buttons on phone */
      .cc-tel-link, .cc-mail-link {
        display: inline-flex; align-items: center; justify-content: center;
        width: 38px; height: 38px;
        background: var(--bs-primary-light);
        border-radius: 6px;
        text-decoration: none;
        font-size: 1.05rem;
        flex-shrink: 0;
      }
      .cc-tel-link:active, .cc-mail-link:active { background: var(--bs-accent-light); }
    }

    /* ═══ TEMPLATE EDITOR ═══ */
    .tpl-controls { padding:12px 16px;background:#f9fafb;border-bottom:1px solid #e5e7eb }
    .tpl-city-row { display:flex;align-items:center;gap:12px;margin-bottom:8px }
    .tpl-city-label { font-size:0.78rem;font-weight:600;color:#374151 }
    .tpl-radio { font-size:0.8rem;color:#374151;cursor:pointer;display:flex;align-items:center;gap:4px }
    .tpl-radio input { accent-color:var(--bs-primary) }
    .tpl-tag-row { display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px }
    .tpl-tag-btn { padding:4px 12px;border-radius:16px;font-size:0.72rem;font-weight:600;border:2px solid var(--tag-color);color:var(--tag-color);background:#fff;cursor:pointer;transition:all 0.15s }
    .tpl-tag-btn.active { background:var(--tag-color);color:#fff }
    .tpl-tag-btn:hover { opacity:0.85 }
    .tpl-stats { font-size:0.72rem;color:#6b7280 }
    .tpl-body { padding:0 }
    .tpl-tag-dot { display:inline-block;width:8px;height:8px;border-radius:50%;margin:0 1px;vertical-align:middle }

    /* Template editor: task name column — resizable in outline view */
    .tpl-col-name { width:340px;min-width:160px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#1f2937;position:relative }
    .tpl-col-resize { position:absolute;right:0;top:0;bottom:0;width:5px;cursor:col-resize;z-index:3 }
    .tpl-col-resize:hover, .tpl-col-resize.dragging { background:rgba(59,130,246,0.3) }

    /* Template editor: inline tag strip — fills middle, pushes wait/effort to right */
    .tpl-col-tags-inline { display:flex;align-items:center;gap:2px;flex:1;flex-wrap:wrap }
    .tpl-col-tags-hdr { flex:1 }

    /* Each inline tag toggle pill */
    .tpl-tag-pill { display:inline-block;font-size:0.7rem;font-weight:500;padding:3px 10px;border-radius:999px;border:1.5px solid var(--tag-color);cursor:pointer;white-space:nowrap;transition:all 0.15s;user-select:none;position:relative;z-index:2 }
    .tpl-tag-pill.on { background:var(--tag-color);color:#fff }
    .tpl-tag-pill.off { background:#fff;color:var(--tag-color);opacity:0.35 }
    .tpl-tag-pill.off:hover { opacity:0.7 }

    /* Template editor: tighter gap on rows to align with header */
    .tpl-col-header { gap:4px }
    .tpl-row { gap:4px !important }
    .tpl-parent-row { background:#f8f9fb !important;border-bottom:1px solid #e0e3e8 !important;font-weight:700 }
    .tpl-parent-row:hover { background:#f0f2f5 !important }
    .tpl-parent-row .tpl-col-tags-inline { min-width:auto }
    /* Template task row — clickable */
    .tpl-row { cursor:pointer }

    /* Up/down reorder arrows in the seq cell */
    .tpl-reorder-arrow {
      display:inline-block;
      font-size:0.62rem;
      color:#9ca3af;
      cursor:pointer;
      padding:1px 3px;
      border-radius:3px;
      user-select:none;
      line-height:1;
    }
    .tpl-reorder-arrow:hover { color:#1f2937; background:#e5e7eb }

    /* Reorder arrows on live project grid task rows */
    .pg-reorder-arrow {
      display:inline-block;
      font-size:0.62rem;
      color:#9ca3af;
      cursor:pointer;
      padding:1px 2px;
      border-radius:3px;
      user-select:none;
      line-height:1;
    }
    .pg-reorder-arrow:hover { color:#1f2937; background:#e5e7eb }
    .tpl-row:hover { background:rgba(59,130,246,0.04) !important }

    /* Template edit dialog */
    .tpl-dialog-overlay { position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:1000;display:flex;align-items:center;justify-content:center }
    .tpl-dialog { background:#fff;border-radius:12px;width:480px;max-width:95vw;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,0.3) }
    .tpl-dialog-header { display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#1e293b;color:#fff;border-radius:12px 12px 0 0 }
    .tpl-dialog-header h3 { margin:0;font-size:0.95rem;font-weight:600 }
    .tpl-dialog-close { background:none;border:none;color:#fff;font-size:1.2rem;cursor:pointer;opacity:0.7;padding:0 4px }
    .tpl-dialog-close:hover { opacity:1 }
    .tpl-dialog-body { padding:20px }
    .tpl-dialog-field { margin-bottom:16px }
    .tpl-dialog-field label { display:block;font-size:0.75rem;font-weight:600;color:#374151;margin-bottom:4px }
    .tpl-dialog-field input { width:100%;padding:8px 10px;border:1px solid #d1d5db;border-radius:6px;font-size:0.85rem;box-sizing:border-box }
    .tpl-dialog-field input:focus { outline:none;border-color:var(--bs-accent);box-shadow:0 0 0 2px var(--bs-focus-ring) }
    .tpl-dialog-tags { display:flex;flex-wrap:wrap;gap:6px;margin-top:4px }
    .tpl-goal-picker { flex-wrap:wrap;gap:4px;margin-top:6px;padding:8px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px }
    .tpl-dialog-footer { display:flex;justify-content:space-between;align-items:center;padding:12px 20px;border-top:1px solid #e5e7eb }
    .tpl-dialog-save { background:var(--bs-primary);color:#fff;border:none;padding:8px 20px;border-radius:6px;font-size:0.8rem;font-weight:600;cursor:pointer }
    .tpl-dialog-save:hover { background:var(--bs-primary-hover) }
    .tpl-dialog-delete { background:none;border:none;color:#dc2626;font-size:0.78rem;cursor:pointer;padding:4px 8px }
    .tpl-dialog-delete:hover { text-decoration:underline }
    .tpl-del-btn:hover { opacity:1;color:#dc2626 }

    /* ═══ GUIDE LIBRARY (admin) ═══ */
    .gl-wrap { display:flex;height:calc(100vh - 0px);min-height:0;background:#f6f7f9 }
    .gl-side { width:300px;flex-shrink:0;border-right:1px solid #e5e7eb;background:#fff;display:flex;flex-direction:column }
    .gl-side-hdr { display:flex;gap:6px;padding:10px 12px;border-bottom:1px solid #e5e7eb;align-items:center }
    .gl-search { flex:1;padding:6px 8px;border:1px solid #d1d5db;border-radius:6px;font-size:0.8rem;outline:none }
    .gl-search:focus { border-color:var(--bs-accent);box-shadow:0 0 0 2px var(--bs-focus-ring) }
    .gl-new-btn { padding:6px 10px;background:var(--bs-primary);color:#fff;border:none;border-radius:6px;font-size:0.75rem;font-weight:600;cursor:pointer }
    .gl-new-btn:hover { background:var(--bs-primary-hover) }
    .gl-list { flex:1;overflow-y:auto }
    .gl-empty { padding:24px 16px;color:#6b7280;font-size:0.82rem;text-align:center }
    .gl-row { padding:10px 12px;border-bottom:1px solid #f3f4f6;cursor:pointer;transition:background 0.1s }
    .gl-row:hover { background:#f9fafb }
    .gl-row.active { background:var(--bs-primary-light);border-left:3px solid var(--bs-accent);padding-left:9px }
    .gl-row-title { font-size:0.85rem;font-weight:600;color:#111827;line-height:1.25 }
    .gl-row-slug { font-family:monospace;font-size:0.7rem;color:#6b7280;margin-top:2px }
    .gl-row-meta { display:flex;gap:4px;flex-wrap:wrap;font-size:0.7rem;color:#9ca3af;margin-top:4px }

    .gl-main { flex:1;min-width:0;overflow-y:auto;padding:18px 22px }
    .gl-noselect { padding:60px 20px;text-align:center;color:#6b7280 }
    .gl-noselect-icon { font-size:2.2rem;margin-bottom:10px }

    .gl-edit-hdr { margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid #e5e7eb }
    .gl-edit-titlebar { display:flex;gap:14px;align-items:flex-start }
    .gl-edit-actions { display:flex;gap:8px;flex-shrink:0 }
    .gl-input { width:100%;padding:7px 10px;border:1px solid #d1d5db;border-radius:6px;font-size:0.85rem;background:#fff;box-sizing:border-box;outline:none;font-family:inherit }
    .gl-input:focus { border-color:var(--bs-accent);box-shadow:0 0 0 2px var(--bs-focus-ring) }
    .gl-input-title { font-size:1.05rem;font-weight:600;color:var(--bs-primary);padding:8px 12px }
    .gl-slug-row { display:flex;align-items:center;gap:6px;margin-top:6px }
    .gl-slug-label { font-size:0.7rem;color:#6b7280;font-family:monospace }
    .gl-input-slug { font-family:monospace;font-size:0.78rem;padding:5px 8px;max-width:280px }
    .gl-meta-row { display:flex;gap:8px;flex-wrap:wrap;font-size:0.75rem;color:#6b7280;margin-top:10px }

    .gl-btn { padding:7px 14px;border:none;border-radius:6px;font-size:0.78rem;font-weight:600;cursor:pointer;transition:all 0.15s }
    .gl-btn-sm { padding:4px 10px;font-size:0.72rem }
    .gl-btn-primary { background:var(--bs-primary);color:#fff }
    .gl-btn-primary:hover { background:var(--bs-primary-hover) }
    .gl-btn-secondary { background:#fff;color:#374151;border:1px solid #d1d5db }
    .gl-btn-secondary:hover { background:#f9fafb;border-color:#9ca3af }
    .gl-btn-danger { background:#fff;color:#dc2626;border:1px solid #fecaca }
    .gl-btn-danger:hover:not(:disabled) { background:#fef2f2;border-color:#dc2626 }
    .gl-btn-danger:disabled { color:#9ca3af;border-color:#e5e7eb;cursor:not-allowed }

    .gl-field-block { margin-bottom:18px }
    .gl-label { display:block;font-size:0.72rem;font-weight:600;color:#374151;margin-bottom:5px;text-transform:uppercase;letter-spacing:0.04em }
    .gl-textarea { resize:vertical;min-height:60px;font-size:0.85rem;line-height:1.4 }

    .gl-checklist-block { margin-top:8px }
    .gl-checklist-hdr { display:flex;align-items:center;justify-content:space-between;margin-bottom:8px }
    .gl-items { display:flex;flex-direction:column;gap:6px }
    .gl-items-empty { padding:18px;color:#9ca3af;font-size:0.82rem;text-align:center;background:#fff;border:1px dashed #e5e7eb;border-radius:8px }
    .gl-item { display:flex;align-items:flex-start;gap:8px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:8px 8px 8px 4px;transition:border-color 0.1s }
    .gl-item:hover { border-color:#d1d5db }
    .gl-item-dragging { opacity:0.4 }
    .gl-item-handle { color:#9ca3af;cursor:grab;padding:6px 2px;font-size:0.95rem;letter-spacing:-2px;user-select:none;line-height:1 }
    .gl-item-handle:active { cursor:grabbing }
    .gl-item-body { flex:1;min-width:0;display:flex;flex-direction:column;gap:6px }
    .gl-item-label { font-size:0.85rem }
    .gl-item-tut-row { display:flex;gap:6px }
    .gl-item-tut-title { flex:0 0 200px;font-size:0.78rem;padding:5px 8px;color:#6b7280 }
    .gl-item-tut-url { flex:1;font-size:0.78rem;padding:5px 8px;font-family:monospace;color:#2563eb }
    .gl-item-del { background:none;border:none;color:#9ca3af;font-size:0.9rem;cursor:pointer;padding:6px 8px;border-radius:4px;align-self:flex-start }
    .gl-item-del:hover { color:#dc2626;background:#fef2f2 }
    .gl-checklist-tip { margin-top:10px;padding:8px 12px;background:#f9fafb;border-radius:6px;font-size:0.72rem;color:#6b7280;line-height:1.4 }
    .gl-tip-handle { color:#9ca3af;letter-spacing:-2px;font-weight:600 }
    .gl-checklist-tip code { background:#fff;padding:1px 5px;border-radius:3px;border:1px solid #e5e7eb;font-size:0.7rem }

    /* ═══ TUTORIALS ADMIN ═══ */
    /* Reuses .gl-* shell classes for list+editor frame; these are tutorial-specific. */
    .tut-stale-banner { display:flex;align-items:center;gap:10px;padding:10px 14px;background:#fef3c7;border-bottom:1px solid #fbbf24;color:#92400e;font-size:0.82rem }
    .tut-video-slot { border:1px dashed #d1d5db;border-radius:8px;padding:16px;background:#f9fafb;cursor:pointer;transition:background 0.12s,border-color 0.12s }
    .tut-video-slot-empty { text-align:center;color:#6b7280 }
    .tut-video-slot-filled { padding:10px 14px;border-style:solid;background:#fff;cursor:default }
    .tut-video-slot:hover.tut-video-slot-empty { background:#f3f4f6;border-color:#9ca3af }
    .tut-drop-hover { background:#eef2ff !important;border-color:#6366f1 !important;color:#3730a3 !important }
    .tut-drop-icon { font-size:1.6rem;margin-bottom:6px }
    .tut-video-info { display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:0.82rem;color:#374151 }
    .tut-external-row { margin-top:10px;padding:10px 12px;background:#f9fafb;border-radius:6px;border:1px solid #e5e7eb }
    .tut-external-label { display:block;font-size:0.74rem;color:#6b7280;margin-bottom:4px }
    .tut-external-hint { font-size:0.7rem;color:#9ca3af;margin-top:4px }
    .tut-transcript { min-height:280px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.85rem;line-height:1.5 }
    .tut-refs-row { display:flex;align-items:flex-start;gap:8px;margin-top:8px;padding:8px 10px;background:#f9fafb;border-radius:6px;font-size:0.78rem }
    .tut-refs-label { color:#6b7280;flex-shrink:0;padding-top:2px }
    .tut-refs-pills { display:flex;flex-wrap:wrap;gap:4px;flex:1 }
    .tut-ref-pill { display:inline-block;padding:2px 8px;background:#eef2ff;color:#3730a3;border:1px solid #c7d2fe;border-radius:999px;font-size:0.72rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace }
    .tut-ref-pill.tut-ref-broken { background:#fee2e2;color:#991b1b;border-color:#fca5a5 }
    /* Slash-command picker */
    .tut-slash-menu { position:absolute;left:0;right:0;top:calc(100% + 4px);max-height:240px;overflow-y:auto;background:#fff;border:1px solid #d1d5db;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,0.13);z-index:50 }
    .tut-slash-row { padding:8px 12px;cursor:pointer;border-bottom:1px solid #f3f4f6 }
    .tut-slash-row:last-child { border-bottom:none }
    .tut-slash-row.tut-slash-hl { background:#eef2ff }
    .tut-slash-title { font-size:0.85rem;color:#1f2937;font-weight:600 }
    .tut-slash-slug { font-size:0.7rem;color:#6b7280;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;margin-top:2px }
    .tut-slash-empty { padding:14px;text-align:center;color:#9ca3af;font-size:0.78rem }
    .tut-cheatsheet { display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:6px;padding:6px 10px;background:#f9fafb;border-radius:6px;font-size:0.72rem;color:#6b7280 }
    .tut-cheatsheet code { background:#fff;border:1px solid #e5e7eb;border-radius:3px;padding:1px 5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.7rem;color:#374151 }

    /* ═══ TUTORIAL VIEWER (drawer) ═══ */
    .tv-overlay { position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:10100;opacity:0;transition:opacity 0.25s pointer-events:none }
    .tv-overlay.open { opacity:1;pointer-events:auto }
    .tv-panel { position:fixed;top:0;right:0;bottom:0;width:min(720px,100vw);background:#fff;z-index:10101;display:flex;flex-direction:column;transform:translateX(100%);transition:transform 0.25s;box-shadow:-4px 0 24px rgba(0,0,0,0.15) }
    .tv-panel.open { transform:translateX(0) }
    .tv-hdr { display:flex;align-items:center;gap:10px;padding:12px 18px;background:var(--sidebar-bg);color:#fff;flex-shrink:0 }
    .tv-back { background:none;border:none;color:rgba(255,255,255,0.85);font-size:1.1rem;cursor:pointer;padding:4px 8px;border-radius:4px;font-family:inherit }
    .tv-back:hover { background:rgba(255,255,255,0.1);color:#fff }
    .tv-hdr-title { flex:1;font-weight:700;font-size:0.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
    .tv-close { background:none;border:none;color:rgba(255,255,255,0.7);font-size:1.05rem;cursor:pointer;padding:4px 10px;border-radius:4px }
    .tv-close:hover { background:rgba(255,255,255,0.15);color:#fff }
    .tv-body { flex:1;overflow-y:auto;padding:16px 20px 80px }
    .tv-stale-banner { padding:10px 14px;background:#fef3c7;border:1px solid #fbbf24;color:#92400e;font-size:0.82rem;border-radius:6px;margin-bottom:14px }
    .tv-desc { color:#6b7280;font-size:0.88rem;line-height:1.45;margin-bottom:14px }
    .tv-video-stage { position:relative }
    .tv-video-wrap { background:#000;border-radius:8px;overflow:hidden;margin-bottom:18px;position:relative }
    .tv-video { width:100%;display:block;max-height:60vh }
    /* Custom fullscreen button — sits over the bottom-right corner where the
       native one would be, but bigger + more visible so users pick this one.
       Hidden while the stage IS fullscreen (the native controls inside the
       fullscreen view still let them exit). */
    .tv-fs-btn {
      position:absolute; top:10px; right:10px; z-index:5;
      background:var(--bs-primary, #23486A); color:#fff; border:1px solid rgba(255,255,255,0.5);
      border-radius:8px; padding:8px 14px; font-size:0.95rem; font-weight:600; cursor:pointer;
      font-family:inherit; line-height:1; display:flex; align-items:center; gap:6px;
      box-shadow:0 2px 8px rgba(0,0,0,0.4);
      transition:background 0.15s, transform 0.15s;
    }
    .tv-fs-btn:hover { background:#1a3651; transform:scale(1.05) }
    .tv-fs-btn::after { content:"Fullscreen"; font-size:0.82rem; font-weight:600; opacity:0.95 }
    .tv-video-stage:fullscreen .tv-fs-btn { display:none }

    /* Fullscreen mode: stage owns the screen, transcript becomes bottom-right
       overlay (Spotify-like, but reading-room). Standard browser fullscreen
       pseudo for the requested element. */
    .tv-video-stage:fullscreen { background:#000; padding:0; display:flex; align-items:center; justify-content:center }
    .tv-video-stage:fullscreen .tv-video-wrap { margin:0; width:100vw; height:100vh; border-radius:0; display:flex; align-items:center; justify-content:center }
    .tv-video-stage:fullscreen .tv-video { max-height:100vh; max-width:100vw; width:auto; height:auto }
    .tv-video-stage:fullscreen .tv-transcript-synced {
      position:fixed; bottom:60px; right:32px;
      width:min(420px, 36vw); max-height:240px;
      background:rgba(0,0,0,0.72); color:#fff;
      border-radius:10px; padding:14px 18px;
      backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
      z-index:10;
    }
    .tv-video-stage:fullscreen .tv-transcript-synced .tv-seg-active {
      color:#fff; background:transparent;
    }
    .tv-video-stage:fullscreen .tv-transcript-synced .tv-seg-prev2,
    .tv-video-stage:fullscreen .tv-transcript-synced .tv-seg-prev1,
    .tv-video-stage:fullscreen .tv-transcript-synced .tv-seg-next1,
    .tv-video-stage:fullscreen .tv-transcript-synced .tv-seg-next2 {
      color:rgba(255,255,255,0.55);
    }
    .tv-video-stage:fullscreen .tv-transcript-synced strong {
      color:#93c5fd; background:rgba(147,197,253,0.12); border:1px solid rgba(147,197,253,0.25);
    }
    .tv-external-btn { display:flex;align-items:center;justify-content:center;gap:10px;padding:24px;background:#0f172a;color:#fff;text-decoration:none;font-weight:600;font-size:0.95rem }
    .tv-external-btn:hover { background:#1e293b }
    .tv-no-video { padding:36px 20px;text-align:center;color:#9ca3af;background:#f9fafb;font-size:0.82rem;font-style:italic }
    .tv-transcript { font-size:0.92rem;color:#1f2937;line-height:1.6 }
    .tv-transcript p { margin:0 0 12px }
    .tv-transcript code { background:#f3f4f6;color:#1f2937;padding:1px 6px;border-radius:4px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.85em;border:1px solid #e5e7eb }
    /* **command** doubles as the "command" marker — renders blue + monospace so
       readers spot AutoCAD commands / buttons / menu items at a glance. */
    .tv-transcript strong, .tv-transcript-synced strong {
      color:var(--bs-primary); font-weight:700;
      font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
      background:var(--bs-primary-light); padding:0 5px; border-radius:3px; font-size:0.92em;
    }
    .tv-transcript em { color:#374151 }
    /* Synced mode: Spotify-lyrics-style 5-line window. The transcript renders
       all segments but only the 2-before / active / 2-after band is visible.
       Active is large + bold, neighbors shrink + dim, the rest are display:none. */
    .tv-transcript-synced {
      font-size:0.92rem; color:#9ca3af; line-height:1.5;
      max-height:300px; overflow:hidden; padding:0;
      display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
      text-align:center;
    }
    .tv-transcript-synced .tv-seg {
      display:none; cursor:pointer; padding:6px 8px; border-radius:6px;
      max-width:92%; transition:opacity 0.35s ease, font-size 0.35s ease, color 0.35s ease, font-weight 0.35s ease;
    }
    .tv-transcript-synced .tv-seg-prev2,
    .tv-transcript-synced .tv-seg-prev1,
    .tv-transcript-synced .tv-seg-active,
    .tv-transcript-synced .tv-seg-next1,
    .tv-transcript-synced .tv-seg-next2 { display:block }
    .tv-transcript-synced .tv-seg-prev2,
    .tv-transcript-synced .tv-seg-prev1,
    .tv-transcript-synced .tv-seg-next1,
    .tv-transcript-synced .tv-seg-next2 { opacity:0.5; font-size:0.92rem; color:#6b7280 }
    .tv-transcript-synced .tv-seg-active { opacity:1; font-size:1.35rem; color:#111827; font-weight:700; line-height:1.4; padding:10px 12px }
    .tv-transcript-synced .tv-seg:hover { opacity:0.85 }
    .tv-ref { display:inline-block;padding:1px 8px;background:#eef2ff;color:#3730a3;border:1px solid #c7d2fe;border-radius:999px;font-size:0.82rem;font-weight:600;cursor:pointer;text-decoration:none;line-height:1.4 }
    .tv-ref:hover { background:#c7d2fe;border-color:#818cf8 }
    .tv-ref.tv-ref-broken { background:#fee2e2;color:#991b1b;border-color:#fca5a5;cursor:help }
    .tv-footer { position:absolute;bottom:0;left:0;right:0;padding:10px 18px;background:#fff;border-top:1px solid #e5e7eb;display:flex;justify-content:flex-end }
    .tv-stale-btn { background:#fff;border:1px solid #d1d5db;color:#6b7280;padding:6px 12px;border-radius:6px;font-size:0.78rem;cursor:pointer;font-family:inherit;font-weight:500;transition:all 0.12s }
    .tv-stale-btn:hover { background:#fef3c7;border-color:#fbbf24;color:#92400e }
    .tv-stale-btn.tv-stale-active { background:#fef3c7;border-color:#fbbf24;color:#92400e }

    /* ═══ PROJECT SWITCHER ═══ */
    .pp-switcher-trigger { cursor:pointer;border-bottom:2px dotted rgba(255,255,255,0.4);transition:border-color 0.15s }
    .pp-switcher-trigger:hover { border-bottom-color:rgba(255,255,255,0.8) }
    .pp-switcher { position:absolute;top:100%;left:0;width:380px;background:#fff;border:1px solid #d1d5db;border-radius:8px;box-shadow:0 8px 32px rgba(0,0,0,0.2);z-index:10002;margin-top:6px }
    .pp-switcher-input { width:100%;padding:10px 12px;border:none;border-bottom:1px solid #e5e7eb;font-size:0.85rem;outline:none;border-radius:8px 8px 0 0;box-sizing:border-box }
    .pp-switcher-list { max-height:320px;overflow-y:auto }
    .pp-switcher-item { padding:8px 12px;cursor:pointer;font-size:0.82rem;display:flex;gap:8px;align-items:baseline;border-bottom:1px solid #f3f4f6 }
    .pp-switcher-item:hover { background:#f0f4ff }
    .pp-switcher-item.active { background:#eef2ff;font-weight:600 }
    .pp-switcher-job { font-family:monospace;font-weight:700;color:var(--bs-primary);white-space:nowrap }
    .pp-switcher-name { color:#374151;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
    .pp-switcher-pm { color:#9ca3af;font-size:0.72rem;margin-left:auto;white-space:nowrap }

    /* ═══ SURVEYOR COORDINATION DASHBOARD ═══ */
    .sv-title-bar { display:flex;align-items:center;gap:16px;padding:16px 0 8px }
    .sv-logo { height:68px }
    .sv-title-text { flex:1 }
    .sv-title { font-size:1.05rem;font-weight:700;color:var(--bs-primary) }
    .sv-legend { font-size:0.72rem;color:#6b7280;margin-top:2px }
    .sv-legend span { margin-right:12px }
    .sv-header { display:flex;align-items:center;gap:12px;padding:4px 0 8px;flex-wrap:wrap }
    .sv-tabs { display:flex;gap:4px;flex:1;flex-wrap:wrap }
    .sv-tab { padding:6px 14px;border:none;background:none;font-size:0.82rem;font-weight:500;color:#6b7280;cursor:pointer;border-bottom:2px solid transparent;border-radius:0;transition:all 0.15s }
    .sv-tab:hover { color:var(--bs-primary) }
    .sv-tab-active { color:var(--bs-primary);font-weight:600;border-bottom-color:var(--bs-primary) }
    .sv-table { width:100%;border-collapse:collapse;font-size:0.82rem;margin-top:4px }
    .sv-table th { padding:8px 10px;text-align:left;font-size:0.72rem;font-weight:600;color:#fff;background:#2a5a8c;white-space:nowrap }
    .sv-col-check { width:32px;text-align:center !important }
    .sv-table td { padding:7px 10px;border-bottom:1px solid #d1d5db;vertical-align:middle;overflow:hidden;text-overflow:ellipsis }
    @media print { .sv-col-check { display:none !important } }
    .sv-row { background:#fff }
    .sv-stripe { background:#e8edf2 }
    .sv-row:hover { background:#dce4ed }
    .sv-future-divider { font-size:0.95rem;font-weight:700;color:#1f2937;margin:18px 0 6px;padding:4px 0;border-bottom:2px solid #1f2937 }
    .sv-comment { max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;color:#374151 }
    .sv-comment:hover { color:var(--bs-primary);text-decoration:underline dotted }
    .sv-check { width:16px;height:16px;cursor:pointer;accent-color:var(--bs-primary) }
    /* Tablet (iPad portrait + landscape, phone landscape): tighten typography + padding
       so all 9 columns fit comfortably without losing info density. */
    @media (min-width:641px) and (max-width:1100px) {
      .sv-logo { height:52px }
      .sv-title { font-size:0.95rem }
      .sv-legend { font-size:0.68rem }
      .sv-tab { font-size:0.75rem;padding:5px 10px }
      .sv-table { font-size:0.72rem }
      .sv-table th { font-size:0.62rem;padding:6px 6px }
      .sv-table td { padding:5px 6px }
      .sv-future-divider { font-size:0.88rem;margin:12px 0 4px }
      .sv-comment { max-width:140px }
    }
    @media (max-width:768px) {
      .sv-title-bar { flex-direction:column;gap:8px }
      .sv-header { flex-direction:column;align-items:flex-start;gap:8px }
      .sv-tabs { width:100%;overflow-x:auto }
      .sv-comment { max-width:120px }
    }
    /* Phone (≤640px): each task row becomes a card.
       Column hide-sm already hides RPLS / surveyor PM / surveyor Job#.
       Remaining cells laid out via CSS Grid using nth-child positioning,
       so JS stays clean (no data-label attrs needed). */
    @media (max-width:640px) {
      .sv-title { font-size:1rem }
      .sv-legend { font-size:0.68rem }
      .sv-tab { font-size:0.78rem;padding:8px 12px;min-height:36px }
      .sv-table { border:none;font-size:0.78rem }
      .sv-table thead { display:none }
      .sv-table, .sv-table tbody { display:block;width:100% }
      .sv-table tr {
        display:grid;
        grid-template-columns:1fr auto;
        gap:4px 12px;
        background:#fff;
        border:1px solid #e5e7eb;
        border-radius:10px;
        padding:10px 12px;
        margin-bottom:8px;
        align-items:start;
      }
      .sv-table tr.sv-stripe { background:#f9fafb }
      .sv-table tr:hover { background:#f3f4f6 }
      .sv-table td { display:block;padding:0;border:none;overflow:visible;text-overflow:clip;white-space:normal }
      .sv-table td.sv-col-check { grid-column:2;grid-row:1;align-self:start }
      .sv-table td:nth-child(2) { grid-column:1;grid-row:1;font-size:0.88rem;font-weight:600;color:#1f2937 }
      .sv-table td:nth-child(3) { grid-column:1 / -1;grid-row:2;font-size:0.82rem;color:#374151 }
      .sv-table td:nth-child(4) { grid-column:1;grid-row:3;font-size:0.74rem }
      .sv-table td:nth-child(4)::before { content:'Due: ';color:#9ca3af;font-weight:500 }
      .sv-table td:nth-child(5) { grid-column:2;grid-row:3;font-size:0.74rem;text-align:right;color:#374151 }
      .sv-table td:nth-child(5)::before { content:'PM: ';color:#9ca3af;font-weight:500 }
      .sv-table td.sv-comment {
        grid-column:1 / -1;grid-row:4;
        max-width:none;white-space:normal;font-size:0.75rem;
        color:#6b7280;padding-top:6px;margin-top:2px;
        border-top:1px dashed #f3f4f6;
      }
      .sv-table td.sv-comment:empty { display:none }
      .sv-future-divider { margin:16px 4px 8px;font-size:0.92rem }
    }

    /* ═══ REGULATORY DASHBOARD ═══ */
    .reg-page { padding:16px 24px }
    .reg-toolbar { display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px 0 4px }
    .reg-status-select { font-size:0.8rem;padding:6px 10px;border:1px solid #d1d5db;border-radius:6px;background:#fff }
    .reg-pm-buttons { display:flex;gap:4px;flex-wrap:wrap;align-items:center }
    .reg-pm-label { font-size:0.72rem;color:#6b7280;margin-right:2px }
    /* Search input padding (the global .controls rule doesn't apply here — we're in .reg-toolbar) */
    .reg-toolbar .search-wrap input {
      width:100%;
      padding:8px 26px 8px 34px;   /* left makes room for the magnifying glass; right for the × button */
      border:1px solid #d1d5db;border-radius:6px;
      font-size:0.875rem;outline:none;
    }
    .reg-toolbar .search-wrap input:focus { border-color:var(--bs-accent) }
    .reg-status-line { font-size:0.75rem;color:#6b7280;padding:4px 0 8px }
    /* Table */
    .reg-table { width:100%;border-collapse:collapse;font-size:0.82rem;margin-top:4px }
    .reg-table th {
      text-align:left;padding:8px 10px;font-size:0.7rem;font-weight:600;
      color:#fff;background:#2a5a8c;text-transform:uppercase;letter-spacing:0.03em;white-space:nowrap;
    }
    .reg-table td { padding:7px 10px;border-bottom:1px solid #e5e7eb;vertical-align:middle }
    .reg-row { cursor:pointer }
    /* Cell-specific */
    .reg-cell-project strong { color:#1f2937 }
    .reg-cell-pm { color:#374151 }
    .reg-cell-action { font-size:0.78rem;color:#374151 }
    .reg-cell-due { font-size:0.78rem;color:#6b7280;white-space:nowrap }
    /* Pills (type + status) */
    .reg-pill { display:inline-block;padding:2px 10px;border-radius:999px;font-size:0.68rem;font-weight:600;color:#fff;white-space:nowrap }
    .reg-pill-type-tceq  { background:#3b82f6 }
    .reg-pill-type-water { background:#06b6d4 }
    .reg-pill-type-tdlr  { background:#8b5cf6 }
    .reg-pill-status-pending             { background:#9ca3af }
    .reg-pill-status-submitted           { background:#f59e0b }
    .reg-pill-status-accepted            { background:#8b5cf6 }
    .reg-pill-status-approved            { background:#8b5cf6 }
    .reg-pill-status-inspection_requested{ background:#f97316 }
    .reg-pill-status-complete            { background:#10b981 }
    .reg-pill-status-action              { background:#ef4444 }
    .reg-pill-status-water-accepted      { background:#f97316 } /* water "accepted" = waiting for approval */
    /* Attention column */
    .reg-att        { font-size:0.78rem;font-weight:700 }
    .reg-att-red    { color:#ef4444 }
    .reg-att-yellow { color:#f59e0b }
    .reg-att-green  { color:#10b981 }
    .reg-att-quiet  { color:#9ca3af;font-weight:500 }
    .reg-archived   { color:#ef4444;font-size:0.7rem;font-weight:600;margin-left:4px }
    /* Modal field row (replaces inline-styled label/input pairs) */
    .reg-field { margin-bottom:8px }
    .reg-field-row { display:flex;gap:8px;margin-bottom:8px }
    .reg-field-row > div { flex:1 }
    .reg-field-label { font-size:0.75rem;color:#6b7280;display:block;margin-bottom:2px }
    .reg-field-input,
    .reg-field-select { width:100%;padding:6px 8px;border:1px solid #d1d5db;border-radius:4px;font-size:0.85rem;box-sizing:border-box }
    .reg-field-input:focus,
    .reg-field-select:focus { border-color:var(--bs-focus-border);outline:none;box-shadow:0 0 0 3px var(--bs-focus-ring) }
    .reg-field-input[readonly] { background:#f9fafb;color:#6b7280;border-color:#e5e7eb }
    .reg-field-bolt { cursor:help;color:var(--bs-accent);font-size:0.7rem }
    .reg-modal-jobline { font-weight:600;margin-bottom:4px;color:#1f2937 }
    .reg-modal-splink { font-size:0.75rem;color:var(--bs-secondary);text-decoration:none;margin-bottom:12px;display:inline-block }
    .reg-tdlr-link { font-size:0.7rem;color:#8b5cf6;text-decoration:none }
    /* Zebra striping (≥768px) — standard navy-wash palette */
    @media (min-width:768px) {
      .reg-table tbody tr { background:#eef3f9 }
      .reg-table tbody tr:nth-child(even) { background:#dce8f5 }
      .reg-table tbody tr:hover { background:#c8ddf0 }
    }
    /* Tablet (iPad portrait/landscape, phone landscape): tighter typography */
    @media (min-width:641px) and (max-width:1100px) {
      .reg-page { padding:12px 16px }
      .reg-table { font-size:0.72rem }
      .reg-table th { font-size:0.6rem;padding:6px 6px }
      .reg-table td { padding:5px 6px }
      .reg-pill { font-size:0.62rem;padding:1px 8px }
      .reg-att { font-size:0.7rem }
      .reg-cell-action,
      .reg-cell-due { font-size:0.7rem }
    }
    /* Phone (≤640px): KPI strip stacks; table → card grid per row */
    @media (max-width:640px) {
      .reg-page { padding:12px 14px }
      .reg-toolbar { gap:6px;padding:8px 0 4px }
      .reg-status-select { font-size:16px;padding:8px 10px } /* iOS zoom kill */
      .reg-table { border:none;font-size:0.78rem }
      .reg-table thead { display:none }
      .reg-table, .reg-table tbody { display:block;width:100% }
      .reg-table tr {
        display:grid;
        grid-template-columns:1fr auto;
        gap:4px 12px;
        background:#fff;
        border:1px solid #e5e7eb;
        border-radius:10px;
        padding:10px 12px;
        margin-bottom:8px;
        align-items:center;
      }
      .reg-table tr:hover { background:#f9fafb }
      .reg-table td { display:block;padding:0;border:none;overflow:visible;text-overflow:clip;white-space:normal }
      /* Column order in HTML: 1=Attention 2=Type 3=Project 4=PM 5=Status 6=NextAction 7=Due */
      .reg-table td:nth-child(3) { grid-column:1;grid-row:1;font-size:0.88rem;font-weight:600;color:#1f2937 }
      .reg-table td:nth-child(1) { grid-column:2;grid-row:1;text-align:right;align-self:start }
      .reg-table td:nth-child(2) { grid-column:1;grid-row:2 }
      .reg-table td:nth-child(4) { grid-column:2;grid-row:2;justify-self:end }
      .reg-table td:nth-child(5) { grid-column:1;grid-row:3 }
      .reg-table td:nth-child(7) { grid-column:2;grid-row:3;text-align:right;font-size:0.72rem;color:#6b7280 }
      .reg-table td:nth-child(7)::before { content:'Due: ';color:#9ca3af;font-weight:500 }
      .reg-table td:nth-child(6) {
        grid-column:1 / -1;grid-row:4;
        font-size:0.75rem;color:#374151;
        padding-top:6px;margin-top:2px;border-top:1px dashed #f3f4f6;
      }
      .reg-table td:nth-child(6)::before { content:'Next: ';color:#9ca3af;font-weight:500 }
      .reg-table td:nth-child(6):empty { display:none }
    }

    /* ─── Home Page ─── */
    .home-grid { display:grid; grid-template-columns:3fr 2fr; gap:16px; align-items:start }
    @media (max-width: 768px) { .home-grid { grid-template-columns:1fr; } }
    .home-card { background:white; border:1px solid #e2e8f0; border-radius:10px; overflow:visible }
    .home-card-header { padding:12px 16px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #f1f5f9 }
    .home-card-title { font-size:13px; font-weight:700; color:var(--bs-primary) }
    .home-card-body { padding:0 }
    .home-card-footer { padding:8px 16px; border-top:1px solid #f1f5f9; text-align:center }
    .home-card-footer a { font-size:11px; color:var(--bs-secondary); text-decoration:none; font-weight:500 }
    .home-badges { display:flex; gap:6px; flex-wrap:wrap }
    .home-badge { font-size:10px; padding:2px 8px; border-radius:12px; font-weight:600 }
    .home-badge-overdue { background:#fef2f2; color:#dc2626 }
    .home-badge-today { background:#fffbeb; color:#ea580c }
    .home-badge-week { background:#f8fafc; color:#64748b }
    .home-badge-progress { background:#eff6ff; color:#1e40af }
    .home-badge-done { background:#f0fdf4; color:#166534 }

    .home-section-label { padding:6px 16px; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; color:#94a3b8; background:#fafbfc }

    .home-task-row { padding:8px 16px; display:flex; align-items:center; gap:10px; border-bottom:1px solid #f8fafc; font-size:12px; cursor:pointer; transition:background 0.1s }
    .home-task-row:hover { background:#f8fafc }
    .home-task-row:last-child { border-bottom:none }
    .home-task-done .home-task-name { text-decoration:line-through; color:#94a3b8 }

    .home-urgency { width:3px; min-height:28px; border-radius:2px; flex-shrink:0 }
    .home-urgency-overdue { background:#dc2626 }
    .home-urgency-today { background:#ea580c }
    .home-urgency-upcoming { background:#94a3b8 }
    .home-urgency-done { background:#22c55e }

    .home-task-content { flex:1; min-width:0 }
    .home-task-name { font-weight:500; color:#1e293b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
    .home-task-meta { font-size:10px; color:#94a3b8; margin-top:1px; display:flex; gap:6px; align-items:baseline; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
    .home-task-meta .home-task-job { font-family:ui-monospace,'SF Mono',Consolas,monospace; font-weight:700; color:var(--bs-primary); font-size:10px }
    .home-date { font-size:11px; font-weight:600; white-space:nowrap }
    .home-date-overdue { color:#dc2626 }
    .home-date-today { color:#ea580c }
    .home-date-upcoming { color:#64748b }
    .home-date-done { color:#22c55e; text-decoration:line-through }
    .home-assignee { font-size:10px; color:#64748b; font-weight:500; white-space:nowrap }
    .home-check { width:15px; height:15px; cursor:pointer; accent-color:var(--bs-primary); flex-shrink:0 }
    .home-badge-active { outline:2px solid currentColor; outline-offset:-1px }

    .home-attn-row { padding:8px 16px; border-bottom:1px solid #f1f5f9; cursor:pointer; transition:background 0.1s; display:flex; align-items:center; gap:10px }
    .home-attn-row:hover { background:#f8fafc }
    .home-attn-row:last-child { border-bottom:none }
    .home-attn-job { font-family:'SF Mono','Consolas',monospace; font-size:11px; color:var(--bs-primary); font-weight:700; flex-shrink:0; min-width:54px }
    .home-attn-name { font-size:12px; font-weight:500; color:#1e293b; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
    .home-attn-reason { font-size:11px; margin-top:2px }

    .home-log-input { width:100%; border:1px solid #e2e8f0; border-radius:6px; padding:10px 12px; font-size:12px; resize:none; min-height:60px; font-family:inherit; color:#334155; background:#f8fafc }
    .home-log-input:focus { outline:none; border-color:var(--bs-accent); background:white }
    .home-log-footer { display:flex; gap:8px; margin-top:8px; align-items:center }
    .home-log-select { width:100%; padding:6px 10px; border:1px solid #e2e8f0; border-radius:6px; font-size:11px; color:#334155; background:#f8fafc }
    .home-log-select:focus { outline:none; border-color:var(--bs-accent) }
    .home-log-btn { background:var(--bs-primary); color:white; border:none; padding:6px 16px; border-radius:6px; font-size:11px; font-weight:600; cursor:pointer; white-space:nowrap }
    .home-log-btn:hover { background:#2a4a72 }
    .home-type-pill { background:#f8fafc; border:1px solid #e2e8f0; border-radius:12px; padding:3px 10px; font-size:10px; color:#64748b; cursor:pointer; font-family:inherit; transition:all 0.1s }
    .home-type-pill:hover { border-color:#94a3b8; color:#334155 }
    .home-type-pill.home-type-active { background:var(--bs-primary); color:white; border-color:var(--bs-primary) }

    .home-proj-dropdown { position:absolute; top:100%; left:0; right:0; max-height:200px; overflow-y:auto; background:white; border:1px solid #e2e8f0; border-radius:6px; box-shadow:0 4px 12px rgba(0,0,0,0.1); z-index:100; margin-top:2px }
    .home-proj-option { padding:6px 10px; font-size:11px; cursor:pointer }
    .home-proj-option:hover { background:#f1f5f9 }

    @media (max-width:768px) {
      #home-dashboard { grid-template-columns:1fr !important }
    }

    /* ── Permissions admin + "Who Has What" (v8.92+) ──────── */
    .pa-loading { padding:32px; text-align:center; color:#94a3b8; font-size:0.85rem }
    .pa-header { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:14px; flex-wrap:wrap }
    .pa-title { font-size:1.1rem; font-weight:700; color:#1e293b; margin:0 0 4px }
    .pa-sub { font-size:0.78rem; color:#6b7280; margin:0 }
    .pa-search {
      border:1px solid #d1d5db; border-radius:8px;
      padding:7px 12px; font-size:0.78rem; font-family:inherit;
      color:#374151; background:#fff; width:280px; max-width:100%;
      outline:none; transition:border-color 0.1s;
    }
    .pa-search:focus { border-color:var(--bs-accent) }

    .pa-matrix-wrap { overflow-x:auto; border:1px solid #e5e7eb; border-radius:10px; background:#fff }
    .pa-matrix { width:100%; border-collapse:separate; border-spacing:0; font-size:0.78rem }
    .pa-matrix thead th {
      position:sticky; top:0; z-index:2;
      background:#f9fafb;
      padding:10px 12px;
      border-bottom:2px solid #e5e7eb;
      font-weight:700; color:#6b7280;
      font-size:0.7rem; text-transform:uppercase; letter-spacing:0.04em;
      text-align:center;
    }
    .pa-perm-header { text-align:left !important; min-width:220px; position:sticky; left:0; background:#f9fafb; z-index:3 }
    .pa-role-col { min-width:88px }
    .pa-role-label { font-size:0.72rem; color:var(--bs-primary); font-weight:700; text-transform:none; letter-spacing:0 }
    .pa-role-count { font-size:0.62rem; color:#94a3b8; font-weight:600; margin-top:2px }

    .pa-group-row td {
      padding:10px 14px 6px;
      background:#fafbfc;
      font-size:0.68rem; text-transform:uppercase; letter-spacing:0.06em;
      color:#94a3b8; font-weight:700;
      border-top:1px solid #f3f4f6;
    }
    .pa-perm-row td { border-bottom:1px solid #f3f4f6 }
    .pa-perm-row:hover td { background:#f8fafc }
    .pa-perm-cell {
      padding:10px 14px;
      position:sticky; left:0; background:#fff;
      border-right:1px solid #f3f4f6;
      min-width:220px;
    }
    .pa-perm-row:hover .pa-perm-cell { background:#f8fafc }
    .pa-perm-key { font-family:'SF Mono','Consolas',monospace; font-size:0.7rem; color:#475569; font-weight:600 }
    .pa-perm-label { font-size:0.74rem; color:#1e293b; margin-top:2px }

    .pa-cell { padding:6px 12px; text-align:center; transition:background 0.2s }
    .pa-cell-on { background:#f0fdf4 }
    .pa-perm-row:hover .pa-cell-on { background:var(--bs-zebra-hover) }
    .pa-cell-flash { background:#bbf7d0 !important }
    .pa-cell-label { display:inline-flex; align-items:center; gap:4px; cursor:pointer }
    .pa-cell-label input { width:16px; height:16px; cursor:inherit; accent-color:var(--bs-primary) }
    .pa-lock { font-size:0.7rem; color:#9ca3af }

    .pa-empty { padding:32px; text-align:center; color:#94a3b8; font-size:0.85rem; font-style:italic }
    .pa-legend { display:flex; gap:8px; align-items:center; margin-top:10px; font-size:0.7rem; color:#6b7280 }
    .pa-legend-sep { color:#cbd5e1 }

    /* "Who Has What" — card grid */
    .who-grid {
      display:grid;
      grid-template-columns:repeat(auto-fill, minmax(360px, 1fr));
      gap:12px;
    }
    .who-card {
      background:#fff; border:1px solid #e5e7eb; border-radius:10px;
      padding:0; overflow:hidden;
      transition:border-color 0.1s;
    }
    .who-card[open] { border-color:var(--bs-accent) }
    .who-summary {
      display:grid;
      grid-template-columns: 1fr auto auto;
      grid-template-areas:
        "name role count"
        "sections sections sections";
      gap:4px 12px;
      padding:12px 14px;
      cursor:pointer;
      list-style:none;
    }
    .who-summary::-webkit-details-marker { display:none }
    .who-summary::marker { display:none }
    .who-name { grid-area:name; font-weight:600; color:#1e293b; font-size:0.85rem }
    .who-role {
      grid-area:role;
      font-size:0.66rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em;
      color:var(--bs-primary);
      background:var(--bs-primary-light); padding:2px 8px; border-radius:9999px;
      white-space:nowrap;
    }
    .who-sections { grid-area:sections; font-size:0.72rem; color:#64748b; font-style:italic }
    .who-count { grid-area:count; font-size:0.66rem; color:#94a3b8; font-weight:600 }
    .who-body {
      border-top:1px solid #f1f5f9;
      padding:10px 14px 14px;
      background:#fafbfc;
    }
    .who-role-desc { font-size:0.72rem; color:#6b7280; margin-bottom:8px; font-style:italic }
    .who-perms { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:4px }
    .who-perms li {
      display:flex; gap:8px; align-items:center;
      font-size:0.74rem; color:#374151;
    }
    .who-perms code {
      font-family:'SF Mono','Consolas',monospace;
      background:#f1f5f9; color:#475569;
      padding:1px 6px; border-radius:4px;
      font-size:0.7rem;
      white-space:nowrap;
    }
    .who-perms span { color:#64748b; font-size:0.72rem }
    .who-empty { color:#94a3b8; font-size:0.72rem; font-style:italic }

    /* ── Home page (v8.87+ rebuild) ─────────────────────────── */
    .home-page { padding:24px 32px; max-width:1280px; margin:0 auto; display:flex; flex-direction:column; gap:16px }
    .home-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px }
    .home-greeting { font-size:1.35rem; color:var(--bs-primary); font-weight:700; margin:0; line-height:1.2 }
    .home-date-line { font-size:0.78rem; color:#64748b; margin-top:4px }

    .home-section { background:#fff; border:1px solid #e2e8f0; border-radius:10px; overflow:hidden }
    .home-tabs { display:flex; border-bottom:2px solid #e2e8f0; padding:0 8px; gap:2px; overflow-x:auto; scrollbar-width:none }
    .home-tabs::-webkit-scrollbar { display:none }
    .home-tab {
      padding:12px 18px; border:none; background:transparent;
      color:#64748b; font-size:0.8rem; font-weight:500;
      cursor:pointer; border-bottom:2px solid transparent;
      margin-bottom:-2px;
      transition:color 0.12s, border-color 0.12s;
      font-family:inherit;
      display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
    }
    .home-tab:hover { color:var(--bs-primary) }
    .home-tab.active { color:var(--bs-primary); font-weight:700; border-bottom-color:var(--bs-accent) }
    .home-tab-count {
      font-size:0.66rem; background:#f1f5f9; color:#64748b;
      padding:1px 8px; border-radius:9999px; font-weight:700;
      min-width:18px; text-align:center; line-height:1.4;
    }
    .home-tab.active .home-tab-count { background:var(--bs-accent); color:#fff }
    .home-tab-body { min-height:200px; max-height:60vh; overflow-y:auto }

    .home-empty { padding:40px 24px; text-align:center; color:#94a3b8; font-size:0.85rem }

    .home-below-fold, .home-legacy-cards {
      display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:16px; align-items:start;
    }
    @media (max-width: 768px) {
      .home-page { padding:16px; gap:12px }
      .home-greeting { font-size:1.15rem }
      .home-below-fold, .home-legacy-cards { grid-template-columns:1fr }
      .home-tab-body { max-height:none }
      .home-tab { padding:10px 14px; font-size:0.78rem }
    }

/* ── Project Financial Tab ─────────────────────────── */
.pf-verdict-strip { background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:20px; margin-bottom:20px }
.pf-flow { display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; margin-bottom:16px }
.pf-flow-item { text-align:center; min-width:100px }
.pf-flow-label { font-size:0.7rem; text-transform:uppercase; letter-spacing:0.05em; color:#6b7280; margin-bottom:2px }
.pf-flow-value { font-size:1.15rem; font-weight:700; color:var(--bs-primary) }
.pf-flow-arrow { font-size:1.3rem; color:#d1d5db }
.pf-positive .pf-flow-value { color:#059669 }
.pf-negative .pf-flow-value { color:#dc2626 }
.pf-budget-bar { margin-bottom:16px }
.pf-budget-label { font-size:0.75rem; color:#6b7280; margin-bottom:4px }
.pf-kpi-row { display:flex; gap:12px; flex-wrap:wrap }
.pf-selector-bar { display:flex; gap:12px; align-items:center; margin-bottom:16px; flex-wrap:wrap }
.pf-selector-bar select { font-size:0.82rem; min-width:220px }
.pf-selector-bar .pf-invoice-select { min-width:260px }
.pf-period-chips { display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin }
.pf-period-chips::-webkit-scrollbar { height:4px }
.pf-period-chips::-webkit-scrollbar-thumb { background:#d1d5db; border-radius:2px }
.pf-period-chip { white-space:nowrap; padding:5px 12px; border:1px solid #d1d5db; border-radius:9999px; background:#fff; font-size:0.76rem; font-weight:500; color:#374151; cursor:pointer; transition:all 0.15s; flex-shrink:0 }
.pf-period-chip:hover { background:#f0f4f8; border-color:#9ca3af }
.pf-period-chip.pf-chip-margin-pos { border-color:#86efac; background:#f0fdf4 }
.pf-period-chip.pf-chip-margin-neg { border-color:#fca5a5; background:#fef2f2 }
.pf-period-chip.pf-chip-active { background:var(--bs-primary); color:#fff; border-color:var(--bs-primary) }
.pf-period-range { font-size:0.72rem; color:#6b7280; margin-top:2px }
.pf-invoice-highlight td { background:var(--bs-accent-light) !important; border-left:3px solid var(--bs-accent) }
.pf-invoice-link { color:var(--bs-primary); text-decoration:none; font-family:monospace }
.pf-invoice-link:hover { text-decoration:underline; color:var(--bs-secondary) }
.pf-kpi-chip { flex:1; min-width:100px; text-align:center; background:#f9fafb; border:1px solid #e5e7eb; border-radius:8px; padding:10px 8px }
.pf-kpi-chip.pf-chip-good { border-color:#bbf7d0; background:#f0fdf4 }
.pf-kpi-chip.pf-chip-warn { border-color:#fecaca; background:#fef2f2 }
/* Invoice Summary button — prominent, sits between KPIs and financial tables */
.pf-summary-btn { display:flex; align-items:center; gap:14px; padding:14px 18px; border-radius:10px; border:1px solid transparent; margin-bottom:20px; text-decoration:none; transition:transform 0.1s, box-shadow 0.15s, background 0.15s }
.pf-summary-btn:hover { transform:translateY(-1px); box-shadow:0 4px 10px rgba(0,0,0,0.08); text-decoration:none }
.pf-summary-icon { font-size:1.5rem; line-height:1; flex-shrink:0 }
.pf-summary-text { display:flex; flex-direction:column; flex:1; gap:2px; min-width:0 }
.pf-summary-label { font-size:0.95rem; font-weight:700; letter-spacing:0.01em }
.pf-summary-sub { font-size:0.74rem; opacity:0.85 }
.pf-summary-warn { margin-right:6px }
.pf-summary-arrow { font-size:1.2rem; opacity:0.6; flex-shrink:0 }
.pf-summary-btn-fresh { background:var(--bs-primary); color:#fff; border-color:var(--bs-primary) }
.pf-summary-btn-fresh:hover { background:var(--bs-secondary,#1e3a5f); color:#fff }
.pf-summary-btn-stale { background:#fef3c7; color:#78350f; border-color:#fcd34d }
.pf-summary-btn-stale:hover { background:#fde68a; color:#78350f }
.pf-summary-btn-missing { background:#f3f4f6; color:#6b7280; border-color:#e5e7eb; cursor:not-allowed }
.pf-kpi-label { font-size:0.65rem; text-transform:uppercase; letter-spacing:0.04em; color:#6b7280; margin-bottom:2px }
.pf-kpi-value { font-size:1rem; font-weight:700; color:#111827 }
.pf-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px }
.pf-detail-col { display:flex; flex-direction:column; gap:16px }
.pf-card { background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:16px; box-shadow:0 1px 3px rgba(0,0,0,0.04) }
.pf-card-title { font-size:0.95rem; font-weight:600; color:var(--bs-ink-strong); margin-bottom:10px }
.pf-table { width:100%; border-collapse:collapse; font-size:0.8rem }
.pf-table th { text-align:left; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.04em; color:#6b7280; padding:6px 8px; border-bottom:2px solid #e5e7eb; font-weight:600 }
.pf-table td { padding:6px 8px; border-bottom:1px solid #f1f5f9 }
.pf-table tr:hover td { background:#f9fafb }
.pf-table .pf-num { text-align:right; font-variant-numeric:tabular-nums }
.pf-table tfoot td { font-weight:700; border-top:2px solid #e5e7eb; border-bottom:none }
.pf-status { font-size:0.68rem; padding:2px 8px; border-radius:9999px; font-weight:600; text-transform:capitalize }
.pf-status-paid { background:#dcfce7; color:#166534 }
.pf-status-sent { background:#dbeafe; color:#1e40af }
.pf-status-draft { background:#f3f4f6; color:#6b7280 }
.pf-status-overdue { background:#fee2e2; color:#991b1b }
.lg-pill-pending { background:#fef3c7; color:#92400e; border:1px solid #fde68a }
.pf-status-draft-added { background:#dbeafe; color:#1e40af; border:1px solid #93c5fd }
.pf-drill-parent { cursor:pointer }
.pf-drill-parent:hover td { background:#f0f4ff }
.pf-drill-arrow { display:inline-block; font-size:0.6rem; width:12px; color:#9ca3af; transition:transform 0.15s }
.pf-drill-detail td { padding:0 !important; background:#f8fafc !important; border-bottom:1px solid #e5e7eb }
.pf-drill-table { margin:4px 0 4px 24px; width:calc(100% - 24px); font-size:0.75rem }
.pf-drill-table th { font-size:0.65rem; padding:4px 6px; color:#9ca3af }
.pf-drill-table td { padding:3px 6px; border-bottom:1px solid #f1f5f9 }
.pf-drill-table tr:hover td { background:#eef2ff }
@media (max-width:768px) {
  .pf-detail-grid { grid-template-columns:1fr }
  .pf-flow { gap:8px }
  .pf-flow-item { min-width:70px }
  .pf-flow-value { font-size:0.95rem }
  .pf-kpi-row { gap:8px }
  .pf-selector-bar { flex-direction:column }
  .pf-selector-bar select { min-width:100% }
  .pf-period-chips { gap:4px }
}

/* Billing Setup card (roster editor) */
.pf-billing-setup { padding:0; overflow:hidden }
.pf-billing-setup .pf-card-title { margin-bottom:0 }
.pf-billing-header { user-select:none }
.pf-billing-header:hover { background:#f9fafb }
.pf-billing-pill { font-size:0.68rem; padding:2px 8px; border-radius:9999px; font-weight:600; background:#f3f4f6; color:#6b7280 }
.pf-billing-pill-custom { background:#fef3c7; color:#92400e }
.pf-billing-pill-dirty { background:#dbeafe; color:#1e40af }
.pf-billing-body { padding:0 14px 14px 14px; border-top:1px solid #e5e7eb }
.pf-billing-table { margin-top:8px }
.pf-billing-table td:first-child { font-weight:600 }
.pf-billing-row-dirty td { background:#eff6ff !important }
.pf-billing-select { width:100%; padding:4px 6px; font-size:0.78rem; border:1px solid #d1d5db; border-radius:6px; background:#fff }
.pf-billing-rate { font-variant-numeric:tabular-nums; font-size:0.78rem; color:#374151 }
.pf-billing-rate-warn { color:#b45309; background:#fef3c7; padding:2px 6px; border-radius:4px; font-weight:600 }
.pf-billing-actions { display:flex; gap:8px; justify-content:flex-end; padding-top:12px; border-top:1px solid #f1f5f9; margin-top:8px }
.pf-billing-btn { padding:6px 14px; border-radius:6px; font-size:0.8rem; font-weight:600; cursor:pointer; border:1px solid transparent }
.pf-billing-btn:disabled { opacity:0.5; cursor:not-allowed }
.pf-billing-btn-primary { background:var(--bs-primary,#23486A); color:#fff }
.pf-billing-btn-primary:hover:not(:disabled) { background:#1a3651 }
.pf-billing-btn-secondary { background:#fff; color:#374151; border-color:#d1d5db }
.pf-billing-btn-secondary:hover:not(:disabled) { background:#f9fafb }

/* Billing Periods admin (state machine) */
.bp-table .bp-date { font-size:0.78rem; padding:4px 6px }
.bp-row-current { background:var(--bs-accent-light) }
.bp-row-current:hover td { background:#fdebbf !important }
.bp-current-badge { font-size:0.65rem; padding:1px 6px; border-radius:9999px; background:var(--bs-primary); color:#fff; font-weight:700; vertical-align:middle; text-transform:uppercase; letter-spacing:0.04em }
.bp-status-pill { display:inline-block; font-size:0.72rem; padding:3px 9px; border-radius:9999px; font-weight:600 }
.bp-trans-btn { white-space:nowrap }

/* Invoicing workbench: period status banner */
.inv-period-banner { padding:10px 14px; border-radius:8px; margin:8px 12px; font-size:0.82rem; font-weight:600; display:flex; align-items:center; gap:10px; border:1px solid }
.inv-period-banner-frozen { background:var(--bs-surface-alt); color:var(--bs-ink-muted); border-color:var(--bs-border) }
.inv-period-banner-icon { font-size:1.1rem }

/* Invoice Ledger view (per-project spreadsheet) */
.lg-view { padding-bottom:60px }
.lg-header-bar { display:flex; align-items:center; gap:16px; padding:12px 32px 12px 20px; background:#f8f9fb; border-bottom:1px solid #e5e7eb; position:sticky; top:0; z-index:5 }
.lg-back-btn { padding:6px 12px; border:1px solid #d1d5db; background:#fff; border-radius:6px; font-size:0.78rem; cursor:pointer; font-weight:600; font-family:inherit }
.lg-back-btn:hover { background:#f3f4f6 }
.lg-header-title { flex:1; min-width:0; position:relative }
.lg-header-job { font-size:1.05rem; font-weight:700; color:#111; display:flex; align-items:center; gap:6px; flex-wrap:wrap; position:relative }
.lg-header-client { font-size:0.82rem; font-weight:600; color:#374151; margin-top:1px }
.lg-header-sub { font-size:0.78rem; color:#6b7280; margin-top:2px }
.lg-switcher-trigger { font-family:ui-monospace,monospace; cursor:pointer; border-bottom:2px dotted #9ca3af; transition:border-color 0.15s }
.lg-switcher-trigger:hover { border-bottom-color:var(--bs-primary,#23486A); color:var(--bs-primary,#23486A) }
.lg-switcher { position:absolute; top:100%; left:0; width:380px; background:#fff; border:1px solid #d1d5db; border-radius:8px; box-shadow:0 8px 32px rgba(0,0,0,0.2); z-index:10002; margin-top:6px }
.lg-switcher-input { width:100%; padding:10px 12px; border:none; border-bottom:1px solid #e5e7eb; font-size:0.85rem; font-family:inherit; outline:none; border-radius:8px 8px 0 0; box-sizing:border-box }
.lg-switcher-list { max-height:320px; overflow-y:auto }
.lg-switcher-item { padding:8px 12px; cursor:pointer; font-size:0.82rem; display:flex; gap:8px; align-items:baseline; border-bottom:1px solid #f3f4f6 }
.lg-switcher-item:hover { background:#f0f4ff }
.lg-switcher-item.active { background:#eef2ff; font-weight:600 }
.lg-switcher-job { font-family:ui-monospace,monospace; font-weight:700; color:var(--bs-primary,#23486A); white-space:nowrap }
.lg-switcher-name { color:#374151; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.lg-switcher-pm { color:#9ca3af; font-size:0.72rem; margin-left:auto; white-space:nowrap }
.lg-nav { display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex-shrink:0 }
.lg-nav-row { display:flex; align-items:center; gap:8px }
.lg-nav-links { display:flex; align-items:center; gap:6px }
.lg-nav-link-btn { font-size:0.72rem !important; padding:4px 10px !important; text-decoration:none; display:inline-flex; align-items:center }
.lg-nav-count { font-size:0.72rem; color:#6b7280; font-variant-numeric:tabular-nums }
.lg-nav-btn { padding:6px 12px; border:1px solid #d1d5db; background:#fff; border-radius:6px; font-size:0.78rem; cursor:pointer; font-weight:600; font-family:inherit; white-space:nowrap }
.lg-nav-btn:hover:not(:disabled) { background:#f3f4f6; border-color:#9ca3af }
.lg-nav-btn:disabled { opacity:0.4; cursor:not-allowed }
.lg-nav-btn-primary { background:var(--bs-primary,#23486A); color:#fff; border-color:var(--bs-primary,#23486A) }
.lg-nav-btn-primary:hover:not(:disabled) { background:#1a3651; border-color:#1a3651 }
.lg-docs-wrap { position:relative; flex-shrink:0 }
.lg-docs-menu { position:absolute; top:100%; right:0; width:380px; background:#fff; border:1px solid #d1d5db; border-radius:8px; box-shadow:0 8px 32px rgba(0,0,0,0.2); z-index:10002; margin-top:6px; max-height:420px; overflow-y:auto }
.lg-docs-section-title { padding:8px 12px 4px; font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:#6b7280; background:#f9fafb; border-bottom:1px solid #f3f4f6 }
.lg-docs-item { padding:8px 12px; cursor:pointer; border-bottom:1px solid #f3f4f6 }
.lg-docs-item:last-child { border-bottom:none }
.lg-docs-item:hover { background:#f0f4ff }
.lg-docs-name { font-size:0.82rem; color:#111; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.lg-docs-sub { font-size:0.7rem; color:#6b7280; margin-top:2px }
.lg-page { display:grid; grid-template-columns: minmax(0,1fr) 360px; gap:0 }
.lg-main { padding:20px 20px 20px 20px; min-width:0 }
/* Compact Invoice Summary pill in ledger header. Mirrors project-financial's
   pf-summary-btn but at header-pill scale so it sits beside Prev/Next. */
.lg-summary-btn { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:6px; font-size:0.78rem; font-weight:700; text-decoration:none; white-space:nowrap; border:1px solid; flex-shrink:0 }
.lg-summary-fresh { background:#ecfdf5; color:#065f46; border-color:#a7f3d0 }
.lg-summary-fresh:hover { background:#d1fae5; border-color:#6ee7b7 }
.lg-summary-stale { background:#fef3c7; color:#92400e; border-color:#fcd34d }
.lg-summary-stale:hover { background:#fde68a; border-color:#fbbf24 }
.lg-summary-warn { font-size:0.85rem }
.lg-side { background:#f0f4f7; border-left:1px solid var(--bs-border); padding:16px 32px 16px 16px; min-height:600px }
.lg-side-block { margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid #d4dfe5 }
.lg-side-block:last-child { border-bottom:none }
.lg-side-h { font-size:0.7rem; font-weight:700; color:var(--bs-text-secondary); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:8px }
.lg-status-pill { display:inline-block; padding:4px 12px; border-radius:6px; font-size:0.78rem; font-weight:700; margin-bottom:8px }
.lg-pill-draft { background:#fef3c7; color:#92400e }
.lg-pill-pm { background:#dbeafe; color:#1e40af }
.lg-pill-final { background:#c7d2fe; color:#3730a3 }
.lg-pill-approved { background:#ddd6fe; color:#6d28d9 }
.lg-pill-submitted { background:#fed7aa; color:#9a3412 }
.lg-pill-invoiced { background:#bbf7d0; color:#065f46 }
.lg-pill-skipped { background:#fee2e2; color:#991b1b }
.lg-stamp { font-size:0.7rem; color:#6b7280; margin:2px 0 }
.lg-lifecycle-actions { margin-top:10px; display:flex; flex-direction:column; gap:6px }
.lg-kpi-grid { display:grid; grid-template-columns: 1fr auto; gap:4px 12px; font-size:0.78rem }
.lg-kpi-k { color:#666 }
.lg-kpi-v { font-weight:700; font-family:ui-monospace,monospace; color:#1f2547; text-align:right }
.lg-table { width:100%; border-collapse:collapse; font-size:0.85rem; margin-bottom:14px }
.lg-table th { background:#E0E3F5; padding:6px 8px; text-align:left; font-size:0.72rem; color:#1f2547; font-weight:700; border:1px solid #c5c8d9 }
.lg-table td { padding:6px 8px; border:1px solid #e5e7eb }
.lg-table .lg-section-head th { background:var(--bs-primary-light); color:var(--bs-ink-strong); font-size:0.78rem; padding:8px 10px }
.lg-table .lg-num { text-align:right; font-variant-numeric:tabular-nums; font-family:ui-monospace,monospace }
/* Rate matrix uses fixed layout so declared column widths actually win.
   Without this, table-layout:auto lets the longest content (or unwidthed
   columns) absorb all the slack — Role and Total Labor would balloon while
   Bill/Hold/Writeoff stayed cramped. */
.lg-table.lg-matrix { table-layout:fixed; width:auto }
.lg-table .lg-col-role { width:350px }
.lg-table .lg-col-rate { width:80px; text-align:right }
.lg-table .lg-col-worked { width:140px; text-align:right }
.lg-table .lg-col-bill { width:140px; text-align:right }
.lg-table .lg-col-actions { width:160px }
/* Hourly view: invoice history (full width) on top, then rate matrix (left)
   and expenses (right) side-by-side. min-width:0 + overflow-x:auto so a
   wide rate matrix gets a scrollbar inside its half rather than blowing
   out the column. */
.lg-hourly-split { display:grid; grid-template-columns:55fr 45fr; gap:14px; align-items:start; margin-bottom:14px }
.lg-hourly-split-rates, .lg-hourly-split-expenses { min-width:0; overflow-x:auto }
/* Holdover (deferred-to-future) and Writeoff (gone-forever) columns on the
   hourly rate matrix. Subtle background tints so the PM can scan at a glance:
   blue = parked, red = absorbed. Inputs are full-size (lg-input), promoted
   from the old lg-input-tiny squeeze in the Actions column. */
.lg-table .lg-col-holdover { width:110px; text-align:right; background:#eff6ff; color:#1e40af }
.lg-table .lg-col-writeoff { width:110px; text-align:right; background:#fef2f2; color:#991b1b }
.lg-table .lg-cell-holdover { background:#f5faff; text-align:right }
.lg-table .lg-cell-writeoff { background:#fffafa; text-align:right }
.lg-draft-head { background:#EFB036 !important; color:#3d2a00 !important }
.lg-draft-cell { background:#FBE4AC; color:#5c4314; font-weight:600 }
.lg-role-row { cursor:pointer; background:#fff }
.lg-role-row:hover { background:#f5f7fb }
.lg-role-arrow { display:inline-block; width:10px; color:#9ca3af; font-size:0.7rem }
.lg-emp-row td { background:#fafbfd }
.lg-emp-row td:first-child { font-size:0.78rem }
.lg-row-invalid td { background:#fef2f2 !important }
.lg-input { width:90px; padding:5px 8px; border:1px solid #d1d5db; border-radius:3px; font-family:ui-monospace,monospace; font-size:0.85rem; text-align:right }
.lg-input-tiny { width:48px; padding:2px 4px; font-size:0.72rem; margin-left:2px }
.lg-input:disabled { background:#f3f4f6; color:#6b7280 }
/* Gold draft styling for editable PM-decision inputs (Charged / Written off
   on the spend-detail drawer, THIS CYCLE Hrs on the invoice grid). Uses the
   same gold accent the ledger already uses for "draft" cells. */
.lg-input-draft { background:var(--bs-accent-light); border-color:var(--bs-accent); color:var(--bs-primary); font-weight:600 }
.lg-input-draft:focus { outline:none; border-color:var(--bs-accent-hover); box-shadow:0 0 0 3px var(--bs-focus-ring) }
.lg-input-draft:disabled { background:#f3f4f6; color:#6b7280; border-color:#d1d5db; font-weight:400 }
.lg-th-draft { background:var(--bs-accent-light) !important; color:var(--bs-primary) }
.lg-total-row td { background:#6877CE !important; color:#fff !important; font-weight:700 }
.lg-total-row .lg-draft-cell { background:#b45309 !important; color:#fff !important }
.lg-direct .lg-total-row td { background:#6877CE !important; color:#fff !important }
.lg-direct-held { opacity:0.7 }
.lg-held-note { font-size:0.72rem; color:#92400e; background:#fef3c7; padding:8px 12px; border-radius:4px; margin-bottom:12px }
/* SUBCONTRACT / DIRECT COSTS band — mirrors the printed Invoice Summary's
   band-head + sub-row + sub-total layout, sitting inside the same fee
   matrix table directly below the FEES band. */
.lg-fee-matrix tr.lg-band-head th { background:var(--bs-primary) !important; color:#fff; text-align:left; font-size:0.78rem; letter-spacing:0.3px; padding:6px 10px; font-weight:700; text-transform:uppercase }
.lg-fee-matrix tr.lg-sub-row td { background:#f8fafc }
.lg-fee-matrix tr.lg-sub-row td.lg-stick-l-1 { background:#f8fafc }
.lg-fee-matrix tr.lg-sub-row td.lg-stick-l-2 { background:#f8fafc }
.lg-fee-matrix tr.lg-sub-row td.lg-stick-r-1 { background:#f8fafc }
.lg-fee-matrix tr.lg-sub-row td.lg-stick-r-2 { background:#f8fafc }
.lg-fee-matrix tr.lg-sub-row td.lg-stick-r-3 { background:#f8fafc }
.lg-fee-matrix tr.lg-sub-total-row td { background:#5B6BC4 !important; color:#fff !important }
/* GRAND TOTAL row inside the fee matrix — sums FEES + SUBS across every
   column. Dark slate background, mirrors the printed Invoice Summary's
   grand row. Only renders when subs exist (otherwise FEES TOTAL above
   already represents the grand total). */
.lg-fee-matrix tr.lg-grand-total-row td { background:#1e293b !important; color:#fff !important; font-weight:700; padding:6px 8px; font-size:0.82rem; letter-spacing:0.3px }
/* AMOUNT status row — 4th row of the status block (STATUS / DATE / METHOD /
   AMOUNT) showing each invoice's $ amount + the cycle's draft total. */
.lg-fee-matrix tr.lg-status-row td.lg-status-amount { font-variant-numeric:tabular-nums; font-weight:600; color:#1f2547 }
/* Previously Billed column — green-tinted column that appears when historical
   invoice count exceeds the visible window. Sums per-BLI rolled-off amounts.
   Mirrors the printed Invoice Summary's green Previously Billed column. */
.lg-fee-matrix th.lg-prev-billed-head { background:#C6E0B4 !important; color:#1f2547 }
.lg-fee-matrix td.lg-prev-billed { background:#E2EFDA; font-weight:600; min-width:90px }
.lg-fee-matrix tr.lg-total-row td.lg-prev-billed { background:#9CC275 !important; color:#1f2547 !important }
.lg-fee-matrix tr.lg-sub-total-row td.lg-prev-billed { background:#9CC275 !important; color:#1f2547 !important }
.lg-fee-matrix tr.lg-grand-total-row td.lg-prev-billed { background:#375623 !important; color:#fff !important }
.lg-fee-footnote { font-style:italic; font-size:0.72rem; color:#6b7280; text-align:right; margin:4px 0 12px }
/* NTE KPI tiles — hourly contracts only, when sum(asr.nte_amount) > 0.
   Sits above the hero band. Color states match the printed summary:
   ≥90% red, ≥75% caution yellow. */
.lg-nte-kpi { display:flex; align-items:center; gap:10px; margin:10px 0 14px; flex-wrap:wrap }
.lg-nte-kpi-header { font-size:0.7rem; font-weight:700; color:var(--bs-text-secondary); text-transform:uppercase; letter-spacing:0.5px; white-space:nowrap }
.lg-nte-kpi-item { background:var(--bs-primary-light); border:1px solid var(--bs-border); border-radius:4px; padding:6px 12px; text-align:center; min-width:100px }
.lg-nte-kpi-item.lg-nte-warn { background:#FFCCCC; border-color:#C00000 }
.lg-nte-kpi-item.lg-nte-caution { background:#FFF2CC; border-color:#C08000 }
.lg-nte-kpi-lbl { font-size:0.65rem; color:#555; text-transform:uppercase; letter-spacing:0.3px }
.lg-nte-kpi-item.lg-nte-warn .lg-nte-kpi-lbl, .lg-nte-kpi-item.lg-nte-warn .lg-nte-kpi-val { color:#C00000 }
.lg-nte-kpi-item.lg-nte-caution .lg-nte-kpi-lbl, .lg-nte-kpi-item.lg-nte-caution .lg-nte-kpi-val { color:#7A5200 }
.lg-nte-kpi-val { font-size:1.05rem; font-weight:700; font-variant-numeric:tabular-nums; margin-top:2px; color:#1f2547 }

/* Prominent NTE progress bar — replaces the 4-tile NTE strip. Fuel-gauge style
   so PMs read the % at a glance. Green <75% / yellow 75-90% / red 90-100% /
   solid red OVER >100%. The fill caps at 100% width even when over, so the
   bar stays inside the track and the "OVER BY $X" tag carries the overflow info. */
.lg-nte-bar { margin:10px 0 14px }
.lg-nte-bar-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; gap:12px; flex-wrap:wrap }
.lg-nte-bar-label { font-size:0.78rem; font-weight:700; color:#1f2547; text-transform:uppercase; letter-spacing:0.6px; display:inline-flex; align-items:center; gap:14px }
.lg-nte-bar-toggle { display:inline-flex; align-items:center; gap:6px; font-size:0.7rem; font-weight:500; color:#555; text-transform:none; letter-spacing:0; cursor:pointer; user-select:none }
.lg-nte-bar-toggle input[type=checkbox] { width:14px; height:14px; cursor:pointer; accent-color:#1f2547 }
.lg-nte-bar-toggle input[type=checkbox]:disabled { cursor:not-allowed; opacity:0.5 }
.lg-nte-bar-meta { font-size:0.78rem; color:#555; font-variant-numeric:tabular-nums }
.lg-nte-bar-over { color:#C00000; font-weight:700; margin-left:4px }
.lg-nte-bar-track { position:relative; height:36px; background:#EFEFEF; border:1px solid #999; border-radius:6px; overflow:hidden }
.lg-nte-bar-fill { position:absolute; top:0; left:0; bottom:0; transition:width .35s ease }
.lg-nte-bar-draft { position:absolute; top:0; bottom:0; transition:left .35s ease, width .35s ease;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.55) 0 6px, rgba(239,176,54,0.65) 6px 12px);
  background-color: var(--bs-accent-light);
  border-left:1px dashed var(--bs-accent-hover);
  border-right:1px dashed var(--bs-accent-hover) }
.lg-nte-bar-pct { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:1.4rem; font-weight:800; font-variant-numeric:tabular-nums; color:#1f2547; letter-spacing:0.4px }
.lg-nte-bar-pct-billed { font-size:0.72rem; font-weight:600; opacity:0.65; margin-left:8px; letter-spacing:0.2px }
.lg-nte-bar-ok      .lg-nte-bar-fill  { background:#7DBE7D }
.lg-nte-bar-caution .lg-nte-bar-fill  { background:#F5C04A }
.lg-nte-bar-caution .lg-nte-bar-track { border-color:#C08000 }
.lg-nte-bar-warn    .lg-nte-bar-fill  { background:#E97070 }
.lg-nte-bar-warn    .lg-nte-bar-track { border-color:#C00000 }
.lg-nte-bar-warn    .lg-nte-bar-pct   { color:#7A0000 }
.lg-nte-bar-over    .lg-nte-bar-fill  { background:#C00000 }

/* Inline billing-period picker in the ledger header subtitle row. Sized to
   match surrounding text so it reads as a tappable selector, not a form input. */
.lg-period-picker { font-size:inherit; font-family:inherit; color:inherit; background:transparent; border:1px solid transparent; border-radius:3px; padding:1px 4px; cursor:pointer; max-width:180px }
.lg-period-picker:hover, .lg-period-picker:focus { border-color:#c7d2fe; background:#f1f5f9; outline:none }
.lg-nte-bar-over    .lg-nte-bar-track { border-color:#7A0000 }
.lg-nte-bar-over    .lg-nte-bar-pct   { color:#FFFFFF }

/* Balance block — Previous Balance / Current Invoice / TOTAL DUE block
   beneath the fee matrix, mirroring the printed Invoice Summary's bottom
   right balance block. Right-aligned, bordered. */
.lg-balance-block-wrap { display:flex; justify-content:flex-end; margin:8px 0 14px }
.lg-balance-block { display:inline-block; border:1px solid #888; padding:8px 14px; font-size:0.85rem; background:#fff }
.lg-balance-row { display:flex; justify-content:flex-end; gap:14px; line-height:1.55 }
.lg-balance-label { min-width:120px; text-align:right; color:#555 }
.lg-balance-val { min-width:100px; text-align:right; font-variant-numeric:tabular-nums; font-weight:600; color:#111 }
.lg-balance-total { border-top:1px solid #555; padding-top:4px; margin-top:3px; font-weight:700 }
.lg-balance-total .lg-balance-label, .lg-balance-total .lg-balance-val { color:#111 }
.lg-grand-total { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; background:#065f46; color:#fff; border-radius:6px; margin-top:12px }
.lg-grand-label { font-size:0.85rem; font-weight:700; letter-spacing:0.05em }
.lg-grand-value { font-size:1.5rem; font-weight:800; font-family:ui-monospace,monospace }
.lg-empty-matrix { padding:24px; text-align:center; color:#9ca3af; font-style:italic; background:#fafbfd; border:1px dashed #d1d5db; border-radius:6px; margin-bottom:14px }
.lg-lock-banner { padding:10px 14px; border-radius:6px; margin-bottom:14px; font-size:0.82rem; border:1px solid }
.lg-lock-closed { background:#fee2e2; color:#991b1b; border-color:#fca5a5 }
.lg-lock-period { background:#fef9c3; color:#a16207; border-color:#fde68a }
.lg-lock-summary { background:var(--bs-surface-alt); color:var(--bs-ink-muted); border-color:var(--bs-border) }
.lg-lock-skipped { background:#f3f4f6; color:#374151; border-color:#d1d5db }
.lg-contract-mismatch { background:#fef2f2; color:#991b1b; border-color:#fca5a5 }
.lg-holdover { padding:10px 14px; border-radius:6px; margin-bottom:14px; background:#faf5ff; border:1px solid #e9d5ff }
.lg-holdover-head { font-size:0.95rem; font-weight:600; color:var(--bs-ink-strong); margin-bottom:8px }
.lg-holdover-row { display:grid; grid-template-columns: 1.5fr 1fr 80px 1.2fr; gap:8px; padding:3px 0; font-size:0.78rem }
.lg-save-bar { display:flex; align-items:center; gap:12px; padding:14px 0; border-top:1px solid #e5e7eb; margin-top:12px; position:sticky; bottom:0; background:#fff; z-index:4 }
.lg-save-err { color:#991b1b; font-size:0.78rem }
.lg-save-warn { color:#b45309; font-size:0.78rem }
.lg-btn { padding:7px 14px; border-radius:6px; font-size:0.82rem; font-weight:600; cursor:pointer; border:1px solid transparent }
.lg-btn:disabled { opacity:0.5; cursor:not-allowed }
.lg-btn-primary { background:#2563eb; color:#fff; border-color:#1d4ed8 }
.lg-btn-primary:hover:not(:disabled) { background:#1d4ed8 }
.lg-btn-secondary { background:#fff; color:#374151; border-color:#d1d5db }
.lg-btn-secondary:hover:not(:disabled) { background:#f9fafb }
@media (max-width:1100px) {
  .lg-page { grid-template-columns: 1fr }
  .lg-side { border-left:none; border-top:1px solid var(--bs-border); min-height:auto }
}

/* Invoice History strip (Option 1 — $ totals only across historical columns) */
.lg-history-block { margin-top:16px; padding:14px; background:#fff; border:1px solid #e5e7eb; border-radius:8px }
.lg-history-empty { margin-top:16px; padding:14px; background:#fafbfd; border:1px dashed #d1d5db; border-radius:8px }
.lg-history-empty-body { font-size:0.78rem; color:#9ca3af; margin-top:6px }
.lg-history-head { font-size:0.95rem; font-weight:600; color:var(--bs-ink-strong); margin-bottom:10px; display:flex; align-items:center; gap:8px }
.lg-history-count { font-weight:400; color:#9ca3af; text-transform:none; letter-spacing:0; font-size:0.72rem }
.lg-history-scroll { overflow-x:auto; max-width:100% }
.lg-history-table { font-size:0.78rem; min-width:100% }
.lg-history-table th { background:#E0E3F5; color:#1f2547; padding:6px 8px; vertical-align:bottom; border:1px solid #c5c8d9; min-width:90px; text-align:center }
.lg-history-table td { padding:6px 8px; border:1px solid #e5e7eb; text-align:center }
.lg-hist-label { background:var(--bs-primary-light) !important; color:var(--bs-ink-strong) !important; font-weight:700; text-align:left !important; min-width:120px; position:sticky; left:0; z-index:1 }
.lg-hist-num { font-family:ui-monospace,monospace; font-weight:700 }
.lg-hist-void { font-family:ui-sans-serif,system-ui,sans-serif; font-weight:600; font-size:0.62rem; color:#9ca3af; text-transform:uppercase; letter-spacing:0.04em }
.lg-hist-date { font-size:0.7rem; color:#6b7280; font-weight:400; margin-top:2px }
.lg-hist-draft-head { background:#EFB036 !important; color:#3d2a00 !important }
.lg-hist-draft-cell { background:#FBE4AC; color:#5c4314; font-weight:700 }
.lg-hist-running-head { background:#70AD47 !important; color:white !important }
.lg-hist-running-cell { background:#E2EEDA; color:#1f3d14; font-weight:700 }
.lg-paid { display:inline-block; padding:2px 8px; border-radius:3px; background:#d1fae5; color:#065f46; font-weight:700; font-size:0.7rem }
.lg-pending { display:inline-block; padding:2px 8px; border-radius:3px; background:#fef3c7; color:#92400e; font-weight:700; font-size:0.7rem }
.lg-due { display:inline-block; padding:2px 8px; border-radius:3px; background:#fee2e2; color:#991b1b; font-weight:700; font-size:0.7rem }
.lg-status-label { font-size:0.7rem; color:#6b7280; font-weight:700; text-transform:uppercase }
.lg-status-date, .lg-status-method { text-align:center; font-size:0.7rem; padding:2px 4px }
.lg-status-paid { color:#065f46 }
.lg-status-due  { color:#991b1b; font-weight:700 }
.lg-status-method { color:#6b7280 }
.lg-history-pct { margin-top:10px; font-size:0.78rem; color:#374151 }

/* KPI tile (collapsible hours/expense summary) — Project Activity strip.
   Default = collapsed: just title + big totals. Click the summary header to
   expand the breakdown table. <details>/<summary> handles state + a11y. */
.lg-kpi-tile { background:#fff; border:1px solid #e5e7eb; border-radius:8px; overflow:hidden; transition:box-shadow 0.12s }
.lg-kpi-tile[open] { box-shadow:0 1px 4px rgba(0,0,0,0.06) }
.lg-kpi-tile.lg-kpi-dim { opacity:0.55 }
.lg-kpi-summary { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; cursor:pointer; list-style:none; user-select:none }
.lg-kpi-summary::-webkit-details-marker { display:none }
.lg-kpi-summary:hover { background:#fafbfd }
.lg-kpi-title { font-size:0.95rem; font-weight:600; color:var(--bs-ink-strong); flex:1; min-width:0 }
.lg-kpi-stat { display:flex; align-items:baseline; gap:4px; white-space:nowrap; color:#111827 }
.lg-kpi-num { font-size:1rem; font-weight:700; font-family:ui-monospace,monospace }
.lg-kpi-unit { font-size:0.7rem; color:#6b7280; margin-left:1px }
.lg-kpi-sep { color:#d1d5db; margin:0 2px }
.lg-kpi-empty { font-size:0.78rem; color:#9ca3af; font-style:italic }
.lg-kpi-caret { font-size:0.7rem; color:#9ca3af; margin-left:6px; transition:transform 0.15s }
.lg-kpi-tile[open] .lg-kpi-caret { transform:rotate(180deg) }
.lg-kpi-table { border-top:1px solid #e5e7eb; margin:0 }
/* Spend-detail / lifetime drawer table polish — navy headers, zebra rows so
   the data isn't a wall of gray. Editable column headers stay gold via
   .lg-th-draft (defined above). */
.lg-kpi-table thead th { background:var(--bs-primary); color:#fff; font-weight:700; border-bottom:none; padding:8px 8px }
.lg-kpi-table thead th.lg-th-draft { background:var(--bs-accent) !important; color:var(--bs-primary) !important }
.lg-kpi-table tbody tr:nth-child(even) td { background:#f8fafc }
.lg-kpi-table tbody tr:hover td { background:var(--bs-accent-light) }
.lg-kpi-table tbody td { padding:7px 8px }

/* Cross-highlight, both directions:
   - Hover a historical invoice cell linked to an expense → light up the
     matching expense row(s) in the Expenses table.
   - Hover an expense row → light up the historical invoice cell where that
     expense was billed (.lg-cross-hl-cell, set by lgRender wiring).
   The ↗ glyph is corner-positioned via ::after so the number stays right-
   aligned and the cell looks visually identical to non-linked cells. */
/* Any hist cell that can carry a chip needs position:relative for the absolute chip to land inside it */
.lg-fee-matrix td.lg-hist-cell { position:relative }
.lg-hour-matrix td.lg-hour-cell, .lg-hour-matrix td.lg-hour-draft-cell { position:relative }
.lg-fee-matrix td.lg-bli-exp-trigger,
.lg-hour-matrix td.lg-bli-exp-trigger { position:relative; cursor:pointer; transition:background 0.12s, box-shadow 0.12s }
.lg-fee-matrix td.lg-bli-exp-trigger:hover,
.lg-hour-matrix td.lg-bli-exp-trigger:hover { background:#fef9c3 !important }
.lg-fee-matrix td.lg-cross-hl-cell,
.lg-hour-matrix td.lg-cross-hl-cell { background:#fef3c7 !important; box-shadow:inset 0 0 0 2px #f59e0b }

/* Linker chip on direct-cost cells (mig 136). Always visible, color-coded by
   link source: stored = explicit FK on the historical line, heuristic =
   render-time vendor-token guess, none = no candidate match. Click opens
   the linker popover. */
.lg-fee-matrix td .lg-link-chip,
.lg-hour-matrix td .lg-link-chip {
  position:absolute; top:1px; right:2px;
  width:16px; height:16px; padding:0; border:none; background:rgba(255,255,255,0.85);
  font-size:0.75rem; line-height:1; cursor:pointer;
  border-radius:3px; box-shadow:0 0 0 1px rgba(0,0,0,0.08);
  opacity:1; transition:opacity 0.12s, transform 0.12s, background 0.12s;
}
.lg-fee-matrix td .lg-link-chip:hover,
.lg-hour-matrix td .lg-link-chip:hover { opacity:1; transform:scale(1.2); background:#fff }
.lg-fee-matrix td .lg-link-chip.lg-link-stored,
.lg-hour-matrix td .lg-link-chip.lg-link-stored    { color:#059669 }  /* green = explicit link */
.lg-fee-matrix td .lg-link-chip.lg-link-heuristic,
.lg-hour-matrix td .lg-link-chip.lg-link-heuristic { color:#b45309 }  /* amber = guessed */
.lg-fee-matrix td .lg-link-chip.lg-link-none,
.lg-hour-matrix td .lg-link-chip.lg-link-none      { color:#9ca3af }  /* gray = no candidate */

/* Linker popover (anchored to the clicked chip) */
.lg-linker-pop {
  position:fixed; z-index:10000;
  width:340px; max-height:520px;
  display:flex; flex-direction:column;
  background:#fff; border:1px solid #d1d5db; border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,0.18);
  font-size:0.85rem;
}
.lg-linker-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 10px; border-bottom:1px solid #e5e7eb;
  font-weight:600; color:#111827;
}
.lg-linker-title { font-size:0.85rem }
.lg-linker-close {
  border:none; background:transparent; cursor:pointer;
  font-size:1.1rem; color:#6b7280; padding:0 4px; line-height:1;
}
.lg-linker-close:hover { color:#111827 }
.lg-linker-ctx {
  padding:6px 10px; font-size:0.75rem; color:#4b5563;
  background:#f9fafb; border-bottom:1px solid #e5e7eb;
  line-height:1.4;
}
.lg-linker-filter {
  margin:8px 10px; padding:5px 8px; border:1px solid #d1d5db; border-radius:4px;
  font-size:0.82rem;
}
.lg-linker-list { overflow:auto; max-height:320px; padding:0 6px 6px 6px }
.lg-linker-empty { padding:18px; color:#9ca3af; text-align:center }
.lg-linker-row {
  padding:6px 8px; border-radius:4px; cursor:pointer;
  transition:background 0.1s;
}
.lg-linker-row:hover { background:#fef9c3 }
.lg-linker-row.lg-linker-suggested { background:#ecfdf5 }
.lg-linker-row.lg-linker-suggested:hover { background:#d1fae5 }
.lg-linker-row.lg-linker-current { background:#dbeafe; outline:1px solid #93c5fd }
.lg-linker-row.lg-linker-used { opacity:0.5; cursor:not-allowed }
.lg-linker-row.lg-linker-used:hover { background:transparent }
.lg-linker-row-main {
  display:flex; justify-content:space-between; align-items:center;
  font-weight:600; color:#111827;
}
.lg-linker-vendor { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:200px }
.lg-linker-row-meta {
  display:flex; justify-content:space-between; font-size:0.75rem; color:#6b7280;
  margin-top:2px;
}
.lg-linker-amt { font-family:ui-monospace,monospace; color:#111827 }
.lg-linker-tag {
  display:inline-block; padding:1px 6px; border-radius:999px;
  font-size:0.65rem; font-weight:600; letter-spacing:0.02em;
}
.lg-linker-tag-current { background:#3b82f6; color:#fff }
.lg-linker-tag-used    { background:#e5e7eb; color:#6b7280 }
.lg-linker-tag-sugg    { background:#15803d; color:#fff }
.lg-linker-foot {
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 10px; border-top:1px solid #e5e7eb; background:#f9fafb;
  border-radius:0 0 8px 8px;
}
.lg-linker-unlink {
  border:1px solid #fecaca; background:#fff; color:#b91c1c;
  padding:4px 10px; border-radius:4px; font-size:0.78rem; cursor:pointer;
}
.lg-linker-unlink:hover { background:#fef2f2 }
.lg-linker-cancel {
  border:1px solid #d1d5db; background:#fff; color:#374151;
  padding:4px 10px; border-radius:4px; font-size:0.78rem; cursor:pointer;
}
.lg-linker-cancel:hover { background:#f3f4f6 }
.lg-bli-exp-link { color:#9ca3af; font-size:0.7rem }
.lg-exp-row { cursor:pointer }
.lg-exp-row:hover { background:#fef9c3 }
.lg-exp-row.lg-cross-hl > td { background:#fef3c7 !important }
/* Expense row color coding — soft bg tint provides categorical scan; no side-stripe per design system. */
.lg-exp-color-amber td { background:#fffbeb !important }
.lg-exp-color-blue   td { background:#eff6ff !important }
.lg-exp-color-green  td { background:#f0fdf4 !important }
.lg-exp-color-grey   td { background:#f9fafb !important; opacity:0.75 }
.lg-exp-color-red    td { background:#fef2f2 !important }

/* Invoice drawer (Module 6 / SS3) — single-invoice place of truth */
.ip-drawer-content { padding:18px }
.ip-loading, .ip-empty { padding:60px 16px; text-align:center; color:#9ca3af; font-size:0.95rem }
.ip-proj-link { font-size:0.78rem; margin-bottom:14px }
.ip-summary { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid #e5e7eb }
.ip-amount { font-size:1.6rem; font-weight:700; color:#111827; font-family:ui-monospace,monospace }
.ip-status { display:inline-block; padding:3px 12px; border-radius:999px; font-size:0.72rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase }
.ip-status-paid { background:#d1fae5; color:#065f46 }
.ip-status-open { background:#fef3c7; color:#92400e }
.ip-status-blue { background:#dbeafe; color:#1d4ed8 }
.ip-status-unknown { background:#e5e7eb; color:#374151 }
.ip-card { background:#fff; border:1px solid #e5e7eb; border-radius:8px; overflow:hidden; margin-bottom:18px }
.ip-card-head { background:#f3f4f6; padding:8px 12px; font-size:0.74rem; font-weight:700; color:#1f2547; text-transform:uppercase; letter-spacing:0.05em; border-bottom:1px solid #e5e7eb }
.ip-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 }
.ip-field { padding:10px 12px; border-bottom:1px solid #f3f4f6 }
.ip-field:nth-child(odd) { border-right:1px solid #f3f4f6 }
.ip-label { font-size:0.65rem; color:#9ca3af; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:2px }
.ip-value { font-size:0.88rem; color:#111827; font-weight:500 }
.ip-pending .ip-value { color:#9ca3af }
.ip-pending-tag { display:inline-block; font-size:0.6rem; color:#92400e; background:#fef3c7; padding:1px 6px; border-radius:3px; margin-left:6px; font-weight:600; text-transform:uppercase; letter-spacing:0.03em }
.ip-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:6px }
.ip-actions .mw-btn-primary, .ip-actions .mw-btn-secondary { font-size:0.85rem; padding:8px 14px; text-decoration:none }
/* Expense drawer color variants: soft bg tint only; no side-stripe; drawer header always navy per spec §5. */
.ep-color-red    { border-left:none !important }
.ep-summary-bg-red { background:#fef2f2 !important }
.ip-status-pending { background:#fce7f3; color:#9d174d }
.ep-color-amber { border-left:none !important }
.ep-color-blue  { border-left:none !important }
.ep-color-green { border-left:none !important }
.ep-color-grey  { border-left:none !important; opacity:0.85 }
.ep-color-none  { border-left:none !important }
/* Expense drawer summary card background tint */
.ep-summary-bg-amber { background:#fffbeb !important }
.ep-summary-bg-blue  { background:#eff6ff !important }
.ep-summary-bg-green { background:#f0fdf4 !important }
.ep-summary-bg-grey  { background:#f9fafb !important }

/* Fee matrix (lump_sum / hybrid) */
.lg-fee-section-head { background:var(--bs-primary-light); color:var(--bs-ink-strong); font-size:0.95rem; font-weight:600; padding:8px 10px; border-radius:6px 6px 0 0; margin-top:14px }
.lg-fee-section-head + .lg-fee-matrix-wrap .lg-fee-matrix { margin-top:0 }
.lg-fee-matrix { margin-top:14px }
.lg-fee-title { padding:8px 10px; font-weight:500 }
.lg-fee-pct { width:70px; text-align:right }
.lg-fee-note { font-size:0.72rem; color:#6b7280; padding:8px 12px; background:#fffbeb; border:1px solid #fde68a; border-radius:6px; margin-top:-6px; margin-bottom:12px }
.lg-fee-note strong { color:#78350f }
/* Inline-editable invoice print reference in the ledger header. Subtle
   border that strengthens on focus / hover. Wide enough to fit a typical
   contract number string without forcing the user to scroll horizontally. */
.lg-fee-matrix-wrap { overflow-x:auto; max-width:100%; margin-bottom:14px; scrollbar-width:thin }
/* Hourly invoice grid — read-only mirror of the legacy Excel HOURLY RATES +
   SUBCONTRACT bands. Compact cells, light striping, position labels left-
   sticky. The right "Total Billed" column accumulates lifetime $ per row. */
.lg-hour-matrix { width:100%; border-collapse:collapse; font-size:0.78rem }
.lg-hour-matrix thead th { background:#eef2ff; color:#1f2547; padding:6px 8px; border:1px solid #c7d2fe; font-weight:600; text-align:right; white-space:nowrap }
.lg-hour-label-th { text-align:left !important; min-width:140px }
.lg-hour-rate-th { min-width:48px }
.lg-hour-inv-banner { background:#1e3a8a !important; color:#fff !important; text-align:center !important; font-weight:700; font-size:0.75rem; letter-spacing:0.05em; padding:4px 8px }
.lg-fee-inv-banner { background:#1e3a8a !important; color:#fff !important; text-align:center !important; font-weight:700; font-size:0.75rem; letter-spacing:0.05em; padding:4px 8px }
.lg-fee-draft-banner { background:#EFB036 !important; color:#3d2a00 !important; text-align:center !important; font-weight:700; font-size:0.75rem; letter-spacing:0.05em; padding:4px 8px }
.lg-fee-pad-banner { background:#f3f4f6 !important; border-bottom:1px solid #e5e7eb }
.lg-hour-inv-th { background:#dbeafe !important; color:#1e3a8a; text-align:center !important; min-width:120px }
.lg-hour-inv-th-date { background:#eff6ff !important; color:#1f2937; text-align:center !important; font-weight:500 !important; font-size:0.72rem }
.lg-hour-sub-th { background:#f3f4f6 !important; color:#4b5563; font-size:0.72rem }
.lg-hour-sub-th-hrs { min-width:36px; width:36px }
.lg-hour-sub-th-amt { min-width:70px; width:70px }
.lg-hour-total-hrs-th { background:#dbeafe !important; color:#1e3a8a; min-width:67px; text-align:right !important; vertical-align:middle }
.lg-hour-lifetime-th { background:#dbeafe !important; color:#1e3a8a; min-width:92px; text-align:right !important; vertical-align:middle }
.lg-hour-row td { padding:5px 8px; border:1px solid #e5e7eb; background:#fff }
.lg-hour-row:nth-child(even) td { background:#fafbff }
.lg-hour-label { text-align:left; font-weight:500; color:#111827 }
.lg-hour-rate { color:#6b7280; font-variant-numeric:tabular-nums; text-align:right }
.lg-hour-cell { font-variant-numeric:tabular-nums; color:#111827; text-align:right }
.lg-hour-cell-empty { color:#d1d5db; text-align:right }
.lg-hour-lifetime { font-variant-numeric:tabular-nums; font-weight:600; background:#f0f9ff !important; text-align:right }
.lg-hour-subtotal-row td { background:#f3f4f6 !important; font-weight:600; border-top:2px solid var(--bs-border-strong) }
.lg-hour-subtotal-cell { font-variant-numeric:tabular-nums; text-align:right }
.lg-hour-section-head th { background:var(--bs-primary-light) !important; color:var(--bs-ink-strong); text-align:left !important; font-size:0.95rem; font-weight:600; padding:8px 10px; border:1px solid var(--bs-border) }
.lg-hour-grand-row td { background:#1e293b !important; color:#fff; font-weight:700; padding:8px 10px; border:1px solid #1e293b }
.lg-hour-grand-row .lg-hour-lifetime { background:#0f172a !important; color:#fff }
.lg-hour-pad-th { background:#f3f4f6 !important; color:#cbd5e1 !important; min-width:70px; border:1px dashed #e5e7eb !important }
.lg-hour-pad-cell { background:#fafafa !important; color:#cbd5e1; border:1px dashed #e5e7eb !important }
.lg-hour-draft-th { background:#EFB036 !important; color:#3d2a00 !important; min-width:60px }
/* Frozen columns for the hourly invoice grid. Left: HOURLY RATES + Rate.
   Right: Total Billed. Explicit widths keep offsets consistent across rows. */
.lg-hour-matrix .lg-stick-l-1 { position:sticky; left:0;     width:130px; min-width:130px; max-width:130px; z-index:2 }
.lg-hour-matrix .lg-stick-l-2 { position:sticky; left:130px; width:56px;  min-width:56px;  max-width:56px;  z-index:2 }
.lg-hour-matrix thead th.lg-stick-l-1,
.lg-hour-matrix thead th.lg-stick-l-2 { z-index:3; background:#eef2ff }
.lg-hour-matrix tbody tr.lg-hour-row td.lg-stick-l-1,
.lg-hour-matrix tbody tr.lg-hour-row td.lg-stick-l-2 { background:#fff }
.lg-hour-matrix tbody tr.lg-hour-row:nth-child(even) td.lg-stick-l-1,
.lg-hour-matrix tbody tr.lg-hour-row:nth-child(even) td.lg-stick-l-2 { background:#fafbff }
.lg-hour-matrix tr.lg-hour-subtotal-row td.lg-stick-l-1,
.lg-hour-matrix tr.lg-hour-subtotal-row td.lg-stick-l-2 { background:#f3f4f6 }
.lg-hour-matrix tr.lg-hour-grand-row td.lg-stick-l-1,
.lg-hour-matrix tr.lg-hour-grand-row td.lg-stick-l-2 { background:#1e293b; color:#fff }
.lg-hour-matrix tr.lg-hour-section-head th.lg-stick-l-1 { background:var(--bs-primary-light); color:var(--bs-ink-strong) }
.lg-hour-matrix .lg-hour-total-hrs-th,
.lg-hour-matrix .lg-hour-total-hrs { position:sticky; right:92px; z-index:2; font-variant-numeric:tabular-nums; font-weight:600; background:#f0f9ff !important; text-align:right; color:#1e3a8a; min-width:67px; width:67px; max-width:67px }
.lg-hour-matrix thead th.lg-hour-total-hrs-th { z-index:3 }
.lg-hour-matrix .lg-hour-lifetime-th,
.lg-hour-matrix .lg-hour-lifetime { position:sticky; right:0; z-index:2; min-width:92px; width:92px; max-width:92px; background:#dbeafe; text-align:right; font-variant-numeric:tabular-nums; font-weight:600; color:#1e3a8a; box-shadow:-4px 0 6px -3px rgba(0,0,0,0.08) }
.lg-hour-matrix thead th.lg-hour-lifetime-th { z-index:3; background:#dbeafe }
.lg-hour-matrix tr.lg-hour-grand-row td.lg-hour-lifetime { background:#1e293b !important; color:#fff }
.lg-hour-matrix tr.lg-hour-subtotal-row td.lg-hour-lifetime { background:#f3f4f6 }
.lg-hour-matrix tr.lg-hour-section-head th.lg-hour-lifetime,
.lg-hour-matrix tr.lg-hour-section-head td.lg-hour-lifetime { background:var(--bs-primary-light) }
.lg-hour-draft-cell { background:#FBE4AC !important; color:#5c4314; font-weight:600; text-align:right; font-variant-numeric:tabular-nums }
.lg-hour-subtotal-row .lg-hour-draft-cell { background:#b45309 !important; color:#fff }
.lg-hour-grand-row .lg-hour-draft-cell { background:#0f172a !important; color:#fff }

.lg-role-row-empty td { background:#fafafa; color:#9ca3af; cursor:default }
.lg-role-row-empty:hover td { background:#fafafa }
/* Reference line sits below the PM/contract sub-line. Bumped from 0.78rem
   muted grey to a more prominent treatment (label + value, darker, bolder)
   because in field use the previous size made the reference number
   disappear into the sub-line. */
.lg-header-ref { margin-top:4px; display:flex; align-items:center; gap:6px; flex-wrap:wrap }
.lg-header-ref-label { font-size:0.85rem; font-weight:700; color:#1f2937; letter-spacing:0.2px }
/* Read-only ref display (non-editors) — italic-gray, mirroring the printed
   Invoice Summary's "<reference>" line under the client name. */
.lg-header-ref-value { font-size:0.85rem; font-style:italic; color:#555; font-family:inherit; font-weight:500 }
/* Editable ref input — same italic-gray look at rest so the on-screen
   header visually matches the print's reference line. On focus, switch
   to a clear-input look so the editing affordance is unmistakable. */
.lg-header-ref-input {
  flex:1; min-width:200px; max-width:520px;
  font-size:0.85rem; font-style:italic; font-weight:500; padding:3px 8px;
  border:1px dashed transparent; border-radius:4px;
  background:transparent; color:#555;
  font-family:inherit;
  transition:border-color 0.15s, background 0.15s, color 0.15s, font-style 0.15s;
}
.lg-header-ref-input::placeholder { color:#9ca3af; font-style:italic; font-weight:400; font-family:inherit; font-size:0.78rem }
.lg-header-ref-input:hover { border-color:#cbd5e1 }
.lg-header-ref-input:focus {
  outline:none; border-color:var(--bs-accent); border-style:solid; background:#fff;
  font-style:normal; color:#111; font-weight:600;
}
.lg-fee-matrix .lg-hist-col { min-width:72px; width:72px; max-width:72px; background:#E0E3F5; color:#1f2547; text-align:center; font-family:ui-monospace,monospace; font-weight:700; font-size:0.72rem }
/* ASR + Agreed Total columns sit between Contract (sticky-left) and the
   scrolling historical-invoice strip. Mirrors the print summary layout —
   each BLI's amount lives in either Contract or one ASR-N column, with
   Agreed Total = sum across that row. */
.lg-fee-matrix .lg-col-asr { min-width:75px; width:75px; max-width:75px; background:#E8EBF7; color:#1f2547; text-align:center; font-weight:700; font-size:0.72rem }
.lg-fee-matrix .lg-col-agreed { min-width:90px; width:90px; max-width:90px; background:#DCE5F1; color:#1f2547; text-align:center; font-weight:700; font-size:0.72rem }
.lg-fee-matrix td.lg-asr-cell { text-align:right; font-variant-numeric:tabular-nums; font-weight:600; background:#F4F6FC }
.lg-fee-matrix td.lg-asr-cell-empty { text-align:center; color:#cbd5e1; background:#F4F6FC }
.lg-fee-matrix td.lg-agreed-cell { text-align:right; font-variant-numeric:tabular-nums; font-weight:700; background:#EAF0FA }
.lg-fee-matrix .lg-total-row td.lg-asr-cell,
.lg-fee-matrix .lg-total-row td.lg-asr-cell-empty,
.lg-fee-matrix .lg-total-row td.lg-agreed-cell { background:#DCE5F1 }
.lg-hist-num-link { color:#1f2547; text-decoration:underline; text-decoration-color:rgba(31,37,71,0.4); text-underline-offset:2px }
.lg-hist-num-link:hover { color:#0f172a; text-decoration-color:#0f172a }
/* Frozen columns: Item + Contract on left, $ DRAFT + Total Billed + % Complete
   + Remaining on right. Only the historical invoice columns scroll between
   them. Widths are explicit so left/right offsets line up across rows. */
.lg-fee-matrix .lg-stick-l-1 { position:sticky; left:0;     width:220px; min-width:220px; max-width:220px; z-index:2 }
.lg-fee-matrix .lg-stick-l-2 { position:sticky; left:220px; width:95px;  min-width:95px;  max-width:95px;  z-index:2 }
.lg-fee-matrix .lg-stick-r-4 { position:sticky; right:270px; width:92px;  min-width:92px;  max-width:92px;  z-index:2 }
.lg-fee-matrix .lg-stick-r-3 { position:sticky; right:178px; width:92px;  min-width:92px;  max-width:92px;  z-index:2 }
.lg-fee-matrix .lg-stick-r-2 { position:sticky; right:110px; width:68px;  min-width:68px;  max-width:68px;  z-index:2 }
.lg-fee-matrix .lg-stick-r-1 { position:sticky; right:0;     width:110px; min-width:110px; max-width:110px; z-index:2 }
/* Allow frozen-column headers to wrap to two lines instead of forcing extra width. */
.lg-fee-matrix thead th.lg-stick-l-1,
.lg-fee-matrix thead th.lg-stick-l-2,
.lg-fee-matrix thead th.lg-stick-r-1,
.lg-fee-matrix thead th.lg-stick-r-2,
.lg-fee-matrix thead th.lg-stick-r-3,
.lg-fee-matrix thead th.lg-stick-r-4 { white-space:normal; line-height:1.15; word-break:break-word }
/* Plain body cells need a solid bg or scrolling cells bleed through. The
   draft / running / total-row / status-row cells already have their own bg
   from existing rules so we don't override those. */
.lg-fee-matrix tbody tr:not(.lg-total-row):not(.lg-status-row) > td.lg-stick-l-1,
.lg-fee-matrix tbody tr:not(.lg-total-row):not(.lg-status-row) > td.lg-stick-l-2,
.lg-fee-matrix tbody tr:not(.lg-total-row):not(.lg-status-row) > td.lg-stick-r-2,
.lg-fee-matrix tbody tr:not(.lg-total-row):not(.lg-status-row) > td.lg-stick-r-1 { background:#fff }
.lg-fee-matrix .lg-status-row > td.lg-stick-l-1,
.lg-fee-matrix .lg-status-row > td.lg-stick-l-2,
.lg-fee-matrix .lg-status-row > td.lg-stick-r-3,
.lg-fee-matrix .lg-status-row > td.lg-stick-r-2,
.lg-fee-matrix .lg-status-row > td.lg-stick-r-1 { background:#fff }
/* Sticky header cells must layer above sticky body cells. */
.lg-fee-matrix thead th.lg-stick-l-1,
.lg-fee-matrix thead th.lg-stick-l-2,
.lg-fee-matrix thead th.lg-stick-r-1,
.lg-fee-matrix thead th.lg-stick-r-2,
.lg-fee-matrix thead th.lg-stick-r-3,
.lg-fee-matrix thead th.lg-stick-r-4 { z-index:3 }
.lg-fee-matrix .lg-hist-date-th { font-size:0.65rem; font-weight:400; color:#6b7280; background:#F0F2FA }
.lg-fee-matrix .lg-hist-cell { background:#F8F9FB; color:#374151; font-size:0.78rem }
.lg-fee-matrix .lg-hist-cell-empty { background:#FAFBFD; color:#d1d5db; font-size:0.85rem }
.lg-fee-matrix .lg-hist-pad-th { background:#f3f4f6 !important; color:#cbd5e1 !important; border:1px dashed #e5e7eb !important }
.lg-fee-matrix .lg-hist-pad-cell { background:#fafafa !important; color:#cbd5e1 !important; border:1px dashed #e5e7eb !important }
.lg-fee-dollar { width:80px; text-align:right; padding:4px 6px; font-family:ui-monospace,monospace }
.lg-pct-bar { position:relative; height:18px; background:#f3f4f6; border-radius:3px; overflow:hidden; min-width:60px; display:inline-block; width:100% }
.lg-pct-fill { position:absolute; left:0; top:0; bottom:0; transition:width 0.15s; opacity:0.6 }
.lg-pct-label { position:relative; z-index:1; display:block; text-align:center; line-height:18px; font-size:0.72rem; font-weight:700; color:#1f2937 }

/* Goals panel (right rail) — two-row card: title+due on row 1, %+pill on row 2 */
.lg-goals-list { display:flex; flex-direction:column; gap:6px }
/* 2px status-colored border so the goal's status is the dominant signal
   on the card (per digest D1). The per-goal `color` field still tints the
   background — that's the goal's tag/category color. Border color comes
   from lg-gs-* class set in lgBuildGoalsPanel() — closed uses a softer
   transparent blue to match mv-badge-closed (the rest of BaseStation). */
.lg-goal-card { position:relative; padding:8px 10px; border-radius:6px; border:2px solid #d1d5db; cursor:pointer; overflow:hidden; color:#1f2937; transition:filter 0.12s, border-color 0.12s }
.lg-goal-card.lg-gs-not_started { border-color:#9ca3af }
.lg-goal-card.lg-gs-on_track    { border-color:#22c55e }
.lg-goal-card.lg-gs-behind      { border-color:#f59e0b }
.lg-goal-card.lg-gs-at_risk     { border-color:#ef4444 }
.lg-goal-card.lg-gs-closed,
.lg-goal-card.lg-gs-completed   { border-color:rgba(147,197,253,0.7) }
.lg-goal-card:hover { filter:brightness(0.95) }
.lg-goal-card-closed { text-decoration:line-through; opacity:0.6 }
.lg-goal-card-fill { position:absolute; right:0; top:0; bottom:0; background:rgba(255,255,255,0.55); z-index:0 }
.lg-goal-card-row1 { position:relative; z-index:1; display:flex; align-items:baseline; gap:8px }
.lg-goal-card-row2 { position:relative; z-index:1; display:flex; align-items:center; gap:8px; margin-top:4px }
.lg-goal-card-name { flex:1; font-size:0.78rem; font-weight:700; color:#111827; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.lg-goal-card-due { font-size:0.7rem; color:#374151; font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums }
.lg-goal-card-pct { font-size:0.7rem; font-weight:600; color:#374151; font-variant-numeric:tabular-nums; font-family:ui-monospace,monospace }
/* Inline status pill on each goal card uses the canonical .mv-status-badge
   classes (defined ~line 877). Push it to the right and tighten the size
   slightly to fit the card row. */
.lg-goal-card-row2 .mv-status-badge { margin-left:auto; min-width:0; padding:2px 10px; font-size:0.65rem }

/* Goal status picker popover. Shares the .mv-status-dd container style
   (light box, drop shadow) plus mv-sdd-item buttons. .lg-goal-popover is
   a marker class for the dismiss-on-outside-click handler. The active
   item shows a 2px outline of its own pill color so the user can see
   which status is currently set. */
.lg-goal-popover { padding:6px; min-width:140px }
.lg-goal-popover .mv-sdd-item { margin:3px 0 }
.lg-goal-popover .mv-sdd-item.active { outline:2px solid currentColor; outline-offset:1px }

/* ===========================================================================
   bs-kpi-* — Standard KPI Strip (Page Header Component, v8.87+)
   Canonical "what should the user know in 5 seconds?" header row.
   Use on any page that wants a metrics strip above the primary content.
   See basestation/ui-standards. Legacy lg-hero-* (below) and fin-kpi-*
   (in finance section) are pending migration to these classes.

   Markup:
     <div class="bs-kpi-strip" style="--bs-kpi-count:4">
       <button class="bs-kpi-tile bs-kpi-red">       <-- interactive
         <div class="bs-kpi-label">OVERDUE</div>
         <div class="bs-kpi-value">7</div>
         <div class="bs-kpi-sub">3 today</div>
       </button>
       <div class="bs-kpi-tile bs-kpi-locked">       <-- non-interactive
         <div class="bs-kpi-label">LIFETIME COST</div>
         <div class="bs-kpi-value">&#128274;</div>
         <div class="bs-kpi-sub">Restricted</div>
       </div>
     </div>

   Modifiers: bs-kpi-red / bs-kpi-yellow / bs-kpi-green / bs-kpi-neutral
              bs-kpi-locked (gray, no hover, padlock)
   =========================================================================== */
.bs-kpi-strip {
  display:grid;
  grid-template-columns:repeat(var(--bs-kpi-count, 4), minmax(0, 1fr));
  gap:12px;
  margin-bottom:14px;
}
.bs-kpi-tile {
  position:relative;
  display:flex; flex-direction:column; gap:4px;
  padding:14px 16px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:10px;
  text-align:left;
  font-family:inherit;
  overflow:hidden;
  min-width:0;
}
/* Interactive variant: only buttons get hover lift + pointer cursor.
   Plain <div class="bs-kpi-tile"> renders as a static display tile. */
button.bs-kpi-tile {
  cursor:pointer;
  transition:transform 0.08s, box-shadow 0.12s;
}
button.bs-kpi-tile:hover {
  box-shadow:0 4px 14px rgba(0,0,0,0.08);
  transform:translateY(-1px);
}
button.bs-kpi-tile:focus-visible {
  outline:2px solid var(--bs-accent);
  outline-offset:2px;
}
button.bs-kpi-tile[disabled],
.bs-kpi-locked {
  cursor:not-allowed;
  opacity:0.7;
}
button.bs-kpi-locked:hover {
  transform:none;
  box-shadow:none;
}

/* Left 4px accent bar — color encodes status (red/yellow/green/neutral). */
.bs-kpi-tile::before {
  content:'';
  position:absolute; left:0; top:0; bottom:0;
  width:4px;
  background:transparent;
  border-radius:10px 0 0 10px;
}
.bs-kpi-red::before    { background:#ef4444 }
.bs-kpi-yellow::before { background:#f59e0b }
.bs-kpi-green::before  { background:#10b981 }
.bs-kpi-neutral::before,
.bs-kpi-locked::before { background:#9ca3af }

/* Tinted backgrounds for status tiles — subtle so the page below is the
   visual centerpiece. Tiles guide, don't shout. */
.bs-kpi-red    { background:#fef2f2 }
.bs-kpi-yellow { background:#fffbeb }
.bs-kpi-green  { background:#ecfdf5 }
.bs-kpi-locked { background:#f9fafb }

/* Typography */
.bs-kpi-label {
  font-size:0.66rem; font-weight:800;
  letter-spacing:0.08em; text-transform:uppercase;
  color:#6b7280;
}
.bs-kpi-value {
  font-size:1.7rem; font-weight:800;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  line-height:1.1;
  color:#111827;
}
.bs-kpi-red    .bs-kpi-value { color:#991b1b }
.bs-kpi-yellow .bs-kpi-value { color:#92400e }
.bs-kpi-green  .bs-kpi-value { color:#065f46 }
.bs-kpi-sub {
  font-size:0.78rem;
  color:#374151;
  font-variant-numeric:tabular-nums;
}

/* Secondary strip — smaller variant for overflow tiles below the primary
   strip (use when a page needs >4 KPIs; never wrap a single strip). */
.bs-kpi-strip.bs-kpi-secondary { gap:8px; margin-top:-6px }
.bs-kpi-secondary .bs-kpi-tile { padding:10px 12px }
.bs-kpi-secondary .bs-kpi-value { font-size:1.15rem }
.bs-kpi-secondary .bs-kpi-label { font-size:0.62rem }

/* Active state — used when a clickable KPI tile is acting as a filter. */
button.bs-kpi-tile.bs-kpi-active {
  outline:2px solid var(--bs-accent);
  outline-offset:2px;
}

/* Responsive: collapse to a single column on phone. */
@media (max-width: 768px) {
  .bs-kpi-strip { grid-template-columns:1fr; gap:10px }
}

/* ===========================================================================
   HERO BAND — three KPI tiles above the fee matrix that answer "what's a fair
   draft?" in 5 seconds. Tiles 1+2 are clickable buttons that open detail
   drawers; tile 3 scrolls to the right-rail goals panel and pulses it.
   LEGACY — pending migration to bs-kpi-* above.
   =========================================================================== */
.lg-hero-band { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; margin-bottom:14px }
.lg-hero-tile { position:relative; display:flex; flex-direction:column; gap:4px; padding:14px 16px; border-radius:10px; border:1px solid #e5e7eb; background:#fff; text-align:left; cursor:pointer; font-family:inherit; transition:transform 0.08s, box-shadow 0.12s; overflow:hidden; min-width:0 }
.lg-hero-tile:hover { box-shadow:0 4px 14px rgba(0,0,0,0.08); transform:translateY(-1px) }
.lg-hero-tile:focus-visible { outline:2px solid #2563eb; outline-offset:2px }
.lg-hero-tile[disabled], .lg-hero-locked { cursor:not-allowed; opacity:0.7 }
.lg-hero-locked:hover { transform:none; box-shadow:none }
.lg-hero-label { font-size:0.66rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:#6b7280 }
.lg-hero-value { font-size:1.7rem; font-weight:800; font-family:ui-monospace,monospace; line-height:1.1; color:#111827 }
.lg-hero-value.lg-hero-text { font-size:1.15rem; letter-spacing:0.04em; font-family:inherit }
.lg-hero-sub   { font-size:0.78rem; color:#374151; font-variant-numeric:tabular-nums }
.lg-hero-meta  { font-size:0.74rem; color:#4b5563 }
.lg-hero-period{ font-size:0.7rem; color:#9ca3af; font-style:italic; margin-top:2px }
.lg-hero-muted { color:#9ca3af; font-style:italic }
.lg-hero-bar   { height:6px; background:#f3f4f6; border-radius:999px; overflow:hidden; margin-top:6px }
.lg-hero-bar-fill { height:100%; background:#15803d; border-radius:999px; transition:width 0.2s }

/* Color states: the value color carries the signal; no side-stripe accent per spec §6. */
.lg-hero-tile::before { content:none }
.lg-hero-red::before    { content:none }
.lg-hero-yellow::before { content:none }
.lg-hero-green::before  { content:none }
.lg-hero-neutral::before{ content:none }
.lg-hero-locked::before { background:#9ca3af }
.lg-hero-red    { background:#fef2f2 }
.lg-hero-red    .lg-hero-value { color:#991b1b }
.lg-hero-yellow { background:#fffbeb }
.lg-hero-yellow .lg-hero-value { color:#92400e }
.lg-hero-green  { background:#ecfdf5 }
.lg-hero-green  .lg-hero-value { color:#065f46 }
.lg-hero-neutral{ background:#fff }
.lg-hero-locked { background:#f9fafb }

@media (max-width:900px) {
  .lg-hero-band { grid-template-columns:1fr; gap:10px }
}

/* ─── Invoice Workbench tablet polish (≤1100px, ≥641px) ───
   At iPad landscape the row was overflowing by ~100px because of the fixed
   140px KPI tiles + 152px link column. Shrink both tiers so all 4 KPIs
   stay visible in a single row without horizontal scroll. */
@media (min-width:641px) and (max-width:1100px) {
  .inv-wb-row { gap:6px !important; padding:8px 8px !important }
  .inv-wb-kpi { width:112px !important; max-width:112px !important; padding:5px 6px !important }
  .inv-wb-kpi .lg-hero-value { font-size:0.86rem !important }
  .inv-wb-kpi .lg-hero-sub   { font-size:0.6rem !important }
  .inv-wb-kpi .lg-hero-meta  { font-size:0.55rem !important }
  .inv-wb-link-col, .inv-wb-link-col-label { width:128px !important }
  .inv-wb-kpi-label { width:112px !important; max-width:112px !important }
}

/* Pulse the right-rail goals block when the goal-progress tile is clicked.
   Quick visual cue for "this is what the tile drilled into." */
.lg-side-block-pulse { animation:lgSideBlockPulse 1.4s ease-out }
@keyframes lgSideBlockPulse {
  0%   { background:rgba(34,197,94,0.18) }
  100% { background:transparent }
}

/* Header goals strip — active goals inline between title and button stack */
.lg-header-goals { display:flex; align-items:flex-start; gap:8px; flex-shrink:0; max-width:500px; flex-wrap:wrap }
.lg-goal-card-compact { max-width:155px; min-width:115px; flex-shrink:0 }
.lg-goals-more-btn { font-size:0.7rem; padding:3px 8px; border:1px solid #d1d5db; border-radius:4px; background:#fff; cursor:pointer; white-space:nowrap; color:#374151; font-family:inherit; font-weight:600 }
.lg-goals-more-btn:hover { background:#f3f4f6 }
.lg-goals-more-dd { position:absolute; top:calc(100% + 4px); left:0; z-index:20; background:#fff; border:1px solid #e5e7eb; border-radius:8px; box-shadow:0 4px 16px rgba(0,0,0,0.12); padding:10px; min-width:200px; flex-direction:column; gap:6px }
/* Stacked action buttons in the header */
.lg-header-btn-stack { display:flex; flex-direction:column; gap:4px; flex-shrink:0 }

/* Mobile Workbench row action sheet — bottom-sliding panel triggered by
   invRowClick() on ≤640px screens (desktop/tablet keep tap-opens-ledger). */
.inv-row-sheet-overlay {
  position:fixed; inset:0; background:rgba(15,23,42,0.55);
  z-index:99999; opacity:0; transition:opacity 0.2s;
  display:flex; align-items:flex-end; justify-content:center;
}
.inv-row-sheet-overlay.open { opacity:1 }
.inv-row-sheet {
  width:100%; max-width:520px; background:#fff;
  border-radius:14px 14px 0 0;
  transform:translateY(100%); transition:transform 0.22s cubic-bezier(0.4,0,0.2,1);
  max-height:80vh; overflow-y:auto;
  padding-bottom:env(safe-area-inset-bottom,12px);
  box-shadow:0 -8px 32px rgba(0,0,0,0.18);
}
.inv-row-sheet-overlay.open .inv-row-sheet { transform:translateY(0) }
.inv-row-sheet button:active, .inv-row-sheet a:active { background:#eef2f7 !important }
/* Pulse header goals strip when tile 3 is clicked */
.lg-header-goals-pulse { animation:lgSideBlockPulse 1.4s ease-out; border-radius:6px }
/* Expenses card in the sidebar — strip the card chrome, match lg-side-block style */
.lg-exp-sidebar-card { margin:0; border-radius:0; border:none; border-top:1px solid #d4dfe5; padding:14px 0 0 0; background:transparent; box-shadow:none }
/* Each expense renders as two TRs: vendor row (no bottom border) + status row
   (bottom border separates expenses). Status pills are smaller and span full width. */
.lg-exp-sidebar-card .lg-exp-row td { border-bottom:none }
.lg-exp-sidebar-card .lg-exp-status td { padding:2px 8px 8px 8px; border-bottom:1px solid #e5e7eb }
.lg-exp-sidebar-card .lg-exp-status .pf-status { font-size:0.6rem; padding:1px 6px; line-height:1.5 }
.lg-exp-sidebar-card .lg-exp-status-row { display:flex; align-items:center; flex-wrap:wrap; gap:4px }
.lg-exp-sidebar-card .lg-exp-add-wrap { margin-left:auto }
.lg-exp-sidebar-card .lg-exp-add-wrap .mw-btn-secondary { font-size:0.7rem; padding:2px 8px; white-space:nowrap }

/* Edit-pencil chip on historical invoice cells (sits next to the linker chip).
   Subdued styling — direct cost rows get edited often, doesn't need to shout.
   Selectors match the .lg-link-chip base specificity (.lg-fee-matrix td …) so
   the right offset actually overrides the default right:2px and the two chips
   sit side-by-side instead of stacking. */
.lg-fee-matrix td .lg-hist-edit-chip,
.lg-hour-matrix td .lg-hist-edit-chip { right:22px; background:#f3f4f6; color:#6b7280; border-color:#d1d5db }
.lg-fee-matrix td .lg-hist-edit-chip:hover,
.lg-hour-matrix td .lg-hist-edit-chip:hover { background:#e5e7eb; color:#374151; border-color:#9ca3af }
/* Vendor name truncates with ellipsis; full name on hover via title attr */
.lg-exp-sidebar-card .lg-exp-vendor-cell { max-width:200px }
.lg-exp-sidebar-card .lg-exp-vendor { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px }
.lg-exp-sidebar-card .lg-exp-vendor-actions { font-size:0.7rem; color:#9ca3af; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px }

/* Drawer body layout for the period + lifetime drill-in drawers. Reuses the
   project-financial pf-card / pf-table styling for inner cards so it matches
   the rest of the app. The lg-kpi-tile chrome (collapsible <details>) also
   reused via lgBuildHoursCard for hours-by-person/task. */
.lg-drawer-inner { padding:18px }
.lg-drawer-stack { display:flex; flex-direction:column; gap:14px; margin-top:14px }
.lg-drawer-totals { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:8px 14px; padding:12px 14px; background:#f8fafc; border:1px solid #e5e7eb; border-radius:8px }
.lg-drawer-totals > div { display:flex; flex-direction:column; gap:2px; min-width:0 }
.lg-drawer-totals-k { font-size:0.66rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:#6b7280 }
.lg-drawer-totals-v { font-size:1rem; font-weight:700; font-family:ui-monospace,monospace; color:#111827 }
.lg-drawer-totals-grand { padding-left:14px; border-left:3px solid #1f2547 }
.lg-drawer-totals-grand .lg-drawer-totals-v { font-size:1.1rem }

/* Outstanding-invoice card (lifetime drawer). Compact AR view: total + count
   + age, then per-row balance + age pill. Color codes age: < 30d fresh,
   30–59d warn, ≥ 60d late. */
.lg-out-summary { padding:8px 14px; font-size:0.82rem; color:#374151; background:#fffbeb; border-bottom:1px solid #fde68a }
.lg-out-age-fresh { display:inline-block; padding:1px 8px; border-radius:999px; background:#d1fae5; color:#065f46; font-weight:700; font-size:0.7rem }
.lg-out-age-warn  { display:inline-block; padding:1px 8px; border-radius:999px; background:#fef3c7; color:#92400e; font-weight:700; font-size:0.7rem }
.lg-out-age-late  { display:inline-block; padding:1px 8px; border-radius:999px; background:#fee2e2; color:#991b1b; font-weight:700; font-size:0.7rem }

/* Spacer between the save bar (sticky) and the project-level expense table on
   the main ledger page. Keeps the table visually separated from the matrix
   above without needing a heavy section header. */
.lg-section-spacer { height:24px }

/* Source pill on fee-matrix rows. Distinguishes proposal-stamped rows (no
   pill) from ASR-imported rows (purple ASR pill). Set by trg_bli_from_asr_signed
   when a project_asrs row flips to is_signed=true. */
.lg-fee-source-pill { display:inline-block; margin-left:6px; padding:1px 6px; border-radius:999px; font-size:0.6rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; vertical-align:middle }
.lg-fee-source-asr  { background:var(--bs-primary-light); color:var(--bs-primary); border:1px solid var(--bs-border) }

/* Pencil edit button on each fee-matrix row title cell (admin only).
   Subtle by default — ghosted, becomes the row's accent on hover. Sits
   inline before the title text so the title doesn't shift when the button
   appears/disappears between admin and non-admin users. */
.lg-fee-edit-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  margin-right:6px;
  padding:0;
  background:none;
  border:1px solid transparent;
  border-radius:4px;
  font-size:0.78rem;
  line-height:1;
  color:#9ca3af;
  cursor:pointer;
  transition:background 0.12s, color 0.12s, border-color 0.12s;
  vertical-align:-2px;
}
.lg-fee-edit-btn:hover { background:#dbeafe; color:#1e40af; border-color:#93c5fd }

/* "+ Add Fee Item" button row below the fee matrix. Admin only. Quiet
   styling — outlined, secondary — so it doesn't compete with the GRAND
   TOTAL banner that follows. */
.lg-fee-add-row { padding:8px 0 4px }
.lg-fee-add-btn {
  padding:6px 14px;
  border:1px dashed #93c5fd;
  background:#f0f9ff;
  color:#1e40af;
  border-radius:6px;
  font-size:0.78rem;
  font-weight:600;
  cursor:pointer;
  font-family:inherit;
  transition:background 0.12s, border-color 0.12s;
}
.lg-fee-add-btn:hover { background:#dbeafe; border-color:#3b82f6; border-style:solid }
.lg-fee-matrix td.lg-hist-cell-editable { cursor:pointer }
.lg-fee-matrix td.lg-hist-cell-editable:hover { background:#fef3c7 !important; color:#92400e !important }

/* Tiny remove button rendered inside the $ DRAFT cell of a BLI that has an
   applied expense. Removes the expense from the invoice (reverts the BLI cap
   bump if any). Sits next to the paperclip icon. */
.lg-fee-exp-remove { font-size:0.7rem; padding:0 5px; color:#ef4444; background:transparent; border:1px solid #fca5a5; border-radius:3px; cursor:pointer }
.lg-fee-exp-remove:hover { background:#fef2f2 }

/* Cross-hover highlight: when hovering an applied-expense pill in the matrix,
   the source Expenses card row gets this. And vice versa. Bright orange ring
   via box-shadow (no bg conflict with row hover states). Applied/removed by JS
   onmouseenter/onmouseleave — no animation, just on/off. */
tr.lg-cross-hover td {
  box-shadow: inset 0 0 0 2px #f59e0b;
  background-color: #fef3c7 !important;
}
td.lg-cross-hover {
  box-shadow: inset 0 0 0 2px #f59e0b;
  background-color: #fef3c7 !important;
}
/* Direct-cost rows in the cycle drawer are <div>s, not <td>s — same highlight. */
div.lg-cross-hover {
  box-shadow: inset 0 0 0 2px #f59e0b;
  background-color: #fef3c7 !important;
  border-radius: 4px;
}

/* Docs drawer — one drawer with multiple proposal/ASR cards. Reuses the
   standard .drawer chrome from drawer.js. Each card is an independent
   editable form with its own Save / Delete and inline error display. */
.lg-doc-inner { padding:16px }
.lg-doc-empty { padding:12px; text-align:center; color:#9ca3af; font-style:italic; font-size:0.78rem; background:#fafbfd; border:1px dashed #e5e7eb; border-radius:6px }

/* Group headers (PROPOSALS / ASRs) divide the drawer body. */
.lg-doc-group { margin-bottom:18px }
.lg-doc-group:last-child { margin-bottom:0 }
.lg-doc-group-h { font-size:0.95rem; font-weight:600; color:var(--bs-ink-strong); padding:0 0 8px; margin-bottom:10px; border-bottom:2px solid #d4dfe5 }

/* Individual doc card — quiet bordered container, no shadow (avoids visual
   noise when 4+ cards stack). Section sub-heads structure the form so
   you can scan top-to-bottom: identity → signing → contract → save. */
.lg-doc-card { background:#fff; border:1px solid #e5e7eb; border-radius:8px; padding:12px 14px; margin-bottom:10px }
.lg-doc-card:last-child { margin-bottom:0 }

/* Card header: filename row, then a meta-row below with status + actions.
   Stacking instead of 3-column grid prevents long filenames from being
   squeezed. Filename gets ellipsis (full name in a tooltip). */
.lg-doc-card-h { padding-bottom:8px; border-bottom:1px solid #f3f4f6; margin-bottom:10px }
.lg-doc-card-title {
  font-size:0.86rem; font-weight:600; color:#111827;
  display:flex; align-items:center; gap:4px;
  min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.lg-doc-card-meta-row {
  display:flex; align-items:center; gap:8px;
  margin-top:6px;
  font-size:0.72rem;
}
.lg-doc-card-meta-spacer { flex:1 }
.lg-doc-card-meta-row .mw-btn-secondary { font-size:0.72rem; padding:3px 10px }
.lg-doc-card-meta-row .mw-btn-sm { font-size:0.68rem; padding:2px 8px }

.lg-doc-asr-badge { display:inline-flex; align-items:center; padding:1px 6px; border-radius:999px; font-size:0.6rem; font-weight:700; letter-spacing:0.04em; background:var(--bs-primary-light); color:var(--bs-primary); border:1px solid var(--bs-border); flex-shrink:0 }

/* Status pill on each card header. */
.lg-doc-status { display:inline-block; padding:2px 9px; border-radius:999px; font-size:0.62rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; white-space:nowrap }
.lg-doc-status-signed   { background:#d1fae5; color:#065f46 }
.lg-doc-status-verbal   { background:#fef3c7; color:#92400e }
.lg-doc-status-unsigned { background:#f3f4f6; color:#6b7280 }

/* Compact extraction-confidence/parser metadata strip at the top of each card. */
.lg-doc-meta { display:flex; flex-wrap:wrap; gap:4px 12px; padding:4px 8px; margin-bottom:10px; background:#fafbfd; border:1px solid #f3f4f6; border-radius:4px; font-size:0.66rem; color:#9ca3af }
.lg-doc-meta strong { color:#6b7280; font-weight:600 }

/* Form area inside a card. Section subheads label the groups so the eye
   has anchor points. Field grids are forced to 2 columns on the drawer's
   normal width and collapse to 1 on narrow widths — no auto-fit drift. */
.lg-doc-card-fields { display:flex; flex-direction:column; gap:8px }
.lg-doc-subhead {
  font-size:0.66rem; font-weight:700; color:#6b7280;
  text-transform:uppercase; letter-spacing:0.05em;
  margin-top:4px;
}
.lg-doc-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px 12px }
.lg-doc-grid .mw-field { margin-bottom:0 }
.lg-doc-grid .mw-input { padding:5px 8px; font-size:0.78rem }
.lg-doc-grid .mw-label { font-size:0.66rem; margin-bottom:2px }

/* Two checkboxes side-by-side in one field cell (Signed / Verbal). Keeps
   the Signing row visually balanced — date input on the left, checkboxes
   on the right at the same vertical alignment. */
.lg-doc-checkrow { display:flex; align-items:center; gap:14px; padding-top:14px }
.lg-doc-checkrow label { display:inline-flex; align-items:center; gap:5px; font-size:0.78rem; color:#374151; cursor:pointer }

.lg-doc-help { font-size:0.7rem; color:var(--bs-ink-muted); background:var(--bs-surface-alt); border:1px solid var(--bs-border); padding:5px 8px; border-radius:4px; margin-top:2px }

.lg-doc-card-error { color:#991b1b; font-size:0.74rem; background:#fef2f2; border:1px solid #fecaca; padding:5px 8px; border-radius:4px; margin-top:8px }

/* Footer: inline reason field + Save button on one row. Keeps the optional
   reason discoverable without taking 60px of vertical space per card. */
.lg-doc-card-footer { display:flex; gap:8px; align-items:center; padding-top:10px; border-top:1px solid #f3f4f6; margin-top:10px }
.lg-doc-reason {
  flex:1; min-width:0;
  padding:5px 8px; border:1px solid #d1d5db; border-radius:4px;
  font-size:0.74rem; font-family:inherit; color:#374151; outline:none;
}
.lg-doc-reason:focus { border-color:var(--bs-accent,#4C7B8B); box-shadow:0 0 0 2px rgba(76,123,139,0.18) }
.lg-doc-card-footer .mw-btn-primary { font-size:0.76rem; padding:5px 14px }

@media (max-width:640px) {
  .lg-doc-grid { grid-template-columns:1fr }
  .lg-doc-checkrow { padding-top:0 }
}

/* Analytics section — 3-column grid (Hours by Person | Hours by Task | Expenses)
   below the billing matrix. Reuses pf-card / pf-table from the project Financial
   tab so the ledger matches the rest of BaseStation. */
.lg-analytics { margin-top:18px }
.lg-analytics-h { font-size:0.95rem; font-weight:600; color:var(--bs-ink-strong); margin-bottom:10px }
.lg-analytics-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px }
.lg-analytics-col { display:flex; flex-direction:column; gap:12px; min-width:0 }
.lg-card-dim { opacity:0.65 }
.lg-exp-summary-row { font-size:0.78rem; color:#374151; margin:-2px 0 10px; display:flex; gap:10px; flex-wrap:wrap }
@media (max-width:1400px) {
  .lg-analytics-grid { grid-template-columns:1fr 1fr }
}
@media (max-width:768px) {
  .lg-analytics-grid { grid-template-columns:1fr }
}

/* ── Finance Module ──────────────────────────────────────────────── */
.fin-filter-row { display:flex; gap:24px; padding:12px 16px; background:#f9fafb; border-bottom:1px solid #e5e7eb; flex-wrap:wrap }
.fin-filter-row.fin-filter-dimmed { opacity:0.4; pointer-events:none; position:relative }
.fin-filter-group { display:flex; align-items:center; gap:8px }
.fin-filter-label { font-size:0.7rem; font-weight:600; color:#6b7280; text-transform:uppercase; letter-spacing:0.04em; min-width:40px }
.fin-chip-row { display:flex; gap:4px; flex-wrap:wrap }
.fin-filter-chip { padding:4px 10px; border:1px solid #d1d5db; border-radius:9999px; background:#fff; font-size:0.72rem; font-weight:500; color:#374151; cursor:pointer; transition:all 0.12s; white-space:nowrap }
.fin-filter-chip:hover { background:#f0f4f8; border-color:#9ca3af }
.fin-filter-chip.fin-chip-active { background:var(--bs-primary); color:#fff; border-color:var(--bs-primary) }
.fin-month-dot { display:inline-block; width:5px; height:5px; border-radius:50%; background:#16a34a; margin-left:3px; vertical-align:super }
.fin-chip-active .fin-month-dot { background:#86efac }
.fin-period-label { padding:12px 16px 0; font-size:0.78rem; color:#6b7280; font-weight:500 }
.fin-kpi-strip { display:flex; gap:12px; padding:16px; flex-wrap:wrap }
.fin-kpi-strip.fin-kpi-secondary { padding-top:0 }
.fin-kpi-secondary .fin-kpi-card { padding:10px 8px }
.fin-kpi-secondary .fin-kpi-value { font-size:1.15rem }
.fin-kpi-card { flex:1; min-width:120px; text-align:center; background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:16px 12px }
.fin-kpi-value { font-size:1.6rem; font-weight:700; color:#111827 }
.fin-kpi-label { font-size:0.68rem; text-transform:uppercase; letter-spacing:0.04em; color:#6b7280; margin-top:4px }
.fin-kpi-subtitle { font-size:0.65rem; color:#9ca3af; margin-top:2px }
.fin-kpi-delta { font-size:0.7rem; margin-top:4px }
.fin-kpi-delta.up { color:#16a34a }
.fin-kpi-delta.down { color:#dc2626 }
.fin-kpi-card.margin-good { border-color:#bbf7d0; background:#f0fdf4 }
.fin-kpi-card.margin-warn { border-color:#fde68a; background:#fffbeb }
.fin-kpi-card.margin-bad { border-color:#fecaca; background:#fef2f2 }
.fin-view-filters { display:flex; gap:16px; padding:8px 16px; border-bottom:1px solid #f3f4f6; flex-wrap:wrap; align-items:center }
.fin-view-filter-group { display:flex; align-items:center; gap:6px }
.fin-client-search { padding:4px 10px; border:1px solid #d1d5db; border-radius:9999px; font-size:0.72rem; font-family:inherit; color:#374151; outline:none; width:160px; transition:border-color 0.12s }
.fin-client-search:focus { border-color:var(--bs-accent) }
.fin-search-box { padding:4px 10px; border:1px solid #d1d5db; border-radius:9999px; font-size:0.72rem; font-family:inherit; color:#374151; outline:none; width:200px; transition:border-color 0.12s }
.fin-search-box:focus { border-color:var(--bs-accent) }
.fin-clear-btn { position:absolute; right:6px; top:6px; width:20px; height:20px; border-radius:50%; border:none; background:#dc2626; color:#fff; font-size:0.8rem; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; line-height:1; padding:0 }
.fin-clear-btn:hover { background:#b91c1c }
.fin-view-filter-group { position:relative }
.fin-table { width:100%; border-collapse:collapse; font-size:0.78rem }
.fin-table th { text-align:left; padding:8px 10px; background:#f9fafb; border-bottom:2px solid #e5e7eb; font-weight:600; color:#374151; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.03em; cursor:pointer; white-space:nowrap; user-select:none }
.fin-table th:hover { background:#f0f4f8 }
.fin-table th.fin-num, .fin-table td.fin-num { text-align:right }
.fin-table td { padding:7px 10px; border-bottom:1px solid #f3f4f6; color:#374151 }
.fin-table tbody tr:nth-child(even) td { background:#f9fafb }
.fin-table tr:hover td { background:#eef2f7 }
/* Budget + Job Performance tables — canonical navy-wash zebra (matches
   Projects + Contacts). Gated ≥768px so any future phone card-stack
   stays untouched. */
@media (min-width: 768px) {
  .fin-budget-table tbody tr td,
  .fin-perf-table tbody tr td { background:#eef3f9 }
  .fin-budget-table tbody tr:nth-child(even) td,
  .fin-perf-table tbody tr:nth-child(even) td { background:#dce8f5 }
  .fin-budget-table tbody tr:hover td,
  .fin-perf-table tbody tr:hover td { background:#c8ddf0 }
  /* Job Perf rated cells: bold colored text on top of the zebra (no
     background fill). The zebra row coloring stays consistent across
     the whole row so the gradient/visual rhythm isn't broken by red
     fills on individual cells. */
  .fin-perf-table tbody tr td.fin-heat-green   { color:#16a34a;font-weight:700 }
  .fin-perf-table tbody tr td.fin-heat-yellow  { color:#ca8a04;font-weight:700 }
  .fin-perf-table tbody tr td.fin-heat-red     { color:#dc2626;font-weight:700 }
  .fin-perf-table tbody tr td.fin-heat-neutral { color:#374151;font-weight:600 }
}
/* Phone (≤640px) — Job Performance table becomes a card grid per row.
   New column order (8 total): 1=Project 2=Score 3=%Comp 4=TotalCost
                               5=Invoiced 6=A/R 7=CurrentProfit 8=ProjectedProfit */
@media (max-width:640px) {
  .fin-perf-table { border:none;font-size:0.78rem;display:block;width:100% }
  .fin-perf-table thead { display:none }
  .fin-perf-table tbody { display:block;width:100% }
  .fin-perf-table tr {
    display:grid;
    grid-template-columns:1fr auto;
    gap:6px 12px;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:10px;
    padding:10px 12px;
    margin-bottom:8px;
    align-items:center;
  }
  .fin-perf-table td {
    display:block;
    padding:0;
    border:none;
    background:transparent;
    overflow:visible;
    text-overflow:clip;
    white-space:normal;
    text-align:left;
  }
  .fin-perf-table td.fin-num { text-align:left }
  /* Row 1 — Project | Score */
  .fin-perf-table td:nth-child(1) {
    grid-column:1;grid-row:1;
    font-size:0.9rem;font-weight:600;color:#1f2937;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
  }
  .fin-perf-table td:nth-child(2) {
    grid-column:2;grid-row:1;
    font-size:1.0rem;font-weight:700;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    padding:3px 9px;border-radius:9999px;background:#f3f4f6;
  }
  /* Row 2 — % Comp | Total Cost */
  .fin-perf-table td:nth-child(3) { grid-column:1;grid-row:2 }
  .fin-perf-table td:nth-child(4) { grid-column:2;grid-row:2;text-align:right }
  .fin-perf-table td:nth-child(3)::before { content:'Done: ';color:#9ca3af;font-weight:500;font-size:0.7rem }
  .fin-perf-table td:nth-child(4)::before { content:'Cost: ';color:#9ca3af;font-weight:500;font-size:0.7rem }
  /* Row 3 — Invoiced | A/R */
  .fin-perf-table td:nth-child(5) { grid-column:1;grid-row:3 }
  .fin-perf-table td:nth-child(6) { grid-column:2;grid-row:3;text-align:right }
  .fin-perf-table td:nth-child(5)::before { content:'Inv: ';color:#9ca3af;font-weight:500;font-size:0.7rem }
  .fin-perf-table td:nth-child(6)::before { content:'A/R: ';color:#9ca3af;font-weight:500;font-size:0.7rem }
  /* Row 4 — Current Profit, full-width tinted band */
  .fin-perf-table td:nth-child(7) {
    grid-column:1 / -1;grid-row:4;
    padding:6px 10px;border-radius:6px;
    font-weight:600;text-align:right;
    border-top:1px dashed #f3f4f6;margin-top:2px;padding-top:8px;
  }
  .fin-perf-table td:nth-child(7)::before { content:'Current Profit ';color:#6b7280;font-weight:500;font-size:0.7rem;float:left }
  /* Row 5 — Projected Profit, full-width tinted band */
  .fin-perf-table td:nth-child(8) {
    grid-column:1 / -1;grid-row:5;
    padding:6px 10px;border-radius:6px;
    font-weight:600;text-align:right;
  }
  .fin-perf-table td:nth-child(8)::before { content:'Projected Profit ';color:#6b7280;font-weight:500;font-size:0.7rem;float:left }
  /* Heat cells: pill for Score, tinted bands for Profits, text-color for the rest */
  .fin-perf-table td:nth-child(2).fin-heat-green  { background:#dcfce7;color:#065f46 }
  .fin-perf-table td:nth-child(2).fin-heat-yellow { background:#fef9c3;color:#92400e }
  .fin-perf-table td:nth-child(2).fin-heat-red    { background:#fee2e2;color:#991b1b }
  .fin-perf-table td:nth-child(3).fin-heat-green   { color:#065f46;font-weight:600 }
  .fin-perf-table td:nth-child(3).fin-heat-neutral { color:#92400e;font-weight:600 }
  .fin-perf-table td:nth-child(3).fin-heat-red     { color:#991b1b;font-weight:600 }
  .fin-perf-table td:nth-child(6).fin-heat-green   { color:#065f46;font-weight:600 }
  .fin-perf-table td:nth-child(6).fin-heat-yellow  { color:#ca8a04;font-weight:600 }
  .fin-perf-table td:nth-child(6).fin-heat-red     { color:#dc2626;font-weight:600 }
  .fin-perf-table td:nth-child(7).fin-heat-green,
  .fin-perf-table td:nth-child(8).fin-heat-green { background:#dcfce7;color:#065f46 }
  .fin-perf-table td:nth-child(7).fin-heat-red,
  .fin-perf-table td:nth-child(8).fin-heat-red   { background:#fee2e2;color:#991b1b }
}
.fin-table tfoot td { font-weight:700; border-top:2px solid #e5e7eb; background:#f9fafb }
.fin-table a { color:var(--bs-primary); text-decoration:none }
.fin-table a:hover { text-decoration:underline }
.fin-status { display:inline-block; padding:2px 8px; border-radius:9999px; font-size:0.68rem; font-weight:600 }
.fin-status-paid { background:#dcfce7; color:#166534 }
.fin-status-open { background:#fef9c3; color:#854d0e }
.fin-status-late { background:#fee2e2; color:#991b1b }
.fin-status-stale { background:#fee2e2; color:#991b1b; font-size:0.62rem; margin-left:4px }
.fin-status-cancelled { background:#f1f5f9; color:#64748b }
.mw-btn-sm { padding:2px 8px; font-size:0.7rem; border-radius:4px; cursor:pointer; border:none; font-weight:600 }
.mw-btn-sm.mw-btn-danger { background:#fee2e2; color:#991b1b }
.mw-btn-sm.mw-btn-danger:hover { background:#fecaca }
.fin-detail-split { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:0 20px 20px }
.fin-detail-full { padding:0 20px 20px }
.fin-card { background:#fff; border:1px solid #e5e7eb; border-radius:10px; overflow:hidden }
.fin-card-title { padding:10px 14px; font-weight:600; font-size:0.8rem; color:var(--bs-primary); border-bottom:1px solid #f3f4f6 }
.fin-toggle-row { display:flex; gap:0; margin:12px 14px }
.fin-toggle-btn { font-size:0.72rem; padding:5px 14px; border:1px solid #d1d5db; background:#fff; color:#374151; cursor:pointer; transition:all 0.12s; white-space:nowrap }
.fin-toggle-btn:first-child { border-radius:9999px 0 0 9999px; border-right:none }
.fin-toggle-btn:last-child { border-radius:0 9999px 9999px 0 }
.fin-toggle-btn:not(:first-child):not(:last-child) { border-right:none }
.fin-toggle-btn.active { background:var(--bs-primary); color:#fff; border-color:var(--bs-primary) }
.fin-heat-green { background:#dcfce7 }
.fin-heat-yellow { background:#fef9c3 }
.fin-heat-red { background:#fee2e2 }
.fin-heat-neutral { background:transparent }
.fin-mhs-table { width:100%; border-collapse:collapse; font-size:0.75rem }
.fin-mhs-table th { padding:6px 8px; background:var(--bs-primary); color:#fff; font-weight:600; text-align:right; border:1px solid var(--bs-primary-hover); white-space:nowrap }
.fin-mhs-table th:first-child { text-align:left }
.fin-mhs-table td { padding:5px 8px; text-align:right; border:1px solid #e5e7eb }
.fin-mhs-table td:first-child { text-align:left; font-weight:400 }
.fin-mhs-table tr:nth-child(even) td { background:#d6e4f0 }
.fin-mhs-table tr:nth-child(odd) td { background:#fff }
.fin-mhs-summary td { font-weight:700 }
.fin-mhs-separator td { border-bottom:3px solid var(--bs-primary) }
.fin-mhs-total-col { font-weight:700 }
.fin-publish-btn { padding:8px 20px; background:var(--bs-primary); color:#fff; border:none; border-radius:8px; font-size:0.8rem; font-weight:600; cursor:pointer; transition:background 0.12s }
.fin-publish-btn:hover { background:#2d4f7a }
.fin-publish-published { color:#16a34a; font-size:0.78rem }
.fin-yoy-row { padding:4px 16px; background:#f0f4f8; font-size:0.72rem; color:#6b7280; border-bottom:1px solid #e5e7eb }
.fin-sort-asc::after { content:' \25B2'; font-size:0.6rem }
.fin-sort-desc::after { content:' \25BC'; font-size:0.6rem }
.fin-kpi-card.fin-kpi-clickable { cursor:pointer; transition:transform 0.1s, box-shadow 0.1s }
.fin-kpi-card.fin-kpi-clickable:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,0.08) }
.fin-chart-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:0 16px 16px }
.fin-chart-card { background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:16px; min-height:280px }
.fin-chart-card canvas { width:100% !important; height:240px !important }
#finChartExpBreak { max-width:180px; max-height:180px; margin:0 auto }
#finChartInvStatus,
#finChartExpCategory { max-width:180px; max-height:180px; margin:0 auto }
#finChartInvARAging { cursor:pointer }
.fin-chart-title { font-weight:600; font-size:0.8rem; color:var(--bs-primary); margin-bottom:12px }
#finExpLegend, #finInvStatusLegend { margin-top:8px }
.fin-exp-legend-row { display:flex; align-items:center; gap:6px; font-size:0.72rem; color:#374151; padding:3px 0 }
.fin-exp-legend-row:hover { background:#f9fafb; border-radius:6px }
.fin-exp-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0 }
.fin-exp-legend-label { white-space:nowrap; min-width:110px }
.fin-exp-legend-val { font-variant-numeric:tabular-nums; white-space:nowrap }
.fin-exp-legend-total { border-top:1px solid #e5e7eb; padding-top:6px; margin-top:2px }
@media (max-width: 900px) {
  .fin-detail-split { grid-template-columns:1fr }
  .fin-kpi-strip { flex-wrap:wrap }
  .fin-kpi-card { min-width:100px }
  .fin-chart-grid { grid-template-columns:1fr }
}

/* ── Legacy pn- styles used by captures-view.js (Project Notes feature never shipped) ─── */
.pn-card { background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:14px 16px; box-shadow:0 1px 3px rgba(0,0,0,0.04); transition:opacity 0.2s }
.pn-time { font-size:0.72rem; color:#9ca3af }
.pn-job-badge { font-size:0.82rem; font-family:monospace; font-weight:700; color:var(--bs-primary); background:var(--bs-primary-light); padding:2px 8px; border-radius:4px }
@media (max-width:768px) {
  .pn-card { padding:12px }
}

/* ── Captures View ─────────────────────────────────────────── */
.capture-action-btn {
  font-size: 0.72rem;
  padding: 4px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  color: #374151;
  transition: background 0.15s;
}
.capture-action-btn:hover { background: #f3f4f6; }
.capture-action-dismiss { color: #9ca3af; border-color: #e5e7eb; }
.capture-action-dismiss:hover { background: #fef2f2; color: #dc2626; }

/* ── KNOWLEDGE VIEW ──────────────────────────────────────────────────────── */
.kn-view { max-width: 900px; margin: 0 auto; padding: 20px 20px 60px }
.kn-header { margin-bottom: 20px }
.kn-title-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px }
.kn-view-title { font-size: 1.3rem; font-weight: 700; color: var(--bs-primary) }
.kn-search-bar { position: relative; display: flex; align-items: center; margin-bottom: 12px }
.kn-search-icon { position: absolute; left: 12px; font-size: 1rem; color: #9ca3af; pointer-events: none }
.kn-search-input { width: 100%; padding: 10px 36px 10px 36px; border: 1.5px solid #d1d5db; border-radius: 8px; font-size: 0.95rem; outline: none; transition: border-color 0.15s }
.kn-search-input:focus { border-color: var(--bs-focus-border); box-shadow: 0 0 0 3px var(--bs-focus-ring) }
.kn-clear-btn { position: absolute; right: 10px; background: none; border: none; color: #9ca3af; cursor: pointer; font-size: 0.9rem; padding: 4px 6px; border-radius: 4px }
.kn-clear-btn:hover { color: #374151; background: #f3f4f6 }
.kn-filter-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.kn-filter-group { display: flex; gap: 4px; flex-wrap: wrap }
.kn-filter-sep { width: 1px; height: 20px; background: #e5e7eb; margin: 0 4px }
.kn-pill { padding: 3px 12px; border-radius: 999px; border: 1.5px solid #e5e7eb; background: #fff; font-size: 0.78rem; font-weight: 500; color: #6b7280; cursor: pointer; transition: all 0.12s }
.kn-pill:hover { border-color: var(--bs-primary); color: var(--bs-primary) }
.kn-pill.active { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff }
.kn-section-header { font-size: 0.95rem; font-weight: 600; color: var(--bs-ink-strong); margin: 20px 0 8px; display: flex; align-items: center; gap: 8px }
.kn-count { background: var(--bs-primary-light); color: var(--bs-primary); border-radius: 999px; padding: 1px 8px; font-size: 0.7rem }
.kn-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; margin-bottom: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.04) }
.kn-card-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; cursor: pointer; user-select: none }
.kn-card-header:hover { background: #f9fafb }
.kn-doc-card.open .kn-card-header { background: var(--bs-primary-light); border-bottom: 1px solid #d1d5db }
.kn-doc-title { font-weight: 600; font-size: 0.9rem; color: #111827 }
.kn-card-meta { display: flex; align-items: center; gap: 6px; margin-top: 4px; flex-wrap: wrap }
.kn-card-left { flex: 1; min-width: 0 }
.kn-chevron { color: #9ca3af; font-size: 0.8rem; flex-shrink: 0 }
.kn-domain-badge { background: var(--bs-primary-light); color: var(--bs-primary); border-radius: 4px; padding: 1px 6px; font-size: 0.68rem; font-weight: 600 }
.kn-tag { background: #f3f4f6; color: #6b7280; border-radius: 4px; padding: 1px 6px; font-size: 0.68rem }
.kn-type-badge { border-radius: 999px; padding: 2px 10px; font-size: 0.72rem; font-weight: 600; flex-shrink: 0; margin-top: 2px }
.kn-thought-card { padding: 12px 16px }
.kn-thought-content { font-size: 0.85rem; color: #1f2937; line-height: 1.5 }
.kn-doc-body { padding: 16px 20px; border-top: 1px solid #f0f0f0; font-size: 0.85rem; color: #374151; max-height: 600px; overflow-y: auto }
/* Markdown rendered content */
.kn-markdown h1,.kn-markdown h2,.kn-markdown h3 { color: var(--bs-primary); margin: 1em 0 0.4em; font-weight: 700 }
.kn-markdown h1 { font-size: 1.1rem }
.kn-markdown h2 { font-size: 1rem }
.kn-markdown h3 { font-size: 0.9rem }
.kn-markdown p { margin: 0.5em 0; line-height: 1.6 }
.kn-markdown code { background: #f3f4f6; border-radius: 3px; padding: 1px 5px; font-size: 0.82em; font-family: monospace }
.kn-markdown pre { background: #f3f4f6; border-radius: 6px; padding: 12px; overflow-x: auto; font-size: 0.8rem }
.kn-markdown pre code { background: none; padding: 0 }
.kn-markdown table { border-collapse: collapse; width: 100%; font-size: 0.82rem; margin: 0.75em 0 }
.kn-markdown table th { background: #eef3f9; color: var(--bs-primary); padding: 6px 10px; text-align: left; font-weight: 600; border: 1px solid #d1d5db }
.kn-markdown table td { padding: 5px 10px; border: 1px solid #e5e7eb }
.kn-markdown table tr:nth-child(even) td { background: #f9fafb }
.kn-markdown ul,.kn-markdown ol { padding-left: 1.4em; margin: 0.5em 0 }
.kn-markdown li { margin: 0.2em 0; line-height: 1.5 }
.kn-markdown blockquote { border-left: 3px solid var(--bs-accent); margin: 0.75em 0; padding: 6px 12px; background: var(--bs-accent-light); color: #78350f; font-style: italic }
.kn-markdown a { color: var(--bs-secondary); text-decoration: underline }
.kn-markdown hr { border: none; border-top: 1px solid #e5e7eb; margin: 1em 0 }

/* ── Project Notes tab (.pn-*) ─────────────────────────────────────────── */
.pn-container { max-width: 860px; padding: 20px 24px }
.pn-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px }
.pn-hint { font-size: 0.72rem; color: #9ca3af; margin-left: 4px }
.pn-editor {
  width: 100%; min-height: 420px; max-height: 70vh;
  font-family: 'Courier New', monospace; font-size: 0.85rem; line-height: 1.6;
  padding: 12px 14px; border: 1px solid #d1d5db; border-radius: 6px;
  background: #fafafa; color: #1f2937; resize: vertical; box-sizing: border-box;
}
.pn-editor:focus { outline: none; border-color: var(--bs-secondary); background: #fff }
.pn-markdown { font-size: 0.875rem; line-height: 1.7; color: #1f2937 }

/* ── Timesheets (.ts-*) ─────────────────────────────────────────────────── */
.ts-view { display: flex; flex-direction: column; height: 100%; padding: 0 }
.ts-header { padding: 16px 24px 0; border-bottom: 1px solid #e5e7eb }
.ts-title-row { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px }
.ts-view-title { font-size: 1.1rem; font-weight: 700; color: var(--bs-primary) }
.ts-tab-bar { display: flex; gap: 2px; background: #f3f4f6; border-radius: 6px; padding: 3px }
.ts-tab-btn { background: none; border: none; padding: 5px 14px; border-radius: 4px; font-size: 0.82rem; cursor: pointer; color: #6b7280; font-weight: 500 }
.ts-tab-btn.active { background: #fff; color: var(--bs-primary); box-shadow: 0 1px 3px rgba(0,0,0,.1) }
.ts-body { flex: 1; overflow: auto; padding: 16px 24px }
.ts-week-nav { display: flex; align-items: center; gap: 12px; margin-bottom: 10px }
.ts-nav-btn { background: none; border: 1px solid #d1d5db; border-radius: 4px; width: 30px; height: 30px; font-size: 1.1rem; cursor: pointer; color: #374151; display: flex; align-items: center; justify-content: center }
.ts-nav-btn:hover { background: #f3f4f6 }
.ts-week-label { font-weight: 600; font-size: 1rem; color: #1f2937 }
.ts-status-banner { padding: 6px 12px; border-radius: 6px; font-size: 0.82rem; font-weight: 500; margin-bottom: 12px; display: inline-block }
.ts-grid-wrap { overflow-x: auto }
.ts-grid { border-collapse: collapse; width: 100%; font-size: 0.82rem; min-width: 680px }
.ts-label-th { text-align: left; padding: 6px 10px; font-weight: 600; color: #374151; background: #f9fafb; border-bottom: 2px solid #e5e7eb; min-width: 180px }
.ts-day-th { text-align: center; padding: 5px 4px; font-weight: 600; color: #374151; background: #f9fafb; border-bottom: 2px solid #e5e7eb; width: 72px }
.ts-day-num { font-weight: 400; font-size: 0.7rem; color: #6b7280 }
.ts-total-th { text-align: center; padding: 5px 8px; font-weight: 600; color: #374151; background: #f9fafb; border-bottom: 2px solid #e5e7eb; width: 56px }
.ts-del-th { width: 28px; background: #f9fafb; border-bottom: 2px solid #e5e7eb }
.ts-row td { border-bottom: 1px solid #f3f4f6 }
.ts-label-td { padding: 5px 10px; color: #374151; font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px }
.ts-cell { text-align: center; padding: 2px 2px }
.ts-cell.ts-today { background: #eff6ff }
.ts-cell.ts-hol { background: #fef9c3 }
.ts-hi { width: 100%; text-align: center; border: 1px solid transparent; border-radius: 3px; padding: 4px 2px; font-size: 0.82rem; background: transparent; color: #1f2937 }
.ts-hi:focus { outline: none; border-color: var(--bs-secondary); background: #fff }
.ts-hi.ts-err { border-color: #ef4444; background: #fef2f2 }
.ts-hd { display: block; padding: 4px 2px; font-size: 0.82rem; color: #374151 }
.ts-row-total { text-align: center; padding: 5px 8px; font-weight: 600; color: #374151; border-bottom: 1px solid #f3f4f6 }
.ts-del-td { text-align: center; padding: 2px }
.ts-del-row { background: none; border: none; color: #9ca3af; cursor: pointer; font-size: 1rem; padding: 2px 4px; border-radius: 3px }
.ts-del-row:hover { color: #ef4444; background: #fef2f2 }
.ts-totals-row td { background: #f9fafb; font-weight: 600; border-top: 2px solid #e5e7eb; padding: 6px 4px }
.ts-totals-row .ts-label-td { padding: 6px 10px }
.ts-day-total { text-align: center; color: #374151 }
.ts-week-total { color: #1d4ed8; font-size: 0.9rem }
.ts-actions { display: flex; align-items: flex-start; justify-content: space-between; margin-top: 14px; gap: 12px; flex-wrap: wrap }
.ts-add-btns { display: flex; gap: 8px; flex-wrap: wrap; position: relative }
.ts-search-wrap { position: relative }
.ts-search-drop { position: absolute; top: 100%; left: 0; z-index: 100; background: #fff; border: 1px solid #d1d5db; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,.12); width: 280px; margin-top: 4px }
.ts-search-inp { width: 100%; border: none; border-bottom: 1px solid #e5e7eb; padding: 8px 10px; font-size: 0.85rem; border-radius: 6px 6px 0 0; box-sizing: border-box }
.ts-search-inp:focus { outline: none }
.ts-search-res { max-height: 220px; overflow-y: auto }
.ts-search-item { padding: 7px 10px; cursor: pointer; font-size: 0.82rem; color: #374151 }
.ts-search-item:hover { background: #f0f7ff }
.ts-search-empty { padding: 10px; font-size: 0.82rem; color: #9ca3af; text-align: center }
.ts-cat-wrap { position: relative }
.ts-cat-menu { position: absolute; top: 100%; left: 0; z-index: 100; background: #fff; border: 1px solid #d1d5db; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,.12); margin-top: 4px; min-width: 140px; overflow: hidden }
.ts-cat-menu button { display: block; width: 100%; text-align: left; padding: 8px 12px; border: none; background: none; font-size: 0.82rem; cursor: pointer; color: #374151 }
.ts-cat-menu button:hover { background: #f0f7ff }
.ts-submit-btns { display: flex; gap: 8px }
.ts-review-wrap { overflow-x: auto }
.ts-review-table { width: 100%; border-collapse: collapse; font-size: 0.82rem }
.ts-review-table th { padding: 7px 10px; text-align: left; font-weight: 600; color: #6b7280; border-bottom: 2px solid #e5e7eb; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em }
.ts-review-table td { padding: 8px 10px; border-bottom: 1px solid #f3f4f6; color: #374151 }
.ts-chip { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 0.7rem; font-weight: 600 }
.ts-chip-blue { background: #eff6ff; color: #1d4ed8 }
.ts-chip-green { background: #f0fdf4; color: #166534 }
.ts-chip-red { background: #fef2f2; color: #dc2626 }

/* ── Payroll Export (finance-payroll.js) ─────────────────────────────────── */
.py-wrap { padding: 20px 24px; max-width: 1200px }
.py-header { margin-bottom: 20px }
.py-title-row { margin-bottom: 12px }
.py-title { margin: 0 0 4px; font-size: 1.25rem; font-weight: 700; color: #111827 }
.py-subtitle { font-size: 0.8rem; color: #6b7280 }
.py-controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap }
.py-range { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.py-label { font-size: 0.8rem; font-weight: 600; color: #374151 }
.py-date-input { border: 1px solid #d1d5db; border-radius: 6px; padding: 6px 10px; font-size: 0.82rem; color: #111827 }
.py-export-btn { background: #1d6f42; color: #fff; border: none; border-radius: 6px; padding: 7px 16px; font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: background 0.15s }
.py-export-btn:hover:not(:disabled) { background: #155732 }
.py-export-btn:disabled { opacity: 0.45; cursor: default }
.py-table-wrap { overflow-x: auto; border: 1px solid #e5e7eb; border-radius: 8px }
.py-table { width: 100%; border-collapse: collapse; font-size: 0.8rem }
.py-head-row th, .py-head-cats th { background: #f9fafb; border-bottom: 1px solid #e5e7eb; padding: 7px 10px; font-weight: 600; color: #6b7280; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em }
.py-th-name { text-align: left; min-width: 160px }
.py-th-week { text-align: center; border-left: 1px solid #e5e7eb; white-space: nowrap }
.py-th-cat { text-align: center; font-size: 0.68rem }
.py-th-total { text-align: center; border-left: 2px solid #d1d5db }
.py-row { border-bottom: 1px solid #f3f4f6 }
.py-row:hover { background: #f9fafb }
.py-td-name { padding: 8px 10px; color: #111827; font-weight: 500; white-space: nowrap }
.py-email { font-size: 0.7rem; color: #9ca3af; font-weight: 400 }
.py-td-hrs { padding: 8px 6px; text-align: center; color: #374151; border-left: 1px solid #f3f4f6 }
.py-td-status { padding: 8px 6px; text-align: center; border-right: 1px solid #f3f4f6 }
.py-td-total { padding: 8px 10px; text-align: center; font-weight: 600; color: #111827; border-left: 2px solid #d1d5db }
.py-td-grand { border-left: 1px solid #f3f4f6 }
.py-totals-row { background: #f9fafb; border-top: 2px solid #e5e7eb }
.py-zero { color: #d1d5db }
.py-chip { display: inline-block; padding: 2px 7px; border-radius: 10px; font-size: 0.67rem; font-weight: 600 }
.py-chip-gray { background: #f3f4f6; color: #6b7280 }
.py-chip-blue { background: #eff6ff; color: #1d4ed8 }
.py-chip-green { background: #f0fdf4; color: #166534 }
.py-chip-red { background: #fef2f2; color: #dc2626 }
.py-legend { margin-top: 10px; font-size: 0.75rem; color: #9ca3af; display: flex; gap: 20px; flex-wrap: wrap }
.py-legend code { background: #f3f4f6; padding: 1px 4px; border-radius: 3px; font-size: 0.72rem }

/* ── Tutorials Browse (public gallery) ─────────────────────────────────── */
.tb-wrap { padding: 20px 24px; max-width: 1400px; margin: 0 auto }
.tb-hdr { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; flex-wrap: wrap }
.tb-title { font-size: 1.4rem; font-weight: 600; color: #111827; margin: 0; flex: 0 0 auto }
.tb-search { flex: 1; min-width: 240px; max-width: 420px; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.88rem; background: #fff }
.tb-search:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) }

.tb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px }

.tb-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; cursor: pointer; transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s; display: flex; flex-direction: column }
.tb-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10); border-color: #c7d2fe }
.tb-card:hover .tb-card-play { opacity: 1 }

.tb-card-media { position: relative; aspect-ratio: 16 / 9; background: #0f172a; overflow: hidden }
.tb-card-video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none }
.tb-card-placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #cbd5e1; background: var(--bs-primary) }
.tb-card-placeholder-ext { background: var(--bs-primary-hover) }
.tb-card-icon { font-size: 2rem }
.tb-card-placeholder-label { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.85 }
.tb-card-play { position: absolute; bottom: 8px; right: 8px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: #1e293b; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; opacity: 0.75; transition: opacity 0.12s; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) }

.tb-card-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1 }
.tb-card-title-row { display: flex; align-items: center; gap: 6px }
.tb-card-title { font-weight: 600; color: #111827; font-size: 0.92rem; line-height: 1.3; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.tb-card-stale { font-size: 0.86rem; flex: 0 0 auto }
.tb-card-desc { color: #6b7280; font-size: 0.78rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.tb-card-desc-empty { font-style: italic; color: #9ca3af }

.tb-empty { grid-column: 1 / -1; text-align: center; padding: 64px 24px; color: #6b7280 }
.tb-empty-icon { font-size: 2.4rem; margin-bottom: 8px }
.tb-empty-title { font-size: 0.95rem; font-weight: 500; color: #374151; margin-bottom: 4px }
.tb-empty-hint { font-size: 0.82rem; color: #9ca3af }

/* === Financial Guarantees (gv-*) — Manage view ===
   Mirrors the projects-view list mode (.proj-list-row): flexbox rows with
   fixed pixel widths per cell, min-width forces horizontal scroll on narrow
   viewports, same navy-wash zebra palette. */
.gv-page { padding: 16px 24px }
.gv-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px }
.gv-title { font-size: 0.95rem; font-weight: 600; color: var(--bs-ink-strong) }
.gv-count { font-weight: 500; color: #6b7280; text-transform: none; letter-spacing: 0; margin-left: 8px; font-size: 0.78rem }
.gv-toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 14px }
.gv-search { width: 260px; max-width: 100% }
.gv-filter { width: 200px }

/* List container — flex column, horizontal scroll if needed */
.gv-list { display: flex; flex-direction: column; gap: 2px; overflow-x: auto }
.gv-list-header,
.gv-list-row {
  display: flex; align-items: center;
  padding: 7px 12px;
  min-width: 1100px;
  gap: 0;
}
.gv-list-header {
  position: sticky; top: 0; z-index: 5;
  background: #fff; border-bottom: 1px solid #e5e7eb;
  color: var(--bs-primary);
  font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.gv-list-row {
  background: #eef3f9; border-radius: 5px;
  cursor: pointer; transition: background 0.1s;
}
.gv-list-row:nth-of-type(even) { background: #dce8f5 }
.gv-list-row:hover { background: #c8ddf0 }

.gv-cell { padding: 0 6px; font-size: 0.78rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; flex-shrink: 0 }
.gv-list-header .gv-cell { cursor: pointer; user-select: none; color: #6b7280 }
.gv-col-job     { width: 110px }
.gv-col-name    { width: 260px; font-weight: 600; color: #111827 }
.gv-col-type    { width: 140px }
.gv-col-num     { width: 130px; text-align: right; font-variant-numeric: tabular-nums }
.gv-col-date    { width: 110px; color: #6b7280 }
.gv-col-status  { width: 130px }
.gv-col-actions { width: 90px; text-align: right; padding: 0 4px }

.gv-arrow { color: #9ca3af; margin-right: 4px; font-size: 0.7rem }
.gv-job-link { color: var(--bs-primary); text-decoration: none; font-family: ui-monospace, monospace; font-weight: 700; font-size: 0.78rem }
.gv-job-link:hover { text-decoration: underline }
.gv-icon-btn { background: none; border: 1px solid transparent; border-radius: 6px; padding: 4px 8px; cursor: pointer; color: #6b7280; font-size: 1rem; line-height: 1; text-decoration: none; display: inline-block; margin-left: 2px }
.gv-icon-btn:hover { background: #f3f4f6; color: var(--bs-primary); border-color: #e5e7eb }

.gv-empty { text-align: center; color: #6b7280; padding: 20px }

.gv-task-badge { display: inline-block; padding: 1px 8px; border-radius: 9999px; font-size: 0.68rem; font-weight: 600; margin-left: 6px; vertical-align: middle }
.gv-task-reduction { background: #dbeafe; color: #1d4ed8 }
.gv-task-release   { background: #fef3c7; color: #92400e }

/* Drawer — right-side panel for guarantee detail */
.gv-drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.25); z-index: 849 }
.gv-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 520px; max-width: 96vw;
  background: #fff; box-shadow: -4px 0 24px rgba(0,0,0,0.12);
  z-index: 850; display: flex; flex-direction: column; overflow: hidden;
}
.gv-drawer-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 18px 20px; border-bottom: 1px solid #e5e7eb; flex-shrink: 0;
}
.gv-drawer-job { font-family: ui-monospace, monospace; font-weight: 700; font-size: 1rem }
.gv-drawer-job a { color: var(--bs-primary); text-decoration: none }
.gv-drawer-job a:hover { text-decoration: underline }
.gv-drawer-name { font-size: 0.85rem; color: #6b7280; margin-top: 3px }
.gv-drawer-close { background: none; border: none; font-size: 1.3rem; cursor: pointer; color: #9ca3af; line-height: 1; padding: 4px 10px }
.gv-drawer-close:hover { color: var(--bs-primary) }
.gv-drawer-body { flex: 1; overflow-y: auto; padding: 16px 20px }

.gv-drawer-section { margin-bottom: 20px }
.gv-drawer-section-title { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280; margin-bottom: 8px }
.gv-drawer-summary { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px }
.gv-drawer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; font-size: 0.82rem }
.gv-drawer-grid label { display: block; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280; margin-bottom: 2px }
.gv-drawer-grid strong { font-size: 0.85rem; color: #111827 }
.gv-drawer-balance { grid-column: 1 / -1; padding-top: 8px; border-top: 1px solid #f1f5f9; margin-top: 4px }
.gv-drawer-notes { margin-top: 12px; font-size: 0.78rem; color: #6b7280; font-style: italic }

.gv-drawer-empty { font-size: 0.78rem; color: #9ca3af; padding: 4px 0 }
.gv-drawer-mini-table { width: 100%; border-collapse: collapse; font-size: 0.78rem }
.gv-drawer-mini-table th { text-align: left; padding: 6px 8px; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280; border-bottom: 1px solid #e5e7eb }
.gv-drawer-mini-table td { padding: 6px 8px; border-bottom: 1px solid #f1f5f9 }
.gv-drawer-mini-table .gv-num { text-align: right; font-variant-numeric: tabular-nums }

.gv-doc-list { list-style: none; padding: 0; margin: 0 }
.gv-doc-list li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #f1f5f9; font-size: 0.82rem }
.gv-doc-list li:last-child { border-bottom: none }
.gv-doc-list a { color: var(--bs-primary); text-decoration: none; font-weight: 500; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.gv-doc-list a:hover { text-decoration: underline }
.gv-doc-type { font-size: 0.68rem; color: #6b7280; background: #f3f4f6; padding: 1px 8px; border-radius: 9999px; flex-shrink: 0 }
.gv-doc-del { margin-left: auto }

.gv-drawer-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding-top: 16px; border-top: 1px solid #e5e7eb }
.gv-action-btn { padding: 6px 14px; font-size: 0.78rem }

@media (max-width: 480px) {
  .gv-drawer { width: 100vw; max-width: 100vw }
}

@media (max-width: 767px) {
  .gv-page { padding: 12px }
  .gv-toolbar { flex-direction: column }
  .gv-search, .gv-filter { width: 100% }
}

/* Meetings (review-queue) — mobile tile layout
   Desktop renders each task row as a 6-cell flex strip. On phones we want
   each row to read like a stacked tile: subject grabs row 1 (full width
   next to the checkbox), then project/assignee/due wrap, and actions sit
   on a row of their own. The desktop table header gets hidden because the
   stacked layout doesn't need column labels.
   The subject span has an inline `flex:1` from the JS template, so the
   mobile flex-basis override has to use !important to beat it. */
@media (max-width: 767px) {
  .rq-task-row { flex-wrap: wrap !important; gap: 6px 8px !important; padding: 10px 12px !important; min-height: 0 !important; align-items: center !important }
  .rq-task-row > span:nth-child(1) { width: 22px !important; flex: 0 0 22px !important; order: 1 }
  .rq-task-row > span:nth-child(3) { order: 2; flex: 1 1 0 !important; flex-basis: calc(100% - 36px) !important; min-width: 0 !important; font-weight: 500; background: #fff; border: 1px solid #e5e7eb; padding: 6px 8px !important; border-radius: 5px }
  .rq-task-row > span:nth-child(2) { order: 3; width: auto !important; flex: 0 0 auto !important; max-width: 100% }
  .rq-task-row > span:nth-child(4) { order: 4; width: auto !important; flex: 0 0 auto !important }
  .rq-task-row > span:nth-child(5) { order: 5; width: auto !important; flex: 0 0 auto !important }
  .rq-task-row > span:nth-child(5) input[type=date] { width: auto !important; min-width: 130px }
  .rq-task-row > span:nth-child(6) { order: 6; width: 100% !important; flex: 1 0 100% !important; justify-content: flex-end !important }
  .rq-meeting-card .pg-col-header { display: none }
}

/* ── CLOSEOUT TRACKER ──────────────────────────────────────────────────────── */
.ct-shell { max-width: 900px; margin: 0 auto; padding: 18px 18px 80px }
.ct-header { margin-bottom: 14px }
.ct-title-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px }
.ct-title { font-size: 1.3rem; font-weight: 700; color: var(--bs-primary) }
.ct-blurb { font-size: 0.82rem; color: #6b7280 }
.ct-readonly-badge { background: #f3f4f6; color: #6b7280; border-radius: 4px; padding: 2px 8px; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em }
.ct-progress-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap }
.ct-progress-bar { flex: 1 1 200px; min-width: 180px; height: 10px; background: #e5e7eb; border-radius: 999px; overflow: hidden }
.ct-progress-fill { height: 100%; background: #15803d; border-radius: 999px; transition: width 0.25s ease }
.ct-progress-label { font-size: 0.78rem; color: #374151; font-weight: 600; white-space: nowrap }
.ct-hide-done { display: inline-flex; align-items: center; gap: 5px; font-size: 0.78rem; color: #6b7280; cursor: pointer; user-select: none }
.ct-hide-done input { margin: 0; cursor: pointer }
.ct-tabs { display: flex; gap: 6px; border-bottom: 2px solid #e5e7eb; padding-bottom: 0; flex-wrap: wrap }
.ct-tab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: none; background: transparent; color: #6b7280; font-size: 0.86rem; font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color 0.12s, border-color 0.12s }
.ct-tab:hover { color: var(--bs-primary) }
.ct-tab.active { color: var(--bs-primary); border-bottom-color: var(--bs-primary); font-weight: 600 }
.ct-tab-icon { font-size: 1rem }
.ct-tab-count { background: #f3f4f6; color: #6b7280; border-radius: 999px; padding: 1px 8px; font-size: 0.7rem; font-weight: 600 }
.ct-tab.active .ct-tab-count { background: var(--bs-primary-light); color: var(--bs-primary) }
.ct-bucket-blurb { font-size: 0.82rem; color: #6b7280; margin: 16px 0 12px; font-style: italic }
.ct-section { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; margin-bottom: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.04) }
.ct-section-complete { opacity: 0.65 }
.ct-section-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: #f9fafb; border-bottom: 1px solid #e5e7eb }
.ct-section-complete .ct-section-header { background: #ecfdf5 }
.ct-section-name { font-size: 0.85rem; font-weight: 600; color: #111827 }
.ct-section-count { background: var(--bs-primary-light); color: var(--bs-primary); border-radius: 999px; padding: 2px 10px; font-size: 0.72rem; font-weight: 600 }
.ct-section-complete .ct-section-count { background: #d1fae5; color: #065f46 }
.ct-section-items { display: flex; flex-direction: column }
.ct-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 16px; border-top: 1px solid #f3f4f6; cursor: pointer; transition: background 0.1s }
.ct-item:first-child { border-top: none }
.ct-item:hover { background: #f9fafb }
.ct-item-saving { opacity: 0.55; pointer-events: none }
.ct-checkbox { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; min-width: 20px; border: 1.5px solid #cbd5e1; border-radius: 5px; font-size: 0.85rem; color: #fff; background: #fff; flex-shrink: 0; margin-top: 1px; transition: all 0.12s }
.ct-checkbox.checked { background: #15803d; border-color: #15803d }
.ct-checkbox.disabled { background: #f3f4f6; border-color: #e5e7eb; cursor: not-allowed }
.ct-checkbox.checked.disabled { background: #a7f3d0; border-color: #6ee7b7 }
.ct-item-label { font-size: 0.85rem; color: #1f2937; line-height: 1.4; flex: 1; min-width: 0; word-break: break-word }
.ct-item-done .ct-item-label { text-decoration: line-through; color: #9ca3af }
.ct-add-btn { padding: 6px 12px; border: 1.5px solid var(--bs-primary); background: #fff; color: var(--bs-primary); font-size: 0.78rem; font-weight: 600; border-radius: 6px; cursor: pointer; transition: all 0.12s; white-space: nowrap }
.ct-add-btn:hover { background: var(--bs-primary); color: #fff }
.ct-add-form { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px 14px; margin: 10px 0 14px; display: flex; flex-direction: column; gap: 8px }
.ct-add-row { display: flex; align-items: center; gap: 10px }
.ct-add-label { font-size: 0.74rem; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.04em; min-width: 70px }
.ct-add-input { flex: 1; padding: 7px 10px; border: 1.5px solid #d1d5db; border-radius: 6px; font-size: 0.86rem; outline: none; background: #fff }
.ct-add-input:focus { border-color: var(--bs-focus-border); box-shadow: 0 0 0 3px var(--bs-focus-ring) }
.ct-add-actions { display: flex; justify-content: flex-end }
.ct-add-submit { padding: 7px 18px; border: 1px solid var(--bs-primary); background: var(--bs-primary); color: #fff; font-size: 0.85rem; font-weight: 600; border-radius: 6px; cursor: pointer }
.ct-add-submit:hover:not(:disabled) { background: var(--bs-primary-hover) }
.ct-add-submit:disabled { opacity: 0.5; cursor: not-allowed }

@media (max-width: 767px) {
  .ct-shell { padding: 12px 12px 80px }
  .ct-title-row { flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 10px }
  .ct-progress-row { gap: 8px }
  .ct-progress-label { font-size: 0.74rem }
  .ct-tabs { gap: 2px; overflow-x: auto; padding-bottom: 2px; flex-wrap: nowrap; -webkit-overflow-scrolling: touch }
  .ct-tab { padding: 8px 10px; font-size: 0.8rem; white-space: nowrap; flex-shrink: 0 }
  .ct-tab-icon { display: none }
  .ct-section-header { padding: 9px 12px }
  .ct-section-name { font-size: 0.82rem }
  .ct-item { padding: 11px 12px; gap: 10px }
  .ct-checkbox { width: 22px; height: 22px; min-width: 22px }
  .ct-item-label { font-size: 0.86rem }
  .ct-add-row { flex-direction: column; align-items: stretch; gap: 4px }
  .ct-add-label { min-width: 0 }
  .ct-add-input { width: 100% }
}