/* Plannix Roadmap UI. Tokens from px2 (packages/tailwind-config/src/tailwind/px-colors.css) plus three warm tones.
   Everything is scoped to <plannix-roadmap>; see TEAM/out/roadmap-ui.md for the API. */

plannix-roadmap {
  /* px2 */
  --prm-white: #ffffff;
  --prm-gray-50: oklch(98.5% 0 0);
  --prm-gray-100: oklch(96.7% 0.001 286.375);
  --prm-gray-200: oklch(92% 0.004 286.32);
  --prm-gray-300: oklch(87.1% 0.006 286.286);
  --prm-gray-400: oklch(70.5% 0.015 286.067);
  --prm-gray-500: oklch(55.2% 0.016 285.938);
  --prm-gray-600: oklch(44.2% 0.017 285.786);
  --prm-gray-900: oklch(21% 0.006 285.885);
  --prm-brand-50: rgb(239 246 255);
  --prm-brand-500: rgb(3 115 226);
  --prm-brand-700: rgb(2 74 146);
  --prm-warning-50: rgb(255 251 235);
  --prm-warning-600: rgb(220 104 3);
  --prm-warning-700: rgb(146 64 14);
  --prm-success-50: rgb(246 254 249);
  --prm-success-600: rgb(7 148 85);
  --prm-success-700: rgb(22 101 52);
  /* warm tones (proposal): carta, sabbia, filetto caldo */
  --prm-paper: #faf8f5;
  --prm-sand: #f2ede5;
  --prm-sand-line: #e7e0d4;

  /* roles, light */
  --prm-canvas: var(--prm-white);
  --prm-side: var(--prm-paper);
  --prm-hover: color-mix(in oklab, var(--prm-sand) 70%, var(--prm-white));
  --prm-line: var(--prm-gray-200);
  --prm-line-warm: var(--prm-sand-line);
  --prm-fg: var(--prm-gray-900);
  --prm-fg-2: var(--prm-gray-600);
  --prm-fg-3: var(--prm-gray-500);
  --prm-fg-4: var(--prm-gray-400);
  --prm-accent: var(--prm-brand-500);
  --prm-accent-text: var(--prm-brand-700);
  --prm-glyph-off: var(--prm-gray-300);
  --prm-track: var(--prm-sand);
  --prm-tab-active: var(--prm-white);
  --prm-tab-shadow: 0 1px 2px rgb(24 24 27 / 0.08), 0 0 0 1px rgb(24 24 27 / 0.04);
  --prm-window-shadow: 0 1px 2px rgb(24 24 27 / 0.04), 0 8px 24px -12px rgb(56 44 24 / 0.14);
  --prm-ring-track: var(--prm-sand);
  --prm-warn-bg: var(--prm-warning-50);
  --prm-warn-fg: var(--prm-warning-700);
  --prm-warn-stroke: var(--prm-warning-600);
  --prm-ok-bg: var(--prm-success-50);
  --prm-ok-fg: var(--prm-success-700);
  --prm-ok-stroke: var(--prm-success-600);
  --prm-avatar-bg: var(--prm-sand);
  --prm-avatar-fg: #6b5f4c;
  --prm-photo-line: rgb(24 24 27 / 0.08);
  --prm-nav-hover: color-mix(in oklab, var(--prm-sand) 45%, var(--prm-paper));
  --prm-summary-bg: var(--prm-brand-50);
  --prm-summary-line: rgb(3 115 226 / 0.1);
  --prm-tip-bg: var(--prm-gray-900);
  --prm-tip-fg: #f4f4f5;
  --prm-tip-fg-2: #a1a1aa;
  --prm-tip-shadow: 0 0 0 1px rgb(24 24 27 / 0.06), 0 6px 16px -4px rgb(24 24 27 / 0.24);

  /* density */
  --prm-fs: 14px;
  --prm-fs-sm: 13px;
  --prm-fs-xs: 12px;
  --prm-row-py: 6px;
  --prm-pad: 20px;
  --prm-tabs-justify: flex-start;
  --prm-ease: cubic-bezier(0.23, 1, 0.32, 1);

  display: block;
  container: prm / inline-size;
  /* Timeless Grotesk is the site sans (fonts/ in the page); only 400, 500 and 600 exist. */
  font-family: "Timeless Grotesk", "Timeless Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--prm-fg);
  -webkit-font-smoothing: antialiased;
  text-align: left;
}

plannix-roadmap[theme="dark"] {
  --prm-canvas: #0f1930;
  --prm-side: #0c1428;
  --prm-hover: rgb(184 196 217 / 0.06);
  --prm-line: rgb(184 196 217 / 0.12);
  --prm-line-warm: rgb(214 204 186 / 0.12);
  --prm-fg: #eef1f6;
  --prm-fg-2: #b8c4d9;
  --prm-fg-3: #8794ad;
  --prm-fg-4: #5f6c86;
  --prm-accent: #4a95f2;
  --prm-accent-text: #8fbdf7;
  --prm-glyph-off: rgb(184 196 217 / 0.22);
  --prm-track: #0c1428;
  --prm-tab-active: rgb(184 196 217 / 0.14);
  --prm-tab-shadow: inset 0 0 0 1px rgb(184 196 217 / 0.1);
  --prm-window-shadow: 0 0 0 1px rgb(0 0 0 / 0.2), 0 24px 64px -24px rgb(0 0 0 / 0.7);
  --prm-ring-track: rgb(184 196 217 / 0.12);
  --prm-warn-bg: rgb(247 144 9 / 0.12);
  --prm-warn-fg: #f6b25e;
  --prm-warn-stroke: #f39b33;
  --prm-ok-bg: rgb(23 178 106 / 0.13);
  --prm-ok-fg: #6fd8a0;
  --prm-ok-stroke: #3cc483;
  --prm-avatar-bg: rgb(214 204 186 / 0.12);
  --prm-avatar-fg: #d6ccba;
  --prm-photo-line: rgb(255 255 255 / 0.1);
  --prm-nav-hover: rgb(184 196 217 / 0.035);
  --prm-summary-bg: rgb(74 149 242 / 0.1);
  --prm-summary-line: rgb(74 149 242 / 0.16);
  --prm-tip-bg: #1d2944;
  --prm-tip-fg: #eef1f6;
  --prm-tip-fg-2: #8794ad;
  --prm-tip-shadow: inset 0 0 0 1px rgb(184 196 217 / 0.12), 0 8px 24px -6px rgb(0 0 0 / 0.6);
}

