/* Стили интерактивной диаграммы — шаблон Core.

   Перенесены без изменений из sources/Core_Engineering_Ecosystem_D_Hybrid.html.
   Единственная правка: корневой селектор #ce-ecosystem-d заменён на класс .coc-core,
   потому что в портале диаграмма — одна из многих страниц.

   Файл сгенерирован tools/port-core-template.py. Править здесь нечего:
   изменения вносятся в эталон, затем перенос повторяется. */

.coc-core {
    --ce-ink: light-dark(#2B2B2B, #F6F4F1);
    --ce-muted: light-dark(#63625F, #B9B7B2);
    --ce-surface: light-dark(#F6F4F1, #21201F);
    --ce-panel: light-dark(#FDFCFB, #2B2A28);
    --ce-panel-2: light-dark(#F0EEEA, #333230);
    --ce-line: light-dark(#DEDAD4, #45433F);

    --ce-purple: light-dark(#6B11F2, #B394FF);
    --ce-blue:   light-dark(#3F6ADF, #9DB8FF);
    --ce-lime:   light-dark(#5F8A00, #C2F942);
    --ce-teal:   light-dark(#00808F, #4DD0E1);
    --ce-pink:   light-dark(#D6337B, #FF9EC7);
    --ce-amber:  light-dark(#A66A00, #F0C060);

    --ce-cap-architecture:  light-dark(#6B11F2, #B394FF);
    --ce-cap-modernization: light-dark(#3F6ADF, #9DB8FF);
    --ce-cap-platform:      light-dark(#5F8A00, #C2F942);
    --ce-cap-foundations:   light-dark(#00808F, #4DD0E1);
    --ce-cap-appliedai:     light-dark(#D6337B, #FF9EC7);
    --ce-cap-enablement:    light-dark(#A66A00, #F0C060);

    --ce-tier-delivered: light-dark(#73A301, #C2F942);
    --ce-tier-benchmark: light-dark(#3F6ADF, #9DB8FF);
    --ce-tier-validate:  light-dark(#8A8781, #9C9995);

    color: var(--ce-ink);
    font-family: "DM Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    isolation: isolate;
    overflow: hidden;
    position: relative;
  }

  .coc-core::before,
  .coc-core::after {
    content: ""; inset: auto; pointer-events: none; position: absolute; z-index: -1;
  }
  .coc-core::before {
    background: radial-gradient(circle, color-mix(in srgb, var(--ce-lime) 18%, transparent), transparent 70%);
    height: 28rem; left: -12rem; top: -12rem; width: 28rem;
  }
  .coc-core::after {
    background: radial-gradient(circle, color-mix(in srgb, var(--ce-pink) 12%, transparent), transparent 70%);
    height: 26rem; right: -13rem; top: -10rem; width: 26rem;
  }

  .coc-core, .coc-core * { box-sizing: border-box; }
  .coc-core button { color: inherit; font: inherit; }

  .coc-core .ce-frame { margin: 0 auto; max-width: 1180px; padding: 28px; }
  .coc-core .ce-header { max-width: 780px; }

  .coc-core .ce-eyebrow,
  .coc-core .ce-section-label,
  .coc-core .ce-node-kicker,
  .coc-core .ce-detail-title,
  .coc-core .ce-outcome-label,
  .coc-core .ce-band-title {
    font-size: 0.72rem; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase;
  }
  .coc-core .ce-eyebrow { color: var(--ce-lime); margin: 0 0 8px; }

  .coc-core h1 {
    font-size: clamp(2rem, 5vw, 3.8rem);
    font-weight: 500; letter-spacing: -0.045em; line-height: 0.99; margin: 0;
  }
  .coc-core .ce-subtitle {
    color: var(--ce-muted); font-size: clamp(0.96rem, 2vw, 1.12rem);
    line-height: 1.55; margin: 14px 0 0; max-width: 740px;
  }

  .coc-core .ce-section { margin-top: 28px; }
  .coc-core .ce-section-label {
    align-items: center; color: var(--ce-muted); display: flex; gap: 10px; margin: 0 0 12px;
  }
  .coc-core .ce-section-label::after {
    background: var(--ce-line); content: ""; height: 1px; min-width: 32px; flex: 1;
  }

  /* ---------- drivers ---------- */
  .coc-core .ce-driver-grid {
    display: grid; gap: 9px; grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .coc-core .ce-driver {
    align-items: flex-start;
    background: color-mix(in srgb, var(--ce-panel) 88%, transparent);
    border: 1px solid var(--ce-line); border-radius: 11px; cursor: pointer;
    display: flex; flex-direction: column; gap: 6px; justify-content: space-between;
    min-height: 116px; padding: 11px; text-align: left;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
  }
  .coc-core .ce-driver:hover { transform: translateY(-2px); }
  .coc-core .ce-driver[aria-pressed="true"] {
    border-color: var(--driver-color);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--driver-color) 24%, transparent);
  }
  .coc-core .ce-driver[aria-pressed="true"] .ce-driver-state::before { content: "\2713 Selected"; }
  .coc-core .ce-driver-mark { background: var(--driver-color); border-radius: 999px; height: 5px; width: 28px; }
  .coc-core .ce-driver-name { font-size: 0.82rem; font-weight: 600; line-height: 1.25; }
  .coc-core .ce-driver-quote { color: var(--ce-muted); font-size: 0.72rem; line-height: 1.35; }
  .coc-core .ce-driver-state { color: var(--driver-color); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }

  /* ---------- architecture + flow ---------- */
  .coc-core .ce-architecture {
    align-items: stretch; display: grid; gap: 0; position: relative;
    grid-template-columns: minmax(0, 1.08fr) 56px minmax(0, 0.94fr) 56px minmax(0, 1.02fr);
  }
  .coc-core .ce-flow {
    height: 100%; left: 0; overflow: visible; pointer-events: none;
    position: absolute; top: 0; width: 100%; z-index: 3;
  }
  .coc-core .ce-column {
    background: color-mix(in srgb, var(--ce-panel) 70%, transparent);
    border: 1px solid var(--ce-line); border-radius: 14px; padding: 14px; position: relative; z-index: 1;
  }
  .coc-core .ce-column-title {
    color: var(--ce-muted); font-size: 0.7rem; font-weight: 500;
    letter-spacing: 0.09em; margin: 0 0 10px; text-transform: uppercase;
  }
  .coc-core .ce-gutter {
    align-items: center; color: var(--ce-muted); display: flex; font-size: 0.55rem;
    justify-content: center; letter-spacing: 0.07em; padding-top: 16px;
    text-transform: uppercase; align-items: flex-start;
  }

  .coc-core .ce-door-list, .coc-core .ce-path-list { display: grid; gap: 8px; }
  .coc-core .ce-door {
    background: var(--ce-panel); border: 1px solid var(--ce-line); border-radius: 11px;
    cursor: pointer; display: grid; gap: 5px; padding: 10px 11px; text-align: left; width: 100%;
    transition: border-color 160ms ease, box-shadow 160ms ease;
  }
  .coc-core .ce-door:hover { border-color: color-mix(in srgb, var(--door-color) 55%, var(--ce-line)); }
  .coc-core .ce-door[aria-pressed="true"] {
    border-color: var(--door-color);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--door-color) 20%, transparent);
  }
  .coc-core .ce-door-head { align-items: center; display: flex; gap: 8px; justify-content: space-between; }
  .coc-core .ce-node-kicker { color: var(--door-color); }
  .coc-core .ce-door-status { color: var(--door-color); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
  .coc-core .ce-door-title { font-size: 0.9rem; font-weight: 600; line-height: 1.25; }
  .coc-core .ce-door-copy { color: var(--ce-muted); font-size: 0.74rem; font-style: italic; line-height: 1.4; }

  /* P&L footprint on each door */
  .coc-core .ce-footprint {
    display: grid; gap: 2px; grid-template-columns: repeat(2, 9px); grid-template-rows: repeat(2, 9px);
  }
  .coc-core .ce-fp-cell { background: var(--door-color); border-radius: 2px; }
  .coc-core .ce-fp-cell[data-s="3"] { opacity: 1; }
  .coc-core .ce-fp-cell[data-s="2"] { opacity: 0.5; }
  .coc-core .ce-fp-cell[data-s="1"] { opacity: 0.18; }
  .coc-core .ce-fp-legend {
    color: var(--ce-muted); display: flex; flex-wrap: wrap; font-size: 0.66rem; gap: 8px;
    line-height: 1.4; margin-top: 9px;
  }

  .coc-core .ce-path {
    border: 1px solid var(--ce-line); border-left: 3px solid var(--ce-line);
    border-radius: 10px; display: grid; gap: 4px; padding: 9px 11px;
    transition: border-color 200ms ease, background 200ms ease, opacity 200ms ease;
  }
  .coc-core .ce-path[data-state="primary"] {
    background: color-mix(in srgb, var(--active-route-color) 10%, transparent);
    border-color: color-mix(in srgb, var(--active-route-color) 40%, var(--ce-line));
    border-left-color: var(--active-route-color);
  }
  .coc-core .ce-path[data-state="supporting"] {
    border-left-color: color-mix(in srgb, var(--active-route-color) 45%, var(--ce-line));
  }
  .coc-core .ce-path[data-state="inactive"] { opacity: 0.38; }
  .coc-core .ce-path-state {
    color: var(--active-route-color); font-size: 0.58rem; font-weight: 600;
    letter-spacing: 0.08em; min-height: 0.7rem; text-transform: uppercase;
  }
  .coc-core .ce-path-title { font-size: 0.84rem; font-weight: 600; }
  .coc-core .ce-path-copy { color: var(--ce-muted); font-size: 0.72rem; line-height: 1.4; }

  .coc-core .ce-cap-grid { display: grid; gap: 8px; }
  .coc-core .ce-capability {
    background: var(--ce-panel); border: 1px solid var(--ce-line); border-left: 3px solid var(--cap-color);
    border-radius: 10px; cursor: pointer; display: grid; gap: 4px; padding: 9px 11px; text-align: left;
    transition: border-color 200ms ease, opacity 200ms ease, box-shadow 200ms ease;
  }
  .coc-core .ce-capability[data-active="true"] {
    background: color-mix(in srgb, var(--cap-color) 8%, var(--ce-panel));
    border-color: color-mix(in srgb, var(--cap-color) 40%, var(--ce-line));
    border-left-color: var(--cap-color);
  }
  .coc-core .ce-capability[data-active="false"] { opacity: 0.4; }
  .coc-core .ce-capability[data-focus="true"] {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--cap-color) 45%, transparent); opacity: 1;
  }
  .coc-core .ce-capability[data-dim="true"] { opacity: 0.22; }
  .coc-core .ce-cap-status {
    color: var(--cap-color); font-size: 0.58rem; font-weight: 600;
    letter-spacing: 0.08em; min-height: 0.7rem; text-transform: uppercase;
  }
  .coc-core .ce-cap-title { font-size: 0.82rem; font-weight: 600; }
  .coc-core .ce-cap-copy { color: var(--ce-muted); font-size: 0.71rem; line-height: 1.4; }
  .coc-core .ce-cap-meter { align-items: center; display: flex; gap: 7px; margin-top: 3px; }
  .coc-core .ce-meter-bar { display: flex; gap: 2px; }
  .coc-core .ce-meter-seg {
    background: var(--cap-color); border-radius: 1px; height: 4px; width: 11px;
  }
  .coc-core .ce-meter-seg[data-ready="false"] { opacity: 0.25; }
  .coc-core .ce-meter-text { color: var(--ce-muted); font-size: 0.64rem; letter-spacing: 0.02em; }

  /* ---------- detail panel ---------- */
  .coc-core .ce-detail-panel {
    background: color-mix(in srgb, var(--ce-panel) 80%, transparent);
    border: 1px solid var(--ce-line); border-radius: 16px; margin-top: 14px; padding: 16px 18px;
  }
  .coc-core .ce-route-summary {
    border-left: 3px solid var(--summary-color); color: var(--ce-ink);
    font-size: 0.88rem; line-height: 1.5; margin: 0 0 14px; padding-left: 12px;
  }
  .coc-core .ce-detail-toolbar {
    align-items: center; display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; margin-bottom: 12px;
  }
  .coc-core .ce-detail-heading { font-size: 1rem; font-weight: 600; }
  .coc-core .ce-toggle-set { display: flex; gap: 6px; flex-wrap: wrap; }
  .coc-core .ce-toggle {
    background: transparent; border: 1px solid var(--ce-line); border-radius: 999px;
    cursor: pointer; font-size: 0.72rem; padding: 5px 12px; transition: all 160ms ease; white-space: nowrap;
  }
  .coc-core .ce-toggle[aria-pressed="true"] {
    background: color-mix(in srgb, var(--detail-color) 14%, transparent);
    border-color: var(--detail-color); font-weight: 600;
  }
  .coc-core .ce-detail-grid { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .coc-core .ce-detail-grid[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coc-core .ce-detail-title { color: var(--detail-color); margin-bottom: 7px; }
  .coc-core .ce-detail-list { color: var(--ce-muted); font-size: 0.78rem; line-height: 1.5; margin: 0; padding-left: 16px; }
  .coc-core .ce-detail-list li { margin-bottom: 5px; }

  /* ---------- offering band ---------- */
  .coc-core .ce-band {
    background: color-mix(in srgb, var(--ce-panel-2) 55%, transparent);
    border: 1px solid var(--ce-line); border-radius: 13px; margin-bottom: 14px; padding: 13px 14px;
  }
  .coc-core .ce-band-title { color: var(--detail-color); margin-bottom: 4px; }
  .coc-core .ce-band-hint { color: var(--ce-muted); font-size: 0.72rem; line-height: 1.45; margin-bottom: 10px; }
  .coc-core .ce-trace-note {
    background: color-mix(in srgb, var(--ce-panel) 90%, transparent);
    border: 1px dashed var(--ce-line); border-radius: 9px; color: var(--ce-muted);
    font-size: 0.74rem; line-height: 1.45; margin-bottom: 9px; padding: 9px 11px;
  }
  .coc-core .ce-offer-grid { display: grid; gap: 7px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .coc-core .ce-offering {
    background: var(--ce-panel); border: 1px solid var(--ce-line);
    border-left: 3px solid var(--cap-color); border-radius: 9px; cursor: default;
    display: grid; gap: 4px; padding: 9px 10px; text-align: left;
    transition: opacity 180ms ease, box-shadow 180ms ease, transform 180ms ease;
  }
  .coc-core .ce-offering:hover { transform: translateY(-1px); }
  .coc-core .ce-offering[data-dim="true"] { opacity: 0.2; }
  .coc-core .ce-offering[data-focus="true"] { box-shadow: 0 0 0 2px color-mix(in srgb, var(--cap-color) 40%, transparent); }
  .coc-core .ce-offer-name { font-size: 0.79rem; font-weight: 600; line-height: 1.3; }
  .coc-core .ce-offer-foot { align-items: center; display: flex; gap: 7px; justify-content: space-between; }
  .coc-core .ce-offer-cap {
    align-items: center; color: var(--cap-color); display: flex; font-size: 0.63rem;
    font-weight: 600; gap: 4px; letter-spacing: 0.05em; text-transform: uppercase;
  }
  .coc-core .ce-offer-cap::before {
    background: var(--cap-color); border-radius: 999px; content: ""; height: 6px; width: 6px;
  }
  .coc-core .ce-offer-status {
    border: 1px solid var(--ce-line); border-radius: 999px; color: var(--ce-muted);
    font-size: 0.6rem; letter-spacing: 0.05em; padding: 1px 7px; text-transform: uppercase; white-space: nowrap;
  }
  .coc-core .ce-offer-status[data-status="ready"] {
    background: color-mix(in srgb, var(--ce-tier-delivered) 14%, transparent);
    border-color: color-mix(in srgb, var(--ce-tier-delivered) 40%, var(--ce-line));
    color: var(--ce-tier-delivered);
  }

  .coc-core .ce-subpath-wrap { margin-bottom: 12px; }
  .coc-core .ce-subpath-label { color: var(--ce-muted); font-size: 0.68rem; letter-spacing: 0.08em; margin-bottom: 6px; text-transform: uppercase; }
  .coc-core .ce-subpath-set { display: flex; flex-wrap: wrap; gap: 6px; }

  /* ---------- outcome ---------- */
  .coc-core .ce-breadcrumb {
    align-items: center; color: var(--ce-muted); display: flex; flex-wrap: wrap; font-size: 0.74rem; gap: 6px;
  }
  .coc-core .ce-breadcrumb b { color: var(--active-route-color); font-weight: 600; }
  .coc-core .ce-evidence-bar { align-items: center; display: flex; flex-wrap: wrap; gap: 9px; margin: 4px 0 12px; }
  .coc-core .ce-ev-track { border-radius: 999px; display: flex; gap: 2px; overflow: hidden; }
  .coc-core .ce-ev-seg { border-radius: 2px; height: 7px; }
  .coc-core .ce-ev-seg[data-tier="delivered"] { background: var(--ce-tier-delivered); }
  .coc-core .ce-ev-seg[data-tier="benchmark"] { background: var(--ce-tier-benchmark); }
  .coc-core .ce-ev-seg[data-tier="validate"]  { background: var(--ce-tier-validate); }
  .coc-core .ce-ev-text { color: var(--ce-muted); font-size: 0.72rem; }

  .coc-core .ce-outcome-chain { display: grid; gap: 9px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .coc-core .ce-outcome-chain[data-mode="pnl"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .coc-core .ce-outcome-step {
    background: var(--ce-panel); border: 1px solid var(--ce-line);
    border-top: 3px solid var(--active-route-color); border-radius: 11px; display: grid; gap: 6px; padding: 11px;
  }
  .coc-core .ce-outcome-label { color: var(--ce-muted); }
  .coc-core .ce-outcome-value { font-size: 0.78rem; line-height: 1.45; }
  .coc-core .ce-strength { align-items: center; display: flex; gap: 6px; }
  .coc-core .ce-strength-dots { display: flex; gap: 3px; }
  .coc-core .ce-strength-dot { background: var(--active-route-color); border-radius: 999px; height: 6px; width: 16px; }
  .coc-core .ce-strength-dot[data-on="false"] { opacity: 0.16; }
  .coc-core .ce-strength-text { color: var(--ce-muted); font-size: 0.66rem; letter-spacing: 0.04em; text-transform: uppercase; }
  .coc-core .ce-metric-list { display: grid; gap: 6px; }
  .coc-core .ce-metric {
    display: grid; font-size: 0.75rem; gap: 6px; grid-template-columns: 14px 1fr; line-height: 1.42;
  }
  .coc-core .ce-tier { font-size: 0.8rem; line-height: 1.2; }
  .coc-core .ce-tier[data-tier="delivered"] { color: var(--ce-tier-delivered); }
  .coc-core .ce-tier[data-tier="benchmark"] { color: var(--ce-tier-benchmark); }
  .coc-core .ce-tier[data-tier="validate"]  { color: var(--ce-tier-validate); }

  .coc-core .ce-evidence-note {
    background: color-mix(in srgb, var(--ce-panel-2) 70%, transparent);
    border: 1px solid var(--ce-line); border-radius: 11px; color: var(--ce-muted);
    font-size: 0.75rem; line-height: 1.5; margin-top: 10px; padding: 11px 13px;
  }
  .coc-core .ce-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
  .coc-core .ce-legend span { align-items: center; display: flex; font-size: 0.72rem; gap: 5px; }

  /* ---------- journey ---------- */
  .coc-core .ce-journey-line { display: grid; gap: 9px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .coc-core .ce-journey-stage {
    background: var(--ce-panel); border: 1px solid var(--ce-line); border-radius: 11px; padding: 11px;
  }
  .coc-core .ce-journey-stage b { display: block; font-size: 0.85rem; margin-bottom: 4px; }
  .coc-core .ce-journey-stage span { color: var(--ce-muted); font-size: 0.74rem; line-height: 1.45; }
  .coc-core .ce-journey-note { color: var(--ce-muted); font-size: 0.76rem; line-height: 1.5; margin-top: 10px; }
  .coc-core .ce-next-paths { display: grid; gap: 8px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 12px; }
  .coc-core .ce-next-path {
    background: color-mix(in srgb, var(--ce-lime) 9%, var(--ce-panel));
    border: 1px solid color-mix(in srgb, var(--ce-lime) 30%, var(--ce-line));
    border-radius: 10px; font-size: 0.78rem; font-weight: 500; padding: 10px 11px; text-align: center;
  }
  .coc-core .ce-next-label { color: var(--ce-muted); font-size: 0.72rem; margin-top: 10px; text-align: center; }

  .coc-core .ce-footer {
    border-top: 1px solid var(--ce-line); color: var(--ce-muted); font-size: 0.76rem;
    margin-top: 28px; padding-top: 14px; text-align: center;
  }

  @media (max-width: 1000px) {
    .coc-core .ce-architecture { grid-template-columns: 1fr; gap: 10px; }
    .coc-core .ce-gutter { display: none; }
    .coc-core .ce-flow { display: none; }
    .coc-core .ce-driver-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .coc-core .ce-detail-grid,
    .coc-core .ce-detail-grid[data-cols="2"] { grid-template-columns: 1fr; }
    .coc-core .ce-offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .coc-core .ce-outcome-chain,
    .coc-core .ce-outcome-chain[data-mode="pnl"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .coc-core .ce-journey-line, .coc-core .ce-next-paths { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 620px) {
    .coc-core .ce-driver-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .coc-core .ce-offer-grid { grid-template-columns: 1fr; }
    .coc-core .ce-outcome-chain,
    .coc-core .ce-outcome-chain[data-mode="pnl"],
    .coc-core .ce-journey-line, .coc-core .ce-next-paths { grid-template-columns: 1fr; }
  }
  @media (prefers-reduced-motion: reduce) {
    .coc-core * { transition: none !important; }
  }