/* The progress map (/progressmap/): dark navy panels, a fixed left column of teams, a timeline by quarter. */
:root { --pm-bg: #0e1a28; --pm-panel: #15263a; --pm-panel2: #1b3049; --pm-line: #233a55; --pm-ink: #dce7f5; --pm-quiet: #8aa0bb; --pm-accent: #5fa8e8; --pm-done: #6fcf97; --pm-active: #5fa8e8; --pm-planned: #3a6593; --pm-explore: #9b87e0; --pm-left: 340px; }
html, body { margin: 0; background: var(--pm-bg); color: var(--pm-ink); font: 14px/1.45 Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; }
#pm { display: flex; min-height: 100vh; }
.pm-side { flex: none; width: 72px; background: #12202f; border-right: 1px solid var(--pm-line); display: flex; flex-direction: column; gap: 8px; padding-top: 72px; position: sticky; top: 0; height: 100vh; box-sizing: border-box; }
.pm-side-btn { background: none; border: 0; color: var(--pm-quiet); font: 600 10px/1.2 inherit; letter-spacing: .06em; padding: 10px 4px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pm-side-btn:first-child { font-size: 22px; } .pm-side-btn span { font-size: 9.5px; font-weight: 600; } .pm-side-btn.on { color: var(--pm-ink); background: var(--pm-panel2); }
.pm-side-btn[data-caveats] { margin-top: auto; margin-bottom: 24px; font-size: 20px; }
.pm-main { flex: 1; min-width: 0; padding: 0 20px 48px; }
.pm-head { padding: 14px 0 10px; }
.pm-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.pm-back { color: var(--pm-quiet); text-decoration: none; } .pm-back:hover { color: var(--pm-ink); }
.pm-lang button { background: none; border: 1px solid var(--pm-line); color: var(--pm-quiet); padding: 3px 9px; cursor: pointer; font: inherit; } .pm-lang button.on { color: var(--pm-ink); border-color: var(--pm-accent); }
.pm-head h1 { font: 300 34px/1.15 Rajdhani, Inter, sans-serif; letter-spacing: .04em; margin: 14px 0 6px; }
.pm-head h1 small { font-size: 26px; } .pm-upd { font-size: 12px; color: var(--pm-quiet); letter-spacing: 0; margin-left: 8px; vertical-align: middle; }
.pm-meta { margin: 0; color: var(--pm-quiet); font-size: 13px; display: flex; flex-wrap: wrap; gap: 4px 18px; } .pm-meta b { color: var(--pm-ink); font-weight: 600; }
.pm-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; margin: 12px 0 0; }
.pm-tools button { background: var(--pm-panel); border: 1px solid var(--pm-line); color: var(--pm-quiet); font: 600 11.5px/1.2 inherit; letter-spacing: .05em; padding: 9px 12px; cursor: pointer; }
.pm-tools button.on, .pm-tools button:hover { color: var(--pm-ink); background: var(--pm-panel2); }
.pm-tabs { display: flex; width: var(--pm-left); } .pm-tabs button { flex: 1; font-size: 13.5px; letter-spacing: .02em; padding: 12px; border-radius: 10px 10px 0 0; border-bottom: 0; }
.pm-tabs button.on { background: var(--pm-panel2); color: var(--pm-ink); }
.pm-zoom, .pm-nav { display: flex; align-self: center; } .pm-zoom button.on { color: var(--pm-accent); }
.pm-filter-btn { align-self: center; margin-left: auto; }
.pm-filters { display: flex; flex-wrap: wrap; gap: 12px 28px; background: var(--pm-panel); border: 1px solid var(--pm-line); padding: 10px 14px; margin-top: 8px; }
.pm-filters fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; } .pm-filters legend { float: left; color: var(--pm-quiet); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; margin-right: 8px; }
.pm-filters label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; }
.pm-sw { width: 18px; height: 8px; border-radius: 4px; display: inline-block; }
.pm-grid { border: 1px solid var(--pm-line); background: var(--pm-panel); }
.pm-row { display: grid; grid-template-columns: var(--pm-left) 1fr; border-bottom: 1px solid var(--pm-line); min-height: 56px; }
.pm-l { display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px 14px; border-right: 1px solid var(--pm-line); background: var(--pm-panel2); min-width: 0; }
.pm-r { position: relative; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / var(--pm-cols, 6) - 1px), var(--pm-line) calc(100% / var(--pm-cols, 6) - 1px), var(--pm-line) calc(100% / var(--pm-cols, 6))); }
.pm-header { min-height: 0; position: sticky; top: 0; z-index: 3; } .pm-header .pm-l { gap: 6px; }
.pm-header .pm-l button { background: var(--pm-panel); border: 1px solid var(--pm-line); color: var(--pm-ink); width: 34px; height: 32px; cursor: pointer; font-size: 16px; flex: none; }
.pm-search { flex: 1; min-width: 0; background: #0f1d2d; border: 1px solid var(--pm-line); color: var(--pm-ink); padding: 8px 10px; border-radius: 4px; font: inherit; font-size: 13px; }
.pm-r-head { background: var(--pm-panel2); }
.pm-scale { display: flex; height: 100%; } .pm-q { display: flex; flex-direction: column; border-left: 1px solid var(--pm-line); } .pm-q:first-child { border-left: 0; }
.pm-q b { text-align: center; font-size: 12.5px; padding: 8px 0 4px; letter-spacing: .04em; }
.pm-months { display: flex; } .pm-months span { flex: 1; text-align: center; font-size: 11.5px; color: var(--pm-quiet); padding-bottom: 8px; }
.pm-group .pm-l { font: 600 13px/1.25 inherit; letter-spacing: .03em; cursor: pointer; } .pm-group { cursor: pointer; }
.pm-group .pm-r { background-color: #182d45; }
.pm-span, .pm-span-out { position: absolute; top: 10px; bottom: 10px; display: flex; align-items: center; padding: 0 8px; font-size: 11.5px; color: var(--pm-ink); background: #2a4a6d; border-radius: 2px; white-space: nowrap; overflow: visible; text-shadow: 0 1px 2px #0e1a28; }
.pm-span-out { left: 8px; background: none; color: var(--pm-quiet); }
.pm-caret { display: inline-block; color: var(--pm-quiet); font-size: 11px; transition: transform .15s; flex: none; } .pm-caret.open { transform: rotate(90deg); }
.pm-team { cursor: pointer; } .pm-team:hover .pm-l, .pm-team.on .pm-l { background: #213a57; } .pm-team:focus-visible { outline: 2px solid var(--pm-accent); outline-offset: -2px; }
.pm-team .pm-l { padding-left: 22px; }
.pm-name { flex: 1; min-width: 0; font-size: 13.5px; }
.pm-badges { display: inline-flex; gap: 4px; flex: none; }
.pm-badge { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font: 700 11px/1 inherit; border: 1.5px solid currentColor; }
.pm-core { color: #e8c46a; } .pm-xp { color: #7fd8ff; }
.pm-nd { flex: none; font-size: 11.5px; color: var(--pm-quiet); width: 86px; text-align: right; }
.pm-bar { position: absolute; top: 50%; height: 12px; margin-top: -6px; border-radius: 6px; background: var(--pm-planned); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.pm-bar.done, .pm-sw.done { background: var(--pm-done); } .pm-bar.active, .pm-sw.active { background: var(--pm-active); } .pm-sw.planned { background: var(--pm-planned); }
.pm-bar.explore, .pm-sw.explore { background: repeating-linear-gradient(135deg, var(--pm-explore) 0 6px, rgba(155,135,224,.45) 6px 12px); }
.pm-today { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1.5px dashed #ffcf6e; z-index: 1; pointer-events: none; }
.pm-detail { padding: 10px 14px 14px 36px; background: #11223a; border-bottom: 1px solid var(--pm-line); display: grid; gap: 10px; }
.pm-disc { margin: 0; color: var(--pm-quiet); font-size: 12.5px; } .pm-disc b { color: var(--pm-ink); }
.pm-card { background: var(--pm-panel2); border: 1px solid var(--pm-line); border-left: 3px solid var(--pm-planned); padding: 10px 14px; max-width: 760px; }
.pm-card.done { border-left-color: var(--pm-done); } .pm-card.active { border-left-color: var(--pm-active); } .pm-card.explore { border-left-color: var(--pm-explore); }
.pm-card header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pm-card header small { color: var(--pm-quiet); }
.pm-card h3 { margin: 6px 0 4px; font-size: 15px; text-transform: none; letter-spacing: 0; font-weight: 600; } .pm-card p { margin: 0 0 4px; font-size: 13.5px; } .pm-dates { color: var(--pm-quiet); font-size: 12px !important; }
.pm-chip { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 2px 8px; border-radius: 9px; background: rgba(58,101,147,.35); color: #b9d3f0; }
.pm-chip.done { background: rgba(111,207,151,.18); color: var(--pm-done); } .pm-chip.active { background: rgba(95,168,232,.2); color: var(--pm-active); } .pm-chip.explore { background: rgba(155,135,224,.2); color: var(--pm-explore); }
.pm-deliv { display: grid; gap: 10px; padding: 12px 0; } .pm-deliv .pm-search { max-width: 420px; }
.pm-none { padding: 24px; color: var(--pm-quiet); }
.pm-modal { position: fixed; inset: 0; background: rgba(4,8,16,.72); display: grid; place-items: center; z-index: 10; padding: 16px; }
.pm-modal-box { background: var(--pm-panel); border: 1px solid var(--pm-line); max-width: 560px; padding: 20px 24px; } .pm-modal-box h2 { margin: 0 0 10px; font: 600 16px/1.2 inherit; letter-spacing: .08em; }
.pm-modal-box button { margin-top: 8px; background: var(--pm-panel2); border: 1px solid var(--pm-accent); color: var(--pm-ink); padding: 8px 16px; cursor: pointer; font: inherit; }
@media (max-width: 899px) {
  :root { --pm-left: 168px; }
  .pm-side { width: 52px; padding-top: 60px; } .pm-side-btn span { display: none; }
  .pm-main { padding: 0 10px 40px; }
  .pm-head h1 { font-size: 24px; } .pm-head h1 small { font-size: 18px; } .pm-upd { display: block; margin: 4px 0 0; }
  .pm-tabs { width: 100%; } .pm-filter-btn { margin-left: 0; }
  .pm-row { min-height: 50px; } .pm-l { padding: 6px 8px; gap: 5px; } .pm-team .pm-l { padding-left: 10px; }
  .pm-name { font-size: 12px; line-height: 1.25; } .pm-nd { display: none; } .pm-badge { width: 18px; height: 18px; font-size: 9.5px; }
  .pm-group .pm-l { font-size: 11.5px; } .pm-header .pm-l button { display: none; }
  .pm-months span { font-size: 10px; } .pm-q b { font-size: 11px; }
  .pm-detail { padding-left: 12px; }
}
/* Without JavaScript (crawlers, AI fetchers, reading modes): the same map as plain HTML. */
.pm-static{max-width:860px;margin:0 auto;padding:24px 20px 48px;color:var(--pm-ink)} .pm-static h1{font:300 30px/1.2 Rajdhani,Inter,sans-serif} .pm-static h2{margin:28px 0 8px;font-size:18px} .pm-static h3{margin:16px 0 4px;font-size:15px} .pm-static li{margin:4px 0} .pm-static small{color:var(--pm-quiet)} .pm-static a,#pm>p a{color:var(--pm-accent)}