/* Local preview: the case page shares the site's brand tokens and reading grid.
   Layout, demo state, robot artwork, and reference imagery stay in their source files. */
/* Name the actual project settings near the case introduction. */
.commercial-case .case-project-label {
  margin:32px 0 12px;color:var(--noe-muted);font-size:13px;line-height:1.5;letter-spacing:.03em;
}
.commercial-case .case-project-types {
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
}
.commercial-case .case-project-types > span {
  display:inline-flex;align-items:center;min-height:42px;padding:9px 16px;
  border:1px solid #e3b38a55;border-radius:5px;background:#efb5830a;
  color:var(--noe-text);font-size:17px;font-weight:500;line-height:1.4;
}
@media(min-width:981px) {
  .commercial-case.full-commercial-case .case-hero h1 { font-size:clamp(64px,7.2vw,108px);line-height:1.12; }
  .commercial-case.full-commercial-case[data-lang=en] .case-hero h1 { font-size:clamp(58px,6vw,90px);line-height:1.08; }
}
.commercial-case {
  color-scheme: dark;
  background: var(--noe-bg);
  color: var(--noe-text);
  font-family: var(--noe-font);
}

.commercial-case :is(button, input, select, textarea) {
  font-family: var(--noe-font);
}

.commercial-case :is(h1, h2, h3, h4) {
  color: var(--noe-text);
  font-weight: 520;
}

.commercial-case :is(.case-hero h1 em, .project-status, .case-types li span,
  .output-number, .estimate-label, .result-step > strong, .chart-toolbar > span,
  .value-detail header em, .value-detail div small) {
  color: var(--noe-accent);
}

.commercial-case :is(.case-eyebrow, .section-kicker, .case-meta dt, .chapter-nav,
  .hero-intro > p, .context-copy > p, .case-types > span, .case-audience > span,
  .space-intro > p, .district-note, .space-caption, .section-note,
  .reference-details > p, .reference-grid figcaption, .value-baseline > small,
  .result-step header, .result-step p, .value-detail header, .value-boundary) {
  color: var(--noe-muted);
}

.commercial-case .hero-intro .hero-lead,
.commercial-case .context-copy blockquote {
  color: var(--noe-text);
}

.commercial-case :is(.case-audience p, .output-row p, .output-row li,
  .reference-details summary, .value-baseline strong small,
  .result-step .metric-emphasis, .result-step small b,
  .value-detail > p, .value-detail > div) {
  color: var(--noe-muted);
}

.commercial-case :is(.result-step small, .value-detail footer, .case-footer,
  .case-footer small) {
  color: var(--noe-subtle);
}

.commercial-case :is(.case-meta, .chapter-nav, .case-types, .case-audience,
  .space-caption, .output-section, .output-path, .output-row,
  .reference-details, .value-baseline, .result-step small,
  .value-chart-delivery, .value-detail > div) {
  border-color: var(--noe-line);
}

.commercial-case .case-header {
  background: color-mix(in srgb, var(--noe-bg) 96%, transparent);
  border-color: var(--noe-line);
}

.commercial-case .header-back {
  color: var(--noe-muted);
}

.commercial-case :is(.case-language, .case-book, .chart-toolbar button) {
  background: transparent;
  color: var(--noe-text);
  border-color: var(--noe-line-strong);
  border-radius: var(--noe-control-radius);
}

