/* ─────────────────────────────────────────────────────────────────────────
 * FollowUp Pro v2: tokens, the sidebar shell and the polish layer.
 *
 * EVERY rule in this file is scoped under html.ui-v2, except the few at the
 * very top that HIDE v2 markup when v2 is off. So with the class absent this
 * stylesheet changes nothing a Classic page draws. Read V2-GUIDE.md (same
 * folder) before adding to it.
 *
 * Sections:
 *   1. Mode visibility (the only unscoped rules)
 *   2. Tokens (A's type scale, colours, radii, spacing), plus the Classic
 *      page tokens remapped onto them
 *   3. The shell: sidebar rail, account menu, narrow-screen bar and drawer
 *   4. Polish for Classic pages shown inside the shell (deliberately small)
 *   5. Components for v2 screens (fp-*)
 * ───────────────────────────────────────────────────────────────────────── */

/* 1 ── Mode visibility ──────────────────────────────────────────────────── */
html:not(.ui-v2) .v2-only,
html:not(.ui-v2) .fpv2-rail,
html:not(.ui-v2) .fpv2-topbar,
html:not(.ui-v2) .fpv2-scrim,
html:not(.ui-v2) .fpv2-strip { display: none !important; }
html.ui-v2 .classic-only,
html.ui-v2 .app-shell > .nav-sidebar,
html.ui-v2 .nav-collapse-open,
html.ui-v2 .fp-try-v2 { display: none !important; }

