/* App UI layer: the Plannix app's own tokens, ported from the app repo (packages/tailwind-config px-theme.css and px-colors.css, redesign2026 values; DESIGN.md).
   Every app component on the site sits inside .aui, so they read as one product. Values are the app's; --aui-z scales a whole component without changing its proportions. */
@font-face { font-family: "Inter App"; src: url("fonts/InterVariable-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:is(.aui, plannix-roadmap, .pv, .rl-plan) {
  --aui-z: 1;
  /* Neutrals: warm grounds and lines (warmth dose 0.5, hue 78), navy-tinted ink ramp */
  --aui-page: oklch(0.98 0.004 78);
  --aui-sidebar: oklch(0.965 0.004 78);
  --aui-active: oklch(0.93 0.004 78);
  --aui-surface: #ffffff;
  --aui-inset: oklch(0.98 0.004 78);
  --aui-line: oklch(0.915 0.008 78);
  --aui-line-2: oklch(0.872 0.008 78);
  --aui-ink: #111a26;
  --aui-ink-2: oklch(0.366 0.03 257);
  --aui-ink-3: #495464;
  --aui-ink-4: #5d6879;
  --aui-icon: #7d8795;
  /* Brand */
  --aui-blue: rgb(3 115 226);
  --aui-blue-hover: rgb(2 94 186);
  --aui-blue-ink: rgb(2 74 146);
  --aui-blue-tint: rgb(239 246 255);
  /* Categories: one colour per pillar for dot, legend and bar; tint and ink for the icon tile */
  --aui-cat-liq: oklch(0.64 0.094 210);
  --aui-cat-inv: oklch(0.47 0.148 258);
  --aui-cat-imm: oklch(0.68 0.179 33);
  --aui-cat-alt: oklch(0.58 0.248 305);
  --aui-cat-pro: oklch(0.8 0.127 65);
  --aui-cat-pas: oklch(0.42 0.143 350);
  --aui-cat-liq-tint: oklch(0.9 0.045 210);
  --aui-cat-inv-tint: oklch(0.9 0.039 258);
  --aui-cat-imm-tint: oklch(0.9 0.042 33);
  --aui-cat-alt-tint: oklch(0.9 0.048 305);
  --aui-cat-liq-ink: oklch(0.47 0.073 210);
  --aui-cat-inv-ink: oklch(0.47 0.157 258);
  --aui-cat-imm-ink: oklch(0.47 0.156 33);
  --aui-cat-alt-ink: oklch(0.47 0.18 305);
  /* Feedback (-600 text, -100 ground) */
  --aui-ok: #016f37;
  --aui-ok-fill: #008744;
  --aui-ok-tint: #def4e3;
  --aui-warn: #974c00;
  --aui-warn-fill: #b75d01;
  --aui-warn-tint: #ffebdf;
  --aui-bad: #b72826;
  --aui-bad-fill: #de302e;
  --aui-bad-tint: #ffeae8;
  /* Shape and depth */
  --aui-r-control: calc(8px * var(--aui-z));
  --aui-r-card: calc(12px * var(--aui-z));
  --aui-r-badge: calc(6px * var(--aui-z));
  --aui-r-item: calc(6px * var(--aui-z));
  --aui-shadow-rgb: 56 44 24;
  --aui-shadow-control: 0 1px 2px rgb(var(--aui-shadow-rgb) / 0.05);
  --aui-shadow-floating: 0 0 0 1px rgb(var(--aui-shadow-rgb) / 0.08), 0 2px 4px -1px rgb(var(--aui-shadow-rgb) / 0.06), 0 12px 24px -6px rgb(var(--aui-shadow-rgb) / 0.1);
  --aui-shadow-elevated: 0 1px 2px rgb(var(--aui-shadow-rgb) / 0.15), inset 0 1px 0 rgb(255 255 255 / 0.15);
  --aui-ease: cubic-bezier(0.23, 1, 0.32, 1);
}
.aui {
  font-family: "Inter App", InterVariable, Inter, system-ui, sans-serif;
  font-feature-settings: "cv01", "cv02", "cv03", "cv04", "cv09", "ss03";
  font-size: calc(14px * var(--aui-z));
  line-height: calc(20px * var(--aui-z));
  font-weight: 400;
  letter-spacing: 0;
  color: var(--aui-ink);
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
.aui *, .aui *::before, .aui *::after { box-sizing: border-box; }
.aui :where(p, h3, h4, h5, ul, ol, li, figure) { margin: 0; padding: 0; list-style: none; font: inherit; letter-spacing: inherit; color: inherit; }
.aui :where(button) { font: inherit; color: inherit; letter-spacing: inherit; }

/* Type roles (px-theme.css --text-*) */
.aui .aui-t1 { font-size: calc(24px * var(--aui-z)); line-height: calc(28px * var(--aui-z)); font-weight: 600; letter-spacing: -0.025em; }
.aui .aui-t2 { font-size: calc(20px * var(--aui-z)); line-height: calc(24px * var(--aui-z)); font-weight: 600; letter-spacing: -0.02em; }
.aui .aui-t3 { font-size: calc(16px * var(--aui-z)); line-height: calc(20px * var(--aui-z)); font-weight: 600; letter-spacing: -0.015em; }
.aui .aui-body { font-size: calc(14px * var(--aui-z)); line-height: calc(20px * var(--aui-z)); }
.aui .aui-label { font-size: calc(14px * var(--aui-z)); line-height: calc(20px * var(--aui-z)); font-weight: 500; }
.aui .aui-label-sm { font-size: calc(13px * var(--aui-z)); line-height: calc(18px * var(--aui-z)); font-weight: 500; }
.aui .aui-cap { font-size: calc(12px * var(--aui-z)); line-height: calc(16px * var(--aui-z)); }
.aui .aui-num-xl { font-size: calc(40px * var(--aui-z)); line-height: calc(44px * var(--aui-z)); font-weight: 600; letter-spacing: -0.03em; }
.aui .aui-num-lead { font-size: calc(32px * var(--aui-z)); line-height: calc(36px * var(--aui-z)); font-weight: 600; letter-spacing: -0.02em; }
.aui .aui-num-lg { font-size: calc(24px * var(--aui-z)); line-height: calc(28px * var(--aui-z)); font-weight: 600; letter-spacing: -0.015em; }
.aui .aui-muted { color: var(--aui-ink-3); }
.aui .aui-soft { color: var(--aui-ink-2); }
.aui .aui-tnum { font-variant-numeric: tabular-nums; }
.aui .aui-amt { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Icons: Nucleo ui outline on the 18 grid, 1.5 stroke (img/app-icons.svg, from fe-common glyphs.tsx) */
.aui-ico { width: calc(18px * var(--aui-z)); height: calc(18px * var(--aui-z)); flex: none; stroke-width: 1.5; color: var(--aui-icon); }
.aui-ico.is-sm { width: calc(14px * var(--aui-z)); height: calc(14px * var(--aui-z)); }

/* App window: the frame a crop of the app sits in */
.aui-win { position: relative; display: grid; grid-template-columns: calc(240px * var(--aui-z)) minmax(0, 1fr); background: var(--aui-page); border-radius: calc(14px * var(--aui-z)); overflow: hidden; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.10), 0 1px 0 rgb(255 255 255 / 0.12) inset, 0 40px 80px -40px rgb(0 0 0 / 0.65), 0 24px 48px -24px rgb(0 0 0 / 0.35); isolation: isolate; }
.aui-win.is-light-ground { box-shadow: 0 0 0 1px var(--aui-line), 0 30px 60px -30px rgb(var(--aui-shadow-rgb) / 0.28); }
.aui-win.no-side { grid-template-columns: minmax(0, 1fr); }
.aui-content { min-width: 0; padding: calc(28px * var(--aui-z)) calc(32px * var(--aui-z)); display: grid; align-content: start; gap: calc(24px * var(--aui-z)); }
.aui-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: calc(40px * var(--aui-z)); }
.aui-sub { margin-top: calc(6px * var(--aui-z)); color: var(--aui-ink-2); max-width: 40em; }

/* Sidebar (shell 2026): 240px rail, 32px rows, grey active pill at the same weight, sentence-case section labels */
.aui-side { display: flex; flex-direction: column; background: var(--aui-sidebar); border-right: 1px solid var(--aui-line); padding: calc(20px * var(--aui-z)) calc(8px * var(--aui-z)) 0; min-width: 0; }
.aui-logo { display: flex; align-items: center; gap: calc(6px * var(--aui-z)); padding: 0 calc(10px * var(--aui-z)) calc(20px * var(--aui-z)); }
.aui-logo img { height: calc(20px * var(--aui-z)); width: auto; display: block; }
.aui-nav { display: grid; gap: 1px; }
.aui-nav-h { padding: calc(16px * var(--aui-z)) calc(10px * var(--aui-z)) calc(6px * var(--aui-z)); font-size: calc(12px * var(--aui-z)); line-height: calc(16px * var(--aui-z)); color: var(--aui-ink-4); }
.aui-nav-i { display: flex; align-items: center; gap: calc(10px * var(--aui-z)); height: calc(32px * var(--aui-z)); padding: 0 calc(10px * var(--aui-z)); border-radius: var(--aui-r-item); color: var(--aui-ink-2); white-space: nowrap; overflow: hidden; transition: background-color 150ms ease; }
.aui-nav-i > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.aui-nav-i .aui-chev { width: calc(14px * var(--aui-z)); height: calc(14px * var(--aui-z)); color: var(--aui-ink-4); stroke-width: 1.5; }
.aui-nav-i.is-on { background: var(--aui-active); color: var(--aui-ink); }
.aui-nav-i.is-on .aui-ico { color: var(--aui-ink-2); }
.aui-nav-sub { padding-left: calc(38px * var(--aui-z)); }
.aui-dot-new { width: 6px; height: 6px; border-radius: 50%; background: var(--aui-blue); flex: none; }
.aui-side-foot { margin-top: auto; border-top: 1px solid var(--aui-line); margin-inline: calc(-8px * var(--aui-z)); padding: calc(12px * var(--aui-z)) calc(16px * var(--aui-z)); display: flex; align-items: center; gap: calc(10px * var(--aui-z)); }
.aui-av { width: calc(36px * var(--aui-z)); height: calc(36px * var(--aui-z)); border-radius: 50%; background: var(--aui-surface); border: 1px solid var(--aui-line); display: grid; place-items: center; font-size: calc(12px * var(--aui-z)); font-weight: 500; color: var(--aui-ink-2); flex: none; }
.aui-who { display: grid; gap: 2px; justify-items: start; min-width: 0; }
.aui-who b { font-weight: 500; }

/* Phone tab bar (segment-tab-bar): five tabs, the current one on a grey pill */
.aui-tabbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--aui-surface); border-top: 1px solid var(--aui-line); padding: 6px 4px 8px; }
.aui-tabbar > span { display: grid; justify-items: center; gap: 2px; font-size: 11px; line-height: 14px; color: var(--aui-ink-3); }
.aui-tabbar i { display: grid; place-items: center; width: 44px; height: 26px; border-radius: 999px; }
.aui-tabbar .is-on { color: var(--aui-ink); }
.aui-tabbar .is-on i { background: var(--aui-active); }
.aui-tabbar .aui-ico { color: currentColor; }

