/* /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 serif titles
       lines 2537-2554      .wch-ask-search, its input and clear button
       lines 2558-2560      the serif .wch-ask-panel headline
       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:color-mix(in srgb,var(--text-subtle,#8B9FAF) 52%,transparent);--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.dark .wch-sidebar[b-x8mmy89hk5]{--wch-tree:rgba(255,255,255,0.20);}
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", "Noto Serif", 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 — serif title (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", "Noto Serif", 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)
   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)); }

/* ---- 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);
}

@media (prefers-reduced-motion: reduce) {
  .pf-brand-chip[b-0rpx7ib7j5], .pf-brand-caret[b-0rpx7ib7j5] { transition: 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 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);
}

/* ---- 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/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 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; }
.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/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 ---- */
.adm-idcell[b-3grcer5o96] { display: inline-flex; align-items: center; gap: 11px; min-width: 0; }
/* .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), 'Noto Serif', 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. */
  .adm-trow:has(> .adm-td--end, > .adm-td--actions) > .adm-td:has(.adm-idcell)[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;
  }
}
@container adm (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). */
.wci-data-table[b-3grcer5o96] { container-type: inline-size; container-name: adm; width: 100%; min-width: 0; }

/* WiseGridLoading fills the nearest position: relative box. */
.wci-data-table-card[b-3grcer5o96] { position: relative; }

/* MinWidth: the full-width grid keeps every column on one row and the card
   scrolls sideways under it. Stacked cards never need it. */
.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; }
}

/* 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); }

/* 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) {
  .adm-trow > .adm-td.wci-td--labelled[b-3grcer5o96] { flex-direction: column; gap: 1px; }
  .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;
  }
}

/* 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; }

/* 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; }

@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; }

/* 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] { 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
       lines 325-340   .wch-project-body, .wch-project-empty, .wch-proj-edit and its swatches
       lines 341-346   .wch-dragging, .wch-ungrouped, .wch-loose
     pages/wise.css 25043-25058 (the catalog's restage of the same module) for the tree elbows only: the
       live module measures its elbows in JS (layoutProjectTrees); the restage draws the same spine and
       rounded L-elbows in CSS, which is what is ported.
     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, --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 ── */
