/* ==========================================================================
   PLATFORM UPDATES — update list + roadmap
   Two columns, same proportions as My Chats: a fixed-width list on the left,
   the detail pane taking the rest. Dark theme throughout; the page inherits
   the app's neutral scale rather than defining its own greys.
   ========================================================================== */

.pu-layout {
  display: grid;
  grid-template-columns: 420px 1fr;
  height: calc(100vh - 72px);
  min-height: 0;
}

/* ── Left: the update list ───────────────────────────────────────────── */

.pu-col-list {
  border-right: 1px solid var(--neutral-800);
  overflow-y: auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.pu-list-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 22px 20px 14px;
  border-bottom: 1px solid var(--neutral-800);
  position: sticky;
  top: 0;
  background: var(--neutral-900, #0a0a0a);
  z-index: 2;
}

.pu-list-title {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  letter-spacing: -0.01em;
}

.pu-count {
  background: var(--purple-400, #c084fc);
  color: #1a0b2e;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
}

.pu-list {
  display: flex;
  flex-direction: column;
}

.pu-item {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  border: none;
  border-bottom: 1px solid var(--neutral-800);
  border-left: 3px solid transparent;
  background: none;
  cursor: pointer;
  text-align: left;
  color: inherit;
  transition: background 0.15s ease;
  width: 100%;
  font: inherit;
}
.pu-item:hover { background: var(--neutral-800); }
.pu-item.active {
  background: rgba(168, 85, 247, 0.08);
  border-left-color: var(--purple-400, #c084fc);
}
.pu-item:focus-visible {
  outline: 2px solid var(--purple-400, #c084fc);
  outline-offset: -2px;
}

.pu-item-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--neutral-800);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.pu-item-icon img {
  width: 18px;
  height: 18px;
  filter: invert(1);
  opacity: 0.7;
}

.pu-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pu-item-top {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}

.pu-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 5px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.pu-date {
  font-size: 11px;
  color: var(--neutral-500, #737373);
  white-space: nowrap;
}

.pu-item-title {
  font-size: 14px;
  font-weight: 650;
  color: #fff;
  line-height: 1.35;
}
.pu-item-preview {
  font-size: 12px;
  color: var(--neutral-400, #a3a3a3);
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.pu-empty {
  padding: 32px 20px;
  color: var(--neutral-500, #737373);
  font-size: 13px;
}

/* Loading skeletons — same rhythm as a real row so nothing jumps. */
.pu-skeletons { display: flex; flex-direction: column; }
.pu-skeleton {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--neutral-800);
  animation: puPulse 1.4s ease-in-out infinite;
}
.pu-sk-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--neutral-800); flex-shrink: 0;
}
.pu-sk-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.pu-sk-line { height: 10px; border-radius: 5px; background: var(--neutral-800); }
.pu-sk-line.short { width: 45%; }
@keyframes puPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* ── Right: detail pane ──────────────────────────────────────────────── */

.pu-col-detail {
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── Reader ──────────────────────────────────────────────────────────── */

.pu-reader {
  height: 100%;
  display: flex;
  flex-direction: column;
  animation: puFadeIn 0.22s ease-out;
}
@keyframes puFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.pu-reader-header {
  padding: 16px 28px;
  border-bottom: 1px solid var(--neutral-800);
  flex-shrink: 0;
}
.pu-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--neutral-400, #a3a3a3);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 4px 0;
  transition: color 0.2s ease;
}
.pu-back:hover { color: #fff; }
.pu-back svg { flex-shrink: 0; }

.pu-reader-content {
  padding: 32px 28px;
  overflow-y: auto;
  flex: 1;
  max-width: 720px;
}
.pu-reader-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.pu-reader-title {
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 22px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.pu-reader-body {
  font-size: 15px;
  color: var(--neutral-300, #d4d4d4);
  line-height: 1.75;
}
.pu-reader-body p { margin: 0 0 18px; }
.pu-reader-body strong { color: #fff; font-weight: 650; }
.pu-reader-list { margin: 0 0 18px; padding: 0 0 0 20px; }
.pu-reader-list li { margin-bottom: 8px; }
.pu-reader-list li::marker { color: var(--purple-400, #c084fc); }

/* ── Roadmap ─────────────────────────────────────────────────────────── */

.pu-roadmap {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 40px 0 0;
  animation: puFadeIn 0.22s ease-out;
}

.pu-rm-head {
  padding: 0 40px;
  flex-shrink: 0;
  max-width: 720px;
}

.pu-rm-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--neutral-400, #a3a3a3);
  padding: 6px 13px;
  border: 1px solid var(--neutral-800);
  border-radius: 999px;
  margin-bottom: 20px;
}
.pu-rm-eyebrow img { width: 14px; height: 14px; filter: invert(1); opacity: 0.65; }

.pu-rm-title {
  font-size: 34px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 14px;
  line-height: 1.18;
  letter-spacing: -0.025em;
}
.pu-rm-title em {
  font-style: italic;
  font-weight: 500;
  /* The one flourish on the page — it echoes the business-plan cover. */
  background: linear-gradient(90deg, #E9D5FF 0%, #A855F7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pu-rm-sub {
  font-size: 14px;
  color: var(--neutral-400, #a3a3a3);
  line-height: 1.65;
  margin: 0;
  max-width: 52ch;
}

/* The rail. Horizontal scroll with snap so phases land squarely.
   `overflow-y: hidden` matters: without it the tall phase cards would
   also produce a vertical scrollbar inside the rail. */
.pu-rail {
  margin-top: 44px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  padding: 0 40px 28px;
  /* Must match padding-left. Without it, `scroll-snap-align: start` aligns the
     first phase to the scrollport edge rather than the content edge, which
     scrolls the rail by exactly the padding amount on load and leaves the
     first card flush against the left edge with its dot half cut off. */
  scroll-padding-left: 40px;
  flex: 1;
  min-height: 0;
}
.pu-rail:focus-visible {
  outline: 2px solid var(--purple-400, #c084fc);
  outline-offset: -4px;
}

.pu-track {
  display: flex;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  min-width: min-content;
}

/* The connecting line, drawn behind the dots at their exact centre. */
.pu-track::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 5px;
  height: 1px;
  background: linear-gradient(90deg,
    var(--purple-400, #c084fc) 0%,
    var(--neutral-700, #404040) 22%,
    var(--neutral-800, #262626) 100%);
}

.pu-phase {
  position: relative;
  flex: 0 0 268px;
  padding: 26px 28px 0 0;
  scroll-snap-align: start;
}

.pu-dot {
  display: block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  background: var(--neutral-900, #0a0a0a);
  border: 2px solid var(--neutral-600, #525252);
  box-sizing: border-box;
}
.pu-phase.done .pu-dot {
  background: var(--purple-400, #c084fc);
  border-color: var(--purple-400, #c084fc);
  box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.18);
}
.pu-phase.next .pu-dot {
  border-color: var(--purple-400, #c084fc);
}
.pu-phase.soon .pu-dot {
  border-style: dashed;
}

.pu-when {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--neutral-500, #737373);
  margin-bottom: 10px;
}
.pu-phase.done .pu-when { color: var(--purple-400, #c084fc); }

.pu-phase-title {
  font-size: 17px;
  font-weight: 650;
  color: #fff;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.pu-phase-desc {
  font-size: 13px;
  color: var(--neutral-400, #a3a3a3);
  line-height: 1.6;
  margin: 0 0 14px;
}

.pu-phase-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.pu-phase-items li {
  font-size: 12.5px;
  color: var(--neutral-300, #d4d4d4);
  line-height: 1.45;
  padding-left: 16px;
  position: relative;
}
.pu-phase-items li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--neutral-600, #525252);
}
.pu-phase.done .pu-phase-items li::before { background: var(--purple-400, #c084fc); }

/* Per-item status chip. Lets a phase show partial delivery — "Ready" on one
   line while the phase as a whole is still upcoming — without overstating
   progress by marking the whole phase done. */
.pu-phase-items li.has-status {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}
.pu-status {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  /* Neutral default, so an unrecognised status still renders sensibly. */
  color: var(--neutral-400, #a3a3a3);
  background: rgba(255, 255, 255, 0.06);
}
.pu-status[data-status="Ready"] {
  color: #4ADE80;
  background: rgba(74, 222, 128, 0.13);
}
.pu-status[data-status="Pre-production"] {
  color: #FBBF24;
  background: rgba(251, 191, 36, 0.13);
}

/* An item that has shipped gets the filled marker even inside an
   unfinished phase — the chip and the dot should agree. */
.pu-phase-items li.has-status:has(.pu-status[data-status="Ready"])::before {
  background: #4ADE80;
}

.pu-phase.soon { opacity: 0.62; }

.pu-rail-hint {
  padding: 0 40px 20px;
  margin: 0;
  font-size: 11.5px;
  color: var(--neutral-600, #525252);
  flex-shrink: 0;
}

/* Slimline scrollbar for the rail so it reads as an affordance, not chrome. */
.pu-rail::-webkit-scrollbar { height: 8px; }
.pu-rail::-webkit-scrollbar-track { background: transparent; }
.pu-rail::-webkit-scrollbar-thumb {
  background: var(--neutral-700, #404040);
  border-radius: 4px;
}
.pu-rail::-webkit-scrollbar-thumb:hover { background: var(--neutral-600, #525252); }

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .pu-layout { grid-template-columns: 340px 1fr; }
  .pu-rm-head, .pu-rail, .pu-rail-hint { padding-left: 28px; padding-right: 28px; }
  .pu-rail { scroll-padding-left: 28px; }   /* keep in step with padding-left */
  .pu-rm-title { font-size: 28px; }
}

/* Below this the two panes stop fitting side by side, so the list becomes
   the page and choosing an update swaps the whole view — the same pattern
   the chat list uses on mobile. */
@media (max-width: 860px) {
  .pu-layout {
    grid-template-columns: 1fr;
    height: auto;
    min-height: calc(100vh - 72px);
  }
  .pu-col-list { border-right: none; }
  .pu-col-detail { display: none; }

  .pu-layout.detail-open .pu-col-list { display: none; }
  .pu-layout.detail-open .pu-col-detail { display: flex; }

  .pu-reader-content { padding: 24px 20px; }
  .pu-reader-title { font-size: 24px; }
  .pu-roadmap { padding-top: 28px; }
  .pu-rm-title { font-size: 25px; }
  .pu-rm-head, .pu-rail, .pu-rail-hint { padding-left: 20px; padding-right: 20px; }
  .pu-rail { scroll-padding-left: 20px; }
  .pu-phase { flex-basis: 232px; }
}

/* On mobile the roadmap is unreachable while the list owns the screen, so
   give it its own entry point above the list. Hidden on desktop, where the
   roadmap is simply always there. */
.pu-roadmap-link { display: none; }
/* Back bar above the roadmap — mobile only, same reasoning as the link. */
.pu-roadmap-back { display: none; }
@media (max-width: 860px) {
  .pu-roadmap-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.12), rgba(168, 85, 247, 0.03));
    border: none;
    border-bottom: 1px solid var(--neutral-800);
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 650;
    cursor: pointer;
    text-align: left;
  }
  .pu-roadmap-link span { color: var(--neutral-400, #a3a3a3); font-weight: 400; font-size: 12px; }

  .pu-roadmap-back {
    display: block;
    padding: 16px 20px;
    border-bottom: 1px solid var(--neutral-800);
    margin-bottom: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pu-reader, .pu-roadmap { animation: none; }
  .pu-skeleton { animation: none; }
}