:root {
      --sidebar-width: 360px;
      --month-width: 130px;
      --row-height: 46px;
      --header-height: 78px;
      --month-count: 78;
      --timeline-width: 10140px;

      --bg: #f4f6f9;
      --panel: #ffffff;
      --border: #d8dee8;
      --border-strong: #b8c2d1;
      --text: #1f2937;
      --muted: #667085;
      --accent: #2457c5;
      --accent-soft: #e8efff;
      --team: #eef3f9;
      --subteam: #f7f9fc;
      --project: #ffffff;

      --bar-default: #4f73d9;
      --bar-green: #2f9e67;
      --bar-orange: #d97706;
      --bar-red: #c83e4d;
      --bar-purple: #7c4dca;
      --bar-teal: #178c8c;
    }

    * {
      box-sizing: border-box;
    }

html,
body {
  height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
}

.app {
  height: 100vh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

    .toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px;
      padding: 16px 20px;
      background: #17233c;
      color: #ffffff;
      border-bottom: 1px solid #0f172a;
    }

    .toolbar h1 {
      margin: 0 18px 0 0;
      font-size: 21px;
      font-weight: 700;
      letter-spacing: 0.2px;
    }

    .toolbar button,
    .toolbar select {
      border: 1px solid rgba(255,255,255,0.25);
      background: rgba(255,255,255,0.08);
      color: #ffffff;
      border-radius: 7px;
      padding: 8px 11px;
      font-size: 14px;
      cursor: pointer;
    }

    .toolbar button:hover,
    .toolbar select:hover {
      background: rgba(255,255,255,0.14);
    }

    .toolbar select option {
      color: #111827;
      background: #ffffff;
    }

    .timeline-control {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: 13px;
      font-weight: 600;
      color: #d9e2f2;
    }

    .year-range-control {
      position: relative;
    }

    .year-range-button {
      min-width: 108px;
      text-align: left;
    }

    .year-range-button::after {
      content: "▾";
      float: right;
      margin-left: 12px;
    }

    .year-range-popup {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      z-index: 100;
      width: 248px;
      padding: 16px;
      border: 1px solid var(--border-strong);
      border-radius: 10px;
      background: #ffffff;
      color: var(--text);
      box-shadow: 0 18px 45px rgba(15, 23, 42, 0.28);
    }

    .year-range-popup[hidden] {
      display: none;
    }

    .year-range-popup strong {
      display: block;
      margin-bottom: 12px;
      font-size: 15px;
    }

    .year-range-popup label {
      display: grid;
      gap: 5px;
      margin-top: 10px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    .year-range-popup select {
      width: 100%;
      border-color: var(--border-strong);
      background: #ffffff;
      color: var(--text);
    }

    .year-range-actions {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      margin-top: 16px;
    }

    .toolbar .year-range-popup button {
      flex: 1;
      border-color: var(--border-strong);
      background: #ffffff;
      color: var(--text);
    }

    .toolbar .year-range-popup button:hover {
      background: #f3f6fa;
    }

    .toolbar .year-range-popup .year-range-apply {
      border-color: var(--accent);
      background: var(--accent);
      color: #ffffff;
      font-weight: 700;
    }

    .toolbar .year-range-popup .year-range-apply:hover {
      background: #1f4dac;
    }

    .legend {
      margin-left: auto;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      font-size: 12px;
      color: #d9e2f2;
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .legend-swatch {
      width: 13px;
      height: 13px;
      border-radius: 3px;
    }
.app-header {
  flex: 0 0 auto;
  position: relative;
  z-index: 20;
}

.roadmap-shell {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  background: var(--panel);
}

    .roadmap {
      min-width: calc(var(--sidebar-width) + var(--timeline-width));
      display: grid;
      grid-template-columns: var(--sidebar-width) var(--timeline-width);
      align-items: start;
    }

    .left-column,
    .timeline-column {
      min-width: 0;
    }

    .left-column {
      position: sticky;
      left: 0;
      z-index: 8;
      background: var(--panel);
      box-shadow: 5px 0 12px rgba(31, 41, 55, 0.08);
    }

    .left-header {
      position: sticky;
      top: 0;
      z-index: 15;
      height: var(--header-height);
      padding: 18px 18px 14px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background: #ffffff;
      border-right: 1px solid var(--border-strong);
      border-bottom: 1px solid var(--border-strong);
    }

    .left-header strong {
      font-size: 17px;
    }

    .left-header span {
      margin-top: 4px;
      color: var(--muted);
      font-size: 12px;
    }

    .timeline-header {
      position: sticky;
      top: 0;
      z-index: 10;
      width: var(--timeline-width);
      height: var(--header-height);
      display: flex;
      background: #ffffff;
      border-bottom: 1px solid var(--border-strong);
    }

    .timeline-header-spacer {
      flex: 0 0 auto;
      height: 1px;
      pointer-events: none;
    }

    .month-header {
      flex: 0 0 var(--month-width);
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      font-size: 12px;
      font-weight: 700;
      color: #344054;
    }

    .month-header .year {
      color: var(--muted);
      font-size: 11px;
      font-weight: 600;
    }

    .month-header.january {
      border-left: 2px solid #90a1ba;
    }

    .name-row {
      height: var(--row-height);
      border-right: 1px solid var(--border-strong);
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      padding: 0 12px;
      overflow: hidden;
      background: #ffffff;
      contain: layout paint style;
      content-visibility: auto;
    }

    #timelineRows {
      position: relative;
      width: var(--timeline-width);
      background-color: #ffffff;
      background-image: repeating-linear-gradient(
        to right,
        transparent 0,
        transparent calc(var(--month-width) - 1px),
        var(--border) calc(var(--month-width) - 1px),
        var(--border) var(--month-width)
      );
    }

    .timeline-scale-week #timelineRows {
      background-image: none;
    }

    .timeline-grid-window {
      position: absolute;
      top: 0;
      bottom: 0;
      z-index: 0;
      pointer-events: none;
      background-image: repeating-linear-gradient(
        to right,
        transparent 0,
        transparent calc(var(--month-width) - 1px),
        var(--border) calc(var(--month-width) - 1px),
        var(--border) var(--month-width)
      );
    }

    .timeline-row {
      position: relative;
      width: var(--timeline-width);
      height: var(--row-height);
      box-sizing: border-box;
      border-bottom: 1px solid var(--border);
      background: transparent;
      contain: layout paint style;
      content-visibility: auto;
    }

    .row.team > .name-row,
    .name-row.team {
      background: var(--team);
      font-weight: 700;
    }

    .row.subteam > .name-row,
    .name-row.subteam {
      background: var(--subteam);
      font-weight: 650;
    }

    .name-row.project {
      background: var(--project);
    }

    .timeline-row.team {
      background: linear-gradient(to right, rgba(36,87,197,0.05), rgba(36,87,197,0.01));
    }

    .timeline-row.subteam {
      background: rgba(238,243,249,0.45);
    }

    .label {
      display: flex;
      align-items: center;
      gap: 7px;
      min-width: 0;
      width: 100%;
    }

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

    .indent-0 { padding-left: 0; }
    .indent-1 { padding-left: 18px; }
    .indent-2 { padding-left: 38px; }
    .indent-3 { padding-left: 58px; }

    .toggle {
      width: 22px;
      height: 22px;
      border: none;
      border-radius: 5px;
      background: transparent;
      color: #344054;
      font-size: 14px;
      line-height: 1;
      cursor: pointer;
      flex: 0 0 auto;
    }

    .toggle:hover {
      background: rgba(36,87,197,0.10);
    }

    .project-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #98a2b3;
      flex: 0 0 auto;
      margin-left: 7px;
      margin-right: 7px;
    }

    .project-bar {
      position: absolute;
      top: 8px;
      height: 29px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      padding: 0 10px;
      color: #ffffff;
      font-size: 12px;
      font-weight: 700;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      box-shadow: 0 1px 3px rgba(16,24,40,0.22);
      cursor: pointer;
      z-index: 3;
    }

    .project-bar:hover {
      filter: brightness(1.05);
      transform: translateY(-1px);
    }

    .project-milestone-marker {
      position: absolute;
      left: 50%;
      bottom: 3px;
      width: 8px;
      height: 8px;
      margin: 0;
      padding: 0;
      transform: translateX(-50%) rotate(45deg);
      border: 1px solid rgba(71, 61, 44, 0.42);
      border-radius: 1px;
      background: #f6f1df;
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.34);
      appearance: none;
      cursor: default;
      z-index: 7;
      transition:
        transform 90ms ease-out,
        background-color 90ms ease-out,
        box-shadow 90ms ease-out;
    }

    .project-milestone-marker:hover,
    .project-milestone-marker:focus-visible {
      transform: translateX(-50%) rotate(45deg) scale(1.16);
      border-color: rgba(71, 61, 44, 0.66);
      background: #fffaf0;
      box-shadow:
        0 0 0 2px rgba(255, 250, 240, 0.34),
        0 2px 4px rgba(15, 23, 42, 0.38);
      outline: none;
    }

    .milestone-tooltip {
      --milestone-anchor-x: 50%;
      position: fixed;
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 70;
      width: max-content;
      min-width: 150px;
      max-width: min(240px, calc(100vw - 24px));
      min-height: 48px;
      padding: 8px 13px 9px;
      border: 1px solid rgba(148, 163, 184, 0.34);
      border-radius: 11px;
      background: #0f1b2d;
      color: #f8fafc;
      text-align: center;
      box-shadow:
        0 8px 20px rgba(15, 23, 42, 0.28),
        0 2px 6px rgba(15, 23, 42, 0.20);
      opacity: 0;
      pointer-events: none;
      transition: opacity 90ms ease-out;
    }

    .milestone-tooltip::before {
      content: "";
      position: absolute;
      left: var(--milestone-anchor-x);
      top: -7px;
      width: 1px;
      height: 7px;
      transform: translateX(-50%);
      background: rgba(71, 85, 105, 0.82);
    }

    .milestone-tooltip.milestone-tooltip-above::before {
      top: auto;
      bottom: -7px;
    }

    .milestone-tooltip.is-visible {
      opacity: 1;
    }

    .milestone-tooltip-title {
      display: block;
      max-width: 100%;
      color: #ffffff;
      font-size: 12px;
      font-weight: 800;
      line-height: 1.25;
      overflow-wrap: anywhere;
    }

    .milestone-tooltip-date {
      display: block;
      margin-top: 3px;
      color: #dbe4f0;
      font-size: 11px;
      font-weight: 600;
      line-height: 1.2;
    }

    @media (prefers-reduced-motion: reduce) {
      .project-milestone-marker,
      .milestone-tooltip {
        transition: none;
      }
    }

    .project-bar.default { background: var(--bar-default); }
    .project-bar.green { background: var(--bar-green); }
    .project-bar.orange { background: var(--bar-orange); }
    .project-bar.red { background: var(--bar-red); }
    .project-bar.purple { background: var(--bar-purple); }
    .project-bar.teal { background: var(--bar-teal); }

    .hidden-row {
      display: none !important;
    }

    .today-line {
      position: absolute;
      top: var(--header-height);
      bottom: 0;
      width: 2px;
      background: #d92d20;
      z-index: 5;
      pointer-events: none;
    }

    .today-line::before {
      content: "Today";
      position: absolute;
      top: 2px;
      left: 5px;
      padding: 2px 5px;
      border-radius: 4px;
      background: #d92d20;
      color: #ffffff;
      font-size: 10px;
      font-weight: 700;
    }

    .tooltip {
      position: fixed;
      display: none;
      z-index: 50;
      max-width: 320px;
      padding: 10px 12px;
      border-radius: 7px;
      background: #111827;
      color: #ffffff;
      font-size: 12px;
      line-height: 1.4;
      box-shadow: 0 6px 18px rgba(0,0,0,0.25);
      pointer-events: auto;
    }

    .tooltip strong {
      display: block;
      margin-bottom: 4px;
      font-size: 13px;
    }


    .row-actions { margin-left:auto; display:flex; gap:4px; opacity:0; }
    .name-row:hover .row-actions { opacity:1; }
    .row-action { width:26px; height:26px; border:1px solid #cbd5e1; border-radius:5px; background:#fff; cursor:pointer; color:#475467; padding:0; }
    .row-action:hover { background:#eef3f9; }
    .row-action.delete:hover { color:#b42318; background:#fff1f0; border-color:#f1b7b2; }

    @media (max-width: 800px) {
      :root {
        --sidebar-width: 280px;
        --month-width: 110px;
      }

      .legend {
        width: 100%;
        margin-left: 0;
      }
    }

    @media print {
      .toolbar {
        display: none;
      }

      .roadmap-shell {
        overflow: visible;
      }

      .left-column,
      .left-header,
      .timeline-header {
        position: static;
      }

      .roadmap {
        transform-origin: top left;
      }
    }
  
    .toolbar .primary-action { background:#fff; color:#17233c; font-weight:700; }
    .toolbar .primary-action:hover { background:#eef3f9; }
    .search-box { min-width:220px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); color:#fff; border-radius:7px; padding:8px 11px; }
    .search-box::placeholder { color:#cbd5e1; }
    .drawer-backdrop { position:fixed; inset:0; z-index:100; display:none; background:rgba(15,23,42,.36); backdrop-filter:blur(2px); }
    .drawer-backdrop.open { display:block; }
    .drawer { position:absolute; inset:0 0 0 auto; width:min(520px,94vw); background:#fff; border-left:1px solid var(--border); box-shadow:-18px 0 50px rgba(15,23,42,.22); overflow:auto; animation:drawerIn .18s ease-out; }
    @keyframes drawerIn { from { transform:translateX(28px); opacity:0; } to { transform:none; opacity:1; } }
    .drawer-header { position:sticky; top:0; z-index:2; display:flex; justify-content:space-between; align-items:center; padding:20px 22px; border-bottom:1px solid var(--border); background:rgba(255,255,255,.96); backdrop-filter:blur(8px); }
    .drawer-header h2 { margin:0; font-size:20px; }
    .drawer-close { width:34px; height:34px; border:1px solid var(--border); border-radius:8px; background:#fff; font-size:22px; cursor:pointer; color:#667085; }
    .drawer-body { padding:22px; }
    .drawer-note { margin:0 0 18px; padding:12px 14px; border:1px solid #dbe5f5; border-radius:8px; background:#f6f9ff; color:#475467; font-size:13px; line-height:1.45; }
    .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
    .field { display:flex; flex-direction:column; gap:6px; }
    .field.full { grid-column:1/-1; }
    .field label { font-size:13px; font-weight:700; color:#344054; }
    .field input,.field select,.field textarea { width:100%; border:1px solid #cbd5e1; border-radius:7px; padding:9px 10px; color:#111827; background:#fff; }
    .metadata-option-control { display:grid; grid-template-columns:minmax(0,1fr) 48px; gap:8px; align-items:center; }
    .field input.metadata-color-input { width:48px; height:38px; padding:3px; cursor:pointer; }
    .metadata-color-input::-webkit-color-swatch-wrapper { padding:2px; }
    .metadata-color-input::-webkit-color-swatch { border:0; border-radius:4px; }
    .metadata-color-input::-moz-color-swatch { border:0; border-radius:4px; }
    .metadata-color-input:disabled { cursor:not-allowed; opacity:.55; }
    .field-help { color:var(--muted); font-size:11px; line-height:1.35; }
    .field textarea { min-height:92px; resize:vertical; }
    .drawer-footer { position:sticky; bottom:0; z-index:2; display:flex; gap:10px; padding:16px 22px; border-top:1px solid var(--border); background:rgba(248,250,252,.97); backdrop-filter:blur(8px); }
    .drawer-footer .right { margin-left:auto; display:flex; gap:10px; }
    .button { border:1px solid #cbd5e1; border-radius:7px; padding:9px 14px; background:#fff; color:#344054; cursor:pointer; }
    .button:hover { background:#f8fafc; }
    .button.primary { background:var(--accent); color:#fff; border-color:var(--accent); font-weight:700; }
    .button.danger { background:#fff4f5; color:#b42318; border-color:#f4c7cd; }
    .selection-ring { outline:2px solid rgba(36,87,197,.42); outline-offset:-2px; }
    @media (max-width:700px) { .form-grid { grid-template-columns:1fr; } .field.full { grid-column:auto; } .search-box { min-width:160px; } }


/* Compact utility buttons */
#exportButton,
#importButton,
#resetButton{
    font-size:12px !important;
    padding:5px 10px !important;
    min-height:28px;
    border-radius:5px !important;
    opacity:.82;
}

#exportButton:hover,
#importButton:hover,
#resetButton:hover{
    opacity:1;
}

#exportButton{
    margin-left:24px;
}

#importButton,
#resetButton{
    margin-left:4px;
}


/* Utility icon buttons */
#exportButton,#importButton,#resetButton{
  width:32px !important;
  min-width:32px !important;
  height:32px !important;
  padding:0 !important;
  font-size:16px !important;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:6px !important;
  margin-left:4px !important;
}
#exportButton{margin-left:24px!important;}


#exportButton svg,
#importButton svg,
#resetButton svg{
  width:16px;
  height:16px;
  stroke:currentColor;
  pointer-events:none;
}

#exportButton,
#importButton,
#resetButton{
  transition:all .15s ease;
}

#exportButton:hover,
#importButton:hover,
#resetButton:hover{
  transform:translateY(-1px);
}


.project-bar[data-priority="Have to"]{box-shadow: inset 5px 0 0 #d92d20,0 1px 3px rgba(16,24,40,.22);}
.project-bar[data-priority="Like to"]{box-shadow: inset 5px 0 0 #f59e0b,0 1px 3px rgba(16,24,40,.22);}
.project-bar[data-priority="Nice to Have"]{box-shadow: inset 5px 0 0 #22c55e,0 1px 3px rgba(16,24,40,.22);}

.file-status-slot {
  display: contents;
}

.file-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 12px;
  margin: 0;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  color: #d9e2f2;
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.file-status.connected {
  color: #d1fadf;
  border-color: rgba(47,158,103,.55);
  background: rgba(47,158,103,.14);
}

.file-status.warning {
  color: #fef0c7;
  border-color: rgba(217,119,6,.55);
  background: rgba(217,119,6,.14);
}

.startup-backdrop {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15,23,42,.72);
  backdrop-filter: blur(4px);
}
.startup-backdrop.open { display: flex; }

.startup-card {
  width: min(560px, 96vw);
  padding: 28px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(0,0,0,.34);
}
.startup-logo {
  height: 28px;
  width: auto;
  filter: brightness(0) saturate(100%) invert(17%) sepia(19%) saturate(1567%) hue-rotate(181deg) brightness(91%) contrast(89%);
}
.startup-card h2 {
  margin: 22px 0 8px;
  font-size: 24px;
}
.startup-card p {
  margin: 0;
  color: #667085;
  line-height: 1.55;
}
.startup-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 24px;
}
.startup-action {
  min-height: 74px;
  padding: 14px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  color: #344054;
  cursor: pointer;
  text-align: left;
}
.startup-action:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.startup-action strong {
  display: block;
  margin-bottom: 4px;
  color: #1f2937;
}
.startup-action.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
.startup-action.primary strong { color: #fff; }
.startup-action.primary:hover { filter: brightness(1.04); }
.startup-note {
  margin-top: 18px !important;
  font-size: 12px;
}

@media (max-width: 620px) {
  .startup-actions { grid-template-columns: 1fr; }
}


/* Timeline layering corrections */
.timeline-column {
  position: relative;
  z-index: 1;
}

.left-column {
  z-index: 30;
}

.left-header {
  z-index: 40;
  isolation: isolate;
}

.timeline-header {
  z-index: 20;
}

.today-line {
  z-index: 12;
  box-shadow: 0 0 0 1px rgba(217,45,32,.08);
}

.today-line::before {
  z-index: 13;
}


/* Move item dialog */
.move-backdrop {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(15,23,42,.54);
  backdrop-filter: blur(3px);
}
.move-backdrop.open { display: flex; }

.move-dialog {
  width: min(520px, 96vw);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(0,0,0,.32);
  overflow: hidden;
}
.move-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}
.move-header h3 {
  margin: 0;
  font-size: 18px;
}
.move-close {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
  color: #667085;
  font-size: 20px;
  cursor: pointer;
}
.move-body {
  padding: 20px;
}
.move-help {
  margin: 0 0 16px;
  color: #667085;
  font-size: 13px;
  line-height: 1.45;
}
.move-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.move-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.move-field label {
  font-size: 13px;
  font-weight: 700;
  color: #344054;
}
.move-field select {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  background: #fff;
  color: #111827;
}
.move-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 15px 20px;
  border-top: 1px solid var(--border);
  background: #f8fafc;
}


.timeline-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: 12px;
  color: #d9e2f2;
}
.timeline-control select {
  min-width: 88px;
}
#yearFilter { min-width: 104px; }
#timelineScale { min-width: 96px; }

.timeline-header,
.timeline-row {
  grid-template-columns: repeat(var(--month-count), var(--month-width));
}

.month-header.scale-quarter,
.month-header.scale-year {
  font-size: 13px;
}

.project-link {
  margin-left: auto;
  padding-left: 8px;
  color: inherit;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.project-link svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  pointer-events: none;
}
.project-bar.has-link {
  padding-right: 8px;
}

/* View-only published edition */
.view-only-mode #addItem,
.view-only-mode #exportData,
.view-only-mode #importData,
.view-only-mode #resetData,
.view-only-mode #fileStatus,
.view-only-mode #importFile,
.view-only-mode .row-actions,
.view-only-mode .drawer-backdrop,
.view-only-mode .startup-backdrop,
.view-only-mode .move-backdrop {
  display: none !important;
}

.view-only-mode .project-bar {
  cursor: default;
}

.view-only-mode .toolbar h1::after {
  content: "  •  View Only";
  color: #aebbd0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2px;
  white-space: nowrap;
}

.publish-error {
  display: none;
  padding: 12px 18px;
  border-bottom: 1px solid #f4c7cd;
  background: #fff4f5;
  color: #b42318;
  font-size: 13px;
}
.publish-error.visible {
  display: block;
}


.local-file-prompt {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid #d8dee8;
  background: #eef6ff;
  color: #344054;
  font-size: 13px;
}
.local-file-prompt.visible {
  display: flex;
}
.local-file-prompt button {
  border: 1px solid #2457c5;
  border-radius: 6px;
  padding: 7px 11px;
  background: #2457c5;
  color: #fff;
  cursor: pointer;
  font-weight: 700;
}
.local-file-prompt button:hover {
  filter: brightness(1.05);
}


.project-bar-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Studio safeguards */
.studio-mode #addItem,
.studio-mode #exportData,
.studio-mode #importData,
.studio-mode #resetData {
  display: initial;
}

.studio-mode #fileStatus {
  display: inline-flex;
}

.studio-mode .row-actions {
  display: flex;
}

.studio-mode .drawer-backdrop.open {
  display: block;
}

.studio-mode .startup-backdrop.open,
.studio-mode .move-backdrop.open {
  display: flex;
}

.studio-mode .toolbar h1::after {
  content: none;
}


/* External product logo */
.app-logo,
.startup-logo,
.hero-logo {
  display: block;
  width: auto;
  object-fit: contain;
}

/* Application header */
.app-header {
  flex: 0 0 auto;
  background: #17233c;
  color: #ffffff;
  border-bottom: 1px solid #0f172a;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.16);
}

.brand-bar {
  display: flex;
  align-items: center;
  min-height: var(--brand-bar-min-height);
  padding: var(--brand-bar-padding);
  background: #17233c;
}

.hero-logo {
  height: var(--hero-logo-height);
  max-width: var(--hero-logo-max-width);
  flex: var(--hero-logo-flex);
}

/* Studio-only actions displayed opposite the product logo. */
.studio-header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.studio-header-action,
.studio-add-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: transparent;
  color: #ffffff;
  font-family: inherit;
  cursor: pointer;
  transition:
    background-color 120ms ease,
    border-color 120ms ease,
    color 120ms ease;
}

.studio-header-action {
  gap: 5px;
  min-height: 31px;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,0.24);
  font-size: 12px;
  font-weight: 500;
}

.studio-header-action:hover {
  border-color: rgba(255,255,255,0.42);
  background: rgba(255,255,255,0.08);
}

.studio-header-action svg {
  flex: 0 0 auto;
}

.studio-action-divider {
  width: 1px;
  height: 26px;
  margin: 0 4px;
  background: rgba(255,255,255,0.24);
}

.studio-add-action {
  gap: 6px;
  min-height: 33px;
  padding: 6px 12px;
  border: 1px solid #73b548;
  color: #83c857;
  font-size: 13px;
  font-weight: 700;
}

.studio-add-action:hover {
  border-color: #8ed060;
  background: rgba(115,181,72,0.10);
  color: #9bdb70;
}

.studio-header-action:focus-visible,
.studio-add-action:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.app-header .toolbar {
  min-height: 0;
  padding: 9px 20px 11px;
  border-top: 1px solid rgba(255,255,255,0.09);
  border-bottom: 0;
  box-shadow: none;
}

/* Keep team and subteam colors identical in Studio and Viewer. */
.studio-mode .name-row.team,
.view-only-mode .name-row.team {
  background: var(--team);
  color: var(--text);
  font-weight: 700;
}

.studio-mode .name-row.subteam,
.view-only-mode .name-row.subteam {
  background: var(--subteam);
  color: var(--text);
  font-weight: 650;
}

.studio-mode .timeline-row.team,
.view-only-mode .timeline-row.team {
  background: linear-gradient(
    to right,
    rgba(36,87,197,0.05),
    rgba(36,87,197,0.01)
  );
}

.studio-mode .timeline-row.subteam,
.view-only-mode .timeline-row.subteam {
  background: rgba(238,243,249,0.45);
}


@media (max-width: 900px) {
  .brand-bar {
    min-height: 64px;
    padding: 7px 16px 5px;
  }

  .hero-logo {
    height: 50px;
    max-width: min(520px, 78vw);
  }

  .studio-header-actions {
    gap: 5px;
  }

  .studio-header-action {
    padding-left: 7px;
    padding-right: 7px;
  }

  .studio-add-action {
    padding-left: 10px;
    padding-right: 10px;
  }

  .app-header .toolbar {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (max-width: 620px) {
  .brand-bar {
    justify-content: space-between;
    gap: 10px;
  }

  .hero-logo {
    height: 44px;
    max-width: 90vw;
  }

  .studio-header-action span {
    display: none;
  }

  .studio-header-action {
    width: 31px;
    padding: 5px;
  }

  .studio-action-divider {
    margin: 0 2px;
  }

  .studio-add-action {
    padding: 6px 9px;
  }

  .studio-add-action span:last-child {
    display: none;
  }
}

/* Link-style All Years action */
.toolbar .year-range-popup #yearRangeAll {
  flex: 0 0 auto;
  padding-left: 4px;
  padding-right: 4px;
  border-color: transparent;
  background: transparent;
  color: var(--accent);
  box-shadow: none;
}

.toolbar .year-range-popup #yearRangeAll:hover {
  border-color: transparent;
  background: transparent;
  color: #1f4dac;
  text-decoration: underline;
}


/* Project links editor and compact link menu */
.link-entry-grid {
  display: grid;
  grid-template-columns: minmax(120px, .8fr) minmax(180px, 1.4fr) 40px;
  gap: 8px;
  align-items: center;
}
.link-add-button {
  width: 40px;
  height: 38px;
  border: 1px solid var(--accent);
  border-radius: 7px;
  background: var(--accent);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.link-add-button:hover { filter: brightness(1.05); }
.links-editor-list { display: grid; gap: 8px; margin-top: 4px; }
.links-empty { padding: 10px 12px; border: 1px dashed var(--border-strong); border-radius: 7px; color: var(--muted); font-size: 12px; }
.link-editor-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #f8fafc;
}
.link-editor-row.dragging { opacity: .5; }
.link-editor-row.drag-over { border-color: var(--accent); background: var(--accent-soft); }
.link-drag-handle { color: var(--muted); cursor: grab; text-align: center; user-select: none; }
.link-drag-handle:active { cursor: grabbing; }
.link-editor-content { min-width: 0; }
.link-editor-content a { display: block; overflow: hidden; color: var(--accent); font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.link-editor-url { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.link-editor-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin-left: 12px;
  flex-shrink: 0;
}

.link-edit-button,
.link-remove-button {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 7px;
  cursor: pointer;
}

.link-edit-button {
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #344054;
  font-size: 15px;
}

.link-edit-button:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.link-remove-button {
  border: 1px solid #e8b4b4;
  background: #fff4f5;
  color: #b42318;
  font-size: 18px;
}

.link-remove-button:hover {
  border-color: #df8f8f;
  background: #ffecec;
}
.project-link-count { margin-left: 3px; font-size: 10px; font-weight: 700; }
.project-links-menu {
  position: fixed;
  z-index: 500;
  width: min(300px, calc(100vw - 24px));
  max-height: min(360px, calc(100vh - 24px));
  padding: 6px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #ffffff;
  box-shadow:
    0 18px 45px rgba(15, 23, 42, 0.18),
    0 3px 10px rgba(15, 23, 42, 0.08);
}

.project-links-menu-title {
  margin: -6px -6px 5px;
  padding: 11px 13px 10px;
  border-bottom: 1px solid #e5eaf1;
  border-radius: 10px 10px 0 0;
  background: #f8fafc;
  color: #667085;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.project-links-menu a {
  position: relative;
  display: block;
  min-height: 38px;
  padding: 10px 34px 10px 38px;
  overflow: hidden;
  border-radius: 7px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  line-height: 18px;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background-color 120ms ease, color 120ms ease;
}

.project-links-menu a::before {
  content: "↗";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  font-size: 15px;
  font-weight: 800;
}

.project-links-menu a::after {
  content: "Open";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #98a2b3;
  font-size: 10px;
  font-weight: 700;
  opacity: 0;
  transition: opacity 120ms ease;
}

.project-links-menu a + a {
  border-top: 1px solid #eef1f5;
  border-radius: 0;
}

.project-links-menu a:hover,
.project-links-menu a:focus-visible {
  background: var(--accent-soft);
  color: var(--accent);
  outline: none;
}

.project-links-menu a:hover::after,
.project-links-menu a:focus-visible::after {
  opacity: 1;
}

.project-links-menu::-webkit-scrollbar {
  width: 10px;
}

.project-links-menu::-webkit-scrollbar-thumb {
  border: 3px solid #ffffff;
  border-radius: 999px;
  background: #cbd5e1;
}
@media (max-width: 700px) { .link-entry-grid { grid-template-columns: 1fr 40px; } .link-entry-grid #linkTitle { grid-column: 1 / -1; } }
.project-link[type="button"] {
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

/* Structured project hover details */
.tooltip {
  width: min(430px, calc(100vw - 24px));
  max-width: 430px;
  max-height: min(680px, calc(100vh - 24px));
  padding: 0;
  overflow-y: auto;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 12px;
  background: linear-gradient(145deg, #111827, #0f1b2d);
  color: #f8fafc;
  font-size: 12px;
  line-height: 1.45;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.38);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 90ms ease-out,
    left 120ms ease-out,
    top 120ms ease-out;
}

.tooltip.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.tooltip.tooltip-positioning {
  transition:
    opacity 90ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .tooltip,
  .tooltip.tooltip-positioning {
    transition: none;
  }
}

.tooltip-title {
  padding: 16px 18px 14px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.28);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
}

.tooltip-link-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.24);
  background: rgba(15, 23, 42, 0.36);
}

.tooltip-primary-link,
.tooltip-related-links > summary {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid rgba(167, 139, 250, 0.48);
  border-radius: 7px;
  color: #ede9fe;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.tooltip-primary-link {
  background: #7c3aed;
  border-color: #8b5cf6;
  color: #fff;
}

.tooltip-primary-link:hover,
.tooltip-primary-link:focus-visible,
.tooltip-related-links > summary:hover,
.tooltip-related-links > summary:focus-visible {
  filter: brightness(1.12);
  outline: 2px solid rgba(196, 181, 253, 0.7);
  outline-offset: 2px;
}

.tooltip-related-links {
  position: relative;
}

.tooltip-related-links > summary {
  list-style: none;
  background: rgba(124, 58, 237, 0.12);
}

.tooltip-related-links > summary::-webkit-details-marker {
  display: none;
}

.tooltip-related-links-menu {
  position: absolute;
  z-index: 2;
  top: calc(100% + 6px);
  left: 0;
  width: min(290px, calc(100vw - 54px));
  max-height: 220px;
  padding: 5px;
  overflow-y: auto;
  border: 1px solid rgba(148, 163, 184, 0.4);
  border-radius: 8px;
  background: #111827;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.38);
}

.tooltip-related-links-menu a {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 6px;
  color: #e2e8f0;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.tooltip-related-links-menu a:hover,
.tooltip-related-links-menu a:focus-visible {
  background: rgba(124, 58, 237, 0.28);
  color: #fff;
  outline: none;
}

.link-primary-button {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  background: #fff;
  color: #667085;
  font-size: 17px;
  cursor: pointer;
}

.link-primary-button.is-primary {
  border-color: #f2c94c;
  background: #fffaeb;
  color: #b54708;
}

.link-primary-button:hover,
.link-primary-button:focus-visible {
  border-color: #f2c94c;
  background: #fffaeb;
  color: #b54708;
  outline: none;
}

.tooltip-section {
  padding: 12px 18px 13px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.24);
}

.tooltip-section:last-child {
  border-bottom: 0;
}

.tooltip-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
  color: #a78bfa;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.tooltip-section-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.tooltip-detail-grid {
  display: grid;
  grid-template-columns: minmax(118px, .9fr) minmax(0, 1.35fr);
  gap: 6px 12px;
  align-items: start;
}

.tooltip-detail-grid > span {
  color: #cbd5e1;
}

.tooltip-detail-grid > strong {
  min-width: 0;
  color: #f8fafc;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.tooltip-pill {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 9px;
  border: 1px solid color-mix(in srgb, var(--tooltip-pill-color) 75%, white 25%);
  border-radius: 6px;
  background: var(--tooltip-pill-color);
  color: #ffffff !important;
  font-size: 11px;
  line-height: 1.2;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}

.tooltip-subsection + .tooltip-subsection {
  margin-top: 11px;
}

.tooltip-subsection-label {
  display: block;
  margin-bottom: 5px;
  color: #cbd5e1;
  font-weight: 700;
}

.tooltip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tooltip-list li {
  padding: 3px 8px;
  border: 1px solid rgba(167, 139, 250, 0.30);
  border-radius: 999px;
  background: rgba(167, 139, 250, 0.10);
  color: #ede9fe;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.tooltip-description {
  color: #f1f5f9;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.tooltip-empty {
  color: #94a3b8;
  font-style: italic;
  font-weight: 500;
}

.tooltip-link-count {
  color: #f1f5f9;
  font-weight: 650;
}

.tooltip::-webkit-scrollbar {
  width: 10px;
}

.tooltip::-webkit-scrollbar-thumb {
  border: 3px solid #111827;
  border-radius: 999px;
  background: #64748b;
}

@media (max-width: 520px) {
  .tooltip {
    width: calc(100vw - 20px);
    max-width: none;
  }

  .tooltip-detail-grid {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .tooltip-detail-grid > strong {
    margin-bottom: 5px;
  }
}

/* Shared theme token application */
:root {
  --brand-primary: #17233c;
  --brand-secondary: #17233c;
  --brand-highlight: #0f172a;

  --header-text: #ffffff;
  --header-muted: #d9e2f2;
  --header-border-width: 1px;
  --brand-identity-text: var(--header-text);

  --brand-action-text: #ffffff;
  --brand-action-border: rgba(255,255,255,0.24);
  --brand-action-hover-border: rgba(255,255,255,0.42);
  --brand-action-hover-bg: rgba(255,255,255,0.08);

  --add-action-text: #83c857;
  --add-action-border: #73b548;
  --add-action-hover-text: #9bdb70;
  --add-action-hover-border: #8ed060;
  --add-action-hover-bg: rgba(115,181,72,0.10);

  --focus-ring: #ffffff;

  --today: #d92d20;
  --today-soft: rgba(217,45,32,0.08);

  --team-text: #1f2937;
  --team-timeline-start: rgba(36,87,197,0.05);
  --team-timeline-end: rgba(36,87,197,0.01);
  --subteam-timeline: rgba(238,243,249,0.45);

  --week-month-boundary: #b8b8b8;

  --local-prompt-bg: #eef6ff;
  --local-prompt-border: #d8dee8;
  --tooltip-bg: #111827;

  /* Loading overlay defaults. Deployment profiles may override these
     through the shared theme configuration. */
  --loading-overlay-background: rgba(244, 246, 249, 0.96);
  --loading-card-width: min(420px, 100%);
  --loading-card-background: #ffffff;
  --loading-card-border: #d8dee8;
  --loading-card-border-top-width: 1px;
  --loading-card-border-top-color: #d8dee8;
  --loading-card-text: #1f2937;
  --loading-card-muted: #667085;
  --loading-spinner-track: #dbe4f3;
  --loading-spinner-accent: #2457c5;
  --loading-logo-width: auto;
  --loading-logo-max-width: 210px;
  --loading-logo-max-height: 72px;

  --startup-logo-filter:
    brightness(0)
    saturate(100%)
    invert(17%)
    sepia(19%)
    saturate(1567%)
    hue-rotate(181deg)
    brightness(91%)
    contrast(89%);

  --font-family: Inter, "Segoe UI", Arial, sans-serif;
}

body {
  font-family: var(--font-family);
}

.app-header {
  background: var(--brand-primary);
  color: var(--header-text);
  border-bottom:
    var(--header-border-width)
    solid
    var(--brand-highlight);
}

.brand-bar {
  background: var(--brand-secondary);
}

.toolbar,
.app-header .toolbar {
  background: var(--brand-primary);
  color: var(--header-text);
}

.timeline-control,
.legend,
.file-status {
  color: var(--header-muted);
}

.studio-header-action,
.studio-add-action {
  color: var(--brand-action-text);
}

.studio-header-action {
  border-color: var(--brand-action-border);
}

.studio-header-action:hover {
  border-color: var(--brand-action-hover-border);
  background: var(--brand-action-hover-bg);
}

.studio-action-divider {
  background: var(--brand-action-border);
}

.studio-add-action {
  border-color: var(--add-action-border);
  color: var(--add-action-text);
}

.studio-add-action:hover {
  border-color: var(--add-action-hover-border);
  background: var(--add-action-hover-bg);
  color: var(--add-action-hover-text);
}

.studio-header-action:focus-visible,
.studio-add-action:focus-visible {
  outline-color: var(--focus-ring);
}

.studio-mode .name-row.team,
.view-only-mode .name-row.team {
  color: var(--team-text);
}

.studio-mode .timeline-row.team,
.view-only-mode .timeline-row.team {
  background: linear-gradient(
    to right,
    var(--team-timeline-start),
    var(--team-timeline-end)
  );
}

.studio-mode .timeline-row.subteam,
.view-only-mode .timeline-row.subteam {
  background: var(--subteam-timeline);
}

.today-line {
  background: var(--today);
  box-shadow: 0 0 0 1px var(--today-soft);
}

.today-line::before {
  background: var(--today);
}

.tooltip {
  background: var(--tooltip-bg);
}

.local-file-prompt {
  border-color: var(--local-prompt-border);
  background: var(--local-prompt-bg);
}

.local-file-prompt button {
  border-color: var(--accent);
  background: var(--accent);
}

.startup-logo {
  filter: var(--startup-logo-filter);
}

/* Week is shared structural functionality.
   Deployments decide whether the scale is enabled. */
.month-header.scale-week {
  font-size: 11px;
  line-height: 1.1;
}

.month-header.scale-week .year {
  font-size: 10px;
}

.month-header.week-month-start,
.grid-cell.week-month-start {
  border-left: 2px solid var(--week-month-boundary);
}

.month-header.week-year-start,
.grid-cell.week-year-start {
  border-left: 3px solid var(--brand-highlight);
}

/* Shared roadmap typography tokens */
:root {
  --roadmap-header-padding: 18px 18px 14px;
  --roadmap-header-title-size: 17px;
  --roadmap-header-title-line-height: 1.2;
  --roadmap-header-subtitle-size: 12px;
  --roadmap-header-subtitle-line-height: 1.25;
  --roadmap-item-font-size: 16px;
  --roadmap-item-line-height: 1.2;
}

.left-header {
  padding: var(--roadmap-header-padding);
}

.left-header strong {
  font-size: var(--roadmap-header-title-size);
  line-height: var(--roadmap-header-title-line-height);
}

.left-header span {
  font-size: var(--roadmap-header-subtitle-size);
  line-height: var(--roadmap-header-subtitle-line-height);
}

.label-text {
  font-size: var(--roadmap-item-font-size);
  line-height: var(--roadmap-item-line-height);
}

/* Shared optional deployment identity */
:root {
  --brand-identity-divider-width: 0px;
  --brand-bar-min-height: 72px;
  --brand-bar-padding: 8px 20px 6px;
  --brand-identity-gap: 0px;
  --hero-logo-height: 58px;
  --hero-logo-max-width: min(520px, 58vw);
  --hero-logo-flex: 0 0 auto;

  --brand-copy-margin-left: 20px;
  --brand-copy-padding-left: 20px;
  --brand-copy-gap: 0px;

  --brand-kicker-color: var(--brand-identity-text);
  --brand-kicker-margin-bottom: 3px;
  --brand-kicker-font-size: 12px;
  --brand-kicker-font-weight: 800;
  --brand-kicker-letter-spacing: 0.035em;

  --brand-title-font-size: 18px;
  --brand-title-font-weight: 750;
  --brand-title-letter-spacing: normal;
  --brand-title-line-height: 1.15;

  --team-accent-width: 0px;
  --subteam-accent-width: 0px;
}

.brand-identity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--brand-identity-gap);
}