@media (prefers-color-scheme: dark) {
  plannix-roadmap[theme="auto"] {
    --prm-canvas: #0f1930;
    --prm-side: #0c1428;
    --prm-hover: rgb(184 196 217 / 0.06);
    --prm-line: rgb(184 196 217 / 0.12);
    --prm-line-warm: rgb(214 204 186 / 0.12);
    --prm-fg: #eef1f6;
    --prm-fg-2: #b8c4d9;
    --prm-fg-3: #8794ad;
    --prm-fg-4: #5f6c86;
    --prm-accent: #4a95f2;
    --prm-accent-text: #8fbdf7;
    --prm-glyph-off: rgb(184 196 217 / 0.22);
    --prm-track: #0c1428;
    --prm-tab-active: rgb(184 196 217 / 0.14);
    --prm-tab-shadow: inset 0 0 0 1px rgb(184 196 217 / 0.1);
    --prm-window-shadow: 0 0 0 1px rgb(0 0 0 / 0.2), 0 24px 64px -24px rgb(0 0 0 / 0.7);
    --prm-ring-track: rgb(184 196 217 / 0.12);
    --prm-warn-bg: rgb(247 144 9 / 0.12);
    --prm-warn-fg: #f6b25e;
    --prm-warn-stroke: #f39b33;
    --prm-ok-bg: rgb(23 178 106 / 0.13);
    --prm-ok-fg: #6fd8a0;
    --prm-ok-stroke: #3cc483;
    --prm-avatar-bg: rgb(214 204 186 / 0.12);
    --prm-avatar-fg: #d6ccba;
    --prm-photo-line: rgb(255 255 255 / 0.1);
    --prm-nav-hover: rgb(184 196 217 / 0.035);
  --prm-summary-bg: rgb(74 149 242 / 0.1);
  --prm-summary-line: rgb(74 149 242 / 0.16);
    --prm-tip-bg: #1d2944;
    --prm-tip-fg: #eef1f6;
    --prm-tip-fg-2: #8794ad;
    --prm-tip-shadow: inset 0 0 0 1px rgb(184 196 217 / 0.12), 0 8px 24px -6px rgb(0 0 0 / 0.6);
  }
}

plannix-roadmap[density="compact"] {
  --prm-fs: 13px;
  --prm-fs-sm: 12px;
  --prm-fs-xs: 12px;
  --prm-row-py: 4px;
  --prm-pad: 16px;
}

/* Phones: no text under 13 px (DECISIONI, 13-14 on mobile) */
@media (max-width: 639px) {
  plannix-roadmap,
  plannix-roadmap[density] {
    --prm-fs-sm: 13px;
    --prm-fs-xs: 13px;
  }
}

plannix-roadmap *,
plannix-roadmap *::before,
plannix-roadmap *::after {
  box-sizing: border-box;
}

plannix-roadmap p,
plannix-roadmap dl,
plannix-roadmap dd,
plannix-roadmap ol,
plannix-roadmap ul {
  margin: 0;
  padding: 0;
}

plannix-roadmap ol,
plannix-roadmap ul {
  list-style: none;
}