/* Card: paper on the page ground, 1px hairline, 12px, flat */
.aui-card { background: var(--aui-surface); border: 1px solid var(--aui-line); border-radius: var(--aui-r-card); min-width: 0; }
.aui-pad { padding: calc(20px * var(--aui-z)); }
.aui-card-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: calc(16px * var(--aui-z)) calc(20px * var(--aui-z)); border-bottom: 1px solid var(--aui-line); }
.aui-card-h .aui-t3 { display: flex; align-items: baseline; gap: 8px; }

/* Category icon tile: tint ground, ink glyph */
.aui-tile { width: calc(36px * var(--aui-z)); height: calc(36px * var(--aui-z)); border-radius: 50%; display: grid; place-items: center; flex: none; }
.aui-tile .aui-ico { color: currentColor; }
.aui-tile.is-liq { background: var(--aui-cat-liq-tint); color: var(--aui-cat-liq-ink); }
.aui-tile.is-inv { background: var(--aui-cat-inv-tint); color: var(--aui-cat-inv-ink); }
.aui-tile.is-imm { background: var(--aui-cat-imm-tint); color: var(--aui-cat-imm-ink); }
.aui-tile.is-alt { background: var(--aui-cat-alt-tint); color: var(--aui-cat-alt-ink); }
.aui-tile.is-sq { border-radius: var(--aui-r-control); width: calc(28px * var(--aui-z)); height: calc(28px * var(--aui-z)); }