.brand-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--brand-copy-gap);
  margin-left: var(--brand-copy-margin-left);
  padding-left: var(--brand-copy-padding-left);
  border-left:
    var(--brand-identity-divider-width)
    solid
    var(--brand-highlight);
  color: var(--brand-identity-text);
}

.brand-copy[hidden] {
  display: none;
}

.brand-kicker {
  margin-bottom: var(--brand-kicker-margin-bottom);
  color: var(--brand-kicker-color);
  font-size: var(--brand-kicker-font-size);
  font-weight: var(--brand-kicker-font-weight);
  line-height: 1.1;
  letter-spacing: var(--brand-kicker-letter-spacing);
  text-transform: uppercase;
}

.brand-title {
  overflow: hidden;
  font-size: var(--brand-title-font-size);
  font-weight: var(--brand-title-font-weight);
  letter-spacing: var(--brand-title-letter-spacing);
  line-height: var(--brand-title-line-height);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-mode .name-row.team,
.view-only-mode .name-row.team {
  border-left:
    var(--team-accent-width)
    solid
    var(--brand-highlight);
}

.studio-mode .name-row.team .toggle,
.view-only-mode .name-row.team .toggle {
  color: var(--team-text);
}

.studio-mode .name-row.subteam,
.view-only-mode .name-row.subteam {
  border-left:
    var(--subteam-accent-width)
    solid
    var(--brand-highlight);
}

.roadmap-footer {
  flex: 0 0 auto;
  min-height: 29px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 5px 20px;
  border-top: 1px solid var(--border);
  background: var(--panel);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
}

.roadmap-footer[hidden] {
  display: none;
}

.roadmap-footer span {
  font-weight: 400;
}

.roadmap-footer strong {
  font-weight: 700;
}

@media (max-width: 900px) {
  .brand-copy {
    margin-left: min(var(--brand-copy-margin-left), 14px);
    padding-left: min(var(--brand-copy-padding-left), 14px);
  }

  .brand-kicker {
    font-size: min(var(--brand-kicker-font-size), 10px);
  }

  .brand-title {
    font-size: min(var(--brand-title-font-size), 15px);
  }
}

@media (max-width: 620px) {
  .brand-copy {
    display: none;
  }
}

.dependency-sub-label {
  display: block;
  margin-top: 10px;
  margin-bottom: 6px;
  font-weight: 600;
}

#dependencyRoadmapItems {
  width: 100%;
  min-height: 120px;
  margin-bottom: 8px;
}