.prm {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.prm-ico {
  width: 15px;
  height: 15px;
  flex: none;
}

.prm-ghost {
  pointer-events: none;
}

/* Case selector */

.prm-cases {
  position: relative;
  align-self: var(--prm-tabs-justify);
  box-shadow: inset 0 0 0 1px var(--prm-line-warm);
  display: flex;
  gap: 2px;
  max-width: 100%;
  padding: 3px;
  border-radius: 8px;
  background: var(--prm-track);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

/* More tabs off the edge: the labels fade into the track over 28 px on that side, the track's own frame stays whole.
   The fades are sticky ends of the scroller; scroll-padding keeps the selected tab clear of them. */
.prm-cases {
  scroll-padding-inline: 28px;
}

.prm-cases::before,
.prm-cases::after {
  content: "";
  position: sticky;
  z-index: 2;
  flex: none;
  width: 28px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease;
}

.prm-cases::before {
  left: -3px;
  /* width plus the strip's 2px gap, so the first tab sits at the same inset on every side and the pill stays concentric */
  margin-right: -30px;
  border-radius: 8px 0 0 8px;
  background: linear-gradient(to left, transparent, var(--prm-track) 85%);
  order: -1;
}

.prm-cases::after {
  right: -3px;
  margin-left: -30px;
  border-radius: 0 8px 8px 0;
  background: linear-gradient(to right, transparent, var(--prm-track) 85%);
}

.prm-cases:is([data-overflow="end"], [data-overflow="both"])::after,
.prm-cases:is([data-overflow="start"], [data-overflow="both"])::before {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .prm-cases {
    scroll-behavior: auto;
  }

  .prm-cases::before,
  .prm-cases::after {
    transition: none;
  }
}

.prm-cases::-webkit-scrollbar {
  display: none;
}

plannix-roadmap[selector="none"] .prm-cases {
  display: none;
}

.prm-tab {
  position: relative;
  flex: none;
  scroll-snap-align: start;
  appearance: none;
  border: 0;
  margin: 0;
  padding: 5px 11px;
  border-radius: 6px;
  background: transparent;
  color: var(--prm-fg-2);
  font-family: inherit;
  font-size: var(--prm-fs-sm);
  line-height: 18px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 120ms ease,
    color 120ms ease,
    box-shadow 120ms ease,
    transform 120ms var(--prm-ease);
}

.prm-tab[aria-selected="true"] {
  background: var(--prm-tab-active);
  color: var(--prm-fg);
  box-shadow: var(--prm-tab-shadow);
}

.prm-tab:active {
  transform: scale(0.97);
}

.prm-tab:focus-visible {
  outline: 2px solid var(--prm-accent);
  outline-offset: 2px;
}

/* With JS the selected look moves to .prm-pill; without it the selected tab keeps it.
   The fill sits on the pill itself, not on each copy, so mid-move the clip never shows the gaps between tabs. */
.prm-cases.has-pill .prm-tab[aria-selected="true"] {
  background: transparent;
  box-shadow: none;
}

.prm-pill {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  gap: 2px;
  width: max-content;
  height: 100%;
  padding: 3px;
  border-radius: 8px;
  background: var(--prm-tab-active);
  pointer-events: none;
  clip-path: inset(0 100% 0 0 round 6px);
  transition: clip-path 320ms var(--prm-ease);
}

.prm-pill-tab {
  flex: none;
  padding: 5px 11px;
  color: var(--prm-fg);
  font-size: var(--prm-fs-sm);
  line-height: 18px;
  font-weight: 500;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .prm-tab[aria-selected="false"]:hover {
    color: var(--prm-fg);
  }
}

plannix-roadmap[interactive="false"] .prm-tab {
  cursor: default;
  pointer-events: none;
}

.prm-tab-progress {
  position: absolute;
  z-index: 2;
  left: 12px;
  right: 12px;
  bottom: 2px;
  height: 1.5px;
  border-radius: 1px;
  background: var(--prm-accent);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
}

.prm.is-autoplay .prm-tab[aria-selected="true"] .prm-tab-progress {
  opacity: 0.85;
  animation: prm-progress var(--prm-interval, 6000ms) linear forwards;
}

plannix-roadmap:hover .prm-tab-progress,
plannix-roadmap:focus-within .prm-tab-progress,
.prm.is-offscreen .prm-tab-progress,
.prm.is-hidden-tab .prm-tab-progress {
  animation-play-state: paused !important;
}

@keyframes prm-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* Window */

.prm-window {
  overflow: hidden;
  border: 1px solid var(--prm-line);
  border-radius: 12px;
  background: var(--prm-canvas);
  box-shadow: var(--prm-window-shadow);
}

.prm-titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border-bottom: 1px solid var(--prm-line);
  font-size: var(--prm-fs-sm);
  color: var(--prm-fg-3);
}

.prm-logo {
  width: 15px;
  height: 15px;
  color: var(--prm-accent);
  margin-right: 2px;
}

.prm-logo,
.prm-act-symbol {
  display: block;
  object-fit: contain;
}

.prm-crumb {
  white-space: nowrap;
}

.prm-crumb.is-current {
  color: var(--prm-fg);
  font-weight: 500;
}

/* Says "case type" without competing with the content: Anna and Davide carry a real consultant's signature.
   Off unless the tag has `example`. */
plannix-roadmap:not([example]) .prm-example,
plannix-roadmap[example="false"] .prm-example {
  display: none;
}

.prm-example {
  margin-left: 2px;
  padding: 0 6px;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--prm-line);
  font-size: var(--prm-fs-xs);
  line-height: 18px;
  color: var(--prm-fg-3);
  white-space: nowrap;
}

.prm-crumb-sep {
  width: 13px;
  height: 13px;
  color: var(--prm-fg-4);
}

.prm-spacer {
  flex: 1;
}

.prm-iconbtn {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  color: var(--prm-fg-3);
}

.prm-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 272px;
  grid-template-areas: "main panel";
}

/* Section nav */

.prm-nav {
  grid-area: nav;
  display: none;
  padding: 10px 8px;
  border-right: 1px solid var(--prm-line-warm);
  background: var(--prm-side);
}

.prm-nav li {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 30px;
  padding: 0 9px;
  border-radius: 6px;
  font-size: var(--prm-fs-sm);
  color: var(--prm-fg-2);
  white-space: nowrap;
}

.prm-nav li .prm-ico {
  color: var(--prm-fg-4);
}

.prm-nav li.is-current {
  background: var(--prm-hover);
  color: var(--prm-fg);
  font-weight: 500;
}

.prm-nav li.is-current .prm-ico {
  color: var(--prm-fg-2);
}

.prm-nav li,
.prm-nav li .prm-ico {
  cursor: default;
  transition: none;
}

/* Linear-style: eases in, lets go at once (the base rule above has no transition). */
@media (hover: hover) and (pointer: fine) {
  plannix-roadmap:not([interactive="false"]) .prm-nav li:not(.is-current):hover {
    background: var(--prm-nav-hover);
    color: var(--prm-fg);
    transition:
      background-color 120ms ease,
      color 120ms ease;
  }
  plannix-roadmap:not([interactive="false"]) .prm-nav li:not(.is-current):hover .prm-ico {
    color: var(--prm-fg-2);
    transition: color 120ms ease;
  }
}

/* Main */

.prm-main {
  grid-area: main;
  min-width: 0;
  padding: 16px var(--prm-pad) 8px;
  container: prm-main / inline-size;
}

