/* /Components/Account/Pages/Register.razor.rz.scp.css */
/* Each wizard screen eases in as it replaces the last. */
.step-panel[b-ydqj6my045] { animation: step-fade-in-b-ydqj6my045 0.28s ease-out; }

@keyframes step-fade-in-b-ydqj6my045 {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.auth-resend[b-ydqj6my045] { font-size: 0.8125rem; color: var(--text-muted); }
.auth-resend-wait[b-ydqj6my045] { margin-left: 4px; font-size: var(--fs-label); color: var(--text-subtle); }

/* Keeps a consent link and the punctuation after it on one line (the link is inline-flex, so the
   line could otherwise break between them and start the next line with a comma). */
.auth-link-punct[b-ydqj6my045] { white-space: nowrap; }
/* /Components/Account/Shared/AuthSplit.razor.rz.scp.css */
/* The signed-out split, from the ip-b2b design repo:
     /Users/kevinjones/src/wc/ip-b2b/pages/wise.css
       .auth-module, .auth-card, .auth-hero, .auth-hero--cpg, .auth-hero-net, .auth-hero-caption
       and the .auth-* form family (title, sub, row, check, attest, banner, foot, otp, grid-2),
       .ca-pw-rules and .ca-sig.
   The design draws the split inside its app-shell module; here the module is this component's own
   rounded frame, at least the viewport less MainLayout's p-8 padding. Hero pictures are placeholders
   from the design repo (assets/auth-hero.png, assets/auth-hero-signup.png).
   Unlike the design, a form taller than the window grows the frame and the page scrolls, with the hero
   pinned beside it: the design's inner scroll pane hid the end of the long registration stages behind
   an overlay scrollbar, so they read as cut off. The form pane is also wider than the design's
   540 / 460px, which keeps the two-column rows and the password rules from wrapping as much. */

.auth-module[b-rbp2agjl1j] {
    --auth-frame-h: max(560px, calc(100dvh - 4rem));
    display: flex;
    min-height: var(--auth-frame-h);
    box-sizing: border-box;
    overflow: clip;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-card);
}

.auth-card[b-rbp2agjl1j] {
    flex: 1 1 440px;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    padding: 36px clamp(24px, 6%, 64px) 48px;
    box-sizing: border-box;
}

/* Centred when there is room; starts at the top when the form is taller than the frame. */
.auth-card-inner[b-rbp2agjl1j] { width: 100%; max-width: 500px; margin: auto; }

/* Sticky (overflow: clip on the frame keeps the page as its scroller) so the picture stays in view
   while a long form scrolls past it. */
.auth-hero[b-rbp2agjl1j] {
    flex: 1 1 auto;
    min-width: 0;
    position: sticky;
    top: calc(2rem + 1px);
    align-self: flex-start;
    height: calc(var(--auth-frame-h) - 2px); /* inside the frame's 1px border */
    border-radius: 0 var(--r-md) var(--r-md) 0;
    overflow: hidden;
    background: var(--primary) center / cover no-repeat;
    background-image:
        linear-gradient(180deg, rgba(17, 24, 39, 0) 40%, rgba(17, 24, 39, 0.55) 100%),
        url('/images/auth/auth-hero.jpg');
}

.auth-hero--cpg[b-rbp2agjl1j] {
    background-image:
        linear-gradient(180deg, rgba(17, 24, 39, 0) 34%, rgba(17, 24, 39, 0.35) 62%, rgba(13, 22, 44, 0.82) 100%),
        url('/images/auth/auth-hero-signup.jpg');
}

.auth-hero-net[b-rbp2agjl1j] {
    position: absolute;
    right: -12%;
    bottom: -12%;
    width: 92%;
    height: 80%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.6;
}
.auth-hero-net .ahn-lines line[b-rbp2agjl1j] { stroke: rgba(255, 255, 255, 0.22); stroke-width: 0.6; }
.auth-hero-net .ahn-dots circle[b-rbp2agjl1j] { fill: rgba(255, 255, 255, 0.3); }
.auth-hero-net .ahn-dot--bright[b-rbp2agjl1j] { fill: rgba(255, 255, 255, 0.45); }

.auth-hero-caption[b-rbp2agjl1j] {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 26px;
    z-index: 1;
    color: #fff;
}
.auth-hero-caption h2[b-rbp2agjl1j] {
    margin: 0 0 6px;
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}
.auth-hero-caption p[b-rbp2agjl1j] {
    margin: 0;
    max-width: 34ch;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.88);
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
}

/* Narrow: no picture, the form takes the width. */
@media (max-width: 980px) {
    .auth-hero[b-rbp2agjl1j] { display: none; }
    .auth-module[b-rbp2agjl1j] { min-height: 0; }
    .auth-card[b-rbp2agjl1j] { max-width: none; }
}

/* ── The form family, used by the pages inside the split ── */

.auth-card[b-rbp2agjl1j]  .auth-title {
    margin: 0 0 4px;
    font-family: var(--font-serif);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--text);
}
/* FocusOnNavigate focuses the title for screen readers; it is not a control, so no focus ring. */
.auth-card[b-rbp2agjl1j]  .auth-title:focus,
.auth-card[b-rbp2agjl1j]  .auth-title:focus-visible { outline: none; }
.auth-card[b-rbp2agjl1j]  .auth-sub {
    margin: 0 0 22px;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-muted);
}
.auth-card[b-rbp2agjl1j]  .auth-sub strong { color: var(--text); font-weight: 600; }

.auth-card[b-rbp2agjl1j]  .auth-form { display: flex; flex-direction: column; gap: 14px; }

/* WciField captions read as the design's sentence-case auth labels here, not the admin filter caps. */
.auth-card[b-rbp2agjl1j]  .adm-field-label {
    font-size: var(--fs-ui);
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--text);
}

.auth-card[b-rbp2agjl1j]  .auth-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 480px) {
    .auth-card[b-rbp2agjl1j]  .auth-grid-2 { grid-template-columns: 1fr; }
}

.auth-card[b-rbp2agjl1j]  .auth-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 480px) {
    .auth-card[b-rbp2agjl1j]  .auth-grid-3 { grid-template-columns: 1fr; }
}

.auth-card[b-rbp2agjl1j]  .auth-section-title {
    margin: 4px 0 0;
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
}
.auth-card[b-rbp2agjl1j]  .auth-section-title .req { color: var(--sec-red); margin-left: 2px; }
.auth-card[b-rbp2agjl1j]  .auth-section-sub { margin: 2px 0 0; font-size: 0.8125rem; line-height: 1.5; color: var(--text-muted); }

.auth-card[b-rbp2agjl1j]  .auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.auth-card[b-rbp2agjl1j]  .auth-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }

.auth-card[b-rbp2agjl1j]  .auth-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.8125rem;
    color: var(--text-muted);
}
.auth-card[b-rbp2agjl1j]  .auth-check input,
.auth-card[b-rbp2agjl1j]  .auth-attest input {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: var(--primary);
    cursor: pointer;
}
.auth-card[b-rbp2agjl1j]  .auth-attest {
    display: flex;
    gap: 10px;
    padding: 2px 0;
    cursor: pointer;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-muted);
}
.auth-card[b-rbp2agjl1j]  .auth-attest input { margin-top: 2px; }

.auth-card[b-rbp2agjl1j]  .auth-banner {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 11px 14px;
    border-radius: var(--r-md);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.45;
}
.auth-card[b-rbp2agjl1j]  .auth-banner .material-icons { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.auth-card[b-rbp2agjl1j]  .auth-banner--error { background: color-mix(in srgb, var(--sec-red) 10%, transparent); color: var(--sec-red-text); }
.auth-card[b-rbp2agjl1j]  .auth-banner--info { background: var(--primary-soft); color: var(--text-muted); }
.auth-card[b-rbp2agjl1j]  .auth-banner--warn { background: color-mix(in srgb, var(--ter-amber) 16%, transparent); color: var(--text-muted); }
.auth-card[b-rbp2agjl1j]  .auth-banner--good { background: color-mix(in srgb, var(--sec-green) 12%, transparent); color: var(--text-muted); }
.auth-card[b-rbp2agjl1j]  .auth-banner strong { color: var(--text); }

.auth-card[b-rbp2agjl1j]  .auth-foot {
    margin: 20px 0 0;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--text-muted);
}
.auth-card[b-rbp2agjl1j]  .auth-hint-line { margin: 0; font-size: var(--fs-label); color: var(--text-subtle); text-align: center; }

.auth-card[b-rbp2agjl1j]  .auth-spinner {
    width: 40px;
    height: 40px;
    margin: 40px auto 16px;
    border: 4px solid var(--primary-soft);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: auth-spin-b-rbp2agjl1j 0.9s linear infinite;
}
.auth-card[b-rbp2agjl1j]  .auth-loading { text-align: center; font-size: 0.8125rem; color: var(--text-muted); }

@keyframes auth-spin-b-rbp2agjl1j { to { transform: rotate(360deg); } }

/* The one-time code boxes. */
.auth-card[b-rbp2agjl1j]  .auth-otp { display: flex; gap: 8px; justify-content: space-between; }
.auth-card[b-rbp2agjl1j]  .auth-otp input {
    width: 100%;
    max-width: 52px;
    height: 56px;
    text-align: center;
    font-family: inherit;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text);
    background: var(--surface-2, var(--bg));
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.auth-card[b-rbp2agjl1j]  .auth-otp input:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--primary) 55%, var(--border-strong));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

/* The typed signature. */
.auth-card[b-rbp2agjl1j]  .ca-sig { font-family: var(--font-serif); font-style: italic; font-size: 1rem; }

/* Barcode-like values (UPC, EIN). */
.auth-card[b-rbp2agjl1j]  .auth-mono { font-family: ui-monospace, monospace; }

/* PasswordRequirements as the design's two-column rule list (.ca-pw-rules): no box, no heading. */
.auth-card[b-rbp2agjl1j]  .pw-requirements {
    margin: -4px 0 0;
    padding: 0;
    border: 0;
    background: none;
}
.auth-card[b-rbp2agjl1j]  .pw-requirements > p { display: none; }
.auth-card[b-rbp2agjl1j]  .pw-requirements ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 14px;
    margin: 0;
}
.auth-card[b-rbp2agjl1j]  .pw-requirements ul > li { margin: 0; font-size: var(--fs-label); }
@media (max-width: 480px) {
    .auth-card[b-rbp2agjl1j]  .pw-requirements ul { grid-template-columns: 1fr; }
}
/* /Components/Account/Shared/ExternalLoginPicker.razor.rz.scp.css */
/* The design's divider and SSO row (ip-b2b pages/wise.css .auth-divider, .auth-sso). */
.auth-divider[b-yc72lxo4kd] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-subtle);
}
.auth-divider[b-yc72lxo4kd]::before,
.auth-divider[b-yc72lxo4kd]::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.auth-sso[b-yc72lxo4kd] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.auth-sso svg[b-yc72lxo4kd] { width: 17px; height: 17px; flex-shrink: 0; }
/* /Components/DesignSystem/WciAccordion.razor.rz.scp.css */
/* ===================================================================
   WCI component: Accordion (WciAccordion, INTEL-679)
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo (ab499e3, pulled
   2026-10-07; the prototype host serves the same file at
   http://3.17.180.155:4144/pages/wise.css):
     pages/wise.css
       lines 26566-26584  "Content accordion" (.wise-acc, -item, -head,
                          its marker, hover and focus, the icon, -title,
                          -meta, -chev and its open turn, -body)
   Module: Component Library > Navigation > "Accordion"
   (js/all-modules-flow.js, the card dsc-comp-accordion).
   DEVIATION: the body's paragraphs are the host's RenderFragment, so
   they carry the host's scope attribute, not this one; the two
   .wise-acc-body p rules reach them with ::deep.
   The exclusive behaviour the design scripts (js/wise-toolbar.js, the
   toggle listener) is the native <details name> here: see the markup.
   Class names are kept IDENTICAL to wise.css so a future re-port is a
   section diff.
   =================================================================== */

.wise-acc[b-4j86e7xe61] { width: 100%; display: flex; flex-direction: column; font-family: inherit; }
.wise-acc-item[b-4j86e7xe61] { border-top: 1px solid var(--border); }
.wise-acc-item:last-child[b-4j86e7xe61] { border-bottom: 1px solid var(--border); }
.wise-acc-head[b-4j86e7xe61] {
  display: flex; align-items: center; gap: 10px; padding: 12px 4px; cursor: pointer; list-style: none;
  font-size: 0.875rem; font-weight: 700; color: var(--text); user-select: none;
}
.wise-acc-head[b-4j86e7xe61]::-webkit-details-marker { display: none; }
.wise-acc-head:hover[b-4j86e7xe61] { color: var(--primary-ink, var(--primary)); }
.wise-acc-head:focus-visible[b-4j86e7xe61] { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; }
.wise-acc-head > .material-symbols-outlined:first-child[b-4j86e7xe61] { font-size: 18px; color: var(--text-subtle); }
.wise-acc-title[b-4j86e7xe61] { flex: 1 1 auto; min-width: 0; }
.wise-acc-meta[b-4j86e7xe61] { font-size: 11px; font-weight: 700; color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.wise-acc-chev[b-4j86e7xe61] { font-size: 20px; color: var(--text-subtle); transition: transform .2s ease; }
.wise-acc-item[open] > .wise-acc-head .wise-acc-chev[b-4j86e7xe61] { transform: rotate(180deg); }
.wise-acc-body[b-4j86e7xe61] { padding: 0 4px 14px 32px; font-size: 0.8125rem; line-height: 1.55; color: var(--text-muted); }
.wise-acc-body[b-4j86e7xe61]  p { margin: 0 0 8px; } /* see DEVIATION in the header */
.wise-acc-body[b-4j86e7xe61]  p:last-child { margin-bottom: 0; }

/* ===================================================================
   APP-OWNED ADDITIONS (not in wise.css)
   =================================================================== */

/* The chevron turns at once under reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .wise-acc-chev[b-4j86e7xe61] { transition: none; }
}
/* /Components/DesignSystem/WciActivityStrip.razor.rz.scp.css */
/* ===================================================================
   WCI component: Activity strip (WciActivityStrip), INTEL-410
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo, revision served by the
   prototype host on 2026-09-28 (http://3.17.180.155:4144/):
     js/chat-activity-strip.js
       lines 186-396   ensureActivityStripStyles(): .wa-activity-strip,
                       .wa-activity-rail, .wa-activity-tick and its hit zone,
                       --count, the count digit, the two-tab stack, the
                       turn-id caption, the per-type fills, --prompt and its
                       up-triangle, reduced motion
     pages/wise.css has only the catalog's .dsc-demo copy (23055-23110).
   Class names are kept IDENTICAL. What is NOT verbatim:
     - The rail and its marks are drawn by wwwroot/js/wci/wci-activity-strip.js
       into this component's element, so they carry no scope attribute and
       every selector below the strip itself is written with ::deep.
     - The right-edge variants (html.activity-strip-right) are not ported:
       the app keeps the design's default, the left edge.
     - The landing flash (.wa-activity-flash and its keyframes) is not a
       class here: it lands on transcript rows no scoped sheet can reach, so
       the script plays it with the Web Animations API.
     - The strip is absolute inside the chat, not fixed on <body> (see
       APP-OWNED ADDITIONS and the script's header).
   Requires wwwroot/css/wci/wci-tokens.css (--act-output is defined there;
   --act-source / --act-database / --act-prompt fall back as written).
   =================================================================== */

.wa-activity-strip[b-o4kdtb6bx0] {
  position: fixed;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  z-index: 70;
  pointer-events: none;
  /* The strip is sized to the WHOLE chat module (in refresh) and clipped to the
     module's rounded silhouette via clip-path. The module's own overflow:hidden
     can't reach a body-level position:fixed element, so we replicate that clip
     here — letting the rail + ticks run to the very top/bottom edge while their
     ends are trimmed at the rounded corners instead of poking into the
     transparent notch just outside them. */
}
/* The visible edge rail: a thin, solid track pinned to the module's chosen side
   that runs the FULL module height (corner to corner) so the ticks read as
   riding a continuous edge line. Its square ends are trimmed by the parent
   strip's clip-path where the module rounds.*/
.wa-activity-strip[b-o4kdtb6bx0]  .wa-activity-rail {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: color-mix(in srgb, var(--border-strong, var(--border)) 90%, transparent);
}
/* Ticks are small rectangles that jut out past the 3px rail, so each landmark
   reads as a tab poking out of the strip. On the LEFT edge (default) they sit
   flush-left and jut RIGHT; the right-edge variant below mirrors them.*/
.wa-activity-strip[b-o4kdtb6bx0]  .wa-activity-tick {
  position: absolute;
  left: 0;
  right: auto;
  width: 9px;
  height: 13px;
  transform: translateY(-50%);
  border-radius: 0 4px 4px 0;
  pointer-events: auto;
  cursor: pointer;
  /* A flat fill with just a whisper of top-down shading — enough to read as a
     solid tab with a hint of dimension, without the glossy "bubble" look the
     stronger highlight/shadow gradient gave it. */
  background-image: linear-gradient(155deg,
    color-mix(in srgb, #fff 12%, transparent),
    color-mix(in srgb, #fff 0%, transparent) 55%,
    color-mix(in srgb, #000 6%, transparent));
  box-shadow: 1px 0.5px 1px rgba(0, 0, 0, 0.12);
  transition: width 0.12s ease;
}
/* Invisible enlarged hit zone — a 3px sliver is too fine a click target,
   and clicks that land here also get forwarded through the pane-resize
   handle (see pane-resize.js), so the zones must agree.*/
.wa-activity-strip[b-o4kdtb6bx0]  .wa-activity-tick::after {
  content: "";
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: 0;
  right: -8px;
}
.wa-activity-strip[b-o4kdtb6bx0]  .wa-activity-tick:hover { width: 14px; }
/* Counted landmark: one ear-mark standing for several outputs made in the
   same prompt, with a tiny number centered in the fill. Slightly wider/taller
   than a lone tick so the digit reads; hover still widens it.*/
.wa-activity-strip[b-o4kdtb6bx0]  .wa-activity-tick--count {
  width: 15px;
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wa-activity-strip[b-o4kdtb6bx0]  .wa-activity-tick--count:hover { width: 19px; }
.wa-activity-strip[b-o4kdtb6bx0]  .wa-activity-tick-count {
  font-size: 8px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: #fff;
  pointer-events: none;
  user-select: none;
}
/* Multi-version landmark: two identical tabs stacked so close they read as
   one unit. The second peeks ~4px below the first — a binary "more than
   one" flag, never a count of three or four.*/
.wa-activity-strip[b-o4kdtb6bx0]  .wa-activity-tick-stack {
  position: absolute;
  left: 0;
  right: auto;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  cursor: pointer;
}
.wa-activity-strip[b-o4kdtb6bx0]  .wa-activity-tick-stack .wa-activity-tick:first-child { z-index: 1; }
.wa-activity-strip[b-o4kdtb6bx0]  .wa-activity-tick-stack .wa-activity-tick + .wa-activity-tick { margin-top: -9px; }
.wa-activity-strip[b-o4kdtb6bx0]  .wa-activity-tick-stack:hover .wa-activity-tick { width: 14px; }
.wa-activity-strip[b-o4kdtb6bx0]  .wa-activity-tick-stack:hover .wa-activity-tick-id { opacity: 0.9; }
/* Turn-ID caption riding beside each tick in tiny type — always reads INTO
   the module, never off the rim. Hidden by default so the rail stays clean;
   it fades in only while its tick is hovered (see the :hover rule below).*/
.wa-activity-strip[b-o4kdtb6bx0]  .wa-activity-tick-id {
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  margin-left: 4px;
  font-size: 8px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.12s ease;
  pointer-events: none;
  user-select: none;
}
.wa-activity-strip[b-o4kdtb6bx0]  .wa-activity-tick:hover .wa-activity-tick-id { opacity: 0.9; }
/* Distinct hues per landmark type (retunable per theme/palette).*/
.wa-activity-strip[b-o4kdtb6bx0]  .wa-activity-tick--output { background-color: var(--act-output, var(--warm-400, #946005)); }
.wa-activity-strip[b-o4kdtb6bx0]  .wa-activity-tick--source { background-color: var(--act-source, #12b76a); }
.wa-activity-strip[b-o4kdtb6bx0]  .wa-activity-tick--database { background-color: var(--act-database, #f79009); }
/* Jump-to-last-prompt tab: brand-blue fill, always the same slot on the
   rail (just above the composer). A hair larger than a landmark tick so the
   centered up-triangle stays readable; hover still widens like the others.*/
.wa-activity-strip[b-o4kdtb6bx0]  .wa-activity-tick--prompt {
  background-color: var(--act-prompt, var(--primary, #25507C));
  width: 13px;
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.wa-activity-strip[b-o4kdtb6bx0]  .wa-activity-tick--prompt:hover { width: 18px; }
.wa-activity-strip[b-o4kdtb6bx0]  .wa-activity-tick-tri {
  display: block;
  width: 0;
  height: 0;
  border-left: 2.5px solid transparent;
  border-right: 2.5px solid transparent;
  border-bottom: 3.5px solid #fff;
  pointer-events: none;
  flex: 0 0 auto;
}
@media (prefers-reduced-motion: reduce) {
  .wa-activity-strip[b-o4kdtb6bx0]  .wa-activity-tick,
  .wa-activity-strip[b-o4kdtb6bx0]  .wa-activity-tick-id { transition: none; }
  
}

/* ---- APP-OWNED ADDITIONS ---- */
/* Seated inside the chat's positioned box (WiseAiChat), covering it corner
   to corner, instead of the design's body-level position: fixed (which
   the design needs only to clear its pane-resize overlay). Above the
   transcript, below the chat's in-chat overlays (the What can I ask?
   panel's layer is 59). */
.wa-activity-strip[b-o4kdtb6bx0] { position: absolute; inset: 0; width: auto; height: auto; z-index: 20; }
/* /Components/DesignSystem/WciAskPanel.razor.rz.scp.css */
/* ===================================================================
   WCI component: What can I ask? (WciAskPanel), INTEL-427
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo, revision served by the
   prototype host on 2026-09-28 (http://3.17.180.155:4144/):
     js/chat-history.js (the shared .wch-sidebar shell it injects)
       lines 36-38, 40-57   .wch-host, .wch-scrim, .wch-sidebar, .wch-right,
                            the open animations and the light-theme lines
       lines 58-61          .wch-head, .wch-head-title
       line  170            .wch-controls
     js/wiseai-chat.js (the live chat's injected sheet)
       lines 2470-2478      .wch-ask-empty, .wch-ask-intro, .wch-ask-scroll,
                            the sticky .wch-ask-panel head (the #modules-row
                            docked lines 2478-2480 are not ported)
       lines 2481-2490      .wch-ask-list, groups and their titles (DM Sans; the design dropped serif, ip-b2b 3c70c01)
       lines 2537-2554      .wch-ask-search, its input and clear button
       lines 2558-2560      the .wch-ask-panel headline (DM Sans, as above)
       lines 2578-2596      .wch-ask-toolbar, .wch-ask-sort, .wch-ask-filters,
                            .wch-ask-filter and its active / empty states,
                            .wch-ask-group-desc
       lines 2598-2634      .wch-ask-cap, its head, icon, titles, the
                            .wch-ask-prompts rows, their actions, and the
                            "Behind the scenes" tools line
     js/chat-ask.js
       lines 146-185        mount(): the panel markup
       lines 211-233        capHtml(): a capability and its prompts
   Class names are kept IDENTICAL. What is NOT verbatim:
     - Not ported, they belong to the Module shell (INTEL-426): the docked
       .wch-docked / #modules-row rules, the breakout and the width toggle.
       Not ported, no host: the non-catalog .wch-ask-card mode
       (2492-2525) and .wch-head-btn (2527-2533).
     - The .wch-ask-empty rule is ported but the empty line is WciEmptyState
       (INTEL-395), as every other list's is.
   The design is dark-first: .wch-sidebar paints navy and html:not(.dark)
   lines repaint it white. Both are kept as written.
   =================================================================== */

/* ---- The shell (js/chat-history.js 36-61, 170) ---- */
.wch-scrim[b-x8mmy89hk5]{position:absolute;inset:0;z-index:59;background:rgba(4,8,18,0.42);display:none;}
.wch-scrim.wch-open[b-x8mmy89hk5]{display:block;animation:wchFade-b-x8mmy89hk5 .28s ease both;}
@keyframes wchFade-b-x8mmy89hk5{from{opacity:0}to{opacity:1}}
.wch-sidebar[b-x8mmy89hk5]{position:absolute;top:0;bottom:0;left:0;width:300px;max-width:86%;z-index:60;display:none;flex-direction:column;
  --wch-tree-bg:var(--card,var(--surface,#0F1830));
  background:var(--card,var(--surface,#0F1830));color:var(--text,#C5CFD7);
  border-right:1px solid rgba(255,255,255,0.10);box-shadow:10px 0 34px rgba(0,0,0,0.34);}
.wch-sidebar.wch-right[b-x8mmy89hk5]{left:auto;right:0;border-right:0;border-left:1px solid rgba(255,255,255,0.10);box-shadow:-10px 0 34px rgba(0,0,0,0.34);}
.wch-sidebar.wch-open[b-x8mmy89hk5]{display:flex;animation:wchIn-b-x8mmy89hk5 .32s cubic-bezier(.34,1.4,.64,1) both;}
.wch-sidebar.wch-right.wch-open[b-x8mmy89hk5]{animation:wchInR-b-x8mmy89hk5 .32s cubic-bezier(.34,1.4,.64,1) both;}
@keyframes wchIn-b-x8mmy89hk5{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
@keyframes wchInR-b-x8mmy89hk5{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
html:not(.dark) .wch-sidebar[b-x8mmy89hk5]{background:#fff;color:#1F2733;border-color:rgba(0,0,0,0.08);box-shadow:10px 0 34px rgba(20,30,60,0.12);--wch-tree-bg:#fff;}
html:not(.dark) .wch-sidebar.wch-right[b-x8mmy89hk5]{box-shadow:-10px 0 34px rgba(20,30,60,0.12);}
.wch-head[b-x8mmy89hk5]{display:flex;align-items:center;gap:8px;padding:14px 12px 12px 16px;flex-shrink:0;border-bottom:1px solid rgba(255,255,255,0.08);}
html:not(.dark) .wch-head[b-x8mmy89hk5]{border-bottom-color:rgba(0,0,0,0.07);}
.wch-head-title[b-x8mmy89hk5]{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px;flex:1;}
.wch-head-title .material-symbols-outlined[b-x8mmy89hk5]{font-size:19px;color:var(--primary-ink,var(--primary,#2F6DF6));}
.wch-controls[b-x8mmy89hk5]{display:inline-flex;align-items:center;gap:2px;flex-shrink:0;margin-left:auto;}

/* ---- The panel (js/wiseai-chat.js 2470-2634) ---- */
.wch-ask-empty[b-x8mmy89hk5] { padding: 18px 16px; color: var(--text-muted); font-size: 13.5px; line-height: 1.5; }
.wch-ask-intro[b-x8mmy89hk5] { margin: 2px 16px 8px; font-size: 13px; line-height: 1.5; opacity: .82; }
/* One scroller for the whole catalog — header, intro, search, chips, and
   prompts. The header sticks so the width control and ⋯ stay reachable. */
.wch-ask-scroll[b-x8mmy89hk5] { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.wch-ask-panel .wch-head[b-x8mmy89hk5] { position: sticky; top: 0; z-index: 3;
  background: var(--card, var(--surface, #0F1830)); }
html:not(.dark) .wch-ask-panel .wch-head[b-x8mmy89hk5] { background: #fff; }
.wch-ask-panel .wch-ask-list[b-x8mmy89hk5], .wch-ask-panel .wch-list[b-x8mmy89hk5] { flex: none; overflow: visible; padding: 4px 10px 14px; }
.wch-ask-group[b-x8mmy89hk5] { margin: 0; padding: 10px 0 6px; }
.wch-ask-group + .wch-ask-group[b-x8mmy89hk5] { margin-top: 8px; padding-top: 28px;
  border-top: 1px solid rgba(20,40,80,0.10); }
html.dark .wch-ask-group + .wch-ask-group[b-x8mmy89hk5] { border-top-color: rgba(255,255,255,0.10); }
.wch-ask-group-title[b-x8mmy89hk5] { display: flex; align-items: center; gap: 8px; padding: 4px 6px 8px;
  font-family: "WISE Digits", "DM Sans", system-ui, sans-serif; font-size: 1.12rem; font-weight: 800;
  letter-spacing: -.01em; line-height: 1.2; text-transform: none; color: var(--text); opacity: 1; }
.wch-ask-group-title .material-symbols-outlined[b-x8mmy89hk5] { font-size: 20px; opacity: .9; }
.wch-ask-cards[b-x8mmy89hk5] { display: flex; flex-direction: column; gap: 18px; }

/* Search row — pinned above the prompt list so long libraries can be
   filtered by keyword (mirrors the Turns / History search field: icon
   overlay with pointer-events:none, clear only when there is a query). */
.wch-ask-search[b-x8mmy89hk5] { position: relative; display: flex; align-items: center; margin: 0 12px 8px; }
.wch-ask-search > .material-symbols-outlined[b-x8mmy89hk5] { position: absolute; left: 11px; font-size: 18px; opacity: .5; pointer-events: none; }
.wch-ask-search-input[b-x8mmy89hk5] { width: 100%; height: 38px; box-sizing: border-box; padding: 0 32px 0 36px;
  border-radius: 999px; font: inherit; font-size: 13.5px; color: inherit; outline: none;
  background: rgba(20,40,80,0.04); border: 1px solid rgba(20,40,80,0.10);
  transition: border-color .15s ease, box-shadow .15s ease; }
html.dark .wch-ask-search-input[b-x8mmy89hk5] { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); }
.wch-ask-search-input[b-x8mmy89hk5]::placeholder { color: var(--text-subtle); opacity: .8; }
.wch-ask-search-input:focus[b-x8mmy89hk5], .wch-ask-search:focus-within .wch-ask-search-input[b-x8mmy89hk5] {
  border-color: var(--primary, #2F6DF6);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #2F6DF6) 18%, transparent); }
.wch-ask-search-clear[b-x8mmy89hk5] { position: absolute; right: 8px; width: 22px; height: 22px;
  border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer;
  display: none; align-items: center; justify-content: center; opacity: .6; }
.wch-ask-search-clear:hover[b-x8mmy89hk5] { background: rgba(20,40,80,0.08); color: var(--text); opacity: 1; }
html.dark .wch-ask-search-clear:hover[b-x8mmy89hk5] { background: rgba(255,255,255,0.12); }
.wch-ask-search-clear .material-symbols-outlined[b-x8mmy89hk5] { font-size: 16px; }
.wch-ask-search.has-q .wch-ask-search-clear[b-x8mmy89hk5] { display: flex; }

/* "What can I ask?" header — title face (like the docked module headers),
   and no leading icon in front of it. */
.wch-ask-panel .wch-head-title[b-x8mmy89hk5] { font-family: "WISE Digits", "DM Sans", system-ui, sans-serif;
  font-weight: 800; font-size: 1.2rem; letter-spacing: -.01em; line-height: 1.16; }
.wch-ask-panel .wch-head-title .material-symbols-outlined[b-x8mmy89hk5] { display: none; }

.wch-ask-toolbar[b-x8mmy89hk5] { display: flex; flex-direction: column; gap: 8px; margin: 0 12px 8px; }
.wch-ask-sort[b-x8mmy89hk5] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wch-ask-filters[b-x8mmy89hk5] { display: flex; flex-wrap: wrap; gap: 6px; }
.wch-ask-filter[b-x8mmy89hk5] { display: inline-flex; align-items: center; box-sizing: border-box; height: 28px;
  border: 1px solid var(--border-strong); background: color-mix(in srgb, var(--primary) 10%, #fff);
  color: var(--text-muted); border-radius: 999px; padding: 0 11px; font-family: inherit;
  font-size: var(--fs-label); font-weight: 500; line-height: 1; cursor: pointer; white-space: nowrap;
  transition: background .14s ease, border-color .14s ease, color .14s ease; }
.wch-ask-filter:hover[b-x8mmy89hk5] { background: color-mix(in srgb, var(--primary) 16%, #fff);
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border-strong)); color: var(--text); }
html.dark .wch-ask-filter[b-x8mmy89hk5] { background: color-mix(in srgb, var(--primary-bright, #8B9FAF) 14%, transparent); border-color: var(--primary); }
html.dark .wch-ask-filter:hover[b-x8mmy89hk5] { background: color-mix(in srgb, var(--primary-bright, #8B9FAF) 20%, transparent); color: var(--text); }
.wch-ask-filter.is-active[b-x8mmy89hk5] { background: var(--primary, #2F6DF6); border-color: var(--primary, #2F6DF6); color: #fff; font-weight: 600; }
.wch-ask-filter.is-active:hover[b-x8mmy89hk5] { background: color-mix(in srgb, var(--primary) 90%, #000);
  border-color: color-mix(in srgb, var(--primary) 90%, #000); color: #fff; }
html.dark .wch-ask-filter.is-active[b-x8mmy89hk5] { background: var(--primary); border-color: var(--primary); color: #fff; }
.wch-ask-filter.is-empty[b-x8mmy89hk5] { opacity: .45; }

.wch-ask-group-desc[b-x8mmy89hk5] { padding: 0 6px 12px; font-size: 13px; line-height: 1.5; opacity: .8; }

.wch-ask-cap[b-x8mmy89hk5] { border: 0; background: none; border-radius: 0; padding: 2px 6px 0; cursor: pointer; }
html:not(.dark) .wch-ask-cap[b-x8mmy89hk5] { border: 0; background: none; }
.wch-ask-cap:hover[b-x8mmy89hk5] { background: none; border: 0; }
html:not(.dark) .wch-ask-cap:hover[b-x8mmy89hk5] { background: none; border: 0; }
.wch-ask-cap-head[b-x8mmy89hk5] { display: flex; align-items: flex-start; gap: 11px; }
.wch-ask-cap-ico[b-x8mmy89hk5] { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  margin-top: 1px; background: none; color: var(--primary-ink, var(--primary, #2F6DF6)); }
.wch-ask-cap-ico .material-symbols-outlined[b-x8mmy89hk5] { font-size: 22px; }
.wch-ask-cap-titles[b-x8mmy89hk5] { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wch-ask-cap-title[b-x8mmy89hk5] { font-size: 15px; font-weight: 650; line-height: 1.35; }
.wch-ask-cap-desc[b-x8mmy89hk5] { font-size: 13px; line-height: 1.48; opacity: .8; }

.wch-ask-prompts[b-x8mmy89hk5] { display: flex; flex-direction: column; gap: 5px; margin: 10px 0 0; }
.wch-ask-prompt[b-x8mmy89hk5] { position: relative; display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 9px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.02);
  border-radius: 9px; cursor: pointer; text-align: left; color: inherit; font-family: inherit;
  transition: background .14s ease, border-color .14s ease; }
.wch-ask-prompt:hover[b-x8mmy89hk5] { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.16); }
html:not(.dark) .wch-ask-prompt[b-x8mmy89hk5] { border-color: rgba(20,40,80,0.09); background: rgba(20,40,80,0.015); }
html:not(.dark) .wch-ask-prompt:hover[b-x8mmy89hk5] { background: rgba(20,40,80,0.05); border-color: rgba(20,40,80,0.18); }
.wch-ask-prompt-text[b-x8mmy89hk5] { flex: 1 1 auto; min-width: 0; font-size: var(--fs-label); line-height: 1.45;
  color: var(--primary-ink, var(--primary, #2F6DF6)); }
html.dark .wch-ask-prompt-text[b-x8mmy89hk5] { color: #cfe0ff; }
.wch-ask-prompt-actions[b-x8mmy89hk5] { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; }
.wch-ask-prompt-btn[b-x8mmy89hk5] { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border: 0; border-radius: 0; background: none; color: var(--text-muted); cursor: pointer;
  opacity: .6; transition: color .14s ease, opacity .14s ease, transform .12s ease; }
.wch-ask-prompt:hover .wch-ask-prompt-btn[b-x8mmy89hk5] { opacity: .85; }
.wch-ask-prompt-btn:hover[b-x8mmy89hk5] { background: none; color: var(--primary-ink, var(--primary, #2F6DF6)); opacity: 1; transform: scale(1.1); }
.wch-ask-prompt-btn .material-symbols-outlined[b-x8mmy89hk5] { font-size: 17px; font-variation-settings: 'FILL' 1; }
@media (hover: none) { .wch-ask-prompt-btn[b-x8mmy89hk5] { opacity: .85; } }

.wch-ask-cap-tools[b-x8mmy89hk5] { margin: 10px 0 0; padding-top: 9px; border-top: 1px dashed rgba(255,255,255,0.09);
  font-size: 12px; line-height: 1.5; opacity: .72; }
html:not(.dark) .wch-ask-cap-tools[b-x8mmy89hk5] { border-top-color: rgba(20,40,80,0.12); }
.wch-ask-cap-tools b[b-x8mmy89hk5] { font-weight: 700; text-transform: none; letter-spacing: 0; opacity: .95; }
.wch-ask-cap-tools code[b-x8mmy89hk5] { font-size: 11.5px; opacity: .95; }

/* ---- APP-OWNED ADDITIONS ---- */
/* The layer the overlay script tracks (wci-overlay.js: focus in and back,
   Tab kept inside, Escape): the chat-sized box the scrim and the panel sit
   in. The host's chat body is the positioned ancestor (the design's
   .wch-host), so both cover the chat only, never the page. */
.wci-ask-layer[b-x8mmy89hk5] { position: absolute; inset: 0; z-index: 59; }
/* The panel is the design's 300px until a chat is wide enough to give it
   more; a phone-width chat keeps the design's 86% cap. */
.wch-ask-panel[b-x8mmy89hk5] { width: min(360px, 86%); }
.wch-ask-panel:focus[b-x8mmy89hk5] { outline: none; }
/* Docked (the design's breakout, chat-ask.js setDocked()): the body of a
   WciModule drawer, which owns the head, the width and the paint. The
   catalog scrolls under the module head; the design's docked list keeps an
   18px foot (wiseai-chat.js 2478-2480). */
.wch-ask-panel.wch-ask-docked[b-x8mmy89hk5] { width: auto; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.wch-ask-docked .wch-ask-scroll[b-x8mmy89hk5] { padding-top: 8px; }
.wch-ask-panel.wch-ask-docked .wch-ask-list[b-x8mmy89hk5] { padding-bottom: 18px; }
/* Loading: the list is the positioned card the grid spinner fills
   (WiseGridLoading), with room for it before any rows arrive. */
.wch-ask-list.wci-ask-loading[b-x8mmy89hk5] { position: relative; min-height: 220px; }
/* Busy: Ask waits for the running turn; the row stops looking tappable,
   Insert keeps its hover. */
.wch-ask-prompt.is-busy[b-x8mmy89hk5] { cursor: default; }
button.wch-ask-prompt-text:disabled[b-x8mmy89hk5] { cursor: default; opacity: .6; }
/* The prompt text is the row's real Ask button (the design's is a span
   inside a <button>, which no keyboard reaches), and Insert is a real
   button: reset them to the design's look. */
button.wch-ask-prompt-text[b-x8mmy89hk5] { border: 0; background: none; padding: 0; text-align: left; cursor: pointer;
  font-family: inherit; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
button.wch-ask-prompt-btn[b-x8mmy89hk5] { padding: 0; }
.wch-ask-prompt:focus-within[b-x8mmy89hk5] { border-color: var(--primary); }
button.wch-ask-prompt-text:focus-visible[b-x8mmy89hk5],
button.wch-ask-prompt-btn:focus-visible[b-x8mmy89hk5],
.wch-ask-filter:focus-visible[b-x8mmy89hk5],
.wch-ask-search-clear:focus-visible[b-x8mmy89hk5] { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
  .wch-scrim.wch-open[b-x8mmy89hk5], .wch-sidebar.wch-open[b-x8mmy89hk5], .wch-sidebar.wch-right.wch-open[b-x8mmy89hk5] { animation: none; }
  .wch-ask-filter[b-x8mmy89hk5], .wch-ask-prompt[b-x8mmy89hk5], .wch-ask-prompt-btn[b-x8mmy89hk5], .wch-ask-search-input[b-x8mmy89hk5] { transition: none; }
}
/* /Components/DesignSystem/WciAttachmentChip.razor.rz.scp.css */
/* ===================================================================
   WCI component: Attachments (WciAttachmentChip), INTEL-376
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo at commit 2c36820:
     pages/wise.css
       lines 10544-10628  pending chips (.fl-attach-*) and sent chips
                          (.sc-att-*), the base / extension split
     js/wiseai-chat.js (the live chat's injected sheet)
       lines 2685-2687    zoom-in cursors on photo thumbnails
     js/all-modules-flow.js
       lines 4490-4514    module "Attachments" (demo template)
   Class names are kept IDENTICAL. What is NOT verbatim:
     - .fl-model-row and .fl-attachments (the first two rules of
       10544-10628) are the composer's rows and live in
       WciChatComposer.razor.css; .sc-att-row is the You line's row and
       lives in WciTranscriptLine.razor.css.
     - The data-mail-attach-list exclusion on the mono name is dropped:
       the support-email form it guards is not in the app.
     - The lightbox scrim (.wai-img-*) is not ported: a photo opens
       WciImageLightbox, which is WciModal's shell.
   =================================================================== */

/* ---- Pending (wise.css 10544-10628) ---- */
.fl-attach-chip[b-dw3grgqywl] {
  display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; max-width: 160px;
  padding: 1px 6px 1px 2px; border-radius: 999px;
  background: var(--surface-3, var(--surface)); border: 1px solid var(--border-strong);
  animation: flAttachPop-b-dw3grgqywl 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
html.dark .fl-attach-chip[b-dw3grgqywl] { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); }
@keyframes flAttachPop-b-dw3grgqywl { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .fl-attach-chip[b-dw3grgqywl] { animation: none; } }
.fl-attach-thumb[b-dw3grgqywl] {
  width: 16px; height: 16px; flex-shrink: 0; border-radius: 50%;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  background-color: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border);
  display: inline-flex; align-items: center; justify-content: center;
}
.fl-attach-thumb--icon[b-dw3grgqywl] { color: var(--text-muted); }
.fl-attach-thumb--icon .material-symbols-outlined[b-dw3grgqywl] { font-size: 11px !important; }
.fl-attach-name[b-dw3grgqywl] {
  font-size: 10.5px; font-weight: 500; color: var(--text); line-height: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
/* Chat composer attachments ride the mono font and the same base/ext split as
   the sent transcript chip. */
.fl-attach-name[b-dw3grgqywl] {
  font-family: var(--font-mono);
  display: inline-flex; align-items: baseline; text-overflow: clip;
}
.fl-attach-x[b-dw3grgqywl] {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 14px; height: 14px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--text-subtle); cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.fl-attach-x:hover[b-dw3grgqywl] { background: color-mix(in srgb, var(--sec-red, #DC3038) 16%, transparent); color: var(--sec-red, #DC3038); }
.fl-attach-x .material-symbols-outlined[b-dw3grgqywl] { font-size: 11px !important; }

/* ---- Sent (wise.css 10544-10628) ---- */
.sc-att-chip[b-dw3grgqywl] {
  display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; max-width: 160px;
  padding: 1px 8px 1px 2px; border-radius: 999px;
  background: var(--surface-3, var(--surface)); border: 1px solid var(--border-strong);
}
button.sc-att-chip[b-dw3grgqywl] {
  appearance: none; font: inherit; color: inherit; text-align: left;
}
.sc-att-chip:has(.sc-att-thumb:not(.sc-att-thumb--icon))[b-dw3grgqywl] { cursor: zoom-in; }
.sc-att-thumb:not(.sc-att-thumb--icon)[b-dw3grgqywl] { cursor: zoom-in; }
html.dark .sc-att-chip[b-dw3grgqywl] { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); }
.sc-att-thumb[b-dw3grgqywl] {
  width: 16px; height: 16px; flex-shrink: 0; border-radius: 50%;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  background-color: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border);
  display: inline-flex; align-items: center; justify-content: center;
}
.sc-att-name[b-dw3grgqywl] {
  font-size: 10.5px; font-weight: 500; color: var(--text); line-height: 1;
  min-width: 0; font-family: var(--font-mono);
  display: inline-flex; align-items: baseline; overflow: hidden;
}
/* Uploaded file names split into a truncating base + a pinned, bold extension
   so the extension stays visible even when a long name ellipsises. */
.sc-att-base[b-dw3grgqywl], .fl-attach-name .sc-att-base[b-dw3grgqywl] {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sc-att-ext[b-dw3grgqywl] { flex: 0 0 auto; font-weight: 700; white-space: nowrap; }
/* A non-image file drops its leading icon, so the chip is just the mono name —
   give it even padding now that no thumb rides its left edge. */
.sc-att-chip--file[b-dw3grgqywl] { padding: 1px 8px; }

/* ---- Zoom cursors (js/wiseai-chat.js 2685-2687) ---- */
.fl-attach-thumb[b-dw3grgqywl] { cursor: zoom-in; }
button.sc-att-chip[b-dw3grgqywl] { cursor: zoom-in; font: inherit; }

/* ---- APP-OWNED ADDITIONS ---- */
/* The photo thumbnail is a real button (PR #556 review n4): no button chrome. */
button.fl-attach-thumb[b-dw3grgqywl] { appearance: none; border: 0; padding: 0; margin: 0; font: inherit; }
/* The app uploads each file the moment it is picked: a spinner holds the
   thumbnail seat until it lands, and a failed file stays in the row, in the
   danger tone, until the member removes it. */
.wci-attach-spinner[b-dw3grgqywl] { cursor: default; box-shadow: none; background: transparent; color: var(--text-muted); }
.wci-attach-spinner .material-symbols-outlined[b-dw3grgqywl] { font-size: 12px !important; animation: wciAttachSpin-b-dw3grgqywl 0.9s linear infinite; }
@keyframes wciAttachSpin-b-dw3grgqywl { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wci-attach-spinner .material-symbols-outlined[b-dw3grgqywl] { animation: none; } }
.fl-attach-thumb--icon[b-dw3grgqywl] { cursor: default; }
.wci-attach-error[b-dw3grgqywl] { border-color: color-mix(in srgb, var(--sec-red, #DC3038) 55%, transparent); }
.wci-attach-error .fl-attach-name[b-dw3grgqywl],
.wci-attach-error .fl-attach-thumb--icon[b-dw3grgqywl] { color: var(--sec-red, #DC3038); }
.fl-attach-x:disabled[b-dw3grgqywl] { cursor: default; opacity: 0.5; }
.fl-attach-x:disabled:hover[b-dw3grgqywl] { background: transparent; color: var(--text-subtle); }
.fl-attach-x:focus-visible[b-dw3grgqywl],
.fl-attach-thumb:focus-visible[b-dw3grgqywl],
.sc-att-chip:focus-visible[b-dw3grgqywl] { outline: 2px solid var(--primary); outline-offset: 2px; }
/* /Components/DesignSystem/WciAvatar.razor.rz.scp.css */
/* ===================================================================
   WCI component: Avatars (WciAvatar), INTEL-407
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo, revision served by the
   prototype host on 2026-09-24 (http://3.17.180.155:4144/pages/wise.css,
   Last-Modified 2026-09-24 05:30:33 GMT):
     pages/wise.css
       lines 16842-16860  .adm-avatar, .adm-avatar--photo (identity circle)
       lines 8608-8615    .sc-avatar (the chip box)
       lines 8627-8631    .sc-avatar-you (ringed member chip)
       lines 2253-2270    .wise-avatar-img, .has-avatar-img (photo fills the chip)
       lines 2207-2232    .topbar-profile: 34px size, 12px initials, hover lift
       lines 2235-2246    .topbar-profile.has-dot unread dot
       lines 4265-4269    rail footer chip: 28px, 11px initials
     js/all-modules-flow.js
       lines 2493-2495    demoYouAvatar()
       lines 2530-2640    demoAvatarButtonStates(), demoAvatarCatalog()
       lines 5821-5831    module "Avatars"
   Class names are kept IDENTICAL to wise.css. What is NOT verbatim:
     - The design draws the ringed chip three times (.topbar-profile,
       .menu-footer-avatar, .sc-avatar-you) and its comments say they
       match exactly. This is .sc-avatar-you; the top bar's and the nav
       footer's 34px / 12px and the rail's 28px / 11px become the size
       modifiers in the app-owned block. .topbar-profile's absolute
       top-bar placement is not ported (the app has no top bar).
     - The unread dot (2235-2246) is keyed off the chip's own .has-dot
       rather than .topbar-profile's.
     - The hover lift (2228-2232) is keyed off the control the chip
       sits in, since the chip itself is not the control.
     - .sc-avatar's `margin-top: 0` (8610) is dropped: a component root
       never sets a margin (REGISTRY rule 10), and the chat line aligns
       its chip with `mt-0.5`.
   Requires wwwroot/css/wci/wci-tokens.css.
   =================================================================== */

/* ---- Identity circle (wise.css 16842-16860) ---- */
/* Avatars are circles only — never a square or rounded-square, any size. */
.adm-avatar[b-ntz2enn55l],
.adm-avatar--photo[b-ntz2enn55l] {
  border-radius: 50%;
}
.adm-avatar[b-ntz2enn55l] {
  width: 34px; height: 34px; flex: none; aspect-ratio: 1;
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.02em;
  color: var(--primary-ink, var(--primary));
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
  text-transform: uppercase;
}
.adm-avatar--photo[b-ntz2enn55l] { padding: 0; background: var(--surface-2); border-color: var(--border); }
.adm-avatar--photo img[b-ntz2enn55l] { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }

/* ---- Chip box (wise.css 8608-8615) ---- */
.sc-avatar[b-ntz2enn55l] {
  flex-shrink: 0;
  width: var(--sc-avatar-size, 30px); height: var(--sc-avatar-size, 30px);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 11px; letter-spacing: 0.02em;
  user-select: none;
}

/* ---- Member chip (wise.css 8627-8631) ---- */
/* Mirror of .topbar-profile: transparent fill, strong ring, muted initials. */
.sc-avatar-you[b-ntz2enn55l] {
  background: transparent; color: var(--text-muted);
  border: 1.5px solid var(--border-strong);
}

/* ---- Photo in the chip (wise.css 2253-2270) ---- */
/* A member-set profile picture fills any circular avatar chip in place of
   the initials. */
.wise-avatar-img[b-ntz2enn55l] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
/* When an avatar picture is set, keep the same inset ring around it (the image
   clips itself to a circle inside the strong ring via its own border-radius) so
   the framed / recessed look is preserved everywhere. We avoid overflow:hidden
   on the chip so the unread notification dot (a ::after outside the chip) is
   never clipped. */
.sc-avatar-you.has-avatar-img[b-ntz2enn55l] {
  background: transparent;
  padding: 0;
}

/* ---- Unread dot (wise.css 2235-2246, on the chip) ---- */
/* The avatar inherits the unread notification dot now that the standalone
   bell was folded into the avatar menu. */
.sc-avatar-you.has-dot[b-ntz2enn55l] { position: relative; }
.sc-avatar-you.has-dot[b-ntz2enn55l]::after {
  content: '';
  position: absolute;
  top: 1px;
  right: 1px;
  width: 6px;
  height: 6px;
  box-sizing: content-box;
  border-radius: 50%;
  background: var(--sec-red, #DC3038);
}

/* ===================== APP-OWNED ADDITIONS ==========================
   The design's per-seat sizes on the one chip, and the hover lift
   keyed off the host control. Tokens only. */

/* 34px / 12px: the top-bar chip and the nav-footer chip (wise.css 2211-2212,
   2221; 5393-5405). */
.sc-avatar.wci-avatar--regular[b-ntz2enn55l] { --sc-avatar-size: 34px; font-size: 12px; }
/* 30px / 11px: a chat line; the .sc-avatar default. */
.adm-avatar.wci-avatar--chat[b-ntz2enn55l] { width: 30px; height: 30px; }
/* 28px / 11px: the collapsed rail's footer chip (wise.css 4265-4269). */
.sc-avatar.wci-avatar--rail[b-ntz2enn55l] { --sc-avatar-size: 28px; font-size: 11px; }
.adm-avatar.wci-avatar--rail[b-ntz2enn55l] { width: 28px; height: 28px; }

/* The person glyph for a circle with no name to take initials from. */
.wci-avatar-glyph[b-ntz2enn55l] { font-size: 15px; line-height: 1; }

/* A logo is fitted whole on the surface disc, not cropped to fill the circle (the
   app's logo avatars always did this; the design's photo rule is `cover`). */
.wci-avatar--logo[b-ntz2enn55l] { background: var(--surface); }
.wci-avatar--logo img[b-ntz2enn55l] { object-fit: contain; }

/* The chip lifts with the control it sits in (wise.css 2228-2232,
   5406-5410): the ring and initials darken. */
:is(button, a):hover .sc-avatar-you[b-ntz2enn55l] {
  border-color: var(--text-subtle);
  color: var(--text);
}
/* /Components/DesignSystem/WciBottomSheet.razor.rz.scp.css */
/* ===================================================================
   WCI component: Bottom sheet (WciBottomSheet), INTEL-399
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo, revision served by the
   prototype host on 2026-09-25 (http://3.17.180.155:4144):
     pages/wise.css
       lines 7715-7749    "Bottom sheet + toast + progress flow": scrim,
                          .ag-sheet, html.dark, .is-open, handle, head,
                          icon, titles, eyebrow, title, close, body, lead,
                          actions
     js/all-modules-flow.js
       lines 5752-5783    module "Bottom sheet" (markup template)
   Class names are kept IDENTICAL to wise.css.

   The served catalog marks this card status: 'not-now' (shelved: it is
   left out of the dev-ready list). It is ported because INTEL-399 asks for
   it; see the registry row.

   Not ported: .ag-sheet-body .agent-cta (7747) and the .agent-cta pill
   family (7667-7706), named on the card but not in its demo, whose action
   row is .wise-btns (WciButton); the .ag-field / .ag-input fields
   (7759-7763), which the app draws with WciField; the .ag-flow progress
   steps (7765-7783), which the card does not show; and the section
   label .ag-detail-label (7751): a host heads the rows with its own
   DetailsHeader.
       lines 7752-7757    .ag-detail-row, html.dark, .ag-detail-ic and
                          its glyph, .ag-detail-name, .ag-detail-sub (the
                          sheet's Details; they were a WciSheetDetailRow
                          component until REGISTRY rule 12)

   Scoped CSS: every element named here is this component's own markup.
   Requires wwwroot/css/wci/wci-tokens.css (global).
   =================================================================== */

.ag-sheet-scrim[b-81bjh5eji7] {
  position: fixed; inset: 0; z-index: 460;
  background: rgba(2, 10, 16, 0.55);
  opacity: 0; pointer-events: none; transition: opacity 0.22s ease;
}
.ag-sheet-scrim.is-open[b-81bjh5eji7] { opacity: 1; pointer-events: auto; }
.ag-sheet[b-81bjh5eji7] {
  position: fixed; left: 50%; bottom: 0; z-index: 461;
  width: min(560px, 96vw); max-height: min(86vh, 720px);
  transform: translate(-50%, 110%);
  transition: transform 0.32s cubic-bezier(0.34, 1.3, 0.5, 1);
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border); border-bottom: 0;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.34);
}
html.dark .ag-sheet[b-81bjh5eji7] {
  background: linear-gradient(160deg, #1A2339 0%, #1A2339 55%, #1A2339 100%);
  border-color: rgba(37, 80, 124, 0.22);
}
.ag-sheet.is-open[b-81bjh5eji7] { transform: translate(-50%, 0); }
.ag-sheet-handle[b-81bjh5eji7] { width: 38px; height: 4px; border-radius: 999px; margin: 9px auto 2px; background: var(--text-subtle); opacity: 0.4; }
.ag-sheet-head[b-81bjh5eji7] { display: flex; align-items: center; gap: 12px; padding: 8px 18px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.ag-sheet-icon[b-81bjh5eji7] { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-ink, var(--primary)); }
.ag-sheet-icon .material-symbols-outlined[b-81bjh5eji7] { font-size: 20px !important; }
.ag-sheet-titles[b-81bjh5eji7] { min-width: 0; flex: 1; }
.ag-sheet-eyebrow[b-81bjh5eji7] { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-subtle); }
.ag-sheet-title[b-81bjh5eji7] { font-size: 0.9375rem; font-weight: 800; color: var(--text); letter-spacing: -0.01em; }
.ag-sheet-close[b-81bjh5eji7] { margin-left: auto; width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer; background: var(--surface-2); color: var(--text-muted); display: grid; place-items: center; flex-shrink: 0; }
.ag-sheet-close:hover[b-81bjh5eji7] { color: var(--text); background: var(--surface-3); }
.ag-sheet-body[b-81bjh5eji7] { padding: 18px; overflow-y: auto; }
.ag-sheet-lead[b-81bjh5eji7] { font-size: 0.8125rem; color: var(--text-muted); line-height: 1.55; margin: 0 0 14px; }
.ag-sheet-actions[b-81bjh5eji7] { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }

/* ---- Detail rows (wise.css 7752-7757) ---- */
.ag-detail-row[b-81bjh5eji7] { display: flex; align-items: flex-start; gap: 12px; padding: 11px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); margin-bottom: 8px; }
html.dark .ag-detail-row[b-81bjh5eji7] { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); }
.ag-detail-ic[b-81bjh5eji7] { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-ink, var(--primary)); flex-shrink: 0; }
.ag-detail-ic .material-symbols-outlined[b-81bjh5eji7] { font-size: 18px !important; }
.ag-detail-name[b-81bjh5eji7] { font-size: 0.8125rem; font-weight: 700; color: var(--text); }
.ag-detail-sub[b-81bjh5eji7] { font-size: 0.6875rem; color: var(--text-muted); margin-top: 2px; line-height: 1.45; }

/* ============================ APP-OWNED ADDITIONS ============================ */

/* The detail rows follow the body content with the design's 18px, the space it puts above the action row. */
.wci-sheet-details:not(:first-child)[b-81bjh5eji7] { margin-top: 18px; }
/* With no action row after them, the last row's verbatim 8px would be dead space at the bottom of the sheet. */
.wci-sheet-details:last-child > .ag-detail-row:last-child[b-81bjh5eji7] { margin-bottom: 0; }

/* A detail row's copy takes the row's width so a long file name wraps instead of pushing the trailing
   action out; the trailing control sits centred at the end. */
.wci-detail-copy[b-81bjh5eji7] { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.wci-detail-trail[b-81bjh5eji7] { flex-shrink: 0; align-self: center; display: flex; align-items: center; gap: 4px; }

/* Stacking: the WCI overlay layer (see WciModal.razor.css). The design's 460 / 461 sit under the
   app's own fixed chrome (the AI drawer, the sidebar) and under Radzen's popups.
   The layer is ONE stacking unit at the same z-index as a WciModal's scrim, with the scrim and the
   sheet ordered inside it. Overlays on the shared layer then stack in document order, so a dialog
   rendered after the sheet (AssetUploadSheet's replace-existing confirm) is on top of it. Putting
   the sheet one above the layer instead (the first cut: scrim 10100, sheet 10101) buried that
   confirm's Replace and Skip buttons under the sheet. The layer has no transform, so the fixed
   scrim and sheet inside it still place against the window. */
.wci-sheet-layer[b-81bjh5eji7] { position: fixed; inset: 0; z-index: 10100; }
.ag-sheet-scrim[b-81bjh5eji7] { z-index: 0; }
.ag-sheet[b-81bjh5eji7] { z-index: 1; }

/* Blazor renders the sheet already open, so the design's .is-open transitions have no "before"
   state to run from. The same rise (with the design's overshoot curve) and fade run as keyframes. */
.ag-sheet-scrim.is-open[b-81bjh5eji7] { animation: wciSheetScrimIn-b-81bjh5eji7 0.22s ease backwards; }
.ag-sheet.is-open[b-81bjh5eji7] { animation: wciSheetIn-b-81bjh5eji7 0.32s cubic-bezier(0.34, 1.3, 0.5, 1) backwards; }
@keyframes wciSheetScrimIn-b-81bjh5eji7 { from { opacity: 0; } to { opacity: 1; } }
@keyframes wciSheetIn-b-81bjh5eji7 { from { transform: translate(-50%, 110%); } to { transform: translate(-50%, 0); } }

/* The title is an <h2> (the design's is a <div>), so it names the dialog; it keeps the design's type. */
.ag-sheet-title[b-81bjh5eji7] { margin: 0; line-height: 1.3; }

/* The sheet itself is the focus landing point when nothing in it asks for focus. */
.ag-sheet:focus[b-81bjh5eji7] { outline: none; }
.ag-sheet-close:focus-visible[b-81bjh5eji7] { outline: 2px solid var(--primary); outline-offset: 2px; }
.ag-sheet-close .material-symbols-outlined[b-81bjh5eji7] { font-size: 18px; }

/* The body is the part that scrolls; the head stays. */
.ag-sheet-body[b-81bjh5eji7] { flex: 1 1 auto; min-height: 0; }

@media (prefers-reduced-motion: reduce) {
  .ag-sheet-scrim.is-open[b-81bjh5eji7],
  .ag-sheet.is-open[b-81bjh5eji7] { animation: none; transition: none; }
}
/* /Components/DesignSystem/WciBrandChip.razor.rz.scp.css */
/* ===================================================================
   WCI component: Buttons, the brand chip (WciBrandChip), INTEL-363
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo, revision served by the
   prototype host on 2026-09-23 (http://3.17.180.155:4144/pages/wise.css,
   Last-Modified 2026-09-23 06:58:57 GMT):
     pages/wise.css
       lines 492-510      .pf-brand-chip:disabled (from the shared button
                          :disabled list)
       lines 15255-15264  compact chip inside .pf-head-trail--compact
       lines 15268-15298  .pf-brand, .pf-brand-chip, avatar, name, caret
     js/all-modules-flow.js
       lines 3149-3169    demoHeadTrail() (markup template)
   The searchable brand menu, from ip-b2b revision ab499e3 (2026-10-06, local
   checkout), ported VERBATIM:
     pages/wise.css
       lines 16105-16159  .pf-brand-menu, its keyframes, .pf-brand-search,
                          .pf-brand-opts, .pf-brand-empty, .pf-brand-opt and
                          its avatar, text, meta and check
     pages/product-portfolio.html
       lines 8116-8130    the chip + menu markup
       lines 14764-14858  pfBrandOptHtml / pfFilterBrandMenu / pfToggleBrandMenu
   Class names are kept IDENTICAL to wise.css.
   =================================================================== */

/* ---- Compact chip on the trail (wise.css 15255-15264) ---- */
.pf-head-trail.pf-head-trail--compact .pf-brand-chip[b-0rpx7ib7j5] {
  height: 28px; padding: 2px 8px 2px 3px; gap: 6px;
}
.pf-head-trail.pf-head-trail--compact .pf-brand-avatar[b-0rpx7ib7j5] {
  width: 20px; height: 20px; font-size: 10px;
}
.pf-head-trail.pf-head-trail--compact .pf-brand-name[b-0rpx7ib7j5] {
  font-size: 11px; max-width: 120px;
}
.pf-head-trail.pf-head-trail--compact .pf-brand-caret[b-0rpx7ib7j5] { font-size: 15px !important; }

/* ---- Brand chip (wise.css 15268-15298) ---- */
/* Brand switcher — same chip + searchable list as Product Portfolio. Lives
   here so verification (and any other surface) can reuse it. */
.pf-brand[b-0rpx7ib7j5] { position: relative; flex-shrink: 0; }
.pf-brand-chip[b-0rpx7ib7j5] {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; box-sizing: border-box; padding: 3px 10px 3px 4px;
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 15%, var(--border));
  border-radius: var(--radius-pill, 999px);
  cursor: pointer;
  font-family: inherit; color: var(--text); appearance: none;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.pf-brand-chip:hover[b-0rpx7ib7j5] { border-color: var(--primary); background: var(--primary-soft); }
.pf-brand-chip[aria-expanded="true"][b-0rpx7ib7j5] { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
html.dark .pf-brand-chip[b-0rpx7ib7j5] {
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  border-color: color-mix(in srgb, #fff 15%, transparent);
}
html.dark .pf-brand-chip:hover[b-0rpx7ib7j5], html.dark .pf-brand-chip[aria-expanded="true"][b-0rpx7ib7j5] { background: rgba(37,80,124,0.28); }
.pf-brand-avatar[b-0rpx7ib7j5] {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 12px; color: #fff; letter-spacing: -0.01em;
  background: var(--primary); overflow: hidden;
}
.pf-brand-avatar img[b-0rpx7ib7j5] { width: 100%; height: 100%; object-fit: cover; }
.pf-brand-name[b-0rpx7ib7j5] {
  font-size: 12px; font-weight: 700; color: var(--text); line-height: 1;
  white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis;
}
.pf-brand-caret[b-0rpx7ib7j5] { font-size: 18px !important; color: var(--text-muted); transition: transform .15s ease; flex: 0 0 auto; }
.pf-brand-chip[aria-expanded="true"] .pf-brand-caret[b-0rpx7ib7j5] { transform: rotate(180deg); color: var(--primary-ink, var(--primary)); }

/* ---- Brand menu (wise.css 16105-16159, revision ab499e3) ---- */
.pf-brand-menu[b-0rpx7ib7j5] {
  position: absolute; top: calc(100% + 8px); right: 0; left: auto; z-index: 60;
  display: flex; flex-direction: column;
  min-width: 300px; max-width: 340px; max-height: 380px;
  padding: 6px; background: var(--surface-2);
  border: 1px solid var(--border-strong); border-radius: 14px;
  box-shadow: var(--shadow-card); animation: vfBrandMenuIn-b-0rpx7ib7j5 0.15s ease-out both;
}
.pf-brand-menu[hidden][b-0rpx7ib7j5] { display: none; }
@keyframes vfBrandMenuIn-b-0rpx7ib7j5 {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
html.dark .pf-brand-menu[b-0rpx7ib7j5] {
  background: linear-gradient(155deg, #1A2339 0%, #1A2339 100%);
  border-color: rgba(37,80,124,0.28); box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.pf-brand-search[b-0rpx7ib7j5] {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  margin: 2px 4px 6px; padding: 0 10px 0 12px; height: 34px; box-sizing: border-box;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
}
html.dark .pf-brand-search[b-0rpx7ib7j5] { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.10); }
.pf-brand-search > .material-symbols-outlined[b-0rpx7ib7j5] {
  font-size: 18px; color: var(--text-subtle); pointer-events: none; flex-shrink: 0;
}
.pf-brand-search input[b-0rpx7ib7j5] {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent;
  font-family: inherit; font-size: 0.8125rem; font-weight: 400; color: var(--text);
  appearance: none; -webkit-appearance: none;
}
.pf-brand-search input[b-0rpx7ib7j5]::placeholder {
  color: color-mix(in srgb, var(--text-subtle) 55%, transparent); font-style: italic;
}
.pf-brand-search:focus-within[b-0rpx7ib7j5] {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border-strong));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.pf-brand-opts[b-0rpx7ib7j5] { overflow-y: auto; min-height: 0; flex: 1 1 auto; }
.pf-brand-empty[b-0rpx7ib7j5] {
  padding: 18px 12px; text-align: center;
  font-size: 0.8125rem; color: var(--text-muted);
}
.pf-brand-empty[hidden][b-0rpx7ib7j5] { display: none; }
.pf-brand-opt[b-0rpx7ib7j5] {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border: none; background: none; cursor: pointer;
  border-radius: 10px; text-align: left; color: var(--text);
}
.pf-brand-opt[hidden][b-0rpx7ib7j5] { display: none; }
.pf-brand-opt:hover[b-0rpx7ib7j5], .pf-brand-opt.is-active[b-0rpx7ib7j5] { background: var(--primary-soft); }
html.dark .pf-brand-opt:hover[b-0rpx7ib7j5], html.dark .pf-brand-opt.is-active[b-0rpx7ib7j5] { background: rgba(255,255,255,0.06); }
.pf-brand-opt-avatar[b-0rpx7ib7j5] {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px; color: #fff; background: var(--primary); overflow: hidden;
}
.pf-brand-opt-avatar img[b-0rpx7ib7j5] { width: 100%; height: 100%; object-fit: cover; }
.pf-brand-opt-text[b-0rpx7ib7j5] { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.pf-brand-opt-name[b-0rpx7ib7j5] { font-size: 0.9rem; font-weight: 700; }
.pf-brand-opt-meta[b-0rpx7ib7j5] { font-size: 11px; color: var(--text-muted); }
.pf-brand-opt-check[b-0rpx7ib7j5] { margin-left: auto; color: var(--primary-ink, var(--primary)); font-size: 20px !important; opacity: 0; }
.pf-brand-opt.is-active .pf-brand-opt-check[b-0rpx7ib7j5] { opacity: 1; }

/* ---- Disabled (wise.css 492-510, the .pf-brand-chip entry) ---- */
.pf-brand-chip:disabled[b-0rpx7ib7j5] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}


/* ===================================================================
   APP-OWNED ADDITIONS (not in wise.css). Keep below the verbatim port so a
   re-sync replaces everything above this line untouched.
   =================================================================== */

.pf-brand-chip:focus-visible[b-0rpx7ib7j5] {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 28%, transparent);
}

/* The chip with nothing to choose (fewer than two options): a label, so no hover change, pointer or caret. */
.pf-brand-chip.wci-brand-chip--static[b-0rpx7ib7j5] { cursor: default; }
.pf-brand-chip.wci-brand-chip--static:hover[b-0rpx7ib7j5] {
  border-color: color-mix(in srgb, var(--primary) 15%, var(--border));
  background: color-mix(in srgb, var(--primary) 15%, transparent);
}

/* A choice that is not one brand (All brands) shows a glyph in its avatar instead of a letter. */
.wci-brand-opt-icon[b-0rpx7ib7j5] { font-size: 18px !important; }

/* The rows are buttons: the keyboard ring is the hover fill plus the brand ring. */
.pf-brand-opt:focus-visible[b-0rpx7ib7j5] {
  outline: none;
  background: var(--primary-soft);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary) 45%, transparent);
}
.pf-brand-opt-name[b-0rpx7ib7j5] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .pf-brand-chip[b-0rpx7ib7j5], .pf-brand-caret[b-0rpx7ib7j5] { transition: none; }
  .pf-brand-menu[b-0rpx7ib7j5] { animation: none; }
}
/* /Components/DesignSystem/WciButton.razor.rz.scp.css */
/* ===================================================================
   WCI component: Buttons / Admin buttons (WciButton), INTEL-363 / INTEL-385
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo, revision served by the
   prototype host on 2026-09-23 (http://3.17.180.155:4144/pages/wise.css,
   Last-Modified 2026-09-23 06:58:57 GMT):
     pages/wise.css
       lines 122          primary buttons paint the FILL 1 icon twin
       lines 426-702      the shared "one pill language" block: base, link
                          states, icon, :disabled, --primary, --ghost,
                          --danger, --good, --secondary, --sm, --lg, --block
       lines 704-730      dashboard card row (.dash-btn-row .wise-btn)
       lines 734-760      module-head compact, 34px (.pf-head-actions only;
                          revision ab499e3 of the local checkout)
       lines 759-769      header trail, 28px left of the module ⋯
       lines 16800-16815  in-row actions are ghost, never a solid fill
     js/all-modules-flow.js
       lines 3774-3848    module "Buttons" (markup template)
       lines 5600-5638    module "Admin buttons" (markup template)

   wise.css lists every former button family (.adm-btn, .dash-btn,
   .inv-btn, .mkt-btn, ...) in these selector lists as an alias. Only the
   .wise-btn selectors are kept here: the aliases exist in the prototype so
   leftover markup still paints, and the app migrates its markup to this
   component instead. Everything else is verbatim.

   Scoped CSS: Blazor appends this component's scope attribute to the LAST
   compound of each selector, and the <button>/<a class="wise-btn"> is
   rendered here, so descendant context rules (.dash-btn-row .wise-btn,
   .pf-head-trail .wise-btn) still match whoever renders the ancestor.
   Requires wwwroot/css/wci/wci-tokens.css (global).
   =================================================================== */

/* ---- Primary icon fill (wise.css 122) ---- */
.wise-btn--primary .material-symbols-outlined[b-rm4tz2afyw] {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ---- One pill language (wise.css 426-702) ---- */
.wise-btn[b-rm4tz2afyw] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  height: 40px;
  box-sizing: border-box;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: filter 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.wise-btn:hover[b-rm4tz2afyw], .wise-btn:focus[b-rm4tz2afyw] {
  text-decoration: none;
}
a.wise-btn[b-rm4tz2afyw], a.wise-btn:link[b-rm4tz2afyw], a.wise-btn:visited[b-rm4tz2afyw], a.wise-btn:hover[b-rm4tz2afyw], a.wise-btn:focus[b-rm4tz2afyw] {
  text-decoration: none;
}
.wise-btn .material-symbols-outlined[b-rm4tz2afyw] {
  font-size: 16px;
  flex-shrink: 0;
  line-height: 1;
}
.wise-btn:disabled[b-rm4tz2afyw] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.wise-btn--primary[b-rm4tz2afyw] {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.wise-btn--primary:hover[b-rm4tz2afyw] {
  filter: brightness(1.08);
  color: #fff;
}

.wise-btn--ghost[b-rm4tz2afyw] {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--primary);
}
.wise-btn--ghost:hover[b-rm4tz2afyw] {
  color: var(--text);
  background: var(--surface-2);
}
html.dark .wise-btn--ghost:hover[b-rm4tz2afyw] {
  background: rgba(255, 255, 255, 0.06);
}

.wise-btn--danger[b-rm4tz2afyw] {
  background: transparent;
  color: var(--sec-red);
  border-color: var(--sec-red-10);
}
.wise-btn--danger:hover[b-rm4tz2afyw] {
  background: var(--sec-red-10);
}
html.dark .wise-btn--danger[b-rm4tz2afyw] {
  color: #FF9E96;
}

.wise-btn--good[b-rm4tz2afyw] {
  background: transparent;
  color: var(--sec-green);
  border-color: var(--sec-green-10);
}
.wise-btn--good:hover[b-rm4tz2afyw] {
  background: var(--sec-green-10);
}
html.dark .wise-btn--good[b-rm4tz2afyw] {
  color: #6FE0A0;
}

.wise-btn--secondary[b-rm4tz2afyw] {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border-strong);
}
.wise-btn--secondary:hover[b-rm4tz2afyw] {
  background: var(--surface-3);
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border-strong));
}
html.dark .wise-btn--secondary[b-rm4tz2afyw] {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--primary);
}
html.dark .wise-btn--secondary:hover[b-rm4tz2afyw] {
  background: rgba(255, 255, 255, 0.07);
}

.wise-btn--sm[b-rm4tz2afyw] {
  height: 30px;
  padding: 0 12px;
  font-size: 0.72rem;
}
.wise-btn--sm .material-symbols-outlined[b-rm4tz2afyw] {
  font-size: 14px;
}

.wise-btn--lg[b-rm4tz2afyw] {
  font-family: 'WISE Digits', var(--font-serif);
  font-size: 0.95rem;
  height: auto;
  padding: 13px 22px;
  font-weight: 700;
}
.wise-btn--lg.wise-btn--sm[b-rm4tz2afyw] {
  padding: 9px 16px;
  font-size: 0.85rem;
  height: auto;
}
.wise-btn--lg:active[b-rm4tz2afyw] {
  transform: translateY(1px);
}
.wise-btn--lg.wise-btn--primary:hover[b-rm4tz2afyw] {
  filter: none;
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
}
.wise-btn--lg.wise-btn--ghost:hover[b-rm4tz2afyw] {
  color: var(--primary);
  border-color: var(--primary);
}
html.dark .wise-btn--lg.wise-btn--ghost:hover[b-rm4tz2afyw] {
  color: var(--primary-bright);
  border-color: var(--primary-bright);
}

.wise-btn--block[b-rm4tz2afyw] {
  width: 100%;
}

/* ---- Dashboard card row (wise.css 704-730) ---- */
/* Dashboard cards: labels wrap and sit left — not a second button system. */
.dash-btn-row .wise-btn[b-rm4tz2afyw] {
  justify-content: flex-start;
  white-space: normal;
  height: auto;
  padding: 9px 15px;
  font-weight: 600;
  font-size: 0.78rem;
  line-height: 1.25;
  text-align: left;
  max-width: 100%;
}
.dash-btn-row .wise-btn--primary[b-rm4tz2afyw] {
  box-shadow: 0 4px 12px rgba(37, 80, 124, 0.25);
}
.dash-btn-row .wise-btn--primary:hover[b-rm4tz2afyw] {
  filter: none;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(37, 80, 124, 0.3);
}
.dash-btn-row .wise-btn--ghost[b-rm4tz2afyw] {
  color: var(--text);
}

/* ---- Module-head compact, 34px beside the module title (wise.css 734-760, revision ab499e3, the
   .pf-head-actions selector only: the Product Portfolio's Continue beside its Add) ---- */
.pf-head-actions .wise-btn[b-rm4tz2afyw] {
  height: 34px;
  padding: 0 14px;
  font-size: 12px;
}
.pf-head-actions .wise-btn .material-symbols-outlined[b-rm4tz2afyw] {
  font-size: 16px !important;
  line-height: 1 !important;
}

/* ---- Header trail, 28px left of ⋯ (wise.css 759-769) ---- */
.pf-head-trail .wise-btn[b-rm4tz2afyw] {
  height: 28px;
  padding: 0 11px;
  font-size: 11px;
  gap: 5px;
}
.pf-head-trail .wise-btn .material-symbols-outlined[b-rm4tz2afyw] {
  font-size: 14px !important;
}

/* ---- In-row actions (wise.css 16800-16815) ---- */
/* In-row actions are ghost (outline) — never a solid primary fill. */
.adm-trow .wise-btn--primary[b-rm4tz2afyw] {
  background: transparent;
  color: var(--text);
  border-color: var(--primary);
  box-shadow: none;
}
.adm-trow .wise-btn--primary:hover[b-rm4tz2afyw] {
  filter: none;
  color: var(--primary-ink, var(--primary));
  background: var(--primary-soft);
  border-color: var(--primary);
}


/* ===================================================================
   APP-OWNED ADDITIONS (not in wise.css). Keep below the verbatim port so a
   re-sync replaces everything above this line untouched.
   =================================================================== */

/* The app's markup still carries Material Icons (ligature font) inside
   custom button content. Size it like the design's Symbols glyph so a
   ChildContent icon lines up with an Icon-parameter one. ChildContent is
   rendered in the caller's scope, so these reach in with ::deep. */
.wise-btn[b-rm4tz2afyw]  .material-icons,
.wise-btn[b-rm4tz2afyw]  .material-icons-outlined,
.wise-btn[b-rm4tz2afyw]  .material-symbols-outlined {
  font-size: 16px;
  flex-shrink: 0;
  line-height: 1;
}
.wise-btn--sm[b-rm4tz2afyw]  .material-icons,
.wise-btn--sm[b-rm4tz2afyw]  .material-icons-outlined,
.wise-btn--sm[b-rm4tz2afyw]  .material-symbols-outlined {
  font-size: 14px;
}
.wise-btn--primary[b-rm4tz2afyw]  .material-symbols-outlined {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.wise-btn[b-rm4tz2afyw]  svg {
  flex-shrink: 0;
}

/* :disabled does not exist on an anchor. A disabled link row carries
   .is-disabled and aria-disabled (the component also drops its href). */
.wise-btn.is-disabled[b-rm4tz2afyw] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* The design's :disabled rule sets pointer-events: none, which also kills
   the hover that shows a disabled pill's reason (its title or data-tip).
   A disabled <button> never fires a click, so when it has something to say
   it keeps pointer targeting, and the variant hover paint is held at rest. */
.wise-btn:disabled[title][b-rm4tz2afyw],
.wise-btn:disabled[data-tip][b-rm4tz2afyw] { pointer-events: auto; }
.wise-btn:disabled:hover[b-rm4tz2afyw] { filter: none; transform: none; }
.wise-btn--ghost:disabled:hover[b-rm4tz2afyw] { color: var(--text-muted); background: transparent; }
.wise-btn--secondary:disabled:hover[b-rm4tz2afyw] { background: var(--surface-2); border-color: var(--border-strong); }
.wise-btn--danger:disabled:hover[b-rm4tz2afyw],
.wise-btn--good:disabled:hover[b-rm4tz2afyw] { background: transparent; }

/* Keyboard focus ring (CONVENTIONS: real UI uses :focus-visible). Same
   ring as the design's .adm-input:focus. */
.wise-btn:focus-visible[b-rm4tz2afyw] {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 28%, transparent);
}

/* Busy: the leading glyph turns into a spinner. The button is disabled
   while busy, which would halve its opacity; a busy button is working, not
   unavailable, so it stays at full strength. */
.wise-btn[aria-busy="true"][b-rm4tz2afyw] {
  opacity: 1;
  cursor: progress;
}
.wci-btn-spinner[b-rm4tz2afyw] {
  animation: wci-btn-spin-b-rm4tz2afyw 0.9s linear infinite;
}
@keyframes wci-btn-spin-b-rm4tz2afyw {
  to { transform: rotate(360deg); }
}

/* CONVENTIONS: honour prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) {
  .wise-btn[b-rm4tz2afyw] { transition: none; }
  .wise-btn--lg:active[b-rm4tz2afyw],
  .wise-btn--lg.wise-btn--primary:hover[b-rm4tz2afyw],
  .dash-btn-row .wise-btn--primary:hover[b-rm4tz2afyw] { transform: none; }
  .wci-btn-spinner[b-rm4tz2afyw] { animation-duration: 2.4s; }
}
/* /Components/DesignSystem/WciCatalogModule.razor.rz.scp.css */
/* WciCatalogModule: the ip-b2b Add Catalog "Catalog" module.
   Source: pages/add-catalog.html page sheet (ip-b2b checkout read 2026-10-07): .ac-inner, .ac-panel-header,
   .ac-banner-pattern, .ac-banner-bug, .ac-banner-titles, .ac-banner-title, .ac-banner-sub, .ac-brand-logo,
   .ac-brand-logo-mono, .ac-scroll-body, the body vocabulary (.ac-section, .ac-sec-*, .ac-head*, .ac-section--plain,
   .ac-drop*, .ac-mini-row, .ac-mini-btn, .ac-list*, .ac-map*, .ac-fix*, .ac-analyze*, .ac-bar-*, .ac-empty-hint,
   .ac-linklike) and the import bar (.ac-foot, .ac-foot-status, .ac-import-btn). The body is the host's markup, so its
   rules reach in with ::deep. The design's inline colours (the green check on a matched column, the green / red glyph
   in the status line) became classes. App-owned: the banner's controls and close (as on WciProductDetails), the busy
   glyph's spin, and .ac-empty-hint--start (the design's inline left-aligned hint). */

.ac-inner[b-hijfqfgii0] {
  display: flex; flex-direction: column; flex: 1; min-height: 0; width: 100%;
  border-radius: 16px; border: 1px solid var(--border);
  background: var(--surface); overflow: hidden; box-shadow: var(--shadow-card);
}

.ac-panel-header[b-hijfqfgii0] {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; gap: 11px; padding: 10px 14px;
  height: var(--panel-header-h); min-height: var(--panel-header-h);
  box-sizing: border-box; flex-shrink: 0;
  border-bottom: 1px solid color-mix(in srgb, #0b1426 34%, var(--primary));
  background: linear-gradient(118deg,
    color-mix(in srgb, var(--primary) 94%, #0b1426) 0%,
    color-mix(in srgb, var(--primary) 72%, #1a2339) 100%);
}
.ac-banner-pattern[b-hijfqfgii0] { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ac-banner-bug[b-hijfqfgii0] {
  position: absolute; top: 50%; right: 58px; height: 168%; width: auto;
  color: color-mix(in srgb, #0b1426 32%, var(--primary));
  transform: translateY(-50%) rotate(-16deg);
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.10));
}
.ac-banner-titles[b-hijfqfgii0] { flex: 1; min-width: 0; }
.ac-banner-title[b-hijfqfgii0] { font-size: 0.86rem; font-weight: 800; letter-spacing: -0.01em; color: #fff; line-height: 1.15; }
.ac-banner-sub[b-hijfqfgii0] {
  font-size: 0.68rem; color: rgba(255, 255, 255, 0.78); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ac-brand-logo[b-hijfqfgii0] {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center; background: #fff;
  box-shadow: 0 4px 12px rgba(7, 12, 26, 0.30), 0 0 0 3px rgba(255, 255, 255, 0.18);
}
.ac-brand-logo-mono[b-hijfqfgii0] { font-weight: 800; font-size: 0.62rem; letter-spacing: -0.02em; color: var(--primary); }

/* App-owned: the module's controls on the banner, white as on WciProductDetails. */
.panel-controls[b-hijfqfgii0] { position: relative; z-index: 5; display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; }
.panel-controls[b-hijfqfgii0]  .panel-width-toggle-btn,
.panel-controls[b-hijfqfgii0]  .panel-more-btn,
.ac-close[b-hijfqfgii0] { color: #fff; opacity: 0.9; }
.panel-controls[b-hijfqfgii0]  .panel-width-toggle-btn:hover,
.panel-controls[b-hijfqfgii0]  .panel-more-btn:hover,
.ac-close:hover[b-hijfqfgii0],
.ac-close:focus-visible[b-hijfqfgii0] { opacity: 1; background: rgba(255, 255, 255, 0.24); }
.ac-close[b-hijfqfgii0] {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; cursor: pointer;
}
.ac-close .material-symbols-outlined[b-hijfqfgii0] { font-size: 18px; line-height: 1; }

.ac-scroll-body[b-hijfqfgii0] { flex: 1 1 0%; overflow-y: auto; min-height: 0; background: var(--surface); padding: 14px; }

/* ── The body's section vocabulary (the host's markup) ── */
.ac-scroll-body[b-hijfqfgii0]  .ac-section { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); margin-bottom: 12px; overflow: hidden; }
.ac-scroll-body[b-hijfqfgii0]  .ac-section:last-child { margin-bottom: 0; }
.ac-scroll-body[b-hijfqfgii0]  .ac-sec-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.ac-scroll-body[b-hijfqfgii0]  .ac-sec-head .material-symbols-outlined { font-size: 18px; color: var(--primary-ink, var(--primary)); }
.ac-scroll-body[b-hijfqfgii0]  .ac-sec-title { font-size: 0.78rem; font-weight: 800; letter-spacing: -0.01em; color: var(--text); }
.ac-scroll-body[b-hijfqfgii0]  .ac-sec-badge { margin-left: auto; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary-ink, var(--primary)); background: var(--primary-soft); border-radius: 5px; padding: 2px 7px; max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-scroll-body[b-hijfqfgii0]  .ac-sec-body { padding: 11px 12px 12px; }

.ac-scroll-body[b-hijfqfgii0]  .ac-head { padding: 4px 2px 14px; }
.ac-scroll-body[b-hijfqfgii0]  .ac-head-title { font-family: 'WISE Digits', 'DM Sans', system-ui, sans-serif; font-weight: 800; font-size: 1.2rem; line-height: 1.18; letter-spacing: -0.01em; color: var(--text); margin: 0; }
.ac-scroll-body[b-hijfqfgii0]  .ac-head-meta { font-size: 0.74rem; color: var(--text-muted); margin: 5px 0 0; line-height: 1.45; }

.ac-scroll-body[b-hijfqfgii0]  .ac-section--plain > .ac-sec-head { background: none; border-bottom: none; padding: 12px 12px 0; }
.ac-scroll-body[b-hijfqfgii0]  .ac-section--plain .ac-sec-title { font-family: 'WISE Digits', 'DM Sans', system-ui, sans-serif; font-size: 0.98rem; font-weight: 700; letter-spacing: 0; }

.ac-scroll-body[b-hijfqfgii0]  .ac-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; cursor: pointer; text-align: center; padding: 26px 14px;
  background: var(--surface-2); border: 1px dashed var(--border-strong); border-radius: 12px;
  color: var(--text-muted); transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.ac-scroll-body[b-hijfqfgii0]  .ac-drop:hover,
.ac-scroll-body[b-hijfqfgii0]  .ac-drop.is-drag,
.ac-scroll-body[b-hijfqfgii0]  .ac-drop:focus-visible { border-color: var(--primary); color: var(--text); background: color-mix(in srgb, var(--primary) 6%, var(--surface-2)); }
.ac-scroll-body[b-hijfqfgii0]  .ac-drop .material-symbols-outlined { font-size: 30px; color: var(--text-subtle); }
.ac-scroll-body[b-hijfqfgii0]  .ac-drop-t { font-size: 0.82rem; font-weight: 700; color: var(--text); }
.ac-scroll-body[b-hijfqfgii0]  .ac-drop-d { font-size: 0.7rem; color: var(--text-subtle); }

.ac-scroll-body[b-hijfqfgii0]  .ac-mini-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 11px; }
.ac-scroll-body[b-hijfqfgii0]  .ac-mini-btn {
  display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-muted); border-radius: 999px;
  padding: 5px 11px; font-size: 0.7rem; font-weight: 600; cursor: pointer; font-family: inherit; text-decoration: none;
}
.ac-scroll-body[b-hijfqfgii0]  .ac-mini-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--primary); }
.ac-scroll-body[b-hijfqfgii0]  .ac-mini-btn .material-symbols-outlined { font-size: 15px !important; }

.ac-scroll-body[b-hijfqfgii0]  .ac-list { display: flex; flex-direction: column; gap: 7px; }
.ac-scroll-body[b-hijfqfgii0]  .ac-list-item { display: flex; align-items: flex-start; gap: 8px; font-size: 0.72rem; line-height: 1.45; color: var(--text-muted); }
.ac-scroll-body[b-hijfqfgii0]  .ac-list-item .material-symbols-outlined { font-size: 15px; color: var(--primary-ink, var(--primary)); flex-shrink: 0; margin-top: 1px; }
.ac-scroll-body[b-hijfqfgii0]  .ac-list-item strong { color: var(--text); font-weight: 700; }

.ac-scroll-body[b-hijfqfgii0]  .ac-map { display: flex; flex-direction: column; }
.ac-scroll-body[b-hijfqfgii0]  .ac-map-row { display: grid; grid-template-columns: 1fr 18px 1fr; align-items: center; gap: 8px; padding: 7px 2px; border-bottom: 1px solid var(--border); font-size: 0.72rem; }
.ac-scroll-body[b-hijfqfgii0]  .ac-map-row:last-child { border-bottom: none; }
.ac-scroll-body[b-hijfqfgii0]  .ac-map-field { font-weight: 700; color: var(--text); }
.ac-scroll-body[b-hijfqfgii0]  .ac-map-arrow { color: var(--text-subtle); display: flex; justify-content: center; }
.ac-scroll-body[b-hijfqfgii0]  .ac-map-arrow .material-symbols-outlined { font-size: 15px; }
.ac-scroll-body[b-hijfqfgii0]  .ac-map-col { color: var(--text-muted); display: inline-flex; align-items: center; gap: 5px; min-width: 0; flex-wrap: wrap; }
.ac-scroll-body[b-hijfqfgii0]  .ac-map-col code { font-family: var(--font-mono); font-size: 0.7rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; color: var(--text); overflow-wrap: anywhere; }
.ac-scroll-body[b-hijfqfgii0]  .ac-map-col.ac-map-missing { color: var(--sec-red); }
.ac-scroll-body[b-hijfqfgii0]  .ac-map-col.ac-map-missing .material-symbols-outlined { font-size: 14px; }
.ac-scroll-body[b-hijfqfgii0]  .ac-map-ok { color: var(--sec-green); font-size: 14px; }

.ac-scroll-body[b-hijfqfgii0]  .ac-fix { display: flex; flex-direction: column; gap: 6px; }
.ac-scroll-body[b-hijfqfgii0]  .ac-fix-row { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: 8px; background: rgba(220, 48, 56, 0.06); box-shadow: inset 3px 0 0 var(--sec-red); font-size: 0.7rem; }
.ac-scroll-body[b-hijfqfgii0]  .ac-fix-row .material-symbols-outlined { font-size: 15px; color: var(--sec-red); flex-shrink: 0; margin-top: 1px; }
.ac-scroll-body[b-hijfqfgii0]  .ac-fix-upc { font-family: var(--font-mono); color: var(--text); font-weight: 700; }
.ac-scroll-body[b-hijfqfgii0]  .ac-fix-reason { color: var(--sec-red); }

.ac-scroll-body[b-hijfqfgii0]  .ac-analyze { display: flex; flex-direction: column; gap: 8px; }
.ac-scroll-body[b-hijfqfgii0]  .ac-analyze-head { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--text-muted); }
.ac-scroll-body[b-hijfqfgii0]  .ac-analyze-head strong { color: var(--text); }
.ac-scroll-body[b-hijfqfgii0]  .ac-bar-track { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.ac-scroll-body[b-hijfqfgii0]  .ac-bar-fill { height: 100%; border-radius: 999px; background: var(--primary); transition: width 0.4s ease; }

.ac-scroll-body[b-hijfqfgii0]  .ac-empty-hint { font-size: 0.72rem; color: var(--text-subtle); text-align: center; padding: 6px 4px 0; }
.ac-scroll-body[b-hijfqfgii0]  .ac-empty-hint--start { text-align: left; padding-top: 10px; }
.ac-scroll-body[b-hijfqfgii0]  .ac-linklike { background: none; border: none; padding: 0; font: inherit; color: var(--primary-ink, var(--primary)); font-weight: 700; cursor: pointer; text-decoration: underline; }

/* ── The import bar ── */
.ac-foot[b-hijfqfgii0] { flex-shrink: 0; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--surface-2) 45%, transparent); padding: 10px 12px 12px; }
.ac-foot-status[b-hijfqfgii0] { display: flex; align-items: flex-start; gap: 6px; font-size: 0.68rem; line-height: 1.4; color: var(--text-muted); margin-bottom: 8px; }
.ac-foot-status:last-child[b-hijfqfgii0] { margin-bottom: 0; }
.ac-foot-status .material-symbols-outlined[b-hijfqfgii0] { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.ac-foot-status .ac-foot-good[b-hijfqfgii0] { color: var(--sec-green); }
.ac-foot-status .ac-foot-warn[b-hijfqfgii0] { color: var(--sec-red); }
.ac-import-btn[b-hijfqfgii0] {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: none; border-radius: 999px; padding: 9px 14px; cursor: pointer;
  font-family: 'WISE Digits', 'DM Sans', system-ui, sans-serif; font-size: 0.82rem; font-weight: 700;
  background: var(--primary); color: #fff; transition: filter 0.15s, opacity 0.15s;
}
.ac-import-btn:hover[b-hijfqfgii0] { filter: brightness(1.07); }
.ac-import-btn:disabled[b-hijfqfgii0] { opacity: 0.5; cursor: not-allowed; filter: grayscale(0.3); }
.ac-import-btn .material-symbols-outlined[b-hijfqfgii0] { font-size: 17px; }
.ac-import-btn[aria-busy="true"] .material-symbols-outlined[b-hijfqfgii0] { animation: ac-busy-spin-b-hijfqfgii0 1s linear infinite; }
@keyframes ac-busy-spin-b-hijfqfgii0 { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ac-import-btn[aria-busy="true"] .material-symbols-outlined[b-hijfqfgii0] { animation: none; }
}
/* /Components/DesignSystem/WciChartCards.razor.rz.scp.css */
/* ===================================================================
   WCI component: Medium overview cards (WciChartCards), INTEL-687
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo (checkout at 6b5d3da,
   pulled 2026-10-12):
     pages/wise.css
       lines 9618-9626   .ws-minicards-section (its margin is not
                         ported: REGISTRY.md rule 10, the root sets none)
       lines 9648-9677   the row (.ws-minicards), the square card, its
                         hover, dark and focus, the plot and the name
       lines 9679-9725   the chart (.ws-oc-*): marks, labels, the
                         draw-in, the replay and reduced motion
     The row's chrome is the large rail's, and the large rail's sheet
     (WciScorecard.razor.css) is scoped to that component, so its rules
     are carried here as well, unchanged:
       lines 9521        .ws-scorecards-wrap
       lines 9568-9574   wsScorecardSettle (the square's load-in)
       lines 9586-9616   the chevrons and the edge fades
   Class names are kept IDENTICAL. Dropped selectors, all for hosts or
   switches the app does not have: .sc-welcome (the design's welcome
   pad, its edge-to-edge bleed and chevron inset), .sc-card (the dark
   dock), .sc-welcome.sc-hidden, .sc-mini-cards-off (the chat ⋯ Admin
   switch), the sibling margins between the welcome's rows (each row is
   its own component, so a rule across two of them would never match;
   a host spaces them with CssClass), .wa-chart-card (the full chart in
   the transcript, which this component does not draw) and .dsc-demo
   (the design system's catalog). Not ported: the full chart's labels
   (.ws-oc-axis, .ws-oc-val, .ws-oc-big and the map's .ws-oc-tile-*),
   which the card's view never draws.
   =================================================================== */

.ws-minicards-section[b-scfsc6t1k0] { width: 100%; max-width: 100%; }
.ws-scorecards-wrap[b-scfsc6t1k0] { position: relative; width: 100%; }
.ws-minicards[b-scfsc6t1k0] {
  --ws-mc-size: calc(var(--ws-sc-portrait-w, 216px) * 0.54);
  display: flex; justify-content: safe center; gap: 10px; width: 100%; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none; padding: 2px 2px 6px;
}
.ws-minicards[b-scfsc6t1k0]::-webkit-scrollbar { height: 0; width: 0; display: none; }
@keyframes wsScorecardSettle-b-scfsc6t1k0 {
  0%   { opacity: 0; transform: translateY(-24px); animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1); }
  45%  { opacity: 1; }
  62%  { transform: translateY(3px); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  82%  { transform: translateY(-1px); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  100% { opacity: 1; transform: none; }
}
.ws-minicard[b-scfsc6t1k0] {
  flex: 0 0 var(--ws-mc-size); width: var(--ws-mc-size); height: var(--ws-mc-size); min-width: 0; overflow: hidden;
  display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; gap: 6px;
  padding: 10px 10px 8px; scroll-snap-align: center; cursor: pointer; font-family: inherit; text-align: center;
  background: color-mix(in srgb, var(--primary) 10%, #fff); border: 1px solid var(--border-strong);
  border-radius: 10px !important; color: var(--text);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  animation: wsScorecardSettle-b-scfsc6t1k0 0.9s backwards;
  animation-delay: min(calc(0.3s + var(--ws-sc-i, 0) * 0.06s), 0.9s);
}
.ws-minicard:hover[b-scfsc6t1k0] { background: color-mix(in srgb, var(--primary) 16%, #fff); border-color: color-mix(in srgb, var(--primary) 45%, var(--border-strong)); box-shadow: 0 6px 18px rgba(37, 80, 124, 0.12); transform: translateY(-2px); }
.ws-minicard:focus-visible[b-scfsc6t1k0] { outline: 2px solid var(--primary); outline-offset: 2px; }
html.dark .ws-minicard[b-scfsc6t1k0] { background: color-mix(in srgb, var(--primary-bright, #8B9FAF) 14%, transparent); }
html.dark .ws-minicard:hover[b-scfsc6t1k0] { background: color-mix(in srgb, var(--primary-bright, #8B9FAF) 20%, transparent); }
.ws-minicard-plot[b-scfsc6t1k0] { flex: 1 1 0; min-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.ws-minicard .ws-oc-svg[b-scfsc6t1k0] { width: 100%; height: 100%; max-height: 100%; overflow: visible; }
.ws-minicard-title[b-scfsc6t1k0] {
  flex: 0 0 auto; font-size: 9px; font-weight: 600; line-height: 1.25; color: var(--text-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ws-minicard:hover .ws-minicard-title[b-scfsc6t1k0] { color: var(--text); }
@media (prefers-reduced-motion: reduce) { .ws-minicard[b-scfsc6t1k0] { animation: none; } }

/* Bare chevrons sitting just off the rail edges — no chunky circle. The edge
   fades below provide the backdrop that keeps the glyphs legible. */
.ws-sc-scroll[b-scfsc6t1k0] {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 36px; padding: 0; border-radius: 0 !important;
  background: transparent; border: 0; box-shadow: none; color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}
.ws-sc-scroll:hover[b-scfsc6t1k0] { background: transparent; color: var(--text); transform: translateY(-50%) scale(1.15); }
.ws-sc-scroll .material-symbols-outlined[b-scfsc6t1k0] { font-size: 22px !important; }
.ws-sc-scroll--next[b-scfsc6t1k0] { right: -16px; }
.ws-sc-scroll--prev[b-scfsc6t1k0] { left: -16px; }
.ws-sc-scroll[hidden][b-scfsc6t1k0] { display: none; }
.ws-scorecards-wrap[b-scfsc6t1k0]::before, .ws-scorecards-wrap[b-scfsc6t1k0]::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 24px; pointer-events: none; z-index: 4; opacity: 0; transition: opacity 0.15s ease;
}
.ws-scorecards-wrap[b-scfsc6t1k0]::before { left: 0; background: linear-gradient(to right, var(--bg) 0%, transparent 100%); }
.ws-scorecards-wrap[b-scfsc6t1k0]::after { right: 0; background: linear-gradient(to left, var(--bg) 0%, transparent 100%); }
html.dark .ws-scorecards-wrap[b-scfsc6t1k0]::before { background: linear-gradient(to right, var(--surface) 0%, transparent 100%); }
html.dark .ws-scorecards-wrap[b-scfsc6t1k0]::after { background: linear-gradient(to left, var(--surface) 0%, transparent 100%); }
.ws-scorecards-wrap.has-prev[b-scfsc6t1k0]::before { opacity: 1; }
.ws-scorecards-wrap.has-next[b-scfsc6t1k0]::after { opacity: 1; }

/* The chart itself — shared by the card and the full chart in the answer.
   Series colours come inline from the status scale (--chart-status-*,
   --chart-mono), which already carries its dark-mode values. */
.ws-oc-svg[b-scfsc6t1k0] { display: block; }
.ws-oc-bar[b-scfsc6t1k0], .ws-oc-well[b-scfsc6t1k0], .ws-oc-seg[b-scfsc6t1k0], .ws-oc-cell[b-scfsc6t1k0], .ws-oc-band[b-scfsc6t1k0] { stroke: none; }
.ws-oc-well[b-scfsc6t1k0] { fill: color-mix(in srgb, var(--text) 8%, transparent); }
.ws-oc-band--good[b-scfsc6t1k0] { fill: color-mix(in srgb, var(--chart-status-excellent) 22%, transparent); }
.ws-oc-band--poor[b-scfsc6t1k0] { fill: color-mix(in srgb, var(--chart-status-poor) 14%, transparent); }
.ws-oc-track[b-scfsc6t1k0] { stroke: color-mix(in srgb, var(--text) 10%, transparent); }
.ws-oc-arc[b-scfsc6t1k0] { fill: none; }
.ws-oc-line[b-scfsc6t1k0] { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ws-oc-svg--gauges .ws-oc-arc[b-scfsc6t1k0] { stroke-linecap: round; }
.ws-oc-dot[b-scfsc6t1k0] { stroke: var(--surface, #fff); stroke-width: 1.5; }
.ws-oc-grid[b-scfsc6t1k0] { stroke: color-mix(in srgb, var(--text) 9%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ws-oc-base[b-scfsc6t1k0] { stroke: color-mix(in srgb, var(--text) 22%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ws-oc-link[b-scfsc6t1k0] { stroke: color-mix(in srgb, var(--text) 35%, transparent); stroke-width: 1; stroke-dasharray: 3 2; vector-effect: non-scaling-stroke; }
.ws-oc-target[b-scfsc6t1k0] { stroke: var(--text); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ws-oc-cell--none[b-scfsc6t1k0] { fill: color-mix(in srgb, var(--text) 12%, transparent); }
.ws-oc-mini-val[b-scfsc6t1k0] { font-family: 'WISE Digits', var(--font-serif); font-size: 10px; font-weight: 800; fill: var(--text); }
/* Draw-in: bars rise, lines draw, arcs sweep, cells and labels fade up. */
@keyframes wsOcRise-b-scfsc6t1k0 { from { transform: scaleY(0); } }
@keyframes wsOcGrowX-b-scfsc6t1k0 { from { transform: scaleX(0); } }
@keyframes wsOcGrow-b-scfsc6t1k0 { from { transform: scale(0); } }
@keyframes wsOcDraw-b-scfsc6t1k0 { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes wsOcSweep-b-scfsc6t1k0 { from { stroke-dasharray: 0 100; } }
@keyframes wsOcFade-b-scfsc6t1k0 { from { opacity: 0; } }
.ws-oc-bar[b-scfsc6t1k0] { transform-box: fill-box; transform-origin: 50% 100%; animation: wsOcRise-b-scfsc6t1k0 0.7s cubic-bezier(0.22, 0.85, 0.25, 1) backwards; animation-delay: calc(0.35s + var(--ws-oc-i, 0) * 0.08s); }
.ws-oc-bar--h[b-scfsc6t1k0] { transform-origin: 0 50%; animation-name: wsOcGrowX-b-scfsc6t1k0; }
.ws-oc-bar--grow[b-scfsc6t1k0] { transform-origin: 0 100%; animation-name: wsOcGrow-b-scfsc6t1k0; }
.ws-oc-line[b-scfsc6t1k0] { stroke-dasharray: 1; animation: wsOcDraw-b-scfsc6t1k0 1s cubic-bezier(0.33, 0, 0.2, 1) 0.35s backwards; }
.ws-oc-cell[b-scfsc6t1k0] { animation: wsOcFade-b-scfsc6t1k0 0.3s ease backwards; animation-delay: calc(0.3s + var(--ws-oc-i, 0) * 0.008s); }
.ws-oc-area[b-scfsc6t1k0], .ws-oc-dot[b-scfsc6t1k0], .ws-oc-mini-val[b-scfsc6t1k0], .ws-oc-link[b-scfsc6t1k0], .ws-oc-target[b-scfsc6t1k0] { animation: wsOcFade-b-scfsc6t1k0 0.5s ease 0.9s backwards; }
.ws-oc-arc[b-scfsc6t1k0] { animation: wsOcSweep-b-scfsc6t1k0 1s cubic-bezier(0.33, 0, 0.2, 1) backwards; animation-delay: calc(0.35s + var(--ws-oc-i, 0) * 0.15s); }
.ws-oc-replay .ws-oc-svg *[b-scfsc6t1k0] { animation: none; }
@media (prefers-reduced-motion: reduce) { .ws-oc-svg *[b-scfsc6t1k0] { animation: none !important; } }
/* /Components/DesignSystem/WciChartState.razor.rz.scp.css */
/* ===================================================================
   WCI component: Chart states (WciChartState), INTEL-680
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo (local checkout, pulled
   2026-10-06):
     pages/wise.css
       lines 26586-26611  .wise-chart-state (+ --loading / --empty /
                          --error), -title, -sub, -bars, the
                          wiseChartStateBar breathing and its
                          reduced-motion stop
     js/all-modules-flow.js
       lines 5626-5664    module "Chart states" (catalog card: a chart
                          that is not ready is still a card of the same
                          height; bare icons, only the error icon red;
                          one ghost Retry)
   Class names are kept identical to wise.css; see REGISTRY.md.
   The one change: `.wise-chart-state .wise-btn` reaches into WciButton's
   own scope, so it is written `::deep .wise-btn`.
   =================================================================== */

/* ── Chart loading / empty / error states ──────────────────────────── */
.wise-chart-state[b-hj22gevsjz] {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: 6px; width: 100%; min-height: 196px; padding: 22px 18px; box-sizing: border-box;
  border-radius: 12px; border: 1px dashed var(--border-strong); background: var(--surface);
  font-family: inherit; color: var(--text-muted);
}
.wise-chart-state > .material-symbols-outlined[b-hj22gevsjz] { font-size: 28px; color: var(--text-subtle); }
.wise-chart-state--error > .material-symbols-outlined[b-hj22gevsjz] { color: var(--sec-red-text, var(--sec-red)); }
.wise-chart-state-title[b-hj22gevsjz] { font-size: 0.875rem; font-weight: 800; color: var(--text); }
.wise-chart-state-sub[b-hj22gevsjz] { font-size: 0.78rem; line-height: 1.45; max-width: 36ch; }
.wise-chart-state[b-hj22gevsjz]  .wise-btn { margin-top: 6px; }
.wise-chart-state--loading[b-hj22gevsjz] { border-style: solid; }
.wise-chart-state-bars[b-hj22gevsjz] { display: flex; align-items: flex-end; gap: 6px; height: 54px; margin-bottom: 4px; }
.wise-chart-state-bars span[b-hj22gevsjz] {
  width: 14px; border-radius: 3px 3px 0 0;
  background: color-mix(in srgb, var(--primary-bright, var(--primary)) 22%, transparent);
  animation: wiseChartStateBar-b-hj22gevsjz 1.3s ease-in-out infinite;
}
.wise-chart-state-bars span:nth-child(1)[b-hj22gevsjz] { height: 60%; animation-delay: 0s; }
.wise-chart-state-bars span:nth-child(2)[b-hj22gevsjz] { height: 85%; animation-delay: .12s; }
.wise-chart-state-bars span:nth-child(3)[b-hj22gevsjz] { height: 45%; animation-delay: .24s; }
.wise-chart-state-bars span:nth-child(4)[b-hj22gevsjz] { height: 100%; animation-delay: .36s; }
.wise-chart-state-bars span:nth-child(5)[b-hj22gevsjz] { height: 70%; animation-delay: .48s; }
@keyframes wiseChartStateBar-b-hj22gevsjz { 0%, 100% { opacity: .45; } 50% { opacity: 1; background: color-mix(in srgb, var(--primary-bright, var(--primary)) 40%, transparent); } }
@media (prefers-reduced-motion: reduce) { .wise-chart-state-bars span[b-hj22gevsjz] { animation: none; } }
/* /Components/DesignSystem/WciChatComposer.razor.rz.scp.css */
/* ===================================================================
   WCI component: Chat composer (WciChatComposer), INTEL-370
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo at commit 2c36820:
     pages/wise.css
       line  10357        .sc-input-row
       lines 10437-10543  the pill (.fl-input-wrap), the living sheen
                          (Motion & Resize: Chat composer sheen), the
                          field, the "+" button and its popover
       lines 10544-10547  .fl-model-row, .fl-attachments (the composer's
                          own rows; the chips are WciAttachmentChip's)
       lines 10630-10636  .fl-input-wrap--lead, .fl-more-popover--left
       lines 10672-10680  the stacked composer
       lines 11080-11186  Send, idle Send, Send becomes Stop, and the
                          composer-v2 grid
     js/all-modules-flow.js
       lines 3109-3161, 3859-3888  module "Chat composer" (demo template)
   Class names are kept IDENTICAL. What is NOT verbatim:
     - The composer-v2 grid rules drop their html.composer-v2 prefix: the
       design turns that class on unconditionally on every page
       (js/topbar.js isComposerV2On), so the grid IS the composer.
     - Not ported: the voice-dictation pulse (.sc-recording), the legacy
       model selector popover (.fl-model-*, superseded by the Database
       roster), the placeholder lock (.fl-input-lock*, .sc-send--locked,
       and the :not(.sc-send--locked) qualifier on the idle Send rules),
       the input glow toggle (html.chat-sheen-off), the full-bleed chat
       tint overrides (7252-7310), the SVG shim's optical nudge
       (.sc-send .wise-icon) and the empty-welcome lift on the rail: the
       app has none of those features.
     - The database trigger and its popover (.fl-db-*) are the Database
       roster's, in SourceSelector.razor.css.
     - --shadow-3 is never defined in wise.css, so the popover reads
       --sc-shadow-pop, as the design always does.
   =================================================================== */

/* ---- Row (wise.css 10357) ---- */
.sc-input-row[b-o0z87iqwlw] { display: flex; gap: 8px; align-items: center; }

/* ---- The pill (wise.css 10437-10449) ---- */
.fl-input-wrap[b-o0z87iqwlw] {
  /* Light tint of the brand blue (--primary #25507C) — a step deeper than the
     chat-tint container wash (5%) so the composer reads as its own blue
     surface inside the tinted card. Stroke is a light brand wash (not
     --border-strong) so the pill stays airy against the welcome surface. */
  position: relative; flex: 1; background: color-mix(in srgb, var(--primary) 10%, #fff); border: 1px solid color-mix(in srgb, var(--primary) 34%, transparent);
  border-radius: var(--radius-pill); padding: 0 6px 0 14px; min-height: 40px;
  display: flex; align-items: center; gap: 4px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
/* Dark mode: a brightened brand-blue tint (not the neutral white overlay) so
   the composer stands out as a blue surface against the navy card. */
html.dark .fl-input-wrap[b-o0z87iqwlw] { background: color-mix(in srgb, var(--primary-bright, #8B9FAF) 14%, transparent); border-color: color-mix(in srgb, var(--primary-bright, #8B9FAF) 36%, transparent); }
.fl-input-wrap:focus-within[b-o0z87iqwlw] { border-color: color-mix(in srgb, var(--primary) 55%, var(--border-strong)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }

/* ---- Living sheen stroke (wise.css 10451-10507) ----
   A shiny brand-blue gradient that travels around the composer border and
   only the border. A ::before is filled edge-to-edge, painted with a conic
   gradient, then masked so paint survives ONLY in the ~1.5px ring
   (content-box XOR border-box), never across the field. The angle rotates
   slowly (the "goes around") while opacity/brightness pulse (the
   "breathing"). The base 1px border stays as the resting stroke beneath. */
@property --wise-sheen-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.fl-input-wrap[b-o0z87iqwlw]::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  /* Broad, gently-graduated sweep: a low brand tint all the way round so it
     melts into the base stroke, with a specular highlight that travels. */
  background: conic-gradient(from var(--wise-sheen-angle),
    color-mix(in srgb, var(--primary) 32%, transparent) 0deg,
    color-mix(in srgb, var(--primary) 44%, transparent) 45deg,
    color-mix(in srgb, var(--primary) 62%, transparent) 95deg,
    color-mix(in srgb, var(--primary) 82%, #eaf3ff) 150deg,
    #f2f8ff 182deg,
    color-mix(in srgb, var(--primary) 82%, #eaf3ff) 214deg,
    color-mix(in srgb, var(--primary) 62%, transparent) 268deg,
    color-mix(in srgb, var(--primary) 44%, transparent) 318deg,
    color-mix(in srgb, var(--primary) 32%, transparent) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: wise-sheen-rotate-b-o0z87iqwlw 9s linear infinite, wise-sheen-breathe-b-o0z87iqwlw 4.5s ease-in-out infinite;
}
html.dark .fl-input-wrap[b-o0z87iqwlw]::before {
  background: conic-gradient(from var(--wise-sheen-angle),
    color-mix(in srgb, var(--primary-bright, #8B9FAF) 34%, transparent) 0deg,
    color-mix(in srgb, var(--primary-bright, #8B9FAF) 46%, transparent) 45deg,
    color-mix(in srgb, var(--primary-bright, #8B9FAF) 64%, transparent) 95deg,
    color-mix(in srgb, var(--primary-bright, #8B9FAF) 86%, #eef6ff) 150deg,
    #ffffff 182deg,
    color-mix(in srgb, var(--primary-bright, #8B9FAF) 86%, #eef6ff) 214deg,
    color-mix(in srgb, var(--primary-bright, #8B9FAF) 64%, transparent) 268deg,
    color-mix(in srgb, var(--primary-bright, #8B9FAF) 46%, transparent) 318deg,
    color-mix(in srgb, var(--primary-bright, #8B9FAF) 34%, transparent) 360deg);
}
@keyframes wise-sheen-rotate-b-o0z87iqwlw {
  to { --wise-sheen-angle: 360deg; }
}
@keyframes wise-sheen-breathe-b-o0z87iqwlw {
  0%, 100% { opacity: 0.5; filter: brightness(0.95) saturate(1); }
  50%      { opacity: 1;   filter: brightness(1.3) saturate(1.35); }
}
@media (prefers-reduced-motion: reduce) {
  .fl-input-wrap[b-o0z87iqwlw]::before { animation: none; opacity: 0.75; }
}

/* ---- Field, "+" button, "+" popover (wise.css 10509-10543) ---- */
.fl-input[b-o0z87iqwlw] { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-size: var(--fs-chat, 0.875rem); font-weight: 400; line-height: 1.45; padding: 8px 0; color: var(--text); font-family: inherit; resize: none; overflow: hidden; }
.fl-input[b-o0z87iqwlw]::placeholder { color: color-mix(in srgb, var(--text-subtle) 45%, transparent); font-style: italic; }
.fl-icon-btn[b-o0z87iqwlw] {
  width: 32px; height: 32px; border-radius: 9999px; color: var(--text-muted); cursor: pointer;
  border: none; background: none; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, color 0.15s ease; flex-shrink: 0;
}
.fl-icon-btn:hover[b-o0z87iqwlw] { background: var(--surface-2); color: var(--primary-ink, var(--primary)); }
.fl-icon-btn .material-symbols-outlined[b-o0z87iqwlw] { font-size: 20px !important; }
.fl-more-wrap[b-o0z87iqwlw] { position: relative; flex-shrink: 0; }
.fl-more-popover[b-o0z87iqwlw] {
  display: none; position: absolute; bottom: calc(100% + 3px); right: 0;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 14px;
  box-shadow: var(--shadow-3, var(--sc-shadow-pop)); padding: 4px; z-index: 600; min-width: 140px; flex-direction: column; gap: 2px;
}
.fl-more-popover.open[b-o0z87iqwlw] { display: flex; }
html.dark .fl-more-popover[b-o0z87iqwlw] { background: linear-gradient(155deg, #1A2339 0%, #1A2339 60%, #1A2339 100%); border-color: rgba(37, 80, 124,0.22); }
.fl-more-item[b-o0z87iqwlw] {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: none; background: transparent;
  border-radius: 10px; color: var(--text-muted); font-size: var(--fs-ui); font-weight: 500; cursor: pointer;
  width: 100%; transition: background 0.12s, color 0.12s; text-align: left; font-family: inherit;
}
.fl-more-item:hover[b-o0z87iqwlw] { background: var(--surface-2); color: var(--text); }
.fl-more-item .material-symbols-outlined[b-o0z87iqwlw] { font-size: 18px !important; flex-shrink: 0; }
.fl-more-divider[b-o0z87iqwlw] { height: 1px; background: var(--border); margin: 4px 6px; }
html.dark .fl-more-divider[b-o0z87iqwlw] { background: rgba(255,255,255,0.08); }
/* Host-supplied rows (MoreItems) are the host's markup. */
.fl-more-popover[b-o0z87iqwlw]  .fl-more-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: none; background: transparent;
  border-radius: 10px; color: var(--text-muted); font-size: var(--fs-ui); font-weight: 500; cursor: pointer;
  width: 100%; transition: background 0.12s, color 0.12s; text-align: left; font-family: inherit;
}
.fl-more-popover[b-o0z87iqwlw]  .fl-more-item:hover { background: var(--surface-2); color: var(--text); }
.fl-more-popover[b-o0z87iqwlw]  .fl-more-divider { height: 1px; background: var(--border); margin: 4px 6px; }

/* ---- The composer's rows (wise.css 10544-10547) ---- */
.fl-model-row[b-o0z87iqwlw] { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.fl-attachments[b-o0z87iqwlw] { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; padding: 2px 0 4px; }
.fl-attachments:empty[b-o0z87iqwlw] { display: none; }

/* ---- Lead control (wise.css 10630-10636) ---- */
/* When the input carries a leading control, tighten the left padding so the
   "+" sits flush at the start of the pill. */
.fl-input-wrap--lead[b-o0z87iqwlw] { padding-left: 6px; }
/* Left-opening variant of the small input popover (used by the "+" attach). */
.fl-more-popover--left[b-o0z87iqwlw] { right: auto; left: 0; }

/* ---- Stacked composer (wise.css 10672-10680) ---- */
.fl-input-wrap--stacked[b-o0z87iqwlw] { align-items: center; gap: 6px; padding: 5px 5px 5px 6px; }
.fl-input-col[b-o0z87iqwlw] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; }
.fl-input-line[b-o0z87iqwlw] { display: flex; align-items: center; gap: 6px; min-width: 0; }
.fl-input-wrap--stacked .fl-input[b-o0z87iqwlw] { padding: 3px 0; }

/* ---- Send (wise.css 11080-11121) ---- */
/* Send button lives INSIDE the input pill (flush right, even padding). */
.sc-send[b-o0z87iqwlw] {
  width: 34px; height: 34px; flex-shrink: 0; align-self: center; margin-left: 2px;
  border-radius: 9999px; border: 0; padding: 0; cursor: pointer;
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  line-height: 0;
  appearance: none; -webkit-appearance: none;
  transition: background 0.15s ease;
}
.sc-send:hover[b-o0z87iqwlw] { background: color-mix(in srgb, var(--primary) 86%, black); color: #fff; }
/* Idle send — the composer has nothing to send yet (no text, no pending
   attachment). Muted and non-interactive until content lands. */
.sc-send:disabled[b-o0z87iqwlw],
.sc-send--idle[b-o0z87iqwlw] {
  background: color-mix(in srgb, var(--primary) 26%, var(--surface));
  color: color-mix(in srgb, #fff 78%, transparent);
  cursor: default;
}
.sc-send:disabled:hover[b-o0z87iqwlw],
.sc-send--idle:hover[b-o0z87iqwlw] {
  background: color-mix(in srgb, var(--primary) 26%, var(--surface));
  color: color-mix(in srgb, #fff 78%, transparent);
}
html.dark .sc-send:disabled[b-o0z87iqwlw],
html.dark .sc-send--idle[b-o0z87iqwlw] {
  background: color-mix(in srgb, var(--primary-bright, #8B9FAF) 24%, transparent);
}
.sc-send .material-symbols-outlined[b-o0z87iqwlw] {
  font-size: 18px !important; line-height: 1;
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  /* Filled paper plane — the outline twin reads hollow and left-heavy in this circle. */
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ---- Send becomes Stop (wise.css 11122-11150) ----
   While a turn is running and the member has nothing of their own waiting to
   go, the airplane is a stop square and pressing it halts that turn where it
   stands. Both glyphs live in the button and CSS picks one. Same primary
   circle either way — the control does not move or resize mid-turn. */
.sc-send .material-symbols-outlined.sc-send-stop-i[b-o0z87iqwlw] { display: none; }
.sc-send--stop .material-symbols-outlined:not(.sc-send-stop-i)[b-o0z87iqwlw] { display: none; }
.sc-send--stop .material-symbols-outlined.sc-send-stop-i[b-o0z87iqwlw] {
  display: flex; align-items: center; justify-content: center;
}
/* The owl avatar's in-progress ring, drawn on the inside edge of the circle.
   Light mode's helix ink is the button fill itself, so the arc turns white
   there; dark keeps the helix ink the avatar ring uses. */
.sc-send--stop[b-o0z87iqwlw] { position: relative; --sc-stop-ring: #fff; }
html.dark .sc-send--stop[b-o0z87iqwlw] { --sc-stop-ring: var(--helix-ink); }
.sc-send--stop[b-o0z87iqwlw]::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; box-sizing: border-box;
  border: 3px solid color-mix(in srgb, var(--sc-stop-ring) 26%, transparent);
  border-top-color: var(--sc-stop-ring); pointer-events: none;
  animation: scSpin-b-o0z87iqwlw 0.8s linear infinite;
}
@keyframes scSpin-b-o0z87iqwlw { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sc-send--stop[b-o0z87iqwlw]::after { animation: none; } }

/* ---- Composer v2: always the stacked grid (wise.css 11152-11186) ----
   Text is its own full-width row. "+" / database / send hold the bottom
   line. The field soft-wraps and grows (wci-composer.js); the rail is
   bottom-anchored so the pill grows UPWARD. */
.fl-input-wrap--stacked[b-o0z87iqwlw] {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "text text text"
    "plus db   send";
  align-items: center;
  row-gap: 2px;
  border-radius: var(--r-md, 16px);
}
/* Pending chips open a dedicated full-width row between the text and the
   bottom controls (`has-attachments` comes off the wrap when chips clear). */
.fl-input-wrap--stacked.has-attachments[b-o0z87iqwlw] {
  grid-template-areas:
    "text text text"
    "att  att  att"
    "plus db   send";
}
/* Dissolve the flex column so the selector row, text line and chip row
   become grid items of the wrap itself. */
.fl-input-wrap--stacked .fl-input-col[b-o0z87iqwlw] { display: contents; }
.fl-input-wrap--stacked .fl-attachments[b-o0z87iqwlw] { grid-area: att; padding: 0 4px 2px 8px; }
.fl-input-wrap--stacked .fl-input-line[b-o0z87iqwlw] { grid-area: text; margin: 0; }
.fl-input-wrap--stacked .fl-more-wrap[b-o0z87iqwlw] { grid-area: plus; margin: 0; }
.fl-input-wrap--stacked .fl-model-row[b-o0z87iqwlw] { grid-area: db; justify-self: end; margin: 0; flex-wrap: nowrap; }
.fl-input-wrap--stacked .sc-send[b-o0z87iqwlw] { grid-area: send; }
/* Past ~7 lines the field stops growing and scrolls internally. */
.fl-input-wrap--stacked .fl-input[b-o0z87iqwlw] { padding: 6px 4px 2px 8px; max-height: 140px; overflow-y: auto; }

/* ---- APP-OWNED ADDITIONS ---- */
/* The "+" sits in the grid's plus cell even with no database selector in the
   db cell. */
.fl-input-wrap--stacked .fl-model-row:empty[b-o0z87iqwlw] { min-height: 1px; }
/* The db cell is minmax(0, 1fr) and the row never outgrows it, so a long
   database name ellipsizes inside the pill instead of spilling out past its
   left edge (the cell is end-aligned, so the overflow ran leftward). The row may
   also shrink below its content (SourceSelector.razor.css ellipsizes the label). */
.fl-input-wrap--stacked .fl-model-row[b-o0z87iqwlw] { min-width: 0; max-width: 100%; }
.fl-icon-btn:focus-visible[b-o0z87iqwlw],
.fl-more-item:focus-visible[b-o0z87iqwlw],
.sc-send:focus-visible[b-o0z87iqwlw] { outline: 2px solid var(--primary); outline-offset: 2px; }
.fl-icon-btn:disabled[b-o0z87iqwlw],
.fl-more-item:disabled[b-o0z87iqwlw] { cursor: default; opacity: 0.5; }
.fl-icon-btn:disabled:hover[b-o0z87iqwlw] { background: none; color: var(--text-muted); }
.fl-more-item:disabled:hover[b-o0z87iqwlw] { background: transparent; color: var(--text-muted); }
.fl-input:disabled[b-o0z87iqwlw] { cursor: default; color: var(--text-subtle); }
/* /Components/DesignSystem/WciChatDock.razor.rz.scp.css */
/* WciChatDock: the WISEcode AI dock. Ported from ip-b2b (checkout ab499e3, read 2026-10-08):
     pages/wise.css 7852-7860   .wiseai-dock
     pages/wise.css 7875        .wiseai-dock.wiseai-dock-open (the single 380px tier)
     pages/wise.css 8001-8005   .wiseai-dock .sc-card (the pane's entry)
     pages/wise.css 8006-8025   .sc-card (and html.dark)
     pages/wise.css 8118-8141, 8183-8184   .chat-topbar, .sc-topbar-controls
     pages/wise.css 6570-6580, 6675-6738   header-float: the head strip collapses to nothing and its controls float
                                           top-right (the design's pages all run html.header-float; its title block,
                                           .sc-topbar-lead, is dropped from the markup rather than hidden)
     pages/wise.css 8181-8231   .wiseai-dock-collapsed and the .wiseai-dock-fab owl circle (phones only, below)
   Class names kept identical to wise.css. Not ported: the fold to the owl button on wider screens (the dock is always
   there; Kevin, 2026-10-13: phones fold, because the pane took most of the screen), the modules-row placement (sticky insets, order, the solo / center variants,
   the double / triple / fill tiers): the app has no modules row, so the pane is fixed beside the primary nav, the
   design's default left position (app-owned, below), and the layout's content gives way to it
   (wwwroot/css/wci/wci-modules.css). The dock has one size (D40: it never covers the page), so the design's width
   toggle is not ported. */

.wiseai-dock[b-leml0ef3qf] {
  display: none;
  flex-shrink: 0;
  flex-direction: column;
  align-self: stretch;
  height: 100%;
  max-height: 100%;
  order: 99;
}
.wiseai-dock.wiseai-dock-open[b-leml0ef3qf] { display: flex; flex: 0 0 380px; width: 380px; min-width: 380px; max-width: 380px; position: sticky; z-index: 40; }

.wiseai-dock .sc-card[b-leml0ef3qf] {
  transform-origin: left center;
  animation: panelBounceRight-b-leml0ef3qf 0.56s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: 0.05s;
}
@keyframes panelBounceRight-b-leml0ef3qf {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.sc-card[b-leml0ef3qf] {
  --fs-welcome-title: 1.0625rem;
  --fs-chat: 0.875rem;
  --sc-shadow-pop: 0 12px 40px rgba(0, 0, 0, 0.45);
  flex: 1 1 0%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-md);
  box-shadow: var(--chat-rim), var(--chat-elev, var(--shadow-card));
  background: var(--surface);
  border: 1px solid var(--chat-rim-color, var(--border));
  position: relative;
  font-size: var(--fs-ui);
  --chat-line-height: 1.6;
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
html.dark .sc-card[b-leml0ef3qf] {
  background: linear-gradient(155deg, #1A2339 0%, #1A2339 60%, #1A2339 100%);
  border-color: var(--chat-rim-color, var(--border));
  box-shadow: var(--chat-rim), var(--chat-elev);
}

.chat-topbar[b-leml0ef3qf] {
  display: flex; align-items: center; position: relative; z-index: 50;
  box-sizing: border-box; flex-shrink: 0;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.sc-topbar-controls[b-leml0ef3qf] { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; }

/* HEADER FLOAT (headerless modules). The head strip reclaims no vertical space, so the chat slides up to the top of
   the card; the controls are pinned over the top-right corner, above the welcome (z-index 12 beats its 10). */
.chat-topbar[b-leml0ef3qf] {
  height: 0;
  min-height: 0;
  padding: 0;
  border-bottom: 0;
  background: transparent;
  overflow: visible;
  z-index: 12;
}
.chat-topbar > .sc-topbar-controls[b-leml0ef3qf] {
  position: absolute;
  top: 8px;
  right: 8px;
  margin: 0;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* ===================== APP-OWNED ADDITIONS ===================== */

/* The pane sits just right of the primary nav (--wci-dock-inset, wci-modules.css, is the nav's right edge plus its
   gap), floating like the nav (sidebar.css: the same gap and top), and the layout's content makes room for it
   (wci-modules.css). Above the page, below every WCI overlay (10100). */
.wci-chat-dock.wiseai-dock-open[b-leml0ef3qf] {
  position: fixed;
  top: var(--sidebar-gap, 12px);
  bottom: var(--sidebar-gap, 12px);
  left: max(var(--sidebar-gap, 12px), var(--wci-dock-inset, 0px));
  right: auto;
  height: auto;
  max-height: none;
  z-index: 45;
  transition: left 0.5s ease-in-out;
}
/* The design's full-bleed shell (ip-b2b html.full-bleed.fb-chat-only #chat-shell, read 2026-10-22): the chat runs the
   full height right of the flush nav rail, square, with a hairline each side and no card shadow, at the design's
   single width (--wci-chat-dock-w, wci-modules.css: 380px). The page sheet joins its right edge. */
@media (min-width: 769px) {
  .wci-chat-dock.wiseai-dock-open[b-leml0ef3qf] {
    top: 0;
    bottom: 0;
    left: var(--wci-chat-rail-w, 54px);
    flex-basis: var(--wci-chat-dock-w, 380px);
    width: var(--wci-chat-dock-w, 380px);
    min-width: var(--wci-chat-dock-w, 380px);
    max-width: var(--wci-chat-dock-w, 380px);
  }
  .wci-chat-dock .sc-card[b-leml0ef3qf] {
    border-radius: 0;
    border-top: 0;
    border-bottom: 0;
    box-shadow: none;
  }
}
/* The chat wash (wci-tokens.css): the design's blue chat surface and depth sweep, with the reference's soft glows. The
   chat inside is see-through so the wash reads behind the welcome, the transcript and the composer. */
.wci-chat-dock .sc-card[b-leml0ef3qf] { background: var(--chat-wash); }
.wci-chat-dock-chat[b-leml0ef3qf]  .wiseai-chat { background: transparent; }
.wci-chat-dock-body[b-leml0ef3qf] { flex: 1 1 auto; min-height: 0; display: flex; }
.wci-chat-dock-chat[b-leml0ef3qf] { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; position: relative; }
@media (max-width: 768px) {
  /* A phone has no room beside the page: the pane sits under it, as the design's dock stacks below the page on a
     phone (wise.css 3926-3941, 60-70dvh), and the page keeps the screen above it (wci-modules.css pads it). The pane
     cannot be closed, so it must never cover the whole screen. */
  .wci-chat-dock.wiseai-dock-open[b-leml0ef3qf] {
    top: auto; left: 0; right: 0; bottom: 0;
    height: 60dvh; width: auto; min-width: 0; max-width: none; flex: none;
    border-radius: 0;
  }
}

/* Floating circle: the folded pane (wise.css 8185-8231, the phone size). Phones only: the media rules below hide it,
   and the minimize control, from 769px up, where the pane cannot fold. */
.wiseai-dock-fab[b-leml0ef3qf] {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1200;
  width: 52px;
  height: 52px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, #fff 18%, var(--primary));
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32), 0 2px 8px rgba(0, 0, 0, 0.22);
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease, background 0.18s ease;
}
.wiseai-dock-fab.is-shown[b-leml0ef3qf] {
  display: inline-flex;
  animation: wiseaiFabPop-b-leml0ef3qf 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.wiseai-dock-fab:active[b-leml0ef3qf] { transform: scale(0.96); }
.wiseai-dock-fab:focus-visible[b-leml0ef3qf] {
  outline: 2px solid color-mix(in srgb, #fff 70%, var(--primary));
  outline-offset: 2px;
}
.wiseai-dock-fab-bug[b-leml0ef3qf] { display: flex; align-items: center; justify-content: center; width: 28px; height: 16px; }
.wiseai-dock-fab-bug[b-leml0ef3qf]  svg { width: 28px; height: 16px; color: #fff; }
@keyframes wiseaiFabPop-b-leml0ef3qf {
  from { opacity: 0; transform: scale(0.4) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* The minimize control beside the chat's ⋯, drawn like that kebab (WciPanelMenu.razor.css .panel-more-btn). */
.wci-chat-dock-fold[b-leml0ef3qf] {
  display: none; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; background: transparent; border: 0;
  color: var(--text-muted); cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.wci-chat-dock-fold .material-symbols-outlined[b-leml0ef3qf] { font-size: 20px; line-height: 1; }
.wci-chat-dock-fold:hover[b-leml0ef3qf] { background: var(--surface-3); color: var(--text); }
.wci-chat-dock-fold:focus-visible[b-leml0ef3qf] { outline: 2px solid var(--primary); outline-offset: 2px; }

@media (max-width: 768px) {
  .wci-chat-dock-fold[b-leml0ef3qf] { display: inline-flex; }
  /* Folded: the pane leaves the screen (the chat stays mounted, so the conversation is kept) and the circle shows. */
  .wci-chat-dock.wiseai-dock-open.wiseai-dock-collapsed[b-leml0ef3qf] { display: none; }
}
@media (min-width: 769px) {
  .wiseai-dock-fab.is-shown[b-leml0ef3qf] { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wiseai-dock .sc-card[b-leml0ef3qf], .wci-chat-dock.wiseai-dock-open[b-leml0ef3qf], .wiseai-dock-fab[b-leml0ef3qf], .wiseai-dock-fab.is-shown[b-leml0ef3qf] { animation: none; transition: none; }
}
/* /Components/DesignSystem/WciChatWelcome.razor.rz.scp.css */
/* ===================================================================
   WCI component: Chat welcome (WciChatWelcome), WI v2 D48
   -------------------------------------------------------------------
   PORTED from the ip-b2b design repo (checkout ab499e3, read 2026-10-08):
     /Users/kevinjones/src/wc/ip-b2b/pages/wise.css
       lines 8762-8774   .sc-welcome (bottom-anchored over the chat body, growing upward)
       lines 8786-8787   .sc-welcome > .ws-heading / .ws-sub do not shrink
       lines 8792-8800, 9010-9011, 9040-9054  the "at a glance" rail's place in the welcome (.sc-welcome--cards, the
                         section's edge-to-edge margins, the rail's inset); the rail, its chevrons and edge fades are
                         WciScorecard's
     /Users/kevinjones/src/wc/ip-b2b/js/wiseai-chat.js
       lines 3229-3231   the welcome's 51px lift off the composer (the hidden owl's quarter footprint, ::after)
       lines 8874-8878   .ws-heading, .ws-heading .ws-tm, .ws-sub
       lines 8883-8916   .ws-chips, .ws-chips .chip, .sc-welcome > .ws-chips-scroll (the two-row cap's box) and its
                         hidden-chip rule
       lines 10199-10241 .chip, .chip .material-symbols-outlined, .chip.chip-primary.ws-intent-chip--more (Show more)
       lines 10257-10268 .ws-intent-chip and its glyph, hover and dark rules
     /Users/kevinjones/src/wc/ip-b2b/pages/product-portfolio.html
       lines 3646-3653, 5206 the dock's heading: weight 600, line-height 1.12, its margins
     pages/wise.css 333-337 (html.sans-headlines, since dropped with serif, ip-b2b 3c70c01): the heading's face is
       DM Sans.
   The chip rules repeat WciIntentChip's port (the same wise.css lines) because scoped CSS cannot reach another
   component's sheet. Not ported: the owl (.ws-logo-wrap is hidden on every style but Orbit, wise.css 8805-8808), the
   carousel variant (.ws-chips-wrap, retired in the design) and the chips' fly-in (the design paints the welcome at
   once, js/wiseai-chat.js paintWelcomeNow).
   Class names are kept IDENTICAL so a future re-port is a section diff.
   =================================================================== */

.sc-welcome[b-pugwk87h00] {
  --ws-welcome-pad: 2rem;
  position: absolute; inset: 0; z-index: 10; background: transparent;
  display: flex; flex-direction: column; align-items: center;
  /* Bottom-anchored so the welcome (heading -> chips) sits just above the input rail and reads like the rest of the
     chat, content flowing UP from the bottom. `safe` flips back to top-alignment the moment the content is taller
     than the chat body. */
  justify-content: safe flex-end; overflow-x: hidden; overflow-y: auto;
  padding: var(--ws-welcome-pad); font-size: var(--fs-ui);
}
html.dark .sc-welcome[b-pugwk87h00] { background: transparent; }
.sc-welcome > .ws-heading[b-pugwk87h00],
.sc-welcome > .ws-sub[b-pugwk87h00] { flex-shrink: 0; }
/* The lift off the composer (js/wiseai-chat.js 3229-3231, on every published welcome: the owl's slot is hidden, so the
   copy rides a quarter of its footprint higher). A spacer under the last block, ordered last, that gives way first
   when the chat is too short to fit it. */
.sc-welcome[b-pugwk87h00]::after { content: ''; flex: 0 1 51px; min-height: 0; order: 99; }

/* The "at a glance" rail (wise.css 8792-8800, 9010-9011, 9040-9054): the rail itself is WciScorecard's, so these rules
   reach into it (::deep) only to place it, and only the welcome's own rail (data-welcome-rail), not one a host passes
   as ChildContent. The section cancels the welcome's side pad so the scroll box runs the chat
   edge to edge; the first card rests on that same inset, under the heading, and the next one peeks off the right. The
   trailing 6px is hover-lift and focus-ring room. */
.sc-welcome--cards[b-pugwk87h00] { padding-top: 1.75rem; }
/* The design's welcome titles read in DM Sans (it dropped serif and html.sans-headlines, ip-b2b 3c70c01). --font-serif
   is the title face app-wide now; the rail still names the stack so its titles keep the WISE Digits numerals. */
.sc-welcome[b-pugwk87h00]  [data-welcome-rail] {
  --font-serif: 'WISE Digits', 'DM Sans', system-ui, -apple-system, sans-serif;
}
.sc-welcome[b-pugwk87h00]  .ws-scorecards-section[data-welcome-rail] {
  flex-shrink: 0;
  align-self: stretch;
  box-sizing: border-box;
  width: auto;
  max-width: none;
  margin: 0 calc(-1 * var(--ws-welcome-pad, 2rem)) 1.5rem;
}
.sc-welcome[b-pugwk87h00]  [data-welcome-rail] .ws-scorecards {
  padding-inline-start: var(--ws-welcome-pad, 2rem);
  padding-inline-end: 6px;
  scroll-padding-inline-start: var(--ws-welcome-pad, 2rem);
  scroll-padding-inline-end: 6px;
}

.ws-heading[b-pugwk87h00] {
  font-family: 'WISE Digits', 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2rem); font-weight: 600; line-height: 1.12; letter-spacing: -0.01em;
  color: var(--text); text-align: center; margin: 1.25rem 0 0.75rem;
}
/* Trademark mark in the welcome heading: dropped a size and nudged up so it reads as a superscript rather than a
   full-height glyph. (::deep: the heading's spans are built in the code-behind, which carries no scope attribute.) */
.ws-heading[b-pugwk87h00]  .ws-tm { font-size: 0.55em; vertical-align: 0.42em; font-weight: 600; letter-spacing: 0; }
.ws-sub[b-pugwk87h00] { font-size: var(--fs-ui); font-weight: 400; color: var(--text-muted); text-align: center; margin: 0 0 1.5rem; }

.ws-chips[b-pugwk87h00] { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 100%; width: 100%; min-width: 0; margin-bottom: 2rem; }
.ws-chips .chip[b-pugwk87h00] { width: fit-content; max-width: 100%; flex: 0 0 auto; }
/* Welcome intent chips. Cap at TWO wrapping rows; overflow is revealed by a trailing "Show more" chip (the script),
   never a one-line horizontal carousel or a scrollable chip well. */
.sc-welcome > .ws-chips-scroll[b-pugwk87h00] {
  --ws-chip-h: 28px;
  --ws-chip-gap: 10px;
  flex: 0 0 auto;
  align-self: stretch;
  min-width: 0;
  width: 100%;
  /* At full width the row keeps to the chat column (the composer's 860px plus the chips' side room), as the design's
     widened chat caps it (product-portfolio.html .ws-chips-wrap max-width: 864px; margin: 0 auto), so the chips sit
     over the composer rather than across the whole chat. A narrow pane is under the cap. */
  max-width: min(100%, 864px);
  margin: 0 auto;
  /* No side pad: the welcome column already frames the chips, and the row must stay centred under the headline. */
  padding: 4px 0;
  overflow-x: hidden;
  overflow-y: visible;
}
.sc-welcome > .ws-chips-scroll > .ws-chips[b-pugwk87h00] {
  margin-bottom: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: center;
}
.sc-welcome > .ws-chips-scroll > .ws-chips .chip[b-pugwk87h00] {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sc-welcome > .ws-chips-scroll > .ws-chips .chip[hidden][b-pugwk87h00] { display: none !important; }

.chip[b-pugwk87h00] {
  display: inline-flex; align-items: center; gap: 6px;
  box-sizing: border-box; height: 28px; padding: 0 7px;
  /* One size app-wide: the 28px in-conversation reply chip. Same blue tint as the composer (.fl-input-wrap, 10%
     primary) so chips and the input share one surface color, light and dark. */
  background: color-mix(in srgb, var(--primary) 10%, #fff); border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  font-size: var(--fs-label); font-weight: 500; line-height: 1; color: var(--text-muted); cursor: pointer; font-family: inherit;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.chip:hover[b-pugwk87h00] { background: color-mix(in srgb, var(--primary) 16%, #fff); border-color: color-mix(in srgb, var(--primary) 40%, var(--border-strong)); color: var(--text); }
html.dark .chip:hover[b-pugwk87h00],
html.dark .ws-intent-chip:hover[b-pugwk87h00] {
  background: color-mix(in srgb, var(--primary-bright, #8B9FAF) 22%, transparent);
  border-color: color-mix(in srgb, var(--primary-bright, #8B9FAF) 55%, var(--primary));
  color: var(--text);
}
.chip .material-symbols-outlined[b-pugwk87h00] { font-size: 13px !important; }
.chip.chip-primary.ws-intent-chip--more[b-pugwk87h00] {
  background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600;
}
.chip.chip-primary.ws-intent-chip--more:hover[b-pugwk87h00] {
  background: color-mix(in srgb, var(--primary) 90%, #000); border-color: color-mix(in srgb, var(--primary) 90%, #000); color: #fff;
}
.chip.chip-primary.ws-intent-chip--more .material-symbols-outlined[b-pugwk87h00] {
  color: #fff !important; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
html.dark .chip.chip-primary.ws-intent-chip--more[b-pugwk87h00] { background: var(--primary); border-color: var(--primary); color: #fff; }
.ws-intent-chip[b-pugwk87h00] { background: color-mix(in srgb, var(--primary) 10%, #fff); border-color: var(--border-strong); color: var(--text-muted); font-weight: 500; }
.ws-intent-chip > .material-symbols-outlined[b-pugwk87h00] { color: var(--primary); }
html.dark .ws-intent-chip > .material-symbols-outlined[b-pugwk87h00] { color: var(--primary-bright, #8B9FAF); }
.ws-intent-chip:hover[b-pugwk87h00] { background: color-mix(in srgb, var(--primary) 16%, #fff); border-color: color-mix(in srgb, var(--primary) 40%, var(--border-strong)); color: var(--text); }
html.dark .chip[b-pugwk87h00] { background: color-mix(in srgb, var(--primary-bright, #8B9FAF) 14%, transparent); border-color: var(--primary); }
html.dark .ws-intent-chip[b-pugwk87h00] { background: color-mix(in srgb, var(--primary-bright, #8B9FAF) 14%, transparent); border-color: var(--primary); }
.ws-intent-chip.is-used[b-pugwk87h00] {
  background: color-mix(in srgb, var(--text-muted) 9%, transparent);
  border-color: color-mix(in srgb, var(--text-muted) 22%, transparent);
  opacity: 0.52; cursor: default; pointer-events: none;
}

/* ===================== APP-OWNED ADDITIONS ===================== */

/* The entrance: the design's welcome fades up into place as its .sc-hidden lifts (wise.css 8780-8784: opacity and an
   8px rise over 0.3s); here the welcome mounts visible, so the same move runs once as it mounts. */
.sc-welcome.ws-in[b-pugwk87h00] { animation: wciWelcomeIn-b-pugwk87h00 0.3s ease both; }
@keyframes wciWelcomeIn-b-pugwk87h00 {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
/* The home's two parts around the composer (D68, WciChatWelcomePart): in the page's flow rather than laid over the chat
   body, as the design's welcome is once its composer joins it (js/wiseai-chat.js applyWelcomeOrder). The head rests on the
   composer; the tail hangs under it. No lift spacer: the composer is the welcome's middle, not its floor. */
.sc-welcome.wci-welcome--head[b-pugwk87h00],
.sc-welcome.wci-welcome--tail[b-pugwk87h00] { position: static; inset: auto; overflow: visible; }
.sc-welcome.wci-welcome--head[b-pugwk87h00]::after,
.sc-welcome.wci-welcome--tail[b-pugwk87h00]::after { content: none; }
.sc-welcome.wci-welcome--head[b-pugwk87h00] { justify-content: flex-end; padding-bottom: 0.25rem; }
.sc-welcome.wci-welcome--head > .ws-sub[b-pugwk87h00] { margin-bottom: 0.5rem; }
/* The home's heading holds one line, as the design shows it: it keeps the design's size where the column is wide
   enough and shrinks with the column (cqi) where it is not, down to a floor where it wraps, balanced, on a phone. */
.sc-welcome.wci-welcome--head[b-pugwk87h00] { box-sizing: border-box; width: 100%; container-type: inline-size; }
.sc-welcome.wci-welcome--head > .ws-heading[b-pugwk87h00] {
  font-size: max(1.25rem, min(clamp(1.5rem, 1rem + 1.6vw, 2rem), 3.6cqi));
  text-wrap: balance;
}
.sc-welcome.wci-welcome--tail[b-pugwk87h00] { justify-content: flex-start; padding-top: 1.25rem; }
/* Under the composer the chips come first, then the cards (pages/wiseai.html: the intent row sits right under the
   composer's "What can I ask?" line, the card rail below it). */
.sc-welcome.wci-welcome--tail > .ws-chips-scroll[b-pugwk87h00] { order: -1; margin-bottom: 2.5rem; }
.chip:focus-visible[b-pugwk87h00] { outline: 2px solid var(--primary); outline-offset: 2px; }
.chip:disabled[b-pugwk87h00] { opacity: 0.5; cursor: default; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .sc-welcome.ws-in[b-pugwk87h00] { animation: none; }
  .chip[b-pugwk87h00] { transition: none; }
}
/* /Components/DesignSystem/WciDashCard.razor.rz.scp.css */
/* ===================================================================
   WCI component: Dashboard card (WciDashCard), INTEL-391
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo, revision a2ba5dc
   (pulled 2026-09-25):
     pages/wise.css
       lines 11322-11334  .dash-card shell + html.dark
       lines 11345-11353  .dash-eyebrow, .is-primary (+ html.dark)
       lines 12864-12869  .dash-card-title
       lines 13020-13037  .dash-card-topbar, .dash-card-topbar-lead
     and, because WciDashClaim (INTEL-411 "Dashboard scores") renders
     its root through this component:
       lines 12250-12256  .dash-claim
       lines 14686-14693, 14698-14701, 14725-14726
                          the .dash-claim root lines of the
                          @container dash queries (1050 / 640 / 480)
     js/all-modules-flow.js
       lines 5320-5331    module "Dashboard card"
       lines 5462-5518    module "Dashboard scores"
   Class names are kept IDENTICAL to wise.css.

   Scoped CSS: the root element owns .dash-card and the layout class a
   host or WciDashClaim passes through CssClass, so a
   host override of the shell (padding, radius) must outrank 0,2,0.
   =================================================================== */

/* ---- Shared card shell ---- */
.dash-card[b-mb8g8vqrgr] {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: 22px 24px;
}
html.dark .dash-card[b-mb8g8vqrgr] {
  background: rgba(255, 255, 255, 0.025);
  border-color: rgba(255, 255, 255, 0.06);
}

.dash-eyebrow[b-mb8g8vqrgr] {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.dash-eyebrow.is-primary[b-mb8g8vqrgr] { color: var(--primary); }
html.dark .dash-eyebrow.is-primary[b-mb8g8vqrgr] { color: var(--primary-bright); }

.dash-card-title[b-mb8g8vqrgr] {
  margin: 4px 0 16px;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text);
}

/* ---- Card top bar (title + three-dot menu) ---- */
.dash-card-topbar[b-mb8g8vqrgr] {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.dash-card-topbar .dash-card-title[b-mb8g8vqrgr] { margin: 4px 0 0; }

/* Title + inline controls (e.g. the GRAS health-status toggle) sit together on
   the left; the kebab stays pinned to the right via the topbar's space-between. */
.dash-card-topbar-lead[b-mb8g8vqrgr] {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex-wrap: wrap;
}

/* ---- Dashboard scores: the claim band ---- */
.dash-claim[b-mb8g8vqrgr] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr);
  gap: 28px;
  align-items: stretch;
  padding: 34px 36px;
}

@container dash (max-width: 1050px) {
  .dash-claim[b-mb8g8vqrgr] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 28px;
    row-gap: 32px;
  }
}
@container dash (max-width: 640px) {
  .dash-claim[b-mb8g8vqrgr] { gap: 16px; }
  .dash-claim[b-mb8g8vqrgr] { padding-left: 20px; padding-right: 20px; }
}
@container dash (max-width: 480px) {
  .dash-claim[b-mb8g8vqrgr] { grid-template-columns: 1fr; row-gap: 30px; }
}

/* ===================================================================
   APP-OWNED ADDITIONS (not in wise.css)
   =================================================================== */

/* The design sets card titles in the brand serif on its dashboard pages
   (pages/analytics-report.css 28, body[data-product-id="dashboard"]
   .dash-card-title); every host of this card in the app is such a page. */
.dash-card-title[b-mb8g8vqrgr] {
  font-family: var(--font-serif);
  letter-spacing: -0.01em;
}

/* The trailing control of the top bar keeps its own width. */
.wci-dash-card-trail[b-mb8g8vqrgr] {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* The design's band is four columns. WciDashClaim adds one of these for a
   two- or three-column band so the grid has no empty tracks. Three columns
   stay side by side until 760px (the design's 2x2 fold has no fourth cell to
   pair with) and two until 480px. */
.dash-claim.wci-dash-claim--3[b-mb8g8vqrgr] {
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr);
}
.dash-claim.wci-dash-claim--2[b-mb8g8vqrgr] {
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
}
@container dash (max-width: 760px) {
  .dash-claim.wci-dash-claim--3[b-mb8g8vqrgr] { grid-template-columns: 1fr; }
}
@container dash (max-width: 480px) {
  .dash-claim.wci-dash-claim--2[b-mb8g8vqrgr] { grid-template-columns: 1fr; }
}

/* Bare: a card seated as a column inside another card keeps its title and
   body but not a second shell. */
.dash-card.wci-dash-card--bare[b-mb8g8vqrgr] {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
html.dark .dash-card.wci-dash-card--bare[b-mb8g8vqrgr] { background: none; }
/* /Components/DesignSystem/WciDashClaim.razor.rz.scp.css */
/* ===================================================================
   WCI component: Dashboard scores, the claim band (WciDashClaim), INTEL-411
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo, revision a2ba5dc
   (pulled 2026-09-25):
     pages/wise.css
       lines 12045-12071  .dash-pct, .dash-pct-wrap (the raised percent)
       lines 12257-12261  the column (.dash-claim > div, .dash-claim-col)
       line  12266        .dash-claim > .dash-claim-col .dash-btn-row
       lines 12269-12300  the claim's number rows and percent
       line  12608        .dash-claim-divider
       lines 12609-12634  .dash-bignum (+ html.dark), .dash-bignum-row,
                          .dash-progress-pct, .dash-bignum-cap,
                          .dash-btn-row
       line  12674        .dash-progress-pct .dash-bignum
       lines 14462-14466  position: relative on the claim number rows
                          (the stamp disc's positioning context)
       lines 14467-14518  .dash-stamp-icon, the claim offset, the glyph,
                          html.dark re-cut
       lines 14692, 14698-14748
                          the hairlines, number sizes and stacked rows
                          of the @container dash 1050 / 640 / 480 folds
     js/all-modules-flow.js
       lines 5462-5518    module "Dashboard scores"
   Class names are kept IDENTICAL to wise.css. The band's root
   (.dash-claim) is rendered by WciDashCard and its rules live in that
   sheet.
   =================================================================== */

/* ---- The design's `dash` query container (APP-OWNED) ----
   wise.css establishes it on the dashboard column (.dash, 11300-11315):
   `container-type: inline-size; container-name: dash`. The band carries
   its own so it folds by its own width on any page. */
.wci-dash-scope[b-awhlnmc35v] {
  container-type: inline-size;
  container-name: dash;
  min-width: 0;
}

/* Percent signs read as a smaller, raised (almost-superscript) glyph next to
   their value. */
.dash-pct[b-awhlnmc35v] {
  font-size: 0.38em;
  font-weight: 700;
  vertical-align: 1.05em;
  margin-left: -0.04em;
  letter-spacing: 0;
}
.dash-pct-wrap[b-awhlnmc35v] { display: inline-block; line-height: 1; }
.dash-pct-wrap .dash-bignum[b-awhlnmc35v] { min-width: 0; }
.dash-progress-pct .dash-pct-wrap[b-awhlnmc35v] { min-width: 2ch; font-size: 5rem; }
.dash-progress-pct .dash-pct[b-awhlnmc35v] { font-size: 1.9rem; }

.dash-claim > div:not(.dash-claim-divider)[b-awhlnmc35v] {
  display: flex;
  flex-direction: column;
}
.dash-claim-col[b-awhlnmc35v] { display: flex; flex-direction: column; min-height: 100%; }

.dash-claim .dash-bignum[b-awhlnmc35v] { font-size: 4.5rem; }
.dash-claim .dash-bignum-row[b-awhlnmc35v],
.dash-claim .dash-progress-pct[b-awhlnmc35v] {
  display: flex;
  /* Label sits directly below the numerical score, then the buttons follow. */
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin: 10px 0 0;
}
.dash-claim .dash-progress-pct[b-awhlnmc35v] { gap: 6px; }
.dash-claim .dash-bignum-cap[b-awhlnmc35v] { margin-left: 0; }
.dash-claim .dash-progress-pct .dash-pct-wrap[b-awhlnmc35v] {
  display: inline-block;
  min-width: 0;
  font-size: 4.5rem;
  line-height: 1;
}
.dash-claim .dash-progress-pct .dash-pct[b-awhlnmc35v] {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
  margin-left: 1px;
  vertical-align: top;
}
.dash-claim .dash-progress-pct .dash-pct-wrap .dash-bignum[b-awhlnmc35v] { font-size: inherit; min-width: 0; }

.dash-bignum[b-awhlnmc35v] {
  font-size: 5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #000;
  /* Stable two-digit slot so the count-up doesn't shove the label rightward. */
  display: inline-block;
  min-width: 2ch;
  font-variant-numeric: tabular-nums;
}
html.dark .dash-bignum[b-awhlnmc35v] { color: var(--text); }
.dash-bignum-row[b-awhlnmc35v],
.dash-progress-pct[b-awhlnmc35v] {
  display: flex;
  align-items: flex-end;
  align-items: last baseline;
  gap: 6px;
  margin: 10px 0 0;
}
.dash-progress-pct[b-awhlnmc35v] { gap: 14px; }
.dash-bignum-cap[b-awhlnmc35v] { font-size: 0.8125rem; color: var(--text-muted); line-height: 1.35; }
/* ::deep so a host's CaptionContent fragment (its own scope) gets the bold line too. */
.dash-bignum-cap[b-awhlnmc35v]  strong { color: var(--text); font-size: 1.0625rem; font-weight: 700; }

.dash-progress-pct .dash-bignum[b-awhlnmc35v] { font-size: 5rem; }

.dash-claim .dash-bignum-row[b-awhlnmc35v],
.dash-claim .dash-progress-pct[b-awhlnmc35v] {
  position: relative;
}

@container dash (max-width: 640px) {
  .dash-bignum[b-awhlnmc35v],
  .dash-progress-pct .dash-bignum[b-awhlnmc35v],
  .dash-claim .dash-bignum[b-awhlnmc35v],
  .dash-claim .dash-progress-pct .dash-pct-wrap[b-awhlnmc35v] { font-size: 3.4rem; }
  .dash-claim .dash-progress-pct .dash-pct[b-awhlnmc35v] { font-size: 1.3rem; }
  .dash-progress-pct .dash-pct[b-awhlnmc35v] { font-size: 1.3rem; }
  .dash-progress-pct .dash-pct-wrap[b-awhlnmc35v] { font-size: 3.4rem; }
}
@container dash (max-width: 480px) {
  .dash-bignum-row[b-awhlnmc35v],
  .dash-progress-pct[b-awhlnmc35v],
  .dash-claim .dash-bignum-row[b-awhlnmc35v],
  .dash-claim .dash-progress-pct[b-awhlnmc35v] {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

.dash-btn-row[b-awhlnmc35v] { display: flex; flex-wrap: wrap; gap: 10px; }

/* Fixed offset from the number row (no margin:auto). Because every column's
   number row is the same height and starts at the same top edge, this lands all
   three buttons on the same line. */
.dash-claim > .dash-claim-col .dash-btn-row[b-awhlnmc35v] { margin-top: 20px; }

.dash-claim-divider[b-awhlnmc35v] { background: var(--border); align-self: stretch; }

@container dash (max-width: 1050px) {
  .dash-claim > .dash-claim-divider[b-awhlnmc35v] { display: none; }
}

/* ---- The stamp disc ---- */
.dash-stamp-icon[b-awhlnmc35v] {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--primary) 14%, var(--surface-3));
  color: color-mix(in srgb, var(--primary) 26%, var(--surface-3));
  background: transparent;
  box-shadow:
    inset 0 1px 1px rgba(17, 24, 39, 0.07),
    inset 0 -1px 0 rgba(255, 255, 255, 0.55),
    0 1px 0 rgba(255, 255, 255, 0.6);
  pointer-events: none;
  user-select: none;
}
/* Claim stats stack number-over-label, so center the disc to the number (4.5rem)
   rather than the whole block. (Pillar cards lay the score out in a single row,
   so the default top:50% already lands on the number there.) */
.dash-claim .dash-bignum-row > .dash-stamp-icon[b-awhlnmc35v],
.dash-claim .dash-progress-pct > .dash-stamp-icon[b-awhlnmc35v] {
  top: 2.25rem;
}
.dash-stamp-icon .material-symbols-outlined[b-awhlnmc35v] {
  font-size: 26px;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'opsz' 24;
  line-height: 1;
}
html.dark .dash-stamp-icon:not(.dash-stamp-num)[b-awhlnmc35v] {
  border-color: color-mix(in srgb, #fff 9%, transparent);
  color: color-mix(in srgb, var(--primary-bright) 58%, var(--surface-3));
  box-shadow:
    inset 0 2px 3px rgba(0, 0, 0, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.09),
    0 1px 0 rgba(255, 255, 255, 0.05);
}
html.dark .dash-stamp-icon:not(.dash-stamp-num) .material-symbols-outlined[b-awhlnmc35v] {
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}

@container dash (max-width: 640px) {
  /* Numbers shrink to 3.4rem here, so re-center the claim disc on the number. */
  .dash-claim .dash-bignum-row > .dash-stamp-icon[b-awhlnmc35v],
  .dash-claim .dash-progress-pct > .dash-stamp-icon[b-awhlnmc35v] { top: 1.7rem; }
}

/* ===================================================================
   APP-OWNED ADDITIONS (not in wise.css)
   =================================================================== */

/* The design's fixed 20px offset lines the buttons up only because its
   columns hold nothing but a number row of equal height. A column with extra
   content (a nudge line, the shield block) would push its buttons below the
   others, so they ride to the bottom of the column instead, keeping at least
   the design's 20px above them. */
.dash-claim > .dash-claim-col .dash-btn-row[b-awhlnmc35v] { margin-top: auto; padding-top: 20px; }

/* The design sets dashboard numerals in the brand serif
   (pages/analytics-report.css, "Big stat numerals"). */
.dash-bignum[b-awhlnmc35v],
.dash-pct[b-awhlnmc35v] { font-family: var(--font-serif); }

/* A two- or three-column band (WciDashCard.razor.css) does not fold to 2x2,
   so its hairlines stay until it stacks: 760px for three, 480px for two. */
@container dash (max-width: 1050px) {
  .dash-claim.wci-dash-claim--3 > .dash-claim-divider[b-awhlnmc35v],
  .dash-claim.wci-dash-claim--2 > .dash-claim-divider[b-awhlnmc35v] { display: block; }
}
@container dash (max-width: 760px) {
  .dash-claim.wci-dash-claim--3 > .dash-claim-divider[b-awhlnmc35v] { display: none; }
}

/* Verbatim again (14729-14730), after the app-owned re-show so it wins. */
@container dash (max-width: 480px) {
  .dash-claim-divider[b-awhlnmc35v] { display: none; }
  .dash-claim.wci-dash-claim--2 > .dash-claim-divider[b-awhlnmc35v] { display: none; }
}
/* /Components/DesignSystem/WciDataTable.razor.rz.scp.css */
/* ===================================================================
   WCI component: Data table (WciDataTable), INTEL-396
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo, the revision the prototype
   host serves (fetched 2026-09-28, http://3.17.180.155:4144/pages/wise.css):
     pages/wise.css
       line  17508         .adm-card (the table card shell)
       lines 17547-17557   .adm-table-card, .adm-thead / .adm-trow grid, .adm-th
                           and its --sortable / --num / --end, row hover
       lines 17577-17586   .adm-row-hidden, .adm-td, --num / is-hot, .adm-table-foot,
                           .adm-sort-arrow and the asc / desc caret
       lines 17589-17615   .adm-idcell, -body, -name, -sub (the .adm-avatar circle is WciAvatar's)
       lines 17635-17640   .adm-trow--audit, .adm-trow-notes (full-width notes line)
       line  17661         .adm-th--check / .adm-td--check
       lines 18371-18428   @container adm (max-width: 720px / 300px): the stacked
                           card collapse
       lines 23746-23757   .dsc-score, .dsc-amt, .dsc-mono, .dsc-gs (the catalog's
                           score / amount / mono / Guiding Stars cells; they exist
                           only under .dsc-demo in this revision and are ported
                           with the scope dropped, as .wt-empty was)
     js/date-column.js injectStyles() (the stacked date cell and its header
       trigger), the .pf- / .vf- / .inv- aliases dropped
   Deliberately NOT ported here:
     17559-17576  .adm-trow .wise-btn--primary (in-row actions stay ghost):
                  already in WciButton.razor.css, 16800-16815 of an older revision
     17663        .adm-actions (host markup; hosts lay out their own button rows)
     .w-datemenu-pop / -item: the header date picker is a WciMenuPopover
   Class names are kept IDENTICAL to wise.css so a future re-port is a
   section diff. Consumes tokens from wwwroot/css/wci/wci-tokens.css.

   Scoped CSS: the wrapper, card, header, rows, cell wrappers and the typed
   cells (identity, dates, stars) are drawn by this component, so their
   selectors are bare. Host cell content (a WciStatusChip, a WciRowMenu, a
   WciButton) carries the host's or its own scope, so a rule that styles it
   uses ::deep. A selector's :has() argument is left unscoped by Blazor, so
   the verbatim :has(.adm-chip) / :has(.wise-btn) tests match across the
   boundary (WciScopedCssContractTests guards this).
   =================================================================== */

/* ---- wise.css 17508 ---- */
.adm-card[b-3grcer5o96] { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-1); overflow: visible; }

/* ---- Grid "table" (rows align without a real <table>), wise.css 17547-17557 ---- */
.adm-table-card[b-3grcer5o96] { padding: 6px 6px 4px; }
.adm-thead[b-3grcer5o96], .adm-trow[b-3grcer5o96] { display: grid; grid-template-columns: var(--adm-cols, 2fr 1fr 1fr 1fr); align-items: center; gap: 12px; padding: 12px 12px; }
.adm-thead[b-3grcer5o96] { border-bottom: 1px solid var(--border); }
.adm-th[b-3grcer5o96] { display: inline-flex; align-items: center; gap: 5px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); }
.adm-th--sortable[b-3grcer5o96] { cursor: pointer; user-select: none; }
.adm-th--sortable:hover[b-3grcer5o96] { color: var(--text-muted); }
.adm-th--num[b-3grcer5o96], .adm-td--num[b-3grcer5o96] { justify-content: center; text-align: center; }
.adm-th--end[b-3grcer5o96], .adm-td--end[b-3grcer5o96] { justify-content: flex-end; text-align: right; }
.adm-trow[b-3grcer5o96] { border-bottom: 1px solid var(--border); transition: background 0.15s ease; }
.adm-trow:last-child[b-3grcer5o96] { border-bottom: 0; }
.adm-trow:hover[b-3grcer5o96] { background: var(--primary-soft); }

/* ---- wise.css 17577-17586 ---- */
.adm-trow.adm-row-hidden[b-3grcer5o96] { display: none; }
.adm-td[b-3grcer5o96] { min-width: 0; font-size: 0.84rem; color: var(--text); }
.adm-td--num[b-3grcer5o96] { font-variant-numeric: tabular-nums; color: var(--text-muted); }
.adm-td--num.is-hot[b-3grcer5o96] { color: var(--primary); font-weight: 700; }
html.dark .adm-td--num.is-hot[b-3grcer5o96] { color: #93C5FD; }
.adm-table-foot[b-3grcer5o96] { padding: 12px 12px 4px; font-size: 0.76rem; color: var(--text-subtle); }
.adm-sort-arrow[b-3grcer5o96] { display: inline-flex; width: 12px; height: 12px; opacity: 0.3; transition: opacity 0.12s ease, transform 0.12s ease; }
.adm-sort-arrow[b-3grcer5o96]  svg, .adm-sort-arrow svg[b-3grcer5o96] { width: 12px; height: 12px; }
.adm-th--sortable[data-adm-dir="asc"] .adm-sort-arrow[b-3grcer5o96] { opacity: 1; color: var(--primary-ink, var(--primary)); transform: rotate(180deg); }
.adm-th--sortable[data-adm-dir="desc"] .adm-sort-arrow[b-3grcer5o96] { opacity: 1; color: var(--primary-ink, var(--primary)); }

/* ---- Company / user identity cell, wise.css 17589-17615 ---- */
/* max-width is the app's addition (2026-09-29): an inline-flex box sizes to its content, so without it a long name
   or sub line (an OAuth client id) ran past the cell into the next column and the ellipsis below never applied. */
.adm-idcell[b-3grcer5o96] { display: inline-flex; align-items: center; gap: 11px; min-width: 0; max-width: 100%; }
/* .adm-avatar (17591-17608) is not repeated here: the circle is WciAvatar (INTEL-407), whose sheet
   owns it. */
.adm-idcell-body[b-3grcer5o96] { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.adm-idcell-name[b-3grcer5o96] { font-size: 0.86rem; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-idcell-name a[b-3grcer5o96] { color: var(--primary); text-decoration: none; }
html.dark .adm-idcell-name a[b-3grcer5o96] { color: #93C5FD; }
.adm-idcell-name a:hover[b-3grcer5o96] { text-decoration: underline; }
.adm-idcell-sub[b-3grcer5o96] { font-size: 0.72rem; color: var(--text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Notes line under a row, wise.css 17635-17640 ---- */
.adm-trow--audit[b-3grcer5o96] { row-gap: 6px; align-items: start; }
.adm-trow-notes[b-3grcer5o96] { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 8px; margin-top: 2px; padding: 7px 10px 6px 12px; border-left: 2px solid var(--border-strong); }
.adm-trow-notes[b-3grcer5o96]  .material-symbols-outlined { font-size: 15px; color: var(--text-subtle); margin-top: 1px; flex: none; }

/* ---- wise.css 17661 ---- */
.adm-th--check[b-3grcer5o96], .adm-td--check[b-3grcer5o96] { justify-content: flex-start; }

/* ---- Catalog cells, wise.css 23746-23757 (.dsc-demo scope dropped) ---- */
.dsc-score[b-3grcer5o96] {
  font-family: var(--module-title-family), 'DM Sans', system-ui, sans-serif;
  font-weight: 800; letter-spacing: -0.02em;
}
.dsc-amt[b-3grcer5o96] { font-variant-numeric: tabular-nums; font-weight: 700; }
.dsc-mono[b-3grcer5o96] { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.01em; }
.dsc-gs[b-3grcer5o96] { display: inline-flex; align-items: center; gap: 0; color: var(--ter-amber, #C9A227); }
.dsc-gs .material-symbols-outlined[b-3grcer5o96] { font-size: 16px !important; line-height: 1; }
.dsc-gs-on[b-3grcer5o96] { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20; }
.dsc-gs-off[b-3grcer5o96] { color: var(--border-strong); font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20; }

/* ---- Stacked dates, js/date-column.js injectStyles() (aliases dropped) ---- */
.w-datecell[b-3grcer5o96] { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.w-date[b-3grcer5o96] { display: flex; flex-direction: row; align-items: baseline; gap: 5px; line-height: 1.25; }
.w-date-status[b-3grcer5o96] { font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text); }
.w-date-val[b-3grcer5o96] { font-size: 11px; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.w-date--secondary[b-3grcer5o96] { opacity: .62; }
.w-date--secondary .w-date-status[b-3grcer5o96] { color: var(--text-subtle); }
.w-date--secondary .w-date-val[b-3grcer5o96] { font-size: 10px; color: var(--text-subtle); }
.adm-th.w-date-th[b-3grcer5o96] { display: inline-flex; align-items: center; gap: 2px; }
.w-date-th .w-datemenu[b-3grcer5o96] { order: 5; }
.w-datemenu[b-3grcer5o96] { position: relative; display: inline-flex; }
.w-datemenu[b-3grcer5o96]  .w-datemenu-btn { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border-radius: 50%; border: 1px solid transparent; background: transparent; color: var(--text-subtle); cursor: pointer; transition: background .15s ease, color .15s ease; }
.w-datemenu[b-3grcer5o96]  .w-datemenu-btn:hover, .w-datemenu[b-3grcer5o96]  .w-datemenu-btn[aria-expanded="true"] { background: var(--surface-2); color: var(--text); }
html.dark .w-datemenu[b-3grcer5o96]  .w-datemenu-btn:hover, html.dark .w-datemenu[b-3grcer5o96]  .w-datemenu-btn[aria-expanded="true"] { background: rgba(255,255,255,.08); }
.w-datemenu[b-3grcer5o96]  .w-datemenu-btn .material-symbols-outlined { font-size: 16px !important; line-height: 1 !important; }

/* Narrow container (docked beside chat): collapse the grid tables into
   stacked cards and let toolbars wrap. Identity stays full width. Status
   chip + dates share one row (chip left, dates right) until the card is
   too tight. Count-like cells share one strip that wraps.
   ---- wise.css 18371-18428 ---- */
@container adm (max-width: 720px) {
  .adm-thead[b-3grcer5o96] { display: none; }
  .adm-trow[b-3grcer5o96] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    position: relative;
    padding: 14px 12px;
  }
  .adm-trow > .adm-td:not(.adm-td--num):not(.adm-td--metric)[b-3grcer5o96] { flex: 1 1 100%; min-width: 0; }
  .adm-trow > .adm-td:not(.adm-td--num):not(.adm-td--metric):has(.adm-chip):not(:has(.adm-idcell))[b-3grcer5o96] {
    flex: 0 1 auto;
  }
  .adm-trow > .adm-td:not(.adm-td--num):not(.adm-td--metric):has(.w-datecell)[b-3grcer5o96] {
    flex: 1 1 calc(100% - 6.5rem);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-width: 8rem;
  }
  .adm-trow > .adm-td--num[b-3grcer5o96],
  .adm-trow > .adm-td--metric[b-3grcer5o96],
  .adm-trow > .adm-td:has(.dsc-gs)[b-3grcer5o96] {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex: 1 1 3.75rem;
    min-width: 0;
  }
  /* Row furniture — the ⋮ and icon-only controls — rides the card's first line
     hard against its right edge. */
  .adm-trow .adm-td--end[b-3grcer5o96], .adm-trow .adm-td--actions[b-3grcer5o96] {
    position: absolute; top: 10px; right: 10px; padding: 0;
    flex: 0 0 auto; width: auto;
  }
  .adm-trow .adm-td--actions[b-3grcer5o96]  .adm-rowmenu-pop { left: auto; right: 0; }
  /* …and the identity it shares that line with gives up the gutter it needs,
     so a long company or product name runs out of room rather than under the
     control. Pinning something over the row is not sharing a row with it. A
     host whose lead cell is its own markup rather than an Identity (a glyph
     and a name, the catalog browsers) marks it .wci-td-lead to get the same
     gutter (INTEL-515: a set's or calculation's ⋮ sat over a long name). */
  .adm-trow:has(> .adm-td--end, > .adm-td--actions) > .adm-td:has(.adm-idcell, .wci-td-lead)[b-3grcer5o96] {
    padding-right: 38px;
  }
  /* A control that says what it does in words is the card's action, not its
     furniture: it belongs at the foot, centred, where a thumb reaches it. */
  .adm-trow > .adm-td--end:has(.wise-btn)[b-3grcer5o96] {
    position: static; order: 90; flex: 1 1 100%; width: auto;
    display: flex; justify-content: center; padding: 2px 0 0;
  }
}
/* The design's `adm` here; measured on `wci-dt` (the table's true width, see the
   app-owned additions) so a column floor's shifted `adm` cannot fire it early. */
@container wci-dt (max-width: 300px) {
  .adm-trow > .adm-td:not(.adm-td--num):not(.adm-td--metric):has(.adm-chip):not(:has(.adm-idcell))[b-3grcer5o96],
  .adm-trow > .adm-td:not(.adm-td--num):not(.adm-td--metric):has(.w-datecell)[b-3grcer5o96] { flex: 1 1 100%; }
  .adm-trow > .adm-td:not(.adm-td--num):not(.adm-td--metric):has(.w-datecell)[b-3grcer5o96] { justify-content: flex-start; }
}

/* ===================================================================
   APP-OWNED ADDITIONS
   =================================================================== */

/* The `adm` container the collapse resolves against. The design puts it on the
   page wrapper (.adm-wrap, wise.css 17436); here the table carries its own, so
   it collapses at the width of whatever it sits in (a docked module, a dialog).
   It is also `wci-dt`, the table's true width, for the rules a column floor
   must not move (the 300px tight card below). */
/* For the stacked label's cap (below): reset per table, so a nested table in a carded table's notes
   line does not inherit the outer inset. --wci-dt-card-inset is what lies between this container
   and a row: nothing for a Bare table, the card's chrome otherwise (set on the card, next rule). */
.wci-data-table[b-3grcer5o96] { container-type: inline-size; container-name: adm wci-dt; width: 100%; min-width: 0; --wci-dt-card-inset: 0px; }

/* KeepTable: the wrapper is not the `adm` container, so the 720px collapse above never fires on it (it stays
   `wci-dt` for the rules measured on the table's own width); a column too tight scrolls the body sideways instead. */
.wci-data-table--keep[b-3grcer5o96] { container-name: wci-dt; }
.wci-data-table--keep .wci-data-table-body[b-3grcer5o96] { overflow-x: auto; scrollbar-width: thin; }

/* WiseGridLoading fills the nearest position: relative box. */
.wci-data-table-card[b-3grcer5o96] { position: relative; }
/* The table card's 1px border and 6px padding, each side (absent on a Bare table). */
.adm-table-card.wci-data-table-card[b-3grcer5o96] { --wci-dt-card-inset: 14px; }

/* MinWidth, the column floor (INTEL-515): narrower than the width its columns
   need, the grid keeps that width and the body scrolls sideways under it. Only
   the design's 720px collapse stacks rows into cards (a floor that stacked too
   turned every wide table into cards beside the docked chat). The component
   writes the floor, the larger of MinWidth and the tracks, into --wci-dt-min. */
.wci-data-table-body--scroll[b-3grcer5o96] { overflow-x: auto; }
.wci-data-table-body--scroll > .adm-table[b-3grcer5o96] { min-width: var(--wci-dt-min, 0); }
@container adm (max-width: 720px) {
  .wci-data-table-body--scroll[b-3grcer5o96] { overflow-x: visible; }
  .wci-data-table-body--scroll > .adm-table[b-3grcer5o96] { min-width: 0; }
}

/* ScrollWide: under the floor the table keeps its columns and the body scrolls
   sideways; the design's own 720px collapse (the wrapper's `adm`) still stacks
   it, and there the floor lets go so the cards fit the pane. Positioned, so
   the scroller clips its absolute children too (the headers' sr-only text),
   which would otherwise widen the page from the card they resolve against. */
.wci-data-table-body--scroll[b-3grcer5o96] { position: relative; overflow-x: auto; scrollbar-width: thin; }
.wci-data-table-body--scroll > *[b-3grcer5o96] { min-width: var(--wci-dt-floor); box-sizing: border-box; }
@container adm (max-width: 720px) {
  .wci-data-table-body--scroll[b-3grcer5o96] { overflow-x: visible; }
  .wci-data-table-body--scroll > *[b-3grcer5o96] { min-width: 0; }
}

/* The sortable header is a real button (the design's is a clickable span), so it
   takes focus and Enter. It inherits the header's type and colour. */
.wci-th-sort[b-3grcer5o96] {
  display: inline-flex; align-items: center; gap: 5px; min-width: 0;
  padding: 0; margin: 0; border: 0; background: transparent;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; text-align: inherit;
  cursor: pointer;
}
.adm-th--num .wci-th-sort[b-3grcer5o96] { justify-content: center; }
.adm-th--end .wci-th-sort[b-3grcer5o96] { justify-content: flex-end; }
.wci-th-sort:focus-visible[b-3grcer5o96] { outline: 2px solid color-mix(in srgb, var(--primary) 45%, transparent); outline-offset: 2px; border-radius: 4px; }
.wci-th-label[b-3grcer5o96] { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.wci-th-icon[b-3grcer5o96] { font-size: 16px; line-height: 1; text-transform: none; letter-spacing: normal; }

/* The stacked layout's header controls (select all, expand all): hidden at full
   width, where the header row carries them; a strip above the cards once the
   header row is gone. */
.wci-dt-stacked-head[b-3grcer5o96] { display: none; }
@container adm (max-width: 720px) {
  .wci-dt-stacked-head[b-3grcer5o96] {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
    padding: 8px 12px; border-bottom: 1px solid var(--border);
  }
}
.wci-dt-stacked-head-item[b-3grcer5o96] { display: inline-flex; align-items: center; gap: 6px; }
.wci-dt-stacked-head-label[b-3grcer5o96] { font-size: 0.72rem; font-weight: 700; color: var(--text-muted); }

/* The stacked layout's sort pills (INTEL-515): the header row's sort buttons,
   which a stacked card hides with the row. WciOutputTable's card-mode sort strip
   (wwwroot/css/wci/wci-output.css, .wci-output-table-sortbar) is the pattern;
   these are its rules under this component's scope. */
.wci-dt-sortbar[b-3grcer5o96] { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; max-width: 100%; }
.wci-dt-sortbar-label[b-3grcer5o96] { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); }
.wci-dt-sort[b-3grcer5o96] {
  all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px;
  font-size: 0.72rem; font-weight: 600; color: var(--text-muted); background: var(--surface);
  /* A pill names a header, which can be a long unbroken name: it breaks inside the
     word rather than push the strip past a phone. */
  box-sizing: border-box; max-width: 100%; overflow-wrap: anywhere;
}
.wci-dt-sort:hover[b-3grcer5o96] { color: var(--text); }
.wci-dt-sort:focus-visible[b-3grcer5o96] { outline: 2px solid color-mix(in srgb, var(--primary) 55%, transparent); outline-offset: 2px; }
.wci-dt-sort[aria-pressed="true"][b-3grcer5o96] { color: var(--primary-ink, var(--primary)); border-color: color-mix(in srgb, var(--primary-ink, var(--primary)) 45%, var(--border)); }
.wci-dt-sort-arrow[b-3grcer5o96] { display: inline-flex; width: 10px; height: 10px; opacity: 0; transition: transform .15s ease, opacity .15s ease; }
.wci-dt-sort-arrow[b-3grcer5o96]  svg, .wci-dt-sort-arrow svg[b-3grcer5o96] { width: 10px; height: 10px; }
.wci-dt-sort[data-dir="asc"] .wci-dt-sort-arrow[b-3grcer5o96] { opacity: 1; transform: rotate(180deg); }
.wci-dt-sort[data-dir="desc"] .wci-dt-sort-arrow[b-3grcer5o96] { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .wci-dt-sort-arrow[b-3grcer5o96] { transition: none; }
}

/* LabelWhenStacked: the header text above a value, shown only on a stacked card. */
.wci-td-stacked-label[b-3grcer5o96] { display: none; }
@container adm (max-width: 720px) {
  /* A labelled cell is never squeezed below its longest label word, so the count strip
     wraps to fewer cells per line instead of splitting a word (INTEL-540). */
  .adm-trow > .adm-td.wci-td--labelled[b-3grcer5o96] { flex-direction: column; gap: 1px; min-width: min-content; }
  .wci-td-stacked-label[b-3grcer5o96] {
    display: block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--text-subtle); font-variant-numeric: normal;
    /* Wrap at word boundaries (INTEL-540). `anywhere` shrank a label's min-content to one
       letter, so "Pending invitations" stacked as "INVITATION / S". `break-word` keeps whole
       words in the min-content width the cell sizes to. The cap is the row's inner width:
       the nearest adm container, less the card's chrome and the row's 12px padding each side.
       A % would not limit min-content. Only a header longer than the card (a variable, a
       set attribute) breaks inside a word, rather than push past it. */
    max-width: calc(100cqi - var(--wci-dt-card-inset, 0px) - 24px);
    overflow-wrap: break-word;
  }
}

/* A group of icon controls on a stacked card (INTEL-515). The design pins row
   furniture (the ⋮, one icon) to the card's top-right corner beside a 38px
   gutter; a group of several (NutrientCalculationBrowser's six, RDA profiles'
   five) is far wider than the gutter, so a long name ran underneath it. Two or
   more sibling buttons or links (a row menu's own items, inside [role=menu],
   do not count) take their own line at the top of the card instead, flush
   right, and the identity line no longer gives up the gutter. A control that
   says what it does in words still goes to the foot (the .wise-btn rule). */
@container adm (max-width: 720px) {
  .adm-trow > :is(.adm-td--end, .adm-td--actions):not(:has(.wise-btn)):has(:is(button, a[href]):not([role=menu] *) ~ :is(button, a[href]):not([role=menu] *))[b-3grcer5o96] {
    position: static; order: -1; flex: 1 1 100%; width: auto;
    display: flex; justify-content: flex-end; padding: 0;
  }
  .adm-trow:has(> :is(.adm-td--end, .adm-td--actions):not(:has(.wise-btn)):has(:is(button, a[href]):not([role=menu] *) ~ :is(button, a[href]):not([role=menu] *))) > .adm-td:has(.adm-idcell, .wci-td-lead)[b-3grcer5o96] {
    padding-right: 0;
  }
}

/* RowNotes on a stacked card: the notes line spans the grid with grid-column,
   which a flex card ignores, so it would shrink to its content and a nested
   table inside it (an inline-size container, no intrinsic width) to nothing.
   It takes a whole line of the card instead. */
@container adm (max-width: 720px) {
  .adm-trow > .adm-trow-notes[b-3grcer5o96] { flex: 1 1 100%; min-width: 0; }
}

/* A clickable row, and the row the host marks current. */
.wci-trow--link[b-3grcer5o96] { cursor: pointer; }
.adm-trow.is-active[b-3grcer5o96] { background: var(--primary-soft); }

/* Link focus in the identity cell. */
.adm-idcell-name a:focus-visible[b-3grcer5o96] { outline: 2px solid color-mix(in srgb, var(--primary) 45%, transparent); outline-offset: 2px; border-radius: 3px; }

/* A product's thumbnail in the identity cell (WciDataTableIdentity.Thumb): ip-b2b
   pages/analytics-report.css .attb-thumb, the Table Types identity rule
   (assets/table-design.md, Cells: "Product thumbnails are a 34px rounded square at
   border-radius: 8px with a token border. People and brand avatars are circles").
   With no photo it holds the product's initials, never an icon on a tile. */
.attb-thumb[b-3grcer5o96] {
  flex: none; width: 34px; height: 34px; border-radius: 8px; overflow: hidden;
  background: var(--surface-3); border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: var(--text-muted); text-transform: uppercase;
}
.attb-thumb img[b-3grcer5o96] { width: 100%; height: 100%; object-fit: cover; display: block; }
.attb-thumb.is-fallback[b-3grcer5o96] { letter-spacing: .02em; }
/* The initials wait behind a photo; a missing or broken one (is-fallback, set in the browser on error) shows
   them instead, and drops the pending dot with the photo it marked. */
.attb-thumb:not(.is-fallback) .attb-thumb-initials[b-3grcer5o96],
.attb-thumb.is-fallback img[b-3grcer5o96],
.attb-thumb.is-fallback .attb-thumb-pending[b-3grcer5o96] { display: none; }
/* An unapproved photo (WciDataTableIdentity.ThumbPending): FoodImage's amber pending-review dot, inset because
   the square clips its overflow. */
.attb-thumb[b-3grcer5o96] { position: relative; }
.attb-thumb-pending[b-3grcer5o96] {
  position: absolute; top: 2px; right: 2px; width: 9px; height: 9px; border-radius: 999px;
  background: var(--ter-amber); border: 1.5px solid var(--surface);
}
/* A name with a suffix (WciDataTableIdentity.NameSuffix): the name keeps its one-line ellipsis and the badge
   stays whole beside it, wrapping under the name when the two do not fit. */
.adm-idcell-line[b-3grcer5o96] { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-width: 0; }
.adm-idcell-line > .adm-idcell-name[b-3grcer5o96] { min-width: 0; max-width: 100%; }
.adm-idcell-suffix[b-3grcer5o96] { display: inline-flex; flex: none; align-items: center; gap: 6px; max-width: 100%; }

/* A clipped prose cell (a description, a formula): one line in the table, the
   whole text on a stacked card (assets/table-design.md, Typography: "A clipped
   prose column clips to one line in the table and wraps in card mode"). A host
   Cell fragment uses the class rather than an inline nowrap, which no stacked
   rule could release. */
.wci-td-clip[b-3grcer5o96], .adm-td[b-3grcer5o96]  .wci-td-clip {
  display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The identity's name and sub lines (a long plus-addressed email, a client id)
   clip in the table the same way, and wrap on a card, which has the room. */
@container adm (max-width: 720px) {
  .wci-td-clip[b-3grcer5o96], .adm-td[b-3grcer5o96]  .wci-td-clip,
  .adm-idcell-name[b-3grcer5o96], .adm-idcell-sub[b-3grcer5o96] {
    white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere;
  }
  /* Host cells that clip with Tailwind's utilities instead (truncate, line-clamp-N,
     or a column's CellClass = "truncate"), so every clipped cell in every table
     reads in full on a card, not only the ones moved to .wci-td-clip. */
  .adm-trow > .adm-td.truncate[b-3grcer5o96],
  .adm-td[b-3grcer5o96]  .truncate {
    white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere;
  }
  .adm-td[b-3grcer5o96]  [class*="line-clamp-"] {
    display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; overflow-wrap: anywhere;
  }
}

/* A worded action leading the row (WciDataTableColumnKind.PrimaryAction, Table
   Types' --act column: the Reformulation Pick list's Reformulate and Move list's
   Apply, INTEL-534 / INTEL-535). One line in the table. The whole list exists to
   be acted on, so its button is the row's action rather than one of its
   controls: a primary WciButton here keeps the solid brand fill and the filled
   icon twin (the specimens' .attb-btn--primary), which the in-row ghost rule
   (WciButton.razor.css, wise.css "In-row actions are ghost") would otherwise
   take. That rule is .adm-trow .wise-btn--primary[b-btn]; the extra classes here
   outrank it whichever bundle loads last. No box-shadow here: it would outrank
   WciButton's :focus-visible ring too, and the button sets outline: none. */
.adm-td--act[b-3grcer5o96] { display: flex; align-items: center; white-space: nowrap; }
.adm-trow > .adm-td--act[b-3grcer5o96]  .wise-btn--primary {
  background: var(--primary); color: #fff; border-color: var(--primary);
}
.adm-trow > .adm-td--act[b-3grcer5o96]  .wise-btn--primary:hover {
  filter: brightness(1.08); color: #fff; background: var(--primary); border-color: var(--primary);
}
/* On a stacked card it is a control that says what it does in words, so it
   lands at the card's foot, centred, like a worded End cell. */
@container adm (max-width: 720px) {
  .adm-trow > .adm-td--act[b-3grcer5o96] {
    order: 90; flex: 1 1 100%; justify-content: center; padding: 2px 0 0;
  }
}

/* The Guiding Stars cell with its status pill (Column.StarsPill, the Pick
   list): ip-b2b pages/analytics-report.css .attb-starcell. Stars and pill share
   one line in the table (INTEL-534); a stacked card, which may seat the cell in
   its narrow count strip, lets the pill drop under the stars instead of
   pushing past the card. */
.wci-gs-cell[b-3grcer5o96] { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
@container adm (max-width: 720px) {
  .wci-gs-cell[b-3grcer5o96] { flex-wrap: wrap; justify-content: center; row-gap: 4px; }
}

/* A recommended move's impact badge (Column.Impact, the Move list): ip-b2b
   pages/analytics-report.css .attb-impact, --dq / --credit. A round badge, never
   a rounded-square tile (INTEL-535). */
.attb-impact[b-3grcer5o96] {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 24px; padding: 0 7px; border-radius: 999px;
  font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.attb-impact .material-symbols-outlined[b-3grcer5o96] { font-size: 16px; }
.attb-impact--dq[b-3grcer5o96] {
  background: color-mix(in srgb, var(--sec-red) 16%, transparent); color: var(--sec-red-text);
}
.attb-impact--credit[b-3grcer5o96] {
  background: color-mix(in srgb, var(--sec-green) 15%, transparent); color: var(--sec-green-text);
}

/* A prose cell that wraps as far as it needs and never clips (the Move list's
   recommended move, INTEL-535): pages/analytics-report.css .attb-prose. The
   opposite of .wci-td-clip. On the cell (a column's CellClass) or on a host
   Cell's own span. Its narrowest width is the column track's px minimum, which
   the column floor counts. */
.adm-td.wci-td-prose[b-3grcer5o96], .wci-td-prose[b-3grcer5o96], .adm-td[b-3grcer5o96]  .wci-td-prose {
  white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; line-height: 1.5;
}

/* An empty value: the plain hyphen placeholder (CLAUDE.md), in the design's
   "no value" ink (demoDataTable writes it as color: var(--text-subtle)).
   A host Cell fragment can use the class too (<span class="wci-td-none">-</span>). */
.wci-td-none[b-3grcer5o96], .adm-td[b-3grcer5o96]  .wci-td-none { color: var(--text-subtle); }

/* The empty line spans the grid. The first load keeps the card tall enough for
   the spinner to sit in. */
.wci-data-table-empty[b-3grcer5o96] { border-top: 0; }
.wci-data-table-loading[b-3grcer5o96] { min-height: 160px; }

/* Top-aligned rows (a table with a Move column, INTEL-536): rows whose cells differ in height (the Guiding Stars
   action plan's recommended move, which carries a second line) align every cell
   to the row's top, so a segment pill, the stars and the Open in Studio button
   sit level with the move's first line rather than halfway down it (the
   specimen's cells are top-aligned). Table only: a stacked card keeps the
   design's centred lines. */
/* A child chain, not a descendant selector: a WciDataTable nested in RowNotes
   shares this scope and must not inherit the parent's alignment. */
.wci-data-table--top > .wci-data-table-card > .wci-data-table-body > .adm-table > .adm-trow[b-3grcer5o96] { align-items: start; }
@container adm (max-width: 720px) {
  .wci-data-table--top > .wci-data-table-card > .wci-data-table-body > .adm-table > .adm-trow[b-3grcer5o96] { align-items: center; }
}

/* The recommended move (Column.Move, INTEL-536): ip-b2b pages/analytics-report.css
   .attb-move / .attb-move-out and the tag pills .attb-tags / .attb-tag. The move's
   text is .wci-td-prose (the Reformulation Move list's prose cell, INTEL-535; the
   design's .attb-prose), which wraps as far as it needs and never clips; the
   second line is an outcome in brand ink or a row of blocker tags. A tag stays
   on one line in the
   table (clipped with an ellipsis if longer than the track), and the row of tags
   wraps; on a stacked card a single tag longer than the card breaks inside its
   words rather than push past the card. The outcome's ink is --score-ink-blue
   (brand ink, lifted to #93C5FD in dark): the design's --primary-bright is
   slate in this app's tokens. An unbroken outcome breaks inside its column too. */
.attb-move[b-3grcer5o96] { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
/* In this flex column the prose sizes to its content, and .wci-td-prose's
   overflow-wrap: break-word does not shrink that size, so a long unbroken word
   would widen the span past its cell. Capped at the column, it breaks inside. */
.attb-move > .wci-td-prose[b-3grcer5o96] { max-width: 100%; }
.attb-move-out[b-3grcer5o96] { font-size: 11.5px; font-weight: 700; color: var(--score-ink-blue); max-width: 100%; overflow-wrap: anywhere; }
.attb-tags[b-3grcer5o96] { display: flex; flex-wrap: wrap; gap: 4px; max-width: 100%; }
.attb-tag[b-3grcer5o96] {
  padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border);
  font-size: 11px; font-weight: 700; color: var(--text-muted); white-space: nowrap;
  /* A tag longer than a narrow Move track clips rather than run into the next column. */
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box;
}
@container adm (max-width: 720px) {
  .attb-tag[b-3grcer5o96] { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
  .adm-trow[b-3grcer5o96], .adm-sort-arrow[b-3grcer5o96] { transition: none; }
}
/* /Components/DesignSystem/WciEmptyState.razor.rz.scp.css */
/* ===================================================================
   WCI component: Empty states (WciEmptyState), INTEL-395
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo, revision copied from the
   prototype host on 2026-09-24 (http://3.17.180.155:4144):
     pages/wise.css
       line  16945        .adm-empty              (List: admin lists)
       lines 22486-22488  .dsc-demo .wt-empty     (Turns)
       lines 1561-1567    .wise-app-search-empty  (Search)
     js/all-modules-flow.js
       lines 4973-4993    module "Empty states" (catalog card: quiet centred
                          copy, never an illustration tile; lists say nothing
                          matched the filter, Turns says ask a question first,
                          search names the query)
   Class names are kept IDENTICAL to wise.css.

   Two notes on this revision:
   - .wt-empty exists in wise.css only under the catalog's .dsc-demo scope
     (the Turns panel it belongs to is drawn by a script sheet this port does
     not carry). It is ported with that scope dropped; the declarations are
     verbatim.
   - The card also names .wch-ask-empty (What can I ask?), which has no rule
     in this revision. "What can I ask?" filters a list, so it uses the List
     line.

   Scoped CSS: the root div owns every class, so no ::deep is needed.
   =================================================================== */

.adm-empty[b-uq9snzh83w] { padding: 40px 20px; text-align: center; color: var(--text-muted); font-size: 0.9rem; }

.wt-empty[b-uq9snzh83w] {
  padding: 18px 12px; font-size: 12.5px; line-height: 1.55; opacity: .72; text-align: center;
}

.wise-app-search-empty[b-uq9snzh83w] {
  padding: 18px 16px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted);
  text-align: center;
}
/* /Components/DesignSystem/WciField.razor.rz.scp.css */
/* ===================================================================
   WCI component: Form fields, the labelled field (WciField)
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo:
     /Users/kevinjones/src/wc/ip-b2b/pages/wise.css
       lines 16733-16734  .adm-field, .adm-field-label
       lines 19102-19103  .auth-hint
   NOTE: that checkout is not on every machine. These line numbers are
   from the revision the prototype host serves (Last-Modified 2026-09-24
   05:30:33 GMT, http://3.17.180.155:4144/pages/wise.css).
   Module: Component Library > Inputs & forms > "Form fields"
   (js/all-modules-flow.js 5628-5645).
   Class names are kept IDENTICAL to wise.css so a future re-port is a
   section diff. Consumes tokens from wwwroot/css/wci/wci-tokens.css.
   =================================================================== */

.adm-field[b-5g3057rmk9] { display: flex; flex-direction: column; gap: 5px; min-width: 150px; }
.adm-field-label[b-5g3057rmk9] { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-subtle); }
.auth-hint[b-5g3057rmk9] { font-size: var(--fs-label); color: var(--text-subtle); }

/* ================= APP-OWNED ADDITIONS (not in wise.css) ================= */

/* The required marker: .auth-field .req (wise.css 19049), on the adm field. */
.adm-field .req[b-5g3057rmk9] { color: var(--sec-red); margin-left: 2px; }

/* A field that spans every column of a WciFieldGrid (a textarea). */
.wci-field--wide[b-5g3057rmk9] { grid-column: 1 / -1; }

/* The design's 150px floor is for a filter row; a field inside a narrow
   modal column or a table cell must be able to shrink with it. */
.adm-field[b-5g3057rmk9] { min-width: min(150px, 100%); }
/* /Components/DesignSystem/WciFieldGrid.razor.rz.scp.css */
/* ===================================================================
   WCI component: Form fields, the fluid field grid (WciFieldGrid)
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo:
     /Users/kevinjones/src/wc/ip-b2b/pages/wise.css
       lines 16904-16910  .adm-filter-grid, its fields and controls, and
                          the `adm` container queries (3 -> 2 -> 1)
   NOTE: that checkout is not on every machine. These line numbers are
   from the revision the prototype host serves (Last-Modified 2026-09-24
   05:30:33 GMT, http://3.17.180.155:4144/pages/wise.css).
   Module: Component Library > Inputs & forms > "Form fields"
   (js/all-modules-flow.js 5628-5645): "Fields stack in a fluid grid that
   collapses to one column on narrow containers."
   Class names are kept IDENTICAL to wise.css so a future re-port is a
   section diff. The fields and controls are child components, so every
   selector that reaches them uses ::deep.
   =================================================================== */

.adm-filter-grid[b-wa2d71o3jr] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 18px; }
.adm-filter-grid[b-wa2d71o3jr]  .adm-field { min-width: 0; gap: 6px; }
.adm-filter-grid[b-wa2d71o3jr]  .adm-field-label { text-transform: none; letter-spacing: 0; font-size: 0.73rem; font-weight: 600; color: var(--text-muted); }
.adm-filter-grid[b-wa2d71o3jr]  .adm-select, .adm-filter-grid[b-wa2d71o3jr]  .adm-input { width: 100%; }
@container adm (max-width: 760px) { .adm-filter-grid[b-wa2d71o3jr] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container adm (max-width: 460px) { .adm-filter-grid[b-wa2d71o3jr] { grid-template-columns: 1fr; } }

/* ================= APP-OWNED ADDITIONS (not in wise.css) ================= */

/* The `adm` container. Mirrors .adm-wrap in the design minus its page padding. */
.wci-field-grid[b-wa2d71o3jr] { container-type: inline-size; container-name: adm; width: 100%; min-width: 0; }

/* Two-column variant for a form in a modal. */
.wci-field-grid--2 .adm-filter-grid[b-wa2d71o3jr] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container adm (max-width: 460px) { .wci-field-grid--2 .adm-filter-grid[b-wa2d71o3jr] { grid-template-columns: 1fr; } }
/* /Components/DesignSystem/WciFilterChips.razor.rz.scp.css */
/* ===================================================================
   WCI component: Filter toolbar chip rows (WciFilterChips), INTEL-406
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo, the revision the prototype
   host serves (fetched 2026-09-28, http://3.17.180.155:4144/pages/wise.css):
     lines 18969-18987  .wmod-filter-group, .wmod-filter-label, .wmod-filter-chips,
                        .wmod-fchip (+ html.dark, glyph, hover, .is-on)
   The .pf-fchip / .lib-fchip aliases named on the card are not ported.
   Class names are kept IDENTICAL to wise.css so a future re-port is a
   section diff. Consumes tokens from wwwroot/css/wci/wci-tokens.css.
   Rule 10: .wmod-filter-group's verbatim margin-top (a group spaced from
   the one above it) sits on a sibling selector, never on the root alone.
   =================================================================== */

.wmod-filter-group + .wmod-filter-group[b-9bctusu1vi] { margin-top: 12px; }
.wmod-filter-label[b-9bctusu1vi] { font-size: 10px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-subtle); margin-bottom: 7px; }
.wmod-filter-chips[b-9bctusu1vi] { display: flex; flex-wrap: wrap; gap: 6px; }
.wmod-fchip[b-9bctusu1vi] {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--surface-2);
  font-family: inherit; font-size: 11.5px; font-weight: 700; color: var(--text-muted);
  transition: all 0.15s ease;
}
html.dark .wmod-fchip[b-9bctusu1vi] { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); }
.wmod-fchip .material-symbols-outlined[b-9bctusu1vi] { font-size: 13px !important; line-height: 1 !important; }
.wmod-fchip:hover[b-9bctusu1vi] { color: var(--text); border-color: var(--primary); }
.wmod-fchip.is-on[b-9bctusu1vi] { color: #fff; border-color: var(--primary); background: var(--primary); }
.wmod-fchip.is-on .material-symbols-outlined[b-9bctusu1vi] {
  color: #fff;
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ===================================================================
   APP-OWNED ADDITIONS
   =================================================================== */
.wmod-fchip:focus-visible[b-9bctusu1vi] { outline: 2px solid color-mix(in srgb, var(--primary) 45%, transparent); outline-offset: 2px; }
.wmod-fchip:disabled[b-9bctusu1vi] { opacity: .5; cursor: not-allowed; border-color: var(--border-strong); color: var(--text-muted); }
.wci-fchip-count[b-9bctusu1vi] { font-variant-numeric: tabular-nums; opacity: .75; margin-left: 2px; }
@media (prefers-reduced-motion: reduce) { .wmod-fchip[b-9bctusu1vi] { transition: none; } }
/* /Components/DesignSystem/WciFilterToolbar.razor.rz.scp.css */
/* ===================================================================
   WCI component: Filter toolbar (WciFilterToolbar), INTEL-406
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo, the revision the prototype
   host serves (fetched 2026-09-28, http://3.17.180.155:4144/pages/wise.css):
     lines 1125-1139    .wise-toolbar
     lines 1140-1166    .wise-search-inline and its leading glyph
     lines 1168-1220    .wise-search, dark, placeholder, focus, has-filter room
     lines 1222-1291    .wise-search-filter (funnel), glyph, hover, is-active,
                        has-dot, focus-visible
     lines 1293-1317    .wise-filter-pop (the popover card), [hidden]
     lines 17459-17464  .adm-filter-pop fields, .adm-filter-pop-foot, .adm-filter-clear
     lines 18964-18965  .wmod-filter-pop-head / .wmod-filter-pop-title
   Only the .wise- selectors of wise.css's alias lists are kept (.adm- / .vf-
   / .gv- / .wmod- exist so leftover prototype markup still paints), as with
   .wise-btn. Not ported: .wise-filter-count (the numbered badge; the card
   asks for a dot), the .gv- and .wmod- per-family overrides, and the
   catalog's .dsc-demo serif title (22379).
   Class names are kept IDENTICAL to wise.css so a future re-port is a
   section diff. Consumes tokens from wwwroot/css/wci/wci-tokens.css.

   Scoped CSS: the toolbar, pill, funnel, popover card, head and foot are
   drawn here. The popover's fields are WciField (.adm-field), so the
   .adm-filter-pop field rules reach them with ::deep.
   =================================================================== */

/* ---- wise.css 1125-1139 ---- */
.wise-toolbar[b-on7b74gdni] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
/* ---- wise.css 1140-1166 ---- */
.wise-search-inline[b-on7b74gdni] {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 220px;
}
.wise-search-inline > .material-symbols-outlined[b-on7b74gdni] {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--text-subtle);
  pointer-events: none;
}

/* ---- wise.css 1168-1220 ---- */
.wise-search[b-on7b74gdni] {
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  padding: 0 16px 0 42px;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill, 999px);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
html.dark .wise-search[b-on7b74gdni] {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.10);
}
.wise-search[b-on7b74gdni]::placeholder {
  color: color-mix(in srgb, var(--text-subtle) 55%, transparent);
  font-style: italic;
}
.wise-search:focus[b-on7b74gdni] {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border-strong));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.wise-search-inline.has-filter .wise-search[b-on7b74gdni] {
  padding-right: 46px;
}

/* ---- wise.css 1222-1291 ---- */
.wise-search-filter[b-on7b74gdni] {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-subtle);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.wise-search-filter .material-symbols-outlined[b-on7b74gdni] {
  position: static;
  transform: none;
  font-size: 19px;
  color: inherit;
  pointer-events: none;
}
.wise-search-filter:hover[b-on7b74gdni] {
  color: var(--text);
  background: var(--surface-3, var(--surface-2));
}
html.dark .wise-search-filter:hover[b-on7b74gdni] { background: rgba(255, 255, 255, 0.08); }
.wise-search-filter.is-active[b-on7b74gdni],
.wise-search-filter.is-open[b-on7b74gdni] {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}
html.dark .wise-search-filter.is-active[b-on7b74gdni] { color: var(--primary-bright, #93C5FD); }
.wise-search-filter.has-dot[b-on7b74gdni]::after {
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  border: 1.5px solid var(--surface-2);
}
html.dark .wise-search-filter.has-dot[b-on7b74gdni]::after {
  background: var(--primary-bright, #93C5FD);
  border-color: var(--surface);
}
.wise-search-filter:focus-visible[b-on7b74gdni] {
  outline: 2px solid color-mix(in srgb, var(--primary) 45%, transparent);
  outline-offset: 2px;
}

/* ---- wise.css 1293-1317 ---- */
.wise-filter-pop[b-on7b74gdni] {
  position: absolute;
  z-index: 60;
  top: calc(100% + 8px);
  right: 0;
  min-width: 268px;
  width: min(340px, calc(100vw - 40px));
  max-width: 92vw;
  max-height: min(70vh, 560px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: var(--shadow-card, 0 12px 32px rgba(0, 0, 0, 0.18));
  padding: 14px;
  box-sizing: border-box;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wise-filter-pop[hidden][b-on7b74gdni] { display: none; }

/* ---- wise.css 17459-17464 ---- */
.adm-filter-pop[b-on7b74gdni]  .adm-field { display: flex; flex-direction: column; gap: 6px; }
.adm-filter-pop[b-on7b74gdni]  .adm-field-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-subtle); }
.adm-filter-pop[b-on7b74gdni]  .adm-select { width: 100%; }
.adm-filter-pop-foot[b-on7b74gdni] { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 2px; }
.adm-filter-clear[b-on7b74gdni] { background: none; border: 0; padding: 0; font: inherit; font-size: 0.76rem; font-weight: 700; color: var(--text-subtle); cursor: pointer; }
.adm-filter-clear:hover[b-on7b74gdni] { color: var(--text); text-decoration: underline; }

/* ---- wise.css 18964-18965 ---- */
.wmod-filter-pop-head[b-on7b74gdni] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.wmod-filter-pop-title[b-on7b74gdni] { font-size: 13px; font-weight: 800; color: var(--text); }

/* ===================================================================
   APP-OWNED ADDITIONS
   =================================================================== */

/* The popover is placed against the toolbar (the demo sets this inline). */
.wci-filter-toolbar[b-on7b74gdni] { position: relative; }

/* A leading control (Leading) sits inside the pill: the wrapper draws the pill and its focus ring, and the glyph, the
   control and the input flow in a row so a label of any width keeps the input clear of it. */
.wise-search-inline.has-leading[b-on7b74gdni] {
  height: 40px;
  box-sizing: border-box;
  gap: 6px;
  padding-left: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill, 999px);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
html.dark .wise-search-inline.has-leading[b-on7b74gdni] {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.10);
}
.wise-search-inline.has-leading:focus-within[b-on7b74gdni] {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border-strong));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.wise-search-inline.has-leading > .material-symbols-outlined[b-on7b74gdni] { position: static; transform: none; flex: 0 0 auto; }
.wise-search-inline.has-leading .wise-search[b-on7b74gdni] {
  flex: 1 1 auto;
  min-width: 0;
  height: 38px;
  padding-left: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.wci-search-leading[b-on7b74gdni] { display: inline-flex; flex: 0 0 auto; align-items: center; }

/* The funnel alone, for a list with no search: the pill's control on its own. */
.wci-filter-only[b-on7b74gdni] { flex: 0 0 auto; min-width: 0; width: 40px; height: 40px; }
.wci-filter-only .wise-search-filter[b-on7b74gdni] { right: 5px; }

/* The popover's own gap already spaces its rows; the head's margin is for
   the design's looser card. */
.wise-filter-pop .wmod-filter-pop-head[b-on7b74gdni] { margin-bottom: -2px; }

.adm-filter-clear:focus-visible[b-on7b74gdni] { outline: 2px solid color-mix(in srgb, var(--primary) 45%, transparent); outline-offset: 2px; border-radius: 3px; }

/* On a phone the card spans the toolbar rather than hanging off its right edge. */
@media (max-width: 480px) {
  .wise-filter-pop[b-on7b74gdni] { left: 0; right: 0; width: auto; min-width: 0; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wise-search[b-on7b74gdni], .wise-search-filter[b-on7b74gdni], .wise-search-inline.has-leading[b-on7b74gdni] { transition: none; }
}
/* /Components/DesignSystem/WciFolderEditor.razor.rz.scp.css */
/* ===================================================================
   WCI component: Folder editor (WciFolderEditor), the inline name and color editor of the History and Library
   folder rows. PORTED VERBATIM from the ip-b2b design (http://3.17.180.155:4144, revision served 2026-09-29):
     js/chat-history.js, injectStyles() lines 325-340 (.wch-proj-edit, its field and its swatches), moved here
     from WciHistory, which now renders this component; lines 286-306 for .wch-proj-dot (WciHistory keeps its
     own copy for the folder rows). The Library mockup's side-panel editor (.lib-fp-edit) is the same editor.
   =================================================================== */

.wch-proj-edit[b-kpfaakuyf4] { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 6px 8px 6px 8px; }
.wch-proj-dot[b-kpfaakuyf4] { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.wch-proj-edit-input[b-kpfaakuyf4] { flex: 1; min-width: 0; height: 30px; box-sizing: border-box; padding: 0 10px; border-radius: 8px; font: inherit; font-size: 13px; color: inherit; outline: none; background: rgba(255,255,255,0.06); border: 1px solid var(--primary, #2F6DF6); }
html:not(.dark) .wch-proj-edit-input[b-kpfaakuyf4] { background: rgba(20,40,80,0.05); }
.wch-proj-swatches[b-kpfaakuyf4] { flex-basis: 100%; display: flex; align-items: center; gap: 8px; padding: 4px 2px 2px 17px; }
.wch-proj-swatch[b-kpfaakuyf4] { flex: 0 0 auto; width: 14px; height: 14px; padding: 0; border: 0; border-radius: 50%; background: currentColor; cursor: pointer; transition: transform .12s ease; }
.wch-proj-swatch:hover[b-kpfaakuyf4] { transform: scale(1.25); }
.wch-proj-swatch.is-sel[b-kpfaakuyf4] { outline: 2px solid currentColor; outline-offset: 2px; }

/* ===================================================================
   APP-OWNED ADDITIONS
   =================================================================== */

/* Keyboard focus on a swatch gets the app's ring. */
.wch-proj-swatch:focus-visible[b-kpfaakuyf4] { outline: 2px solid var(--primary); outline-offset: 1px; }

/* A chat's "Default" swatch: no color, so a ring in the text ink rather than a filled dot. */
.wch-proj-swatch.wci-swatch-default[b-kpfaakuyf4] { background: transparent; color: var(--text, #1F2733); box-shadow: inset 0 0 0 1.5px currentColor; }

@media (prefers-reduced-motion: reduce) {
  .wch-proj-swatch[b-kpfaakuyf4] { transition: none; }
}
/* /Components/DesignSystem/WciHeaderTrail.razor.rz.scp.css */
/* ===================================================================
   WCI component: Buttons, the header trail (WciHeaderTrail), INTEL-363
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo, revision served by the
   prototype host on 2026-09-23 (http://3.17.180.155:4144/pages/wise.css,
   Last-Modified 2026-09-23 06:58:57 GMT):
     pages/wise.css
       lines 15240-15246  .pf-head-trail and its .panel-controls nowrap
     js/all-modules-flow.js
       lines 3149-3169    demoHeadTrail() (markup template)
   The 28px size of a button inside the trail lives in WciButton.razor.css
   (wise.css 759-769) and the compact chip in WciBrandChip.razor.css
   (15255-15264), each next to the element it sizes.
   Class names are kept IDENTICAL to wise.css.
   =================================================================== */

/* Compact header-trail buttons — Marketing Assets ghost and the brand chip
   sit left of the module ⋯. 34px is the module-head size (verify / Add);
   inside .pf-head-trail they shrink to 28px so they match the kebab. */
.pf-head-trail[b-p1zvr11mur] {
  display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
  flex-shrink: 0;
}
.panel-controls .pf-head-trail[b-p1zvr11mur] {
  flex-wrap: nowrap; margin-right: 4px;
}
/* /Components/DesignSystem/WciHistory.razor.rz.scp.css */
/* ===================================================================
   WCI component: History (WciHistory), INTEL-412
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design, as served by the prototype host
   (http://3.17.180.155:4144, revision served 2026-09-29):
     js/chat-history.js, injectStyles() (the live History module's own sheet, one rule per string):
       line  69        .wch-list
       lines 76-80     --wch-star, .wch-star-dot, .wch-new-dot
       lines 81-85     .wch-item, .wch-active, .wch-item-title, .wch-fork-badge
       lines 89-95     .wch-chat-dot, the progress ring, .wch-live-dot and its keyframes, reduced motion
       lines 102-112   .wch-info (the row's hover card)
       line  118       .wch-empty
       lines 153-155   .wch-mcp-badge
       lines 260-274   .wch-item-actions, .wch-iact, .wch-drag-handle
       lines 276-282   .wch-projects, .wch-projects-head, .wch-proj-add
       lines 286-306   .wch-project, head, toggle, dot, name, count, ⋯, folder star
       lines 309-317   .wch-starred, .wch-proj-menu hover / open
                       (2026-10-15 revision, ip-b2b 4e73d2b: Starred is the first folder, folder_special in the
                       star gold; the tree spine and elbows and the idle chat dots are gone)
       lines 325-340   .wch-project-body, .wch-project-empty (.wch-proj-edit and its swatches are WciFolderEditor's)
       lines 341-346   .wch-dragging, .wch-ungrouped, .wch-loose
     js/all-modules-flow.js 5953-5961, module "History" (demoWchItem / demoWchProject / demoWchPane /
       demoWchInfo, 3012-3093, are the markup).
   The design's JS strings are split one rule per line here. The sidebar shell (.wch-sidebar, dock, icon
   rail, width tiers, search, scrim, popovers, tooltip) is not ported: the History sits in the host's
   existing sidebar, its search is the host's WciInput and its menus are WciRowMenu / the FilingDialog.
   The shell's custom properties (--wch-tree-bg, --wch-star) move to the component root.
   `html:not(.dark)` rules are the light theme the app renders; `html.dark` rules are inert (rule 6).
   The hover card is filled by wwwroot/js/wci/wci-history.js, so its children are reached with ::deep.
   Class names are kept IDENTICAL. Tokens come from wwwroot/css/wci/wci-tokens.css.
   =================================================================== */

.wch-list[b-l3uj5hk0eu] { flex: 1; overflow-y: auto; padding: 2px 8px 12px; }

/* ── Chat dot: only a chat still in progress carries one ── */
.wch-item[b-l3uj5hk0eu] { position: relative; display: flex; align-items: center; padding: 4px 14px 4px 12px; border-radius: 10px; cursor: pointer; margin: 0; }
.wch-item.wch-active .wch-item-title[b-l3uj5hk0eu] { font-weight: 700; }
.wch-item-title[b-l3uj5hk0eu] { flex: 1; min-width: 0; font-size: 12px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wch-fork-badge[b-l3uj5hk0eu] { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; margin-right: 5px; width: 17px; height: 17px; border-radius: 50%; background: color-mix(in srgb, var(--primary, #2F6DF6) 16%, transparent); color: var(--primary-ink, var(--primary, #2F6DF6)); }
.wch-fork-badge .material-symbols-outlined[b-l3uj5hk0eu] { font-size: 12px; }
.wch-chat-dot[b-l3uj5hk0eu] { display: inline-block; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; margin-right: 10px; vertical-align: middle; background: currentColor; position: relative; z-index: 2; }
.wch-chat-dot[b-l3uj5hk0eu]::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; box-sizing: border-box; pointer-events: none; border: 2px solid color-mix(in srgb, var(--text-subtle, #8B9FAF) 28%, transparent); }
.wch-chat-dot.wch-live-dot[b-l3uj5hk0eu] { color: var(--primary, #2F6DF6); box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary, #2F6DF6) 28%, transparent); animation: wchLive-b-l3uj5hk0eu 2.6s ease-in-out infinite; }
.wch-chat-dot.wch-live-dot[b-l3uj5hk0eu]::after { border: 2px solid color-mix(in srgb, var(--helix-ink, #25507C) 26%, transparent); border-top-color: var(--helix-ink, #25507C); animation: wchSpin-b-l3uj5hk0eu .8s linear infinite; }
@keyframes wchSpin-b-l3uj5hk0eu { to { transform: rotate(360deg); } }
@keyframes wchLive-b-l3uj5hk0eu { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary, #2F6DF6) 28%, transparent); opacity: .75 } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--primary, #2F6DF6) 0%, transparent); opacity: 1 } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary, #2F6DF6) 0%, transparent); opacity: .75 } }
@media (prefers-reduced-motion: reduce) { .wch-live-dot[b-l3uj5hk0eu] { animation: none; opacity: 1; } .wch-chat-dot.wch-live-dot[b-l3uj5hk0eu]::after { animation: none; } }

/* ── Row hover info card ── */
.wch-info[b-l3uj5hk0eu] { position: fixed; z-index: 90; min-width: 196px; max-width: 264px; padding: 12px 14px; border-radius: 14px; pointer-events: none;
  opacity: 0; transform: translateY(5px) scale(.97); transform-origin: top left; transition: opacity .14s ease, transform .14s ease;
  background: var(--card, var(--surface, #0F1830)); color: var(--text, #C5CFD7); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 18px 44px rgba(0,0,0,0.46); }
html:not(.dark) .wch-info[b-l3uj5hk0eu] { background: #fff; color: #1F2733; border-color: rgba(0,0,0,0.09); box-shadow: 0 18px 44px rgba(20,30,60,0.18); }
.wch-info.is-vis[b-l3uj5hk0eu] { opacity: 1; transform: none; }
.wch-info[b-l3uj5hk0eu]  .wch-info-title { font-family: "WISE Digits", "DM Sans", system-ui, sans-serif; font-weight: 700; font-size: 13.5px; line-height: 1.26; letter-spacing: -.01em; margin-bottom: 9px; }
.wch-info[b-l3uj5hk0eu]  .wch-info-row { display: flex; align-items: center; gap: 9px; font-size: 12px; line-height: 1.5; opacity: .82; }
.wch-info[b-l3uj5hk0eu]  .wch-info-row + .wch-info-row { margin-top: 4px; }
.wch-info[b-l3uj5hk0eu]  .wch-info-row .material-symbols-outlined { font-size: 16px; opacity: .66; flex: 0 0 auto; }
.wch-info[b-l3uj5hk0eu]  .wch-info-row.is-live { opacity: 1; color: #12B981; font-weight: 600; }
.wch-info[b-l3uj5hk0eu]  .wch-info-row.is-live .material-symbols-outlined { opacity: 1; color: #12B981; }
.wch-empty[b-l3uj5hk0eu] { padding: 22px 16px; font-size: 12px; line-height: 1.5; opacity: .6; text-align: center; }

/* Small "used MCP" chip on a conversation row. */
.wch-mcp-badge[b-l3uj5hk0eu] { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; margin-right: 5px; width: 17px; height: 17px; border-radius: 50%;
  background: color-mix(in srgb, var(--primary, #2F6DF6) 14%, transparent); color: var(--primary-ink, var(--primary, #2F6DF6)); }
.wch-mcp-badge .material-symbols-outlined[b-l3uj5hk0eu] { font-size: 12px; }

/* ── Projects (chat grouping) ── */
.wch-item-actions[b-l3uj5hk0eu] { position: absolute; top: 50%; right: 5px; transform: translateY(-50%); display: none; align-items: center; gap: 3px; padding: 3px; border-radius: 999px;
  background: var(--card, var(--surface, #0F1830)); box-shadow: 0 2px 10px rgba(0,0,0,0.34); }
html:not(.dark) .wch-item-actions[b-l3uj5hk0eu] { background: #fff; box-shadow: 0 2px 10px rgba(20,30,60,0.16); }
.wch-item:hover .wch-item-actions[b-l3uj5hk0eu], .wch-item:focus-within .wch-item-actions[b-l3uj5hk0eu] { display: flex; }
.wch-iact[b-l3uj5hk0eu] { width: 26px; height: 26px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: .7; transition: background .15s ease, opacity .15s ease; }
.wch-iact:hover[b-l3uj5hk0eu] { background: rgba(255,255,255,0.14); opacity: 1; }
html:not(.dark) .wch-iact:hover[b-l3uj5hk0eu] { background: rgba(20,40,80,0.10); opacity: 1; }
.wch-iact .material-symbols-outlined[b-l3uj5hk0eu] { font-size: 16px; }
.wch-drag-handle[b-l3uj5hk0eu] { cursor: grab; }
.wch-drag-handle:active[b-l3uj5hk0eu] { cursor: grabbing; }
.wch-item:has(.wch-drag-handle:hover)[b-l3uj5hk0eu] { background: color-mix(in srgb, var(--primary, #2F6DF6) 12%, transparent); outline: 1px solid color-mix(in srgb, var(--primary, #2F6DF6) 40%, transparent); }
.wch-projects[b-l3uj5hk0eu] { margin: 2px 0 4px; }
.wch-projects-head[b-l3uj5hk0eu] { display: flex; align-items: center; gap: 6px; padding: 12px 8px 4px 12px; }
.wch-projects-title[b-l3uj5hk0eu] { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .5; flex: 1; }
.wch-proj-add[b-l3uj5hk0eu] { width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: .7; }
.wch-proj-add:hover[b-l3uj5hk0eu] { background: rgba(255,255,255,0.10); opacity: 1; color: var(--primary-ink, var(--primary, #2F6DF6)); }
html:not(.dark) .wch-proj-add:hover[b-l3uj5hk0eu] { background: rgba(0,0,0,0.06); }
.wch-proj-add .material-symbols-outlined[b-l3uj5hk0eu] { font-size: 18px !important; line-height: 1 !important; }
.wch-project[b-l3uj5hk0eu] { position: relative; margin: 1px 0; overflow: visible; }
.wch-project.wch-drop-on[b-l3uj5hk0eu] { background: color-mix(in srgb, var(--primary, #2F6DF6) 14%, transparent); outline: 1px dashed color-mix(in srgb, var(--primary, #2F6DF6) 55%, transparent); }
.wch-project-head[b-l3uj5hk0eu] { position: relative; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 8px 34px 8px 6px; border-radius: 0; cursor: pointer; }
.wch-project-head:hover[b-l3uj5hk0eu], .wch-project-head:focus[b-l3uj5hk0eu], .wch-project-head:focus-visible[b-l3uj5hk0eu] { background: transparent; outline: none; }
html:not(.dark) .wch-project-head:hover[b-l3uj5hk0eu] { background: transparent; }
.wch-proj-toggle[b-l3uj5hk0eu] { position: relative; z-index: 3; width: 22px; height: 22px; flex: 0 0 auto; border: 0; border-radius: 50%; background: var(--wch-tree-bg); color: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.wch-proj-toggle .material-symbols-outlined[b-l3uj5hk0eu] { font-size: 18px !important; line-height: 1 !important; font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 20; }
.wch-proj-dot[b-l3uj5hk0eu] { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.wch-proj-name[b-l3uj5hk0eu] { flex: 1; min-width: 0; font-size: 13px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wch-proj-count[b-l3uj5hk0eu] { flex: 0 0 auto; font-size: 11px; font-weight: 600; opacity: .55; padding: 0 4px; }
.wch-proj-menu[b-l3uj5hk0eu] { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; display: none; align-items: center; justify-content: center; opacity: .6; }
.wch-project-head:hover .wch-proj-menu[b-l3uj5hk0eu], .wch-project-head:focus-within .wch-proj-menu[b-l3uj5hk0eu], .wch-proj-menu.is-open[b-l3uj5hk0eu] { display: flex; }
.wch-proj-star[b-l3uj5hk0eu] { flex: 0 0 auto; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; display: none; align-items: center; justify-content: center; opacity: .6; }
.wch-project-head:hover .wch-proj-star[b-l3uj5hk0eu], .wch-project-head:focus-within .wch-proj-star[b-l3uj5hk0eu], .wch-proj-star.is-on[b-l3uj5hk0eu] { display: flex; }
.wch-proj-star:hover[b-l3uj5hk0eu] { opacity: 1; background: rgba(0,0,0,0.08); }
html.dark .wch-proj-star:hover[b-l3uj5hk0eu] { background: rgba(255,255,255,0.12); }
.wch-proj-star .material-symbols-outlined[b-l3uj5hk0eu] { font-size: 16px !important; line-height: 1 !important; }
.wch-proj-star.is-on[b-l3uj5hk0eu], .wch-iact.is-on[b-l3uj5hk0eu] { color: var(--wch-star); opacity: 1; }
.wch-proj-star.is-on .material-symbols-outlined[b-l3uj5hk0eu], .wch-iact.is-on .material-symbols-outlined[b-l3uj5hk0eu] { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 20; }
.wch-project.wch-starred > .wch-project-head .wch-proj-toggle[b-l3uj5hk0eu] { color: var(--wch-star); }
.wch-proj-menu:hover[b-l3uj5hk0eu] { background: rgba(0,0,0,0.08); opacity: 1; }
html.dark .wch-proj-menu:hover[b-l3uj5hk0eu] { background: rgba(255,255,255,0.12); }
.wch-proj-menu.is-open[b-l3uj5hk0eu] { opacity: 1; box-shadow: 0 0 0 2px var(--primary, #2F6DF6); }
.wch-proj-menu .material-symbols-outlined[b-l3uj5hk0eu] { font-size: 16px; }
.wch-project-body[b-l3uj5hk0eu] { position: relative; z-index: 0; padding-left: 22px; }
.wch-project.wch-collapsed .wch-project-body[b-l3uj5hk0eu] { display: none; }
.wch-project-body > .wch-item[b-l3uj5hk0eu], .wch-project-body > .wch-project-empty[b-l3uj5hk0eu], .wch-project-body[b-l3uj5hk0eu] >  .wch-proj-edit { position: relative; }
.wch-project-empty[b-l3uj5hk0eu] { font-size: 11px; opacity: .5; padding: 4px 12px 8px 20px; }
.wch-item.wch-dragging[b-l3uj5hk0eu] { opacity: .45; }
.wch-ungrouped[b-l3uj5hk0eu] { border-radius: 10px; min-height: 20px; }
.wch-ungrouped.wch-drop-on[b-l3uj5hk0eu] { background: color-mix(in srgb, var(--primary, #2F6DF6) 12%, transparent); outline: 1px dashed color-mix(in srgb, var(--primary, #2F6DF6) 50%, transparent); }
.wch-project.wch-loose > .wch-project-head .wch-proj-toggle[b-l3uj5hk0eu] { color: var(--text-muted, var(--text-subtle, #8B9FAF)); }

/* ===================================================================
   APP-OWNED ADDITIONS
   =================================================================== */

/* The design's .wch-sidebar shell custom properties and ink, on the component root. --wch-tree-bg painted the
   folder glyph's circle to mask the tree spine behind it; the 2026-10-15 revision dropped the spine, so the mask
   has nothing to hide and showed as a white disc on the cream pane. It is transparent. */
.wci-history[b-l3uj5hk0eu] {
  --wch-tree-bg: transparent;
  --wch-star: color-mix(in srgb, var(--warm-400, #946005) 70%, var(--ter-amber, #FFC434));
  color: var(--text, #1F2733);
}
html.dark .wci-history[b-l3uj5hk0eu] { --wch-star: var(--ter-amber, #FFC434); }

/* A host inside a flex column (the chat page's sidebar) scrolls the list; standalone it is just a block. */
.wci-history.wci-history--static[b-l3uj5hk0eu] { flex: none; overflow: visible; }

/* The folder ⋯ is a WciRowMenu; its trigger fills the design's 24px circle. */
.wch-proj-menu[b-l3uj5hk0eu] { padding: 0; }
.wch-proj-menu[b-l3uj5hk0eu]  .adm-rowmenu-btn {
  width: 100%; height: 100%; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: inherit;
}
.wch-proj-menu[b-l3uj5hk0eu]  .adm-rowmenu-btn .material-symbols-outlined { font-size: 16px; }

/* Every folder head is its own stacking context (the design's position: relative; z-index: 2), so a later head
   painted over the ⋯ menu an earlier head opened: the counts, glyphs and names below showed through the menu.
   The head holding the open menu rises above its siblings. A subfolder's head sits inside its parent's body (its
   own z-index: 0 context), so that body rises too. */
.wch-project-head:has(.wch-proj-menu.is-open)[b-l3uj5hk0eu],
.wch-project-body:has(.wch-proj-menu.is-open)[b-l3uj5hk0eu] { z-index: 20; }

/* Keyboard focus: the rows, heads and hover controls are focusable, so they get the app's ring. */
.wch-item:focus-visible[b-l3uj5hk0eu], .wch-project-head:focus-visible[b-l3uj5hk0eu] { outline: 2px solid var(--primary); outline-offset: -2px; }
.wch-iact:focus-visible[b-l3uj5hk0eu], .wch-proj-star:focus-visible[b-l3uj5hk0eu], .wch-proj-add:focus-visible[b-l3uj5hk0eu], .wch-proj-toggle:focus-visible[b-l3uj5hk0eu] {
  outline: 2px solid var(--primary); outline-offset: 1px;
}

/* The host's pager footer (compact) inside All conversations. */
.wci-history-foot[b-l3uj5hk0eu] { padding: 6px 4px 0 20px; }
/* /Components/DesignSystem/WciIconButton.razor.rz.scp.css */
/* ===================================================================
   WCI component: icon-only buttons (WciIconButton), INTEL-363 / INTEL-385
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo, revision served by the
   prototype host on 2026-09-23 (http://3.17.180.155:4144/pages/wise.css,
   Last-Modified 2026-09-23 06:58:57 GMT):
     pages/wise.css
       lines 124          the primary round control paints the FILL 1 icon
       lines 2286-2306    .lir-btn (rail control)
       lines 2310-2327    rail glyph rules
       lines 2396-2406    rail hover, .lir-active and html.dark
       lines 2426-2436    .lir-btn.has-dot unread dot
       lines 16734-16746  .adm-icon-btn (round control) and its tones
       lines 17129-17130  .adm-icon-btn--danger ink
     js/all-modules-flow.js
       lines 3174-3179    demoLirBtn() (rail markup)
       lines 5600-5638    module "Admin buttons" (round markup)
   Class names are kept IDENTICAL to wise.css. The rules the design
   scopes to the top-bar rail (#left-icon-rail, .topbar-menu-toggle) are
   not ported: the app has neither. Requires wwwroot/css/wci/wci-tokens.css.
   =================================================================== */

/* ---- Primary icon fill (wise.css 124) ---- */
.adm-icon-btn--primary .material-symbols-outlined[b-bo7c2kv1o9] {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ---- Round icon-only action button (wise.css 16734-16746, 17129-17130) ---- */
/* Round icon-only action button (row actions rail). */
.adm-icon-btn[b-bo7c2kv1o9] {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; background: transparent; color: var(--text-subtle);
  cursor: pointer; transition: background 0.15s ease, color 0.15s ease;
}
html.dark .adm-icon-btn[b-bo7c2kv1o9] { background: transparent; }
.adm-icon-btn:hover[b-bo7c2kv1o9] { color: var(--text); background: var(--surface-2); }
html.dark .adm-icon-btn:hover[b-bo7c2kv1o9] { background: rgba(255,255,255,0.06); }
.adm-icon-btn .material-symbols-outlined[b-bo7c2kv1o9] { font-size: 18px; }
.adm-icon-btn--primary[b-bo7c2kv1o9] { background: var(--primary); border-color: var(--primary); color: #fff; }
.adm-icon-btn--primary:hover[b-bo7c2kv1o9] { filter: brightness(1.08); color: #fff; }
/* App-owned: .adm-icon-btn:hover (and its html.dark form) is as specific as the primary hover and paints the
   surface fill, which left the white glyph on a pale disc. The primary keeps its own fill on hover, and at rest
   under html.dark, whose transparent .adm-icon-btn out-ranks it. */
html.dark .adm-icon-btn.adm-icon-btn--primary[b-bo7c2kv1o9],
.adm-icon-btn.adm-icon-btn--primary:hover[b-bo7c2kv1o9],
html.dark .adm-icon-btn.adm-icon-btn--primary:hover[b-bo7c2kv1o9] { background: var(--primary); border-color: var(--primary); }
.adm-icon-btn--danger:hover[b-bo7c2kv1o9] { color: var(--sec-red); border-color: var(--sec-red-10); background: var(--sec-red-10); }
.adm-icon-btn--danger[b-bo7c2kv1o9] { color: var(--sec-red); }
html.dark .adm-icon-btn--danger[b-bo7c2kv1o9] { color: #FF9E96; }

/* ---- Rail control (wise.css 2286-2327, 2396-2406, 2426-2436) ---- */
.lir-btn[b-bo7c2kv1o9] {
  width: 40px;
  height: auto;
  min-height: 46px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 2px;
  padding: 5px 0 4px;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  position: relative;
  flex-shrink: 0;
  -webkit-user-select: none;
  user-select: none;
}
/* The rail icons are Material Icons text ligatures; without this, dragging
   across the bar selects them and paints highlight boxes the width of the
   underlying word ("monitoring", "space_dashboard", …). */
.lir-btn .material-symbols-outlined[b-bo7c2kv1o9] {
  -webkit-user-select: none;
  user-select: none;
}
/* Block display so text-align: center is measured from the button edges,
   keeping icon and label on the exact same horizontal center */
.lir-btn .material-symbols-outlined[b-bo7c2kv1o9] {
  display: block !important;
  text-align: center !important;
  line-height: 1 !important;
  font-size: 20px !important;
}
.lir-btn:hover[b-bo7c2kv1o9] { background: rgba(0,0,0,0.04); color: var(--text); }
html.dark .lir-btn:hover[b-bo7c2kv1o9] { background: rgba(255,255,255,0.06); color: var(--text); }
.lir-btn.lir-active[b-bo7c2kv1o9] { color: var(--primary); }
html.dark .lir-btn[b-bo7c2kv1o9] { color: var(--text-muted); }
html.dark .lir-btn.lir-active[b-bo7c2kv1o9] {
  color: var(--primary-bright);
  background: transparent;
}
.lir-btn.has-dot[b-bo7c2kv1o9]::after {
  content: '';
  position: absolute;
  top: 5px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--sec-red);
  box-shadow: 0 0 0 2px var(--bg);
  pointer-events: none;
}
.lir-btn.has-dot.is-read[b-bo7c2kv1o9]::after { display: none; }


/* ===================================================================
   APP-OWNED ADDITIONS (not in wise.css). Keep below the verbatim port so a
   re-sync replaces everything above this line untouched.
   =================================================================== */

/* Open state. The design draws it only as the demo-scoped
   .dsc-demo .lir-btn.is-open (wise.css 21573-21577); the live control
   carries aria-expanded instead of a demo class. */
.lir-btn[aria-expanded="true"][b-bo7c2kv1o9] {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary-ink, var(--primary));
}
html.dark .lir-btn[aria-expanded="true"][b-bo7c2kv1o9] { color: var(--primary-bright, #93C5FD); }
.adm-icon-btn[aria-expanded="true"][b-bo7c2kv1o9],
.adm-icon-btn[aria-pressed="true"][b-bo7c2kv1o9] { color: var(--primary-ink, var(--primary)); background: var(--primary-soft); }

/* Overlay: a round control floating over an image or a preview. The
   design's control is transparent, which vanishes on busy content, so it
   takes the same surface, border and elevation as a card. */
.adm-icon-btn.wci-icon-btn--overlay[b-bo7c2kv1o9] {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow-1);
}
.adm-icon-btn.wci-icon-btn--overlay:hover[b-bo7c2kv1o9] { background: var(--surface-2); color: var(--text); }
.adm-icon-btn.wci-icon-btn--overlay.adm-icon-btn--danger:hover[b-bo7c2kv1o9] { background: var(--sec-red-10); color: var(--sec-red); }

/* Live disabled state (the design's is demo-scoped, wise.css 21544-21552).
   The design's rule also sets pointer-events: none. It is dropped for a
   native disabled button: an icon's tooltip is often the reason it is
   disabled ("Cannot move down"), which is exactly when someone hovers it,
   and a disabled <button> never fires a click anyway. The hover paint is
   neutralised instead. A disabled link (.is-disabled) has no native guard,
   so it keeps pointer-events: none. */
.adm-icon-btn:disabled[b-bo7c2kv1o9], .adm-icon-btn.is-disabled[b-bo7c2kv1o9],
.lir-btn:disabled[b-bo7c2kv1o9], .lir-btn.is-disabled[b-bo7c2kv1o9] { opacity: 0.45; cursor: not-allowed; }
.adm-icon-btn.is-disabled[b-bo7c2kv1o9], .lir-btn.is-disabled[b-bo7c2kv1o9] { pointer-events: none; }
.adm-icon-btn:disabled:hover[b-bo7c2kv1o9] { color: var(--text-subtle); background: transparent; border-color: transparent; }
.adm-icon-btn--primary:disabled:hover[b-bo7c2kv1o9] { color: #fff; background: var(--primary); border-color: var(--primary); filter: none; }
.adm-icon-btn--danger:disabled:hover[b-bo7c2kv1o9] { color: var(--sec-red); }
.adm-icon-btn.wci-icon-btn--overlay:disabled:hover[b-bo7c2kv1o9] { background: var(--surface); border-color: var(--border); }
.lir-btn:disabled:hover[b-bo7c2kv1o9] { background: transparent; color: var(--text-muted); }
.adm-icon-btn[aria-busy="true"][b-bo7c2kv1o9], .lir-btn[aria-busy="true"][b-bo7c2kv1o9] { opacity: 1; cursor: progress; }
a.adm-icon-btn[b-bo7c2kv1o9], a.lir-btn[b-bo7c2kv1o9] { text-decoration: none; }

/* Keyboard focus ring (CONVENTIONS: real UI uses :focus-visible). */
.adm-icon-btn:focus-visible[b-bo7c2kv1o9],
.lir-btn:focus-visible[b-bo7c2kv1o9] {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 28%, transparent);
}

.wci-btn-spinner[b-bo7c2kv1o9] { animation: wci-icon-btn-spin-b-bo7c2kv1o9 0.9s linear infinite; }
@keyframes wci-icon-btn-spin-b-bo7c2kv1o9 {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .adm-icon-btn[b-bo7c2kv1o9], .lir-btn[b-bo7c2kv1o9] { transition: none; }
  .wci-btn-spinner[b-bo7c2kv1o9] { animation-duration: 2.4s; }
}
/* /Components/DesignSystem/WciImageDrop.razor.rz.scp.css */
/* ===================================================================
   WCI component: Image lightbox upload zone (WciImageDrop), INTEL-380
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo, revision served by the
   prototype host on 2026-09-25 (http://3.17.180.155:4144):
     pages/wise.css
       lines 14874-14894  .dash-banner-drop, :hover / .is-drag, glyph,
                          text, strong, hint
     js/all-modules-flow.js
       lines 4839-4875    module "Image lightbox" (markup template)
   Class names are kept IDENTICAL to wise.css.

   Scoped CSS: the zone and its parts are this component's own markup; the
   file input is InputFile's, reached with ::deep.
   Requires wwwroot/css/wci/wci-tokens.css (global).
   =================================================================== */

.dash-banner-drop[b-d82389whh7] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  cursor: pointer;
  border-radius: var(--r-md);
  border: 1.5px dashed var(--border-strong);
  background: var(--surface-2);
  color: var(--text-muted);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.dash-banner-drop:hover[b-d82389whh7],
.dash-banner-drop.is-drag[b-d82389whh7] {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 7%, var(--surface-2));
}
.dash-banner-drop > .material-symbols-outlined[b-d82389whh7] { font-size: 26px; color: var(--primary-ink, var(--primary)); }
.dash-banner-drop-text[b-d82389whh7] { font-size: 0.8rem; line-height: 1.4; }
.dash-banner-drop-text strong[b-d82389whh7] { color: var(--text); }
.dash-banner-drop-hint[b-d82389whh7] { color: var(--text-subtle); font-size: 0.72rem; }

/* ============================ APP-OWNED ADDITIONS ============================ */

/* The file input covers the whole zone, invisible: a click anywhere opens the picker and a file
   dropped anywhere lands on the input, which is how a browser accepts a drop with no script. */
.dash-banner-drop[b-d82389whh7] { position: relative; }
.dash-banner-drop[b-d82389whh7]  .wci-drop-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* Keyboard: the input takes focus, so the ring goes on the zone. */
.dash-banner-drop:focus-within[b-d82389whh7] {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.dash-banner-drop.is-disabled[b-d82389whh7] {
  opacity: 0.55;
  cursor: not-allowed;
  border-color: var(--border-strong);
  background: var(--surface-2);
}
.dash-banner-drop.is-disabled[b-d82389whh7]  .wci-drop-input { cursor: not-allowed; }
/* /Components/DesignSystem/WciImageLightbox.razor.rz.scp.css */
/* ===================================================================
   WCI component: Image lightbox, preview (WciImageLightbox), INTEL-380
   -------------------------------------------------------------------
   PORTED from the ip-b2b design repo, revision served by the prototype
   host on 2026-09-25 (http://3.17.180.155:4144):
     pages/wise.css
       line 22507         .wai-img-body img (the catalog's .dsc-demo copy;
                          the served wise.css has no live .wai-img-* rules,
                          so the demo scope is dropped as for .wt-empty)
     js/all-modules-flow.js
       lines 4839-4875    module "Image lightbox"
   The card itself (.wai-img-modal 22494-22497), its head, name and close
   (22498-22506) are NOT ported: the note says the preview reuses the
   modal shell, so the card, head, title and close are WciModal's
   (.wise-modal, wise.css 890-1122). .wai-img-modal stays on the card as
   a hook.

   Scoped CSS: the body and image are this component's own markup (the
   fragment it hands WciModal carries this component's scope).
   =================================================================== */

.wai-img-body img[b-xobrujhc9f] { display: block; width: 100%; height: auto; }

/* ============================ APP-OWNED ADDITIONS ============================ */

/* A tall or narrow image fits the window rather than scrolling: centred on the soft surface, never
   upscaled past its own size, never cropped. */
.wai-img-body[b-xobrujhc9f] {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  border-radius: var(--r-md);
  background: var(--surface-2);
  overflow: hidden;
}
.wai-img-body img[b-xobrujhc9f] {
  width: auto;
  max-width: 100%;
  max-height: calc(100vh - 200px);
  object-fit: contain;
}
/* /Components/DesignSystem/WciImagePreview.razor.rz.scp.css */
/* ===================================================================
   WCI component: Image lightbox preview (WciImagePreview), INTEL-380
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo, revision served by the
   prototype host on 2026-09-25 (http://3.17.180.155:4144):
     pages/wise.css
       lines 14822-14866  "Modal panel: brand banner editor": the photo
                          square (--photo), the banner frame, the image
                          layer, the empty line, the round --logo variant
     js/all-modules-flow.js
       lines 4839-4875    module "Image lightbox" (markup template)
   Class names are kept IDENTICAL to wise.css.

   One change to the verbatim lines, per REGISTRY.md rule 10: the photo
   square's `margin: 0 auto` (14827) centres it in the prototype's card and
   is dropped, because a margin on the component root cancels the layout
   class a host passes. It is centred below with align-self instead, which
   is what `margin: 0 auto` does inside the flex column of a WciModal body.

   Scoped CSS: every element named here is this component's own markup.
   Requires wwwroot/css/wci/wci-tokens.css (global).
   =================================================================== */

.dash-banner-preview--photo[b-sxfoqi7wbv] {
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 240px;
  max-height: 240px;
  border-radius: 14px;
}

.dash-banner-preview[b-sxfoqi7wbv] {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-2);
  display: grid;
  place-items: center;
}
.dash-banner-preview-img[b-sxfoqi7wbv] {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  display: none;
}
.dash-banner-preview-empty[b-sxfoqi7wbv] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--text-subtle);
}
.dash-banner-preview-empty .material-symbols-outlined[b-sxfoqi7wbv] { font-size: 18px; }
/* Logo variant — a fixed, centered round preview (a true circle, not the wide
   banner aspect) that shows the whole mark. The grid container centers it. */
.dash-banner-preview--logo[b-sxfoqi7wbv] {
  aspect-ratio: auto;
  height: 188px;
}
.dash-banner-preview--logo .dash-banner-preview-img[b-sxfoqi7wbv] {
  position: static;
  inset: auto;
  width: 148px;
  height: 148px;
  border-radius: 50%;
  background-color: #fff;
  background-size: cover;
  box-shadow: 0 0 0 1px var(--border);
}

/* ============================ APP-OWNED ADDITIONS ============================ */

/* Contain: the whole image, letterboxed on the frame's soft surface. A pack shot is rarely square. */
.wci-preview-contain .dash-banner-preview-img[b-sxfoqi7wbv] {
  background-size: contain;
  background-repeat: no-repeat;
}

/* A host renderer fills the frame. */
.wci-preview-host[b-sxfoqi7wbv] { position: absolute; inset: 0; display: grid; place-items: center; }

/* Centre the square in a flex column (a WciModal body) without a margin; see the header. */
.dash-banner-preview--photo[b-sxfoqi7wbv] { align-self: center; }
/* /Components/DesignSystem/WciImageUrlField.razor.rz.scp.css */
/* ===================================================================
   WCI component: Image lightbox URL line (WciImageUrlField), INTEL-380
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo, revision served by the
   prototype host on 2026-09-25 (http://3.17.180.155:4144):
     pages/wise.css
       lines 14896-14922  .dash-banner-or and its rules either side,
                          .dash-banner-url, :focus, html.dark
     js/all-modules-flow.js
       lines 4839-4875    module "Image lightbox" (markup template)
   Class names are kept IDENTICAL to wise.css.

   Scoped CSS: every element named here is this component's own markup.
   Requires wwwroot/css/wci/wci-tokens.css (global).
   =================================================================== */

.dash-banner-or[b-evi9w1j84a] {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-subtle);
  font-size: 0.72rem;
}
.dash-banner-or[b-evi9w1j84a]::before,
.dash-banner-or[b-evi9w1j84a]::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.dash-banner-url[b-evi9w1j84a] {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 0.82rem;
}
.dash-banner-url:focus[b-evi9w1j84a] { outline: none; border-color: var(--primary); }
html.dark .dash-banner-url[b-evi9w1j84a] { background: rgba(255, 255, 255, 0.03); }

/* ============================ APP-OWNED ADDITIONS ============================ */

/* The divider and field stack with the modal body's own 14px rhythm. */
.wci-url-field[b-evi9w1j84a] { display: flex; flex-direction: column; gap: 14px; }
.wci-url-row[b-evi9w1j84a] { display: flex; align-items: center; gap: 8px; }
.wci-url-row .dash-banner-url[b-evi9w1j84a] { flex: 1 1 auto; min-width: 0; }
.dash-banner-url:focus-visible[b-evi9w1j84a] { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
.dash-banner-url:disabled[b-evi9w1j84a] { opacity: 0.55; cursor: not-allowed; }
/* /Components/DesignSystem/WciIngredientAnalyzer.razor.rz.scp.css */
/* ===================================================================
   WCI component: Ingredients Analyzer (WciIngredientAnalyzer), INTEL-404
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo, revision afe74ad
   (pulled 2026-10-05):
     pages/product-details.css
       lines 26-28        .nfp-ingred-edit--static (the read-only list)
       line  1072         .nfp-ingred-wrap > * (the readable column)
       lines 1080-1110    the list: wrap, body, textarea, placeholder,
                          lede, the empty height
       lines 1201-1214    the list's html.dark re-cut
       lines 1281-1340    .nfp-ia, the accordion, Analyze, spinner, the
                          running and re-run states
       lines 1341-1373    banner, actions, buttons, the four table grids
       lines 1374-1389    th, row (stagger), tree indent
       lines 1447-1510    group and depth rows, the connector, cells,
                          pills, Confirm link, process-level circles,
                          the stagger keyframes, reduced motion
       lines 1550-1560    the shared 40px CTA height
     pages/wise.css
       lines 26290-26300  .is-nf-hit on parsed, nutrient and scout rows
     js/add-product-flow.js
       lines 1714-1751, 1903-2087, 6316   the markup and the analysis flow
   Not ported: the owl lookup (.nfp-ia-owl, .nfp-ia-lookup*, .is-lookup,
   .is-attested; product-details.css 1390-1446) and the card mode
   (1511-1523, driven by js/responsive-tables.js, which the app does not
   ship). .nfp-block-err / .nfp-field-note belong to the field-error
   path, which the host draws through the Notice slot.
   The root is .nfp-ia, which carries padding and no margin (rule 10).
   Class names are kept IDENTICAL to the design.
   =================================================================== */

/* ---- product-details.css 26-28 ---- */
.nfp-ingred-edit--static[b-cjdt3d1ljj] { white-space: pre-wrap; overflow-wrap: anywhere; cursor: default; }
.nfp-ingred-edit--static:hover[b-cjdt3d1ljj] { border-color: var(--border-strong); }
html.dark .nfp-ingred-edit--static:hover[b-cjdt3d1ljj] { border-color: rgba(255,255,255,0.10); }

/* ---- product-details.css 1072, 1080-1110 ---- */
.nfp-ingred-wrap > *[b-cjdt3d1ljj] { max-width: 460px; margin-left: auto; margin-right: auto; }
.nfp-ingred-wrap[b-cjdt3d1ljj] { background: transparent; font-family: 'WISE Digits', 'DM Sans', system-ui, sans-serif; }
.nfp-ingred-body[b-cjdt3d1ljj] { padding: 8px 12px 9px; }
/* Rounded rectangle at every height — same 22px corner empty or full,
   so a long list never gets clipped by a stadium pill. */
.nfp-ingred-edit[b-cjdt3d1ljj] {
  display: block; width: 100%; box-sizing: border-box; margin: 0;
  min-height: 38px; height: auto; resize: none; overflow: hidden;
  padding: 9px 16px;
  border: 1px solid var(--border-strong); border-radius: 22px;
  background: var(--surface-2); color: var(--text);
  font-family: inherit; font-size: 0.8125rem; font-weight: 400; line-height: 1.25;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.nfp-ingred-edit:hover[b-cjdt3d1ljj] {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border-strong));
}
.nfp-ingred-edit:focus[b-cjdt3d1ljj] {
  background: var(--surface); color: var(--text);
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border-strong));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.nfp-ingred-edit[b-cjdt3d1ljj]::placeholder {
  color: color-mix(in srgb, var(--text-subtle) 55%, transparent); font-style: italic;
}
.nfp-ingred-lede[b-cjdt3d1ljj] {
  margin: 0 0 10px; font-size: 0.78rem; line-height: 1.45; color: var(--text-muted);
}
.nfp-ingred-wrap.is-empty .nfp-ingred-edit[b-cjdt3d1ljj] {
  min-height: 96px; height: 96px;
}

/* ---- product-details.css 1201-1214 ---- */
html.dark .nfp-ingred-wrap[b-cjdt3d1ljj] { background: transparent; }
html.dark .nfp-ingred-edit[b-cjdt3d1ljj] {
  background: rgba(255,255,255,0.05); color: var(--text);
  border-color: rgba(255,255,255,0.10);
}
html.dark .nfp-ingred-edit:hover[b-cjdt3d1ljj] {
  border-color: color-mix(in srgb, var(--primary-bright, var(--primary)) 40%, rgba(255,255,255,0.10));
}
html.dark .nfp-ingred-edit:focus[b-cjdt3d1ljj] {
  background: rgba(255,255,255,0.07); color: var(--text);
  border-color: color-mix(in srgb, var(--primary-bright, var(--primary)) 55%, rgba(255,255,255,0.10));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-bright, var(--primary)) 18%, transparent);
}

/* ---- product-details.css 1281-1389 ---- */
/* Ingredient analysis — always-open list + Parsed / Codes / Nutrients / Wise Code AI accordions. */
.nfp-ia[b-cjdt3d1ljj] { display: flex; flex-direction: column; gap: 8px; padding: 0 2px 8px; min-width: 0; }
.nfp-ia-sec[b-cjdt3d1ljj] {
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  overflow: hidden;
}
html.dark .nfp-ia-sec[b-cjdt3d1ljj] { background: color-mix(in srgb, #fff 3%, transparent); }
.nfp-ia-head[b-cjdt3d1ljj] {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border: 0; background: transparent; color: var(--text);
  cursor: pointer; text-align: left; flex-wrap: wrap;
}
.nfp-ia-head:hover[b-cjdt3d1ljj] { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.nfp-ia-title[b-cjdt3d1ljj] {
  font-family: 'WISE Digits', 'DM Sans', system-ui, sans-serif;
  font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; flex: 1 1 8rem; min-width: 0;
}
.nfp-ia-head-pills[b-cjdt3d1ljj] {
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
  flex: 0 1 auto; justify-content: flex-end;
}
.nfp-ia-head-pills .nfp-ia-pill[b-cjdt3d1ljj] { font-size: 0.55rem; padding: 1px 6px; pointer-events: none; }
.nfp-ia-chev[b-cjdt3d1ljj] {
  font-size: 20px !important; color: var(--text-subtle); flex-shrink: 0;
  transition: transform 0.18s ease;
}
.nfp-ia-sec.is-collapsed .nfp-ia-chev[b-cjdt3d1ljj] { transform: rotate(-90deg); }
.nfp-ia-body[b-cjdt3d1ljj] { padding: 0 12px 12px; min-width: 0; }
.nfp-ia-sec.is-collapsed .nfp-ia-body[b-cjdt3d1ljj] { display: none; }
.nfp-ia .nfp-ingred-wrap[b-cjdt3d1ljj] { max-width: none; }
.nfp-ia .nfp-ingred-body[b-cjdt3d1ljj] { padding: 0 0 10px; }
.nfp-ia-analyze[b-cjdt3d1ljj] {
  width: fit-content; max-width: 100%; display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-left: auto; margin-right: auto;
  border: none; border-radius: 999px; padding: 9px 14px; cursor: pointer;
  font-family: 'WISE Digits', 'DM Sans', system-ui, sans-serif; font-size: 0.8rem; font-weight: 700;
  background: var(--primary); color: #fff; transition: filter 0.15s, opacity 0.15s;
}
.nfp-ia-analyze:hover[b-cjdt3d1ljj] { filter: brightness(1.07); }
.nfp-ia-analyze:disabled:not(.is-running)[b-cjdt3d1ljj] { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.25); }
.nfp-ia-analyze.is-running[b-cjdt3d1ljj] { opacity: 1; filter: none; cursor: progress; }
.nfp-ia-analyze .material-symbols-outlined[b-cjdt3d1ljj] {
  font-size: 17px !important;
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.nfp-ia-spin[b-cjdt3d1ljj] {
  width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; box-sizing: border-box;
  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;
  animation: nfp-ia-spin-b-cjdt3d1ljj 0.7s linear infinite;
}
@keyframes nfp-ia-spin-b-cjdt3d1ljj { to { transform: rotate(360deg); } }
.nfp-ia.is-running .nfp-ia-actions[b-cjdt3d1ljj] { pointer-events: none; opacity: 0.45; }
.nfp-ia-sec.is-rerunning .nfp-ia-banner[b-cjdt3d1ljj] { opacity: 0.55; }
.nfp-ia-sec.is-rerunning .nfp-ia-row[b-cjdt3d1ljj] {
  animation: nfp-ia-scan-b-cjdt3d1ljj 0.85s ease-in-out infinite;
}
@keyframes nfp-ia-scan-b-cjdt3d1ljj {
  0%, 100% { opacity: 0.28; }
  50% { opacity: 1; }
}
.nfp-ia-banner[b-cjdt3d1ljj] {
  display: flex; align-items: flex-start; gap: 7px; padding: 8px 10px; margin-bottom: 8px;
  border-radius: 10px; font-size: 0.7rem; line-height: 1.4; font-weight: 600;
}
.nfp-ia-banner .material-symbols-outlined[b-cjdt3d1ljj] { font-size: 16px !important; flex-shrink: 0; margin-top: 1px; }
.nfp-ia-banner--ok[b-cjdt3d1ljj] { background: var(--sec-green-10); color: var(--sec-green-text); }
.nfp-ia-banner--warn[b-cjdt3d1ljj] { background: var(--ter-amber-10); color: var(--ter-amber-text); }
.nfp-ia-actions[b-cjdt3d1ljj] { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.nfp-ia-btn[b-cjdt3d1ljj] {
  display: inline-flex; align-items: center; gap: 5px; border-radius: 999px;
  padding: 5px 10px; font-size: 0.66rem; font-weight: 700; cursor: pointer;
}
.nfp-ia-btn--ghost[b-cjdt3d1ljj] { border: 1px solid var(--primary); background: var(--surface); color: var(--text); }
.nfp-ia-btn--ghost:hover[b-cjdt3d1ljj] { border-color: var(--primary); }
.nfp-ia-btn--ok[b-cjdt3d1ljj] { border: none; background: var(--sec-green); color: #fff; }
.nfp-ia-btn--ok:hover[b-cjdt3d1ljj] { filter: brightness(1.06); }
.nfp-ia-table[b-cjdt3d1ljj] { display: flex; flex-direction: column; min-width: 0; overflow-x: auto; }
.nfp-ia-th[b-cjdt3d1ljj], .nfp-ia-row[b-cjdt3d1ljj] {
  display: grid; gap: 8px; align-items: center; min-width: 220px;
}
.nfp-ia-table--parsed .nfp-ia-th[b-cjdt3d1ljj],
.nfp-ia-table--parsed .nfp-ia-row[b-cjdt3d1ljj] {
  grid-template-columns: minmax(88px, 1.25fr) minmax(64px, 0.9fr) minmax(84px, max-content);
  align-items: start;
}
.nfp-ia-table--codes .nfp-ia-th[b-cjdt3d1ljj],
.nfp-ia-table--codes .nfp-ia-row[b-cjdt3d1ljj] { grid-template-columns: minmax(90px, 1.4fr) minmax(72px, 0.9fr) minmax(56px, max-content); align-items: start; }
.nfp-ia-table--codes .nfp-ia-th > :last-child[b-cjdt3d1ljj],
.nfp-ia-table--codes .nfp-ia-td--num[b-cjdt3d1ljj] { justify-self: end; text-align: right; }
.nfp-ia-table--nut .nfp-ia-th[b-cjdt3d1ljj],
.nfp-ia-table--nut .nfp-ia-row[b-cjdt3d1ljj] { grid-template-columns: minmax(70px, 1.2fr) minmax(72px, 0.8fr) minmax(36px, 0.5fr); }
.nfp-ia-table--scout .nfp-ia-th[b-cjdt3d1ljj],
.nfp-ia-table--scout .nfp-ia-row[b-cjdt3d1ljj] { grid-template-columns: minmax(64px, 1.1fr) minmax(56px, 0.9fr) minmax(72px, 1fr) minmax(52px, auto); align-items: start; }
.nfp-ia-th[b-cjdt3d1ljj] {
  padding: 0 2px 6px; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-subtle); border-bottom: 1px solid var(--border);
}
.nfp-ia-row[b-cjdt3d1ljj] {
  padding: 7px 2px; border-bottom: 1px solid var(--border); font-size: 0.68rem; color: var(--text);
  animation: nfp-ia-in-b-cjdt3d1ljj 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 38ms);
}
.nfp-ia-row:last-child[b-cjdt3d1ljj] { border-bottom: 0; }
.nfp-ia-tree[b-cjdt3d1ljj] {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px 6px; position: relative;
  padding-left: calc(4px + min(12, var(--d, 0)) * 8px);
  text-transform: capitalize;
}
.nfp-ia-tree-name[b-cjdt3d1ljj] { min-width: 0; overflow-wrap: anywhere; }

/* ---- product-details.css 1447-1510 ---- */
.nfp-ia-parsed-row[data-depth="0"] .nfp-ia-tree[b-cjdt3d1ljj],
.nfp-ia-scout-row[data-depth="0"] .nfp-ia-tree[b-cjdt3d1ljj] { font-weight: 700; padding-left: 2px; }
.nfp-ia-parsed-row.is-group .nfp-ia-tree[b-cjdt3d1ljj],
.nfp-ia-scout-row.is-group .nfp-ia-tree[b-cjdt3d1ljj] { font-weight: 700; }
.nfp-ia-row:not([data-depth="0"]) .nfp-ia-tree[b-cjdt3d1ljj]::before {
  content: '';
  position: absolute;
  left: calc(min(12, var(--d, 1)) * 8px - 4px);
  top: 0.65em;
  width: 8px; height: 1px;
  background: var(--border);
}
.nfp-ia-parsed-row.is-group[b-cjdt3d1ljj],
.nfp-ia-scout-row.is-group[b-cjdt3d1ljj] {
  background: color-mix(in srgb, var(--text) 4%, transparent);
}
html.dark .nfp-ia-parsed-row.is-group[b-cjdt3d1ljj],
html.dark .nfp-ia-scout-row.is-group[b-cjdt3d1ljj] {
  background: color-mix(in srgb, #fff 6%, transparent);
}
.nfp-ia-scout-row.is-child .nfp-ia-td:first-child[b-cjdt3d1ljj] { padding-left: 0; color: inherit; }
.nfp-ia-td[b-cjdt3d1ljj] { min-width: 0; overflow-wrap: anywhere; }
.nfp-ia-td--num[b-cjdt3d1ljj] { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.nfp-ia-td--amt[b-cjdt3d1ljj] { display: inline-flex; align-items: baseline; gap: 4px; }
.nfp-ia-unit[b-cjdt3d1ljj] { font-weight: 600; color: var(--text-muted); }
.nfp-ia-subcat[b-cjdt3d1ljj] { font-size: 0.62rem; color: var(--text-muted); overflow-wrap: anywhere; }
.nfp-ia-den[b-cjdt3d1ljj] { font-size: 0.58rem; font-weight: 600; color: var(--text-subtle); margin-left: 2px; }
.nfp-ia-empty[b-cjdt3d1ljj] { font-size: 0.7rem; color: var(--text-muted); font-style: italic; margin: 4px 0 0; }
.nfp-ia-pill[b-cjdt3d1ljj] {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px 8px; border-radius: 999px; font-size: 0.62rem; font-weight: 700; white-space: nowrap;
}
.nfp-ia-td--mapstack[b-cjdt3d1ljj] { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.nfp-ia-td--mapped[b-cjdt3d1ljj] { min-width: 0; }
.nfp-ia-td--match[b-cjdt3d1ljj] { display: flex; align-items: flex-start; justify-content: flex-start; }
.nfp-ia-mapped[b-cjdt3d1ljj] { font-weight: 700; letter-spacing: 0.01em; overflow-wrap: anywhere; }
.nfp-ia-pill--ok[b-cjdt3d1ljj] { background: var(--sec-green-10); color: var(--sec-green-text); }
.nfp-ia-pill--part[b-cjdt3d1ljj], .nfp-ia-pill--warn[b-cjdt3d1ljj] { background: var(--ter-amber-10); color: var(--ter-amber-text); }
.nfp-ia-pill--bad[b-cjdt3d1ljj] { background: var(--sec-red-10); color: var(--sec-red-text); }
.nfp-ia-pill-wrap[b-cjdt3d1ljj] { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.nfp-ia-pill-ico[b-cjdt3d1ljj] { font-size: 15px !important; color: var(--text-subtle); }
.nfp-ia-confirm[b-cjdt3d1ljj] {
  border: 0; background: transparent; color: var(--primary-ink, var(--primary));
  font-size: 0.62rem; font-weight: 800; cursor: pointer; padding: 0; text-decoration: underline;
}
.nfp-ia-pl[b-cjdt3d1ljj] {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  font-size: 0.62rem; font-weight: 800; color: #fff;
}
.nfp-ia-pl--1[b-cjdt3d1ljj] { background: var(--sec-green); }
.nfp-ia-pl--2[b-cjdt3d1ljj] { background: var(--ter-amber); color: #5A2D0A; }
.nfp-ia-pl--3[b-cjdt3d1ljj] { background: var(--sec-red); }
@keyframes nfp-ia-in-b-cjdt3d1ljj {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nfp-ia-row[b-cjdt3d1ljj] { animation: none; }
  .nfp-ia-chev[b-cjdt3d1ljj] { transition: none; }
  .nfp-ia-spin[b-cjdt3d1ljj] { animation: none; }
  .nfp-ia-sec.is-rerunning .nfp-ia-row[b-cjdt3d1ljj] { animation: none; opacity: 0.55; }
}

/* ---- product-details.css 1550-1560: shared CTA height ---- */
.nfp-ia-analyze[b-cjdt3d1ljj] {
  box-sizing: border-box;
  height: 40px; min-height: 40px;
  padding-top: 0; padding-bottom: 0;
  font-size: 0.82rem;
}
.nfp-ia-analyze .material-symbols-outlined[b-cjdt3d1ljj] { font-size: 18px !important; }

/* ---- wise.css 26290-26300 ---- */
.nfp-ia-parsed-row.is-nf-hit[b-cjdt3d1ljj],
.nfp-ia-nut-row.is-nf-hit[b-cjdt3d1ljj],
.nfp-ia-scout-row.is-nf-hit[b-cjdt3d1ljj] {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  outline: 1px solid color-mix(in srgb, var(--primary) 40%, transparent);
  outline-offset: -1px;
}
html.dark .nfp-ia-parsed-row.is-nf-hit[b-cjdt3d1ljj],
html.dark .nfp-ia-nut-row.is-nf-hit[b-cjdt3d1ljj],
html.dark .nfp-ia-scout-row.is-nf-hit[b-cjdt3d1ljj] {
  background: color-mix(in srgb, var(--primary-bright, var(--primary)) 16%, transparent);
}

/* ===================================================================
   APP-OWNED ADDITIONS
   =================================================================== */

/* The design grows the box with script (autosize). The browser does it
   here; where field-sizing is unsupported the box scrolls instead of
   clipping a long list. */
.nfp-ingred-edit:not(.nfp-ingred-edit--static)[b-cjdt3d1ljj] {
  field-sizing: content;
  max-height: 40vh;
  overflow-y: auto;
}

/* Analyze and the host's Review side by side under the box (Review is app-owned: it does not wait on an
   analysis). The design centres Analyze with auto margins; in the row the row centres it. */
.wci-ia-cta[b-cjdt3d1ljj] { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.wci-ia-cta .nfp-ia-analyze[b-cjdt3d1ljj] { margin-left: 0; margin-right: 0; }
.wci-ia-review[b-cjdt3d1ljj] { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 6px 12px; }
.wci-ia-review .material-symbols-outlined[b-cjdt3d1ljj] { font-size: 15px; }

/* The host's lock or exemption note, between the lede and the box. */
.wci-ia-notice[b-cjdt3d1ljj] { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }

/* The app's processing levels run to 4; the fourth reads as the third. */
.nfp-ia-pl--4[b-cjdt3d1ljj] { background: var(--sec-red); }

.nfp-ia-head:focus-visible[b-cjdt3d1ljj],
.nfp-ia-btn:focus-visible[b-cjdt3d1ljj],
.nfp-ia-analyze:focus-visible[b-cjdt3d1ljj] {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.nfp-ia-btn:disabled[b-cjdt3d1ljj] { opacity: 0.45; cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
  .nfp-ia-analyze[b-cjdt3d1ljj], .nfp-ingred-edit[b-cjdt3d1ljj] { transition: none; }
}
/* /Components/DesignSystem/WciInput.razor.rz.scp.css */
/* ===================================================================
   WCI component: Form fields, the pill input (WciInput)
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo:
     /Users/kevinjones/src/wc/ip-b2b/pages/wise.css
       lines 16738-16740  .adm-input, html.dark, :focus
       line  19073-19081  .auth-input :focus / .is-invalid (the invalid
                          state; the adm family has none, and the card
                          says the auth inputs are the same control)
       line  19071-19072  ::placeholder
       lines 19090-19091  .auth-input-affix (the password affix)
       lines 19092-19100  .auth-affix-btn (the eye button), applied to the
                          app's existing .pw-toggle-btn
   NOTE: that checkout is not on every machine. These line numbers are
   from the revision the prototype host serves (Last-Modified 2026-09-24
   05:30:33 GMT, http://3.17.180.155:4144/pages/wise.css).
   Module: Component Library > Inputs & forms > "Form fields"
   (js/all-modules-flow.js 5628-5645).
   Class names are kept IDENTICAL to wise.css so a future re-port is a
   section diff. Consumes tokens from wwwroot/css/wci/wci-tokens.css.
   The html.dark rules are ported as-is; they are inert until the app
   grows a theme toggle.
   =================================================================== */

.adm-input[b-3ya3newolu] { height: 42px; box-sizing: border-box; padding: 0 16px; font-family: inherit; font-size: 0.8125rem; color: var(--text); background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); outline: none; }
html.dark .adm-input[b-3ya3newolu] { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.10); }
.adm-input:focus[b-3ya3newolu] { border-color: color-mix(in srgb, var(--primary) 55%, var(--border-strong)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }

/* ---- Placeholder and invalid (wise.css 19071-19081, .auth-input family) ---- */
.adm-input[b-3ya3newolu]::placeholder { color: color-mix(in srgb, var(--text-subtle) 55%, transparent); font-style: italic; }
.adm-input.is-invalid[b-3ya3newolu] { border-color: var(--sec-red); box-shadow: 0 0 0 3px var(--sec-red-soft); }

/* ---- Password / affix inputs (wise.css 19090-19100) ---- */
.auth-input-affix[b-3ya3newolu] { position: relative; display: flex; align-items: center; }
.auth-input-affix .adm-input[b-3ya3newolu] { padding-right: 46px; }
.auth-input-affix[b-3ya3newolu]  .pw-toggle-btn {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--text-muted); cursor: pointer; border-radius: var(--radius-pill);
  transition: background 0.15s ease, color 0.15s ease;
}
.auth-input-affix[b-3ya3newolu]  .pw-toggle-btn:hover { color: var(--primary); background: var(--primary-soft); }
html.dark .auth-input-affix[b-3ya3newolu]  .pw-toggle-btn:hover { color: var(--primary-bright); }
.auth-input-affix[b-3ya3newolu]  .pw-toggle-btn .material-icons { font-size: 20px; }

/* ================= APP-OWNED ADDITIONS (not in wise.css) ================= */

/* wwwroot/app.css (the project template) outlines every .valid.modified field
   in green, and outranks the design's outline: none. The pill shows its
   state through the focus ring and .is-invalid; an edited field is not news. */
.adm-input.valid.modified[b-3ya3newolu] { outline: none; }

/* --sec-red-soft is read by the design's invalid rule but defined nowhere in
   the served wise.css, which would drop the ring altogether. */
.adm-input.is-invalid[b-3ya3newolu] { --sec-red-soft: var(--sec-red-10); }

/* A field stretches its control; outside a field, the host sizes it. */
.auth-input-affix[b-3ya3newolu] { width: 100%; }
.auth-input-affix .adm-input[b-3ya3newolu] { width: 100%; }

/* The app's global password-toggle.css pins the button to the full input
   height with !important padding on the input; the affix owns that here. */
.auth-input-affix[b-3ya3newolu]  .pw-toggle-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; color: var(--primary); }

/* Live disabled and read-only states. */
.adm-input:disabled[b-3ya3newolu] { opacity: 0.55; cursor: not-allowed; }
.adm-input[readonly][b-3ya3newolu] { background: var(--surface); }

/* Number inputs: the spinner arrows sit inside the pill's right padding. */
.adm-input[type="number"][b-3ya3newolu] { padding-right: 10px; }

/* The design sets font-family: inherit, which as a scoped rule outranks the
   Tailwind font-mono utility. A code, token or canon-name field keeps its
   monospace by asking for it. */
.adm-input.font-mono[b-3ya3newolu] { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

@media (prefers-reduced-motion: reduce) {
  .auth-input-affix[b-3ya3newolu]  .pw-toggle-btn { transition: none; }
}
/* /Components/DesignSystem/WciIntentChip.razor.rz.scp.css */
/* ===================================================================
   WCI component: Intent chips + Spent chip rows (WciIntentChip), INTEL-364 / INTEL-365
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo (revision a2ba5dc, 2026-09-23):
     /Users/kevinjones/src/wc/ip-b2b/pages/wise.css
       lines 9481-9546   Intent chips  .chip / .chip-primary / .chip-dive / .ws-intent-chip
                         (the .ws-intent-chip--more rules are dropped: no "Show more" chip in the app)
       lines 9548-9581   Spent chip rows  [data-chips-spent] .chip / .sc-reply-chips.is-done .chip /
                         .ws-intent-chip.is-used (the .gs-chip selectors are dropped: no signup chat chips)
       lines 9583-9597   [data-chips-gone] (the row's fade and collapse on the way out; the height is
                         measured by wwwroot/js/wci/wci-intent-chip.js, a port of retire() in js/chip-lock.js)
       lines 21648-21659 .chip--match / .ms-chip.is-selected: the served wise.css has these only under
                         the catalog's .dsc-demo scope, so they are ported with that scope dropped
     /Users/kevinjones/src/wc/ip-b2b/pages/wiseai.html
       lines 216-217     .sc-reply-chips (the row) and .sc-reply-chips .chip. REGISTRY.md rule 10: the
                         row's `margin: 4px 0 4px 42px` (the indent under that page's avatar) is not
                         ported; the root never sets a margin, the host places the row.
     /Users/kevinjones/src/wc/ip-b2b/js/all-modules-flow.js
       lines 3894-3928   "Intent chips" module (demo template)
   Class names are kept IDENTICAL so a future re-port is a section diff.
   Scoped CSS: the row and its chips are this component's own markup, so no ::deep is needed.
   =================================================================== */

.chip[b-ejs44jtus5] {
  display: inline-flex; align-items: center; gap: 6px;
  box-sizing: border-box; height: 28px; padding: 0 7px;
  /* One size app-wide: the 28px in-conversation reply chip. Same blue tint as
     the composer (.fl-input-wrap, 10% primary) so chips and the input share
     one surface color, light and dark. */
  background: color-mix(in srgb, var(--primary) 10%, #fff); border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  font-size: var(--fs-label); font-weight: 500; line-height: 1; color: var(--text-muted); cursor: pointer; font-family: inherit;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.chip:hover[b-ejs44jtus5] { background: color-mix(in srgb, var(--primary) 16%, #fff); border-color: color-mix(in srgb, var(--primary) 40%, var(--border-strong)); color: var(--text); }
html.dark .chip:hover[b-ejs44jtus5],
html.dark .ws-intent-chip:hover[b-ejs44jtus5] {
  background: color-mix(in srgb, var(--primary-bright, #8B9FAF) 22%, transparent);
  border-color: color-mix(in srgb, var(--primary-bright, #8B9FAF) 55%, var(--primary));
  color: var(--text);
}
.chip .material-symbols-outlined[b-ejs44jtus5] { font-size: 13px !important; }
/* Result / terminal chip (e.g. the "Done" chip that closes out a step) — a
   solid brand-blue pill so the conclusive action reads as the emphasized,
   primary choice among the reply chips. Reuses the app-wide `chip-primary`
   convention. Scoped to plain `.chip` so welcome intent chips
   keep their neutral, equal-weight look. */
.chip.chip-primary[b-ejs44jtus5] {
  background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600;
}
.chip.chip-primary:hover[b-ejs44jtus5] { background: color-mix(in srgb, var(--primary) 90%, #000); border-color: color-mix(in srgb, var(--primary) 90%, #000); color: #fff; }
.chip.chip-primary .material-symbols-outlined[b-ejs44jtus5] { color: #fff !important; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
html.dark .chip.chip-primary[b-ejs44jtus5] { background: var(--primary); border-color: var(--primary); color: #fff; }
/* Deep-dive chip — the open-ended "take this as far as it goes" ask. Outlined
   in brand blue so it reads as heavier than a neutral chip without claiming the
   solid-blue primary slot. It is the one intent chip style whose ask is
   unscoped by definition, so it is the style that routes through Ask
   pre-flight before anything runs. */
.chip.chip-dive[b-ejs44jtus5] {
  background: transparent; border-color: var(--primary); color: var(--primary); font-weight: 600;
}
.chip.chip-dive .material-symbols-outlined[b-ejs44jtus5] { color: var(--primary) !important; }
.chip.chip-dive:hover[b-ejs44jtus5] { background: color-mix(in srgb, var(--primary) 12%, transparent); border-color: var(--primary); color: var(--primary); }
html.dark .chip.chip-dive[b-ejs44jtus5] { border-color: var(--primary-bright, #8B9FAF); color: var(--primary-bright, #8B9FAF); }
html.dark .chip.chip-dive .material-symbols-outlined[b-ejs44jtus5] { color: var(--primary-bright, #8B9FAF) !important; }
html.dark .chip.chip-dive:hover[b-ejs44jtus5] { background: color-mix(in srgb, var(--primary-bright, #8B9FAF) 14%, transparent); color: var(--primary-bright, #8B9FAF); }
/* Welcome / shortcut intent chips share the same 28px .chip size. Brand-blue
   leading glyph; the trailing .ws-lock badge keeps its own colours. */
.ws-intent-chip[b-ejs44jtus5] { background: color-mix(in srgb, var(--primary) 10%, #fff); border-color: var(--border-strong); color: var(--text-muted); font-weight: 500; }
/* Leading intent glyph always reads in brand blue (the trailing .ws-lock badge
   keeps its own resting/hover colours; the amber ask-help variant overrides via
   higher specificity). */
.ws-intent-chip > .material-symbols-outlined[b-ejs44jtus5] { color: var(--primary); }
html.dark .ws-intent-chip > .material-symbols-outlined[b-ejs44jtus5] { color: var(--primary-bright, #8B9FAF); }
.ws-intent-chip:hover[b-ejs44jtus5] { background: color-mix(in srgb, var(--primary) 16%, #fff); border-color: color-mix(in srgb, var(--primary) 40%, var(--border-strong)); color: var(--text); }
/* Dark mode: chips take the composer's brightened brand-blue tint (matching
   html.dark .fl-input-wrap) with our royal-blue border so they don't read as
   white-bordered pills on the navy chrome. */
html.dark .chip[b-ejs44jtus5] { background: color-mix(in srgb, var(--primary-bright, #8B9FAF) 14%, transparent); border-color: var(--primary); }
html.dark .ws-intent-chip[b-ejs44jtus5] { background: color-mix(in srgb, var(--primary-bright, #8B9FAF) 14%, transparent); border-color: var(--primary); }

/* A transcript only moves forward. js/chip-lock.js stamps `data-chips-spent`
   on a chip row the member has moved past, and every chip inside it reads as
   disabled so the thread cannot be replayed from a point it has already left.
   `.is-done` is the same state under the signup chat's older name, and
   `.ws-intent-chip.is-used` is a single intent that has already had its turn. */
[data-chips-spent] .chip[b-ejs44jtus5],
.sc-reply-chips.is-done .chip[b-ejs44jtus5],
.ws-intent-chip.is-used[b-ejs44jtus5] {
  background: color-mix(in srgb, var(--text-muted) 9%, transparent) !important;
  border-color: color-mix(in srgb, var(--text-muted) 22%, transparent) !important;
  color: var(--text-muted) !important;
  font-weight: 500 !important;
  /* Important: a row can be locked while its own fly-in is still setting an
     inline opacity on the last chips, and that would otherwise leave half the
     spent row at full strength. */
  opacity: 0.52 !important;
  cursor: default;
  pointer-events: none;
  box-shadow: none !important;
}
[data-chips-spent] .chip .material-symbols-outlined[b-ejs44jtus5],
.sc-reply-chips.is-done .chip .material-symbols-outlined[b-ejs44jtus5],
.ws-intent-chip.is-used > .material-symbols-outlined[b-ejs44jtus5] {
  color: var(--text-muted) !important;
}
html.dark [data-chips-spent] .chip[b-ejs44jtus5],
html.dark .sc-reply-chips.is-done .chip[b-ejs44jtus5],
html.dark .ws-intent-chip.is-used[b-ejs44jtus5] {
  background: color-mix(in srgb, var(--text-muted) 20%, transparent) !important;
  border-color: color-mix(in srgb, var(--text-muted) 40%, transparent) !important;
  color: var(--text-muted) !important;
}

/* Small in-chat lead + intent-chip helpers (wiseai.html 216-217, row margin dropped). */
.sc-reply-chips[b-ejs44jtus5] { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-reply-chips .chip[b-ejs44jtus5] { text-align: left; max-width: 100%; }

/* Reply-chip variants (match / dive / selected). Size is locked at 28px
   on the shared .chip rule in wise.css — do not re-inflate padding here. */
.sc-reply-chips .chip .material-symbols-outlined[b-ejs44jtus5] { align-self: center; flex-shrink: 0; }
.sc-reply-chips .chip--match[b-ejs44jtus5] {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}
.sc-reply-chips .chip--match .material-symbols-outlined[b-ejs44jtus5] { color: var(--primary-ink, var(--primary)) !important; }
.sc-reply-chips .chip.ms-chip.is-selected[b-ejs44jtus5] {
  background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600;
}
.sc-reply-chips .chip.ms-chip.is-selected .material-symbols-outlined[b-ejs44jtus5] { color: #fff !important; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* A spent row does not linger. js/chip-lock.js stamps `data-chips-gone` on the
   way out, and the row fades and collapses before it is taken off the thread.
   The height it collapses from is measured in JS — CSS cannot know it. */
[data-chips-gone][b-ejs44jtus5] {
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  margin-block: 0 !important;
  padding-block: 0 !important;
  transition: opacity .16s ease, max-height .26s ease .02s,
              margin-block .26s ease .02s, padding-block .26s ease .02s;
}
@media (prefers-reduced-motion: reduce) {
  [data-chips-gone][b-ejs44jtus5] { transition: none; }
}

/* ---- The gold "What can I ask?" chip (WciIntentChipVariant.AskHelp, INTEL-427) ----
   js/wiseai-chat.js 2432-2459 (the chip) and 2381-2425 (the gold shimmer
   its label shares with the link under the composer), revision served
   2026-09-28. The letters are built by WciAskHelp in C#, so they carry no
   scope attribute and are reached with ::deep. */
.chip.ws-intent-chip--askhelp[b-ejs44jtus5] {
  border-color: color-mix(in srgb, var(--ter-amber, #FFC434) 75%, var(--border-strong));
  color: color-mix(in srgb, var(--ter-amber, #FFC434) 62%, #000);
  background: color-mix(in srgb, var(--ter-amber, #FFC434) 9%, #fff);
}
.chip.ws-intent-chip--askhelp > .material-symbols-outlined[b-ejs44jtus5],
html.dark .chip.ws-intent-chip--askhelp > .material-symbols-outlined[b-ejs44jtus5] { color: inherit; }
.chip.ws-intent-chip--askhelp:hover[b-ejs44jtus5] {
  background: color-mix(in srgb, var(--ter-amber, #FFC434) 18%, #fff);
  border-color: var(--ter-amber, #FFC434);
  color: color-mix(in srgb, var(--ter-amber, #FFC434) 50%, #000);
}
html.dark .chip.ws-intent-chip--askhelp[b-ejs44jtus5] {
  background: color-mix(in srgb, var(--ter-amber, #FFC434) 12%, transparent);
  border-color: color-mix(in srgb, var(--ter-amber, #FFC434) 70%, transparent);
  color: var(--ter-amber, #FFC434);
}
html.dark .chip.ws-intent-chip--askhelp:hover[b-ejs44jtus5] {
  background: color-mix(in srgb, var(--ter-amber, #FFC434) 20%, transparent);
  border-color: var(--ter-amber, #FFC434);
}
.ws-intent-chip--askhelp[b-ejs44jtus5]  .sc-ask-ch { display: inline-block;
  --ask-gold-base: color-mix(in srgb, var(--warm-400, #946005) 78%, var(--ter-amber, #FFC434));
  --ask-gold-deep: var(--warm-400, #946005);
  background: linear-gradient(105deg,
    var(--ask-gold-base) 0%,
    var(--ask-gold-base) 38%,
    var(--ask-gold-deep) 44%,
    var(--ter-amber, #FFC434) 48%, #ffe08a 50%, var(--ter-amber, #FFC434) 52%,
    var(--ask-gold-deep) 56%,
    var(--ask-gold-base) 62%,
    var(--ask-gold-base) 100%);
  background-size: 250% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  -webkit-text-stroke: 0.4px color-mix(in srgb, var(--ter-amber, #FFC434) 45%, #fff);
  animation: sc-ask-shimmer-b-ejs44jtus5 7.5s ease-in-out infinite;
  animation-delay: calc(var(--ch-i, 0) * 90ms); }
html.dark .ws-intent-chip--askhelp[b-ejs44jtus5]  .sc-ask-ch {
  --ask-gold-base: color-mix(in srgb, var(--warm-400, #946005) 42%, var(--ter-amber, #FFC434));
  --ask-gold-deep: color-mix(in srgb, var(--warm-400, #946005) 78%, var(--ter-amber, #FFC434));
}
.ws-intent-chip--askhelp[b-ejs44jtus5]  .sc-ask-sp { white-space: pre; }
@keyframes sc-ask-shimmer-b-ejs44jtus5 {
  0%, 8%    { background-position: 100% 0; transform: translateY(0); }
  20%       { transform: translateY(-1.5px); }
  34%, 100% { background-position: 0% 0; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .ws-intent-chip--askhelp[b-ejs44jtus5]  .sc-ask-ch { animation: none; }
}

/* ===================================================================
   APP-OWNED ADDITIONS (not in wise.css)
   =================================================================== */

/* Long labels wrap. The app's suggestions are whole sentences, and the base chip is a fixed-height
   nowrap pill that would run the label out of the chat. These values are the design's own answer
   for the same problem on its trailing row (.sc-inline-chips .chip, wise.css 8867-8873), applied to
   the per-turn .sc-reply-chips row the app draws. Short chips are untouched. */
.sc-reply-chips .chip[b-ejs44jtus5] {
  width: fit-content; flex: 0 0 auto;
  height: auto; min-height: 28px; padding-block: 4px;
  white-space: normal; overflow-wrap: break-word;
  line-height: 1.35;
}
.sc-reply-chips .chip > .material-symbols-outlined[b-ejs44jtus5] { flex: none; }

.chip:focus-visible[b-ejs44jtus5] { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Disabled but not spent (the assistant is still answering): the chip keeps its look, dimmed. */
.chip:disabled:not(.is-used)[b-ejs44jtus5] { opacity: 0.55; cursor: not-allowed; }
/* /Components/DesignSystem/WciLibraryCard.razor.rz.scp.css */
/* ===================================================================
   WCI component: Library cards (WciLibraryCard), INTEL-414
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design, as served by the prototype host
   (http://3.17.180.155:4144, revision served 2026-09-29):
     pages/conversation-library.html (the Library page's own inline sheet)
       lines 276-287   .lib-card, a.lib-card:hover / :focus-visible
       lines 292-308   .lib-card-menu (the card's hover ⋯)
       lines 318-323   .lib-thumb, .lib-thumb.pad
       lines 326-330   .lib-bars (bar-chart mock, used when a card has no preview)
       lines 337-345   .lib-chatprev, .lib-bubble, .lib-clip
       lines 347-355   .lib-thumb-badge
       lines 358-375   .lib-cbody, .lib-cname, .lib-shared, .lib-cfoot, .lib-date, .lib-counts, .lib-count
       lines 580-585   .lib-card.lib-dragging, .lib-card.lib-drop-target (drop a card on a card)
   and, from the revision served 2026-10-19, the stand-in thumbs:
       lines 388-424   .lib-doc, .lib-doc-strip (report), .lib-mcpprev, .lib-mcp-call, .lib-mcp-rows (MCP),
                       .lib-refprev, .lib-ref-title, .lib-ref-by (reference)
     js/all-modules-flow.js 5963-6008, module "Library cards" (markup)
   The served wise.css carries these only as the catalog's .dsc-demo restage (25090-25126); the page's
   own copy is the one ported. Not ported: the live thumb (.lib-thumb-live, a scaled copy of an output's
   own markup the app does not keep; a captured preview image stands in for it), the line-chart mock,
   .lib-place tags, and html.dark / html.chat-tint.
   Class names are kept IDENTICAL. Tokens come from wwwroot/css/wci/wci-tokens.css.
   =================================================================== */

.lib-card[b-gbceiy7d23] {
  position: relative;
  display: flex; flex-direction: column;
  border-radius: 14px; overflow: hidden; text-decoration: none; color: inherit;
  border: 1px solid var(--border); background: var(--surface);
  box-shadow: var(--shadow-1);
  transition: transform 0.18s cubic-bezier(.2,.7,.3,1), box-shadow 0.18s ease, border-color 0.18s ease;
}
a.lib-card:hover[b-gbceiy7d23] {
  transform: translateY(-4px); box-shadow: var(--shadow-2);
  border-color: color-mix(in srgb, var(--primary) 32%, var(--border));
}
a.lib-card:focus-visible[b-gbceiy7d23] { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Card ⋯ menu — circular, no boxed backdrop; same hover treatment as
   folder tiles. Nested interactive is a span (cards are anchors). */
.lib-card-menu[b-gbceiy7d23] {
  position: absolute; top: 6px; right: 6px; z-index: 3;
  width: 24px; height: 24px; border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(4px);
  color: var(--text-subtle); cursor: pointer;
  border: 1px solid var(--border);
}
.lib-card-menu:hover[b-gbceiy7d23] { background: var(--surface); color: var(--text); }
.lib-card-menu.is-open[b-gbceiy7d23] { color: var(--text); box-shadow: 0 0 0 2px var(--primary); }

/* ---- Preview thumb ---- */
.lib-thumb[b-gbceiy7d23] {
  position: relative; height: 122px; overflow: hidden;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.lib-thumb.pad[b-gbceiy7d23] { padding: 12px 14px; }

/* Bar-chart mock */
.lib-bars[b-gbceiy7d23] { display: flex; align-items: flex-end; gap: 7px; height: 100%; padding-bottom: 2px; }
.lib-bars i[b-gbceiy7d23] { flex: 1; border-radius: 3px 3px 0 0; display: block; font-style: normal; }
.lib-bars i.g[b-gbceiy7d23] { background: color-mix(in srgb, var(--sec-green) 75%, transparent); }
.lib-bars i.b[b-gbceiy7d23] { background: color-mix(in srgb, var(--ter-amber) 82%, transparent); }
.lib-bars i.p[b-gbceiy7d23] { background: color-mix(in srgb, var(--primary) 60%, transparent); }

/* Chat preview */
.lib-chatprev[b-gbceiy7d23] { display: flex; flex-direction: column; gap: 7px; height: 100%; overflow: hidden; }
.lib-bubble[b-gbceiy7d23] {
  max-width: 88%; padding: 6px 9px; border-radius: 10px;
  font-size: 0.6875rem; line-height: 1.35; color: var(--text-muted);
  background: var(--surface); border: 1px solid var(--border);
}
.lib-bubble.me[b-gbceiy7d23] { align-self: flex-end; background: color-mix(in srgb, var(--primary) 14%, var(--surface)); color: var(--text); border-color: transparent; }
.lib-bubble.ai[b-gbceiy7d23] { align-self: flex-start; }
.lib-clip[b-gbceiy7d23] { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Report thumb — a page of prose over a strip of chart. The top
   inset clears the type badge, which sits over the same corner. */
.lib-doc[b-gbceiy7d23] { display: flex; flex-direction: column; gap: 6px; height: 100%; padding-top: 20px; }
.lib-doc > b[b-gbceiy7d23] { display: block; height: 7px; width: 62%; border-radius: 3px; background: color-mix(in srgb, var(--text) 42%, transparent); }
.lib-doc > i[b-gbceiy7d23] { display: block; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--text) 15%, transparent); }
.lib-doc-strip[b-gbceiy7d23] { flex: 1; min-height: 0; margin-top: 2px; }
.lib-doc-strip .lib-bars[b-gbceiy7d23] { gap: 5px; }

/* MCP thumb — the tool that ran, over the rows it came back with */
.lib-mcpprev[b-gbceiy7d23] { display: flex; flex-direction: column; gap: 8px; height: 100%; padding-top: 20px; }
.lib-mcp-call[b-gbceiy7d23] {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
  max-width: 100%; padding: 3px 9px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 0.625rem; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--ter-amber-text); background: color-mix(in srgb, var(--ter-amber) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--ter-amber) 45%, transparent);
}
.lib-mcp-call .material-symbols-outlined[b-gbceiy7d23] { font-size: 12px !important; }
.lib-mcp-rows[b-gbceiy7d23] { display: flex; flex-direction: column; gap: 6px; }
.lib-mcp-rows i[b-gbceiy7d23] { display: block; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--text) 14%, transparent); }
.lib-mcp-rows i:nth-child(1)[b-gbceiy7d23] { width: 92%; }
.lib-mcp-rows i:nth-child(2)[b-gbceiy7d23] { width: 74%; }
.lib-mcp-rows i:nth-child(3)[b-gbceiy7d23] { width: 84%; }
.lib-mcp-rows i:nth-child(4)[b-gbceiy7d23] { width: 58%; }

/* Reference thumb — the paper itself */
.lib-refprev[b-gbceiy7d23] {
  display: flex; flex-direction: column; gap: 7px; justify-content: center; height: 100%;
  padding: 20px 0 0 10px; border-left: 3px solid color-mix(in srgb, var(--sec-red) 60%, transparent);
}
.lib-ref-title[b-gbceiy7d23] {
  /* Kept literal: the design writes the title stack out here rather than reading --font-serif. */
  font-family: 'WISE Digits', 'DM Sans', system-ui, sans-serif;
  font-size: 0.75rem; font-weight: 700; line-height: 1.3; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.lib-ref-by[b-gbceiy7d23] { font-size: 0.625rem; color: var(--text-subtle); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.lib-thumb-badge[b-gbceiy7d23] {
  position: absolute; top: 9px; left: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 0.625rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: blur(3px);
  color: var(--text-muted); border: 1px solid var(--border);
}
.lib-thumb-badge .material-symbols-outlined[b-gbceiy7d23] { font-size: 12px !important; }

/* ---- Card body ---- */
.lib-cbody[b-gbceiy7d23] { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 13px; flex: 1; }
.lib-cname[b-gbceiy7d23] {
  font-size: 0.875rem; font-weight: 700; line-height: 1.3; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.lib-shared[b-gbceiy7d23] {
  display: block;
  font-size: 0.75rem; line-height: 1.35; color: var(--text-subtle);
  overflow-wrap: anywhere;
}
.lib-cfoot[b-gbceiy7d23] { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 2px; }
.lib-date[b-gbceiy7d23] { font-size: 0.75rem; color: var(--text-subtle); align-self: flex-start; text-align: left; }
.lib-counts[b-gbceiy7d23] { display: inline-flex; align-items: center; gap: 10px; }
.lib-count[b-gbceiy7d23] {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 0.75rem; font-weight: 600; color: var(--text-subtle);
}
.lib-count .material-symbols-outlined[b-gbceiy7d23] { font-size: 14px !important; }

.lib-card.lib-dragging[b-gbceiy7d23] { opacity: .38; }
.lib-card.lib-drop-target[b-gbceiy7d23] {
  transform: scale(.97);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 24%, transparent);
}

/* ===================================================================
   APP-OWNED ADDITIONS
   =================================================================== */

/* The ⋯ sits BESIDE the card's anchor, not inside it: a menu row picked inside an <a> would still
   follow the link. The wrap is the positioning context the design gives .lib-card itself, and it
   carries the design's reveal rule (.lib-card:hover .lib-card-menu) one level up. The wrap fills its
   grid cell so a row of cards stretches to one height, as the design's grid does. */
.wci-lib-card[b-gbceiy7d23] { position: relative; display: flex; flex-direction: column; min-width: 0; height: 100%; }
.wci-lib-card > .lib-card[b-gbceiy7d23] { flex: 1; }
.wci-lib-card:hover .lib-card-menu[b-gbceiy7d23],
.wci-lib-card:focus-within .lib-card-menu[b-gbceiy7d23],
.lib-card-menu.is-open[b-gbceiy7d23] { display: flex; }

/* The ⋯ is a WciRowMenu; its trigger fills the design's 24px circle. */
.lib-card-menu[b-gbceiy7d23]  .adm-rowmenu-btn {
  width: 100%; height: 100%; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: inherit;
}
.lib-card-menu[b-gbceiy7d23]  .adm-rowmenu-btn .material-symbols-outlined { font-size: 16px !important; }

/* The thumb's content box (preview-recapture.js swaps the image inside [data-thumb-base]). It fills the
   thumb so the design's height: 100% drawings keep their size; an image positions against .lib-thumb. */
.wci-lib-thumb-base[b-gbceiy7d23] { height: 100%; }

/* An MCP session's real inputs, where the design draws placeholder rows: the rows' ink, as text. */
.wci-lib-mcp-detail[b-gbceiy7d23] {
  font-size: 0.6875rem; line-height: 1.35; color: var(--text-muted);
  display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

/* A captured preview image fills the thumb (the design draws a mock chart there). */
.wci-lib-thumb-img[b-gbceiy7d23] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.wci-lib-thumb-glyph[b-gbceiy7d23] {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--text-subtle);
}
.wci-lib-thumb-glyph .material-symbols-outlined[b-gbceiy7d23] { font-size: 34px !important; opacity: .6; }

/* Optional hover layer over the card body (a reference's abstract). */
.wci-lib-hover[b-gbceiy7d23] {
  position: absolute; inset: 0; z-index: 2; overflow-y: auto; padding: 12px 14px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
.wci-lib-card:hover .wci-lib-hover[b-gbceiy7d23] { opacity: 1; pointer-events: auto; }
/* Keyboard users reach it too: the layer shows while the card has keyboard focus (focus-visible, so a mouse click
   that focuses the card does not flash it), and stays while the layer itself has focus (Tab moves into a long
   takeaway or abstract, which then scrolls with the arrow and page keys). */
.lib-card:focus-visible .wci-lib-hover[b-gbceiy7d23],
.wci-lib-hover:focus-within[b-gbceiy7d23], .wci-lib-hover:focus[b-gbceiy7d23] { opacity: 1; pointer-events: auto; }

/* The card is always an anchor; one with no href (no Href) is not a link, so it does not take the design's link
   hover lift. It keeps the focus ring when it is focusable (a hover layer or a menu to reach). */
a.lib-card:not([href]):hover[b-gbceiy7d23] { transform: none; box-shadow: var(--shadow-1); border-color: var(--border); }
a.lib-card:not([href]):focus-visible[b-gbceiy7d23] { outline: 2px solid var(--primary); outline-offset: 2px; }

/* The MCP pill's text truncates with an ellipsis (an inline-flex pill does not pass text-overflow to its text). */
.wci-lib-mcp-name[b-gbceiy7d23] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* preview-recapture.js's layer: empty (and hidden) until a retake puts an image in it, then it covers the drawing or the
   old preview, under the type badge. Blazor never renders its children, so the swap cannot strand tracked markup. */
.wci-lib-thumb-swap[b-gbceiy7d23] { position: absolute; inset: 0; z-index: 1; }
.wci-lib-thumb-swap:empty[b-gbceiy7d23] { display: none; }
/* ::deep: the image is the script's, so it carries no scope attribute. */
.wci-lib-thumb-swap[b-gbceiy7d23]  img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* The host's thumb controls (the retake camera and its spinner) sit beside the anchor, over the thumb's 122px. The
   layer lets clicks through to the card except on its own controls. */
.wci-lib-thumb-overlay[b-gbceiy7d23] { position: absolute; top: 0; left: 0; right: 0; height: 122px; z-index: 3; pointer-events: none; border-radius: 14px 14px 0 0; overflow: hidden; }
.wci-lib-thumb-overlay[b-gbceiy7d23]  > * { pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
  .lib-card[b-gbceiy7d23], a.lib-card:hover[b-gbceiy7d23], .lib-card.lib-drop-target[b-gbceiy7d23] { transition: none; transform: none; }
  .wci-lib-hover[b-gbceiy7d23] { transition: none; }
}
/* /Components/DesignSystem/WciLifecycleBanner.razor.rz.scp.css */
/* ===================================================================
   WCI component: Product lifecycle banner (WciLifecycleBanner)
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo:
     /Users/kevinjones/src/wc/ip-b2b/pages/wise.css
       lines 141 + 147-149  the button glyph's filled variation
       lines 151-156        locked (read-out) dots
       lines 26306-26421    .nfp-ins-next and its head, eyebrow, dots, body,
                            title, sentence, buttons, --soft and actions
                            stack (the .nfp-sp-media / .nfp-sp--flip
                            placements inside the design's product sheet
                            and the unused .nfp-ins-next-ic icon are not
                            ported: no host places the banner there)
     Catalog card: js/all-modules-flow.js ~4721 "Product lifecycle banner".
   Local checkout read 2026-10-07.
   Rule 10: the root's margin-left / margin-right: auto (the design centres
   the 500px card in its drawer) is dropped; a host centres it with
   CssClass="mx-auto".
   Class names are kept IDENTICAL to wise.css. Consumes tokens from
   wwwroot/css/wci/wci-tokens.css. html.dark rules are ported as-is.
   =================================================================== */

.nfp-ins-next[b-sxg8tyc7d3] {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 10px; align-items: start; justify-items: stretch;
  width: 100%; max-width: 500px;
  box-sizing: border-box;
  padding: 16px 18px; border-radius: 16px;
  background: var(--primary-soft); border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
}
.nfp-ins-next-dots[b-sxg8tyc7d3] {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: center;
  gap: 7px; padding: 0 0 2px; margin: 0;
}
.nfp-ins-dot[b-sxg8tyc7d3] {
  width: 7px; height: 7px; padding: 0; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--primary) 38%, var(--border));
  background: transparent; box-shadow: none;
  cursor: pointer; appearance: none; -webkit-appearance: none;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, width 0.15s ease, height 0.15s ease;
}
.nfp-ins-dot.is-done[b-sxg8tyc7d3] {
  background: color-mix(in srgb, var(--primary) 55%, transparent);
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
}
.nfp-ins-dot.is-current[b-sxg8tyc7d3] {
  width: 9px; height: 9px;
  background: var(--primary); border-color: var(--primary);
}
.nfp-ins-dot:hover[b-sxg8tyc7d3] { transform: scale(1.2); }
.nfp-ins-dot:focus-visible[b-sxg8tyc7d3] { outline: 2px solid var(--primary); outline-offset: 3px; }
html.dark .nfp-ins-dot[b-sxg8tyc7d3] {
  border-color: color-mix(in srgb, var(--primary-bright, var(--primary)) 45%, var(--border));
}
html.dark .nfp-ins-dot.is-done[b-sxg8tyc7d3] {
  background: color-mix(in srgb, var(--primary-bright, var(--primary)) 50%, transparent);
  border-color: color-mix(in srgb, var(--primary-bright, var(--primary)) 50%, transparent);
}
html.dark .nfp-ins-dot.is-current[b-sxg8tyc7d3] {
  background: var(--primary-bright, var(--primary));
  border-color: var(--primary-bright, var(--primary));
}

/* A locked step dot is a state read-out, not a control. */
.nfp-ins-next-dots:has(.nfp-ins-dot.is-locked) .nfp-ins-dot[b-sxg8tyc7d3] {
  pointer-events: none;
  cursor: default;
}
.nfp-ins-next-dots:has(.nfp-ins-dot.is-locked) .nfp-ins-dot:hover[b-sxg8tyc7d3] { transform: none; }

.nfp-ins-next-body[b-sxg8tyc7d3] { grid-column: 1; min-width: 0; text-align: center; }
.nfp-ins-next-title[b-sxg8tyc7d3] { font-family: 'WISE Digits', 'DM Sans', system-ui, sans-serif; font-size: 1.15rem; font-weight: 700; color: var(--text); line-height: 1.2; text-align: center; }
.nfp-ins-next-desc[b-sxg8tyc7d3] { font-size: 0.8rem; color: var(--text-muted); line-height: 1.45; margin-top: 3px; max-width: none; text-align: center; }
.nfp-ins-next-btn[b-sxg8tyc7d3] {
  grid-column: 1 / -1; margin: 0; width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer;
  border: none; border-radius: 999px; padding: 10px 18px;
  font-family: 'WISE Digits', 'DM Sans', system-ui, sans-serif; font-size: 0.82rem; font-weight: 700;
  background: var(--primary); color: #fff; text-decoration: none; transition: filter 0.15s;
  appearance: none; -webkit-appearance: none;
  white-space: normal; text-align: center; line-height: 1.25;
  height: auto; min-height: 40px;
  box-sizing: border-box;
}
.nfp-ins-next-btn:hover[b-sxg8tyc7d3] { filter: brightness(1.07); text-decoration: none; }
.nfp-ins-next-btn .material-symbols-outlined[b-sxg8tyc7d3] {
  font-size: 18px !important;
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.nfp-ins-next-head[b-sxg8tyc7d3] {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 100%;
}
.nfp-ins-next-eyebrow[b-sxg8tyc7d3] {
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--text-subtle); line-height: 1;
}
/* Reports card stacks its download buttons where a single CTA normally sits. */
.nfp-ins-next-actions[b-sxg8tyc7d3] {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; gap: 8px; width: 100%;
}
.nfp-ins-next-btn--soft[b-sxg8tyc7d3] {
  background: var(--primary-soft) !important;
  color: var(--primary-ink, var(--primary)) !important;
}
.nfp-ins-next-btn--soft:hover[b-sxg8tyc7d3] { filter: none; background: color-mix(in srgb, var(--primary) 16%, var(--surface)) !important; }
html.dark .nfp-ins-next-btn--soft[b-sxg8tyc7d3] { color: var(--primary-bright, var(--primary)) !important; }

/* ===================== APP-OWNED ADDITIONS ==========================
   The single button's wrapper, a focus ring and reduced motion. Tokens only. */

/* The design writes a single button straight into the card's grid; the component keeps one loop for one button or
   many, so a lone button's wrapper draws no box and the button stays the grid's child. */
.wci-lcb-one[b-sxg8tyc7d3] { display: contents; }

/* A busy page disables the buttons in place rather than removing them, so the card keeps its size. */
.nfp-ins-next-btn:disabled[b-sxg8tyc7d3] { opacity: 0.55; cursor: not-allowed; filter: none; }

.nfp-ins-next-btn:focus-visible[b-sxg8tyc7d3] {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .nfp-ins-dot[b-sxg8tyc7d3],
  .nfp-ins-next-btn[b-sxg8tyc7d3] { transition: none; }
  .nfp-ins-dot:hover[b-sxg8tyc7d3] { transform: none; }
}
/* /Components/DesignSystem/WciMenuPopover.razor.rz.scp.css */
/* ===================================================================
   WCI component: Menu popover shell (WciMenuPopover)
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo:
     /Users/kevinjones/src/wc/ip-b2b/pages/wise.css
       lines 2685-2704    .wise-popover and its open state
       lines 2775-2779    html.dark .wise-popover
   NOTE: that checkout is not on every machine. These line numbers are
   from the revision the prototype host serves (fetched 2026-09-23,
   http://3.17.180.155:4144/pages/wise.css), which is AHEAD of the
   revision WciStatusChip / WciStatTile were cut from, so ranges in the
   older headers do not line up with this file.
   Class names are kept IDENTICAL to wise.css so a future re-port is a
   section diff. Consumes tokens from wwwroot/css/wci/wci-tokens.css.
   The html.dark rules are ported as-is; they are inert until the app
   grows a theme toggle.
   =================================================================== */

/* ===== Avatar / user-menu popover (matches ai-chat.html) =====
   Used by the MC profile chip in the top bar to surface profile actions.
   Text-size and theme controls live in the Appearance popover (crossword icon). */
.wise-popover[b-zvk6y6o1mg] {
  position: fixed;
  min-width: 240px;
  max-width: 320px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  z-index: 9999;
  overflow: hidden;
  padding: 6px 0;
  transform: translateY(-6px);
  opacity: 0;
  pointer-events: none;
  transition: transform .2s ease, opacity .18s ease;
}
.wise-popover.open[b-zvk6y6o1mg] { transform: translateY(0); opacity: 1; pointer-events: auto; }

html.dark .wise-popover[b-zvk6y6o1mg] {
  background: linear-gradient(155deg, #1A2339 0%, #1A2339 60%, #1A2339 100%);
  border-color: rgba(37, 80, 124, 0.22);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

/* ===================== APP-OWNED ADDITIONS ==========================
   The card is rendered only while open, so .open lands on the same render
   that creates it and the entry transition is effectively skipped. That is
   deliberate: keeping a fixed, invisible card in the DOM of every page to
   win an animation is the worse trade.

   Position is written inline by window.wciMenu (wwwroot/js/wci/wci-menu.js),
   which right-aligns to the trigger, clamps to the viewport, flips above when
   there is no room below, and compensates for an ancestor transform. This
   class only parks the card off screen until that call lands. */

/* The wrapper keeps the trigger and the card in one containment box, which is what the
   outside-click listener measures against. */
.wci-menu-popover[b-zvk6y6o1mg] {
    position: relative;
}

.wise-popover.wci-menu-popover-anchored[b-zvk6y6o1mg] {
    top: -9999px;
    left: -9999px;
}

@media (prefers-reduced-motion: reduce) {
    .wise-popover[b-zvk6y6o1mg] { transition: none; }
}
/* /Components/DesignSystem/WciMenuPopoverDivider.razor.rz.scp.css */
/* ===================================================================
   WCI component: Menu popover divider (WciMenuPopoverDivider)
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo:
     /Users/kevinjones/src/wc/ip-b2b/pages/wise.css
       lines 3017-3018    .wise-popover-divider
   NOTE: that checkout is not on every machine. These line numbers are
   from the revision the prototype host serves (fetched 2026-09-23,
   http://3.17.180.155:4144/pages/wise.css), which is AHEAD of the
   revision WciStatusChip / WciStatTile were cut from, so ranges in the
   older headers do not line up with this file.
   Class names are kept IDENTICAL to wise.css so a future re-port is a
   section diff. Consumes tokens from wwwroot/css/wci/wci-tokens.css.
   The html.dark rules are ported as-is; they are inert until the app
   grows a theme toggle.
   =================================================================== */

.wise-popover-divider[b-l4hjo2i0li] { height: 1px; background: var(--border); margin: 4px 0; }
html.dark .wise-popover-divider[b-l4hjo2i0li] { background: rgba(255,255,255,0.08); }
/* /Components/DesignSystem/WciMenuPopoverHeader.razor.rz.scp.css */
/* ===================================================================
   WCI component: Menu popover header (WciMenuPopoverHeader)
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo:
     /Users/kevinjones/src/wc/ip-b2b/pages/wise.css
       lines 2780-2787    .wise-popover-header
   NOTE: that checkout is not on every machine. These line numbers are
   from the revision the prototype host serves (fetched 2026-09-23,
   http://3.17.180.155:4144/pages/wise.css), which is AHEAD of the
   revision WciStatusChip / WciStatTile were cut from, so ranges in the
   older headers do not line up with this file.
   Class names are kept IDENTICAL to wise.css so a future re-port is a
   section diff. Consumes tokens from wwwroot/css/wci/wci-tokens.css.
   The html.dark rules are ported as-is; they are inert until the app
   grows a theme toggle.
   =================================================================== */

.wise-popover-header[b-1n42f2fhpy] {
  padding: 10px 14px 6px;
  font-size: 11px;
  letter-spacing: .12em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* /Components/DesignSystem/WciMenuPopoverItem.razor.rz.scp.css */
/* ===================================================================
   WCI component: Menu popover row (WciMenuPopoverItem)
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo:
     /Users/kevinjones/src/wc/ip-b2b/pages/wise.css
       lines 2788-2887    .wise-popover-item, its states, badge and two-line copy
       lines 2901-2924    row icons, the toggle row and its switch glyph
       lines 2935-2939    the is-on green switch states
   NOTE: that checkout is not on every machine. These line numbers are
   from the revision the prototype host serves (fetched 2026-09-23,
   http://3.17.180.155:4144/pages/wise.css), which is AHEAD of the
   revision WciStatusChip / WciStatTile were cut from, so ranges in the
   older headers do not line up with this file.
   Class names are kept IDENTICAL to wise.css so a future re-port is a
   section diff. Consumes tokens from wwwroot/css/wci/wci-tokens.css.
   The html.dark rules are ported as-is; they are inert until the app
   grows a theme toggle.
   =================================================================== */

.wise-popover-item[b-diaicuycty] {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 6px;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-ui);
  color: var(--text);
  cursor: pointer;
  background: none;
  border: 0;
  width: calc(100% - 12px);
  text-align: left;
  font-family: inherit;
  transition: background-color .15s ease, color .15s ease;
}
.wise-popover-item:hover[b-diaicuycty],
.wise-popover-item.is-active[b-diaicuycty] {
  background: var(--primary-soft);
  color: var(--primary);
}
html.dark .wise-popover-item:hover[b-diaicuycty] {
  background: rgba(255,255,255,0.06);
  color: var(--text);
}
html.dark .wise-popover-item.is-active[b-diaicuycty] {
  background: rgba(37, 80, 124, 0.22);
  color: var(--primary-bright);
}
.wise-popover-item.danger[b-diaicuycty] { color: var(--sec-red-text); }
/* Coming-soon row (e.g. Invoices & Downloads) — visible but inert, with a
   trailing lock glyph. Doesn't highlight on hover and can't be actioned. */
.wise-popover-item.is-locked[b-diaicuycty] {
  color: var(--text-subtle);
  cursor: default;
}
.wise-popover-item.is-locked:hover[b-diaicuycty] { background: none; color: var(--text-subtle); }
html.dark .wise-popover-item.is-locked:hover[b-diaicuycty] { background: none; color: var(--text-subtle); }
.wise-popover-item.is-locked:hover .material-symbols-outlined[b-diaicuycty] { color: var(--text-subtle); }
.wise-popover-item .wise-popover-lock[b-diaicuycty] { margin-left: auto; font-size: 15px; opacity: 0.7; }
/* Rows that are real links (e.g. Appearance → Accessibility review) keep the
   row look and gain a trailing "leaves this page" glyph. */
a.wise-popover-item[b-diaicuycty] { text-decoration: none; }
.wise-popover-item .wise-popover-ext[b-diaicuycty] { margin-left: auto; font-size: 14px; opacity: 0.65; }
.wise-popover-item:hover .wise-popover-ext[b-diaicuycty] { opacity: 1; }
/* Pink "Admin" badge for rows that lead to an admin-only surface (e.g. the
   Accessibility review). It owns the right-push, so a trailing "leaves this
   page" glyph trails it with a small gap instead of its own auto-margin.
   Drawn at double size and zoomed to half: a browser minimum font size
   clamps a literal 7px up to its floor, but not a zoomed-down label. */
.wise-popover-badge[b-diaicuycty] {
  margin-left: auto;
  flex-shrink: 0;
  align-self: center;
  zoom: 0.5;
  padding: 0 7px;
  border-radius: 6px;
  background: rgb(219, 39, 119);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.25;
  text-transform: uppercase;
}
.wise-popover-item .wise-popover-badge + .wise-popover-ext[b-diaicuycty] { margin-left: 6px; }
.wise-popover-item .wise-popover-badge + .wise-popover-lock[b-diaicuycty] { margin-left: 6px; }
/* Two-line Admin rows: title on top, a 3–5 word hint underneath. The wrap
   claims leftover width so the badge (and any trailing glyph) stay pinned right.
   Mirrors the chat ⋯ menu's .topbar-menu-copy / .topbar-menu-desc. */
.wise-popover-copy[b-diaicuycty] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
}
.wise-popover-title[b-diaicuycty] { display: block; line-height: 1.2; }
.wise-popover-desc[b-diaicuycty] {
  display: block;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.wise-popover-item:hover .wise-popover-desc[b-diaicuycty],
.wise-popover-item.is-on .wise-popover-desc[b-diaicuycty],
html.dark .wise-popover-desc[b-diaicuycty],
html.dark .wise-popover-item:hover .wise-popover-desc[b-diaicuycty] {
  color: var(--text-muted);
}

.wise-popover-item .material-symbols-outlined[b-diaicuycty] { font-size: 17px; color: var(--text-subtle); }
.wise-popover-item:hover .material-symbols-outlined[b-diaicuycty],
.wise-popover-item.is-active .material-symbols-outlined[b-diaicuycty] { color: var(--primary-ink, var(--primary)); }
html.dark .wise-popover-item.is-active .material-symbols-outlined[b-diaicuycty] { color: var(--primary-bright); }
.wise-popover-item.danger .material-symbols-outlined[b-diaicuycty] { color: var(--sec-red-text); }
/* Binary on/off settings: a small semantic icon to the left of the label,
   and the Material Symbols switch on the right. Green = on, gray = off. The
   row itself never takes the active background, so state reads from the switch. */
.wise-popover-item.wise-toggle-item.is-active[b-diaicuycty] { background: none; color: var(--text); }
.wise-popover-item.wise-toggle-item:hover[b-diaicuycty] { background: var(--primary-soft); color: var(--primary); }
html.dark .wise-popover-item.wise-toggle-item:hover[b-diaicuycty] { background: rgba(255,255,255,0.06); color: var(--text); }
.wise-popover-item .wise-toggle-ico[b-diaicuycty] {
  flex-shrink: 0;
  margin-left: auto;
  font-size: 22px;
  color: var(--text-subtle);
  transition: color .15s ease;
}
.wise-popover-item .wise-row-icon[b-diaicuycty] {
  flex-shrink: 0;
  font-size: 17px;
  color: var(--text-subtle);
}
.wise-toggle-item .wise-popover-lock[b-diaicuycty] { margin-left: 0; }

.wise-popover-item.is-on .wise-toggle-ico[b-diaicuycty],
.wise-popover-item:hover.is-on .wise-toggle-ico[b-diaicuycty] { color: var(--sec-green); }
.wise-popover-item:hover .wise-toggle-ico[b-diaicuycty] { color: var(--text-subtle); }
html.dark .wise-popover-item.is-on .wise-toggle-ico[b-diaicuycty],
html.dark .wise-popover-item:hover.is-on .wise-toggle-ico[b-diaicuycty] { color: var(--sec-green); }

/* ===================== APP-OWNED ADDITIONS ==========================
   Focus ring, live disabled state and reduced motion. Tokens only. */

.wise-popover-item:focus-visible[b-diaicuycty] {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.wise-popover-item:disabled[b-diaicuycty] {
    opacity: 0.5;
    cursor: default;
}

.wise-popover-item:disabled:hover[b-diaicuycty] {
    background: none;
    color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
    .wise-popover-item[b-diaicuycty],
    .wise-popover-item .wise-toggle-ico[b-diaicuycty] { transition: none; }
}
/* /Components/DesignSystem/WciModal.razor.rz.scp.css */
/* ===================================================================
   WCI component: Modal dialog (WciModal), INTEL-388
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo, revision served by the
   prototype host on 2026-09-25 (http://3.17.180.155:4144):
     pages/wise.css
       lines 890-1122     "WISE modal: one overlay language": scrim,
                          .wise-modal card, html.dark, full-bleed sheet
                          inside a scrim, --panel centred card, head,
                          titles, eyebrow, title, sub, close,
                          body, foot, foot-right
     js/all-modules-flow.js
       lines 5690-5718    module "Modal dialog" (markup template)
   Class names are kept IDENTICAL to wise.css.

   wise.css lists every former dialog family (.dash-modal, .vf-modal,
   .adm-modal, .wmod-modal) in these selector lists as an alias. Only the
   .wise-modal selectors are kept here, as WciButton keeps only .wise-btn:
   the aliases exist so leftover prototype markup still paints. The alias-
   only lines (.adm-modal-head's block padding, .adm-modal-x / .vf-modal-x
   absolute placement, .vf-modal-text, .wmod-modal-sub, .wmod-modal-actions)
   drop out with them. .wise-modal-actions (1114-1121) and its ghost rule
   (883-888) are not ported: this component's footer is .wise-modal-foot.

   Radzen DialogService dialogs paint the same language from the global
   wwwroot/css/wci/wci-dialog.css, which cites the same lines.

   Scoped CSS: every element named here is this component's own markup.
   Requires wwwroot/css/wci/wci-tokens.css (global).
   =================================================================== */

.wise-modal-scrim[b-dxn8xxu8gm] {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  background: rgba(15, 26, 33, 0.48);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.wise-modal-scrim.is-open[b-dxn8xxu8gm] {
  opacity: 1;
  pointer-events: auto;
}

.wise-modal[b-dxn8xxu8gm] {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  box-shadow: var(--shadow-card, 0 24px 60px rgba(0, 0, 0, 0.28));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(10px) scale(0.98);
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
}
html.dark .wise-modal[b-dxn8xxu8gm] {
  background: #14242f;
  border-color: rgba(255, 255, 255, 0.08);
}

/* Hosted in a scrim → full-bleed sheet. */
.wise-modal-scrim .wise-modal[b-dxn8xxu8gm] {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  min-height: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: translateY(8px);
}
.wise-modal-scrim.is-open .wise-modal[b-dxn8xxu8gm] {
  transform: none;
}

/* Centered card (photo picker, catalog specimen, verify confirm). */
.wise-modal-scrim--panel[b-dxn8xxu8gm] {
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.wise-modal-scrim--panel .wise-modal[b-dxn8xxu8gm] {
  width: min(520px, 100%);
  height: auto;
  max-width: 520px;
  max-height: calc(100vh - 48px);
  border-radius: 18px;
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-card, 0 24px 60px rgba(0, 0, 0, 0.28));
}
.wise-modal-scrim--panel .wise-modal-body[b-dxn8xxu8gm] {
  flex: 0 1 auto;
}

.wise-modal-head[b-dxn8xxu8gm] {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  padding: 20px 22px 0;
}
.wise-modal-titles[b-dxn8xxu8gm] { min-width: 0; }
.wise-modal-eyebrow[b-dxn8xxu8gm] {
  font-size: var(--fs-label, 0.68rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
}
html.dark .wise-modal-eyebrow[b-dxn8xxu8gm] { color: var(--primary-bright); }
.wise-modal-title[b-dxn8xxu8gm] {
  margin: 4px 0 0;
  font-family: 'WISE Digits', 'DM Sans', system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}
.wise-modal-sub[b-dxn8xxu8gm] {
  margin: 6px 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.wise-modal-close[b-dxn8xxu8gm] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-subtle);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.wise-modal-close:hover[b-dxn8xxu8gm] { background: var(--surface-2); color: var(--text); }
html.dark .wise-modal-close:hover[b-dxn8xxu8gm] { background: rgba(255, 255, 255, 0.06); }
.wise-modal-close .material-symbols-outlined[b-dxn8xxu8gm] { font-size: 20px; }

.wise-modal-body[b-dxn8xxu8gm] {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 22px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.wise-modal-scrim .wise-modal-body[b-dxn8xxu8gm] { flex: 1; min-height: 0; overflow-y: auto; }

.wise-modal-foot[b-dxn8xxu8gm] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  padding: 16px 22px;
  border-top: 1px solid var(--border);
}
.wise-modal-foot-right[b-dxn8xxu8gm] { display: flex; align-items: center; gap: 10px; }
html.dark .wise-modal-foot[b-dxn8xxu8gm] { border-color: rgba(255, 255, 255, 0.08); }

/* ============================ APP-OWNED ADDITIONS ============================ */

/* Stacking. The design's 2200 clears its own shell only. The app's fixed chrome goes far higher:
   RightDrawerShell 8000, the Explain drawer 8400 / 8500, the ingredient review stepper 9000, the
   old ModalShell 9999, the Food Browser's filter fly-out 10059 / 10060. A dialog must clear all of
   them. Radzen portals its popups and tooltips to <body> with an inline z-index of 2000, so the
   popup layer is lifted too (wci-dialog.css), or a dropdown inside a dialog would open behind it.
   The app's order, lowest first:
     10100        WCI overlays (this, WciBottomSheet, WciImageLightbox)
     10200/10201  Radzen dialog mask / dialog (wci-dialog.css), so a DialogService.Confirm raised
                  from inside a WciModal lands on top of it
     10300        Radzen popups and tooltips (wci-dialog.css, !important over the inline 2000)
     10400        toasts (WciToastHost)
   The AI chat drawer (99998) stays above all of it; an overlay opened from inside the drawer is in
   the drawer's own stacking context (and, because the drawer carries a transform, its box). */
.wise-modal-scrim[b-dxn8xxu8gm] { z-index: 10100; }

/* The scrim-click target: a layer under the card (see WciModal.razor). */
.wci-modal-backdrop[b-dxn8xxu8gm] {
  position: absolute;
  inset: 0;
}

/* Blazor renders the dialog already open, so the design's .is-open transitions have no "before"
   state to run from. The same fade and rise run as keyframes instead. Fill mode is backwards, not
   both: a transform animation still in effect after it ends makes the card the containing block for
   position: fixed descendants, which would pin a dialog opened from inside this one's body (the
   new-brand confirm inside Add / Edit Organization) to this card. The .is-open rules hold the end. */
.wise-modal-scrim.is-open[b-dxn8xxu8gm] { animation: wciModalScrimIn-b-dxn8xxu8gm 0.2s ease backwards; }
.wise-modal-scrim--panel.is-open .wise-modal[b-dxn8xxu8gm] { animation: wciModalCardIn-b-dxn8xxu8gm 0.22s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
.wise-modal-scrim.is-open:not(.wise-modal-scrim--panel) .wise-modal[b-dxn8xxu8gm] { animation: wciModalSheetIn-b-dxn8xxu8gm 0.22s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
@keyframes wciModalScrimIn-b-dxn8xxu8gm { from { opacity: 0; } to { opacity: 1; } }
@keyframes wciModalCardIn-b-dxn8xxu8gm { from { transform: translateY(10px) scale(0.98); } to { transform: none; } }
@keyframes wciModalSheetIn-b-dxn8xxu8gm { from { transform: translateY(8px); } to { transform: none; } }

/* Width. The design's card is 520px; the app's dialogs run from 420px to a wide editor, so a host
   passes Width and it lands here as a custom property. Unset, both lines resolve to the design's. */
.wise-modal-scrim--panel .wise-modal[b-dxn8xxu8gm] {
  width: min(var(--wci-modal-width, 520px), 100%);
  max-width: var(--wci-modal-width, 520px);
}

/* The card sits above the backdrop layer. */
.wise-modal-scrim .wise-modal[b-dxn8xxu8gm] { z-index: 1; }

/* Focus lands on the dialog itself when nothing in it asks for focus; that is a programmatic
   landing point, not a control, so it draws no ring. Controls inside keep theirs. */
.wise-modal:focus[b-dxn8xxu8gm] { outline: none; }
.wise-modal-close:focus-visible[b-dxn8xxu8gm] {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* The head's trailing group: host actions, then the close button, top-aligned with the title. */
.wci-modal-head-trail[b-dxn8xxu8gm] { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* The footer's left slot collapses when empty, so a lone right group still sits right. */
.wci-modal-foot-left[b-dxn8xxu8gm] { display: flex; align-items: center; gap: 10px; min-width: 0; }

/* A phone: the card keeps a 16px gutter rather than the design's 24px. */
@media (max-width: 480px) {
  .wise-modal-scrim--panel[b-dxn8xxu8gm] { padding: 16px; }
  .wise-modal-scrim--panel .wise-modal[b-dxn8xxu8gm] { max-height: calc(100vh - 32px); }
  .wise-modal-foot[b-dxn8xxu8gm] { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .wise-modal-scrim.is-open[b-dxn8xxu8gm],
  .wise-modal-scrim.is-open .wise-modal[b-dxn8xxu8gm] { animation: none; transition: none; }
}
/* /Components/DesignSystem/WciNavItem.razor.rz.scp.css */
/* ===================================================================
   WCI component: Left-nav item (WciNavItem), INTEL-389
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo, revision served by the
   prototype host on 2026-09-24 (http://3.17.180.155:4144/pages/wise.css,
   Last-Modified 2026-09-24 05:30:33 GMT):
     pages/wise.css
       lines 4649-4698    .menu-nav-item, hover / .is-active / .is-open, .menu-nav-icon
       lines 4699-4705    .menu-nav-label
       lines 4715-4741    .menu-nav-locked, .menu-nav-lock (and its mp-rail hide)
       lines 4758-4765    .menu-nav-chevron
       lines 4766-4772    .menu-nav-group, its open gap (a row with child rows)
       lines 4782-4829    .menu-nav-children track, the dashed spine,
                          the closed zero-footprint rules
       lines 4773-4776    the open group's chevron turn
       lines 4830-4867    .menu-nav-subitem, .menu-nav-subicon
       lines 4869-4900    html.dark rows, icons, subitems
       lines 5436-5473    always-on icon discs on the labelled rail
       lines 5475-5511    rail: disc only on the lit row
       lines 5863         rail hides the label
       lines 6028-6036    rail row box (32px)
     js/all-modules-flow.js
       lines 5300-5318    module "Left-nav item"
   Class names are kept IDENTICAL to wise.css. What is NOT verbatim:
     - The design scopes the rail to `#menu-panel.mp-rail` and the
       labelled rail to `#menu-panel:not(.mp-rail):not(.mp-pivot)
       :not(.minimal-ui) .menu-nav`. The app has no #menu-panel, so the
       row carries the state itself: those selectors are rewritten onto
       `.wci-nav-rail` and `:not(.wci-nav-rail)`. The pivot and Minimal UI
       layouts are not ported (the app has neither).
     - The open group's chevron turn (4773-4776) keys off the toggle's own
       `[aria-expanded="true"]` rather than the parent's
       `.menu-nav-group[data-open="true"]`, so the row does not depend on
       another component's markup.
     - The open group's wash (4777-4779, and its html.dark 4878-4882) is
       NOT ported. The app keeps a group open after the member leaves
       it, so the wash would light several rows at once as if each were
       the current page. Only the group holding the current page is lit
       (a group row's Active, as the app's rail always did).
     - The rail row's `margin: 1px auto` (6035) is dropped: a component
       root never sets a margin (REGISTRY rule 10). The host centres the
       rail column.
     - The demo-only `.is-hover` (21593) is not ported; :hover is real.
     - The locked rule's `.menu-nav-upgrade` selectors (the upgrade
       card, a separate module) are left out.
     - The children track's `.menu-nav-agents-inner` selectors (the
       agents list, a separate module) are left out.
   Requires wwwroot/css/wci/wci-tokens.css.
   =================================================================== */

/* ---- Row (wise.css 4649-4698) ---- */
.menu-nav-item[b-sfj9vohpu3] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px;
  min-height: 36px;
  box-sizing: border-box;
  border-radius: var(--radius-pill);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  font-size: var(--fs-ui);
  font-weight: 600;
  letter-spacing: 0.01em;
  /* Beat Tailwind Preflight's body line-height so icon rows stay 36px tall on
     pages that load the CDN (product-portfolio / product-comparison). */
  line-height: normal;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.menu-nav-item:hover[b-sfj9vohpu3],
.menu-nav-item.is-active[b-sfj9vohpu3],
.menu-nav-item.is-open[b-sfj9vohpu3] {
  background: var(--primary-soft);
  color: var(--primary);
}
.menu-nav-icon[b-sfj9vohpu3] {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--primary-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent);
  transition: background-color 0.18s ease, box-shadow 0.18s ease;
}
.menu-nav-icon .material-symbols-outlined[b-sfj9vohpu3] {
  font-size: 16px !important;
  color: var(--primary);
  line-height: 1 !important;
}

/* ---- Label (wise.css 4699-4705) ---- */
.menu-nav-label[b-sfj9vohpu3] {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Locked (wise.css 4715-4741) ---- */
/* Locked nav row — visible but not a link. Muted, no pointer, with a small
   trailing lock glyph. Applies to top-level items, nested subitems, and the
   upgrade card whose target page hasn't been built yet. */
.menu-nav-item.menu-nav-locked[b-sfj9vohpu3],
.menu-nav-subitem.menu-nav-locked[b-sfj9vohpu3] {
  cursor: default;
  color: var(--text-muted);
}
.menu-nav-item.menu-nav-locked:hover[b-sfj9vohpu3],
.menu-nav-subitem.menu-nav-locked:hover[b-sfj9vohpu3] {
  background: transparent;
  color: var(--text-muted);
}
.menu-nav-lock[b-sfj9vohpu3] {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  color: var(--text-subtle, var(--text-muted));
}
.menu-nav-lock .material-symbols-outlined[b-sfj9vohpu3] {
  font-size: 15px !important;
}
.wci-nav-rail .menu-nav-lock[b-sfj9vohpu3] { display: none; }

/* ---- Chevron (wise.css 4758-4765) ---- */
.menu-nav-chevron[b-sfj9vohpu3] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-subtle);
  transition: transform 0.2s ease;
}
.menu-nav-chevron .material-symbols-outlined[b-sfj9vohpu3] { font-size: 18px !important; }

/* ---- Open group's chevron (wise.css 4773-4776, keyed off the row) ---- */
.menu-nav-toggle[aria-expanded="true"] .menu-nav-chevron[b-sfj9vohpu3] {
  transform: rotate(180deg);
  color: var(--primary);
}

/* ---- Nested row (wise.css 4830-4867) ---- */
.menu-nav-subitem[b-sfj9vohpu3] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--fs-ui);
  font-weight: 500;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.menu-nav-subitem:hover[b-sfj9vohpu3],
.menu-nav-subitem.is-active[b-sfj9vohpu3] {
  background: var(--primary-soft);
  color: var(--primary);
}
.menu-nav-subicon[b-sfj9vohpu3] {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-subtle);
}
.menu-nav-subicon .material-symbols-outlined[b-sfj9vohpu3] {
  font-size: 16px !important;
  color: inherit;
}
.menu-nav-subitem:hover .menu-nav-subicon[b-sfj9vohpu3],
.menu-nav-subitem.is-active .menu-nav-subicon[b-sfj9vohpu3] { color: var(--primary); }

/* ---- Dark (wise.css 4869-4900) ---- */
/* Dark mode — invert nav labels/icons for legibility on gradient panel chrome.
   Light mode uses primary blue accents; on dark navy those read as near-invisible. */
html.dark .menu-nav-item[b-sfj9vohpu3] { color: var(--text); }
html.dark .menu-nav-item:hover[b-sfj9vohpu3],
html.dark .menu-nav-item.is-active[b-sfj9vohpu3],
html.dark .menu-nav-item.is-open[b-sfj9vohpu3] {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
}
html.dark .menu-nav-toggle[aria-expanded="true"] .menu-nav-chevron[b-sfj9vohpu3] {
  color: var(--primary-bright);
}
html.dark .menu-nav-icon .material-symbols-outlined[b-sfj9vohpu3] { color: var(--primary-bright); }
html.dark .menu-nav-subitem[b-sfj9vohpu3] { color: var(--text-muted); }
html.dark .menu-nav-subicon[b-sfj9vohpu3] { color: var(--text-muted); }
html.dark .menu-nav-subitem:hover[b-sfj9vohpu3] {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
}
html.dark .menu-nav-subitem:hover .menu-nav-subicon[b-sfj9vohpu3] { color: var(--text); }
html.dark .menu-nav-subitem.is-active[b-sfj9vohpu3] {
  color: var(--text);
  background: rgba(37, 80, 124, 0.22);
}
html.dark .menu-nav-subitem.is-active .menu-nav-subicon[b-sfj9vohpu3] { color: var(--primary-bright); }

/* ---- Always-on icon discs, labelled rail (wise.css 5436-5473) ---- */
/* Top-level nav rows carry a circular disc at rest — Chat, Library, Codes,
   and the rest of the labelled rail. Nested children stay a bare glyph.
   The active/hover row still gets the pill wash; the disc does not wait
   for that highlight. Collapsed rail keeps the one-lit-item treatment so a
   column of circles does not appear. */
.menu-nav-item:not(.wci-nav-rail) .menu-nav-icon[b-sfj9vohpu3] {
  background: color-mix(in srgb, var(--primary) 10%, var(--surface-2, var(--surface)));
  box-shadow: none;
}
.menu-nav-item:not(.wci-nav-rail) .menu-nav-icon .material-symbols-outlined[b-sfj9vohpu3] {
  color: var(--text);
  opacity: 1;
}
html.dark .menu-nav-item:not(.wci-nav-rail) .menu-nav-icon[b-sfj9vohpu3] {
  background: color-mix(in srgb, var(--primary-bright, #8B9FAF) 16%, transparent);
}
html.dark .menu-nav-item:not(.wci-nav-rail) .menu-nav-icon .material-symbols-outlined[b-sfj9vohpu3] {
  color: var(--text);
  opacity: 1;
}
.menu-nav-item:not(.wci-nav-rail):not(.menu-nav-locked):hover .menu-nav-icon[b-sfj9vohpu3],
.menu-nav-item:not(.wci-nav-rail).is-active .menu-nav-icon[b-sfj9vohpu3],
.menu-nav-item:not(.wci-nav-rail).is-open .menu-nav-icon[b-sfj9vohpu3] {
  background: color-mix(in srgb, var(--primary) 16%, var(--surface-2, var(--surface)));
}
.menu-nav-item:not(.wci-nav-rail):not(.menu-nav-locked):hover .menu-nav-icon .material-symbols-outlined[b-sfj9vohpu3],
.menu-nav-item:not(.wci-nav-rail).is-active .menu-nav-icon .material-symbols-outlined[b-sfj9vohpu3],
.menu-nav-item:not(.wci-nav-rail).is-open .menu-nav-icon .material-symbols-outlined[b-sfj9vohpu3] {
  color: var(--primary);
  opacity: 1;
}
html.dark .menu-nav-item:not(.wci-nav-rail):not(.menu-nav-locked):hover .menu-nav-icon .material-symbols-outlined[b-sfj9vohpu3],
html.dark .menu-nav-item:not(.wci-nav-rail).is-active .menu-nav-icon .material-symbols-outlined[b-sfj9vohpu3],
html.dark .menu-nav-item:not(.wci-nav-rail).is-open .menu-nav-icon .material-symbols-outlined[b-sfj9vohpu3] {
  color: var(--primary-bright);
  opacity: 1;
}

/* ---- Collapsed rail: disc only on the lit row (wise.css 5475-5511) ---- */
/* Rail — disc only on the highlighted row, so the icon-only chrome still
   surfaces exactly one lit item. */
.wci-nav-rail .menu-nav-icon[b-sfj9vohpu3] {
  background: transparent;
  box-shadow: none;
}
.wci-nav-rail .menu-nav-icon .material-symbols-outlined[b-sfj9vohpu3],
html.dark .wci-nav-rail .menu-nav-icon .material-symbols-outlined[b-sfj9vohpu3] {
  /* Same quiet glyph as the history rail (.wch-item::before at opacity .6). */
  color: var(--text);
  opacity: 0.6;
}
.wci-nav-rail:not(.menu-nav-locked):hover .menu-nav-icon[b-sfj9vohpu3],
.wci-nav-rail.is-active .menu-nav-icon[b-sfj9vohpu3],
.wci-nav-rail.is-open .menu-nav-icon[b-sfj9vohpu3] {
  background: var(--primary-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent);
}
.wci-nav-rail:not(.menu-nav-locked):hover .menu-nav-icon .material-symbols-outlined[b-sfj9vohpu3],
.wci-nav-rail.is-active .menu-nav-icon .material-symbols-outlined[b-sfj9vohpu3],
.wci-nav-rail.is-open .menu-nav-icon .material-symbols-outlined[b-sfj9vohpu3] {
  color: var(--primary);
  opacity: 1;
}
html.dark .wci-nav-rail:not(.menu-nav-locked):hover .menu-nav-icon .material-symbols-outlined[b-sfj9vohpu3],
html.dark .wci-nav-rail.is-active .menu-nav-icon .material-symbols-outlined[b-sfj9vohpu3],
html.dark .wci-nav-rail.is-open .menu-nav-icon .material-symbols-outlined[b-sfj9vohpu3] {
  color: var(--primary-bright);
  opacity: 1;
}

/* ---- Rail row box and hidden label (wise.css 5863, 6028-6036) ---- */
.wci-nav-rail .menu-nav-label[b-sfj9vohpu3],
.wci-nav-rail .menu-nav-chevron[b-sfj9vohpu3] { display: none; }
.menu-nav-item.wci-nav-rail[b-sfj9vohpu3],
.menu-nav-subitem.wci-nav-rail[b-sfj9vohpu3] {
  justify-content: center;
  gap: 0;
  padding: 0;
  width: 32px;
  height: 32px;
  min-height: 32px;
}

/* ---- Group (wise.css 4766-4772) ---- */
.menu-nav-group[b-sfj9vohpu3] {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
}
.menu-nav-group[data-open="true"][b-sfj9vohpu3] { gap: 4px; }

/* ---- Children track (wise.css 4782-4829) ---- */
.menu-nav-children[b-sfj9vohpu3] {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.22s ease;
  /* `overflow: hidden` on the OUTER grid container (not just the inner
     element) is what guarantees the collapsed track is a true 0 px tall.
     Without this the inner div's 8 px of vertical padding + dashed
     border-left would bleed through and make every expandable row ~14 px
     taller than a plain row. */
  overflow: hidden;
}
/* Belt-and-braces fallback for browsers that ignore the `inert` attribute. */
.menu-nav-group[data-open="false"] > .menu-nav-children[b-sfj9vohpu3] {
  pointer-events: none;
  margin: 0;
  padding: 0;
  max-height: 0;
}
.menu-nav-group[data-open="true"] > .menu-nav-children[b-sfj9vohpu3] {
  grid-template-rows: 1fr;
  /* Spines reach up into the parent icon; clip only while collapsed. */
  overflow: visible;
}
.menu-nav-group[data-open="true"] > .menu-nav-children > .menu-nav-children-inner[b-sfj9vohpu3] {
  overflow: visible;
}
.menu-nav-children-inner[b-sfj9vohpu3] {
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px 0 6px 16px;
  margin-left: 16px;
  border-left: 1px dashed var(--border);
}
html.dark .menu-nav-children-inner[b-sfj9vohpu3] { border-left-color: rgba(255,255,255,0.10); }
/* Collapsed: zero footprint so nested row backgrounds cannot peek below the toggle. */
.menu-nav-group[data-open="false"] > .menu-nav-children .menu-nav-children-inner[b-sfj9vohpu3] {
  padding: 0;
  margin: 0;
  gap: 0;
  min-height: 0;
  border: none;
  visibility: hidden;
  opacity: 0;
}

/* ===================== APP-OWNED ADDITIONS ==========================
   Focus ring, the button reset a toggle row needs, and reduced motion.
   Tokens only. */

.menu-nav-item:focus-visible[b-sfj9vohpu3],
.menu-nav-subitem:focus-visible[b-sfj9vohpu3] {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

/* A toggle row is a <button>; the design's row is an <a>. Match the anchor. */
button.menu-nav-item[b-sfj9vohpu3],
button.menu-nav-subitem[b-sfj9vohpu3] {
  font-family: inherit;
  appearance: none;
}

@media (prefers-reduced-motion: reduce) {
  .menu-nav-item[b-sfj9vohpu3],
  .menu-nav-subitem[b-sfj9vohpu3],
  .menu-nav-icon[b-sfj9vohpu3],
  .menu-nav-chevron[b-sfj9vohpu3],
  .menu-nav-children[b-sfj9vohpu3] {
    transition: none;
  }
}
/* /Components/DesignSystem/WciNotificationFeed.razor.rz.scp.css */
/* ===================================================================
   WCI component: Notification rows (WciNotificationFeed), INTEL-397
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo, revision served by the
   prototype host on 2026-09-24 (http://3.17.180.155:4144/pages/wise.css,
   Last-Modified 2026-09-24 05:30:33 GMT):
     pages/wise.css
       lines 3405-3442    .notif-row, .notif-row-icon and its tones,
                          .notif-row-body / -title / -sub
       lines 3443-3447    .alerts-panel-footer
       lines 3448-3467    .notif-view-all, hover, html.dark
     js/all-modules-flow.js
       lines 5736-5750    module "Notification rows"
   Class names are kept IDENTICAL to wise.css. The design's spans stack
   the title over the sub line by being block-level inside a flex column
   it never declares (the demo's buttons lay them out); the app-owned
   block makes the body a column so a <button> row stacks them too. The
   feed's own root (.wci-notif-feed) is app-owned: the design draws the
   rows straight into its popout.
   Requires wwwroot/css/wci/wci-tokens.css.
   =================================================================== */

/* ---- Rows (wise.css 3405-3442) ---- */
/* Alerts list rows */
.notif-row[b-owep4qqy0v] {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  font-family: inherit;
  color: inherit;
  transition: background 0.15s ease;
}
.notif-row:hover[b-owep4qqy0v] { background: var(--surface-3); }
html.dark .notif-row:hover[b-owep4qqy0v] { background: rgba(255,255,255,0.05); }
.notif-row-icon[b-owep4qqy0v] {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--border);
}
html.dark .notif-row-icon[b-owep4qqy0v] { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.06); }
.notif-row-icon .material-symbols-outlined[b-owep4qqy0v] { font-size: 16px !important; }
.notif-row-icon.notif-ic-red[b-owep4qqy0v]    { color: var(--sec-red); }
.notif-row-icon.notif-ic-amber[b-owep4qqy0v]  { color: var(--ter-amber); }
.notif-row-icon.notif-ic-cyan[b-owep4qqy0v]   { color: var(--ter-cyan); }
.notif-row-icon.notif-ic-blue[b-owep4qqy0v]   { color: var(--primary-ink, var(--primary)); }
.notif-row-icon.notif-ic-green[b-owep4qqy0v]  { color: var(--sec-green); }
.notif-row-body[b-owep4qqy0v] { flex: 1; min-width: 0; }
.notif-row-title[b-owep4qqy0v] { font-size: var(--fs-ui); font-weight: 600; color: var(--text); line-height: 1.35; }
.notif-row-sub[b-owep4qqy0v] { font-size: 0.6875rem; color: var(--text-muted); margin-top: 2px; }

/* ---- Footer strip (wise.css 3443-3447) ---- */
.alerts-panel-footer[b-owep4qqy0v] {
  border-top: 1px solid var(--border);
  padding: 8px;
  flex-shrink: 0;
}

/* ---- View all pill (wise.css 3448-3467) ---- */
.notif-view-all[b-owep4qqy0v] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  font-size: var(--fs-ui);
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9999px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}
.notif-view-all:hover[b-owep4qqy0v] { background: var(--primary-soft); color: var(--primary-ink, var(--primary)); border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); }
.notif-view-all .material-symbols-outlined[b-owep4qqy0v] { font-size: 16px !important; }
html.dark .notif-view-all[b-owep4qqy0v] { background: rgba(255,255,255,0.04); border-color: var(--primary); }

/* ===================== APP-OWNED ADDITIONS ==========================
   The feed column, stacking, link resets, focus rings and reduced
   motion. Tokens only. */

.wci-notif-feed[b-owep4qqy0v] { display: flex; flex-direction: column; min-width: 0; }

.notif-row-body[b-owep4qqy0v] { display: flex; flex-direction: column; }

a.notif-row[b-owep4qqy0v],
a.notif-view-all[b-owep4qqy0v] { text-decoration: none; box-sizing: border-box; }

.notif-row:focus-visible[b-owep4qqy0v] {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
.notif-view-all:focus-visible[b-owep4qqy0v] {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .notif-row[b-owep4qqy0v],
  .notif-view-all[b-owep4qqy0v] { transition: none; }
}
/* /Components/DesignSystem/WciNudgeToast.razor.rz.scp.css */
/* WciNudgeToast: the nudge toast. Ported from ip-b2b (checkout ab499e3, read 2026-10-07):
     pages/wise.css 13015-13110   .dash-score-toast and its parts (icon, body, title, text, link, close, [hidden])
     pages/wise.css 13291-13306   @keyframes dash-score-toast-in / -float, reduced motion
     pages/product-portfolio.html 6224-6228 / wise.css 13128-13132   the caret flipped to the top (.is-below::after)
   Class names kept identical to wise.css. The two gradient stops are tokens (--nudge-toast-from / -to in wci-tokens.css,
   with their html.dark values) instead of the design's literals; the white ink and the shadows stay as the design writes
   them. Not ported: the Guides gate (html:not(.guides-on), the app has no Guides switch), the body-portalled placement
   (.is-portaled and its JS flipper: the toast sits in its anchor's box instead), and the dismiss menu (the × dismisses). */
.dash-score-toast[b-vlyj7fk2rn] {
  position: absolute;
  left: -6px;
  right: -6px;
  bottom: calc(100% - 6px);
  z-index: 6;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--nudge-toast-from) 0%, var(--nudge-toast-to) 100%);
  color: #fff;
  box-shadow: 0 14px 34px rgba(37, 80, 124, 0.4), 0 4px 10px rgba(0, 0, 0, 0.16);
  animation:
    dash-score-toast-in-b-vlyj7fk2rn 0.32s cubic-bezier(0.22, 1, 0.36, 1) both,
    dash-score-toast-float-b-vlyj7fk2rn 3.6s ease-in-out 0.32s infinite;
}
.dash-score-toast[b-vlyj7fk2rn]::after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 28px;
  width: 14px;
  height: 14px;
  background: var(--nudge-toast-to);
  transform: rotate(45deg);
  border-radius: 0 0 3px 0;
}
html.dark .dash-score-toast[b-vlyj7fk2rn] {
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.35);
}
.dash-score-toast-icon[b-vlyj7fk2rn] { display: inline-flex; flex-shrink: 0; margin-top: 1px; }
.dash-score-toast-icon .material-symbols-outlined[b-vlyj7fk2rn] { font-size: 20px; color: #fff; }
.dash-score-toast-body[b-vlyj7fk2rn] { min-width: 0; }
.dash-score-toast-title[b-vlyj7fk2rn] {
  font-family: 'WISE Digits', 'DM Sans', system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.25;
  padding-right: 18px;
}
.dash-score-toast-text[b-vlyj7fk2rn] {
  margin: 3px 0 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
}
.dash-score-toast-link[b-vlyj7fk2rn] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  width: 100%;
  margin-top: 9px;
  padding: 0;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: right;
  white-space: normal;
  color: #fff;
  cursor: pointer;
}
.dash-score-toast-link .material-symbols-outlined[b-vlyj7fk2rn] { font-size: 15px; }
.dash-score-toast-link-arrow[b-vlyj7fk2rn] { transition: transform 0.15s ease; }
.dash-score-toast-link[b-vlyj7fk2rn] { transition: color 0.15s ease; }
.dash-score-toast-link:hover[b-vlyj7fk2rn] { text-decoration: none; color: rgba(255, 255, 255, 0.78); }
.dash-score-toast-link:hover .dash-score-toast-link-arrow[b-vlyj7fk2rn] { transform: translate(2px, -2px); }

.dash-score-toast-close[b-vlyj7fk2rn] {
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease;
}
.dash-score-toast-close:hover[b-vlyj7fk2rn] { background: rgba(255, 255, 255, 0.32); }
.dash-score-toast-close .material-symbols-outlined[b-vlyj7fk2rn] { font-size: 13px; }
.dash-score-toast.is-paused[b-vlyj7fk2rn] { animation-play-state: paused; }
.dash-score-toast[hidden][b-vlyj7fk2rn] { display: none !important; }

@keyframes dash-score-toast-in-b-vlyj7fk2rn {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes dash-score-toast-float-b-vlyj7fk2rn {
  0%, 100% {
    transform: translateY(0);
    box-shadow: 0 14px 34px rgba(37, 80, 124, 0.4), 0 4px 10px rgba(0, 0, 0, 0.16);
  }
  50% {
    transform: translateY(-11px);
    box-shadow: 0 28px 52px rgba(37, 80, 124, 0.32), 0 12px 22px rgba(0, 0, 0, 0.13);
  }
}
@media (prefers-reduced-motion: reduce) {
  .dash-score-toast[b-vlyj7fk2rn] { animation: dash-score-toast-in-b-vlyj7fk2rn 0.32s cubic-bezier(0.22, 1, 0.36, 1) both; }
}

/* ---- APP-OWNED ADDITIONS ----
   The anchor wrapper: the toast's positioning box (the design's .dash-claim-col--nudge, wise.css 12999, which a host
   page sets on the column it nudges from). Below: the design flips a portalled toast under its anchor (.is-below); here
   the same flip in the anchor's box, clear of the anchor at the top of its bob. Link and close focus rings. */
.wci-nudge-anchor[b-vlyj7fk2rn] { position: relative; display: inline-flex; }
.dash-score-toast.is-below[b-vlyj7fk2rn] { bottom: auto; top: calc(100% + 12px); }
.dash-score-toast.is-below[b-vlyj7fk2rn]::after { bottom: auto; top: -7px; border-radius: 3px 0 0 0; }
.dash-score-toast-link:focus-visible[b-vlyj7fk2rn],
.dash-score-toast-close:focus-visible[b-vlyj7fk2rn] { outline: 2px solid #fff; outline-offset: 2px; }
/* /Components/DesignSystem/WciNutritionFacts.razor.rz.scp.css */
/* ===================================================================
   WCI component: Nutrition Facts (WciNutritionFacts), INTEL-401
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo, revision afe74ad
   (pulled 2026-10-05):
     pages/product-details.css
       lines 1046-1069    the label: panel, title, serving, calories,
                          %DV header, rows, indents, rules, footer
       lines 1073-1076    .nfp-decl-wrap
       lines 1111-1139    allergens: heading, tags, icon, empty, Contains
                          (the remove x and the Add popover are not ported)
       lines 1144-1153    .nfp-edit (the click-to-edit affordance)
       lines 1157-1158    reduced motion for .nfp-edit::after
       lines 1166-1167    .nfp-row-err, .nfp-err-val
       lines 1171-1172    .nfp-field-note
       lines 1184-1198    html.dark label
       lines 1202, 1215-1223
                          html.dark allergens and Contains
       lines 1229-1233, 1236
                          html.dark .nfp-edit
     pages/wise.css
       lines 26265-26281, 26284-26288
                          the inspect pointer and the .is-nf-sel
                          selection (rows and allergen tags, + dark)
     js/add-product-flow.js
       lines 1455-1505    nfRowHTML, nutritionHTML
       lines 2085-2130    allergen tags, allergensHTML
   App-owned deviation: the allergen tags are read-only (no remove x, no
   Add popover); the statement is edited as text on the Contains line.
   Not ported: the hero, on-photo and compare-view rules around these
   ranges (legacy layouts), and the ingredient column (WciIngredientAnalyzer).
   Rule 10: .nfp-nf-panel and .nfp-decl-wrap carry margins, so neither
   is the root; the root is the app-owned .wci-nf.
   Class names are kept IDENTICAL to the design.
   =================================================================== */

/* ---- product-details.css 1046-1069 ---- */
.nfp-nf-panel[b-dbtl8qpzym] {
  background: #fff; font-family: 'WISE Digits', 'DM Sans', system-ui, sans-serif; color: #000;
  width: calc(100% - 24px); max-width: 500px; margin: 12px auto 14px;
  border: 3px solid #000;
  box-sizing: border-box;
}
.nfp-nf-title[b-dbtl8qpzym] { font-size: 1.45rem; font-weight: 900; line-height: 1.05; padding: 5px 10px 3px; border-bottom: 1px solid #000; display: flex; align-items: center; justify-content: space-between; }
.nfp-nf-serving[b-dbtl8qpzym] { padding: 2px 10px 3px; border-bottom: 8px solid #000; }
.nfp-nf-spc-row[b-dbtl8qpzym] { font-size: 0.7rem; color: #000; padding: 2px 0 1px; border-bottom: 1px solid #000; }
.nfp-nf-ss-row[b-dbtl8qpzym] { display: flex; align-items: center; justify-content: space-between; font-size: 0.7rem; padding: 2px 0; }
.nfp-nf-cal-band[b-dbtl8qpzym] { display: flex; justify-content: space-between; align-items: flex-end; padding: 3px 10px 2px; border-bottom: 4px solid #000; }
.nfp-nf-cal-left[b-dbtl8qpzym] { display: flex; flex-direction: column; }
.nfp-nf-cal-sm[b-dbtl8qpzym] { font-size: 0.62rem; line-height: 1.2; }
.nfp-nf-cal-text[b-dbtl8qpzym] { font-size: 1.2rem; font-weight: 900; line-height: 1; }
.nfp-nf-cal-num[b-dbtl8qpzym] { font-size: 2.1rem; font-weight: 900; line-height: 1; }
.nfp-nf-dv-hdr[b-dbtl8qpzym] { text-align: right; font-size: 0.68rem; font-weight: 700; padding: 2px 10px 1px; border-bottom: 1px solid #000; }
.nfp-nf-row[b-dbtl8qpzym] { display: flex; align-items: center; justify-content: space-between; padding: 2px 10px; border-bottom: 1px solid #C5CFD7; font-size: 0.7rem; min-height: 20px; }
.nfp-nf-row .nfp-nf-main[b-dbtl8qpzym] { flex: 1; display: flex; align-items: center; }
.nfp-nf-row .nfp-nf-dv[b-dbtl8qpzym] { flex-shrink: 0; text-align: right; font-weight: 700; padding-left: 4px; }
.nfp-nf-ind1[b-dbtl8qpzym] { padding-left: 18px !important; }
.nfp-nf-ind2[b-dbtl8qpzym] { padding-left: 30px !important; }
.nfp-nf-rule8[b-dbtl8qpzym] { height: 8px; background: #000; }
.nfp-nf-no-b[b-dbtl8qpzym] { border-bottom: none !important; }
.nfp-nf-footer[b-dbtl8qpzym] { border-top: 8px solid #000; padding: 3px 10px 5px; font-size: 0.56rem; color: #000; line-height: 1.45; }

/* ---- product-details.css 1073-1076 ---- */
.nfp-decl-wrap[b-dbtl8qpzym] {
  width: calc(100% - 24px); max-width: 460px; margin: 0 auto 16px;
  font-family: 'WISE Digits', 'DM Sans', system-ui, sans-serif;
}

/* ---- product-details.css 1111-1139 ---- */
.nfp-allergen-wrap[b-dbtl8qpzym] { padding: 2px 0 10px; border-bottom: 1px solid #e5e7eb; }
.nfp-allergen-heading[b-dbtl8qpzym] { font-size: 0.65rem; font-weight: 700; color: #535964; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 5px; }
.nfp-allergen-tags[b-dbtl8qpzym] { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.nfp-allergen-tag[b-dbtl8qpzym] { font-size: 0.7rem; font-weight: 600; padding: 3px 8px 3px 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; background: #E2EEF7; color: #1A2339; border: 1px solid #C5CFD7; }
.nfp-allergen-ico[b-dbtl8qpzym] { font-size: 15px !important; color: var(--primary-ink, var(--primary)); }
.nfp-allergen-empty[b-dbtl8qpzym] { font-size: 0.66rem; color: #9ca3af; font-style: italic; }
.nfp-contains[b-dbtl8qpzym] { padding: 6px 0 8px; font-size: 0.66rem; color: #374151; }

/* ---- product-details.css 1144-1153, 1157-1158 ---- */
.nfp-edit[b-dbtl8qpzym] { position: relative; cursor: text; border-radius: 3px; padding: 0 2px; transition: background 0.12s, box-shadow 0.12s; outline: none; }
.nfp-edit[b-dbtl8qpzym]::after {
  content: ''; position: absolute; left: 2px; right: 2px; bottom: 0; height: 1px;
  background: var(--primary); transform: scaleX(0); transform-origin: left;
  transition: transform 0.15s ease; pointer-events: none;
}
.nfp-edit:hover[b-dbtl8qpzym]::after { transform: scaleX(1); }
.nfp-edit:focus[b-dbtl8qpzym]::after { transform: scaleX(0); }
.nfp-edit:focus[b-dbtl8qpzym] { background: #fff; box-shadow: inset 0 0 0 2px var(--primary); }
.nfp-edit-empty[b-dbtl8qpzym] { color: #9ca3af; font-style: italic; }
@media (prefers-reduced-motion: reduce) {
  .nfp-edit[b-dbtl8qpzym]::after { transition: none; }
}

/* ---- product-details.css 1166-1167, 1171-1172 ---- */
.nfp-row-err[b-dbtl8qpzym] { background: rgba(220,48,56,0.07); box-shadow: inset 3px 0 0 var(--sec-red); }
.nfp-err-val[b-dbtl8qpzym] { color: var(--sec-red) !important; font-style: italic; }
.nfp-field-note[b-dbtl8qpzym] { display: flex; align-items: center; gap: 5px; font-size: 0.62rem; color: var(--sec-red); margin-top: 4px; }
.nfp-field-note .material-symbols-outlined[b-dbtl8qpzym] { font-size: 13px !important; }

/* ---- product-details.css 1184-1198: dark label ---- */
html.dark .nfp-nf-panel[b-dbtl8qpzym] {
  background: var(--surface); color: var(--text);
  border-color: color-mix(in srgb, var(--text) 78%, transparent);
}
html.dark .nfp-nf-title[b-dbtl8qpzym],
html.dark .nfp-nf-serving[b-dbtl8qpzym],
html.dark .nfp-nf-cal-band[b-dbtl8qpzym],
html.dark .nfp-nf-dv-hdr[b-dbtl8qpzym],
html.dark .nfp-nf-spc-row[b-dbtl8qpzym] { border-bottom-color: color-mix(in srgb, var(--text) 78%, transparent); }
html.dark .nfp-nf-spc-row[b-dbtl8qpzym] { color: var(--text); }
html.dark .nfp-nf-row[b-dbtl8qpzym] { border-bottom-color: color-mix(in srgb, var(--text) 20%, transparent); }
html.dark .nfp-nf-rule8[b-dbtl8qpzym] { background: color-mix(in srgb, var(--text) 78%, transparent); }
html.dark .nfp-nf-footer[b-dbtl8qpzym] {
  border-top-color: color-mix(in srgb, var(--text) 78%, transparent); color: var(--text-muted);
}

/* ---- product-details.css 1202, 1215-1223: dark allergens ---- */
html.dark .nfp-allergen-wrap[b-dbtl8qpzym] { border-bottom-color: var(--border); }
html.dark .nfp-allergen-heading[b-dbtl8qpzym] { color: var(--text-subtle); }
html.dark .nfp-allergen-tag[b-dbtl8qpzym] {
  background: var(--primary-soft); color: var(--text);
  border-color: color-mix(in srgb, var(--primary-bright) 26%, transparent);
}
html.dark .nfp-allergen-ico[b-dbtl8qpzym] { color: var(--primary-bright, var(--primary)); }
html.dark .nfp-allergen-empty[b-dbtl8qpzym] { color: var(--text-subtle); }
html.dark .nfp-contains[b-dbtl8qpzym] { color: var(--text-muted); }

/* ---- product-details.css 1229-1233, 1236: dark edit ---- */
html.dark .nfp-edit[b-dbtl8qpzym]::after { background: var(--primary-bright, var(--primary)); }
html.dark .nfp-edit:focus[b-dbtl8qpzym] {
  background: color-mix(in srgb, var(--text) 8%, transparent);
  box-shadow: inset 0 0 0 2px var(--primary-bright);
}
html.dark .nfp-edit-empty[b-dbtl8qpzym] { color: var(--text-subtle); }

/* ---- wise.css 26265-26281, 26284-26288: inspect and selection ---- */
.nfp-nf-row[data-nfp="nf-inspect"][b-dbtl8qpzym],
.nfp-nf-cal-band[data-nfp="nf-inspect"][b-dbtl8qpzym],
.nfp-nf-ss-row[data-nfp="nf-inspect"][b-dbtl8qpzym],
.nfp-nf-spc-row[data-nfp="nf-inspect"][b-dbtl8qpzym] { cursor: pointer; }
.nfp-nf-row.is-nf-sel[b-dbtl8qpzym],
.nfp-nf-cal-band.is-nf-sel[b-dbtl8qpzym],
.nfp-nf-ss-row.is-nf-sel[b-dbtl8qpzym],
.nfp-nf-spc-row.is-nf-sel[b-dbtl8qpzym] {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
}
html.dark .nfp-nf-row.is-nf-sel[b-dbtl8qpzym],
html.dark .nfp-nf-cal-band.is-nf-sel[b-dbtl8qpzym],
html.dark .nfp-nf-ss-row.is-nf-sel[b-dbtl8qpzym],
html.dark .nfp-nf-spc-row.is-nf-sel[b-dbtl8qpzym] {
  background: color-mix(in srgb, var(--primary-bright, var(--primary)) 22%, transparent);
}
.nfp-allergen-tag[data-nfp="inspect-allergen"][b-dbtl8qpzym] { cursor: pointer; }
.nfp-allergen-tag.is-nf-sel[b-dbtl8qpzym] {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}
html.dark .nfp-allergen-tag.is-nf-sel[b-dbtl8qpzym] { outline-color: var(--primary-bright, var(--primary)); }

/* ===================================================================
   APP-OWNED ADDITIONS
   =================================================================== */

/* The root carries no margin (REGISTRY rule 10); it only holds the label
   and the allergen block. */
.wci-nf[b-dbtl8qpzym] { display: block; min-width: 0; }

/* A read-only value: the design draws every value as an edit span; the
   read-only specimen keeps the text without the edit affordance. */
.wci-nf-val[b-dbtl8qpzym] { padding: 0 2px; }

/* The design edits in place with contenteditable spans. The app swaps a
   value for a bound input (CLAUDE.md, Blazor Server text inputs), drawn
   as the design's focused .nfp-edit so it reads as the same field. */
.wci-nf-input[b-dbtl8qpzym] {
  font: inherit; color: inherit; border: 0; margin: 0;
  background: var(--surface); box-shadow: inset 0 0 0 2px var(--primary);
  min-width: 0; max-width: 100%;
}
.wci-nf-input.is-invalid[b-dbtl8qpzym] { box-shadow: inset 0 0 0 2px var(--sec-red); }
.wci-nf-input--wide[b-dbtl8qpzym] { width: 100%; box-sizing: border-box; }
html.dark .wci-nf-input[b-dbtl8qpzym] {
  background: color-mix(in srgb, var(--text) 8%, transparent);
  box-shadow: inset 0 0 0 2px var(--primary-bright);
}
.wci-nf-serving-editor[b-dbtl8qpzym] { display: inline-flex; gap: 4px; }

/* The design's row note carries an inline margin-left: 8px. */
.wci-nf-note-inline[b-dbtl8qpzym] { margin-left: 8px; margin-top: 0; }

/* Editable values are buttons (keyboard reachable, Enter / Space open the
   editor), drawn exactly like the design's .nfp-edit span. */
.wci-nf-valbtn[b-dbtl8qpzym] {
  appearance: none; -webkit-appearance: none;
  background: transparent; border: 0; margin: 0;
  font: inherit; color: inherit; line-height: inherit; text-align: inherit;
}

/* With OnInspect, each row's label is a button: the keyboard path to the
   inspect a click anywhere on the row makes. It reads as plain label text. */
.wci-nf-inspect[b-dbtl8qpzym] {
  appearance: none; -webkit-appearance: none;
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; line-height: inherit; text-align: inherit;
  cursor: pointer;
}
button.nfp-allergen-tag[b-dbtl8qpzym] { font-family: inherit; line-height: inherit; cursor: pointer; appearance: none; -webkit-appearance: none; }

.wci-nf-valbtn:focus-visible[b-dbtl8qpzym],
.wci-nf-inspect:focus-visible[b-dbtl8qpzym],
button.nfp-allergen-tag:focus-visible[b-dbtl8qpzym] { outline: 2px solid var(--primary); outline-offset: 2px; }
html.dark .wci-nf-valbtn:focus-visible[b-dbtl8qpzym],
html.dark .wci-nf-inspect:focus-visible[b-dbtl8qpzym],
html.dark button.nfp-allergen-tag:focus-visible[b-dbtl8qpzym] { outline-color: var(--primary-bright, var(--primary)); }
/* /Components/DesignSystem/WciOutputChip.razor.rz.scp.css */
/* ===================================================================
   WCI component: Output chips (WciOutputChip), INTEL-367
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo (revision a2ba5dc, 2026-09-23):
     /Users/kevinjones/src/wc/ip-b2b/pages/wiseai.html
       lines 2210-2244   .sc-surface-slot / .sc-surface-card / head / thumb / body
                         (.sc-surface-thumb-inner is not ported: it scales a live snapshot the app does not draw)
       lines 2247-2253   .sc-surface-title
       lines 2256-2263   .sc-surface-rail (the portrait cards' scrolling rail)
       lines 2264-2279   .sc-surface-card--portrait (the rail's portrait card)
       lines 2579-2595   .sc-surface-vtag (the vN tag on the card's corner)
     /Users/kevinjones/src/wc/ip-b2b/pages/wise.css
       line 8318         .sc-surface-rail-lead
       lines 8333-8338   .sc-surface-rail .sc-surface-slot
     /Users/kevinjones/src/wc/ip-b2b/js/all-modules-flow.js
       lines 2452-2476   outputChipHTML() (markup), module "Output chips" 4000-4078
   The served wise.css has these only under the catalog's .dsc-demo / #mi-motion scope (21666-21781);
   the chat page's own copy is the one ported. Not ported: the version cascade (.sc-surface-stack and
   its fan), .is-active, .is-flash, html.dark.chat-tint, .sc-surface-rail--bleed (edge to edge
   under the chat's gutter math) and the .is-rail-in slide, none of which the app has yet.
   Class names are kept IDENTICAL. Consumes tokens from wwwroot/css/wci/wci-tokens.css
   (--out-stroke is Gilded Grain, --warm-400).
   =================================================================== */

.sc-surface-slot[b-4d6s9bxxy2] { display: block; min-width: 0; max-width: 100%; }
.sc-surface-card[b-4d6s9bxxy2] {
  position: relative; box-sizing: border-box;
  display: inline-flex; flex-direction: column; align-items: stretch;
  width: min(240px, 100%); max-width: 100%; min-width: 0;
  text-align: left; margin: 4px 0 0; padding: 8px 12px 8px 8px;
  /* Thin Gilded Grain stroke so the output chips echo the output ear marks
     on the activity rail — but the fill matches the chat container's own
     background so only the outline carries the color. */
  background: var(--surface); border: 1px solid var(--out-stroke, #946005);
  border-radius: 14px; cursor: pointer; font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease, max-width .35s ease;
}
/* The chip's top row: thumbnail(s) + title. min-width:0 so the title column
   can shrink inside the docked chat instead of overflowing and clipping. */
.sc-surface-head[b-4d6s9bxxy2] { display: flex; align-items: center; gap: 12px; min-width: 0; width: 100%; }
/* Dark chat card uses #1A2339 (not --surface), so match it here too. */
html.dark .sc-surface-card[b-4d6s9bxxy2] { background: #1A2339; }
.sc-surface-card:hover[b-4d6s9bxxy2] { border-color: var(--out-stroke, #946005); box-shadow: 0 4px 12px color-mix(in srgb, var(--out-stroke, #946005) 20%, transparent); }
.sc-surface-card:focus-visible[b-4d6s9bxxy2] { outline: 2px solid var(--primary); outline-offset: 2px; }
.sc-surface-card:active[b-4d6s9bxxy2] { transform: translateY(1px); }
/* Small clipped snapshot of the surfaced content, scaled way down. */
.sc-surface-thumb[b-4d6s9bxxy2] {
  width: 52px; height: 52px; flex: 0 0 auto; border-radius: 10px; overflow: hidden;
  position: relative; background: var(--surface); border: 1px solid var(--border);
}
/* Body column — the title now stacks above a small meta row (timestamp +
   version), so every output chip is time-stamped and versioned. */
.sc-surface-body[b-4d6s9bxxy2] { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
/* Title uses the full width beside the thumbnail and wraps to two lines
   when the name is long, instead of stretching the chip across the chat. */
.sc-surface-title[b-4d6s9bxxy2] {
  min-width: 0; width: 100%; font-size: 14px; font-weight: 700; color: var(--text);
  line-height: 1.3; white-space: normal; overflow-wrap: anywhere; word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.sc-surface-card--portrait[b-4d6s9bxxy2] {
  width: 120px; max-width: 120px; min-width: 120px;
  padding: 6px 6px 8px; align-items: stretch;
}
.sc-surface-card--portrait .sc-surface-head[b-4d6s9bxxy2] {
  flex-direction: column; align-items: stretch; gap: 6px;
}
.sc-surface-card--portrait .sc-surface-thumb[b-4d6s9bxxy2] {
  width: 108px; height: 108px;
}
.sc-surface-card--portrait .sc-surface-body[b-4d6s9bxxy2] { justify-content: flex-start; }
.sc-surface-card--portrait .sc-surface-title[b-4d6s9bxxy2] {
  font-size: 10.5px; font-weight: 600; line-height: 1.25; text-align: center;
  color: var(--text-muted);
}
.sc-surface-rail[b-4d6s9bxxy2] {
  display: flex; align-items: stretch; gap: 8px;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: thin;
  scroll-snap-type: x proximity; max-width: 100%;
  padding: 2px 2px 6px; -webkit-overflow-scrolling: touch;
}
.sc-surface-rail[b-4d6s9bxxy2]::-webkit-scrollbar { height: 6px; }
.sc-surface-rail-lead[b-4d6s9bxxy2] { margin: 0; }
.sc-surface-rail .sc-surface-slot[b-4d6s9bxxy2] {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: auto;
  max-width: none;
}
.sc-surface-stamp[b-4d6s9bxxy2] { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }

/* vN tag. On a transcript card it rides the card's own top-right corner —
   the whole card wears the version, not the snapshot inside it. On the
   Output rail's small chips it still tucks into the thumbnail corner. */
.sc-surface-vtag[b-4d6s9bxxy2] {
  position: absolute; right: 1px; bottom: 1px; z-index: 2;
  padding: 0 4px; border-radius: 6px; min-width: 14px; text-align: center;
  font-size: 8.5px; font-weight: 800; line-height: 14px; letter-spacing: 0;
  color: var(--text-muted); background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.sc-surface-card > .sc-surface-vtag[b-4d6s9bxxy2] { right: 5px; top: 5px; bottom: auto; }
html.dark .sc-surface-vtag[b-4d6s9bxxy2] { background: color-mix(in srgb, #1A2339 92%, transparent); }
.sc-surface-card.is-latest > .sc-surface-vtag[b-4d6s9bxxy2] { color: #fff; background: var(--primary); border-color: var(--primary); }
/* Landscape cards run the title beside the thumbnail, so keep it clear of
   the tag in the corner. */
.sc-surface-card:not(.sc-surface-card--portrait) .sc-surface-title[b-4d6s9bxxy2] { padding-right: 22px; }

/* ===================================================================
   APP-OWNED ADDITIONS (not in wise.css)
   =================================================================== */

/* REGISTRY.md rule 10: the root (.wci-output-chips) carries no margin, and the card's own
   `margin: 4px 0 0` above is on an inner element, so a host's CssClass is never cancelled. */

/* The slot hugs its card and anchors what the host hangs on it (Output.Decor: corner buttons, a
   hover card). The design's slot is a full-width block; hugging changes nothing it draws. */
.sc-surface-slot[b-4d6s9bxxy2] { position: relative; width: fit-content; }

/* Room inside the scroll box for what the app hangs on a chip's corners (a count badge, corner
   buttons at -6px) and for the design's own hover lift; the verbatim 2px 2px 6px would clip them. */
.sc-surface-rail[b-4d6s9bxxy2] { padding: 8px 8px 6px; }
.sc-surface-rail-lead + .sc-surface-rail[b-4d6s9bxxy2] { margin-top: 6px; }

/* The thumbnail's face. The design scales a live snapshot of the output into the square; the app
   has a preview image for some outputs and a glyph for the rest. The image sits over the glyph and
   stays transparent until it loads. */
.wci-output-thumb-img[b-4d6s9bxxy2] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top; z-index: 1;
}
.wci-output-thumb-img.is-loading[b-4d6s9bxxy2] { opacity: 0; }
.wci-output-thumb-icon[b-4d6s9bxxy2] {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: var(--primary);
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
}
.sc-surface-card--portrait .wci-output-thumb-icon[b-4d6s9bxxy2] { font-size: 40px; }
html.dark .wci-output-thumb-icon[b-4d6s9bxxy2] { color: var(--primary-bright, #8B9FAF); }

@media (prefers-reduced-motion: reduce) {
  .sc-surface-card[b-4d6s9bxxy2] { transition: none; }
  .sc-surface-card:active[b-4d6s9bxxy2] { transform: none; }
}
/* /Components/DesignSystem/WciPaginationFooter.razor.rz.scp.css */
/* ===================================================================
   WCI component: Pagination footer (WciPaginationFooter), INTEL-394
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo: the Rows-per-page pager
   card (INTEL-677), pages/wise.css 26537-26557 at 8d65fe4^ (the card's
   last revision; on 2026-10-07 the design moved every list to Load more,
   and on 2026-10-19 the product moved back to pages: Tolga and Arthur in
   Slack). Class names are kept IDENTICAL so a future re-port is a
   section diff. Consumes tokens from wwwroot/css/wci/wci-tokens.css.
   =================================================================== */

.wise-pager[b-tgk7bq3ewa] {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px;
  width: 100%; padding: 10px 14px; box-sizing: border-box;
  border-top: 1px solid var(--border); font-family: inherit;
}
.wise-pager-rows[b-tgk7bq3ewa] { display: inline-flex; align-items: center; gap: 8px; font-size: 0.75rem; color: var(--text-muted); font-weight: 600; }
.wise-pager-rows[b-tgk7bq3ewa]  .adm-select { height: 32px; min-width: 0; padding: 0 30px 0 12px; font-size: 0.75rem; font-weight: 700; }
.wise-pager-right[b-tgk7bq3ewa] { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; }
.wise-pager-count[b-tgk7bq3ewa] { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.wise-pager-count b[b-tgk7bq3ewa] { color: var(--text); font-weight: 800; }
.wise-pager-nav[b-tgk7bq3ewa] { display: inline-flex; align-items: center; gap: 4px; }
.wise-pager-btn[b-tgk7bq3ewa] {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text-muted); cursor: pointer; padding: 0;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.wise-pager-btn .material-symbols-outlined[b-tgk7bq3ewa] { font-size: 18px; }
.wise-pager-btn:hover:not(:disabled)[b-tgk7bq3ewa], .wise-pager-btn.is-hover[b-tgk7bq3ewa] { color: var(--text); border-color: var(--primary); background: var(--primary-soft); }
.wise-pager-btn:disabled[b-tgk7bq3ewa] { opacity: .38; cursor: not-allowed; }

/* ===================================================================
   APP-OWNED ADDITIONS
   =================================================================== */
.wise-pager[hidden][b-tgk7bq3ewa] { display: none; }
/* "Go to page": the rows-per-page pick's label and select, beside the count. */
.wise-pager-goto[b-tgk7bq3ewa] { display: inline-flex; align-items: center; gap: 8px; font-size: 0.75rem; color: var(--text-muted); font-weight: 600; }
.wise-pager-goto[b-tgk7bq3ewa]  .adm-select { height: 32px; min-width: 0; padding: 0 30px 0 12px; font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.wise-pager-btn:focus-visible[b-tgk7bq3ewa] { outline: 2px solid color-mix(in srgb, var(--primary) 45%, transparent); outline-offset: 2px; }
.wise-pager-of[b-tgk7bq3ewa] { padding: 0 6px; font-size: 0.75rem; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* The compact (rail) form: previous, "2 of 9", next, centred. */
.wise-pager.is-compact[b-tgk7bq3ewa] { justify-content: center; padding: 6px 4px; }
.wise-pager.is-compact .wise-pager-right[b-tgk7bq3ewa] { margin-left: 0; }

@media (prefers-reduced-motion: reduce) {
  .wise-pager-btn[b-tgk7bq3ewa] { transition: none; }
}
/* /Components/DesignSystem/WciPanelMenu.razor.rz.scp.css */
/* ===================================================================
   WCI component: Chat and Module ⋯ menu shell (WciPanelMenu)
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo:
     /Users/kevinjones/src/wc/ip-b2b/pages/wise.css
       lines 2541-2564    the .topbar-popover panel (MORE popover)
       lines 8105-8123    the .panel-more-wrap / .panel-more-btn kebab trigger
       lines 26209-26214  .topbar-menu-title, the panel's section label
                          (local checkout read 2026-10-07)
   NOTE: that checkout is not on every machine. These line numbers are
   from the revision the prototype host serves (fetched 2026-09-23,
   http://3.17.180.155:4144/pages/wise.css), which is AHEAD of the
   revision WciStatusChip / WciStatTile were cut from, so ranges in the
   older headers do not line up with this file.
   Class names are kept IDENTICAL to wise.css so a future re-port is a
   section diff. Consumes tokens from wwwroot/css/wci/wci-tokens.css.
   The html.dark rules are ported as-is; they are inert until the app
   grows a theme toggle.
   =================================================================== */

/* ===== MORE — small popover anchored to the three-dot button ===== */
@keyframes morePopIn-b-3t6yewe1ln {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.topbar-popover[b-3t6yewe1ln] {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 240px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  z-index: 200;
  padding: 6px;
  animation: morePopIn-b-3t6yewe1ln 0.15s ease-out both;
}
.topbar-popover.hidden[b-3t6yewe1ln] { display: none; }
html.dark .topbar-popover[b-3t6yewe1ln] {
  background: linear-gradient(155deg, #1A2339 0%, #1A2339 60%, #1A2339 100%);
  border-color: rgba(37, 80, 124, 0.22);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

/* More-menu trigger (verbatim from .panel-more-wrap / .panel-more-btn).
   The popover itself reuses .topbar-popover / .topbar-menu-item from
   agent-page.css for a pixel-identical menu. */
.panel-more-wrap[b-3t6yewe1ln] { position: relative; margin-left: auto; display: inline-flex; align-items: center; }
.panel-more-btn[b-3t6yewe1ln] {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; background: transparent; border: 0;
  color: var(--text-muted); cursor: pointer; opacity: 1;
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.panel-more-btn .material-symbols-outlined[b-3t6yewe1ln] {
  font-size: 16px !important; line-height: 1 !important;
  /* more_vert at 600 — three stacked dots read thin at the app-wide 400. */
  font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 24;
}
/* Opaque circle behind the icon on hover so content scrolling underneath a
   floated header never bleeds through the glyph. */
.panel-more-btn:hover[b-3t6yewe1ln] { opacity: 1; background: var(--surface-3); color: var(--text); }
.panel-more-btn.is-open[b-3t6yewe1ln] { opacity: 1; color: var(--primary-ink, var(--primary)); background: color-mix(in srgb, var(--primary) 16%, var(--surface-2)); }

/* Small section label at the top of a topbar menu popover (e.g. "Reports"). */
.topbar-menu-title[b-3t6yewe1ln] {
  padding: 6px 12px 4px; font-size: 0.6rem; font-weight: 800;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-subtle);
}

/* ===================== APP-OWNED ADDITIONS ==========================
   Only what the design's CONVENTIONS require and the prototype leaves to
   the page: a focus ring, and honouring reduced motion. Tokens only. */

.panel-more-btn:focus-visible[b-3t6yewe1ln] {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* The prototype anchors a clipped menu with js/popover-layer.js. The app uses
   window.wciMenu instead (wwwroot/js/wci/wci-menu.js), which writes
   position/top/left inline and compensates for an ancestor transform; this class
   only parks the panel off screen until that call lands, so it never flashes at
   the top left. */
.topbar-popover.wci-panel-menu-anchored[b-3t6yewe1ln] {
    position: fixed;
    top: -9999px;
    left: -9999px;
    /* The design's panel is position:absolute inside the trigger's wrap, so it shrinks to fit. Pinned
       to the viewport its containing block becomes the viewport, and the rows' width:100% then resolves
       against the whole screen: the menu stretched edge to edge. Size it to its content explicitly, and
       keep a gutter so a menu near the right edge still fits on a phone. */
    width: max-content;
    max-width: min(320px, calc(100vw - 16px));
}

@media (prefers-reduced-motion: reduce) {
    .topbar-popover[b-3t6yewe1ln] { animation: none; }
    .panel-more-btn[b-3t6yewe1ln] { transition: none; }
}
/* /Components/DesignSystem/WciPanelMenuDivider.razor.rz.scp.css */
/* ===================================================================
   WCI component: Chat and Module ⋯ menu divider (WciPanelMenuDivider)
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo:
     /Users/kevinjones/src/wc/ip-b2b/pages/wise.css
       lines 2591-2596    .topbar-menu-divider
   NOTE: that checkout is not on every machine. These line numbers are
   from the revision the prototype host serves (fetched 2026-09-23,
   http://3.17.180.155:4144/pages/wise.css), which is AHEAD of the
   revision WciStatusChip / WciStatTile were cut from, so ranges in the
   older headers do not line up with this file.
   Class names are kept IDENTICAL to wise.css so a future re-port is a
   section diff. Consumes tokens from wwwroot/css/wci/wci-tokens.css.
   The html.dark rules are ported as-is; they are inert until the app
   grows a theme toggle.
   =================================================================== */

.topbar-menu-divider[b-1ny97bvxn6] {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}
html.dark .topbar-menu-divider[b-1ny97bvxn6] { background: rgba(255,255,255,0.08); }
/* /Components/DesignSystem/WciPanelMenuItem.razor.rz.scp.css */
/* ===================================================================
   WCI component: Chat and Module ⋯ menu row (WciPanelMenuItem)
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo:
     /Users/kevinjones/src/wc/ip-b2b/pages/wise.css
       lines 2566-2590    .topbar-menu-item and .topbar-menu-icon
       lines 2597-2633    danger, admin and badge
       lines 22140-22143  .sc-mcp-item switch-row layout (catalog copy)
       lines 26220-26227  locked (upsell) rows and .topbar-menu-lock
                          (local checkout read 2026-10-07)
   NOTE: that checkout is not on every machine. These line numbers are
   from the revision the prototype host serves (fetched 2026-09-23,
   http://3.17.180.155:4144/pages/wise.css), which is AHEAD of the
   revision WciStatusChip / WciStatTile were cut from, so ranges in the
   older headers do not line up with this file.
   Class names are kept IDENTICAL to wise.css so a future re-port is a
   section diff. Consumes tokens from wwwroot/css/wci/wci-tokens.css.
   The html.dark rules are ported as-is; they are inert until the app
   grows a theme toggle.
   =================================================================== */

/* Item rows used inside the More popover. */
.topbar-menu-item[b-mg30y92knq] {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border-radius: 9999px;
  font-size: var(--fs-ui);
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease, color 0.15s ease;
  font-family: inherit;
}
.topbar-menu-item:hover[b-mg30y92knq] { background: var(--surface-3); color: var(--text); }
html.dark .topbar-menu-item:hover[b-mg30y92knq] { background: rgba(255,255,255,0.06); }
.topbar-menu-icon[b-mg30y92knq] {
  color: var(--text-subtle) !important;
  flex-shrink: 0;
  font-size: 18px !important;
}

.topbar-menu-item--danger[b-mg30y92knq] { color: var(--sec-red-text); }
.topbar-menu-item--danger:hover[b-mg30y92knq] {
  background: color-mix(in srgb, var(--sec-red) 18%, var(--surface-2));
  color: var(--sec-red-text);
}

/* Admin controls inside the More popover — pink text + icon, with a compact
   switch on the toggle rows (the two hero views that moved into the menu). */
.topbar-menu-item--admin[b-mg30y92knq] { color: rgb(219, 39, 119); }
.topbar-menu-item--admin .topbar-menu-icon[b-mg30y92knq] { color: rgb(219, 39, 119) !important; }
.topbar-menu-item--admin:hover[b-mg30y92knq] {
  background: rgba(236, 72, 153, 0.12);
  color: rgb(219, 39, 119);
}
html.dark .topbar-menu-item--admin:hover[b-mg30y92knq] { background: rgba(236, 72, 153, 0.16); }

/* Teensy ADMIN badge — pink fill, white letters. margin-left:auto keeps it
   pinned to the row's right edge so it never disrupts the popover's flow. */
.topbar-menu-badge[b-mg30y92knq] {
  margin-left: auto;
  flex-shrink: 0;
  padding: 0 3.5px;
  border-radius: 3px;
  background: rgb(219, 39, 119);
  color: #fff;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.25;
}

/* Toggle rows carry the Switch module (INTEL-390): .sc-mcp-item on the row,
   .is-on when checked, and a WciSwitchTrack (.sc-switch) at the right edge.
   wise.css 22140-22143, the catalog's copy of the chat menu's switch rows
   (.dsc-demo prefix dropped). The track's own rules live with the track in
   WciSwitchTrack.razor.css, including the two margin rules that push the
   track to the row's right edge (they must be scoped to the track). This replaces the compact .topbar-menu-switch
   (wise.css 2634-2683) the menu was first cut with: the Switch card names
   the Chat ⋯ toggles as its own. */
.sc-mcp-item[b-mg30y92knq] { justify-content: flex-start; }
.sc-mcp-item .topbar-menu-badge[b-mg30y92knq] { margin-left: auto; }

/* Locked (upsell) menu rows — muted, no hover lift, a trailing lock glyph. */
.topbar-menu-item.is-locked[b-mg30y92knq] {
  color: var(--text-subtle); cursor: default; position: relative;
}
.topbar-menu-item.is-locked:hover[b-mg30y92knq] { background: none; color: var(--text-subtle); }
html.dark .topbar-menu-item.is-locked:hover[b-mg30y92knq] { background: none; color: var(--text-subtle); }
.topbar-menu-item.is-locked .topbar-menu-icon[b-mg30y92knq] { color: var(--text-subtle) !important; }
.topbar-menu-lock[b-mg30y92knq] { margin-left: auto; font-size: 15px !important; color: var(--text-subtle); }

/* ===================== APP-OWNED ADDITIONS ==========================
   Focus ring, live disabled state and reduced motion. Tokens only. */

.topbar-menu-item:focus-visible[b-mg30y92knq] {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.topbar-menu-item:disabled[b-mg30y92knq],
.topbar-menu-item[aria-disabled="true"][b-mg30y92knq] {
    opacity: 0.5;
    cursor: default;
}

.topbar-menu-item:disabled:hover[b-mg30y92knq],
.topbar-menu-item[aria-disabled="true"]:hover[b-mg30y92knq] {
    background: none;
    color: var(--text-muted);
}

/* A locked row is inert like a disabled one but keeps the design's muted ink rather than the half fade. */
.topbar-menu-item.is-locked:disabled[b-mg30y92knq],
.topbar-menu-item.is-locked[aria-disabled="true"][b-mg30y92knq] {
    opacity: 1;
}

.topbar-menu-item.is-locked:disabled:hover[b-mg30y92knq],
.topbar-menu-item.is-locked[aria-disabled="true"]:hover[b-mg30y92knq] {
    color: var(--text-subtle);
}

@media (prefers-reduced-motion: reduce) {
    .topbar-menu-item[b-mg30y92knq] { transition: none; }
}
/* /Components/DesignSystem/WciPinnedAsk.razor.rz.scp.css */
/* ===================================================================
   WCI component: Pinned ask (WciPinnedAsk), INTEL-597
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo, revision 626714d:
     pages/wise.css
       lines 8539-8587    .sc-pin-ask (the pin, its wash on the thread's
                          backdrop, its shadow, html.dark), the copy's
                          smaller type, .sc-pin-ask-clip and its fade,
                          the hover ease from four lines to six
       lines 8588-8627    .sc-pin-ask-clip first child, .has-stop and
                          .sc-pin-ask-stop (hover reveal, reduced motion,
                          its icon)
       lines 143, 151-153 the stop glyph filled (the shared on-primary
                          icon rule)
     js/all-modules-flow.js
       lines 3983-4011    module "Pinned ask"
   Class names are kept IDENTICAL. What is NOT verbatim:
     - The pin, its copy and its stop are drawn by
       wwwroot/js/wci/wci-pinned-ask.js into this component's element, so
       they carry no scope attribute and every selector is written with
       ::deep under .wci-pinned-ask.
     - --fs-chat is not a WCI token; it falls back as the transcript
       line's own sheet does (0.875rem).
   Requires wwwroot/css/wci/wci-tokens.css.
   =================================================================== */

/* ---- The pin (wise.css 8547-8577) ---- */
.wci-pinned-ask[b-l7wx6xrv3f]  .sc-pin-ask {
  --sc-pin-ask-wash: color-mix(in srgb, var(--primary) 8%, transparent);
  position: absolute;
  z-index: 4;
  box-sizing: border-box;
  padding-block: 0.25rem;
  background: linear-gradient(var(--sc-pin-ask-wash), var(--sc-pin-ask-wash)), var(--sc-pin-ask-bg, var(--bg));
  font-size: var(--fs-ui); line-height: var(--chat-line-height, 1.6);
  cursor: pointer;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--primary) 14%, transparent),
    0 6px 14px -10px rgba(0, 0, 0, 0.28);
  will-change: transform;
}
.wci-pinned-ask[b-l7wx6xrv3f]  .sc-pin-ask[hidden] { display: none; }
html.dark .wci-pinned-ask[b-l7wx6xrv3f]  .sc-pin-ask {
  --sc-pin-ask-wash: color-mix(in srgb, var(--primary-bright, #8B9FAF) 12%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--primary-bright, #8B9FAF) 22%, transparent),
    0 8px 16px -10px rgba(0, 0, 0, 0.6);
}
.wci-pinned-ask[b-l7wx6xrv3f]  .sc-pin-ask:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.wci-pinned-ask[b-l7wx6xrv3f]  .sc-pin-ask .sc-line.sc-line-you { margin: 0; pointer-events: none; }
.wci-pinned-ask[b-l7wx6xrv3f]  .sc-pin-ask .sc-line.sc-line-you::before { content: none; }
.wci-pinned-ask[b-l7wx6xrv3f]  .sc-pin-ask .sc-line-body { font-size: calc(var(--fs-chat, 0.875rem) * 0.86); line-height: 1.35; }
.wci-pinned-ask[b-l7wx6xrv3f]  .sc-pin-ask .sc-prompt { gap: 0.15em; }
.wci-pinned-ask[b-l7wx6xrv3f]  .sc-pin-ask .sc-prompt-list { margin-top: -0.1em; gap: 0; }
.wci-pinned-ask[b-l7wx6xrv3f]  .sc-pin-ask .sc-prompt-list li { line-height: inherit; }
.wci-pinned-ask[b-l7wx6xrv3f]  .sc-pin-ask-clip { max-height: 4lh; overflow: hidden; transition: max-height 0.3s cubic-bezier(0.22, 0.85, 0.25, 1); }
.wci-pinned-ask[b-l7wx6xrv3f]  .sc-pin-ask-clip.is-clamped {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.4lh), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 1.4lh), transparent);
}
/* Hovering or focusing the pinned ask eases it open from four lines to six,
   whether its turn is complete or still running (the stop shows beside it on
   the same hover). The script re-reads the clamp when the ease finishes so
   the fade lifts if six lines is the whole ask. */
@media (hover: hover) {
  .wci-pinned-ask[b-l7wx6xrv3f]  .sc-pin-ask:hover .sc-pin-ask-clip,
  .wci-pinned-ask[b-l7wx6xrv3f]  .sc-pin-ask:focus-visible .sc-pin-ask-clip,
  .wci-pinned-ask[b-l7wx6xrv3f]  .sc-pin-ask:has(:focus-visible) .sc-pin-ask-clip { max-height: 6lh; }
}
@media (prefers-reduced-motion: reduce) { .wci-pinned-ask[b-l7wx6xrv3f]  .sc-pin-ask-clip { transition: none; } }
.wci-pinned-ask[b-l7wx6xrv3f]  .sc-pin-ask-clip > :first-child { margin-top: 0; }

/* ---- The pin's stop (wise.css 8589-8627) ----
   It sits beside the copy rather than over it, so the text wraps short of
   it at one line or four. Same primary circle and stop square as the
   composer's stop, a size down to suit the smaller type. */
.wci-pinned-ask[b-l7wx6xrv3f]  .sc-pin-ask.has-stop:not([hidden]) { display: flex; align-items: center; gap: 0.75rem; }
.wci-pinned-ask[b-l7wx6xrv3f]  .sc-pin-ask.has-stop > .sc-line { flex: 1 1 auto; min-width: 0; }
.wci-pinned-ask[b-l7wx6xrv3f]  .sc-pin-ask-stop {
  flex: none;
  width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: 9999px;
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  line-height: 0; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  transition: background 0.15s ease, opacity 0.18s ease, transform 0.18s cubic-bezier(0.22, 0.85, 0.25, 1);
}
.wci-pinned-ask[b-l7wx6xrv3f]  .sc-pin-ask-stop[hidden] { display: none; }
/* On a pointer that can hover, the stop only shows while the pin is hovered
   (or holds focus), growing in slightly. It keeps its slot at rest so the
   copy never re-wraps as it appears. Touch has no hover, so it stays shown. */
@media (hover: hover) {
  .wci-pinned-ask[b-l7wx6xrv3f]  .sc-pin-ask-stop { opacity: 0; transform: scale(0.8); pointer-events: none; }
  .wci-pinned-ask[b-l7wx6xrv3f]  .sc-pin-ask:hover .sc-pin-ask-stop,
  .wci-pinned-ask[b-l7wx6xrv3f]  .sc-pin-ask:focus-within .sc-pin-ask-stop {
    opacity: 1; transform: scale(1.08); pointer-events: auto;
  }
}
@media (hover: hover) and (prefers-reduced-motion: reduce) {
  .wci-pinned-ask[b-l7wx6xrv3f]  .sc-pin-ask-stop { transform: none; }
  .wci-pinned-ask[b-l7wx6xrv3f]  .sc-pin-ask:hover .sc-pin-ask-stop,
  .wci-pinned-ask[b-l7wx6xrv3f]  .sc-pin-ask:focus-within .sc-pin-ask-stop { transform: none; }
}
.wci-pinned-ask[b-l7wx6xrv3f]  .sc-pin-ask-stop:hover { background: color-mix(in srgb, var(--primary) 86%, black); }
.wci-pinned-ask[b-l7wx6xrv3f]  .sc-pin-ask-stop:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.wci-pinned-ask[b-l7wx6xrv3f]  .sc-pin-ask-stop .material-symbols-outlined {
  font-size: 16px !important; line-height: 1;
  width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ---- APP-OWNED ADDITIONS ---- */
/* The component's element takes no box: the pin is absolute against the
   chat's positioned box, exactly where the transcript is. */
.wci-pinned-ask[b-l7wx6xrv3f] { display: contents; }
/* The app's ask is markdown in Tailwind prose (WiseAiChatHost's
   PromptTemplate), which sets its own size and leading on the block and its
   paragraphs. In the pin the copy takes the pin's smaller type instead, so
   four lines are four lines of the pin's type. */
.wci-pinned-ask[b-l7wx6xrv3f]  .sc-pin-ask-clip .prose,
.wci-pinned-ask[b-l7wx6xrv3f]  .sc-pin-ask-clip .prose :is(p, li, ul, ol, blockquote, h1, h2, h3, h4) { font-size: inherit; line-height: inherit; }
/* /Components/DesignSystem/WciProductDetails.razor.rz.scp.css */
/* WciProductDetails: the ip-b2b Product Details (NFP) module card and its brand banner.
   Source: pages/add-product.html page sheet (ip-b2b checkout read 2026-10-07): .nfp-inner, .nfp-panel-header and its
   html:not(.dark) twin, .nfp-banner-pattern, .nfp-banner-bug, .nfp-banner-titles, .nfp-header-photo-bg (+ ::after and
   the html.dark fade), .nfp-panel-header--photo .nfp-banner-bug, .nfp-banner-title, .nfp-banner-sub. The design's
   #nfp-panel widths (372 / 520) are WciModule's SingleWidth / DoubleWidth. App-owned below the port: the controls'
   white glyphs on the banner, the close button, and the scroll body. */

.nfp-inner[b-2vjm0n0c5e] {
  display: flex; flex-direction: column; flex: 1; min-height: 0; width: 100%;
  border-radius: 16px; overflow: hidden;
  background: linear-gradient(165deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}
html.dark .nfp-inner[b-2vjm0n0c5e] {
  background: linear-gradient(155deg, #1A2339 0%, #0d1b27 60%, #1A2339 100%);
  border: 0;
  box-shadow: 0 4px 56px rgba(0, 0, 0, 0.5), inset 1px 0 0 rgba(37, 80, 124, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.nfp-panel-header[b-2vjm0n0c5e] {
  /* Fixed menus stay in this isolated context. Keep it above the identity strip (5),
     which must still lift its category picker above the other product blocks. */
  position: relative; isolation: isolate; overflow: visible; z-index: 6;
  display: flex; align-items: center; gap: 11px; padding: 10px 14px;
  height: var(--panel-header-h); min-height: var(--panel-header-h);
  box-sizing: border-box; flex-shrink: 0;
  border-bottom: 1px solid color-mix(in srgb, #0b1426 34%, var(--primary));
  background: linear-gradient(118deg,
    color-mix(in srgb, var(--primary) 94%, #0b1426) 0%,
    color-mix(in srgb, var(--primary) 72%, #1a2339) 100%);
}
.nfp-banner-pattern[b-2vjm0n0c5e] { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.nfp-banner-bug[b-2vjm0n0c5e] {
  position: absolute; top: 50%; right: 58px; height: 168%; width: auto;
  color: color-mix(in srgb, #0b1426 32%, var(--primary));
  transform: translateY(-50%) rotate(-16deg);
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.10));
}
.nfp-banner-titles[b-2vjm0n0c5e] { flex: 1; min-width: 0; position: relative; z-index: 2; }
.nfp-header-photo-bg[b-2vjm0n0c5e] { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.nfp-header-photo-bg img[b-2vjm0n0c5e] {
  position: absolute; top: 0; right: 0; height: 100%; width: 58%;
  object-fit: cover; object-position: center 32%; display: block;
}
.nfp-header-photo-bg[b-2vjm0n0c5e]::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--primary) 94%, #0b1426) 0%,
    color-mix(in srgb, var(--primary) 72%, #1a2339) 34%,
    rgba(11, 20, 38, 0.18) 58%,
    rgba(11, 20, 38, 0) 78%);
}
html.dark .nfp-header-photo-bg[b-2vjm0n0c5e]::after {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--primary) 88%, #0b1426) 0%,
    color-mix(in srgb, var(--primary) 62%, #0b1426) 44%,
    rgba(7, 12, 26, 0.42) 74%,
    rgba(7, 12, 26, 0.12) 100%);
}
.nfp-panel-header--photo .nfp-banner-bug[b-2vjm0n0c5e] { opacity: 0.16; }
.nfp-banner-title[b-2vjm0n0c5e] { font-size: 0.86rem; font-weight: 800; letter-spacing: -0.01em; color: #fff; line-height: 1.15; }
.nfp-banner-sub[b-2vjm0n0c5e] {
  font-size: 0.68rem; color: rgba(255, 255, 255, 0.78); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* App-owned: the module's controls sit on the banner, so their glyphs go white (the design's ⋯ and width buttons
   on .nfp-panel-header), with the same 28px circular hover as .nfp-header-photo. */
.panel-controls[b-2vjm0n0c5e] { position: relative; z-index: 5; display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; }
.panel-controls[b-2vjm0n0c5e]  .panel-width-toggle-btn,
.panel-controls[b-2vjm0n0c5e]  .panel-more-btn,
.nfp-close[b-2vjm0n0c5e] { color: #fff; opacity: 0.9; }
.panel-controls[b-2vjm0n0c5e]  .panel-width-toggle-btn:hover,
.panel-controls[b-2vjm0n0c5e]  .panel-more-btn:hover,
.nfp-close:hover[b-2vjm0n0c5e],
.nfp-close:focus-visible[b-2vjm0n0c5e] { opacity: 1; background: rgba(255, 255, 255, 0.24); }
.nfp-close[b-2vjm0n0c5e] {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; cursor: pointer;
}
.nfp-close .material-symbols-outlined[b-2vjm0n0c5e] { font-size: 18px; line-height: 1; }

.nfp-scroll-body[b-2vjm0n0c5e] { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
/* /Components/DesignSystem/WciProductIdentity.razor.rz.scp.css */
/* ===================================================================
   WCI component: Product identity strip (WciProductIdentity), INTEL-408
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo, revision afe74ad
   (pulled 2026-10-05):
     pages/product-details.css
       lines 550-596      the printed UPC-A card: entry, bars, cells,
                          the filled state's hidden underlines
       line  601          .nfp-hero-upc--seg
       lines 605-616      .nfp-fi, header, title, the title's edit field
       lines 625-628      html.dark title focus
       lines 634, 636-645 the size photos
       lines 688-709      "Add size or variation" (+ html.dark)
       lines 713-716      .nfp-fi-group--identity
       lines 718-785      pencil, copy, title, description, price
       lines 789-816, 824 the identity photo row, the selected size
       lines 828-876      the UPC and category stack, the category dock
       lines 878-912      the UPC card in the strip (+ html.dark)
       lines 918-919      the icon tile
       lines 1144-1153    .nfp-edit (shared edit affordance)
       lines 1229-1236    html.dark .nfp-edit
       lines 1240-1245    html.dark: the UPC card stays a white label
     pages/wise.css
       lines 26189-26203  the brand eyebrow
       lines 26238-26260  the Verified and Brand Claimed shields
                          (+ html.dark)
   The strip is drawn only inside the flipped Product Details layout
   (product-details.css 86-89 and 102-132, `.nfp-sp--flip ...`). Those
   rules are its real layout, so they are carried below under the
   component's own wrapper (.wci-identity) in place of the page
   context, values unchanged.
   Not ported: the on-photo variants (.nfp-upc-entry--onphoto 598, the
   .nfp-hero photo hero), the pack delete affordance and its confirm
   (646-687), the html.header-float padding (746, 765-768, 110-111; the
   app has no floating header), the Helix photo (786-788), the size
   select (wise.css 26165-26179), the category select's own rules, and
   the editable UPC boxes' hover / focus / placeholder rules (578-580,
   586-588; the UPC is read-only here).
   The category dock's rules for the select inside it reach the host's
   markup through ::deep (the slot's content carries the host's scope).
   Every element the strip draws is written in its .razor markup, so the
   scoped selectors here match (none come from C# render fragments).
   Rule 10: the root is the app-owned .wci-identity wrapper.
   Class names are kept IDENTICAL to the design's sheets.
   =================================================================== */

/* ---- product-details.css 550-596, 601: the printed UPC-A card ---- */
.nfp-upc-entry[b-h0aor2g7oe] {
  display: flex; flex-direction: column; align-items: center; gap: 0; width: 100%; box-sizing: border-box;
  background: #fff; border: 1px solid #d2d8e0; border-radius: 0;
  padding: 14px 12px 10px; box-shadow: 0 1px 2px rgba(7,12,26,0.06);
}
.nfp-upc-mark[b-h0aor2g7oe] { display: flex; flex-direction: column; align-items: stretch; width: 100%; }
.nfp-upc-barcode[b-h0aor2g7oe] {
  width: auto; height: 72px;
  margin: 0 1.3em -12px;
  display: block;
}
.nfp-upc-bc[b-h0aor2g7oe] { display: block; width: 100%; height: 100%; fill: #111; }
.nfp-upc-bc--preview[b-h0aor2g7oe] { opacity: 0.22; }
.nfp-upc-cells[b-h0aor2g7oe] {
  display: grid;
  grid-template-columns: 1.3em minmax(0, 1fr) 0.95em minmax(0, 1fr) 1.3em;
  align-items: end;
  width: 100%;
  column-gap: 0;
}
.nfp-upc-group[b-h0aor2g7oe] {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2px; min-width: 0; padding: 0 10%;
}
.nfp-upc-gutter[b-h0aor2g7oe] { width: auto; min-width: 0; }
.nfp-upc-cell[b-h0aor2g7oe] {
  flex: 1 1 0; min-width: 0; width: auto; height: 32px; box-sizing: border-box;
  font-family: var(--font-mono); font-size: 1.1rem; font-weight: 700;
  letter-spacing: 0; text-align: center; padding: 0 0 3px;
  color: #111; background: transparent;
  border: none; border-bottom: 2px solid var(--border-strong); border-radius: 0; outline: none;
  transition: border-color 0.15s ease;
}
.nfp-upc-cell--lone[b-h0aor2g7oe] {
  flex: none; width: 100%; min-width: 0; max-width: none;
}
/* Once all 12 digits are in, drop the underlines so it reads like a printed
   code. (The design's hover / focus / placeholder rules for the editable
   boxes, 578-580 and 586-588, are not ported: the UPC is read-only here.) */
.nfp-upc-entry--filled .nfp-upc-cell[b-h0aor2g7oe] { border-bottom-color: transparent; }
.nfp-hero-upc--seg[b-h0aor2g7oe] { max-width: 320px; }

/* ---- product-details.css 605-616, 625-628: the strip, header, title ---- */
.nfp-fi[b-h0aor2g7oe] { background: transparent; border-bottom: none; padding: 14px 14px 14px; }
.nfp-fi:has(.nfp-fi-group--identity)[b-h0aor2g7oe] { padding: 0; overflow: visible; }
.nfp-fi-header[b-h0aor2g7oe] { display: flex; align-items: flex-start; justify-content: flex-start; gap: 8px; margin-bottom: 4px; min-width: 0; }
.nfp-fi-title[b-h0aor2g7oe] { font-family: 'WISE Digits', 'DM Sans', system-ui, sans-serif; font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; color: var(--text); flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.nfp-fi-title .nfp-edit[b-h0aor2g7oe] {
  font: inherit; letter-spacing: inherit; color: inherit; padding: 0;
  overflow-wrap: inherit; white-space: normal;
}
.nfp-fi-title .nfp-edit:focus[b-h0aor2g7oe] {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary) 35%, transparent);
}
html.dark .nfp-fi-title .nfp-edit:focus[b-h0aor2g7oe] {
  background: color-mix(in srgb, var(--text) 8%, transparent);
  box-shadow: inset 0 0 0 2px var(--primary-bright, var(--primary));
}

/* ---- product-details.css 634, 636-645: the size photos ---- */
.nfp-fi-group[b-h0aor2g7oe] { flex: 1 1 0; min-width: 0; }
.nfp-fi-thumbs[b-h0aor2g7oe] { display: flex; justify-content: flex-start; align-items: flex-start; gap: 6px; flex-wrap: wrap; }
.nfp-fi-thumb[b-h0aor2g7oe] { display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; width: 44px; position: relative; overflow: visible; }
.nfp-fi-thumb-frame[b-h0aor2g7oe] { position: relative; width: 40px; height: 40px; flex-shrink: 0; transition: transform 0.12s; }
.nfp-fi-thumb-img[b-h0aor2g7oe] { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; border: 2px solid var(--border); background: var(--surface-2); display: block; transition: border-color 0.15s; }
.nfp-fi-thumb:hover .nfp-fi-thumb-frame[b-h0aor2g7oe],
.nfp-fi-thumb.is-del-open .nfp-fi-thumb-frame[b-h0aor2g7oe] { transform: scale(1.08); }
.nfp-fi-thumb:hover .nfp-fi-thumb-img[b-h0aor2g7oe],
.nfp-fi-thumb.is-del-open .nfp-fi-thumb-img[b-h0aor2g7oe] { border-color: color-mix(in srgb, var(--primary) 55%, var(--border)); }
.nfp-fi-thumb.active .nfp-fi-thumb-img[b-h0aor2g7oe] { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 22%, transparent); }
.nfp-fi-thumb-label[b-h0aor2g7oe] { font-size: 0.58rem; font-weight: 600; color: var(--text-muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* ---- product-details.css 688-709: Add size or variation ---- */
.nfp-fi-add[b-h0aor2g7oe] {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  width: 76px; cursor: pointer; color: var(--text-subtle); background: transparent;
}
.nfp-fi-add-sq[b-h0aor2g7oe] {
  width: 40px; height: 40px; border-radius: 10px; border: 2px dashed var(--border-strong);
  background: var(--surface-2); color: inherit;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: border-color 0.15s, transform 0.12s;
}
.nfp-fi-add:hover[b-h0aor2g7oe] { color: var(--primary-ink, var(--primary)); }
.nfp-fi-add:hover .nfp-fi-add-sq[b-h0aor2g7oe] { border-color: var(--primary); transform: scale(1.08); }
.nfp-fi-add .material-symbols-outlined[b-h0aor2g7oe] { font-size: 18px !important; }
.nfp-fi-add-label[b-h0aor2g7oe] {
  font-size: 0.58rem; font-weight: 600; color: var(--text-muted);
  text-align: center; line-height: 1.2; max-width: 100%;
}
.nfp-fi-add:hover .nfp-fi-add-label[b-h0aor2g7oe] { color: var(--primary-ink, var(--primary)); }
html.dark .nfp-fi-add:hover[b-h0aor2g7oe] { color: var(--primary-bright, var(--primary)); }
html.dark .nfp-fi-add:hover .nfp-fi-add-sq[b-h0aor2g7oe] { border-color: var(--primary-bright, var(--primary)); }
html.dark .nfp-fi-add:hover .nfp-fi-add-label[b-h0aor2g7oe] { color: var(--primary-bright, var(--primary)); }
.nfp-fi-thumb-icon[b-h0aor2g7oe] { border-radius: 50%; }

/* ---- product-details.css 713-785: the identity layout ---- */
.nfp-fi-group--identity[b-h0aor2g7oe] {
  position: relative; isolation: isolate; padding: 14px 14px 18px;
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
}
/* Pencil on the selected size photo — circle, not a tile. */
.nfp-fi-lead-edit[b-h0aor2g7oe] {
  position: absolute; top: 4px; left: 4px; z-index: 3;
  width: 22px; height: 22px; padding: 0; margin: 0; border: 0;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55); color: #fff; cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
}
.nfp-fi-lead-edit .material-symbols-outlined[b-h0aor2g7oe] {
  font-size: 14px !important; line-height: 1 !important;
}
.nfp-fi-lead-edit:hover[b-h0aor2g7oe],
.nfp-fi-lead-edit:focus-visible[b-h0aor2g7oe] {
  background: rgba(0,0,0,0.72);
}
html.dark .nfp-fi-desc[b-h0aor2g7oe] { color: var(--text-muted); }
.nfp-fi-copy[b-h0aor2g7oe] { min-width: 0; }
.nfp-fi-group--identity .nfp-fi-header[b-h0aor2g7oe] {
  margin-bottom: 6px; align-items: flex-start; gap: 10px; flex-wrap: nowrap;
}
.nfp-fi-group--identity .nfp-fi-title[b-h0aor2g7oe] {
  font-family: 'WISE Digits', var(--module-title-family, 'DM Sans', system-ui, sans-serif);
  font-weight: var(--module-title-weight, 800);
  font-size: var(--module-title-size, 1.2rem);
  letter-spacing: -0.01em;
  line-height: var(--module-title-lh, 1.16);
}
.nfp-fi-desc[b-h0aor2g7oe] {
  margin: 0 0 8px; font-size: 0.8125rem; line-height: 1.45; color: var(--text-muted);
  width: 100%; max-width: none;
  text-wrap: pretty;
}
.nfp-fi-group--identity .nfp-fi-header[b-h0aor2g7oe],
.nfp-fi-group--identity .nfp-fi-title[b-h0aor2g7oe],
.nfp-fi-group--identity .nfp-fi-details[b-h0aor2g7oe],
.nfp-fi-group--identity .nfp-fi-desc[b-h0aor2g7oe] {
  margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0;
}
.nfp-fi-group--identity .nfp-fi-title .nfp-edit[b-h0aor2g7oe],
.nfp-fi-group--identity .nfp-fi-desc .nfp-edit[b-h0aor2g7oe] {
  padding-left: 0; padding-right: 0;
}
.nfp-fi-group--identity .nfp-edit[b-h0aor2g7oe]::after { left: 0; right: 0; }
.nfp-fi-desc .nfp-edit[b-h0aor2g7oe] {
  display: block; width: 100%; box-sizing: border-box;
  font: inherit; color: inherit;
  padding-left: 0; padding-right: 0;
  overflow-wrap: break-word;
  text-wrap: pretty;
}
.nfp-fi-price[b-h0aor2g7oe] {
  display: flex; align-items: baseline; justify-content: center; gap: 2px; flex-wrap: wrap;
  margin: 0 0 12px; font-size: 1.05rem; font-weight: 800; color: var(--text); letter-spacing: -0.01em;
  text-align: center;
}
.nfp-fi-price .nfp-edit[b-h0aor2g7oe] { font: inherit; font-weight: 800; letter-spacing: inherit; color: inherit; }
.nfp-fi-group--identity .nfp-fi-price[b-h0aor2g7oe] { margin-bottom: 0; }

/* ---- product-details.css 789-816, 824: the photo row ---- */
.nfp-fi-group--identity .nfp-fi-thumbs[b-h0aor2g7oe] {
  justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px; row-gap: 10px;
  padding-bottom: 1.7rem;
}
/* Labels hang under the frames so the smaller photos and the + tile
   center on the selected image, not on the whole column. */
.nfp-fi-group--identity .nfp-fi-thumb[b-h0aor2g7oe],
.nfp-fi-group--identity .nfp-fi-add[b-h0aor2g7oe] {
  position: relative;
}
.nfp-fi-group--identity .nfp-fi-thumb-label[b-h0aor2g7oe],
.nfp-fi-group--identity .nfp-fi-add-label[b-h0aor2g7oe] {
  position: absolute; top: calc(100% + 3px); left: 50%;
  transform: translateX(-50%);
}
.nfp-fi-group--identity .nfp-fi-thumb.active[b-h0aor2g7oe] {
  width: 76px;
}
.nfp-fi-group--identity .nfp-fi-thumb.active .nfp-fi-thumb-frame[b-h0aor2g7oe],
.nfp-fi-group--identity .nfp-fi-thumb.active .nfp-fi-thumb-img[b-h0aor2g7oe] {
  width: 68px; height: 68px;
}
.nfp-fi-group--identity .nfp-fi-thumb.active .nfp-fi-thumb-img[b-h0aor2g7oe] {
  border-radius: 12px;
}
.nfp-fi-group--identity .nfp-fi-thumb.active .nfp-fi-thumb-icon .material-symbols-outlined[b-h0aor2g7oe] {
  font-size: 28px !important;
}
.nfp-fi-group--identity .nfp-fi-add[b-h0aor2g7oe] { align-self: center; flex-shrink: 0; }

/* ---- product-details.css 828-876: the UPC and category stack ---- */
.nfp-fi-upc-stack[b-h0aor2g7oe] {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; width: auto; min-width: 0;
}
.nfp-fi-upc-stack .nfp-fi-upc[b-h0aor2g7oe] { margin: 0; }
.nfp-fi-cat--dock[b-h0aor2g7oe] {
  flex: 0 0 auto; align-self: center; margin: 0; min-width: 0;
  display: flex; align-items: center; justify-content: center; height: auto;
  width: auto; max-width: 100%;
}
.nfp-fi-cat--dock .nfp-hero-cat[b-h0aor2g7oe] {
  width: auto; max-width: 100%; height: auto;
  align-items: center; flex-wrap: nowrap; margin: 0; justify-content: center;
}
/* The select below the dock is the host's markup (the Category slot), which
   carries the host's scope, so these rules reach it through ::deep from the
   dock this component draws. Selectors otherwise as the design writes them. */
.nfp-fi-cat--dock[b-h0aor2g7oe]  .nfp-cat-select { width: auto; max-width: 100%; height: auto; }
.nfp-fi-cat--dock[b-h0aor2g7oe]  .nfp-cat-native {
  width: auto; max-width: 100%; height: auto; min-height: 0;
  box-sizing: border-box; padding: 2px 18px 2px 20px; line-height: 1.3;
  font-size: 0.72rem; font-weight: 650;
  background: transparent; border: none; border-radius: 0;
  color: var(--primary); box-shadow: none; cursor: pointer;
}
.nfp-fi-cat--dock[b-h0aor2g7oe]  .nfp-cat-native:hover,
.nfp-fi-cat--dock[b-h0aor2g7oe]  .nfp-cat-native:focus {
  background: transparent; border: none; box-shadow: none;
  color: var(--primary); text-decoration: underline;
  text-underline-offset: 2px;
}
.nfp-fi-cat--dock.nfp-cat-select--err[b-h0aor2g7oe]  .nfp-cat-native,
.nfp-fi-cat--dock[b-h0aor2g7oe]  .nfp-cat-select--err .nfp-cat-native {
  box-shadow: none; color: var(--sec-red);
}
.nfp-fi-cat--dock[b-h0aor2g7oe]  .nfp-cat-select-ic {
  left: 0; top: 50%; transform: translateY(-50%); font-size: 14px !important;
  color: var(--primary);
}
.nfp-fi-cat--dock[b-h0aor2g7oe]  .nfp-cat-select-caret {
  right: 0; top: 50%; transform: translateY(-50%); font-size: 16px !important;
  color: var(--primary);
}
html.dark .nfp-fi-cat--dock[b-h0aor2g7oe]  .nfp-cat-native,
html.dark .nfp-fi-cat--dock[b-h0aor2g7oe]  .nfp-cat-native:hover,
html.dark .nfp-fi-cat--dock[b-h0aor2g7oe]  .nfp-cat-native:focus,
html.dark .nfp-fi-cat--dock[b-h0aor2g7oe]  .nfp-cat-select-ic,
html.dark .nfp-fi-cat--dock[b-h0aor2g7oe]  .nfp-cat-select-caret {
  color: var(--primary-bright, var(--primary));
  background: transparent;
}
.nfp-fi-cat--dock[b-h0aor2g7oe]  .nfp-hero-field-note { display: none; }

/* ---- product-details.css 878-912: the UPC card in the strip ---- */
.nfp-fi-upc[b-h0aor2g7oe] {
  flex: 0 0 auto; width: auto; margin-left: 0;
  display: flex; justify-content: center; align-items: center;
}
.nfp-fi-upc .nfp-upc-entry[b-h0aor2g7oe] {
  align-items: center;
}
.nfp-fi-upc .nfp-hero-upc[b-h0aor2g7oe],
.nfp-fi-upc .nfp-hero-upc--seg[b-h0aor2g7oe],
.nfp-fi-upc .nfp-upc-entry[b-h0aor2g7oe] {
  flex: 0 0 232px; width: 232px; min-width: 232px; max-width: 232px;
  flex-shrink: 0; box-sizing: border-box;
}
.nfp-fi-upc .nfp-upc-entry[b-h0aor2g7oe] {
  padding: 7px 8px 5px; gap: 0; border-radius: 0;
  background: #fff;
}
.nfp-fi-upc .nfp-upc-barcode[b-h0aor2g7oe] { height: 44px; flex-shrink: 0; margin: 0 1.2em -8px; }
.nfp-fi-upc .nfp-upc-cells[b-h0aor2g7oe] {
  display: grid;
  grid-template-columns: 1.2em minmax(0, 1fr) 0.9em minmax(0, 1fr) 1.2em;
  width: 100%;
}
.nfp-fi-upc .nfp-upc-gutter[b-h0aor2g7oe] { width: auto; flex: none; }
.nfp-fi-upc .nfp-upc-group[b-h0aor2g7oe] { gap: 1px; padding: 0 8%; }
.nfp-fi-upc .nfp-upc-cell[b-h0aor2g7oe] {
  flex: 1 1 0; width: auto; min-width: 0; max-width: none;
  height: 20px; font-size: 0.78rem; padding: 0 0 1px; border-bottom-width: 1px;
}
.nfp-fi-upc .nfp-upc-cell--lone[b-h0aor2g7oe] {
  flex: none; width: 100%; min-width: 0; max-width: none;
}
html.dark .nfp-fi-upc .nfp-upc-entry:not(.nfp-upc-entry--onphoto)[b-h0aor2g7oe] {
  background: #fff;
}

/* ---- product-details.css 918-919: the icon tile ---- */
.nfp-fi-thumb-icon[b-h0aor2g7oe] { display: flex; align-items: center; justify-content: center; color: var(--text-subtle); }
.nfp-fi-thumb-icon .material-symbols-outlined[b-h0aor2g7oe] { font-size: 20px !important; }

/* ---- product-details.css 1144-1153, 1229-1236: the edit affordance ---- */
.nfp-edit[b-h0aor2g7oe] { position: relative; cursor: text; border-radius: 3px; padding: 0 2px; transition: background 0.12s, box-shadow 0.12s; outline: none; }
.nfp-edit[b-h0aor2g7oe]::after {
  content: ''; position: absolute; left: 2px; right: 2px; bottom: 0; height: 1px;
  background: var(--primary); transform: scaleX(0); transform-origin: left;
  transition: transform 0.15s ease; pointer-events: none;
}
.nfp-edit:hover[b-h0aor2g7oe]::after { transform: scaleX(1); }
.nfp-edit:focus[b-h0aor2g7oe]::after { transform: scaleX(0); }
.nfp-edit:focus[b-h0aor2g7oe] { background: #fff; box-shadow: inset 0 0 0 2px var(--primary); }
.nfp-edit-empty[b-h0aor2g7oe] { color: #9ca3af; font-style: italic; }
html.dark .nfp-edit[b-h0aor2g7oe]::after { background: var(--primary-bright, var(--primary)); }
html.dark .nfp-edit:focus[b-h0aor2g7oe] {
  background: color-mix(in srgb, var(--text) 8%, transparent);
  box-shadow: inset 0 0 0 2px var(--primary-bright);
}
html.dark .nfp-edit-empty[b-h0aor2g7oe] { color: var(--text-subtle); }

/* ---- product-details.css 1240-1245: the UPC card stays a white label ---- */
html.dark .nfp-upc-entry:not(.nfp-upc-entry--onphoto)[b-h0aor2g7oe] {
  background: #fff; border-color: #d2d8e0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
html.dark .nfp-upc-entry:not(.nfp-upc-entry--onphoto) .nfp-upc-bc[b-h0aor2g7oe] { fill: #111; }
html.dark .nfp-upc-entry:not(.nfp-upc-entry--onphoto) .nfp-upc-cell[b-h0aor2g7oe] { color: #111; }

/* ---- wise.css 26189-26203: the brand eyebrow ---- */
.nfp-fi-brand[b-h0aor2g7oe] { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.nfp-fi-brand .nfp-brand-logo[b-h0aor2g7oe] {
  width: 30px; height: 30px; flex: 0 0 auto;
  border-radius: 50%; overflow: hidden; padding: 0; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; box-shadow: 0 0 0 1px var(--border);
}
.nfp-fi-brand .nfp-brand-logo:hover[b-h0aor2g7oe],
.nfp-fi-brand .nfp-brand-logo:focus-visible[b-h0aor2g7oe],
.nfp-fi-brand .nfp-brand-logo.nfp-hero-drag[b-h0aor2g7oe] { box-shadow: 0 0 0 2px var(--primary); }
.nfp-fi-brand .nfp-brand-logo img[b-h0aor2g7oe] { width: 100%; height: 100%; object-fit: cover; display: block; }
.nfp-fi-brand .nfp-brand-logo-mono[b-h0aor2g7oe] {
  font-weight: 800; font-size: 0.62rem; letter-spacing: -0.02em; color: var(--primary);
}
.nfp-fi-brand-name[b-h0aor2g7oe] { font-weight: 700; font-size: 0.9rem; color: var(--text); letter-spacing: 0.01em; }

/* ---- wise.css 26238-26260: the status shields ---- */
.nfp-status-badges[b-h0aor2g7oe] {
  display: inline-flex; align-items: center; gap: 5px;
  vertical-align: -3px; margin-left: 7px; white-space: nowrap;
}
/* The editable name flows inline so the shields sit right after it (rather
   than the name filling the row and pushing them to the far right). */
.nfp-fi-group--identity .nfp-fi-title .nfp-edit[b-h0aor2g7oe],
.wci-identity .nfp-fi-group--identity .nfp-fi-title .nfp-edit[b-h0aor2g7oe] {
  display: inline; width: auto;
}
.nfp-status-badge[b-h0aor2g7oe] {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; padding: 0; background: none;
  flex: 0 0 auto; line-height: 1; cursor: default;
}
.nfp-status-badge .material-symbols-outlined[b-h0aor2g7oe] {
  font-size: 20px !important; line-height: 1 !important;
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}
.nfp-status-badge--verified[b-h0aor2g7oe],
.nfp-status-badge--claimed[b-h0aor2g7oe] { color: var(--primary); }
html.dark .nfp-status-badge--verified[b-h0aor2g7oe],
html.dark .nfp-status-badge--claimed[b-h0aor2g7oe] { color: var(--primary-bright, #60A5FA); }

/* ---- product-details.css 86-89, 102-132: the flipped Product Details
   layout, re-scoped from `.nfp-sp--flip` to the component wrapper. ---- */
.wci-identity .nfp-fi-group--identity[b-h0aor2g7oe] {
  padding: 20px 12px 18px;
}
.wci-identity .nfp-fi-group--identity[b-h0aor2g7oe] {
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
}
.wci-identity .nfp-fi-copy[b-h0aor2g7oe] { display: block; min-width: 0; }
.wci-identity .nfp-fi-group--identity .nfp-fi-header[b-h0aor2g7oe] {
  flex-wrap: wrap; min-width: 0;
  align-items: flex-start; margin-bottom: 6px;
}
.wci-identity .nfp-fi-title[b-h0aor2g7oe] {
  flex: 1 1 auto; min-width: 0;
  overflow-wrap: break-word; word-break: normal;
}
.wci-identity .nfp-fi-details[b-h0aor2g7oe] {
  display: flex; flex-direction: column; flex-wrap: nowrap;
  align-items: stretch; gap: 8px; min-width: 0;
}
.wci-identity .nfp-fi-desc[b-h0aor2g7oe] { flex: none; width: 100%; max-width: none; margin: 0; }
.wci-identity .nfp-fi-price[b-h0aor2g7oe] { margin: 0; }
.wci-identity .nfp-fi-thumbs[b-h0aor2g7oe] { flex: none; width: 100%; }
.wci-identity .nfp-fi-details > .nfp-fi-upc[b-h0aor2g7oe],
.wci-identity .nfp-fi-details > .nfp-fi-upc-stack[b-h0aor2g7oe] {
  width: 100%; margin: 0; justify-content: center; align-items: center;
}
.wci-identity .nfp-fi-upc .nfp-hero-upc[b-h0aor2g7oe],
.wci-identity .nfp-fi-upc .nfp-hero-upc--seg[b-h0aor2g7oe],
.wci-identity .nfp-fi-upc .nfp-upc-entry[b-h0aor2g7oe] {
  flex: 0 1 232px; width: auto; min-width: 0; max-width: 100%;
}

/* ===================================================================
   APP-OWNED ADDITIONS
   =================================================================== */

/* The root carries no margin (REGISTRY rule 10); it only holds the strip.
   --wci-upc-ink is the printed label's ink: the design draws the UPC card as
   a white label in both themes (fill #111 above, 1240-1245), so its digits
   take that ink rather than a theme token, which would turn light in dark. */
.wci-identity[b-h0aor2g7oe] { display: block; min-width: 0; --wci-upc-ink: #111; }

/* A logo with no replace action is a picture, not a control. */
.nfp-fi-brand .nfp-brand-logo.wci-identity-static[b-h0aor2g7oe] { cursor: default; }
.nfp-fi-brand .nfp-brand-logo.wci-identity-static:hover[b-h0aor2g7oe] { box-shadow: 0 0 0 1px var(--border); }

/* With a logo, the monogram waits behind it and shows only if the logo fails
   (the inline onerror classes the img; FoodImage's class-toggle fallback). */
.nfp-fi-brand .nfp-brand-logo-mono.wci-mono-behind[b-h0aor2g7oe] { display: none; }
.nfp-fi-brand .nfp-brand-logo img.wci-img-broken[b-h0aor2g7oe] { display: none; }
.nfp-fi-brand .nfp-brand-logo img.wci-img-broken + .nfp-brand-logo-mono[b-h0aor2g7oe] { display: inline; }

/* A size photo that fails to load gives way to the size's icon tile. */
.nfp-fi-thumb-frame .wci-img-fallback[b-h0aor2g7oe] { display: none; }
.nfp-fi-thumb-frame img.wci-img-broken[b-h0aor2g7oe] { display: none; }
.nfp-fi-thumb-frame img.wci-img-broken + .wci-img-fallback[b-h0aor2g7oe] { display: flex; }

/* The design's add tile is a div; here it is a real button, so it drops
   the user agent's button chrome. */
.nfp-fi-add[b-h0aor2g7oe] { border: 0; padding: 0; margin: 0; font: inherit; }

/* The design's thumb is one clickable div with the pencil inside it. Here the
   pick is a real <button> filling the thumb, and the pencil is its sibling,
   so no control sits inside another. The pencil keeps the design's place:
   4px into the 68px frame, which is itself centred 4px into the 76px thumb. */
.wci-thumb-pick[b-h0aor2g7oe] {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  width: 100%; margin: 0; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; cursor: pointer;
}
.nfp-fi-thumb > .nfp-fi-lead-edit[b-h0aor2g7oe] { top: 4px; left: 8px; }

/* The name as the page's heading keeps the title's type and stays inline,
   so the shields still ride its line. */
.wci-identity-heading[b-h0aor2g7oe] { display: inline; margin: 0; font: inherit; color: inherit; letter-spacing: inherit; }

/* The design edits through contenteditable spans; here the edit fields are
   real <textarea> / <input> elements (CLAUDE.md binding rules), so they
   drop the form control chrome and size to their content. A form control
   paints no ::after, so the hover underline is an inset rule instead. */
.wci-edit[b-h0aor2g7oe] {
  appearance: none; -webkit-appearance: none;
  border: 0; margin: 0; background: transparent;
  font: inherit; color: inherit; letter-spacing: inherit;
  resize: none; overflow: hidden; field-sizing: content;
  max-width: 100%; min-width: 2ch; vertical-align: baseline;
}
.wci-edit[b-h0aor2g7oe]::placeholder { color: var(--text-subtle); font-style: italic; opacity: 1; }
.wci-edit:hover:not(:focus)[b-h0aor2g7oe] { box-shadow: inset 0 -1px 0 var(--primary); }
html.dark .wci-edit:hover:not(:focus)[b-h0aor2g7oe] { box-shadow: inset 0 -1px 0 var(--primary-bright, var(--primary)); }
.wci-edit--name[b-h0aor2g7oe] { display: inline-block; min-width: 8ch; }
.wci-edit--desc[b-h0aor2g7oe] { display: block; width: 100%; min-height: 2.9em; }
.wci-edit--brand[b-h0aor2g7oe] { flex: 1 1 auto; min-width: 6ch; }
.wci-edit--price[b-h0aor2g7oe] { text-align: center; min-width: 5ch; }

/* The UPC boxes are read-only spans: centre the digit on the box's baseline
   rule the way the design's input sits its text. */
span.nfp-upc-cell[b-h0aor2g7oe] { display: flex; align-items: flex-end; justify-content: center; line-height: 1; }

/* A code that is not a valid UPC-A has no bars: its digits on the white card. */
.wci-upc-plain[b-h0aor2g7oe] { justify-content: center; min-height: 40px; }
.wci-upc-digits[b-h0aor2g7oe] {
  font-family: var(--font-mono); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.08em; color: var(--wci-upc-ink);
}

/* No code where one is required: the card's missing state. */
.nfp-fi-upc .nfp-upc-entry.wci-upc-missing[b-h0aor2g7oe],
html.dark .nfp-fi-upc .nfp-upc-entry.wci-upc-missing[b-h0aor2g7oe] {
  background: var(--sec-red-10);
  border: 1px dashed color-mix(in srgb, var(--sec-red) 45%, transparent);
  box-shadow: none;
}
.wci-upc-missing-text[b-h0aor2g7oe] { font-size: 0.75rem; font-weight: 700; color: var(--sec-red-text); }

.wci-thumb-pick:focus-visible[b-h0aor2g7oe],
.nfp-fi-add:focus-visible[b-h0aor2g7oe],
.nfp-status-badge:focus-visible[b-h0aor2g7oe] { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 12px; }

@media (prefers-reduced-motion: reduce) {
  .nfp-fi-thumb-frame[b-h0aor2g7oe],
  .nfp-fi-add-sq[b-h0aor2g7oe],
  .nfp-edit[b-h0aor2g7oe]::after,
  .nfp-upc-cell[b-h0aor2g7oe] { transition: none; }
  .nfp-fi-thumb:hover .nfp-fi-thumb-frame[b-h0aor2g7oe],
  .nfp-fi-add:hover .nfp-fi-add-sq[b-h0aor2g7oe] { transform: none; }
}
/* /Components/DesignSystem/WciProductLifecycle.razor.rz.scp.css */
/* ===================================================================
   WCI component: Product lifecycle banner (WciProductLifecycle), INTEL-413
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo, revision afe74ad
   (pulled 2026-10-05):
     pages/wise.css
       lines 26306-26345  .nfp-ins-next, the dots and their states
                          (+ html.dark)
       lines 26357-26374  body, title, sentence, the action button
       lines 26400-26421  head, eyebrow, the Reports actions, --soft
                          (+ html.dark)
     pages/product-details.css
       lines 1550-1560    the shared 40px CTA height
     js/add-product-flow.js
       lines 2317-2600    the steps, kinds, copy and the dot preview
   Not ported: .nfp-ins-next-ic / -shield (26346-26356, the icon column
   the flipped layout drops) and the .nfp-sp-media placement
   (26375-26383, the legacy photo column).
   The design draws the banner only inside the flipped Product Details
   layout (.nfp-sp--flip .nfp-sp-facts, 26387-26399 and the -head /
   -actions rows). Those rules are the banner's real layout, so they are
   carried below under the component's own wrapper (.wci-lifecycle) in
   place of the page context, values unchanged.
   Rule 10: .nfp-ins-next centres itself with margin auto, so it is not
   the component root; the root is the app-owned .wci-lifecycle.
   Class names are kept IDENTICAL to wise.css.
   =================================================================== */

.nfp-ins-next[b-xyup07ai66] {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 10px; align-items: start; justify-items: stretch;
  width: 100%; max-width: 500px; margin-left: auto; margin-right: auto;
  box-sizing: border-box;
  padding: 16px 18px; border-radius: 16px;
  background: var(--primary-soft); border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
}
.nfp-ins-next-dots[b-xyup07ai66] {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: center;
  gap: 7px; padding: 0 0 2px; margin: 0;
}
.nfp-ins-dot[b-xyup07ai66] {
  width: 7px; height: 7px; padding: 0; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--primary) 38%, var(--border));
  background: transparent; box-shadow: none;
  cursor: pointer; appearance: none; -webkit-appearance: none;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, width 0.15s ease, height 0.15s ease;
}
.nfp-ins-dot.is-done[b-xyup07ai66] {
  background: color-mix(in srgb, var(--primary) 55%, transparent);
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
}
.nfp-ins-dot.is-current[b-xyup07ai66] {
  width: 9px; height: 9px;
  background: var(--primary); border-color: var(--primary);
}
.nfp-ins-dot:hover[b-xyup07ai66] { transform: scale(1.2); }
.nfp-ins-dot:focus-visible[b-xyup07ai66] { outline: 2px solid var(--primary); outline-offset: 3px; }
html.dark .nfp-ins-dot[b-xyup07ai66] {
  border-color: color-mix(in srgb, var(--primary-bright, var(--primary)) 45%, var(--border));
}
html.dark .nfp-ins-dot.is-done[b-xyup07ai66] {
  background: color-mix(in srgb, var(--primary-bright, var(--primary)) 50%, transparent);
  border-color: color-mix(in srgb, var(--primary-bright, var(--primary)) 50%, transparent);
}
html.dark .nfp-ins-dot.is-current[b-xyup07ai66] {
  background: var(--primary-bright, var(--primary));
  border-color: var(--primary-bright, var(--primary));
}
.nfp-ins-next-body[b-xyup07ai66] { grid-column: 1; min-width: 0; text-align: center; }
.nfp-ins-next-title[b-xyup07ai66] { font-family: 'WISE Digits', 'DM Sans', system-ui, sans-serif; font-size: 1.15rem; font-weight: 700; color: var(--text); line-height: 1.2; text-align: center; }
.nfp-ins-next-desc[b-xyup07ai66] { font-size: 0.8rem; color: var(--text-muted); line-height: 1.45; margin-top: 3px; max-width: none; text-align: center; }
.nfp-ins-next-btn[b-xyup07ai66] {
  grid-column: 1 / -1; margin: 0; width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer;
  border: none; border-radius: 999px; padding: 10px 18px;
  font-family: 'WISE Digits', 'DM Sans', system-ui, sans-serif; font-size: 0.82rem; font-weight: 700;
  background: var(--primary); color: #fff; text-decoration: none; transition: filter 0.15s;
  appearance: none; -webkit-appearance: none;
  white-space: normal; text-align: center; line-height: 1.25;
  height: auto; min-height: 40px;
}
.nfp-ins-next-btn:hover[b-xyup07ai66] { filter: brightness(1.07); text-decoration: none; }
.nfp-ins-next-btn .material-symbols-outlined[b-xyup07ai66] {
  font-size: 18px !important;
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.nfp-ins-next-head[b-xyup07ai66] {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 100%;
}
.nfp-ins-next-eyebrow[b-xyup07ai66] {
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--text-subtle); line-height: 1;
}
/* Reports card stacks its download buttons where a single CTA normally sits. */
.nfp-ins-next-actions[b-xyup07ai66] {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; gap: 8px; width: 100%;
}
.nfp-ins-next-btn--soft[b-xyup07ai66] {
  background: var(--primary-soft) !important;
  color: var(--primary-ink, var(--primary)) !important;
}
.nfp-ins-next-btn--soft:hover[b-xyup07ai66] { filter: none; background: color-mix(in srgb, var(--primary) 16%, var(--surface)) !important; }
html.dark .nfp-ins-next-btn--soft[b-xyup07ai66] { color: var(--primary-bright, var(--primary)) !important; }

/* product-details.css 1550-1560: shared CTA height. */
.nfp-ins-next-btn[b-xyup07ai66] {
  box-sizing: border-box;
  height: 40px; min-height: 40px;
  padding-top: 0; padding-bottom: 0;
  font-size: 0.82rem;
}
.nfp-ins-next-btn .material-symbols-outlined[b-xyup07ai66] { font-size: 18px !important; }

/* wise.css 26387-26399, 26405, 26415: the flipped Product Details layout,
   re-scoped from `.nfp-sp--flip .nfp-sp-facts` to the component wrapper. */
.wci-lifecycle .nfp-ins-next[b-xyup07ai66] {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 10px; align-items: start; justify-items: stretch;
  width: 100%; max-width: 500px; margin-left: auto; margin-right: auto;
  box-sizing: border-box;
  padding: 12px 14px;
}
.wci-lifecycle .nfp-ins-next-dots[b-xyup07ai66] { grid-column: 1; grid-row: 1; }
.wci-lifecycle .nfp-ins-next-body[b-xyup07ai66] { grid-column: 1; grid-row: 2; flex: none; text-align: center; }
.wci-lifecycle .nfp-ins-next-btn[b-xyup07ai66] {
  grid-column: 1; grid-row: 3;
  margin: 0; width: 100%; justify-content: center; align-self: stretch;
}
.wci-lifecycle .nfp-ins-next-head[b-xyup07ai66] { grid-row: 1; grid-column: 1; }
.wci-lifecycle .nfp-ins-next-actions[b-xyup07ai66] { grid-row: 3; grid-column: 1; }

/* ===================================================================
   APP-OWNED ADDITIONS
   =================================================================== */

/* The root carries no margin (REGISTRY rule 10); it only holds the card. */
.wci-lifecycle[b-xyup07ai66] { display: block; min-width: 0; }

/* The stacked report buttons are a column: drop the grid placement the
   single-CTA rule gives every .nfp-ins-next-btn. */
.wci-lifecycle .nfp-ins-next-actions .nfp-ins-next-btn[b-xyup07ai66] { grid-row: auto; }

/* The shared CTA rule fixes the pill at 40px. A long action ("Everything looks right, claim this product")
   wraps in a narrow drawer and would spill out of it, so the pill keeps 40px as its floor and grows with
   its text. One line still lands at exactly 40px. */
.nfp-ins-next-btn[b-xyup07ai66] { height: auto; padding-top: 8px; padding-bottom: 8px; }

/* A previewed step's action, and a locked report: no hover feedback, it is not clickable. */
.nfp-ins-next-btn:disabled[b-xyup07ai66] { opacity: 0.5; cursor: not-allowed; filter: none; }
.nfp-ins-next-btn--soft:disabled:hover[b-xyup07ai66] { background: var(--primary-soft) !important; }

/* The dots are drawn 7-9px; give each a 23px hit area without moving them. */
.nfp-ins-dot[b-xyup07ai66] { position: relative; }
.nfp-ins-dot[b-xyup07ai66]::after { content: ""; position: absolute; inset: -8px; }

.nfp-ins-next-btn:focus-visible[b-xyup07ai66] { outline: 2px solid var(--primary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .nfp-ins-dot[b-xyup07ai66] { transition: none; }
  .nfp-ins-dot:hover[b-xyup07ai66] { transform: none; }
}
/* /Components/DesignSystem/WciProgressTracker.razor.rz.scp.css */
/* ============================================================================
   WciProgressTracker: the ip-b2b "Progress tracker" (INTEL-415).
   Source (revision served 2026-09-29):
     pages/wise.css 16185-16346  .vf-progress-pane, .vfp-inner, header, progress bar, steps, fields, foot,
                                 the <= 560px width and the collapsed rail (.vfp-inner.is-min)
     pages/wise.css 23597-23599  the error step, which exists in wise.css only under the catalog's
                                 .dsc-demo scope; ported with the scope dropped
   Source (wise.css as served 2026-10-08):
     pages/wise.css 16900-16919  .vfp-items, the line items between the steps and the footer (the
                                 verification pane's billable foods); the .vfp-item rows are drawn by the
                                 host, so their rules reach them through ::deep
   The row placement (tucked z-index 0 under its left neighbour, the squared inner card, the restore tab)
   is the belt's and lives in wwwroot/css/wci/wci-modules.css.
   ============================================================================ */

/* ---------- Right-hand progress module ----------
   A separate pane docked to the right of the flow inside #modules-row, styled
   to mirror the account-creation "Account setup" pane (sp-/vs-step)
   using the shared design tokens so it tracks light/dark. */
.vf-progress-pane[b-2ilraxuh6c] {
  flex: 0 0 300px;
  width: 300px;
  align-self: center;
  height: calc(100% - 30px);
  max-height: calc(100% - 30px);
  min-height: 0;
  display: flex;
  animation: vfPaneIn-b-2ilraxuh6c 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  transition: flex-basis 0.25s ease, width 0.25s ease;
}
@keyframes vfPaneIn-b-2ilraxuh6c { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.vf-progress-pane[hidden][b-2ilraxuh6c] { display: none; }

@media (max-width: 1280px) { .vf-progress-pane[b-2ilraxuh6c] { flex-basis: 260px; width: 260px; } }

.vfp-inner[b-2ilraxuh6c] {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
.vfp-header[b-2ilraxuh6c] {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: var(--module-head-pad-t) var(--module-head-ctrl-inset) var(--module-head-pad-b) var(--module-head-pad-l);
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-2) 65%, transparent);
}
.vfp-header-text[b-2ilraxuh6c] { flex: 1; min-width: 0; }
.vfp-title[b-2ilraxuh6c] {
  font-family: 'WISE Digits', var(--module-title-family, 'DM Sans', system-ui, sans-serif);
  font-size: var(--module-title-size, 1.2rem);
  font-weight: var(--module-title-weight, 800);
  letter-spacing: -0.01em;
  color: var(--text);
  line-height: var(--module-title-lh, 1.16);
}
.vfp-subtitle[b-2ilraxuh6c] {
  font-size: var(--module-sub-size, 0.78125rem);
  line-height: var(--module-sub-lh, 1.35);
  color: var(--text-muted);
  margin-top: var(--module-sub-gap, 3px);
}

.vfp-progress[b-2ilraxuh6c] { padding: 12px 14px 8px; flex-shrink: 0; }
.vfp-progress-head[b-2ilraxuh6c] {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.72rem; font-weight: 600; color: var(--text-muted); margin-bottom: 6px;
}
.vfp-progress-pct[b-2ilraxuh6c] { color: var(--sec-green-text); font-weight: 700; }
.vfp-progress-track[b-2ilraxuh6c] { height: 6px; border-radius: 999px; background: var(--sec-green-10); overflow: hidden; }
html.dark .vfp-progress-track[b-2ilraxuh6c] { background: color-mix(in srgb, var(--sec-green) 26%, var(--surface)); }
.vfp-progress-fill[b-2ilraxuh6c] {
  height: 100%; border-radius: 999px;
  background: var(--sec-green);
  width: 0%; transition: width 0.25s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .vfp-progress-fill[b-2ilraxuh6c] { transition: none; }
}

.vfp-steps[b-2ilraxuh6c] { padding: 10px 14px 6px; display: flex; flex-direction: column; overflow-y: auto; flex: 1; }
.vfp-step[b-2ilraxuh6c] { display: flex; flex-direction: row; gap: 10px; align-items: flex-start; }
.vfp-step-track[b-2ilraxuh6c] { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 28px; }
.vfp-step-num[b-2ilraxuh6c] {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 700; flex-shrink: 0;
  background: var(--surface-3); color: var(--text-subtle); position: relative; z-index: 1;
}
.vfp-step-num .material-symbols-outlined[b-2ilraxuh6c] { font-size: 16px; }
.vfp-step--active .vfp-step-num[b-2ilraxuh6c] { background: var(--primary); color: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); }
.vfp-step--done .vfp-step-num[b-2ilraxuh6c] { background: var(--sec-green); color: #fff; cursor: pointer; }
.vfp-step--done .vfp-step-num:hover[b-2ilraxuh6c] { filter: brightness(1.06); }
.vfp-step-num:focus-visible[b-2ilraxuh6c] { outline: 3px solid color-mix(in srgb, var(--primary) 45%, transparent); outline-offset: 2px; }
.vfp-step-line[b-2ilraxuh6c] { width: 2px; flex: 1; min-height: 16px; background: var(--border-strong); margin: 3px 0; border-radius: 1px; }
.vfp-step--done .vfp-step-line[b-2ilraxuh6c] { background: color-mix(in srgb, var(--sec-green) 55%, var(--border-strong)); }
.vfp-step:last-child .vfp-step-line[b-2ilraxuh6c] { display: none; }
.vfp-step-body[b-2ilraxuh6c] { padding: 4px 0 16px; min-width: 0; flex: 1; }
.vfp-step:last-child .vfp-step-body[b-2ilraxuh6c] { padding-bottom: 4px; }
.vfp-step-title[b-2ilraxuh6c] { font-size: 0.84rem; font-weight: 500; color: var(--text-muted); line-height: 1.3; }
.vfp-step--active .vfp-step-title[b-2ilraxuh6c] { font-weight: 700; color: var(--text); }
.vfp-step-sub[b-2ilraxuh6c] { font-size: 0.68rem; color: var(--vf-ink); font-weight: 600; margin-top: 2px; }
.vfp-step--done .vfp-step-sub[b-2ilraxuh6c] { color: var(--sec-green-text); }

.vfp-fields[b-2ilraxuh6c] { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; }
.vfp-field[b-2ilraxuh6c] { display: flex; align-items: center; gap: 6px; font-size: 0.7rem; line-height: 1.35; }
.vfp-field .material-symbols-outlined[b-2ilraxuh6c] { font-size: 14px; flex-shrink: 0; }
.vfp-field--done .material-symbols-outlined[b-2ilraxuh6c] { color: var(--sec-green); }
.vfp-field--active .material-symbols-outlined[b-2ilraxuh6c] { color: var(--text-subtle); }
.vfp-field-label[b-2ilraxuh6c] { color: var(--text-muted); }
.vfp-field-val[b-2ilraxuh6c] {
  color: var(--text); font-weight: 600; margin-left: auto; max-width: 55%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right;
}

.vfp-foot[b-2ilraxuh6c] {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding: 12px 14px 14px;
  background: color-mix(in srgb, var(--surface-2) 45%, transparent);
}
.vfp-foot-row[b-2ilraxuh6c] {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.76rem; color: var(--text-muted); padding: 3px 0;
}
.vfp-foot-total[b-2ilraxuh6c] { margin-top: 4px; padding-top: 8px; border-top: 1px dashed var(--border); font-weight: 700; color: var(--text); }
.vfp-foot-amt[b-2ilraxuh6c] { font-family: 'WISE Digits', 'DM Sans', system-ui, sans-serif; font-size: 1.05rem; color: var(--vf-ink); }

@media (max-width: 560px) {
  .vf-progress-pane[b-2ilraxuh6c] { flex: 1 1 auto; width: 100% !important; max-width: 100% !important; }
}

/* ---- Horizontal collapse (shared vfp) ----
   Collapsed (default) = a narrow icon rail like the primary nav: a percentage
   ring on top, then the numbered steps. Expanded = the full module. The toggle
   is a bare chevron — no box/background behind it. */
.vfp-min-btn[b-2ilraxuh6c] {
  flex-shrink: 0; width: 26px; height: 26px; padding: 0;
  border: 0; background: none; cursor: pointer; color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center; transition: color 0.15s;
}
.vfp-min-btn:hover[b-2ilraxuh6c] { color: var(--text); }
.vfp-min-btn .material-symbols-outlined[b-2ilraxuh6c] { font-size: 20px; }
.vfp-pct-ring[b-2ilraxuh6c] {
  display: none; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  align-items: center; justify-content: center; position: relative;
  background: conic-gradient(var(--sec-green) calc(var(--pct) * 1%), var(--sec-green-10) 0);
}
html.dark .vfp-pct-ring[b-2ilraxuh6c] {
  background: conic-gradient(var(--sec-green) calc(var(--pct) * 1%), color-mix(in srgb, var(--sec-green) 26%, var(--surface)) 0);
}
.vfp-pct-ring[b-2ilraxuh6c]::before { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--surface); }
.vfp-pct-ring span[b-2ilraxuh6c] { position: relative; font-size: 0.6rem; font-weight: 700; color: var(--text); }

/* Rail (collapsed) — shrink the pane to an icon column. */
.vf-progress-pane:has(.vfp-inner.is-min)[b-2ilraxuh6c] { flex: 0 0 114px; width: 114px; }
.vfp-inner.is-min .vfp-header[b-2ilraxuh6c] { flex-direction: column; gap: 8px; padding: 12px 6px; }
.vfp-inner.is-min .vfp-header-text[b-2ilraxuh6c] { display: none; }
.vfp-inner.is-min .vfp-min-btn[b-2ilraxuh6c] { order: -1; }
.vfp-inner.is-min .vfp-pct-ring[b-2ilraxuh6c] { display: flex; }
.vfp-inner.is-min .vfp-progress[b-2ilraxuh6c],
.vfp-inner.is-min .vfp-items[b-2ilraxuh6c],
.vfp-inner.is-min .vfp-foot[b-2ilraxuh6c] { display: none; }
.vfp-inner.is-min .vfp-steps[b-2ilraxuh6c] { padding: 10px 0; align-items: center; gap: 10px; }
.vfp-inner.is-min .vfp-step[b-2ilraxuh6c] { gap: 0; justify-content: center; }
.vfp-inner.is-min .vfp-step-track[b-2ilraxuh6c] { width: auto; }
.vfp-inner.is-min .vfp-step-line[b-2ilraxuh6c],
.vfp-inner.is-min .vfp-step-body[b-2ilraxuh6c] { display: none; }

/* ---- Line items (wise.css 16900-16919). The rows come from the host's Items fragment, so the row
   rules carry ::deep; the .pf-thumb sizing (16917-16918) is not ported, the host's own image sizes itself. */
.vfp-items[b-2ilraxuh6c] {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding: 12px 14px 4px;
}
.vfp-items-head[b-2ilraxuh6c] {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px;
}
.vfp-items-title[b-2ilraxuh6c] {
  font-size: 0.625rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-subtle);
}
.vfp-items-count[b-2ilraxuh6c] { font-size: 0.68rem; font-weight: 600; color: var(--vf-ink); white-space: nowrap; }
.vfp-items[b-2ilraxuh6c]  .vfp-item {
  display: flex; align-items: center; gap: 9px; padding: 7px 0;
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.vfp-items[b-2ilraxuh6c]  .vfp-item:first-of-type { border-top: 0; }
.vfp-items[b-2ilraxuh6c]  .vfp-item-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.vfp-items[b-2ilraxuh6c]  .vfp-item-name {
  font-size: 0.76rem; font-weight: 600; color: var(--text); line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vfp-items[b-2ilraxuh6c]  .vfp-item-brand { font-size: 0.66rem; color: var(--text-subtle); }
.vfp-items[b-2ilraxuh6c]  .vfp-item-cost { font-size: 0.78rem; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- Error step (wise.css 23597-23599, .dsc-demo scope dropped) ---- */
.vfp-step--err .vfp-step-num[b-2ilraxuh6c] { background: var(--sec-red); color: #fff; }
.vfp-step--err .vfp-step-title[b-2ilraxuh6c] { font-weight: 700; color: var(--text); }
.vfp-step--err .vfp-step-sub[b-2ilraxuh6c] { color: var(--sec-red); }

/* ============================================================================
   APP-OWNED ADDITIONS (not in wise.css)
   ============================================================================ */

/* --vf-ink is set only on the design's verification pages (wise.css 15878-15889: --primary, and
   #93C5FD in dark); the tracker carries it itself so it reads the same on any page. */
.vf-progress-pane[b-2ilraxuh6c] { --vf-ink: var(--primary); }
html.dark .vf-progress-pane[b-2ilraxuh6c] { --vf-ink: #93C5FD; }

/* The steps are an ordered list and a done step's disc is a real button; both shed their user-agent look. */
.vfp-steps[b-2ilraxuh6c] { list-style: none; margin: 0; }
button.vfp-step-num[b-2ilraxuh6c] { border: 0; padding: 0; font: inherit; font-size: 0.72rem; font-weight: 700; }
.vfp-min-btn:focus-visible[b-2ilraxuh6c] { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 50%; }

/* A credit to the member on a footer row (a discount), and the quiet line under the rows. The design
   has neither; the verification Payment step needs both. */
.wci-vfp-foot-row--good[b-2ilraxuh6c] { color: var(--sec-green-text); font-weight: 600; }
.wci-vfp-foot-note[b-2ilraxuh6c] { font-size: 0.68rem; color: var(--text-subtle); margin: 8px 0 0; }

@media (prefers-reduced-motion: reduce) {
  .vf-progress-pane[b-2ilraxuh6c] { animation: none; transition: none; }
}
/* /Components/DesignSystem/WciPromptQueue.razor.rz.scp.css */
/* ===================================================================
   WCI component: Prompt queue (WciPromptQueue), INTEL-431
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo at commit 2c36820:
     pages/wise.css
       lines 10358-10436  .sc-queue and its lead, list, rows, place in
                          line, actions, rewrite pill and held state
       lines 10437-10543, 11080-11121  the rewrite pill is the real
                          composer field (.fl-input-wrap, .fl-input,
                          .sc-send): the rules it uses are repeated here,
                          because scoped CSS cannot reach across into
                          WciChatComposer's sheet. Keep the two copies in
                          step on a re-port. They are not moved into a
                          global sheet (PR #556 review n8): REGISTRY rule 2
                          keeps only tokens global, and WciWalkthrough and
                          WciIntentChip carry their own scoped copies of
                          these classes, which a global rule would reach
     js/all-modules-flow.js
       lines 3163-3186, 3889-3918  module "Prompt queue" (demo template)
   Class names are kept IDENTICAL. What is NOT verbatim:
     - REGISTRY rule 10: .sc-queue's `margin-bottom: 10px` is dropped;
       the host passes the gap to the composer through CssClass.
     - .sc-queue[hidden] is not ported: an empty line renders nothing.
   =================================================================== */

/* ---- The strip (wise.css 10358-10436) ---- */
.sc-queue[b-dgtnkj0lz2] {
  display: flex; flex-direction: column; gap: 6px;
}
.sc-queue-lead[b-dgtnkj0lz2] {
  display: flex; align-items: center; gap: 6px; margin: 0 0 0 2px;
  font-size: 0.75rem; line-height: 1.3; color: var(--text-muted);
}
.sc-queue-lead .material-symbols-outlined[b-dgtnkj0lz2] { font-size: 15px !important; color: var(--primary-ink, var(--primary)); }
html.dark .sc-queue-lead .material-symbols-outlined[b-dgtnkj0lz2] { color: var(--primary-bright, #8B9FAF); }
.sc-queue-list[b-dgtnkj0lz2] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.sc-queue-item[b-dgtnkj0lz2] {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 6px 6px 10px; min-height: 36px;
  border: 1px dashed color-mix(in srgb, var(--primary) 32%, transparent);
  border-radius: var(--r-md, 16px);
  background: color-mix(in srgb, var(--primary) 5%, transparent);
  animation: scQueueIn-b-dgtnkj0lz2 0.26s cubic-bezier(0.22, 0.85, 0.25, 1) both;
}
html.dark .sc-queue-item[b-dgtnkj0lz2] {
  border-color: color-mix(in srgb, var(--primary-bright, #8B9FAF) 34%, transparent);
  background: color-mix(in srgb, var(--primary-bright, #8B9FAF) 8%, transparent);
}
@keyframes scQueueIn-b-dgtnkj0lz2 {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .sc-queue-item[b-dgtnkj0lz2] { animation: none; } }
/* Its place in line. A fully round well, never a rounded square. */
.sc-queue-pos[b-dgtnkj0lz2] {
  flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.625rem; font-weight: 600; font-variant-numeric: tabular-nums;
  color: #fff; background: color-mix(in srgb, var(--primary) 62%, transparent);
}
html.dark .sc-queue-pos[b-dgtnkj0lz2] { background: var(--primary-bright, #8B9FAF); color: #0F1626; }
.sc-queue-text[b-dgtnkj0lz2] {
  flex: 1; min-width: 0; margin: 0;
  font-size: calc(var(--fs-chat, 0.875rem) * 0.8); line-height: 1.35; color: var(--text);
  overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.sc-queue-acts[b-dgtnkj0lz2] { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.sc-queue-act[b-dgtnkj0lz2] {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: 9999px;
  background: none; color: var(--text-muted); cursor: pointer;
  font: inherit; font-size: 0.75rem;
  transition: background 0.15s ease, color 0.15s ease;
}
.sc-queue-act:hover[b-dgtnkj0lz2] { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary-ink, var(--primary)); }
.sc-queue-act--del:hover[b-dgtnkj0lz2] { background: color-mix(in srgb, var(--sec-red, #DC3038) 14%, transparent); color: var(--sec-red, #DC3038); }
html.dark .sc-queue-act:hover[b-dgtnkj0lz2] { background: color-mix(in srgb, var(--primary-bright, #8B9FAF) 18%, transparent); color: var(--primary-bright, #8B9FAF); }
.sc-queue-act .material-symbols-outlined[b-dgtnkj0lz2] { font-size: 17px !important; }
/* Editing: the row IS the composer, so the parked row's own frame steps out of
   the way rather than boxing a second pill inside it. */
.sc-queue-item--editing[b-dgtnkj0lz2],
html.dark .sc-queue-item--editing[b-dgtnkj0lz2] { display: block; padding: 0; border-color: transparent; background: none; }
/* A rewrite is a block of text, not a one-liner, so the editor is a rounded
   rectangle on the queue row's own radius — never the composer's pill. */
.sc-queue-item--editing .sc-queue-pill[b-dgtnkj0lz2] { border-radius: var(--r-md, 16px); padding: 5px 5px 5px 12px; }
/* Raised by the pill class: the repeated .fl-input rule below (same specificity, later) would otherwise win
   and a long rewrite could not scroll (PR #556 review m10). */
.sc-queue-pill .sc-queue-input[b-dgtnkj0lz2] { padding: 4px 0; max-height: 120px; overflow-y: auto; }
.sc-queue-acts--edit[b-dgtnkj0lz2] { justify-content: flex-end; gap: 4px; margin-top: 5px; }
.sc-queue-acts--edit .sc-queue-act[b-dgtnkj0lz2] { width: auto; height: 26px; padding: 0 9px; }
/* Held by a stop. The line survives untouched — what it loses is its automatic
   go, so each ask now waits on the member pressing its own send. The lead says
   so and the row's arrow becomes that send. */
.sc-queue--held .sc-queue-lead .material-symbols-outlined[b-dgtnkj0lz2] { color: var(--sec-red, #DC3038); }
html.dark .sc-queue--held .sc-queue-lead .material-symbols-outlined[b-dgtnkj0lz2] { color: var(--sec-red, #DC3038); }
.sc-queue-act--go[b-dgtnkj0lz2] { color: var(--primary-ink, var(--primary)); }
html.dark .sc-queue-act--go[b-dgtnkj0lz2] { color: var(--primary-bright, #8B9FAF); }

/* ---- The rewrite pill: the composer's own field (wise.css 10437-10543) ---- */
.fl-input-wrap[b-dgtnkj0lz2] {
  position: relative; flex: 1; background: color-mix(in srgb, var(--primary) 10%, #fff); border: 1px solid color-mix(in srgb, var(--primary) 34%, transparent);
  border-radius: var(--radius-pill); padding: 0 6px 0 14px; min-height: 40px;
  display: flex; align-items: center; gap: 4px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
html.dark .fl-input-wrap[b-dgtnkj0lz2] { background: color-mix(in srgb, var(--primary-bright, #8B9FAF) 14%, transparent); border-color: color-mix(in srgb, var(--primary-bright, #8B9FAF) 36%, transparent); }
.fl-input-wrap:focus-within[b-dgtnkj0lz2] { border-color: color-mix(in srgb, var(--primary) 55%, var(--border-strong)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
@property --wise-sheen-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.fl-input-wrap[b-dgtnkj0lz2]::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: conic-gradient(from var(--wise-sheen-angle),
    color-mix(in srgb, var(--primary) 32%, transparent) 0deg,
    color-mix(in srgb, var(--primary) 44%, transparent) 45deg,
    color-mix(in srgb, var(--primary) 62%, transparent) 95deg,
    color-mix(in srgb, var(--primary) 82%, #eaf3ff) 150deg,
    #f2f8ff 182deg,
    color-mix(in srgb, var(--primary) 82%, #eaf3ff) 214deg,
    color-mix(in srgb, var(--primary) 62%, transparent) 268deg,
    color-mix(in srgb, var(--primary) 44%, transparent) 318deg,
    color-mix(in srgb, var(--primary) 32%, transparent) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: wise-sheen-rotate-b-dgtnkj0lz2 9s linear infinite, wise-sheen-breathe-b-dgtnkj0lz2 4.5s ease-in-out infinite;
}
@keyframes wise-sheen-rotate-b-dgtnkj0lz2 {
  to { --wise-sheen-angle: 360deg; }
}
@keyframes wise-sheen-breathe-b-dgtnkj0lz2 {
  0%, 100% { opacity: 0.5; filter: brightness(0.95) saturate(1); }
  50%      { opacity: 1;   filter: brightness(1.3) saturate(1.35); }
}
@media (prefers-reduced-motion: reduce) {
  .fl-input-wrap[b-dgtnkj0lz2]::before { animation: none; opacity: 0.75; }
}
.fl-input[b-dgtnkj0lz2] { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-size: var(--fs-chat, 0.875rem); font-weight: 400; line-height: 1.45; padding: 8px 0; color: var(--text); font-family: inherit; resize: none; overflow: hidden; }
.fl-input[b-dgtnkj0lz2]::placeholder { color: color-mix(in srgb, var(--text-subtle) 45%, transparent); font-style: italic; }

/* ---- Save: the composer's Send circle (wise.css 11080-11121) ---- */
.sc-send[b-dgtnkj0lz2] {
  width: 34px; height: 34px; flex-shrink: 0; align-self: center; margin-left: 2px;
  border-radius: 9999px; border: 0; padding: 0; cursor: pointer;
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  line-height: 0;
  appearance: none; -webkit-appearance: none;
  transition: background 0.15s ease;
}
.sc-send:hover[b-dgtnkj0lz2] { background: color-mix(in srgb, var(--primary) 86%, black); color: #fff; }
.sc-send:disabled[b-dgtnkj0lz2],
.sc-send--idle[b-dgtnkj0lz2] {
  background: color-mix(in srgb, var(--primary) 26%, var(--surface));
  color: color-mix(in srgb, #fff 78%, transparent);
  cursor: default;
}
.sc-send:disabled:hover[b-dgtnkj0lz2],
.sc-send--idle:hover[b-dgtnkj0lz2] {
  background: color-mix(in srgb, var(--primary) 26%, var(--surface));
  color: color-mix(in srgb, #fff 78%, transparent);
}
html.dark .sc-send:disabled[b-dgtnkj0lz2],
html.dark .sc-send--idle[b-dgtnkj0lz2] {
  background: color-mix(in srgb, var(--primary-bright, #8B9FAF) 24%, transparent);
}
.sc-send .material-symbols-outlined[b-dgtnkj0lz2] {
  font-size: 18px !important; line-height: 1;
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ---- APP-OWNED ADDITIONS ---- */
.sc-queue-act:focus-visible[b-dgtnkj0lz2],
.sc-send:focus-visible[b-dgtnkj0lz2] { outline: 2px solid var(--primary); outline-offset: 2px; }
/* /Components/DesignSystem/WciRangeSlider.razor.rz.scp.css */
/* ===================================================================
   WCI component: Range slider (WciRangeSlider, INTEL-676)
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo (ab499e3, pulled
   2026-10-07; the prototype host serves the same file at
   http://3.17.180.155:4144/pages/wise.css):
     pages/wise.css
       lines 26483-26535  "Threshold slider (one handle) and range
                          slider (two)": the shared root, head, label
                          and reading, both inputs' tracks and thumbs,
                          ticks, the range's track, fill and stacked
                          inputs
   Module: Component Library > Filters > "Range slider"
   (js/all-modules-flow.js, the card dsc-comp-range-slider).
   The design writes the two sliders as ONE section with shared
   selectors. Scoped CSS cannot be shared between components, so the
   whole section is pasted here and in WciSlider.razor.css alike;
   the rules for the other control match nothing here. Keep the two
   copies identical: a re-port pastes the same range into both.
   Class names are kept IDENTICAL to wise.css so a future re-port is a
   section diff.
   =================================================================== */

/* ── Threshold slider (one handle) and range slider (two) ──────────── */
.wise-slider[b-a2yaput0ec], .wise-range[b-a2yaput0ec] { width: 100%; max-width: 420px; font-family: inherit; --pct: 50%; --lo: 0%; --hi: 100%; }
.wise-slider-head[b-a2yaput0ec] {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px;
}
.wise-slider-label[b-a2yaput0ec] { font-size: 0.7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-subtle); }
.wise-slider-val[b-a2yaput0ec] {
  font-size: 0.8125rem; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums;
}
.wise-slider-val b[b-a2yaput0ec] { color: var(--primary-ink, var(--primary)); }
.wise-slider-input[b-a2yaput0ec], .wise-range-input[b-a2yaput0ec] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 22px; margin: 0;
  background: transparent; cursor: pointer; outline: none; display: block;
}
.wise-slider-input[b-a2yaput0ec]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--primary) 0 var(--pct), var(--border-strong) var(--pct) 100%);
}
.wise-slider-input[b-a2yaput0ec]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--border-strong); }
.wise-slider-input[b-a2yaput0ec]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--primary); }
.wise-slider-input[b-a2yaput0ec]::-webkit-slider-thumb,
.wise-range-input[b-a2yaput0ec]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--primary); box-shadow: var(--shadow-1);
  transition: transform .12s ease, box-shadow .12s ease;
}
.wise-slider-input[b-a2yaput0ec]::-moz-range-thumb, .wise-range-input[b-a2yaput0ec]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 2px solid var(--primary);
}
.wise-slider-input:hover[b-a2yaput0ec]::-webkit-slider-thumb, .wise-range-input:hover[b-a2yaput0ec]::-webkit-slider-thumb,
.wise-slider-input:focus-visible[b-a2yaput0ec]::-webkit-slider-thumb, .wise-range-input:focus-visible[b-a2yaput0ec]::-webkit-slider-thumb {
  transform: scale(1.12); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent);
}
.wise-slider-input:disabled[b-a2yaput0ec], .wise-range.is-disabled .wise-range-input[b-a2yaput0ec] { opacity: .45; cursor: not-allowed; }
.wise-slider-ticks[b-a2yaput0ec] {
  display: flex; justify-content: space-between; margin-top: 2px;
  font-size: 10.5px; font-weight: 600; color: var(--text-subtle); font-variant-numeric: tabular-nums;
}
.wise-range-track[b-a2yaput0ec] { position: relative; height: 22px; }
.wise-range-track[b-a2yaput0ec]::before {
  content: ''; position: absolute; left: 0; right: 0; top: 9px; height: 4px; border-radius: 2px;
  background: var(--border-strong);
}
.wise-range-fill[b-a2yaput0ec] {
  position: absolute; top: 9px; height: 4px; border-radius: 2px; background: var(--primary);
  left: var(--lo); width: calc(var(--hi) - var(--lo)); pointer-events: none;
}
.wise-range-input[b-a2yaput0ec] { position: absolute; inset: 0; pointer-events: none; }
.wise-range-input[b-a2yaput0ec]::-webkit-slider-runnable-track { height: 4px; background: transparent; }
.wise-range-input[b-a2yaput0ec]::-moz-range-track { height: 4px; background: transparent; }
.wise-range-input[b-a2yaput0ec]::-webkit-slider-thumb { pointer-events: auto; }
.wise-range-input[b-a2yaput0ec]::-moz-range-thumb { pointer-events: auto; }
.wise-range-input.is-top[b-a2yaput0ec] { z-index: 2; }

/* ===================================================================
   APP-OWNED ADDITIONS (not in wise.css)
   =================================================================== */

/* Keyboard focus is the design's thumb ring (above); the browser's own outline is not drawn as well. */
.wise-slider-input:focus-visible[b-a2yaput0ec], .wise-range-input:focus-visible[b-a2yaput0ec] { outline: none; }

.wise-slider.is-disabled .wise-slider-val[b-a2yaput0ec], .wise-range.is-disabled .wise-slider-val[b-a2yaput0ec] { color: var(--text-subtle); }

@media (prefers-reduced-motion: reduce) {
  .wise-slider-input[b-a2yaput0ec]::-webkit-slider-thumb, .wise-range-input[b-a2yaput0ec]::-webkit-slider-thumb { transition: none; }
}
/* /Components/DesignSystem/WciReportShelf.razor.rz.scp.css */
/* ===================================================================
   WCI component: Report posters (WciReportShelf), INTEL-425
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo, revision afe74ad
   (pulled 2026-10-05):
     pages/reports.html (inline <style>)
       lines 86-93      .rp-section, .rp-sec-eyebrow, .rp-sec-sub
       lines 96-113     .rp-grid, the rail and its scrollbar
       lines 115-130    .rp-card, hover lift, focus ring
       lines 132-209    .rp-poster, tones, bug watermark, sheen,
                        .rp-poster-icon, .rp-badge, .rp-poster-open
       lines 211-237    .rp-body, .rp-name, .rp-desc, .rp-lockline,
                        .rp-foot(-split), .rp-date, .rp-gen-empty,
                        .rp-view
       lines 239-241    .rp-card.is-locked
     js/all-modules-flow.js
       lines 5643-5660  module "Report posters"
   Class names are kept IDENTICAL to the design.
   Changed from the design:
   - .rp-section's margin-top (34px, 24px on the first) is dropped:
     REGISTRY rule 10, the root never sets margin. The host spaces
     sections through CssClass (ReportsHub stacks them in space-y-*).
   - The bug watermark is the app's own WiseAiBrand.OwlBug markup (the
     same five paths, fill white), so .rp-poster-bug is the span that
     wraps it and the svg inside fills it (::deep: the markup string
     carries no scope attribute).
   - The generated view's .rp-gen-lede / .rp-gen-outputs and the
     .rp-waitlist button are not ported: the read view is the app's
     own page, and the waitlist button has no handler in the design
     (locked posters are not shown to anyone today, the 2026-08-05
     decision).
   Requires wwwroot/css/wci/wci-tokens.css.
   =================================================================== */

/* ---- Section heading (reports.html 86-93) ---- */
.rp-sec-eyebrow[b-i8qrb535j5] {
  font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-subtle);
}
.rp-sec-sub[b-i8qrb535j5] { font-size: 0.9375rem; color: var(--text-muted); margin: 5px 0 18px; }

/* ---- Poster shelf (horizontal carousel rail) (reports.html 96-113) ---- */
.rp-grid[b-i8qrb535j5] {
  display: flex; gap: 20px;
  overflow-x: auto; overflow-y: visible;
  scroll-snap-type: x proximity;
  /* let the hover lift + shadow show without being clipped */
  padding: 6px 4px 14px; margin: -6px -4px 0;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--primary) 45%, transparent) transparent;
}
.rp-grid[b-i8qrb535j5]::-webkit-scrollbar { height: 8px; }
.rp-grid[b-i8qrb535j5]::-webkit-scrollbar-track { background: transparent; }
.rp-grid[b-i8qrb535j5]::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--primary) 40%, transparent);
  border-radius: 999px;
}
.rp-grid[b-i8qrb535j5]::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--primary) 60%, transparent);
}

/* ---- Card (reports.html 115-130) ---- */
.rp-card[b-i8qrb535j5] {
  position: relative; display: flex; flex-direction: column;
  flex: 0 0 clamp(258px, 78%, 300px);
  scroll-snap-align: start;
  min-height: 268px;
  border-radius: 18px; overflow: hidden;
  border: 1px solid var(--border); background: var(--surface);
  box-shadow: var(--shadow-1); text-decoration: none; color: inherit;
  transition: transform 0.2s cubic-bezier(.2,.7,.3,1), box-shadow 0.2s ease, border-color 0.2s ease;
}
a.rp-card:hover[b-i8qrb535j5] {
  transform: translateY(-5px);
  box-shadow: var(--shadow-2);
  border-color: color-mix(in srgb, var(--acc, var(--primary)) 40%, var(--border));
}
a.rp-card:focus-visible[b-i8qrb535j5] { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---- The poster (reports.html 132-209) ---- */
.rp-poster[b-i8qrb535j5] {
  --acc: #3f4d61;
  position: relative; height: 138px; overflow: hidden;
  background:
    radial-gradient(135% 130% at 82% -25%, color-mix(in srgb, var(--acc) 62%, transparent), transparent 60%),
    linear-gradient(150deg, color-mix(in srgb, var(--acc) 34%, #0b1a29), #091522 80%);
}
.rp-poster.tone-upf[b-i8qrb535j5]     { --acc: #25507C; }
.rp-poster.tone-metric[b-i8qrb535j5]  { --acc: #25507C; }
.rp-poster.tone-action[b-i8qrb535j5]  { --acc: #b8862b; }
.rp-poster.tone-gen[b-i8qrb535j5]     { --acc: #3F5C4F; }
.rp-poster.tone-locked[b-i8qrb535j5]  { --acc: #3a465a; }

/* Bug watermark — the WISE mark, drifting off the bottom-right corner. */
.rp-poster-bug[b-i8qrb535j5] {
  position: absolute; right: -18px; bottom: -46px;
  width: 210px; height: auto; color: #fff; opacity: 0.09;
  transform: rotate(-6deg);
  transition: transform 0.4s ease, opacity 0.3s ease;
}
a.rp-card:hover .rp-poster-bug[b-i8qrb535j5] { transform: rotate(-6deg) scale(1.06) translate(-6px, -4px); opacity: 0.13; }
.rp-poster.tone-locked .rp-poster-bug[b-i8qrb535j5] { opacity: 0.05; }

/* Diagonal sheen that sweeps across on hover — the "cinematic" glint. */
.rp-poster[b-i8qrb535j5]::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.16) 48%, transparent 62%);
  transform: translateX(-120%); transition: transform 0.6s ease;
  pointer-events: none;
}
a.rp-card:hover .rp-poster[b-i8qrb535j5]::after { transform: translateX(120%); }

/* Icon overlays the poster directly — NO plate, box or circle behind it.
   Just the glyph, with a soft drop-shadow so it stays legible on the art. */
.rp-poster-icon[b-i8qrb535j5] {
  position: absolute; top: 14px; left: 16px;
  display: grid; place-items: center;
  background: none; border: 0; box-shadow: none; padding: 0;
  color: #fff;
}
.rp-poster-icon .material-symbols-outlined[b-i8qrb535j5] {
  font-size: 30px !important;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45));
}
.rp-poster.tone-locked .rp-poster-icon[b-i8qrb535j5] { color: rgba(255,255,255,0.78); }

.rp-badge[b-i8qrb535j5] {
  position: absolute; top: 17px; right: 16px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 0.625rem; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase;
  color: #fff; background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.22); backdrop-filter: blur(3px);
}
.rp-badge .material-symbols-outlined[b-i8qrb535j5] { font-size: 12px !important; }

/* Play/open affordance revealed on hover, bottom-right of the poster. */
.rp-poster-open[b-i8qrb535j5] {
  position: absolute; right: 14px; bottom: 12px;
  width: 30px; height: 30px; border-radius: 999px;
  display: grid; place-items: center;
  background: #fff; color: #0b1a29;
  opacity: 0; transform: translateY(6px) scale(0.9);
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}
.rp-poster-open .material-symbols-outlined[b-i8qrb535j5] { font-size: 18px !important; }
a.rp-card:hover .rp-poster-open[b-i8qrb535j5] { opacity: 1; transform: translateY(0) scale(1); }

/* ---- Card body (reports.html 211-237) ---- */
.rp-body[b-i8qrb535j5] { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 18px; flex: 1; }
.rp-name[b-i8qrb535j5] {
  font-family: 'WISE Digits', 'DM Sans', system-ui, sans-serif;
  font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; color: var(--text); line-height: 1.2;
}
.rp-desc[b-i8qrb535j5] { margin: 0; font-size: 0.8125rem; line-height: 1.55; color: var(--text-muted); }
.rp-lockline[b-i8qrb535j5] { margin: 2px 0 0; font-size: 0.75rem; line-height: 1.5; color: var(--text-subtle); }
.rp-foot[b-i8qrb535j5] { margin-top: auto; padding-top: 12px; display: flex; justify-content: flex-end; }
.rp-foot-split[b-i8qrb535j5] { justify-content: space-between; align-items: center; gap: 12px; }
.rp-date[b-i8qrb535j5] { font-size: 0.75rem; font-weight: 600; color: var(--text-subtle); }
.rp-gen-empty[b-i8qrb535j5] { pointer-events: none; }
.rp-gen-empty .rp-view[b-i8qrb535j5] { pointer-events: auto; }

.rp-view[b-i8qrb535j5] {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.8125rem; font-weight: 700; color: var(--primary);
}
html.dark .rp-view[b-i8qrb535j5] { color: var(--primary-bright, var(--primary)); }
.rp-view .material-symbols-outlined[b-i8qrb535j5] { font-size: 17px !important; transition: transform 0.18s ease; }
a.rp-card:hover .rp-view .material-symbols-outlined[b-i8qrb535j5] { transform: translate(3px, -3px); }

/* Locked cards read as dimmed "coming soon" titles. (reports.html 239-241) */
.rp-card.is-locked[b-i8qrb535j5] { background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); }
.rp-card.is-locked .rp-name[b-i8qrb535j5] { color: var(--text-muted); }

/* ===================================================================
   APP-OWNED ADDITIONS
   =================================================================== */

/* The watermark is a span wrapping WiseAiBrand.OwlBug: the span takes the
   design's box (above), the svg fills it. */
.rp-poster-bug[b-i8qrb535j5] { display: block; }
.rp-poster-bug[b-i8qrb535j5]  svg { display: block; width: 100%; height: auto; fill: currentColor; }

@media (prefers-reduced-motion: reduce) {
  .rp-card[b-i8qrb535j5], .rp-poster-bug[b-i8qrb535j5], .rp-poster[b-i8qrb535j5]::after, .rp-poster-open[b-i8qrb535j5], .rp-view .material-symbols-outlined[b-i8qrb535j5] { transition: none; }
  a.rp-card:hover[b-i8qrb535j5] { transform: none; }
}
/* /Components/DesignSystem/WciRowMenu.razor.rz.scp.css */
/* ===================================================================
   WCI component: Row action menu shell (WciRowMenu)
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo:
     /Users/kevinjones/src/wc/ip-b2b/pages/wise.css
       lines 16906-16922  .adm-rowmenu / .adm-rowmenu-btn / .adm-rowmenu-pop
                          (the inline shell)
       lines 16707-16710  .adm-menu and its entrance keyframes (the
                          portalled floating variant)
   Deliberately NOT ported: 17650 (.adm-trow mobile card placement; the
   app has no .adm-table) and 21502 / 21583 (.dsc-demo catalog-page
   overrides).
   NOTE: that checkout is not on every machine. These line numbers are
   from the revision the prototype host serves (fetched 2026-09-23,
   http://3.17.180.155:4144/pages/wise.css), the same revision the other
   menu shells were cut from.
   Class names are kept IDENTICAL to wise.css so a future re-port is a
   section diff. Consumes tokens from wwwroot/css/wci/wci-tokens.css.
   The html.dark rules are ported as-is; they are inert until the app
   grows a theme toggle.
   =================================================================== */

/* Per-row three-dot (kebab) menu — collapses the row's actions into a popover. */
.adm-rowmenu[b-3fzam478jt] { display: inline-flex; position: relative; }
/* Bare kebab — circular hit target only. No fill, no stroke (matches
   .pf-rowmenu-btn). A visible circle behind the glyph is not the table action. */
.adm-rowmenu-btn[b-3fzam478jt] {
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; background: transparent; color: var(--text-subtle);
  cursor: pointer; overflow: hidden;
  transition: background 0.15s ease, color 0.15s ease;
}
html.dark .adm-rowmenu-btn[b-3fzam478jt] { background: transparent; }
.adm-rowmenu-btn:hover[b-3fzam478jt], .adm-rowmenu.is-open .adm-rowmenu-btn[b-3fzam478jt] { color: var(--text); background: var(--surface-2); }
html.dark .adm-rowmenu-btn:hover[b-3fzam478jt], html.dark .adm-rowmenu.is-open .adm-rowmenu-btn[b-3fzam478jt] { background: rgba(255,255,255,0.06); }
.adm-rowmenu-btn .material-symbols-outlined[b-3fzam478jt] { font-size: 18px; }
.adm-rowmenu-pop[b-3fzam478jt] { position: absolute; top: auto; bottom: calc(100% + 6px); left: 0; z-index: 40; min-width: 210px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-2, 0 12px 32px rgba(0,0,0,0.18)); padding: 6px; }
.adm-rowmenu-pop[hidden][b-3fzam478jt] { display: none; }

/* Row action popover — a floating CRUD menu anchored to a three-dot button
   (portalled to <body> so it never clips inside the table card). */
.adm-menu[b-3fzam478jt] { position: fixed; z-index: 200; min-width: 196px; padding: 6px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: var(--shadow-card, 0 12px 32px rgba(0,0,0,0.20)); animation: admMenuIn-b-3fzam478jt 0.12s ease both; }
@keyframes admMenuIn-b-3fzam478jt { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* ===================== APP-OWNED ADDITIONS ==========================
   Only what the design's CONVENTIONS require and the prototype leaves to
   the page: a focus ring, parking for the anchored panel, and honouring
   reduced motion. Tokens only. */

.adm-rowmenu-btn:focus-visible[b-3fzam478jt] {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* The design portals .adm-menu to <body>. The app places it where it is with
   window.wciMenu (wwwroot/js/wci/wci-menu.js), which writes top/left inline and
   compensates for an ancestor transform. This parks the panel off screen until
   that call lands, so it never flashes at the top left, and caps its width.
   The design's rows do not set nowrap, so a fixed panel shrink-wraps its
   longest label against the whole viewport; a long label (the locked Global
   org row on OrganizationsAdmin) would stretch it across the screen. The cap
   also keeps a gutter so the panel fits on a phone.
   white-space is reset because the cap only works if the label can wrap, and
   a fixed panel is still a DOM child of its table cell: it inherits the cell's
   white-space, and table Actions cells are nowrap almost by rule
   (OrganizationsAdmin's is). Without the reset a long label runs straight past
   the cap. */
.adm-menu.wci-row-menu-anchored[b-3fzam478jt] {
    top: -9999px;
    left: -9999px;
    max-width: min(320px, calc(100vw - 16px));
    white-space: normal;
}

@media (prefers-reduced-motion: reduce) {
    .adm-menu[b-3fzam478jt] { animation: none; }
    .adm-rowmenu-btn[b-3fzam478jt] { transition: none; }
}
/* /Components/DesignSystem/WciRowMenuDivider.razor.rz.scp.css */
/* ===================================================================
   WCI component: Row action menu divider (WciRowMenuDivider)
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo:
     /Users/kevinjones/src/wc/ip-b2b/pages/wise.css
       line 16719         .adm-menu-sep
   NOTE: that checkout is not on every machine. These line numbers are
   from the revision the prototype host serves (fetched 2026-09-23,
   http://3.17.180.155:4144/pages/wise.css), the same revision the other
   menu shells were cut from.
   Class names are kept IDENTICAL to wise.css so a future re-port is a
   section diff. Consumes tokens from wwwroot/css/wci/wci-tokens.css.
   The html.dark rules are ported as-is; they are inert until the app
   grows a theme toggle.
   =================================================================== */

.adm-menu-sep[b-w8j65we10p] { height: 1px; background: var(--border); margin: 5px 4px; }
/* /Components/DesignSystem/WciRowMenuItem.razor.rz.scp.css */
/* ===================================================================
   WCI component: Row action menu row (WciRowMenuItem)
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo:
     /Users/kevinjones/src/wc/ip-b2b/pages/wise.css
       lines 16923-16932  .adm-rowmenu-item and its --primary / --danger /
                          :disabled states (rows of the inline shell)
       lines 16711-16718  .adm-menu-item and --danger (rows of the
                          portalled floating variant)
   NOTE: that checkout is not on every machine. These line numbers are
   from the revision the prototype host serves (fetched 2026-09-23,
   http://3.17.180.155:4144/pages/wise.css), the same revision the other
   menu shells were cut from.
   Class names are kept IDENTICAL to wise.css so a future re-port is a
   section diff. Consumes tokens from wwwroot/css/wci/wci-tokens.css.
   The html.dark rules are ported as-is; they are inert until the app
   grows a theme toggle.
   =================================================================== */

.adm-rowmenu-item[b-zta89fnjdz] { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: none; background: transparent; cursor: pointer; border-radius: 8px; font-family: inherit; font-size: 0.8rem; font-weight: 600; color: var(--text); text-align: left; white-space: nowrap; }
.adm-rowmenu-item:hover[b-zta89fnjdz] { background: var(--surface-2); }
html.dark .adm-rowmenu-item:hover[b-zta89fnjdz] { background: rgba(255,255,255,0.06); }
.adm-rowmenu-item .material-symbols-outlined[b-zta89fnjdz] { font-size: 17px; color: var(--text-subtle); flex-shrink: 0; }
.adm-rowmenu-item--primary .material-symbols-outlined[b-zta89fnjdz] { color: var(--primary-ink, var(--primary)); }
.adm-rowmenu-item--danger[b-zta89fnjdz] { color: var(--sec-red); }
html.dark .adm-rowmenu-item--danger[b-zta89fnjdz] { color: #FF9E96; }
.adm-rowmenu-item--danger .material-symbols-outlined[b-zta89fnjdz] { color: var(--sec-red); }
html.dark .adm-rowmenu-item--danger .material-symbols-outlined[b-zta89fnjdz] { color: #FF9E96; }
.adm-rowmenu-item:disabled[b-zta89fnjdz] { opacity: 0.4; pointer-events: none; cursor: default; }

.adm-menu-item[b-zta89fnjdz] { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 8px 10px; border: 0; background: transparent; border-radius: 8px; font: inherit; font-size: 0.82rem; font-weight: 600; color: var(--text); cursor: pointer; text-align: left; }
.adm-menu-item:hover[b-zta89fnjdz] { background: var(--surface-2); }
html.dark .adm-menu-item:hover[b-zta89fnjdz] { background: rgba(255,255,255,0.06); }
.adm-menu-item .material-symbols-outlined[b-zta89fnjdz] { font-size: 17px; color: var(--text-subtle); }
.adm-menu-item--danger[b-zta89fnjdz] { color: var(--sec-red); }
html.dark .adm-menu-item--danger[b-zta89fnjdz] { color: #FF9E96; }
.adm-menu-item--danger .material-symbols-outlined[b-zta89fnjdz] { color: inherit; }
.adm-menu-item--danger:hover[b-zta89fnjdz] { background: var(--sec-red-10); }

/* ===================== APP-OWNED ADDITIONS ==========================
   Only what the design's CONVENTIONS require and the prototype leaves to
   the page. Tokens only. */

.adm-rowmenu-item:focus-visible[b-zta89fnjdz],
.adm-menu-item:focus-visible[b-zta89fnjdz] {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

/* The floating variant's rows have no --primary or disabled state in the
   design, only the inline rows do. A row keeps its tone whichever panel it
   lands in, so both are mirrored here from 16927 and 16932. */
.adm-menu-item--primary .material-symbols-outlined[b-zta89fnjdz] { color: var(--primary-ink, var(--primary)); }
.adm-menu-item:disabled[b-zta89fnjdz] { opacity: 0.4; pointer-events: none; cursor: default; }

/* A link row reads as a row, not a link, and an inert one looks like a
   disabled button (an anchor has no :disabled). */
a.adm-rowmenu-item[b-zta89fnjdz], a.adm-menu-item[b-zta89fnjdz] { text-decoration: none; }
a.adm-rowmenu-item[aria-disabled="true"][b-zta89fnjdz],
a.adm-menu-item[aria-disabled="true"][b-zta89fnjdz] { opacity: 0.4; pointer-events: none; cursor: default; }

/* A WISEcode staff only row (Tone Admin): the staff pink, as the topbar menu's admin row
   (.topbar-menu-item--admin) draws it, from the staff tokens; the row also carries WciStaffBadge. */
.wci-rowmenu-item--staff[b-zta89fnjdz],
.wci-rowmenu-item--staff .material-symbols-outlined[b-zta89fnjdz] { color: var(--staff-ink); }
.wci-rowmenu-item--staff:hover[b-zta89fnjdz] { background: color-mix(in srgb, var(--staff-ink) 10%, transparent); }
/* /Components/DesignSystem/WciScorecard.razor.rz.scp.css */
/* ===================================================================
   WCI component: Large intent cards (WciScorecard), INTEL-369
   (the first card, Learn the platform, was INTEL-381)
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo (checkout at 5d49e11,
   pulled 2026-10-09):
     pages/wise.css
       lines 9433        .ws-scorecards-section (its margin is not
                         ported: REGISTRY.md rule 10, the root sets none)
       lines 9466-9500   the rail (.ws-scorecards-wrap, .ws-scorecards),
                         the card, --lg, hover, dark and focus
       lines 9501-9525   the load-in (wsScorecardSettle, --ws-sc-i)
       lines 9526-9558   the chevrons and the edge fades
       lines 9659-9742   top row, icon and pill tones, metric, title,
                         description, action; the intro / WISEcodeAI and
                         gold faces
       lines 9743-9792   the hero face and the serif headline
       lines 9793-9838   art, xl, art-only and badge cards
       lines 9863-9867   .ws-sc-badge
       lines 9890-9922   the setup card's film paper (setup only)
       lines 9968-10006  .ws-sc-mark and the chip card
     js/wiseai-chat.js
       lines 2164-2168   the locked card (the chat's injected sheet)
     pages/wise.css 9481-9500 (.chip / .ws-intent-chip, the same lines
       WciIntentChip ports) for the chip card's chips, which are this
       component's own markup and so out of that sheet's scope.
     The chart cards, cut from ip-b2b e3d8608 (pulled 2026-10-10):
       pages/wise.css 10097-10161 (the four stills), 10278-10405 (the
       chart box and the intro dressing), 10550-10579 (the donut on a
       hero), 10592-10891 (pillars, race, portfolio and their reduced
       motion), and the donut base 14294-14318 and 15445-15527 (ported
       here rather than leaning on brand-intelligence.css's global copy).
       Not ported from the base: the slow breathe on the arcs and the
       hover fade the design itself cancels on this card.
   Class names are kept IDENTICAL. Dropped selectors, all for hosts or
   switches the app does not have: .sc-welcome (the design's welcome
   pad and chevron inset), .sc-card (the dark dock), .sc-welcome.sc-hidden,
   .ws-scorecard--settled, the .ws-sc-focus-* (Focused cards) halves of
   the intro and gold rules, .sc-card-art-off (Solid card backgrounds),
   the film and onboard halves of the setup paint, and the chat ⋯ card
   switches (.sc-cards-hidden, .sc-admin-cards-off, .sc-starter-cards-off,
   .sc-extra-cards-off: the host decides which cards to pass, and
   WciScorecard drops admin cards itself), and the .sc-card-art-off
   (Solid backgrounds), .sc-cards-portrait and .sc-cards-focus halves of
   the chart rules. Not ported: the Focused cards face and the Card width
   switch (prototype switches the ticket does not ask for). Portrait cards
   are WciScorecard.Portrait (10417-10501). The film, inset, single width
   and store ratings are INTEL-685, in their own section at the foot of
   this sheet.
   Changed: the hero's fallback still (url('../assets/auth-hero.png'), a
   2.2 MB picture the app does not ship) is `none`; a host passes its own
   through Card.Background (the design's `bg`).
   =================================================================== */

.ws-scorecards-section[b-5sc8vj2qkn] { width: 100%; max-width: 100%; }
.ws-scorecards-wrap[b-5sc8vj2qkn] { position: relative; width: 100%; }
.ws-scorecards[b-5sc8vj2qkn] {
  display: flex; gap: 12px; width: 100%; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none; padding: 14px 2px 22px;
}
.ws-scorecards[b-5sc8vj2qkn]::-webkit-scrollbar { height: 0; width: 0; display: none; }
.ws-scorecard[b-5sc8vj2qkn] {
  display: flex; flex-direction: column; align-items: stretch; gap: 6px; text-align: left;
  flex: 0 0 244px; min-width: 244px; scroll-snap-align: start;
  padding: 14px 16px; aspect-ratio: 16 / 9;
  /* Same blue-tinted surface as the intent chips below (.chip / .ws-intent-chip)
     so the large and small intent surfaces read as one family. */
  background: color-mix(in srgb, var(--primary) 10%, #fff); border: 1px solid var(--border-strong);
  border-radius: 10px !important; cursor: pointer; font-family: inherit;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.ws-scorecard--lg[b-5sc8vj2qkn] {
  flex: 0 0 268px;
  min-width: 268px;
  aspect-ratio: 4 / 3;
}
.ws-scorecard:hover[b-5sc8vj2qkn] { background: color-mix(in srgb, var(--primary) 16%, #fff); border-color: color-mix(in srgb, var(--primary) 45%, var(--border-strong)); box-shadow: 0 6px 18px rgba(37, 80, 124, 0.12); transform: translateY(-2px); }
html.dark .ws-scorecard[b-5sc8vj2qkn] { background: color-mix(in srgb, var(--primary-bright, #8B9FAF) 14%, transparent); }
html.dark .ws-scorecard:hover[b-5sc8vj2qkn] { background: color-mix(in srgb, var(--primary-bright, #8B9FAF) 20%, transparent); }
.ws-scorecard:focus-visible[b-5sc8vj2qkn] { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Load-in: each card drops a few pixels from above and settles, one after
   another along the rail. `--ws-sc-i` is the card's place among the cards
   actually shown (set by the chat module); the delay caps so cards far down
   the rail are not left waiting. Fill is `backwards` only, so the resting
   card owns its transform again and the hover lift still works. Pure CSS
   motion on purpose — a JS-primed reveal can strand a card at opacity 0. */
@keyframes wsScorecardSettle-b-5sc8vj2qkn {
  0%   { opacity: 0; transform: translateY(-24px); animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1); }
  45%  { opacity: 1; }
  62%  { transform: translateY(3px); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  82%  { transform: translateY(-1px); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  100% { opacity: 1; transform: none; }
}
.ws-scorecard[b-5sc8vj2qkn] {
  animation: wsScorecardSettle-b-5sc8vj2qkn 0.9s backwards;
  animation-delay: min(calc(0.08s + var(--ws-sc-i, 0) * 0.1s), 0.75s);
}
@media (prefers-reduced-motion: reduce) {
  .ws-scorecard[b-5sc8vj2qkn] { animation: none; }
}
/* Bare chevrons sitting just off the rail edges — no chunky circle. The edge
   fades below provide the backdrop that keeps the glyphs legible. */
.ws-sc-scroll[b-5sc8vj2qkn] {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 36px; padding: 0; border-radius: 0 !important;
  background: transparent; border: 0; box-shadow: none; color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}
.ws-sc-scroll:hover[b-5sc8vj2qkn] { background: transparent; color: var(--text); transform: translateY(-50%) scale(1.15); }
.ws-sc-scroll .material-symbols-outlined[b-5sc8vj2qkn] { font-size: 22px !important; }
.ws-sc-scroll--next[b-5sc8vj2qkn] { right: -16px; }
.ws-sc-scroll--prev[b-5sc8vj2qkn] { left: -16px; }
.ws-sc-scroll[hidden][b-5sc8vj2qkn] { display: none; }
.ws-scorecards-wrap[b-5sc8vj2qkn]::before, .ws-scorecards-wrap[b-5sc8vj2qkn]::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 24px; pointer-events: none; z-index: 4; opacity: 0; transition: opacity 0.15s ease;
}
.ws-scorecards-wrap[b-5sc8vj2qkn]::before { left: 0; background: linear-gradient(to right, var(--bg) 0%, transparent 100%); }
.ws-scorecards-wrap[b-5sc8vj2qkn]::after { right: 0; background: linear-gradient(to left, var(--bg) 0%, transparent 100%); }
html.dark .ws-scorecards-wrap[b-5sc8vj2qkn]::before { background: linear-gradient(to right, var(--surface) 0%, transparent 100%); }
html.dark .ws-scorecards-wrap[b-5sc8vj2qkn]::after { background: linear-gradient(to left, var(--surface) 0%, transparent 100%); }
.ws-scorecards-wrap.has-prev[b-5sc8vj2qkn]::before { opacity: 1; }
.ws-scorecards-wrap.has-next[b-5sc8vj2qkn]::after { opacity: 1; }

.ws-sc-top[b-5sc8vj2qkn] { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* Bare glyphs — no chip behind them — sized up a touch for presence. */
.ws-sc-icon[b-5sc8vj2qkn] { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ws-sc-icon .material-symbols-outlined[b-5sc8vj2qkn] { font-size: 24px !important; }
/* Metric cards: neutral (foreground) icon — intro/WISEcodeAI keep the brand accent. */
.ws-sc-icon--brand[b-5sc8vj2qkn],
.ws-sc-icon--warn[b-5sc8vj2qkn],
.ws-sc-icon--alert[b-5sc8vj2qkn] { color: var(--text); }
.ws-sc-pill[b-5sc8vj2qkn] { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: var(--radius-pill, 999px); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; }
.ws-sc-pill .material-symbols-outlined[b-5sc8vj2qkn] { font-size: 12px !important; }
/* Metric-card pills: neutral grey "shades of black" (intro/WISEcodeAI keep accent). */
.ws-sc-pill--up[b-5sc8vj2qkn],
.ws-sc-pill--warn[b-5sc8vj2qkn],
.ws-sc-pill--alert[b-5sc8vj2qkn] { background: color-mix(in srgb, var(--text) 12%, transparent); color: var(--text); }
.ws-sc-metric[b-5sc8vj2qkn] { font-size: 1.5rem; font-weight: 800; line-height: 1.1; color: var(--text); margin-top: 4px; letter-spacing: -0.02em; }
.ws-sc-metric-unit[b-5sc8vj2qkn] { font-size: 0.8125rem; font-weight: 600; color: var(--text-muted); letter-spacing: 0; }
.ws-sc-title[b-5sc8vj2qkn] { font-size: 0.8125rem; font-weight: 700; color: var(--text); }
.ws-sc-desc[b-5sc8vj2qkn] { font-size: 0.75rem; line-height: 1.4; color: var(--text-muted); flex: 1 1 auto; }
.ws-sc-action[b-5sc8vj2qkn] { display: inline-flex; align-items: center; align-self: flex-end; gap: 4px; margin-top: 6px; font-size: 0.75rem; font-weight: 700; color: var(--primary-ink, var(--primary)); }
.ws-sc-action .material-symbols-outlined[b-5sc8vj2qkn] { font-size: 15px !important; transition: transform 0.15s ease; }
.ws-scorecard:hover .ws-sc-action .material-symbols-outlined[b-5sc8vj2qkn] { transform: translate(2px, -2px); }
/* Intro / orientation variants — same surface as the metric cards, set apart
   only by an accent stroke + a matching accent headline. */
.ws-scorecard--intro[b-5sc8vj2qkn],
.ws-scorecard--wiseai[b-5sc8vj2qkn] { border-color: color-mix(in srgb, var(--primary) 45%, var(--border-strong)); }
.ws-scorecard--intro:hover[b-5sc8vj2qkn],
.ws-scorecard--wiseai:hover[b-5sc8vj2qkn] { border-color: color-mix(in srgb, var(--primary) 70%, var(--border-strong)); box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 16%, transparent); }
.ws-sc-icon--intro[b-5sc8vj2qkn],
.ws-sc-icon--wiseai[b-5sc8vj2qkn] { color: var(--primary-ink, var(--primary)); }
.ws-sc-pill--intro[b-5sc8vj2qkn],
.ws-sc-pill--wiseai[b-5sc8vj2qkn] { background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary-ink, var(--primary)); }
.ws-sc-intro-title[b-5sc8vj2qkn] { font-size: 1rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; color: var(--text); margin-top: 6px; }
.ws-scorecard--intro .ws-sc-intro-title[b-5sc8vj2qkn],
.ws-scorecard--wiseai .ws-sc-intro-title[b-5sc8vj2qkn] { color: var(--primary-ink, var(--primary)); }
/* Walkthrough / gold intro — pale gold paper, Gilded Grain stroke.
   Same light-card recipe as the blue intros; the fill is the lightest gold
   wash (--warm-300), the border stays the dark gold. */
.ws-scorecard--gold[b-5sc8vj2qkn] {
  background: color-mix(in srgb, var(--warm-300, #B69252) 10%, #fff);
  border-color: var(--warm-400, #946005);
}
.ws-scorecard--gold:hover[b-5sc8vj2qkn] {
  background: color-mix(in srgb, var(--warm-300, #B69252) 16%, #fff);
  border-color: var(--warm-400, #946005);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--warm-400, #946005) 16%, transparent);
}
html.dark .ws-scorecard--gold[b-5sc8vj2qkn] {
  background: color-mix(in srgb, var(--warm-300, #B69252) 14%, transparent);
  border-color: var(--warm-400, #946005);
}
html.dark .ws-scorecard--gold:hover[b-5sc8vj2qkn] {
  background: color-mix(in srgb, var(--warm-300, #B69252) 22%, transparent);
  border-color: var(--warm-400, #946005);
}
.ws-scorecard--gold .ws-sc-icon[b-5sc8vj2qkn],
.ws-sc-icon--gold[b-5sc8vj2qkn],
.ws-scorecard--gold .ws-sc-intro-title[b-5sc8vj2qkn],
.ws-scorecard--gold .ws-sc-action[b-5sc8vj2qkn] {
  color: var(--warm-400, #946005);
}
.ws-sc-pill--gold[b-5sc8vj2qkn],
.ws-scorecard--gold .ws-sc-pill[b-5sc8vj2qkn] {
  background: color-mix(in srgb, var(--warm-300, #B69252) 16%, transparent);
  color: var(--warm-400, #946005);
}
html.dark .ws-scorecard--gold .ws-sc-icon[b-5sc8vj2qkn],
html.dark .ws-sc-icon--gold[b-5sc8vj2qkn],
html.dark .ws-scorecard--gold .ws-sc-intro-title[b-5sc8vj2qkn],
html.dark .ws-scorecard--gold .ws-sc-action[b-5sc8vj2qkn],
html.dark .ws-sc-pill--gold[b-5sc8vj2qkn],
html.dark .ws-scorecard--gold .ws-sc-pill[b-5sc8vj2qkn] {
  color: color-mix(in srgb, var(--warm-400, #946005) 42%, var(--ter-amber, #FFC434));
}
html.dark .ws-sc-pill--gold[b-5sc8vj2qkn],
html.dark .ws-scorecard--gold .ws-sc-pill[b-5sc8vj2qkn] {
  background: color-mix(in srgb, var(--warm-300, #B69252) 18%, transparent);
}
/* Hero variant — the welcome card wears the sign-in art, framed on the lower
   part of the photo where the food fades into the deep-blue constellation the
   auth screens read against. The gradient over it is what keeps the white
   copy legible, so it is the same in both themes: pairing it with the
   dark-mode .ws-scorecard tint would wash the art out. A card may name its
   own still in the same style (descriptor `bg`) through --ws-sc-bg /
   --ws-sc-bg-pos. (App: the fallback still is `none`, see the header.) */
.ws-scorecard--hero[b-5sc8vj2qkn],
html.dark .ws-scorecard--hero[b-5sc8vj2qkn] {
  border-color: rgba(37, 80, 124, 0.5);
  background:
    linear-gradient(180deg, rgba(13, 22, 44, 0.28) 0%, rgba(13, 22, 44, 0.5) 40%, rgba(13, 22, 44, 0.74) 100%),
    var(--ws-sc-bg, none) var(--ws-sc-bg-pos, 50% 66%) / cover no-repeat;
}
.ws-scorecard--hero:not(.ws-scorecard--chart)[b-5sc8vj2qkn] {
  flex: 0 0 268px;
  min-width: 268px;
  aspect-ratio: 4 / 3;
}
.ws-scorecard--hero:hover[b-5sc8vj2qkn],
html.dark .ws-scorecard--hero:hover[b-5sc8vj2qkn] {
  border-color: rgba(37, 80, 124, 0.85);
  box-shadow: 0 6px 18px rgba(13, 22, 44, 0.35);
  background:
    linear-gradient(180deg, rgba(13, 22, 44, 0.2) 0%, rgba(13, 22, 44, 0.42) 40%, rgba(13, 22, 44, 0.68) 100%),
    var(--ws-sc-bg, none) var(--ws-sc-bg-pos, 50% 66%) / cover no-repeat;
}
/* The one card title that reads as a headline, so it takes the brand serif —
   the same treatment as the sign-in hero's caption. */
.ws-scorecard--hero .ws-sc-intro-title[b-5sc8vj2qkn],
.ws-scorecard--lg .ws-sc-intro-title[b-5sc8vj2qkn] {
  font-family: 'WISE Digits', var(--font-serif);
  font-weight: 700;
  font-size: 1rem;
}
.ws-scorecard--hero .ws-sc-intro-title[b-5sc8vj2qkn] {
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}
/* One notch heavier than the copy on a plain card: this line is white over a
   photograph rather than ink on a surface, and 400 reads thin against it. */
.ws-scorecard--hero .ws-sc-desc[b-5sc8vj2qkn] {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
}
.ws-scorecard--hero .ws-sc-action[b-5sc8vj2qkn] { color: #fff; }
.ws-scorecard--hero .ws-sc-icon[b-5sc8vj2qkn] { color: #fff; }
.ws-scorecard--hero .ws-sc-pill[b-5sc8vj2qkn] { background: rgba(255, 255, 255, 0.22); color: #fff; }

/* A card carrying its OWN photograph (descriptor `art`) instead of the shared
   sign-in hero. The scrim is what keeps the white copy legible, so it stays the
   same in both themes — pairing it with the dark-mode card tint would wash the
   picture out. Declared after the hero rules so the custom property wins. */
.ws-scorecard--art[b-5sc8vj2qkn],
html.dark .ws-scorecard--art[b-5sc8vj2qkn] {
  border-color: rgba(37, 80, 124, 0.5);
  background:
    linear-gradient(180deg, rgba(8, 12, 24, 0.08) 0%, rgba(8, 12, 24, 0.3) 52%, rgba(8, 12, 24, 0.82) 100%),
    var(--ws-sc-art) var(--ws-sc-art-pos, 50% 50%) / cover no-repeat;
}
.ws-scorecard--art:hover[b-5sc8vj2qkn],
html.dark .ws-scorecard--art:hover[b-5sc8vj2qkn] {
  border-color: rgba(37, 80, 124, 0.85);
  box-shadow: 0 6px 18px rgba(13, 22, 44, 0.35);
  background:
    linear-gradient(180deg, rgba(8, 12, 24, 0.02) 0%, rgba(8, 12, 24, 0.22) 52%, rgba(8, 12, 24, 0.74) 100%),
    var(--ws-sc-art) var(--ws-sc-art-pos, 50% 50%) / cover no-repeat;
}
/* Double-width: two regular cards plus the rail's own gutter (244 + 12 + 244),
   so a hero shot gets a cinematic band instead of a portrait box. The rail is a
   flex row — height still comes from the tallest card, so this cannot make the
   welcome taller. In a single-width chat the card gives way to the module
   (84cqi of the chat body) rather than hanging off the rail.
   The compound selector outranks `.ws-scorecard--hero:not(.ws-scorecard--chart)`
   above, which would otherwise pin it back to 268px. */
.ws-scorecard--xl[b-5sc8vj2qkn],
.ws-scorecard--hero.ws-scorecard--xl[b-5sc8vj2qkn] {
  flex: 0 0 min(500px, 84cqi);
  min-width: min(500px, 84cqi);
  aspect-ratio: auto;
}
/* Art-only: no icon, headline, or description — the picture is the message, and
   the pill and the call to action sit at opposite ends of it. */
.ws-scorecard--artonly[b-5sc8vj2qkn] { justify-content: space-between; }
.ws-scorecard--artonly .ws-sc-top[b-5sc8vj2qkn] { align-items: flex-start; }
.ws-scorecard--artonly .ws-sc-action[b-5sc8vj2qkn] { margin-top: 0; }
/* The piece's own lettering is its headline, so the written one only stands
   in where the piece is cropped too far to carry it (Portrait cards). */
.ws-scorecard--artonly .ws-sc-art-title[b-5sc8vj2qkn] { display: none; }
/* Badge card: a seal or shield stands on the right half of a wide card, and
   the headline and description keep to the left of it. */
.ws-scorecard--badge[b-5sc8vj2qkn] { position: relative; }
.ws-scorecard--badge .ws-sc-intro-title[b-5sc8vj2qkn],
.ws-scorecard--badge .ws-sc-desc[b-5sc8vj2qkn] { max-width: calc(100% - 172px); }
.ws-sc-badge[b-5sc8vj2qkn] {
  position: absolute; right: 28px; top: 50%; transform: translateY(-50%);
  width: 140px; height: auto; pointer-events: none;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.35));
}
/* The organization-setup card (js/org-setup-chat.js) rides beside the
   walkthrough card and wears its paint: the gold class for stroke and ink,
   and this film paper for the fill. */
.ws-scorecard--setup[b-5sc8vj2qkn] { --ws-sc-film-bg: #f1f1f1; }
html .ws-scorecard.ws-scorecard--setup[b-5sc8vj2qkn],
html .ws-scorecard.ws-scorecard--setup:hover[b-5sc8vj2qkn] { background: var(--ws-sc-film-bg); }
html.dark .ws-scorecard.ws-scorecard--setup[b-5sc8vj2qkn],
html.dark .ws-scorecard.ws-scorecard--setup:hover[b-5sc8vj2qkn] { background: color-mix(in srgb, var(--warm-300, #B69252) 14%, transparent); }
/* A card's `mark` — a seal or shield standing in for its icon. */
.ws-sc-mark[b-5sc8vj2qkn] {
  display: block; height: 40px; width: auto; flex: none;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.18));
}
/* Chip card: up to three intent chips stand in for the CTA, stacked. The card
   is still one tap for its general turn — `.ws-sc-hit` stretches under the
   copy — and the chips sit above it for the narrower ones. A label too long
   for the card ends in an ellipsis rather than running off the edge. */
/* Landscape: the chips take the picture's column on the right, the copy and
   the CTA keep the left. */
.ws-scorecard--chips[b-5sc8vj2qkn] {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas:
    'top   top'
    'title chips'
    'desc  chips'
    'cta   chips';
  gap: 6px 16px;
  align-items: start;
}
.ws-scorecard--chips .ws-sc-top[b-5sc8vj2qkn] { grid-area: top; }
.ws-scorecard--chips .ws-sc-intro-title[b-5sc8vj2qkn] { grid-area: title; }
.ws-scorecard--chips .ws-sc-desc[b-5sc8vj2qkn] { grid-area: desc; flex: 0 0 auto; }
.ws-scorecard--chips .ws-sc-action[b-5sc8vj2qkn] { grid-area: cta; justify-self: start; align-self: end; margin-top: 0; }
.ws-scorecard--chips .ws-sc-chips[b-5sc8vj2qkn] { grid-area: chips; align-self: center; margin-top: 0; }
.ws-sc-hit[b-5sc8vj2qkn] {
  position: absolute; inset: 0; z-index: 0; margin: 0; padding: 0;
  background: transparent; border: 0; border-radius: inherit; cursor: pointer;
}
.ws-sc-hit:focus-visible[b-5sc8vj2qkn] { outline: 2px solid var(--primary); outline-offset: 2px; }
.ws-scorecard--chips > :not(.ws-sc-hit)[b-5sc8vj2qkn] { position: relative; z-index: 1; pointer-events: none; }
.ws-sc-chips[b-5sc8vj2qkn] { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: auto; min-width: 0; }
.ws-sc-chips .chip[b-5sc8vj2qkn] { max-width: 100%; min-width: 0; pointer-events: auto; }
.ws-sc-chips .chip > .material-symbols-outlined[b-5sc8vj2qkn] { flex-shrink: 0; }
.ws-sc-chip-label[b-5sc8vj2qkn] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Chart cards (ip-b2b e3d8608, pages/wise.css 10097-10161, 10278-10405,
   10550-10579, 10592-10891; the donut base 14294-14318 and 15445-15527) ---- */
/* Chart welcome cards — own stills, sized to hold the Overview donut
   or the three WISEscore pillar bars. (App: the stills are served from
   /images/intent-cards/, the design's ../assets/.) */
.ws-scorecard--chart[b-5sc8vj2qkn] {
  flex: 0 0 268px;
  min-width: 268px;
  aspect-ratio: 4 / 3;
  min-height: 0;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 4px 6px;
}
/* The donut sits on the product-analytics still — a packaged pantry laid
   out for review. */
.ws-scorecard--chart-upf[b-5sc8vj2qkn],
html.dark .ws-scorecard--chart-upf[b-5sc8vj2qkn] {
  background:
    linear-gradient(180deg, rgba(13, 22, 44, 0.28) 0%, rgba(13, 22, 44, 0.5) 40%, rgba(13, 22, 44, 0.74) 100%),
    url('/images/intent-cards/welcome-card-analytics.jpg') 50% 25% / cover no-repeat;
}
.ws-scorecard--chart-upf:hover[b-5sc8vj2qkn],
html.dark .ws-scorecard--chart-upf:hover[b-5sc8vj2qkn] {
  background:
    linear-gradient(180deg, rgba(13, 22, 44, 0.2) 0%, rgba(13, 22, 44, 0.42) 40%, rgba(13, 22, 44, 0.68) 100%),
    url('/images/intent-cards/welcome-card-analytics.jpg') 50% 25% / cover no-repeat;
}
.ws-scorecard--chart-pillars[b-5sc8vj2qkn],
html.dark .ws-scorecard--chart-pillars[b-5sc8vj2qkn] {
  background:
    linear-gradient(180deg, rgba(13, 22, 44, 0.28) 0%, rgba(13, 22, 44, 0.5) 40%, rgba(13, 22, 44, 0.74) 100%),
    url('/images/intent-cards/welcome-card-pillars.png') 50% 28% / cover no-repeat;
}
.ws-scorecard--chart-pillars:hover[b-5sc8vj2qkn],
html.dark .ws-scorecard--chart-pillars:hover[b-5sc8vj2qkn] {
  background:
    linear-gradient(180deg, rgba(13, 22, 44, 0.2) 0%, rgba(13, 22, 44, 0.42) 40%, rgba(13, 22, 44, 0.68) 100%),
    url('/images/intent-cards/welcome-card-pillars.png') 50% 28% / cover no-repeat;
}
/* The race sits on a shelf of competing granola packs. */
.ws-scorecard--chart-race[b-5sc8vj2qkn],
html.dark .ws-scorecard--chart-race[b-5sc8vj2qkn] {
  background:
    linear-gradient(180deg, rgba(13, 22, 44, 0.34) 0%, rgba(13, 22, 44, 0.56) 40%, rgba(13, 22, 44, 0.78) 100%),
    url('/images/intent-cards/welcome-card-race.jpg') 50% 20% / cover no-repeat;
}
.ws-scorecard--chart-race:hover[b-5sc8vj2qkn],
html.dark .ws-scorecard--chart-race:hover[b-5sc8vj2qkn] {
  background:
    linear-gradient(180deg, rgba(13, 22, 44, 0.26) 0%, rgba(13, 22, 44, 0.48) 40%, rgba(13, 22, 44, 0.72) 100%),
    url('/images/intent-cards/welcome-card-race.jpg') 50% 20% / cover no-repeat;
}
/* A brighter, busier photograph than the other two, so it carries a heavier
   scrim — the split bar and its counts have to read over the packaging. */
.ws-scorecard--chart-portfolio[b-5sc8vj2qkn],
html.dark .ws-scorecard--chart-portfolio[b-5sc8vj2qkn] {
  background:
    linear-gradient(180deg, rgba(13, 22, 44, 0.56) 0%, rgba(13, 22, 44, 0.72) 40%, rgba(13, 22, 44, 0.88) 100%),
    url('/images/intent-cards/dash-hero-banner.png') 50% 45% / cover no-repeat;
}
.ws-scorecard--chart-portfolio:hover[b-5sc8vj2qkn],
html.dark .ws-scorecard--chart-portfolio:hover[b-5sc8vj2qkn] {
  background:
    linear-gradient(180deg, rgba(13, 22, 44, 0.46) 0%, rgba(13, 22, 44, 0.64) 40%, rgba(13, 22, 44, 0.82) 100%),
    url('/images/intent-cards/dash-hero-banner.png') 50% 45% / cover no-repeat;
}
.ws-sc-chart[b-5sc8vj2qkn] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0;
  min-height: 0;
  width: 100%;
}
.ws-sc-chart--upf[b-5sc8vj2qkn] { flex-wrap: nowrap; }
.ws-sc-chart--pillars[b-5sc8vj2qkn] {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  max-width: none;
  width: 100%;
  padding: 2px 4px 0;
}
/* The donut base (wise.css 14294-14318, 15445-15527), ported into this sheet
   so the card does not lean on the dashboard's global copy. */
.dash-pct[b-5sc8vj2qkn] {
  font-size: 0.38em;
  font-weight: 700;
  vertical-align: 1.05em;
  margin-left: -0.04em;
  letter-spacing: 0;
}
.dash-pct-wrap[b-5sc8vj2qkn] { display: inline-block; line-height: 1; }
.dash-donut-center .dash-pct[b-5sc8vj2qkn] { font-size: 0.87rem; color: var(--ter-cyan); }
.dash-donut[b-5sc8vj2qkn] {
  position: relative;
  width: 252px;
  height: 252px;
  flex-shrink: 0;
}
.dash-donut-svg[b-5sc8vj2qkn] { width: 100%; height: 100%; display: block; overflow: visible; }
.dash-donut-arc[b-5sc8vj2qkn] {
  cursor: default;
  transition: opacity 0.14s ease, filter 0.14s ease;
}
/* The welcome overview card's donut has no per-segment hover, so the
   dashboard's hover fade (still reaching it from brand-intelligence.css)
   would dim the whole chart. (wise.css 15480) */
.ws-sc-donut .dash-donut-svg:hover .dash-donut-arc:not(.is-hover)[b-5sc8vj2qkn] { opacity: 1; }
.dash-donut-center[b-5sc8vj2qkn] {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  text-align: center;
  pointer-events: none;
}
/* Raised disc behind the center stat so it reads as elevated above the rings.
   Pinned to the container center (inset 0 + margin auto) so it stays perfectly
   concentric with the SVG ring. */
.dash-donut-center[b-5sc8vj2qkn]::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 10px 22px rgba(8, 15, 26, 0.22), 0 3px 8px rgba(8, 15, 26, 0.16);
  z-index: 0;
}
html.dark .dash-donut-center[b-5sc8vj2qkn]::before {
  background: #14242f;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.5), 0 3px 8px rgba(0, 0, 0, 0.4);
}
.dash-donut-center > *[b-5sc8vj2qkn] { position: relative; z-index: 1; max-width: 120px; }
.dash-donut-num[b-5sc8vj2qkn] {
  font-size: 2.3rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}
.dash-donut-num.is-teal[b-5sc8vj2qkn] { color: var(--ter-cyan); }
.dash-donut-label[b-5sc8vj2qkn] { font-size: 0.8125rem; font-weight: 700; color: var(--text); margin-top: 3px; }
.dash-donut-sub[b-5sc8vj2qkn] { font-size: 0.68rem; line-height: 1.25; color: var(--text-muted); }
.ws-scorecard--chart .ws-sc-donut.dash-donut[b-5sc8vj2qkn],
.ws-scorecard--chart .dash-donut[b-5sc8vj2qkn] {
  width: 196px;
  height: 196px;
  margin: 0 auto;
}
/* Chart card wearing the intro dressing (descriptor `head`) — a landscape
   16:9 card, not a portrait stack: the icon + pill header across the top, the
   headline under it, then the copy on the left with the donut beside it on
   the right, and the CTA closing the copy column. The donut and its center
   type are cut down so the whole story fits the card's height. */
.ws-scorecard--chart.ws-scorecard--chart-head[b-5sc8vj2qkn] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas:
    'top   top'
    'title chart'
    'desc  chart'
    'cta   cta';
  gap: 6px 14px;
  align-items: start;
  flex: 0 0 380px;
  min-width: 380px;
  aspect-ratio: 16 / 9;
  padding: 14px 16px;
}
.ws-scorecard--chart-head .ws-sc-top[b-5sc8vj2qkn] { grid-area: top; }
.ws-scorecard--chart-head .ws-sc-intro-title[b-5sc8vj2qkn] { grid-area: title; margin-top: 0; }
.ws-scorecard--chart-head .ws-sc-desc[b-5sc8vj2qkn] { grid-area: desc; flex: none; }
.ws-scorecard--chart-head .ws-sc-action[b-5sc8vj2qkn] { grid-area: cta; align-self: end; justify-self: end; margin-top: 0; }
.ws-scorecard--chart-head .ws-sc-chart[b-5sc8vj2qkn] {
  grid-area: chart;
  align-self: center;
  margin: 0;
  width: auto;
}
.ws-scorecard--chart-head .ws-sc-donut.dash-donut[b-5sc8vj2qkn],
.ws-scorecard--chart-head .dash-donut[b-5sc8vj2qkn] {
  width: 128px;
  height: 128px;
}
.ws-scorecard--chart-head.ws-scorecard--hero .dash-donut-center[b-5sc8vj2qkn]::before,
.ws-scorecard--chart-head.ws-scorecard--hero .dash-donut-double .dash-donut-center[b-5sc8vj2qkn]::before {
  width: 70px;
  height: 70px;
}
.ws-scorecard--chart-head.ws-scorecard--hero .dash-donut-center > *[b-5sc8vj2qkn] { max-width: 66px; }
.ws-scorecard--chart-head.ws-scorecard--hero .dash-donut-num[b-5sc8vj2qkn] { font-size: 1.1rem; }
.ws-scorecard--chart-head.ws-scorecard--hero .dash-pct[b-5sc8vj2qkn] { font-size: 0.56rem; }
.ws-scorecard--chart-head.ws-scorecard--hero .dash-donut-label[b-5sc8vj2qkn] { font-size: 0.54rem; }
.ws-scorecard--chart-head.ws-scorecard--hero .dash-donut-sub[b-5sc8vj2qkn] { font-size: 0.5rem; }
/* The bar-chart cards in the same intro dressing — header and copy like the
   donut card, with the bars running full width beneath the copy and the CTA
   closing bottom-right. A donut sits beside its copy; a bar chart cannot, so
   it gets its own row. On the race card the chart's own "Code race" strip
   drops (the headline and chip carry it), each lane sits beside its code
   label instead of under it, and the lanes are cut down so three fit the
   16:9 height. */
.ws-scorecard--chart-head.ws-scorecard--chart-race[b-5sc8vj2qkn],
.ws-scorecard--chart-head.ws-scorecard--chart-pillars[b-5sc8vj2qkn] {
  grid-template-areas:
    'top   top'
    'title title'
    'desc  desc'
    'chart chart'
    'cta   cta';
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
}
.ws-scorecard--chart-head .ws-sc-chart--pillars[b-5sc8vj2qkn] { padding: 0; align-self: center; }
/* Each score badge hangs below its runner, past the bottom lane's track; the
   foot padding keeps it inside the chart's clip. */
.ws-scorecard--chart-head .ws-sc-chart--race[b-5sc8vj2qkn] { padding: 0 0 6px; align-self: center; }
.ws-scorecard--chart-head .ws-sc-chart--race .ws-sc-race-head[b-5sc8vj2qkn] { display: none; }
.ws-scorecard--chart-head .ws-sc-chart--race .ws-sc-races[b-5sc8vj2qkn] { gap: 6px; }
.ws-scorecard--chart-head .ws-sc-chart--race .ws-sc-race-row[b-5sc8vj2qkn] {
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}
.ws-scorecard--chart-head .ws-sc-chart--race .ws-sc-race-track[b-5sc8vj2qkn] { height: 22px; margin: 0 14px; }
.ws-scorecard--chart-head .ws-sc-chart--race .ws-sc-race-runner[b-5sc8vj2qkn] { width: 20px; height: 20px; }
.ws-scorecard--chart-head .ws-sc-chart--race .ws-sc-race-num[b-5sc8vj2qkn] { bottom: -4px; }
/* A bar chart is taller than the row the 16:9 card can give it, and a chart
   centred in a track it overflows spills over the copy above and the CTA
   below. Clip it to its track, cap the copy at two lines, and cut the bars
   down until the set fits. */
.ws-scorecard--chart-head .ws-sc-chart--race[b-5sc8vj2qkn],
.ws-scorecard--chart-head .ws-sc-chart--pillars[b-5sc8vj2qkn],
.ws-scorecard--chart-head .ws-sc-chart--portfolio[b-5sc8vj2qkn] {
  min-height: 0;
  overflow: hidden;
}
.ws-scorecard--chart-head.ws-scorecard--chart-race .ws-sc-desc[b-5sc8vj2qkn],
.ws-scorecard--chart-head.ws-scorecard--chart-pillars .ws-sc-desc[b-5sc8vj2qkn],
.ws-scorecard--chart-head.ws-scorecard--chart-portfolio .ws-sc-desc[b-5sc8vj2qkn] {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 0;
}
/* The headline and the pill already read "79 Good", so the chart's own
   WISEscore strip drops the way the race card's label strip does. */
.ws-scorecard--chart-head .ws-sc-chart--pillars .ws-sc-ws-head[b-5sc8vj2qkn] { display: none; }
.ws-scorecard--chart-head .ws-sc-chart--pillars .ws-sc-pillars[b-5sc8vj2qkn] { gap: 4px; }
.ws-scorecard--chart-head .ws-sc-chart--pillars .ws-sc-pillar-name[b-5sc8vj2qkn] { font-size: 0.64rem; }
.ws-scorecard--chart-head .ws-sc-chart--pillars .ws-sc-pillar-score[b-5sc8vj2qkn] { font-size: 0.68rem; }
.ws-scorecard--hero .dash-donut-center[b-5sc8vj2qkn]::before {
  width: 104px;
  height: 104px;
  background: rgba(13, 22, 44, 0.72);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
}
.ws-scorecard--hero .dash-donut-double .dash-donut-center[b-5sc8vj2qkn]::before {
  width: 104px;
  height: 104px;
}
.ws-scorecard--hero .dash-donut-center > *[b-5sc8vj2qkn] { max-width: 100px; }
.ws-scorecard--hero .dash-donut-num[b-5sc8vj2qkn] {
  font-size: 1.7rem;
  color: #fff;
}
.ws-scorecard--hero .dash-pct[b-5sc8vj2qkn] {
  color: #fff;
  font-size: 0.7rem;
}
.ws-scorecard--hero .dash-donut-label[b-5sc8vj2qkn] {
  font-size: 0.62rem;
  color: #fff;
  margin-top: 1px;
}
.ws-scorecard--hero .dash-donut-sub[b-5sc8vj2qkn] {
  font-size: 0.55rem;
  color: rgba(255, 255, 255, 0.78);
}
.ws-sc-ws-head[b-5sc8vj2qkn] {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  color: #fff;
}
.ws-sc-ws-label[b-5sc8vj2qkn] {
  font-family: 'WISE Digits', var(--font-serif);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: #fff;
}
.ws-sc-ws-num[b-5sc8vj2qkn] {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: #fff;
}
.ws-sc-ws-num .ws-sc-chart-num[b-5sc8vj2qkn] {
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}
.ws-sc-ws-unit[b-5sc8vj2qkn] {
  font-size: 0.78rem;
  font-weight: 600;
  opacity: 0.72;
}
.ws-sc-ws-rating[b-5sc8vj2qkn] {
  margin-left: auto;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.86;
}
.ws-sc-pillars[b-5sc8vj2qkn] { display: flex; flex-direction: column; gap: 5px; }
.ws-sc-pillar[b-5sc8vj2qkn] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px 28px;
  align-items: center;
  gap: 8px;
}
.ws-sc-pillar-name[b-5sc8vj2qkn] {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-size: 0.68rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ws-sc-pillar-name .material-symbols-outlined[b-5sc8vj2qkn] { font-size: 14px !important; flex-shrink: 0; }
.ws-sc-pillar-track[b-5sc8vj2qkn] {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  overflow: hidden;
}
.ws-sc-pillar-fill[b-5sc8vj2qkn] {
  height: 100%;
  border-radius: 999px;
  transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.ws-sc-pillar-score[b-5sc8vj2qkn] {
  font-size: 0.75rem;
  font-weight: 800;
  color: #fff;
  text-align: right;
}

/* Code race — one 0–100 track per code, each product a circular brand bug
   that runs out from the start line to its score. Card-sized twin of the
   comparison board's race chart. */
.ws-sc-chart--race[b-5sc8vj2qkn] {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  width: 100%;
  padding: 2px 4px 0;
}
.ws-sc-race-head[b-5sc8vj2qkn] {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: #fff;
}
.ws-sc-race-label[b-5sc8vj2qkn] {
  font-family: 'WISE Digits', var(--font-serif);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: #fff;
}
.ws-sc-race-sub[b-5sc8vj2qkn] {
  margin-left: auto;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.82;
}
.ws-sc-races[b-5sc8vj2qkn] { display: flex; flex-direction: column; gap: 10px; }
.ws-sc-race-metric[b-5sc8vj2qkn] {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-size: 0.64rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ws-sc-race-metric .material-symbols-outlined[b-5sc8vj2qkn] { font-size: 13px !important; flex-shrink: 0; }
/* The bugs straddle the ends of the track, so the lane is inset far enough
   that a 0 and a 100 both stay inside the card. */
.ws-sc-race-track[b-5sc8vj2qkn] {
  position: relative;
  display: block;
  height: 30px;
  margin: 1px 14px 0;
}
.ws-sc-race-lane[b-5sc8vj2qkn] {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.28);
}
/* Start line — the mark every runner left. */
.ws-sc-race-lane[b-5sc8vj2qkn]::before {
  content: '';
  position: absolute;
  left: 0;
  top: -6px;
  width: 1.5px;
  height: 14px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.42);
}
.ws-sc-race-runner[b-5sc8vj2qkn] {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  transition: left 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--delay, 0ms);
}
.ws-sc-race-runner.is-primary[b-5sc8vj2qkn] { z-index: 6; }
.ws-sc-race-bug[b-5sc8vj2qkn] {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: var(--rc, var(--primary));
  color: #fff;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.02em;
  /* The product photo fills the bug, so the brand colour reads as its ring —
     that is what tells three overlapping runners apart. */
  box-shadow: 0 0 0 1.5px var(--rc, var(--primary)), 0 2px 6px rgba(0, 0, 0, 0.4);
}
.ws-sc-race-bug img[b-5sc8vj2qkn] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--rc, var(--primary));
}
.ws-sc-race-num[b-5sc8vj2qkn] {
  position: absolute;
  left: 50%;
  bottom: -5px;
  transform: translateX(-50%);
  z-index: 3;
  padding: 0 4px;
  min-width: 17px;
  border-radius: 999px;
  background: #16202e;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  font-size: 8.5px;
  font-weight: 800;
  line-height: 1.45;
  text-align: center;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
/* Portfolio split — the whole board as one stacked bar, then a reading per
   segment. Card-sized twin of the Product Portfolio board's segment cards. */
.ws-sc-chart--portfolio[b-5sc8vj2qkn] {
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  width: 100%;
  padding: 2px 4px 0;
}
.ws-sc-pf-head[b-5sc8vj2qkn] {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: #fff;
}
.ws-sc-pf-total[b-5sc8vj2qkn] {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ws-sc-pf-label[b-5sc8vj2qkn] {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.82;
}
.ws-sc-pf-bar[b-5sc8vj2qkn] {
  display: flex;
  height: 8px;
  gap: 3px;
  border-radius: 999px;
  overflow: hidden;
}
.ws-sc-pf-seg[b-5sc8vj2qkn] {
  width: 0;
  border-radius: 999px;
  transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0ms);
}
.ws-sc-pf-rows[b-5sc8vj2qkn] { display: flex; flex-direction: column; gap: 4px; }
.ws-sc-pf-row[b-5sc8vj2qkn] {
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
}
.ws-sc-pf-dot[b-5sc8vj2qkn] {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
}
.ws-sc-pf-name[b-5sc8vj2qkn] {
  min-width: 0;
  font-size: 0.68rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ws-sc-pf-num[b-5sc8vj2qkn] {
  font-size: 0.75rem;
  font-weight: 800;
  color: #fff;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* The portfolio card in the intro dressing — the split runs full width under
   the copy, the way the race lanes do. */
.ws-scorecard--chart-head.ws-scorecard--chart-portfolio[b-5sc8vj2qkn] {
  grid-template-areas:
    'top   top'
    'title title'
    'desc  desc'
    'chart chart'
    'cta   cta';
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
}
.ws-scorecard--chart-head .ws-sc-chart--portfolio[b-5sc8vj2qkn] { padding: 0; align-self: center; gap: 5px; }
.ws-scorecard--chart-head .ws-sc-chart--portfolio .ws-sc-pf-total[b-5sc8vj2qkn] { font-size: 1.15rem; }
.ws-scorecard--chart-head .ws-sc-chart--portfolio .ws-sc-pf-label[b-5sc8vj2qkn] { font-size: 0.58rem; }
.ws-scorecard--chart-head .ws-sc-chart--portfolio .ws-sc-pf-bar[b-5sc8vj2qkn] { height: 7px; }
.ws-scorecard--chart-head .ws-sc-chart--portfolio .ws-sc-pf-rows[b-5sc8vj2qkn] { gap: 3px; }
.ws-scorecard--chart-head .ws-sc-chart--portfolio .ws-sc-pf-name[b-5sc8vj2qkn] { font-size: 0.64rem; }
.ws-scorecard--chart-head .ws-sc-chart--portfolio .ws-sc-pf-num[b-5sc8vj2qkn] { font-size: 0.68rem; }

@media (prefers-reduced-motion: reduce) {
  .ws-sc-pillar-fill[b-5sc8vj2qkn],
  .ws-sc-pf-seg[b-5sc8vj2qkn],
  .ws-sc-race-runner[b-5sc8vj2qkn] { transition: none; }
}

/* ---- The rail's card widths and Portrait cards (ip-b2b e3d8608,
   pages/wise.css 10417-10447, 10466-10501) ---- */
/* Landscape (16:9), every card on the rail is twice the upright width, so the
   run is as even lying down as it is standing up. Portrait and Focused cards
   outrank this below. (A Card.Single card sets --ws-sc-span to 1: see
   .ws-sc-w-single in the INTEL-685 section.) */
.ws-scorecards .ws-scorecard.ws-scorecard[b-5sc8vj2qkn] {
  flex: 0 0 calc(var(--ws-sc-span, 2) * var(--ws-sc-portrait-w, 216px));
  min-width: calc(var(--ws-sc-span, 2) * var(--ws-sc-portrait-w, 216px));
  aspect-ratio: 16 / 9;
}
/* "Portrait cards (9:16)" — every card on the rail stands upright at one
   width, double-width cards included, so the run stays even. Every card
   reads top to bottom as header, headline, then the picture — the chart,
   the badge, or the card's own photograph showing through — with the
   description and the CTA closing the card at its foot. A race lane moves
   under its code label, since the card is too narrow to put them side by
   side. (App: the design's chat ⋯ switch is WciScorecard.Portrait, and
   .sc-cards-portrait is the rail's own section.) */
.sc-cards-portrait .ws-scorecards .ws-scorecard[b-5sc8vj2qkn] {
  flex: 0 0 min(var(--ws-sc-portrait-w, 216px), 84cqi);
  min-width: min(var(--ws-sc-portrait-w, 216px), 84cqi);
  aspect-ratio: 9 / 16;
}
/* A split headline (every Primary card, and any card that names its own
   break) is always two lines upright: each half is its own line, so two words
   put the second word underneath. */
.sc-cards-portrait .ws-scorecards .ws-scorecard .ws-sc-title-line[b-5sc8vj2qkn] { display: block; }
.sc-cards-portrait .ws-scorecards .ws-scorecard--badge .ws-sc-intro-title[b-5sc8vj2qkn],
.sc-cards-portrait .ws-scorecards .ws-scorecard--badge .ws-sc-desc[b-5sc8vj2qkn] { max-width: none; }
.sc-cards-portrait .ws-scorecards .ws-sc-badge[b-5sc8vj2qkn] {
  order: 1;
  position: static; transform: none;
  align-self: center; margin: 10px 0 0;
}
.sc-cards-portrait .ws-scorecards .ws-sc-desc[b-5sc8vj2qkn] { order: 2; flex: none; margin-top: auto; }
.sc-cards-portrait .ws-scorecards .ws-sc-action[b-5sc8vj2qkn] { order: 3; }
/* Upright, a wide billboard keeps its photograph but crops past its own
   lettering, so the card takes its written headline under the pill and the
   crop moves onto the cast. */
.sc-cards-portrait .ws-scorecards .ws-scorecard--artonly[b-5sc8vj2qkn] {
  --ws-sc-art-pos: 62% 50%;
  justify-content: flex-start;
}
.sc-cards-portrait .ws-scorecards .ws-scorecard--artonly .ws-sc-art-title[b-5sc8vj2qkn] { display: block; }
.sc-cards-portrait .ws-scorecards .ws-scorecard--artonly .ws-sc-action[b-5sc8vj2qkn] { margin-top: auto; }
/* Upright, the chips stand where the picture would: under the headline, with
   the description and the CTA closing the card at its foot. */
.sc-cards-portrait .ws-scorecards .ws-scorecard--chips[b-5sc8vj2qkn] { display: flex; }
.sc-cards-portrait .ws-scorecards .ws-sc-chips[b-5sc8vj2qkn] { order: 1; margin-top: 10px; align-self: stretch; }
.sc-cards-portrait .ws-scorecards .ws-scorecard--chips .ws-sc-action[b-5sc8vj2qkn] { align-self: flex-end; }
.sc-cards-portrait .ws-scorecards .ws-scorecard--chart-head[b-5sc8vj2qkn] {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  grid-template-areas: 'top' 'title' 'chart' 'desc' 'cta';
}
.sc-cards-portrait .ws-scorecards .ws-scorecard--chart-head .ws-sc-desc[b-5sc8vj2qkn] { margin-top: 0; }
.sc-cards-portrait .ws-scorecards .ws-scorecard--chart-head .ws-sc-chart[b-5sc8vj2qkn] { justify-self: center; }
.sc-cards-portrait .ws-scorecards .ws-scorecard--chart-head .ws-sc-chart--race[b-5sc8vj2qkn],
.sc-cards-portrait .ws-scorecards .ws-scorecard--chart-head .ws-sc-chart--pillars[b-5sc8vj2qkn],
.sc-cards-portrait .ws-scorecards .ws-scorecard--chart-head .ws-sc-chart--portfolio[b-5sc8vj2qkn] { justify-self: stretch; }
.sc-cards-portrait .ws-scorecards .ws-scorecard--chart-head .ws-sc-chart--race .ws-sc-race-row[b-5sc8vj2qkn] {
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
}
.sc-cards-portrait .ws-scorecards .ws-scorecard--chart-head .ws-sc-donut.dash-donut[b-5sc8vj2qkn],
.sc-cards-portrait .ws-scorecards .ws-scorecard--chart-head .dash-donut[b-5sc8vj2qkn] {
  width: min(168px, 100%);
  height: auto;
  aspect-ratio: 1;
}

/* ---- js/wiseai-chat.js 2164-2168: the locked ("Coming soon") card ---- */
.ws-scorecard--locked[b-5sc8vj2qkn] { cursor: default; opacity: .7; }
.ws-scorecard--locked:hover[b-5sc8vj2qkn] { background: color-mix(in srgb, var(--primary) 10%, #fff); border-color: var(--border-strong); box-shadow: none; transform: none; }
html.dark .ws-scorecard--locked:hover[b-5sc8vj2qkn] { background: color-mix(in srgb, var(--primary-bright, #8B9FAF) 14%, transparent); }
.ws-sc-lock[b-5sc8vj2qkn] { font-size: 18px !important; color: var(--text-subtle); }
.ws-sc-action--locked[b-5sc8vj2qkn] { color: var(--text-subtle); align-self: flex-end; }

/* ---- pages/wise.css 9481-9500: the chip card's chips (.chip, .ws-intent-chip) ---- */
.chip[b-5sc8vj2qkn] {
  display: inline-flex; align-items: center; gap: 6px;
  box-sizing: border-box; height: 28px; padding: 0 7px;
  background: color-mix(in srgb, var(--primary) 10%, #fff); border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  font-size: var(--fs-label); font-weight: 500; line-height: 1; color: var(--text-muted); cursor: pointer; font-family: inherit;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.chip .material-symbols-outlined[b-5sc8vj2qkn] { font-size: 13px !important; }
.ws-intent-chip[b-5sc8vj2qkn] { background: color-mix(in srgb, var(--primary) 10%, #fff); border-color: var(--border-strong); color: var(--text-muted); font-weight: 500; }
.ws-intent-chip > .material-symbols-outlined[b-5sc8vj2qkn] { color: var(--primary); }
html.dark .ws-intent-chip > .material-symbols-outlined[b-5sc8vj2qkn] { color: var(--primary-bright, #8B9FAF); }
.ws-intent-chip:hover[b-5sc8vj2qkn] { background: color-mix(in srgb, var(--primary) 16%, #fff); border-color: color-mix(in srgb, var(--primary) 40%, var(--border-strong)); color: var(--text); }
html.dark .ws-intent-chip:hover[b-5sc8vj2qkn] {
  background: color-mix(in srgb, var(--primary-bright, #8B9FAF) 22%, transparent);
  border-color: color-mix(in srgb, var(--primary-bright, #8B9FAF) 55%, var(--primary));
  color: var(--text);
}
html.dark .ws-intent-chip[b-5sc8vj2qkn] { background: color-mix(in srgb, var(--primary-bright, #8B9FAF) 14%, transparent); border-color: var(--primary); }

/* ---- APP-OWNED ADDITIONS ---- */
/* The cards are real <button>s: reset the UA's colour so the design's text
   colours apply. */
button.ws-scorecard[b-5sc8vj2qkn] { color: var(--text); }
/* The app's welcomes are centred, so the rail centres its cards until they
   overflow and only then reads as a left-anchored scroller (`safe` keeps the
   first card reachable). The design's own rule for its sibling row, the
   Medium overview cards. */
.ws-scorecards[b-5sc8vj2qkn] { justify-content: safe center; }
/* The design's welcome rail pairs its inline padding with a matching
   scroll-padding (.sc-welcome .ws-scorecards, wise.css 9471-9476), or the
   mandatory snap parks the first card 2px in and the rail reads as already
   scrolled. The rail's own 2px padding gets the same pairing. */
.ws-scorecards[b-5sc8vj2qkn] { scroll-padding-inline: 2px; }
.ws-sc-chips .chip:focus-visible[b-5sc8vj2qkn] { outline: 2px solid var(--primary); outline-offset: 2px; }
/* A locked photograph card (hero or art): the locked hover's pale fill
   would sit behind the hero's white copy, so it keeps its resting picture
   and scrim instead and only loses the hover's lift. The design never locks
   one; the lock glyph takes the hero's white so it reads on the picture.
   The leading `html` matches the weight of the design's
   `html.dark .ws-scorecard--locked:hover`, which these follow, so they hold
   in dark mode too. */
html .ws-scorecard--locked.ws-scorecard--hero:hover[b-5sc8vj2qkn] {
  border-color: rgba(37, 80, 124, 0.5); box-shadow: none; transform: none;
  background:
    linear-gradient(180deg, rgba(13, 22, 44, 0.28) 0%, rgba(13, 22, 44, 0.5) 40%, rgba(13, 22, 44, 0.74) 100%),
    var(--ws-sc-bg, none) var(--ws-sc-bg-pos, 50% 66%) / cover no-repeat;
}
html .ws-scorecard--locked.ws-scorecard--art:hover[b-5sc8vj2qkn] {
  background:
    linear-gradient(180deg, rgba(8, 12, 24, 0.08) 0%, rgba(8, 12, 24, 0.3) 52%, rgba(8, 12, 24, 0.82) 100%),
    var(--ws-sc-art) var(--ws-sc-art-pos, 50% 50%) / cover no-repeat;
}
.ws-scorecard--hero .ws-sc-lock[b-5sc8vj2qkn] { color: rgba(255, 255, 255, 0.88); }
/* Upright, the donut in the intro dressing is sized by its row as well as
   its column (the design's min(168px, 100%) is the column alone): on a card
   shrunk toward the 340px floor, a two-line headline and a full description
   leave the chart row shorter than the donut, which then overlapped them.
   The chart fills its grid area and the donut is the smallest of 168px, the
   area's width and its height. */
.sc-cards-portrait .ws-scorecards .ws-scorecard--chart-head .ws-sc-chart--upf[b-5sc8vj2qkn] {
  justify-self: stretch;
  align-self: stretch;
  min-height: 0;
  container-type: size;
}
.sc-cards-portrait .ws-scorecards .ws-scorecard--chart-head .ws-sc-chart--upf .ws-sc-donut.dash-donut[b-5sc8vj2qkn] {
  width: min(168px, 100cqw, 100cqh);
  height: auto;
  aspect-ratio: 1;
}
/* The WISEscore strip comes back when the pill does not carry the score
   (a host's own pill, or the lock in its place): the dressing only hides it
   because the design's pill reads "79 Good". */
.ws-scorecard--chart-head .ws-sc-chart--pillars.wci-sc-ws-keep .ws-sc-ws-head[b-5sc8vj2qkn] {
  display: flex; flex-direction: row; align-items: baseline; gap: 6px;
}
/* Back in the dressing's tight 16:9 card it reads as one short row: the
   headline already names the card, so the label goes and the figure drops to
   the bars' scale. */
.ws-scorecard--chart-head .ws-sc-chart--pillars.wci-sc-ws-keep .ws-sc-ws-label[b-5sc8vj2qkn] { display: none; }
.ws-scorecard--chart-head .ws-sc-chart--pillars.wci-sc-ws-keep .ws-sc-ws-num[b-5sc8vj2qkn] { flex: 1 1 auto; }
.ws-scorecard--chart-head .ws-sc-chart--pillars.wci-sc-ws-keep .ws-sc-ws-num .ws-sc-chart-num[b-5sc8vj2qkn] { font-size: 1rem; }
/* The design clips a dressed bar chart to its track (`overflow: hidden`),
   but a centred grid item keeps its content height, so a chart taller than
   its row still spilled over the copy and the call to action. Stretched to
   the row, the clip holds; `safe` keeps the chart's head (the score strip,
   the race's first lane) and lets the clip take its foot. */
.ws-scorecard--chart-head .ws-sc-chart--race[b-5sc8vj2qkn],
.ws-scorecard--chart-head .ws-sc-chart--pillars[b-5sc8vj2qkn],
.ws-scorecard--chart-head .ws-sc-chart--portfolio[b-5sc8vj2qkn] { align-self: stretch; justify-content: safe center; }
/* The shrunk upright donut's centre disc shrinks with it: the shared geometry's
   inner hole is about half the donut's width (DonutGeometry: 77 of 150), and a
   fixed 70px disc covered the processing-level ring on a small donut. */
.sc-cards-portrait .ws-scorecards .ws-scorecard--chart-head .ws-sc-chart--upf .dash-donut-center[b-5sc8vj2qkn]::before {
  width: min(70px, calc(min(168px, 100cqw, 100cqh) * 0.5));
  height: min(70px, calc(min(168px, 100cqw, 100cqh) * 0.5));
}
.sc-cards-portrait .ws-scorecards .ws-scorecard--chart-head .ws-sc-chart--upf .dash-donut-center > *[b-5sc8vj2qkn] {
  max-width: min(66px, calc(min(168px, 100cqw, 100cqh) * 0.47));
}
/* A card is its own stacking context, so a race bug's z-index (up to 6) stays
   inside it and never lifts over the rail's chevrons (z-index 5). */
.ws-scorecard[b-5sc8vj2qkn] { isolation: isolate; }
/* A locked chart card keeps its own still on hover, for the same reason. */
html .ws-scorecard--locked.ws-scorecard--chart-upf:hover[b-5sc8vj2qkn] {
  background:
    linear-gradient(180deg, rgba(13, 22, 44, 0.28) 0%, rgba(13, 22, 44, 0.5) 40%, rgba(13, 22, 44, 0.74) 100%),
    url('/images/intent-cards/welcome-card-analytics.jpg') 50% 25% / cover no-repeat;
}
html .ws-scorecard--locked.ws-scorecard--chart-pillars:hover[b-5sc8vj2qkn] {
  background:
    linear-gradient(180deg, rgba(13, 22, 44, 0.28) 0%, rgba(13, 22, 44, 0.5) 40%, rgba(13, 22, 44, 0.74) 100%),
    url('/images/intent-cards/welcome-card-pillars.png') 50% 28% / cover no-repeat;
}
html .ws-scorecard--locked.ws-scorecard--chart-race:hover[b-5sc8vj2qkn] {
  background:
    linear-gradient(180deg, rgba(13, 22, 44, 0.34) 0%, rgba(13, 22, 44, 0.56) 40%, rgba(13, 22, 44, 0.78) 100%),
    url('/images/intent-cards/welcome-card-race.jpg') 50% 20% / cover no-repeat;
}
html .ws-scorecard--locked.ws-scorecard--chart-portfolio:hover[b-5sc8vj2qkn] {
  background:
    linear-gradient(180deg, rgba(13, 22, 44, 0.56) 0%, rgba(13, 22, 44, 0.72) 40%, rgba(13, 22, 44, 0.88) 100%),
    url('/images/intent-cards/dash-hero-banner.png') 50% 45% / cover no-repeat;
}
@media (prefers-reduced-motion: reduce) {
  .ws-scorecard[b-5sc8vj2qkn], .ws-sc-action .material-symbols-outlined[b-5sc8vj2qkn], .ws-sc-scroll[b-5sc8vj2qkn] { transition: none; }
  .ws-scorecard:hover[b-5sc8vj2qkn] { transform: none; }
}

/* ===================================================================
   Large overview cards (INTEL-685): the billboard half of the family.
   PORTED VERBATIM from ip-b2b 6b5d3da (pulled 2026-10-13), pages/wise.css:
     9906, 9907-9930   store ratings, and their room beside a badge
     9936-9960         the film card's grid (its 380px width is outranked
                       by the rail's two widths, as in the design)
     9967-9970, 9979-9982
                       the film paper in each theme (the film halves of
                       the setup / onboard paint; .sc-card-art-off dropped)
     9991-10055        the clip, its mirror and its dark-mode twin
     10056-10063       the film-only card
     10070-10088       the inset well
     10461             the single width (.ws-sc-w-single)
     10025, 10473-10474, 10480-10496
                       Portrait cards: the mirror dropped upright, the
                       ratings' order, the clip as a square under the
                       headline (the onboard line dropped)
   Dropped: .sc-card-art-off (Solid backgrounds) and the onboarding card,
   neither of which the app has.
   =================================================================== */
.ws-scorecard--badge .ws-sc-ratings[b-5sc8vj2qkn] { max-width: calc(100% - 172px); }
/* Store ratings (descriptor `ratings`): each store's mark, a gold star, the
   score and how many ratings it stands on, in one row under the description. */
.ws-sc-ratings[b-5sc8vj2qkn] {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px;
  margin-top: 8px;
  font-size: 0.75rem; line-height: 1; color: var(--text);
}
.ws-sc-rating[b-5sc8vj2qkn] { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.ws-sc-rating-store[b-5sc8vj2qkn] { display: inline-flex; width: 14px; height: 14px; }
.ws-sc-rating-store svg[b-5sc8vj2qkn] { width: 100%; height: 100%; }
.ws-sc-rating .ws-sc-rating-star[b-5sc8vj2qkn] {
  font-size: 15px;
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
  color: var(--warm-400, #946005);
}
html.dark .ws-sc-rating-star[b-5sc8vj2qkn] { color: var(--ter-amber, #FFC434); }
.ws-sc-rating-score[b-5sc8vj2qkn] { font-weight: 700; font-variant-numeric: tabular-nums; }
.ws-sc-rating-count[b-5sc8vj2qkn] { color: var(--text-muted); }
.ws-sc-rating-count[b-5sc8vj2qkn]::before { content: '('; }
.ws-sc-rating-count[b-5sc8vj2qkn]::after { content: ')'; }
.ws-scorecard--hero .ws-sc-ratings[b-5sc8vj2qkn] { color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3); }
.ws-scorecard--hero .ws-sc-rating-star[b-5sc8vj2qkn] { color: var(--ter-amber, #FFC434); }
.ws-scorecard--hero .ws-sc-rating-count[b-5sc8vj2qkn] { color: rgba(255, 255, 255, 0.8); }
.ws-scorecard--hero .ws-sc-rating-store svg[b-5sc8vj2qkn] { filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.35)); }
/* Film card (descriptor `film`): a looping clip is the card's picture. It runs
   the full height of the card against its right edge, and in light mode the
   card is painted the clip's own backdrop (--ws-sc-film-bg) so the frame has
   no visible edge and the copy reads on the same paper the subject stands on.
   Dark mode keeps the dark card and fades the clip's left edge into it. */
.ws-scorecard--film[b-5sc8vj2qkn] {
  --ws-sc-film-bg: #f1f1f1;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40%;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas:
    'top   .'
    'title .'
    'desc  .'
    'cta   .';
  gap: 6px 14px;
  align-items: start;
  flex: 0 0 380px;
  min-width: 380px;
  aspect-ratio: 16 / 9;
}
html .ws-scorecard.ws-scorecard--film[b-5sc8vj2qkn],
html .ws-scorecard.ws-scorecard--film:hover[b-5sc8vj2qkn] { background: var(--ws-sc-film-bg); }
html.dark .ws-scorecard.ws-scorecard--film[b-5sc8vj2qkn],
html.dark .ws-scorecard.ws-scorecard--film:hover[b-5sc8vj2qkn] { background: color-mix(in srgb, var(--warm-300, #B69252) 14%, transparent); }
.ws-scorecard--film > :not(.ws-sc-film)[b-5sc8vj2qkn] { position: relative; z-index: 1; }
.ws-scorecard--film .ws-sc-top[b-5sc8vj2qkn] { grid-area: top; }
.ws-scorecard--film .ws-sc-intro-title[b-5sc8vj2qkn] { grid-area: title; margin-top: 0; }
.ws-scorecard--film .ws-sc-desc[b-5sc8vj2qkn] { grid-area: desc; flex: none; }
.ws-scorecard--film .ws-sc-action[b-5sc8vj2qkn] { grid-area: cta; align-self: end; justify-self: end; margin-top: 0; }
.ws-sc-film[b-5sc8vj2qkn] {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; border-radius: inherit;
  pointer-events: none;
}
.ws-sc-film-media[b-5sc8vj2qkn] {
  position: absolute; top: 0; right: 0;
  height: 100%; width: auto; max-width: none;
  display: block;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 14%);
          mask-image: linear-gradient(to right, transparent 0%, #000 14%);
}
html.dark .ws-sc-film-media[b-5sc8vj2qkn] {
  -webkit-mask-image: linear-gradient(to right, transparent 25%, #000 46%);
          mask-image: linear-gradient(to right, transparent 25%, #000 46%);
}
/* Mirrored film (`filmFlip`), landscape only. The mask is drawn before the
   flip, so it runs the other way to keep the fade on the copy's side. Mirrored,
   the subject lands nearer the copy, so the clip sits a little further right
   and the card clips the empty edge of the frame. */
.ws-scorecard--film-flip .ws-sc-film-media[b-5sc8vj2qkn] {
  transform: translateX(12%) scaleX(-1);
  -webkit-mask-image: linear-gradient(to left, transparent 0%, #000 14%);
          mask-image: linear-gradient(to left, transparent 0%, #000 14%);
}
html.dark .ws-scorecard--film-flip .ws-sc-film-media[b-5sc8vj2qkn] {
  -webkit-mask-image: linear-gradient(to left, transparent 25%, #000 46%);
          mask-image: linear-gradient(to left, transparent 25%, #000 46%);
}
/* A film card can carry a dark-mode twin graded on its own backdrop
   (`filmDark`). The light clip shows in light mode, the dark one in dark mode,
   and the card is painted the dark clip's own color (`--ws-sc-film-bg-dark`) so
   the frame has no visible edge against the near-black video. */
.ws-sc-film-media--dark[b-5sc8vj2qkn] { display: none; }
html.dark .ws-scorecard--film-dark .ws-sc-film-media--light[b-5sc8vj2qkn] { display: none; }
html.dark .ws-scorecard--film-dark .ws-sc-film-media--dark[b-5sc8vj2qkn] { display: block; }
html.dark .ws-scorecard.ws-scorecard--film-dark[b-5sc8vj2qkn],
html.dark .ws-scorecard.ws-scorecard--film-dark:hover[b-5sc8vj2qkn] { background: var(--ws-sc-film-bg-dark); }
/* Because the card now wears the clip's own backdrop, the dark clip needs only
   the same gentle left-edge fade the light clip uses — the heavier dark fade
   was eating into the subject. The fade blends into a matching gradient, so
   nothing of the owl is lost. */
html.dark .ws-scorecard--film-dark .ws-sc-film-media[b-5sc8vj2qkn] {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%);
          mask-image: linear-gradient(to right, transparent 0%, #000 12%);
}
/* The dark owl is framed centred in its own square, so it needs none of the
   rightward nudge the light clip uses — that push shoved the owl against the
   right crop and clipped its left wing. Drop the translate (keep the mirror)
   and the whole owl sits in frame with room to the copy. */
html.dark .ws-scorecard--film-dark.ws-scorecard--film-flip .ws-sc-film-media[b-5sc8vj2qkn] {
  transform: scaleX(-1);
  -webkit-mask-image: linear-gradient(to left, transparent 0%, #000 12%);
          mask-image: linear-gradient(to left, transparent 0%, #000 12%);
}
/* Film-only card (`filmOnly`): the clip is the whole card, edge to edge, with
   no copy on it, upright or lying down, in either theme. */
.ws-scorecard.ws-scorecard--filmonly[b-5sc8vj2qkn] { display: block; padding: 0; overflow: hidden; }
:root .ws-scorecards .ws-scorecard.ws-scorecard--filmonly .ws-sc-film[b-5sc8vj2qkn] {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; aspect-ratio: auto;
}
:root .ws-scorecards .ws-scorecard.ws-scorecard--filmonly .ws-sc-film-media[b-5sc8vj2qkn] {
  inset: 0; width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: none; mask-image: none;
}
/* Inset card (`inset`): an inner shadow hugging the card's own edges so the
   whole card reads as recessed into the surface behind it — a well, not a tile.
   Drawn on a pointer-safe ::after that sits above the film/art layer (z 0) and
   the copy (z 1), clipped to the card's own corners with border-radius: inherit.
   The shadow is spec'd in fixed px against the element's edges, so it holds the
   same at any card ratio, width, or display resolution. */
.ws-scorecard--inset[b-5sc8vj2qkn] { position: relative; }
.ws-scorecard--inset[b-5sc8vj2qkn]::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
  box-shadow:
    inset 0 2px 10px rgba(0, 0, 0, 0.30),
    inset 0 0 22px rgba(0, 0, 0, 0.18),
    inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
html.dark .ws-scorecard--inset[b-5sc8vj2qkn]::after {
  box-shadow:
    inset 0 2px 14px rgba(0, 0, 0, 0.55),
    inset 0 0 26px rgba(0, 0, 0, 0.38),
    inset 0 0 0 1px rgba(0, 0, 0, 0.30);
}
/* Card width: a single-width card is one upright width instead of two, so it
   reads as half a landscape card on the rail while keeping its background and
   copy. Portrait cards already size every card to one width, so --ws-sc-span
   only moves the landscape rail. (App: the host's Card.Single, not the
   design's chat ⋯ admin.) */
.ws-scorecards .ws-scorecard.ws-sc-w-single[b-5sc8vj2qkn] { --ws-sc-span: 1; }
/* App: half a landscape card keeps the landscape card's height (8:9 at one
   width is 16:9 at two), so a rail of one Single card, or of Single cards
   only, is as tall as a rail with a double card in it. The design's 16:9
   halves the height unless a double neighbour stretches the row. Portrait
   cards keep their own 9:16. */
.ws-scorecards-section:not(.sc-cards-portrait) .ws-scorecards .ws-scorecard.ws-sc-w-single[b-5sc8vj2qkn] { aspect-ratio: 8 / 9; }
.sc-cards-portrait .ws-scorecards .ws-scorecard--film-flip .ws-sc-film-media[b-5sc8vj2qkn] { transform: none; }
/* App: the dark twin's mirror (html.dark ... --film-dark.--film-flip) outranks
   the design's upright reset, so a dark Portrait clip stayed mirrored. */
html.dark .sc-cards-portrait .ws-scorecards .ws-scorecard--film-flip .ws-sc-film-media[b-5sc8vj2qkn] { transform: none; }
.sc-cards-portrait .ws-scorecards .ws-scorecard--badge .ws-sc-ratings[b-5sc8vj2qkn] { max-width: none; }
.sc-cards-portrait .ws-scorecards .ws-sc-ratings[b-5sc8vj2qkn] { order: 2; }
.sc-cards-portrait .ws-scorecards .ws-scorecard--film[b-5sc8vj2qkn] {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  grid-template-areas: 'top' 'title' 'film' 'desc' 'cta';
}
.sc-cards-portrait .ws-scorecards .ws-sc-film[b-5sc8vj2qkn] {
  grid-area: film; position: relative; inset: auto; align-self: center;
  margin-inline: -16px; aspect-ratio: 1; border-radius: 0;
}
.sc-cards-portrait .ws-scorecards .ws-sc-film-media[b-5sc8vj2qkn] {
  width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: none; mask-image: none;
}
html.dark .sc-cards-portrait .ws-scorecards .ws-sc-film-media[b-5sc8vj2qkn] {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
/* /Components/DesignSystem/WciSegmentBar.razor.rz.scp.css */
/* ===================================================================
   WCI component: Segment bar (WciSegmentBar).
   -------------------------------------------------------------------
   PORTED from the ip-b2b design repo, ip-b2b 3ca0b1c (2026-10-20):
     /Users/kevinjones/src/wc/ip-b2b/pages/product-portfolio-2.html
       lines 6733-6788  Non-UPF verification lens  .pf-verif / -bar / -seg / -key / -key-item / -dot / -empty
       lines 13450-13475 pfRenderVerifStrip (markup)
   The design draws it page-locally under #portfolio-panel; the id is dropped from the
   selectors. The slice colours are tokens here (the design's literals #0E7490 and #A3A7AE
   have no token): see the APP-OWNED block. .pf-verif-foot and .pf-verif-sum are not ported
   (the design's "N of M verified" summary line is the host's to draw).

   Class names are kept IDENTICAL so a future re-port is a section diff. Requires
   wwwroot/css/wci/wci-tokens.css (global). The html.dark rules are inert until the app
   grows a dark mode.
   =================================================================== */

.pf-verif[b-c093k3t756] { display: flex; flex-direction: column; gap: 10px; }
/* One bar, divided: the pieces are square-edged slices of a single rounded track, split by a hairline, never separate pills. */
.pf-verif-bar[b-c093k3t756] {
  display: flex; width: 100%; height: 24px;
  border-radius: 999px; overflow: hidden; background: var(--surface-3);
}
html.dark .pf-verif-bar[b-c093k3t756] { background: rgba(255,255,255,0.08); }
.pf-verif-bar .pf-verif-seg[b-c093k3t756] {
  display: flex; align-items: center; justify-content: center; min-width: 22px; padding: 0 6px; margin: 0;
  border: none; box-shadow: none; flex-basis: 0;
  font-family: 'WISE Digits', 'DM Sans', system-ui, sans-serif; font-size: 11px; font-weight: 800;
  cursor: pointer; transition: filter 0.15s ease, opacity 0.15s ease; white-space: nowrap; overflow: hidden;
}
.pf-verif-bar .pf-verif-seg + .pf-verif-seg[b-c093k3t756] { box-shadow: inset 2px 0 0 var(--surface); }
html.dark .pf-verif-bar .pf-verif-seg + .pf-verif-seg[b-c093k3t756] { box-shadow: inset 2px 0 0 var(--surface-raised, #1A2339); }
.pf-verif-seg:hover[b-c093k3t756] { filter: brightness(1.08); }
.pf-verif.has-pick .pf-verif-seg:not(.is-active)[b-c093k3t756] { opacity: 0.35; }
.pf-verif-key[b-c093k3t756] { flex: 0 1 auto; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.pf-verif-key-item[b-c093k3t756] {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
  border: none; background: transparent; font-family: inherit; font-size: 11px; font-weight: 600;
  color: var(--text-muted); cursor: pointer; transition: background 0.15s ease, color 0.15s ease;
}
.pf-verif-key-item:hover[b-c093k3t756] { background: var(--surface-3); color: var(--text); }
html.dark .pf-verif-key-item:hover[b-c093k3t756] { background: rgba(255,255,255,0.08); }
.pf-verif-key-item.is-active[b-c093k3t756] {
  background: color-mix(in srgb, var(--primary) 10%, var(--surface)); color: var(--text);
  box-shadow: inset 0 0 0 1px var(--primary);
}
html.dark .pf-verif-key-item.is-active[b-c093k3t756] { background: color-mix(in srgb, var(--primary) 26%, transparent); box-shadow: inset 0 0 0 1px #93C5FD; }
.pf-verif-key-item strong[b-c093k3t756] { font-family: 'WISE Digits', 'DM Sans', system-ui, sans-serif; font-weight: 800; color: var(--text); }
.pf-verif-dot[b-c093k3t756] { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pf-verif-empty[b-c093k3t756] { flex: 1 1 auto; font-size: 12px; color: var(--text-muted); }

/* ===================================================================
   APP-OWNED ADDITIONS
   =================================================================== */

/* The slice and dot tones, from the tokens (the design's .pf-verif-seg--verified / --inverif / --ready / --inelig). */
.wci-seg--green[b-c093k3t756] { background: var(--sec-green); color: #fff; }
.wci-seg--blue[b-c093k3t756] { background: var(--primary); color: #fff; }
.wci-seg--amber[b-c093k3t756] { background: var(--ter-amber); color: var(--ter-amber-text); }
.wci-seg--neutral[b-c093k3t756] { background: color-mix(in srgb, var(--text-muted) 45%, var(--surface)); color: #fff; }
.wci-seg--pale[b-c093k3t756] { background: color-mix(in srgb, var(--primary) 28%, var(--surface)); color: var(--primary-ink); }

/* The slim track (Design 6): 12px, the slices carry no figures and no minimum width. */
.wci-seg-bar--slim .pf-verif-bar[b-c093k3t756] { height: 12px; }
.wci-seg-bar--slim .pf-verif-bar .pf-verif-seg[b-c093k3t756] { min-width: 6px; padding: 0; }

/* A slice sits inside the track's clip, so its ring is drawn inside it. */
.pf-verif-seg:focus-visible[b-c093k3t756] { outline: 2px solid var(--text); outline-offset: -2px; }
.pf-verif-key-item:focus-visible[b-c093k3t756] { outline: 2px solid var(--primary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .pf-verif-bar .pf-verif-seg[b-c093k3t756], .pf-verif-key-item[b-c093k3t756] { transition: none; }
}
/* /Components/DesignSystem/WciSegmented.razor.rz.scp.css */
/* ===================================================================
   WCI component: Segmented control (WciSegmented + WciSegment)
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo:
     /Users/kevinjones/src/wc/ip-b2b/pages/wise.css
       line  22155        .sc-stream-detail (label + track column)
       lines 22156-22159  .sc-stream-detail-label
       lines 22160-22163  .sc-stream-seg (the connected pill track)
       lines 22164-22173  .sc-stream-seg-btn, :hover, .is-on
       line  22174        .sc-stream-detail.is-disabled
   Those are the catalog's copies (.dsc-demo-prefixed): the live chat's
   own rules are not in the served wise.css, so the catalog is the only
   source. The .dsc-demo prefix is dropped; nothing else is changed. The
   demo-only .is-hover state is not ported (it exists so the catalog can
   show hover without a pointer).
   NOTE: that checkout is not on every machine. These line numbers are
   from the revision the prototype host serves (Last-Modified 2026-09-24
   05:30:33 GMT, http://3.17.180.155:4144/pages/wise.css).
   Module: Component Library > Actions > "Segmented control"
   (js/all-modules-flow.js 4876-4912).
   DEVIATION: the .sc-stream-detail menu inset (margin: 4px 12px 8px 12px)
   is split onto .sc-stream-detail:not(.wci-seg), so it never reaches the
   component root and a host's margin class can take effect.
   Class names are kept IDENTICAL to wise.css so a future re-port is a
   section diff. The segments are child components, so selectors that
   reach them use ::deep.
   =================================================================== */

.sc-stream-detail[b-javqoalr4z] { display: flex; flex-direction: column; gap: 7px; }
.sc-stream-detail:not(.wci-seg)[b-javqoalr4z] { margin: 4px 12px 8px 12px; } /* see DEVIATION in the header */
.sc-stream-detail-label[b-javqoalr4z] {
  font-size: 10px; letter-spacing: 0.1em; font-weight: 700;
  text-transform: uppercase; color: var(--text-muted);
}
.sc-stream-seg[b-javqoalr4z] {
  display: flex; width: 100%; border: 1px solid var(--border-strong);
  border-radius: 9999px; overflow: hidden;
}
.sc-stream-seg[b-javqoalr4z]  .sc-stream-seg-btn {
  flex: 1 1 0; min-width: 0; height: 28px; border: 0;
  border-left: 1px solid var(--border-strong); background: transparent;
  font: inherit; font-size: 11.5px; font-weight: 700; color: var(--text-muted); cursor: default;
}
.sc-stream-seg[b-javqoalr4z]  .sc-stream-seg-btn:first-child { border-left: 0; }
.sc-stream-seg[b-javqoalr4z]  .sc-stream-seg-btn:hover { background: var(--surface-3); color: var(--text); }
.sc-stream-seg[b-javqoalr4z]  .sc-stream-seg-btn.is-on { background: var(--primary); color: #fff; }
.sc-stream-seg[b-javqoalr4z]  .sc-stream-seg-btn.is-on:hover { background: var(--primary); color: #fff; }
.sc-stream-detail.is-disabled[b-javqoalr4z] { opacity: .45; }

/* ================= APP-OWNED ADDITIONS (not in wise.css) ================= */

/* Outside the chat menu the control sits in page flow: the design's menu
   inset (4px 12px 8px) does not apply (the catalog demo zeroes it too).
   NO margin on the root, on purpose: once scoped, any margin rule here
   (0,2,0) would outrank the Tailwind margin utility a host passes through
   CssClass (0,1,0) and silently cancel it. */
.wci-seg[b-javqoalr4z] { min-width: 0; }

/* Fit: the track sizes to its labels (a toolbar, beside a header). */
.wci-seg--fit[b-javqoalr4z] { display: inline-flex; width: fit-content; max-width: 100%; align-self: flex-start; }
.wci-seg--fit .sc-stream-seg[b-javqoalr4z] { width: auto; }
.wci-seg--fit .sc-stream-seg[b-javqoalr4z]  .sc-stream-seg-btn { flex: 0 0 auto; padding: 0 14px; }

/* The segment is a live control here, not a catalog specimen. */
.sc-stream-seg[b-javqoalr4z]  .sc-stream-seg-btn { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-stream-seg[b-javqoalr4z]  .sc-stream-seg-btn .material-symbols-outlined { font-size: 16px; }
.sc-stream-seg[b-javqoalr4z]  .sc-stream-seg-btn.is-on { cursor: default; }

/* The track clips overflow, so the ring sits inside the segment. */
.sc-stream-seg[b-javqoalr4z]  .sc-stream-seg-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: -3px; }
.sc-stream-seg[b-javqoalr4z]  .sc-stream-seg-btn.is-on:focus-visible { outline-color: #fff; }

/* Disabled: a whole group dims through .is-disabled; a single option dims
   on its own. Neither takes a hover. */
.sc-stream-seg[b-javqoalr4z]  .sc-stream-seg-btn:disabled { cursor: not-allowed; }
.sc-stream-seg[b-javqoalr4z]  .sc-stream-seg-btn:disabled:not(.is-on):hover { background: transparent; color: var(--text-muted); }
.sc-stream-detail:not(.is-disabled) .sc-stream-seg[b-javqoalr4z]  .sc-stream-seg-btn:disabled { opacity: .45; }

@media (prefers-reduced-motion: no-preference) {
  .sc-stream-seg[b-javqoalr4z]  .sc-stream-seg-btn { transition: background 0.12s ease, color 0.12s ease; }
}
/* /Components/DesignSystem/WciSelect.razor.rz.scp.css */
/* ===================================================================
   WCI component: Form fields, the pill select (WciSelect)
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo:
     /Users/kevinjones/src/wc/ip-b2b/pages/wise.css
       lines 16735-16737  .adm-select, html.dark, :focus
       lines 19080-19081  .auth-select.is-invalid (the invalid state; the
                          adm family has none, and the card says the auth
                          inputs are the same control)
   NOTE: that checkout is not on every machine. These line numbers are
   from the revision the prototype host serves (Last-Modified 2026-09-24
   05:30:33 GMT, http://3.17.180.155:4144/pages/wise.css).
   Module: Component Library > Inputs & forms > "Form fields"
   (js/all-modules-flow.js 5628-5645).
   Class names are kept IDENTICAL to wise.css so a future re-port is a
   section diff. Consumes tokens from wwwroot/css/wci/wci-tokens.css.
   The html.dark rules are ported as-is; they are inert until the app
   grows a theme toggle.
   =================================================================== */

.adm-select[b-f60nze80k3] { height: 42px; box-sizing: border-box; padding: 0 34px 0 16px; font-family: inherit; font-size: 0.8125rem; color: var(--text); background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); outline: none; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
html.dark .adm-select[b-f60nze80k3] { background-color: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.10); }
.adm-select:focus[b-f60nze80k3] { border-color: color-mix(in srgb, var(--primary) 55%, var(--border-strong)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }

/* ---- Invalid (wise.css 19080-19081, .auth-select family) ---- */
.adm-select.is-invalid[b-f60nze80k3] { border-color: var(--sec-red); box-shadow: 0 0 0 3px var(--sec-red-soft); }

/* ================= APP-OWNED ADDITIONS (not in wise.css) ================= */

/* wwwroot/app.css (the project template) outlines every .valid.modified field
   in green, and outranks the design's outline: none. The pill shows its
   state through the focus ring and .is-invalid; an edited field is not news. */
.adm-select.valid.modified[b-f60nze80k3] { outline: none; }

/* --sec-red-soft is read by the design's invalid rule but defined nowhere in
   the served wise.css, which would drop the ring altogether. */
.adm-select.is-invalid[b-f60nze80k3] { --sec-red-soft: var(--sec-red-10); }

/* Live disabled state. */
.adm-select:disabled[b-f60nze80k3] { opacity: 0.55; cursor: not-allowed; }

/* A long option label truncates inside the pill instead of widening it. */
.adm-select[b-f60nze80k3] { max-width: 100%; text-overflow: ellipsis; }
/* /Components/DesignSystem/WciSlider.razor.rz.scp.css */
/* ===================================================================
   WCI component: Threshold slider (WciSlider, INTEL-675)
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo (ab499e3, pulled
   2026-10-07; the prototype host serves the same file at
   http://3.17.180.155:4144/pages/wise.css):
     pages/wise.css
       lines 26483-26535  "Threshold slider (one handle) and range
                          slider (two)": the shared root, head, label
                          and reading, both inputs' tracks and thumbs,
                          ticks, the range's track, fill and stacked
                          inputs
   Module: Component Library > Filters > "Threshold slider"
   (js/all-modules-flow.js, the card dsc-comp-threshold-slider).
   The design writes the two sliders as ONE section with shared
   selectors. Scoped CSS cannot be shared between components, so the
   whole section is pasted here and in WciRangeSlider.razor.css alike;
   the rules for the other control match nothing here. Keep the two
   copies identical: a re-port pastes the same range into both.
   Class names are kept IDENTICAL to wise.css so a future re-port is a
   section diff.
   =================================================================== */

/* ── Threshold slider (one handle) and range slider (two) ──────────── */
.wise-slider[b-avs932v661], .wise-range[b-avs932v661] { width: 100%; max-width: 420px; font-family: inherit; --pct: 50%; --lo: 0%; --hi: 100%; }
.wise-slider-head[b-avs932v661] {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px;
}
.wise-slider-label[b-avs932v661] { font-size: 0.7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-subtle); }
.wise-slider-val[b-avs932v661] {
  font-size: 0.8125rem; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums;
}
.wise-slider-val b[b-avs932v661] { color: var(--primary-ink, var(--primary)); }
.wise-slider-input[b-avs932v661], .wise-range-input[b-avs932v661] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 22px; margin: 0;
  background: transparent; cursor: pointer; outline: none; display: block;
}
.wise-slider-input[b-avs932v661]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--primary) 0 var(--pct), var(--border-strong) var(--pct) 100%);
}
.wise-slider-input[b-avs932v661]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--border-strong); }
.wise-slider-input[b-avs932v661]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--primary); }
.wise-slider-input[b-avs932v661]::-webkit-slider-thumb,
.wise-range-input[b-avs932v661]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--primary); box-shadow: var(--shadow-1);
  transition: transform .12s ease, box-shadow .12s ease;
}
.wise-slider-input[b-avs932v661]::-moz-range-thumb, .wise-range-input[b-avs932v661]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 2px solid var(--primary);
}
.wise-slider-input:hover[b-avs932v661]::-webkit-slider-thumb, .wise-range-input:hover[b-avs932v661]::-webkit-slider-thumb,
.wise-slider-input:focus-visible[b-avs932v661]::-webkit-slider-thumb, .wise-range-input:focus-visible[b-avs932v661]::-webkit-slider-thumb {
  transform: scale(1.12); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent);
}
.wise-slider-input:disabled[b-avs932v661], .wise-range.is-disabled .wise-range-input[b-avs932v661] { opacity: .45; cursor: not-allowed; }
.wise-slider-ticks[b-avs932v661] {
  display: flex; justify-content: space-between; margin-top: 2px;
  font-size: 10.5px; font-weight: 600; color: var(--text-subtle); font-variant-numeric: tabular-nums;
}
.wise-range-track[b-avs932v661] { position: relative; height: 22px; }
.wise-range-track[b-avs932v661]::before {
  content: ''; position: absolute; left: 0; right: 0; top: 9px; height: 4px; border-radius: 2px;
  background: var(--border-strong);
}
.wise-range-fill[b-avs932v661] {
  position: absolute; top: 9px; height: 4px; border-radius: 2px; background: var(--primary);
  left: var(--lo); width: calc(var(--hi) - var(--lo)); pointer-events: none;
}
.wise-range-input[b-avs932v661] { position: absolute; inset: 0; pointer-events: none; }
.wise-range-input[b-avs932v661]::-webkit-slider-runnable-track { height: 4px; background: transparent; }
.wise-range-input[b-avs932v661]::-moz-range-track { height: 4px; background: transparent; }
.wise-range-input[b-avs932v661]::-webkit-slider-thumb { pointer-events: auto; }
.wise-range-input[b-avs932v661]::-moz-range-thumb { pointer-events: auto; }
.wise-range-input.is-top[b-avs932v661] { z-index: 2; }

/* ===================================================================
   APP-OWNED ADDITIONS (not in wise.css)
   =================================================================== */

/* Keyboard focus is the design's thumb ring (above); the browser's own outline is not drawn as well. */
.wise-slider-input:focus-visible[b-avs932v661], .wise-range-input:focus-visible[b-avs932v661] { outline: none; }

.wise-slider.is-disabled .wise-slider-val[b-avs932v661], .wise-range.is-disabled .wise-slider-val[b-avs932v661] { color: var(--text-subtle); }

@media (prefers-reduced-motion: reduce) {
  .wise-slider-input[b-avs932v661]::-webkit-slider-thumb, .wise-range-input[b-avs932v661]::-webkit-slider-thumb { transition: none; }
}
/* /Components/DesignSystem/WciStaffBadge.razor.rz.scp.css */
/* Source: ip-b2b/pages/wise.css 2848-2867, wise-popover-badge, local 2026-10-09.
   App-owned: omit the menu-only auto margin (registry rule 10); replace paints with tokens. */
.wise-popover-badge[b-49lzgij54i] {
  flex-shrink: 0;
  align-self: center;
  zoom: 0.5;
  padding: 0 7px;
  border-radius: 6px;
  background: var(--staff-ink);
  color: var(--staff-on-ink);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.25;
  text-transform: uppercase;
}
/* /Components/DesignSystem/WciStatTile.razor.rz.scp.css */
/* ===================================================================
   WCI component: Stat tiles, Action state (WciStatTile). Grid + container
   query + corner cycle live in WciStatTileGroup.razor.css; chips in
   WciStatusChip.razor.css; the tile's action button is WciButton.
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo:
     /Users/kevinjones/src/wc/ip-b2b/pages/wise.css
       lines 14159-14189  Action scorecards  .adm-vf-stats / .adm-vf-stat / -num / -chipwrap / -sub
                                             / .is-active / .adm-stat--red|green|amber|blue
       lines 15551-15598  Scorecard corners  (only the .adm-vf-stat selector is kept here)
     /Users/kevinjones/src/wc/ip-b2b/js/all-modules-flow.js
       lines 4042-4073    module "Action scorecards" (markup template)

   Class names are kept IDENTICAL to wise.css so a future re-port is a
   section diff. Requires wwwroot/css/wci/wci-tokens.css (global).

   Scoped CSS: Blazor appends this component's scope attribute to the LAST
   compound of each selector. The tile root <div class="adm-vf-stat"> is in this
   component, so bare .adm-vf-stat* selectors match. The chip and the ghost
   button are child elements/components rendered by this file too, but
   .adm-chip is owned by WciStatusChip, so selectors that reach into it use
   ::deep. html.dark prefixes survive scoping unchanged.

   The html.dark rules are ported as-is; they are inert until the app grows
   a dark mode that puts .dark on <html>.
   =================================================================== */

/* ---- Admin buttons ----
   Moved to WciButton.razor.css / WciIconButton.razor.css (INTEL-363, INTEL-385). In the current
   wise.css .adm-btn is only an alias of .wise-btn (line 16731), and the tile's action is a WciButton. */


/* ---- Status chips (wise.css 14008-14020) ----
   Live in WciStatusChip.razor.css (WciStatusChip). Only the scorecard-specific override
   for a chip inside a tile lives here (see .adm-vf-stat ::deep .adm-chip). */

/* ---- Action scorecards (wise.css 14159-14189) ---- */
/* Verification stat-card row (Products / Action Required / Verified …). */
/* The scorecard set is 8 tiles (Products + 7 statuses). To keep every row
   completely full — no ragged last row / blank space on the right — the grid
   only ever uses a column count that divides 8 evenly (8 → 4 → 2 → 1). Each
   step down happens once the current count can no longer hold a tile at its
   ~128px comfortable minimum, so tiles stay uniform width within any layout. */
.adm-vf-stat[b-afxcyoerw1] { display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; padding: 16px 12px; background: var(--scorecard-fill, var(--surface)); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-1); text-align: center; cursor: pointer; color: var(--text); transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease; }
/* Fixed-height chip slot so the chip (whether it wraps to one or two lines)
   always occupies the same vertical band — this keeps the description text
   below it on the same axis across every scorecard. */
.adm-vf-stat-chipwrap[b-afxcyoerw1] { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 42px; }
/* Push the action button to the card's bottom edge. Cards in a row stretch to
   equal height (grid), so all buttons land on the same axis. */
/* wise.css 17026-17027 in the 2026-09-23 revision; ::deep because the button is WciButton's. */
.adm-vf-stat[b-afxcyoerw1]  .wise-btn { margin-top: auto; }
.adm-vf-stat:hover[b-afxcyoerw1] { transform: translateY(-1px); box-shadow: var(--shadow-card, var(--shadow-1)); border-color: var(--border-strong); }
.adm-vf-stat.is-active[b-afxcyoerw1] { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--scorecard-fill, var(--surface))); box-shadow: inset 0 0 0 1px var(--primary), var(--shadow-1); }
.adm-vf-stat-num[b-afxcyoerw1] { font-family: 'WISE Digits', 'DM Sans', system-ui, sans-serif; font-size: 1.7rem; font-weight: 800; line-height: 1; color: var(--score-ink, var(--text)); }
.adm-vf-stat.adm-stat--red .adm-vf-stat-num[b-afxcyoerw1] { color: var(--score-ink-red); }
.adm-vf-stat.adm-stat--green .adm-vf-stat-num[b-afxcyoerw1] { color: var(--score-ink-green); }
.adm-vf-stat.adm-stat--amber .adm-vf-stat-num[b-afxcyoerw1] { color: var(--score-ink-amber); }
.adm-vf-stat.adm-stat--blue .adm-vf-stat-num[b-afxcyoerw1] { color: var(--score-ink-blue); }
.adm-vf-stat-label[b-afxcyoerw1] { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 700; color: var(--text); }
.adm-vf-stat-label .material-symbols-outlined[b-afxcyoerw1] { font-size: 14px; }
.adm-vf-stat[b-afxcyoerw1]  .adm-chip { max-width: 100%; white-space: normal; text-align: center; justify-content: center; line-height: 1.25; }
.adm-vf-stat-sub[b-afxcyoerw1] { font-size: 0.66rem; color: var(--text-subtle); line-height: 1.3; }
/* wise.css 17039-17040 in the 2026-09-23 revision. */
.adm-vf-stat[b-afxcyoerw1]  .wise-btn--ghost { color: var(--text); border-color: var(--primary); }


/* ===================================================================
   APP-OWNED ADDITIONS (not in wise.css). Keep below the verbatim port so a
   re-sync replaces everything above this line untouched.
   =================================================================== */

/* A tile with no click handler is informational: no pointer, no hover lift. */
.adm-vf-stat:not([role="button"])[b-afxcyoerw1] { cursor: default; }
.adm-vf-stat:not([role="button"]):hover[b-afxcyoerw1] { transform: none; box-shadow: var(--shadow-1); border-color: var(--border); }

/* Disabled state. The design only ships a demo-scoped rule
   (.dsc-demo .adm-vf-stat[disabled]); this is the live equivalent for the
   tile. Its action button is WciButton, which owns its own disabled state. */
.adm-vf-stat[aria-disabled="true"][b-afxcyoerw1] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

/* Keyboard focus ring (CONVENTIONS: real UI uses :focus-visible). Same
   ring as the design's .adm-input:focus / .adm-select:focus. */
.adm-vf-stat:focus-visible[b-afxcyoerw1] {
  outline: none;
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border-strong));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent), var(--shadow-1);
}
.adm-vf-stat.is-active:focus-visible[b-afxcyoerw1] {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent), inset 0 0 0 1px var(--primary), var(--shadow-1);
}

/* Loading numeral: a shimmering slab the size of the number it stands in
   for. Same weight as the .skeleton helpers in OrganizationsAdmin /
   ProductIndexAdmin (#ECE8DE / #F6F3EC shimmer, 6px radius), tokenised. */
.adm-vf-stat-num--skeleton[b-afxcyoerw1] {
  display: inline-block;
  width: 2.2em;
  height: 1em;
  border-radius: 6px;
  color: transparent;
  background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 50%, var(--surface-3) 75%);
  background-size: 200% 100%;
  animation: wci-shimmer-b-afxcyoerw1 1.4s ease-in-out infinite;
}
html.dark .adm-vf-stat-num--skeleton[b-afxcyoerw1] {
  background: linear-gradient(90deg, rgba(255,255,255,0.08) 25%, rgba(255,255,255,0.14) 50%, rgba(255,255,255,0.08) 75%);
  background-size: 200% 100%;
}
@keyframes wci-shimmer-b-afxcyoerw1 {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* CONVENTIONS: honour prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) {
  .adm-vf-stat[b-afxcyoerw1] { transition: none; }
  .adm-vf-stat:hover[b-afxcyoerw1] { transform: none; }
  .adm-vf-stat-num--skeleton[b-afxcyoerw1] { animation: none; }
}

/* ===================================================================
   Stat tiles, Filter and Compact states (INTEL-409)
   PORTED VERBATIM from pages/wise.css, the revision the prototype host
   serves (fetched 2026-09-28):
     lines 17513-17515, 17523-17528  .adm-metric (Compact) and its parts
     lines 17532-17544               .adm-stat (Filter) and its parts, tones
   The row rules (.adm-metrics, .adm-stats) are in WciStatTileGroup.razor.css.
   Not ported: 17516-17522, the draggable metric reorder (no app feature).
   =================================================================== */
.adm-metric[b-afxcyoerw1] { flex: 1 1 calc(20% - 8px); min-width: 150px; display: flex; flex-direction: column; gap: 4px; padding: 14px 15px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-1); position: relative; }
@media (max-width: 1024px) { .adm-metric[b-afxcyoerw1] { flex-basis: calc(25% - 8px); } }
@media (max-width: 680px)  { .adm-metric[b-afxcyoerw1] { flex-basis: calc(50% - 5px); } }
.adm-metric-top[b-afxcyoerw1] { display: inline-flex; align-items: center; gap: 7px; font-size: 0.72rem; font-weight: 700; color: var(--text-muted); }
.adm-metric-top .material-symbols-outlined[b-afxcyoerw1] { font-size: 15px; color: var(--text-subtle); }
.adm-metric-num[b-afxcyoerw1] { font-family: 'WISE Digits', 'DM Sans', system-ui, sans-serif; font-size: 1.5rem; font-weight: 800; line-height: 1.05; color: var(--text); }
.adm-metric-sub[b-afxcyoerw1] { font-size: 0.7rem; color: var(--text-subtle); }
.adm-metric--accent .adm-metric-num[b-afxcyoerw1] { color: var(--sec-green); }
html.dark .adm-metric--accent .adm-metric-num[b-afxcyoerw1] { color: #6FE0A0; }

.adm-stat[b-afxcyoerw1] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 16px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-1); font-family: inherit; text-align: center; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease; }
.adm-stat:hover[b-afxcyoerw1] { transform: translateY(-1px); box-shadow: var(--shadow-card, var(--shadow-1)); border-color: var(--border-strong); }
.adm-stat:focus-visible[b-afxcyoerw1] { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); }
.adm-stat.is-active[b-afxcyoerw1] { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); box-shadow: inset 0 0 0 1px var(--primary), var(--shadow-1); }
html.dark .adm-stat.is-active[b-afxcyoerw1] { background: color-mix(in srgb, var(--primary) 22%, transparent); }
.adm-stat-num[b-afxcyoerw1] { font-family: 'WISE Digits', 'DM Sans', system-ui, sans-serif; font-size: 1.65rem; font-weight: 800; line-height: 1.02; color: var(--text); }
.adm-stat-label[b-afxcyoerw1] { display: inline-flex; align-items: center; gap: 5px; font-size: 0.76rem; font-weight: 700; color: var(--text); }
.adm-stat-label .material-symbols-outlined[b-afxcyoerw1] { font-size: 14px; }
.adm-stat-sub[b-afxcyoerw1] { font-size: 0.68rem; color: var(--text-subtle); }
.adm-stat--green .adm-stat-num[b-afxcyoerw1], .adm-stat--green .adm-stat-label .material-symbols-outlined[b-afxcyoerw1] { color: var(--score-ink-green, var(--sec-green-text)); }
.adm-stat--red .adm-stat-num[b-afxcyoerw1], .adm-stat--red .adm-stat-label .material-symbols-outlined[b-afxcyoerw1] { color: var(--score-ink-red, var(--sec-red-text)); }
.adm-stat--amber .adm-stat-num[b-afxcyoerw1], .adm-stat--amber .adm-stat-label .material-symbols-outlined[b-afxcyoerw1] { color: var(--score-ink-amber, var(--ter-amber-text)); }
.adm-stat--blue .adm-stat-num[b-afxcyoerw1], .adm-stat--blue .adm-stat-label .material-symbols-outlined[b-afxcyoerw1] { color: var(--score-ink-blue, var(--primary-ink, var(--primary))); }

/* APP-OWNED (Filter / Compact): a Filter tile with nothing to scope is a read-out,
   so it drops the pointer and the lift; disabled; reduced motion. */
.adm-stat.wci-stat--static[b-afxcyoerw1] { cursor: default; }
.adm-stat.wci-stat--static:hover[b-afxcyoerw1] { transform: none; box-shadow: var(--shadow-1); border-color: var(--border); }
.adm-stat:disabled[b-afxcyoerw1] { cursor: not-allowed; opacity: .55; }
.adm-stat:disabled:hover[b-afxcyoerw1] { transform: none; box-shadow: var(--shadow-1); border-color: var(--border); }
@media (prefers-reduced-motion: reduce) {
  .adm-stat[b-afxcyoerw1] { transition: none; }
  .adm-stat:hover[b-afxcyoerw1] { transform: none; }
}
/* /Components/DesignSystem/WciStatTileGroup.razor.rz.scp.css */
/* ===================================================================
   WCI component: Stat tiles grid (WciStatTileGroup)
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo:
     /Users/kevinjones/src/wc/ip-b2b/pages/wise.css
       lines 14159-14163  .adm-vf-stats grid + `adm` container queries
       lines 15551-15598  Scorecard corners (the .adm-vf-stat selector only)
   Class names are kept IDENTICAL to wise.css so a future re-port is a
   section diff. Requires wwwroot/css/wci/wci-tokens.css (global).

   Scoped CSS: the wrapper div and the .adm-vf-stats grid are rendered by this
   component, so their selectors are bare. The tiles are WciStatTile child
   components, so anything that targets .adm-vf-stat from here uses ::deep.
   In the design the `adm` container is the page wrapper (.adm-wrap, wise.css
   13794); here it is the .wci-stat-tile-group wrapper.
   =================================================================== */

/* Container for the `adm` container query that drives .adm-vf-stats columns.
   Mirrors .adm-wrap in the design (wise.css 13794) minus its page padding. */
.wci-stat-tile-group[b-dhf55766k0] { container-type: inline-size; container-name: adm; width: 100%; min-width: 0; }
/* WciStatTileGroup AutoFit: the design's 8/4/2/1 steps assume eight tiles. For
   a shorter row use auto-fit, exactly as the catalog demo does (wise.css 18265). */
.wci-stat-tile-group--fit .adm-vf-stats[b-dhf55766k0] { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

/* ---- Grid (wise.css 14159-14163) ---- */
/* The scorecard set is 8 tiles (Products + 7 statuses). To keep every row
   completely full — no ragged last row / blank space on the right — the grid
   only ever uses a column count that divides 8 evenly (8 → 4 → 2 → 1). Each
   step down happens once the current count can no longer hold a tile at its
   ~128px comfortable minimum, so tiles stay uniform width within any layout. */
.adm-vf-stats[b-dhf55766k0] { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
@container adm (max-width: 1093px) { .adm-vf-stats[b-dhf55766k0] { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container adm (max-width: 541px)  { .adm-vf-stats[b-dhf55766k0] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container adm (max-width: 265px)  { .adm-vf-stats[b-dhf55766k0] { grid-template-columns: 1fr; } }

/* ---- Scorecard corners (wise.css 15551-15598, .adm-vf-stat selector only) ----
   Filter / metric scorecards are rectangles with shuffled corner radii —
   never pills. A 6-step cycle so neighboring cards don't match. !important
   beats leftover uniform radii on the same class (6px / 10px / 14px) and
   any shell-wide button pill that forgot to exclude these tiles. */
.adm-vf-stats[b-dhf55766k0]  .adm-vf-stat { border-radius: 12px 4px 10px 6px !important; }
.adm-vf-stats[b-dhf55766k0]  .adm-vf-stat:nth-child(6n+2) { border-radius: 4px 12px 6px 10px !important; }
.adm-vf-stats[b-dhf55766k0]  .adm-vf-stat:nth-child(6n+3) { border-radius: 10px 6px 12px 4px !important; }
.adm-vf-stats[b-dhf55766k0]  .adm-vf-stat:nth-child(6n+4) { border-radius: 6px 10px 4px 12px !important; }
.adm-vf-stats[b-dhf55766k0]  .adm-vf-stat:nth-child(6n+5) { border-radius: 8px 4px 12px 6px !important; }
.adm-vf-stats[b-dhf55766k0]  .adm-vf-stat:nth-child(6n) { border-radius: 4px 8px 10px 12px !important; }

/* ---- Filter and Compact rows (INTEL-409), wise.css 17512 and 17531, revision
   served 2026-09-28. The tiles themselves are in WciStatTile.razor.css. ---- */
.adm-metrics[b-dhf55766k0] { display: flex; flex-wrap: wrap; gap: 10px; }
.adm-stats[b-dhf55766k0] { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }

/* ---- Dense filter cards (Dense), the Product Portfolio's .pf-stat: product-portfolio.html 6642-6665 (revision ab499e3).
   The design draws its filter cards there with a tighter pad, a 22px numeral and a muted 11px label, cornered from the
   scorecard cycle above ("never pills"). Its chat-tint fills are an appearance setting and are not ported. ---- */
.adm-stats--dense[b-dhf55766k0]  .adm-stat { padding: 12px 14px; border-radius: 12px 4px 10px 6px; }
.adm-stats--dense[b-dhf55766k0]  .adm-stat:nth-child(6n+2) { border-radius: 4px 12px 6px 10px; }
.adm-stats--dense[b-dhf55766k0]  .adm-stat:nth-child(6n+3) { border-radius: 10px 6px 12px 4px; }
.adm-stats--dense[b-dhf55766k0]  .adm-stat:nth-child(6n+4) { border-radius: 6px 10px 4px 12px; }
.adm-stats--dense[b-dhf55766k0]  .adm-stat:nth-child(6n+5) { border-radius: 8px 4px 12px 6px; }
.adm-stats--dense[b-dhf55766k0]  .adm-stat:nth-child(6n) { border-radius: 4px 8px 10px 12px; }
.adm-stats--dense[b-dhf55766k0]  .adm-stat-num { font-size: 22px; line-height: 1.05; }
.adm-stats--dense[b-dhf55766k0]  .adm-stat-label { gap: 3px; font-size: 11px; font-weight: 600; color: var(--text-muted); }
.adm-stats--dense[b-dhf55766k0]  .adm-stat-label .material-symbols-outlined { font-size: 13px; }

/* ---- APP-OWNED ADDITIONS ----
   The Output pane's KPI row (INTEL-400): wise.css 22052-22053 (.dsc-out-kpis, the
   catalog twin of the live atlas KPI grid; revision served 2026-09-28). The rule,
   not the tile: auto-fit over the group's own width, with the host's floor
   (MinTileWidth, the design's 190px) in --wci-tile-min. It overrides every
   variant's grid, so a Compact row (a wrap) lines up too. */
.wci-stat-tile-group--kpi .adm-vf-stats[b-dhf55766k0],
.wci-stat-tile-group--kpi .adm-stats[b-dhf55766k0],
.wci-stat-tile-group--kpi .adm-metrics[b-dhf55766k0] { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--wci-tile-min, 190px), 1fr)); gap: 12px; }
/* /Components/DesignSystem/WciStatusChip.razor.rz.scp.css */
/* ===================================================================
   WCI component: Status chips (WciStatusChip)
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo:
     /Users/kevinjones/src/wc/ip-b2b/pages/wise.css
       lines 14008-14020  Status chips  .adm-chip / .adm-chip--green|red|amber|blue|muted|outline|canon
     /Users/kevinjones/src/wc/ip-b2b/js/all-modules-flow.js
       lines 4238-4270    "Status chips" module (demo template)
   Class names are kept IDENTICAL to wise.css so a future re-port is a
   section diff. Consumes tokens from wwwroot/css/wci/wci-tokens.css.
   Scoped CSS: Blazor bundles this next to WciStatusChip.razor; the root span owns
   every class so no ::deep is needed. WciStatTile reaches the chip with ::deep.
   The html.dark rules are ported as-is; they are inert until the app grows
   a theme toggle.
   =================================================================== */

/* Status chips. */
.adm-chip[b-a8kzn9b2aa] { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; white-space: nowrap; }
.adm-chip .material-symbols-outlined[b-a8kzn9b2aa] { font-size: 13px; }
.adm-chip--green[b-a8kzn9b2aa] { background: var(--sec-green-10); color: var(--score-ink-green, var(--sec-green-text)); }
.adm-chip--red[b-a8kzn9b2aa] { background: var(--sec-red-10); color: var(--score-ink-red, var(--sec-red-text)); }
.adm-chip--amber[b-a8kzn9b2aa] { background: var(--ter-amber-10); color: var(--score-ink-amber, var(--ter-amber-text)); }
.adm-chip--blue[b-a8kzn9b2aa] { background: color-mix(in srgb, var(--score-ink-blue, var(--primary)) 16%, transparent); color: var(--score-ink-blue, var(--primary-ink, var(--primary))); }
.adm-chip--muted[b-a8kzn9b2aa] { background: var(--surface-3, var(--surface-2)); color: var(--text-muted); }
html.dark .adm-chip--muted[b-a8kzn9b2aa] { background: rgba(255,255,255,0.08); }
.adm-chip--outline[b-a8kzn9b2aa] { background: transparent; border: 1px solid var(--border-strong); color: var(--text-muted); }
.adm-chip--canon[b-a8kzn9b2aa] { background: transparent; border: 1px solid color-mix(in srgb, var(--sec-green) 45%, transparent); color: var(--sec-green); }
html.dark .adm-chip--canon[b-a8kzn9b2aa] { color: #6FE0A0; }
.adm-chip--canon .material-symbols-outlined[b-a8kzn9b2aa] { font-size: 13px; }
/* /Components/DesignSystem/WciSwitch.razor.rz.scp.css */
/* ===================================================================
   WCI component: Switch, the standalone control (WciSwitch)
   -------------------------------------------------------------------
   The design draws its switch only on menu rows (.topbar-menu-item
   .sc-mcp-item, js/all-modules-flow.js 4913-4937). The track and the on
   state are ported verbatim in WciSwitchTrack.razor.css and key off the
   .sc-mcp-item this component renders. Everything in THIS sheet is
   app-owned: the button reset and the inline / settings-row layout that
   a switch needs outside a menu, where no .topbar-menu-item paints it.
   Tokens only (wwwroot/css/wci/wci-tokens.css).
   =================================================================== */

/* ================= APP-OWNED ADDITIONS (not in wise.css) ================= */

/* NO margin on the root, on purpose: a scoped rule (.wci-switch[b-x], 0,2,0)
   outranks a Tailwind margin utility (0,1,0), so any margin here would
   silently cancel the ml-auto / mr-4 a host passes through CssClass. */

.wci-switch[b-on3hc09o5f] {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 2px 0; border: 0; background: transparent;
  font: inherit; font-size: 0.8125rem; font-weight: 500; color: var(--text);
  text-align: left; cursor: pointer; border-radius: 8px;
}
.wci-switch-label[b-on3hc09o5f] { min-width: 0; }

/* Settings row: label left, track at the right edge. */
.wci-switch--block[b-on3hc09o5f] { display: flex; width: 100%; justify-content: space-between; }

.wci-switch:focus-visible[b-on3hc09o5f] { outline: 2px solid var(--primary); outline-offset: 2px; }

.wci-switch:disabled[b-on3hc09o5f] { opacity: 0.5; cursor: not-allowed; }
/* /Components/DesignSystem/WciSwitchTrack.razor.rz.scp.css */
/* ===================================================================
   WCI component: Switch, the track (WciSwitchTrack)
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo:
     /Users/kevinjones/src/wc/ip-b2b/pages/wise.css
       lines 22141-22143  the track's place in a switch row
       lines 22144-22151  .sc-switch and its ::after thumb
       lines 22152-22154  .sc-mcp-item.is-on (brand) and --pink
   Those are the catalog's copies (.dsc-demo-prefixed): the live chat's
   own rules are not in the served wise.css, so the catalog is the only
   source. The .dsc-demo prefix is dropped; nothing else is changed.
   NOTE: that checkout is not on every machine. These line numbers are
   from the revision the prototype host serves (Last-Modified 2026-09-24
   05:30:33 GMT, http://3.17.180.155:4144/pages/wise.css).
   Module: Component Library > Actions > "Switch"
   (js/all-modules-flow.js 4913-4937).
   Class names are kept IDENTICAL to wise.css so a future re-port is a
   section diff. The on state hangs off the .sc-mcp-item ancestor, which
   another component renders; Blazor scopes only the rightmost element of
   a selector, so these match across the component boundary unchanged.
   =================================================================== */

.sc-mcp-item .sc-switch[b-kj59vtajq2] { margin-left: auto; }
.sc-mcp-item .topbar-menu-badge ~ .sc-switch[b-kj59vtajq2] { margin-left: 0; }
.sc-switch[b-kj59vtajq2] {
  position: relative; flex: 0 0 auto; width: 34px; height: 19px; border-radius: 999px;
  background: var(--surface-3); border: 1px solid var(--border-strong);
}
.sc-switch[b-kj59vtajq2]::after {
  content: ''; position: absolute; top: 1px; left: 1px; width: 15px; height: 15px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.28);
}
.sc-mcp-item.is-on .sc-switch[b-kj59vtajq2] { background: var(--primary); border-color: var(--primary); }
.sc-mcp-item.is-on .sc-switch[b-kj59vtajq2]::after { transform: translateX(15px); }
.sc-mcp-item.is-on .sc-switch--pink[b-kj59vtajq2] { background: rgb(219, 39, 119); border-color: rgb(219, 39, 119); }

/* ================= APP-OWNED ADDITIONS (not in wise.css) ================= */

/* box-sizing so the 15px thumb and its 15px travel fit the 34 x 19 track
   whatever the host's reset says. */
.sc-switch[b-kj59vtajq2], .sc-switch[b-kj59vtajq2]::after { box-sizing: border-box; }

@media (prefers-reduced-motion: no-preference) {
  .sc-switch[b-kj59vtajq2] { transition: background 0.18s ease, border-color 0.18s ease; }
  .sc-switch[b-kj59vtajq2]::after { transition: transform 0.18s ease; }
}
/* /Components/DesignSystem/WciTabs.razor.rz.scp.css */
/* ===================================================================
   WCI component: Tabs in a module (WciTabs, INTEL-678)
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo (ab499e3, pulled
   2026-10-07; the prototype host serves the same file at
   http://3.17.180.155:4144/pages/wise.css):
     pages/wise.css
       lines 14197-14204  .dash-tabs (the pill strip)
       lines 14205-14220  .dash-tab and its icon
       lines 14221-14226  .dash-tab.is-active and its html.dark lift
       lines 26560-26562  "Tabs inside a module" (.wise-tabpanel, its
                          .is-active, the tab's focus ring)
   Module: Component Library > Navigation > "Tabs in a module"
   (js/all-modules-flow.js, the card dsc-comp-tabs-in-a-module).
   Not ported: .dash-tab.is-hover and the .dsc-theme-dark lift (demo-
   only: the catalog's way of showing hover and dark without a pointer
   or a theme; html.dark covers the real one), .dash-tabs-row (a page
   header layout the strip sits in, not part of the strip).
   Class names are kept IDENTICAL to wise.css so a future re-port is a
   section diff.
   =================================================================== */

.dash-tabs[b-0pb5ysfax7] {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.dash-tab[b-0pb5ysfax7] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.dash-tab .material-symbols-outlined[b-0pb5ysfax7] { font-size: 15px; }
.dash-tab.is-active[b-0pb5ysfax7] {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-1);
}
html.dark .dash-tab.is-active[b-0pb5ysfax7] { background: rgba(255, 255, 255, 0.08); }

.wise-tabpanel[b-0pb5ysfax7] { display: none; }
.wise-tabpanel.is-active[b-0pb5ysfax7] { display: block; }
.dash-tab:focus-visible[b-0pb5ysfax7] { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ===================================================================
   APP-OWNED ADDITIONS (not in wise.css)
   =================================================================== */

.wci-tabs[b-0pb5ysfax7] { min-width: 0; }

/* A strip too wide for its module wraps; it never scrolls sideways (INTEL-678). */
.dash-tabs[b-0pb5ysfax7] { flex-wrap: wrap; max-width: 100%; box-sizing: border-box; }

/* The card demo gives each panel this gap under the strip inline. */
.wise-tabpanel[b-0pb5ysfax7] { padding-top: 12px; }
.wise-tabpanel:focus-visible[b-0pb5ysfax7] { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; }

.dash-tab:hover:not(.is-active)[b-0pb5ysfax7] { color: var(--text); }

/* A tab's item count after its label (Tab.Count), muted like the Library rail's .lib-fp-count. */
.wci-tab-count[b-0pb5ysfax7] { font-weight: 600; opacity: .6; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .dash-tab[b-0pb5ysfax7] { transition: none; }
}
/* /Components/DesignSystem/WciTermTip.razor.rz.scp.css */
/* ===================================================================
   WCI component: Tooltip, the score-term card (WciTermTip),
   INTEL-403
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo, revision served by the
   prototype host on 2026-09-23 (http://3.17.180.155:4144/pages/wise.css,
   Last-Modified 2026-09-23 06:58:57 GMT):
     pages/wise.css
       lines 12876-12974  .dash-status-term, .dash-status-tip and its
                          head / row / line / dot / label / range / desc
       lines 12979-12988  the flip above (.dash-seg-note context)
     js/all-modules-flow.js
       lines 5737-5773    module "Tooltip" (catalog entry; the card names
                          .dash-status-tip, which it does not demo)
   Class names are kept IDENTICAL to wise.css.

   The card's tier rows (wise.css 12933-12974) are drawn by WciTermTip from
   its Tiers; they were a WciTermTipRow component until REGISTRY rule 12,
   and their rules now sit below with the card's.
   =================================================================== */

/* WISEscore status word (e.g. "Good") in the claim row — underlined; hovering
   or focusing reveals a popover listing all five status tiers and what they
   mean, with the current tier highlighted. */
.dash-status-term[b-wd6mnpv2ky] {
  position: relative;
  cursor: help;
  text-decoration: underline dotted;
  text-decoration-color: color-mix(in srgb, currentColor 55%, transparent);
  text-underline-offset: 3px;
}
.dash-status-term:focus-visible[b-wd6mnpv2ky] {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 2px;
}
.dash-status-tip[b-wd6mnpv2ky] {
  position: absolute;
  top: calc(100% + 9px);
  left: 0;
  z-index: 40;
  width: 320px;
  /* Clamp to the report it sits in, not the window: a viewport cap sees the
     whole browser and lets the card spill out of a narrowed report. */
  max-width: min(320px, 100cqw);
  padding: 12px 13px 10px;
  border-radius: 12px;
  background: var(--surface, #fff);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card, 0 12px 32px rgba(0, 0, 0, 0.18));
  font-weight: 400;
  text-align: left;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
  pointer-events: none;
}
.dash-status-term:hover .dash-status-tip[b-wd6mnpv2ky],
.dash-status-term:focus .dash-status-tip[b-wd6mnpv2ky],
.dash-status-term:focus-visible .dash-status-tip[b-wd6mnpv2ky] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
html.dark .dash-status-tip[b-wd6mnpv2ky] {
  background: #14242f;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}
.dash-status-tip-head[b-wd6mnpv2ky] {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: 7px;
}


/* ---- Tier rows (wise.css 12933-12974) ---- */
.dash-status-tip-row[b-wd6mnpv2ky] {
  display: block;
  padding: 5px 6px;
  border-radius: 8px;
}
.dash-status-tip-row.is-current[b-wd6mnpv2ky] {
  background: color-mix(in srgb, var(--primary) 13%, transparent);
}
.dash-status-tip-line[b-wd6mnpv2ky] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dash-status-tip-dot[b-wd6mnpv2ky] {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dash-status-tip-label[b-wd6mnpv2ky] {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text);
}
.dash-status-tip-range[b-wd6mnpv2ky] {
  margin-left: auto;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-subtle);
}
.dash-status-tip-desc[b-wd6mnpv2ky] {
  display: block;
  margin: 2px 0 0 17px;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--text-muted);
}
.dash-status-tip-dot--excellent[b-wd6mnpv2ky] { background: var(--sec-green, #32A966); }
.dash-status-tip-dot--good[b-wd6mnpv2ky] { background: var(--chart-status-good, #7DC470); }
.dash-status-tip-dot--okay[b-wd6mnpv2ky] { background: var(--ter-amber, #FFC434); }
.dash-status-tip-dot--fair[b-wd6mnpv2ky] { background: var(--chart-status-fair, #D27326); }
.dash-status-tip-dot--poor[b-wd6mnpv2ky] { background: var(--sec-red, #DC3038); }


/* ===================================================================
   APP-OWNED ADDITIONS (not in wise.css). Keep below the verbatim port so a
   re-sync replaces everything above this line untouched.
   =================================================================== */

/* The flip above. The design keys it off its report context
   (.dash-seg-note, wise.css 12979-12988); here it is a parameter, so the
   same rules hang off a component class instead. */
.wci-term-tip--above .dash-status-tip[b-wd6mnpv2ky] {
  top: auto;
  bottom: calc(100% + 9px);
  transform: translateY(-4px);
}
.wci-term-tip--above:hover .dash-status-tip[b-wd6mnpv2ky],
.wci-term-tip--above:focus .dash-status-tip[b-wd6mnpv2ky],
.wci-term-tip--above:focus-visible .dash-status-tip[b-wd6mnpv2ky],
.wci-term-tip--above:focus-within .dash-status-tip[b-wd6mnpv2ky] {
  transform: translateY(0);
}

/* A term can sit inside a heading. The card resets to body type so it does
   not inherit the heading's size, line height or nowrap. */
.dash-status-tip[b-wd6mnpv2ky] { font-size: 0.8125rem; line-height: 1.35; white-space: normal; }

@media (prefers-reduced-motion: reduce) {
  .dash-status-tip[b-wd6mnpv2ky] { transition: none; }
}
/* /Components/DesignSystem/WciTextarea.razor.rz.scp.css */
/* ===================================================================
   WCI component: Form fields, the multi-line field (WciTextarea)
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo:
     /Users/kevinjones/src/wc/ip-b2b/pages/wise.css
       lines 19052-19066  .auth-input / .auth-select / .auth-textarea
                          shared pill rules (the .auth-textarea selector)
       lines 19067-19069  html.dark
       line  19070        .auth-textarea (rounded rectangle, 80px minimum)
       lines 19071-19078  ::placeholder and :focus
   NOTE: that checkout is not on every machine. These line numbers are
   from the revision the prototype host serves (Last-Modified 2026-09-24
   05:30:33 GMT, http://3.17.180.155:4144/pages/wise.css).
   Module: Component Library > Inputs & forms > "Form fields"
   (js/all-modules-flow.js 5628-5645), whose note names the auth family
   as the same control.
   Class names are kept IDENTICAL to wise.css so a future re-port is a
   section diff. Consumes tokens from wwwroot/css/wci/wci-tokens.css.
   =================================================================== */

.auth-textarea[b-ikk1hnaj1r] {
  width: 100%;
  height: var(--field-h);
  padding: 0 16px;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
html.dark .auth-textarea[b-ikk1hnaj1r] { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.10); }
.auth-textarea[b-ikk1hnaj1r] { height: auto; min-height: 80px; padding: 12px 16px; resize: vertical; line-height: 1.5; border-radius: var(--r-md); }
.auth-textarea[b-ikk1hnaj1r]::placeholder { color: color-mix(in srgb, var(--text-subtle) 55%, transparent); font-style: italic; }
.auth-textarea:focus[b-ikk1hnaj1r] {
  outline: none;
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border-strong));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

/* ================= APP-OWNED ADDITIONS (not in wise.css) ================= */

/* wwwroot/app.css (the project template) outlines every .valid.modified field
   in green, and outranks the design's outline: none. The pill shows its
   state through the focus ring and .is-invalid; an edited field is not news. */
.auth-textarea.valid.modified[b-ikk1hnaj1r] { outline: none; }

/* The design gives the invalid state to .auth-input / .auth-select only
   (19080-19081); a textarea validates the same way. --sec-red-soft is
   defined nowhere in the served wise.css. */
.auth-textarea.is-invalid[b-ikk1hnaj1r] { border-color: var(--sec-red); box-shadow: 0 0 0 3px var(--sec-red-10); }

.auth-textarea[b-ikk1hnaj1r] { box-sizing: border-box; }
.auth-textarea:disabled[b-ikk1hnaj1r] { opacity: 0.55; cursor: not-allowed; }
.auth-textarea[readonly][b-ikk1hnaj1r] { background: var(--surface); }

/* The design sets font-family: inherit, which as a scoped rule outranks the
   Tailwind font-mono utility. A code, token or canon-name field keeps its
   monospace by asking for it. */
.auth-textarea.font-mono[b-ikk1hnaj1r] { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

@media (prefers-reduced-motion: reduce) {
  .auth-textarea[b-ikk1hnaj1r] { transition: none; }
}
/* /Components/DesignSystem/WciTextLink.razor.rz.scp.css */
/* ===================================================================
   WCI component: Buttons, the text link (WciTextLink), INTEL-363
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo, revision served by the
   prototype host on 2026-09-23 (http://3.17.180.155:4144/pages/wise.css,
   Last-Modified 2026-09-23 06:58:57 GMT):
     pages/wise.css
       lines 12627-12661  .dash-text-link, its hover nudge, html.dark and
                          the --indent variant
     js/all-modules-flow.js
       lines 3774-3848    module "Buttons" (markup template)
   Class names are kept IDENTICAL to wise.css. Requires
   wwwroot/css/wci/wci-tokens.css (global).
   =================================================================== */

.dash-text-link[b-4vr0pkvvpq] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  /* Report-style text links always sit on the trailing edge of their row. */
  margin-left: auto;
  align-self: flex-end;
  padding: 0;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  transition: color 0.15s ease;
}
html.dark .dash-text-link[b-4vr0pkvvpq] { color: var(--primary-bright); }
.dash-text-link .material-symbols-outlined[b-4vr0pkvvpq] {
  font-size: 16px;
  transition: transform 0.15s ease;
}
.dash-text-link:hover[b-4vr0pkvvpq] { color: var(--primary-bright); text-decoration: none; }
.dash-text-link:hover .material-symbols-outlined[b-4vr0pkvvpq] { transform: translate(2px, -2px); }
html.dark .dash-text-link:hover[b-4vr0pkvvpq] { color: #fff; }
/* Align under a .dash-btn above: matches the button's border (1px) + padding
   (15px) and icon/text gap (7px) so the icon lines up with the button's icon. */
.dash-text-link--indent[b-4vr0pkvvpq] {
  padding-left: 16px;
  gap: 7px;
  margin-left: 0;
  align-self: flex-start;
}
.dash-text-link--indent:hover .material-symbols-outlined[b-4vr0pkvvpq] { transform: none; }


/* ===================================================================
   APP-OWNED ADDITIONS (not in wise.css). Keep below the verbatim port so a
   re-sync replaces everything above this line untouched.
   =================================================================== */

/* Inline: the link in the flow of a sentence, a toolbar or a table cell.
   The design only draws the card-closing trailing link; everywhere else the
   app needs the same ink and type without the trailing-edge margins. */
.dash-text-link.wci-text-link--inline[b-4vr0pkvvpq] {
  margin: 0;
  align-self: auto;
}

/* A leading glyph never nudges: the nudge is the "go there" arrow's. */
.dash-text-link:hover .wci-text-link-lead[b-4vr0pkvvpq] { transform: none; }

/* Quiet destructive action (Remove, Clear). Same red as .wise-btn--danger. */
.dash-text-link.wci-text-link--danger[b-4vr0pkvvpq] { color: var(--sec-red); }
.dash-text-link.wci-text-link--danger:hover[b-4vr0pkvvpq] { color: var(--sec-red); text-decoration: underline; }
html.dark .dash-text-link.wci-text-link--danger[b-4vr0pkvvpq],
html.dark .dash-text-link.wci-text-link--danger:hover[b-4vr0pkvvpq] { color: #FF9E96; }

/* ChildContent glyphs are rendered in the caller's scope. */
.dash-text-link[b-4vr0pkvvpq]  .material-icons,
.dash-text-link[b-4vr0pkvvpq]  .material-symbols-outlined { font-size: 16px; }

/* Live disabled state. The design ships only the demo-scoped
   .dsc-demo .dash-text-link[disabled] (wise.css 21546); this is its live
   equivalent, and .is-disabled covers an anchor. */
.dash-text-link:disabled[b-4vr0pkvvpq],
.dash-text-link.is-disabled[b-4vr0pkvvpq] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

/* Keyboard focus ring, the same one .dash-term uses (wise.css 12867). */
.dash-text-link:focus-visible[b-4vr0pkvvpq] {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .dash-text-link[b-4vr0pkvvpq],
  .dash-text-link .material-symbols-outlined[b-4vr0pkvvpq] { transition: none; }
  .dash-text-link:hover .material-symbols-outlined[b-4vr0pkvvpq] { transform: none; }
}
/* /Components/DesignSystem/WciToastHost.razor.rz.scp.css */
/* ===================================================================
   WCI component: Toast (WciToastHost), INTEL-384
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo, revision copied from the
   prototype host on 2026-09-24 (http://3.17.180.155:4144):
     pages/wise.css
       lines 7785-7789    #ag-toast-wrap, .ag-toast, its icon, html.dark,
                          @keyframes agToastIn
     js/all-modules-flow.js
       lines 5271-5299    module "Toast" (catalog card: one seat, bottom
                          centre, 22px up; 0.25s rise; 2.6s hold; leave
                          fades and drops 8px; a second toast stacks above)
       lines 10276-10298  Motion & Resize toast runner (the leave step,
                          which the design writes as inline styles)
   Class names are kept IDENTICAL to wise.css.

   The admin / module wraps (#adm-toast-wrap 17085-17088, .wmod-toast-wrap
   18499-18502) are the same seat 28px up with a dark pill; the app has one
   shell, so only the agent-shell toast is ported.

   Scoped CSS: the wrap and every toast are this component's own markup, so
   no ::deep is needed.
   =================================================================== */

#ag-toast-wrap[b-0ra6kswsf3] { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 500; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.ag-toast[b-0ra6kswsf3] { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-2, 0 8px 24px rgba(0,0,0,0.18)); color: var(--text); font-size: 0.8125rem; font-weight: 600; animation: agToastIn-b-0ra6kswsf3 0.25s ease both; }
html.dark .ag-toast[b-0ra6kswsf3] { background: #1A2339; border-color: rgba(37, 80, 124,0.3); }
.ag-toast .material-symbols-outlined[b-0ra6kswsf3] { font-size: 18px !important; color: var(--primary-ink, var(--primary)); }
@keyframes agToastIn-b-0ra6kswsf3 { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ============================ APP-OWNED ADDITIONS ============================ */

/* Above every dialog layer: the WCI overlays (10100), Radzen's dialogs (10200/10201) and
   Radzen's popups (10300). The design's 500 clears its own shell only; here a copy or save
   confirmed from inside an open dialog would land behind the dialog's mask. See the stacking note
   in WciModal.razor.css. */
#ag-toast-wrap[b-0ra6kswsf3] { z-index: 10400; }

/* A fixed box at left: 50% can only grow to the right half of the viewport, so a sentence
   wraps at half width (under 200px on a phone). Size the wrap to its content instead, capped
   to the viewport less a 16px gutter each side. */
#ag-toast-wrap[b-0ra6kswsf3] { width: max-content; max-width: calc(100vw - 32px); }

/* The leave step of the design's toast runner: fade and drop 8px over 0.3s. The runner writes
   these as inline styles and a transition; here it is a keyframe animation with the same values,
   because the arrival animation's `both` fill would otherwise hold opacity at 1 over any
   transition, and swapping one animation for another tweens reliably where a class swap does not. */
.ag-toast.wci-toast-leave[b-0ra6kswsf3] { animation: wciToastOut-b-0ra6kswsf3 0.3s ease forwards; }
@keyframes wciToastOut-b-0ra6kswsf3 { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(8px); } }

/* BUG-V2-118: a running job's progress line (ToastService.ShowProgress) stays in the seat until the job ends, so the
   member can hide it. The wrap takes no clicks; the hide control does. Muted like the design's other toast close
   (the nudge toast's), so the line keeps the toast's weight and the control does not compete with it. */
.ag-toast .wci-toast-dismiss[b-0ra6kswsf3] { pointer-events: auto; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-muted); cursor: pointer; }
.ag-toast .wci-toast-dismiss:hover[b-0ra6kswsf3] { background: var(--border); }
.ag-toast .wci-toast-dismiss:focus-visible[b-0ra6kswsf3] { outline: 2px solid var(--primary); outline-offset: 2px; }
.ag-toast .wci-toast-dismiss .material-symbols-outlined[b-0ra6kswsf3] { font-size: 16px !important; color: inherit; }

/* The runner's reduced-motion branch: no rise, no drop. The hold stays 2.6s (the demo's 0.9s
   reduced hold is a replay convenience; a person who asks for less motion still needs time to read). */
@media (prefers-reduced-motion: reduce) {
  .ag-toast[b-0ra6kswsf3] { animation: none; }
  .ag-toast.wci-toast-leave[b-0ra6kswsf3] { animation: none; opacity: 0; }
}
/* /Components/DesignSystem/WciTokenReadout.razor.rz.scp.css */
/* ===================================================================
   WCI component: Token readout (WciTokenReadout), INTEL-416, the home
   under the composer
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo, revision served by the
   prototype host on 2026-09-28 (http://3.17.180.155:4144/):
     js/wiseai-chat.js (the live chat's injected sheet; the served
     wise.css has these rules only under the catalog's .dsc-demo scope,
     22951-23004, which pins the card open in place)
       lines 2314-2330    .sc-activity, .sc-activity-wrap, .sc-activity-dots
                          and the thinking bounce (scActBounce), with its
                          reduced-motion rule
       lines 2333-2352    .sc-activity-pop (the dark read-out card), its
                          caret, rows, keys and values
     js/all-modules-flow.js
       lines 4606-4640    module "Token readout", the "Under the composer"
                          half
   Class names are kept IDENTICAL. What is NOT verbatim:
     - REGISTRY rule 10: .sc-activity's `margin: 7px 0 1px` is dropped; the
       composer places it.
     - The below-input row (.sc-belowinput) is drawn only when the host
       passes OnAskHelp (the gold link, INTEL-427).
     - The link's left margin is the design's runtime-measured alignment
       with the composer's placeholder (alignAskHelp); the host supplies it
       as --sc-ask-help-inset, the design's 39px otherwise.
   The card is a dark surface in both themes, as the design draws it (its
   own literal colours, not tokens).
   =================================================================== */

/* Live-activity indicator — a small trio of dots docked under the input.
   Idle: three faint, still dots. Working (.is-thinking, driven by the
   presence of a typing line): the dots bounce in sequence. Hovering the
   cluster reveals a compact telemetry read-out popover. */
.sc-activity[b-nvu1axcvs4] { display: flex; justify-content: center; }
.sc-activity-wrap[b-nvu1axcvs4] { position: relative; display: inline-flex; }
.sc-activity-dots[b-nvu1axcvs4] { display: inline-flex; align-items: center; gap: 4px; padding: 5px 8px;
  border: 0; background: transparent; border-radius: 999px; cursor: default; line-height: 0;
  transition: background .15s ease; }
.sc-activity-wrap:hover .sc-activity-dots[b-nvu1axcvs4] { background: var(--surface-3, rgba(20,40,80,0.05)); }
html.dark .sc-activity-wrap:hover .sc-activity-dots[b-nvu1axcvs4] { background: rgba(255,255,255,0.06); }
.sc-activity-dots > span[b-nvu1axcvs4] { width: 5px; height: 5px; border-radius: 50%; flex: 0 0 auto;
  background: color-mix(in srgb, var(--text-subtle) 55%, transparent);
  transition: background .18s ease, transform .18s ease; }
.sc-activity.is-thinking .sc-activity-dots > span[b-nvu1axcvs4] { background: var(--primary, #2F6DF6);
  animation: scActBounce-b-nvu1axcvs4 1.15s ease-in-out infinite; }
.sc-activity.is-thinking .sc-activity-dots > span:nth-child(2)[b-nvu1axcvs4] { animation-delay: .16s; }
.sc-activity.is-thinking .sc-activity-dots > span:nth-child(3)[b-nvu1axcvs4] { animation-delay: .32s; }
@keyframes scActBounce-b-nvu1axcvs4 { 0%, 70%, 100% { transform: translateY(0); opacity: .45; }
  35% { transform: translateY(-4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .sc-activity.is-thinking .sc-activity-dots > span[b-nvu1axcvs4] { animation: none; opacity: 1; } }

/* Hover read-out — dark card floated above the dots, matching the tooltip
   styling of the app's other telemetry surfaces. */
.sc-activity-pop[b-nvu1axcvs4] { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 4px);
  min-width: 300px; max-width: 380px; padding: 10px 13px; border-radius: 11px; z-index: 40;
  background: #1f2733; color: #e7ecf3; border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 10px 30px rgba(0,0,0,0.30); text-align: left;
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s; }
.sc-activity-wrap:hover .sc-activity-pop[b-nvu1axcvs4], .sc-activity-wrap:focus-within .sc-activity-pop[b-nvu1axcvs4],
.sc-activity.is-open .sc-activity-pop[b-nvu1axcvs4] {
  opacity: 1; transform: translate(-50%, 0); visibility: visible; transition-delay: 0s; }
.sc-activity-pop[b-nvu1axcvs4]::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: #1f2733; }
.sc-activity-row[b-nvu1axcvs4] { display: flex; gap: 8px; font-size: 11px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.sc-activity-row + .sc-activity-row[b-nvu1axcvs4] { margin-top: 5px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,0.08); }
.sc-activity-key[b-nvu1axcvs4] { flex: 0 0 auto; font-weight: 700; color: #cfd7e2; letter-spacing: .01em; }
.sc-activity-val[b-nvu1axcvs4] { flex: 1 1 auto; color: #aab6c6; }
.sc-activity-val b[b-nvu1axcvs4] { color: #6bd68a; font-weight: 700; }
.sc-activity-val em[b-nvu1axcvs4] { color: #7fb0ff; font-style: normal; }
.sc-activity-val .sc-activity-muted[b-nvu1axcvs4] { color: #7c8798; }

/* ---- The below-input row and the gold "What can I ask?" link (INTEL-427) ----
   js/wiseai-chat.js 2354-2373 (the row and the link), 2381-2425 (the gold
   shimmer its label shares with the matching intent chip). The letters are
   built by WciAskHelp in C#, so they carry no scope attribute and are
   reached with ::deep. */
.sc-belowinput[b-nvu1axcvs4] { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.sc-belowinput .sc-activity[b-nvu1axcvs4] { grid-column: 2; }
.sc-belowinput--ask .sc-ask-help[b-nvu1axcvs4] { grid-column: 1; justify-self: start; }
.sc-ask-help[b-nvu1axcvs4] { display: inline-flex; align-items: center; margin: 7px 0 1px 39px;
  padding: 3px 6px; border: 0; background: transparent; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 400; line-height: 1.2; letter-spacing: .01em;
  color: color-mix(in srgb, var(--ter-amber, #FFC434) 78%, #000); transition: background .15s ease, color .15s ease; }
.sc-ask-help:hover[b-nvu1axcvs4] { background: var(--surface-3, rgba(20,40,80,0.06)); }
html.dark .sc-ask-help[b-nvu1axcvs4] { color: var(--ter-amber, #FFC434); }
html.dark .sc-ask-help:hover[b-nvu1axcvs4] { background: rgba(255,255,255,0.07); }
.sc-ask-help[b-nvu1axcvs4]  .sc-ask-ch { display: inline-block;
  --ask-gold-base: color-mix(in srgb, var(--warm-400, #946005) 78%, var(--ter-amber, #FFC434));
  --ask-gold-deep: var(--warm-400, #946005);
  background: linear-gradient(105deg,
    var(--ask-gold-base) 0%,
    var(--ask-gold-base) 38%,
    var(--ask-gold-deep) 44%,
    var(--ter-amber, #FFC434) 48%, #ffe08a 50%, var(--ter-amber, #FFC434) 52%,
    var(--ask-gold-deep) 56%,
    var(--ask-gold-base) 62%,
    var(--ask-gold-base) 100%);
  background-size: 250% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  -webkit-text-stroke: 0.4px color-mix(in srgb, var(--ter-amber, #FFC434) 45%, #fff);
  animation: sc-ask-shimmer-b-nvu1axcvs4 7.5s ease-in-out infinite;
  animation-delay: calc(var(--ch-i, 0) * 90ms); }
html.dark .sc-ask-help[b-nvu1axcvs4]  .sc-ask-ch {
  --ask-gold-base: color-mix(in srgb, var(--warm-400, #946005) 42%, var(--ter-amber, #FFC434));
  --ask-gold-deep: color-mix(in srgb, var(--warm-400, #946005) 78%, var(--ter-amber, #FFC434));
}
.sc-ask-help[b-nvu1axcvs4]  .sc-ask-sp { white-space: pre; }
@keyframes sc-ask-shimmer-b-nvu1axcvs4 {
  0%, 8%    { background-position: 100% 0; transform: translateY(0); }
  20%       { transform: translateY(-1.5px); }
  34%, 100% { background-position: 0% 0; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .sc-ask-help[b-nvu1axcvs4]  .sc-ask-ch { animation: none; }
}

/* ---- APP-OWNED ADDITIONS ---- */
.sc-activity-dots:focus-visible[b-nvu1axcvs4] { outline: 2px solid var(--primary); outline-offset: 2px; }
.sc-ask-help[b-nvu1axcvs4] { margin-left: var(--sc-ask-help-inset, 39px); }
.sc-ask-help:focus-visible[b-nvu1axcvs4] { outline: 2px solid var(--primary); outline-offset: 2px; }
/* A narrow chat (the AI drawer on a phone) must not push the card off
   screen: it keeps the design's width where it fits. */
.sc-activity-pop[b-nvu1axcvs4] { max-width: min(380px, calc(100vw - 32px)); min-width: min(300px, calc(100vw - 32px)); }
@media (prefers-reduced-motion: reduce) {
  .sc-activity-dots[b-nvu1axcvs4], .sc-activity-dots > span[b-nvu1axcvs4], .sc-activity-pop[b-nvu1axcvs4] { transition: none; }
}
/* /Components/DesignSystem/WciTranscriptActions.razor.rz.scp.css */
/* ===================================================================
   WCI component: Transcript actions (WciTranscriptActions), INTEL-405,
   with the in-transcript Token readout (INTEL-416)
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo, revision served by the
   prototype host on 2026-09-28 (http://3.17.180.155:4144/):
     js/wiseai-chat.js (the live chat's injected sheet; the served
     wise.css has these rules only under the catalog's .dsc-demo scope,
     22859-22948, which pins every popover open in place)
       lines 2073-2092    .sc-fb-wrap, .sc-fb, .sc-fb-time, .sc-fb-more-wrap,
                          .sc-fb-menu (and its html.dark, carets, [hidden])
       lines 2101         .sc-fb-menu-actions
       lines 2113-2127    .sc-fb-menu-outs, .sc-fb-outmode (the where-
                          outputs-go rows, INTEL-368; revision pulled
                          2026-09-30, same line range)
       lines 2128-2137    .sc-fb-menu-div, .sc-fb-menu-tokens (the this-
                          message token read-out)
       lines 2138-2154    .sc-fb-more, .sc-fb-id, .sc-fb-btn and its states
       lines 2157-2168    the copy / thumb wraps and the Copied pill
       lines 2172-2202    .sc-fb-reasons (the reason picker), its chips,
                          note and Send
       lines 2206-2207    .sc-fb-id cursor and focus ring
     pages/wise.css
       lines 10141-10152, 10159, 10205   .chip (the reason and Send chips
                          are .chip; its only other copy is scoped to
                          WciIntentChip)
     js/all-modules-flow.js
       lines 3242-3304    demoFbBtn(), demoReasonsPop(),
                          demoTranscriptTokenMore(), demoFbRow()
       lines 4491-4531    module "Transcript actions"
       lines 4606-4665    module "Token readout", the "In the transcript"
                          half
   Class names are kept IDENTICAL. What is NOT verbatim:
     - Not ported, nothing in the app behind them yet: the version tag
       (.sc-fb-menu-ver, 2104-2112), the follow-up note
       (.sc-fb-note, 2203-2205) and the copy flash card (.sc-tip, 2213-
       2222; hover labels are the app's delegated tooltip, wci-tooltip.js).
     - REGISTRY rule 10: .sc-fb-wrap's `margin: 0` (2073) is dropped; the
       host places the row (the response view passes mt-2).
     - .sc-fb-time's margin reaches into WciTranscriptTime, so it is
       written with ::deep.
     - The where-outputs-go rows' on state is the member's app-wide
       choice, painted on <html> by wwwroot/js/wci/wci-output-mode.js, so
       it is keyed off html[data-output-mode] (APP-OWNED ADDITIONS)
       rather than a .is-on class. The .is-on rules stay as ported.
     - The menu and the reason picker are pinned and placed by script
       (see APP-OWNED ADDITIONS), so their CSS offsets are neutralised and
       their carets are not drawn.
   Requires wwwroot/css/wci/wci-tokens.css (--sc-shadow-pop added for
   this port).
   =================================================================== */

/* ---- .chip, the reason and Send chips (wise.css 10141-10152, 10159, 10205) ----
   First, as wise.css loads before the chat's injected sheet: .sc-fb-send and
   .sc-fb-reason.is-on restyle a .chip at the same specificity and must win. */
.chip[b-hae0oicgem] {
  display: inline-flex; align-items: center; gap: 6px;
  box-sizing: border-box; height: 28px; padding: 0 7px;
  background: color-mix(in srgb, var(--primary) 10%, #fff); border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  font-size: var(--fs-label); font-weight: 500; line-height: 1; color: var(--text-muted); cursor: pointer; font-family: inherit;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.chip:hover[b-hae0oicgem] { background: color-mix(in srgb, var(--primary) 16%, #fff); border-color: color-mix(in srgb, var(--primary) 40%, var(--border-strong)); color: var(--text); }
html.dark .chip:hover[b-hae0oicgem] {
  background: color-mix(in srgb, var(--primary-bright, #8B9FAF) 22%, transparent);
  border-color: color-mix(in srgb, var(--primary-bright, #8B9FAF) 55%, var(--primary));
  color: var(--text);
}
.chip .material-symbols-outlined[b-hae0oicgem] { font-size: 13px !important; }
html.dark .chip[b-hae0oicgem] { background: color-mix(in srgb, var(--primary-bright, #8B9FAF) 14%, transparent); border-color: var(--primary); }

/* ---- The action row (js/wiseai-chat.js 2073-2207) ---- */
/* Feedback actions sit INLINE — copy + thumbs, then the three-dot, then
   the timestamp to the right of more. Quiet outlined glyphs at rest. */
.sc-fb-wrap[b-hae0oicgem] { align-self: center; flex: 1 1 auto; min-width: 0; }
.sc-fb[b-hae0oicgem] { display: flex; align-items: center; gap: 1px; width: 100%; }
/* Timestamp sits on the row, immediately to the RIGHT of the three-dot. */
.sc-fb[b-hae0oicgem]  .sc-fb-time { margin-left: 6px; white-space: nowrap; flex-shrink: 0; }
/* Three-dot ("more") control — sits directly to the RIGHT of thumbs-down
   (not floated to the far edge of the row). It holds the re-run / edit /
   fork / file controls + the turn ID on the first row, then a divider and
   this-message token read-out. */
.sc-fb-more-wrap[b-hae0oicgem] { position: relative; display: inline-flex; padding-left: 2px; }
.sc-fb-menu[b-hae0oicgem] { position: absolute; bottom: calc(100% + 8px); right: -4px; z-index: 80;
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  width: max-content; min-width: 220px; max-width: min(340px, calc(100vw - 24px));
  padding: 6px 8px 7px; background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 10px; box-shadow: var(--shadow-3, var(--sc-shadow-pop)); }
.sc-fb-menu[b-hae0oicgem]::before { content: ''; position: absolute; top: 100%; right: 11px;
  border: 6px solid transparent; border-top-color: var(--border-strong); }
.sc-fb-menu[b-hae0oicgem]::after { content: ''; position: absolute; top: 100%; right: 12px; transform: translateY(-1px);
  border: 5px solid transparent; border-top-color: var(--surface); }
html.dark .sc-fb-menu[b-hae0oicgem] { background: #1A2339; border-color: rgba(37,80,124,0.22); }
html.dark .sc-fb-menu[b-hae0oicgem]::after { border-top-color: #1A2339; }
.sc-fb-menu[hidden][b-hae0oicgem] { display: none; }
.sc-fb-menu-actions[b-hae0oicgem] { display: flex; align-items: center; gap: 1px; width: 100%; }
/* Where-outputs-go (2111-2127). Two full-width rows rather than icons, because the
   choice needs its words: the icon alone cannot say "in the thread". */
.sc-fb-menu-outs[b-hae0oicgem] { display: flex; flex-direction: column; gap: 1px; width: 100%; }
.sc-fb-outmode[b-hae0oicgem] { display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 7px; border: 0; border-radius: 7px; background: transparent;
  font: inherit; font-size: 12px; line-height: 1.3; color: var(--text);
  text-align: left; cursor: pointer; }
.sc-fb-outmode:hover[b-hae0oicgem] { background: color-mix(in srgb, var(--text) 7%, transparent); }
.sc-fb-outmode:focus-visible[b-hae0oicgem] { outline: 2px solid var(--primary); outline-offset: -2px; }
.sc-fb-outmode-i[b-hae0oicgem] { font-size: 17px !important; color: var(--text-subtle); flex-shrink: 0; }
.sc-fb-outmode-l[b-hae0oicgem] { flex: 1 1 auto; }
.sc-fb-outmode-k[b-hae0oicgem] { font-size: 16px !important; color: var(--primary); opacity: 0; flex-shrink: 0; }
.sc-fb-outmode.is-on[b-hae0oicgem] { font-weight: 650; }
.sc-fb-outmode.is-on .sc-fb-outmode-i[b-hae0oicgem] { color: var(--primary); }
.sc-fb-outmode.is-on .sc-fb-outmode-k[b-hae0oicgem] { opacity: 1; }
html.dark .sc-fb-outmode-k[b-hae0oicgem] { color: #7fb0ff; }
html.dark .sc-fb-outmode.is-on .sc-fb-outmode-i[b-hae0oicgem] { color: #7fb0ff; }
.sc-fb-menu-div[b-hae0oicgem] { display: block; height: 1px; margin: 6px 0 5px;
  background: var(--border, rgba(20,40,80,0.12)); }
html.dark .sc-fb-menu-div[b-hae0oicgem] { background: rgba(255,255,255,0.10); }
.sc-fb-menu-tokens[b-hae0oicgem] { display: block; font-size: 10.5px; line-height: 1.45;
  font-variant-numeric: tabular-nums; color: var(--text-subtle); }
.sc-fb-menu-tokens em[b-hae0oicgem] { color: var(--primary-ink, var(--primary)); font-style: normal; }
html.dark .sc-fb-menu-tokens em[b-hae0oicgem] { color: #7fb0ff; }
.sc-fb-menu-tokens b[b-hae0oicgem] { color: var(--sec-green-text, #1E7A34); font-weight: 700; }
/* The three-dot "more" control reads as a proper round chip — its hover /
   open background is a full circle, never a rounded square. */
.sc-fb-more[b-hae0oicgem] { border-radius: 50%; }
.sc-fb-more.is-on[b-hae0oicgem], .sc-fb-more[aria-expanded="true"][b-hae0oicgem] { background: var(--surface-3); color: var(--text); }
html.dark .sc-fb-more[aria-expanded="true"][b-hae0oicgem] { background: rgba(255,255,255,0.07); }
.sc-fb-id[b-hae0oicgem] { margin-left: 3px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.sc-fb-btn[b-hae0oicgem] { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
  border: 0; border-radius: 50%; background: transparent;
  color: color-mix(in srgb, var(--text-subtle) 62%, transparent); cursor: pointer; padding: 0;
  transition: background .14s ease, color .14s ease; }
html.dark .sc-fb-btn[b-hae0oicgem] { color: color-mix(in srgb, var(--text-subtle) 70%, transparent); }
.sc-fb-btn:hover[b-hae0oicgem] { background: var(--surface-3); color: var(--text); }
html.dark .sc-fb-btn:hover[b-hae0oicgem] { background: rgba(255,255,255,0.07); }
.sc-fb-btn .material-symbols-outlined[b-hae0oicgem] { font-size: 12px; font-variation-settings: 'FILL' 0; }
.sc-fb-btn.is-on[b-hae0oicgem] { color: var(--primary-ink, var(--primary)); }
.sc-fb-btn.is-on[data-fb="down"][b-hae0oicgem] { color: var(--sec-red-text); }
.sc-fb-btn.is-on .material-symbols-outlined[b-hae0oicgem] { font-variation-settings: 'FILL' 1; }
.sc-fb-btn.is-done[b-hae0oicgem] { color: var(--sec-green-text); }
/* Reason picker — a pop-over anchored to the thumbs-down button, floated
   above the transcript rather than pushing the thread open inline. */
.sc-fb-down-wrap[b-hae0oicgem], .sc-fb-up-wrap[b-hae0oicgem], .sc-fb-copy-wrap[b-hae0oicgem] { position: relative; display: inline-flex; }
/* "Copied" confirmation pill — floats just above the copy button, snaps in
   and fades away after copyAnswer() flips the .is-vis flag. */
.sc-fb-copied[b-hae0oicgem] { position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%) translateY(3px) scale(.96);
  z-index: 80; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; pointer-events: none;
  padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .01em;
  background: var(--sec-green-bg, #E6F4EA); color: var(--sec-green-text, #1E7A34);
  border: 1px solid color-mix(in srgb, var(--sec-green-text, #1E7A34) 26%, transparent);
  box-shadow: 0 6px 18px rgba(0,0,0,0.16); opacity: 0; transition: opacity .13s ease, transform .13s ease; }
html.dark .sc-fb-copied[b-hae0oicgem] { background: rgba(46,125,50,0.18); }
.sc-fb-copied .material-symbols-outlined[b-hae0oicgem] { font-size: 13px; font-variation-settings: 'FILL' 1; }
.sc-fb-copied.is-vis[b-hae0oicgem] { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
/* Anchored to the button's left edge (rather than centered) so the wider
   chip + free-form panel opens rightward and can't clip off the left of the
   transcript — the thumbs sit close to the meta row's left edge. */
.sc-fb-reasons[b-hae0oicgem] { position: absolute; top: calc(100% + 8px); left: -6px;
  z-index: 80; width: max-content; max-width: 260px; display: flex; flex-direction: column; gap: 8px;
  padding: 11px 12px; background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 12px; box-shadow: var(--shadow-3, var(--sc-shadow-pop)); }
.sc-fb-reasons[b-hae0oicgem]::before { content: ''; position: absolute; bottom: 100%; left: 15px;
  border: 6px solid transparent; border-bottom-color: var(--border-strong); }
.sc-fb-reasons[b-hae0oicgem]::after { content: ''; position: absolute; bottom: 100%; left: 16px; transform: translateY(1px);
  border: 5px solid transparent; border-bottom-color: var(--surface); }
html.dark .sc-fb-reasons[b-hae0oicgem] { background: linear-gradient(155deg, #1A2339 0%, #1A2339 60%, #1A2339 100%); border-color: rgba(37,80,124,0.22); }
html.dark .sc-fb-reasons[b-hae0oicgem]::after { border-bottom-color: #1A2339; }
.sc-fb-reasons[hidden][b-hae0oicgem] { display: none; }
.sc-fb-reasons-label[b-hae0oicgem] { font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.sc-fb-reason-chips[b-hae0oicgem] { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-fb-reason[b-hae0oicgem] { font-size: 11.5px !important; padding: 5px 11px !important; font-weight: 500; }
.sc-fb-reason.is-on[b-hae0oicgem] { border-color: var(--primary); color: var(--primary-ink, var(--primary));
  background: color-mix(in srgb, var(--primary) 12%, transparent); }
/* Free-form note beneath the chips — lets a user qualify the verdict in
   their own words. Present in both the up and down pop-overs. */
.sc-fb-reasons[b-hae0oicgem] { max-width: 280px; }
.sc-fb-form[b-hae0oicgem] { display: flex; flex-direction: column; gap: 7px; min-width: 214px; }
.sc-fb-input[b-hae0oicgem] { width: 100%; box-sizing: border-box; resize: vertical; min-height: 34px; max-height: 120px;
  padding: 7px 9px; border-radius: 9px; font: inherit; font-size: 12px; line-height: 1.4; color: var(--text);
  background: var(--surface-2, rgba(255,255,255,0.04)); border: 1px solid var(--border-strong);
  outline: none; transition: border-color .14s ease, box-shadow .14s ease; }
html.dark .sc-fb-input[b-hae0oicgem] { background: rgba(255,255,255,0.05); }
.sc-fb-input:focus[b-hae0oicgem] { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
.sc-fb-input[b-hae0oicgem]::placeholder { color: var(--text-subtle); }
.sc-fb-send[b-hae0oicgem] { align-self: flex-end; font-size: 11.5px !important; padding: 5px 14px !important; font-weight: 700;
  border-color: var(--primary); color: #fff; background: var(--primary); }
.sc-fb-send:hover[b-hae0oicgem] { filter: brightness(1.05); }
.sc-fb-send:disabled[b-hae0oicgem] { opacity: .5; cursor: default; filter: none; }
.sc-fb-id[b-hae0oicgem] { cursor: pointer; }
.sc-fb-id:focus-visible[b-hae0oicgem] { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }

/* ---- APP-OWNED ADDITIONS ---- */
/* The menu and the reason picker are pinned (position: fixed) and placed by
   script: wwwroot/js/wci/wci-menu.js for the menu, wci-transcript.js for the
   picker. The row lives inside the chat's scrolling transcript and the AI
   drawer's transform, which would clip a CSS-positioned popover. The CSS
   offsets above would over-constrain a pinned box, so they are reset; the
   carets are not drawn because a clamped or flipped panel no longer sits
   where they point. */
.sc-fb-menu[b-hae0oicgem], .sc-fb-reasons[b-hae0oicgem] { top: auto; bottom: auto; left: auto; right: auto; z-index: 10050; }
.sc-fb-menu[b-hae0oicgem]::before, .sc-fb-menu[b-hae0oicgem]::after,
.sc-fb-reasons[b-hae0oicgem]::before, .sc-fb-reasons[b-hae0oicgem]::after { content: none; }
/* Link and form items look exactly like the button items. */
a.sc-fb-btn[b-hae0oicgem] { text-decoration: none; }
.wci-fb-form[b-hae0oicgem] { display: contents; }
/* The turn ID is a button when it does something. */
button.sc-fb-id[b-hae0oicgem] { border: 0; background: transparent; padding: 0; font-family: inherit; line-height: inherit; }
/* Keyboard rings (the design gives only .sc-fb-id one). */
.sc-fb-btn:focus-visible[b-hae0oicgem],
.chip:focus-visible[b-hae0oicgem] { outline: 2px solid var(--primary); outline-offset: 2px; }
/* The clipboard refused the write (permission denied, an insecure page):
   the same pill in the danger tone, so it never claims a copy that did not
   happen. wci-transcript.js sets it. */
.sc-fb-copied.is-failed[b-hae0oicgem] {
  background: color-mix(in srgb, var(--sec-red, #DC3038) 12%, var(--surface));
  color: var(--sec-red-text, #831F23);
  border-color: color-mix(in srgb, var(--sec-red-text, #831F23) 26%, transparent);
}
/* A verdict or fork this viewer cannot give (signed out on a shared chat):
   still visible, still named, inert. */
.wci-fb-unavailable[b-hae0oicgem] { opacity: .45; cursor: not-allowed; }
.wci-fb-unavailable:hover[b-hae0oicgem] { background: transparent; color: color-mix(in srgb, var(--text-subtle) 62%, transparent); }
/* The cost figure is a floor when a model is missing from the pricing table. */
.wci-fb-untracked[b-hae0oicgem] { color: var(--ter-amber-ink, #9a6200); }
/* The where-outputs-go row that matches the member's choice wears the design's
   .is-on look. The choice is painted on <html> (wci-output-mode.js), and in the
   thread is the default, so with nothing painted yet that row is the lit one. */
html:not([data-output-mode="cards"]) .sc-fb-outmode[data-wci-output-mode="inline"][b-hae0oicgem],
html[data-output-mode="cards"] .sc-fb-outmode[data-wci-output-mode="cards"][b-hae0oicgem] { font-weight: 650; }
html:not([data-output-mode="cards"]) .sc-fb-outmode[data-wci-output-mode="inline"] .sc-fb-outmode-i[b-hae0oicgem],
html[data-output-mode="cards"] .sc-fb-outmode[data-wci-output-mode="cards"] .sc-fb-outmode-i[b-hae0oicgem] { color: var(--primary); }
html:not([data-output-mode="cards"]) .sc-fb-outmode[data-wci-output-mode="inline"] .sc-fb-outmode-k[b-hae0oicgem],
html[data-output-mode="cards"] .sc-fb-outmode[data-wci-output-mode="cards"] .sc-fb-outmode-k[b-hae0oicgem] { opacity: 1; }
html.dark:not([data-output-mode="cards"]) .sc-fb-outmode[data-wci-output-mode="inline"] .sc-fb-outmode-i[b-hae0oicgem],
html.dark[data-output-mode="cards"] .sc-fb-outmode[data-wci-output-mode="cards"] .sc-fb-outmode-i[b-hae0oicgem] { color: #7fb0ff; }
@media (prefers-reduced-motion: reduce) {
  .sc-fb-btn[b-hae0oicgem], .sc-fb-copied[b-hae0oicgem], .sc-fb-input[b-hae0oicgem], .chip[b-hae0oicgem] { transition: none; }
}
/* /Components/DesignSystem/WciTranscriptLine.razor.rz.scp.css */
/* ===================================================================
   WCI component: Transcript lines (WciTranscriptLine), INTEL-372
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo, revision served by the
   prototype host on 2026-09-28 (http://3.17.180.155:4144/):
     pages/wise.css
       lines 8257-8272    .sc-line, .sc-line-body (avatar column + body,
                          first line centred on the avatar)
       lines 8273-8274    .sc-line-you copy in brand blue (and html.dark)
       lines 8282-8298    the sent ask's edge-to-edge wash (::before)
       lines 8702-8722    .sc-avatar, .sc-avatar-wiseai (the owl chip; the
                          member chip is WciAvatar's own .sc-avatar-you)
       line  8723         .sc-line strong / b
       lines 8748-8756    .sc-line-typing: the progress ring around the owl
       lines 10702-10703  .sc-line-event .sc-event-label and its strong
       lines 11493-11497  .sc-line-meta (the caption row under the copy)
     js/wiseai-chat.js (the live chat's injected sheet)
       lines 2226-2230    .sc-fork-banner (wise.css has it only under the
                          catalog's .dsc-demo scope, 22833-22839)
     js/all-modules-flow.js
       lines 4283-4318    module "Transcript lines" (demo template)
   Class names are kept IDENTICAL. What is NOT verbatim:
     - REGISTRY rule 10: .sc-line's `margin-bottom: 0.85rem` (8260) and
       .sc-fork-banner's `margin: 2px 0 14px` are dropped; the host spaces
       lines through CssClass. .sc-avatar's `margin-top: 0` is dropped too.
     - Selectors that land on the host's copy (strong inside the body) use
       ::deep; the copy is ChildContent, not this component's markup.
     - The teammate line (.sc-line-mate, 10706-10760), the join and stop
       rows, the trust chip and the streaming trace are not ported: the app
       has no multi-user threads, no stop, no grounding chip and no trace.
   THE WASH needs to know where the chat module's edges are. The design
   cancels the transcript's inset with
     --sc-you-bleed: var(--sc-gutter, max(3rem, (100cqi - 860px) / 2))
   measured against its .sc-body container. The app has no .sc-body, so a
   host sets --sc-gutter on the scroll region to its own inset (the
   distance from the line's edge to the module's), and makes that region
   the query container when the gutter reads cqi. See WiseAiChat.razor.
   Requires wwwroot/css/wci/wci-tokens.css (--helix-ink added for this
   port).
   =================================================================== */

/* ---- Lines (wise.css 8257-8272) ---- */
.sc-line[b-bd0asnn6bw] {
  --sc-avatar-size: 30px;
  display: flex; align-items: flex-start; gap: 12px;
  color: var(--text);
  overflow: visible;
}
.sc-line-body[b-bd0asnn6bw] {
  flex: 1 1 0%; min-width: 0;
  /* First line sits in the middle of the avatar (line-box centered on it),
     not hanging from the top and not starting at the equator. */
  padding-top: max(0px, calc((var(--sc-avatar-size) - 1lh) / 2));
  /* High-contrast conversation copy — the dialogue is the most legible thing in
     the panel (the small, quiet meta row below carries the timestamp). */
  font-size: var(--fs-chat, 0.875rem); line-height: 1.6; color: var(--text);
}
/* Member asks in brand blue; WISEcodeAI answers in the default ink. */
.sc-line-you:not(.sc-line-event) .sc-line-body[b-bd0asnn6bw] { color: var(--primary); }
html.dark .sc-line-you:not(.sc-line-event) .sc-line-body[b-bd0asnn6bw] { color: var(--primary-bright, #8B9FAF); }

/* ---- The sent ask's wash (wise.css 8282-8298) ---- */
.sc-line-you:not(.sc-line-event)[b-bd0asnn6bw] {
  --sc-you-bleed: var(--sc-gutter, max(var(--sc-pad-floor, 3rem), calc((100cqi - var(--sc-transcript-max, 860px)) / 2)));
  position: relative;
  isolation: isolate;
}
.sc-line-you:not(.sc-line-event)[b-bd0asnn6bw]::before {
  content: "";
  position: absolute;
  inset-block: -0.4rem;
  inset-inline: calc(-1 * var(--sc-you-bleed));
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  pointer-events: none;
  z-index: -1;
}
html.dark .sc-line-you:not(.sc-line-event)[b-bd0asnn6bw]::before {
  background: color-mix(in srgb, var(--primary-bright, #8B9FAF) 12%, transparent);
}

/* ---- The owl chip (wise.css 8702-8722) ---- */
.sc-avatar[b-bd0asnn6bw] {
  flex-shrink: 0;
  width: var(--sc-avatar-size, 30px); height: var(--sc-avatar-size, 30px);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 11px; letter-spacing: 0.02em;
  user-select: none;
}
.sc-avatar[b-bd0asnn6bw]  svg { width: 18px; height: auto; }
.sc-avatar-wiseai[b-bd0asnn6bw] {
  background: #141414; color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
}
html.dark .sc-avatar-wiseai[b-bd0asnn6bw] { background: #fff; color: #141414; }
.sc-line[b-bd0asnn6bw]  strong, .sc-line[b-bd0asnn6bw]  b { color: inherit; font-weight: 700; }

/* ---- Thinking: the ring around the owl (wise.css 8748-8756) ---- */
.sc-line-typing .sc-avatar-wiseai[b-bd0asnn6bw] { position: relative; }
.sc-line-typing .sc-avatar-wiseai[b-bd0asnn6bw]::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%; box-sizing: border-box;
  border: 3px solid color-mix(in srgb, var(--helix-ink) 26%, transparent);
  border-top-color: var(--helix-ink); pointer-events: none;
  animation: scSpin-b-bd0asnn6bw 0.8s linear infinite;
}
@keyframes scSpin-b-bd0asnn6bw { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sc-line-typing .sc-avatar-wiseai[b-bd0asnn6bw]::after { animation: none; } }

/* ---- Event line (wise.css 10702-10703) ---- */
.sc-line-event .sc-event-label[b-bd0asnn6bw] { color: var(--primary-ink, var(--primary)); font-weight: 600; }
.sc-line-event .sc-line-body[b-bd0asnn6bw]  strong { color: var(--text); font-weight: 700; }

/* ---- Sent attachments row (wise.css 10628, ip-b2b 2c36820; INTEL-376) ---- */
.sc-att-row[b-bd0asnn6bw] { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }

/* ---- Meta row (wise.css 11493-11497) ---- */
.sc-line-meta[b-bd0asnn6bw] {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px;
  margin-top: 10px; margin-bottom: 4px; line-height: 1.2;
}
.sc-line-you .sc-line-meta[b-bd0asnn6bw] { justify-content: flex-start; }

/* ---- Fork banner (js/wiseai-chat.js 2226-2230) ---- */
.sc-fork-banner[b-bd0asnn6bw] { display: flex; align-items: center; gap: 9px; padding: 9px 13px; border-radius: 12px;
  font-size: 12.5px; line-height: 1.4; color: var(--text);
  background: color-mix(in srgb, var(--primary, #2F6DF6) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary, #2F6DF6) 26%, transparent); }
.sc-fork-banner-ic[b-bd0asnn6bw] { font-size: 18px; color: var(--primary-ink, var(--primary, #2F6DF6)); flex: 0 0 auto; }
.sc-fork-banner-txt[b-bd0asnn6bw]  strong { font-weight: 700; }

/* ---- APP-OWNED ADDITIONS ---- */
/* The host's copy is markdown (prose paragraphs and lists). The first
   block carries no top margin of its own, so the first line sits on the
   avatar the way the design's plain text does (the design says the same
   of a leading <p>, wise.css 8546-8550). */
.sc-line-body[b-bd0asnn6bw]  > :first-child,
.sc-line-body[b-bd0asnn6bw]  > :first-child > :first-child { margin-top: 0; }
/* The ask inherits the line's brand-blue ink: the markdown layer paints
   its own body colour, which would otherwise win over the wash's ink. */
.sc-line-you:not(.sc-line-event) .sc-line-body[b-bd0asnn6bw]  .wiseai-user-prompt,
.sc-line-you:not(.sc-line-event) .sc-line-body[b-bd0asnn6bw]  .wiseai-user-prompt :is(p, li, strong, em, h1, h2, h3, h4, code) { color: inherit; }
/* /Components/DesignSystem/WciTranscriptTime.razor.rz.scp.css */
/* ===================================================================
   WCI component: the transcript timestamp (WciTranscriptTime), INTEL-372 / INTEL-405
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo, revision served by the
   prototype host on 2026-09-28 (http://3.17.180.155:4144/):
     pages/wise.css
       lines 11498-11504  .sc-line-time, :hover, html.dark, :focus-visible
     js/wiseai-chat.js (the live chat's injected sheet)
       lines 2094-2099    .sc-line-time cursor / colour / transition (the
                          same rules without the size; wise.css wins where
                          they differ, as it does in the design)
   Class names are kept IDENTICAL. The text is written by
   wwwroot/js/wci/wci-transcript.js.
   =================================================================== */

.sc-line-time[b-7zqh16d5tl] { font-size: 0.625rem; font-weight: 500; letter-spacing: 0.02em;
  cursor: pointer; user-select: none; text-decoration: none;
  color: color-mix(in srgb, var(--text-subtle) 62%, transparent); transition: color .14s ease; }
.sc-line-time:hover[b-7zqh16d5tl] { color: var(--text); text-decoration: none; }
html.dark .sc-line-time[b-7zqh16d5tl] { color: color-mix(in srgb, var(--text-subtle) 70%, transparent); }
html.dark .sc-line-time:hover[b-7zqh16d5tl] { color: var(--text); }
.sc-line-time:focus-visible[b-7zqh16d5tl] { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---- APP-OWNED ADDITIONS ---- */
/* The stamp is empty until the script paints it; keep the row from
   collapsing a line height in the meantime. */
.sc-line-time:empty[b-7zqh16d5tl] { display: inline-block; min-width: 3em; min-height: 1em; }
@media (prefers-reduced-motion: reduce) { .sc-line-time[b-7zqh16d5tl] { transition: none; } }
/* /Components/DesignSystem/WciTurnList.razor.rz.scp.css */
/* ===================================================================
   WCI component: Turns module (WciTurnList), INTEL-371
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo, revision served by the
   prototype host on 2026-09-28 (http://3.17.180.155:4144/):
     js/wiseai-chat.js (the live chat's injected sheet)
       lines 2240-2284   .wt-intro, .wt-list, .wt-turn and its head, number,
                         question and answer, .wt-chips / .wt-chip,
                         .wt-actions, .wt-fork, .wt-fork-id, .wt-jump, and
                         the .wt-search box
     pages/wise.css has only the catalog's .dsc-demo copy.
   Class names are kept IDENTICAL. What is NOT verbatim:
     - .wt-empty (2242) is WciEmptyState's (its Turns line, INTEL-395).
     - Not ported, nothing behind them: .wt-iconbtn and the .wt-note*
       rules (2288-2303, per-turn Share and Note) and the .wt-toast.
     - The drawer's shell (.wch-sidebar.wch-docked, its .wch-head) comes
       with the Module shell (INTEL-426); the list sits in its host's space.
   =================================================================== */

.wt-intro[b-h0h5pvex1w] { margin: 2px 16px 8px; font-size: 12px; line-height: 1.45; opacity: .7; }
.wt-list[b-h0h5pvex1w] { flex: 1; overflow-y: auto; padding: 2px 8px 14px; }
.wt-turn[b-h0h5pvex1w] { position: relative; border: 1px solid var(--border, rgba(255,255,255,0.10)); border-radius: 12px;
  padding: 11px 12px 12px; margin: 8px 4px; background: rgba(255,255,255,0.02); }
html:not(.dark) .wt-turn[b-h0h5pvex1w] { background: rgba(20,40,80,0.02); border-color: rgba(0,0,0,0.08); }
.wt-turn-head[b-h0h5pvex1w] { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.wt-turn-num[b-h0h5pvex1w] { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 999px; font-size: 11px; font-weight: 700; flex: 0 0 auto;
  background: color-mix(in srgb, var(--primary, #2F6DF6) 14%, transparent); color: var(--primary-ink, var(--primary, #2F6DF6)); }
.wt-turn-q[b-h0h5pvex1w] { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wt-turn-a[b-h0h5pvex1w] { font-size: 12px; line-height: 1.45; opacity: .72; margin: 2px 0 9px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wt-chips[b-h0h5pvex1w] { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.wt-chip[b-h0h5pvex1w] { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px;
  background: var(--surface-3, rgba(255,255,255,0.06)); color: var(--text-muted, inherit); }
html:not(.dark) .wt-chip[b-h0h5pvex1w] { background: rgba(20,40,80,0.06); }
.wt-chip .material-symbols-outlined[b-h0h5pvex1w] { font-size: 13px; }
.wt-actions[b-h0h5pvex1w] { display: flex; align-items: center; gap: 6px; }
.wt-fork[b-h0h5pvex1w] { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 0; border-radius: 50%;
  background: transparent; color: var(--primary-ink, var(--primary, #2F6DF6)); cursor: pointer; opacity: .9; transition: background .14s ease, color .14s ease, opacity .14s ease; }
.wt-fork:hover[b-h0h5pvex1w] { opacity: 1; background: color-mix(in srgb, var(--primary, #2F6DF6) 14%, transparent); }
.wt-fork .material-symbols-outlined[b-h0h5pvex1w] { font-size: 17px; }
/* The forked turn's handle (#id), sat right beside its fork icon. */
.wt-fork-id[b-h0h5pvex1w] { font-size: 11px; font-weight: 700; letter-spacing: 0.02em; color: var(--primary-ink, var(--primary, #2F6DF6));
  font-variant-numeric: tabular-nums; margin: 0 2px 0 -1px; }
.wt-jump[b-h0h5pvex1w] { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; border: 0; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 600; color: var(--text-muted, inherit); opacity: .8; padding: 6px 4px; }
.wt-jump:hover[b-h0h5pvex1w] { opacity: 1; color: var(--primary-ink, var(--primary, #2F6DF6)); }
.wt-jump .material-symbols-outlined[b-h0h5pvex1w] { font-size: 15px; }

/* Search box pinned above the turn list (mirrors the History search). */
.wt-search[b-h0h5pvex1w] { position: relative; display: flex; align-items: center; margin: 2px 16px 6px; flex-shrink: 0; }
.wt-search > .material-symbols-outlined[b-h0h5pvex1w] { position: absolute; left: 11px; font-size: 18px; opacity: .5; pointer-events: none; }
.wt-search-input[b-h0h5pvex1w] { width: 100%; height: 36px; box-sizing: border-box; padding: 0 32px 0 36px; border-radius: 999px; font: inherit; font-size: 13px; color: inherit; outline: none;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); transition: border-color .15s ease, box-shadow .15s ease; }
html:not(.dark) .wt-search-input[b-h0h5pvex1w] { background: rgba(20,40,80,0.04); border-color: rgba(0,0,0,0.10); }
.wt-search-input[b-h0h5pvex1w]::placeholder { opacity: .6; }
.wt-search-input:focus[b-h0h5pvex1w] { border-color: var(--primary, #2F6DF6); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #2F6DF6) 18%, transparent); }
.wt-search-clear[b-h0h5pvex1w] { position: absolute; right: 8px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; display: none; align-items: center; justify-content: center; opacity: .6; }
.wt-search-clear:hover[b-h0h5pvex1w] { background: rgba(255,255,255,0.12); opacity: 1; }
html:not(.dark) .wt-search-clear:hover[b-h0h5pvex1w] { background: rgba(0,0,0,0.08); }
.wt-search-clear .material-symbols-outlined[b-h0h5pvex1w] { font-size: 16px; }
.wt-search.has-q .wt-search-clear[b-h0h5pvex1w] { display: flex; }

/* ---- APP-OWNED ADDITIONS ---- */
/* A column the host sizes; the list scrolls inside it as the design's
   docked panel does. */
.wci-turns[b-h0h5pvex1w] { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.wt-fork:focus-visible[b-h0h5pvex1w], .wt-jump:focus-visible[b-h0h5pvex1w], .wt-search-clear:focus-visible[b-h0h5pvex1w] { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
  .wt-fork[b-h0h5pvex1w], .wt-search-input[b-h0h5pvex1w] { transition: none; }
}
/* /Components/DesignSystem/WciTypeahead.razor.rz.scp.css */
/* ===================================================================
   WCI component: Typeahead (WciTypeahead, INTEL-674)
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo (ab499e3, pulled
   2026-10-07; the prototype host serves the same file at
   http://3.17.180.155:4144/pages/wise.css):
     pages/wise.css
       lines 26430-26481  "Typeahead with multi-select chips" (.wise-
                          typeahead, the pill field and its focus ring,
                          chips and their x, the input, the list and
                          its inline variant, options, the bold match,
                          picked check, counts, the empty line)
   Module: Component Library > Filters > "Typeahead"
   (js/all-modules-flow.js, the card dsc-comp-typeahead).
   DEVIATION: the match's <mark> is built in C# (WciTypeahead's
   Highlight), which carries no scope attribute, so its rule reaches it
   with ::deep.
   Class names are kept IDENTICAL to wise.css so a future re-port is a
   section diff.
   =================================================================== */

.wise-typeahead[b-va9cfiyha8] { position: relative; width: 100%; max-width: 460px; font-family: inherit; }
.wise-ta-field[b-va9cfiyha8] {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  min-height: 42px; box-sizing: border-box; padding: 5px 12px 5px 8px;
  background: var(--surface-2); border: 1px solid var(--border-strong);
  border-radius: 22px; cursor: text; transition: border-color .15s ease, box-shadow .15s ease;
}
.wise-typeahead.is-focus .wise-ta-field[b-va9cfiyha8],
.wise-ta-field:focus-within[b-va9cfiyha8] {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border-strong));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.wise-ta-field > .material-symbols-outlined[b-va9cfiyha8] { font-size: 18px; color: var(--text-subtle); margin-left: 4px; }
.wise-ta-chip[b-va9cfiyha8] {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px 4px 3px 10px; border-radius: var(--radius-pill);
  background: var(--primary); color: #fff;
  font-size: 11.5px; font-weight: 700; line-height: 1.2; white-space: nowrap;
}
.wise-ta-chip-x[b-va9cfiyha8] {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; border: 0; padding: 0; margin: 0;
  background: transparent; color: inherit; cursor: pointer; font: inherit;
}
.wise-ta-chip-x .material-symbols-outlined[b-va9cfiyha8] { font-size: 14px; }
.wise-ta-chip-x:hover[b-va9cfiyha8] { background: rgba(255,255,255,.22); }
.wise-ta-input[b-va9cfiyha8] {
  flex: 1 1 90px; min-width: 90px; height: 28px; border: 0; outline: 0; padding: 0 4px;
  background: transparent; color: var(--text); font-family: inherit; font-size: 0.8125rem;
}
.wise-ta-input[b-va9cfiyha8]::placeholder { color: var(--text-subtle); }
.wise-ta-list[b-va9cfiyha8] {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20;
  margin: 0; padding: 6px; list-style: none; max-height: 220px; overflow: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-2); display: none;
}
.wise-typeahead.is-open .wise-ta-list[b-va9cfiyha8] { display: block; }
.wise-typeahead--inline .wise-ta-list[b-va9cfiyha8] { position: static; margin-top: 6px; box-shadow: none; display: block; }
.wise-ta-opt[b-va9cfiyha8] {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border-radius: 9px; cursor: pointer;
  font-size: 0.8125rem; color: var(--text);
}
.wise-ta-opt > span:first-child[b-va9cfiyha8] { flex: 1 1 auto; min-width: 0; }
.wise-ta-opt[b-va9cfiyha8]  mark { background: transparent; color: var(--primary-ink, var(--primary)); font-weight: 800; } /* see DEVIATION in the header */
.wise-ta-opt:hover[b-va9cfiyha8], .wise-ta-opt.is-active[b-va9cfiyha8] { background: var(--primary-soft); }
.wise-ta-opt.is-picked[b-va9cfiyha8] { color: var(--text-subtle); }
.wise-ta-opt.is-picked[b-va9cfiyha8]::after { content: 'check'; font-family: 'Material Symbols Outlined'; font-size: 16px; color: var(--primary-ink, var(--primary)); }
.wise-ta-opt-count[b-va9cfiyha8] { font-size: 11px; font-weight: 700; color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.wise-ta-empty[b-va9cfiyha8] { padding: 10px; font-size: 0.78rem; color: var(--text-subtle); text-align: center; }

/* ===================================================================
   APP-OWNED ADDITIONS (not in wise.css)
   =================================================================== */

/* Past the pick cap (Max) the unpicked options stay listed, dimmed, and cannot be picked. */
.wise-ta-opt.is-disabled[b-va9cfiyha8] { opacity: .45; cursor: not-allowed; }
.wise-ta-opt.is-disabled:hover[b-va9cfiyha8] { background: transparent; }

.wise-typeahead.is-disabled .wise-ta-field[b-va9cfiyha8] { opacity: .55; cursor: not-allowed; }

/* A long label wraps inside its option; several chips wrap the field (it is flex-wrap already), never sideways. */
.wise-ta-opt > span:first-child[b-va9cfiyha8] { overflow-wrap: anywhere; }
.wise-ta-chip[b-va9cfiyha8] { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
  .wise-ta-field[b-va9cfiyha8] { transition: none; }
}
/* /Components/DesignSystem/WciWalkthrough.razor.rz.scp.css */
/* ===================================================================
   WCI component: Owl walkthrough (WciWalkthrough), INTEL-381
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo, revision served by the
   prototype host on 2026-09-28 (http://3.17.180.155:4144/):
     js/chat-history.js (the shared .wch-sidebar shell it injects)
       lines 40-57          .wch-sidebar, .wch-right and the light-theme lines
       lines 58-61          .wch-head, .wch-head-title
       line  170            .wch-controls
       lines 174-176        .wch-sidebar.wch-docked (the docked-module card)
     pages/wise.css
       lines 19313-19328    body > .owt-mod: the card pinned at the top right
                            when a page has no #modules-row (the app's case),
                            rewritten onto .wci-owt-float (below)
       lines 19329-19437    .owt-mod: head, mast, kicker, nav and its skips,
                            the chevrons, body, copy, bullets, group chips
   The group chips and Skip this group are the design's .chip.ws-intent-chip;
   those rules are copied from the intent chip's port (WciIntentChip.razor.css,
   wise.css 10141-10159 and 10193-10206 in this revision), because a scoped
   sheet cannot reach another component's. Skip remaining is a WciButton.
   Class names are kept IDENTICAL. What is NOT verbatim:
     - The #modules-row / .modules-sticky placements (19269-19312) are not
       ported: they belong to the Module shell (INTEL-426). The card floats.
     - z-index: the design's 80 is below every app drawer; see APP-OWNED.
   Requires wwwroot/css/wci/wci-tokens.css.
   =================================================================== */

/* ---- The shell (js/chat-history.js 40-61, 170, 174-176) ---- */
.wch-sidebar[b-c2ov5bai1w]{position:absolute;top:0;bottom:0;left:0;width:300px;max-width:86%;z-index:60;display:none;flex-direction:column;
  --wch-tree-bg:var(--card,var(--surface,#0F1830));
  background:var(--card,var(--surface,#0F1830));color:var(--text,#C5CFD7);
  border-right:1px solid rgba(255,255,255,0.10);box-shadow:10px 0 34px rgba(0,0,0,0.34);}
.wch-sidebar.wch-right[b-c2ov5bai1w]{left:auto;right:0;border-right:0;border-left:1px solid rgba(255,255,255,0.10);box-shadow:-10px 0 34px rgba(0,0,0,0.34);}
html:not(.dark) .wch-sidebar[b-c2ov5bai1w]{background:#fff;color:#1F2733;border-color:rgba(0,0,0,0.08);box-shadow:10px 0 34px rgba(20,30,60,0.12);--wch-tree-bg:#fff;}
html:not(.dark) .wch-sidebar.wch-right[b-c2ov5bai1w]{box-shadow:-10px 0 34px rgba(20,30,60,0.12);}
.wch-head[b-c2ov5bai1w]{display:flex;align-items:center;gap:8px;padding:14px 12px 12px 16px;flex-shrink:0;border-bottom:1px solid rgba(255,255,255,0.08);}
html:not(.dark) .wch-head[b-c2ov5bai1w]{border-bottom-color:rgba(0,0,0,0.07);}
.wch-head-title[b-c2ov5bai1w]{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px;flex:1;}
.wch-controls[b-c2ov5bai1w]{display:inline-flex;align-items:center;gap:2px;flex-shrink:0;margin-left:auto;}
.wch-sidebar.wch-docked[b-c2ov5bai1w]{position:relative;top:auto;bottom:auto;left:auto;right:auto;height:100%;max-width:none;flex:0 0 300px;display:flex;overflow:hidden;
  border:1px solid rgba(255,255,255,0.10);border-radius:16px;box-shadow:var(--shadow-card,0 12px 32px rgba(0,0,0,0.30));
  animation:none;}

/* ---- The floating card (wise.css 19313-19328, body > .owt-mod) ---- */
.owt-mod.wch-sidebar.wch-docked.wci-owt-float[b-c2ov5bai1w] {
  position: fixed;
  top: 88px;
  right: 20px;
  width: 360px;
  height: min(72vh, 640px);
  z-index: 80;
  background: var(--surface, #fff);
  color: var(--text, inherit);
  border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  box-shadow: var(--shadow-card, 0 12px 32px rgba(20, 30, 60, 0.12));
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ---- The walkthrough (wise.css 19329-19437) ---- */
.owt-mod .wch-controls .panel-more-wrap[b-c2ov5bai1w] { margin-left: 0; }
.owt-mod .wch-controls[b-c2ov5bai1w] { gap: 2px; }
#modules-row .owt-mod.wch-sidebar.wch-docked .wch-head-title[b-c2ov5bai1w],
.owt-mod .wch-head-title[b-c2ov5bai1w] {
  display: block;
  font-family: var(--module-title-family);
  font-size: 1.28rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--text);
}
.owt-mod .owt-mast[b-c2ov5bai1w] {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 8px;
}
.owt-mod .owt-kicker[b-c2ov5bai1w] {
  flex: 0 0 100%;
  margin: 0;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--text-muted);
}
.owt-mod .owt-nav[b-c2ov5bai1w] {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px 10px;
  flex-shrink: 0;
  flex-wrap: wrap;
  padding: 4px 14px 10px 24px;
  border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.08));
}
html.dark .owt-mod .owt-nav[b-c2ov5bai1w] { border-bottom-color: rgba(255, 255, 255, 0.08); }
.owt-mod .owt-nav-skips[b-c2ov5bai1w],
.owt-mod .owt-nav-move[b-c2ov5bai1w] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.owt-mod .owt-nav-skips .chip[b-c2ov5bai1w] { flex: 0 0 auto; }
.owt-mod .owt-nav-skips .chip:disabled[b-c2ov5bai1w] { opacity: 0.46; cursor: default; }
.owt-mod .owt-nav-skips .wise-btn[b-c2ov5bai1w] { flex: 0 0 auto; }
.owt-mod .owt-nav-chev[b-c2ov5bai1w] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--primary);
  cursor: pointer;
}
html.dark .owt-mod .owt-nav-chev[b-c2ov5bai1w] { color: var(--primary-bright, var(--primary)); }
.owt-mod .owt-nav-chev:hover[b-c2ov5bai1w] { background: color-mix(in srgb, var(--primary) 12%, transparent); }
.owt-mod .owt-nav-chev:focus-visible[b-c2ov5bai1w] { outline: 2px solid var(--primary); outline-offset: 2px; }
.owt-mod .owt-nav-chev:disabled[b-c2ov5bai1w] { opacity: 0.38; cursor: default; background: transparent; }
.owt-mod .owt-nav-chev .material-symbols-outlined[b-c2ov5bai1w] {
  font-size: 22px;
  color: inherit;
}
.owt-mod .owt-body[b-c2ov5bai1w] {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 16px 18px 24px;
}
.owt-mod .owt-copy[b-c2ov5bai1w],
.owt-mod .owt-bullets[b-c2ov5bai1w],
.owt-mod .owt-bullets li[b-c2ov5bai1w] {
  margin: 0 0 12px;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--text);
  opacity: 1;
}
.owt-mod .owt-bullets[b-c2ov5bai1w] {
  display: block;
  list-style: disc;
  margin: 0 0 14px;
  padding: 0 0 0 1.15em;
}
.owt-mod .owt-bullets li[b-c2ov5bai1w] { margin: 0 0 6px; }
.owt-mod .owt-chips.ws-chips[b-c2ov5bai1w] {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start !important;
  align-content: flex-start;
  gap: 6px;
  width: 100%;
  margin: 0;
  text-align: left;
}
.owt-mod .owt-chips .chip[b-c2ov5bai1w] { width: fit-content; max-width: 100%; }
.owt-mod .owt-chips .chip[aria-current="true"][b-c2ov5bai1w] {
  border-color: var(--primary);
  color: var(--text);
}

/* ---- The chips (.chip.ws-intent-chip, from WciIntentChip.razor.css) ---- */
.chip[b-c2ov5bai1w] {
  display: inline-flex; align-items: center; gap: 6px;
  box-sizing: border-box; height: 28px; padding: 0 7px;
  /* One size app-wide: the 28px in-conversation reply chip. Same blue tint as
     the composer (.fl-input-wrap, 10% primary) so chips and the input share
     one surface color, light and dark. */
  background: color-mix(in srgb, var(--primary) 10%, #fff); border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  font-size: var(--fs-label); font-weight: 500; line-height: 1; color: var(--text-muted); cursor: pointer; font-family: inherit;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.chip:hover[b-c2ov5bai1w] { background: color-mix(in srgb, var(--primary) 16%, #fff); border-color: color-mix(in srgb, var(--primary) 40%, var(--border-strong)); color: var(--text); }
html.dark .chip:hover[b-c2ov5bai1w],
html.dark .ws-intent-chip:hover[b-c2ov5bai1w] {
  background: color-mix(in srgb, var(--primary-bright, #8B9FAF) 22%, transparent);
  border-color: color-mix(in srgb, var(--primary-bright, #8B9FAF) 55%, var(--primary));
  color: var(--text);
}
.chip .material-symbols-outlined[b-c2ov5bai1w] { font-size: 13px !important; }
/* Welcome / shortcut intent chips share the same 28px .chip size. Brand-blue
   leading glyph; the trailing .ws-lock badge keeps its own colours. */
.ws-intent-chip[b-c2ov5bai1w] { background: color-mix(in srgb, var(--primary) 10%, #fff); border-color: var(--border-strong); color: var(--text-muted); font-weight: 500; }
/* Leading intent glyph always reads in brand blue (the trailing .ws-lock badge
   keeps its own resting/hover colours; the amber ask-help variant overrides via
   higher specificity). */
.ws-intent-chip > .material-symbols-outlined[b-c2ov5bai1w] { color: var(--primary); }
html.dark .ws-intent-chip > .material-symbols-outlined[b-c2ov5bai1w] { color: var(--primary-bright, #8B9FAF); }
.ws-intent-chip:hover[b-c2ov5bai1w] { background: color-mix(in srgb, var(--primary) 16%, #fff); border-color: color-mix(in srgb, var(--primary) 40%, var(--border-strong)); color: var(--text); }
/* Dark mode: chips take the composer's brightened brand-blue tint (matching
   html.dark .fl-input-wrap) with our royal-blue border so they don't read as
   white-bordered pills on the navy chrome. */
html.dark .chip[b-c2ov5bai1w] { background: color-mix(in srgb, var(--primary-bright, #8B9FAF) 14%, transparent); border-color: var(--primary); }
html.dark .ws-intent-chip[b-c2ov5bai1w] { background: color-mix(in srgb, var(--primary-bright, #8B9FAF) 14%, transparent); border-color: var(--primary); }

/* ---- APP-OWNED ADDITIONS ---- */
/* Above the app's drawers (8000-8500), the review stepper (9000) and the
   Food Browser fly-out (10060)? No: below the WCI overlays (10100) and
   the menus (10050), so a dialog or a menu opened from the page sits on
   top of it, and above the drawers so it is never hidden behind one. The
   AI chat drawer (99998) stays above it. */
.owt-mod.wch-sidebar.wch-docked.wci-owt-float[b-c2ov5bai1w] { z-index: 8600; }
.owt-mod.wci-owt-float:focus[b-c2ov5bai1w] { outline: none; }
/* Docked (the design's #modules-row placement, wise.css 19294-19310): the
   body of a WciModule drawer, which owns the width, the border and the
   paint. The card fills it top to bottom and its body scrolls. */
.owt-mod.wci-owt-docked[b-c2ov5bai1w] { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.owt-mod.wci-owt-docked:focus[b-c2ov5bai1w] { outline: none; }
/* A phone: the card keeps a 16px gutter and leaves the top bar alone. */
@media (max-width: 480px) {
  .owt-mod.wch-sidebar.wch-docked.wci-owt-float[b-c2ov5bai1w] { right: 16px; left: 16px; width: auto; top: 72px; }
}
.chip:focus-visible[b-c2ov5bai1w] { outline: 2px solid var(--primary); outline-offset: 2px; }
.chip:disabled[b-c2ov5bai1w] { opacity: 0.46; cursor: default; }
/* /Components/DesignSystem/WciWidthToggle.razor.rz.scp.css */
/* ============================================================================
   WciWidthToggle: the ip-b2b "Width toggle" (INTEL-392).
   Source: pages/wise.css 8178-8190 (.panel-width-toggle-btn, its glyph, hover and .is-on), revision served
   2026-09-29. .is-width-fill has no rule in wise.css: fill reads like double and custom (.is-on), and only
   the glyph tells them apart.
   ============================================================================ */

.panel-width-toggle-btn[b-6nesnpmx5r] {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; background: transparent; border: 0;
  color: var(--text-muted); opacity: 1; cursor: pointer; padding: 0; flex-shrink: 0;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.panel-width-toggle-btn .material-symbols-outlined[b-6nesnpmx5r] { font-size: 16px !important; line-height: 1 !important; }
.panel-width-toggle-btn:hover[b-6nesnpmx5r] { opacity: 1; color: var(--text); background: var(--surface-3); }
.panel-width-toggle-btn.is-on[b-6nesnpmx5r] { opacity: 1; color: var(--primary-ink, var(--primary)); background: color-mix(in srgb, var(--primary) 16%, var(--surface-2)); }

/* ============================================================================
   APP-OWNED ADDITIONS (not in wise.css)
   ============================================================================ */

/* The focus ring every WCI control carries (the design's CONVENTIONS list asks for :focus-visible rings). */
.panel-width-toggle-btn:focus-visible[b-6nesnpmx5r] {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .panel-width-toggle-btn[b-6nesnpmx5r] { transition: none; }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Legacy .page/.sidebar/.top-row scaffold rules removed: MainLayout renders
   <Sidebar /> + .main-content only, so those selectors matched nothing. */

#blazor-error-ui[b-ac1gsue7j2] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-ac1gsue7j2] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-kgjep72rr3],
.components-reconnect-repeated-attempt-visible[b-kgjep72rr3],
.components-reconnect-failed-visible[b-kgjep72rr3],
.components-pause-visible[b-kgjep72rr3],
.components-resume-failed-visible[b-kgjep72rr3],
.components-rejoining-animation[b-kgjep72rr3] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-kgjep72rr3],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-kgjep72rr3],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-kgjep72rr3],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-kgjep72rr3],
#components-reconnect-modal.components-reconnect-retrying[b-kgjep72rr3],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-kgjep72rr3],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-kgjep72rr3],
#components-reconnect-modal.components-reconnect-failed[b-kgjep72rr3],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-kgjep72rr3] {
    display: block;
}


#components-reconnect-modal[b-kgjep72rr3] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-kgjep72rr3 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-kgjep72rr3 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-kgjep72rr3 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-kgjep72rr3]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-kgjep72rr3 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-kgjep72rr3 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-kgjep72rr3 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-kgjep72rr3 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-kgjep72rr3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-kgjep72rr3] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-kgjep72rr3] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-kgjep72rr3] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-kgjep72rr3] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-kgjep72rr3] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-kgjep72rr3] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-kgjep72rr3 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-kgjep72rr3] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-kgjep72rr3 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Access/AccessKeysGrid.razor.rz.scp.css */
/* The key id (Table Types INTEL-547): monospace and never wraps, in the table or on a stacked card; it shortens with
   an ellipsis rather than widening the card. The cell is built in C# inside WciDataTable, so the rule reaches it
   from this component's own wrapper. */
.access-keys-grid[b-xowdkad3yc]  .access-key-id {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/Pages/AdminWiseAiLeaderboard.razor.rz.scp.css */
/* The Top tool pill (Usage board, INTEL-526). Tool names run to 45 characters and the chip never wraps,
   so it ends in an ellipsis at the cell's edge rather than spilling into the next column; the chip's
   title carries the whole name. */
.wiseai-top-tool[b-pt8q8855t1] { display: block; min-width: 0; max-width: 100%; }
.wiseai-top-tool[b-pt8q8855t1]  .adm-chip { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }

/* The Tool column's name (and the nested tables'): in the table it ends in an ellipsis at the column's
   edge rather than running under the Calls column; the title carries the whole name. */
.wiseai-tool-name[b-pt8q8855t1] { display: block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* An organization name, in the Users tables: an ellipsis at the column's edge (the full name on hover), not
   painted over the next columns now that the tables stay tables on desktop. */
.wiseai-org-name[b-pt8q8855t1] { display: block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The Users / Tools switch rides the filter toolbar's row (its Trailing slot): placed first, so it reads left and the
   funnel sits at the row's right end. */
.wiseai-leaderboard-tabs[b-pt8q8855t1] {
    order: -1;
    margin-right: auto;
    display: flex;
}
/* /Components/Pages/AdminWiseCoachMobile.razor.rz.scp.css */
.wisecoach-test-grid[b-aggcgt9mu9] {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 3fr) minmax(20rem, 2fr);
}

.wisecoach-test-chat[b-aggcgt9mu9] {
    min-width: 0;
    overflow: hidden;
}

.wisecoach-revision-select[b-aggcgt9mu9] {
    width: 9.375rem;
}

.wisecoach-test-context[b-aggcgt9mu9] {
    min-height: 5.5rem;
    padding: 1rem;
    border-bottom: 1px solid var(--color-oyster-100, #eeeae4);
    background: #fff;
}

.wisecoach-transcript[b-aggcgt9mu9] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 24rem;
    max-height: 38rem;
    overflow-y: auto;
    padding: 1rem;
    background: var(--color-oyster-50, #faf9f7);
}

.wisecoach-test-status[b-aggcgt9mu9] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    line-height: 1.375;
}

.wisecoach-test-status-title[b-aggcgt9mu9] {
    color: var(--wise-primary);
    font-size: 0.75rem;
    font-weight: 600;
}

.wisecoach-test-status-detail[b-aggcgt9mu9] {
    color: var(--wise-muted);
    font-size: 0.75rem;
    white-space: pre-line;
}

.wisecoach-chat-suggestions[b-aggcgt9mu9] {
    display: flex;
    justify-content: center;
}

.wisecoach-contract[b-aggcgt9mu9] {
    max-height: 24rem;
    overflow: auto;
    padding: 1rem;
    border-radius: 0.5rem;
    color: #e5e7eb;
    background: #111827;
    font-size: 0.75rem;
    line-height: 1.5;
    white-space: pre-wrap;
}

@media (max-width: 900px) {
    .wisecoach-test-grid[b-aggcgt9mu9] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Pages/AuditReviewQueue.razor.rz.scp.css */
/* ── Page header (Pencil frame dT9ya) ──
   Title row: H1 "Ingredient Audit Review" Poppins 30/700 + subtitle Inter 14/normal.
   Right side: Export As pill (white/border) + Refresh Queue pill (var(--primary) / white).
   24px padding, 1px bottom divider. */

.audit-page-header[b-16ogc1145n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    border-bottom: 1px solid var(--border);
    margin: -24px -24px 24px -24px; /* extend to page edges, like the wireframe */
}

.audit-page-header-left[b-16ogc1145n] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.audit-page-title[b-16ogc1145n] {
    font-family: var(--font-family-serif);
    font-size: 30px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    line-height: 1.2;
}

.audit-page-subtitle[b-16ogc1145n] {
    font-family: var(--font-family-primary);
    font-size: 14px;
    font-weight: 400;
    color: var(--text-muted);
    margin: 0;
}

.audit-page-header-right[b-16ogc1145n] {
    display: flex;
    align-items: center;
    gap: 12px;
}

@media (max-width: 768px) {
    .audit-page-header[b-16ogc1145n] {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
        padding: 20px 16px;
        margin: -16px -16px 20px -16px;
    }

    .audit-page-header-left[b-16ogc1145n],
    .audit-page-header-right[b-16ogc1145n] {
        min-width: 0;
        width: 100%;
    }

    .audit-page-title[b-16ogc1145n] {
        font-size: 28px;
        line-height: 1.1;
    }


}

/* ── Bulk action bar (Pencil frames R1zsp "Bulk Action Bar" + nzkkn) ──
   Indigo bar between the Status Tabs and the table while flags are check-selected.
   Left: 24px check badge + "N flags selected" + composition line. Right: only the
   actions that apply to every selected flag, plus Clear. The mixed (open +
   superseded) state swaps to the amber guard with narrow-the-selection pills. */

.audit-bulk-bar[b-16ogc1145n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    background: var(--primary-soft);
    border: 1.5px solid var(--primary);
    border-radius: 8px;
    font-family: var(--font-family-primary);
}

.audit-bulk-bar-mixed[b-16ogc1145n] {
    background: var(--ter-amber-10);
    border-color: var(--ter-amber);
}

.audit-bulk-left[b-16ogc1145n] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.audit-bulk-badge[b-16ogc1145n] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: var(--primary);
    flex-shrink: 0;
}

.audit-bulk-bar-mixed .audit-bulk-badge[b-16ogc1145n] {
    background: var(--ter-amber-text);
}

.audit-bulk-badge .material-icons[b-16ogc1145n] {
    font-size: 15px;
    color: #FFFFFF;
}

.audit-bulk-text[b-16ogc1145n] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.audit-bulk-count[b-16ogc1145n] {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-ink);
    line-height: 1.2;
}

.audit-bulk-bar-mixed .audit-bulk-count[b-16ogc1145n] {
    color: var(--ter-amber-text);
}

.audit-bulk-scope[b-16ogc1145n] {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted);
    line-height: 1.2;
}

.audit-bulk-actions[b-16ogc1145n] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.audit-bulk-guard[b-16ogc1145n] {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ter-amber-text);
}

/* ── Bulk-selection checkboxes (Pencil frames CnXmf "Checkbox Cell" + R1zsp header) ── */

.audit-bulk-checkbox[b-16ogc1145n] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border-radius: 4px;
    border: 1.5px solid var(--border-strong);
    background: var(--surface);
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
    flex-shrink: 0;
}

.audit-bulk-checkbox:hover[b-16ogc1145n] {
    border-color: var(--primary);
}

.audit-bulk-checkbox.audit-bulk-checkbox-checked[b-16ogc1145n] {
    background: var(--primary);
    border-color: var(--primary);
}

.audit-bulk-checkbox .material-icons[b-16ogc1145n] {
    font-size: 12px;
    width: 12px;
    height: 12px;
    line-height: 12px;
    color: #FFFFFF;
}

/* ── Row states on the WciDataTable rows ──
   The table draws the row (.adm-trow) itself, so these reach it through ::deep from
   .audit-table-wrap. Check-selected rows get the indigo tint; the single "working on
   this" click marker is the table's own is-active row (RowActive) plus the inset
   stripe; Canceled rows get the cream tint; on the All and Canceled tabs a 4px left
   stripe carries the row's lifecycle colour. */
.audit-table-wrap[b-16ogc1145n]  .adm-trow {
    position: relative; /* anchors the status stripe (::before) */
}

.audit-table-wrap[b-16ogc1145n]  .adm-trow.audit-row-canceled {
    background: var(--surface-2);
}

.audit-table-wrap[b-16ogc1145n]  .adm-trow.audit-row-bulk-selected {
    background: var(--primary-soft);
}

.audit-table-wrap[b-16ogc1145n]  .adm-trow.is-active {
    background: var(--primary-soft);
    box-shadow: inset 3px 0 0 var(--primary);
}

.audit-table-wrap[b-16ogc1145n]  .adm-trow.audit-row-stripe::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--stripe-color, transparent);
}

.audit-table-wrap[b-16ogc1145n]  .audit-row-stripe-open      { --stripe-color: var(--primary); }
.audit-table-wrap[b-16ogc1145n]  .audit-row-stripe-accepted  { --stripe-color: var(--sec-green-text); }
.audit-table-wrap[b-16ogc1145n]  .audit-row-stripe-newcanon  { --stripe-color: var(--primary); }
.audit-table-wrap[b-16ogc1145n]  .audit-row-stripe-rejected  { --stripe-color: var(--sec-red); }
.audit-table-wrap[b-16ogc1145n]  .audit-row-stripe-kickedback { --stripe-color: var(--ter-cyan); }
.audit-table-wrap[b-16ogc1145n]  .audit-row-stripe-canceled  { --stripe-color: var(--text-subtle); }

/* ── Audit table (Pencil frame Tq8PF) ── */

.audit-table-wrap[b-16ogc1145n] {
    padding: 8px 0 24px 0;
}

/* Reconcile progress pill — sits above the table while the audit-resolve
   pipeline runs. Uses the same indigo style as IngredientsVerification's autosave label so the
   visual language matches between the two pages. */
.audit-reconcile-pill-wrap[b-16ogc1145n] {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 8px 0;
}

.audit-brand-cell[b-16ogc1145n] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}

.audit-mapped-stack[b-16ogc1145n] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    width: 100%;
    overflow: hidden;
}

.audit-mapped-strike[b-16ogc1145n] {
    text-decoration: line-through;
    color: var(--text-subtle);
}

.audit-mapped-arrow[b-16ogc1145n] {
    font-size: 12px;
    font-weight: 600;
    color: var(--sec-green-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.audit-mapped-kept[b-16ogc1145n] {
    font-size: 10px;
    font-weight: 600;
    color: var(--sec-green-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Indigo NEW pill next to the arrow on CreateNewCanon resolutions — the canon
   the auditor remapped to was created by that resolve (wireframe 3). */
.audit-newcanon-pill[b-16ogc1145n] {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--primary);
    color: #FFFFFF;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    vertical-align: middle;
}
/* SLA age badge on the FLAGGED column, applied by FlaggedSlaClasses only while the row is still
   actually Open (resolved / withdrawn / brand-superseded rows never tint). Amber at 36h
   (approaching the 48h review SLA), red at 48h (past it). It's a content-sized rounded badge
   (not a full-cell fill), so it reads as a chip with breathing room, like the tier chips, and
   stays visible over the row hover / selected / bulk-selected backgrounds. */
.audit-flagged-sla[b-16ogc1145n] { display: flex; flex-direction: column; gap: 2px; min-width: 0; max-width: 100%; }
.audit-flagged-sla.audit-flagged-warn[b-16ogc1145n],
.audit-flagged-sla.audit-flagged-breach[b-16ogc1145n] { padding: 4px 9px; border-radius: 8px; width: fit-content; }
.audit-flagged-sla.audit-flagged-warn[b-16ogc1145n] { background: var(--ter-amber-10); }
.audit-flagged-sla.audit-flagged-warn .audit-flagged-when[b-16ogc1145n] { color: var(--ter-amber-text); }
.audit-flagged-sla.audit-flagged-breach[b-16ogc1145n] { background: var(--sec-red-10); }
.audit-flagged-sla.audit-flagged-breach .audit-flagged-when[b-16ogc1145n] { color: var(--sec-red-text); font-weight: 700; }
/* The actions cell: escalation / superseded context stacked above one no-wrap row of buttons. */
.audit-actions-cell[b-16ogc1145n] { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 4px; }
/* Action buttons: single no-wrap row so Flag-for-Tier-2 + Resolve + Explain never break to a
   second line. */
.audit-actions-btns[b-16ogc1145n] { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 6px; }
/* Keep each action label on one line so a three-button cell (Flag for Tier 2 + Kick back +
   Resolve) never wraps "Flag for Tier 2" onto multiple lines and squishes the pills. */
.audit-actions-btns[b-16ogc1145n] >  button { white-space: nowrap; flex: 0 0 auto; }

/* The notes line under each row (the design's .adm-trow-notes): the brand's notes, or the
   resolution once resolved. */
.audit-notes-label[b-16ogc1145n] {
    font-weight: 600;
    color: var(--text-muted);
    margin-right: 6px;
}
.audit-brand-name[b-16ogc1145n] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.2;
}

.audit-food-name[b-16ogc1145n] {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    display: block;
}

.audit-food-name-link[b-16ogc1145n] {
    color: var(--primary-ink);
    text-decoration: none;
    cursor: pointer;
}

.audit-food-name-link:hover[b-16ogc1145n],
.audit-food-name-link:focus[b-16ogc1145n] {
    color: var(--text);
    text-decoration: underline;
}

.audit-cell-text-primary[b-16ogc1145n] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.audit-cell-text-secondary[b-16ogc1145n] {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.audit-cell-unmatched[b-16ogc1145n] {
    font-size: 12px;
    font-style: italic;
    color: var(--text-subtle);
}

.audit-cell-notes-text[b-16ogc1145n] {
    font-size: 12px;
    font-weight: 400;
    color: var(--text);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.audit-flagged-when[b-16ogc1145n] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
}

.audit-flagged-who[b-16ogc1145n] {
    font-size: 10px;
    font-weight: 400;
    color: var(--text-muted);
}







/* ── Internal-supersession marker ── shown above the Resolve button when an
   internal auditor re-analyzed the food after the audit was filed. Two-line
   stack: chip on top, "FirstName L. re-analyzed" subtext below. */

/* Single horizontal line (chip + byline) so it fits the fixed 64px row height. */
.audit-superseded-stack[b-16ogc1145n] {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    min-width: 0;
}



.audit-superseded-byline[b-16ogc1145n] {
    font-size: 10.5px;
    color: var(--ter-violet);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Per-row tier chip: Tier 1 = Canon Auditor (blue), Tier 2 = Canon Creator (amber). */
.audit-tier-chip[b-16ogc1145n] {
    display: inline-block;
    align-self: flex-start;
    margin-bottom: 3px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.6;
}
.audit-tier-chip-1[b-16ogc1145n] { background: var(--primary-soft); color: var(--primary-ink); }
.audit-tier-chip-2[b-16ogc1145n] { background: var(--ter-amber-10); color: var(--ter-amber-text); }

/* Escalation context stack on escalated rows (mirrors .audit-superseded-stack). */
/* Single horizontal line (chip + who/when) that fits the fixed 64px row height. */
.audit-escalated-line[b-16ogc1145n] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    min-width: 0;
}
.audit-escalated-meta[b-16ogc1145n] {
    font-size: 10.5px;
    color: var(--ter-amber-text);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* ── Empty / loading / error ── */

.audit-empty[b-16ogc1145n] {
    padding: 48px 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

.audit-error[b-16ogc1145n] {
    padding: 24px;
    color: var(--sec-red-text);
    font-size: 13px;
}

/* Row-open error banner — dismissible, sits between the reconcile pill and
   the table card. Distinct from .audit-error (which is queue-load-fatal). */
.audit-row-open-error[b-16ogc1145n] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px 0;
    padding: 10px 12px;
    background: var(--sec-red-10);
    border: 1px solid var(--sec-red);
    border-radius: 8px;
    color: var(--sec-red-text);
    font-size: 13px;
}

.audit-row-open-error-icon[b-16ogc1145n] {
    font-size: 18px;
    color: var(--sec-red-text);
    flex-shrink: 0;
}

.audit-row-open-error-text[b-16ogc1145n] {
    flex: 1;
    line-height: 1.4;
}

/* The queue is a WciDataTable (INTEL-396): its grid, header, hover, stacked-card collapse, spinner
   and pager foot are the table's own. What stays here is the queue's row states and its cell content. */

@media (max-width: 768px) {
    .audit-table-wrap[b-16ogc1145n] {
        padding-top: 4px;
    }

    .audit-bulk-bar[b-16ogc1145n] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .audit-bulk-actions[b-16ogc1145n] {
        justify-content: flex-start;
    }

}

/* A stacked card (the table's own collapse, which also fires below its column floor): the action
   cell spans the card, so the buttons wrap rather than overflow, and the clipped lines show whole. */
@container adm (max-width: 720px) {
    .audit-actions-btns[b-16ogc1145n] {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .audit-brand-name[b-16ogc1145n],
    .audit-food-name[b-16ogc1145n],
    .audit-cell-text-primary[b-16ogc1145n],
    .audit-cell-text-secondary[b-16ogc1145n],
    .audit-mapped-arrow[b-16ogc1145n],
    .audit-mapped-kept[b-16ogc1145n],
    .audit-superseded-byline[b-16ogc1145n],
    .audit-escalated-meta[b-16ogc1145n] {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        overflow-wrap: anywhere;
    }
}

/* ── Queue-flow strip (7-day rolling inflow/outflow), above the filters ── */
.audit-flow-wrap[b-16ogc1145n] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
    font-family: var(--font-family-primary);
}

.audit-flow-label[b-16ogc1145n] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.audit-flow-label-icon.material-icons[b-16ogc1145n] {
    font-size: 16px;
    color: var(--text-subtle);
}

.audit-flow-label-text[b-16ogc1145n] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--text-subtle);
}

.audit-flow-cards[b-16ogc1145n] {
    display: flex;
    gap: 16px;
}

.audit-flow-card[b-16ogc1145n] {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    background: var(--surface);
    border-radius: 8px;
    border-left: 4px solid var(--text-subtle);
    box-shadow: 0 1px 3px rgba(26, 16, 44, 0.06);
}

.audit-flow-card-head[b-16ogc1145n] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.audit-flow-card-icon.material-icons[b-16ogc1145n] {
    font-size: 16px;
}

.audit-flow-card-label[b-16ogc1145n] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.audit-flow-card-value[b-16ogc1145n] {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
}

.audit-flow-card-sub[b-16ogc1145n] {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Accent per card: left border + icon + value color. */
.audit-flow-submitted[b-16ogc1145n] { border-left-color: var(--primary); }
.audit-flow-submitted .audit-flow-card-icon.material-icons[b-16ogc1145n],
.audit-flow-submitted .audit-flow-card-value[b-16ogc1145n] { color: var(--primary-ink); }

.audit-flow-resolved[b-16ogc1145n] { border-left-color: var(--sec-green-text); }
.audit-flow-resolved .audit-flow-card-icon.material-icons[b-16ogc1145n],
.audit-flow-resolved .audit-flow-card-value[b-16ogc1145n] { color: var(--sec-green-text); }

.audit-flow-net-pos[b-16ogc1145n] { border-left-color: var(--ter-amber); }
.audit-flow-net-pos .audit-flow-card-icon.material-icons[b-16ogc1145n],
.audit-flow-net-pos .audit-flow-card-value[b-16ogc1145n] { color: var(--ter-amber); }

.audit-flow-net-neg[b-16ogc1145n] { border-left-color: var(--sec-green-text); }
.audit-flow-net-neg .audit-flow-card-icon.material-icons[b-16ogc1145n],
.audit-flow-net-neg .audit-flow-card-value[b-16ogc1145n] { color: var(--sec-green-text); }

.audit-flow-net-flat[b-16ogc1145n] { border-left-color: var(--text-subtle); }
.audit-flow-net-flat .audit-flow-card-icon.material-icons[b-16ogc1145n],
.audit-flow-net-flat .audit-flow-card-value[b-16ogc1145n] { color: var(--text-subtle); }

@media (max-width: 900px) {
    .audit-flow-cards[b-16ogc1145n] {
        flex-direction: column;
    }
}
/* /Components/Pages/CodeBrowserPage.razor.rz.scp.css */
/* The Code and Version pickers: their label with its add and edit buttons, and the dropdown under it. */
.picker-head[b-2b407sgypn] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.code-steps-compact[b-2b407sgypn]  .picker-full {
    display: block;
    width: 100%;
}

/* A version in the Version picker's list: its name, then its description cut to one line. */
.version-option[b-2b407sgypn] {
    display: flex;
    gap: 6px;
    min-width: 0;
}

.version-option-name[b-2b407sgypn] {
    white-space: nowrap;
}

.version-option-description[b-2b407sgypn] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--rz-text-secondary-color);
}

/* Why a tab's results or texts may be out of date. */
.tab-warning[b-2b407sgypn] {
    color: var(--wise-red-text);
}

.tab-warning-padded[b-2b407sgypn] {
    padding: 10px 14px;
}

.tab-warning-small[b-2b407sgypn] {
    font-size: 0.85rem;
}
/* /Components/Pages/DataProcessingAddendum.razor.rz.scp.css */
/* "INTELLIGENCE™" tagline under the wordmark — mirrors the sidebar brand lockup. */
.legal-tagline[b-7fhd3zm5sz] {
    font-size: 8px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-oyster-600);
    line-height: 1;
    margin-top: 4px;
    white-space: nowrap;
}

.legal-tagline .legal-tagline-tm[b-7fhd3zm5sz] {
    font-size: 0.65em;
    letter-spacing: 0;
    vertical-align: super;
    margin-left: 1px;
}

.legal-list[b-7fhd3zm5sz] {
    margin-left: 1.5rem;
}

.legal-list > li + li[b-7fhd3zm5sz] {
    margin-top: 0.5rem;
}

.legal-list-bullet[b-7fhd3zm5sz] {
    list-style: disc;
}

.legal-list-alpha[b-7fhd3zm5sz] {
    list-style: lower-alpha;
}

.legal-link[b-7fhd3zm5sz] {
    color: var(--color-indigo-500);
    font-weight: 600;
    text-decoration: underline;
}

.legal-link:hover[b-7fhd3zm5sz] {
    color: var(--color-indigo-600);
}
/* /Components/Pages/Error.razor.rz.scp.css */
.error-page[b-x41sexjml5] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 2rem 1.5rem;
}

.error-card[b-x41sexjml5] {
    max-width: 32rem;
    width: 100%;
    text-align: center;
    background: #ffffff;
    border: 1px solid #e7e2d9; /* oyster-200 */
    border-radius: 1rem;
    padding: 2.5rem 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.error-icon[b-x41sexjml5] {
    font-size: 3rem;
    color: #d97706; /* amber-600 */
    margin-bottom: 0.75rem;
}

.error-title[b-x41sexjml5] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1c1917; /* oyster-900 */
    margin: 0 0 0.75rem;
}

.error-message[b-x41sexjml5] {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #57534e; /* oyster-600 */
    margin: 0 auto 1.5rem;
    max-width: 28rem;
}

.error-actions[b-x41sexjml5] {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}


.error-reference[b-x41sexjml5] {
    margin: 1.5rem 0 0;
    font-size: 0.8rem;
    color: #a8a29e; /* oyster-400 */
}

.error-reference code[b-x41sexjml5] {
    font-size: 0.78rem;
    color: #78716c; /* oyster-500 */
    word-break: break-all;
}
/* /Components/Pages/Forager.razor.rz.scp.css */
/* Run history cells: a bold lead line with muted lines stacked under it. */
.forager-brand[b-3aq977hqwu] { display: block; font-weight: 600; color: var(--text); }
.forager-sub[b-3aq977hqwu] { display: block; font-size: 12px; color: var(--text-muted); }
.forager-detail[b-3aq977hqwu] { display: block; font-size: 12px; }
.forager-nowrap[b-3aq977hqwu] { white-space: nowrap; }
/* /Components/Pages/GrasVerification.razor.rz.scp.css */
/* GRAS Verification (INTEL-538). The table is WciDataTable; this sheet holds only the page head and the
   Portfolio impact cell. */

.gv-head[b-fqfsynwwst] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.gv-title[b-fqfsynwwst] {
    margin: 0 0 0.25rem;
    font-family: var(--font-serif);
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--text);
}

.gv-sub[b-fqfsynwwst] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* Portfolio impact: the count over its denominator line, never one without the other. The cells are
   drawn inside WciDataTable, so they are reached from .gv-board through ::deep. */
.gv-board[b-fqfsynwwst]  .gv-impact {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.2;
}

/* The count-up: --gv-to is the row's count, written at render time; --gv-n animates from 0 to it and
   is shown through a counter, so the number counts up without script. */
@property --gv-n {
    syntax: "<integer>";
    initial-value: 0;
    inherits: false;
}

.gv-board[b-fqfsynwwst]  .gv-num {
    --gv-n: var(--gv-to);
    counter-reset: gv-n var(--gv-n);
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    animation: gv-count-b-fqfsynwwst 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.gv-board[b-fqfsynwwst]  .gv-num::after {
    content: counter(gv-n);
}

.gv-board[b-fqfsynwwst]  .gv-impact-sub {
    font-size: 0.75rem;
    color: var(--text-muted);
}

@keyframes gv-count-b-fqfsynwwst {
    from { --gv-n: 0; }
    to { --gv-n: var(--gv-to); }
}

@media (prefers-reduced-motion: reduce) {
    .gv-board[b-fqfsynwwst]  .gv-num { animation: none; }
}
/* /Components/Pages/Gs1LicenseReview.razor.rz.scp.css */
.monospace[b-qa2c4q11g9] {
    font-family: ui-monospace, monospace;
}
/* /Components/Pages/IsFoodUpf.razor.rz.scp.css */
/*
 * Non-UPF assessment widget.
 * Built one-to-one from the Figma "Non-UPF Verification" contact-form section
 * (node 53486:858). Values below are the design tokens from that file:
 *   Surface/surface-2      #FBF6ED     General/radius-lg      16px
 *   Ink/ink-1              #1A2339     Ink/ink-2              rgba(26,35,57,.64)
 *   Input/input-fill       #FFFDF9     Input/input-border     #DFDBD3
 *   Input/input-placeholder rgba(26,35,57,.32)
 *   Input/input-height     56px        Input/input-radius     8px
 *   Gap 02/04/06/07/08     8/16/24/32/48px
 *   Button/button-lg-height 56px       Button/button-rect-radius 16px
 *   Button secondary fill  rgba(26,35,57,.08)
 */

/* ── Page + card ── */
.ftt-page[b-gv37puy7l3] {
    width: 100%;
    max-width: 680px;   /* Grid/Columns/6 Columns */
    margin: 0 auto;
    box-sizing: border-box;
}

.ftt-card[b-gv37puy7l3] {
    display: flex;
    flex-direction: column;
    gap: 48px;          /* Gap/gap-08 */
    padding: 48px;      /* Gap/gap-08 */
    background: #FBF6ED;
    border-radius: 16px;
    box-sizing: border-box;
}

/* ── Card header ── */
.ftt-header[b-gv37puy7l3] {
    display: flex;
    flex-direction: column;
    gap: 16px;          /* Gap/gap-04 */
    max-width: 486px;
}

.ftt-title[b-gv37puy7l3] {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 40px;
    font-weight: 500;
    line-height: 44px;      /* Heading/H3/h3-line-height */
    letter-spacing: -1px;   /* Heading/H3/h3-letter-spacing */
    color: #1A2339;
    margin: 0;
    font-variation-settings: 'opsz' 14;
}

.ftt-subtitle[b-gv37puy7l3] {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 16px;    /* Text/Medium */
    font-weight: 400;
    line-height: 24px;
    color: rgba(26, 35, 57, 0.64);
    margin: 0;
    font-variation-settings: 'opsz' 9;
}

/* ── Form block ── */
.ftt-form[b-gv37puy7l3] {
    display: flex;
    flex-direction: column;
    gap: 32px;          /* Gap/gap-07 */
}

.ftt-body[b-gv37puy7l3] {
    display: flex;
    flex-direction: column;
}

.step-panel[b-gv37puy7l3] {
    display: flex;
    flex-direction: column;
    gap: 24px;          /* Gap/gap-06 */
    animation: stepFadeIn-b-gv37puy7l3 0.28s ease-out;
}

@keyframes stepFadeIn-b-gv37puy7l3 {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* ── Field ── */
.ftt-field[b-gv37puy7l3] {
    display: flex;
    flex-direction: column;
    gap: 8px;           /* Gap/gap-02 */
}

/* Uppercase mono label — Utility/Label */
.ftt-label[b-gv37puy7l3] {
    display: block;
    font-family: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 1.25px;
    text-transform: uppercase;
    color: rgba(26, 35, 57, 0.64);
}

/* ── Inputs ── */
.ftt-input[b-gv37puy7l3],
.ftt-textarea[b-gv37puy7l3],
.ftt-dropdown-wrapper[b-gv37puy7l3] {
    width: 100%;
    box-sizing: border-box;
    background: #FFFDF9;
    border: 1px solid #DFDBD3;
    border-radius: 8px;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #1A2339;
    outline: none;
    font-variation-settings: 'opsz' 9;
    transition: border-color 0.15s ease;
}

.ftt-input[b-gv37puy7l3] {
    height: 56px;       /* Input/input-height */
    padding: 0 16px;    /* Gap/gap-04 */
}

.ftt-textarea[b-gv37puy7l3] {
    /* Figma sizes the ingredient field block at 388px: label 16 + gap 8 + field 364 */
    height: 364px;
    min-height: 56px;
    padding: 16px;
    resize: vertical;
}

.ftt-input[b-gv37puy7l3]::placeholder,
.ftt-textarea[b-gv37puy7l3]::placeholder {
    color: rgba(26, 35, 57, 0.32);
}

.ftt-input:focus[b-gv37puy7l3],
.ftt-textarea:focus[b-gv37puy7l3] {
    border-color: #1A2339;
}

/* Hide the native number spinners so the fields match the design */
.ftt-input[type="number"][b-gv37puy7l3] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.ftt-input[type="number"][b-gv37puy7l3]::-webkit-outer-spin-button,
.ftt-input[type="number"][b-gv37puy7l3]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ── Category dropdown (custom, supports icons) ── */
.ftt-dropdown-wrapper[b-gv37puy7l3] {
    position: relative;
    height: 56px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.ftt-dropdown-wrapper:hover[b-gv37puy7l3] {
    border-color: #C9C3B8;
}

.ftt-dropdown-wrapper:focus[b-gv37puy7l3],
.ftt-dropdown-wrapper:focus-visible[b-gv37puy7l3] {
    border-color: #1A2339;
}

.ftt-dropdown-display[b-gv37puy7l3] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}

.ftt-dropdown-placeholder[b-gv37puy7l3] {
    color: rgba(26, 35, 57, 0.32);
}

.ftt-dropdown-icon[b-gv37puy7l3] {
    font-size: 20px;    /* icon-md */
    color: rgba(26, 35, 57, 0.48);
    flex-shrink: 0;
}

.ftt-dropdown-chevron[b-gv37puy7l3] {
    font-size: 20px;
    color: #1A2339;
    flex-shrink: 0;
    pointer-events: none;
}

.ftt-dropdown-backdrop[b-gv37puy7l3] {
    position: fixed;
    inset: 0;
    z-index: 59;
}

.ftt-dropdown-menu[b-gv37puy7l3] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #FFFDF9;
    border: 1px solid #DFDBD3;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(26, 35, 57, 0.12);
    z-index: 60;
    max-height: 280px;
    overflow-y: auto;
    padding: 8px;
    animation: stepFadeIn-b-gv37puy7l3 0.15s ease-out;
}

.ftt-dropdown-option[b-gv37puy7l3] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    font-size: 16px;
    line-height: 24px;
    color: #1A2339;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.ftt-dropdown-option:hover[b-gv37puy7l3],
.ftt-dropdown-option.highlighted[b-gv37puy7l3] {
    background-color: rgba(26, 35, 57, 0.06);
}

.ftt-dropdown-option.selected[b-gv37puy7l3] {
    background-color: rgba(26, 35, 57, 0.1);
    font-weight: 500;
}

/* ── Actions ── */
.ftt-actions[b-gv37puy7l3] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}


/* ── Error banner ── */
.ftt-err-banner[b-gv37puy7l3] {
    padding: 12px 16px;
    background: #FFE1DC;
    border: 1px solid #DC3038;
    border-radius: 8px;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #831F23;
}

/* ── Loading / processing state ── */
.ftt-loading[b-gv37puy7l3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 56px 0;
    gap: 16px;
}

.ftt-loading p[b-gv37puy7l3] {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: rgba(26, 35, 57, 0.64);
    margin: 0;
}

.ftt-spin[b-gv37puy7l3] {
    font-size: 44px;
    color: #1A2339;
    animation: fttSpin-b-gv37puy7l3 0.9s linear infinite;
    display: inline-block;
}

@keyframes fttSpin-b-gv37puy7l3 {
    to { transform: rotate(360deg); }
}

/* ── Service error state ── */
.ftt-service-error[b-gv37puy7l3] {
    text-align: center;
    padding: 32px 0;
}

.ftt-service-error .material-icons[b-gv37puy7l3] {
    font-size: 56px;
    color: rgba(26, 35, 57, 0.32);
    display: block;
    margin-bottom: 16px;
}

.ftt-service-error h2[b-gv37puy7l3] {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 20px;
    font-weight: 500;
    color: #1A2339;
    margin: 0 0 8px;
}

.ftt-service-error p[b-gv37puy7l3] {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: rgba(26, 35, 57, 0.64);
    margin: 0 0 24px;
}

/* ── Result badges ── */
.ftt-result-badge[b-gv37puy7l3] {
    border-radius: 8px;
    padding: 20px 24px;
    font-family: 'DM Sans', system-ui, sans-serif;
}

.ftt-result-badge-title[b-gv37puy7l3] {
    font-size: 18px;
    line-height: 28px;
    font-weight: 500;
    margin: 0 0 4px;
}

.ftt-result-badge-desc[b-gv37puy7l3] {
    font-size: 16px;
    line-height: 24px;
    margin: 0;
}

/* green-100 bg / green-200 border / green-300 (Iron Wood) text */
.ftt-result-green[b-gv37puy7l3] {
    border: 1px solid #83A992;
    background: #E2F3E9;
}
.ftt-result-green .ftt-result-badge-title[b-gv37puy7l3],
.ftt-result-green .ftt-result-badge-desc[b-gv37puy7l3] { color: #245E3B; }

/* poor-100 bg / poor-200 border / poor-300 text */
.ftt-result-red[b-gv37puy7l3] {
    border: 1px solid #DC3038;
    background: #FFE1DC;
}
.ftt-result-red .ftt-result-badge-title[b-gv37puy7l3],
.ftt-result-red .ftt-result-badge-desc[b-gv37puy7l3] { color: #831F23; }

.ftt-result-amber[b-gv37puy7l3] {
    border: 1px solid #C9962B;
    background: #FBF1DC;
}
.ftt-result-amber .ftt-result-badge-title[b-gv37puy7l3],
.ftt-result-amber .ftt-result-badge-desc[b-gv37puy7l3] { color: #946005; }

.ftt-result-body[b-gv37puy7l3] {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: rgba(26, 35, 57, 0.64);
    margin: 0;
}

/* ── Mobile responsive ── */
@media (max-width: 720px) {
    .ftt-card[b-gv37puy7l3] {
        gap: 32px;
        padding: 24px;
        border-radius: 12px;
    }

    .ftt-title[b-gv37puy7l3] {
        font-size: 30px;
        line-height: 36px;
    }

    .ftt-textarea[b-gv37puy7l3] {
        height: 200px;
    }

    .ftt-actions[b-gv37puy7l3] {
        gap: 12px;
    }

    /* The CTA pill (WciButton) stretches across the row on narrow screens. */
    .ftt-actions[b-gv37puy7l3]  .wise-btn {
        flex: 1 1 auto;
    }
}
/* /Components/Pages/MyFoods.razor.rz.scp.css */
/* ── The products table (Table Types, INTEL-522 to INTEL-524) ─────────────────────────────── */

/* Claimed's State chip when it is a link into the verify / pay flow: the chip and its arrow. */
.my-foods-grid[b-zvgdztcuab]  .my-foods-state-link {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    text-decoration: none;
}

.my-foods-grid[b-zvgdztcuab]  .my-foods-state-arrow {
    font-size: 16px;
    color: var(--primary-ink);
    transition: transform 0.15s ease;
}

.my-foods-grid[b-zvgdztcuab]  .my-foods-state-link:hover .my-foods-state-arrow {
    transform: translate(1px, -1px);
}

/* The internal-staff override on a Discovered row's locked reports keeps the amber it always had. */
.my-foods-grid[b-zvgdztcuab]  .my-foods-reports--override .adm-rowmenu-btn {
    color: var(--ter-amber-text);
}

.my-foods-grid[b-zvgdztcuab]  .my-foods-pack-formats:empty {
    display: none;
}

/* The specimens' card reading. The checkbox and the Reports icon ride the identity's line, flush right,
   with the ⋮ hard against the edge (the table pins the ⋮ there already); the identity gives up the room
   they take. The lane's link action (Review & Claim, Finish Data) trails the card's foot on the right. */
@container adm (max-width: 720px) {
    .my-foods-grid[b-zvgdztcuab]  .adm-trow > .my-foods-td-reports {
        right: 46px;
    }

    .my-foods-grid[b-zvgdztcuab]  .adm-trow > .my-foods-td-check {
        position: absolute;
        top: 10px;
        right: 46px;
        flex: 0 0 auto;
        width: auto;
        height: 30px;
        padding: 0;
        display: flex;
        align-items: center;
    }

    .my-foods-grid[b-zvgdztcuab]  .adm-trow:has(> .my-foods-td-reports) > .my-foods-td-check {
        right: 82px;
    }

    .my-foods-grid[b-zvgdztcuab]  .adm-trow:has(> .my-foods-td-check) > .adm-td:has(.attb-thumb),
    .my-foods-grid[b-zvgdztcuab]  .adm-trow:has(> .my-foods-td-reports) > .adm-td:has(.attb-thumb) {
        padding-right: 74px;
    }

    .my-foods-grid[b-zvgdztcuab]  .adm-trow:has(> .my-foods-td-check):has(> .my-foods-td-reports) > .adm-td:has(.attb-thumb) {
        padding-right: 110px;
    }

    .my-foods-grid[b-zvgdztcuab]  .adm-trow > .my-foods-td-cta {
        order: 90;
        display: flex;
        justify-content: flex-end;
    }
}

/* Internal-staff Removed lane. Deliberately off-palette from the three indigo customer tabs: amber,
   a dashed outline and a small "internal" flag, so nobody mistakes it for something the brand sees.
   The dashes carry the message on their own if the colours wash out (projector, print, colour vision
   deficiency), which is why the treatment is not colour alone. */
.my-foods-lane-internal[b-zvgdztcuab] {
    border: 1px dashed #d97706;
    background-color: #fffbeb;
    color: #92400e;
}

.my-foods-lane-internal:hover[b-zvgdztcuab] {
    background-color: #fef3c7;
}

.my-foods-lane-internal--active[b-zvgdztcuab] {
    border-style: solid;
    background-color: #d97706;
    color: #ffffff;
}

/* The word "internal" on the tab itself. Small and uppercase so it reads as a label on the control
   rather than part of the tab's name. */
.my-foods-internal-flag[b-zvgdztcuab] {
    border-radius: 9999px;
    background-color: rgba(146, 64, 14, 0.12);
    padding: 0.0625rem 0.375rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.2;
}

.my-foods-lane-internal--active .my-foods-internal-flag[b-zvgdztcuab] {
    background-color: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

/* The banner above the Removed rows, in the same amber family as the tab so the tab and the view it
   opens read as one internal-only surface. */
.my-foods-internal-banner[b-zvgdztcuab] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    border: 1px dashed #d97706;
    border-radius: 0.75rem;
    background-color: #fffbeb;
    padding: 0.875rem 1rem;
    color: #92400e;
}
/* /Components/Pages/PrintChatReport.razor.rz.scp.css */
/* The printed report (INTEL-681). Paper is always white; the design tokens carry ink and lines. */
.rp[b-q1muy7vsud] {
    max-width: 8.7in;
    margin: 0 auto;
    padding: 28px 24px;
    background: var(--surface);
    color: var(--text);
}

.rp-head[b-q1muy7vsud] {
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.rp-title[b-q1muy7vsud] {
    margin: 0 0 4px;
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 700;
}

.rp-sub[b-q1muy7vsud] {
    font-size: 11px;
    color: var(--text-muted);
}

.rp-item[b-q1muy7vsud] {
    margin: 0 0 28px;
}

.rp-item-title[b-q1muy7vsud] {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 600;
    break-after: avoid;
    page-break-after: avoid;
}

.rp-note[b-q1muy7vsud] {
    margin: 0 0 10px;
    font-size: 12.5px;
    color: var(--text-muted);
    white-space: pre-wrap;
    break-after: avoid;
}

.rp-missing[b-q1muy7vsud] {
    font-size: 12.5px;
    color: var(--text-subtle);
}

/* Sized to the composed report's full content by the page script; Chromium pages a tall frame across sheets.
   The first height only guards the moment before it is measured. */
.rp-frame[b-q1muy7vsud] {
    display: block;
    width: 100%;
    height: 1100px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface);
    overflow: hidden;
}

.rp-dashboard[b-q1muy7vsud] {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
}

@media print {
    @page {
        size: letter portrait;
        margin: 0.4in;
    }

    .rp[b-q1muy7vsud] {
        padding: 0;
        max-width: 100%;
    }

    .rp *[b-q1muy7vsud] {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}
/* /Components/Pages/Reports/GeneratedReport.razor.rz.scp.css */
/* The generated report's read view (INTEL-423 / INTEL-425). Ported from the ip-b2b design repo,
   revision afe74ad: pages/wise.css 12037-12044 (.dash-eyebrow), 15814-15820 and 15922-15925
   (.dash-report-summary in the serif face), 15928-15940 (.dash-report-view-body); pages/reports.html
   224 (.rp-gen-lede). The item block (.wci-gen-*) is app-owned: the design lists the outputs' names,
   the app draws each output with its title and note, in the Report builder's item type. */

.dash-eyebrow[b-n4uvy63ce3] {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.dash-report-summary[b-n4uvy63ce3] {
  margin: 0;
  font-family: 'WISE Digits', var(--module-title-family, 'DM Sans', system-ui, sans-serif);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text);
}
.dash-report-view-body[b-n4uvy63ce3] {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface);
}
html.dark .dash-report-view-body[b-n4uvy63ce3] {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.08);
}
.rp-gen-lede[b-n4uvy63ce3] { margin: 0; font-size: 0.875rem; line-height: 1.55; color: var(--text-muted); }

/* ---- APP-OWNED: one output of the report ---- */
.wci-gen-item[b-n4uvy63ce3] { min-width: 0; padding-top: 18px; border-top: 1px solid var(--border); }
.wci-gen-item-title[b-n4uvy63ce3] {
  margin: 0 0 10px;
  font-family: 'WISE Digits', 'DM Sans', system-ui, sans-serif;
  font-weight: 800; font-size: 1.05rem; line-height: 1.2; letter-spacing: -.01em;
  color: var(--text);
}
.wci-gen-item-note[b-n4uvy63ce3] {
  margin: 12px 0 0;
  font-size: 0.875rem; line-height: 1.55; color: var(--text-muted);
  white-space: pre-line;
}
/* /Components/Pages/TermsOfService.razor.rz.scp.css */
/* "INTELLIGENCE™" tagline under the wordmark — mirrors the sidebar brand lockup. */
.legal-tagline[b-0mp9yl3x95] {
    font-size: 8px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-oyster-600);
    line-height: 1;
    margin-top: 4px;
    white-space: nowrap;
}

.legal-tagline .legal-tagline-tm[b-0mp9yl3x95] {
    font-size: 0.65em;
    letter-spacing: 0;
    vertical-align: super;
    margin-left: 1px;
}

.legal-heading[b-0mp9yl3x95] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-oyster-900);
    margin-top: 1.5rem;
}

.legal-list[b-0mp9yl3x95] {
    margin-left: 1.5rem;
}

.legal-list > li + li[b-0mp9yl3x95] {
    margin-top: 0.5rem;
}

.legal-list-bullet[b-0mp9yl3x95] {
    list-style: disc;
}

.legal-list-alpha[b-0mp9yl3x95] {
    list-style: lower-alpha;
}

.legal-link[b-0mp9yl3x95] {
    color: var(--color-indigo-500);
    font-weight: 600;
    text-decoration: underline;
}

.legal-link:hover[b-0mp9yl3x95] {
    color: var(--color-indigo-600);
}
/* /Components/Pages/V2AddProduct.razor.rz.scp.css */
/* The page gives the chat's module row the viewport below the app bar, as the WISEcode AI page does
   (WISEaiAgent's WciModuleRow h-[calc(100vh-6rem)]). */
.v2-add-product[b-49v9z41ohi] { height: calc(100vh - 6rem); min-height: 0; display: flex; flex-direction: column; }

/* The way out for members without the chat (D50): the chat's "← Product Portfolio", above the panel. */
.v2-product-back[b-49v9z41ohi] { padding: 4px 4px 10px; font-size: 13px; }
/* /Components/Pages/V2Products.razor.rz.scp.css */
/* The v2 Product Portfolio's own pieces of ip-b2b pages/product-portfolio.html (revision 11b1d8a, 2026-09-30), class names
   kept: the header action cluster (.pf-head-actions, 6186), the Add trigger (.pf-add-btn and its caret, 6125-6137 and
   6141-6143; the menu it opens is WciMenuPopover), and the table row's cells (6875-7045: .pf-pname, .pf-upc, .pf-sizes,
   .pf-col-brand, .pf-date, the round select check), as the approved D39 mockup arranges them. Colours are tokens, not the
   design's literals. */
/* The product count beside the organization on PageShell's label line (product-portfolio-2 #pf-head-total). */
.pf-head-total[b-2apr9prt9g] { white-space: nowrap; }

.pf-head-actions[b-2apr9prt9g] { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }
@media (max-width: 768px) {
  .pf-head-actions[b-2apr9prt9g] { flex-shrink: 1; min-width: 0; }
}

.pf-head-actions[b-2apr9prt9g]  .pf-add-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; box-sizing: border-box; padding: 0 14px;
  border-radius: 999px; border: none; cursor: pointer;
  background: var(--primary); color: #fff;
  font-family: inherit; font-size: 12px; font-weight: 700;
  transition: filter 0.2s ease;
}
.pf-head-actions[b-2apr9prt9g]  .pf-add-btn:hover { filter: brightness(1.08); }
.pf-head-actions[b-2apr9prt9g]  .pf-add-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); }
.pf-head-actions[b-2apr9prt9g]  .pf-add-btn .material-symbols-outlined {
  font-size: 16px !important;
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.pf-head-actions[b-2apr9prt9g]  .pf-add-caret { margin-left: 0; transition: transform 0.15s ease; }
.pf-head-actions[b-2apr9prt9g]  .pf-add-btn[aria-expanded="true"] .pf-add-caret { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .pf-head-actions[b-2apr9prt9g]  .pf-add-btn, .pf-head-actions[b-2apr9prt9g]  .pf-add-caret { transition: none; }
}

/* The What's missing chips in the Publishing card (D57): always present at one height, so picking a tile never moves the
   list. The row's label sits beside its chips, and the chips keep to one line, scrolling sideways with no bar where they
   would not fit, as the design's own chip rows do (wise.css .fl-model-row: nowrap, overflow-x auto, scrollbar-width none).
   Layout only: the chips are WciFilterChips, unchanged. The 3px inset keeps a chip's focus ring inside the scroller's clip. */
.pf-lower[b-2apr9prt9g] { display: flex; align-items: center; height: 36px; min-width: 0; margin: 10px 0 0; }
.pf-lower[b-2apr9prt9g]  .wmod-filter-group { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; }
.pf-lower[b-2apr9prt9g]  .wmod-filter-label { margin-bottom: 0; flex-shrink: 0; }
.pf-lower[b-2apr9prt9g]  .wmod-filter-chips {
  flex-wrap: nowrap; overflow-x: auto; min-width: 0; padding: 3px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.pf-lower[b-2apr9prt9g]  .wmod-filter-chips::-webkit-scrollbar { display: none; }
.pf-lower[b-2apr9prt9g]  .wmod-fchip { flex-shrink: 0; white-space: nowrap; }
.pf-lower-hint[b-2apr9prt9g] { margin: 0; font-size: 12px; color: var(--text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* "Is anything waiting on you?" (Design 6): one slim row, the question, the Show them chip and its breakdown, and the
   WISEcode chip at the far end. A fixed minimum height, so the row never moves the cards while its counts load. The
   surface and border are the dashboard card's (tokens). */
.pf-waiting[b-2apr9prt9g] {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; min-height: 64px; box-sizing: border-box;
  padding: 12px 18px; margin: 0 0 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border);
}
.pf-waiting-title[b-2apr9prt9g] { margin: 0; font-size: 16px; font-weight: 600; color: var(--text); }
.pf-waiting-parts[b-2apr9prt9g] { font-size: 13px; color: var(--text-muted); }
.pf-waiting[b-2apr9prt9g]  .pf-waiting-us { margin-left: auto; }
.pf-waiting[b-2apr9prt9g]  .wmod-filter-chips { padding: 0; }

/* The NON-UPF card's scope line ("Your 41 published products"), in the card's title row. */
.pf-verif-scope[b-2apr9prt9g] { font-size: 13px; color: var(--text-muted); white-space: nowrap; }

/* The toolbar's right side (D39): the bulk Remove while rows are ticked (no legend, D54). */
.pf-toolbar-trail[b-2apr9prt9g] { margin-left: auto; display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* The table's cells (product-portfolio.html 6931-7045, D39). The cells are drawn in the code-behind inside WciDataTable, so
   they are reached through ::deep. */
.v2-products-table[b-2apr9prt9g]  .pf-pcell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.v2-products-table[b-2apr9prt9g]  .pf-pcell-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.v2-products-table[b-2apr9prt9g]  .pf-pname-row { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.v2-products-table[b-2apr9prt9g]  .pf-pname {
  font-size: 12.5px; font-weight: 600; color: var(--text); line-height: 1.3; text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.v2-products-table[b-2apr9prt9g]  .pf-pname:hover { color: var(--primary); text-decoration: underline; }
.v2-products-table[b-2apr9prt9g]  .pf-upc { font-size: 11px; color: var(--text-subtle); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.v2-products-table[b-2apr9prt9g]  .pf-sizes { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 2px; }
.v2-products-table[b-2apr9prt9g]  .pf-size-link {
  font-size: 10.5px; font-weight: 700; color: var(--primary); text-decoration: none; letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.v2-products-table[b-2apr9prt9g]  .pf-size-link:hover { text-decoration: underline; }
.v2-products-table[b-2apr9prt9g]  .pf-size-sep { color: var(--text-subtle); font-size: 10px; opacity: 0.55; user-select: none; }

.v2-products-table[b-2apr9prt9g]  .pf-col-brand { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--text); font-weight: 600; }
.v2-products-table[b-2apr9prt9g]  .pf-brand-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A long brand name ("No Sugar Momma") ran into the Updated column: the grid cell keeps an automatic minimum width, so
   it may shrink below its content here and the name ellipsizes, with the full name as its tooltip. */
.v2-products-table[b-2apr9prt9g]  .adm-td.pf-td-brand { min-width: 0; overflow: hidden; }
.v2-products-table[b-2apr9prt9g]  .pf-col-brand { max-width: 100%; }
/* The Status pill never runs into the Updated column: the cell may shrink below its content and clips it. */
.v2-products-table[b-2apr9prt9g]  .adm-td.pf-td-status { min-width: 0; overflow: hidden; }
/* Same for the staff Data State chip, should a label ever outgrow its rem-sized track. */
.v2-products-table[b-2apr9prt9g]  .adm-td.pf-td-datastate { min-width: 0; overflow: hidden; }

.v2-products-table[b-2apr9prt9g]  .pf-dates { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.v2-products-table[b-2apr9prt9g]  .pf-date { display: flex; align-items: baseline; gap: 5px; line-height: 1.25; }
.v2-products-table[b-2apr9prt9g]  .pf-date-status { font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-subtle); }
.v2-products-table[b-2apr9prt9g]  .pf-date-val { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.v2-products-table[b-2apr9prt9g]  .pf-date--secondary { opacity: 0.65; }

/* The Steps mark (ip-b2b product-portfolio-2 7021-7040, .pf-todo-cell / .pf-todo-ico / .pf-todo-count): whose move it is,
   the organization's step count on its glyph, the WISEcode hourglass, or a quiet check; the menu it opens is
   WciMenuPopover. */
.v2-products-table[b-2apr9prt9g]  .pf-todo-cell {
  position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer;
}
.v2-products-table[b-2apr9prt9g]  .pf-todo-cell:hover .pf-todo-ico { filter: brightness(0.92); }
.v2-products-table[b-2apr9prt9g]  .pf-todo-cell:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--primary), 0 0 0 4px var(--primary-10); }
.v2-products-table[b-2apr9prt9g]  .pf-todo-ico { font-size: 21px; line-height: 1; }
.v2-products-table[b-2apr9prt9g]  .pf-todo-ico--you { color: var(--primary); }
.v2-products-table[b-2apr9prt9g]  .pf-todo-ico--us { color: var(--text-muted); }
.v2-products-table[b-2apr9prt9g]  .pf-todo-ico--done { color: var(--sec-green); }
.v2-products-table[b-2apr9prt9g]  .pf-todo-count {
  position: absolute; top: -2px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box;
  border-radius: 999px; background: var(--primary); color: #fff; font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
}
.v2-products-table[b-2apr9prt9g]  .adm-td.pf-td-todo { display: flex; align-items: center; justify-content: center; }

/* The round select check (product-portfolio.html .pf-col-check .vf-check) and the ticked row's fill (.pf-trow.is-selected). */
.v2-products-table[b-2apr9prt9g]  .pf-check {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--text-subtle); cursor: pointer;
}
.v2-products-table[b-2apr9prt9g]  .pf-check .material-symbols-outlined { font-size: 22px; line-height: 1; }
.v2-products-table[b-2apr9prt9g]  .pf-check:hover,
.v2-products-table[b-2apr9prt9g]  .pf-check.is-on { color: var(--primary); }
.v2-products-table[b-2apr9prt9g]  .pf-check.is-on .material-symbols-outlined { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.v2-products-table[b-2apr9prt9g]  .pf-check:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.v2-products-table[b-2apr9prt9g]  .adm-trow.is-selected { background: var(--primary-soft); }

/* The v2 Products list's staff-only provenance tint (WISE Intelligence v2): each row tinted by where the product came
   from (OrgProductOrigin), with a legend above the table. Rendered only for WISEcode staff. Tints mix the design tokens
   into the row; the table's own hover fill still shows over them. */
.v2-origin-legend .v2-origin-gold[b-2apr9prt9g], .v2-products-table[b-2apr9prt9g]  .v2-origin-gold { --v2-origin: var(--warm-300); }
.v2-origin-legend .v2-origin-merged[b-2apr9prt9g], .v2-products-table[b-2apr9prt9g]  .v2-origin-merged { --v2-origin: var(--sec-green); }
.v2-origin-legend .v2-origin-forager[b-2apr9prt9g], .v2-products-table[b-2apr9prt9g]  .v2-origin-forager { --v2-origin: var(--ter-amber); }
.v2-origin-legend .v2-origin-catalog[b-2apr9prt9g], .v2-products-table[b-2apr9prt9g]  .v2-origin-catalog { --v2-origin: var(--primary); }
/* Added with WISEcode AI is a purple mixed from the brand navy and red tokens, so it never reads as Forager's amber. */
.v2-origin-legend .v2-origin-ai[b-2apr9prt9g], .v2-products-table[b-2apr9prt9g]  .v2-origin-ai { --v2-origin: color-mix(in srgb, var(--primary) 45%, var(--sec-red)); }

.v2-products-table[b-2apr9prt9g]  .v2-origin-gold,
.v2-products-table[b-2apr9prt9g]  .v2-origin-merged,
.v2-products-table[b-2apr9prt9g]  .v2-origin-forager,
.v2-products-table[b-2apr9prt9g]  .v2-origin-catalog,
.v2-products-table[b-2apr9prt9g]  .v2-origin-ai {
  background: color-mix(in srgb, var(--v2-origin) 12%, transparent);
  box-shadow: inset 3px 0 0 var(--v2-origin);
}

.v2-origin-legend[b-2apr9prt9g] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 12px; font-size: 12px; color: var(--text-muted); }
.v2-origin-legend-title[b-2apr9prt9g] { font-weight: 600; }
.v2-origin-key[b-2apr9prt9g] { display: inline-flex; align-items: center; gap: 6px; }
.v2-origin-key[b-2apr9prt9g]::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--v2-origin) 25%, transparent);
  box-shadow: inset 3px 0 0 var(--v2-origin);
}
/* /Components/Pages/VerificationAttest.razor.rz.scp.css */
/* VerificationAttest: step 1 of the NON-UPF verification flow, on the ip-b2b design's Select Foods step
   (js/verification-flow.js selectStepHTML, pages/wise.css 16177-16184 .vf-board, 19585-19587 the
   portfolio product cell it reuses) with the design's Attest card folded in (the shared .vf-attest rules
   in wwwroot/css/verification-payment.css). Design tokens only (wwwroot/css/wci/wci-tokens.css). The
   frame and the progress rail are shared with the Payment step (.vf-flow, same sheet). */

.vf-step-intro[b-3vn9nrn70w] { margin-bottom: 16px; }

.vf-step-title[b-3vn9nrn70w] {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 6px;
}

.vf-step-desc[b-3vn9nrn70w] { margin: 0; font-size: 0.82rem; line-height: 1.55; color: var(--text-muted); }

/* Heading over the attested table (a return visit). */
.vf-section-head[b-3vn9nrn70w] { display: flex; align-items: center; gap: 8px; margin: 4px 2px 8px; }
.vf-section-head .material-symbols-outlined[b-3vn9nrn70w] { font-size: 20px; color: var(--primary); }
.vf-section-head h3[b-3vn9nrn70w] { margin: 0; font-size: 0.86rem; font-weight: 700; color: var(--text); }

/* The design's table card (wise.css 16177-16184). The table inside is Bare. */
.vf-board[b-3vn9nrn70w] {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-1);
    padding: 14px;
    overflow: visible;
}

/* Select-all / deselect-all prompt over the rows. */
.vf-banner[b-3vn9nrn70w] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: -14px -14px 12px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
    border-radius: var(--r-md) var(--r-md) 0 0;
    background: var(--primary-soft);
    font-size: 0.8rem;
    color: var(--text);
}

.vf-banner--warn[b-3vn9nrn70w] { background: var(--ter-amber-10); }

/* The row and header checkboxes (the design's .vf-check glyph buttons). */
.vf-select[b-3vn9nrn70w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--text-subtle);
    cursor: pointer;
    transition: color 0.15s ease;
}

.vf-select .material-symbols-outlined[b-3vn9nrn70w] { font-size: 24px; }
.vf-select:hover[b-3vn9nrn70w],
.vf-select.is-on[b-3vn9nrn70w] { color: var(--primary); }
.vf-select:disabled[b-3vn9nrn70w] { opacity: 0.5; cursor: not-allowed; }
.vf-select:focus-visible[b-3vn9nrn70w] { outline: 2px solid var(--primary); outline-offset: 2px; }

.vf-date[b-3vn9nrn70w] { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; }
.vf-date--none[b-3vn9nrn70w] { color: var(--text-subtle); }

/* The expanded row's required-data panel. */
.vf-detail[b-3vn9nrn70w] { padding: 16px 20px; border-radius: var(--r-sm); }
/* /Components/Pages/Waitlist.razor.rz.scp.css */
/* Waitlist page — layout, buttons, and keyframes only.
   Colors, fonts, radii and shadows all come from the global design tokens
   (wwwroot/css/tokens.css, loaded app-wide via App.razor). This page declares
   NO palette or type tokens of its own — it inherits the brand-blue primary,
   teal secondary, linen surfaces, and DM Sans faces like the
   rest of the app. */
.wl[b-h7t3yt39u6] {
    color: var(--color-oyster-900);
    background: var(--color-oyster-100);
}

/* Two product cards side by side; stack on narrow screens.
   align-items:stretch (the grid default) makes both cards take the height of
   the taller one so their bottom edges line up. */
.wl-products[b-h7t3yt39u6] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: stretch;
}
@media (max-width: 900px) {
    .wl-products[b-h7t3yt39u6] { grid-template-columns: 1fr; }
}

/* The "Join the waitlist" CTA now uses the canonical .wise-btn--primary
   (components.css) so it matches every other primary button in the app. */

/* "Leave the waitlist" text button. */

@keyframes wlRise-b-h7t3yt39u6 { 0% { transform: translateY(10px); } 100% { transform: translateY(0); } }
@keyframes wlPop-b-h7t3yt39u6  { 0% { transform: scale(.97); } 100% { transform: scale(1); } }
/* /Components/Pages/Welcome.razor.rz.scp.css */
/* The page without the navigation menu (MainLayout leaves it out here): the layout's padding, then a slim top row and the
   two modules filling the rest of the window. */
.welcome-page[b-8p69307kw8] { display: flex; flex-direction: column; gap: 0.75rem; height: calc(100vh - 4rem); min-height: 0; }
.welcome-top[b-8p69307kw8] { display: flex; align-items: center; justify-content: space-between; flex: none; }
.welcome-mark[b-8p69307kw8] { display: block; height: 2rem; width: auto; }

/* The chat module's column: the transcript scrolls, the pinned choices and the composer stay put. */
.welcome-chat[b-8p69307kw8] { display: flex; flex-direction: column; height: 100%; min-height: 0; }

/* The pane head's place in the tour (the design's "Step 1 of 3"). */
.welcome-step[b-8p69307kw8] { font-size: 13px; color: var(--text-muted); white-space: nowrap; }

/* The output pane scrolls its dashboard on its own. */
.welcome-pane[b-8p69307kw8] { height: 100%; min-height: 0; overflow-y: auto; }

/* The tour's lines scroll on their own, padded like the chat's transcript. */
.welcome-script-only[b-8p69307kw8] { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 24px 32px; }
/* The design's input rail has no rule above it (wise.css 10331); the chat module's wash runs under it (D48). */
.welcome-script-composer[b-8p69307kw8] { flex: none; padding: 12px 32px; }

/* The closed composer: hovering or focusing anywhere on it shows the tooltip (a disabled field swallows its own hover). */
.welcome-composer-closed[b-8p69307kw8] { cursor: not-allowed; }
.welcome-composer-closed[b-8p69307kw8]  textarea,
.welcome-composer-closed[b-8p69307kw8]  button { pointer-events: none; }
/* /Components/Pages/WISEaiReports.razor.rz.scp.css */
/* The left rail: the Library design's side panel (conversation-library.html, revision served 2026-10-19):
   .lib-fp 725-737 (the panel), .lib-fp-all with .lib-fp-toggle / .lib-fp-name / .lib-fp-count 739-783 (its
   "All items" and "Not in a folder" rows; the folder rows are FolderTreeNode's), .lib-fp-empty 804. The FOLDERS label and its add
   button are WciHistory's .wch-projects-head / .wch-proj-add (wise.css 276-282), as the Chat page draws them. */
.lib-fp[b-jsd8g5u13e] {
  flex: 0 0 248px; width: 248px; box-sizing: border-box;
  padding: 0 8px 12px 0;
}
.lib-fp-head[b-jsd8g5u13e] { display: flex; align-items: center; gap: 6px; padding: 4px 8px 4px 6px; }
.lib-fp-title[b-jsd8g5u13e] { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .5; flex: 1; }
.lib-fp-add[b-jsd8g5u13e] { width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: .7; }
.lib-fp-add:hover[b-jsd8g5u13e] { background: color-mix(in srgb, var(--text) 6%, transparent); opacity: 1; color: var(--primary); }
.lib-fp-add .material-symbols-outlined[b-jsd8g5u13e] { font-size: 18px !important; line-height: 1 !important; }
.lib-fp-all[b-jsd8g5u13e] {
  position: relative; z-index: 2; display: flex; align-items: center; gap: 6px;
  padding: 8px 34px 8px 6px; width: 100%; box-sizing: border-box;
  color: inherit; text-decoration: none; outline: none;
}
.lib-fp-all.is-active .lib-fp-name[b-jsd8g5u13e] { font-weight: 700; }
.lib-fp-toggle[b-jsd8g5u13e] {
  width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%;
  background: transparent; display: flex; align-items: center; justify-content: center; opacity: .7;
}
.lib-fp-toggle .material-symbols-outlined[b-jsd8g5u13e] { font-size: 18px !important; line-height: 1 !important; }
.lib-fp-name[b-jsd8g5u13e] { flex: 1; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.lib-fp-count[b-jsd8g5u13e] { flex: 0 0 auto; font-size: 11px; font-weight: 600; opacity: .55; padding: 0 4px; color: var(--text); }
.lib-fp-empty[b-jsd8g5u13e] { font-size: 11px; opacity: .5; padding: 4px 12px 8px 20px; color: var(--text-muted); }
.lib-fp-add:focus-visible[b-jsd8g5u13e], .lib-fp-all:focus-visible[b-jsd8g5u13e] { outline: 2px solid var(--primary); outline-offset: -2px; }

/* The page measures its own width, not the window's (a container, as WciDataTable does): with the WISEcode AI pane
   open the window stays wide while the page is not, and a viewport query left the grid a sliver beside the rail.
   Under 860px of page the rail stacks above the grid (the design's .lib-board / .lib-fp breakpoint, measured on the
   page) and scrolls within 280px, so the cards keep a usable width. */
.lib-page[b-jsd8g5u13e] { container-type: inline-size; container-name: lib-page; }
@container lib-page (max-width: 860px) {
  .lib-board[b-jsd8g5u13e] { flex-direction: column; gap: 16px; }
  .lib-fp[b-jsd8g5u13e] { flex: none; width: 100%; max-height: 280px; overflow-y: auto; }
}

/* "All items" and "Not in a folder" are drop targets (data-lib-folder="root"); library-folders.js adds lib-drop-on while a tile is over it. */
.lib-fp-all.lib-drop-on[b-jsd8g5u13e] {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  outline: 1px dashed color-mix(in srgb, var(--primary) 55%, transparent);
}

/* The search pill on the right of PageShell's header row (the Library design's option F), wrapping beneath the title on
   a narrow window. */
.lib-page[b-jsd8g5u13e]  .lib-search { width: 460px; max-width: 100%; }

/* The kind tabs are a pill strip; whenever the page is too narrow for one row (the WISEcode AI pane open, a phone) the
   strip wraps, and a pill radius would turn it into an ellipse. A 20px radius is the pill on one row (the strip is ~38px
   tall) and a rounded box on several. */
.lib-page[b-jsd8g5u13e]  .lib-tabs > .dash-tabs { border-radius: 20px; }

/* The search scope inside the pill (WciMenuPopover's trigger): the current scope and a caret, tinted as a selection. */
.lib-page[b-jsd8g5u13e]  .lib-scope {
  display: inline-flex; align-items: center; gap: 2px; height: 32px; padding: 0 8px 0 12px;
  border: 0; border-radius: var(--radius-pill, 999px); cursor: pointer; white-space: nowrap;
  background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary);
  font: inherit; font-size: 13px; font-weight: 600;
}
.lib-page[b-jsd8g5u13e]  .lib-scope:hover { background: color-mix(in srgb, var(--primary) 16%, transparent); }
/* Inset: the pill already glows while focus is inside it, so the button's own ring stays within the button. */
.lib-page[b-jsd8g5u13e]  .lib-scope:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.lib-page[b-jsd8g5u13e]  .lib-scope .material-symbols-outlined { font-size: 18px; line-height: 1; }

/* The rail's spacing between its two scope rows and the folder tree, and the drag hint under the tree. */
.lib-fp-gap[b-jsd8g5u13e] { height: 8px; }
.lib-fp-hint[b-jsd8g5u13e] { margin: 8px 6px 0; font-size: 12px; line-height: 1.4; color: var(--text-muted); }

/* Above the grid: where it is (the scope, or the open folder's path) and how many items it holds. */
.lib-crumb[b-jsd8g5u13e] { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; font-size: 14px; color: var(--text-muted); }
.lib-crumb b[b-jsd8g5u13e] { color: var(--text); font-weight: 700; }
.lib-crumb a[b-jsd8g5u13e] { color: var(--text-muted); text-decoration: none; }
.lib-crumb a:hover[b-jsd8g5u13e] { color: var(--primary); text-decoration: underline; }
.lib-crumb .material-symbols-outlined[b-jsd8g5u13e] { font-size: 16px; line-height: 1; opacity: .6; }
.lib-crumb-count[b-jsd8g5u13e] { font-size: 13px; }

/* The card grid (conversation-library.html .lib-grid): as many 190px-or-wider columns as fit, for every kind. The
   minimum gives way to the column's width when that is narrower (a narrow window beside the 248px rail), so a card
   shrinks instead of overflowing into the clipped edge. Relative: the page-turn spinner (WiseGridLoading) fills it. */
.lib-grid[b-jsd8g5u13e] { position: relative; display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); }

/* A grid item's keyed wrapper: it holds the card for Blazor's diff but takes no box, so the card stays the grid cell. */
.lib-grid-cell[b-jsd8g5u13e] { display: contents; }
/* /Components/Shared/AddFoodChat/AddFoodChatModal.razor.rz.scp.css */
.add-food-chat-overlay[b-6dt2w3cjcr] {
    background: var(--color-oyster-200);
    z-index: 90 !important;
}

.add-food-chat-shell[b-6dt2w3cjcr] {
    background: var(--color-oyster-100);
    color: var(--color-oyster-900);
    box-shadow: 0 4px 48px rgba(0, 0, 0, 0.06);
    min-height: 100dvh;
}

/* The shell has no chrome of its own any more: the top bar (avatar, title, subtitle, X) is gone,
   and every header in the modal is the shared PaneHeader band inside a pane. What is left here is
   the overlay, the shell surface, and the session notice. */

/* Small-screen shell chrome. Workspace-level responsive layout lives in each
   workspace's own scoped stylesheet. */
@media (max-width: 640px) {
    .add-food-chat-shell[b-6dt2w3cjcr] {
        height: 100dvh;
    }
}

/* Session-level notice strip above the workspace (an unavailable brand). Deliberately part of the
   shell: it is about the session, not about whatever the workspace is doing. */
.add-food-chat-notice[b-6dt2w3cjcr] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0.75rem 2rem 0;
    padding: 8px 12px;
    border: 1px solid #fecaca;
    border-radius: 10px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 0.8125rem;
}

.add-food-chat-notice .material-icons[b-6dt2w3cjcr] {
    font-size: 1.125rem;
}


/* WISE Intelligence v2, embedded on its page (V2AddProduct): no overlay; the module row fills the page. */
.add-food-chat-embedded[b-6dt2w3cjcr] { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.add-food-chat-embedded > .add-food-chat-notice[b-6dt2w3cjcr] { margin: 0 0 8px; }
.add-food-chat-embedded[b-6dt2w3cjcr]  .add-food-chat-embedded-row { flex: 1 1 auto; min-height: 0; }
/* /Components/Shared/AddFoodChat/AddFoodShellChat.razor.rz.scp.css */
/* AddFoodShellChat: the chat side of the v2 WISEcode AI shell. ip-b2b pages/add-product.html and pages/add-catalog.html
   (checkout read 2026-10-07), whose chat column is shared verbatim. The chat module has no header bar and wears the chat
   wash (WciModule, wci-modules.css, D48); the welcome is WciChatWelcome; the transcript lines and the composer are the
   WISEcode AI chat's own Wci parts (ChatTranscript and ChatComposer in their Wci mode), styled by those components. Below,
   app-owned: the chat column and History in its drawer. */

.afc-wci-chat[b-aej05lr4d1] {
    position: relative; flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column; overflow: hidden;
    /* See-through: the chat module wears the chat wash (wci-modules.css, D48). */
    background: transparent;
}

/* add-product.html's welcome (the page's own sheet over wise.css 8762): a little more air above, less at the sides. */
.afc-wci-chat[b-aej05lr4d1]  .sc-welcome { padding: 2.5rem 1.75rem 1.5rem; }
/* The empty-welcome lift (wise.css 10329-10353, --sc-welcome-raise): while the welcome shows and the composer is empty,
   extra space under the rail lifts the composer, its below-input row and the welcome above them, as add-product.html
   draws its first screen. It drops the moment the member types or attaches, or the conversation starts. */
.afc-wci-chat[b-aej05lr4d1]  .add-food-composer-rail {
    --sc-welcome-raise: clamp(5.5rem, 16vh, 11rem);
    transition: padding-bottom 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}
.afc-wci-chat[b-aej05lr4d1]  .add-food-chat-pane:has(.sc-welcome) .add-food-composer-rail:not(:has(.fl-input:not(:placeholder-shown))):not(:has(.fl-attachments > *)) {
    padding-bottom: calc(var(--sc-welcome-raise) + 14px);
}
@media (prefers-reduced-motion: reduce) {
    .afc-wci-chat[b-aej05lr4d1]  .add-food-composer-rail { transition: none; }
}

/* History in its drawer: the overlay's rail hides itself under 900px (no room beside the chat there); the drawer is
   opened on purpose from the chat's menu, so it always shows, filling the module. */
.afc-wci-history[b-aej05lr4d1] { flex: 1 1 auto; min-height: 0; display: flex; }
.afc-wci-history[b-aej05lr4d1]  .add-food-history { display: flex !important; width: 100%; border-radius: 0; border: 0; }

/* The way out (D50): "← Product Portfolio" and the page tag, a fixed row above the conversation, left of the floating ⋯.
   The link is a small ghost WciButton (BUG-V2-009: the plain text link was hard to find). */
.afc-wci-back[b-aej05lr4d1] {
    flex: 0 0 auto; display: flex; align-items: center; gap: 8px; min-width: 0;
    padding: 12px 56px 4px 20px; font-size: 13px; color: var(--text-muted);
}
.afc-wci-back-tag[b-aej05lr4d1] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.afc-wci-back-tag[b-aej05lr4d1]::before { content: "\00B7"; margin-right: 8px; }
/* /Components/Shared/AddFoodChat/BatchIngredientReviewPanel.razor.rz.scp.css */
/* App-owned review loading footprint, using the existing grid loading component. */
.wci-review-loading[b-8tf6q3vwql] { position: relative; min-height: 12rem; }
.wci-accepted-icon[b-8tf6q3vwql] { font-size: 1.2rem; }
.wci-exact-icon[b-8tf6q3vwql] { font-size: 0.9rem; }
/* /Components/Shared/AddFoodChat/BulkCatalogWorkspace.razor.rz.scp.css */
/* Portfolio-first layout: chat is a fixed rail, the canvas takes the rest. The canvas is the
   only scroller, and every wide child (the product grid) scrolls inside its own box so the page
   never grows a horizontal scrollbar. */

.bulk-catalog-workspace[b-n2am0k0lpr] {
    padding: 1.25rem;
    gap: 1rem;
    overflow: hidden;
}

.bulk-catalog-rail[b-n2am0k0lpr] {
    /* The assistant and the canvas split the work area evenly. Deliberately flex rather than
       width: 50%: the session-history panel is a third flex item beside these two, so a percentage
       of the whole workspace would hand the left side history + half, and the gaps come off the
       canvas alone. Equal basis with equal growth is even at any width, collapsed history or not. */
    flex: 1 1 0;
    min-width: 0;
    background: var(--color-oyster-100);
    border: 1px solid var(--color-oyster-300);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.05);
}

/* One-line batch status pinned above the composer: the rail's own answer to "where is this at". */
.bulk-rail-status[b-n2am0k0lpr] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 1rem 0.5rem;
    padding: 8px 10px;
    border: 1px solid var(--color-indigo-200, #c7d2fe);
    border-radius: 10px;
    background: var(--color-indigo-50, #eef2ff);
    color: var(--color-oyster-700, #4a4356);
    font-size: 0.75rem;
    line-height: 1.4;
}

.bulk-rail-status > .material-icons[b-n2am0k0lpr] {
    font-size: 1rem;
    color: var(--color-indigo-600);
}

.bulk-catalog-canvas[b-n2am0k0lpr] {
    background: #ffffff;
    border: 1px solid var(--color-oyster-300);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.05);
}

/* The canvas header band (and the rail's) is PaneHeader's, shared with every other pane in the
   modal. All that lives here is what this workspace slots INTO the band: the status pill. */

.bulk-status-pill[b-n2am0k0lpr] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 5px 12px;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.bulk-status-pill > .material-icons[b-n2am0k0lpr] {
    font-size: 1rem;
}

.bulk-status-busy[b-n2am0k0lpr] {
    background: var(--color-indigo-50, #eef2ff);
    color: var(--color-indigo-600, #4f46e5);
}

.bulk-status-good[b-n2am0k0lpr] {
    background: #ecfdf5;
    color: #047857;
}

.bulk-status-warn[b-n2am0k0lpr] {
    background: #fffbeb;
    color: #b45309;
}

/* The pill for a status with work actually running behind it. Breathing chrome beats a static
   label the user has to re-read to know whether anything is happening. */
.bulk-status-live[b-n2am0k0lpr] {
    animation: bulk-pill-pulse-b-n2am0k0lpr 2s ease-in-out infinite;
}

.bulk-status-live > .material-icons[b-n2am0k0lpr] {
    animation: bulk-icon-pulse-b-n2am0k0lpr 2s ease-in-out infinite;
}

@keyframes bulk-pill-pulse-b-n2am0k0lpr {
    0%, 100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.28); }
    50% { box-shadow: 0 0 0 5px rgba(79, 70, 229, 0); }
}

@keyframes bulk-icon-pulse-b-n2am0k0lpr {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

.bulk-canvas-body[b-n2am0k0lpr] {
    padding: 1.25rem 1.5rem 2rem;
    overflow-y: auto;
    overflow-x: hidden;
}

/* The awaiting-the-file state is one small card on an otherwise empty canvas, so the
   expanse behind it matches the app background instead of reading as a blank white page.
   The data-bearing states keep the white canvas: their tables ARE the surface. */
.bulk-canvas-body-awaiting[b-n2am0k0lpr] {
    background: var(--color-oyster-100);
}

.bulk-canvas-body-awaiting .bulk-card[b-n2am0k0lpr] {
    background: #ffffff;
}

/* ── Cards ─────────────────────────────────────────────────────────────── */

.bulk-card[b-n2am0k0lpr] {
    border: 1px solid var(--color-oyster-200, #e7e4ea);
    border-radius: 14px;
    background: #ffffff;
    padding: 1.125rem 1.25rem;
    margin-bottom: 1rem;
}

.bulk-card-warn[b-n2am0k0lpr] {
    border-color: #fde68a;
    background: #fffbeb;
}

/* Status cards (a wait, a publish pass, a pre-import summary) hold one short paragraph, so they
   are capped rather than stretched across a wide canvas. */
.bulk-card-narrow[b-n2am0k0lpr] {
    max-width: 46rem;
}

.bulk-card-head[b-n2am0k0lpr] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.bulk-card-icon[b-n2am0k0lpr] {
    color: var(--color-indigo-600, #4f46e5);
    font-size: 1.25rem;
    margin-top: 2px;
}

.bulk-card-title[b-n2am0k0lpr] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-oyster-900, #1a102c);
}

.bulk-card-sub[b-n2am0k0lpr] {
    margin-top: 4px;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-oyster-600, #5d566a);
}

.bulk-upload-guidance[b-n2am0k0lpr] {
    margin-top: 1rem;
    padding: 0.875rem;
    border: 1px solid var(--color-oyster-200, #e7e4ea);
    border-radius: 12px;
    background: var(--color-oyster-50, #faf9fb);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-oyster-600, #5d566a);
}

.bulk-upload-guidance-title[b-n2am0k0lpr] {
    margin: 0 0 0.25rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-oyster-900, #1a102c);
}

.bulk-upload-guidance p + p[b-n2am0k0lpr] {
    margin-top: 0.375rem;
}

.bulk-downloads[b-n2am0k0lpr] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 0.75rem;
}

.bulk-download[b-n2am0k0lpr] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}

.bulk-download-hint[b-n2am0k0lpr] {
    font-size: 0.6875rem;
    line-height: 1.25;
    color: var(--color-oyster-500, #756e82);
}

.bulk-blocked-rows[b-n2am0k0lpr] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-oyster-100, #eceae6);
}

/* ── Live indicators ───────────────────────────────────────────────────────
   Two signals, both cheap: a ring that pulses out from the card icon, and a dot beside the title.
   Between them a running batch cannot be mistaken for a frozen one, whatever the progress bar
   happens to read. */

.bulk-live-icon[b-n2am0k0lpr] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 2px;
}

.bulk-live-icon > .material-icons[b-n2am0k0lpr] {
    margin-top: 0;
}

.bulk-live-icon[b-n2am0k0lpr]::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 9999px;
    border: 2px solid var(--color-indigo-400, #818cf8);
    animation: bulk-ring-pulse-b-n2am0k0lpr 1.8s ease-out infinite;
}

.bulk-live-dot[b-n2am0k0lpr] {
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    width: 7px;
    height: 7px;
    border-radius: 9999px;
    background: var(--color-indigo-600, #4f46e5);
    animation: bulk-dot-pulse-b-n2am0k0lpr 1.4s ease-in-out infinite;
}

.bulk-spin[b-n2am0k0lpr] {
    animation: bulk-spin-b-n2am0k0lpr 1.1s linear infinite;
}

@keyframes bulk-ring-pulse-b-n2am0k0lpr {
    0% { transform: scale(0.85); opacity: 0.55; }
    70% { transform: scale(1.45); opacity: 0; }
    100% { transform: scale(1.45); opacity: 0; }
}

@keyframes bulk-dot-pulse-b-n2am0k0lpr {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.6); opacity: 0.35; }
}

@keyframes bulk-spin-b-n2am0k0lpr {
    to { transform: rotate(360deg); }
}

/* ── Progress ──────────────────────────────────────────────────────────── */

.bulk-progress-row[b-n2am0k0lpr] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 1rem;
}

.bulk-progress-track[b-n2am0k0lpr] {
    flex: 1;
    height: 8px;
    border-radius: 9999px;
    background: var(--color-oyster-200, #e7e4ea);
    overflow: hidden;
}

.bulk-progress-fill[b-n2am0k0lpr] {
    height: 100%;
    border-radius: 9999px;
    background: var(--color-indigo-600, #4f46e5);
    transition: width 0.3s ease;
}

.bulk-progress-indeterminate[b-n2am0k0lpr] {
    width: 35%;
    animation: bulk-progress-slide-b-n2am0k0lpr 1.6s ease-in-out infinite;
}

@keyframes bulk-progress-slide-b-n2am0k0lpr {
    0% { margin-left: 0; }
    50% { margin-left: 65%; }
    100% { margin-left: 0; }
}

/* Nothing has reported back yet, so there is no honest width to draw: the track itself sweeps.
   The first completed slice replaces this with a real determinate fill. */
.bulk-progress-shimmer[b-n2am0k0lpr] {
    background-image: linear-gradient(
        90deg,
        var(--color-oyster-200, #e7e4ea) 0%,
        var(--color-indigo-200, #c7d2fe) 35%,
        var(--color-indigo-400, #818cf8) 50%,
        var(--color-indigo-200, #c7d2fe) 65%,
        var(--color-oyster-200, #e7e4ea) 100%);
    background-size: 220% 100%;
    animation: bulk-shimmer-sweep-b-n2am0k0lpr 1.8s linear infinite;
}

@keyframes bulk-shimmer-sweep-b-n2am0k0lpr {
    0% { background-position: 120% 0; }
    100% { background-position: -120% 0; }
}

.bulk-progress-label[b-n2am0k0lpr] {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-oyster-600, #5d566a);
}

/* ── Alerts ────────────────────────────────────────────────────────────── */

.bulk-alert[b-n2am0k0lpr] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.8125rem;
    margin-bottom: 1rem;
}

.bulk-alert-error[b-n2am0k0lpr] {
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

.bulk-alert > .material-icons[b-n2am0k0lpr] {
    font-size: 1.125rem;
}


/* ── Pre-import: what happens once the mapping is settled ──────────────── */

.bulk-steps[b-n2am0k0lpr] {
    margin: 1.125rem 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    counter-reset: bulk-step;
}

.bulk-step[b-n2am0k0lpr] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8125rem;
    color: var(--color-oyster-500, #756e82);
}

.bulk-step > span:last-child[b-n2am0k0lpr] {
    display: flex;
    flex-direction: column;
}

.bulk-step strong[b-n2am0k0lpr] {
    font-size: 0.8125rem;
    line-height: 1.3;
}

.bulk-step small[b-n2am0k0lpr] {
    margin-top: 1px;
    font-size: 0.75rem;
    line-height: 1.3;
    font-weight: 400;
    color: var(--color-oyster-500, #756e82);
}

.bulk-step-marker[b-n2am0k0lpr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    background: var(--color-oyster-100, #f2f0f4);
    color: var(--color-oyster-500, #756e82);
}

.bulk-step-marker > .material-icons[b-n2am0k0lpr] {
    font-size: 0.9375rem;
}

.bulk-step-active[b-n2am0k0lpr] {
    color: var(--color-oyster-900, #1a102c);
    font-weight: 600;
}

.bulk-step-active .bulk-step-marker[b-n2am0k0lpr] {
    background: var(--color-indigo-50, #eef2ff);
    color: var(--color-indigo-600, #4f46e5);
}

.bulk-step-done .bulk-step-marker[b-n2am0k0lpr] {
    background: #ecfdf5;
    color: #047857;
}

.bulk-staged-actions[b-n2am0k0lpr] {
    display: flex;
    justify-content: flex-start;
    margin-top: 1rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--color-oyster-200, #e7e4ea);
}

/* ── The done moment ───────────────────────────────────────────────────────
   The batch has an ending: a success mark, one sentence, and the way onward. Deliberately the
   loudest thing on the canvas, and only for as long as the user leaves it up. */

.bulk-done[b-n2am0k0lpr] {
    border: 1px solid var(--color-indigo-200, #c7d2fe);
    border-radius: 16px;
    background: linear-gradient(180deg, var(--color-indigo-50, #eef2ff) 0%, #ffffff 70%);
    padding: 1.5rem;
    margin-bottom: 1rem;
    text-align: center;
}

.bulk-done-badge[b-n2am0k0lpr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    background: #ecfdf5;
    color: #047857;
    box-shadow: 0 0 0 6px rgba(4, 120, 87, 0.06);
}

.bulk-done-badge > .material-icons[b-n2am0k0lpr] {
    font-size: 1.75rem;
}

.bulk-done-title[b-n2am0k0lpr] {
    margin-top: 0.75rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-oyster-900, #1a102c);
}

.bulk-done-sub[b-n2am0k0lpr] {
    margin: 4px auto 0;
    max-width: 34rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-oyster-600, #5d566a);
}

/* The "not everything published" line. Quieter than the headline, but it has to be readable:
   it is the only place the user is told some products are still parked. */
.bulk-done-pending[b-n2am0k0lpr] {
    margin-top: 0.5rem;
    color: var(--color-oyster-700, #4a4356);
}


.bulk-done-actions[b-n2am0k0lpr] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 1.125rem;
}


/* ── Leftovers ─────────────────────────────────────────────────────────── */

.bulk-leftovers[b-n2am0k0lpr] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-oyster-200, #e7e4ea);
}

.bulk-leftovers-lead[b-n2am0k0lpr] {
    font-size: 0.8125rem;
    color: var(--color-oyster-700, #4a4356);
}

.bulk-leftovers-list[b-n2am0k0lpr] {
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bulk-leftovers-list li[b-n2am0k0lpr] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 0.8125rem;
    color: var(--color-oyster-800, #302842);
}

.bulk-leftover-upc[b-n2am0k0lpr] {
    font-variant-numeric: tabular-nums;
    font-size: 0.75rem;
    color: var(--color-oyster-500, #756e82);
}

.bulk-leftovers-more[b-n2am0k0lpr] {
    margin-top: 4px;
    font-size: 0.75rem;
    color: var(--color-oyster-500, #756e82);
}

.bulk-leftovers-actions[b-n2am0k0lpr] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 0.875rem;
}


/* ── Product grid ──────────────────────────────────────────────────────── */

.bulk-grid-scroll[b-n2am0k0lpr] {
    margin-top: 1rem;
    max-height: 26rem;
    overflow: auto;
    border: 1px solid var(--color-oyster-200, #e7e4ea);
    border-radius: 12px;
}

.bulk-grid[b-n2am0k0lpr] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.bulk-grid thead th[b-n2am0k0lpr] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--color-oyster-50, #faf9fb);
    text-align: left;
    padding: 8px 12px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-oyster-500, #756e82);
    border-bottom: 1px solid var(--color-oyster-200, #e7e4ea);
}

.bulk-grid tbody td[b-n2am0k0lpr] {
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-oyster-100, #f2f0f4);
    color: var(--color-oyster-800, #302842);
    vertical-align: middle;
}

.bulk-grid tbody tr:last-child td[b-n2am0k0lpr] {
    border-bottom: none;
}

.bulk-grid-row-col[b-n2am0k0lpr] {
    width: 4rem;
    color: var(--color-oyster-500, #756e82);
    font-variant-numeric: tabular-nums;
}

.bulk-grid-upc[b-n2am0k0lpr] {
    font-variant-numeric: tabular-nums;
    color: var(--color-oyster-600, #5d566a);
}

.bulk-grid-link[b-n2am0k0lpr] {
    color: var(--color-indigo-600, #4f46e5);
    font-weight: 600;
    text-decoration: none;
}

.bulk-grid-link:hover[b-n2am0k0lpr] {
    text-decoration: underline;
}

.bulk-grid-name[b-n2am0k0lpr] {
    font-weight: 600;
    color: var(--color-oyster-700, #4a4356);
}

/* The list is real, it is just not the user's to open yet. Held back rather than hidden, so the
   publish pass has something honest to show. */
.bulk-grid-publishing[b-n2am0k0lpr] {
    opacity: 0.7;
}

.bulk-tag[b-n2am0k0lpr] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
}

.bulk-tag-good[b-n2am0k0lpr] {
    background: #ecfdf5;
    color: #047857;
}

.bulk-tag-warn[b-n2am0k0lpr] {
    background: #fffbeb;
    color: #b45309;
}

/* ── Row issues ────────────────────────────────────────────────────────── */

.bulk-issue-list[b-n2am0k0lpr] {
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 16rem;
    overflow-y: auto;
}

.bulk-issue[b-n2am0k0lpr] {
    display: flex;
    gap: 10px;
    font-size: 0.8125rem;
    color: var(--color-oyster-700, #4a4356);
}

.bulk-issue-note[b-n2am0k0lpr] {
    color: var(--color-oyster-500, #756e82);
}

.bulk-issue-row[b-n2am0k0lpr] {
    flex-shrink: 0;
    min-width: 4.5rem;
    font-weight: 600;
    color: var(--color-oyster-500, #756e82);
    font-variant-numeric: tabular-nums;
}

.bulk-issue-more[b-n2am0k0lpr] {
    margin-top: 8px;
    font-size: 0.75rem;
    color: var(--color-oyster-500, #756e82);
}

/* ── Reduced motion ────────────────────────────────────────────────────────
   Every liveness cue above degrades to a static state that still reads as "in progress": the
   shimmer becomes a flat indigo track, the indeterminate bar a full one, and the pulses stop. */

@media (prefers-reduced-motion: reduce) {
    .bulk-status-live[b-n2am0k0lpr],
    .bulk-status-live > .material-icons[b-n2am0k0lpr],
    .bulk-live-dot[b-n2am0k0lpr],
    .bulk-spin[b-n2am0k0lpr],
    .bulk-progress-indeterminate[b-n2am0k0lpr],
    .bulk-progress-shimmer[b-n2am0k0lpr] {
        animation: none;
    }

    .bulk-live-icon[b-n2am0k0lpr]::after {
        animation: none;
        opacity: 0.4;
    }

    .bulk-progress-indeterminate[b-n2am0k0lpr] {
        width: 100%;
        opacity: 0.6;
    }

    .bulk-progress-shimmer[b-n2am0k0lpr] {
        background-image: none;
        background: var(--color-indigo-200, #c7d2fe);
    }

    .bulk-progress-fill[b-n2am0k0lpr] {
        transition: none;
    }
}

/* ── Responsive: the rail narrows, then stacks above the canvas ─────────── */

@media (max-width: 1400px) {
    /* The rail is a percentage now, so it needs no narrowing of its own here; only the canvas
       content that runs out of room does. */
    .bulk-card-narrow[b-n2am0k0lpr] {
        max-width: none;
    }
}

@media (max-width: 1180px) {
    .bulk-catalog-workspace[b-n2am0k0lpr] {
        padding: 0;
        gap: 0;
    }

    .bulk-catalog-rail[b-n2am0k0lpr],
    .bulk-catalog-canvas[b-n2am0k0lpr] {
        border-radius: 0;
        border-top: 0;
        border-bottom: 0;
    }
}

@media (max-width: 900px) {
    .bulk-catalog-workspace[b-n2am0k0lpr] {
        flex-direction: column;
    }

    .bulk-catalog-rail[b-n2am0k0lpr] {
        /* Stacked, so the even side-by-side split does not apply: the rail is a fixed slice of the
           height and the canvas takes the rest. Without resetting flex here, the basis and growth
           from the base rule would apply to the vertical axis and swallow this height. */
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
        height: 40vh;
        border-left: 0;
        border-right: 0;
    }

    .bulk-canvas-body[b-n2am0k0lpr] {
        padding: 1rem 1rem 1.5rem;
    }
}

@media (max-width: 640px) {
    .bulk-downloads[b-n2am0k0lpr] {
        grid-template-columns: 1fr;
    }
}

/* ═══════════ WISE Intelligence v2: the WISEcode AI shell (WciShell) ═══════════
   ip-b2b pages/add-catalog.html (checkout read 2026-10-07). The canvas states sit in WciCatalogModule, whose banner and
   import bar replace the PaneHeaders; here each card wears the design's .ac-section look (a 12px bordered block with a
   shaded head strip, its body inset under it), in the design tokens so it follows dark mode, and the row lists wear
   .ac-fix's flagged rows. The modal layout above is untouched. */

.bulk-wci .bulk-canvas-body[b-n2am0k0lpr] { padding: 0; overflow: visible; background: transparent; }

.bulk-wci .bulk-card[b-n2am0k0lpr] {
    border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
    padding: 0 0 12px; margin-bottom: 12px; overflow: hidden; max-width: none;
}
.bulk-wci .bulk-card:last-child[b-n2am0k0lpr] { margin-bottom: 0; }
.bulk-wci .bulk-card-warn[b-n2am0k0lpr] { border-color: color-mix(in srgb, var(--sec-red) 40%, var(--border)); }
.bulk-wci .bulk-card-head[b-n2am0k0lpr] {
    gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface-2) 55%, transparent);
}
.bulk-wci .bulk-card-head:last-child[b-n2am0k0lpr] { border-bottom: 0; }
.bulk-wci .bulk-card > :not(.bulk-card-head)[b-n2am0k0lpr] { margin-left: 12px; margin-right: 12px; }
.bulk-wci .bulk-card-icon[b-n2am0k0lpr] { font-size: 18px; margin-top: 0; color: var(--primary-ink, var(--primary)); }
.bulk-wci .bulk-card-title[b-n2am0k0lpr] { font-size: 0.78rem; font-weight: 800; letter-spacing: -0.01em; color: var(--text); }
.bulk-wci .bulk-card-sub[b-n2am0k0lpr] { font-size: 0.72rem; line-height: 1.45; color: var(--text-muted); }

.bulk-wci .bulk-progress-track[b-n2am0k0lpr] { background: var(--surface-2); }
.bulk-wci .bulk-progress-fill[b-n2am0k0lpr] { background: var(--primary); }
.bulk-wci .bulk-progress-label[b-n2am0k0lpr] { color: var(--text-muted); font-size: 0.7rem; }

.bulk-wci .bulk-issue-list[b-n2am0k0lpr] { margin-top: 11px; max-height: 18rem; }
.bulk-wci .bulk-issue[b-n2am0k0lpr] {
    gap: 8px; padding: 8px 10px; border-radius: 8px; font-size: 0.7rem;
    background: rgba(220, 48, 56, 0.06); box-shadow: inset 3px 0 0 var(--sec-red); color: var(--text);
}
.bulk-wci .bulk-issue-note[b-n2am0k0lpr] { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--border-strong); color: var(--text-muted); }
.bulk-wci .bulk-issue-row[b-n2am0k0lpr] { min-width: 3.5rem; font-family: var(--font-mono); font-weight: 700; color: var(--text); }
.bulk-wci .bulk-issue-more[b-n2am0k0lpr] { font-size: 0.7rem; color: var(--text-subtle); }
.bulk-wci .bulk-blocked-rows[b-n2am0k0lpr] { border-top-color: var(--border); }
.bulk-wci .bulk-download-hint[b-n2am0k0lpr] { color: var(--text-subtle); }
.bulk-wci .bulk-staged-actions[b-n2am0k0lpr] { border-top-color: var(--border); }

.bulk-wci .bulk-done[b-n2am0k0lpr] {
    border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
    padding: 16px 14px; margin-bottom: 12px;
}
.bulk-wci .bulk-done-badge[b-n2am0k0lpr] { background: color-mix(in srgb, var(--sec-green) 14%, transparent); color: var(--sec-green); box-shadow: none; }
.bulk-wci .bulk-done-title[b-n2am0k0lpr] { font-family: 'WISE Digits', 'DM Sans', system-ui, sans-serif; font-weight: 800; font-size: 1.05rem; color: var(--text); }
.bulk-wci .bulk-done-sub[b-n2am0k0lpr] { font-size: 0.74rem; color: var(--text-muted); }
.bulk-wci .bulk-done-pending[b-n2am0k0lpr] { color: var(--text); }

.bulk-wci .bulk-grid thead th[b-n2am0k0lpr] { color: var(--text-subtle); border-bottom-color: var(--border); background: var(--surface); }
.bulk-wci .bulk-grid tbody td[b-n2am0k0lpr] { color: var(--text); border-bottom-color: var(--border); }
.bulk-wci .bulk-grid-upc[b-n2am0k0lpr] { color: var(--text-muted); }
.bulk-wci .bulk-grid-link[b-n2am0k0lpr] { color: var(--primary-ink, var(--primary)); }

.bulk-wci .bulk-alert[b-n2am0k0lpr] { border-radius: 10px; }

/* The chat's one-line batch status, in the WISEcode AI chat's surface rather than the modal's indigo. */
.bulk-rail-status--wci[b-n2am0k0lpr] {
    margin: 0 26px 8px;
    border-color: var(--border);
    background: var(--surface-2);
    color: var(--text-muted);
}
.bulk-rail-status--wci > .material-icons[b-n2am0k0lpr] { color: var(--primary-ink, var(--primary)); }
/* /Components/Shared/AddFoodChat/ChatComposer.razor.rz.scp.css */
.add-food-composer[b-ajjuu756yk] {
    position: relative;
    z-index: 2;
    padding: 1.25rem 2.5rem max(1.5rem, calc(env(safe-area-inset-bottom) + 1.5rem));
    background: #ffffff;
    border-top: 1px solid var(--color-oyster-300);
}

.add-food-composer-stack[b-ajjuu756yk] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* The first-turn suggestion is a WciIntentChip (INTEL-364); this wrapper only
   carries the hide-while-typing rule below. */

/* Rejected-attachment notice: unsupported type, over the per-kind size cap, or an
   unreadable pick. Material icons default to 24px, which towers over the 13px copy,
   so both glyphs are sized down and given the same 19px line box as the text — with
   align-items:flex-start that keeps the icon optically centred on the first line
   (rather than the row's full height) when a multi-file rejection wraps. */
.add-food-unsupported-row[b-ajjuu756yk] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.55rem 0.6rem 0.55rem 0.7rem;
    border-radius: 10px;
    border: 1px solid var(--color-warning-200);
    background: var(--color-warning-100);
    color: var(--color-warning-text);
}

.add-food-unsupported-row > .material-icons[b-ajjuu756yk] {
    font-size: 18px;
    line-height: 19px;
    flex-shrink: 0;
    color: var(--color-warning-600);
}

.add-food-unsupported-text[b-ajjuu756yk] {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    line-height: 19px;
    font-weight: 600;
}

.add-food-attachments-row[b-ajjuu756yk] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.add-food-attachment-chip[b-ajjuu756yk] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 38px;
    padding: 0 0.5rem 0 0.35rem;
    border-radius: 999px;
    border: 1px solid var(--color-oyster-300);
    background: var(--color-oyster-100);
    color: var(--color-oyster-900);
    font-size: 12px;
    font-weight: 600;
    max-width: 240px;
}

.add-food-attachment-chip-thumb[b-ajjuu756yk] {
    position: relative;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--color-oyster-200);
    color: var(--color-indigo-600);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

/* The photo thumb's open button (INTEL-380): no chrome of its own, so the thumb looks as it did. */
.add-food-attachment-chip-open[b-ajjuu756yk] {
    padding: 0;
    margin: 0;
    border: 0;
    cursor: zoom-in;
}

.add-food-attachment-chip-open:disabled[b-ajjuu756yk] {
    cursor: default;
}

.add-food-attachment-chip-open:focus-visible[b-ajjuu756yk] {
    outline: 2px solid var(--color-indigo-600);
    outline-offset: 2px;
}

.add-food-attachment-chip-thumb img[b-ajjuu756yk] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.add-food-attachment-chip-thumb .material-icons[b-ajjuu756yk] {
    font-size: 18px;
}

.add-food-attachment-chip-spinner[b-ajjuu756yk] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(249, 248, 243, 0.78);
    color: var(--color-indigo-600);
}

.add-food-attachment-chip-spinner .material-icons[b-ajjuu756yk] {
    font-size: 16px;
}

.add-food-attachment-chip-name[b-ajjuu756yk] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.add-food-attachment-chip-remove[b-ajjuu756yk] {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    color: var(--color-oyster-500);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.12s ease, color 0.12s ease;
}

.add-food-attachment-chip-remove:hover:not(:disabled)[b-ajjuu756yk] {
    background: var(--color-oyster-200);
    color: var(--color-oyster-900);
}

.add-food-attachment-chip-remove:disabled[b-ajjuu756yk] {
    opacity: 0.4;
    cursor: not-allowed;
}

.add-food-attachment-chip-remove .material-icons[b-ajjuu756yk] {
    font-size: 16px;
}

.add-food-input-row[b-ajjuu756yk] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.add-food-input-wrap[b-ajjuu756yk] {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    min-height: 52px;
    padding: 22px 12px 10px 14px;
    background: var(--color-oyster-100);
    border: 1.5px solid var(--color-oyster-300);
    border-radius: 14px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.add-food-input-wrap:focus-within[b-ajjuu756yk] {
    border-color: var(--color-indigo-400);
    box-shadow: 0 0 0 3px rgba(37, 80, 124, 0.15);
}

.add-food-input-label[b-ajjuu756yk] {
    position: absolute;
    top: 6px;
    left: 14px;
    color: var(--color-oyster-500);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    pointer-events: none;
}

.add-food-input-wrap:focus-within .add-food-input-label[b-ajjuu756yk] {
    color: var(--color-indigo-600);
}

.add-food-input[b-ajjuu756yk] {
    flex: 1;
    min-width: 0;
    /* `field-sizing: content` auto-grows the textarea as the user types, up to
       max-height — replaces a JS resize handler that previously ran on every
       keystroke. Supported in Chrome/Edge 123+, Safari 17.4+, Firefox 137+. */
    field-sizing: content;
    min-height: 1.35em;
    max-height: 300px;
    resize: none;
    overflow-y: auto;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--color-oyster-900);
    font-size: 14px;
    line-height: 1.35;
    padding: 0;
    box-sizing: border-box;
}

/* Hide the first-turn suggestion chip once the user starts typing. Pure CSS
   replaces the per-keystroke server round-trip that used to drive this. */
.add-food-composer-stack:not(:has(.add-food-input:placeholder-shown)) .add-food-suggestion-row[b-ajjuu756yk] {
    display: none;
}

.add-food-input[b-ajjuu756yk]::placeholder {
    color: var(--color-oyster-400);
}

.add-food-input-divider[b-ajjuu756yk] {
    width: 1px;
    height: 18px;
    background: var(--color-oyster-300);
    flex-shrink: 0;
}

.add-food-input-icon[b-ajjuu756yk] {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    color: var(--color-oyster-500);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s ease, color 0.12s ease;
    flex-shrink: 0;
}

.add-food-input-icon:hover[b-ajjuu756yk] {
    background: var(--color-oyster-200);
    color: var(--color-indigo-600);
}

.add-food-input-icon .material-icons[b-ajjuu756yk] {
    font-size: 19px;
}

.add-food-input-icon:disabled[b-ajjuu756yk] {
    opacity: 0.45;
    cursor: not-allowed;
}

@media (max-width: 640px) {
    .add-food-composer[b-ajjuu756yk] {
        padding: 0.75rem 0.875rem max(1rem, calc(env(safe-area-inset-bottom) + 1rem));
    }
}

/* The v2 WISEcode AI shell (Wci): the design's .chat-input-rail around WciChatComposer, which owns the pill, the
   "+" menu, Send / Stop and the pending chip row. The rail stacks the first-turn suggestion and the rejected-file
   notice above the pill and the below-input row (Token readout, "What can I ask?") under it. The ask link lines up
   with the placeholder through --sc-ask-help-inset, as on the WISEai chat. */
.add-food-composer-rail[b-ajjuu756yk] {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 10px 26px max(14px, calc(env(safe-area-inset-bottom) + 14px));
}

.add-food-composer-below[b-ajjuu756yk] {
    margin-top: -0.3rem;
    --sc-ask-help-inset: 9px;
}

@media (max-width: 640px) {
    .add-food-composer-rail[b-ajjuu756yk] {
        padding: 0.75rem 0.875rem max(1rem, calc(env(safe-area-inset-bottom) + 1rem));
    }
}
/* /Components/Shared/AddFoodChat/ChatHistoryPanel.razor.rz.scp.css */
.add-food-history[b-uko8puykau] {
    background: #ffffff;
    border: 1px solid var(--color-oyster-300);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.05);
}

.add-food-history-collapsed[b-uko8puykau] {
    align-self: stretch;
}

/* The header band itself is PaneHeader's, shared with every other pane in the modal. Only the
   toggle inside it is ours. */
.add-food-history-empty[b-uko8puykau],
.add-food-history-item-meta[b-uko8puykau] {
    color: var(--color-oyster-500);
}

.add-food-history-item[b-uko8puykau] {
    border: 1px solid transparent;
    color: var(--color-oyster-800);
}

.add-food-history-item:hover[b-uko8puykau] {
    background: var(--color-oyster-100);
}

.add-food-history-item-active[b-uko8puykau] {
    background: var(--color-primary-soft);
    border-color: var(--color-indigo-200);
}

.add-food-history-item-title[b-uko8puykau] {
    color: var(--color-oyster-900);
}

@media (max-width: 1180px) {
    .add-food-history[b-uko8puykau] {
        border-radius: 0;
        border-top: 0;
        border-bottom: 0;
    }
}

@media (max-width: 900px) {
    .add-food-history[b-uko8puykau] {
        display: none;
    }
}
/* /Components/Shared/AddFoodChat/ChatTranscript.razor.rz.scp.css */
.add-food-transcript[b-nnx55b2dbr] {
    position: relative;
    padding: 2rem 2.5rem;
    background: var(--color-oyster-100);
}

.add-food-welcome[b-nnx55b2dbr] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.add-food-welcome-logo-wrap[b-nnx55b2dbr] {
    position: relative;
    width: 72px;
    height: 72px;
    margin-bottom: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.add-food-welcome-ring[b-nnx55b2dbr] {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 72px;
    height: 72px;
    margin-left: -36px;
    margin-top: -36px;
    border-radius: 999px;
    border: 1px solid rgba(37, 80, 124, 0.4);
    box-shadow: 0 0 16px rgba(37, 80, 124, 0.25), 0 0 32px rgba(37, 80, 124, 0.15);
    animation: addFoodRingBloom-b-nnx55b2dbr 5s cubic-bezier(0.2, 0.85, 0.25, 1) infinite;
}

.add-food-welcome-ring:nth-child(2)[b-nnx55b2dbr] {
    animation-delay: -1.66s;
}

.add-food-welcome-ring:nth-child(3)[b-nnx55b2dbr] {
    animation-delay: -3.33s;
}

.add-food-welcome-logo[b-nnx55b2dbr] {
    position: relative;
    z-index: 1;
    width: 72px;
    height: 72px;
    border-radius: 999px;
    background: var(--color-indigo-600);
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 24px rgba(37, 80, 124, 0.35), 0 0 48px rgba(37, 80, 124, 0.2);
}

.add-food-welcome-logo img[b-nnx55b2dbr] {
    width: 100%;
    height: 100%;
    filter: brightness(0) invert(1);
}

.add-food-welcome p[b-nnx55b2dbr] {
    color: var(--color-oyster-500);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin: 0;
}

.add-food-msg-row[b-nnx55b2dbr] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 2px 0;
    border-radius: 8px;
    margin-top: 14px;
}

.add-food-msg-row:hover[b-nnx55b2dbr] {
    background: rgba(0, 0, 0, 0.025);
}

.add-food-msg-avatar-col[b-nnx55b2dbr] {
    width: 36px;
    min-width: 36px;
    padding-top: 2px;
}

.add-food-assistant-avatar[b-nnx55b2dbr],
.add-food-user-avatar[b-nnx55b2dbr] {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.add-food-assistant-avatar[b-nnx55b2dbr] {
    background: var(--color-indigo-600);
    padding: 7px;
    box-shadow: 0 0 0 1px rgba(37, 80, 124, 0.18);
}

.add-food-assistant-avatar img[b-nnx55b2dbr] {
    width: 100%;
    height: 100%;
    filter: brightness(0) invert(1);
}

.add-food-user-avatar[b-nnx55b2dbr] {
    background: var(--color-oyster-200);
    border: 1px solid var(--color-oyster-300);
    color: var(--color-indigo-600);
    font-size: 11px;
    font-weight: 800;
}

.add-food-msg-content[b-nnx55b2dbr] {
    flex: 1;
    min-width: 0;
    padding-top: 1px;
}

.add-food-msg-meta[b-nnx55b2dbr] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 2px;
    line-height: 1;
}

.add-food-msg-name[b-nnx55b2dbr] {
    font-size: 14px;
    font-weight: 800;
}

.add-food-msg-name-assistant[b-nnx55b2dbr] {
    color: var(--color-indigo-600);
}

.add-food-msg-name-user[b-nnx55b2dbr] {
    color: var(--color-oyster-800);
}

.add-food-msg-time[b-nnx55b2dbr] {
    font-size: 11px;
    color: var(--color-oyster-500);
}

.add-food-msg-text[b-nnx55b2dbr] {
    max-width: 760px;
    color: var(--color-oyster-800);
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-wrap;
}

.add-food-rich-text[b-nnx55b2dbr] {
    white-space: normal;
}

/* ::deep is required because the child elements below are generated by Markdig
   inside a MarkupString and don't carry Blazor's scoped-CSS attribute. Without
   ::deep, none of these rules match. */

.add-food-rich-text[b-nnx55b2dbr]  :is(p, ul, ol, blockquote, pre) {
    margin: 0 0 1rem;
}

.add-food-rich-text[b-nnx55b2dbr]  :is(p, ul, ol, blockquote, pre):last-child {
    margin-bottom: 0;
}

.add-food-rich-text[b-nnx55b2dbr]  strong {
    color: var(--color-oyster-900);
    font-weight: 800;
}

.add-food-rich-text[b-nnx55b2dbr]  em {
    color: var(--color-oyster-600);
}

.add-food-rich-text[b-nnx55b2dbr]  :is(ul, ol) {
    padding-left: 1.2rem;
}

.add-food-rich-text[b-nnx55b2dbr]  li {
    margin: 0.15rem 0;
}

.add-food-rich-text[b-nnx55b2dbr]  code {
    background: var(--color-oyster-200);
    color: var(--color-indigo-600);
    border-radius: 0.25rem;
    padding: 0.1rem 0.3rem;
    font-size: 0.9em;
}

.add-food-rich-text[b-nnx55b2dbr]  a {
    color: var(--color-indigo-600);
    text-decoration: underline;
}

.add-food-rich-text[b-nnx55b2dbr]  table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--color-oyster-300);
    margin: 0 0 1rem;
    font-size: 13px;
}

.add-food-rich-text[b-nnx55b2dbr]  table:last-child {
    margin-bottom: 0;
}

.add-food-rich-text[b-nnx55b2dbr]  thead th {
    background: var(--color-oyster-200);
    color: var(--color-oyster-800);
    font-weight: 800;
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--color-oyster-300);
}

.add-food-rich-text[b-nnx55b2dbr]  tbody td {
    padding: 0.4rem 0.75rem;
    border-bottom: 1px solid var(--color-oyster-200);
    color: var(--color-oyster-800);
}

.add-food-rich-text[b-nnx55b2dbr]  tbody tr:last-child td {
    border-bottom: none;
}

.add-food-rich-text[b-nnx55b2dbr]  tbody tr:nth-child(even) {
    background: rgba(37, 80, 124, 0.03);
}

.add-food-attachments[b-nnx55b2dbr] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.add-food-tool-chips[b-nnx55b2dbr] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
    margin-bottom: 0.65rem;
}

/* The thumb's open button (INTEL-380): no chrome of its own, so the thumb looks as it did. */
.add-food-attachment-open[b-nnx55b2dbr] {
    display: block;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    border-radius: 10px;
    cursor: zoom-in;
    line-height: 0;
}

.add-food-attachment-open:focus-visible[b-nnx55b2dbr] {
    outline: 2px solid var(--color-indigo-600);
    outline-offset: 2px;
}

.add-food-attachment-preview[b-nnx55b2dbr] {
    display: block;
    width: 144px;
    height: 144px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--color-oyster-300);
    background: #ffffff;
}

.add-food-file-pill[b-nnx55b2dbr],
.add-food-tool-chip[b-nnx55b2dbr] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    border-radius: 999px;
    border: 1px solid var(--color-oyster-300);
    background: var(--color-oyster-200);
    color: var(--color-oyster-600);
    font-size: 12px;
    font-weight: 700;
    padding: 0.35rem 0.65rem;
}

.add-food-file-pill span:last-child[b-nnx55b2dbr] {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.add-food-tool-chip-active[b-nnx55b2dbr] {
    background: var(--color-primary-soft);
    border-color: var(--color-indigo-200);
    color: var(--color-indigo-600);
}

.add-food-narration-row[b-nnx55b2dbr] {
    display: flex;
    margin-top: 12px;
    padding-left: 46px;
}

.add-food-system-note[b-nnx55b2dbr] {
    color: var(--color-oyster-500);
    font-size: 12px;
    font-style: italic;
}

/* Positioning wrapper only; the dots themselves come from the shared
   <ThinkingDots /> component. */
.add-food-typing[b-nnx55b2dbr] {
    display: inline-flex;
    align-items: center;
    padding-top: 6px;
}

/* Trailing indicator rendered at the tail of the live assistant bubble (after any
   streamed text or tool chips). A little top breathing room separates it from the
   content above when the bubble already has text. */
.add-food-typing-inline[b-nnx55b2dbr] {
    margin-top: 2px;
}

@keyframes addFoodRingBloom-b-nnx55b2dbr {
    0% { transform: scale(1); opacity: 0.48; }
    55% { opacity: 0.16; }
    100% { transform: scale(3.2); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .add-food-welcome-ring[b-nnx55b2dbr] {
        animation: none;
    }
}

@media (max-width: 640px) {
    .add-food-transcript[b-nnx55b2dbr] {
        padding: 1rem 0.875rem;
    }

    .add-food-msg-avatar-col[b-nnx55b2dbr] {
        width: 30px;
        min-width: 30px;
    }

    .add-food-assistant-avatar[b-nnx55b2dbr],
    .add-food-user-avatar[b-nnx55b2dbr] {
        width: 30px;
        height: 30px;
    }
}

/* The v2 WISEcode AI shell (Wci): the lines are WciTranscriptLine, which owns the avatars, the sent ask's wash and
   the thinking ring. The wash runs the chat module edge to edge, so it needs to know how far the edges are: the
   scroll region's own inline padding (WciTranscriptLine reads --sc-gutter). The copy takes the line's colour and
   size, so the shared text block stops setting its own. */
.add-food-transcript--wci[b-nnx55b2dbr] {
    background: transparent;
    padding: 22px 26px 8px;
    --sc-gutter: 26px;
}

.add-food-transcript--wci .add-food-msg-text[b-nnx55b2dbr] {
    max-width: none;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

@media (max-width: 640px) {
    .add-food-transcript--wci[b-nnx55b2dbr] {
        padding: 1rem 0.875rem;
        --sc-gutter: 0.875rem;
    }
}
/* /Components/Shared/AddFoodChat/EndOfSessionSummary.razor.rz.scp.css */
.add-food-session-summary[b-z2isqwr33x] {
    background: #ffffff;
}

.add-food-session-summary h2[b-z2isqwr33x],
.add-food-session-name[b-z2isqwr33x] {
    color: var(--color-oyster-900);
}

.add-food-session-summary p[b-z2isqwr33x],
.add-food-session-meta[b-z2isqwr33x] {
    color: var(--color-oyster-500);
}

.add-food-session-card[b-z2isqwr33x] {
    background: #ffffff;
    border: 1px solid var(--color-oyster-300);
}

.add-food-session-avatar[b-z2isqwr33x] {
    background: var(--color-oyster-200);
    color: var(--color-indigo-600);
}


/* /Components/Shared/AddFoodChat/FoodChatStepTracker.razor.rz.scp.css */
/* The tracker sits in the chat pane, whose width has nothing to do with the
   viewport (it shares the screen with the product and detail panes), so it
   sizes itself from its own container rather than from media queries. */
.step-tracker-frame[b-ifvqiy6n6z] {
    container-type: inline-size;
    border-bottom: 1px solid var(--color-oyster-300);
    background: #ffffff;
}

.step-tracker[b-ifvqiy6n6z] {
    display: flex;
    align-items: center;
    /* safe: when the steps cannot fit, overflow at the end instead of clipping the first step. */
    justify-content: safe center;
    padding: 10px 16px;
    gap: 0;
    min-height: 52px;
}

.step-item[b-ifvqiy6n6z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.step-circle[b-ifvqiy6n6z] {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.step-label[b-ifvqiy6n6z] {
    font-size: 0.625rem;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1;
    text-align: center;
}

/* Connectors give up their width first, so the steps fit whatever the pane is. */
.step-connector[b-ifvqiy6n6z] {
    flex: 1 1 48px;
    min-width: 8px;
    max-width: 48px;
    height: 2px;
    margin-bottom: 16px;
    border-radius: 1px;
    transition: background 0.2s ease;
}

/* Narrow pane: two-word labels stack onto two lines. */
@container (max-width: 640px) {
    .step-tracker[b-ifvqiy6n6z] {
        padding: 8px 12px;
    }

    .step-label[b-ifvqiy6n6z] {
        white-space: normal;
        max-width: 4rem;
        line-height: 1.15;
    }

    .step-connector[b-ifvqiy6n6z] {
        margin-bottom: 22px;
    }
}

/* Very narrow pane: circles only. */
@container (max-width: 380px) {
    .step-label[b-ifvqiy6n6z] {
        display: none;
    }

    .step-connector[b-ifvqiy6n6z] {
        margin-bottom: 0;
    }
}
/* /Components/Shared/AddFoodChat/IngredientListModule.razor.rz.scp.css */
/* The Ingredient List module (WISE Intelligence v2). App-owned layout over the design tokens; the inset matches the drawer's
   own body (SingleFoodWorkspace.razor.css .ia-body), which clears the tuck under Product Details. */
.ilm-actions[b-xobv52th8g] { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 16px 16px var(--module-head-pad-l, 20px); }
.ilm-verify[b-xobv52th8g] { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 4px 16px 16px var(--module-head-pad-l, 20px); }
.ilm-verify-back[b-xobv52th8g] { display: flex; }

.ilm-parsed-list[b-xobv52th8g] { position: relative; list-style: none; padding: 12px; margin: 0; }
.ilm-parsed-row[b-xobv52th8g] { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); }

/* Source: ip-b2b product-details.css IA tree/table/Match families, local 2026-10-09. */
.nfp-ia-table[b-xobv52th8g] { display: flex; flex-direction: column; min-width: 0; overflow-x: auto; }
.nfp-ia-th[b-xobv52th8g], .nfp-ia-row[b-xobv52th8g] {
  display: grid; gap: 8px; align-items: center; min-width: 220px;
}
.nfp-ia-table--parsed .nfp-ia-th[b-xobv52th8g],
.nfp-ia-table--parsed .nfp-ia-row[b-xobv52th8g] {
  grid-template-columns: minmax(88px, 1.25fr) minmax(64px, 0.9fr) minmax(84px, 40%);
  align-items: start;
}
.nfp-ia-table--codes .nfp-ia-th[b-xobv52th8g],
.nfp-ia-table--codes .nfp-ia-row[b-xobv52th8g] { grid-template-columns: minmax(90px, 1.4fr) minmax(72px, 0.9fr) minmax(56px, max-content); align-items: start; }
.nfp-ia-table--codes .nfp-ia-th > :last-child[b-xobv52th8g],
.nfp-ia-table--codes .nfp-ia-td--num[b-xobv52th8g] { justify-self: end; text-align: right; }
.nfp-ia-table--nut .nfp-ia-th[b-xobv52th8g],
.nfp-ia-table--nut .nfp-ia-row[b-xobv52th8g] { grid-template-columns: minmax(70px, 1.2fr) minmax(72px, 0.8fr) minmax(36px, 0.5fr); }
.nfp-ia-table--scout .nfp-ia-th[b-xobv52th8g],
.nfp-ia-table--scout .nfp-ia-row[b-xobv52th8g] { grid-template-columns: minmax(64px, 1.1fr) minmax(56px, 0.9fr) minmax(72px, 1fr) minmax(52px, auto); align-items: start; }
.nfp-ia-th[b-xobv52th8g] {
  padding: 0 2px 6px; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-subtle); border-bottom: 1px solid var(--border);
}
.nfp-ia-row[b-xobv52th8g] {
  padding: 7px 2px; border-bottom: 1px solid var(--border); font-size: 0.68rem; color: var(--text);
  animation: nfp-ia-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 38ms);
}
.nfp-ia-row:last-child[b-xobv52th8g] { border-bottom: 0; }
.nfp-ia-tree[b-xobv52th8g] {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px 6px; position: relative;
  padding-left: calc(4px + min(12, var(--d, 0)) * 8px);
  text-transform: capitalize;
}
.nfp-ia-tree-name[b-xobv52th8g] { min-width: 0; overflow-wrap: anywhere; }
.nfp-ia-owl[b-xobv52th8g] {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; align-self: center;
  margin: 0; padding: 0; border: 0; background: none;
  color: var(--primary); cursor: pointer; line-height: 0; opacity: 0.72;
}
.nfp-ia-owl:hover[b-xobv52th8g], .nfp-ia-owl:focus-visible[b-xobv52th8g] { opacity: 1; color: var(--primary-ink, var(--primary)); }
.nfp-ia-owl[b-xobv52th8g]  svg { height: 9px; width: auto; display: block; }
/* The row's own copy of the owl's lookup — the same match option cards the
   chat lands, expanded under the ingredient, without the transcript. */
.nfp-ia-parsed-row[data-depth="0"] .nfp-ia-tree[b-xobv52th8g],
.nfp-ia-scout-row[data-depth="0"] .nfp-ia-tree[b-xobv52th8g] { font-weight: 700; padding-left: 2px; }
.nfp-ia-parsed-row.is-group .nfp-ia-tree[b-xobv52th8g],
.nfp-ia-scout-row.is-group .nfp-ia-tree[b-xobv52th8g] { font-weight: 700; }
.nfp-ia-row:not([data-depth="0"]) .nfp-ia-tree[b-xobv52th8g]::before {
  content: '';
  position: absolute;
  left: calc(min(12, var(--d, 1)) * 8px - 4px);
  top: 0.65em;
  width: 8px; height: 1px;
  background: var(--border);
}
.nfp-ia-parsed-row.is-group[b-xobv52th8g],
.nfp-ia-scout-row.is-group[b-xobv52th8g] {
  background: color-mix(in srgb, var(--text) 4%, transparent);
}
html.dark .nfp-ia-parsed-row.is-group[b-xobv52th8g],
html.dark .nfp-ia-scout-row.is-group[b-xobv52th8g] {
  background: color-mix(in srgb, var(--surface) 6%, transparent);
}
.nfp-ia-scout-row.is-child .nfp-ia-td:first-child[b-xobv52th8g] { padding-left: 0; color: inherit; }
.nfp-ia-td[b-xobv52th8g] { min-width: 0; overflow-wrap: anywhere; }
.nfp-ia-td--num[b-xobv52th8g] { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.nfp-ia-td--amt[b-xobv52th8g] { display: inline-flex; align-items: baseline; gap: 4px; }
.nfp-ia-unit[b-xobv52th8g] { font-weight: 600; color: var(--text-muted); }
.nfp-ia-subcat[b-xobv52th8g] { font-size: 0.62rem; color: var(--text-muted); overflow-wrap: anywhere; }
.nfp-ia-den[b-xobv52th8g] { font-size: 0.58rem; font-weight: 600; color: var(--text-subtle); margin-left: 2px; }
.nfp-ia-empty[b-xobv52th8g] { font-size: 0.7rem; color: var(--text-muted); font-style: italic; margin: 4px 0 0; }
.nfp-ia-pill[b-xobv52th8g] {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px 8px; border-radius: 999px; font-size: 0.62rem; font-weight: 700; white-space: nowrap;
}
.nfp-ia-td--mapstack[b-xobv52th8g] { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.nfp-ia-td--mapped[b-xobv52th8g] { min-width: 0; }
.nfp-ia-td--match[b-xobv52th8g] { display: flex; align-items: flex-start; justify-content: flex-start; }
.nfp-ia-mapped[b-xobv52th8g] { font-weight: 700; letter-spacing: 0.01em; overflow-wrap: anywhere; }
.nfp-ia-pill--ok[b-xobv52th8g] { background: var(--sec-green-10); color: var(--sec-green-text); }
.nfp-ia-pill--part[b-xobv52th8g], .nfp-ia-pill--warn[b-xobv52th8g] { background: var(--ter-amber-10); color: var(--ter-amber-text); }
.nfp-ia-pill--bad[b-xobv52th8g] { background: var(--sec-red-10); color: var(--sec-red-text); }
/* In review: waiting on WISEcode's team, not the member (the WciStatusChip blue tone). */
.nfp-ia-pill--info[b-xobv52th8g] { background: color-mix(in srgb, var(--score-ink-blue, var(--primary)) 16%, transparent); color: var(--score-ink-blue, var(--primary-ink, var(--primary))); }
.nfp-ia-pill-wrap[b-xobv52th8g] { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.nfp-ia-pill-ico[b-xobv52th8g] { font-size: 15px !important; color: var(--text-subtle); }
.nfp-ia-confirm[b-xobv52th8g] {
  border: 0; background: transparent; color: var(--primary-ink, var(--primary));
  font-size: 0.62rem; font-weight: 800; cursor: pointer; padding: 0; text-decoration: underline;
}

.nfp-ia-table[b-xobv52th8g] { margin: 0; padding: 0 2px 8px; }
.nfp-ia-mapped[b-xobv52th8g] { text-transform: uppercase; }
/* /Components/Shared/AddFoodChat/IngredientListSections.razor.rz.scp.css */
/* The Ingredient List drawer's sections (WISE Intelligence v2). App-owned layout over the design tokens; the padding
   matches the drawer's own body (SingleFoodWorkspace.razor.css .ia-body). */
.ils[b-y7enkfutud] { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.ils-switch[b-y7enkfutud] { padding: 4px 16px 6px var(--module-head-pad-l, 20px); }
.ils-body[b-y7enkfutud] { padding: 4px 16px 16px var(--module-head-pad-l, 20px); display: flex; flex-direction: column; gap: 10px; overflow-y: auto; min-height: 0; }
.ils-lede[b-y7enkfutud] { margin: 0; font-size: var(--fs-ui); color: var(--text-muted); }
.ils-error[b-y7enkfutud] { margin: 0; font-size: var(--fs-ui); color: var(--sec-red-text); }

/* Source: ip-b2b product-details.css 1266-1310 (IA_SECTIONS), local 2026-10-09. */
.nfp-ia[b-y7enkfutud] { display: flex; flex-direction: column; gap: 8px; padding: 10px 10px 16px; min-width: 0; overflow-y: auto; }
.nfp-ia-sec[b-y7enkfutud] { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; flex-shrink: 0; }
.nfp-ia-head[b-y7enkfutud] { width: 100%; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 0; background: transparent; color: var(--text); cursor: pointer; text-align: left; flex-wrap: wrap; }
.nfp-ia-head:hover[b-y7enkfutud] { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.nfp-ia-title[b-y7enkfutud] { font-family: var(--font-serif); font-size: .95rem; font-weight: 700; letter-spacing: -.01em; flex: 1 1 8rem; min-width: 0; }
.nfp-ia-chev[b-y7enkfutud] { font-size: 20px !important; color: var(--text-subtle); flex-shrink: 0; transition: transform .18s ease; }
.nfp-ia-sec.is-collapsed .nfp-ia-chev[b-y7enkfutud] { transform: rotate(-90deg); }
.nfp-ia-body[b-y7enkfutud] { padding: 0 12px 12px; min-width: 0; }
.nfp-ia-body .ils-body[b-y7enkfutud] { padding: 0; }
.nfp-ia-body[b-y7enkfutud]  .ia-body { padding: 0; overflow: visible; }
@media (prefers-reduced-motion: reduce) { .nfp-ia-chev[b-y7enkfutud] { transition: none; } }

/* APP-OWNED ADDITIONS: internal sections share the staff accent. */
.wci-staff-section[b-y7enkfutud] { border-left: 2px solid color-mix(in srgb, var(--staff-ink) 35%, transparent); }
.wci-staff-section .nfp-ia-title[b-y7enkfutud] { color: var(--staff-ink); display: inline-flex; align-items: center; gap: 6px; }

.wci-parsed-heading[b-y7enkfutud] { margin: 0; padding: 10px 12px; color: var(--text); font-family: var(--font-serif); font-size: .95rem; font-weight: 700; letter-spacing: -.01em; }
/* /Components/Shared/AddFoodChat/IngredientLookupCard.razor.rz.scp.css */
/* Source: ip-b2b wise.css sc-il-* (9051-9131), iaLookupCardHTML. Local 2026-10-09; token paints. */
.sc-il-card[b-73l0hy1i7s] {
  display: flex; align-items: flex-start; gap: 10px;
  width: 100%; box-sizing: border-box; text-align: left;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  padding: 11px 13px;
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  color: var(--text-muted);
  cursor: pointer;
  font: inherit;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.sc-il-card:hover[b-73l0hy1i7s],
.sc-il-card:focus-visible[b-73l0hy1i7s] {
  background: color-mix(in srgb, var(--primary) 16%, var(--surface));
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border-strong));
  color: var(--text);
}
.sc-il-card.is-dim[b-73l0hy1i7s] { opacity: 0.35; pointer-events: none; }
.sc-il-card.is-picked[b-73l0hy1i7s] { border-color: var(--primary); opacity: 1; }
.sc-il-ic[b-73l0hy1i7s] {
  flex-shrink: 0; margin-top: 1px;
  font-size: 17px !important; line-height: 1;
  color: var(--primary);
}
.sc-il-card-main[b-73l0hy1i7s] { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.sc-il-head[b-73l0hy1i7s] { display: flex; align-items: baseline; gap: 8px; width: 100%; min-width: 0; }
.sc-il-name[b-73l0hy1i7s] { font-size: 0.81rem; font-weight: 800; letter-spacing: 0.01em; color: var(--text); }
.sc-il-head .sc-il-name[b-73l0hy1i7s] { flex: 1; min-width: 0; }
.sc-il-score[b-73l0hy1i7s] {
  flex-shrink: 0;
  font-size: 0.8rem; font-weight: 800; letter-spacing: -0.02em;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.sc-il-cat[b-73l0hy1i7s] {
  font-size: 0.68rem; font-weight: 600;
  color: var(--primary-ink, var(--primary));
  text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px;
}
.sc-il-desc[b-73l0hy1i7s] { font-size: 0.71rem; color: var(--text-muted); margin-top: 5px; line-height: 1.5; }
.sc-il-bar.dash-ws-health-bar[b-73l0hy1i7s] {
  display: block; max-width: none; margin: 8px 0 2px;
}
.sc-il-bar .dash-ws-health-track[b-73l0hy1i7s] { display: block; height: 4px; }
.sc-il-bar .dash-ws-health-fill.dash-metric-fill[b-73l0hy1i7s] {
  min-width: 0; padding-right: 0;
  animation: sc-il-fill-b-73l0hy1i7s 1.15s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.sc-il-hint[b-73l0hy1i7s] { font-size: 0.7rem; color: var(--text-muted); line-height: 1.5; }
@keyframes sc-il-fill-b-73l0hy1i7s { from { width: 0; } }

/* APP-OWNED: real shortlist actions and busy state. */
.wci-ingredient-lookup[b-73l0hy1i7s] { position: relative; color: var(--text); }
.wci-ingredient-lookup h3[b-73l0hy1i7s] { font-family: var(--font-serif); font-size: .95rem; margin: 0 0 8px; }
.sc-il-wrap[b-73l0hy1i7s] { margin: 0 0 8px; }
.sc-il-bar[b-73l0hy1i7s] { width: 100%; }
.dash-ws-health-track[b-73l0hy1i7s] { width: 100%; background: var(--sec-green-10); border-radius: 999px; overflow: hidden; }
.dash-ws-health-fill[b-73l0hy1i7s] { display: block; height: 4px; background: var(--sec-green); }
.sc-il-score[b-73l0hy1i7s] { color: var(--sec-green-text); }
.sc-il-card-main[b-73l0hy1i7s]  .wise-btn { margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .dash-metric-fill[b-73l0hy1i7s] { animation: none !important; } }
/* /Components/Shared/AddFoodChat/PaneHeader.razor.rz.scp.css */
/* THE single header system for the Add-with-AI modal. Every pane's header band is this one
   rule set: same 60px height, same type scale, same padding, same white background, same
   bottom border. Change it here and all four panes move together, which is the entire point
   of the component existing (see PaneHeader.razor for why a shared CSS class could not do
   this job under Blazor's scoped CSS).

   Per-pane content (status pills, the history toggle, the count chip) is passed in as a
   RenderFragment and keeps the CALLING component's scoped styles. Do not add pane-specific
   rules to this file. */

.pane-header[b-du5zvni2mb] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 60px;
    padding: 0.625rem 1.25rem;
    background: #ffffff;
    border-bottom: 1px solid var(--color-oyster-300);
    flex-shrink: 0;
}

/* A pane too narrow for the full gutter (the 48px collapsed history rail). */
.pane-header-compact[b-du5zvni2mb] {
    padding: 0.625rem 0.5rem;
    justify-content: center;
}

/* For a pane that scrolls under its own header. Released on small screens, where the pane is
   short enough that a pinned band costs more than it gives. */
.pane-header-sticky[b-du5zvni2mb] {
    position: sticky;
    top: 0;
    z-index: 20;
}

.pane-header-text[b-du5zvni2mb] {
    flex: 1 1 auto;
    min-width: 0;
}

.pane-header-title[b-du5zvni2mb] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-oyster-900);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pane-header-subtitle[b-du5zvni2mb] {
    margin: 2px 0 0;
    font-size: 0.8125rem;
    line-height: 1.35;
    font-weight: 400;
    color: var(--color-oyster-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* "This is on hold", not "do this". */
.pane-header-subtitle.muted[b-du5zvni2mb] {
    color: var(--color-oyster-400);
    font-style: italic;
}

.pane-header-trailing[b-du5zvni2mb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    margin-left: auto;
}

/* A band with no pill and no close button must not pay for the row gap. */
.pane-header-trailing:empty[b-du5zvni2mb] {
    display: none;
}

/* The assistant's mark, carried by the chat rails now that the modal has no top bar. */
.pane-header-avatar[b-du5zvni2mb] {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 999px;
    background: var(--color-indigo-600);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    box-shadow: 0 0 24px rgba(37, 80, 124, 0.28);
}

.pane-header-avatar img[b-du5zvni2mb] {
    width: 100%;
    height: 100%;
    filter: brightness(0) invert(1);
}

@media (max-width: 900px) {
    .pane-header-sticky[b-du5zvni2mb] {
        position: static;
    }
}

@media (max-width: 640px) {
    .pane-header[b-du5zvni2mb] {
        padding: 0.625rem 1rem;
    }
}
/* /Components/Shared/AddFoodChat/ParseAttestationModal.razor.rz.scp.css */
/* Scoped CSS for ParseAttestationModal. Mirrors the FoodDetails parsed-tree presentation
   for a chat-side read-only viewer. We can't reach FoodDetails.razor.css ::deep selectors
   from this scope, so the relevant base + tree styles are restated here. Action affordances
   (flag, confirm, lookup) live in FoodDetails-only state, so their styles are intentionally
   omitted — the IsReadOnly path on ParsedIngredientRow doesn't render any of them. */

.readonly-parsed-tree-scroll[b-exivwlb6f4] {
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: clip;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

[b-exivwlb6f4] .readonly-parsed-tree { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
[b-exivwlb6f4] .readonly-parsed-tree thead th {
    background: #f9fafb; padding: 8px 14px; text-align: left;
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: #6b7280;
    border-bottom: 1px solid #e5e7eb;
    position: sticky; top: 0; z-index: 10;
}
[b-exivwlb6f4] .readonly-parsed-tree tbody td {
    padding: 7px 14px; color: #374151;
    border-bottom: 1px solid #f3f4f6; vertical-align: middle;
}
[b-exivwlb6f4] .readonly-parsed-tree tbody tr:last-child td { border-bottom: none; }
[b-exivwlb6f4] .readonly-parsed-tree td:nth-child(3) { white-space: nowrap; }

/* ── Tree indent rails ── mirrors IngredientsVerification.razor.css */
[b-exivwlb6f4] .readonly-parsed-tree .tree-cell { padding-left: 4px; }
[b-exivwlb6f4] .readonly-parsed-tree .tree-cell-inner { display: flex; align-items: center; }
[b-exivwlb6f4] .readonly-parsed-tree .tree-cell-railed .tree-cell-inner { height: 100%; }
[b-exivwlb6f4] .readonly-parsed-tree .tree-rail {
    display: inline-block;
    flex: 0 0 auto;
    width: 22px;
    align-self: stretch;
    position: relative;
}
/* Pipes extend past the rail box to bridge cell padding + border — see
   IngredientsVerification.razor.css comment for the math. */
[b-exivwlb6f4] .readonly-parsed-tree .tree-rail-continue::before,
[b-exivwlb6f4] .readonly-parsed-tree .tree-rail-branch::before,
[b-exivwlb6f4] .readonly-parsed-tree .tree-rail-lastbranch::before {
    content: ''; position: absolute; left: 10px;
    width: 1.5px; background: #94a3b8;
}
[b-exivwlb6f4] .readonly-parsed-tree .tree-rail-continue::before,
[b-exivwlb6f4] .readonly-parsed-tree .tree-rail-branch::before { top: -8px; bottom: -9px; }
[b-exivwlb6f4] .readonly-parsed-tree .tree-rail-lastbranch::before { top: -8px; height: calc(50% + 8px); }
[b-exivwlb6f4] .readonly-parsed-tree .tree-rail-branch::after,
[b-exivwlb6f4] .readonly-parsed-tree .tree-rail-lastbranch::after {
    content: ''; position: absolute; top: 50%; left: 10px;
    width: 11px; height: 1.5px; background: #94a3b8;
    transform: translateY(-0.5px);
}

/* ── Tree name styles ── */
[b-exivwlb6f4] .readonly-parsed-tree .tree-name-root { font-weight: 600; color: #111827; text-transform: capitalize; }
[b-exivwlb6f4] .readonly-parsed-tree .tree-name-child { color: #374151; text-transform: capitalize; }

/* ── Depth-based row tinting ── */
[b-exivwlb6f4] .readonly-parsed-tree tr[data-depth] {
    background: hsl(220 14% calc(99% - min(var(--tree-depth, 0), 10) * 0.55%));
}

[b-exivwlb6f4] .readonly-parsed-tree .parser-norm-static { font-size: 0.78rem; }

/* ── Match badges ── */
[b-exivwlb6f4] .readonly-parsed-tree .match-cell { display: inline-flex; align-items: center; gap: 5px; }
[b-exivwlb6f4] .readonly-parsed-tree .code-interp-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.68rem; font-weight: 600; }
[b-exivwlb6f4] .readonly-parsed-tree .code-badge-green { background: #dcfce7; color: #166534; }
[b-exivwlb6f4] .readonly-parsed-tree .code-badge-yellow { background: #fef3c7; color: #92400e; }
[b-exivwlb6f4] .readonly-parsed-tree .code-badge-red { background: #fee2e2; color: #991b1b; }
[b-exivwlb6f4] .readonly-parsed-tree .code-badge-gray { background: #f3f4f6; color: #374151; }
[b-exivwlb6f4] .readonly-parsed-tree .code-badge-audited { background: var(--color-primary-soft); color: var(--color-primary); }
[b-exivwlb6f4] .readonly-parsed-tree .audited-badge {
    display: inline-flex; align-items: center; gap: 2px;
    font-size: 0.6rem; font-weight: 700;
    background: #dbeafe; color: #1e3a8a;
    border-radius: 4px; padding: 1px 5px; margin-left: 4px; vertical-align: middle;
}

/* The audit-note tooltip stays informational even in read-only mode. */
[b-exivwlb6f4] .readonly-parsed-tree .ingred-flag-hover {
    position: relative; display: inline-flex; align-items: center;
}
[b-exivwlb6f4] .readonly-parsed-tree .ingred-flag-popup {
    position: absolute; bottom: calc(100% + 6px); right: 0; z-index: 50;
    width: 280px; padding: 10px 12px;
    background: #fff; border: 1.5px solid var(--color-indigo-600); border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    text-align: left; white-space: normal;
    font-weight: 400; font-size: 0.78rem; line-height: 1.45; color: #1f2937;
    visibility: hidden; opacity: 0;
    transition: visibility 0s linear 0s, opacity 0.15s ease 0s;
}
[b-exivwlb6f4] .readonly-parsed-tree .ingred-flag-hover:hover .ingred-flag-popup,
[b-exivwlb6f4] .readonly-parsed-tree .ingred-flag-hover:focus-within .ingred-flag-popup {
    visibility: visible; opacity: 1;
    transition: visibility 0s linear 0.5s, opacity 0.15s ease 0.5s;
}
[b-exivwlb6f4] .readonly-parsed-tree .ingred-flag-popup-header {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--color-primary); margin-bottom: 4px;
}
[b-exivwlb6f4] .readonly-parsed-tree .ingred-flag-popup-body { white-space: pre-wrap; }
/* /Components/Shared/AddFoodChat/ProductChipStrip.razor.rz.scp.css */
.add-food-product-chips[b-0qs0btxcd0] {
    background: #ffffff;
    border-bottom: 1px solid var(--color-oyster-300);
}

.add-food-product-chip[b-0qs0btxcd0] {
    background: var(--color-oyster-200);
    border: 1px solid transparent;
    color: var(--color-oyster-800);
    transition: background 0.15s ease, border-color 0.15s ease;
}

.add-food-product-chip:hover[b-0qs0btxcd0] {
    background: var(--color-oyster-300);
    border-color: var(--color-oyster-300);
}

.add-food-product-chip-active[b-0qs0btxcd0] {
    background: var(--color-indigo-600);
    border-color: var(--color-indigo-600);
    color: #ffffff;
}

.add-food-product-chip-remove:hover[b-0qs0btxcd0] {
    background: rgba(255, 255, 255, 0.2);
}
/* /Components/Shared/AddFoodChat/ProductIngredientsPane.razor.rz.scp.css */
/* The "not required" exemption note, in the drawer where the ingredient list used to be.
   Same shape as the spec sheet's requirement-exception row, drawn with WCI tokens. */
.ingredients-exempt[b-tnqpqrxgem] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    font-size: 0.8125rem;
    line-height: 1.45;
}

.ingredients-exempt > .material-icons[b-tnqpqrxgem] {
    color: var(--sec-green);
    font-size: 20px;
}

.ingredients-exempt > div[b-tnqpqrxgem] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ingredients-exempt span[b-tnqpqrxgem] {
    color: var(--text-muted);
}

/* An edit that could not be stored (a review lock or a turn landed while the box was open): the box went back to
   the stored list, and this says why. */
.ingredients-reverted[b-tnqpqrxgem] {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--ter-amber-text);
}
/* /Components/Shared/AddFoodChat/SingleFoodWorkspace.razor.rz.scp.css */
/* Layout for the one-product workspace: history rail, chat column, product sheet.
   These rules used to live in AddFoodChatModal.razor.css; they moved with the markup
   because Blazor's scoped CSS only reaches elements a component renders itself. */

.add-food-chat-main[b-qa6nsojoe3] {
    padding: 1.25rem;
    gap: 1rem;
    overflow: hidden;
}

.add-food-chat-conversation[b-qa6nsojoe3] {
    background: var(--color-oyster-100);
    border: 1px solid var(--color-oyster-300);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.05);
}

.add-food-chat-product-panel[b-qa6nsojoe3] {
    width: 360px;
    min-width: 360px;
    flex-shrink: 0;
    background: #ffffff;
    border: 1px solid var(--color-oyster-300);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.05);
}

/* Claim card for Discovered edit sessions: sits above the spec sheet so the
   review-then-claim step is visible next to the data being reviewed. Indigo
   tint (invitation, not warning) to contrast with the amber unsaved bar. */
.add-food-claim-card[b-qa6nsojoe3] {
    flex-shrink: 0;
    margin: 12px 12px 0;
    padding: 12px;
    border: 1px solid var(--color-indigo-200, #c7d2fe);
    border-radius: 12px;
    background: var(--color-indigo-50, #eef2ff);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.add-food-claim-lead[b-qa6nsojoe3] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.add-food-claim-lead > .material-icons[b-qa6nsojoe3] {
    color: var(--color-primary, #4f46e5);
    font-size: 20px;
    margin-top: 1px;
}

.add-food-claim-title[b-qa6nsojoe3] {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-oyster-900, #1a102c);
}

.add-food-claim-sub[b-qa6nsojoe3],
.add-food-claim-attest[b-qa6nsojoe3] {
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--color-oyster-600, #5d566a);
}

.add-food-claim-attest[b-qa6nsojoe3] {
    font-weight: 500;
    color: var(--color-oyster-900, #1a102c);
}

.add-food-claim-actions[b-qa6nsojoe3] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.add-food-claim-error[b-qa6nsojoe3] {
    font-size: 0.75rem;
    color: #b91c1c;
}

@media (max-width: 1180px) {
    .add-food-chat-main[b-qa6nsojoe3] {
        padding: 0;
        gap: 0;
    }

    .add-food-chat-conversation[b-qa6nsojoe3] {
        border-radius: 0;
        border-top: 0;
        border-bottom: 0;
    }

    .add-food-chat-product-panel[b-qa6nsojoe3] {
        width: 320px;
        min-width: 320px;
        border-radius: 0;
        border-top: 0;
        border-bottom: 0;
    }
}

@media (max-width: 900px) {
    .add-food-chat-main[b-qa6nsojoe3] {
        flex-direction: column;
    }

    .add-food-chat-product-panel[b-qa6nsojoe3] {
        width: 100%;
        min-width: 0;
        height: 42vh;
        border-left: 0;
        border-right: 0;
    }
}

/* ═══════════ WISE Intelligence v2: the WISEcode AI shell (WciShell) ═══════════
   The chat side (History, the chat module's topbar and welcome, the transcript and composer in the WISEcode AI look) is
   AddFoodShellChat's, shared with the catalog upload. What stays here is this workspace's own drawer. */

/* The Ingredient List drawer (the design's Ingredients Analyzer, #ia-body). */
/* The left inset clears the 50px tuck under Product Details and lines the rows up with the drawer's title. */
.ia-body[b-qa6nsojoe3] { padding: 4px 16px 16px var(--module-head-pad-l, 20px); display: flex; flex-direction: column; gap: 10px; overflow-y: auto; min-height: 0; }
.ia-summary[b-qa6nsojoe3] { margin: 0; font-size: var(--fs-ui); font-weight: 600; color: var(--text-muted); }
.ia-list[b-qa6nsojoe3] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ia-row[b-qa6nsojoe3] { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.ia-row:last-child[b-qa6nsojoe3] { border-bottom: 0; }
.ia-row-names[b-qa6nsojoe3] { display: flex; flex-direction: column; min-width: 0; }
.ia-row-name[b-qa6nsojoe3] { font-size: 0.8125rem; color: var(--text); overflow-wrap: anywhere; }
.ia-row-canon[b-qa6nsojoe3] { font-size: 0.6875rem; color: var(--text-muted); overflow-wrap: anywhere; }
.ia-actions[b-qa6nsojoe3] { display: flex; flex-wrap: wrap; gap: 8px; }

/* Source: ip-b2b product-details.css IA tree/table/Match families, local 2026-10-09. */
.nfp-ia-table[b-qa6nsojoe3] { display: flex; flex-direction: column; min-width: 0; overflow-x: auto; }
.nfp-ia-th[b-qa6nsojoe3], .nfp-ia-row[b-qa6nsojoe3] {
  display: grid; gap: 8px; align-items: center; min-width: 220px;
}
.nfp-ia-table--parsed .nfp-ia-th[b-qa6nsojoe3],
.nfp-ia-table--parsed .nfp-ia-row[b-qa6nsojoe3] {
  grid-template-columns: minmax(88px, 1.25fr) minmax(64px, 0.9fr) minmax(84px, 40%);
  align-items: start;
}
.nfp-ia-table--codes .nfp-ia-th[b-qa6nsojoe3],
.nfp-ia-table--codes .nfp-ia-row[b-qa6nsojoe3] { grid-template-columns: minmax(90px, 1.4fr) minmax(72px, 0.9fr) minmax(56px, max-content); align-items: start; }
.nfp-ia-table--codes .nfp-ia-th > :last-child[b-qa6nsojoe3],
.nfp-ia-table--codes .nfp-ia-td--num[b-qa6nsojoe3] { justify-self: end; text-align: right; }
.nfp-ia-table--nut .nfp-ia-th[b-qa6nsojoe3],
.nfp-ia-table--nut .nfp-ia-row[b-qa6nsojoe3] { grid-template-columns: minmax(70px, 1.2fr) minmax(72px, 0.8fr) minmax(36px, 0.5fr); }
.nfp-ia-table--scout .nfp-ia-th[b-qa6nsojoe3],
.nfp-ia-table--scout .nfp-ia-row[b-qa6nsojoe3] { grid-template-columns: minmax(64px, 1.1fr) minmax(56px, 0.9fr) minmax(72px, 1fr) minmax(52px, auto); align-items: start; }
.nfp-ia-th[b-qa6nsojoe3] {
  padding: 0 2px 6px; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-subtle); border-bottom: 1px solid var(--border);
}
.nfp-ia-row[b-qa6nsojoe3] {
  padding: 7px 2px; border-bottom: 1px solid var(--border); font-size: 0.68rem; color: var(--text);
  animation: nfp-ia-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 38ms);
}
.nfp-ia-row:last-child[b-qa6nsojoe3] { border-bottom: 0; }
.nfp-ia-tree[b-qa6nsojoe3] {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px 6px; position: relative;
  padding-left: calc(4px + min(12, var(--d, 0)) * 8px);
  text-transform: capitalize;
}
.nfp-ia-tree-name[b-qa6nsojoe3] { min-width: 0; overflow-wrap: anywhere; }
.nfp-ia-owl[b-qa6nsojoe3] {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; align-self: center;
  margin: 0; padding: 0; border: 0; background: none;
  color: var(--primary); cursor: pointer; line-height: 0; opacity: 0.72;
}
.nfp-ia-owl:hover[b-qa6nsojoe3], .nfp-ia-owl:focus-visible[b-qa6nsojoe3] { opacity: 1; color: var(--primary-ink, var(--primary)); }
.nfp-ia-owl[b-qa6nsojoe3]  svg { height: 9px; width: auto; display: block; }
/* The row's own copy of the owl's lookup — the same match option cards the
   chat lands, expanded under the ingredient, without the transcript. */
.nfp-ia-parsed-row[data-depth="0"] .nfp-ia-tree[b-qa6nsojoe3],
.nfp-ia-scout-row[data-depth="0"] .nfp-ia-tree[b-qa6nsojoe3] { font-weight: 700; padding-left: 2px; }
.nfp-ia-parsed-row.is-group .nfp-ia-tree[b-qa6nsojoe3],
.nfp-ia-scout-row.is-group .nfp-ia-tree[b-qa6nsojoe3] { font-weight: 700; }
.nfp-ia-row:not([data-depth="0"]) .nfp-ia-tree[b-qa6nsojoe3]::before {
  content: '';
  position: absolute;
  left: calc(min(12, var(--d, 1)) * 8px - 4px);
  top: 0.65em;
  width: 8px; height: 1px;
  background: var(--border);
}
.nfp-ia-parsed-row.is-group[b-qa6nsojoe3],
.nfp-ia-scout-row.is-group[b-qa6nsojoe3] {
  background: color-mix(in srgb, var(--text) 4%, transparent);
}
html.dark .nfp-ia-parsed-row.is-group[b-qa6nsojoe3],
html.dark .nfp-ia-scout-row.is-group[b-qa6nsojoe3] {
  background: color-mix(in srgb, var(--surface) 6%, transparent);
}
.nfp-ia-scout-row.is-child .nfp-ia-td:first-child[b-qa6nsojoe3] { padding-left: 0; color: inherit; }
.nfp-ia-td[b-qa6nsojoe3] { min-width: 0; overflow-wrap: anywhere; }
.nfp-ia-td--num[b-qa6nsojoe3] { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.nfp-ia-td--amt[b-qa6nsojoe3] { display: inline-flex; align-items: baseline; gap: 4px; }
.nfp-ia-unit[b-qa6nsojoe3] { font-weight: 600; color: var(--text-muted); }
.nfp-ia-subcat[b-qa6nsojoe3] { font-size: 0.62rem; color: var(--text-muted); overflow-wrap: anywhere; }
.nfp-ia-den[b-qa6nsojoe3] { font-size: 0.58rem; font-weight: 600; color: var(--text-subtle); margin-left: 2px; }
.nfp-ia-empty[b-qa6nsojoe3] { font-size: 0.7rem; color: var(--text-muted); font-style: italic; margin: 4px 0 0; }
.nfp-ia-pill[b-qa6nsojoe3] {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px 8px; border-radius: 999px; font-size: 0.62rem; font-weight: 700; white-space: nowrap;
}
.nfp-ia-td--mapstack[b-qa6nsojoe3] { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.nfp-ia-td--mapped[b-qa6nsojoe3] { min-width: 0; }
.nfp-ia-td--match[b-qa6nsojoe3] { display: flex; align-items: flex-start; justify-content: flex-start; }
.nfp-ia-mapped[b-qa6nsojoe3] { font-weight: 700; letter-spacing: 0.01em; overflow-wrap: anywhere; }
.nfp-ia-pill--ok[b-qa6nsojoe3] { background: var(--sec-green-10); color: var(--sec-green-text); }
.nfp-ia-pill--part[b-qa6nsojoe3], .nfp-ia-pill--warn[b-qa6nsojoe3] { background: var(--ter-amber-10); color: var(--ter-amber-text); }
.nfp-ia-pill--bad[b-qa6nsojoe3] { background: var(--sec-red-10); color: var(--sec-red-text); }
/* In review: waiting on WISEcode's team, not the member (the WciStatusChip blue tone). */
.nfp-ia-pill--info[b-qa6nsojoe3] { background: color-mix(in srgb, var(--score-ink-blue, var(--primary)) 16%, transparent); color: var(--score-ink-blue, var(--primary-ink, var(--primary))); }
.nfp-ia-pill-wrap[b-qa6nsojoe3] { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.nfp-ia-pill-ico[b-qa6nsojoe3] { font-size: 15px !important; color: var(--text-subtle); }
.nfp-ia-confirm[b-qa6nsojoe3] {
  border: 0; background: transparent; color: var(--primary-ink, var(--primary));
  font-size: 0.62rem; font-weight: 800; cursor: pointer; padding: 0; text-decoration: underline;
}

.nfp-ia-table[b-qa6nsojoe3] { margin: 0; padding: 0 2px 8px; }
.nfp-ia-mapped[b-qa6nsojoe3] { text-transform: uppercase; }
/* /Components/Shared/AddFoodChat/SpecSheetPane.razor.rz.scp.css */
.add-food-spec-pane[b-7rbzlvfkox] {
    background: #ffffff;
    color: var(--color-oyster-900);
}

/* The pane's header band is PaneHeader's, shared with every other pane in the Add-with-AI modal
   (its sticky positioning, its type scale, and the paused-subtitle treatment all live there).
   All that is ours is the count chip we slot into it. */

.add-food-spec-count[b-7rbzlvfkox],
.add-food-saved-pill[b-7rbzlvfkox] {
    border: 1px solid var(--color-indigo-200);
    background: var(--color-primary-soft);
    color: var(--color-indigo-600);
    font-size: 0.75rem;
    font-weight: 800;
    border-radius: 999px;
    padding: 0.25rem 0.55rem;
    white-space: nowrap;
}

/* Same shape as the Saved pill so the two read as one indicator swapping state, in amber rather
   than indigo: this is the "you still have work to do" half, not an error. */
.add-food-unsaved-pill[b-7rbzlvfkox] {
    border: 1px solid var(--color-amber-200, #fde68a);
    background: var(--color-amber-50, #fffbeb);
    color: var(--color-amber-700, #b45309);
    font-size: 0.75rem;
    font-weight: 800;
    border-radius: 999px;
    padding: 0.25rem 0.55rem;
    white-space: nowrap;
}

.add-food-empty-product .material-icons[b-7rbzlvfkox],
.add-food-empty-product p[b-7rbzlvfkox] {
    color: var(--color-oyster-500);
}

.add-food-empty-product[b-7rbzlvfkox] {
    position: relative;
    overflow: hidden;
}

.add-food-empty-product > .max-w-sm[b-7rbzlvfkox] {
    position: relative;
    z-index: 2;
}

.add-food-empty-product.scanning[b-7rbzlvfkox] {
    background: linear-gradient(180deg, #ffffff 0%, var(--color-oyster-100) 100%);
}

.add-food-empty-product.scanning .material-icons[b-7rbzlvfkox] {
    color: var(--color-primary);
}

.add-food-empty-product h2[b-7rbzlvfkox] {
    color: var(--color-oyster-900);
}

.add-food-spec-body[b-7rbzlvfkox] {
    padding: 1rem;
}

/* ── Product card ─────────────────────────────────────── */

.product-card[b-7rbzlvfkox] {
    background: #ffffff;
    border: 1px solid var(--color-oyster-300);
    border-radius: 12px;
    /* No overflow:hidden here — the category picker drops out of the bottom of the
       card and would be clipped to nothing. The hero image rounds its own top corners
       (see .product-image) so the card corners still read as rounded. */
    box-shadow: 0 1px 2px rgba(26, 16, 44, 0.04);
}

/* Geometry (4:3, white, padded, centred) comes from the shared `.food-showcase` class in
   components.css. Only this pane's extras live here. */
.product-image[b-7rbzlvfkox] {
    /* Rounds the hero to the card's top corners on its own, so .product-card
       doesn't need overflow:hidden (which would clip the category picker). */
    border-radius: 12px 12px 0 0;
}

/* Empty state keeps the linen tint; a bare white band with only a placeholder glyph
   reads as a rendering failure rather than "no image yet". */
.product-image:not(.has-image)[b-7rbzlvfkox] {
    background: var(--color-oyster-100);
}


.pv-brand-chip[b-7rbzlvfkox] {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    background: transparent;
    padding: 0;
    border: none;
    box-shadow: none;
}

/* The Saved / Not saved yet pill: top right of the photo band, level with the brand chip. */
.pv-status-chip[b-7rbzlvfkox] {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
}

.pv-brand-chip img[b-7rbzlvfkox] {
    width: auto;
    height: 28px;
    max-width: 80px;
    object-fit: contain;
    background: transparent;
    border: none;
    border-radius: 0;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18));
    display: block;
}

/* Solid white + a hairline edge: the band behind it is now white, so a translucent pill
   with only a soft shadow to define it would all but disappear. */
.pv-brand-chip span[b-7rbzlvfkox] {
    display: inline-block;
    background: var(--color-white);
    color: var(--color-oyster-900);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.02em;
    padding: 4px 8px;
    border: 1px solid var(--color-oyster-300);
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.product-image .placeholder[b-7rbzlvfkox] {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--color-primary-soft) 0%, var(--color-indigo-100) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    color: var(--color-oyster-600);
}

.product-image .placeholder .material-icons[b-7rbzlvfkox] {
    font-size: 28px;
    color: var(--color-primary);
}

.product-image .placeholder-label[b-7rbzlvfkox] {
    font-weight: 600;
}

/* UPC block sits below the nutrition facts panel, full-width with a quiet card frame. */
.upc-block[b-7rbzlvfkox] {
    margin-top: 14px;
    background: #ffffff;
    border: 1px solid var(--color-oyster-300);
    border-radius: 8px;
    padding: 14px 16px 10px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

.upc-block img[b-7rbzlvfkox] {
    width: 100%;
    height: 72px;
    display: block;
    object-fit: contain;
}

.upc-num[b-7rbzlvfkox] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    letter-spacing: 0.12em;
    color: var(--color-oyster-600);
    text-align: center;
}

/* Missing-UPC variant of the UPC block — same red tint as missing nutrient rows so
   the user notices it as a required field. The barcode itself is rendered with a
   placeholder UPC ("000000000000") and grayed out to read as a stand-in, not data. */
.upc-block.missing[b-7rbzlvfkox] {
    background-color: rgba(254, 202, 202, 0.32);
    transition: background-color 240ms ease-out;
}

.upc-block.missing.scanning[b-7rbzlvfkox] {
    position: relative;
    overflow: hidden;
    border-color: var(--color-indigo-200);
    background-color: var(--color-primary-soft);
}

.upc-block.missing img[b-7rbzlvfkox] {
    opacity: 0.45;
    filter: grayscale(1);
}

.upc-block.missing.scanning img[b-7rbzlvfkox] {
    opacity: 0.62;
    filter: grayscale(1) sepia(0.18) hue-rotate(190deg) saturate(1.2);
}

.upc-num-missing[b-7rbzlvfkox] {
    color: #b3261e;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.upc-block.missing.scanning .upc-num-missing[b-7rbzlvfkox] {
    color: var(--color-indigo-700);
}

/* ── Ingredients block ────────────────────────────────────
   Sits between the Nutrition Facts panel and the UPC block. Quiet card frame
   matching .upc-block; shows the raw ingredient string verbatim. When empty,
   takes the same red tint as a missing UPC so the user can see at a glance
   that the field still needs to be captured. */
.ingredients-block[b-7rbzlvfkox] {
    margin-top: 14px;
    background: #ffffff;
    border: 1px solid var(--color-oyster-300);
    border-radius: 8px;
    padding: 12px 16px 14px;
}

.ingredients-hdr[b-7rbzlvfkox] {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-oyster-600);
    margin-bottom: 6px;
}

.ingredients-text[b-7rbzlvfkox] {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--color-oyster-900);
    white-space: pre-wrap;
    word-break: break-word;
}

.ingredients-block.missing[b-7rbzlvfkox] {
    background-color: rgba(254, 202, 202, 0.32);
    transition: background-color 240ms ease-out;
}

.ingredients-block.missing.scanning[b-7rbzlvfkox] {
    position: relative;
    overflow: hidden;
    border-color: var(--color-indigo-200);
    background-color: var(--color-primary-soft);
}

.ingredients-text-missing[b-7rbzlvfkox] {
    margin: 0;
    font-size: 0.78rem;
    color: #b3261e;
    font-weight: 600;
    font-style: italic;
}

.ingredients-block.missing.scanning .ingredients-text-missing[b-7rbzlvfkox] {
    color: var(--color-indigo-700);
}

.ingredients-block.missing.scanning[b-7rbzlvfkox]::after,
.upc-block.missing.scanning[b-7rbzlvfkox]::after {
    content: "";
    position: absolute;
    left: 14px;
    bottom: 7px;
    width: 62%;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(37, 80, 124, 0.15) 10%,
        rgba(37, 80, 124, 0.9) 45%,
        rgba(56, 189, 248, 0.95) 55%,
        rgba(37, 80, 124, 0.15) 90%,
        transparent 100%);
    box-shadow:
        0 0 8px rgba(37, 80, 124, 0.65),
        0 0 18px rgba(56, 189, 248, 0.35);
    animation: row-scan-h-b-7rbzlvfkox 1.8s ease-in-out infinite;
    pointer-events: none;
}

/* ── Product body (name, brand, description, badges) ──── */

.product-body[b-7rbzlvfkox] {
    padding: 14px 16px;
}

.product-name[b-7rbzlvfkox] {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-oyster-900);
    line-height: 1.3;
    min-height: 20px;
}

.product-name.empty[b-7rbzlvfkox] {
    color: var(--color-oyster-500);
    font-weight: 400;
    font-style: italic;
}

.product-brand[b-7rbzlvfkox] {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-oyster-600);
    margin-top: 2px;
}

.product-description[b-7rbzlvfkox] {
    font-size: 12px;
    color: var(--color-oyster-600);
    margin-top: 6px;
    line-height: 1.45;
}

.product-price[b-7rbzlvfkox] {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-oyster-900);
    margin-top: 6px;
}

/* Category row: chips for the assigned categories, a picker popover (AI candidates on top,
   then the searchable catalog), and the edit-session AI suggestion badge. Missing state takes
   the same red tint as a missing UPC/ingredient block. */
.category-row[b-7rbzlvfkox] {
    position: relative;
    margin-top: 10px;
    border-radius: 8px;
    padding: 6px 8px 8px;
    margin-left: -8px;
    margin-right: -8px;
}

.category-row.missing[b-7rbzlvfkox] {
    background-color: rgba(254, 202, 202, 0.32);
    transition: background-color 240ms ease-out;
}

.category-hdr[b-7rbzlvfkox] {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-oyster-600);
    margin-bottom: 5px;
}

.category-chips[b-7rbzlvfkox] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.category-chip[b-7rbzlvfkox] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--color-primary-soft);
    color: var(--color-indigo-700);
}

.category-chip-remove[b-7rbzlvfkox] {
    display: inline-flex;
    align-items: center;
    border: none;
    background: transparent;
    padding: 0;
    margin-left: 2px;
    cursor: pointer;
    color: var(--color-indigo-700);
    opacity: 0.6;
}

.category-chip-remove:hover[b-7rbzlvfkox] {
    opacity: 1;
}

.category-chip-remove .material-icons[b-7rbzlvfkox] {
    font-size: 13px;
    line-height: 1;
}

.category-add-btn[b-7rbzlvfkox] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px dashed var(--color-oyster-400);
    background: transparent;
    color: var(--color-oyster-600);
    cursor: pointer;
}

.category-add-btn:hover[b-7rbzlvfkox] {
    border-color: var(--color-indigo-400);
    color: var(--color-indigo-700);
}

.category-add-btn .material-icons[b-7rbzlvfkox] {
    font-size: 13px;
    line-height: 1;
}

.category-add-btn.attention[b-7rbzlvfkox] {
    border-style: solid;
    border-color: #f0b4b0;
    color: #b3261e;
}

.category-none[b-7rbzlvfkox] {
    font-size: 11px;
    font-weight: 600;
    font-style: italic;
    color: #b3261e;
}

.category-suggestion[b-7rbzlvfkox] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 7px;
    padding: 5px 8px;
    border-radius: 8px;
    background: var(--color-primary-soft);
    font-size: 11.5px;
    color: var(--color-indigo-700);
}

.category-suggestion .material-icons[b-7rbzlvfkox] {
    font-size: 14px;
    line-height: 1;
}

.category-suggestion-text[b-7rbzlvfkox] {
    flex: 1;
    min-width: 120px;
}

.category-suggestion-btn[b-7rbzlvfkox] {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid var(--color-indigo-300);
    background: #ffffff;
    color: var(--color-indigo-700);
    cursor: pointer;
}

.category-suggestion-btn.accept[b-7rbzlvfkox] {
    background: var(--color-indigo-600, #4f46e5);
    border-color: var(--color-indigo-600, #4f46e5);
    color: #ffffff;
}

.category-suggestion-btn:disabled[b-7rbzlvfkox] {
    opacity: 0.5;
    cursor: default;
}

.category-picker-backdrop[b-7rbzlvfkox] {
    position: fixed;
    inset: 0;
    z-index: 30;
}

.category-picker[b-7rbzlvfkox] {
    position: absolute;
    z-index: 31;
    top: calc(100% - 2px);
    left: 8px;
    right: 8px;
    max-width: 340px;
    background: #ffffff;
    border: 1px solid var(--color-oyster-300);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
    padding: 8px;
}

.category-picker-search[b-7rbzlvfkox] {
    width: 100%;
    font-size: 12px;
    padding: 6px 9px;
    border: 1px solid var(--color-oyster-300);
    border-radius: 7px;
    margin-bottom: 6px;
}

.category-picker-search:focus[b-7rbzlvfkox] {
    outline: none;
    border-color: var(--color-indigo-400);
}

.category-picker-list[b-7rbzlvfkox] {
    max-height: 240px;
    overflow-y: auto;
    /* Long names wrap; the list never scrolls sideways. */
    overflow-x: hidden;
}

.category-picker-section[b-7rbzlvfkox] {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-oyster-500);
    padding: 5px 6px 3px;
}

.category-picker-option[b-7rbzlvfkox] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    text-align: left;
    font-size: 12px;
    padding: 6px 8px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--color-oyster-900);
    cursor: pointer;
}

.category-picker-option:hover[b-7rbzlvfkox] {
    background: var(--color-oyster-100);
}

.category-picker-confidence[b-7rbzlvfkox] {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--color-indigo-700);
    background: var(--color-primary-soft);
    border-radius: 999px;
    padding: 1px 7px;
}

.category-picker-empty[b-7rbzlvfkox] {
    font-size: 12px;
    color: var(--color-oyster-500);
    padding: 8px 6px;
}

.product-meta[b-7rbzlvfkox] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.meta-pill[b-7rbzlvfkox] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--color-oyster-100);
    color: var(--color-oyster-600);
}

.meta-pill .material-icons[b-7rbzlvfkox] {
    font-size: 13px;
    line-height: 1;
}

.meta-pill.success[b-7rbzlvfkox] {
    background: #dcfce7;
    color: #166534;
}

.meta-pill.warning[b-7rbzlvfkox] {
    background: #fef3c7;
    color: #854d0e;
}

.meta-pill.info[b-7rbzlvfkox] {
    background: var(--color-primary-soft);
    color: var(--color-indigo-700);
}

/* The shared <NutritionFactsLabel> component owns its own scoped styling, including
   the flash + missing tints. Wrapper div spaces the panel beneath the product card. */
.nf-label-wrap[b-7rbzlvfkox] {
    margin-top: 14px;
}

/* ── AI scan sweep ─────────────────────────────────────── */

.scan-sweep[b-7rbzlvfkox] {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(37, 80, 124, 0.08) 100%),
        rgba(37, 80, 124, 0.06);
}

.scan-bar[b-7rbzlvfkox] {
    position: absolute;
    left: -5%;
    right: -5%;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(37, 80, 124, 0.85) 20%,
        rgba(56, 189, 248, 1) 50%,
        rgba(37, 80, 124, 0.85) 80%,
        transparent 100%);
    box-shadow:
        0 0 10px rgba(37, 80, 124, 0.72),
        0 0 24px rgba(56, 189, 248, 0.44);
    animation: scan-sweep-b-7rbzlvfkox 2.2s ease-in-out infinite;
}

@keyframes scan-sweep-b-7rbzlvfkox {
    0% {
        top: 0%;
        opacity: 0.9;
    }
    50% {
        top: calc(100% - 3px);
        opacity: 1;
    }
    100% {
        top: 0%;
        opacity: 0.9;
    }
}

@keyframes row-scan-h-b-7rbzlvfkox {
    0% {
        transform: translateX(-45%);
        opacity: 0.55;
    }
    50% {
        transform: translateX(75%);
        opacity: 1;
    }
    100% {
        transform: translateX(-45%);
        opacity: 0.55;
    }
}

/* Field-change flash for chat-side product header (product name / brand / description /
   price). The NFP's own flash + missing rules live in NutritionFactsLabel.razor.css. */
@keyframes spec-field-flash-b-7rbzlvfkox {
    0% {
        background-color: rgba(37, 80, 124, 0.28);
        box-shadow: inset 0 0 0 1px rgba(37, 80, 124, 0.32);
    }
    40% {
        background-color: rgba(37, 80, 124, 0.18);
        box-shadow: inset 0 0 0 1px rgba(37, 80, 124, 0.18);
    }
    100% {
        background-color: transparent;
        box-shadow: inset 0 0 0 1px transparent;
    }
}

.product-name.flash-a[b-7rbzlvfkox],
.product-name.flash-b[b-7rbzlvfkox],
.product-brand.flash-a[b-7rbzlvfkox],
.product-brand.flash-b[b-7rbzlvfkox],
.product-description.flash-a[b-7rbzlvfkox],
.product-description.flash-b[b-7rbzlvfkox],
.product-price.flash-a[b-7rbzlvfkox],
.product-price.flash-b[b-7rbzlvfkox] {
    animation: spec-field-flash-b-7rbzlvfkox 2.4s ease-out;
    border-radius: 6px;
    padding: 2px 4px;
    margin-left: -4px;
    margin-right: -4px;
}

.category-row.flash-a[b-7rbzlvfkox],
.category-row.flash-b[b-7rbzlvfkox] {
    animation: spec-field-flash-b-7rbzlvfkox 2.4s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .scan-bar[b-7rbzlvfkox] {
        top: 50%;
        animation: scan-pulse-b-7rbzlvfkox 1.6s ease-in-out infinite;
    }

    .ingredients-block.missing.scanning[b-7rbzlvfkox]::after,
    .upc-block.missing.scanning[b-7rbzlvfkox]::after {
        animation: row-scan-pulse-b-7rbzlvfkox 1.6s ease-in-out infinite;
        transform: none;
    }

    @keyframes scan-pulse-b-7rbzlvfkox {
        0%, 100% {
            opacity: 0.35;
        }
        50% {
            opacity: 1;
        }
    }

    @keyframes row-scan-pulse-b-7rbzlvfkox {
        0%, 100% {
            opacity: 0.28;
        }
        50% {
            opacity: 0.95;
        }
    }

    .product-name.flash-a[b-7rbzlvfkox],
    .product-name.flash-b[b-7rbzlvfkox],
    .product-brand.flash-a[b-7rbzlvfkox],
    .product-brand.flash-b[b-7rbzlvfkox],
    .product-description.flash-a[b-7rbzlvfkox],
    .product-description.flash-b[b-7rbzlvfkox],
    .product-price.flash-a[b-7rbzlvfkox],
    .product-price.flash-b[b-7rbzlvfkox],
    .category-row.flash-a[b-7rbzlvfkox],
    .category-row.flash-b[b-7rbzlvfkox] {
        animation: none;
    }
}

/* ── Click-to-edit affordances ─────────────────────────────
   Product-card fields (name, description, price, allergen text) swap to an inline input
   on click. Hover shows a quiet tint + pencil; the pencil reserves its space so rows
   don't shift. The NFP's own editing styles live in NutritionFactsLabel.razor.css. */

.editable-field[b-7rbzlvfkox] {
    cursor: pointer;
    border-radius: 6px;
    padding: 2px 4px;
    margin-left: -4px;
    margin-right: -4px;
    transition: background-color 120ms ease-out;
}

.editable-field:hover[b-7rbzlvfkox] {
    background-color: var(--color-primary-soft);
}

.edit-pencil[b-7rbzlvfkox] {
    display: inline-block;
    vertical-align: baseline;
    margin-left: 4px;
    font-size: 12px;
    line-height: 1;
    color: var(--color-primary);
    opacity: 0;
    transition: opacity 120ms ease-out;
    pointer-events: none;
}

.editable-field:hover .edit-pencil[b-7rbzlvfkox] {
    opacity: 1;
}

.spec-edit-input[b-7rbzlvfkox] {
    display: block;
    width: 100%;
    font: inherit;
    color: var(--color-oyster-900);
    background: #ffffff;
    border: 1px solid var(--color-indigo-200);
    border-radius: 6px;
    padding: 4px 6px;
    outline: none;
    resize: vertical;
}

.spec-edit-input:focus[b-7rbzlvfkox] {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(37, 80, 124, 0.15);
}

.spec-edit-input.invalid[b-7rbzlvfkox] {
    border-color: #b3261e;
    background-color: rgba(254, 202, 202, 0.32);
}

.spec-edit-name[b-7rbzlvfkox] {
    font-size: 15px;
    font-weight: 700;
}

.spec-edit-brand[b-7rbzlvfkox] {
    margin-top: 2px;
    max-width: 240px;
    font-size: 12px;
    font-weight: 500;
}

.spec-edit-description[b-7rbzlvfkox] {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.45;
}

.spec-edit-price[b-7rbzlvfkox] {
    margin-top: 6px;
    max-width: 180px;
    font-size: 13px;
    font-weight: 600;
}

.spec-edit-allergen[b-7rbzlvfkox],
.spec-edit-ingredients[b-7rbzlvfkox] {
    font-size: 0.78rem;
    line-height: 1.5;
}

/* Quiet "add this optional field" line shown in place of an empty description/price/allergen. */
.spec-add-field[b-7rbzlvfkox] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    font-size: 12px;
    color: var(--color-oyster-500);
    cursor: pointer;
    border-radius: 6px;
    padding: 2px 4px;
    margin-left: -4px;
    transition: background-color 120ms ease-out, color 120ms ease-out;
}

.spec-add-field:hover[b-7rbzlvfkox] {
    background-color: var(--color-primary-soft);
    color: var(--color-indigo-700);
}

.spec-add-field .material-icons[b-7rbzlvfkox] {
    font-size: 14px;
    line-height: 1;
}

/* ── Hero image chooser ────────────────────────────────────
   The hero becomes clickable only when candidate images exist in session state. */

.product-image.hero-clickable[b-7rbzlvfkox] {
    cursor: pointer;
}

.hero-edit-hint[b-7rbzlvfkox] {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--color-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
    opacity: 0;
    transition: opacity 120ms ease-out;
    pointer-events: none;
}

.hero-edit-hint .material-icons[b-7rbzlvfkox] {
    font-size: 17px;
    line-height: 1;
}

.product-image.hero-clickable:hover .hero-edit-hint[b-7rbzlvfkox] {
    opacity: 1;
}

.hero-chooser[b-7rbzlvfkox] {
    border-bottom: 1px solid var(--color-oyster-300);
    background: var(--color-oyster-100);
    padding: 10px 12px 12px;
}

.hero-chooser-hdr[b-7rbzlvfkox] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-oyster-600);
    margin-bottom: 8px;
}

.hero-chooser-grid[b-7rbzlvfkox] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 8px;
}

.hero-chooser-item[b-7rbzlvfkox] {
    position: relative;
    aspect-ratio: 1 / 1;
    border: 2px solid var(--color-oyster-300);
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
    cursor: pointer;
    padding: 0;
    transition: border-color 120ms ease-out;
}

.hero-chooser-item:hover[b-7rbzlvfkox] {
    border-color: var(--color-primary);
}

.hero-chooser-item.current[b-7rbzlvfkox] {
    border-color: var(--color-primary);
}

/* Candidate front-of-pack photos. `contain` for the same reason <FoodImage> uses it:
   you cannot pick between two label shots that have both been cropped. Not a
   <FoodImage> itself because the button already provides the frame (its border doubles
   as the selection state), and nesting a tile inside it would double-frame each thumb. */
.hero-chooser-item img[b-7rbzlvfkox] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 3px;
    box-sizing: border-box;
    display: block;
}

.hero-chooser-check[b-7rbzlvfkox] {
    position: absolute;
    right: 3px;
    bottom: 3px;
    font-size: 16px;
    color: var(--color-primary);
    background: rgba(255, 255, 255, 0.92);
    border-radius: 999px;
}

/* ── Ingredients header row (review affordance / science-team lock) ── */

.ingredients-hdr-row[b-7rbzlvfkox] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.ingredients-hdr-row .ingredients-hdr[b-7rbzlvfkox] {
    margin-bottom: 0;
}

.ingredients-hdr-actions[b-7rbzlvfkox] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ingredients-hdr-actions:empty[b-7rbzlvfkox] {
    display: none;
}

/* A narrow card (a phone) pushed the product page's two buttons past the viewport (Kevin, 2026-10-12).
   There the label takes its own line and the buttons share the full-width row under it, each
   stretching to an equal width, or stacking full width when even that does not fit. */
.ingredients-block[b-7rbzlvfkox] {
    container-type: inline-size;
}

@container (max-width: 480px) {
    .ingredients-hdr-row[b-7rbzlvfkox] {
        flex-direction: column;
        align-items: stretch;
    }

    .ingredients-hdr-actions[b-7rbzlvfkox] {
        flex-wrap: wrap;
    }

    .ingredients-hdr-actions[b-7rbzlvfkox]  .wise-btn {
        flex: 1 1 0;
    }
}

.ingredients-lock[b-7rbzlvfkox] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-oyster-500);
    cursor: help;
}

.ingredients-lock .material-icons[b-7rbzlvfkox] {
    font-size: 13px;
    line-height: 1;
}

/* ── UPC lock (edit mode: UPC is the food's identity) ── */

.upc-lock[b-7rbzlvfkox] {
    font-size: 13px;
    line-height: 1;
    vertical-align: text-bottom;
    margin-left: 6px;
    color: var(--color-oyster-500);
    cursor: help;
}

/* The small-screen release of the sticky header moved to PaneHeader with the band itself. */
.requirement-exception[b-7rbzlvfkox] {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1rem 0;
    padding: .875rem 1rem;
    border: 1px solid var(--color-mint-300, #86d5b4);
    border-radius: .75rem;
    background: var(--color-mint-50, #effcf6);
    color: var(--color-oyster-900, #2c2439);
}

.requirement-exception > .material-icons[b-7rbzlvfkox] { color: var(--color-mint-700, #14785b); }
.requirement-exception div[b-7rbzlvfkox] { display: flex; flex: 1; flex-direction: column; gap: .125rem; }
.requirement-exception strong[b-7rbzlvfkox] { font-size: .875rem; }
.requirement-exception span:not(.material-icons)[b-7rbzlvfkox] { font-size: .75rem; color: var(--color-oyster-600, #6f6878); }
.requirement-exception button[b-7rbzlvfkox] { font-size: .75rem; font-weight: 600; color: var(--color-mint-800, #0f6149); }

.requirement-exception-undo[b-7rbzlvfkox] {
    flex: none;
    padding: .25rem .6rem;
    border: 1px solid var(--color-mint-300, #86d5b4);
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
    transition: background-color 120ms ease-out;
}

.requirement-exception-undo:hover[b-7rbzlvfkox] { background: var(--color-mint-100, #d6f5e6); }

/* Styled as a real secondary button (solid border, filled ground, pointer cursor) rather than
   the dashed muted note it used to be. It offers to record a regulatory exemption, so it has to
   read as something you press, not as a caption explaining why the panel above is empty. */
.requirement-exception-action[b-7rbzlvfkox] {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin: .75rem 0 1rem;
    padding: .6rem .8rem;
    border: 1px solid var(--color-indigo-200);
    border-radius: .6rem;
    background: var(--color-primary-soft);
    color: var(--color-indigo-600);
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 120ms ease-out, border-color 120ms ease-out;
}

.requirement-exception-action:hover[b-7rbzlvfkox] {
    background: var(--color-indigo-100);
    border-color: var(--color-indigo-300);
}

.requirement-exception-action:focus-visible[b-7rbzlvfkox] {
    outline: 2px solid var(--color-indigo-600);
    outline-offset: 2px;
}

.requirement-exception-action .material-icons[b-7rbzlvfkox] { font-size: 1rem; }

/* Source: ip-b2b product-details.css identity/flip/UPC/edit families and wise.css brand/status (local 2026-10-09). Geometry and class names retained; paints use WCI tokens. */
.nfp-sp--noidentity .nfp-sp-facts[b-7rbzlvfkox],
.nfp-sp--noidentity .nfp-sp-ingred[b-7rbzlvfkox] {
  border-top: 1px solid var(--border-strong);
}
.nfp-sp--noidentity .nfp-sp-facts .nfp-nf-panel[b-7rbzlvfkox] { margin-top: 10px; }
.nfp-sp--flip .nfp-sp-facts[b-7rbzlvfkox] { border-top: 0; }
.nfp-sp--flip .nfp-sp-strip--folded[b-7rbzlvfkox] { padding-top: 0; }
.nfp-sp--flip .nfp-sp-strip--folded .nfp-fi-group--identity[b-7rbzlvfkox],
.nfp-sp--flip .nfp-fi-group--identity[b-7rbzlvfkox] {
  padding: 20px 12px 18px;
}
.nfp-sp--flip .nfp-sp-facts .nfp-sp-shield[b-7rbzlvfkox],
.nfp-sp--flip .nfp-sp-facts .nfp-sp-shield--folded[b-7rbzlvfkox] {
  padding-left: 12px; padding-right: 12px;
}
.nfp-sp--flip .nfp-sp-facts .nfp-nf-panel[b-7rbzlvfkox] { margin-top: 12px; }
.nfp-sp--flip .nfp-fi-group--identity[b-7rbzlvfkox] {
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
}
.nfp-sp--flip .nfp-fi-copy[b-7rbzlvfkox] { display: block; min-width: 0; }
.nfp-sp--flip .nfp-fi-group--identity .nfp-fi-header[b-7rbzlvfkox] {
  flex-wrap: wrap; min-width: 0;
  align-items: flex-start; margin-bottom: 6px;
}
.nfp-sp--flip .nfp-fi-title[b-7rbzlvfkox] {
  flex: 1 1 auto; min-width: 0;
  overflow-wrap: break-word; word-break: normal;
}
.nfp-sp--flip .nfp-fi-title .nfp-edit[b-7rbzlvfkox] { display: block; width: 100%; }
.nfp-sp--flip .nfp-fi-details[b-7rbzlvfkox] {
  display: flex; flex-direction: column; flex-wrap: nowrap;
  align-items: stretch; gap: 8px; min-width: 0;
}
.nfp-sp--flip .nfp-fi-desc[b-7rbzlvfkox] { flex: none; width: 100%; max-width: none; margin: 0; }
.nfp-sp--flip .nfp-fi-price[b-7rbzlvfkox] { margin: 0; }
.nfp-sp--flip .nfp-fi-thumbs[b-7rbzlvfkox] { flex: none; width: 100%; }
.nfp-sp--flip .nfp-fi-details > .nfp-fi-upc[b-7rbzlvfkox],
.nfp-sp--flip .nfp-fi-details > .nfp-fi-upc-stack[b-7rbzlvfkox] {
  width: 100%; margin: 0; justify-content: center; align-items: center;
}
.nfp-sp--flip .nfp-fi-upc .nfp-hero-upc[b-7rbzlvfkox],
.nfp-sp--flip .nfp-fi-upc .nfp-hero-upc--seg[b-7rbzlvfkox],
.nfp-sp--flip .nfp-fi-upc .nfp-upc-entry[b-7rbzlvfkox] {
  flex: 0 1 232px; width: auto; min-width: 0; max-width: 100%;
}
.nfp-upc-chip[b-7rbzlvfkox] { background: var(--surface); border-bottom: 1px solid var(--border); padding: 8px 12px 10px; }
.nfp-upc-label[b-7rbzlvfkox] { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-subtle); margin-bottom: 4px; }
.nfp-upc-entry[b-7rbzlvfkox] {
  display: flex; flex-direction: column; align-items: center; gap: 0; width: 100%; box-sizing: border-box;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 0;
  padding: 14px 12px 10px; box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 6%, transparent);
}
.nfp-upc-mark[b-7rbzlvfkox] { display: flex; flex-direction: column; align-items: stretch; width: 100%; }
.nfp-upc-barcode[b-7rbzlvfkox] {
  width: auto; height: 72px;
  margin: 0 1.3em -12px;
  display: block;
}
.nfp-upc-bc[b-7rbzlvfkox] { display: block; width: 100%; height: 100%; fill: var(--text); }
.nfp-upc-bc--preview[b-7rbzlvfkox] { opacity: 0.22; }
.nfp-upc-cells[b-7rbzlvfkox] {
  display: grid;
  grid-template-columns: 1.3em minmax(0, 1fr) 0.95em minmax(0, 1fr) 1.3em;
  align-items: end;
  width: 100%;
  column-gap: 0;
}
.nfp-upc-group[b-7rbzlvfkox] {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2px; min-width: 0; padding: 0 10%;
}
.nfp-upc-gutter[b-7rbzlvfkox] { width: auto; min-width: 0; }
.nfp-upc-cell[b-7rbzlvfkox] {
  flex: 1 1 0; min-width: 0; width: auto; height: 32px; box-sizing: border-box;
  font-family: var(--font-mono); font-size: 1.1rem; font-weight: 700;
  letter-spacing: 0; text-align: center; padding: 0 0 3px;
  color: var(--text); background: transparent;
  border: none; border-bottom: 2px solid var(--border-strong); border-radius: 0; outline: none;
  transition: border-color 0.15s ease;
}
.nfp-upc-cell--lone[b-7rbzlvfkox] {
  flex: none; width: 100%; min-width: 0; max-width: none;
}
.nfp-upc-cell[b-7rbzlvfkox]::placeholder { color: var(--text-subtle); }
.nfp-upc-cell:hover[b-7rbzlvfkox] { border-bottom-color: color-mix(in srgb, var(--primary) 45%, var(--border-strong)); }
.nfp-upc-cell:focus[b-7rbzlvfkox] { border-bottom-color: var(--primary); }
.nfp-upc-entry--filled .nfp-upc-cell[b-7rbzlvfkox] { border-bottom-color: transparent; }
.nfp-upc-entry--filled .nfp-upc-cell:hover[b-7rbzlvfkox] { border-bottom-color: color-mix(in srgb, var(--primary) 45%, var(--border-strong)); }
.nfp-upc-entry--filled:focus-within .nfp-upc-cell[b-7rbzlvfkox] { border-bottom-color: var(--border-strong); }
.nfp-upc-entry--filled:focus-within .nfp-upc-cell:focus[b-7rbzlvfkox] { border-bottom-color: var(--primary); }
.nfp-upc-entry--onphoto[b-7rbzlvfkox] { border-color: transparent; box-shadow: 0 4px 16px color-mix(in srgb, var(--text) 28%, transparent); }
.nfp-fi[b-7rbzlvfkox] { background: transparent; border-bottom: none; padding: 14px 14px 14px; }
.nfp-fi:has(.nfp-fi-group--identity)[b-7rbzlvfkox] { padding: 0; overflow: visible; }
.nfp-fi-header[b-7rbzlvfkox] { display: flex; align-items: flex-start; justify-content: flex-start; gap: 8px; margin-bottom: 4px; min-width: 0; }
.nfp-fi-title[b-7rbzlvfkox] { font-family: var(--font-serif); font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; color: var(--text); flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.nfp-fi-title .nfp-edit[b-7rbzlvfkox] {
  font: inherit; letter-spacing: inherit; color: inherit; padding: 0;
  overflow-wrap: inherit; white-space: normal;
}
.nfp-fi-title .nfp-edit:focus[b-7rbzlvfkox] {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary) 35%, transparent);
}
.nfp-fi-photo-edit[b-7rbzlvfkox] {
  flex-shrink: 0; width: 28px; height: 28px; padding: 0; border: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--text-muted); cursor: pointer;
}
.nfp-fi-photo-edit:hover[b-7rbzlvfkox],
.nfp-fi-photo-edit:focus-visible[b-7rbzlvfkox] { color: var(--primary-ink, var(--primary)); background: color-mix(in srgb, var(--primary) 10%, transparent); }
.nfp-fi-photo-edit .material-symbols-outlined[b-7rbzlvfkox] { font-size: 18px !important; }
.nfp-fi-row[b-7rbzlvfkox] { display: flex; align-items: stretch; justify-content: center; gap: 12px; }
.nfp-fi-group[b-7rbzlvfkox] { flex: 1 1 0; min-width: 0; }
.nfp-fi-vr[b-7rbzlvfkox] { flex: 0 0 1px; align-self: stretch; background: var(--border); }
.nfp-fi-add[b-7rbzlvfkox] {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  width: 76px; cursor: pointer; color: var(--text-subtle); background: transparent;
}
.nfp-fi-add-sq[b-7rbzlvfkox] {
  width: 40px; height: 40px; border-radius: 10px; border: 2px dashed var(--border-strong);
  background: var(--surface-2); color: inherit;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: border-color 0.15s, transform 0.12s;
}
.nfp-fi-add:hover[b-7rbzlvfkox] { color: var(--primary-ink, var(--primary)); }
.nfp-fi-add:hover .nfp-fi-add-sq[b-7rbzlvfkox] { border-color: var(--primary); transform: scale(1.08); }
.nfp-fi-add .material-symbols-outlined[b-7rbzlvfkox] { font-size: 18px !important; }
.nfp-fi-add-label[b-7rbzlvfkox] {
  font-size: 0.58rem; font-weight: 600; color: var(--text-muted);
  text-align: center; line-height: 1.2; max-width: 100%;
}
.nfp-fi-add:hover .nfp-fi-add-label[b-7rbzlvfkox] { color: var(--primary-ink, var(--primary)); }
.nfp-fi-group--identity[b-7rbzlvfkox] {
  /* z-index: the strip isolates its stacking, so the category picker it holds must sit above the Steps banner that
     follows it (Kevin, 2026-10-09: the dropdown showed behind the banner, "super blurred"). */
  position: relative; isolation: isolate; z-index: 5; padding: 14px 14px 18px;
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
}
.nfp-fi-lead-edit[b-7rbzlvfkox] {
  position: absolute; top: 4px; left: 4px; z-index: 3;
  width: 22px; height: 22px; padding: 0; margin: 0; border: 0;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--text) 55%, transparent); color: var(--surface); cursor: pointer;
  box-shadow: 0 1px 4px color-mix(in srgb, var(--text) 35%, transparent);
}
.nfp-fi-lead-edit .material-symbols-outlined[b-7rbzlvfkox] {
  font-size: 14px !important; line-height: 1 !important;
}
.nfp-fi-lead-edit:hover[b-7rbzlvfkox],
.nfp-fi-lead-edit:focus-visible[b-7rbzlvfkox] {
  background: color-mix(in srgb, var(--text) 72%, transparent);
}
.nfp-fi-copy[b-7rbzlvfkox] { min-width: 0; }
.nfp-fi-group--identity .nfp-fi-header[b-7rbzlvfkox] {
  margin-bottom: 6px; align-items: flex-start; gap: 10px; flex-wrap: nowrap;
}
.nfp-fi-group--identity .nfp-fi-title[b-7rbzlvfkox] {
  font-family: 'WISE Digits', var(--module-title-family, 'DM Sans', system-ui, sans-serif);
  font-weight: var(--module-title-weight, 800);
  font-size: var(--module-title-size, 1.2rem);
  letter-spacing: -0.01em;
  line-height: var(--module-title-lh, 1.16);
}
.nfp-fi-desc[b-7rbzlvfkox] {
  margin: 0 0 8px; font-size: 0.8125rem; line-height: 1.45; color: var(--text-muted);
  width: 100%; max-width: none;
  text-wrap: pretty;
}
.nfp-fi-group--identity .nfp-fi-header[b-7rbzlvfkox],
.nfp-fi-group--identity .nfp-fi-title[b-7rbzlvfkox],
.nfp-fi-group--identity .nfp-fi-details[b-7rbzlvfkox],
.nfp-fi-group--identity .nfp-fi-desc[b-7rbzlvfkox] {
  margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0;
}
.nfp-fi-group--identity .nfp-fi-title .nfp-edit[b-7rbzlvfkox],
.nfp-fi-group--identity .nfp-fi-desc .nfp-edit[b-7rbzlvfkox] {
  padding-left: 0; padding-right: 0;
}
.nfp-fi-group--identity .nfp-edit[b-7rbzlvfkox]::after { left: 0; right: 0; }
.nfp-fi-desc .nfp-edit[b-7rbzlvfkox] {
  display: block; width: 100%; box-sizing: border-box;
  font: inherit; color: inherit;
  padding-left: 0; padding-right: 0;
  overflow-wrap: break-word;
  text-wrap: pretty;
}
.nfp-fi-price[b-7rbzlvfkox] {
  display: flex; align-items: baseline; justify-content: center; gap: 2px; flex-wrap: wrap;
  margin: 0 0 12px; font-size: 1.05rem; font-weight: 800; color: var(--text); letter-spacing: -0.01em;
  text-align: center;
}
.nfp-fi-price .nfp-edit[b-7rbzlvfkox] { font: inherit; font-weight: 800; letter-spacing: inherit; color: inherit; }
.nfp-fi-price-size[b-7rbzlvfkox] {
  margin-left: 8px; font-size: 0.68rem; font-weight: 600; color: var(--text-muted); letter-spacing: 0;
}
.nfp-fi-group--identity .nfp-fi-price[b-7rbzlvfkox] { margin-bottom: 0; }
.nfp-fi-group--identity .nfp-fi-add[b-7rbzlvfkox] { align-self: center; flex-shrink: 0; }
.nfp-fi-upc-stack[b-7rbzlvfkox] {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; width: auto; min-width: 0;
}
.nfp-fi-upc-stack .nfp-fi-upc[b-7rbzlvfkox] { margin: 0; }
.nfp-fi-cat--dock[b-7rbzlvfkox] {
  flex: 0 0 auto; align-self: center; margin: 0; min-width: 0;
  display: flex; align-items: center; justify-content: center; height: auto;
  width: auto; max-width: 100%;
}
.nfp-fi-cat--dock .nfp-hero-cat[b-7rbzlvfkox] {
  width: auto; max-width: 100%; height: auto;
  align-items: center; flex-wrap: nowrap; margin: 0; justify-content: center;
}
.nfp-fi-cat--dock .nfp-cat-select[b-7rbzlvfkox] { width: auto; max-width: 100%; height: auto; }
.nfp-fi-cat--dock .nfp-cat-native[b-7rbzlvfkox] {
  width: auto; max-width: 100%; height: auto; min-height: 0;
  box-sizing: border-box; padding: 2px 18px 2px 20px; line-height: 1.3;
  font-size: 0.72rem; font-weight: 650;
  background: transparent; border: none; border-radius: 0;
  color: var(--primary); box-shadow: none; cursor: pointer;
}
.nfp-fi-cat--dock .nfp-cat-native:hover[b-7rbzlvfkox],
.nfp-fi-cat--dock .nfp-cat-native:focus[b-7rbzlvfkox] {
  background: transparent; border: none; box-shadow: none;
  color: var(--primary); text-decoration: underline;
  text-underline-offset: 2px;
}
.nfp-fi-cat--dock.nfp-cat-select--err .nfp-cat-native[b-7rbzlvfkox],
.nfp-fi-cat--dock .nfp-cat-select--err .nfp-cat-native[b-7rbzlvfkox] {
  box-shadow: none; color: var(--sec-red);
}
.nfp-fi-cat--dock .nfp-cat-select-ic[b-7rbzlvfkox] {
  left: 0; top: 50%; transform: translateY(-50%); font-size: 14px !important;
  color: var(--primary);
}
.nfp-fi-cat--dock .nfp-cat-select-caret[b-7rbzlvfkox] {
  right: 0; top: 50%; transform: translateY(-50%); font-size: 16px !important;
  color: var(--primary);
}
.nfp-fi-cat--dock .nfp-hero-field-note[b-7rbzlvfkox] { display: none; }
.nfp-fi-upc[b-7rbzlvfkox] {
  flex: 0 0 auto; width: auto; margin-left: 0;
  display: flex; justify-content: center; align-items: center;
}
.nfp-fi-upc .nfp-upc-entry[b-7rbzlvfkox] {
  align-items: center;
}
.nfp-fi-upc .nfp-hero-upc[b-7rbzlvfkox],
.nfp-fi-upc .nfp-hero-upc--seg[b-7rbzlvfkox],
.nfp-fi-upc .nfp-upc-entry[b-7rbzlvfkox] {
  flex: 0 0 232px; width: 232px; min-width: 232px; max-width: 232px;
  flex-shrink: 0; box-sizing: border-box;
}
.nfp-fi-upc .nfp-upc-entry[b-7rbzlvfkox] {
  padding: 7px 8px 5px; gap: 0; border-radius: 0;
  background: var(--surface);
}
.nfp-fi-upc .nfp-upc-barcode[b-7rbzlvfkox] { height: 44px; flex-shrink: 0; margin: 0 1.2em -8px; }
.nfp-fi-upc .nfp-upc-cells[b-7rbzlvfkox] {
  display: grid;
  grid-template-columns: 1.2em minmax(0, 1fr) 0.9em minmax(0, 1fr) 1.2em;
  width: 100%;
}
.nfp-fi-upc .nfp-upc-gutter[b-7rbzlvfkox] { width: auto; flex: none; }
.nfp-fi-upc .nfp-upc-group[b-7rbzlvfkox] { gap: 1px; padding: 0 8%; }
.nfp-fi-upc .nfp-upc-cell[b-7rbzlvfkox] {
  flex: 1 1 0; width: auto; min-width: 0; max-width: none;
  height: 20px; font-size: 0.78rem; padding: 0 0 1px; border-bottom-width: 1px;
}
.nfp-fi-upc .nfp-upc-cell--lone[b-7rbzlvfkox] {
  flex: none; width: 100%; min-width: 0; max-width: none;
}
.nfp-fi--packs[b-7rbzlvfkox] { border-top: 1px dashed var(--border); }
.nfp-edit[b-7rbzlvfkox] { position: relative; cursor: text; border-radius: 3px; padding: 0 2px; transition: background 0.12s, box-shadow 0.12s; outline: none; }
.nfp-edit[b-7rbzlvfkox]::after {
  content: ''; position: absolute; left: 2px; right: 2px; bottom: 0; height: 1px;
  background: var(--primary); transform: scaleX(0); transform-origin: left;
  transition: transform 0.15s ease; pointer-events: none;
}
.nfp-edit:hover[b-7rbzlvfkox]::after { transform: scaleX(1); }
.nfp-edit:focus[b-7rbzlvfkox]::after { transform: scaleX(0); }
.nfp-edit:focus[b-7rbzlvfkox] { background: var(--surface); box-shadow: inset 0 0 0 2px var(--primary); }
.nfp-edit-empty[b-7rbzlvfkox] { color: var(--text-subtle); font-style: italic; }
.nfp-field-note[b-7rbzlvfkox] { display: flex; align-items: center; gap: 5px; font-size: 0.62rem; color: var(--sec-red); margin-top: 4px; }
.nfp-field-note .material-symbols-outlined[b-7rbzlvfkox] { font-size: 13px !important; }
.nfp-fi-brand[b-7rbzlvfkox] { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.nfp-fi-brand .nfp-brand-logo[b-7rbzlvfkox] {
  width: 30px; height: 30px; flex: 0 0 auto;
  border-radius: 50%; overflow: hidden; padding: 0; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); box-shadow: 0 0 0 1px var(--border);
}
.nfp-fi-brand .nfp-brand-logo:hover[b-7rbzlvfkox],
.nfp-fi-brand .nfp-brand-logo:focus-visible[b-7rbzlvfkox],
.nfp-fi-brand .nfp-brand-logo.nfp-hero-drag[b-7rbzlvfkox] { box-shadow: 0 0 0 2px var(--primary); }
.nfp-fi-brand .nfp-brand-logo img[b-7rbzlvfkox] { width: 100%; height: 100%; object-fit: cover; display: block; }
.nfp-fi-brand .nfp-brand-logo-mono[b-7rbzlvfkox] {
  font-weight: 800; font-size: 0.62rem; letter-spacing: -0.02em; color: var(--primary);
}
.nfp-fi-brand-name[b-7rbzlvfkox] { font-weight: 700; font-size: 0.9rem; color: var(--text); letter-spacing: 0.01em; }
.nfp-status-badges[b-7rbzlvfkox] {
  display: inline-flex; align-items: center; gap: 5px;
  vertical-align: -3px; margin-left: 7px; white-space: nowrap;
}
.nfp-fi-group--identity .nfp-fi-title .nfp-edit[b-7rbzlvfkox],
.nfp-sp--flip .nfp-fi-group--identity .nfp-fi-title .nfp-edit[b-7rbzlvfkox] {
  display: inline; width: auto;
}
.nfp-status-badge[b-7rbzlvfkox] {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; padding: 0; background: none;
  flex: 0 0 auto; line-height: 1; cursor: default;
}
.nfp-status-badge .material-symbols-outlined[b-7rbzlvfkox] {
  font-size: 20px !important; line-height: 1 !important;
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}
.nfp-status-badge--verified[b-7rbzlvfkox],
.nfp-status-badge--claimed[b-7rbzlvfkox] { color: var(--primary); }
/* APP-OWNED: preserve the shared inline field writer and read-only snapshot. */
.add-food-spec-body.nfp-sp[b-7rbzlvfkox] { padding: 0; gap: 0; }
.nfp-sp .nfp-sp-facts[b-7rbzlvfkox] { background: var(--surface); }
.nfp-sp .product-card[b-7rbzlvfkox] { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.nfp-sp .product-body[b-7rbzlvfkox] { padding: 20px 12px 18px; }
.nfp-sp .product-name[b-7rbzlvfkox] { margin: 0; font: inherit; color: inherit; line-height: inherit; }
.nfp-sp .product-brand[b-7rbzlvfkox] { margin: 0; text-transform: none; }
.nfp-sp .product-description[b-7rbzlvfkox] { margin: 0; }
.nfp-sp .product-price[b-7rbzlvfkox] { display: flex; align-items: baseline; justify-content: center; font-size: 1.05rem; font-weight: 800; margin: 0; color: var(--text); }
.nfp-sp .upc-block[b-7rbzlvfkox] { position: relative; padding: 0; margin: 0; border: 0; background: transparent; }
.nfp-sp .upc-lock[b-7rbzlvfkox] { position: absolute; right: 44px; bottom: 5px; font-size: 12px; color: var(--text-subtle); }
.nfp-sp .nfp-fi-cat--dock[b-7rbzlvfkox] { padding: 0; border: 0; margin: 0; gap: 4px; }
.nfp-sp .category-hdr[b-7rbzlvfkox] { display: none; }
.nfp-sp .category-chips[b-7rbzlvfkox] { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; }
.nfp-sp .category-chip[b-7rbzlvfkox] { background: transparent; padding: 2px 0; border: 0; border-radius: 0; color: var(--primary); font-size: .72rem; }
.nfp-sp .category-add-btn[b-7rbzlvfkox] { background: transparent; border: 0; padding: 2px; color: var(--primary); font-size: .72rem; }
.nfp-sp .category-add-btn .material-icons[b-7rbzlvfkox] { font-size: 14px; }
.nfp-sp .category-chip-remove[b-7rbzlvfkox] { width: 14px; height: 14px; }
.nfp-sp .category-chip-remove .material-icons[b-7rbzlvfkox] { font-size: 12px; }
.nfp-sp .nfp-status-badges[b-7rbzlvfkox] { flex-wrap: wrap; white-space: normal; gap: 4px; font-family: var(--font-serif); font-size: .6rem; font-weight: 600; }
.nfp-sp[b-7rbzlvfkox]  .nfp-status-badges .v2-ladder-status { display: inline-flex; flex-direction: row; gap: 4px; }
.nfp-sp[b-7rbzlvfkox]  .nfp-status-badges .adm-chip { font-size: .58rem; padding: 1px 5px; line-height: 1.3; }
.nfp-sp[b-7rbzlvfkox]  .nfp-status-badges .material-symbols-outlined { font-size: 18px; }
.nfp-sp[b-7rbzlvfkox]  .nfp-status-badges .v2-ladder-edits { font-size: .58rem; }
.nfp-sp .nfp-edit[b-7rbzlvfkox] { cursor: pointer; }
.nfp-sp[b-7rbzlvfkox]  .edit-pencil { font-size: 11px !important; width: 11px; line-height: 1; opacity: 0; margin-left: 3px; color: var(--text-subtle); vertical-align: baseline; }
.nfp-sp .editable-field:hover[b-7rbzlvfkox]  .edit-pencil,
.nfp-sp .editable-field:focus-within[b-7rbzlvfkox]  .edit-pencil { opacity: .65; }
.nfp-sp .editable-field[b-7rbzlvfkox] { padding: 0; border: 0; border-radius: 3px; }
.nfp-sp .editable-field:hover[b-7rbzlvfkox] { background: transparent; }
.nfp-sp .nfp-fi-photo[b-7rbzlvfkox] { position: relative; width: 68px; height: 68px; align-self: center; padding: 0; border: 2px solid var(--primary); border-radius: 12px; overflow: hidden; }
.nfp-sp .nfp-fi-photo img[b-7rbzlvfkox] { width: 100%; height: 100%; object-fit: cover; }
.nfp-sp .nf-label-wrap[b-7rbzlvfkox] { margin: 0; padding: 0; }
.nfp-sp-shield[b-7rbzlvfkox]  .nfp-ins-next { gap: 10px; padding: 12px 14px; }
.nfp-sp-shield[b-7rbzlvfkox]  .nfp-ins-next-body { flex: none; }
.nfp-ins[b-7rbzlvfkox] { background: transparent; border-top: none; padding: 16px 14px 22px; }
.nfp-ins[b-7rbzlvfkox]  .wci-dash-scope { container-name: nfp-scores; }
.nfp-ins[b-7rbzlvfkox]  .dash-claim { display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr); gap: 8px; padding: 18px 8px 4px; margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.nfp-ins[b-7rbzlvfkox]  .dash-claim-divider { display: block !important; }
.nfp-ins[b-7rbzlvfkox]  .dash-claim .dash-bignum-row,
.nfp-ins[b-7rbzlvfkox]  .dash-claim .dash-progress-pct { margin: 0; gap: 6px; align-items: flex-start; }
.nfp-ins[b-7rbzlvfkox]  .dash-claim .dash-bignum { font-size: 1.7rem; min-width: 0; color: var(--text); }
.nfp-ins[b-7rbzlvfkox]  .dash-bignum-cap { font-size: .6rem; line-height: 1.35; }
.nfp-ins[b-7rbzlvfkox]  .dash-bignum-cap strong { font-size: .7rem; }
.nfp-ins[b-7rbzlvfkox]  .dash-claim .dash-bignum-row > .dash-stamp-icon,
.nfp-ins[b-7rbzlvfkox]  .dash-claim .dash-progress-pct > .dash-stamp-icon { width: 24px; height: 24px; right: 0; top: .85rem; }
.nfp-ins[b-7rbzlvfkox]  .dash-claim .dash-stamp-icon .material-symbols-outlined { font-size: 15px; }
.nfp-sp[b-7rbzlvfkox]  .nf-label {
  background: var(--surface); font-family: var(--font-serif); color: var(--text);
  width: calc(100% - 24px); max-width: 500px; margin: 12px auto 14px;
  border: 3px solid var(--text);
  box-sizing: border-box;
}
.nfp-sp[b-7rbzlvfkox]  .nf-hdr { font-size: 1.45rem; font-weight: 900; line-height: 1.05; padding: 5px 10px 3px; border-bottom: 1px solid var(--text); display: flex; align-items: center; justify-content: space-between; }
.nfp-sp[b-7rbzlvfkox]  .nf-serv { padding: 2px 10px 3px; border-bottom: 8px solid var(--text); }
.nfp-sp[b-7rbzlvfkox]  .nf-serv-top { font-size: 0.7rem; color: var(--text); padding: 2px 0 1px; border-bottom: 1px solid var(--text); }
.nfp-sp[b-7rbzlvfkox]  .nf-serv-bot { display: flex; align-items: center; justify-content: space-between; font-size: 0.7rem; padding: 2px 0; }
.nfp-sp[b-7rbzlvfkox]  .nf-cal { display: flex; justify-content: space-between; align-items: flex-end; padding: 3px 10px 2px; border-bottom: 4px solid var(--text); }
.nfp-sp[b-7rbzlvfkox]  .nf-cal-l { display: flex; flex-direction: column; }
.nfp-sp[b-7rbzlvfkox]  .nf-cal-lbl { font-size: 0.62rem; line-height: 1.2; }
.nfp-sp[b-7rbzlvfkox]  .nf-cal-kw { font-size: 1.2rem; font-weight: 900; line-height: 1; }
.nfp-sp[b-7rbzlvfkox]  .nf-cal-n { font-size: 2.1rem; font-weight: 900; line-height: 1; }
.nfp-sp[b-7rbzlvfkox]  .nf-dv-hdr { text-align: right; font-size: 0.68rem; font-weight: 700; padding: 2px 10px 1px; border-bottom: 1px solid var(--text); }
.nfp-sp[b-7rbzlvfkox]  .nf-r { display: flex; align-items: center; justify-content: space-between; padding: 2px 10px; border-bottom: 1px solid var(--border); font-size: 0.7rem; min-height: 20px; }
.nfp-sp[b-7rbzlvfkox]  .nf-r .k { flex: 1; display: flex; align-items: center; }
.nfp-sp[b-7rbzlvfkox]  .nf-r .dv { flex-shrink: 0; text-align: right; font-weight: 700; padding-left: 4px; }
.nfp-sp[b-7rbzlvfkox]  .nf-ind1 { padding-left: 18px !important; }
.nfp-sp[b-7rbzlvfkox]  .nf-ind2 { padding-left: 30px !important; }
.nfp-sp[b-7rbzlvfkox]  .nf-sep-thick { height: 8px; background: var(--text); }
.nfp-sp[b-7rbzlvfkox]  .nf-no-b { border-bottom: none !important; }
.nfp-sp[b-7rbzlvfkox]  .nf-foot { border-top: 8px solid var(--text); padding: 3px 10px 5px; font-size: 0.56rem; color: var(--text); line-height: 1.45; }

.nfp-sp[b-7rbzlvfkox]  .nf-edit-pencil { font-size: 10px !important; opacity: 0; }
.nfp-sp[b-7rbzlvfkox]  .nf-editable:hover .nf-edit-pencil { opacity: .6; }

.nfp-sp .nfp-edit:not(.editable-field)[b-7rbzlvfkox]::after { content: none; }

/* Source: ip-b2b product-details.css allergensHTML/declaration families. */
.nfp-decl-wrap[b-7rbzlvfkox] {
  width: calc(100% - 24px); max-width: 460px; margin: 0 auto 16px;
  font-family: var(--font-serif);
}
.nfp-allergen-wrap[b-7rbzlvfkox] { padding: 2px 0 10px; border-bottom: 1px solid var(--border); }
.nfp-allergen-heading[b-7rbzlvfkox] { font-size: 0.65rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 5px; }
.nfp-allergen-tags[b-7rbzlvfkox] { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.nfp-allergen-tag[b-7rbzlvfkox] { font-size: 0.7rem; font-weight: 600; padding: 3px 8px 3px 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; background: var(--primary-soft); color: var(--text); border: 1px solid var(--border); }
.nfp-allergen-ico[b-7rbzlvfkox] { font-size: 15px !important; color: var(--primary-ink, var(--primary)); }
.nfp-allergen-empty[b-7rbzlvfkox] { font-size: 0.66rem; color: var(--text-subtle); font-style: italic; }
.nfp-allergen-x[b-7rbzlvfkox] {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; padding: 0; margin: 0; cursor: pointer;
  color: inherit; opacity: 0.5; line-height: 1;
}
.nfp-allergen-x:hover[b-7rbzlvfkox] { opacity: 1; }
.nfp-allergen-x .material-symbols-outlined[b-7rbzlvfkox] { font-size: 14px !important; }
.nfp-allergen-add-wrap[b-7rbzlvfkox] { position: relative; display: inline-flex; align-items: center; margin-left: 2px; }
.nfp-allergen-add-wrap .topbar-popover.nfp-allergen-pop[b-7rbzlvfkox] {
  top: 0; bottom: auto; left: calc(100% + 8px); right: auto;
  min-width: 232px; max-height: min(420px, 70vh); overflow-y: auto;
}
.nfp-allergen-pop-title[b-7rbzlvfkox] {
  font-family: var(--font-serif);
  font-size: 0.88rem; font-weight: 700; letter-spacing: -0.01em;
  color: var(--text); padding: 8px 12px 6px;
}
.nfp-allergen-opt .nfp-allergen-check[b-7rbzlvfkox] {
  margin-left: auto; font-size: 18px !important; opacity: 0; color: var(--primary-ink, var(--primary));
}
.nfp-allergen-opt.is-on[b-7rbzlvfkox] { color: var(--text); }
.nfp-allergen-opt.is-on .nfp-allergen-check[b-7rbzlvfkox] { opacity: 1; }
.nfp-contains[b-7rbzlvfkox] { padding: 10px 0 12px; margin-top: 6px; font-size: 0.72rem; line-height: 1.5; color: var(--text-muted); }
.nfp-contains strong[b-7rbzlvfkox] { margin-right: 6px; color: var(--text); }

.nfp-mini-btn[b-7rbzlvfkox] { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; font-size: .66rem; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--primary); }
.nfp-mini-btn .material-symbols-outlined[b-7rbzlvfkox] { font-size: 14px; }

/* APP-OWNED: inline SVG emitted as markup must cross CSS isolation. */
.nfp-upc-barcode[b-7rbzlvfkox]  .nfp-upc-bc { display: block; width: 100%; height: 100%; fill: var(--text); }
.nfp-sp .product-price.nfp-edit[b-7rbzlvfkox] { font-size: 1.05rem; }

.nfp-sp[b-7rbzlvfkox]  .nf-label { border-radius: 0; }
.nfp-sp[b-7rbzlvfkox]  .nf-sep-med { display: none; }

/* Percent rows inherit the dashboard number size unless their wrapper is sized here. */
.nfp-ins[b-7rbzlvfkox]  .dash-claim .dash-progress-pct .dash-pct-wrap { font-size: 1.7rem; }
.nfp-ins[b-7rbzlvfkox]  .dash-claim .dash-progress-pct .dash-pct { font-size: .65rem; }

/* Product page UPC (Kevin, 2026-10-09: the hand-drawn encoder "looks goofy"): the library's barcode, compact and centered,
   its digits printed by the symbol itself, the lock beside it. */
.nfp-fi-upc.upc-block[b-7rbzlvfkox] { flex-direction: row; align-items: center; justify-content: center; align-self: center; gap: 6px; margin: 4px auto 0; padding: 0; border: 0; background: transparent; height: auto; }
.nfp-fi-upc.upc-block img[b-7rbzlvfkox] { display: block; width: 168px; max-width: 60%; height: auto; object-fit: contain; background: #fff; border-radius: 4px; }
.nfp-fi-upc.upc-block .upc-num[b-7rbzlvfkox] { display: flex; align-items: center; margin: 0; }
.nfp-fi-upc.upc-block .upc-lock[b-7rbzlvfkox] { font-size: 15px; color: var(--text-subtle); }
/* Copy UPC: the barcode carries the digits, so the copy control floats over it on hover (always shown on touch). */
.nfp-fi-upc .nfp-upc-art[b-7rbzlvfkox] { position: relative; display: block; width: 168px; max-width: 60%; }
.nfp-fi-upc.upc-block .nfp-upc-art img[b-7rbzlvfkox] { width: 100%; max-width: none; }
.nfp-upc-art[b-7rbzlvfkox]  .nfp-upc-copy { position: absolute; top: 4px; right: 4px; opacity: 0; transition: opacity 120ms ease; }
.nfp-upc-art:hover[b-7rbzlvfkox]  .nfp-upc-copy,
.nfp-upc-art:focus-within[b-7rbzlvfkox]  .nfp-upc-copy { opacity: 1; }
@media (hover: none) { .nfp-upc-art[b-7rbzlvfkox]  .nfp-upc-copy { opacity: 1; } }

/* The product page docks the category as a short centered link, so the picker under it was only as wide as the link and
   its options scrolled sideways (Kevin, 2026-10-09). There it opens at a fixed width centered on the link. */
.nfp-fi-cat--dock[b-7rbzlvfkox] { position: relative; }
.nfp-fi-cat--dock .category-picker[b-7rbzlvfkox] { left: 50%; right: auto; transform: translateX(-50%); width: min(320px, 86vw); max-width: none; }
.nfp-fi-cat--dock .category-picker-option[b-7rbzlvfkox] { min-width: 0; font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }

/* WISEcode AI is working: the edit affordances stay where they are (no layout jump each turn) but take no clicks. */
.spec-paused .editable-field[b-7rbzlvfkox],
.spec-paused .spec-add-field[b-7rbzlvfkox],
.spec-paused .nf-label-wrap[b-7rbzlvfkox]  .nf-editable { pointer-events: none; cursor: default; }
.spec-paused .spec-add-field[b-7rbzlvfkox],
.spec-paused button:disabled[b-7rbzlvfkox] { opacity: .55; cursor: not-allowed; }
/* /Components/Shared/AddFoodChat/V2ProductPagePanel.razor.rz.scp.css */
/* Existing product sheet loading footprint and published-food attestation sheet. */
.v2pd-details-loading[b-wayuf1iymc] { position: relative; min-height: 32rem; }

/* What Publish still needs, under the Steps to Complete banner's sentence (its body is centred; a list reads left). */
.v2pd-gaps[b-wayuf1iymc] {
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
    list-style: disc;
    text-align: left;
    color: var(--text);
    font-size: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.v2pd-error[b-wayuf1iymc] {
    margin: 0;
    color: var(--sec-red-text);
    font-size: 0.875rem;
}

/* APP-OWNED: staff provenance reads inline with the identity badges. */
.wci-product-source[b-wayuf1iymc] { display: inline-flex; align-items: center; gap: 4px; font-size: .58rem; font-weight: 600; color: var(--staff-ink); white-space: nowrap; }

/* BUG-V2-125: the auditors' dates (UPF calculated, nutrients determined), a muted line beside the staff provenance. */
.v2pd-audit-dates[b-wayuf1iymc] { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: .58rem; font-weight: 600; color: var(--text-muted); }

.v2pd-single-hidden[b-wayuf1iymc] { display: none; }

.v2pd-single[b-wayuf1iymc] { position: relative; }
.nfp-pack-loading[b-wayuf1iymc] { position: absolute; inset: 0; z-index: 3; min-height: 12rem; background: color-mix(in srgb, var(--surface) 85%, transparent); }
.nfp-pack-notice[b-wayuf1iymc] { position: absolute; top: 0; left: 0; right: 0; z-index: 3; padding: 8px; background: var(--surface); }
/* /Components/Shared/AuditEscalateModal.razor.rz.scp.css */
.escalate-modal[b-6tq6jcgrxq] {
    font-family: var(--font-family-primary);
}

.escalate-context[b-6tq6jcgrxq] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 18px;
}

.escalate-field[b-6tq6jcgrxq] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.escalate-field-reason[b-6tq6jcgrxq] {
    margin-top: 18px;
}

.escalate-label[b-6tq6jcgrxq] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #6B7280;
}

.escalate-value[b-6tq6jcgrxq] {
    padding: 8px 12px;
    border-radius: 8px;
    background: #F3F4F6;
    font-size: 13px;
    color: #374151;
    word-break: break-word;
}

.escalate-value-muted[b-6tq6jcgrxq] {
    color: #9CA3AF;
    font-style: italic;
}

.escalate-banner[b-6tq6jcgrxq] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 18px;
    padding: 12px 14px;
    border: 1px solid #FDE68A;
    border-radius: 8px;
    background: #FFFBEB;
    font-size: 12.5px;
    line-height: 1.45;
    color: #92400E;
}

.escalate-banner-icon.material-icons[b-6tq6jcgrxq] {
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 1px;
}

.escalate-error[b-6tq6jcgrxq] {
    margin-top: 12px;
    padding: 9px 12px;
    border: 1px solid #FCA5A5;
    border-radius: 8px;
    background: #FEF2F2;
    font-size: 12.5px;
    color: #B91C1C;
}

/* /Components/Shared/AuditKickBackModal.razor.rz.scp.css */
.kickback-modal[b-x3ys62yfvi] {
    font-family: var(--font-family-primary);
}

.kickback-context[b-x3ys62yfvi] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 18px;
}

.kickback-field[b-x3ys62yfvi] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.kickback-field-message[b-x3ys62yfvi] {
    margin-top: 18px;
}

.kickback-label[b-x3ys62yfvi] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #6B7280;
}

.kickback-value[b-x3ys62yfvi] {
    padding: 8px 12px;
    border-radius: 8px;
    background: #F3F4F6;
    font-size: 13px;
    color: #374151;
    word-break: break-word;
}

.kickback-value-mono[b-x3ys62yfvi] {
    font-family: "Roboto Mono", ui-monospace, monospace;
}

.kickback-notify[b-x3ys62yfvi] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
}

.kickback-notify input[b-x3ys62yfvi] {
    width: 16px;
    height: 16px;
    accent-color: #0D9488;
    cursor: pointer;
}

.kickback-banner[b-x3ys62yfvi] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px solid #99F6E4;
    border-radius: 8px;
    background: #F0FDFA;
    font-size: 12.5px;
    line-height: 1.45;
    color: #0F766E;
}

.kickback-banner-icon.material-icons[b-x3ys62yfvi] {
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 1px;
}

.kickback-error[b-x3ys62yfvi] {
    margin-top: 12px;
    padding: 9px 12px;
    border: 1px solid #FCA5A5;
    border-radius: 8px;
    background: #FEF2F2;
    font-size: 12.5px;
    color: #B91C1C;
}

/* /Components/Shared/Breadcrumbs.razor.rz.scp.css */
/* Quiet single-line trail that sits above the page header without competing
   with it. Uses the design tokens (tokens.css) for the oyster ink ramp. */

.breadcrumbs[b-8xmdtvckjl] {
    margin-bottom: 10px;
    /* Scroll, never wrap: on mobile the trail pans horizontally. */
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
}

.breadcrumbs[b-8xmdtvckjl]::-webkit-scrollbar {
    display: none; /* WebKit */
}

.breadcrumbs-list[b-8xmdtvckjl] {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    min-width: max-content;
}

.breadcrumbs-item[b-8xmdtvckjl] {
    display: inline-flex;
    align-items: center;
    font-size: 0.8rem;
    line-height: 1.2;
}

.breadcrumbs-link[b-8xmdtvckjl],
.breadcrumbs-text[b-8xmdtvckjl],
.breadcrumbs-current[b-8xmdtvckjl] {
    display: inline-block;
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

.breadcrumbs-link[b-8xmdtvckjl] {
    color: var(--color-oyster-500);
    text-decoration: none;
    transition: color 0.15s ease;
}

/* An in-page crumb: a button that reads exactly like the link crumbs. */
.breadcrumbs-button[b-8xmdtvckjl] {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.breadcrumbs-link:hover[b-8xmdtvckjl] {
    color: var(--color-oyster-700);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.breadcrumbs-text[b-8xmdtvckjl] {
    color: var(--color-oyster-500);
}

/* Current page: slightly emphasized, still subordinate to the H1 below. */
.breadcrumbs-current[b-8xmdtvckjl] {
    color: var(--color-oyster-700);
    font-weight: 600;
}

.breadcrumbs-sep[b-8xmdtvckjl] {
    font-size: 1rem;
    color: var(--color-oyster-400);
    margin: 0 2px;
    flex-shrink: 0;
    user-select: none;
}

@media (max-width: 640px) {
    .breadcrumbs-link[b-8xmdtvckjl],
    .breadcrumbs-text[b-8xmdtvckjl],
    .breadcrumbs-current[b-8xmdtvckjl] {
        max-width: 11rem;
    }
}
/* /Components/Shared/FoodAttestationModal.razor.rz.scp.css */
/* Modal-rendered descendants — selectors apply directly without ::deep because the
   .confirm-diff and .confirm-attest-note elements live in FoodAttestationModal's own
   render tree (IngredientsVerification.razor.css can't reach across this component boundary). */

.confirm-diff[b-qn80toffqj] {
    background: #f9fafb;
    border-radius: 10px;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.confirm-diff-row[b-qn80toffqj] {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 0.8rem;
}

.confirm-diff-label[b-qn80toffqj] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9ca3af;
    width: 40px;
    flex-shrink: 0;
}

.confirm-diff-val[b-qn80toffqj] {
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    padding: 3px 10px;
    border-radius: 6px;
    font-weight: 600;
}

.confirm-diff-from[b-qn80toffqj] {
    background: #fee2e2;
    color: #991b1b;
    text-decoration: line-through;
}

.confirm-diff-to[b-qn80toffqj] {
    background: #dcfce7;
    color: #166534;
}

.confirm-attest-note[b-qn80toffqj] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fffbeb;
    border-left: 4px solid #f59e0b;
    border-radius: 0 8px 8px 0;
    padding: 16px;
    font-size: 0.8rem;
    color: #78350f;
    line-height: 1.5;
}

.confirm-attest-note .material-icons[b-qn80toffqj] {
    font-size: 1rem;
    color: #d97706;
    flex-shrink: 0;
    margin-top: 1px;
}
/* /Components/Shared/FoodImage.razor.rz.scp.css */
/* Unified food/product photo tile. See FoodImage.razor for why this is centralised.

   The whole point is `object-fit: contain` on a square white tile: product photos
   arrive at arbitrary aspect ratios (brand-site scrapes, label uploads, retailer
   feeds), so anything that fills the frame crops the package. Contain letterboxes
   instead, and since packaging shots are already shot on white the letterbox is
   usually invisible. Do not change this to cover. */

.fi[b-zm7aswz8zj] {
    position: relative;
    flex: 0 0 auto;
    line-height: 0; /* no descender gap under the frame */
}

.fi-frame[b-zm7aswz8zj] {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--color-white, #fff);
    border: 1px solid var(--color-oyster-300, #E0DBE7);
}

.fi-frame img[b-zm7aswz8zj] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* No photo (or a print surface that suppresses photos): a quiet linen tile with a
   single placeholder glyph. One placeholder everywhere — the app previously used
   fastfood / add_a_photo / photo / image / inventory_2 / a brand initial / the words
   "Product Image" depending on which screen you were on. */
.fi-frame-empty[b-zm7aswz8zj] {
    background: var(--color-oyster-100, #F9F8F3);
}

.fi-ph[b-zm7aswz8zj] {
    color: var(--color-oyster-400, #B7B2C4);
}

/* Broken photo. The placeholder glyph ships in the markup on every tile so the
   swap needs no DOM surgery: while a photo is present the glyph carries
   .fi-ph-hidden, and food-image-fallback.js adds .fi-frame-broken to the frame
   when the <img> fails, which un-hides the glyph and hides the image (hiding the
   image is also what suppresses the browser's alt-text rendering). Both broken
   rules deliberately out-specify the two they override, so their position in this
   file does not matter. */
.fi-ph-hidden[b-zm7aswz8zj] {
    display: none;
}

.fi-frame.fi-frame-broken[b-zm7aswz8zj] {
    background: var(--color-oyster-100, #F9F8F3);
}

.fi-frame.fi-frame-broken img[b-zm7aswz8zj] {
    display: none;
}

.fi-frame-broken .fi-ph-hidden[b-zm7aswz8zj] {
    display: inline-block;
}

/* Pending-review dot. Lives on .fi (outside the overflow-hidden frame) so it is
   never clipped, and it is driven by DraftUrl rather than re-derived per call site. */
.fi-pending[b-zm7aswz8zj] {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: #FBBF24;
    border: 2px solid var(--color-white, #fff);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.16);
}

/* ── Size tokens ─────────────────────────────────────────────────────────────
   Radius and inner padding scale with the tile so small thumbnails stay crisp
   and large heroes stay soft. Padding keeps a contained label off the border. */

.fi-xs[b-zm7aswz8zj] { width: 32px; height: 32px; }
.fi-xs .fi-frame[b-zm7aswz8zj] { border-radius: 6px; padding: 2px; }
.fi-xs .fi-ph[b-zm7aswz8zj] { font-size: 16px; }
.fi-xs .fi-pending[b-zm7aswz8zj] { width: 10px; height: 10px; top: -2px; right: -2px; }

.fi-sm[b-zm7aswz8zj] { width: 40px; height: 40px; }
.fi-sm .fi-frame[b-zm7aswz8zj] { border-radius: 8px; padding: 3px; }
.fi-sm .fi-ph[b-zm7aswz8zj] { font-size: 19px; }

.fi-md[b-zm7aswz8zj] { width: 64px; height: 64px; }
.fi-md .fi-frame[b-zm7aswz8zj] { border-radius: 10px; padding: 4px; }
.fi-md .fi-ph[b-zm7aswz8zj] { font-size: 26px; }

.fi-lg[b-zm7aswz8zj] { width: 96px; height: 96px; }
.fi-lg .fi-frame[b-zm7aswz8zj] { border-radius: 12px; padding: 6px; box-shadow: 0 2px 8px rgba(16, 24, 40, 0.10); }
.fi-lg .fi-ph[b-zm7aswz8zj] { font-size: 34px; }

.fi-xl[b-zm7aswz8zj] { width: 120px; height: 120px; }
.fi-xl .fi-frame[b-zm7aswz8zj] { border-radius: 14px; padding: 7px; box-shadow: 0 2px 10px rgba(16, 24, 40, 0.12); }
.fi-xl .fi-ph[b-zm7aswz8zj] { font-size: 40px; }

/* ── Fill: no fixed size, contained at 100% of the parent box ────────────────
   For showcase bands, whose job is to present the product big. Frameless on purpose:
   a border would draw a box around the letterbox and make it legible, whereas a
   white-background packshot floating on a white band has no visible seam at all. */

.fi-fill[b-zm7aswz8zj] {
    width: 100%;
    height: 100%;
}

.fi-fill .fi-frame[b-zm7aswz8zj] {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.fi-fill .fi-ph[b-zm7aswz8zj] {
    font-size: 44px;
}

/* On a dark band the same photo needs the white plate back, or a white-background
   packshot reads as a ragged floating blob against the artwork. The plate fills the
   band (minus the band's own padding) rather than shrinking to a token. */
.fi-fill.fi-on-dark .fi-frame[b-zm7aswz8zj] {
    background: var(--color-white, #fff);
    border-radius: 12px;
    padding: 10px;
}

/* On the two dark hero bands (product report hero, ingredients verification banner)
   the white tile needs to lift off the artwork rather than hug it with a hairline.
   Handled here, keyed off the band, so call sites still pass nothing but a size. */
.fi-on-dark .fi-frame[b-zm7aswz8zj] {
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow: 0 10px 28px rgba(7, 12, 26, 0.34), 0 0 0 4px rgba(255, 255, 255, 0.16);
}

/* Print / PDF: drop the shadows (they render as grey mud) and keep the hairline. */
@media print {
    .fi-frame[b-zm7aswz8zj] {
        box-shadow: none !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .fi-pending[b-zm7aswz8zj] {
        box-shadow: none;
    }
}
/* /Components/Shared/Gs1AnchorCard.razor.rz.scp.css */
/* The licensee facts: a fixed label column beside the values. */
.licence-fields[b-z75kqd6i92] {
    grid-template-columns: 150px 1fr;
}

.monospace[b-z75kqd6i92] {
    font-family: ui-monospace, monospace;
}
/* /Components/Shared/IngredientBrowser.razor.rz.scp.css */
/* Allergen text, and the subcategory under its category (Table Types INTEL-527). */
.ib-muted[b-hhfmo7yw9t] { color: var(--text-muted); }
.ib-sub[b-hhfmo7yw9t] { color: var(--text-muted); font-size: 0.75rem; }
/* /Components/Shared/IngredientLookupPanel.razor.rz.scp.css */
/* Panel-rendered descendants — selectors apply directly without ::deep because the
   panel renders these elements in its own scope (IngredientsVerification.razor.css can't
   reach across this component boundary since the panel is position:fixed and lives
   outside IngredientsVerification's DOM subtree). */

.ai-lookup-result-card[b-djna5i84qm] {
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    padding: 13px 16px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.15s, box-shadow 0.15s;
    background: #fff;
}

.ai-lookup-result-card:hover[b-djna5i84qm] {
    border-color: #25507c;
    background: #f5f3ff;
    box-shadow: 0 3px 10px rgba(37, 80, 124, 0.13);
    transform: translateY(-1px);
}

.ai-lookup-result-card.ai-lookup-current[b-djna5i84qm] {
    border-color: #059669;
    background: #f0fdf4;
    box-shadow: 0 0 0 1px #059669;
}

.ai-lookup-score-bar[b-djna5i84qm] {
    height: 3px;
    border-radius: 999px;
    background: #f3f4f6;
    overflow: hidden;
    margin-top: 8px;
}

.ai-lookup-score-fill[b-djna5i84qm] {
    height: 100%;
    border-radius: 999px;
    transition: width 0.55s cubic-bezier(.4, 0, .2, 1);
}

/* "Thinking" animation orb. */
.ai-lookup-orb[b-djna5i84qm] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #25507c 0%, #5c7fa5 50%, #93aec9 100%);
    animation: aiOrbPulse-b-djna5i84qm 1.5s ease-in-out infinite;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.ai-lookup-orb[b-djna5i84qm]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.85) 50%, transparent 100%);
    animation: aiScanLine-b-djna5i84qm 1.8s linear infinite;
}

@keyframes aiOrbPulse-b-djna5i84qm {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 80, 124, 0.3); }
    50% { transform: scale(1.06); box-shadow: 0 0 20px 6px rgba(37, 80, 124, 0.15); }
}

@keyframes aiScanLine-b-djna5i84qm {
    0% { transform: translateY(-6px); }
    100% { transform: translateY(60px); }
}

/* Bouncing-dots indicator now lives in ThinkingDots.razor — kept the orb +
   scan-line animation here because it's specific to this panel's layout. */
/* /Components/Shared/IngredientsVerificationPanel.razor.rz.scp.css */
/* Scoped CSS for IngredientsVerificationPanel.razor (extracted from the
   IngredientsVerification page so the panel can also be hosted in ProductDetail's
   fullscreen modal). Selectors are prefixed with ::deep so styles reach descendant
   elements that may be rendered by extracted sub-components (ParsedIngredientRow,
   AuditResolveModal, IngredientFlagModal, etc.); the panel wraps its markup in a
   single scoped root div so the ::deep rules always have a scoped ancestor. */

/* ── Ingredient table base ──
   Table Types · Ingredient parser · Parsed Ingredients (INTEL-548). The shell, the tree rails,
   the hover and the card reading come from css/wci/wci-parser.css (.wci-parser-tbl); this file
   keeps only what is the parser's own: the sticky header, the row cursor, the selection and
   review highlights, and the match pills. */
[b-g07oeh80ji] #parser-table thead th { position: sticky; top: 0; z-index: 10; }
[b-g07oeh80ji] #parser-table tbody tr { cursor: pointer; }

/* ── Parsed ingredients collapsible panel ── */
[b-g07oeh80ji] .parsed-panel {
    max-height: 0; overflow: clip; opacity: 0;
    transition: max-height 0.32s cubic-bezier(0.4,0,0.2,1),
                opacity 0.22s ease;
}
[b-g07oeh80ji] .parsed-panel.open {
    max-height: 9000px; opacity: 1;
    transition: max-height 0.32s cubic-bezier(0.4,0,0.2,1),
                opacity 0.22s ease 0.04s;
}
/* `.fully-open` is added by attachPanelOverflowToggle (IngredientsVerification.razor.js) on
   transitionend so the .ingred-flag-popup tooltip can escape the panel. The class
   is stripped on transitionrun (and thus on close) so overflow:clip is back in
   effect during the shrink animation — otherwise table rows leak below the
   panel as max-height animates to 0. */
[b-g07oeh80ji] .parsed-panel.open.fully-open { overflow: visible; }

/* Depth 25 is the "leaf overflow" marker: its name reads in the brand ink. No left rail,
   no depth tint (Table Types: a row never highlights one border, and there is no zebra). */
[b-g07oeh80ji] #parser-table tr[data-depth="25"] .tree-name-child { color: var(--primary-ink); font-weight: 700; }

/* The selected row, from the tokens so it holds in dark mode. ParsedIngredientRow puts
   .bg-indigo-50 on it; the id selector keeps it above the shared hover. */
[b-g07oeh80ji] #parser-table tbody tr.bg-indigo-50,
[b-g07oeh80ji] #parser-table tbody tr.bg-indigo-50:hover { background: color-mix(in srgb, var(--primary-ink) 12%, transparent); }

/* ── Match badges ── */
[b-g07oeh80ji] .match-cell { display: inline-flex; align-items: center; gap: 5px; }
[b-g07oeh80ji] .code-interp-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.68rem; font-weight: 600; }
[b-g07oeh80ji] .code-badge-green { background: var(--color-success-100); color: var(--color-success-text); }
[b-g07oeh80ji] .code-badge-yellow { background: var(--color-warning-100); color: var(--color-warning-text); }
[b-g07oeh80ji] .code-badge-red { background: var(--color-danger-100); color: var(--color-danger-text); }
[b-g07oeh80ji] .code-badge-gray { background: var(--color-oyster-200); color: var(--color-oyster-700); }
[b-g07oeh80ji] .code-badge-audited { background: var(--color-indigo-100); color: var(--color-indigo-600); }
[b-g07oeh80ji] .audited-badge { display: inline-flex; align-items: center; gap: 2px; font-size: 0.6rem; font-weight: 700; background: var(--color-indigo-200); color: var(--color-indigo-700); border-radius: 4px; padding: 1px 5px; margin-left: 4px; vertical-align: middle; }
[b-g07oeh80ji] .kickback-badge { display: inline-flex; align-items: center; gap: 2px; font-size: 0.6rem; font-weight: 700; background: #CCFBF1; color: #0F766E; border-radius: 4px; padding: 1px 5px; margin-left: 4px; vertical-align: middle; }
[b-g07oeh80ji] .audit-banner { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.75rem 0; padding: 0.5rem 0.75rem; background: var(--color-indigo-100); color: var(--color-indigo-700); border: 1px solid var(--color-indigo-200); border-radius: 0.5rem; font-size: 0.75rem; }

/* Persistent "Matched still needs confirming" call to action (see .razor). */
[b-g07oeh80ji] .confirm-prompt-banner { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0.75rem 1rem 1rem; padding: 0.75rem 0.9rem; background: var(--color-success-100); color: var(--color-success-text); border: 1.5px solid var(--color-success-300); border-radius: 0.5rem; }
[b-g07oeh80ji] .confirm-prompt-text { flex: 1; font-size: 0.82rem; line-height: 1.45; }
[b-g07oeh80ji] .confirm-prompt-text strong { display: block; font-weight: 700; margin-bottom: 2px; }

/* Kick-back "action needed" bar + Edit ingredients CTA. Amber, to match the row's
   action-needed highlight; reuses .confirm-prompt-text for the copy block. */
[b-g07oeh80ji] .kickback-prompt-banner { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0.75rem 1rem 1rem; padding: 0.75rem 0.9rem; background: var(--color-warning-100); color: var(--color-warning-text); border: 1.5px solid var(--color-warning-500); border-radius: 0.5rem; }
[b-g07oeh80ji] .kickback-prompt-banner > .material-icons { color: var(--color-warning-700); }

[b-g07oeh80ji] .ingred-flag-btn {
    background: none; border: none; padding: 2px 3px; cursor: pointer;
    font-size: 0.8rem !important; color: var(--color-oyster-300); line-height: 1;
    transition: color 0.12s; vertical-align: middle; margin-left: 4px;
}
[b-g07oeh80ji] .ingred-flag-btn:hover { color: var(--color-danger-500); }
[b-g07oeh80ji] .ingred-flag-btn.flagged { color: var(--color-danger-500); }
[b-g07oeh80ji] .ingred-flag-btn .material-icons { font-size: 0.8rem !important; }

/* HTML popup for flag notes (replaces native title=) */
[b-g07oeh80ji] .ingred-flag-hover {
    position: relative;
    display: inline-flex;
    align-items: center;
}
[b-g07oeh80ji] .ingred-flag-readonly {
    display: inline-flex;
    align-items: center;
    color: var(--color-danger-500);
    margin-left: 4px;
    padding: 2px 3px;
}
[b-g07oeh80ji] .ingred-flag-readonly .material-icons { font-size: 0.8rem !important; }
[b-g07oeh80ji] .ingred-flag-popup {
    position: absolute;
    bottom: calc(100% + 6px);
    right: 0;
    z-index: 50;
    width: 280px;
    padding: 10px 12px;
    background: #fff;
    border: 1.5px solid var(--color-indigo-600);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    text-align: left;
    white-space: normal;
    font-weight: 400;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--color-oyster-800);
    visibility: hidden;
    opacity: 0;
    /* Hide is instant; show is delayed 1s and then fades in over 0.15s. */
    transition: visibility 0s linear 0s, opacity 0.15s ease 0s;
}
[b-g07oeh80ji] .ingred-flag-hover:hover .ingred-flag-popup,
[b-g07oeh80ji] .ingred-flag-hover:focus-within .ingred-flag-popup {
    visibility: visible;
    opacity: 1;
    transition: visibility 0s linear 1s, opacity 0.15s ease 1s;
}
[b-g07oeh80ji] .ingred-flag-hover.popup-suppressed .ingred-flag-popup {
    visibility: hidden !important;
    opacity: 0 !important;
    transition: none !important;
}
[b-g07oeh80ji] .ingred-flag-popup-header {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-primary);
    margin-bottom: 4px;
}
[b-g07oeh80ji] .ingred-flag-popup-body { white-space: pre-wrap; }

/* Owl icon next to ingredient names */
[b-g07oeh80ji] .owl-icon-inline { display: inline-flex; align-items: center; margin-left: 4px; vertical-align: middle; opacity: 0.6; }
[b-g07oeh80ji] .owl-icon-inline:hover { opacity: 1; }

/* ── Review stepper active row ── */
[b-g07oeh80ji] #parser-table tbody tr.review-active { background: color-mix(in srgb, var(--primary-ink) 12%, transparent) !important; outline: 2px solid var(--primary-ink); outline-offset: -1px; }

/* ── Kick-back arrival highlight ──
   A brand landing from the kick-back email auto-scrolls to the flagged row; this yellow
   "action needed" highlight pulses a glowing halo on arrival to grab the eye, holds bright
   long enough to be noticed, then fades so the persistent marker is the row's own badge.
   The glow rides on box-shadow; the outline gives a crisp edge on top of it. */
[b-g07oeh80ji] #parser-table tbody tr.kickback-target { animation: kickback-target-flash-b-g07oeh80ji 12s ease-out forwards; }
@keyframes kickback-target-flash-b-g07oeh80ji {
    0%   { background: #FEF08A !important; outline: 3px solid #EAB308; outline-offset: -1px; box-shadow: 0 0 0 3px rgba(234,179,8,0.55), 0 0 18px 6px rgba(234,179,8,0.65); }
    6%   { box-shadow: 0 0 0 2px rgba(234,179,8,0.30), 0 0 8px 2px rgba(234,179,8,0.30); }
    12%  { box-shadow: 0 0 0 3px rgba(234,179,8,0.55), 0 0 18px 6px rgba(234,179,8,0.65); }
    18%  { box-shadow: 0 0 0 2px rgba(234,179,8,0.30), 0 0 8px 2px rgba(234,179,8,0.30); }
    24%  { box-shadow: 0 0 0 3px rgba(234,179,8,0.55), 0 0 18px 6px rgba(234,179,8,0.65); }
    90%  { background: #FEF08A !important; outline: 3px solid #EAB308; outline-offset: -1px; box-shadow: 0 0 0 3px rgba(234,179,8,0.55), 0 0 18px 6px rgba(234,179,8,0.65); }
    100% { background: transparent; outline: 3px solid transparent; outline-offset: -1px; box-shadow: 0 0 0 0 rgba(234,179,8,0); }
}
@media (prefers-reduced-motion: reduce) {
    [b-g07oeh80ji] #parser-table tbody tr.kickback-target { animation: none; background: #FEF08A !important; outline: 3px solid #EAB308; outline-offset: -1px; box-shadow: 0 0 0 3px rgba(234,179,8,0.55), 0 0 18px 6px rgba(234,179,8,0.6); }
}

/* (.confirm-diff* + .confirm-attest-note moved to FoodAttestationModal.razor.css —
   modal contents render in their own scope, unreachable from this file via ::deep.) */

/* (.conv-* moved to ResolveConversationPanel.razor.css; .ai-lookup-* moved to
   IngredientLookupPanel.razor.css — those panels render in their own scopes,
   unreachable from this file via ::deep.) */

/* ── Hero Banner ── */
[b-g07oeh80ji] .food-hero-outer {
    border-radius: 16px; overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
    margin-bottom: 1.5rem; position: relative; z-index: 0;
}
[b-g07oeh80ji] .food-card-image {
    width: 100%; aspect-ratio: 3 / 1; min-height: 220px;
    background: var(--color-oyster-900); overflow: hidden; position: relative;
    --plate: 168px;
}
@media (min-width: 1024px) { [b-g07oeh80ji] .food-card-image { aspect-ratio: 4 / 1; min-height: 240px; --plate: 200px; } }
/* Branded band surface. Always the same, so the band never depends on the photo being
   colourful enough to carry it. */
[b-g07oeh80ji] .food-card-base {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, var(--color-indigo-500) 0%, var(--color-indigo-700) 60%, var(--color-indigo-800) 100%);
}

/* Dark showcase band (the second of the two blessed band patterns; the light one is
   `.food-showcase` in components.css). A 4:1 strip cannot be filled by any product photo
   without cropping it to a stripe, so the product sits on a white plate over a branded
   surface, sized to the band rather than to a tile token so it stays large.

   The plate and the overlay's left inset both derive from --plate on the band, so text can
   never run under the plate. A purely height-driven plate (top/bottom inset + 1:1) would be
   wrong here: the band's height tracks its width, so the plate would silently change width
   at every viewport size while the text inset stayed where it was. */
[b-g07oeh80ji] .food-hero-plate {
    position: absolute;
    left: 24px; top: 50%; transform: translateY(-50%);
    width: var(--plate); height: var(--plate);
    z-index: 3;
}

[b-g07oeh80ji] .food-card-overlay {
    position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
    /* Left padding clears the plate (24px inset + plate + 20px gutter). */
    padding: 56px calc(220px + 32px) 20px calc(var(--plate) + 44px);
    background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.34) 55%, transparent 100%);
}
@media (min-width: 1024px) { [b-g07oeh80ji] .food-card-overlay { padding-right: calc(300px + 32px); } }
[b-g07oeh80ji] .food-card-name {
    font-size: 1.6rem; font-weight: 900; color: #fff;
    letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.2;
    margin-bottom: 6px; text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
[b-g07oeh80ji] .food-card-brand {
    font-size: 0.95rem; font-weight: 500; color: rgba(255,255,255,0.85);
    text-shadow: 0 1px 6px rgba(0,0,0,0.5); letter-spacing: 0.02em;
}
[b-g07oeh80ji] .hero-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
[b-g07oeh80ji] .hero-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px 3px 7px; border-radius: 999px;
    font-size: 0.68rem; font-weight: 600; line-height: 1.3;
    letter-spacing: 0.01em; backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px); white-space: nowrap;
}
[b-g07oeh80ji] .hero-pill .material-icons { font-size: 0.82rem; }
[b-g07oeh80ji] .hero-pill-indigo-dark { background: rgba(37,80,124,0.88); color: #fff; }

/* ── UPC chip inside hero ── */
[b-g07oeh80ji] .food-card-upc {
    position: absolute; bottom: 14px; right: 16px;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    background: #fff; border: 1px solid var(--color-oyster-300); border-radius: 10px;
    padding: 8px 14px 12px; z-index: 2;
    box-shadow: 0 2px 12px rgba(0,0,0,0.18); min-width: 220px;
}
@media (min-width: 1024px) { [b-g07oeh80ji] .food-card-upc { width: 300px; } }

/* ── Mobile hero adjustments ── */
@media (max-width: 639px) {
    [b-g07oeh80ji] .food-card-overlay { padding: 40px 20px 16px 20px; }
    [b-g07oeh80ji] .food-card-name { font-size: 1.1rem; }
    [b-g07oeh80ji] .food-card-brand { font-size: 0.88rem; }
    [b-g07oeh80ji] .food-card-upc { position: relative; bottom: auto; right: auto; width: 100%; margin-top: -1px; border-radius: 0 0 10px 10px; min-width: auto; }
    /* Tight band: a smaller plate pinned to the top-left corner, with the overlay text
       taking its full-width mobile padding beneath rather than beside it. */
    [b-g07oeh80ji] .food-card-image { --plate: 116px; }
    [b-g07oeh80ji] .food-hero-plate { left: 16px; top: 16px; transform: none; }
}
/* /Components/Shared/InteractiveDashboardCategoriesDialog.razor.rz.scp.css */
.dashboard-categories[b-6mdpw0szbr] { display: flex; flex-direction: column; gap: 14px; padding: 4px; }
.dashboard-categories-actions[b-6mdpw0szbr] { display: flex; justify-content: flex-end; gap: 8px; }
.dashboard-categories-list[b-6mdpw0szbr] { max-height: 50vh; overflow: auto; }
/* /Components/Shared/InteractiveDashboardCategoryEditDialog.razor.rz.scp.css */
.dashboard-category-edit[b-jl6wvxye64] { display: flex; flex-direction: column; gap: 14px; padding: 4px; }
.dashboard-category-edit-actions[b-jl6wvxye64] { display: flex; justify-content: flex-end; gap: 8px; }
/* /Components/Shared/InteractiveDashboardEditDialog.razor.rz.scp.css */
/* A labelled field: its label, then the control. */
.field-stack[b-pfxqzch2k6] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
/* /Components/Shared/MarketingAssetTree.razor.rz.scp.css */
/* The Marketing Assets file tree (INTEL-546; ip-b2b pages/marketing-assets.html .ma-*, Table Types #attb-ma).
   The grid, headers, hover, spinner and card collapse are WciDataTable's; this sheet adds only what a tree
   needs on top: the chevron, the depth indent, the bare type glyphs and the contents count. */

.ma-tree[b-7hujnsic60] { min-width: 0; }

/* Disclosure caret: a real button, rotated a quarter turn when its folder is open. */
.ma-tree[b-7hujnsic60]  .ma-tree-chev {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%;
    background: transparent; color: var(--text-subtle); cursor: pointer;
    transition: transform 0.2s ease, background 0.15s ease;
}
.ma-tree[b-7hujnsic60]  .ma-tree-chev .material-symbols-outlined { font-size: 18px; }
.ma-tree[b-7hujnsic60]  .ma-tree-chev:hover { background: var(--surface-2); color: var(--text); }
.ma-tree[b-7hujnsic60]  .ma-tree-chev:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.ma-tree[b-7hujnsic60]  .ma-tree-chev.is-open { transform: rotate(90deg); color: var(--primary-ink, var(--primary)); }

/* Name: indented by depth in the table, with a bare glyph (never on a tile) and, on a folder, its contents.
   A long png or pdf name wraps rather than widening the table or the card. */
.ma-tree[b-7hujnsic60]  .ma-tree-name {
    display: flex; align-items: center; gap: 10px; min-width: 0;
    padding-left: calc(var(--ma-depth, 0) * 22px);
}
.ma-tree[b-7hujnsic60]  .ma-tree-label {
    min-width: 0; overflow-wrap: anywhere;
    font-size: 0.9rem; font-weight: 600; color: var(--text); line-height: 1.25;
}
.ma-tree[b-7hujnsic60]  .ma-tree-row--folder .ma-tree-label { font-weight: 700; }
.ma-tree[b-7hujnsic60]  .ma-tree-count {
    flex: none; padding: 1px 8px; border-radius: 999px; white-space: nowrap;
    font-size: 0.66rem; font-weight: 700; color: var(--text-subtle);
    background: var(--surface-2); border: 1px solid var(--border);
}
.ma-tree[b-7hujnsic60]  .ma-tree-name--note { font-size: 0.8rem; font-style: italic; color: var(--text-muted); }

.ma-tree[b-7hujnsic60]  .ma-tree-ic { flex: none; font-size: 24px; color: var(--text-subtle); }
.ma-tree[b-7hujnsic60]  .ma-tree-ic--folder { color: var(--primary); }
.ma-tree[b-7hujnsic60]  .ma-tree-ic--pdf { color: var(--sec-red); }
.ma-tree[b-7hujnsic60]  .ma-tree-ic--image { color: var(--sec-green); }
.ma-tree[b-7hujnsic60]  .ma-tree-ic--vector { color: var(--ter-amber-text); }

@media (prefers-reduced-motion: reduce) {
    .ma-tree[b-7hujnsic60]  .ma-tree-chev { transition: none; }
}

/* Card reading (WciDataTable's own collapse at 720px). The chevron and the name share the card's first line,
   the name keeping clear of the pinned ⋮, and the nesting moves from the name's indent onto the card's left
   margin, so depth still reads and the cards never flatten the tree. Classes are doubled to sit above the
   table's own stacked-cell rules. */
@container adm (max-width: 720px) {
    .ma-tree[b-7hujnsic60]  .adm-trow > .adm-td.ma-tree-chev-cell.ma-tree-chev-cell { flex: 0 0 auto; width: auto; }
    /* The name takes the rest of the first line (24px chevron + 10px gap), so Size and Updated wrap beneath it
       rather than sharing the line and squeezing the label to a column of letters; the count wraps too. */
    .ma-tree[b-7hujnsic60]  .adm-trow > .adm-td.ma-tree-name-cell.ma-tree-name-cell { flex: 1 1 calc(100% - 34px); padding-right: 38px; }
    .ma-tree[b-7hujnsic60]  .ma-tree-name { padding-left: 0; flex-wrap: wrap; }
    .ma-tree[b-7hujnsic60]  .ma-tree-label { flex: 1 1 8rem; }
    .ma-tree[b-7hujnsic60]  .adm-trow.ma-tree-d1 { margin-left: 10px; }
    .ma-tree[b-7hujnsic60]  .adm-trow.ma-tree-d2 { margin-left: 20px; }
    .ma-tree[b-7hujnsic60]  .adm-trow.ma-tree-d3 { margin-left: 30px; }
    .ma-tree[b-7hujnsic60]  .adm-trow.ma-tree-d4 { margin-left: 40px; }
    /* The empty-folder line is a line, not a card of blank labelled cells. */
    .ma-tree[b-7hujnsic60]  .adm-trow.ma-tree-row--note > .adm-td:not(.ma-tree-name-cell) { display: none; }
}

/* File rows are not products and do not toggle: only a folder row reads as clickable. */
.ma-tree[b-7hujnsic60]  .adm-trow.wci-trow--link:not(.ma-tree-row--folder) { cursor: default; }

/* The search's hits in a name (the design's .ma-hl). */
.ma-tree[b-7hujnsic60]  .ma-tree-hit {
    padding: 0 1px; border-radius: 3px; color: inherit;
    background: color-mix(in srgb, var(--ter-amber) 30%, transparent);
}

/* The results line beside the search: always present with a fixed basis and height, empty when nothing
   is filtered. Its footprint never depends on its text, so the toolbar wraps the same way (beside the pill,
   or on its own line on a phone) before and after a search starts, and the grid never jumps. */
.ma-tree-results[b-7hujnsic60] {
    display: inline-flex; align-items: center; gap: 6px; flex: 1 1 14rem; min-width: 0; min-height: 1.5rem;
    font-size: 0.78rem; color: var(--text-muted); overflow-wrap: anywhere;
}
.ma-tree-results .material-symbols-outlined[b-7hujnsic60] { font-size: 16px; color: var(--text-subtle); }
/* /Components/Shared/NutritionFactsLabel.razor.rz.scp.css */
/* FDA-style Nutrition Facts label — shared between SpecSheetPane (chat) and SpecSheetView
   (read-only spec sheet). Visual rules deliberately stay self-contained: no Tailwind, no app
   theme tokens; this surface mimics a printed FDA label across all consumers. */

.nf-label[b-0a7upoh76i] {
    background: #ffffff;
    color: #000000;
    border: 2px solid #000000;
    border-radius: 8px;
    overflow: hidden;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.nf-label .nf-hdr[b-0a7upoh76i] {
    font-size: 1.55rem;
    font-weight: 900;
    line-height: 1.05;
    padding: 6px 10px 4px;
    border-bottom: 1px solid #000000;
    letter-spacing: -0.01em;
}

.nf-label .nf-serv[b-0a7upoh76i] {
    padding: 2px 10px 4px;
    border-bottom: 8px solid #000000;
}

.nf-label .nf-serv-top[b-0a7upoh76i] {
    font-size: 0.72rem;
    padding: 2px 0;
    border-bottom: 1px solid #000000;
}

.nf-label .nf-serv-bot[b-0a7upoh76i] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    font-size: 0.78rem;
    padding: 3px 0 2px;
}

.nf-label .nf-serv-bot strong[b-0a7upoh76i] {
    font-weight: 800;
    /* The serving sits at the right edge like every value on a label; with the edit pencil as a third item,
       space-between had left it floating mid-row. */
    margin-left: auto;
    text-align: right;
}

.nf-label .nf-cal[b-0a7upoh76i] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 3px 10px 3px;
    border-bottom: 4px solid #000000;
}

.nf-label .nf-cal-l[b-0a7upoh76i] {
    display: flex;
    flex-direction: column;
}

.nf-label .nf-cal-lbl[b-0a7upoh76i] {
    font-size: 0.62rem;
    line-height: 1.2;
}

.nf-label .nf-cal-kw[b-0a7upoh76i] {
    font-size: 1.3rem;
    font-weight: 900;
    line-height: 1;
}

.nf-label .nf-cal-n[b-0a7upoh76i] {
    font-size: 2.1rem;
    font-weight: 900;
    line-height: 1;
}

.nf-label .nf-dv-hdr[b-0a7upoh76i] {
    text-align: right;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 2px 10px 2px;
    border-bottom: 1px solid #000000;
}

.nf-label .nf-r[b-0a7upoh76i] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    padding: 2px 10px;
    border-bottom: 1px solid #000000;
    font-size: 0.72rem;
    min-height: 20px;
}

.nf-label .nf-r:last-child[b-0a7upoh76i] {
    border-bottom: none;
}

.nf-label .nf-r .k[b-0a7upoh76i] {
    flex: 1;
}

.nf-label .nf-r .dv[b-0a7upoh76i] {
    flex-shrink: 0;
    font-weight: 700;
}

.nf-label .nf-r strong[b-0a7upoh76i] {
    font-weight: 800;
}

.nf-label .nf-r em[b-0a7upoh76i] {
    font-style: italic;
}

.nf-label .nf-ind1[b-0a7upoh76i] {
    padding-left: 24px;
}

.nf-label .nf-ind2[b-0a7upoh76i] {
    padding-left: 38px;
}

.nf-label .nf-sep-thick[b-0a7upoh76i] {
    height: 8px;
    background: #000000;
}

.nf-label .nf-sep-med[b-0a7upoh76i] {
    height: 4px;
    background: #000000;
}

.nf-label .nf-foot[b-0a7upoh76i] {
    padding: 6px 10px 8px;
    font-size: 0.6rem;
    line-height: 1.35;
    color: #000000;
}

.nf-label .nf-dash[b-0a7upoh76i] {
    color: #9ca3af;
    font-weight: 400;
}

/* ── Click-to-edit affordances (chat spec-sheet pane only, via the Editable parameter) ──
   Read-only consumers never get the nf-editable class, so nothing below applies to them. */

.nf-label .nf-editable[b-0a7upoh76i] {
    cursor: pointer;
}

.nf-label .nf-r.nf-editable:hover[b-0a7upoh76i],
.nf-label .nf-cal.nf-editable:hover[b-0a7upoh76i],
.nf-label .nf-serv-top.nf-editable:hover[b-0a7upoh76i],
.nf-label .nf-serv-bot.nf-editable:hover[b-0a7upoh76i] {
    background-color: rgba(37, 80, 124, 0.07);
}

/* The % Daily Value cell is its own click target inside the row, so it needs its own affordance:
   without one it inherits the row's highlight and reads as "click here to edit the amount", which
   is the opposite of what it does. Slightly stronger than the row tint so the smaller target wins
   the eye when the pointer is over it. */
.nf-label .nf-r .dv.nf-editable:hover[b-0a7upoh76i] {
    background-color: rgba(37, 80, 124, 0.16);
    border-radius: 3px;
}

.nf-label .nf-edit-pencil[b-0a7upoh76i] {
    flex-shrink: 0;
    font-size: 12px;
    line-height: 1;
    color: rgba(37, 80, 124, 0.75);
    opacity: 0;
    transition: opacity 120ms ease-out;
    pointer-events: none;
}

.nf-label .nf-editable:hover .nf-edit-pencil[b-0a7upoh76i] {
    opacity: 1;
}

/* Serving lines are not flex rows; keep the pencil inline. */
.nf-label .nf-serv-top .nf-edit-pencil[b-0a7upoh76i],
.nf-label .nf-cal-n .nf-edit-pencil[b-0a7upoh76i] {
    display: inline-block;
    vertical-align: baseline;
    margin-left: 4px;
}

.nf-label .nf-edit-input[b-0a7upoh76i] {
    font: inherit;
    font-weight: 600;
    color: inherit;
    background: #ffffff;
    border: 1px solid rgba(37, 80, 124, 0.55);
    border-radius: 4px;
    padding: 0 4px;
    width: 64px;
    line-height: 1.3;
    outline: none;
}

.nf-label .nf-edit-input:focus[b-0a7upoh76i] {
    border-color: rgba(37, 80, 124, 0.9);
    box-shadow: 0 0 0 2px rgba(37, 80, 124, 0.15);
}

.nf-label .nf-edit-input.invalid[b-0a7upoh76i] {
    border-color: #b3261e;
    background-color: rgba(254, 202, 202, 0.32);
}

.nf-label .nf-edit-unit[b-0a7upoh76i] {
    margin-left: 2px;
    color: #4b5563;
}

.nf-label .nf-edit-cal[b-0a7upoh76i] {
    width: 84px;
    font-size: 1rem;
    font-weight: 800;
}

.nf-label .nf-serv-editor[b-0a7upoh76i] {
    align-items: center;
}

.nf-label .nf-serv-editor-inputs[b-0a7upoh76i] {
    display: flex;
    gap: 4px;
}

.nf-label .nf-serv-editor-inputs .nf-edit-input[b-0a7upoh76i] {
    width: 82px;
    font-size: 0.72rem;
}

/* ── Field-change flash + missing-required tints (chat-side only via decorator) ─────
   Rules live alongside the rest of the NFP styling so the panel is self-contained. */

@keyframes spec-field-flash-b-0a7upoh76i {
    0% {
        background-color: rgba(37, 80, 124, 0.28);
        box-shadow: inset 0 0 0 1px rgba(37, 80, 124, 0.32);
    }
    40% {
        background-color: rgba(37, 80, 124, 0.18);
        box-shadow: inset 0 0 0 1px rgba(37, 80, 124, 0.18);
    }
    100% {
        background-color: transparent;
        box-shadow: inset 0 0 0 1px transparent;
    }
}

.nf-label .nf-r.flash-a[b-0a7upoh76i],
.nf-label .nf-r.flash-b[b-0a7upoh76i],
.nf-label .nf-cal.flash-a[b-0a7upoh76i],
.nf-label .nf-cal.flash-b[b-0a7upoh76i],
.nf-label .nf-serv.flash-a[b-0a7upoh76i],
.nf-label .nf-serv.flash-b[b-0a7upoh76i] {
    animation: spec-field-flash-b-0a7upoh76i 2.4s ease-out;
    border-radius: 0;
}

@media (prefers-reduced-motion: reduce) {
    .nf-label .nf-r.flash-a[b-0a7upoh76i],
    .nf-label .nf-r.flash-b[b-0a7upoh76i],
    .nf-label .nf-cal.flash-a[b-0a7upoh76i],
    .nf-label .nf-cal.flash-b[b-0a7upoh76i],
    .nf-label .nf-serv.flash-a[b-0a7upoh76i],
    .nf-label .nf-serv.flash-b[b-0a7upoh76i] {
        animation: none;
    }
}

.nf-label .nf-r.missing[b-0a7upoh76i],
.nf-label .nf-cal.missing[b-0a7upoh76i],
.nf-label .nf-serv.missing[b-0a7upoh76i] {
    background-color: rgba(254, 202, 202, 0.32);
    transition: background-color 240ms ease-out;
}

/* NFP-check failure tint: a stronger red than the missing-required tint, with a red left accent bar,
   since a failing panel is a validation error (not merely an absent value). Chat-side only, applied via
   the RowClassFor/ServingExtraClasses/CaloriesExtraClasses decorators when save_product's NFP check
   flags a row (INTEL-218). */
.nf-label .nf-r.nfp-fail[b-0a7upoh76i],
.nf-label .nf-cal.nfp-fail[b-0a7upoh76i],
.nf-label .nf-serv.nfp-fail[b-0a7upoh76i] {
    background-color: rgba(248, 113, 113, 0.22);
    box-shadow: inset 3px 0 0 0 #dc2626;
    transition: background-color 240ms ease-out;
}

.nf-label .nf-r.missing.scanning[b-0a7upoh76i],
.nf-label .nf-cal.missing.scanning[b-0a7upoh76i],
.nf-label .nf-serv.missing.scanning[b-0a7upoh76i] {
    position: relative;
    overflow: hidden;
    background-color: rgba(238, 242, 255, 0.9);
}

.nf-label .nf-r.missing.scanning .nf-dash[b-0a7upoh76i],
.nf-label .nf-cal.missing.scanning .nf-dash[b-0a7upoh76i],
.nf-label .nf-serv.missing.scanning .nf-dash[b-0a7upoh76i] {
    color: #163450;
}

.nf-label .nf-r.missing.scanning[b-0a7upoh76i]::after,
.nf-label .nf-cal.missing.scanning[b-0a7upoh76i]::after,
.nf-label .nf-serv.missing.scanning[b-0a7upoh76i]::after {
    content: "";
    position: absolute;
    right: 10px;
    bottom: 2px;
    width: 60%;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(37, 80, 124, 0.15) 10%,
        rgba(37, 80, 124, 0.9) 45%,
        rgba(56, 189, 248, 0.95) 55%,
        rgba(37, 80, 124, 0.15) 90%,
        transparent 100%);
    box-shadow:
        0 0 8px rgba(37, 80, 124, 0.65),
        0 0 18px rgba(56, 189, 248, 0.35);
    animation: nf-row-scan-h-b-0a7upoh76i 1.8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes nf-row-scan-h-b-0a7upoh76i {
    0% {
        transform: translateX(-45%);
        opacity: 0.55;
    }
    50% {
        transform: translateX(75%);
        opacity: 1;
    }
    100% {
        transform: translateX(-45%);
        opacity: 0.55;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nf-label .nf-r.missing.scanning[b-0a7upoh76i]::after,
    .nf-label .nf-cal.missing.scanning[b-0a7upoh76i]::after,
    .nf-label .nf-serv.missing.scanning[b-0a7upoh76i]::after {
        animation: nf-row-scan-pulse-b-0a7upoh76i 1.6s ease-in-out infinite;
        transform: none;
    }

    @keyframes nf-row-scan-pulse-b-0a7upoh76i {
        0%, 100% {
            opacity: 0.28;
        }
        50% {
            opacity: 0.95;
        }
    }
}
/* /Components/Shared/OnboardingResearch.razor.rz.scp.css */
/* "Research in progress" onboarding landing card. Renders in the dashboard content area (the real,
   locked sidebar frames it), so this styles only the centered status card itself. */

.ob[b-8hkhiwk8x1] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 8rem); /* content area minus MainLayout's p-8 top/bottom padding */
    padding: 1rem;
}

.ob-card[b-8hkhiwk8x1] {
    width: 100%;
    max-width: 34rem;
    background: #ffffff;
    border: 1px solid #ece7dd;
    border-radius: 24px;
    box-shadow: 0 18px 48px -24px rgba(26, 16, 44, 0.28);
    padding: 2.75rem 2.5rem 3rem;
    text-align: center;
}

/* ── Spinner: a rotating arc around the WISEcode bug ── */
.ob-spinner[b-8hkhiwk8x1] {
    position: relative;
    width: 72px;
    height: 72px;
    margin: 0 auto 1.5rem;
}

.ob-spinner-arc[b-8hkhiwk8x1] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid #eceafb;
    border-top-color: #3b3ce8;
    animation: ob-spin-b-8hkhiwk8x1 1s linear infinite;
}

.ob-spinner-bug[b-8hkhiwk8x1] {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 38px;
    height: 38px;
}

@keyframes ob-spin-b-8hkhiwk8x1 {
    to { transform: rotate(360deg); }
}

/* ── Status pill ── */
.ob-pill[b-8hkhiwk8x1] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    background: #e8f7f1;
    color: #0f7a5a;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 1.1rem;
}

.ob-dot[b-8hkhiwk8x1] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #17b47f;
    animation: ob-pulse-b-8hkhiwk8x1 1.6s ease-in-out infinite;
}

@keyframes ob-pulse-b-8hkhiwk8x1 {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.7); }
}

.ob-headline[b-8hkhiwk8x1] {
    font-size: 1.6rem;
    line-height: 1.25;
    font-weight: 800;
    color: #1a102c;
    margin: 0 0 0.85rem;
}

.ob-body[b-8hkhiwk8x1] {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #6b6357;
    margin: 0;
}

/* Reduced-motion: hold everything still. */
.ob--paused .ob-spinner-arc[b-8hkhiwk8x1],
.ob--paused .ob-dot[b-8hkhiwk8x1] {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .ob-spinner-arc[b-8hkhiwk8x1],
    .ob-dot[b-8hkhiwk8x1] {
        animation: none;
    }
}

/* The "retrying" line under the body, once an attempt has failed. */
.ob-note[b-8hkhiwk8x1] {
    margin-top: 0.85rem;
}
/* /Components/Shared/OrganizationGs1Licenses.razor.rz.scp.css */
/* The licence facts on each card: a fixed label column beside the values. */
.licence-fields[b-5q3ymgkqao] {
    grid-template-columns: 150px 1fr;
}

.monospace[b-5q3ymgkqao] {
    font-family: ui-monospace, monospace;
}
/* /Components/Shared/PackFormatsChip.razor.rz.scp.css */
.pack-format-wrap[b-rat7jcsdz6] {
    margin-top: 0.35rem;
}

.pack-format-chip[b-rat7jcsdz6] {
    align-items: center;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 9999px;
    color: #4338ca;
    cursor: pointer;
    display: inline-flex;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1rem;
    padding: 0.15rem 0.55rem;
    transition: background-color 150ms ease, border-color 150ms ease;
}

.pack-format-chip:hover[b-rat7jcsdz6],
.pack-format-chip[aria-expanded="true"][b-rat7jcsdz6] {
    background: #e0e7ff;
    border-color: #a5b4fc;
}

.pack-format-popover[b-rat7jcsdz6] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    box-shadow: 0 10px 25px rgb(15 23 42 / 14%);
    min-width: 15rem;
    overflow: hidden;
    width: min(20rem, calc(100vw - 2rem));
}

.pack-format-heading[b-rat7jcsdz6] {
    border-bottom: 1px solid #f3f4f6;
    color: #6b7280;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 0.65rem 0.85rem;
    text-transform: uppercase;
}

.pack-format-list[b-rat7jcsdz6] {
    max-height: 14rem;
    overflow-y: auto;
    padding: 0.35rem;
}

.pack-format-item[b-rat7jcsdz6] {
    align-items: center;
    color: #374151;
    display: flex;
    font-size: 0.8rem;
    gap: 0.75rem;
    justify-content: space-between;
    min-height: 2.25rem;
    padding: 0.45rem 0.55rem;
}

.pack-format-identity[b-rat7jcsdz6] {
    align-items: center;
    display: flex;
    gap: 0.6rem;
    min-width: 0;
}

/* Name over package size, both clipped rather than wrapped so the popover keeps its width. */
.pack-format-text[b-rat7jcsdz6] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pack-format-name[b-rat7jcsdz6] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pack-format-meta[b-rat7jcsdz6] {
    color: #6b7280;
    font-size: 0.7rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pack-format-processing[b-rat7jcsdz6] {
    align-items: center;
    color: #b45309;
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0.7rem;
    font-weight: 600;
    gap: 0.2rem;
}

.pack-format-processing .material-icons[b-rat7jcsdz6] {
    font-size: 0.9rem;
}

.pack-format-link[b-rat7jcsdz6] {
    border-top: 1px solid #f3f4f6;
    color: #4f46e5;
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.65rem 0.85rem;
    text-decoration: none;
}

.pack-format-link:hover[b-rat7jcsdz6] {
    background: #eef2ff;
}
/* /Components/Shared/PageShell.razor.rz.scp.css */
/* THE canonical page content width: 1220px, centered.
   Decision: the reports family already renders at ~1220px and is the app's
   most-designed surface, so the rest of the app converges on it (rather than
   Tailwind's max-w-7xl = 1280px, which only MyFoods/verification used, or the
   assorted max-w-5xl/6xl one-offs). Padding matches the px-6/py-8 the pages
   previously hand-rolled inside MainLayout's .p-8. */
.wise-page[b-4izy7p3mpm] {
    max-width: 1220px;
    margin-left: auto;
    margin-right: auto;
    padding: 32px 24px;
}

/* Full-width pages (the WISEcode AI Library and Marketplace grids fill the screen): the same header and padding, no cap. */
.wise-page.wise-page--full[b-4izy7p3mpm] {
    max-width: none;
}

/* The header's title block: never narrower than 14rem (or the row), so the Actions wrap below it on a phone rather
   than overlapping a title squeezed to one word per line. */
.wise-page-title[b-4izy7p3mpm] {
    min-width: min(14rem, 100%);
}

/* The ip-b2b design's module title (wise.css .pf-head-title, .wmod-title, .lib-title-main), one face, size and weight on
   every page. The family is DM Sans (no serif anywhere, ip-b2b 3c70c01). */
.wise-page-h1[b-4izy7p3mpm] {
    font-family: 'WISE Digits', var(--module-title-family, var(--font-serif));
    font-size: var(--module-title-size, 1.2rem);
    font-weight: var(--module-title-weight, 800);
    line-height: var(--module-title-lh, 1.16);
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 0;
}

/* The label line under the title (brand, UPC, status chips, a description): the design's muted sub line
   (.pf-head-meta), wrapping instead of running off the screen. */
.wise-page-label[b-4izy7p3mpm] {
    margin-top: var(--module-sub-gap, 3px);
    font-size: 0.875rem;
    line-height: var(--module-sub-lh, 1.35);
    color: var(--text-muted);
    flex-wrap: wrap;
    row-gap: 0.375rem;
}
/* /Components/Shared/ParsedIngredientRow.razor.rz.scp.css */
.owl-icon-inline[b-25ohaex4y3] { background: none; border: none; cursor: pointer; padding: 0; }

/* Source: ip-b2b product-details.css 1399-1409, iaOwlBtn, local 2026-10-09. */
.nfp-ia-owl[b-25ohaex4y3] { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; align-self: center; margin: 0 0 0 6px; padding: 0; border: 0; background: none; color: var(--primary); cursor: pointer; line-height: 0; opacity: .72; }
.nfp-ia-owl:hover[b-25ohaex4y3], .nfp-ia-owl:focus-visible[b-25ohaex4y3] { opacity: 1; color: var(--primary-ink, var(--primary)); }
.nfp-ia-owl[b-25ohaex4y3]  svg { height: 9px; width: auto; display: block; }
.parser-norm-static[b-25ohaex4y3] { text-transform: uppercase; }
.wci-audit-glyph[b-25ohaex4y3] { font-size: .7rem; vertical-align: middle; }
/* /Components/Shared/PortfolioLandingSummary.razor.rz.scp.css */
/* The card shell is WciDashCard; the donut, legends, hairline and shield block come from
   brand-intelligence.css. This file only lays the two columns out and gives the donut
   column the container scope the Overview's own `donut-card` container query expects. The card and the
   donut column are roots of child components, so their rules reach them through ::deep, and outrank the
   card's own scoped shell (0,2,0). */

.portfolio-landing[b-7jtjnmvwsc] {
    margin-bottom: 24px;
}

.portfolio-landing[b-7jtjnmvwsc]  .portfolio-landing-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 0;
}

/* Donut on the left, call to action on the right, with the Overview's hairline between them. */
.portfolio-landing[b-7jtjnmvwsc]  .portfolio-landing-band {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) 1px minmax(280px, 1fr);
    gap: 28px;
    align-items: stretch;
    padding-top: 26px;
    padding-bottom: 26px;
}

/* The donut column is its own `donut-card` container so the Overview's query that stacks the rings
   above the legends still fires when the column gets narrow. */
.portfolio-landing[b-7jtjnmvwsc]  .portfolio-landing-donut {
    min-width: 0;
    container-type: inline-size;
    container-name: donut-card;
}

/* Center the call to action against the donut instead of letting it float at the top. */
.portfolio-landing[b-7jtjnmvwsc]  .portfolio-landing-cta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    min-width: 0;
}

.portfolio-landing[b-7jtjnmvwsc]  .portfolio-landing-cta .dash-shield-block {
    margin-top: 0;
}

/* One column below roughly a tablet: the donut needs ~500px beside its legends, and the shield
   headline wraps, so cramming two columns any narrower reads worse than stacking. */
@media (max-width: 1100px) {
    .portfolio-landing[b-7jtjnmvwsc]  .portfolio-landing-band {
        grid-template-columns: 1fr;
    }

    .portfolio-landing[b-7jtjnmvwsc]  .portfolio-landing-band > .dash-claim-divider {
        display: none;
    }
}
/* /Components/Shared/RdaProfileBrowser.razor.rz.scp.css */
/* A profile that constrains no flag band, and the RDA rows count (Table Types INTEL-528). */
.rda-any[b-8b9ktloiij] { color: var(--wise-muted); }
.rda-rows[b-8b9ktloiij] { color: var(--wise-muted); font-family: 'DM Mono', monospace; font-size: 11.5px; }
/* /Components/Shared/Reports/GeneratedReportsShelf.razor.rz.scp.css */
/* Your generated reports: a fixed footprint while the first batch loads, so the grid spinner sits where
   the posters will be and the shelves below never move. 372px is the shelf's own height: the eyebrow and
   lead line over one 268px poster row with the rail's padding. */
.wci-gen-shelf[b-rl447xks3x] { position: relative; min-height: 372px; }
/* /Components/Shared/Reports/ReportTableView.razor.rz.scp.css */
/* ReportTableView: a report table and its card twin behind the Horizontal / Vertical pill
   (INTEL-516 to INTEL-519). The pill is ported from ip-b2b pages/analytics-report.css 1387-1437 onto
   the report's own --u-* tokens (reports-upf.css); the reports draw light whatever the app theme, so
   the prototype's html.dark rules have nothing to apply to here. The cards' own rules live with the
   other .upf-* rules in reports-upf.css, because the host draws the card markup. */

/* position: relative is the box WiseGridLoading centres in. */
.rtv[b-vjtdzyzq9d] { container-type: inline-size; container-name: rtv; min-width: 0; position: relative; }

/* One reading shows. data-view is "table" or "cards" once the script has measured, and "pending"
   before it has, when the component's own width decides (the cards at 700px or narrower), so a phone
   does not flash a table it cannot fit. */
.rtv[data-view="table"] > .rtv-cards[b-vjtdzyzq9d],
.rtv[data-view="table"] > .rtv-sortbar[b-vjtdzyzq9d],
.rtv[data-view="pending"] > .rtv-cards[b-vjtdzyzq9d],
.rtv[data-view="pending"] > .rtv-sortbar[b-vjtdzyzq9d] { display: none; }
.rtv[data-view="cards"] > .rtv-table[b-vjtdzyzq9d] { display: none; }
@container rtv (max-width: 700px) {
  .rtv[data-view="pending"] > .rtv-table[b-vjtdzyzq9d] { display: none; }
  .rtv[data-view="pending"] > .rtv-cards[b-vjtdzyzq9d] { display: grid; }
  .rtv[data-view="pending"] > .rtv-sortbar[b-vjtdzyzq9d] { display: flex; }
}

/* The card view's "Sort by" strip (the pills are ReportSortHeader's, styled in reports-upf.css). */
.rtv-sortbar[b-vjtdzyzq9d] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 12px; min-width: 0; }
.rtv-sortbar-label[b-vjtdzyzq9d] {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--u-subtle, #6B7280);
}

/* Printed from the browser (not the PDF routes, which render the table alone), the report prints its
   tables whatever reading the screen shows: no cards, no pill, no Sort by strip. The CSS-only reflow
   this replaced was screen-only too. */
@media print {
  .rtv > .rtv-table[b-vjtdzyzq9d] { display: block !important; }
  .rtv > .rtv-cards[b-vjtdzyzq9d],
  .rtv > .rtv-sortbar[b-vjtdzyzq9d],
  .rtv > .att-orient-bar[b-vjtdzyzq9d] { display: none !important; }
}

/* ---- Orientation pill, analytics-report.css 1387-1437 ---- */
.att-orient-bar[b-vjtdzyzq9d] { display: flex; justify-content: flex-end; margin: 0 0 10px; }
.att-orient[b-vjtdzyzq9d] {
  display: inline-flex; flex: none; gap: 2px; padding: 3px;
  border: 1px solid var(--u-border, rgba(17, 24, 39, .08)); border-radius: 999px;
  background: color-mix(in srgb, var(--u-border, rgba(17, 24, 39, .08)) 35%, var(--u-surface, #fff));
}
.att-orient-btn[b-vjtdzyzq9d] {
  appearance: none; border: none; background: transparent; cursor: pointer;
  padding: 6px 13px; border-radius: 999px;
  font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.01em; line-height: 1.2;
  color: var(--u-muted, #444B55);
  transition: background .14s ease, color .14s ease;
}
.att-orient-btn:hover[b-vjtdzyzq9d],
.att-orient-btn:focus-visible[b-vjtdzyzq9d] { color: var(--u-text, #111827); outline: none; }
.att-orient-btn:focus-visible[b-vjtdzyzq9d] { box-shadow: 0 0 0 2px color-mix(in srgb, var(--u-navy, #25507C) 45%, transparent); }
.att-orient-btn.is-on[b-vjtdzyzq9d] { background: var(--u-navy, #25507C); color: #fff; }
/* Horizontal while the table cannot fit (app-owned: the prototype disables its switch instead). */
.att-orient-btn:disabled[b-vjtdzyzq9d] { cursor: default; opacity: .45; }
.att-orient-btn:disabled:hover[b-vjtdzyzq9d] { color: var(--u-muted, #444B55); }

@media (prefers-reduced-motion: reduce) {
  .att-orient-btn[b-vjtdzyzq9d] { transition: none; }
}
/* /Components/Shared/ResolveConversationPanel.razor.rz.scp.css */
/* Conversation-flow styles for the No-Match Resolve panel. Same scoping rationale as
   the other extracted modals/panels: this component is position:fixed and lives outside
   IngredientsVerification's DOM subtree, so its scope is unreachable from IngredientsVerification.razor.css. */

.conv-choices[b-4j7mbjatxj] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

/* Chat thinking-dots indicator now lives in ThinkingDots.razor. */
/* /Components/Shared/RunForAllFoodsDialog.razor.rz.scp.css */
/* The codes this run computes (INTEL-589 step 6a): the run's own expansion, every code it reads and the codes they read. */
.run-tree[b-v7n534qnz3] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.run-tree-title[b-v7n534qnz3] {
    font-size: 0.85rem;
}

.run-tree-box[b-v7n534qnz3] {
    border: 1px solid var(--wise-border);
    border-radius: 10px;
    max-height: 200px;
    overflow-y: auto;
    padding: 6px 10px;
    font-size: 0.82rem;
}

.run-tree-loading[b-v7n534qnz3] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    color: var(--wise-muted);
}

.run-tree-error[b-v7n534qnz3] {
    padding: 4px 0;
    color: var(--wise-red-text);
}

/* The indent is the node's depth, set inline. */
.run-tree-node[b-v7n534qnz3] {
    padding-top: 2px;
    padding-bottom: 2px;
    display: flex;
    gap: 6px;
    align-items: baseline;
}

.run-tree-root[b-v7n534qnz3] {
    font-weight: 600;
}

.run-tree-muted[b-v7n534qnz3] {
    color: var(--wise-muted);
}

.run-tree-note[b-v7n534qnz3] {
    font-size: 0.75rem;
}

.run-tree-empty[b-v7n534qnz3] {
    padding: 2px 0;
}

.run-option[b-v7n534qnz3] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    cursor: pointer;
}

.run-option-check[b-v7n534qnz3] {
    accent-color: var(--helix-ink);
}
/* /Components/Shared/SetBrowser.razor.rz.scp.css */
/* A system set's short code after its name, and the member count (Table Types INTEL-529, INTEL-530). */
.sb-code[b-7ny4bg78p1] { font-weight: 400; color: var(--wise-muted); }
.sb-count[b-7ny4bg78p1] { color: var(--wise-muted); font-family: 'DM Mono', monospace; }
/* /Components/Shared/SpecSheetModal.razor.rz.scp.css */
/* Modal-only pending-review banner. Sits outside SpecSheetView so the theme custom properties
   set on the spec-sheet root aren't visible here — colors are passed via inline style at the
   call site instead. */
.ss-pending-banner[b-bx73b27y4w] {
    margin: 12px 32px 0;
    padding: 10px 14px;
    border: 1px solid;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 9pt;
    font-weight: 600;
}

.ss-pending-banner .material-icons[b-bx73b27y4w] {
    font-size: 18px;
}

@media (max-width: 768px) {
    .ss-pending-banner[b-bx73b27y4w] {
        margin: 10px 16px 0;
    }
}
/* /Components/Shared/SpecSheetView.razor.rz.scp.css */
/* SpecSheetView — scoped stylesheet, mirrors food-details-export/project/spec-sheet.html.
   All design tokens come from the parent's CSS custom properties (set via SpecSheetTheme.CssVars).
   No Tailwind, no oyster/indigo tokens, no Material Icons, no app-card / btn-primary styles.
   This surface is intentionally a printable artifact, not a regular WISE page. */

.spec-sheet-root[b-2yrlwh3xgx] {
    font-family: var(--font-sans);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 10.5pt;
    line-height: 1.4;
}

.spec-sheet-root *[b-2yrlwh3xgx] { box-sizing: border-box; }

.ss-page[b-2yrlwh3xgx] {
    /* Locked to the shared report page token (--rs-page) so the product details page
       background matches the GRAS / UPF / Insights reports. The .ss-page wrapper carries
       the rpt-skin class to bring that token into scope. */
    background: var(--rs-page);
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* ───────── Header ───────── */
.ss-hdr[b-2yrlwh3xgx] {
    background: var(--header-navy);
    color: #fff;
    padding: 18px 32px 14px;
    position: relative;
}
.ss-hdr-row[b-2yrlwh3xgx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.ss-hdr-brand[b-2yrlwh3xgx] {
    display: flex;
    align-items: center;
    gap: 14px;
}
.ss-hdr-logoblock[b-2yrlwh3xgx] {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.ss-hdr-logo[b-2yrlwh3xgx] {
    height: 28px;
    width: auto;
    filter: brightness(0) invert(1);
}
.ss-hdr-intelligence[b-2yrlwh3xgx] {
    font-size: 7pt;
    font-weight: 400;
    letter-spacing: 0.18em;
    color: rgba(255,255,255,0.6);
    margin-top: 2px;
    margin-left: 36px;
}
.ss-hdr-divider[b-2yrlwh3xgx] {
    width: 1px;
    height: 22px;
    background: rgba(255,255,255,0.22);
}
.ss-hdr-doctype[b-2yrlwh3xgx] {
    font-size: 9.5pt;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.ss-hdr-doctype span[b-2yrlwh3xgx] {
    display: block;
    font-weight: 400;
    color: rgba(255,255,255,0.6);
    letter-spacing: 0.14em;
    font-size: 8pt;
    margin-top: 2px;
}
.ss-hdr-meta[b-2yrlwh3xgx] {
    display: flex;
    gap: 24px;
    align-items: center;
}
.ss-hdr-meta-item[b-2yrlwh3xgx] {
    text-align: right;
}
.ss-hdr-meta-item .k[b-2yrlwh3xgx] {
    font-size: 7.5pt;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    font-weight: 700;
    line-height: 1;
}
.ss-hdr-meta-item .v[b-2yrlwh3xgx] {
    font-size: 10pt;
    color: #fff;
    font-weight: 700;
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}
.ss-hdr-stripe[b-2yrlwh3xgx] {
    height: 3px;
    background: var(--brand-indigo);
}

/* ───────── Product identity ───────── */
.ss-product[b-2yrlwh3xgx] {
    padding: 22px 32px 18px;
    border-bottom: 1px solid var(--card-border);
}
.ss-product-top[b-2yrlwh3xgx] {
    display: grid;
    grid-template-columns: 116px 1fr auto;
    align-items: flex-start;
    gap: 22px;
}
/* The package shot used to be a bespoke 116×143 cover frame here; the spec sheet now
   renders its identity through the shared <ProductReportHero>, whose product image is
   a <FoodImage> tile. Nothing left to style. */
.ss-product-info[b-2yrlwh3xgx] { min-width: 0; }
.ss-product-brandmark[b-2yrlwh3xgx] {
    height: 64px; width: auto; max-width: 240px; object-fit: contain; display: block;
    margin-bottom: 12px;
}
.ss-product-brand[b-2yrlwh3xgx] {
    font-size: 9pt;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--rule-blue);
    font-weight: 700;
    margin-bottom: 6px;
}
.ss-product-title[b-2yrlwh3xgx] {
    font-size: 22pt;
    font-weight: 700;
    letter-spacing: -0.012em;
    line-height: 1.1;
    color: var(--ink);
    max-width: 28ch;
}
/* Status badge + shield */
.ss-product-badges[b-2yrlwh3xgx] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.ss-upf-badge[b-2yrlwh3xgx] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 8.5pt;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.4;
}
.ss-upf-badge svg[b-2yrlwh3xgx] { flex-shrink: 0; }
.ss-upf-non-verified[b-2yrlwh3xgx] { background: var(--upf-non-verified-bg); color: var(--upf-non-verified-ink); }
.ss-upf-non-prequal[b-2yrlwh3xgx]  { background: var(--upf-non-prequal-bg);  color: var(--upf-non-prequal-ink); }
.ss-upf-non[b-2yrlwh3xgx]          { background: var(--upf-non-bg);          color: var(--upf-non-ink); }
.ss-upf-ultra[b-2yrlwh3xgx]        { background: var(--upf-ultra-bg);        color: var(--upf-ultra-ink); }

/* Description */
.ss-description[b-2yrlwh3xgx] {
    margin-top: 12px;
    font-size: 9.5pt;
    line-height: 1.5;
    color: var(--description-ink, var(--ink-soft));
}

.ss-product-id[b-2yrlwh3xgx] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.ss-product-id .lbl[b-2yrlwh3xgx] {
    font-size: 7.5pt;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-muted);
    font-weight: 700;
}
.ss-product-id .val[b-2yrlwh3xgx] {
    font-size: 12pt;
    font-weight: 700;
    color: var(--ink);
    margin-top: 2px;
}
.ss-product-barcode[b-2yrlwh3xgx] {
    margin-top: 6px;
    height: 56px;
    width: auto;
    max-width: 200px;
    display: inline-block;
}
.ss-product-barcode:not([src])[b-2yrlwh3xgx], .ss-product-barcode[src=""][b-2yrlwh3xgx] { display: none; }
/* Serving facts — slim inline band: a small Material Symbol + small-caps label
   beside a moderate serif value, segments split by a dot, sitting on a single
   bottom hairline (no card chrome). Reads as a refined caption line and stays
   balanced with either one or two facts. Uses .rpt-skin tokens. */
.ss-facts[b-2yrlwh3xgx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    padding: 14px 2px;
    border-bottom: 1px solid var(--rs-border);
}
/* Each fact is icon + label + value, evenly spaced by the inner gap. */
.ss-fact[b-2yrlwh3xgx] { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
/* Dot separator before every fact except the first. It is a flex child of the
   band, so it spaces itself naturally and never dangles when a value wraps. */
.ss-fact:not(:first-child)[b-2yrlwh3xgx]::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--rs-text) 22%, transparent);
}
.ss-fact-icon[b-2yrlwh3xgx] {
    font-size: 17px;
    line-height: 1;
    color: color-mix(in srgb, var(--rs-muted) 60%, var(--rs-surface));
    font-variation-settings: 'FILL' 0, 'wght' 400, 'opsz' 20;
}
.ss-fact-label[b-2yrlwh3xgx] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--rs-muted);
    white-space: nowrap;
}
.ss-fact-value[b-2yrlwh3xgx] {
    font-family: var(--rs-serif);
    font-size: 17px;
    font-weight: 700;
    color: var(--rs-text);
    font-variant-numeric: tabular-nums;
}

/* ───────── Report-style body shell ───────── */
/* The body reuses the shared .rpt-skin/.rpt-page/.rpt-card system; cards float
   on the existing page background, the same as the analytics reports. */
.ss-rpt-body[b-2yrlwh3xgx] { width: 100%; }

/* Product description lead line above the serving strip. */
.ss-lead[b-2yrlwh3xgx] {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--rs-muted);
}

/* Source note on the right of the Package Nutrition & Ingredients card head. */
.ss-card-source[b-2yrlwh3xgx] {
    margin-left: auto;
    align-self: baseline;
    font-size: 12px;
    color: var(--rs-subtle);
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* ───────── NFP + Ingredients grid ───────── */
.ss-grid[b-2yrlwh3xgx] {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 22px;
    align-items: start;
}
@media (max-width: 768px) {
    .ss-grid[b-2yrlwh3xgx] { grid-template-columns: 1fr; }
}

/* The actual Nutrition Facts panel is rendered by the shared <NutritionFactsLabel>
   component (Components/Shared/NutritionFactsLabel.razor) — keep this host slot
   constrained to the design's left-column width. */
.ss-nfp-host[b-2yrlwh3xgx] {
    width: 100%;
    max-width: 340px;
}

.ss-requirement-exception[b-2yrlwh3xgx] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 16px 18px;
    border: 1px solid color-mix(in srgb, var(--rs-success, #28755b) 35%, var(--rs-border));
    border-radius: var(--rs-r);
    background: color-mix(in srgb, var(--rs-success, #28755b) 8%, var(--rs-surface-2));
    color: var(--rs-text);
}
.ss-requirement-exception .material-icons[b-2yrlwh3xgx] {
    color: var(--rs-success, #28755b);
    font-size: 20px;
}
.ss-requirement-exception div[b-2yrlwh3xgx] { display: grid; gap: 4px; }
.ss-requirement-exception strong[b-2yrlwh3xgx] { font-size: 13px; }
.ss-requirement-exception span:last-child[b-2yrlwh3xgx] {
    color: var(--rs-muted);
    font-size: 12px;
    line-height: 1.45;
}

/* ───────── Ingredients column ───────── */
.ss-ing[b-2yrlwh3xgx] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
/* Ingredients/allergen card — styled to match the shared report cards
   (.rpt-skin tokens: linen surface, hairline border, rounded corners). */
.ss-ing-card[b-2yrlwh3xgx] {
    background: var(--rs-surface-2);
    border: 1px solid var(--rs-border);
    border-radius: var(--rs-r);
    padding: 18px 20px;
}
.ss-ing-heading[b-2yrlwh3xgx] {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rs-subtle);
    font-weight: 800;
    margin-bottom: 8px;
}
.ss-ing-statement[b-2yrlwh3xgx] {
    font-family: var(--rs-sans);
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--rs-text);
    margin: 0;
    white-space: pre-wrap;
}

/* ───────── Footer ───────── */
.ss-spacer[b-2yrlwh3xgx] { flex: 1; min-height: 24px; }
.ss-footer[b-2yrlwh3xgx] {
    margin-top: auto;
    padding: 14px 32px 18px;
    border-top: 1px solid var(--card-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 8pt;
    color: var(--ink-muted);
    flex-wrap: wrap;
    gap: 8px;
}
.ss-footer-left[b-2yrlwh3xgx] { display: flex; align-items: center; gap: 10px; }
.ss-footer-logo[b-2yrlwh3xgx] {
    height: 16px;
    width: auto;
}
.ss-footer strong[b-2yrlwh3xgx] { color: var(--ink); font-weight: 700; }
.ss-footer-right[b-2yrlwh3xgx] { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.ss-footer-right a[b-2yrlwh3xgx] { color: var(--rule-blue); font-weight: 700; text-decoration: none; }
/* /Components/Shared/ThinkingDots.razor.rz.scp.css */
/* Three-dot "thinking" indicator for chat-styled drawers. */
.thinking-dots[b-t2tx7t5k4d] {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

.thinking-dots span[b-t2tx7t5k4d] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-indigo-300);
    animation: thinkingDotsBounce-b-t2tx7t5k4d 1.2s infinite;
}

.thinking-dots span:nth-child(2)[b-t2tx7t5k4d] { animation-delay: 0.2s; }
.thinking-dots span:nth-child(3)[b-t2tx7t5k4d] { animation-delay: 0.4s; }

@keyframes thinkingDotsBounce-b-t2tx7t5k4d {
    0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); }
    30% { opacity: 1; transform: scale(1.2); }
}

@media (prefers-reduced-motion: reduce) {
    .thinking-dots span[b-t2tx7t5k4d] { animation: none; }
}
/* /Components/Shared/V2IngredientListDialog.razor.rz.scp.css */
/* The Edit ingredient list dialog (WISE Intelligence v2). App-owned layout over the design tokens. */
.v2-ing-dialog[b-6pbcub7jqo] { display: flex; flex-direction: column; gap: 16px; padding: 4px; }
.v2-ing-dialog-body[b-6pbcub7jqo] { position: relative; min-height: 120px; display: flex; flex-direction: column; gap: 10px; }
.v2-ing-dialog-line[b-6pbcub7jqo] { margin: 0; font-size: 14px; color: var(--text); }
.v2-ing-dialog-note[b-6pbcub7jqo] { margin: 0; font-size: 13px; color: var(--text-muted); }
.v2-ing-dialog-error[b-6pbcub7jqo] { margin: 0; font-size: 13px; color: var(--sec-red-text); }
.v2-ing-dialog-actions[b-6pbcub7jqo] { display: flex; justify-content: flex-end; gap: 8px; }
.v2-ing-dialog-warning[b-6pbcub7jqo] { margin: 0; display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--ter-amber-text); }
.v2-ing-dialog-warning .material-symbols-outlined[b-6pbcub7jqo] { font-size: 18px; }
/* /Components/Shared/V2IngredientMatchDialog.razor.rz.scp.css */
/* Choose a match (WISE Intelligence v2 Verify Ingredients). App-owned layout over the design tokens, as the Edit ingredient
   list dialog beside it. */
.v2-match-dialog[b-4274qkke5v] { display: flex; flex-direction: column; gap: 16px; padding: 4px; }
.v2-match-body[b-4274qkke5v] { position: relative; min-height: 120px; display: flex; flex-direction: column; gap: 10px; }
.v2-match-lead[b-4274qkke5v] { margin: 0; font-size: 14px; color: var(--text); }
.v2-match-note[b-4274qkke5v] { margin: 0; font-size: 13px; color: var(--text-muted); }
.v2-match-error[b-4274qkke5v] { margin: 0; font-size: 13px; color: var(--sec-red-text); }
.v2-match-list[b-4274qkke5v] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.v2-match-row[b-4274qkke5v] {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
}
.v2-match-name[b-4274qkke5v] { flex: 1 1 160px; font-size: 14px; font-weight: 600; color: var(--text); text-transform: uppercase; }
.v2-match-score[b-4274qkke5v] { font-size: 12px; color: var(--text-muted); }
.v2-match-actions[b-4274qkke5v] { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
/* /Components/Shared/V2IngredientVerification.razor.rz.scp.css */
/* Verify Ingredients for a v2 store product (WISE Intelligence v2), on its page and inline in the Add/Edit product page's
   Ingredient List module. The parsed-ingredient tree restates v1's row styles (ParseAttestationModal.razor.css and
   IngredientsVerificationPanel.razor.css) over the design tokens, since those scoped sheets do not reach here; the flag and
   confirm affordances are included because this edits. */

/* The card WiseGridLoading fills when inline. */
.v2-ing-verify[b-otx6h4byrk] { position: relative; }
.v2-ing-verify--inline[b-otx6h4byrk] { min-height: 160px; }
.v2-ing-head[b-otx6h4byrk] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.v2-ing-actions[b-otx6h4byrk] { display: flex; flex-wrap: wrap; gap: 8px; }

.v2-ing[b-otx6h4byrk] { display: flex; flex-direction: column; gap: 14px; }
.v2-ing-list[b-otx6h4byrk] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 14px; }
.v2-ing-label[b-otx6h4byrk] { font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 4px; }
.v2-ing-text[b-otx6h4byrk] { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text); white-space: pre-wrap; }
.v2-ing-hint[b-otx6h4byrk] { margin: 0; font-size: 13px; color: var(--text-muted); }
.v2-ing-note[b-otx6h4byrk] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.v2-ing-note .v2-ing-hint[b-otx6h4byrk] { flex: 1 1 260px; }
.v2-ing-error[b-otx6h4byrk] { margin: 0; font-size: 13px; color: var(--sec-red-text); }
/* A list never read: the empty line with Read the ingredients beneath it, centred as the empty line is. */
.v2-ing-read[b-otx6h4byrk] { display: flex; flex-direction: column; align-items: center; gap: 12px; }

.v2-ing-tree-scroll[b-otx6h4byrk] { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.v2-ing-col-name[b-otx6h4byrk] { width: 46%; }
.v2-ing-col-canon[b-otx6h4byrk] { width: 34%; }
.v2-ing-col-match[b-otx6h4byrk] { width: 20%; }

[b-otx6h4byrk] .v2-ing-tree { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
[b-otx6h4byrk] .v2-ing-tree thead th {
    background: var(--surface-2); padding: 8px 14px; text-align: left;
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}
[b-otx6h4byrk] .v2-ing-tree tbody td { padding: 7px 14px; color: var(--text); border-bottom: 1px solid var(--border); vertical-align: middle; }
[b-otx6h4byrk] .v2-ing-tree tbody tr:last-child td { border-bottom: none; }
[b-otx6h4byrk] .v2-ing-tree td:nth-child(3) { white-space: nowrap; }

/* Tree indent rails (the v1 geometry). */
[b-otx6h4byrk] .v2-ing-tree .tree-cell { padding-left: 4px; }
[b-otx6h4byrk] .v2-ing-tree .tree-cell-inner { display: flex; align-items: center; }
[b-otx6h4byrk] .v2-ing-tree .tree-cell-railed .tree-cell-inner { height: 100%; }
[b-otx6h4byrk] .v2-ing-tree .tree-rail { display: inline-block; flex: 0 0 auto; width: 22px; align-self: stretch; position: relative; }
[b-otx6h4byrk] .v2-ing-tree .tree-rail-continue::before,
[b-otx6h4byrk] .v2-ing-tree .tree-rail-branch::before,
[b-otx6h4byrk] .v2-ing-tree .tree-rail-lastbranch::before { content: ''; position: absolute; left: 10px; width: 1.5px; background: var(--border-strong); }
[b-otx6h4byrk] .v2-ing-tree .tree-rail-continue::before,
[b-otx6h4byrk] .v2-ing-tree .tree-rail-branch::before { top: -8px; bottom: -9px; }
[b-otx6h4byrk] .v2-ing-tree .tree-rail-lastbranch::before { top: -8px; height: calc(50% + 8px); }
[b-otx6h4byrk] .v2-ing-tree .tree-rail-branch::after,
[b-otx6h4byrk] .v2-ing-tree .tree-rail-lastbranch::after {
    content: ''; position: absolute; top: 50%; left: 10px; width: 11px; height: 1.5px; background: var(--border-strong);
    transform: translateY(-0.5px);
}
[b-otx6h4byrk] .v2-ing-tree .tree-name-root { font-weight: 600; text-transform: capitalize; }
[b-otx6h4byrk] .v2-ing-tree .tree-name-child { text-transform: capitalize; }
[b-otx6h4byrk] .v2-ing-tree .parser-norm-static { font-size: 0.78rem; }

/* Match badges. */
[b-otx6h4byrk] .v2-ing-tree .match-cell { display: inline-flex; align-items: center; gap: 5px; }
[b-otx6h4byrk] .v2-ing-tree .code-interp-badge { display: inline-block; padding: 2px 8px; border-radius: var(--radius-pill); font-size: 0.68rem; font-weight: 600; }
[b-otx6h4byrk] .v2-ing-tree .code-badge-green { background: var(--sec-green-10); color: var(--sec-green-text); }
[b-otx6h4byrk] .v2-ing-tree .code-badge-yellow { background: var(--ter-amber-10); color: var(--ter-amber-text); }
[b-otx6h4byrk] .v2-ing-tree .code-badge-red { background: var(--sec-red-10); color: var(--sec-red-text); }
[b-otx6h4byrk] .v2-ing-tree .code-badge-gray { background: var(--surface-3); color: var(--text-muted); }
[b-otx6h4byrk] .v2-ing-tree .code-badge-audited { background: var(--primary-soft); color: var(--primary); }
[b-otx6h4byrk] .v2-ing-tree .audited-badge {
    display: inline-flex; align-items: center; gap: 2px; font-size: 0.6rem; font-weight: 700;
    background: var(--primary-10); color: var(--primary-ink); border-radius: var(--r-sm); padding: 1px 5px; margin-left: 4px;
}

/* Flag button and the note popup. */
[b-otx6h4byrk] .v2-ing-tree .ingred-flag-btn {
    background: none; border: none; padding: 2px 3px; cursor: pointer; line-height: 1; margin-left: 4px; color: var(--text-subtle);
}
[b-otx6h4byrk] .v2-ing-tree .ingred-flag-btn:hover,
[b-otx6h4byrk] .v2-ing-tree .ingred-flag-btn.flagged,
[b-otx6h4byrk] .v2-ing-tree .ingred-flag-readonly { color: var(--sec-red); }
[b-otx6h4byrk] .v2-ing-tree .ingred-flag-btn .material-icons,
[b-otx6h4byrk] .v2-ing-tree .ingred-flag-readonly .material-icons { font-size: 0.8rem; }
[b-otx6h4byrk] .v2-ing-tree .ingred-flag-readonly { display: inline-flex; align-items: center; margin-left: 4px; padding: 2px 3px; }
[b-otx6h4byrk] .v2-ing-tree .ingred-flag-hover { position: relative; display: inline-flex; align-items: center; }
[b-otx6h4byrk] .v2-ing-tree .ingred-flag-popup {
    position: absolute; bottom: calc(100% + 6px); right: 0; z-index: 50; width: 280px; padding: 10px 12px;
    background: var(--surface); border: 1.5px solid var(--primary); border-radius: var(--r-md); box-shadow: var(--shadow-2);
    text-align: left; white-space: normal; font-weight: 400; font-size: 0.78rem; line-height: 1.45; color: var(--text);
    visibility: hidden; opacity: 0; transition: visibility 0s linear 0s, opacity 0.15s ease 0s;
}
[b-otx6h4byrk] .v2-ing-tree .ingred-flag-hover:hover .ingred-flag-popup,
[b-otx6h4byrk] .v2-ing-tree .ingred-flag-hover:focus-within .ingred-flag-popup {
    visibility: visible; opacity: 1; transition: visibility 0s linear 0.5s, opacity 0.15s ease 0.5s;
}
[b-otx6h4byrk] .v2-ing-tree .ingred-flag-hover.popup-suppressed .ingred-flag-popup { visibility: hidden; opacity: 0; transition: none; }
[b-otx6h4byrk] .v2-ing-tree .ingred-flag-popup-header {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--primary); margin-bottom: 4px;
}
[b-otx6h4byrk] .v2-ing-tree .ingred-flag-popup-body { white-space: pre-wrap; }

/* Source: ip-b2b product-details.css nfp-ia table geometry, local 2026-10-09.
   APP-OWNED: the shared verification keeps table semantics and existing write actions. */
.v2-ing-verify--inline .v2-ing-tree-scroll[b-otx6h4byrk] { border: 0; border-radius: 0; }
.v2-ing-verify--inline[b-otx6h4byrk]  .v2-ing-tree { table-layout: auto; min-width: 360px; font-size: .68rem; }
.v2-ing-verify--inline[b-otx6h4byrk]  .v2-ing-tree th { background: transparent; padding: 0 2px 6px; font-size: .58rem; color: var(--text-subtle); }
.v2-ing-verify--inline[b-otx6h4byrk]  .v2-ing-tree td { padding: 7px 2px; vertical-align: top; }
.v2-ing-verify--inline[b-otx6h4byrk]  .v2-ing-tree .tree-cell-inner { flex-wrap: wrap; gap: 5px 6px; align-items: baseline; }
.v2-ing-verify--inline[b-otx6h4byrk]  .v2-ing-tree .tree-rail { width: 8px; }
.v2-ing-verify--inline[b-otx6h4byrk]  .v2-ing-tree .tree-rail::before,
.v2-ing-verify--inline[b-otx6h4byrk]  .v2-ing-tree .tree-rail::after { left: 4px; }
.v2-ing-verify--inline[b-otx6h4byrk]  .v2-ing-tree .tree-rail::after { width: 4px; }
.v2-ing-verify--inline[b-otx6h4byrk]  .v2-ing-tree .parser-norm-static { font-size: .68rem; font-weight: 700; }
.v2-ing-verify--inline[b-otx6h4byrk]  .v2-ing-tree .code-interp-badge { font-size: .62rem; font-weight: 700; }
.v2-ing-verify--inline[b-otx6h4byrk]  .v2-ing-tree .match-cell { flex-wrap: wrap; white-space: normal; }
/* /Components/Shared/V2LadderStatus.razor.rz.scp.css */
/* The Status cell of Design 6 (Arthur's table, ip-b2b product-portfolio-2 .pf-col-seg): the publishing word with its glyph
   (12px semibold), and under it the shield's one pill. Colours are tokens, not the mockup's literals. */
.v2-ladder-status[b-o0evgdionk] { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
.v2-ladder-pub[b-o0evgdionk] { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--text); line-height: 1.25; }
.v2-ladder-pub .material-symbols-outlined[b-o0evgdionk] { font-size: 15px; color: var(--text-muted); }
/* /Components/Shared/V2PackComparison.razor.rz.scp.css */
/* ip-b2b product-details.css compareHTML matrix, using WCI paints. */
.nfp-cmp[b-0ztce7g0ur] { padding: 16px; min-width: 0; }
.nfp-cmp-intro[b-0ztce7g0ur] { font-family: var(--font-serif); font-size: 1.375rem; font-weight: 700; margin: 14px 0; color: var(--text); }
.nfp-cmp-scroll[b-0ztce7g0ur] { overflow-x: auto; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); }
.nfp-cmp-grid[b-0ztce7g0ur] { border-collapse: separate; border-spacing: 0; width: 100%; }
.nfp-cmp-cell[b-0ztce7g0ur] { padding: 11px 12px; border-bottom: 1px solid var(--border); font-size: .72rem; color: var(--text); min-width: 160px; text-align: left; }
.nfp-cmp-ent[b-0ztce7g0ur] { border-left: 1px solid var(--border); }
.nfp-cmp-rail[b-0ztce7g0ur] { position: sticky; left: 0; z-index: 2; background: var(--surface); min-width: 128px; font-weight: 700; }
.is-base-col[b-0ztce7g0ur] { background: color-mix(in srgb, var(--primary) 5%, transparent); }
.nfp-cmp-head[b-0ztce7g0ur] { padding: 0; }
.nfp-cmp-tile[b-0ztce7g0ur] { position: relative; min-height: 150px; padding: 12px; display: flex; flex-direction: column; gap: 6px; background: var(--surface-3, var(--surface-2)); }
.nfp-cmp-tile-name[b-0ztce7g0ur] { font-size: .9rem; font-weight: 800; overflow-wrap: anywhere; }
.nfp-cmp-tile-sub[b-0ztce7g0ur] { font-size: .58rem; font-weight: 700; text-transform: uppercase; }
.nfp-cmp-tile-badge[b-0ztce7g0ur] { position: absolute; top: 10px; right: 10px; padding: 3px 8px; border-radius: 999px; font-size: 9px; background: var(--primary); color: var(--on-primary, var(--surface)); }
.nfp-cmp-bc-card[b-0ztce7g0ur] { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.nfp-cmp-bc[b-0ztce7g0ur] { width: 100%; height: 44px; object-fit: contain; }
.nfp-cmp-bc-num[b-0ztce7g0ur] { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .12em; text-align: center; }
.nfp-cmp-diff[b-0ztce7g0ur] { background: color-mix(in srgb, var(--primary) 11%, transparent); }
.nfp-cmp-note[b-0ztce7g0ur] { color: var(--text-muted); font-size: .75rem; }
.nfp-cmp-loading[b-0ztce7g0ur] { position: relative; min-height: 32rem; }
/* /Components/Shared/V2PackFormatsCard.razor.rz.scp.css */
.v2-pack-card[b-cl89ua04so] {
    margin-bottom: 1.5rem;
}

.v2-pack-head[b-cl89ua04so] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.v2-pack-title[b-cl89ua04so] {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text);
}

.v2-pack-sub[b-cl89ua04so] {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.v2-pack-error[b-cl89ua04so],
.v2-pack-edit-error[b-cl89ua04so] {
    font-size: 0.875rem;
    color: var(--sec-red-text);
}

.v2-pack-error[b-cl89ua04so] {
    margin-bottom: 0.75rem;
}

[b-cl89ua04so] .v2-pack-product {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

[b-cl89ua04so] .v2-pack-identity {
    min-width: 0;
}

[b-cl89ua04so] .v2-pack-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text);
}

[b-cl89ua04so] .v2-pack-upc {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    color: var(--text-muted);
}

[b-cl89ua04so] .v2-pack-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
    white-space: nowrap;
}

.v2-pack-head-actions[b-cl89ua04so] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ip-b2b pages/product-details.css 986 (.nfp-cmp-diff): a format's value that differs from the base product. */
.v2-pack-cmp[b-cl89ua04so]  .v2-pack-cmp-diff {
    padding: 0.125rem 0.375rem;
    border-radius: 0.375rem;
    background: color-mix(in srgb, var(--primary) 11%, transparent);
}

/* Source: ip-b2b product-details.css thumb/add/lead-edit families (local 2026-10-09). Literal geometry, token paints. */
.nfp-fi-thumbs[b-cl89ua04so] { display: flex; justify-content: flex-start; align-items: flex-start; gap: 6px; flex-wrap: wrap; }
.nfp-fi-thumb[b-cl89ua04so] { display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; width: 44px; position: relative; overflow: visible; }
.nfp-fi-thumb-frame[b-cl89ua04so] { position: relative; width: 40px; height: 40px; flex-shrink: 0; transition: transform 0.12s; }
.nfp-fi-thumb-img[b-cl89ua04so] { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; border: 2px solid var(--border); background: var(--surface-2); display: block; transition: border-color 0.15s; }
.nfp-fi-thumb.active .nfp-fi-thumb-img[b-cl89ua04so] { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 22%, transparent); }
.nfp-fi-thumb-label[b-cl89ua04so] { font-size: 0.58rem; font-weight: 600; color: var(--text-muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.nfp-fi-add[b-cl89ua04so] {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  width: 76px; cursor: pointer; color: var(--text-subtle); background: transparent;
}
.nfp-fi-add-sq[b-cl89ua04so] {
  width: 40px; height: 40px; border-radius: 10px; border: 2px dashed var(--border-strong);
  background: var(--surface-2); color: inherit;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: border-color 0.15s, transform 0.12s;
}
.nfp-fi-add:hover[b-cl89ua04so] { color: var(--primary-ink, var(--primary)); }
.nfp-fi-add:hover .nfp-fi-add-sq[b-cl89ua04so] { border-color: var(--primary); transform: scale(1.08); }
.nfp-fi-add .material-symbols-outlined[b-cl89ua04so] { font-size: 18px !important; }
.nfp-fi-add-label[b-cl89ua04so] {
  font-size: 0.58rem; font-weight: 600; color: var(--text-muted);
  text-align: center; line-height: 1.2; max-width: 100%;
}
.nfp-fi-add:hover .nfp-fi-add-label[b-cl89ua04so] { color: var(--primary-ink, var(--primary)); }
.nfp-fi-thumb-icon[b-cl89ua04so] { border-radius: 50%; }
.nfp-fi-add:disabled[b-cl89ua04so],
.nfp-fi-lead-edit:disabled[b-cl89ua04so] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.nfp-fi-lead-edit[b-cl89ua04so] {
  /* Keep the pencil outside the selection centre, including the 40px formats. */
  position: absolute; top: -8px; left: -8px; z-index: 3;
  width: 22px; height: 22px; padding: 0; margin: 0; border: 0;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--text) 55%, transparent); color: var(--surface); cursor: pointer;
  box-shadow: 0 1px 4px color-mix(in srgb, var(--text) 35%, transparent);
}
.nfp-fi-lead-edit .material-symbols-outlined[b-cl89ua04so] {
  font-size: 14px !important; line-height: 1 !important;
}
.nfp-fi-lead-edit:hover[b-cl89ua04so],
.nfp-fi-lead-edit:focus-visible[b-cl89ua04so] {
  background: color-mix(in srgb, var(--text) 72%, transparent);
}
.nfp-fi-thumb-upc[b-cl89ua04so] {
  display: flex; align-items: flex-start; gap: 8px; flex: 0 0 auto;
}
.nfp-fi-thumb-icon[b-cl89ua04so] { display: flex; align-items: center; justify-content: center; color: var(--text-subtle); }
.nfp-fi-thumb-icon .material-symbols-outlined[b-cl89ua04so] { font-size: 20px !important; }
/* APP-OWNED: scoped fragment has no access to its parent's identity selector. */
.nfp-fi-thumbs[b-cl89ua04so] { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px; row-gap: 10px; padding-bottom: 1.7rem; }
.nfp-fi-thumb[b-cl89ua04so] { position: relative; width: 44px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.nfp-fi-thumb.active[b-cl89ua04so] { width: 76px; }
.nfp-fi-thumb.active .nfp-fi-thumb-frame[b-cl89ua04so],
.nfp-fi-thumb.active .nfp-fi-thumb-img[b-cl89ua04so] { width: 68px; height: 68px; border-radius: 12px; }
.nfp-fi-thumb-label[b-cl89ua04so], .nfp-fi-add-label[b-cl89ua04so] { position: absolute; top: calc(100% + 3px); left: 50%; transform: translateX(-50%); font-size: .58rem; font-weight: 600; text-align: center; color: var(--text-muted); max-width: 100%; }
.nfp-fi-thumb-label[b-cl89ua04so] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0; border: 0; background: transparent; }
.nfp-fi-thumb-icon[b-cl89ua04so] { display: flex; align-items: center; justify-content: center; color: var(--text-subtle); }
.nfp-fi-add[b-cl89ua04so] { position: relative; border: 0; padding: 0; width: 76px; }
.v2-pack-loading[b-cl89ua04so] { position: relative; }

.wci-pack-photo-link[b-cl89ua04so] { display: block; width: 100%; height: 100%; }

.wci-pack-photo-link[b-cl89ua04so] { padding: 0; border: 0; background: transparent; cursor: pointer; }
/* /Components/Shared/V2PortfolioPublishResults.razor.rz.scp.css */
.pf-publish-results[b-1m53ef623x] { display: flex; flex-direction: column; gap: 12px; color: var(--text); }
.pf-publish-results h3[b-1m53ef623x] { font-size: 14px; color: var(--text); }
.pf-publish-results p[b-1m53ef623x] { margin: 0; }
/* /Components/Shared/V2PublishDialog.razor.rz.scp.css */
/* The Publish to WISEcode dialog (WISE Intelligence v2). App-owned layout over the design tokens. */
.v2-publish[b-t6uu54nn8h] { display: flex; flex-direction: column; gap: 16px; padding: 4px; }
.v2-publish-body[b-t6uu54nn8h] { position: relative; min-height: 96px; display: flex; flex-direction: column; gap: 10px; }
.v2-publish-line[b-t6uu54nn8h] { margin: 0; font-size: 14px; color: var(--text); }
.v2-publish-note[b-t6uu54nn8h] { margin: 0; font-size: 13px; color: var(--text-muted); }
.v2-publish-error[b-t6uu54nn8h] { margin: 0; font-size: 13px; color: var(--sec-red-text); }
.v2-publish-actions[b-t6uu54nn8h] { display: flex; justify-content: flex-end; gap: 8px; }

.v2-publish-summary[b-t6uu54nn8h] { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; color: var(--text); font-size: 13px; }
.v2-publish-identity[b-t6uu54nn8h] { display: flex; align-items: center; gap: 10px; }
/* /Components/Shared/V2ShieldBadge.razor.rz.scp.css */
/* ip-b2b product-portfolio.html .pf-name-badge (7029-7034): a 16px glyph beside the name, the verified shield filled in the
   success green (D39, D54). Tokens only. */
.v2-shield[b-4fbu9p5efg] { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.v2-shield-glyph[b-4fbu9p5efg] {
  font-size: 16px !important; line-height: 1 !important; width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
}
.v2-shield.is-verified .v2-shield-glyph[b-4fbu9p5efg] { color: var(--sec-green); font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20; }
.v2-shield-label[b-4fbu9p5efg] { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }
/* /Components/Shared/VerificationStepHeader.razor.rz.scp.css */
/* Inner column matches PageShell's canonical .wise-page frame (1220px centered,
   24px side padding) so the header content aligns with the page content below. */
.verification-step-header-inner[b-8am7sh19j9] {
    max-width: 1220px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 24px;
}
/* /Components/Shared/Welcome/WelcomeChoices.razor.rz.scp.css */
/* Pinned above the composer: the chips, spaced like the composer's own rows. */
.welcome-choices[b-j4xm3irvc9] { margin-bottom: 0.625rem; }
/* A long list of options scrolls inside the pin instead of pushing the transcript out of view. */
.welcome-choices-chips[b-j4xm3irvc9] { max-height: 9.5rem; overflow-y: auto; }
/* /Components/Shared/Welcome/WelcomeScript.razor.rz.scp.css */
/* The scripted lines' paragraphs inside the chat's transcript line: the line's own type, spaced like the chat's answers. */
.welcome-script-text[b-6qr32hko42] { margin: 0 0 6px; }
/* The products' status: quiet, in the muted ink the chat's own pending line uses. */
.welcome-script-status[b-6qr32hko42] { margin: 0; font-size: 0.8125rem; color: var(--text-muted); }
/* /Components/Shared/WISEai/ChatHistoryPanel.razor.rz.scp.css */
/* History beside the nav rail (the design's docked History, ip-b2b product-portfolio.html with History open, measured
   2026-10-23): a card that pops out of the rail, inset from the top and bottom as the page sheet is (wci-modules.css,
   28px), 4px off the rail, rounded on the rail side and square where the WISEcode AI pane meets it, the mirror of the
   page sheet on the pane's other side. sidebar.css moves the page (and the pane, through --wci-history-w) to its
   right edge, so it never covers anything, and rounds the other side too when no pane joins it. The rail's hover
   overlay opens over it. */
.wci-history-panel[b-8ypood8hur] {
  position: fixed;
  top: 28px;
  bottom: 28px;
  left: calc(var(--sidebar-w-collapsed, 54px) + 4px);
  z-index: 46;
  width: calc(var(--wci-history-w, 300px) - 4px);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: linear-gradient(165deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border);
  border-right: 0;
  border-radius: 16px 0 0 16px;
  /* The design's History entrance (js/chat-history.js wchIn): a short slide out of the rail with a little overshoot. */
  animation: wci-history-in-b-8ypood8hur 0.32s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}
@keyframes wci-history-in-b-8ypood8hur {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wci-history-panel[b-8ypood8hur] { animation: none; }
}

/* The module head: the title, its controls inset at the right (wci-modules.css .wch-head). */
.wci-history-head[b-8ypood8hur] {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: var(--module-head-pad-t, 26px) var(--module-head-ctrl-inset, 12px) var(--module-head-pad-b, 14px) var(--module-head-pad-l, 20px);
}
.wci-history-title[b-8ypood8hur] {
  margin: 0;
  font-family: var(--module-title-family, "DM Sans", system-ui, sans-serif);
  font-weight: var(--module-title-weight, 800);
  font-size: var(--module-title-size, 1.2rem);
  line-height: var(--module-title-lh, 1.16);
  letter-spacing: -0.01em;
  color: var(--text);
}
.wci-history-head-controls[b-8ypood8hur] {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* The list scrolls inside the panel; the grid spinner centres in it while History loads. */
.wci-history-body[b-8ypood8hur] {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.wci-history-note[b-8ypood8hur] {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* A failed load's line (INTEL-735): the empty line's copy, then its Retry beneath it. */
.wci-history-retry[b-8ypood8hur] {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

/* A phone has no room beside the page: History opens as a card over it, under the mobile header, like the menu drawer. */
@media (max-width: 768px) {
  .wci-history-panel[b-8ypood8hur] {
    top: 76px;
    left: 10px;
    right: 10px;
    bottom: 12px;
    z-index: 65;
    width: auto;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 18px 44px rgba(17, 24, 39, 0.22);
  }
}
/* /Components/Shared/WISEai/CodeFamilyVersionDialog.razor.rz.scp.css */
.code-family-dialog[b-c7umvag9yx] { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 4px; min-width: min(460px, 100%); }
.code-family-problem[b-c7umvag9yx] { color: var(--wise-danger, #b42318); }
.code-family-actions[b-c7umvag9yx] { display: flex; justify-content: flex-end; gap: 8px; }
/* /Components/Shared/WISEai/ConversationSearchRow.razor.rz.scp.css */
/* The Conversations search row: the design's .wch-search-row (js/chat-history.js) placed under the panel head,
   a 36px search pill beside the round New button. The toolbar's 220px pill minimum and 340px popover are sized for
   page toolbars; in the 300px History panel the pill takes what the button leaves and the popover spans the row. */
.wci-history-search[b-tyjztq70fj] {
    flex-shrink: 0;
    margin: 10px 12px 2px;
}

.wci-history-search[b-tyjztq70fj]  .wise-toolbar {
    flex-wrap: nowrap;
}

.wci-history-search[b-tyjztq70fj]  .wise-search-inline {
    min-width: 0;
}

.wci-history-search[b-tyjztq70fj]  .wise-search {
    height: 36px;
}

.wci-history-search[b-tyjztq70fj]  .wise-filter-pop {
    left: 0;
    right: 0;
    width: auto;
    min-width: 0;
}
/* /Components/Shared/WISEai/FolderTreeNode.razor.rz.scp.css */
/* ===================================================================
   The Library rail's folder rows: the Library design's side panel, PORTED from
   conversation-library.html (the page's own sheet, revision served 2026-10-19):
     lines 738-806   .lib-fp-folder, .lib-fp-row, .lib-fp-toggle, .lib-fp-name, .lib-fp-count,
                     .lib-fp-menu, .lib-fp-body, .lib-fp-folder.is-collapsed / .is-active, .lib-drop-on
   The same row language as WciHistory's folders (.wch-project-head). Class names are kept identical
   to the design. Not ported: the artifact rows under each folder (.lib-fp-item), the drag-only
   Remove from folder / Move to Library rows, and html.dark rules.
   =================================================================== */

.lib-fp-folder[b-qvrr4zijk5] { position: relative; margin: 1px 0; overflow: visible; }
.lib-fp-row[b-qvrr4zijk5] {
  position: relative; z-index: 2; display: flex; align-items: center; gap: 6px;
  padding: 8px 34px 8px 6px; border-radius: 0; cursor: pointer;
  border: 0; background: transparent; width: 100%; box-sizing: border-box;
  font: inherit; color: inherit; text-align: left; outline: none;
}
.lib-fp-folder.is-active > .lib-fp-row .lib-fp-name[b-qvrr4zijk5] { font-weight: 700; }
.lib-fp-row.lib-drop-on[b-qvrr4zijk5] {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  outline: 1px dashed color-mix(in srgb, var(--primary) 55%, transparent);
}
.lib-fp-toggle[b-qvrr4zijk5] {
  position: relative; z-index: 3;
  width: 22px; height: 22px; flex: 0 0 auto; border: 0; border-radius: 50%;
  background: transparent; color: inherit; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.lib-fp-toggle .material-symbols-outlined[b-qvrr4zijk5] {
  font-size: 18px !important; line-height: 1 !important;
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}
.lib-fp-name[b-qvrr4zijk5] {
  flex: 1; min-width: 0; font-size: 13px; font-weight: 400;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text);
}
.lib-fp-count[b-qvrr4zijk5] {
  flex: 0 0 auto; font-size: 11px; font-weight: 600;
  opacity: .55; padding: 0 4px; color: var(--text);
}
.lib-fp-menu[b-qvrr4zijk5] {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 24px; height: 24px; border: 0; border-radius: 50%;
  background: transparent; color: var(--text-muted); cursor: pointer;
  display: none; align-items: center; justify-content: center; opacity: .6;
}
.lib-fp-row:hover .lib-fp-menu[b-qvrr4zijk5], .lib-fp-row:focus-within .lib-fp-menu[b-qvrr4zijk5],
.lib-fp-menu.is-open[b-qvrr4zijk5] { display: flex; }
.lib-fp-menu:hover[b-qvrr4zijk5] { background: color-mix(in srgb, var(--text) 8%, transparent); opacity: 1; color: var(--text); }
.lib-fp-menu.is-open[b-qvrr4zijk5] { opacity: 1; color: var(--text); box-shadow: 0 0 0 2px var(--primary); }
/* A folder's children sit inset under it. No connecting lines. */
.lib-fp-body[b-qvrr4zijk5] { position: relative; z-index: 0; padding-left: 22px; }
.lib-fp-folder.is-collapsed > .lib-fp-body[b-qvrr4zijk5] { display: none; }

/* ===================================================================
   APP-OWNED ADDITIONS
   =================================================================== */

/* The design's row is one button; here the name is the folder's link (bookmarkable ?folder=), between the
   toggle and the ⋯, so it takes the row's remaining width and the design's ink. */
.lib-fp-link[b-qvrr4zijk5] { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; outline: none; }
.lib-fp-toggle:disabled[b-qvrr4zijk5] { cursor: default; }
.lib-fp-link:focus-visible[b-qvrr4zijk5], .lib-fp-toggle:focus-visible[b-qvrr4zijk5] { outline: 2px solid var(--primary); outline-offset: 1px; border-radius: 6px; }

/* A starred folder carries History's gold star beside its name. */
.lib-fp-star[b-qvrr4zijk5] { flex: 0 0 auto; font-size: 14px !important; line-height: 1 !important; color: color-mix(in srgb, var(--warm-400) 70%, var(--ter-amber)); font-variation-settings: 'FILL' 1; }

/* The ⋯ is a WciRowMenu; its trigger fills the design's 24px circle (as WciHistory's .wch-proj-menu). */
.lib-fp-menu[b-qvrr4zijk5]  .adm-rowmenu-btn {
  width: 100%; height: 100%; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: inherit;
}
.lib-fp-menu[b-qvrr4zijk5]  .adm-rowmenu-btn .material-symbols-outlined { font-size: 16px; }

/* Every row is its own stacking context (the design's z-index: 2), so a later row would paint over the ⋯ menu
   an earlier row opened. The row holding the open menu rises above its siblings, and so does the body a nested
   row sits in (its own z-index: 0 context). Same fix as WciHistory's. */
.lib-fp-row:has(.lib-fp-menu.is-open)[b-qvrr4zijk5],
.lib-fp-body:has(.lib-fp-menu.is-open)[b-qvrr4zijk5] { z-index: 20; }
/* /Components/Shared/WISEai/FoodSearchDialog.razor.rz.scp.css */
/* The test food search's thumbnail and ingredient cells (INTEL-589, 2026-10-04). */

/* The photo tile is FoodImage's Xs (32px, its size for dense grids); this only centres it and marks it hoverable. */
.fsd-thumb[b-q9sw2tbcfw] {
    display: inline-flex;
    width: 32px;
    height: 32px;
    vertical-align: middle;
    cursor: zoom-in;
}

/* One line, cut off with an ellipsis; the whole list is in the tooltip (data-tip). */
.fsd-ingredients[b-q9sw2tbcfw] {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* The search's views (INTEL-589): a segmented row beside the scope controls. */
.food-scope[b-q9sw2tbcfw] {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

/* Two classes deep, to outrank wise-browser.css's .wise-scope .wise-seg rules as the inline styles did. */
.food-scope .food-scope-seg[b-q9sw2tbcfw] {
    width: auto;
    flex: 0 0 auto;
}

.food-scope-seg .food-scope-view[b-q9sw2tbcfw] {
    padding: 6px 14px;
}
/* /Components/Shared/WISEai/InteractiveDashboardShareFrame.razor.rz.scp.css */
.share-frame[b-06940ntfsa] {
    width: 100%;
    height: calc(100vh - 6rem);
    border: 0;
    display: block;
    background: white;
}

.share-frame-state[b-06940ntfsa] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    color: var(--wise-muted);
    font-size: 0.875rem;
}
/* /Components/Shared/WISEai/InterpretationBucketEditorDialog.razor.rz.scp.css */
/* Dense by design (Tolga, 2026-10-03): 32px controls, narrow number fields, no vertical scroll for a usual set. */
.bucket-editor[b-p4fyztears] { position: relative; min-height: 240px; }
.bucket-editor[b-p4fyztears]  .adm-input, .bucket-editor[b-p4fyztears]  .adm-select { height: 32px; min-height: 32px; padding-top: 0; padding-bottom: 0; font-size: 13px; }
.bucket-editor[b-p4fyztears]  .adm-input[type=number] { padding-left: 8px; padding-right: 4px; }
.bucket-editor[b-p4fyztears]  .rz-colorpicker { height: 32px; min-height: 32px; }
.bucket-editor[b-p4fyztears]  .bucket-editor-top { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 6px; }
.bucket-editor[b-p4fyztears]  .bucket-editor-top .adm-field { margin: 0; }
.bucket-editor[b-p4fyztears]  .bucket-editor-top .bucket-editor-count { width: 72px; }
.bucket-editor[b-p4fyztears]  .bucket-editor-top .sc-stream-seg { height: 32px; }
.bucket-editor[b-p4fyztears]  .bucket-editor-top .wise-btn { height: 32px; }
.bucket-editor[b-p4fyztears]  .bucket-editor-order { align-items: center; }
.bucket-editor[b-p4fyztears]  .bucket-editor-order .adm-field-label { display: inline-flex; align-items: center; justify-content: center; gap: 4px; width: 100%; }
.bucket-editor[b-p4fyztears]  .bucket-editor-info { font-size: 15px; color: var(--rz-text-tertiary-color, #9a9a9a); }
.bucket-editor[b-p4fyztears]  .bucket-editor-range { min-height: 1.3em; font-size: 12px; color: var(--rz-text-secondary-color); margin-bottom: 4px; }
.bucket-editor[b-p4fyztears]  .bucket-editor-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.bucket-editor[b-p4fyztears]  .bucket-editor-table th { text-align: left; font-size: 11px; font-weight: 600; padding: 2px 4px; color: var(--rz-text-secondary-color); }
.bucket-editor[b-p4fyztears]  .bucket-editor-table th.bucket-editor-group { text-align: center; border-bottom: 1px solid var(--rz-base-300); }
.bucket-editor[b-p4fyztears]  .bucket-editor-table th.bucket-editor-num-head { text-align: center; }
.bucket-editor[b-p4fyztears]  .bucket-col-pos { width: 22px; }
.bucket-editor[b-p4fyztears]  .bucket-col-sentiment { width: 124px; }
.bucket-editor[b-p4fyztears]  .bucket-col-color { width: 86px; }
.bucket-editor[b-p4fyztears]  .bucket-col-num { width: 66px; }
.bucket-editor[b-p4fyztears]  .bucket-col-texts { width: 40px; }
.bucket-editor[b-p4fyztears]  .bucket-editor-table td { padding: 3px 3px; vertical-align: middle; }
.bucket-editor[b-p4fyztears]  .bucket-editor-main td { border-bottom: 1px solid var(--rz-base-200); }
.bucket-editor[b-p4fyztears]  .bucket-editor-pos { font-weight: 600; font-size: 13px; }
.bucket-editor[b-p4fyztears]  .bucket-editor-table td .adm-input, .bucket-editor[b-p4fyztears]  .bucket-editor-table td .adm-select { width: 100%; box-sizing: border-box; }
.bucket-editor[b-p4fyztears]  .bucket-editor-table td .rz-colorpicker { width: 100%; box-sizing: border-box; }
.bucket-editor[b-p4fyztears]  .bucket-editor-problems { min-height: 1.3em; margin-top: 6px; color: var(--wise-red-text, #b3261e); font-size: 12px; }
.bucket-editor[b-p4fyztears]  .bucket-editor-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 6px; }
.bucket-editor[b-p4fyztears]  .bucket-editor-message { padding: 1rem; }
/* /Components/Shared/WISEai/InterpretationBucketTextsDialog.razor.rz.scp.css */
.bucket-texts[b-szkbisr7br] { display: flex; flex-direction: column; gap: 12px; }
.bucket-texts-actions[b-szkbisr7br] { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 6px; }
/* /Components/Shared/WISEai/OrgDashboardsView.razor.rz.scp.css */
/* OrgDashboardsView: the organization's dashboards on the Library's Interactive Dashboards tab. The grid is the Library's
   (conversation-library.html .lib-grid, as WISEaiReports.razor.css draws it), so these cards sit like every other Library card. */

.odv-switches[b-qi3boma2xt] { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px 16px; margin: 8px 0 12px; }

.odv-grid[b-qi3boma2xt] { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); }

/* A soft-deleted dashboard or version under Show deleted: dimmed, not a link. */
.odv-deleted[b-qi3boma2xt] { opacity: .7; }

.odv-version[b-qi3boma2xt] { font-weight: 600; color: var(--primary-ink); white-space: nowrap; }

.odv-note[b-qi3boma2xt] { margin-top: 2px; font-size: 12px; line-height: 1.35; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* /Components/Shared/WISEai/ReportOutputView.razor.rz.scp.css */
/* The line an output no card can draw shows in its place (the read page's .rp-gen-lede type). */
.wci-report-output-missing[b-qwjua4z2kr] { margin: 0; font-size: 0.875rem; line-height: 1.55; color: var(--text-muted); }
/* /Components/Shared/WISEai/SourceSelector.razor.rz.scp.css */
/* ===================================================================
   SourceSelector, Roster look: the ip-b2b "Database roster" (INTEL-373)
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo at commit 2c36820:
     pages/wise.css
       lines 10630-10671  the popover shell (.fl-model-wrap,
                          .fl-model-popover, .open, html.dark)
       lines 10672-10760  the trigger (.fl-db-trigger and its parts),
                          .fl-model-wrap--lead, .fl-db-popover--lead, and
                          the narrow composer (label clamped to 15ch)
       lines 10975-11079  the roster: sticky search and filter head,
                          groups, access badges, rows, tick, empty and
                          no-results lines
     js/all-modules-flow.js
       lines 4456-4489    module "Database roster" (demo template)
   Class names are kept IDENTICAL. What is NOT verbatim:
     - The legacy model-list rows (.fl-model-item, .fl-model-switch) are
       not ported: the roster replaced them.
     - The dock control (.fl-db-dock-btn) and the docked module
       (.fl-db-module, the .wch-sidebar shell) are not ported yet.
     - The .wiseai-dock narrow rules are not ported: the app has no
       .wiseai-dock; the AI drawer gets the same clamp from the @media
       rule on a phone and keeps the full name otherwise.
     - --shadow-3 is never defined in wise.css, so the popover reads
       --sc-shadow-pop, as the design always does.
   The default (pill) look is Tailwind in the markup and has no rules here.
   =================================================================== */

/* ---- Popover shell (wise.css 10630-10671) ---- */
.fl-model-wrap[b-35r9rgcudj] { position: relative; flex-shrink: 0; }
.fl-model-popover[b-35r9rgcudj] {
  display: none; position: absolute; bottom: calc(100% + 8px); right: 0;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 14px;
  box-shadow: var(--shadow-3, var(--sc-shadow-pop)); padding: 6px; z-index: 600;
  min-width: 250px; flex-direction: column; gap: 2px;
}
.fl-model-popover.open[b-35r9rgcudj] { display: flex; }
html.dark .fl-model-popover[b-35r9rgcudj] { background: linear-gradient(155deg, #1A2339 0%, #1A2339 60%, #1A2339 100%); border-color: rgba(37,80,124,0.22); }

/* ---- Trigger (wise.css 10672-10760) ---- */
.fl-model-wrap--lead[b-35r9rgcudj] { align-self: flex-start; }
/* The database label itself: a muted, pill-on-hover text button with a caret. */
.fl-db-trigger[b-35r9rgcudj] {
  display: inline-flex; align-items: center; gap: 3px; max-width: none;
  margin: 0; padding: 1px 5px 1px 0; border: 0; border-radius: 7px;
  background: transparent; cursor: pointer; color: var(--text-subtle);
  font-family: inherit; font-size: 11px; font-weight: 600; line-height: 1;
  transition: background 0.12s ease, color 0.12s ease;
}
/* Hover/open pill stays in the composer's brand-blue family (one step deeper
   than the input's 10% fill) — never the neutral surface gray. */
.fl-db-trigger:hover[b-35r9rgcudj],
.fl-db-trigger[aria-expanded="true"][b-35r9rgcudj] { background: color-mix(in srgb, var(--primary) 16%, #fff); color: var(--text); }
html.dark .fl-db-trigger:hover[b-35r9rgcudj],
html.dark .fl-db-trigger[aria-expanded="true"][b-35r9rgcudj] { background: color-mix(in srgb, var(--primary-bright, #8B9FAF) 24%, transparent); }
.fl-db-trigger .fl-db-trigger-ic[b-35r9rgcudj] { font-size: 13px !important; line-height: 1 !important; opacity: 0.85; flex-shrink: 0; }
.fl-db-trigger-label[b-35r9rgcudj] { font-size: 11px; line-height: 1; white-space: nowrap; overflow: visible; text-overflow: clip; }
.fl-db-trigger .fl-db-trigger-caret[b-35r9rgcudj] { font-size: 14px !important; line-height: 1 !important; opacity: 0.7; flex-shrink: 0; }
/* App-owned: a database name longer than the composer's bottom line ends in an
   ellipsis instead of spilling out of the pill. The wrap and trigger may shrink
   below their content; the label is the part that gives way. */
.fl-model-wrap--lead[b-35r9rgcudj] { min-width: 0; max-width: 100%; flex-shrink: 1; }
.fl-db-trigger[b-35r9rgcudj] { min-width: 0; max-width: 100%; }
.fl-db-trigger-label[b-35r9rgcudj] { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* App-owned: the design's trigger shows a short database name; ours is the full banner text (kind, org, database,
   as-of date), so it is capped on every width, not only the narrow composer, and ends in an ellipsis. The full
   text stays in the label's title. */
.fl-db-trigger-label[b-35r9rgcudj] { max-width: 28ch; }
/* Left-opening variant of the database popover (trigger now sits on the left). */
.fl-db-popover--lead[b-35r9rgcudj] { left: 0; right: auto; }

/* ---- Narrow composer (wise.css 10672-10760) ---- */
@media (max-width: 767px) {
  .fl-model-wrap--lead[b-35r9rgcudj] { align-self: center; }
  .fl-db-trigger[b-35r9rgcudj] { flex-shrink: 0; }
  .fl-db-trigger-label[b-35r9rgcudj] { max-width: 15ch; overflow: hidden; text-overflow: ellipsis; }
}

/* ---- The roster (wise.css 10975-11079) ---- */
.fl-db-popover[b-35r9rgcudj] { padding: 0; min-width: 340px; max-width: 380px; gap: 0; overflow: hidden; }
/* Sticky search + filter header at the very top of the popover. */
.fl-db-top[b-35r9rgcudj] {
  position: sticky; top: 0; z-index: 2; flex-shrink: 0;
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 12px 10px; border-bottom: 1px solid var(--border);
  background: var(--surface);
}
html.dark .fl-db-top[b-35r9rgcudj] { background: #1A2339; }
/* Popover header: a title + a control that docks the roster into a sticky module. */
.fl-db-pop-head[b-35r9rgcudj] { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fl-db-pop-title[b-35r9rgcudj] { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); }
/* Pill search — matched to the History module's search field (.wch-search). */
.fl-db-search[b-35r9rgcudj] {
  display: flex; align-items: center; gap: 8px;
  padding: 0 14px; height: 36px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.05);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
html:not(.dark) .fl-db-search[b-35r9rgcudj] { background: rgba(20,40,80,0.04); border-color: rgba(0,0,0,0.10); }
.fl-db-search:focus-within[b-35r9rgcudj] { border-color: var(--primary, #2F6DF6); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #2F6DF6) 18%, transparent); }
.fl-db-search .material-symbols-outlined[b-35r9rgcudj] { font-size: 18px; opacity: 0.5; flex-shrink: 0; }
.fl-db-search-input[b-35r9rgcudj] {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  font: inherit; font-size: 13px; color: inherit;
}
.fl-db-search-input[b-35r9rgcudj]::placeholder { opacity: 0.6; }
.fl-db-filters[b-35r9rgcudj] { display: flex; gap: 6px; }
.fl-db-chip[b-35r9rgcudj] {
  padding: 4px 11px; border-radius: 9999px; cursor: pointer; font-family: inherit;
  font-size: 11.5px; font-weight: 600; color: var(--text-muted);
  border: 1px solid var(--border-strong); background: transparent;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.fl-db-chip:hover[b-35r9rgcudj] { background: var(--surface-2); }
.fl-db-chip.is-active[b-35r9rgcudj] { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Scrollable body holding the grouped databases. */
.fl-db-scroll[b-35r9rgcudj] { overflow-y: auto; max-height: 360px; padding: 6px; }
.fl-db-group[b-35r9rgcudj] { padding: 4px 0 6px; }
.fl-db-grouphead[b-35r9rgcudj] {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 8px 4px;
}
.fl-db-grouptitle[b-35r9rgcudj] { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); }
.fl-db-access[b-35r9rgcudj] {
  font-size: 10px; font-weight: 600; letter-spacing: 0.02em;
  padding: 2px 8px; border-radius: 9999px; border: 1px solid transparent; white-space: nowrap;
}
.fl-db-access--ro[b-35r9rgcudj] { color: var(--primary-ink, var(--primary)); border-color: color-mix(in srgb, var(--primary) 40%, transparent); background: color-mix(in srgb, var(--primary) 8%, transparent); }
.fl-db-access--rw[b-35r9rgcudj] { color: var(--sec-green-text, #1a7f4b); border-color: color-mix(in srgb, var(--sec-green-text, #1a7f4b) 40%, transparent); background: color-mix(in srgb, var(--sec-green-text, #1a7f4b) 10%, transparent); }

.fl-db-item[b-35r9rgcudj] {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: none; background: transparent;
  border-radius: 10px; cursor: pointer; width: 100%; text-align: left; font-family: inherit;
  transition: background 0.12s ease;
}
.fl-db-item:hover[b-35r9rgcudj] { background: var(--surface-2); }
.fl-db-item.is-active[b-35r9rgcudj] { background: color-mix(in srgb, var(--primary) 9%, transparent); }
.fl-db-meta[b-35r9rgcudj] { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.fl-db-name[b-35r9rgcudj] { font-size: var(--fs-ui); font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-db-desc[b-35r9rgcudj] { font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-db-item.is-active .fl-db-name[b-35r9rgcudj] { color: var(--primary-ink, var(--primary)); }
/* Access badge (LIVE / ORG / GLB) — floated to the FAR RIGHT of the row. */
.fl-db-badge[b-35r9rgcudj] {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; padding: 3px 6px; border-radius: 7px;
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.04em;
  color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border);
}
/* Prominent selected-tick, pinned to the FAR RIGHT (the row's last element). It
   reserves its slot so rows stay aligned whether or not they're the active DB. */
.fl-db-check[b-35r9rgcudj] {
  flex-shrink: 0; font-size: 22px; color: var(--primary-ink, var(--primary));
  opacity: 0; transform: scale(0.6);
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.fl-db-item.is-active .fl-db-check[b-35r9rgcudj] { opacity: 1; transform: none; }

.fl-db-groupempty[b-35r9rgcudj] { padding: 6px 12px 8px; font-size: 12px; color: var(--text-subtle); font-style: italic; }
.fl-db-noresults[b-35r9rgcudj] { padding: 18px 12px; text-align: center; font-size: 12.5px; color: var(--text-subtle); }

/* ---- APP-OWNED ADDITIONS ---- */
/* wci-menu.js places the open roster against the viewport (it sets position:
   fixed, left and top), so the design's own bottom / right anchoring must not
   also apply, or the panel would stretch between them. */
.wci-db-anchored[b-35r9rgcudj] { bottom: auto; right: auto; }
/* The picked store is one of the organization's databases but not its current
   one; the quiet trigger says so in the danger tone (ruled 2026-09-06). */
.wci-db-notcurrent[b-35r9rgcudj] {
  flex-shrink: 0; margin-left: 3px; padding: 1px 4px; border-radius: 4px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--sec-red, #DC3038); border: 1px solid color-mix(in srgb, var(--sec-red, #DC3038) 40%, transparent);
}
/* A read-only entry inside a read/write group (a colleague's sandbox shared
   read-only) says so on its own row, in the group badge's read-only tone. */
.wci-db-row-access[b-35r9rgcudj] { flex-shrink: 0; }
/* Every load shows a spinner (CLAUDE.md): the catalog's first load. */
.wci-db-loading[b-35r9rgcudj] { display: flex; align-items: center; gap: 8px; padding: 14px 12px; font-size: 12px; color: var(--text-subtle); }
.wci-db-spinner[b-35r9rgcudj] {
  width: 14px; height: 14px; flex-shrink: 0; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--primary);
  animation: wciDbSpin-b-35r9rgcudj 0.8s linear infinite;
}
@keyframes wciDbSpin-b-35r9rgcudj { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wci-db-spinner[b-35r9rgcudj] { animation: none; } }
.fl-db-trigger:focus-visible[b-35r9rgcudj],
.fl-db-chip:focus-visible[b-35r9rgcudj],
.fl-db-item:focus-visible[b-35r9rgcudj] { outline: 2px solid var(--primary); outline-offset: 2px; }

/* App-owned (2026-10-08, Kevin: "the sources that get too big overflow, we should not allow this"): the design keeps the
   full database name and clamps it only in its narrow .wiseai-dock rules, which were not ported. The roster's trigger now
   never outgrows its row anywhere: the wrap may shrink, the label ellipsizes, and the full name is its tooltip. */
.fl-model-wrap[b-35r9rgcudj] { flex-shrink: 1; min-width: 0; max-width: 100%; }
.fl-db-trigger[b-35r9rgcudj] { max-width: 100%; min-width: 0; }
.fl-db-trigger-label[b-35r9rgcudj] { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* /Components/Shared/WISEai/V2DashboardCoverageLine.razor.rz.scp.css */
.v2-coverage[b-nbgm8v6u1t] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin: 0 0 10px;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.v2-coverage-icon[b-nbgm8v6u1t] {
    font-size: 18px;
}
/* /Components/Shared/WISEai/WiseAiChat.razor.rz.scp.css */
/* The WISEcode AI home's posture (D68): the empty welcome with its composer in the middle, as the design's WISEcodeAI
   welcome draws it once the composer joins the welcome run (ip-b2b js/wiseai-chat.js applyWelcomeOrder). The heading
   region above the composer rests on it and the cards and chips hang under it; the space left over is shared between the
   two, so the whole run sits centred in the chat, and a short chat scrolls each part on its own rather than the page.
   The first turn drops the class and the chat is back to its transcript and its composer at the foot. */
/* The heading region never shrinks below its heading and line (flex-shrink 0): shrinking it clipped the line's last row
   under the composer on a short chat. The tail gives way and scrolls instead. */
.wiseai-chat--welcome-mid > .wiseai-transcript[b-uzoyf27wzg] {
  flex: 1 0 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: safe flex-end;
}
.wiseai-welcome-tail[b-uzoyf27wzg] {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}
/* /Components/Shared/WISEai/WiseAiDockHost.razor.rz.scp.css */
/* WiseAiDockHost: the WISEcode AI pane's chat column. The welcome is the design's chat welcome (WciChatWelcome, D48),
   laid over the transcript just above the composer. */

.wci-dock-chat[b-p796bukwqk] { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
/* /Components/Shared/WISEai/WiseAiMarkdownView.razor.rz.scp.css */
/* The In-chat table's frame (Table Types .wa-tbl): a hairline card on the chat's surface, set apart from the
   prose around it. The ledger inside draws the rows; at 560px of its own width they become cards. */
.wiseai-answer-table[b-ghlt2ku6i1] {
  margin: 0.75em 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
  container: wiseai-answer-frame / inline-size;
}

/* Once the ledger turns into cards (560px of its own width; the frame's 1px border each side makes 562), each card
   carries its own border and radius: an inset keeps them off the frame's edge and gives their shadow room. */
@container wiseai-answer-frame (max-width: 562px) {
  .wiseai-answer-table[b-ghlt2ku6i1]  .wci-output-table { padding: 10px; box-sizing: border-box; }
}

/* On a card, a long column label wraps instead of running out of the frame (the ledger keeps labels on one line,
   which the frame's rounded clip would cut off at a single-width chat). */
.wiseai-answer-table[b-ghlt2ku6i1]  .wci-output-table table.rtbl tbody > tr > td.rtbl-fld[data-rlabel]::before {
  flex-shrink: 1;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}