/* Institution logo: rounded square at 25% of the side with a faint inner ring (no real bank marks on the site) */
.aui-logo-i { width: calc(32px * var(--aui-z)); height: calc(32px * var(--aui-z)); border-radius: calc(8px * var(--aui-z)); display: grid; place-items: center; flex: none; background: var(--aui-inset); box-shadow: inset 0 0 0 1px rgb(var(--aui-shadow-rgb) / 0.10); font-size: calc(11px * var(--aui-z)); font-weight: 600; letter-spacing: 0.01em; color: var(--aui-ink-2); }

/* Rows: a clickable row lights an inset shoulder tint that comes in instantly and fades out in 150ms */
.aui-rows { display: grid; padding: calc(4px * var(--aui-z)) calc(8px * var(--aui-z)); }
.aui-row { position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: calc(12px * var(--aui-z)); min-height: calc(64px * var(--aui-z)); padding: calc(8px * var(--aui-z)) calc(12px * var(--aui-z)); border-radius: var(--aui-r-control); transition: background-color 150ms ease; }
.aui-row + .aui-row::before { content: ""; position: absolute; top: 0; left: calc(68px * var(--aui-z)); right: calc(12px * var(--aui-z)); border-top: 1px solid var(--aui-line); }
.aui-row .aui-chev { width: calc(14px * var(--aui-z)); height: calc(14px * var(--aui-z)); color: var(--aui-ink-3); stroke-width: 1.5; transition: transform 200ms var(--aui-ease); }
.aui-row-name { display: grid; min-width: 0; }
.aui-row-name > :first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aui-row-val { display: grid; justify-items: end; text-align: right; }
.aui-row.is-plain { grid-template-columns: minmax(0, 1fr) auto; min-height: calc(44px * var(--aui-z)); }
@media (hover: hover) and (pointer: fine) {
  .aui-row.is-link { cursor: default; }
  .aui-row.is-link:hover { background: rgb(var(--aui-shadow-rgb) / 0.035); transition-duration: 0ms; }
  .aui-row.is-link:hover .aui-chev { transform: translateX(2px); }
}