.prm-title {
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.prm-persona {
  margin-top: 4px;
}

.prm-persona-text {
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
  min-width: 0;
  font-size: var(--prm-fs-sm);
  line-height: 20px;
  color: var(--prm-fg-3);
}

.prm-persona strong {
  font-weight: 500;
  color: var(--prm-fg);
}

/* In sintesi: same role as the "In breve" card of the real Roadmap (info-light card, short paragraph). */
.prm-summary {
  margin-top: 14px;
  padding: 10px 14px 12px;
  border-radius: 8px;
  background: var(--prm-summary-bg);
  box-shadow: inset 0 0 0 1px var(--prm-summary-line);
}

.prm-summary-label {
  font-size: var(--prm-fs-xs);
  line-height: 16px;
  font-weight: 500;
  color: var(--prm-accent-text);
}

.prm-summary-short {
  display: none;
}

.prm-summary-text {
  max-width: 78ch;
  margin-top: 3px;
  font-size: var(--prm-fs);
  line-height: 21px;
  color: var(--prm-fg);
  text-wrap: pretty;
}

/* The case's three figures, as a row under the summary sentence. */
.prm-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 16px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--prm-summary-line);
}

.prm-kpi {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
}

.prm-kpi dt {
  font-size: var(--prm-fs-xs);
  line-height: 16px;
  color: var(--prm-fg-2);
}

.prm-kpi dd {
  margin-top: 1px;
  font-size: var(--prm-fs);
  line-height: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Hero shot: the figures are already in the summary sentence; dropping the row keeps the 3 → 1 within the first screen. */
plannix-roadmap[variant="hero"] .prm-kpis {
  display: none;
}

/* Signature row: only on narrow layouts, where the panel (and its signature) falls below the actions. */
.prm-signoff {
  display: none;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.prm-signoff-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: var(--prm-fs-xs);
  line-height: 16px;
  color: var(--prm-fg-3);
}

.prm-signoff-text strong {
  font-size: var(--prm-fs-sm);
  line-height: 18px;
  font-weight: 500;
  color: var(--prm-fg);
}

/* Action list */

.prm-listhead,
.prm-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 128px 116px 100px;
  column-gap: 12px;
  align-items: start;
}

.prm-listhead {
  margin-top: 16px;
  padding: 0 8px 7px;
  border-bottom: 1px solid var(--prm-line);
  font-size: var(--prm-fs-xs);
  line-height: 16px;
  color: var(--prm-fg-3);
}

.prm-lh-amount {
  text-align: right;
}

.prm-list {
  position: relative;
}

.prm-row {
  position: relative;
  padding: var(--prm-row-py) 8px;
  border-bottom: 1px solid var(--prm-line);
  background: var(--prm-canvas);
  font-size: var(--prm-fs-sm);
  line-height: 20px;
  outline: none;
  transition: background-color 120ms ease;
}

/* Rows of the previous case, lifted out of the flow while they blur away under the new ones. */
.prm-row.is-leaving {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}

.prm-row:last-child {
  border-bottom-color: transparent;
}

.prm-row:focus-visible {
  box-shadow: inset 0 0 0 2px var(--prm-accent);
  border-radius: 6px;
}

.prm-idx {
  font-size: var(--prm-fs-xs);
  line-height: 18px;
  color: var(--prm-fg-3);
  font-variant-numeric: tabular-nums;
}

.prm-cell-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.prm-row-title {
  font-size: var(--prm-fs);
  line-height: 18px;
  font-weight: 500;
  color: var(--prm-fg);
  text-wrap: pretty;
}

.prm-row-sub {
  display: -webkit-box;
  min-width: 0;
  margin-top: 1px;
  overflow: hidden;
  line-height: 17px;
  color: var(--prm-fg-3);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  text-wrap: pretty;
}

.prm-why {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.prm-row.is-tip,
.prm-row:focus-visible {
  background: var(--prm-hover);
}

@media (hover: hover) and (pointer: fine) {
  plannix-roadmap:not([interactive="false"]) .prm-row:hover {
    background: var(--prm-hover);
  }
}

/* Why tooltip: solid fill, no arrow (the row it belongs to stays highlighted). */

.prm-tip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  width: max-content;
  max-width: min(280px, calc(100% - 16px));
  padding: 8px 10px 9px;
  border-radius: 8px;
  background: var(--prm-tip-bg);
  box-shadow: var(--prm-tip-shadow);
  color: var(--prm-tip-fg);
  font-size: var(--prm-fs-sm);
  line-height: 18px;
  text-wrap: pretty;
  pointer-events: none;
  opacity: 0;
  transform: translateY(2px) scale(0.97);
  transform-origin: 24px 100%;
  transition:
    opacity 120ms ease-out,
    transform 120ms var(--prm-ease);
}

.prm-tip[data-side="bottom"] {
  transform: translateY(-2px) scale(0.97);
  transform-origin: 24px 0;
}

.prm-tip.is-open {
  opacity: 1;
  transform: none;
  transition:
    opacity 180ms ease-out,
    transform 180ms var(--prm-ease);
}

.prm-tip[data-instant] {
  transition-duration: 0ms;
}

.prm-tip-label {
  font-size: var(--prm-fs-xs);
  line-height: 16px;
  font-weight: 500;
  color: var(--prm-tip-fg-2);
}

.prm-tip-text {
  margin-top: 2px;
}

plannix-roadmap:not([interactive="false"]) .prm-row {
  cursor: default;
}

.prm-meta {
  display: contents;
}

.prm-level,
.prm-when {
  display: flex;
  white-space: nowrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 18px;
  color: var(--prm-fg-2);
  white-space: nowrap;
}

.prm-glyph {
  width: 15px;
  height: 13px;
  flex: none;
}

.prm-glyph rect {
  fill: var(--prm-glyph-off);
}

.prm-glyph rect.on {
  fill: var(--prm-accent);
}

.prm-horizon {
  width: 13px;
  height: 13px;
  flex: none;
}

.prm-h-ring {
  fill: none;
  stroke: var(--prm-fg-4);
  stroke-width: 1.4;
}

.prm-h-half,
.prm-h-full {
  fill: var(--prm-accent);
  opacity: 0;
  transition: opacity 180ms ease;
}

.prm-when[data-horizon="now"] .prm-h-ring,
.prm-when[data-horizon="months"] .prm-h-ring {
  stroke: var(--prm-accent);
}