.commercial-case .case-header .case-language {
  background: linear-gradient(135deg,#e9b48426,#d88e7110);
  border-color: #e6b38d80;
  border-radius: 99px;
  color: #f3cdad;
}

.commercial-case .case-header .case-book {
  background: var(--noe-accent);
  border-color: var(--noe-accent);
  color: var(--noe-bg);
  font-size: 12px;
  font-weight: 550;
  padding: 10px 17px;
}

.commercial-case :is(.case-language, .case-book, .chart-toolbar button):hover {
  background: var(--noe-surface-raised);
  border-color: var(--noe-accent);
  color: var(--noe-accent);
}

.commercial-case .case-header .case-language:hover {
  background: #efb58330;
  border-color: #f1c5a1;
  color: #f3cdad;
}

.commercial-case .case-header .case-book:hover {
  background: #f3c39a;
  border-color: #f3c39a;
  color: var(--noe-bg);
}

.commercial-case :is(.header-back, .chapter-nav a, .reference-details summary,
  .case-footer a, .text-link):hover,
.commercial-case .chapter-nav a[aria-current] {
  color: var(--noe-accent);
}

/* Four capabilities remain accordions on the same dark page canvas. */
.commercial-case :is(.paper-section, .agent-team-section) {
  background: var(--noe-bg);
  color: var(--noe-text);
  color-scheme: dark;
}

.commercial-case .paper-section .section-kicker,
.commercial-case .section-heading > p:last-child:not(.section-kicker),
.commercial-case :is(.cap-number, .cap-summary > span, .capability-detail) {
  color: var(--noe-muted);
}

.commercial-case :is(.capability-list, .capability-row,
  .capability-detail blockquote, .capability-detail .learning-layer,
  .demo-disclosure) {
  border-color: var(--noe-line);
}

.commercial-case .capability-row summary > i {
  color: var(--noe-accent);
}

.commercial-case .capability-detail blockquote {
  color: var(--noe-text);
}

.commercial-case .demo-disclosure .section-kicker,
.commercial-case .demo-disclosure p:not(.section-kicker),
.commercial-case .demo-loading {
  color: var(--noe-muted);
}

.commercial-case .demo-disclosure strong {
  color: var(--noe-accent);
}

/* Extra case specificity keeps the late-loaded demo stylesheet on theme. */
.commercial-case :is(.team-robot-intro, .team-demo-case) {
  background: var(--noe-surface);
  color: var(--noe-text);
  border-color: var(--noe-line);
  border-radius: var(--noe-radius);
  box-shadow: inset 0 0 0 1px var(--noe-line);
}

.commercial-case :is(.agent-team-heading h2, .team-robot-intro-copy h2,
  .team-conversations-heading h3, .team-demo-intro h3) {
  color: var(--noe-text);
}

.commercial-case :is(.agent-team-heading > div:last-child > span,
  .agent-team-heading > div:last-child > p, .team-robot-eyebrow,
  .team-robot-intro-copy > p:not(.team-robot-eyebrow),
  .team-conversations-heading p, .team-demo-intro > span,
  .team-demo-intro p, .team-demo-hint, .team-robot-expression-label) {
  color: var(--noe-muted);
}

.commercial-case .team-robot-intro-copy > a {
  color: var(--noe-text);
}

.commercial-case .team-robot-intro-copy > a:hover {
  color: var(--noe-accent);
}

.commercial-case .team-robot-expression-controls button {
  color: var(--noe-muted);
}

.commercial-case .team-robot-expression-controls button > i {
  background: var(--noe-subtle);
}

.commercial-case .team-robot-expression-controls button[aria-pressed="true"] > i {
  background: var(--noe-accent);
  box-shadow: 0 0 0 5px var(--noe-surface-raised);
}

.commercial-case .team-robot-expression-controls button:hover,
.commercial-case .team-robot-expression-controls .team-robot-motion-toggle {
  background: var(--noe-surface-raised);
  color: var(--noe-text);
}

.commercial-case .team-chat-window {
  background: var(--noe-bg);
  color: var(--noe-text);
  border-color: var(--noe-line-strong);
  border-radius: var(--noe-radius);
  box-shadow: none;
}

.commercial-case :is(.team-chat-titlebar, .team-chat-thread-title,
  .team-chat-footer) {
  background: var(--noe-surface);
  color: var(--noe-text);
  border-color: var(--noe-line);
}

.commercial-case .team-chat-titlebar > span {
  color: var(--noe-text);
}

.commercial-case :is(.team-chat-titlebar em,
  .team-chat-thread-title > span:last-child, .team-chat-timestamp,
  .team-chat-owner > span, .team-chat-status, .team-chat-transfer,
  .team-chat-sidebar-label, .team-chat-sidebar-label > span,
  .team-chat-sidebar small, .team-chat-sidebar-person) {
  color: var(--noe-muted);
}

.commercial-case .team-chat-sidebar {
  background: var(--noe-surface);
  border-color: var(--noe-line);
}

.commercial-case .team-chat-sidebar > button {
  color: var(--noe-text);
  border-radius: var(--noe-control-radius);
}

.commercial-case .team-chat-sidebar strong {
  color: var(--noe-text);
}

.commercial-case .team-chat-sidebar > button:hover,
.commercial-case .team-chat-sidebar > button[aria-pressed="true"] {
  background: var(--noe-surface-raised);
}

.commercial-case .team-chat-sidebar-person > span {
  background: var(--noe-surface-raised);
  color: var(--noe-muted);
}

.commercial-case .team-chat-sidebar-person svg {
  stroke: currentColor;
}

.commercial-case :is(.team-chat-messages, .team-chat-plan) {
  background: var(--noe-bg);
  scrollbar-color: var(--noe-line-strong) transparent;
}

.commercial-case .team-chat-owner p {
  background: var(--noe-surface-raised);
  color: var(--noe-text);
  border-radius: var(--noe-radius);
  box-shadow: inset 0 0 0 1px var(--noe-line-strong);
}

.commercial-case .team-chat-author {
  color: color-mix(in srgb, var(--agent-accent) 58%, var(--noe-text));
}

.commercial-case .team-chat-bubble {
  background: var(--noe-surface);
  border-radius: var(--noe-radius);
}

.commercial-case .team-chat-bubble p {
  color: var(--noe-muted);
}

.commercial-case .team-chat-bubble p b {
  color: var(--noe-text);
}

.commercial-case :is(.team-chat-work, .team-chat-file) {
  background: var(--noe-surface);
  color: var(--noe-text);
  border-color: var(--noe-line);
  border-radius: var(--noe-radius);
}

.commercial-case :is(.team-chat-work header, .team-chat-work p strong,
  .team-chat-file strong) {
  color: var(--noe-text);
}

.commercial-case :is(.team-chat-work header > span, .team-chat-work p,
  .team-chat-work p small, .team-chat-file small, .team-chat-routine,
  .team-chat-routine p, .team-chat-plan article p,
  .team-chat-plan-note, .team-chat-plan > article > span) {
  color: var(--noe-muted);
}

.commercial-case :is(.team-chat-work header > i, .team-chat-typing b,
  .team-chat-idle) {
  background: var(--noe-accent);
}

.commercial-case :is(.team-chat-work p i, .team-chat-file > span:first-child,
  .team-chat-file i, .team-chat-plan-label, .team-chat-plan article em) {
  color: var(--noe-accent);
}

.commercial-case .team-chat-file:hover {
  background: var(--noe-surface-raised);
  border-color: var(--noe-line-strong);
}

.commercial-case .team-chat-routine > span {
  background: var(--noe-surface-raised);
  color: var(--noe-accent);
}

.commercial-case .team-chat-plan h4,
.commercial-case .team-chat-plan article strong {
  color: var(--noe-text);
}

.commercial-case .team-chat-plan > article {
  border-color: var(--noe-line);
}

.commercial-case .team-chat-playbar {
  border-color: var(--noe-line-strong);
  border-radius: var(--noe-control-radius);
}

.commercial-case .team-chat-playbar button {
  background: var(--noe-accent);
  color: var(--noe-bg);
  border-radius: var(--noe-control-radius);
}

.commercial-case .team-chat-playbar button:hover {
  background: color-mix(in srgb, var(--noe-accent) 82%, var(--noe-text));
}

.commercial-case :is(.team-chat-controls nav button, .team-chat-replay,
  .team-chat-open-plan, .team-chat-back) {
  color: var(--noe-muted);
  border-radius: var(--noe-control-radius);
}

.commercial-case .team-chat-controls nav button[aria-current="step"],
.commercial-case :is(.team-chat-controls nav button, .team-chat-replay,
  .team-chat-open-plan, .team-chat-back):hover {
  color: var(--noe-accent);
}

.commercial-case .team-chat-controls nav button[aria-current="step"] i {
  background: var(--noe-accent);
}

.commercial-case .team-chat-latest {
  background: var(--noe-surface-raised);
  color: var(--noe-text);
  border-color: var(--noe-line-strong);
  border-radius: var(--noe-control-radius);
  box-shadow: none;
}

.commercial-case .team-chat-latest:hover {
  color: var(--noe-accent);
  border-color: var(--noe-accent);
  background: var(--noe-surface);
}

/* Keep each role's source hue readable on dark panels; robot paints and
   role-specific activity indicators retain their original colours. */
.commercial-case :is(.team-chat-work p > span:first-child, .team-chat-transfer strong):is(
  [style*="#276f5b"], [style*="39, 111, 91"]) {
  color: color-mix(in srgb, #276f5b 58%, var(--noe-text)) !important;
}

.commercial-case :is(.team-chat-work p > span:first-child, .team-chat-transfer strong):is(
  [style*="#806020"], [style*="128, 96, 32"]) {
  color: color-mix(in srgb, #806020 58%, var(--noe-text)) !important;
}

.commercial-case :is(.team-chat-work p > span:first-child, .team-chat-transfer strong):is(
  [style*="#925238"], [style*="146, 82, 56"]) {
  color: color-mix(in srgb, #925238 58%, var(--noe-text)) !important;
}

.commercial-case :is(.team-chat-work p > span:first-child, .team-chat-transfer strong):is(
  [style*="#735394"], [style*="115, 83, 148"]) {
  color: color-mix(in srgb, #735394 58%, var(--noe-text)) !important;
}

.commercial-case :is(.team-chat-work p > span:first-child, .team-chat-transfer strong):is(
  [style*="#356789"], [style*="53, 103, 137"]) {
  color: color-mix(in srgb, #356789 58%, var(--noe-text)) !important;
}

/* Table and message annotations inherit the same semantic palette. */
.commercial-case .team-chat-window :is(table, th, td) {
  color: var(--noe-muted);
  background-color: transparent;
  border-color: var(--noe-line);
}

.commercial-case .team-chat-window th {
  color: var(--noe-text);
}

.commercial-case .team-chat-window :is(.team-chat-badge, .team-chat-empty) {
  background: var(--noe-surface);
  color: var(--noe-muted);
  border-color: var(--noe-line);
  border-radius: var(--noe-control-radius);
}

/* The value model keeps its data colours while sharing the surrounding UI. */
.commercial-case .value-chart-theatre {
  background: var(--noe-surface);
  border-color: var(--noe-line);
  border-radius: var(--noe-radius);
}

.commercial-case :is(.value-theatre-head, .value-chart-summary small,
  .value-chart-context p, .value-chart-context span, .value-chart-foot,
  .value-chart-fallback) {
  color: var(--noe-muted);
}

.commercial-case .value-chart-summary strong {
  color: var(--noe-text);
}

.commercial-case :is(.value-theatre-head em, .value-chart-foot b,
  .output-path) {
  color: var(--noe-accent);
}

.commercial-case .value-chart-plot svg text {
  fill: var(--noe-text);
  font-family: var(--noe-font);
}

.commercial-case .value-chart-plot .chart-axis {
  fill: var(--noe-subtle);
}

.commercial-case .value-chart-plot .chart-callout {
  fill: var(--noe-accent);
}

.commercial-case .chart-grid { stroke:var(--noe-subtle); }
.commercial-case .chart-connector { stroke:var(--noe-muted); }
.commercial-case .chart-focus-line { stroke:var(--noe-accent); }
.commercial-case .chart-tick { stroke:var(--noe-subtle); }
.commercial-case .chart-track { fill:var(--noe-surface-raised); }

.commercial-case .value-rail,
.commercial-case .value-rail button {
  border-color: var(--noe-line);
}

.commercial-case .value-rail button {
  color: var(--noe-muted);
}

.commercial-case .value-rail button:hover,
.commercial-case .value-rail button.is-active {
  background: var(--noe-surface-raised);
  color: var(--noe-text);
}

.commercial-case .value-rail button.is-active {
  box-shadow: inset 0 2px var(--noe-accent);
}

/* Contact closes the case on the same canvas with a warm action. */
.commercial-case .case-contact {
  background: var(--noe-surface);
  color: var(--noe-text);
  box-shadow: inset 0 1px var(--noe-line), inset 0 -1px var(--noe-line);
}

.commercial-case .case-contact .section-kicker {
  color: var(--noe-accent);
}

.commercial-case .case-contact .shell > p:not(.section-kicker),
.commercial-case .contact-actions .text-link {
  color: var(--noe-muted);
}

.commercial-case .button-primary {
  background: var(--noe-accent);
  color: var(--noe-bg);
  border-radius: var(--noe-control-radius);
}

.commercial-case .button-primary:hover {
  background: color-mix(in srgb, var(--noe-accent) 82%, var(--noe-text));
}

.commercial-case .contact-actions .text-link:hover {
  color: var(--noe-accent);
}

.commercial-case .skip-link {
  background: var(--noe-accent);
  color: var(--noe-bg);
  border-radius: var(--noe-control-radius);
}

.commercial-case :is(button, a, summary, .team-chat-messages,
  .team-chat-plan, .team-robot-interactive):focus-visible {
  outline-color: var(--noe-accent);
}

@media (min-width: 981px) {
  .commercial-case .case-brand { width:139px; }
  .commercial-case .shell,
  .commercial-case .agent-team-section .shell {
    width: var(--noe-content-width);
    max-width: none;
  }
}