/* 2 ── Tokens ───────────────────────────────────────────────────────────── */
html.ui-v2 {
  /* Type. A's scale, and nothing between the steps. */
  --fp-font: Montserrat, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fp-text-xs: 12px;   /* group labels, table heads, badges */
  --fp-text-sm: 13px;   /* table cells, secondary buttons */
  --fp-text-md: 14px;   /* body, nav items, buttons */
  --fp-text-lg: 16px;   /* lede, Today item */
  --fp-text-xl: 20px;   /* card titles (h2) */
  --fp-text-2xl: 26px;  /* big numbers */
  --fp-text-3xl: 32px;  /* page titles (h1) */

  /* Brand. Green is a FILL colour; green text on white is --fp-green-ink. */
  --fp-purple: #5F2980;
  --fp-purple-deep: #4A1F63;
  --fp-purple-tint: #EFE9F3;
  --fp-purple-wash: #F8F5FA;
  --fp-purple-line: #D6CCE1;
  --fp-green: #61BC47;
  --fp-green-ink: #3F852B;
  --fp-green-deep: #2F6B1F;
  --fp-green-wash: #F4FAF1;
  --fp-green-line: #DDE9D6;

  /* Ink and surfaces. */
  --fp-ink: #0F172A;        /* headings, numbers */
  --fp-ink-2: #334155;      /* body text */
  --fp-ink-3: #55607A;      /* labels, hints (6.3:1 on white) */
  --fp-bg: #F6F5F9;         /* the app background */
  --fp-surface: #FFFFFF;    /* cards, rail */
  --fp-surface-2: #FBFAFC;  /* table head rows */
  --fp-surface-3: #F1F0F5;  /* segmented controls, neutral chips */
  --fp-hover: #F4F2F7;      /* row and item hover */
  --fp-line: #E6E3EC;       /* card and rail borders */
  --fp-line-2: #DAD6E3;     /* input and neutral button borders */
  --fp-line-soft: #F0EEF4;  /* row dividers */

  /* Status (text colours pass 4.5:1 on white). */
  --fp-red: #B42318;
  --fp-red-wash: #FBE7E5;
  --fp-amber: #8A5A00;
  --fp-amber-fill: #D69A1E;
  --fp-amber-wash: #FDF4E3;

  /* Shape and space. */
  --fp-radius-xs: 6px;
  --fp-radius-sm: 8px;
  --fp-radius: 10px;
  --fp-radius-lg: 14px;
  --fp-radius-xl: 16px;
  --fp-radius-pill: 999px;
  --fp-space-1: 4px;
  --fp-space-2: 8px;
  --fp-space-3: 12px;
  --fp-space-4: 16px;
  --fp-space-5: 20px;
  --fp-space-6: 24px;
  --fp-space-8: 32px;
  --fp-shadow-card: 0 1px 2px rgba(15, 23, 42, .04);
  --fp-shadow-raised: 0 1px 2px rgba(15, 23, 42, .08);
  --fp-shadow-primary: 0 1px 2px rgba(74, 31, 99, .25);
  --fp-shadow-pop: 0 12px 32px rgba(15, 23, 42, .14);
  --fp-focus: #5F2980;

  /* The shell. --fp-rail-w is the room the shell takes on the left: the
     rail's width while it is open, the strip's while it is put away (wider
     than 900px only). Size or place things by it and you follow both. */
  --fp-rail-open-w: 248px;
  --fp-rail-closed-w: 56px;
  --fp-rail-w: var(--fp-rail-open-w);
  --fp-bar-h: 56px;

  /* Classic pages' own tokens, pointed at A's palette. html.ui-v2 outranks
     both `:root` and `[data-theme]`, so this wins whatever the page declared,
     and a Classic page inside the shell picks up the new colours without a
     line of its own changing. */
  --bg: var(--fp-bg); --bg2: var(--fp-surface); --bg3: var(--fp-surface-2); --bg4: var(--fp-surface-3);
  --border: var(--fp-line); --border2: var(--fp-line-2);
  --text: var(--fp-ink); --text2: var(--fp-ink-2); --text3: var(--fp-ink-3); --text4: #8C8499;
  --accent: var(--fp-purple); --accent-deep: var(--fp-purple-deep);
  --accent-dim: var(--fp-purple-tint); --accent-tint: var(--fp-purple-wash); --accent-border: var(--fp-purple-line);
  --cta: var(--fp-green-ink); --cta-dim: var(--fp-green-wash); --cta-border: var(--fp-green-line);
  --green: var(--fp-green-ink); --green-dim: var(--fp-green-wash);
  --red: var(--fp-red); --red-dim: var(--fp-red-wash); --red-border: #F1C4BF;
  --amber: var(--fp-amber); --amber-dot: var(--fp-amber-fill); --amber-dim: var(--fp-amber-wash); --amber-border: #EBD3A4;
  --shadow-card: var(--fp-shadow-card); --shadow-pop: var(--fp-shadow-pop); --shadow-btn: var(--fp-shadow-primary);
  --radius: var(--fp-radius); --radius-lg: var(--fp-radius-lg);
  --sidebar-bg: var(--fp-surface);
  --grad: linear-gradient(90deg, #5F2980 0%, #61BC47 100%);
  color-scheme: light;
}

/* 3 ── The shell ────────────────────────────────────────────────────────── */
html.ui-v2 body.fpv2-shell { padding-left: var(--fp-rail-w) !important; }

html.ui-v2 .fpv2-rail {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 40;
  width: var(--fp-rail-open-w); box-sizing: border-box;
  display: flex; flex-direction: column; padding: 0 12px;
  background: var(--fp-surface); border-right: 1px solid var(--fp-line);
  font-family: var(--fp-font); font-size: var(--fp-text-md); line-height: 1.45; color: var(--fp-ink-2);
  -webkit-font-smoothing: antialiased;
}
html.ui-v2 .fpv2-rail *, html.ui-v2 .fpv2-topbar *, html.ui-v2 .fpv2-strip * { box-sizing: border-box; }
html.ui-v2 .fpv2-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

html.ui-v2 .fpv2-brand {
  display: flex; align-items: center; gap: 16px; height: 64px; padding: 0 8px; flex: none;
  text-decoration: none; border-radius: var(--fp-radius);
}
html.ui-v2 .fpv2-brand img { width: 32px; height: 32px; object-fit: contain; display: block; flex: none; }
html.ui-v2 .fpv2-brand-name {
  font-family: var(--fp-font); font-weight: 800; font-size: var(--fp-text-lg);
  letter-spacing: -.01em; color: var(--fp-ink); white-space: nowrap;
}
html.ui-v2 .fpv2-brand-name span { color: var(--fp-purple); }
html.ui-v2 .fpv2-brand-name .fpv2-brand-tagline {
  display: block; font-size: 11px; font-weight: 600; color: var(--fp-ink-3);
  letter-spacing: .02em; line-height: 1.1; margin-top: 1px;
}

html.ui-v2 .fpv2-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
html.ui-v2 .fpv2-list--today { padding: 4px 0 6px; flex: none; }

html.ui-v2 .fpv2-item {
  position: relative; display: flex; align-items: center; gap: 11px;
  height: 30px; padding: 0 10px; border-radius: var(--fp-radius-sm);
  color: var(--fp-ink-2); font-size: var(--fp-text-md); font-weight: 500;
  text-decoration: none; white-space: nowrap;
}
html.ui-v2 .fpv2-item .fpv2-ico { flex: none; display: block; color: var(--fp-ink-3); }
html.ui-v2 .fpv2-item:hover { background: var(--fp-hover); color: var(--fp-ink); }
html.ui-v2 .fpv2-item.is-active { background: var(--fp-purple-tint); color: var(--fp-purple); font-weight: 600; }
html.ui-v2 .fpv2-item.is-active .fpv2-ico { color: var(--fp-purple); }
html.ui-v2 .fpv2-label { overflow: hidden; text-overflow: ellipsis; }

html.ui-v2 .fpv2-item--today {
  height: 40px; border-radius: var(--fp-radius);
  font-size: var(--fp-text-lg); font-weight: 700; color: var(--fp-ink);
}
html.ui-v2 .fpv2-item--today.is-active { font-weight: 700; }

html.ui-v2 .fpv2-badge {
  margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 22px; padding: 0 7px; border-radius: 11px;
  background: var(--fp-purple); color: #FFFFFF; font-size: var(--fp-text-xs); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
html.ui-v2 .fpv2-dot {
  margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: var(--fp-purple); flex: none;
}

html.ui-v2 .fpv2-groups {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 8px; padding-bottom: 8px;
  scrollbar-width: thin;
}
html.ui-v2 .fpv2-group-label {
  height: 22px; display: flex; align-items: flex-end; padding: 0 10px 4px;
  font-size: var(--fp-text-xs); font-weight: 600; color: var(--fp-ink-3);
}

html.ui-v2 .fpv2-sub {
  list-style: none; margin: 2px 0 4px; padding: 0 0 0 29px;
  display: flex; flex-direction: column; gap: 1px;
}
html.ui-v2 .fpv2-subitem {
  display: flex; align-items: center; height: 28px; padding: 0 10px;
  border-radius: var(--fp-radius-sm); border-left: 2px solid var(--fp-line);
  border-top-left-radius: 0; border-bottom-left-radius: 0;
  color: var(--fp-ink-2); font-size: var(--fp-text-sm); font-weight: 500; text-decoration: none; white-space: nowrap;
}
html.ui-v2 .fpv2-subitem:hover { background: var(--fp-hover); color: var(--fp-ink); }
html.ui-v2 .fpv2-subitem.is-active {
  color: var(--fp-purple); font-weight: 600; background: var(--fp-purple-wash); border-left-color: var(--fp-purple);
}

html.ui-v2 .fpv2-foot {
  position: relative; flex: none; border-top: 1px solid var(--fp-line);
  padding: 8px 0 10px; display: flex; flex-direction: column; gap: 6px;
}
html.ui-v2 .fpv2-rail.fpv2-more-below .fpv2-foot { box-shadow: 0 -10px 12px -10px rgba(15, 23, 42, .18); }
html.ui-v2 .fpv2-user { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 4px 0 8px; }
html.ui-v2 .fpv2-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--fp-purple-tint); color: var(--fp-purple); font-weight: 700; font-size: var(--fp-text-xs);
}
html.ui-v2 .fpv2-user-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
html.ui-v2 .fpv2-user-name {
  font-size: var(--fp-text-md); font-weight: 600; color: var(--fp-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html.ui-v2 .fpv2-user-role {
  font-size: var(--fp-text-xs); color: var(--fp-ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The tenant's short name beside the role ("Admin  Extreme"): a small
   neutral chip, same ink as the role line. */
html.ui-v2 .fpv2-tenant {
  display: inline-block; margin-left: 6px; padding: 0 7px; vertical-align: top;
  font-size: 10px; line-height: 15px; font-weight: 600; letter-spacing: .02em;
  color: var(--fp-ink-3); background: var(--fp-surface-3); border: 1px solid var(--fp-line);
  border-radius: 999px; white-space: nowrap;
}

html.ui-v2 .fpv2-iconbtn {
  width: 32px; height: 32px; padding: 0; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--fp-radius-sm); border: 1px solid transparent; background: transparent;
  color: var(--fp-ink-3); cursor: pointer;
}
html.ui-v2 .fpv2-iconbtn:hover { background: var(--fp-surface-3); color: var(--fp-ink); }
html.ui-v2 .fpv2-account-btn { margin-left: auto; }
html.ui-v2 .fpv2-account-btn[aria-expanded="true"] { background: var(--fp-purple-tint); color: var(--fp-purple); }

html.ui-v2 .fpv2-menu {
  position: absolute; left: 0; right: 0; bottom: 58px; z-index: 2;
  display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: var(--fp-surface); border: 1px solid var(--fp-line); border-radius: 12px;
  box-shadow: var(--fp-shadow-pop);
  animation: fpv2-pop .12s ease-out;
}
html.ui-v2 .fpv2-menu[hidden] { display: none; }
@keyframes fpv2-pop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
html.ui-v2 .fpv2-menu-head {
  padding: 8px 10px 6px; font-size: var(--fp-text-xs); color: var(--fp-ink-3); line-height: 1.35;
}
html.ui-v2 .fpv2-menu-head span {
  display: block; color: var(--fp-ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html.ui-v2 .fpv2-menu-field { display: flex; flex-direction: column; gap: 4px; padding: 6px 10px 8px; }
html.ui-v2 .fpv2-menu-field label { font-size: var(--fp-text-xs); font-weight: 600; color: var(--fp-ink-3); }
html.ui-v2 .fpv2-menu-field select {
  height: 34px; padding: 0 8px; border: 1px solid var(--fp-line-2); border-radius: var(--fp-radius-sm);
  background: var(--fp-surface); color: var(--fp-ink); font: 500 var(--fp-text-md) var(--fp-font);
}
html.ui-v2 .fpv2-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px;
  border: 0; border-radius: var(--fp-radius-sm); background: transparent; cursor: pointer; text-align: left;
  color: var(--fp-ink-2); font: 500 var(--fp-text-md) var(--fp-font);
}
html.ui-v2 .fpv2-menu-item .fpv2-ico { color: var(--fp-ink-3); flex: none; }
html.ui-v2 .fpv2-menu-item:hover { background: var(--fp-hover); color: var(--fp-ink); }

/* Keyboard focus in the shell. Negative offset: the item list scrolls, and a
   ring drawn outside an item would be clipped by it. */
html.ui-v2 .fpv2-rail :focus-visible,
html.ui-v2 .fpv2-topbar :focus-visible,
html.ui-v2 .fpv2-strip :focus-visible { outline: 2px solid var(--fp-focus); outline-offset: -2px; }
html.ui-v2 .fpv2-rail :focus:not(:focus-visible),
html.ui-v2 .fpv2-strip :focus:not(:focus-visible) { outline: none; }

/* Putting the rail away (wider than 900px). The class html.fpv2-rail-closed
   is set by nav.js before the first paint and by the buttons in
   shell-v2.js. The rail slides off and leaves a 56px strip with the way
   back: the phone bar turned on its side. --fp-rail-w becomes the strip's
   width, so the body padding, and anything a page sizes by it, follow. The
   media query is the exact opposite of the drawer's (max-width: 900px),
   fractional widths included, so at 900px and below none of this applies
   and the drawer is exactly as it was. */
html.ui-v2 .fpv2-strip { display: none; }
html.ui-v2 .fpv2-rail-hide { position: absolute; top: 16px; right: 12px; }
html.ui-v2 .fpv2-rail-show { position: relative; }
@media not all and (max-width: 900px) {
  html.ui-v2 .fpv2-rail { transition: transform .18s ease; }
  html.ui-v2 .fpv2-rail > .fpv2-brand { margin-right: 40px; } /* clear of the hide button */
  html.ui-v2.fpv2-rail-closed { --fp-rail-w: var(--fp-rail-closed-w); }
  html.ui-v2.fpv2-rail-closed .fpv2-brand-tagline { display: none; }
  html.ui-v2.fpv2-rail-closed .fpv2-rail {
    transform: translateX(-100%); visibility: hidden;
    transition: transform .18s ease, visibility 0s linear .18s;
  }
  html.ui-v2.fpv2-rail-closed .fpv2-strip {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 40;
    width: var(--fp-rail-closed-w); box-sizing: border-box;
    display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 16px;
    background: var(--fp-surface); border-right: 1px solid var(--fp-line);
    font-family: var(--fp-font);
  }
}
html.ui-v2 .fpv2-strip-brand {
  display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: var(--fp-radius); text-decoration: none;
}
html.ui-v2 .fpv2-strip-brand img { width: 28px; height: 28px; object-fit: contain; display: block; }
html.ui-v2 .fpv2-strip-brand:hover { background: var(--fp-hover); }

/* The hint on the two rail buttons: the name and the shortcut. Shown on
   hover after a beat, and at once on keyboard focus. */
html.ui-v2 .fpv2-tip {
  position: absolute; z-index: 5; pointer-events: none; white-space: nowrap;
  display: flex; align-items: center; gap: 8px; padding: 5px 6px 5px 10px;
  border-radius: var(--fp-radius-sm); background: var(--fp-ink); color: #FFFFFF;
  font: 600 var(--fp-text-xs)/16px var(--fp-font); letter-spacing: 0; box-shadow: var(--fp-shadow-pop);
  opacity: 0; visibility: hidden; transition: opacity .12s ease, visibility 0s linear .12s;
}
html.ui-v2 .fpv2-tip kbd {
  font: 600 11px/16px var(--fp-font); padding: 0 5px; border-radius: 4px;
  background: rgba(255, 255, 255, .16); color: #FFFFFF;
}
html.ui-v2 .fpv2-rail-hide .fpv2-tip { top: calc(100% + 6px); right: 0; }
html.ui-v2 .fpv2-rail-show .fpv2-tip { top: 50%; left: calc(100% + 10px); transform: translateY(-50%); }
html.ui-v2 .fpv2-rail-hide:hover .fpv2-tip,
html.ui-v2 .fpv2-rail-show:hover .fpv2-tip { opacity: 1; visibility: visible; transition-delay: .35s; }
html.ui-v2 .fpv2-rail-hide:focus-visible .fpv2-tip,
html.ui-v2 .fpv2-rail-show:focus-visible .fpv2-tip { opacity: 1; visibility: visible; transition-delay: 0s; }
/* A hint shown by hover can be hovered in turn (the bridge spans the gap to
   the button), and Escape puts a hint away until the pointer and focus have
   both left the button (shell-v2.js sets .fpv2-tip-off). WCAG 1.4.13. */
html.ui-v2 .fpv2-rail-hide:hover .fpv2-tip,
html.ui-v2 .fpv2-rail-show:hover .fpv2-tip { pointer-events: auto; cursor: default; }
html.ui-v2 .fpv2-tip::before { content: ""; position: absolute; }
html.ui-v2 .fpv2-rail-hide .fpv2-tip::before { left: 0; right: 0; bottom: 100%; height: 6px; }
html.ui-v2 .fpv2-rail-show .fpv2-tip::before { top: 0; bottom: 0; right: 100%; width: 10px; }
html.ui-v2 .fpv2-rail-hide.fpv2-tip-off .fpv2-tip,
html.ui-v2 .fpv2-rail-show.fpv2-tip-off .fpv2-tip { opacity: 0; visibility: hidden; pointer-events: none; transition: none; }
/* Put away, the rail's Today count and dots cannot show: one dot on Show
   sidebar stands in for them (its name says what it means). */
html.ui-v2 .fpv2-rail-show.fpv2-has-news::after {
  content: ""; position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--fp-purple); box-shadow: 0 0 0 2px var(--fp-surface); pointer-events: none;
}

/* The narrow-screen bar and drawer (hidden on desktop). */
html.ui-v2 .fpv2-topbar { display: none; }
html.ui-v2 .fpv2-scrim { display: none; }
html.ui-v2 .fpv2-close { position: absolute; top: 16px; right: 12px; }

@media (max-width: 900px) {
  html.ui-v2 body.fpv2-shell { padding-left: 0 !important; padding-top: var(--fp-bar-h) !important; }
  html.ui-v2 body.fpv2-shell .app-shell { height: calc(100vh - var(--fp-bar-h)) !important; }
  html.ui-v2 .fpv2-topbar {
    display: flex; align-items: center; gap: 8px;
    position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: var(--fp-bar-h); padding: 0 12px;
    background: var(--fp-surface); border-bottom: 1px solid var(--fp-line);
    font-family: var(--fp-font);
  }
  html.ui-v2 .fpv2-topbar .fpv2-iconbtn { width: 40px; height: 40px; color: var(--fp-ink-2); }
  html.ui-v2 .fpv2-brand--bar { height: 40px; gap: 10px; padding: 0 4px; }
  html.ui-v2 .fpv2-brand--bar img { width: 28px; height: 28px; }
  html.ui-v2 .fpv2-rail {
    z-index: 1100; width: min(300px, 86vw); max-width: 100%;
    transform: translateX(-100%); visibility: hidden;
    transition: transform .2s ease, visibility 0s linear .2s;
    box-shadow: var(--fp-shadow-pop);
  }
  html.ui-v2 body.fpv2-drawer-open .fpv2-rail { transform: none; visibility: visible; transition: transform .2s ease; }
  html.ui-v2 body.fpv2-drawer-open .fpv2-scrim {
    display: block; position: fixed; inset: 0; z-index: 1090; background: rgba(15, 23, 42, .4);
  }
  html.ui-v2 body.fpv2-drawer-open { overflow: hidden; }
  html.ui-v2 .fpv2-rail-hide { display: none; } /* the drawer has its own close button */
}
/* Printing: the shell is not part of the page. Without this a landscape
   page (wider than 900px) printed the rail or the strip down its left edge,
   and a portrait one the phone bar, with the padding that clears them. */
@media print {
  html.ui-v2 .fpv2-rail, html.ui-v2 .fpv2-strip,
  html.ui-v2 .fpv2-topbar, html.ui-v2 .fpv2-scrim { display: none !important; }
  html.ui-v2 body.fpv2-shell { padding-left: 0 !important; padding-top: 0 !important; }
}
@media (prefers-reduced-motion: reduce) {
  html.ui-v2 .fpv2-rail, html.ui-v2 body.fpv2-drawer-open .fpv2-rail,
  html.ui-v2.fpv2-rail-closed .fpv2-rail { transition: none; }
  html.ui-v2 .fpv2-tip, html.ui-v2 .fpv2-rail-hide:hover .fpv2-tip, html.ui-v2 .fpv2-rail-show:hover .fpv2-tip { transition: none; }
  html.ui-v2 .fpv2-menu { animation: none; }
}

/* 4 ── Polish for Classic pages inside the shell ────────────────────────
   Deliberately small. Colours already follow the remapped tokens above.
   The typeface is NOT set here: nav.js points the family name 'DM Sans' at
   Montserrat while v2 is on (FontFace objects), so every Classic rule and
   inline style that names DM Sans draws Montserrat, and DM Mono, IBM Plex and
   the rest keep their own. A blanket font-family rule was tried first and
   made dense uppercase headers overlap on Inventory. This section adds a
   visible focus ring and even-width digits, and changes no sizes, spacing,
   radii or layout. */
html.ui-v2 body { -webkit-font-smoothing: antialiased; }
html.ui-v2 :where(body.fpv2-shell) :where(td, th) { font-variant-numeric: tabular-nums; }
html.ui-v2 :where(body.fpv2-shell) :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--fp-focus); outline-offset: 2px;
}

/* 5 ── Components for v2 screens ──────────────────────────────────────────
   Built from the mockups. Use these rather than re-declaring the same
   inline styles on every page; add a variant here when two screens need it. */
html.ui-v2 .fp-page { position: relative; padding: 4px 32px 24px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 600px) { html.ui-v2 .fp-page { padding-left: 16px; padding-right: 16px; } }
html.ui-v2 .fp-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-top: 20px; }
html.ui-v2 .fp-h1 { margin: 0; font-weight: 700; font-size: var(--fp-text-3xl); letter-spacing: -.02em; line-height: 1.15; color: var(--fp-ink); }
html.ui-v2 .fp-h2 { margin: 0; font-weight: 700; font-size: var(--fp-text-xl); letter-spacing: -.01em; line-height: 1.25; color: var(--fp-ink); }
html.ui-v2 .fp-h3 { margin: 0; font-weight: 700; font-size: var(--fp-text-lg); line-height: 1.3; color: var(--fp-ink); }
html.ui-v2 .fp-lede { margin: 0; font-size: var(--fp-text-lg); color: var(--fp-ink-2); }
html.ui-v2 .fp-muted { color: var(--fp-ink-3); }
html.ui-v2 .fp-num { font-variant-numeric: tabular-nums; }
html.ui-v2 .fp-big { font-weight: 700; font-size: var(--fp-text-2xl); letter-spacing: -.01em; color: var(--fp-ink); font-variant-numeric: tabular-nums; }
html.ui-v2 .fp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

