/* ── Left panel: wider total (680px) with slimmer fixed cols → bigger name space ── */
    @media (min-width: 1025px) {
    .p6-grid {
      grid-template-columns: 680px 1fr !important
    }
    }

    /* contain:layout/paint on the outer breaks position:sticky — must be none */
    #v9-gantt-outer {
      contain: none !important
    }

    /* ── Z-index stack for correct clipping ──
   sticky header  z:22  → covers bars + SVG arrows scrolling behind it
   sticky left    z:12  → covers bars + SVG arrows panning behind it
   SVG arrows     z:8   → on top of bars, BELOW sticky elements
   p6-right bars  z:1   → inside their column                            */
    #v9-gantt-outer .p6-hdr-left {
      z-index: 22 !important;
      position: sticky !important;
      top: 0 !important;
      left: 0 !important
    }

    #v9-gantt-outer .p6-hdr-right {
      z-index: 20 !important;
      position: sticky !important;
      top: 0 !important
    }

    #v9-gantt-outer .p6-left {
      z-index: 12 !important;
      position: sticky !important;
      left: 0 !important;
      overflow: hidden !important
    }

    /* clip right panel — side labels must not bleed into sticky left column */
    #v9-gantt-outer .p6-right {
      overflow: hidden !important;
      position: relative !important;
      z-index: 1 !important
    }

    /* SVG arrow overlay must stay below sticky elements */
    #ga-svg {
      z-index: 8 !important
    }

    /* ID:80px · Name:1fr · Dur:52px · Start:84px · Finish:84px */
    .p6-hdr-left,
    .p6-left {
      grid-template-columns: 80px 1fr 52px 84px 84px !important
    }

    /* Compact header — 2 rows: year (18px) + months (28px) = 46px total */
    .p6-hdr-left,
    .p6-hdr-right {
      height: 44px !important
    }

    .p6-hdr-cell,
    .p6-month-lbl {
      font-size: 7.5px !important;
      font-weight: 800 !important;
      letter-spacing: .5px !important;
      text-transform: uppercase !important
    }

    /* Year row — top strip, drag to pan */
    .p6-hdr-right {
      display: flex !important;
      flex-direction: column !important;
      overflow: hidden !important
    }

    .p6-year-row {
      display: flex;
      height: 22px;
      flex-shrink: 0;
      border-bottom: 1px solid rgba(255, 255, 255, .07);
      cursor: grab;
      user-select: none
    }

    .p6-year-row:active {
      cursor: grabbing
    }

    .p6-year-lbl {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10.5px;
      font-weight: 800;
      letter-spacing: .6px;
      color: #bfd7f3;
      border-right: 1px solid rgba(255, 255, 255, .06);
      text-transform: none
    }

    /* Month row — bottom strip, drag to zoom */
    .p6-mo-row {
      display: flex;
      flex: 1;
      overflow: hidden;
      cursor: ew-resize;
      user-select: none
    }

    /* NOTE: no !important on the left here — the renderer sets an inline
       `padding-left:<indent>` on .p6-c-name for the WBS/activity hierarchy.
       An !important padding shorthand was flattening that indent. */
    .p6-cell {
      padding-top: 0 !important;
      padding-bottom: 0 !important;
      padding-right: 7px !important;
      padding-left: 7px;
    }

    .p6-name-wrap {
      display: block !important
    }

    .p6-name-sub {
      display: none !important
    }

    /* ── Name fonts — compact P6-style ── */
    .p6-name-main {
      font-size: 10px !important;
      font-weight: 600 !important;
      line-height: 1.0 !important;
      letter-spacing: -.1px !important
    }

    .p6-wbs-row {
      border-left-width: 4px !important;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05) !important
    }

    .p6-wbs-row .p6-name-main {
      font-weight: 800 !important;
      letter-spacing: -.05px !important
    }

    .p6-wbs-row.lvl0 .p6-name-main {
      font-size: 11px !important;
      letter-spacing: 0px !important
    }

    .p6-wbs-row.lvl1 .p6-name-main {
      font-size: 10.5px !important
    }

    .p6-wbs-row.lvl2 .p6-name-main,
    .p6-wbs-row.lvl3 .p6-name-main,
    .p6-wbs-row.lvl4 .p6-name-main,
    .p6-wbs-row.lvl5 .p6-name-main {
      font-size: 10px !important
    }

    /* ── Activity rows ── */
    .p6-act-row .p6-name-main {
      font-size: 9.5px !important;
      font-weight: 500 !important;
      color: #d8e8f8 !important
    }

    .p6-act-row .p6-c-id {
      color: #8fafc8 !important;
      font-size: 8px !important;
      font-family: 'JetBrains Mono', monospace !important
    }

    .p6-act-row .p6-c-dur,
    .p6-act-row .p6-c-date {
      color: #7a9ab4 !important
    }

    .p6-act-row.crit .p6-name-main {
      color: #fff0f0 !important;
      font-weight: 600 !important
    }

    .p6-act-row.crit .p6-c-id,
    .p6-act-row.crit .p6-c-dur,
    .p6-act-row.crit .p6-c-date {
      color: #ff8f8f !important
    }

    /* ── Metadata columns ── */
    .p6-c-id {
      font-size: 8px !important;
      font-family: 'JetBrains Mono', monospace !important
    }

    .p6-c-dur,
    .p6-c-date {
      font-size: 8.5px !important;
      font-weight: 700 !important;
      font-family: 'JetBrains Mono', monospace !important
    }

    .p6-c-date {
      letter-spacing: .05px !important
    }

    .p6-right {
      overflow: hidden !important
    }

    /* ── WBS row visual: deeper, higher-contrast ── */
    .p6-wbs-row.lvl0 {
      border-bottom: 1px solid rgba(255, 255, 255, .07) !important
    }

    .p6-wbs-row.lvl1 {
      border-bottom: 1px solid rgba(255, 255, 255, .05) !important
    }

    /* ── Bars: matched to slim rows ── */
    .p6-sum-bar {
      height: 7px !important;
      border-radius: 1px !important;
      background: #ffffff !important;
      border: none !important;
      box-shadow: none !important
    }

    .p6-sum-bar::after {
      height: 2px !important
    }

    .p6-act-bar {
      height: 10px !important;
      border-radius: 2px !important;
      box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 1px 5px rgba(0, 0, 0, .38) !important;
      transition: filter .1s !important
    }

    .p6-act-bar.crit {
      box-shadow: 0 0 0 1px rgba(255, 140, 140, .3), 0 0 8px rgba(255, 87, 87, .28) !important
    }

    .p6-bar-lbl {
      display: none !important
    }

    /* ── Side labels ── */
    .p6-side-lbl {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 8.5px;
      font-weight: 700;
      color: #e8f4ff;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      pointer-events: none;
      text-shadow: 0 1px 3px rgba(0, 0, 0, .95);
      z-index: 8;
      letter-spacing: .05px
    }

    .p6-side-lbl.left {
      text-align: right
    }

    .p6-side-lbl.wbs {
      color: #deeeff;
      font-size: 9px;
      font-weight: 800
    }

    .p6-side-lbl.act {
      color: #d8f0ff
    }

    /* ── Toolbar & legend: compact ── */
    .p6-toolbar {
      margin-bottom: 5px !important;
      padding: 6px 10px !important;
      gap: 4px !important
    }

    .p6-tb-btn {
      padding: 3px 8px !important;
      font-size: 9.5px !important;
      border-radius: 5px !important
    }

    .p6-tb-lbl {
      font-size: 8.5px !important;
      letter-spacing: .7px !important
    }

    .p6-exp-btn {
      padding: 3px 10px !important;
      font-size: 9.5px !important;
      border-radius: 5px !important
    }

    .p6-rowcount {
      font-size: 9px !important
    }

    .p6-tb-sep {
      height: 12px !important
    }

    .p6-legend {
      margin-bottom: 5px !important;
      gap: 4px !important
    }

    .p6-leg {
      font-size: 8.5px !important;
      padding: 3px 8px !important;
      gap: 5px !important
    }

    .p6-leg i {
      width: 9px !important;
      height: 9px !important
    }

    /* ── Milestone diamond ── */
    .p6-ms {
      width: 10px !important;
      height: 10px !important;
      border-radius: 2px !important
    }

    /* ── Today line ── */
    .p6-today {
      width: 1px !important;
      background: rgba(248, 113, 113, .7) !important
    }

    /* ── Month gridlines: subtler ── */
    .p6-gl.maj {
      border-color: rgba(79, 127, 168, .07) !important
    }

    .p6-gl.alt {
      background: rgba(255, 255, 255, .008) !important;
      border: none !important;
      position: absolute;
      top: 0;
      bottom: 0
    }