.wch-chat-dot.wch-star-dot[b-l3uj5hk0eu] { color: var(--wch-star); }
.wch-chat-dot.wch-new-dot[b-l3uj5hk0eu] { color: var(--primary, #2F6DF6); }
html.dark .wch-chat-dot.wch-new-dot[b-l3uj5hk0eu] { color: var(--primary-bright, var(--primary, #2F6DF6)); }
.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", "Noto Serif", 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-starred[b-l3uj5hk0eu] { margin: 2px 0 4px; border-radius: 10px; }
.wch-starred.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-starred-title[b-l3uj5hk0eu] { display: inline-flex; align-items: center; gap: 4px; }
.wch-starred-title .material-symbols-outlined[b-l3uj5hk0eu] { font-size: 13px !important; line-height: 1 !important; color: var(--wch-star); font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 20; }
.wch-starred .wch-item[b-l3uj5hk0eu] { padding-left: 12px; }
.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-tree-end: 16px; --wch-tree-radius: 10px; }
.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 > .wch-proj-edit[b-l3uj5hk0eu] { position: relative; }
.wch-project-empty[b-l3uj5hk0eu] { font-size: 11px; opacity: .5; padding: 4px 12px 8px 20px; }
.wch-proj-edit[b-l3uj5hk0eu] { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 6px 8px 6px 8px; }
.wch-proj-edit-input[b-l3uj5hk0eu] { 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-l3uj5hk0eu] { background: rgba(20,40,80,0.05); }
.wch-proj-swatches[b-l3uj5hk0eu] { flex-basis: 100%; display: flex; align-items: center; gap: 8px; padding: 4px 2px 2px 17px; }
.wch-proj-swatch[b-l3uj5hk0eu] { 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-l3uj5hk0eu] { transform: scale(1.25); }
.wch-proj-swatch.is-sel[b-l3uj5hk0eu] { outline: 2px solid currentColor; outline-offset: 2px; }
.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)); }

/* ── Tree lines (from the catalog restage, pages/wise.css 25043-25058) ── */
.wch-project:not(.wch-collapsed) > .wch-project-body:not(:empty):not(:has(> .wch-project-empty))[b-l3uj5hk0eu]::before {
  content: ""; position: absolute; z-index: 0; left: 16px; top: -11px; bottom: 14px;
  width: 1px; background: var(--wch-tree); pointer-events: none;
}
.wch-project-body > .wch-project[b-l3uj5hk0eu] { position: relative; }
.wch-project-body > .wch-item[b-l3uj5hk0eu]::before,
.wch-project-body > .wch-project > .wch-project-head[b-l3uj5hk0eu]::before {
  content: ""; position: absolute; z-index: 0; left: -6px;
  width: var(--wch-elbow-w, 28px);
  height: calc(var(--wch-tree-radius) + 6px);
  top: calc(var(--wch-elbow-h, 16px) - var(--wch-tree-radius) - 6px);
  border: 0; border-left: 1px solid var(--wch-tree); border-bottom: 1px solid var(--wch-tree);
  border-bottom-left-radius: var(--wch-tree-radius); box-sizing: border-box; pointer-events: none;
}

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

/* The design's .wch-sidebar shell custom properties and ink, on the component root. */
.wci-history[b-l3uj5hk0eu] {
  --wch-tree: color-mix(in srgb, var(--text-subtle, #8B9FAF) 52%, transparent);
  --wch-tree-bg: var(--surface, #fff);
  --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-tree: rgba(255,255,255,0.20); --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; }

/* 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], .wch-proj-swatch:focus-visible[b-l3uj5hk0eu] {
  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-l3uj5hk0eu] { background: transparent; color: var(--text, #1F2733); box-shadow: inset 0 0 0 1.5px currentColor; }

/* The host's Load more footer 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; }
.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/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)
     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), the report / MCP / line-chart mock thumbs (the app shows a
   captured preview image instead), .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; }

.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; }

/* 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; }

@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/WciLibraryFolders.razor.rz.scp.css */
/* ===================================================================
   WCI component: Library folders (WciLibraryFolders), INTEL-418
   -------------------------------------------------------------------
   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 223-255   .lib-stat, .lib-stat-num, .lib-stat-label (the scorecard a folder tile is dressed from)
       lines 586-714   .lib-row-folders, .lib-fstat (tab, tint, dot, active, drop, reorder, hover ⋯),
                       .lib-fstat-add / .lib-fstat-unfile, the breadcrumb (.lib-crumbs)
       lines 917-938   .lib-fstat.is-editing, the inline name editor and its swatches
     js/all-modules-flow.js 6009-6050, module "Library folders" (markup)
   The served wise.css carries these only as the catalog's .dsc-demo restage (25127-25156); the page's
   own copy is the one ported. The reorder rules (.lib-reorder-before/after, .lib-folder-dragging) are
   ported but inert: sibling reordering needs a sort column the folders table does not have yet.
   `body.lib-drag-active` / `body.lib-folder-drag-out` are set by wwwroot/js/library-folders.js while a
   drag is in flight. html.dark / html.chat-tint rules are kept and inert (REGISTRY rule 6).
   Class names are kept IDENTICAL. Tokens come from wwwroot/css/wci/wci-tokens.css.
   =================================================================== */

.lib-stat[b-yaagufahj2] {
  min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px;
  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;
}
/* Scorecard fill mirrors the chat module (.sc-card) across every theme. */
html.dark .lib-stat[b-yaagufahj2] { background: #1A2339; }
html.chat-tint:not(.dark) .lib-stat[b-yaagufahj2] { background: color-mix(in srgb, var(--primary) 5%, #fff); }
html.dark.chat-tint .lib-stat[b-yaagufahj2] { background: color-mix(in srgb, var(--primary-bright, #8B9FAF) 8%, #1A2339); }
.lib-stat:hover[b-yaagufahj2] { transform: translateY(-1px); box-shadow: var(--shadow-card, var(--shadow-2)); border-color: var(--border-strong); }
.lib-stat:focus-visible[b-yaagufahj2] { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); }
.lib-stat.is-active[b-yaagufahj2] {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  box-shadow: inset 0 0 0 1px var(--primary), var(--shadow-1);
}
html.dark .lib-stat.is-active[b-yaagufahj2] {
  border-color: var(--primary-bright);
  background: color-mix(in srgb, var(--primary-bright) 18%, #1A2339);
  box-shadow: inset 0 0 0 1px var(--primary-bright), var(--shadow-1);
}
.lib-stat-num[b-yaagufahj2] { font-family: 'WISE Digits', 'Noto Serif', serif; font-size: 22px; font-weight: 800; line-height: 1.05; color: var(--text); }
.lib-stat-label[b-yaagufahj2] { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--text-muted); }
.lib-stat-label .material-symbols-outlined[b-yaagufahj2] {
  font-size: 13px !important; line-height: 1 !important;
  width: 14px; height: 14px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}

/* The folders row — a fluid grid so the tiles stretch to fill the row and
   reflow at any module width (auto-fit stretches; the type/scope rows use
   fixed column counts, but folders are dynamic so they flow). The top
   padding leaves headroom for each folder's protruding tab. */
.lib-row-folders[b-yaagufahj2] {
  display: grid; gap: 10px; margin-top: 10px; padding-top: 8px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

/* A folder tile = a score card dressed as a manila folder: a protruding
   colored tab on top, a faint tint of the folder color, and the count +
   dot + name. Inherits all .lib-stat visuals (hover lift, active/focus
   ring). */
.lib-fstat[b-yaagufahj2] { position: relative; }
/* Folder tab — a small slanted tab sitting just above the card's top edge
   (only real folder tiles + the inline editor get it; the dashed New /
   Remove utility tiles stay plain). */
.lib-fstat[data-folder-id][b-yaagufahj2]::before,
.lib-fstat.is-editing[b-yaagufahj2]::before {
  content: ""; position: absolute; top: -9px; left: 0;
  width: 44px; height: 14px;
  background: var(--lib-folder-color, var(--primary));
  clip-path: path("M 2 0 L 32 0 L 44 8 L 6 8 Q 0 8 0 14 L 0 2 Q 0 0 2 0 Z");
}
/* The border stroke around a folder tile matches its tab color. */
.lib-fstat[data-folder-id][b-yaagufahj2],
.lib-fstat.is-editing[b-yaagufahj2] {
  background: color-mix(in srgb, var(--lib-folder-color, var(--primary)) 6%, var(--surface-2));
  border-color: color-mix(in srgb, var(--lib-folder-color, var(--primary)) 60%, var(--border));
}
html.dark .lib-fstat[data-folder-id][b-yaagufahj2],
html.dark .lib-fstat.is-editing[b-yaagufahj2] { background: color-mix(in srgb, var(--lib-folder-color, var(--primary)) 13%, rgba(255,255,255,0.04)); }
.lib-fstat .lib-stat-label[b-yaagufahj2] { gap: 6px; }
.lib-fdot[b-yaagufahj2] { width: 9px; height: 9px; border-radius: 50%; background: var(--lib-folder-color, var(--primary)); flex: 0 0 auto; }
.lib-fstat.is-active[b-yaagufahj2] {
  border-color: var(--lib-folder-color, var(--primary));
  background: color-mix(in srgb, var(--lib-folder-color, var(--primary)) 10%, var(--surface-2));
  box-shadow: inset 0 0 0 1px var(--lib-folder-color, var(--primary)), var(--shadow-1);
}
html.dark .lib-fstat.is-active[b-yaagufahj2] { background: color-mix(in srgb, var(--lib-folder-color, var(--primary)) 26%, transparent); }
/* Filing drop highlight (drag a card over a tile). */
.lib-fstat.lib-drop-on[b-yaagufahj2] {
  border-color: var(--lib-folder-color, var(--primary));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lib-folder-color, var(--primary)) 26%, transparent);
}

/* Reordering — grab a folder tile and drag it to a new slot among the
   other folders. The tile in flight fades; a colored insertion bar shows
   in the gap where it will drop (before/after the hovered tile). */
.lib-fstat[data-folder-id][b-yaagufahj2] { cursor: grab; }
.lib-fstat.lib-folder-dragging[b-yaagufahj2] { opacity: .4; cursor: grabbing; }
.lib-fstat.lib-reorder-before[b-yaagufahj2]::after,
.lib-fstat.lib-reorder-after[b-yaagufahj2]::after {
  content: ""; position: absolute; top: 2px; bottom: 2px; width: 3px;
  border-radius: 2px; background: var(--primary); z-index: 2;
}
html.dark .lib-fstat.lib-reorder-before[b-yaagufahj2]::after,
html.dark .lib-fstat.lib-reorder-after[b-yaagufahj2]::after { background: var(--primary-bright, #8B9FAF); }
.lib-fstat.lib-reorder-before[b-yaagufahj2]::after { left: -6px; }
.lib-fstat.lib-reorder-after[b-yaagufahj2]::after { right: -6px; }
/* Hover ⋯ menu, pinned top-right of the tile. */
.lib-fstat-menu[b-yaagufahj2] {
  position: absolute; top: 5px; right: 5px;
  width: 24px; height: 24px; border: 0; border-radius: 50%;
  background: transparent; color: var(--text-subtle); cursor: pointer;
  display: none; align-items: center; justify-content: center;
}
.lib-fstat:hover .lib-fstat-menu[b-yaagufahj2],
.lib-fstat:focus-within .lib-fstat-menu[b-yaagufahj2],
.lib-fstat-menu.is-open[b-yaagufahj2] { display: flex; }
.lib-fstat-menu:hover[b-yaagufahj2] { background: var(--surface-3); color: var(--text); }
html.dark .lib-fstat-menu:hover[b-yaagufahj2] { background: rgba(255,255,255,0.10); }
.lib-fstat-menu.is-open[b-yaagufahj2] { color: var(--text); box-shadow: 0 0 0 2px var(--primary); }
.lib-fstat-menu .material-symbols-outlined[b-yaagufahj2] { font-size: 16px !important; }

/* "New folder" + drag-only "Remove from folder" tiles — dashed, muted. */
.lib-fstat-add[b-yaagufahj2], .lib-fstat-unfile[b-yaagufahj2] {
  border-style: dashed;
  color: var(--text-muted);
  box-shadow: none;
}
/* New-folder creation surfaces (the dashed "New folder" tile + the inline
   creation editor) use the same light-blue tint as the AI chat module and
   the scorecards. */
.lib-fstat-add[b-yaagufahj2],
.lib-fstat.is-editing.lib-fstat-creating[b-yaagufahj2] {
  background: color-mix(in srgb, var(--primary) 5%, #fff);
  border-color: color-mix(in srgb, var(--primary) 22%, var(--border));
}
html.dark .lib-fstat-add[b-yaagufahj2],
html.dark .lib-fstat.is-editing.lib-fstat-creating[b-yaagufahj2] {
  background: color-mix(in srgb, var(--primary-bright, #8B9FAF) 8%, #1A2339);
  border-color: color-mix(in srgb, var(--primary-bright, #8B9FAF) 18%, var(--border));
}
.lib-fstat-add .material-symbols-outlined[b-yaagufahj2],
.lib-fstat-unfile .material-symbols-outlined[b-yaagufahj2] { font-size: 22px !important; color: var(--text-subtle); }
.lib-fstat-add:hover[b-yaagufahj2] { border-color: var(--primary); color: var(--text); }
.lib-fstat-add:hover .material-symbols-outlined[b-yaagufahj2] { color: var(--primary); }
html.dark .lib-fstat-add:hover .material-symbols-outlined[b-yaagufahj2] { color: var(--primary-bright); }
/* Unfile / move-to-library tiles only exist while the matching drag is
   in flight (a filed card, or a nested folder). */
.lib-fstat-unfile[b-yaagufahj2] { display: none; color: var(--primary); border-color: color-mix(in srgb, var(--primary) 45%, transparent); }
html.dark .lib-fstat-unfile[b-yaagufahj2] { color: var(--primary-bright); }
.lib-fstat-unfile .material-symbols-outlined[b-yaagufahj2] { color: currentColor; }
body.lib-drag-active .lib-fstat-unfile#lib-folders-unfile[b-yaagufahj2] { display: flex; }
body.lib-folder-drag-out .lib-fstat-unfile#lib-folders-out[b-yaagufahj2] { display: flex; }
.lib-fstat-unfile.lib-drop-on[b-yaagufahj2] { background: color-mix(in srgb, var(--primary) 12%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 26%, transparent); }

/* Breadcrumb — shown while a folder is open so nested folders can be
   walked back up to the library root. Current crumb uses the brand serif. */
.lib-crumbs[b-yaagufahj2] {
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px;
  padding: 0 2px 10px; margin-top: 2px;
  font-size: 0.8125rem; font-weight: 600; color: var(--text-muted);
}
.lib-crumbs[hidden][b-yaagufahj2] { display: none; }
.lib-crumb[b-yaagufahj2] {
  border: 0; background: transparent; color: var(--primary); cursor: pointer;
  font: inherit; font-weight: 700; padding: 2px 6px; border-radius: 6px;
}
html.dark .lib-crumb[b-yaagufahj2] { color: var(--primary-bright); }
.lib-crumb:hover[b-yaagufahj2] { background: var(--surface-3); color: var(--text); }
html.dark .lib-crumb:hover[b-yaagufahj2] { background: rgba(255,255,255,0.08); }
.lib-crumb-sep[b-yaagufahj2] { color: var(--text-subtle); padding: 0 2px; user-select: none; }
.lib-crumb-current[b-yaagufahj2] {
  font-family: 'WISE Digits', 'Noto Serif', serif;
  font-weight: 700; color: var(--text); padding: 2px 6px;
}

/* Inline name editor (create + rename) — the editing tile grows to two
   columns so the name input + color swatches have room. */
.lib-fstat.is-editing[b-yaagufahj2] {
  grid-column: span 2; cursor: default;
  align-items: stretch; justify-content: center; gap: 8px;
  padding: 12px;
}
.lib-fstat.is-editing:hover[b-yaagufahj2] { transform: none; box-shadow: inset 0 0 0 1px var(--lib-folder-color, var(--primary)), var(--shadow-1); }
.lib-fstat-edit[b-yaagufahj2] { display: flex; flex-direction: column; gap: 8px; }
.lib-folder-edit-input[b-yaagufahj2] {
  width: 100%; min-width: 0; height: 32px; box-sizing: border-box; padding: 0 10px;
  border-radius: 8px; font: inherit; font-size: .8125rem; font-weight: 600; color: var(--text); outline: none;
  background: var(--surface-2); border: 1px solid var(--lib-folder-color, var(--primary));
}
html.dark .lib-folder-edit-input[b-yaagufahj2] { background: rgba(255,255,255,0.06); }
.lib-folder-swatches[b-yaagufahj2] { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.lib-folder-swatch[b-yaagufahj2] {
  flex: 0 0 auto; width: 14px; height: 14px; padding: 0; border: 0; border-radius: 50%;
  background: currentColor; cursor: pointer; transition: transform .12s ease;
}
.lib-folder-swatch:hover[b-yaagufahj2] { transform: scale(1.25); }
.lib-folder-swatch.is-sel[b-yaagufahj2] { outline: 2px solid currentColor; outline-offset: 2px; }

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

/* A folder tile is a div (the design's is a <button>) so its hover ⋯ can sit inside it. The keyboard opens
   it through .wci-lib-fstat-open, a real button laid over the whole tile that ignores the pointer (the tile
   takes clicks and drags); its focus ring is the tile's. The ⋯ sits above it. */
.wci-lib-fstat-open[b-yaagufahj2] {
  position: absolute; inset: 0; z-index: 1; padding: 0; border: 0; border-radius: inherit;
  background: transparent; pointer-events: none; cursor: inherit;
}
.wci-lib-fstat-open:focus-visible[b-yaagufahj2] { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); }
.lib-fstat-menu[b-yaagufahj2] { z-index: 2; }
.lib-fstat-name[b-yaagufahj2] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-fstat .lib-stat-label[b-yaagufahj2] { max-width: 100%; }

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

/* A starred folder carries a filled star after its name. */
.wci-lib-fstar[b-yaagufahj2] { font-size: 12px !important; color: color-mix(in srgb, var(--warm-400) 70%, var(--ter-amber)); font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 20; }

/* The drag-only unfile tile is a drop zone for a filed card, never a click target. */
.lib-fstat-unfile[b-yaagufahj2] { cursor: default; }
.lib-fstat-unfile:hover[b-yaagufahj2] { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .lib-stat[b-yaagufahj2], .lib-folder-swatch[b-yaagufahj2] { transition: none; }
  .lib-stat:hover[b-yaagufahj2] { 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, serif 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', 'Noto Serif', 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/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 revision the prototype
   host serves (fetched 2026-09-28, http://3.17.180.155:4144/):
     js/table-pagination.js  injectStyles() (.wtp-foot, .wtp-count, .wtp-more).
       These are the design's real rules; pages/wise.css 23729-23743 only
       mirrors them under .dsc-demo for the catalog.
   Not ported: .wtp-clip / .wtp-hidden-foot (the design hides rows already in
   the DOM; the app asks the server for the next batch instead).
   Class names are kept IDENTICAL so a future re-port is a section diff.
   Consumes tokens from wwwroot/css/wci/wci-tokens.css.
   =================================================================== */

.wtp-foot[b-tgk7bq3ewa] { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 11px 14px 10px; border-top: 1px solid var(--border); font-size: .76rem; color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.wtp-foot .wtp-count[b-tgk7bq3ewa] { font-size: .76rem; color: var(--text-subtle); line-height: 1.4; }
.wtp-foot .wtp-count b[b-tgk7bq3ewa] { font-weight: 700; color: var(--text-muted, var(--text)); }
.wtp-more[b-tgk7bq3ewa] { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; background: transparent; border: 0; padding: 2px 4px; margin: -2px -4px; border-radius: 6px; color: var(--primary); font-family: inherit; font-size: .76rem; font-weight: 700; letter-spacing: .01em; transition: color .12s ease; }
html.dark .wtp-more[b-tgk7bq3ewa] { color: var(--primary-bright, var(--primary)); }
.wtp-more:hover[b-tgk7bq3ewa] { text-decoration: underline; }
.wtp-more .material-symbols-outlined[b-tgk7bq3ewa] { font-size: 16px; line-height: 1; }
.wtp-more[hidden][b-tgk7bq3ewa] { display: none; }

/* ===================================================================
   APP-OWNED ADDITIONS
   =================================================================== */
.wtp-more:focus-visible[b-tgk7bq3ewa] { outline: 2px solid color-mix(in srgb, var(--primary) 45%, transparent); outline-offset: 2px; }
.wtp-more:disabled[b-tgk7bq3ewa] { cursor: progress; text-decoration: none; opacity: .75; }
.wtp-more:disabled .material-symbols-outlined[b-tgk7bq3ewa] { animation: wci-wtp-spin-b-tgk7bq3ewa 0.9s linear infinite; }
@keyframes wci-wtp-spin-b-tgk7bq3ewa { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .wtp-more[b-tgk7bq3ewa] { transition: none; }
  .wtp-more:disabled .material-symbols-outlined[b-tgk7bq3ewa] { animation: 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
   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)); }

/* ===================== 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)
   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; }

/* ===================== 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);
}

@media (prefers-reduced-motion: reduce) {
    .topbar-menu-item[b-mg30y92knq] { transition: 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
   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, 'Noto Serif', 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', 'Noto Serif', 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; }

/* ---- 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%; }

@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/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; }
/* /Components/DesignSystem/WciScorecard.razor.rz.scp.css */
/* ===================================================================
   WCI component: Welcome scorecard, intro layout (WciScorecard), INTEL-381
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo, revision served on
   2026-09-30 (ip-b2b checkout at ff59cb3):
     pages/wise.css
       lines 9046-9064   .ws-scorecard, .ws-scorecard--lg and the hover,
                         dark and focus lines
       lines 9098-9118   .ws-sc-top, .ws-sc-icon, .ws-sc-pill, .ws-sc-desc,
                         .ws-sc-action and its arrow nudge
       lines 9121-9181   the intro variant (.ws-scorecard--intro, its
                         icon, pill and serif-less headline) and the gold
                         variant (.ws-scorecard--gold, Gilded Grain, light
                         and dark)
       lines 9207-9214   the Large card's brand-serif headline (the hero
                         half of the selector is not ported)
   Class names are kept IDENTICAL. Not ported (INTEL-369): the rail and
   its chevrons and fades, the metric / hero / chart / art / chips /
   badge / locked / film cards, the Focused cards face (.ws-sc-focus-*
   selectors are dropped from the gold rule), and the rail's card sizing
   switches. REGISTRY.md rule 10: the root sets no margin.
   =================================================================== */

.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;
  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; }

.ws-sc-top[b-5sc8vj2qkn] { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.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; }
.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; }
.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] { border-color: color-mix(in srgb, var(--primary) 45%, var(--border-strong)); }
.ws-scorecard--intro: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] { color: var(--primary-ink, var(--primary)); }
.ws-sc-pill--intro[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] { 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);
}

/* 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--lg .ws-sc-intro-title[b-5sc8vj2qkn] {
  font-family: 'WISE Digits', var(--font-serif);
  font-weight: 700;
  font-size: 1rem;
}

/* ---- APP-OWNED ADDITIONS ---- */
/* The card is a real <button>: reset the UA's colour so the design's text
   colours apply. */
button.ws-scorecard[b-5sc8vj2qkn] { color: var(--text); }
@media (prefers-reduced-motion: reduce) {
  .ws-scorecard[b-5sc8vj2qkn], .ws-sc-action .material-symbols-outlined[b-5sc8vj2qkn] { transition: none; }
  .ws-scorecard:hover[b-5sc8vj2qkn] { transform: 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/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', 'Noto Serif', Georgia, 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', 'Noto Serif', 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', 'Noto Serif', 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; }

/* ---- 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/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); } }

/* 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/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:color-mix(in srgb,var(--text-subtle,#8B9FAF) 52%,transparent);--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.dark .wch-sidebar[b-c2ov5bai1w]{--wch-tree:rgba(255,255,255,0.20);}
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/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 (#25507C / 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 #E0DBE7;
    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: #1A102C;
    margin: 0;
    line-height: 1.2;
}

.audit-page-subtitle[b-16ogc1145n] {
    font-family: var(--font-family-primary);
    font-size: 14px;
    font-weight: 400;
    color: #5D566A;
    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: #EEF2FF;
    border: 1.5px solid #4F46E5;
    border-radius: 8px;
    font-family: var(--font-family-primary);
}

.audit-bulk-bar-mixed[b-16ogc1145n] {
    background: #FFFBEB;
    border-color: #FDE68A;
}

.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: #4F46E5;
    flex-shrink: 0;
}

.audit-bulk-bar-mixed .audit-bulk-badge[b-16ogc1145n] {
    background: #92400E;
}

.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: #3730A3;
    line-height: 1.2;
}

.audit-bulk-bar-mixed .audit-bulk-count[b-16ogc1145n] {
    color: #92400E;
}

.audit-bulk-scope[b-16ogc1145n] {
    font-size: 12px;
    font-weight: 400;
    color: #5D566A;
    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: #92400E;
}

/* ── 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 #B7B2C4;
    background: #FFFFFF;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
    flex-shrink: 0;
}

.audit-bulk-checkbox:hover[b-16ogc1145n] {
    border-color: #4F46E5;
}

.audit-bulk-checkbox.audit-bulk-checkbox-checked[b-16ogc1145n] {
    background: #4F46E5;
    border-color: #4F46E5;
}

.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: #FFFCF7;
}

.audit-table-wrap[b-16ogc1145n]  .adm-trow.audit-row-bulk-selected {
    background: #EEF2FF;
}

.audit-table-wrap[b-16ogc1145n]  .adm-trow.is-active {
    background: #EEF2FF;
    box-shadow: inset 3px 0 0 #4F46E5;
}

.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: #25507C; }
.audit-table-wrap[b-16ogc1145n]  .audit-row-stripe-accepted  { --stripe-color: #10B981; }
.audit-table-wrap[b-16ogc1145n]  .audit-row-stripe-newcanon  { --stripe-color: #4F46E5; }
.audit-table-wrap[b-16ogc1145n]  .audit-row-stripe-rejected  { --stripe-color: #EF4444; }
.audit-table-wrap[b-16ogc1145n]  .audit-row-stripe-kickedback { --stripe-color: #0D9488; }
.audit-table-wrap[b-16ogc1145n]  .audit-row-stripe-canceled  { --stripe-color: #64748B; }

/* ── 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: #A8A2B3;
}

.audit-mapped-arrow[b-16ogc1145n] {
    font-size: 12px;
    font-weight: 600;
    color: #10B981;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.audit-mapped-kept[b-16ogc1145n] {
    font-size: 10px;
    font-weight: 600;
    color: #10B981;
    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: #4F46E5;
    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; }
.audit-flagged-sla.audit-flagged-warn[b-16ogc1145n] { background: #FEF3C7; }
.audit-flagged-sla.audit-flagged-warn .audit-flagged-when[b-16ogc1145n] { color: #B45309; }
.audit-flagged-sla.audit-flagged-breach[b-16ogc1145n] { background: #FEE2E2; }
.audit-flagged-sla.audit-flagged-breach .audit-flagged-when[b-16ogc1145n] { color: #B91C1C; 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: #5D566A;
    margin-right: 6px;
}
.audit-brand-name[b-16ogc1145n] {
    font-size: 13px;
    font-weight: 600;
    color: #1A102C;
    line-height: 1.2;
}

.audit-food-name[b-16ogc1145n] {
    font-size: 11px;
    font-weight: 400;
    color: #5D566A;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    display: block;
}

.audit-food-name-link[b-16ogc1145n] {
    color: #4F45A8;
    text-decoration: none;
    cursor: pointer;
}

.audit-food-name-link:hover[b-16ogc1145n],
.audit-food-name-link:focus[b-16ogc1145n] {
    color: #1A102C;
    text-decoration: underline;
}

.audit-cell-text-primary[b-16ogc1145n] {
    font-size: 12px;
    font-weight: 400;
    color: #1A102C;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.audit-cell-text-secondary[b-16ogc1145n] {
    font-size: 12px;
    font-weight: 400;
    color: #5D566A;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.audit-cell-unmatched[b-16ogc1145n] {
    font-size: 12px;
    font-style: italic;
    color: #A8A2B3;
}

.audit-cell-notes-text[b-16ogc1145n] {
    font-size: 12px;
    font-weight: 400;
    color: #413A4D;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.audit-flagged-when[b-16ogc1145n] {
    font-size: 12px;
    font-weight: 600;
    color: #1A102C;
}

.audit-flagged-who[b-16ogc1145n] {
    font-size: 10px;
    font-weight: 400;
    color: #5D566A;
}

/* ── Action chips (one per AuditAction, exact Pencil colors) ── */

.audit-chip[b-16ogc1145n] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 9999px;
    border: 1px solid;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    flex-shrink: 0;
}

.audit-chip-icon.material-icons[b-16ogc1145n] {
    font-size: 13px;
    width: 13px;
    height: 13px;
    line-height: 13px;
}

.audit-chip-flag[b-16ogc1145n]     { background: #FEE2E2; border-color: #B91C1C; color: #B91C1C; }
.audit-chip-lookup[b-16ogc1145n]   { background: #F5F3FF; border-color: #7C3AED; color: #7C3AED; }
.audit-chip-newcanon[b-16ogc1145n] { background: #CFFAFE; border-color: #0891B2; color: #0891B2; }
.audit-chip-notsure[b-16ogc1145n]  { background: #FEF3C7; border-color: #92400E; color: #92400E; }

/* All-tab status pill — replaces the Resolve button on rows that are no longer
   actionable (Accepted / Rejected / Canceled). Mirrors the row stripe palette
   so the left-edge color and the tail badge tell the same story. */

.audit-status-pill[b-16ogc1145n] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px 4px 8px;
    border-radius: 9999px;
    border: 1px solid;
    font-family: var(--font-family-primary);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    flex-shrink: 0;
}

.audit-status-pill-icon.material-icons[b-16ogc1145n] {
    font-size: 14px;
    width: 14px;
    height: 14px;
    line-height: 14px;
}

.audit-status-pill-accepted[b-16ogc1145n] { background: #ECFDF5; border-color: #10B981; color: #10B981; }
.audit-status-pill-newcanon[b-16ogc1145n] { background: #EEF2FF; border-color: #4F46E5; color: #4F46E5; }
.audit-status-pill-rejected[b-16ogc1145n] { background: #FEF2F2; border-color: #EF4444; color: #EF4444; }
.audit-status-pill-kickedback[b-16ogc1145n] { background: #F0FDFA; border-color: #0D9488; color: #0F766E; }
.audit-status-pill-canceled[b-16ogc1145n] { background: #F8FAFC; border-color: #64748B; color: #64748B; }

/* ── 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-chip[b-16ogc1145n] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 9999px;
    border: 1px solid #C4B5FD;
    background: #F5F3FF;
    color: #5B21B6;
    font-family: var(--font-family-primary);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    flex-shrink: 0;
}

.audit-superseded-chip-icon.material-icons[b-16ogc1145n] {
    font-size: 13px;
    width: 13px;
    height: 13px;
    line-height: 13px;
}

.audit-superseded-byline[b-16ogc1145n] {
    font-size: 10.5px;
    color: #6D28D9;
    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: #ECF1F6; color: #25507C; }
.audit-tier-chip-2[b-16ogc1145n] { background: #FEF3C7; color: #B45309; }

/* 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-chip[b-16ogc1145n] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 9999px;
    border: 1px solid #FDE68A;
    background: #FFFBEB;
    color: #B45309;
    font-family: var(--font-family-primary);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    flex-shrink: 0;
}
.audit-escalated-chip-icon.material-icons[b-16ogc1145n] {
    font-size: 13px;
    width: 13px;
    height: 13px;
    line-height: 13px;
}
.audit-escalated-meta[b-16ogc1145n] {
    font-size: 10.5px;
    color: #92400E;
    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: #5D566A;
    font-size: 13px;
}

.audit-error[b-16ogc1145n] {
    padding: 24px;
    color: #B91C1C;
    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: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 8px;
    color: #991B1B;
    font-size: 13px;
}

.audit-row-open-error-icon[b-16ogc1145n] {
    font-size: 18px;
    color: #B91C1C;
    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;
    }

    /* On phones the action cell is full-width, so let the buttons wrap rather than overflow. */
    .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] {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
}

/* ── 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: #827C90;
}

.audit-flow-label-text[b-16ogc1145n] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #827C90;
}

.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: #FFFFFF;
    border-radius: 8px;
    border-left: 4px solid #827C90;
    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: #5D566A;
}

.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: #5D566A;
    line-height: 1.4;
}

/* Accent per card: left border + icon + value color. */
.audit-flow-submitted[b-16ogc1145n] { border-left-color: #25507C; }
.audit-flow-submitted .audit-flow-card-icon.material-icons[b-16ogc1145n],
.audit-flow-submitted .audit-flow-card-value[b-16ogc1145n] { color: #25507C; }

.audit-flow-resolved[b-16ogc1145n] { border-left-color: #10B981; }
.audit-flow-resolved .audit-flow-card-icon.material-icons[b-16ogc1145n],
.audit-flow-resolved .audit-flow-card-value[b-16ogc1145n] { color: #10B981; }

.audit-flow-net-pos[b-16ogc1145n] { border-left-color: #D97706; }
.audit-flow-net-pos .audit-flow-card-icon.material-icons[b-16ogc1145n],
.audit-flow-net-pos .audit-flow-card-value[b-16ogc1145n] { color: #D97706; }

.audit-flow-net-neg[b-16ogc1145n] { border-left-color: #10B981; }
.audit-flow-net-neg .audit-flow-card-icon.material-icons[b-16ogc1145n],
.audit-flow-net-neg .audit-flow-card-value[b-16ogc1145n] { color: #10B981; }

.audit-flow-net-flat[b-16ogc1145n] { border-left-color: #827C90; }
.audit-flow-net-flat .audit-flow-card-icon.material-icons[b-16ogc1145n],
.audit-flow-net-flat .audit-flow-card-value[b-16ogc1145n] { color: #827C90; }

@media (max-width: 900px) {
    .audit-flow-cards[b-16ogc1145n] {
        flex-direction: column;
    }
}
/* /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/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 */
.my-foods-package-size[b-zvgdztcuab] {
    color: #6b7280;
    font-size: 0.75rem;
    line-height: 1rem;
    white-space: nowrap;
}

/* 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/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 / Noto Serif 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/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;
}

/* /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;
    }
}
/* /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));
    }
}
/* /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;
    }
}
/* /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 */
.step-tracker[b-ifvqiy6n6z] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    gap: 0;
    border-bottom: 1px solid var(--color-oyster-300);
    background: #ffffff;
    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;
}

.step-connector[b-ifvqiy6n6z] {
    width: 24px;
    height: 2px;
    flex-shrink: 0;
    margin-bottom: 16px;
    border-radius: 1px;
    transition: background 0.2s ease;
}

@media (min-width: 900px) {
    .step-connector[b-ifvqiy6n6z] {
        width: 36px;
    }
}

@media (min-width: 1180px) {
    .step-connector[b-ifvqiy6n6z] {
        width: 48px;
    }
}

@media (max-width: 640px) {
    .step-tracker[b-ifvqiy6n6z] {
        padding: 8px 12px;
    }

    .step-label[b-ifvqiy6n6z] {
        display: none;
    }

    .step-connector[b-ifvqiy6n6z] {
        width: 16px;
        margin-bottom: 0;
    }
}
/* /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/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;
    }
}
/* /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;
}

.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;
}

.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-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; }
/* /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;
}

.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/FoodScoutIngredientsPanel.razor.rz.scp.css */
/* Tree rails — mirrors IngredientsVerification.razor.css ::deep rules.
   Needed here because this component renders outside any HTML element owned
   by IngredientsVerification, so ::deep from that file cannot reach us. */

.tree-cell[b-4bcszr0mv7] { padding-left: 4px; }
.tree-cell-inner[b-4bcszr0mv7] { display: flex; align-items: center; }
.tree-cell-railed .tree-cell-inner[b-4bcszr0mv7] { height: 100%; }

.tree-rail[b-4bcszr0mv7] {
    display: inline-block;
    flex: 0 0 auto;
    width: 22px;
    align-self: stretch;
    position: relative;
}

.tree-rail-continue[b-4bcszr0mv7]::before,
.tree-rail-branch[b-4bcszr0mv7]::before,
.tree-rail-lastbranch[b-4bcszr0mv7]::before {
    content: ''; position: absolute; left: 10px;
    width: 1.5px; background: #94a3b8;
}

.tree-rail-continue[b-4bcszr0mv7]::before,
.tree-rail-branch[b-4bcszr0mv7]::before { top: -8px; bottom: -9px; }
.tree-rail-lastbranch[b-4bcszr0mv7]::before { top: -8px; height: calc(50% + 8px); }

.tree-rail-branch[b-4bcszr0mv7]::after,
.tree-rail-lastbranch[b-4bcszr0mv7]::after {
    content: ''; position: absolute; top: 50%; left: 10px;
    width: 11px; height: 1.5px; background: #94a3b8;
    transform: translateY(-0.5px);
}
/* /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/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 ── */
[b-g07oeh80ji] .ingredient-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
[b-g07oeh80ji] .ingredient-table thead th {
    background: var(--color-oyster-100); padding: 8px 14px; text-align: left;
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--color-oyster-500);
    border-bottom: 1px solid var(--color-oyster-300);
    position: sticky; top: 0; z-index: 10;
    box-shadow: 0 2px 4px -1px rgba(0,0,0,0.08);
}
[b-g07oeh80ji] .ingredient-table tbody td {
    padding: 7px 14px; color: var(--color-oyster-700);
    border-bottom: 1px solid var(--color-oyster-200); vertical-align: middle;
}
[b-g07oeh80ji] .ingredient-table tbody tr:last-child td { border-bottom: none; }
[b-g07oeh80ji] .ingredient-table tbody tr { transition: background 0.12s; cursor: pointer; }
[b-g07oeh80ji] .ingredient-table tbody tr:hover { background: var(--color-oyster-100); }

/* ── 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; }

[b-g07oeh80ji] .parser-table-scroll { overflow-x: clip; }
[b-g07oeh80ji] #parser-table td:nth-child(3) { white-space: nowrap; }

/* ── Tree indent rails ──
   Directory-tree-style guide lines drawn in the tree-cell before the name. The cell
   stays a normal table-cell so it fills the full row height even when a sibling cell
   wraps; an inner flex wrapper (.tree-cell-inner) takes `height: 100%` of that cell so
   each rail span can `align-self: stretch` to the full row height. (Making the td
   itself inline-flex shrank it to its own content, so the vertical lines broke between
   rows whenever a sibling cell pushed the row taller.) One rail span per depth level is
   emitted by ParsedIngredientRow; the kind (continue / branch / last) is computed by
   IngredientDisplayHelpers.ComputeRailSlots.

   Replaces the previous depth-based `padding-left: calc(4px + depth * 8px)` indent
   plus the 8×1 gray tick on `.tree-name-child::before`. */
[b-g07oeh80ji] .tree-cell { padding-left: 4px; }
[b-g07oeh80ji] #parser-table .tree-cell { padding-left: 4px !important; }
[b-g07oeh80ji] .tree-cell-inner { display: flex; align-items: center; }
[b-g07oeh80ji] .tree-cell-railed .tree-cell-inner { height: 100%; }
[b-g07oeh80ji] .tree-rail {
    display: inline-block;
    flex: 0 0 auto;
    width: 22px;
    align-self: stretch;
    position: relative;
}
/* The vertical pipe extends 7px above and 8px below the rail box so it bridges
   the cell's 7px top/bottom padding AND the 1px border-bottom — without this,
   consecutive rows' pipes leave a visible 15px gap. The horizontal connector
   sits at the rail's vertical center, which is the row's visual center because
   the cell content is vertically centered. */
[b-g07oeh80ji] .tree-rail-continue::before,
[b-g07oeh80ji] .tree-rail-branch::before,
[b-g07oeh80ji] .tree-rail-lastbranch::before {
    content: ''; position: absolute; left: 10px;
    width: 1.5px; background: var(--color-oyster-400);
}
/* Overlap +1px past each cell edge so the line bridges the row-divider border
   even under subpixel rendering — the alternative ends at the boundary and the
   browser rounds down on one side, leaving a hairline gap. */
[b-g07oeh80ji] .tree-rail-continue::before,
[b-g07oeh80ji] .tree-rail-branch::before { top: -8px; bottom: -9px; }
[b-g07oeh80ji] .tree-rail-lastbranch::before { top: -8px; height: calc(50% + 8px); }
[b-g07oeh80ji] .tree-rail-branch::after,
[b-g07oeh80ji] .tree-rail-lastbranch::after {
    content: ''; position: absolute; top: 50%; left: 10px;
    width: 11px; height: 1.5px; background: var(--color-oyster-400);
    transform: translateY(-0.5px);
}

/* ── Tree name styles ── */
[b-g07oeh80ji] .tree-name-root { font-weight: 600; color: var(--color-oyster-900); text-transform: capitalize; }
[b-g07oeh80ji] .tree-name-child { color: var(--color-oyster-700); text-transform: capitalize; }
[b-g07oeh80ji] #parser-table .tree-name-child { color: var(--color-oyster-700); }
[b-g07oeh80ji] #parser-table tr[data-depth="25"] .tree-name-child { color: var(--color-primary); font-weight: 600; }

/* ── Depth-based row tinting ──
   Background lightness steps down with depth, capped so deep nodes don't go pitch.
   Depth 25 is the special "leaf overflow" indigo accent. */
[b-g07oeh80ji] #parser-table tr[data-depth] {
    background: hsl(220 14% calc(99% - min(var(--tree-depth, 0), 10) * 0.55%));
}
[b-g07oeh80ji] #parser-table tr[data-depth="25"] {
    background: #ecf1f6; /* one step lighter than --color-indigo-100, which is the hover tint */
    border-left: 3px solid var(--color-primary);
}
[b-g07oeh80ji] #parser-table tr[data-depth]:hover { background: #e8eaf2 !important; }
[b-g07oeh80ji] #parser-table tr[data-depth="25"]:hover { background: var(--color-indigo-100) !important; }

/* Selection highlight wins over the depth-tinted base. The base rule above
   (`#parser-table tr[data-depth]`) has higher specificity than a bare
   `.bg-indigo-50` Tailwind utility, so the indigo class on a selected row gets
   overridden to a near-white tint and looks unselected. Re-asserting the indigo
   here, scoped + with the same attribute selector, takes precedence. */
[b-g07oeh80ji] #parser-table tr[data-depth].bg-indigo-50,
[b-g07oeh80ji] #parser-table tr[data-depth].bg-indigo-50:hover { background: #ecf1f6 !important; }

/* ── 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: #ecf1f6 !important; outline: 2px solid var(--color-primary); 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/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;
}

.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;
    }
}
/* /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;
}
/* /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/Reports/ReportSquareCard.razor.rz.scp.css */
/* Report-hub card chrome — a more "designed" treatment for the (now permanent)
   card view on the Portfolio / Studio report landing pages:
     • a faint brand-tinted radial wash in the top-right corner
     • a soft glow that fades in on hover, plus a lift + deeper shadow
     • the icon tile lifts/tilts slightly on hover
     • a gentle fade-up entrance when the page loads
   All motion is disabled under prefers-reduced-motion. */

.report-hub-card[b-8ru3kuowwm] {
    /* Brand blue (#25507C) — the same family the report headers use — drives the
       card wash, glow and hover border. */
    --rhc-accent: 37, 80, 124;
    position: relative;
    overflow: hidden;
    /* A real-light, uniform blue surface (a few % of the header blue over white)
       so cards read as a soft tinted panel rather than plain white. */
    background:
        linear-gradient(180deg, rgba(var(--rhc-accent), .08) 0%, rgba(var(--rhc-accent), .045) 100%),
        #fff;
    transition: transform .22s cubic-bezier(.22, 1, .36, 1),
                box-shadow .22s ease,
                border-color .22s ease;
    animation: rhc-card-in-b-8ru3kuowwm .45s cubic-bezier(.22, 1, .36, 1) both;
    will-change: transform;
}

/* Hover glow (kept behind the content via z-index below). */
.report-hub-card[b-8ru3kuowwm]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(150% 150% at 100% 0%, rgba(var(--rhc-accent), .12), transparent 55%);
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}

.report-hub-card > *[b-8ru3kuowwm] { position: relative; z-index: 1; }

/* Navy header band — the same brand-navy field the report hero uses — spanning
   the full card width and ending just above the report name. Carries the embossed
   WISEcode bug watermark (darker navy emboss, like the hero) behind the icon + pill,
   which sit on top. The band's overflow clips the tall owl to a strip. */
.report-hub-bug[b-8ru3kuowwm] {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 0;
    height: 72px;
    overflow: hidden;
    pointer-events: none;
    display: flex;
    align-items: center;
    /* Match the report hero exactly: same navy field + embossed-bug colour. */
    background: color-mix(in srgb, #25507C 78%, #1A2339);
    color: color-mix(in srgb, #0B1426 38%, #25507C);
}
.report-hub-bug[b-8ru3kuowwm]  .upf-hero-bug {
    width: 100%; height: auto; display: block;
    filter: drop-shadow(0 1.5px 0 rgba(255, 255, 255, .14));
}

.report-hub-card:hover[b-8ru3kuowwm] {
    transform: translateY(-4px);
    border-color: rgba(var(--rhc-accent), .35);
    box-shadow: 0 18px 40px -16px rgba(17, 24, 39, .28), 0 4px 12px -6px rgba(var(--rhc-accent), .18);
}
.report-hub-card:hover[b-8ru3kuowwm]::after { opacity: 1; }

/* Icon tile micro-interaction. */
.report-hub-tile[b-8ru3kuowwm] { transition: transform .22s cubic-bezier(.22, 1, .36, 1); }
.report-hub-card:hover .report-hub-tile[b-8ru3kuowwm] { transform: scale(1.06) rotate(-3deg); }

@keyframes rhc-card-in-b-8ru3kuowwm {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .report-hub-card[b-8ru3kuowwm] { animation: none; transition: border-color .2s ease; }
    .report-hub-card:hover[b-8ru3kuowwm] { transform: none; }
    .report-hub-tile[b-8ru3kuowwm] { transition: none; }
    .report-hub-card:hover .report-hub-tile[b-8ru3kuowwm] { transform: 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/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/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/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; }
/* 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; }