html.ui-v2 .fp-card {
  background: var(--fp-surface); border: 1px solid var(--fp-line); border-radius: var(--fp-radius-lg);
  box-shadow: var(--fp-shadow-card); min-width: 0;
}
html.ui-v2 .fp-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 14px; }
html.ui-v2 .fp-card-body { padding: 0 20px 16px; }

html.ui-v2 .fp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: var(--fp-radius); box-sizing: border-box;
  font: 600 var(--fp-text-md)/1 var(--fp-font); white-space: nowrap; cursor: pointer; text-decoration: none;
  background: var(--fp-surface); color: var(--fp-purple); border: 1px solid var(--fp-purple-line);
}
html.ui-v2 .fp-btn:hover { background: var(--fp-purple-wash); color: var(--fp-purple-deep); }
html.ui-v2 .fp-btn--primary { background: var(--fp-purple); color: #FFFFFF; border-color: var(--fp-purple); box-shadow: var(--fp-shadow-primary); }
html.ui-v2 .fp-btn--primary:hover { background: var(--fp-purple-deep); border-color: var(--fp-purple-deep); color: #FFFFFF; }
html.ui-v2 .fp-btn--neutral { color: var(--fp-ink-2); border-color: var(--fp-line-2); }
html.ui-v2 .fp-btn--neutral:hover { background: var(--fp-hover); color: var(--fp-ink); }
html.ui-v2 .fp-btn--ghost { background: transparent; border-color: transparent; color: var(--fp-ink-3); }
html.ui-v2 .fp-btn--ghost:hover { background: var(--fp-surface-3); color: var(--fp-ink); }
html.ui-v2 .fp-btn--sm { height: 34px; padding: 0 12px; font-size: var(--fp-text-sm); }
html.ui-v2 .fp-btn[disabled], html.ui-v2 .fp-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; box-shadow: none; }
html.ui-v2 .fp-btn:focus-visible { outline: 2px solid var(--fp-focus); outline-offset: 2px; }

html.ui-v2 .fp-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--fp-radius); background: var(--fp-surface-3); }
html.ui-v2 .fp-seg > button, html.ui-v2 .fp-seg > a {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px;
  border-radius: var(--fp-radius-sm); border: 0; background: transparent; cursor: pointer; text-decoration: none;
  color: var(--fp-ink-3); font: 600 var(--fp-text-sm) var(--fp-font);
}
html.ui-v2 .fp-seg > [aria-selected="true"], html.ui-v2 .fp-seg > [aria-current="page"], html.ui-v2 .fp-seg > .is-on {
  background: var(--fp-surface); color: var(--fp-ink); box-shadow: var(--fp-shadow-raised);
}