.prm-when[data-horizon="now"] .prm-h-full,
.prm-when[data-horizon="months"] .prm-h-half {
  opacity: 1;
}

/* The consultant's mark on an action they re-timed: their initials, on the accent */
.prm-by {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--prm-accent);
  color: #ffffff;
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}

.prm-amount {
  line-height: 18px;
  text-align: right;
  font-weight: 500;
  color: var(--prm-fg);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.prm-amount-note {
  display: block;
  font-size: var(--prm-fs-xs);
  line-height: 16px;
  font-weight: 400;
  color: var(--prm-fg-3);
}

/* Panel */

.prm-panel {
  grid-area: panel;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-left: 1px solid var(--prm-line-warm);
  background: var(--prm-side);
}

.prm-panel > section {
  padding: 14px 16px;
}

.prm-panel > section + section {
  border-top: 1px solid var(--prm-line-warm);
}

.prm-label {
  font-size: var(--prm-fs-xs);
  line-height: 16px;
  color: var(--prm-fg-3);
}

.prm-score-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

.prm-ring {
  width: 40px;
  height: 40px;
  flex: none;
  transform: rotate(-90deg);
}

.prm-ring circle {
  fill: none;
  stroke-width: 3.5;
}

.prm-ring-track {
  stroke: var(--prm-ring-track);
}

.prm-ring-arc {
  stroke: var(--prm-warn-stroke);
  stroke-linecap: round;
  transition: stroke 180ms ease;
}

.prm-score[data-tone="positive"] .prm-ring-arc {
  stroke: var(--prm-ok-stroke);
}

.prm-score-num {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.prm-score-max {
  font-size: var(--prm-fs-xs);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--prm-fg-3);
}

.prm-band {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: 6px;
  font-size: var(--prm-fs-xs);
  line-height: 18px;
  font-weight: 500;
  white-space: nowrap;
  background: var(--prm-warn-bg);
  color: var(--prm-warn-fg);
  transition:
    background-color 180ms ease,
    color 180ms ease;
}

.prm-score[data-tone="positive"] .prm-band {
  background: var(--prm-ok-bg);
  color: var(--prm-ok-fg);
}

.prm-person {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.prm-avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: var(--prm-avatar-bg);
  color: var(--prm-avatar-fg);
}

.prm-avatar-img,
.prm-act-photo {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.prm-avatar,
.prm-act-mark.is-photo {
  position: relative;
  overflow: hidden;
}

/* Hairline inside the photo so a light background doesn't melt into the panel. */
.prm-avatar::after,
.prm-act-mark.is-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--prm-photo-line);
}

.prm-person-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.prm-person-text strong {
  font-size: var(--prm-fs-sm);
  line-height: 18px;
  font-weight: 500;
}

.prm-person-text span {
  font-size: var(--prm-fs-xs);
  line-height: 16px;
  color: var(--prm-fg-3);
}

.prm-review-date {
  margin-top: 10px;
  font-size: var(--prm-fs-xs);
  line-height: 16px;
  color: var(--prm-fg-2);
  font-variant-numeric: tabular-nums;
}