/* Key/value list */
.aui-kv { display: grid; gap: calc(10px * var(--aui-z)); }
.aui-kv > div { display: flex; justify-content: space-between; gap: 16px; }
.aui-kv dt, .aui-kv > div > :first-child { color: var(--aui-ink-2); }
.aui-rule { border: 0; border-top: 1px solid var(--aui-line); margin: 0; }

/* Composition bar: pill segments with a 2px gap, legend with a dot always next to its label */
.aui-bar { display: flex; gap: 2px; height: calc(8px * var(--aui-z)); }
.aui-bar > i { flex: var(--w) 1 0px; min-width: 4px; height: 100%; border-radius: 999px; background: var(--c); transform-origin: left center; }
.aui-legend { display: grid; gap: calc(10px * var(--aui-z)); }
.aui-legend > li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto calc(52px * var(--aui-z)); align-items: center; gap: calc(10px * var(--aui-z)); transition: opacity 150ms ease; }
.aui-legend > li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.aui-legend > li > :nth-child(n+2) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.aui-legend > li > :first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Segmented control: track on the inset ground, white thumb */
.aui-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--aui-r-control); background: var(--aui-inset); border: 1px solid var(--aui-line); }
.aui-seg > button { all: unset; box-sizing: border-box; height: calc(30px * var(--aui-z)); padding: 0 calc(12px * var(--aui-z)); border-radius: calc(6px * var(--aui-z)); display: inline-flex; align-items: center; color: var(--aui-ink-3); cursor: pointer; transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease; white-space: nowrap; }
.aui-seg > button[aria-pressed="true"] { background: var(--aui-surface); color: var(--aui-ink); box-shadow: 0 0 0 1px var(--aui-line), var(--aui-shadow-control); }
.aui-seg > button:focus-visible { outline: 2px solid var(--aui-blue); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .aui-seg > button:not([aria-pressed="true"]):hover { color: var(--aui-ink); } }