/* DP-005.1.1 Delivery health indicator */
.tooltip-delivery-health-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-left: 7px;
  border-radius: 50%;
  background: #98a2b3;
  vertical-align: middle;
}

.tooltip-delivery-health-dot[data-health="green"] {
  background: #2f9e67;
}

.tooltip-delivery-health-dot[data-health="yellow"] {
  background: #f59e0b;
}

.tooltip-delivery-health-dot[data-health="red"] {
  background: #d92d20;
}

.tooltip-delivery-health-dot[data-health="gray"] {
  background: #98a2b3;
}
/* DP-005.8 Delivery hover executive summary */
.tooltip-delivery-subvalue {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.35;
}
/* DP-005.9 Hover polish */
.tooltip-detail-grid > strong {
  overflow-wrap: anywhere;
}

.tooltip-delivery-health-dot {
  flex: 0 0 auto;
}

.tooltip-delivery-subvalue {
  display: inline-block;
  margin-top: 2px;
}
/* DP-005.9 Delivery save confirmation */
.delivery-save-toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1400;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 10px;
  background: #111827;
  color: #ffffff;
  box-shadow: 0 12px 30px rgba(15,23,42,.24);
  font-size: 12px;
  font-weight: 700;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition:
    opacity 140ms ease,
    transform 140ms ease;
}