html.ui-v2 .fp-input, html.ui-v2 .fp-select {
  height: 40px; padding: 0 12px; box-sizing: border-box; border: 1px solid var(--fp-line-2); border-radius: var(--fp-radius);
  background: var(--fp-surface); color: var(--fp-ink); font: 500 var(--fp-text-md) var(--fp-font);
}
html.ui-v2 .fp-input:focus, html.ui-v2 .fp-select:focus { outline: none; border-color: var(--fp-purple); box-shadow: 0 0 0 4px var(--fp-purple-tint); }
html.ui-v2 .fp-field { display: flex; flex-direction: column; gap: 6px; }
html.ui-v2 .fp-field > label { font-size: var(--fp-text-sm); font-weight: 600; color: var(--fp-ink-2); }

html.ui-v2 .fp-table { width: 100%; border-collapse: collapse; }
html.ui-v2 .fp-table th {
  height: 32px; padding: 0 8px; background: var(--fp-surface-2); text-align: left;
  font-size: var(--fp-text-xs); font-weight: 600; color: var(--fp-ink-3); white-space: nowrap;
}
html.ui-v2 .fp-table td {
  height: 38px; padding: 0 8px; border-top: 1px solid var(--fp-line-soft);
  font-size: var(--fp-text-sm); color: var(--fp-ink-2); font-variant-numeric: tabular-nums;
}
html.ui-v2 .fp-table .fp-right { text-align: right; }
html.ui-v2 .fp-table tbody tr:hover td { background: #FBF9FC; }

html.ui-v2 .fp-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: var(--fp-radius-pill);
  background: var(--fp-surface-3); color: var(--fp-ink-2); font-size: var(--fp-text-xs); font-weight: 600; white-space: nowrap;
}
html.ui-v2 .fp-chip--purple { background: var(--fp-purple-tint); color: var(--fp-purple); }
html.ui-v2 .fp-chip--green { background: var(--fp-green-wash); color: var(--fp-green-deep); } /* ink on wash is 4.3:1; deep is 6.1:1 */
html.ui-v2 .fp-chip--amber { background: var(--fp-amber-wash); color: var(--fp-amber); }
html.ui-v2 .fp-chip--red { background: var(--fp-red-wash); color: var(--fp-red); }

html.ui-v2 .fp-progress { height: 8px; border-radius: 4px; background: #E7E4EE; overflow: hidden; }
html.ui-v2 .fp-progress > span { display: block; height: 100%; border-radius: 4px; background: var(--fp-green); }