/*
Theme Name: BR Playbook
Author: Best8a
Description: BR Playbook custom theme
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* === WordPress core style overrides === */
#wpadminbar { display: none !important; }
html { margin-top: 0 !important; }
body { margin: 0 !important; }
/* ======================================= */

  :root {
    --bg: #0a0a0a;
    --bg-2: #141414;
    --surface: #181818;
    --surface-2: #1f1f1f;
    --border: #2a2a2a;
    --border-strong: #3a3a3a;
    --text: #ffffff;
    --text-2: #b8b8b8;
    --text-3: #808080;
    --blue: #1ea8ff;
    --blue-2: #0d8bdc;
    --blue-glow: rgba(30,168,255,.35);
    --blue-wash: rgba(30,168,255,.10);
    --green: #4ade80;
    --red: #f87171;
    --amber: #fbbf24;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "Manrope", -apple-system, system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    background-image:
      radial-gradient(ellipse 1400px 700px at -10% -10%, rgba(30,168,255,.12), transparent 60%),
      radial-gradient(ellipse 900px 500px at 110% 30%, rgba(30,168,255,.06), transparent 60%);
    background-attachment: fixed;
  }
  ::selection { background: var(--blue); color: #000; }
  a { color: inherit; text-decoration: none; }

  /* Top bar */
  .topbar {
    position: sticky; top: 0; z-index: 50;
    background: rgba(10,10,10,.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
  }
  .topbar-inner {
    max-width: 1280px; margin: 0 auto;
    padding: 14px 28px;
    display: flex; align-items: center; gap: 20px;
    flex-wrap: wrap;
  }
  .brand { font-weight: 800; font-size: 18px; letter-spacing: -0.02em; white-space: nowrap; }
  .brand-accent { color: var(--blue); }
  .search-wrap { flex: 1; min-width: 260px; position: relative; }
  .search-wrap svg {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: var(--text-3);
  }
  #search {
    width: 100%;
    padding: 10px 16px 10px 40px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    font-family: inherit; font-size: 14px; color: var(--text);
    transition: border-color .15s, box-shadow .15s, background .15s;
  }
  #search::placeholder { color: var(--text-3); }
  #search:focus {
    outline: none;
    border-color: var(--blue);
    background: var(--surface-2);
    box-shadow: 0 0 0 3px var(--blue-wash);
  }
  .stat { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .stat strong { color: var(--text); font-weight: 600; }

  /* Hero */
  .hero { max-width: 1280px; margin: 0 auto; padding: 48px 28px 24px; position: relative; }
  .hero-eyebrow {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px; letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 12px;
    font-weight: 500;
  }
  .hero h1 {
    font-weight: 800;
    font-size: clamp(30px, 4.5vw, 48px);
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin: 0 0 14px;
  }
  .hero h1 .accent { color: var(--blue); display: inline-block; }
  .hero p {
    max-width: 680px;
    font-size: 15px;
    color: var(--text-2);
    margin: 0 0 18px;
    line-height: 1.5;
  }
  .hero p strong { color: var(--text); font-weight: 600; }
  .hero-help {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 12.5px;
    color: var(--text-2);
  }
  .hero-help svg { color: var(--blue); flex-shrink: 0; }
  .hero-help code {
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    background: var(--blue-wash);
    color: var(--blue);
    padding: 2px 7px;
    border-radius: 4px;
  }

  /* ===== Full Hierarchical TOC ===== */
  .toc {
    max-width: 1280px; margin: 0 auto;
    padding: 16px 28px 32px;
  }
  .toc-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
  }
  .toc-eyebrow {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px; letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 6px;
    font-weight: 500;
  }
  .toc-title {
    font-weight: 800;
    font-size: clamp(20px, 2.5vw, 26px);
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1.1;
  }
  .toc-actions { display: flex; gap: 8px; }
  .toc-btn {
    padding: 6px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-2);
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
  }
  .toc-btn:hover {
    border-color: var(--blue);
    color: var(--blue);
    background: var(--blue-wash);
  }

  /* Tabs */
  .toc-tabs-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    flex-wrap: wrap;
  }
  .toc-tabs-label {
    font-family: "JetBrains Mono", monospace;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-3);
  }
  .toc-tabs-hint {
    font-size: 12px;
    color: var(--text-3);
    font-style: italic;
    flex: 1;
    min-width: 200px;
  }
  .toc-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    width: fit-content;
  }
  .toc-tab {
    padding: 7px 16px;
    background: transparent;
    border: none;
    border-radius: 7px;
    color: var(--text-3);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    letter-spacing: -0.005em;
    white-space: nowrap;
  }
  .toc-tab:hover { color: var(--text-2); }
  .toc-tab.active {
    background: var(--blue);
    color: #000;
  }
  .toc-panel { display: none; }
  .toc-panel.active { display: block; }

  /* Phase view */
  .phase-intro {
    font-size: 13px;
    color: var(--text-2);
    margin-bottom: 14px;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--blue);
    border-radius: 8px;
    line-height: 1.5;
  }
  .phase-list { display: flex; flex-direction: column; gap: 18px; }
  .phase {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 18px;
  }
  .phase-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 12px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
  }
  .phase-num-tag {
    font-family: "JetBrains Mono", monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    padding: 4px 10px;
    background: var(--blue);
    color: #000;
    border-radius: 5px;
    white-space: nowrap;
  }
  .phase-title-wrap { flex: 1; }
  .phase-title {
    font-weight: 700;
    font-size: 17px;
    margin: 0;
    letter-spacing: -0.01em;
    line-height: 1.2;
  }
  .phase-subtitle {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    color: var(--text-3);
    letter-spacing: 0.03em;
    margin-top: 2px;
  }
  .phase-meta {
    font-family: "JetBrains Mono", monospace;
    font-size: 10.5px;
    color: var(--text-3);
    padding: 3px 9px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    white-space: nowrap;
  }

  .phase-milestones {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    counter-reset: phase-ms;
  }
  .phase-toc-goal {
    margin: 0 0 12px;
    padding: 10px 14px;
    background: rgba(251,191,36,.06);
    border: 1px solid rgba(251,191,36,.25);
    border-left: 3px solid var(--amber);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.5;
  }
  .phase-toc-goal-label {
    display: inline-block;
    font-family: "JetBrains Mono", monospace;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--amber);
    margin-right: 8px;
    padding: 2px 7px;
    background: rgba(251,191,36,.15);
    border-radius: 4px;
    vertical-align: 1px;
  }
  /* Detailed phase milestones (expandable) */
  .phase-milestones-detailed {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .phase-ms-expandable > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    transition: background .15s;
  }
  .phase-ms-expandable > summary:hover { background: var(--bg-2); }
  .phase-order-num {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    color: var(--text-3);
    width: 22px;
    text-align: right;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
  }
  .phase-pts-chip {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    color: var(--amber);
    background: rgba(251,191,36,.1);
    border: 1px solid rgba(251,191,36,.25);
    padding: 2px 7px;
    border-radius: 4px;
    white-space: nowrap;
    letter-spacing: 0.03em;
    flex-shrink: 0;
  }
  /* When inside phase view, the nested milestone body should not be indented the way zone view does */
  .phase-ms-expandable .toc-milestone-body {
    margin-left: 16px;
    padding-left: 14px;
  }
  .phase-ms a {
    display: grid;
    grid-template-columns: 32px 70px 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 7px;
    transition: background .15s, color .15s;
    color: var(--text-2);
    font-size: 13px;
    line-height: 1.4;
  }
  .phase-ms a:hover {
    background: var(--bg-2);
    color: var(--text);
  }
  .phase-ms-num {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    color: var(--text-3);
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .phase-ms-code {
    font-family: "JetBrains Mono", monospace;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--blue);
    background: var(--blue-wash);
    border: 1px solid rgba(30,168,255,.2);
    padding: 3px 7px;
    border-radius: 4px;
    text-align: center;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }
  .phase-ms-desc {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .phase-ms-pts {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    color: var(--amber);
    background: rgba(251,191,36,.1);
    border: 1px solid rgba(251,191,36,.25);
    padding: 2px 7px;
    border-radius: 4px;
    white-space: nowrap;
    letter-spacing: 0.03em;
  }
  .phase-ms-tasks {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    color: var(--text-3);
    white-space: nowrap;
  }

  @media (max-width: 640px) {
    .phase-ms a {
      grid-template-columns: 24px 60px 1fr;
      grid-template-rows: auto auto;
      gap: 8px;
    }
    .phase-ms-desc { grid-column: 1 / -1; margin-top: 2px; }
    .phase-ms-pts, .phase-ms-tasks { display: none; }
  }

  /* TOC Legend */
  .toc-legend {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
    padding: 12px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--blue);
    border-radius: 10px;
  }
  .legend-row { display: flex; align-items: flex-start; gap: 10px; }
  .legend-tag {
    font-family: "JetBrains Mono", monospace;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 2px;
  }
  .legend-tag.t-zone { background: var(--blue); color: #000; }
  .legend-tag.t-milestone { background: var(--blue-wash); color: var(--blue); border: 1px solid rgba(30,168,255,.3); }
  .legend-tag.t-group { background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border-strong); }
  .legend-tag.t-task { background: transparent; color: var(--text-3); border: 1px solid var(--border); }
  .legend-def { font-size: 12.5px; color: var(--text-2); line-height: 1.4; }
  .legend-def strong { color: var(--text); font-weight: 600; display: block; margin-bottom: 2px; font-size: 13px; }

  .toc-body {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 8px;
  }

  /* Level pill labels on each TOC item */
  .toc-zone > summary::after,
  .toc-milestone > summary::after,
  .toc-group > summary::after,
  .toc-tasks li a::after {
    content: attr(data-level);
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 3px 7px;
    border-radius: 4px;
    margin-left: auto;
    white-space: nowrap;
    flex-shrink: 0;
    order: -1;
  }
  .toc-zone > summary::before {
    content: "ZONE";
    font-family: "JetBrains Mono", monospace;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 3px 8px;
    border-radius: 4px;
    background: var(--blue);
    color: #000;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .toc-milestone > summary::before {
    content: "MILESTONE";
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 3px 7px;
    border-radius: 4px;
    background: var(--blue-wash);
    color: var(--blue);
    border: 1px solid rgba(30,168,255,.3);
    white-space: nowrap;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 1px;
  }
  .toc-group > summary::before {
    content: "GROUP";
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 3px 7px;
    border-radius: 4px;
    background: var(--surface-2);
    color: var(--text-2);
    border: 1px solid var(--border-strong);
    white-space: nowrap;
    flex-shrink: 0;
  }
  .toc-tasks li .toc-task-link::before {
    content: "TASK";
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 2px 6px;
    border-radius: 3px;
    background: transparent;
    color: var(--text-3);
    border: 1px solid var(--border);
    white-space: nowrap;
    flex-shrink: 0;
  }
  .toc-tasks li .toc-task-link:hover::before { color: var(--blue); border-color: rgba(30,168,255,.3); }
  .toc details { display: block; }
  .toc details summary { list-style: none; cursor: pointer; }
  .toc details summary::-webkit-details-marker { display: none; }

  .toc-zone > summary {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    border-radius: 8px;
    transition: background .15s;
  }
  .toc-zone > summary:hover { background: var(--bg-2); }
  .toc-zone[open] > summary { background: var(--bg-2); }
  .toc-zone-link {
    font-weight: 700;
    font-size: 16px;
    color: var(--text);
    letter-spacing: -0.01em;
    flex: 1;
  }
  .toc-zone-link:hover { color: var(--blue); }

  .toc-zone-body { padding: 4px 0 8px 30px; border-left: 1px dashed var(--border); margin-left: 18px; }

  .toc-milestone > summary {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    transition: background .15s;
  }
  .toc-milestone > summary:hover { background: var(--bg-2); }
  .toc-milestone-link {
    flex: 1;
    font-size: 13.5px;
    color: var(--text-2);
    line-height: 1.45;
  }
  .toc-milestone-link:hover { color: var(--blue); }
  .toc-m-tag {
    display: inline-block;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    font-weight: 600;
    color: var(--blue);
    background: var(--blue-wash);
    padding: 1px 7px;
    border-radius: 4px;
    margin-right: 6px;
    border: 1px solid rgba(30,168,255,.2);
  }

  .toc-milestone-body { padding: 2px 0 6px 30px; border-left: 1px dashed var(--border); margin-left: 10px; }

  .toc-group > summary {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--text-2);
    transition: background .15s;
  }
  .toc-group > summary:hover { background: var(--bg-2); color: var(--text); }
  .toc-group-link { color: inherit; flex: 1; }
  .toc-group-link:hover { color: var(--blue); }

  .toc-code {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    color: var(--blue);
    background: transparent;
    padding: 0;
    letter-spacing: 0.03em;
  }

  .toc-count {
    font-family: "JetBrains Mono", monospace;
    font-size: 10.5px;
    color: var(--text-3);
    padding: 2px 7px;
    background: var(--bg-2);
    border-radius: 4px;
    border: 1px solid var(--border);
    white-space: nowrap;
    letter-spacing: 0.03em;
  }

  .toc-chevron {
    color: var(--text-3);
    font-size: 10px;
    width: 12px;
    display: inline-block;
    transition: transform .15s;
    user-select: none;
  }
  details[open] > summary > .toc-chevron {
    transform: rotate(90deg);
  }

  .toc-tasks {
    list-style: none;
    margin: 4px 0 4px 30px;
    padding: 4px 0 4px 12px;
    border-left: 1px dashed var(--border);
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .toc-tasks li {
    display: flex;
    align-items: stretch;
    gap: 6px;
  }
  .toc-task-link {
    display: flex;
    gap: 8px;
    align-items: baseline;
    padding: 5px 10px;
    border-radius: 5px;
    color: var(--text-3);
    font-size: 12.5px;
    line-height: 1.4;
    transition: background .15s, color .15s;
    flex: 1;
    min-width: 0;
  }
  .toc-task-link:hover { background: var(--bg-2); color: var(--text); }
  .toc-time { font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: var(--blue); flex-shrink: 0; }
  .toc-hint { color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
  .toc-task-link:hover .toc-hint { color: var(--text-2); }

  .toc-copy {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: var(--surface-2);
    color: var(--text-3);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    flex-shrink: 0;
    align-self: center;
    letter-spacing: -0.005em;
  }
  .toc-copy svg { flex-shrink: 0; }
  .toc-copy:hover {
    background: var(--blue);
    color: #000;
    border-color: var(--blue);
  }
  .toc-copy.copied {
    background: var(--green);
    color: #000;
    border-color: var(--green);
  }
  .toc-copy.copied .toc-copy-label::before { content: "✓ "; }

  /* Zone */
  .zone {
    max-width: 1280px; margin: 0 auto;
    padding: 48px 28px 24px;
    scroll-margin-top: 80px;
  }
  .zone-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    gap: 20px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--blue);
    margin-bottom: 22px;
  }
  .zone-eyebrow {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px; letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--blue);
    font-weight: 500;
  }
  .zone-title {
    font-weight: 800;
    font-size: clamp(22px, 3vw, 32px);
    letter-spacing: -0.025em;
    margin: 0;
    line-height: 1.05;
  }
  .zone-meta {
    font-size: 12px; color: var(--text-3);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  /* Milestone */
  .milestone { margin-bottom: 36px; scroll-margin-top: 80px; }
  .milestone-head {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 18px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
  }
  .milestone-num {
    font-weight: 800;
    font-size: 54px;
    line-height: 0.85;
    color: var(--blue);
    letter-spacing: -0.04em;
    text-shadow: 0 0 30px var(--blue-glow);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }
  .milestone-num-zone {
    font-family: "JetBrains Mono", monospace;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-2);
    letter-spacing: 0.04em;
    text-shadow: none;
    line-height: 1;
    padding: 3px 8px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 4px;
  }
  .milestone-num-m {
    font-size: 54px;
    line-height: 0.85;
    color: var(--blue);
    letter-spacing: -0.04em;
    text-shadow: 0 0 30px var(--blue-glow);
  }
  .milestone-pts {
    display: inline-block;
    font-family: "JetBrains Mono", monospace;
    font-size: 10.5px;
    padding: 3px 8px;
    background: var(--blue);
    color: #000;
    border-radius: 4px;
    margin-bottom: 7px;
    letter-spacing: 0.05em;
    font-weight: 600;
  }
  .milestone-desc {
    font-weight: 600;
    font-size: 16.5px;
    line-height: 1.35;
    color: var(--text);
    margin: 0 0 6px;
    letter-spacing: -0.01em;
  }
  .milestone-count {
    font-size: 11.5px;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
  }

  /* Group */
  .group {
    margin-bottom: 24px;
    padding: 20px 22px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: border-color .2s;
    scroll-margin-top: 80px;
  }
  .group:hover { border-color: var(--border-strong); }

  .group-intro {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 22px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--border);
  }
  .group-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
  .group-head::before {
    content: "TASK GROUP";
    font-family: "JetBrains Mono", monospace;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 3px 8px;
    border-radius: 4px;
    background: var(--surface-2);
    color: var(--text-2);
    border: 1px solid var(--border-strong);
    white-space: nowrap;
    flex-shrink: 0;
  }
  .group-code {
    font-family: "JetBrains Mono", monospace;
    font-size: 10.5px;
    font-weight: 500;
    padding: 3px 8px;
    background: var(--blue-wash);
    color: var(--blue);
    border-radius: 4px;
    letter-spacing: 0.05em;
    border: 1px solid rgba(30,168,255,.2);
  }
  .group-title {
    font-weight: 700;
    font-size: 19px;
    margin: 0;
    letter-spacing: -0.015em;
    line-height: 1.2;
  }
  .group-desc { color: var(--text-2); font-size: 13.5px; margin: 0; line-height: 1.5; }

  .group-summary {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--blue);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .summary-stats { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; }
  .stat-item { min-width: 0; }
  .stat-label {
    font-family: "JetBrains Mono", monospace;
    font-size: 9.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 4px;
    font-weight: 500;
  }
  .stat-value { font-weight: 700; font-size: 16px; color: var(--text); letter-spacing: -0.02em; line-height: 1.1; }
  .stat-sub { font-size: 11px; color: var(--text-3); margin-top: 3px; font-family: "JetBrains Mono", monospace; letter-spacing: 0.02em; }
  .summary-note { font-size: 13px; color: var(--text-2); line-height: 1.5; padding-top: 8px; border-top: 1px dashed var(--border); }
  .summary-note strong {
    color: var(--blue);
    font-weight: 600;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-right: 6px;
    display: inline-block;
  }

  /* Group video */
  .group-video {
    border-radius: 10px; overflow: hidden;
    background: var(--bg);
    aspect-ratio: 16 / 9;
    position: relative;
    align-self: start;
    border: 1px solid var(--border);
  }
  .group-video iframe, .group-video video { width: 100%; height: 100%; border: 0; display: block; }
  .video-placeholder {
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: var(--text-3);
    background:
      radial-gradient(circle at 50% 50%, rgba(30,168,255,.08) 0%, transparent 70%),
      linear-gradient(135deg, var(--bg-2) 0%, var(--bg) 100%);
    gap: 4px;
    padding: 14px;
    text-align: center;
  }
  .video-placeholder::before {
    content: ""; position: absolute; inset: 0;
    background-image:
      linear-gradient(var(--border) 1px, transparent 1px),
      linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: .15; pointer-events: none;
  }
  .video-placeholder > * { position: relative; z-index: 1; }
  .video-placeholder svg { color: var(--blue); opacity: .8; margin-bottom: 4px; }
  .video-text { font-size: 14.5px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
  .video-sub { font-size: 11.5px; color: var(--text-3); }
  .video-code {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px; color: var(--blue);
    letter-spacing: 0.08em; margin-top: 6px;
    padding: 2px 8px; background: var(--blue-wash);
    border: 1px solid rgba(30,168,255,.2); border-radius: 4px;
  }

  /* Tasks */
  .tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
  .task {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "chips chips" "text btn";
    gap: 8px 16px;
    padding: 12px 14px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: border-color .15s, background .15s;
    scroll-margin-top: 80px;
  }
  .task:hover { border-color: var(--blue); background: #1a1a1a; }
  .task:target {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px var(--blue-wash), 0 0 30px var(--blue-glow);
  }
  .task.hidden { display: none; }
  .task-chips { grid-area: chips; display: flex; gap: 5px; flex-wrap: wrap; }
  .chip {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px; font-weight: 500;
    padding: 3px 7px; border-radius: 4px;
    letter-spacing: 0.04em; white-space: nowrap;
  }
  .chip-code { background: var(--blue); color: #000; font-weight: 600; }
  .chip-time { background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); }
  .diff-low { background: rgba(74,222,128,.12); color: var(--green); border: 1px solid rgba(74,222,128,.25); }
  .diff-high { background: rgba(251,191,36,.12); color: var(--amber); border: 1px solid rgba(251,191,36,.3); }
  .diff-unk { background: var(--surface-2); color: var(--text-3); border: 1px solid var(--border); }
  .task-text { grid-area: text; margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text); align-self: center; }
  .copy-btn {
    grid-area: btn; align-self: center;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 14px;
    background: var(--blue); color: #000;
    border: none; border-radius: 999px;
    font-size: 12.5px; font-weight: 600;
    cursor: pointer;
    transition: background .15s, box-shadow .15s, transform .1s;
    white-space: nowrap; letter-spacing: -0.005em;
    font-family: inherit;
  }
  .copy-btn:hover { background: #3fb8ff; box-shadow: 0 0 24px var(--blue-glow); }
  .copy-btn:active { transform: translateY(1px); }
  .copy-btn.copied { background: var(--green); color: #000; }
  .copy-btn.copied .copy-label::before { content: "Copied! "; }

  footer {
    max-width: 1280px; margin: 32px auto 0;
    padding: 24px 28px 40px;
    border-top: 1px solid var(--border);
    color: var(--text-3);
    font-size: 12.5px;
  }

  .no-results {
    display: none; text-align: center;
    padding: 100px 28px;
    color: var(--text-3);
    font-weight: 600; font-size: 22px;
    letter-spacing: -0.01em;
  }
  body.searching .no-results.show { display: block; }
  .zone.empty, .milestone.empty, .group.empty { display: none; }

  /* ===== View mode: By zone vs By phase ===== */
  /* Zone view (default): show zone sections, hide phase sections */
  body.view-zone .phase-section { display: none; }
  body.view-zone #content-phase { display: none; }

  /* Phase view: show phase sections, hide zone sections */
  body.view-phase .zone > .zone-header { display: none; }
  body.view-phase .zone { padding: 0 !important; border: none; margin: 0; }
  body.view-phase .zone:empty { display: none; }
  body.view-phase #content-zone > .zone { padding-top: 0 !important; padding-bottom: 0 !important; }
  body.view-phase #content-zone { display: none; }
  body.view-phase #content-phase { display: block; }

  /* Phase section in main content (mirrors zone-header styling, themed for phases) */
  .phase-section {
    max-width: 1280px; margin: 0 auto;
    padding: 48px 28px 24px;
    scroll-margin-top: 80px;
  }
  .phase-section-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    gap: 20px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--amber);
    margin-bottom: 22px;
  }
  .phase-section-tag {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #000;
    background: var(--amber);
    padding: 4px 10px;
    border-radius: 5px;
    white-space: nowrap;
    align-self: center;
  }
  .phase-section-title {
    font-weight: 800;
    font-size: clamp(22px, 3vw, 32px);
    letter-spacing: -0.025em;
    margin: 0;
    line-height: 1.05;
  }
  .phase-section-title .phase-section-subtitle {
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    color: var(--amber);
    font-weight: 500;
    margin-left: 10px;
    letter-spacing: 0.04em;
    vertical-align: middle;
  }
  .phase-section-meta {
    font-size: 12px; color: var(--text-3);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .phase-section-goal {
    max-width: 1280px;
    margin: 0 auto 22px;
    padding: 12px 18px;
    background: rgba(251,191,36,.06);
    border: 1px solid rgba(251,191,36,.25);
    border-left: 3px solid var(--amber);
    border-radius: 8px;
    font-size: 14px;
    color: var(--text);
    line-height: 1.5;
  }
  .phase-section-goal-label {
    display: inline-block;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--amber);
    margin-right: 10px;
    padding: 3px 8px;
    background: rgba(251,191,36,.15);
    border-radius: 4px;
    vertical-align: 2px;
  }

  /* Hosts for milestones */
  #content-phase { scroll-margin-top: 80px; }
  .phase-section-milestones { display: flex; flex-direction: column; gap: 0; }

  /* In phase view, show an inline "from zone" chip on each milestone */
  body.view-phase .milestone .milestone-zone-hint { display: inline-block; }
  .milestone-zone-hint { display: none; }

  /* ===== Group letter chip (uniform A/B/C/D labels) ===== */
  .group-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--blue);
    color: #000;
    font-family: inherit;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0;
    margin-right: 10px;
    flex-shrink: 0;
    vertical-align: middle;
  }
  .toc-group-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(30,168,255,.15);
    color: var(--blue);
    font-family: inherit;
    font-weight: 700;
    font-size: 11px;
    margin-right: 8px;
    flex-shrink: 0;
    border: 1px solid rgba(30,168,255,.35);
  }

  /* Independent / Dependent badges on tasks */
  .indep-badge {
    font-weight: 700;
    letter-spacing: 0.02em;
  }
  .chip.badge-indep {
    color: #2e7a3e;
    background: rgba(58, 138, 76, .12);
    border: 1px solid rgba(58, 138, 76, .35);
  }
  .chip.badge-dep {
    color: #c68011;
    background: rgba(232, 153, 18, .12);
    border: 1px solid rgba(232, 153, 18, .4);
  }

  /* Group subtitle (for A/B with multiple sub-activities) */
  .group-subtitle {
    font-size: 13px;
    color: var(--text-3);
    font-style: italic;
    margin: 4px 0 8px;
    line-height: 1.5;
  }

  /* ========== Planner Tool ========== */
  .toc-tab-tool {
    position: relative;
  }
  .toc-tab-tool::after {
    content: "";
    position: absolute;
    top: 2px; right: 2px;
    width: 6px; height: 6px;
    background: var(--amber);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(251,191,36,.6);
  }
  .toc-tab.active.toc-tab-tool::after { display: none; }

  .planner-intro {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--amber);
    border-radius: 10px;
    margin-bottom: 18px;
  }
  .planner-icon {
    font-size: 20px;
    color: var(--amber);
    line-height: 1;
    padding-top: 2px;
  }
  .planner-intro-text {
    font-size: 13.5px;
    color: var(--text-2);
    line-height: 1.55;
  }
  .planner-intro-text strong { color: var(--text); font-weight: 600; }

  /* Date picker row */
  .planner-start-date {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--blue);
    border-radius: 10px;
    margin-bottom: 18px;
  }
  .planner-start-date label {
    font-size: 13.5px;
    color: var(--text-2);
    line-height: 1.4;
  }
  .planner-start-date label strong { color: var(--text); font-weight: 600; }
  .planner-date-input {
    background: var(--bg-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 7px 12px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color-scheme: dark;
    min-width: 150px;
  }
  .planner-date-input:hover { border-color: var(--blue); }
  .planner-date-input:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px var(--blue-wash);
  }
  .planner-date-hint {
    font-size: 12px;
    color: var(--text-3);
    font-style: italic;
    flex: 1;
    min-width: 200px;
  }

  .planner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
  }
  .planner-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
  }
  .planner-row:hover { border-color: var(--border-strong); }
  .planner-zone-label {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.005em;
    line-height: 1.3;
  }
  .planner-zone-label small {
    display: block;
    font-weight: 400;
    color: var(--text-3);
    font-size: 11.5px;
    margin-top: 1px;
  }
  .planner-select {
    background: var(--bg-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 6px 14px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    min-width: 110px;
    transition: all .15s;
  }
  .planner-select:hover { border-color: var(--blue); }
  .planner-select:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px var(--blue-wash);
  }

  .planner-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 22px;
    flex-wrap: wrap;
  }
  .planner-btn {
    padding: 11px 22px;
    border-radius: 999px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all .15s;
    border: 1px solid transparent;
    letter-spacing: -0.01em;
  }
  .planner-btn.primary {
    background: var(--blue);
    color: #000;
    border-color: var(--blue);
  }
  .planner-btn.primary:hover { background: #3fb8ff; box-shadow: 0 0 24px var(--blue-glow); }
  .planner-btn.secondary {
    background: transparent;
    color: var(--text-2);
    border-color: var(--border);
  }
  .planner-btn.secondary:hover { border-color: var(--blue); color: var(--blue); }

  .planner-output { display: none; }
  .planner-output.show { display: block; }

  /* Role filter pills */
  .role-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--blue);
    border-radius: 10px;
    margin-bottom: 18px;
  }
  .role-filter-label {
    font-family: "JetBrains Mono", monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-right: 6px;
  }
  .role-pill {
    background: var(--bg-2);
    color: var(--text-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 6px 14px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    display: inline-flex;
    align-items: center;
    gap: 7px;
  }
  .role-pill:hover { border-color: var(--blue); color: var(--text); }
  .role-pill.active {
    background: var(--blue);
    color: #000;
    border-color: var(--blue);
  }
  .role-pill .role-count {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    opacity: 0.75;
    font-weight: 500;
  }
  .role-pill.active .role-count { opacity: 0.7; }
  .role-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
  }
  .role-dot.r-as { background: #3a8a4c; }
  .role-dot.r-al { background: #e89912; }
  .role-dot.r-am { background: #8b5cf6; }
  .role-dot.dot-indep { background: #3a8a4c; }
  .role-dot.dot-dep { background: #c68011; }
  .indep-filter { margin-top: -8px; }

  /* Role chips on tasks */
  .task-role-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: "JetBrains Mono", monospace;
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }
  .task-role-chip.r-as { color: #3a8a4c; background: rgba(58, 138, 76, .12); border: 1px solid rgba(58, 138, 76, .3); }
  .task-role-chip.r-al { color: #e89912; background: rgba(232, 153, 18, .12); border: 1px solid rgba(232, 153, 18, .3); }
  .task-role-chip.r-am { color: #8b5cf6; background: rgba(139, 92, 246, .15); border: 1px solid rgba(139, 92, 246, .35); }

  /* Position breakdown cards */
  .position-breakdown {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
  }
  .position-card {
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: 10px;
  }
  .position-card.p-as { border-left-color: #3a8a4c; }
  .position-card.p-al { border-left-color: #e89912; }
  .position-card.p-am { border-left-color: #8b5cf6; }
  .position-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
  }
  .position-card-title {
    font-weight: 700;
    font-size: 13px;
    color: var(--text);
    letter-spacing: -0.005em;
  }
  .position-card-title small {
    color: var(--text-3);
    font-weight: 400;
    font-size: 11.5px;
    margin-left: 4px;
  }
  .position-card-stats {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--text-2);
  }
  .position-card-stats strong {
    color: var(--text);
    font-weight: 700;
    font-family: "JetBrains Mono", monospace;
  }

  /* Hide tasks/milestones that don't match current role filter */
  .filter-hidden { display: none !important; }

  .planner-output h3 {
    font-weight: 700;
    font-size: 18px;
    margin: 28px 0 12px;
    letter-spacing: -0.015em;
  }
  .planner-output h3:first-child { margin-top: 0; }
  .planner-output h4 {
    font-weight: 600;
    font-size: 14px;
    margin: 18px 0 8px;
    color: var(--text-2);
  }

  /* Summary card */
  .planner-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 18px;
  }
  .summary-card {
    padding: 16px 18px;
    background: var(--surface);
  }
  .summary-card .s-label {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    color: var(--text-3);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 6px;
    font-weight: 500;
  }
  .summary-card .s-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--blue);
    letter-spacing: -0.025em;
    line-height: 1;
  }
  .summary-card .s-unit {
    font-size: 14px;
    color: var(--text-3);
    font-weight: 500;
    margin-left: 4px;
  }
  .summary-card .s-sub {
    font-size: 11.5px;
    color: var(--text-3);
    margin-top: 4px;
    font-family: "JetBrains Mono", monospace;
  }

  /* Zone progress bars */
  .planner-progress { display: flex; flex-direction: column; gap: 8px; }
  .progress-row {
    display: grid;
    grid-template-columns: 180px 1fr auto;
    gap: 12px;
    align-items: center;
    font-size: 13px;
  }
  .progress-row .p-label { color: var(--text); font-weight: 500; font-size: 12.5px; }
  .progress-bar {
    height: 10px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
  }
  .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--blue) 0%, #3fb8ff 100%);
    transition: width .4s;
  }
  .progress-fill.done { background: var(--green); }
  .progress-text {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    color: var(--text-3);
    white-space: nowrap;
    min-width: 60px;
    text-align: right;
  }

  /* Phase calendar */
  .planner-calendar { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
  .cal-phase {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
  }
  .cal-phase-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
  }
  .cal-phase-tag {
    font-family: "JetBrains Mono", monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    padding: 4px 9px;
    background: var(--amber);
    color: #000;
    border-radius: 5px;
  }
  .cal-phase-name {
    font-weight: 700;
    font-size: 15px;
    flex: 1;
  }
  .cal-phase-name small {
    color: var(--text-3);
    font-weight: 400;
    margin-left: 8px;
    font-family: "JetBrains Mono", monospace;
    font-size: 11.5px;
  }
  .cal-phase-stats {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    color: var(--text-3);
    white-space: nowrap;
  }
  .cal-phase-body { padding: 6px 8px 10px; }
  .cal-phase-goal {
    padding: 10px 16px;
    background: rgba(251,191,36,.06);
    border-top: 1px solid rgba(251,191,36,.15);
    border-bottom: 1px solid rgba(251,191,36,.15);
    font-size: 13px;
    color: var(--text);
    line-height: 1.5;
  }
  .cal-phase-goal-label {
    display: inline-block;
    font-family: "JetBrains Mono", monospace;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--amber);
    margin-right: 8px;
    padding: 2px 7px;
    background: rgba(251,191,36,.15);
    border-radius: 4px;
    vertical-align: 1px;
  }
  .cal-phase-dates {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    color: var(--blue);
    font-weight: 600;
    white-space: nowrap;
    padding: 3px 9px;
    background: var(--blue-wash);
    border: 1px solid rgba(30,168,255,.2);
    border-radius: 4px;
  }

  /* Expandable milestone rows in the calendar */
  .cal-ms-expand { display: block; }
  .cal-ms-expand > summary {
    list-style: none;
    cursor: pointer;
  }
  .cal-ms-expand > summary::-webkit-details-marker { display: none; }
  .cal-ms-row {
    display: grid;
    grid-template-columns: 14px 84px 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 9px 10px;
    font-size: 12.5px;
    border-radius: 6px;
    transition: background .15s;
  }
  .cal-ms-row:hover { background: var(--bg-2); }
  .cal-chevron {
    color: var(--text-3);
    font-size: 10px;
    transition: transform .15s;
    user-select: none;
  }
  .cal-ms-expand[open] > summary .cal-chevron {
    transform: rotate(90deg);
  }
  .cal-ms-tasks {
    padding: 0 8px 10px 32px;
    border-left: 1px dashed var(--border);
    margin-left: 24px;
    margin-bottom: 6px;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* Per-milestone "Copy all" bar */
  .ms-copy-bar {
    padding: 8px 4px 6px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
  }
  .ms-copy-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    color: var(--text-2);
    border-radius: 999px;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
  }
  .ms-copy-all:hover {
    background: var(--blue);
    color: #000;
    border-color: var(--blue);
  }
  .ms-copy-count {
    font-family: "JetBrains Mono", monospace;
    font-size: 10.5px;
    opacity: .8;
  }
  .ms-copy-all.copied {
    background: var(--green);
    color: #fff;
    border-color: var(--green);
  }
  .ms-email-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-left: 2px solid var(--amber);
    color: var(--text-2);
    border-radius: 999px;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    margin-left: 8px;
  }
  .ms-email-all:hover {
    background: var(--amber);
    color: #000;
    border-color: var(--amber);
  }
  .ms-email-all:disabled {
    opacity: .4;
    cursor: not-allowed;
  }
  .ms-email-count {
    font-family: "JetBrains Mono", monospace;
    font-size: 10.5px;
    opacity: .8;
  }
  .ms-email-all.sent {
    background: var(--green);
    color: #fff;
    border-color: var(--green);
  }

  /* Nozbe email fallback modal */
  .nozbe-email-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
  }
  .nozbe-email-modal-content {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px 28px;
    max-width: 720px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    color: var(--text);
  }
  .nozbe-email-body-preview {
    width: 100%;
    min-height: 180px;
    max-height: 320px;
    background: var(--bg-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 12px;
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    line-height: 1.55;
    resize: vertical;
    margin-top: 8px;
  }
  .nozbe-copy-mini {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    color: var(--text-2);
    border-radius: 999px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    margin-left: 6px;
    transition: all .15s;
  }
  .nozbe-copy-mini:hover {
    background: var(--blue);
    color: #000;
    border-color: var(--blue);
  }
  .cal-task {
    display: grid;
    grid-template-columns: 26px 84px 42px 44px 48px 1fr 28px;
    gap: 10px;
    align-items: center;
    padding: 7px 10px 7px 4px;
    font-size: 12.5px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    transition: background .12s;
  }
  .cal-task:last-child { border-bottom: none; }
  .cal-task:hover { background: var(--bg-2); }
  .cal-task-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(30,168,255,.15);
    color: var(--blue);
    font-weight: 700;
    font-size: 11px;
    flex-shrink: 0;
    border: 1px solid rgba(30,168,255,.35);
    font-family: inherit;
  }
  .cal-task-text {
    color: var(--text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.4;
  }
  .cal-task .toc-copy {
    padding: 4px 7px;
  }
  .cal-task .toc-copy .toc-copy-label { display: none; }

  /* Small, muted chips inside rows */
  .cal-task .toc-code {
    font-size: 10.5px;
    padding: 2px 6px;
  }
  .cal-task .toc-time {
    font-family: "JetBrains Mono", monospace;
    font-size: 10.5px;
    color: var(--text-3);
    white-space: nowrap;
  }
  .cal-task .task-role-chip {
    padding: 1px 6px;
    font-size: 10px;
  }
  .cal-task .task-indep-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    letter-spacing: 0.03em;
    white-space: nowrap;
  }
  .cal-task .task-indep-chip.tic-indep {
    color: #2e7a3e;
    background: rgba(58,138,76,.12);
    border: 1px solid rgba(58,138,76,.3);
  }
  .cal-task .task-indep-chip.tic-dep {
    color: #c68011;
    background: rgba(232,153,18,.12);
    border: 1px solid rgba(232,153,18,.35);
  }
  .list-phase-header {
    padding: 14px 8px 4px;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--amber);
    font-weight: 700;
    border-top: 2px solid var(--border);
    margin-top: 10px;
  }
  .list-phase-header:first-child { border-top: none; margin-top: 0; padding-top: 4px; }
  .list-ms-header {
    padding: 10px 8px 6px;
    border-top: 1px dashed var(--border);
    margin-top: 8px;
    font-size: 12.5px;
  }
  .cal-ms-row:hover { background: var(--bg-2); }
  .cal-day-range {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    color: var(--blue);
    font-weight: 600;
  }
  .cal-ms-code {
    font-family: "JetBrains Mono", monospace;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--blue);
    background: var(--blue-wash);
    border: 1px solid rgba(30,168,255,.2);
    padding: 2px 7px;
    border-radius: 4px;
    white-space: nowrap;
  }
  .cal-ms-desc {
    color: var(--text);
    line-height: 1.4;
  }
  .cal-ms-duration {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    color: var(--text-3);
    white-space: nowrap;
  }
  .cal-warning {
    padding: 10px 14px;
    background: rgba(251,191,36,.06);
    border: 1px solid rgba(251,191,36,.25);
    border-left: 3px solid var(--amber);
    border-radius: 8px;
    font-size: 12.5px;
    color: var(--amber);
    margin-top: 8px;
    line-height: 1.5;
  }
  .cal-empty {
    padding: 12px 14px;
    color: var(--text-3);
    font-style: italic;
    font-size: 12.5px;
  }

  .planner-bulk-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
  }

  .planner-empty {
    text-align: center;
    padding: 48px 20px;
    color: var(--text-3);
  }
  .planner-empty-icon { font-size: 40px; margin-bottom: 12px; }
  .planner-empty-title { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
  .planner-empty-sub { font-size: 13px; }

  @media (max-width: 880px) {
    .group-intro { grid-template-columns: 1fr; }
    .group-video { max-width: 520px; margin: 0 auto; width: 100%; }
  }
  @media (max-width: 640px) {
    .hero { padding: 56px 20px 24px; }
    .toc, .zone { padding-left: 20px; padding-right: 20px; }
    .zone { padding-top: 56px; }
    .group { padding: 20px; }
    .summary-stats { gap: 18px; }
    .task { grid-template-columns: 1fr; grid-template-areas: "chips" "text" "btn"; }
    .copy-btn { align-self: flex-start; }
    .milestone-head { grid-template-columns: 64px 1fr; gap: 18px; }
    .milestone-num { font-size: 52px; }
    .milestone-desc { font-size: 18px; }
    .zone-header { grid-template-columns: 1fr; gap: 6px; }
    .toc-zone-body { margin-left: 8px; padding-left: 16px; }
    .toc-milestone-body { margin-left: 4px; padding-left: 16px; }
    .toc-tasks { margin-left: 10px; padding-left: 10px; }
    .toc-hint { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; }
  }