.delivery-save-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.delivery-save-toast::before {
  content: "\2713";
  margin-right: 7px;
}

@media (prefers-reduced-motion: reduce) {
  .delivery-save-toast {
    transition: none;
    transform: none;
  }

  .delivery-save-toast.is-visible {
    transform: none;
  }
}


/* Studio family theme -----------------------------------------------------
   Opt-in presentation layer for Generic and Clayton deployments.
   Haslam intentionally remains on its established deployment theme.
   Geometry-sensitive timeline, hover intent, and milestone positioning are
   deliberately not changed here. */
.studio-family-theme {
  --studio-shell: #111d33;
  --studio-shell-raised: #172640;
  --studio-shell-control: rgba(255, 255, 255, 0.075);
  --studio-shell-control-hover: rgba(255, 255, 255, 0.12);
  --studio-shell-border: rgba(255, 255, 255, 0.11);
  --studio-shell-border-strong: rgba(255, 255, 255, 0.18);
  --studio-workspace: #f5f7fb;
  --studio-workspace-header: #eef2f7;
  --studio-hierarchy-team: #e7edf5;
  --studio-hierarchy-subteam: #f2f5f9;
  --studio-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
  --studio-radius-control: 8px;
}

.studio-family-theme .app-header {
  background: var(--studio-shell);
  border-bottom-color: rgba(15, 23, 42, 0.55);
  box-shadow: 0 5px 18px rgba(15, 23, 42, 0.18);
}