/* Buttons (40px, 8px corners); the primary keeps the elevated highlight */
.aui-btn { display: inline-flex; align-items: center; gap: 8px; height: calc(40px * var(--aui-z)); padding: 0 calc(16px * var(--aui-z)); border-radius: var(--aui-r-control); background: var(--aui-blue); color: #ffffff; font-weight: 500; box-shadow: var(--aui-shadow-elevated); white-space: nowrap; }
.aui-btn .aui-ico { color: currentColor; }
.aui-btn.is-outline { background: var(--aui-surface); color: var(--aui-ink-2); box-shadow: 0 0 0 1px var(--aui-line-2) inset, var(--aui-shadow-control); }
.aui-btn.is-ghost { background: transparent; color: var(--aui-blue-hover); box-shadow: none; padding-inline: 0; height: auto; }
.aui-link { color: var(--aui-blue-hover); font-weight: 500; }

/* Tags by role: category and plan are a soft 6px rectangle; status is a pill with a leading dot */
.aui-tag { display: inline-flex; align-items: center; gap: 6px; height: calc(20px * var(--aui-z)); padding: 0 calc(8px * var(--aui-z)); border-radius: var(--aui-r-badge); border: 1px solid var(--aui-line-2); background: var(--aui-surface); color: var(--aui-ink-2); font-size: calc(12px * var(--aui-z)); line-height: 1; font-weight: 500; white-space: nowrap; }
.aui-tag.is-blue { background: var(--aui-blue-tint); border-color: rgb(190 222 254); color: var(--aui-blue-ink); }
.aui-status { display: inline-flex; align-items: center; gap: 6px; height: calc(22px * var(--aui-z)); padding: 0 calc(10px * var(--aui-z)); border-radius: 999px; border: 1px solid var(--aui-line-2); background: var(--aui-surface); font-size: calc(12px * var(--aui-z)); font-weight: 500; color: var(--aui-ink); white-space: nowrap; }
.aui-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c, var(--aui-icon)); }
.aui-status.is-ok { --c: var(--aui-ok-fill); }
.aui-status.is-warn { --c: var(--aui-warn-fill); }
.aui-status.is-bad { --c: var(--aui-bad-fill); }
.aui-status.is-blue { --c: var(--aui-blue); }
/* Dense list status: a dot plus text, no container */
.aui-stat { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; white-space: nowrap; }
.aui-stat::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.aui-stat.is-ok { --c: var(--aui-ok-fill); color: var(--aui-ok); }
.aui-stat.is-warn { --c: var(--aui-warn-fill); color: var(--aui-warn); }
.aui-stat.is-bad { --c: var(--aui-bad-fill); color: var(--aui-bad); }

/* Progress: pill bar that fills once in view */
.aui-prog { height: calc(6px * var(--aui-z)); border-radius: 999px; background: var(--aui-active); overflow: hidden; }
.aui-prog > i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: var(--c, var(--aui-blue)); transform-origin: left center; }

/* Score ring (Salute finanziaria): 270° arc on a hairline track, fills once in view */
.aui-ring { position: relative; width: calc(168px * var(--aui-z)); aspect-ratio: 1; flex: none; }
.aui-ring svg { width: 100%; height: 100%; transform: rotate(135deg); overflow: visible; }
.aui-ring circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.aui-ring .t { stroke: var(--aui-active); stroke-dasharray: 212.06 282.74; }
.aui-ring .a { stroke: var(--aui-blue); stroke-dasharray: calc(212.06 * var(--v) / 100) 282.74; transition: stroke-dasharray 1100ms var(--aui-ease); }
.aui-ring-c { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 2px; }

/* Tooltip (decided look: paper, hairline, floating shadow, text only) */
.aui-tip { position: relative; display: inline-grid; place-items: center; cursor: help; color: var(--aui-ink-4); border-radius: 50%; }
.aui-tip:focus-visible { outline: 2px solid var(--aui-blue); outline-offset: 2px; }
.aui-tip > span[role="tooltip"] { position: absolute; z-index: 5; bottom: calc(100% + 8px); left: 50%; width: max-content; max-width: 240px; padding: 8px 10px; border-radius: 8px; background: var(--aui-surface); box-shadow: var(--aui-shadow-floating); color: var(--aui-ink-2); font-size: 12px; line-height: 16px; font-weight: 400; text-align: left; white-space: normal; opacity: 0; transform: translate(-50%, 4px); pointer-events: none; transition: opacity 150ms ease, transform 150ms var(--aui-ease); }
.aui-tip:is(:hover, :focus-visible) > span[role="tooltip"] { opacity: 1; transform: translate(-50%, 0); }