.prm-activity ol {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.prm-activity ol::before {
  content: "";
  position: absolute;
  left: 7.5px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: var(--prm-line-warm);
}

.prm-activity li {
  position: relative;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  column-gap: 9px;
  align-items: start;
  font-size: var(--prm-fs-xs);
  line-height: 17px;
}

.prm-act-mark {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-top: 0.5px;
  border-radius: 50%;
  background: var(--prm-avatar-bg);
  color: var(--prm-avatar-fg);
  box-shadow: 0 0 0 2px var(--prm-side);
}

.prm-act-mark.is-brand {
  background: var(--prm-side);
  color: var(--prm-accent);
}



.prm-act-symbol {
  width: 11px;
  height: 11px;
}

.prm-activity p {
  color: var(--prm-fg-3);
  text-wrap: pretty;
}

.prm-activity strong {
  font-weight: 500;
  color: var(--prm-fg-2);
}

.prm-change {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 2px;
  padding: 0 5px;
  border-radius: 6px;
  background: var(--prm-hover);
  color: var(--prm-fg-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.prm-change svg {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.prm-activity time {
  color: var(--prm-fg-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Layout by component width */

@container prm (min-width: 1200px) {
  .prm-body {
    grid-template-columns: 196px minmax(0, 1fr) 272px;
    grid-template-areas: "nav main panel";
  }
  .prm-nav {
    display: block;
  }
}

plannix-roadmap[sidebar="none"] .prm-nav,
plannix-roadmap[variant="hero"] .prm-nav {
  display: none !important;
}

plannix-roadmap[sidebar="none"] .prm-body,
plannix-roadmap[variant="hero"] .prm-body {
  grid-template-columns: minmax(0, 1fr) 272px;
  grid-template-areas: "main panel";
}
/* hero: 284 px keeps the longest activity line («… in Scelte personali») on three lines, so the tallest case does not push the window below the fold */
plannix-roadmap[variant="hero"] .prm-body { grid-template-columns: minmax(0, 1fr) 284px; }

plannix-roadmap[panel="none"] .prm-panel {
  display: none;
}

plannix-roadmap[panel="none"] .prm-body {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "main";
}

@container prm (min-width: 1200px) {
  plannix-roadmap[panel="none"]:not([sidebar="none"]):not([variant="hero"]) .prm-body {
    grid-template-columns: 196px minmax(0, 1fr);
    grid-template-areas: "nav main";
  }
}

@container prm (max-width: 719px) {
  .prm-body,
  plannix-roadmap[sidebar="none"] .prm-body,
  plannix-roadmap[variant="hero"] .prm-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    grid-template-areas: "main" "panel";
  }
  /* The height reserved for the tallest case is shared by the four rows (a few px each), not left as a gap under the last one. */
  .prm-main {
    display: flex;
    flex-direction: column;
  }
  .prm-list {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
  }
  .prm-row {
    flex: 1 0 auto;
    align-content: center;
  }
  .prm-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    border-left: 0;
    border-top: 1px solid var(--prm-line-warm);
  }
  .prm-panel > section + section {
    border-top: 0;
    border-left: 1px solid var(--prm-line-warm);
  }
  .prm-activity {
    display: none;
  }
}

@container prm (max-width: 479px) {
  .prm-cases {
    align-self: stretch;
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
  .prm-titlebar {
    height: 36px;
    padding: 0 12px;
  }
  .prm-iconbtn:first-of-type,
  .prm-crumb:not(.is-current),
  .prm-crumb-sep {
    display: none;
  }
  /* Hero: the product name stays in the first screen; the decorative buttons give way to it. */
  plannix-roadmap[variant="hero"] .prm-crumb:not(.is-current),
  plannix-roadmap[variant="hero"] .prm-crumb-sep {
    display: initial;
  }
  plannix-roadmap[variant="hero"] .prm-iconbtn {
    display: none;
  }
}

/* Narrowest phones: the breadcrumb keeps the title bar, the «Esempio» chip moves next to the plan title. */
.prm-title .prm-example {
  display: none;
  margin-left: 8px;
  vertical-align: 2px;
  font-weight: 400;
  letter-spacing: 0;
}

@container prm (max-width: 300px) {
  plannix-roadmap[variant="hero"] .prm-titlebar .prm-example {
    display: none;
  }
  plannix-roadmap[variant="hero"][example]:not([example="false"]) .prm-title .prm-example {
    display: inline;
  }
  .prm-main {
    padding: 14px 14px 4px;
  }
  .prm-tab,
  .prm-pill-tab {
    padding: 11px 14px;
  }
  .prm-summary {
    margin-top: 12px;
    padding: 9px 12px 11px;
  }
  .prm-kpis {
    column-gap: 10px;
  }
  .prm-panel {
    grid-template-columns: minmax(0, 1fr);
  }
  .prm-panel > section {
    padding: 12px 14px;
  }
  .prm-review .prm-label {
    display: none;
  }
  .prm-person {
    margin-top: 0;
  }
  .prm-review-date {
    margin-top: 8px;
  }
  .prm-panel > section + section {
    border-left: 0;
    border-top: 1px solid var(--prm-line-warm);
  }
  .prm-score-row {
    margin-top: 6px;
  }
  .prm-ring {
    width: 36px;
    height: 36px;
  }
}

@container prm (max-width: 600px) {
  .prm-summary-long,
  .prm-kpis {
    display: none;
  }
  .prm-summary-short {
    display: inline;
  }
  plannix-roadmap[variant="hero"] .prm-persona {
    display: none;
  }
  .prm-signoff {
    display: flex;
  }
  .prm-review {
    display: none;
  }
  .prm-panel {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Row layout by list width */

@container prm-main (max-width: 600px) {
  .prm-listhead,
  .prm-row {
    grid-template-columns: 18px minmax(0, 1fr) 20px 132px 96px;
  }
  .prm-row-sub {
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .prm-level-label,
  .prm-lh-level {
    visibility: hidden;
    width: 0;
    overflow: hidden;
  }
}

@container prm-main (max-width: 500px) {
  .prm-listhead {
    display: none;
  }
  .prm-list {
    margin-top: 10px;
    border-top: 1px solid var(--prm-line);
  }
  .prm-row {
    grid-template-columns: 16px minmax(0, 1fr) auto;
    grid-template-areas:
      "idx main main"
      ". meta amount";
    row-gap: 5px;
    padding: 10px 4px;
  }
  .prm-amount {
    font-size: var(--prm-fs-xs);
    line-height: 16px;
  }
  .prm-idx {
    grid-area: idx;
  }
  .prm-cell-main {
    grid-area: main;
  }
  .prm-amount {
    grid-area: amount;
  }
  .prm-meta {
    grid-area: meta;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
    min-width: 0;
    font-size: var(--prm-fs-xs);
  }
  .prm-level,
  .prm-when {
    height: 16px;
    gap: 6px;
    color: var(--prm-fg-3);
  }
  .prm-level-label {
    visibility: visible;
    width: auto;
  }
  .prm-horizon {
    display: none;
  }
  .prm-row-sub {
    display: -webkit-box;
    white-space: normal;
  }
}

/* Reduced stage: the first three actions only, for the scroll-in hero; expand() restores the rest. */

plannix-roadmap[stage="reduced"] .prm-cases,
plannix-roadmap[stage="reduced"] .prm-nav,
plannix-roadmap[stage="reduced"] .prm-panel,
plannix-roadmap[stage="reduced"] .prm-kpis,
plannix-roadmap[stage="reduced"] .prm-summary,
plannix-roadmap[stage="reduced"] .prm-signoff,
plannix-roadmap[stage="reduced"] .prm-listhead,
plannix-roadmap[stage="reduced"] .prm-iconbtn,
plannix-roadmap[stage="reduced"] .prm-row:nth-child(n + 4) {
  display: none !important;
}

plannix-roadmap[stage="reduced"] .prm-body {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: "main" !important;
}

plannix-roadmap[stage="reduced"] .prm-list {
  margin-top: 12px;
  border-top: 1px solid var(--prm-line);
}

plannix-roadmap[stage="reduced"] .prm-row:nth-child(3) {
  border-bottom-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .prm-tab,
  .prm-row,
  .prm-pill,
  .prm-ring-arc,
  .prm-band {
    transition-duration: 0ms;
  }
  .prm-tip,
  .prm-tip[data-side="bottom"] {
    transform: none;
    transition: opacity 120ms ease;
  }
}

.prm-nw {
  white-space: nowrap;
}

/* The demo is signed by the role (VOT-FIRMA B): the Plannix symbol stands where a portrait would, the edit mark is a person glyph */
.prm-avatar-symbol { object-fit: contain; padding: 22%; background: var(--prm-paper); }
.prm-by-ico { width: 11px; height: 11px; stroke-width: 2.2; }

/* Demo (attribute `demo`, the hero): the case tabs are the app's segmented control in the title bar, and the window
   opens on the answers the plan is made from. Storyboard in roadmap-ui.js. */
plannix-roadmap[demo] .prm-titlebar {
  gap: 10px;
  height: 46px;
  padding: 0 10px 0 14px;
}

plannix-roadmap[demo] .prm-titlebar .prm-cases {
  --prm-track: var(--prm-gray-100);
  align-self: center;
  flex: 0 1 auto;
  min-width: 0;
  padding: 2px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--prm-line);
}

/* the pill is a clipped copy of the strip, so its padding stays equal to the strip's */
plannix-roadmap[demo] .prm-pill {
  padding: 2px;
}

plannix-roadmap[demo] .prm-tab,
plannix-roadmap[demo] .prm-pill-tab {
  padding: 4px 10px;
}

plannix-roadmap[demo] .prm-tab[aria-selected="true"],
plannix-roadmap[demo] .prm-pill {
  --prm-tab-active: var(--prm-white);
}

plannix-roadmap[demo] .prm-body {
  position: relative;
}

.prm-intake {
  display: none;
}

.prm[data-demo="before"] .prm-intake,
.prm[data-demo="working"] .prm-intake,
.prm-intake.is-out,
html[data-hero-demo="intro"] plannix-roadmap[demo] .prm:not([data-demo]) .prm-intake {
  display: grid;
}

.prm-intake {
  position: absolute;
  inset: 0;
  z-index: 4;
  grid-template-columns: minmax(0, 1fr) 284px;
  background: var(--prm-canvas);
}

.prm-intake.is-out {
  pointer-events: none;
}

.prm-intake-main {
  min-width: 0;
  padding: var(--prm-pad) var(--prm-pad) 16px;
}

.prm-answers {
  margin: 14px 0 0;
  border-top: 1px solid var(--prm-line);
}

.prm-answer {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 16px;
  padding: 9px 4px;
  border-bottom: 1px solid var(--prm-line);
  font-size: var(--prm-fs);
  line-height: 20px;
}

.prm-answer dt {
  color: var(--prm-fg-3);
}

.prm-answer dd {
  margin: 0;
  color: var(--prm-fg);
  font-weight: 500;
}

.prm-intake-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  min-width: 0;
  padding: var(--prm-pad);
  border-left: 1px solid var(--prm-line-warm);
  background: var(--prm-side);
}

.prm-go {
  appearance: none;
  height: 36px;
  margin: 0;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: var(--prm-accent);
  color: var(--prm-white);
  font-family: inherit;
  font-size: var(--prm-fs);
  line-height: 20px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform 150ms ease-out,
    background-color 150ms ease,
    box-shadow 240ms ease-out,
    opacity 200ms ease;
}

.prm-go:active {
  transform: scale(0.97);
}

.prm-go:disabled {
  opacity: 0.5;
  cursor: default;
}

/* the intro's own press (roadmap-ui.js, DEMO_PACE.full): the button lights up, then presses in; after :disabled so the press reads at full opacity */
.prm-go.is-armed {
  box-shadow: 0 0 0 4px rgb(3 115 226 / 0.2);
}

.prm-go.is-pressed {
  opacity: 1;
  transform: scale(0.96);
  background: var(--prm-brand-700);
  box-shadow: 0 0 0 4px rgb(3 115 226 / 0.2);
}

.prm-go:focus-visible {
  outline: 2px solid var(--prm-accent);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .prm-go:not(:disabled):hover {
    background: var(--prm-brand-700);
  }
}

.prm-steps {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--prm-fs);
  line-height: 20px;
  color: var(--prm-fg-3);
}

.prm-step {
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 150ms ease;
}

/* the step in progress is the darkest line; ticked ones stay readable a step lighter */
.prm-step[data-s="active"] {
  color: var(--prm-fg);
}

.prm-step[data-s="done"] {
  color: var(--prm-fg-2);
}

.prm-step-ico {
  flex: none;
  width: 16px;
  height: 16px;
  overflow: visible;
}

.prm-step-ring {
  fill: transparent;
  stroke: var(--prm-gray-300);
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  transition:
    fill 150ms ease,
    stroke 150ms ease;
}

.prm-step-check {
  fill: none;
  stroke: var(--prm-white);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 9;
  stroke-dashoffset: 9;
  transition: stroke-dashoffset 180ms var(--prm-ease);
}

/* active: the ring is a turning arc; done: filled, and the check draws in */
.prm-step[data-s="active"] .prm-step-ring {
  stroke: var(--prm-accent);
  stroke-dasharray: 26 14;
  animation: prm-spin 700ms linear infinite;
}

.prm-step[data-s="done"] .prm-step-ring {
  fill: var(--prm-accent);
  stroke: var(--prm-accent);
}

.prm-step[data-s="done"] .prm-step-ico {
  animation: prm-tick 260ms var(--prm-ease);
}

@keyframes prm-tick {
  from {
    transform: scale(0.8);
  }
}

.prm-step[data-s="done"] .prm-step-check {
  stroke-dashoffset: 0;
}

@keyframes prm-spin {
  to {
    transform: rotate(360deg);
  }
}

.prm-steps-note {
  margin: 0;
  font-size: var(--prm-fs-xs);
  line-height: 16px;
  color: var(--prm-fg-3);
}

@container prm (max-width: 719px) {
  .prm-intake {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    align-content: start;
  }
  .prm-intake-side {
    border-left: 0;
    border-top: 1px solid var(--prm-line-warm);
  }
}

/* narrow: the tabs get the whole title bar; «Esempio» moves next to the title */
@container prm (max-width: 560px) {
  plannix-roadmap[demo] .prm-titlebar {
    height: 44px;
    padding: 0 0 0 12px;
  }
  plannix-roadmap[demo] .prm-titlebar .prm-cases {
    align-self: center;
    flex: 1 1 auto;
    margin-right: 8px;
    mask-image: none;
  }
  plannix-roadmap[demo] .prm-titlebar :is(.prm-example, .prm-iconbtn, .prm-spacer) {
    display: none;
  }
  plannix-roadmap[demo] .prm-tab,
  plannix-roadmap[demo] .prm-pill-tab {
    padding: 5px 11px;
  }
  plannix-roadmap[demo][example]:not([example="false"]) .prm-title .prm-example {
    display: inline;
  }
  .prm-intake-main {
    padding: 14px 14px 12px;
  }
  .prm-intake-side {
    gap: 14px;
    padding: 14px;
  }
  .prm-answers {
    margin-top: 10px;
  }
  .prm-answer {
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 12px;
    padding: 6px 2px;
    font-size: var(--prm-fs-sm);
    line-height: 18px;
  }
}

/* «Rivedi»: added by roadmap-ui.js to the head of a demo window, shown once a build is finished */
plannix-roadmap[demo] .prm-head {
  position: relative;
}

.prm-replay {
  appearance: none;
  position: absolute;
  top: -4px;
  right: -6px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  margin: 0;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--prm-fg-3);
  font-family: inherit;
  font-size: var(--prm-fs-sm);
  line-height: 18px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 200ms ease-out,
    visibility 0s linear 200ms,
    color 150ms ease,
    background-color 150ms ease;
}

.prm.is-built .prm-replay {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 200ms ease-out,
    visibility 0s,
    color 150ms ease,
    background-color 150ms ease;
}

.prm-replay-ico {
  width: 14px;
  height: 14px;
  stroke-width: 1.8;
}

.prm-replay:focus-visible {
  outline: 2px solid var(--prm-accent);
  outline-offset: 0;
}

.prm-replay:active {
  transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
  .prm-replay:hover {
    background: var(--prm-gray-100);
    color: var(--prm-fg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .prm-step[data-s="active"] .prm-step-ring,
  .prm-step[data-s="done"] .prm-step-ico {
    animation: none;
  }
  .prm-go,
  .prm-step-check {
    transition: none;
  }
  .prm-replay {
    display: none;
  }
}

/* phones, the demo's case strip: 36 px tabs and a 48 px fade, so a cut label reads as «scroll for more»; the strip keeps its snap */
/* One inset inside the window, the page's card padding: title bar, answers, steps and plan all start on the same line.
   The case strip loses its track so it reads as tabs in the title bar, not a box inside the window; the logo gives way to it. */
@media (max-width: 860px) {
  plannix-roadmap[demo] { --prm-pad: var(--m-ui-pad); }
  plannix-roadmap[demo] .prm-titlebar { height: 52px; padding: 0 0 0 var(--prm-pad); }
  plannix-roadmap[demo] .prm-titlebar .prm-logo { display: none; }
  plannix-roadmap[demo] .prm-titlebar .prm-cases { --prm-tab-active: var(--prm-sand); --prm-track: var(--prm-canvas); margin-right: 0; padding: 0; box-shadow: none; }
  plannix-roadmap[demo] .prm-titlebar .prm-pill { --prm-tab-active: var(--prm-sand); padding: 0; }
  plannix-roadmap[demo] .prm-intake-main { padding: var(--prm-pad) var(--prm-pad) 12px; }
  plannix-roadmap[demo] .prm-intake-side { padding: var(--prm-pad); }
  plannix-roadmap[demo] .prm-main { padding-inline: var(--prm-pad); }
  plannix-roadmap[demo] .prm-answer { padding-inline: 0; }
  plannix-roadmap[demo] .prm-tab,
  plannix-roadmap[demo] .prm-pill-tab { padding: 9px 12px; }
  plannix-roadmap[demo] .prm-cases { scroll-padding-inline: 48px; }
  plannix-roadmap[demo] .prm-cases::before { width: 48px; margin-right: -50px; }
  plannix-roadmap[demo] .prm-cases::after { width: 48px; margin-left: -50px; }
}

/* Hero on phones: the four situations as a 2×2 choice, all visible, and shorter rows (the detail line is the first thing to go) */
@container prm (max-width: 479px) {
  plannix-roadmap[variant="hero"] .prm-titlebar { height: auto; padding: 10px 12px; }
  plannix-roadmap[variant="hero"] .prm-cases { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; width: 100%; overflow: visible; mask-image: none; -webkit-mask-image: none; }
  plannix-roadmap[variant="hero"] .prm-cases.has-pill .prm-tab { width: 100%; min-width: 0; min-height: 40px; padding: 6px 8px; justify-content: center; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--prm-line-warm, #e8e2d6); white-space: normal; text-align: center; line-height: 1.25; }
  plannix-roadmap[variant="hero"] .prm-cases.has-pill .prm-tab[aria-selected="true"] { background: var(--prm-sand); box-shadow: none; font-weight: 500; }
  /* the sliding pill is positioned inline by roadmap-ui.js; on the grid it would take a cell */
  plannix-roadmap[variant="hero"] .prm-cases.has-pill > .prm-pill { display: none !important; }
  plannix-roadmap[variant="hero"] .prm-cases::before, plannix-roadmap[variant="hero"] .prm-cases::after { content: none; }
  plannix-roadmap[variant="hero"] .prm-row-sub { display: none; }
  plannix-roadmap[variant="hero"] .prm-signoff { gap: 10px; padding-block: 10px; }
  plannix-roadmap[variant="hero"] .prm-avatar { width: 28px; height: 28px; flex: none; }
}