.studio-family-theme .brand-bar {
  min-height: 82px;
  padding-top: 12px;
  padding-bottom: 12px;
  background: linear-gradient(135deg, var(--studio-shell) 0%, #15243d 100%);
}

.studio-family-theme .brand-copy {
  border-left-color: rgba(255, 255, 255, 0.16);
}

.studio-family-theme .brand-title {
  letter-spacing: -0.015em;
}

/* The supplied Generic Roadmap Studio artwork contains dark lettering.
   Give that real asset a quiet light plate instead of altering/recreating it. */
.studio-family-theme.studio-family-logo-plate .brand-identity {
  padding: 8px 13px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 5px 16px rgba(5, 12, 25, 0.18);
}

.studio-family-theme.studio-family-logo-plate .hero-logo {
  height: 50px;
}

.studio-family-theme .app-header .toolbar,
.studio-family-theme .toolbar {
  gap: 10px;
  padding-top: 10px;
  padding-bottom: 11px;
  background: var(--studio-shell-raised);
  border-top: 1px solid var(--studio-shell-border);
}

.studio-family-theme .toolbar button,
.studio-family-theme .toolbar select,
.studio-family-theme .search-box {
  min-height: 34px;
  border-color: var(--studio-shell-border-strong);
  border-radius: var(--studio-radius-control);
  background: var(--studio-shell-control);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
  transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.studio-family-theme .toolbar button:hover,
.studio-family-theme .toolbar select:hover,
.studio-family-theme .search-box:hover {
  border-color: rgba(255, 255, 255, 0.28);
  background: var(--studio-shell-control-hover);
}

.studio-family-theme .toolbar button:focus-visible,
.studio-family-theme .toolbar select:focus-visible,
.studio-family-theme .search-box:focus-visible,
.studio-family-theme .year-range-button:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-color: transparent;
}

.studio-family-theme .search-box {
  min-width: 235px;
}

.studio-family-theme .search-box::placeholder {
  color: #aebbd0;
}

.studio-family-theme .timeline-control {
  gap: 6px;
  color: #c4cede;
  font-size: 12px;
  letter-spacing: 0.01em;
}

.studio-family-theme .legend {
  gap: 10px;
  margin-left: auto;
  color: #c4cede;
  font-size: 11px;
}

.studio-family-theme .legend-item {
  gap: 5px;
}

.studio-family-theme .legend-swatch {
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12);
}

.studio-family-theme .file-status {
  min-height: 28px;
  border-color: rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.055);
  color: #cbd5e1;
}

.studio-family-theme .file-status.connected {
  border-color: rgba(83, 196, 131, 0.35);
  background: rgba(45, 145, 91, 0.14);
}

.studio-family-theme .studio-header-action,
.studio-family-theme .studio-add-action {
  border-radius: var(--studio-radius-control);
}

.studio-family-theme .studio-header-action {
  border-color: var(--studio-shell-border-strong);
  background: rgba(255,255,255,0.035);
}

.studio-family-theme .studio-header-action:hover {
  background: rgba(255,255,255,0.085);
}