/* Count-up and reveal: final values are in the HTML; JS only animates towards them */
.aui-js .aui-fill:not(.is-in) .aui-bar > i, .aui-js .aui-fill:not(.is-in) .aui-prog > i { transform: scaleX(0); }
.aui-bar > i, .aui-prog > i { transition: transform 900ms var(--aui-ease), flex-grow 500ms var(--aui-ease); }
.aui-js .aui-fill:not(.is-in) .aui-ring .a { stroke-dasharray: 0 282.74; }
.aui-swap { transition: opacity 180ms ease; }
.aui-swap.is-out { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .aui *, .aui *::before, .aui *::after { transition: none !important; animation: none !important; }
  .aui-js .aui-fill:not(.is-in) .aui-bar > i, .aui-js .aui-fill:not(.is-in) .aui-prog > i { transform: none; }
  .aui-js .aui-fill:not(.is-in) .aui-ring .a { stroke-dasharray: calc(212.06 * var(--v) / 100) 282.74; }
}
.aui-row.is-plain + .aui-row::before, .aui-row + .aui-row.is-plain::before { left: calc(12px * var(--aui-z)); }

/* The Roadmap demo (<plannix-roadmap>, roadmap-ui.css) on the same tokens, light theme only; load after roadmap-ui.css */
plannix-roadmap:not([theme="dark"]) {
  --prm-canvas: var(--aui-surface);
  --prm-side: var(--aui-page);
  --prm-paper: var(--aui-page);
  --prm-sand: var(--aui-active);
  --prm-sand-line: var(--aui-line);
  --prm-hover: rgb(var(--aui-shadow-rgb) / 0.035);
  --prm-nav-hover: rgb(var(--aui-shadow-rgb) / 0.035);
  --prm-line: var(--aui-line);
  --prm-line-warm: var(--aui-line);
  --prm-fg: var(--aui-ink);
  --prm-fg-2: var(--aui-ink-2);
  --prm-fg-3: var(--aui-ink-3);
  --prm-fg-4: var(--aui-ink-4);
  --prm-accent: var(--aui-blue);
  --prm-accent-text: var(--aui-blue-hover);
  --prm-glyph-off: var(--aui-line-2);
  --prm-track: var(--aui-inset);
  --prm-ring-track: var(--aui-active);
  --prm-tab-active: var(--aui-surface);
  --prm-tab-shadow: 0 0 0 1px var(--aui-line), var(--aui-shadow-control);
  --prm-window-shadow: 0 0 0 1px rgb(var(--aui-shadow-rgb) / 0.06), 0 30px 60px -30px rgb(var(--aui-shadow-rgb) / 0.3);
  --prm-warn-bg: var(--aui-warn-tint);
  --prm-warn-fg: var(--aui-warn);
  --prm-warn-stroke: var(--aui-warn-fill);
  --prm-ok-bg: var(--aui-ok-tint);
  --prm-ok-fg: var(--aui-ok);
  --prm-ok-stroke: var(--aui-ok-fill);
  --prm-avatar-bg: var(--aui-active);
  --prm-avatar-fg: var(--aui-ink-2);
  --prm-summary-bg: var(--aui-blue-tint);
  --prm-summary-line: rgb(190 222 254);
  --prm-tip-bg: var(--aui-surface);
  --prm-tip-fg: var(--aui-ink-2);
  --prm-tip-fg-2: var(--aui-ink-4);
  --prm-tip-shadow: var(--aui-shadow-floating);
  font-family: "Inter App", InterVariable, Inter, system-ui, sans-serif;
  font-feature-settings: "cv01", "cv02", "cv03", "cv04", "cv09", "ss03";
}
/* Timing as the report prints it: a soft blue tag («30 giorni», «3-6 mesi»); later horizons stay neutral */
plannix-roadmap:not([theme="dark"]) .prm-when { display: inline-flex; width: max-content; height: 22px; padding: 0 8px; gap: 6px; border-radius: var(--aui-r-badge); background: var(--aui-inset); box-shadow: inset 0 0 0 1px var(--aui-line); color: var(--aui-ink-3); font-size: 13px; font-weight: 500; }
plannix-roadmap:not([theme="dark"]) .prm-when:is([data-horizon="now"], [data-horizon="months"]) { background: var(--aui-blue-tint); box-shadow: inset 0 0 0 1px rgb(190 222 254); color: var(--aui-blue-ink); }
plannix-roadmap:not([theme="dark"]) .prm-when .prm-horizon { display: none; }