.studio-family-theme .studio-add-action {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

/* Keep the plotting surface light, but soften the handoff from application
   chrome to dense scheduling information. */
.studio-family-theme .timeline-header,
.studio-family-theme .left-header {
  background: var(--studio-workspace-header);
  border-color: #d5dce7;
}

.studio-family-theme .left-header strong {
  color: #182338;
  letter-spacing: -0.01em;
}

.studio-family-theme .left-header span {
  color: #68758a;
}

.studio-family-theme .month-header {
  color: #526075;
  background: var(--studio-workspace-header);
}

.studio-family-theme .month-header .year {
  color: #8792a4;
}

.studio-family-theme.studio-mode .name-row.team,
.studio-family-theme.view-only-mode .name-row.team {
  background: var(--studio-hierarchy-team);
  color: #26344a;
}

.studio-family-theme.studio-mode .name-row.subteam,
.studio-family-theme.view-only-mode .name-row.subteam {
  background: var(--studio-hierarchy-subteam);
  color: #344258;
}

.studio-family-theme.studio-mode .timeline-row.team,
.studio-family-theme.view-only-mode .timeline-row.team {
  background: linear-gradient(to right, rgba(55, 91, 140, 0.055), rgba(55, 91, 140, 0.012));
}

.studio-family-theme.studio-mode .timeline-row.subteam,
.studio-family-theme.view-only-mode .timeline-row.subteam {
  background: rgba(238, 243, 249, 0.55);
}

/* The primary project card was already close to the Studio family language.
   Only harmonize its surface/elevation. Do not change hover geometry. */
.studio-family-theme .tooltip {
  background: #101b2e;
  border-color: rgba(148, 163, 184, 0.22);
  box-shadow: 0 18px 44px rgba(6, 12, 24, 0.30);
}

/* Same visual family for milestone mini-cards, without touching their
   positioning, connector, delay, focus, or viewport logic. */
.studio-family-theme .milestone-tooltip {
  background: #101b2e;
  border-color: rgba(148, 163, 184, 0.22);
  box-shadow: 0 12px 30px rgba(6, 12, 24, 0.28);
}

.studio-family-theme .roadmap-footer {
  border-top-color: #d9e0ea;
  background: #f7f9fc;
  color: #7b8799;
}

@media (max-width: 1100px) {
  .studio-family-theme .search-box { min-width: 180px; }
  .studio-family-theme .legend { margin-left: 0; }
}

/* Studio family theme v2 ---------------------------------------------------
   Stronger presentation pass based on the approved Roadmap Studio mockup.
   This block intentionally changes presentation only. Timeline geometry,
   project positioning, sticky calculations, hover intent, and milestone
   interaction behavior remain untouched. */
.studio-family-theme {
  --studio-shell: #0c1628;
  --studio-shell-deep: #08111f;
  --studio-shell-raised: #16233a;
  --studio-shell-raised-2: #1b2a45;
  --studio-shell-control: rgba(255,255,255,0.07);
  --studio-shell-control-hover: rgba(255,255,255,0.12);
  --studio-shell-border: rgba(255,255,255,0.09);
  --studio-shell-border-strong: rgba(255,255,255,0.18);
  --studio-workspace: #f4f7fb;
  --studio-workspace-header: #e9eef6;
  --studio-hierarchy-team: #e1e8f2;
  --studio-hierarchy-subteam: #eef2f7;
}

.studio-family-theme .app-header {
  background: var(--studio-shell-deep);
  border-bottom: 1px solid #07101d;
  box-shadow: 0 7px 24px rgba(7, 15, 28, 0.28);
}

.studio-family-theme .brand-bar {
  min-height: 94px;
  padding: 15px 24px 14px;
  background:
    radial-gradient(circle at 78% -40%, rgba(55, 87, 135, 0.24), transparent 42%),
    linear-gradient(135deg, #0b1628 0%, #101e34 56%, #13243d 100%);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.studio-family-theme .brand-identity {
  min-height: 58px;
}

.studio-family-theme.studio-family-logo-plate .brand-identity {
  padding: 10px 16px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(245,248,252,0.97));
  box-shadow:
    0 9px 24px rgba(3, 10, 21, 0.26),
    inset 0 1px 0 rgba(255,255,255,0.9);
}

.studio-family-theme.studio-family-logo-plate .hero-logo {
  height: 54px;
  max-width: min(500px, 48vw);
}

.studio-family-theme .brand-copy {
  border-left-color: rgba(255,255,255,0.18);
}

.studio-family-theme .brand-title {
  color: #f8fafc;
  font-weight: 700;
  letter-spacing: -0.018em;
}

.studio-family-theme .brand-kicker {
  color: #9fb0c8;
}

.studio-family-theme .app-header .toolbar,
.studio-family-theme .toolbar {
  gap: 10px;
  min-height: 58px;
  padding: 11px 20px 12px;
  background: linear-gradient(180deg, #172640 0%, #142138 100%);
  border-top: 1px solid rgba(255,255,255,0.035);
  border-bottom: 1px solid rgba(5,12,24,0.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
}

.studio-family-theme .toolbar button,
.studio-family-theme .toolbar select,
.studio-family-theme .search-box {
  min-height: 36px;
  border: 1px solid rgba(183, 198, 221, 0.22);
  border-radius: 8px;
  background: rgba(255,255,255,0.055);
  color: #eef3f9;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
}

.studio-family-theme .toolbar button:hover,
.studio-family-theme .toolbar select:hover,
.studio-family-theme .search-box:hover {
  border-color: rgba(201, 214, 235, 0.38);
  background: rgba(255,255,255,0.105);
}

.studio-family-theme .toolbar select option {
  color: #182338;
  background: #ffffff;
}

.studio-family-theme .search-box {
  min-width: 245px;
  background: rgba(4, 11, 23, 0.28);
}

.studio-family-theme .search-box:focus {
  background: rgba(4, 11, 23, 0.42);
}

.studio-family-theme .timeline-control {
  color: #b7c4d7;
  font-size: 12px;
  font-weight: 650;
}

.studio-family-theme .legend {
  padding-left: 12px;
  border-left: 1px solid rgba(255,255,255,0.10);
  color: #b7c4d7;
}

.studio-family-theme .legend-item {
  opacity: 0.95;
}

.studio-family-theme .legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.13), 0 1px 2px rgba(0,0,0,0.20);
}

.studio-family-theme .file-status {
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  background: rgba(2, 9, 20, 0.22);
  color: #bac7d9;
}

.studio-family-theme .file-status.connected {
  border-color: rgba(88, 201, 138, 0.34);
  background: rgba(41, 145, 88, 0.16);
  color: #b9f1d0;
}

.studio-family-theme .studio-header-actions {
  gap: 8px;
}

.studio-family-theme .studio-header-action {
  border-color: rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.045);
  color: #e7edf6;
}

.studio-family-theme .studio-header-action:hover {
  border-color: rgba(255,255,255,0.30);
  background: rgba(255,255,255,0.09);
}

.studio-family-theme .studio-action-divider {
  opacity: 0.55;
}

.studio-family-theme .studio-add-action {
  border-color: rgba(131, 200, 87, 0.75);
  background: rgba(83, 153, 52, 0.13);
  color: #9bdc73;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

.studio-family-theme .studio-add-action:hover {
  border-color: #9cdb76;
  background: rgba(106, 177, 69, 0.20);
  color: #b7ee94;
}

.studio-family-theme .roadmap-shell {
  background: var(--studio-workspace);
}

.studio-family-theme .left-column {
  box-shadow: 7px 0 18px rgba(31, 48, 73, 0.10);
}

.studio-family-theme .timeline-header,
.studio-family-theme .left-header {
  background: linear-gradient(180deg, #f1f4f8 0%, #e8edf4 100%);
  border-color: #cbd4e0;
  box-shadow: inset 0 -1px 0 rgba(119, 137, 160, 0.08);
}

.studio-family-theme .left-header {
  padding-left: 20px;
}

.studio-family-theme .left-header strong {
  color: #152238;
  font-weight: 750;
  letter-spacing: -0.016em;
}

.studio-family-theme .left-header span {
  color: #6d7b8f;
}

.studio-family-theme .month-header {
  color: #40516a;
  background: transparent;
  border-right-color: #d3dae4;
  font-weight: 750;
}

.studio-family-theme .month-header .year {
  color: #7d8999;
}

.studio-family-theme.studio-mode .name-row.team,
.studio-family-theme.view-only-mode .name-row.team {
  background: linear-gradient(90deg, #dde6f1 0%, #e7edf5 100%);
  border-left: 3px solid rgba(45, 77, 120, 0.42);
  color: #1f3048;
  font-weight: 750;
}

.studio-family-theme.studio-mode .name-row.subteam,
.studio-family-theme.view-only-mode .name-row.subteam {
  background: linear-gradient(90deg, #edf2f7 0%, #f4f6f9 100%);
  border-left: 2px solid rgba(93, 113, 139, 0.22);
  color: #314157;
  font-weight: 675;
}

.studio-family-theme .name-row.project {
  background: #fbfcfe;
}

.studio-family-theme.studio-mode .timeline-row.team,
.studio-family-theme.view-only-mode .timeline-row.team {
  background: linear-gradient(to right, rgba(61, 91, 132, 0.075), rgba(61, 91, 132, 0.018));
}

.studio-family-theme.studio-mode .timeline-row.subteam,
.studio-family-theme.view-only-mode .timeline-row.subteam {
  background: rgba(239, 243, 248, 0.75);
}

.studio-family-theme .toggle {
  border-radius: 6px;
  color: #40526b;
}

.studio-family-theme .toggle:hover {
  background: rgba(47, 82, 128, 0.10);
}

.studio-family-theme .tooltip {
  background: #0d192b;
  border-color: rgba(148, 163, 184, 0.24);
  box-shadow: 0 22px 52px rgba(5, 12, 24, 0.36);
}

.studio-family-theme .milestone-tooltip {
  background: #0d192b;
  border-color: rgba(148, 163, 184, 0.24);
  box-shadow: 0 14px 34px rgba(5, 12, 24, 0.32);
}

.studio-family-theme .roadmap-footer {
  min-height: 31px;
  padding-right: 22px;
  border-top: 1px solid #d6dde7;
  background: linear-gradient(180deg, #f7f9fc, #f1f4f8);
  color: #7a8798;
}

.studio-family-theme .roadmap-footer strong {
  color: #48576b;
}

@media (max-width: 1180px) {
  .studio-family-theme .brand-bar {
    min-height: 84px;
    padding-left: 18px;
    padding-right: 18px;
  }
  .studio-family-theme .search-box { min-width: 175px; }
  .studio-family-theme .legend {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
  }
}


/* Studio family theme v3 ---------------------------------------------------
   Live pass based on the approved dark-left-column mockup.
   Presentation only: timeline geometry, sticky positioning, project bar
   placement, hover timing, and milestone behavior are unchanged. */
.studio-family-theme {
  --studio-nav-start: #2464a7;
  --studio-nav-mid: #102f59;
  --studio-nav-end: #08172d;
  --studio-left: #12233f;
  --studio-left-deep: #0d1b32;
  --studio-left-border: rgba(167, 188, 220, 0.20);
  --studio-left-text: #f4f7fb;
  --studio-left-muted: #aebbd0;
}

/* The logo sits directly on a quick blue-to-navy gradient. */
.studio-family-theme .brand-bar {
  background:
    linear-gradient(100deg,
      var(--studio-nav-start) 0%,
      var(--studio-nav-mid) 13%,
      var(--studio-nav-end) 30%,
      #08162b 100%);
}

/* V3 deliberately retires the Generic logo plate even if an older cached
   config still asks for it. */
.studio-family-theme.studio-family-logo-plate .brand-identity {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.studio-family-theme.studio-family-logo-plate .hero-logo {
  height: var(--brand-logo-height, 54px);
  max-width: var(--brand-logo-max-width, min(500px, 48vw));
}

/* Dark hierarchy/navigation rail, with the timeline remaining light. */
.studio-family-theme .left-column {
  background: var(--studio-left-deep);
  box-shadow: 7px 0 20px rgba(7, 16, 31, 0.20);
}

.studio-family-theme .left-header {
  background: linear-gradient(180deg, #172b49 0%, #12233f 100%);
  border-right-color: var(--studio-left-border);
  border-bottom-color: var(--studio-left-border);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.025);
}

.studio-family-theme .left-header strong {
  color: var(--studio-left-text);
}

.studio-family-theme .left-header span {
  color: var(--studio-left-muted);
}

.studio-family-theme .name-row,
.studio-family-theme .name-row.project,
.studio-family-theme.studio-mode .name-row.team,
.studio-family-theme.view-only-mode .name-row.team,
.studio-family-theme.studio-mode .name-row.subteam,
.studio-family-theme.view-only-mode .name-row.subteam {
  color: var(--studio-left-text);
  border-right-color: var(--studio-left-border);
  border-bottom-color: var(--studio-left-border);
}

.studio-family-theme.studio-mode .name-row.team,
.studio-family-theme.view-only-mode .name-row.team {
  background: linear-gradient(90deg, #152947 0%, #172d4d 100%);
  border-left: 3px solid rgba(75, 132, 204, 0.72);
  font-weight: 760;
}

.studio-family-theme.studio-mode .name-row.subteam,
.studio-family-theme.view-only-mode .name-row.subteam {
  background: linear-gradient(90deg, #122540 0%, #142945 100%);
  border-left: 2px solid rgba(99, 145, 202, 0.34);
  font-weight: 690;
}

.studio-family-theme .name-row.project {
  background: linear-gradient(90deg, #0f2039 0%, #12243f 100%);
  color: #eef3f9;
}

.studio-family-theme .name-row.project:hover {
  background: linear-gradient(90deg, #142a49 0%, #17304f 100%);
}

.studio-family-theme .toggle {
  color: #dce5f2;
}

.studio-family-theme .toggle:hover {
  background: rgba(113, 164, 228, 0.14);
  color: #ffffff;
}

.studio-family-theme .project-dot {
  width: 9px;
  height: 9px;
  background: var(--project-priority-color, #8fa0b8);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.055);
}

.studio-family-theme .label-text {
  color: inherit;
}

.studio-family-theme .row-action {
  color: #b7c6da;
}

.studio-family-theme .row-action:hover {
  color: #ffffff;
  background: rgba(113, 164, 228, 0.14);
}

/* Preserve the light planning canvas and its existing row alignment. */
.studio-family-theme .timeline-header {
  background: linear-gradient(180deg, #f6f8fb 0%, #edf1f6 100%);
}

.studio-family-theme .roadmap-footer {
  background: #0b1b33;
  border-top-color: rgba(255,255,255,0.07);
  color: #9fb0c7;
}

.studio-family-theme .roadmap-footer strong {
  color: #6fa8ff;
}

/* Studio family theme v4 ---------------------------------------------------
   Generic dark-header logo treatment. The Generic profile uses a dedicated
   transparent Roadmap Studio wordmark with white "Roadmap" lettering and a
   larger identity footprint. Clayton retains its existing white logo sizing.
   Presentation only; roadmap geometry and interaction behavior are unchanged. */
.studio-family-theme .brand-bar {
  min-height: var(--brand-bar-min-height);
  padding: var(--brand-bar-padding);
}

.studio-family-theme .hero-logo {
  height: var(--hero-logo-height);
  max-width: var(--hero-logo-max-width);
}


/* Studio family theme v5 ---------------------------------------------------
   Dark-theme tonal balance refinement.
   Keeps the approved dark shell, light planning canvas, dark hierarchy rail,
   priority-colored project dots, and all existing geometry/behavior intact. */
.studio-family-theme {
  --studio-left: #172b49;
  --studio-left-deep: #132541;
  --studio-left-project: #10233d;
  --studio-left-project-hover: #17304f;
  --studio-control-bg: rgba(255,255,255,0.065);
  --studio-control-bg-hover: rgba(255,255,255,0.11);
  --studio-control-border: rgba(177,197,225,0.27);
  --studio-control-shadow: 0 1px 0 rgba(255,255,255,0.025) inset,
                           0 1px 2px rgba(0,0,0,0.10);
}

/* Lift the hierarchy rail one tonal step above the deepest shell. */
.studio-family-theme .left-column {
  background: var(--studio-left-deep);
  box-shadow: 7px 0 20px rgba(7,16,31,0.18);
}

.studio-family-theme .left-header {
  background: linear-gradient(180deg, #1a3152 0%, var(--studio-left) 100%);
}

.studio-family-theme.studio-mode .name-row.team,
.studio-family-theme.view-only-mode .name-row.team {
  background: linear-gradient(90deg, #1a3152 0%, #1b3457 100%);
}

.studio-family-theme.studio-mode .name-row.subteam,
.studio-family-theme.view-only-mode .name-row.subteam {
  background: linear-gradient(90deg, #162c4b 0%, #183050 100%);
}

.studio-family-theme .name-row.project {
  background: linear-gradient(90deg, var(--studio-left-project) 0%, #142844 100%);
}

.studio-family-theme .name-row.project:hover {
  background: linear-gradient(90deg, #183150 0%, var(--studio-left-project-hover) 100%);
}

/* Give toolbar controls enough elevation to read as controls, not holes in navy. */
.studio-family-theme .toolbar button,
.studio-family-theme .toolbar select,
.studio-family-theme .search-box,
.studio-family-theme .year-range-button {
  background: var(--studio-control-bg);
  border-color: var(--studio-control-border);
  box-shadow: var(--studio-control-shadow);
}

.studio-family-theme .toolbar button:hover,
.studio-family-theme .toolbar select:hover,
.studio-family-theme .search-box:hover,
.studio-family-theme .year-range-button:hover {
  background: var(--studio-control-bg-hover);
  border-color: rgba(191,209,234,0.38);
}

.studio-family-theme .search-box:focus,
.studio-family-theme .toolbar select:focus-visible,
.studio-family-theme .toolbar button:focus-visible,
.studio-family-theme .year-range-button:focus-visible {
  border-color: rgba(112,168,255,0.70);
  box-shadow:
    0 0 0 2px rgba(77,135,220,0.20),
    var(--studio-control-shadow);
  outline: none;
}


/* Studio family theme v6 ---------------------------------------------------
   Adds shared Light/Dark appearance modes and a roadmap-level Last updated
   indicator. Theme mode is visual only; timeline geometry and interactions
   are unchanged. */

.studio-family-theme .brand-utilities {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  color: #dce8f8;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.studio-family-theme .roadmap-last-updated {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(177,197,225,0.22);
  border-radius: 8px;
  background: rgba(6,18,38,0.20);
  color: #e7eef8;
}

.studio-family-theme .theme-mode-switch {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid rgba(177,197,225,0.22);
  border-radius: 9px;
  background: rgba(6,18,38,0.18);
}

.studio-family-theme .theme-mode-button {
  min-width: 52px;
  border: 0;
  border-radius: 6px;
  padding: 6px 9px;
  background: transparent;
  color: #b9c8dc;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.studio-family-theme .theme-mode-button:hover {
  background: rgba(255,255,255,0.07);
  color: #ffffff;
}

.studio-family-theme .theme-mode-button[aria-pressed="true"] {
  background: rgba(73,126,205,0.30);
  color: #ffffff;
  box-shadow: 0 0 0 1px rgba(111,164,245,0.24) inset;
}

/* Light-shell sibling ------------------------------------------------------ */
.studio-family-theme.theme-light {
  --studio-shell: #f4f7fb;
  --studio-shell-deep: #eaf0f7;
  --studio-toolbar: #eef3f9;
  --studio-toolbar-deep: #e6edf6;
  --studio-left: #f8fafc;
  --studio-left-deep: #f2f6fb;
  --studio-left-project: #ffffff;
  --studio-left-project-hover: #f3f7fc;
  --studio-control-bg: rgba(255,255,255,0.88);
  --studio-control-bg-hover: #ffffff;
  --studio-control-border: #cfd9e7;
  --studio-control-shadow: 0 1px 2px rgba(20,39,67,0.06);
}

.studio-family-theme.theme-light .app-header {
  background: #f4f7fb;
  border-bottom-color: #d5dfeb;
  box-shadow: 0 3px 14px rgba(31,56,88,0.08);
}

.studio-family-theme.theme-light .brand-bar {
  background:
    radial-gradient(circle at 10% 10%, rgba(204,224,249,0.72) 0%, rgba(204,224,249,0) 31%),
    linear-gradient(100deg, #f7faff 0%, #edf3fa 50%, #f7faff 100%);
  border-bottom-color: #d5dfeb;
}

.studio-family-theme.theme-light .brand-title {
  color: #173254;
}

.studio-family-theme.theme-light .brand-kicker {
  color: #64748b;
}

.studio-family-theme.theme-light .brand-utilities {
  color: #52647a;
}

.studio-family-theme.theme-light .roadmap-last-updated {
  border-color: #d1dbe8;
  background: rgba(255,255,255,0.72);
  color: #31445e;
}

.studio-family-theme.theme-light .theme-mode-switch {
  border-color: #d1dbe8;
  background: rgba(255,255,255,0.60);
}

.studio-family-theme.theme-light .theme-mode-button {
  color: #607086;
}

.studio-family-theme.theme-light .theme-mode-button:hover {
  background: #f0f5fb;
  color: #1f3654;
}

.studio-family-theme.theme-light .theme-mode-button[aria-pressed="true"] {
  background: #dce9fb;
  color: #174f9c;
  box-shadow: 0 0 0 1px #bdd3f3 inset;
}

.studio-family-theme.theme-light .app-header .toolbar,
.studio-family-theme.theme-light .toolbar {
  background: linear-gradient(180deg, #f5f8fc 0%, #edf3f9 100%);
  color: #1c3554;
  border-bottom-color: #ced9e7;
}

.studio-family-theme.theme-light .toolbar button,
.studio-family-theme.theme-light .toolbar select,
.studio-family-theme.theme-light .search-box,
.studio-family-theme.theme-light .year-range-button {
  background: var(--studio-control-bg);
  border-color: var(--studio-control-border);
  color: #213a58;
  box-shadow: var(--studio-control-shadow);
}

.studio-family-theme.theme-light .toolbar button:hover,
.studio-family-theme.theme-light .toolbar select:hover,
.studio-family-theme.theme-light .search-box:hover,
.studio-family-theme.theme-light .year-range-button:hover {
  background: var(--studio-control-bg-hover);
  border-color: #b8c8dc;
}

.studio-family-theme.theme-light .search-box::placeholder {
  color: #79889c;
}

.studio-family-theme.theme-light .timeline-control,
.studio-family-theme.theme-light .legend {
  color: #425875;
}

.studio-family-theme.theme-light .legend-item {
  color: #425875;
}

.studio-family-theme.theme-light .file-status {
  background: #eef3fa;
  border-color: #cbd8e8;
  color: #405570;
}

.studio-family-theme.theme-light .file-status.connected {
  background: #e8f6ef;
  border-color: #b8dec9;
  color: #20734d;
}

.studio-family-theme.theme-light .studio-header-action {
  border-color: #cdd8e5;
  background: rgba(255,255,255,0.78);
  color: #314862;
}

.studio-family-theme.theme-light .studio-header-action:hover {
  background: #ffffff;
  border-color: #b9c8db;
}

.studio-family-theme.theme-light .studio-action-divider {
  background: #c9d5e4;
}

.studio-family-theme.theme-light .studio-add-action {
  border-color: #82a857;
  background: #f6fbf1;
  color: #47782a;
}

.studio-family-theme.theme-light .left-column {
  background: var(--studio-left-deep);
  box-shadow: 7px 0 20px rgba(54,77,105,0.10);
}

.studio-family-theme.theme-light .left-header {
  background: linear-gradient(180deg, #ffffff 0%, #f5f8fc 100%);
  border-color: #d5deea;
}

.studio-family-theme.theme-light .left-header strong {
  color: #162d4b;
}

.studio-family-theme.theme-light .left-header span {
  color: #6a7a90;
}

.studio-family-theme.theme-light.studio-mode .name-row.team,
.studio-family-theme.theme-light.view-only-mode .name-row.team {
  background: linear-gradient(90deg, #f3f7fc 0%, #edf3fa 100%);
  color: #1c3554;
  border-color: #d5deea;
}

.studio-family-theme.theme-light.studio-mode .name-row.subteam,
.studio-family-theme.theme-light.view-only-mode .name-row.subteam {
  background: linear-gradient(90deg, #f8fafc 0%, #f2f6fa 100%);
  color: #243e5e;
  border-color: #dbe3ed;
}

.studio-family-theme.theme-light .name-row.project {
  background: #ffffff;
  color: #31445c;
  border-color: #e0e6ee;
}

.studio-family-theme.theme-light .name-row.project:hover {
  background: #f6f9fc;
}

.studio-family-theme.theme-light .toggle {
  color: #38516e;
}

.studio-family-theme.theme-light .toggle:hover {
  background: rgba(55,102,164,0.09);
}

.studio-family-theme.theme-light .roadmap-footer {
  background: #f4f7fb;
  border-top-color: #d3ddea;
  color: #68788e;
}

.studio-family-theme.theme-light .roadmap-footer strong {
  color: #263f5f;
}

@media (max-width: 1180px) {
  .studio-family-theme .brand-utilities {
    gap: 8px;
  }

  .studio-family-theme .roadmap-last-updated {
    padding: 0 9px;
  }

  .studio-family-theme .theme-mode-button {
    min-width: 46px;
    padding-inline: 7px;
  }
}


/* Initiative completion workflow */
.completion-dialog .move-field input,
.completion-dialog .move-field textarea {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  background: #fff;
  color: #111827;
  font: inherit;
}

.completion-dialog .move-field textarea {
  min-height: 104px;
  resize: vertical;
}

.completion-optional {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

#completionAction {
  border-color: #86b89d;
  color: #166534;
}

#completionAction:hover {
  background: #f0fdf4;
}

#completionConfirm:disabled,
#completionAction:disabled {
  cursor: wait;
  opacity: .65;
}


/* Roadmap and Completed navigation */
.toolbar[hidden] {
  display: none;
}

/* Keep desktop roadmap controls visually aligned with section navigation. */
.studio-family-theme .toolbar {
  gap: 8px;
  min-height: 50px;
  padding: 7px 20px 8px;
}

.studio-family-theme .toolbar button,
.studio-family-theme .toolbar select,
.studio-family-theme .search-box,
.studio-family-theme .timeline-control {
  font-family: inherit;
  font-size: 14px;
}

.studio-family-theme .toolbar button,
.studio-family-theme .toolbar select,
.studio-family-theme .search-box {
  min-height: 34px;
  padding: 6px 10px;
}

.roadmap-toolbar-controls {
  display: contents;
}

.roadmap-toolbar-controls[hidden] {
  display: none;
}

.app-header .toolbar .roadmap-section-tabs {
  flex: 0 0 auto;
  align-self: flex-start;
  align-items: stretch;
  gap: 18px;
  height: 34px;
  min-height: 34px;
  padding: 0 16px 0 0;
  border: 0;
  background: transparent;
}

.app-header .toolbar .roadmap-section-tabs::after {
  content: "";
  align-self: center;
  width: 1px;
  height: 28px;
  margin-left: 2px;
  background: var(--brand-highlight, var(--accent));
  opacity: .65;
}

.app-header .toolbar.is-completed-mode .roadmap-section-tabs::after {
  display: none;
}

.app-header .toolbar .roadmap-section-tab {
  min-height: 34px;
  padding: 0 2px;
}

@media (max-width: 1080px) {
  .app-header .toolbar .roadmap-section-tabs {
    flex-basis: 100%;
    height: 42px;
    min-height: 42px;
    padding-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .app-header .toolbar .roadmap-section-tabs::after {
    display: none;
  }
}

.roadmap-section-tabs {
  display: flex;
  gap: 24px;
  min-height: 48px;
  padding: 0 20px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}

.roadmap-section-tab {
  position: relative;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.roadmap-section-tab::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: transparent;
}

.roadmap-section-tab:hover,
.roadmap-section-tab.is-active {
  color: var(--text);
}

.roadmap-section-tab.is-active::after {
  background: var(--accent);
}

.completed-view {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 28px;
  background: var(--bg);
}

.completed-view[hidden] {
  display: none;
}

.completed-view-inner {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.completed-view-heading {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.completed-view-heading h1 {
  margin: 0;
  color: var(--text);
  font-size: 26px;
}

.completed-view-heading p {
  margin: 6px 0 0;
  color: var(--muted);
}

.completed-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.completed-summary-card {
  display: grid;
  gap: 5px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
}

.completed-summary-card strong {
  color: var(--text);
  font-size: 25px;
}

.completed-summary-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.completed-filters {
  display: grid;
  grid-template-columns: 160px 300px minmax(220px, 1fr);
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
}

.completed-filters label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.completed-filters select,
.completed-filters input {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
}

.completed-period {
  margin-top: 24px;
}

.completed-period h2 {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.completed-list {
  display: grid;
  gap: 10px;
}

.completed-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) minmax(190px, auto);
  gap: 14px;
  align-items: center;
  width: 100%;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.completed-item:hover {
  border-color: var(--accent);
  box-shadow: 0 7px 20px rgba(15,23,42,.08);
}

.completed-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #dcfce7;
  color: #166534;
  font-weight: 800;
}

.completed-item-main,
.completed-item-detail {
  display: grid;
  gap: 4px;
}

.completed-item-main > span,
.completed-item-main small,
.completed-item-detail span {
  color: var(--muted);
  font-size: 12px;
}

.completed-item-main small {
  margin-top: 4px;
  line-height: 1.4;
}

.completed-item-detail {
  justify-items: end;
  text-align: right;
}

.completed-empty {
  margin-top: 24px;
  padding: 40px 20px;
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 820px) {
  .completed-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .completed-filters {
    grid-template-columns: 1fr;
  }

  .completed-item {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .completed-item-detail {
    grid-column: 2;
    justify-items: start;
    text-align: left;
  }
}

/* Preserve section tabs inside the toolbar and divide filters from the legend. */
.app-header .toolbar button.roadmap-section-tab,
.app-header .toolbar button.roadmap-section-tab:hover {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.app-header .toolbar .legend {
  flex: 1 0 calc(100% + 40px);
  justify-content: flex-end;
  margin-right: -20px;
  margin-left: -20px;
  padding: 8px 20px 0;
  border-top: 1px solid var(--brand-highlight, var(--accent));
}

/* Keep all project drawer actions on one balanced desktop row. */
#itemForm .drawer-footer {
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  overflow: hidden;
}

#itemForm .drawer-footer .right {
  display: contents;
}

#itemForm .drawer-footer .button {
  min-height: 36px;
  padding: 7px 8px;
  font-size: 12px;
  line-height: 1.15;
  white-space: nowrap;
  transition:
    background-color 120ms ease,
    border-color 120ms ease,
    color 120ms ease,
    box-shadow 120ms ease;
}

#itemForm #completionAction {
  padding-inline: 10px;
}

#itemForm .drawer-footer .button.primary {
  padding-inline: 12px;
}

#itemForm #drawerDelete:hover {
  border-color: #ef9a9a;
  background: #feecec;
  color: #b42318;
}

#itemForm #completionAction:hover {
  border-color: #6faa87;
  background: #e8f7ee;
  color: #166534;
}

#itemForm .drawer-footer .right .button:not(.primary):hover {
  border-color: #8fb0df;
  background: #eef5ff;
  color: #174f9c;
}

#itemForm .drawer-footer .button.primary:hover {
  border-color: #1f4dac;
  background: #1f4dac;
  color: #ffffff;
  box-shadow: 0 2px 5px rgba(31, 77, 172, .22);
}

@media (max-width: 560px) {
  #itemForm .drawer-footer {
    flex-wrap: wrap;
    overflow: visible;
  }

  #itemForm .drawer-footer .right {
    flex: 1 1 100%;
    margin-left: 0;
  }
}