/* Pricing previews (pricing.css .pv): the same cards, type and colours as the app */
.pv:not(.pv-rm) { font-family: "Inter App", InterVariable, Inter, system-ui, sans-serif; font-feature-settings: "cv01", "cv02", "cv03", "cv04", "cv09", "ss03"; color: var(--aui-ink-2); }
.pv .pv-card { border-radius: var(--aui-r-card); background: var(--aui-surface); box-shadow: 0 0 0 1px var(--aui-line), 0 8px 18px -12px rgb(var(--aui-shadow-rgb) / 0.22); }
.pv .pv-k { color: var(--aui-ink-3); }
.pv :is(.pv-t, .pv-big, .pv-row b) { color: var(--aui-ink); }
.pv .pv-big { font-family: inherit; font-weight: 600; letter-spacing: -0.02em; }
.pv :is(.pv-bar, .pv-prog) { border-radius: 999px; background: var(--aui-active); }
.pv :is(.pv-bar, .pv-prog) i { background: var(--aui-blue); }
.pv .pv-dist { display: flex; gap: 2px; }
.pv .pv-dist i { border-radius: 999px; }
.pv .pv-dist i:nth-child(1) { background: var(--aui-cat-liq); }
.pv .pv-dist i:nth-child(2) { background: var(--aui-cat-inv); }
.pv .pv-dist i:nth-child(3) { background: var(--aui-cat-imm); }
.pv .pv-dist i:nth-child(4) { background: var(--aui-cat-alt); }
.pv .pv-ok { background: var(--aui-ok-tint); color: var(--aui-ok); border-radius: var(--aui-r-badge); }

/* Roadmap plan card (roadmap.css .rl-plan): the report's type, ink, hairlines and timing tags; load after roadmap.css */
.rl-plan { font-family: "Inter App", InterVariable, Inter, system-ui, sans-serif; font-feature-settings: "cv01", "cv02", "cv03", "cv04", "cv09", "ss03"; color: var(--aui-ink); border-radius: 14px; }
.rl-plan .rl-plan-k { border-bottom-color: var(--aui-line); font-size: 16px; line-height: 20px; font-weight: 600; letter-spacing: -0.015em; }
.rl-plan .rl-plan-ex { border-radius: var(--aui-r-badge); box-shadow: inset 0 0 0 1px var(--aui-line-2); color: var(--aui-ink-2); font-weight: 500; letter-spacing: 0; }
.rl-plan .rl-plan-sum { border-radius: var(--aui-r-control); background: var(--aui-blue-tint); box-shadow: inset 0 0 0 1px rgb(190 222 254); color: var(--aui-ink); }
.rl-plan li { border-bottom-color: var(--aui-line); }
.rl-plan li b { color: var(--aui-ink); }
.rl-plan .d1-lv, .rl-plan .rl-plan-sign { color: var(--aui-ink-3); }
.rl-plan .d1-glyph rect { fill: var(--aui-line-2); }
.rl-plan .d1-glyph rect.on { fill: var(--aui-blue); }
.rl-plan .d1-when { height: 22px; padding: 0 8px; border-radius: var(--aui-r-badge); background: var(--aui-blue-tint); box-shadow: inset 0 0 0 1px rgb(190 222 254); color: var(--aui-blue-ink); font-size: 13px; font-weight: 500; }
.rl-plan .d1-when i { display: none; }
.rl-plan .rl-plan-sign b { color: var(--aui-ok); }
.rl-plan .rl-plan-gift { border-radius: 0 0 14px 14px; }

/* the «Perché» tooltip is appended outside the demo, so its colours live on the tooltip itself: the app's paper look */
.prm-tip { --prm-tip-bg: #ffffff; --prm-tip-fg: #1f2937; --prm-tip-fg-2: #5d6879; --prm-tip-shadow: 0 0 0 1px rgb(17 26 38 / 0.08), 0 14px 32px -12px rgb(17 26 38 / 0.32); }