/* Analysis window (smartobjects): shared by every method editor, so global. Dense data tables keep native
   inputs (a DevExpress editor per matrix cell would weigh hundreds of components); everything else uses
   DevExpress editors through the house fields. */

.analysis-popup .dxbl-modal-body {
  padding: 10px 16px 14px !important;
}

.analysis-help {
  margin: 0 0 10px;
  padding: 8px 12px;
  border: 1px solid var(--house-band);
  border-left: 3px solid var(--house-accent);
  border-radius: 4px;
  background: var(--house-pale);
  color: var(--house-text);
  line-height: 1.45;
}

.analysis-tabs .dxbl-tabs-content-panel {
  padding-top: 10px;
}

.an-caption {
  margin: 10px 0 4px;
  font-weight: 500;
  color: var(--house-muted);
  text-transform: uppercase;
  font-size: 11px;
}

.an-section {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--house-muted);
  text-transform: uppercase;
}

.an-note {
  margin: 8px 0;
  color: var(--house-muted);
}

.an-muted {
  color: var(--house-muted);
}

.an-chart {
  margin: 6px 0 4px;
  overflow-x: auto;
}

.an-scroll {
  overflow: auto;
  max-width: 100%;
}

.an-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.an-toolbar--wrap {
  flex-wrap: wrap;
}

.an-spacer {
  flex: 1;
}

.an-add-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}

.an-level {
  width: 240px;
}

.an-survey {
  width: 220px;
}

.an-shape-text {
  width: 260px;
}

.an-check {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--house-muted);
}

/* ---- Tables and matrices ---- */
.an-table,
.an-matrix {
  border-collapse: collapse;
  margin-bottom: 8px;
}

.an-table th,
.an-table td,
.an-matrix th,
.an-matrix td {
  padding: 4px 8px;
  border: 1px solid var(--house-pale);
  text-align: left;
  color: var(--house-body-text);
}

.an-table th,
.an-matrix thead th {
  background: var(--house-band);
  color: var(--house-text);
  font-weight: 500;
}

.an-matrix th,
.an-matrix td {
  text-align: center;
}

.an-matrix th:first-child,
.an-matrix td:first-child {
  text-align: left;
  background: var(--house-surface-alt);
}

.an-matrix__diagonal {
  background: var(--house-surface-alt);
  color: var(--house-muted);
}

.an-number {
  text-align: right !important;
  font-variant-numeric: tabular-nums;
}

.an-top td {
  background: #e7f6e7;
}

.an-critical td {
  background: #fbe3e1;
}

@media screen {
  .yap-dark .an-top td {
    background: #1f3a26;
  }
}

@media screen {
  .yap-dark .an-critical td {
    background: #3e2224;
  }
}

.an-cell {
  width: 52px;
  padding: 2px 4px;
  border: 1px solid var(--house-field-border);
  border-radius: 3px;
  background: var(--house-surface);
  color: var(--house-text-strong);
  text-align: center;
}

.an-cell--wide {
  width: 96px;
}

.an-cell--text {
  width: 220px;
  text-align: left;
}

.an-cell:focus,
.an-select:focus {
  outline: 2px solid var(--house-accent);
  outline-offset: -1px;
}

.an-select {
  padding: 2px 4px;
  border: 1px solid var(--house-field-border);
  border-radius: 3px;
  background: var(--house-surface);
  color: var(--house-text-strong);
}

.an-remove {
  border: 0;
  background: transparent;
  color: var(--house-danger);
  cursor: pointer;
  padding: 0 4px;
}

/* ---- Canonical layouts (SWOT 2×2, PESTEL 2×3, BMC nine blocks, ERRC) ---- */
.an-layout {
  display: grid;
  gap: 6px;
  margin: 8px 0 4px;
}

.an-layout__cell {
  min-height: 54px;
  padding: 6px 8px;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 4px;
  color: #2f2f2f;
}

.an-layout__head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
  font-weight: 600;
  font-size: 11px;
}

.an-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 2px 3px 0 0;
  padding: 1px 8px;
  border: 1px solid rgba(0, 0, 0, .14);
  border-radius: 10px;
  background: rgba(255, 255, 255, .78);
  color: #2f2f2f;
  font-size: 11px;
}

.an-amount {
  margin-left: auto;
}

.an-negative {
  color: var(--house-danger);
}

.an-positive {
  color: var(--house-success);
}

.an-summary {
  margin-top: 12px;
  padding: 8px 10px;
  border: 1px solid var(--house-pale);
  border-radius: 4px;
  background: var(--house-surface-alt);
}

/* ---- Porter's cross ---- */
.an-forces {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.an-force {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid var(--house-band);
  border-radius: 6px;
  background: var(--house-pale);
}

.an-force__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-weight: 600;
  color: var(--house-text);
}

.an-force__badge {
  min-width: 20px;
  padding: 0 6px;
  border-radius: 9px;
  color: #fff;
  font-size: 11px;
  text-align: center;
}

.an-force__intensity {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--house-muted);
}

.an-force__intensity input[type=range] {
  flex: 1;
  accent-color: var(--house-accent);
}

/* ---- Blue Ocean products ---- */
.an-products {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 10px;
}

.an-product {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border: 1.6px solid;
  border-radius: 14px;
  background: var(--house-surface);
}

.an-product input[type=color] {
  width: 20px;
  height: 18px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

/* ---- Value proposition canvas ---- */
.an-vpc {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: stretch;
}

.an-vpc__side {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 2px solid var(--house-blue);
  background: var(--house-surface-alt);
}

.an-vpc__side--square {
  border-radius: 6px;
}

.an-vpc__side--circle {
  border-radius: 44px;
}

.an-vpc__middle {
  align-self: center;
  font-size: 20px;
  color: var(--house-muted);
}

.an-vpc__title {
  text-align: center;
  font-weight: 600;
  color: var(--house-text);
}

.an-vpc__zone {
  min-height: 44px;
  padding: 6px;
  border: 1px dashed var(--house-band);
  border-radius: 6px;
}

.an-vpc__zone-title {
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--house-muted);
}

/* ---- Comments and votes ---- */
.an-comments {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.an-comment {
  padding: 6px 10px;
  border: 1px solid var(--house-pale);
  border-left: 3px solid var(--house-accent);
  border-radius: 6px;
  background: var(--house-surface-alt);
}

.an-comment__head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 11px;
  color: var(--house-muted);
}

.an-comment__text {
  margin-top: 3px;
  white-space: pre-wrap;
  color: var(--house-body-text);
}

.an-comment-new {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.an-comment-new__text {
  width: min(560px, 100%);
}

.an-vote {
  width: 30px;
  height: 24px;
  margin-right: 4px;
  border: 1px solid var(--house-field-border);
  border-radius: 4px;
  background: var(--house-surface);
  color: var(--house-muted);
  cursor: pointer;
}

.an-vote--yes {
  border-color: var(--house-success);
  background: var(--house-success);
  color: #fff;
}

.an-vote--no {
  border-color: var(--house-danger);
  background: var(--house-danger);
  color: #fff;
}

/* ---- Flow chart editor ---- */
.an-flow-editor {
  touch-action: none;
  background: repeating-conic-gradient(#00000006 0% 25%, transparent 0% 50%) 0 0 / 24px 24px;
}

@media screen {
  .yap-dark .an-flow-editor {
    background: repeating-conic-gradient(#ffffff08 0% 25%, transparent 0% 50%) 0 0 / 24px 24px;
  }
}

.an-flow-editor__shape {
  cursor: grab;
}

.an-flow-editor__hit {
  pointer-events: stroke;
  cursor: pointer;
}

.an-flow-editor__grip {
  fill: #e8a33d;
  stroke: #fff;
  stroke-width: 1.5;
  cursor: nwse-resize;
}

.an-flow-editor__shape--selected rect,
.an-flow-editor__shape--selected ellipse {
  stroke: #e8a33d;
  stroke-width: 2.5;
}

/* ---- 63699 chart ---- */
.chart-editor__chart {
  margin: 4px 0;
}

.chart-editor__tooltip {
  padding: 2px 4px;
  white-space: nowrap;
}

.chart-editor__source {
  font-family: Consolas, "Cascadia Mono", monospace;
  font-size: 11px;
  word-break: break-all;
}

.chart-editor__options {
  max-width: 520px;
}

.chart-editor__table {
  overflow: auto;
  max-height: 34vh;
}

.chart-editor__table .an-cell {
  width: 88px;
  text-align: right;
}

.chart-editor__adders {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}

.chart-editor__paste {
  max-width: 640px;
  margin-bottom: 8px;
  font-family: Consolas, "Cascadia Mono", monospace;
}

/* ---- 63042 data cube ---- */
.cube-editor__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.cube-editor__source {
  margin-right: auto;
  color: var(--house-muted);
}

.cube-editor__pivot {
  height: min(56vh, 540px);
}

.cube-editor__description {
  margin: 0;
  white-space: pre-wrap;
  color: var(--house-body-text);
}

.an-note--muted {
  font-size: 12px;
  opacity: .9;
}

/* PESTEL chips: sign (+ opportunity / − threat) colours the border, glyphs follow the name */
.an-chip--positive {
  border-left: 3px solid #1a9a58;
}

.an-chip--negative {
  border-left: 3px solid var(--house-danger);
}

.an-chip__glyphs {
  margin-left: 4px;
  font-weight: 700;
}

/* ACH: one rating selector per cell, coloured like the desktop grid */
.an-ach-cell {
  min-width: 132px;
  color: #1f2d3d;
}

.an-check {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

/* Trend: per-year probability · impact list of an event */
.an-trend-years {
  font-size: 11px;
  line-height: 1.4;
  color: var(--house-muted);
  max-width: 420px;
}

/* Cells that break a rule (incoherent conditional probability, …): red tint + tooltip with the allowed range */
.an-cell--invalid {
  background: #fde2e1 !important;
  border-color: var(--house-danger) !important;
}

@media screen {
  .yap-dark .an-cell--invalid {
    background: #5c2b2a !important;
  }
}

.chart-svg.an-flow-editor {
  max-width: none;
  min-width: 0;
}

/* ---- Resized window ----
   Once the user resizes it, the popup has a fixed size (analysis-popup--sized) and its content follows the window: the
   body becomes a flex column, the tab panel (or the diagram box) takes the rest and is a size container, and the charts,
   the chessboard and the canonical layouts measure themselves against it with container query units (cqw/cqh). Data
   tables keep their natural size; they just get more room before scrolling. */
.analysis-popup--sized .dxbl-modal-body {
  display: flex;
  flex-direction: column;
}

.analysis-popup--sized .analysis-help {
  flex: none;
}

.analysis-popup--sized .analysis-tabs {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-height: 0;
}

.analysis-popup--sized .analysis-tabs > .dxbl-tabs-content-panel,
.analysis-popup--sized .analysis-diagram {
  flex: 1 1 0;
  min-height: 0;
  overflow: auto;
  container-type: size;
}

/* Charts: as wide as the panel, but never taller than it (width = min(100 %, height × aspect ratio), --ar per SVG). */
.analysis-popup--sized .an-chart {
  text-align: center;
}

.analysis-popup--sized .an-chart .chart-svg:not(.an-flow-editor) {
  max-width: none;
  min-width: 0;
  width: min(100%, calc((100cqh - 40px) * var(--ar, 1.5)));
  height: auto;
}

.analysis-popup--sized .analysis-diagram .an-chart .chart-svg:not(.an-flow-editor) {
  width: min(100%, calc((100cqh - 64px) * var(--ar, 1.5)));
}

.analysis-popup--sized .analysis-diagram .an-chart {
  text-align: left;
}

/* Canonical layouts: the rows stretch to fill the panel (SWOT keeps half of it for the grid, the chart follows). */
.analysis-popup--sized .an-layout--fill {
  grid-template-rows: repeat(var(--rows, 1), minmax(54px, 1fr)) !important;
  min-height: calc(100cqh - 24px);
}

.analysis-popup--sized .an-layout--with-note {
  min-height: calc(100cqh - 72px);
}

.analysis-popup--sized .an-layout--bmc {
  min-height: calc(100cqh - 124px);
}

.analysis-popup--sized .an-layout--half {
  grid-template-rows: repeat(var(--rows, 1), minmax(54px, 1fr)) !important;
  min-height: 50cqh;
}

.analysis-popup--sized .an-vpc {
  min-height: calc(100cqh - 64px);
}

.analysis-popup--sized .an-vpc__zone {
  flex: 1 1 auto;
}

/* Pivot table of the data cube: the panel's height. */
.analysis-popup--sized .cube-editor__pivot {
  height: calc(100cqh - 56px);
}

/* ---- Charts fit the window ----
   Before the user resizes it, the window is at most 92vh tall and its header, help text, tabs and footer take about
   290px: a chart is as wide as the panel but never taller than what is left (width = min(100 %, room × aspect ratio,
   --ar per SVG)), so it is seen whole without scrolling. Once resized, the container-query rules above take over. */
.analysis-popup:not(.analysis-popup--sized) .an-chart {
  text-align: center;
}

.analysis-popup:not(.analysis-popup--sized) .an-chart .chart-svg:not(.an-flow-editor) {
  max-width: none;
  min-width: 0;
  width: min(100%, calc((92vh - 290px) * var(--ar, 1.5)));
  height: auto;
}

/* ---- SWOT matrix (the desktop form): four quadrant boxes with a coloured caption — strengths and weaknesses on top,
   opportunities and threats with the caption below, as USwot.dfm — each a grid of factor · weight · value slider · result
   and the totals row. ---- */
.swot-matrix {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 6px;
}

.swot-box {
  display: flex;
  flex-direction: column;
  min-height: 220px;
  border: 1px solid #5f6670;
  background: var(--house-surface, #fff);
}

.swot-box__caption {
  order: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  background: var(--swot-color);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

.swot-box--caption-below .swot-box__caption {
  order: 3;
}

.swot-box__grid {
  order: 1;
  flex: 1 1 auto;
  min-height: 90px;
  overflow: auto;
}

.swot-box__totals {
  order: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  background: #a7bccb;
}

.swot-box__totals .add-box,
.swot-box__totals > :first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.swot-box__total {
  min-width: 64px;
  padding: 2px 8px;
  border: 1px solid #8ea4b5;
  background: #e9eef2;
  color: #1f2d3d;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.swot-box__total--result {
  min-width: 72px;
}

.swot-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.swot-grid td {
  padding: 3px 6px;
  border-bottom: 1px solid #e3e6ea;
  vertical-align: middle;
}

.swot-grid tr:nth-child(even) td {
  background: #e6f6fd;
}

.swot-grid__text {
  font-weight: 700;
  color: #1f2d3d;
}

.swot-grid__weight {
  width: 64px;
  text-align: right;
}

.swot-grid__value {
  width: 110px;
}

.swot-grid__value input[type=range] {
  width: 100%;
  accent-color: #0b6fd0;
}

.swot-grid__result {
  width: 54px;
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.swot-grid__remove {
  width: 22px;
}

@media screen {
  .yap-dark .swot-box {
    background: var(--house-surface, #1f232a);
  }
}

@media screen {
  .yap-dark .swot-grid__text,
  .yap-dark .swot-box__total {
    color: #e8edf2;
  }
}

@media screen {
  .yap-dark .swot-grid tr:nth-child(even) td {
    background: #23313d;
  }
}

@media screen {
  .yap-dark .swot-box__totals {
    background: #33414d;
  }
}

@media screen {
  .yap-dark .swot-box__total {
    background: #26303a;
    border-color: #46525e;
  }
}

/* Resized window: the four boxes share the panel's height. */
.analysis-popup--sized .swot-matrix {
  grid-template-rows: 1fr 1fr;
  height: calc(100cqh - 24px);
  min-height: 420px;
}

.analysis-popup--sized .swot-box {
  min-height: 0;
}

/* SWOT matrix (read-only): the value as a slider-like meter, as the desktop's trackbar reads. */
.swot-box__spacer {
  flex: 1 1 auto;
}

.swot-meter {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 96px;
  height: 6px;
  border-radius: 3px;
  background: #d5dbe1;
  vertical-align: middle;
}

.swot-meter > span {
  position: absolute;
  top: 50%;
  left: var(--swot-meter, 0%);
  width: 10px;
  height: 14px;
  margin: -7px 0 0 -5px;
  border-radius: 2px;
  background: #0b6fd0;
}

/* SWOT data: one block per quadrant with a coloured left edge, the weight check and the rows. */
.swot-data {
  margin: 0 0 12px;
  padding: 6px 10px 8px;
  border: 1px solid var(--house-band, #d8dde3);
  border-left: 5px solid var(--swot-color, #9aa5b1);
  border-radius: 4px;
}

.swot-data--unassigned {
  border-left-color: #9aa5b1;
  background: var(--house-pale, #f5f7f9);
}

.swot-data__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-weight: 700;
}

.swot-data__head > i {
  color: var(--swot-color, #6b7686);
}

.swot-data__sum {
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}

.swot-data__sum--ok {
  background: #dff3e4;
  color: #1a7a3c;
}

.swot-data__sum--low {
  background: #fff1d6;
  color: #8a5a00;
}

.swot-data__sum--over {
  background: #fde2e1;
  color: var(--house-danger, #c0392b);
}

.swot-data__normalize {
  border: 1px solid var(--house-band, #c9d0d8);
  border-radius: 4px;
  background: transparent;
  color: var(--house-accent, #0b6fd0);
  font-size: 11px;
  cursor: pointer;
}

.swot-data__result {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.swot-data__table {
  width: 100%;
  margin-bottom: 6px;
}

/* The factor takes the room the other columns leave, so long texts are read whole. */
.swot-data__factor {
  width: 100%;
  min-width: 240px;
}

.swot-data__text {
  width: 100%;
  min-width: 220px;
}

.swot-data__assign {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
}

.swot-data__name {
  min-width: 220px;
  font-weight: 600;
}

.swot-assign {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border: 1px solid var(--swot-color);
  border-radius: 4px;
  background: transparent;
  color: var(--swot-color);
  font-size: 11px;
  cursor: pointer;
}

.swot-assign:hover {
  background: var(--swot-color);
  color: #fff;
}

/* Value 1–5 in one click (a rating strip). */
.swot-rating {
  display: inline-flex;
  border: 1px solid #b8c3ce;
  border-radius: 4px;
  overflow: hidden;
}

.swot-rating__step {
  width: 24px;
  height: 22px;
  border: 0;
  border-right: 1px solid #d5dbe1;
  background: #fff;
  color: #5b6672;
  font-size: 11px;
  cursor: pointer;
}

.swot-rating__step:last-child {
  border-right: 0;
}

.swot-rating__step--on {
  background: #0b6fd0;
  color: #fff;
}

.swot-rating__step:hover {
  outline: 2px solid #0b6fd0;
  outline-offset: -2px;
}

@media screen {
  .yap-dark .swot-rating__step {
    background: #26303a;
    color: #c8d2dc;
  }
}

@media screen {
  .yap-dark .swot-rating__step--on {
    background: #2f80d6;
    color: #fff;
  }
}

/* ---- Purchasing chessboard (SVG, ChessScene) ----
   The desktop's board: lavender squares (dark on the top-left), salmon when highlighted, the method of each square on a
   card, green axes with «Low / High» and the axis titles, translucent bubbles with white-haloed labels, the green mass
   center cross. The 3D view tilts the same board on a slab and raises the bubbles as shaded hemispheres. */
.chess-fig {
  display: block;
  margin: 0 auto;
  font-family: Verdana, Geneva, sans-serif;
  user-select: none;
}

.chess-fig--3d {
  cursor: grab;
  touch-action: none;
}

.chess-fig--3d:active {
  cursor: grabbing;
}

.chess-frame {
  fill: #f4f4f9;
  stroke: #c3c5da;
  stroke-width: 2;
}

.chess-board {
  fill: #a9acc9;
}

.chess-cell {
  cursor: pointer;
}

.chess-cell:hover {
  fill-opacity: .82;
}

.chess-cap-box {
  overflow: hidden;
  pointer-events: none;
}

.chess-cap {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: Verdana, Geneva, sans-serif;
  line-height: 1.18;
  text-align: center;
  overflow-wrap: break-word;
  hyphens: auto;
}

.chess-cap > span {
  min-width: 0;
  max-width: 100%;
  padding: .15em .3em;
  border-radius: .35em;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 .08em .25em rgba(28, 29, 58, .25);
  color: #101090;
  font-weight: 600;
}

.chess-cap--dark > span {
  background: rgba(255, 255, 255, .62);
}

.chess-cap--on > span {
  background: rgba(255, 255, 255, .85);
  color: #7a1010;
}

.chess-axis {
  fill: #1f8a3a;
  font-size: 32px;
  font-weight: 700;
}

.chess-title {
  fill: #1f8a3a;
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.chess-title--axis {
  fill: #8b1a1a;
  font-size: 28px;
  text-transform: none;
}

.chess-bubble {
  fill: #f4f4fa;
  fill-opacity: .62;
  stroke: #5d6088;
  stroke-opacity: .7;
  stroke-width: 2;
}

.chess-shadow {
  fill: #1c1d3a;
  fill-opacity: .3;
  pointer-events: none;
}

.chess-dome {
  fill: url(#chess-dome);
  fill-opacity: .94;
  stroke: #5d6088;
  stroke-opacity: .55;
  stroke-width: 1.5;
}

.chess-label {
  fill: #15153d;
  font-weight: 700;
  stroke: #fff;
  stroke-width: 7px;
  stroke-linejoin: round;
  paint-order: stroke;
  pointer-events: none;
}

.chess-mass {
  fill: #008000;
  fill-opacity: .72;
  stroke: #005c00;
  stroke-width: 2;
  pointer-events: none;
}

.chess-mass--decal {
  fill-opacity: .45;
}

.chess-pin {
  stroke: #005c00;
  stroke-width: 4;
  stroke-linecap: round;
  pointer-events: none;
}

.chess-mass-icon {
  color: #008000;
}

@media screen {
  .yap-dark .chess-axis,
  .yap-dark .chess-title {
    fill: #5fcf7a;
  }
}

@media screen {
  .yap-dark .chess-title--axis {
    fill: #f08a7a;
  }
}

/* Toolbar toggles of the analysis editors (mass center, 3D). */
.an-tool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--house-band, #c9d0d8);
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font-size: 12px;
  cursor: pointer;
}

.an-tool:hover {
  border-color: var(--house-accent, #0b6fd0);
}

.an-tool--on {
  border-color: var(--house-accent, #0b6fd0);
  background: var(--house-accent, #0b6fd0);
  color: #fff;
}

.an-tool--on .chess-mass-icon {
  color: #b9f5b9;
}

/* The board fits the window: square in 2D (the toolbar and the legend take about 90px more than a chart). */
.analysis-popup:not(.analysis-popup--sized) .an-chart .chart-svg.chess-fig {
  width: min(100%, calc((92vh - 380px) * var(--ar, 1)));
}

.analysis-popup--sized .an-chart .chart-svg.chess-fig {
  width: min(100%, calc((100cqh - 118px) * var(--ar, 1)));
}

/* ---- «About» tab: the method's origin and references ---- */
.an-about {
  max-width: 820px;
  line-height: 1.5;
}

.an-about__lead {
  font-size: 14px;
  font-weight: 600;
}

.an-about__lead > i {
  color: #e0a800;
}

.an-about__head {
  margin: 14px 0 4px;
  font-size: 13px;
}

.an-about__refs {
  margin: 0;
  padding-left: 20px;
}

.an-about__refs li {
  margin-bottom: 4px;
}

.an-about__refs a {
  margin-left: 4px;
  white-space: nowrap;
}

.an-about__disclaimer {
  margin-top: 16px;
  color: var(--house-muted, #6b7686);
  font-size: 11px;
}

/* The flow chart's diagram sits in a tab (next to «About»): it fills the tab panel once the window is resized. */
.analysis-popup--sized .analysis-tabs .analysis-diagram {
  height: 100%;
}

/* ---- Purchasing chessboard, Kearney's way of working: the selected category's relevant methods (green on the board,
   chips under it), the chosen ones ticked, the dated history as trails, and the positioning wizard. ---- */
.chess-bubble,
.chess-dome {
  cursor: pointer;
}

.chess-bubble--on {
  stroke: #1f8a3a;
  stroke-opacity: 1;
  stroke-width: 7;
}

.chess-dome--on {
  stroke: #1f8a3a;
  stroke-opacity: 1;
  stroke-width: 6;
}

.chess-tick {
  pointer-events: none;
}

.chess-tick circle {
  fill: #1f8a3a;
  stroke: #fff;
  stroke-width: 3;
}

.chess-tick path {
  fill: none;
  stroke: #fff;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chess-trail {
  pointer-events: none;
}

.chess-trail line {
  stroke: #1f6fb2;
  stroke-width: 4;
  stroke-dasharray: 10 7;
}

.chess-trail circle {
  fill: #fff;
  stroke: #1f6fb2;
  stroke-width: 4;
}

.chess-trail__label {
  fill: #1f6fb2;
  font-size: 22px;
  font-weight: 700;
  stroke: #fff;
  stroke-width: 6px;
  paint-order: stroke;
}

.chess-history-bar {
  margin-top: -2px;
}

.chess-relevant {
  margin: 8px auto 0;
  padding: 8px 10px;
  max-width: 980px;
  border: 1px solid #b9dcb6;
  border-left: 5px solid #1f8a3a;
  border-radius: 4px;
  background: #f3faf2;
}

@media screen {
  .yap-dark .chess-relevant {
    border-color: #2f5a33;
    background: #1d2a1e;
  }
}

.chess-relevant__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-weight: 600;
}

.chess-relevant__head > i {
  color: #1f8a3a;
}

/* Method chips: the square, its method, ticked when chosen; the category's own square framed. */
.chess-methods {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 6px;
}

.chess-methods--compact {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.chess-method {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid #c9d0d8;
  border-radius: 4px;
  background: var(--house-surface, #fff);
  color: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.chess-method:hover {
  border-color: #1f8a3a;
}

.chess-method--center {
  border-width: 2px;
  border-color: #5db866;
}

.chess-method--on {
  border-color: #1f8a3a;
  background: #dff3e4;
}

@media screen {
  .yap-dark .chess-method--on {
    background: #23452a;
  }
}

.chess-method > i {
  color: #1f8a3a;
}

.chess-method__square {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.chess-method__name {
  flex: 1 1 auto;
}

.chess-method__badge {
  padding: 0 6px;
  border-radius: 8px;
  background: #5db866;
  color: #fff;
  font-size: 10px;
}

/* The wizard: a step bar, then the step. */
.chess-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.chess-steps__step button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 4px;
  border: 1px solid #c9d0d8;
  border-radius: 14px;
  background: transparent;
  color: inherit;
  font-size: 12px;
  cursor: pointer;
}

.chess-steps__step button:disabled {
  cursor: default;
  opacity: .5;
}

.chess-steps__n {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #c9d0d8;
  color: #fff;
  font-weight: 700;
}

.chess-steps__step--done .chess-steps__n {
  background: #5db866;
}

.chess-steps__step--on button {
  border-color: var(--house-accent, #0b6fd0);
  font-weight: 700;
}

.chess-steps__step--on .chess-steps__n {
  background: var(--house-accent, #0b6fd0);
}

.chess-wizard {
  min-height: 320px;
}

.chess-wizard__head {
  margin: 12px 0 6px;
  font-size: 13px;
}

.chess-wizard__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 8px 0;
}

.chess-wizard__name {
  min-width: 260px;
}

.chess-wizard input[type=date],
.chess-history-bar input[type=date] {
  width: 150px;
}

.chess-wizard__mean {
  margin: 8px 0;
  font-weight: 600;
}

.chess-wizard__label {
  display: block;
  font-weight: 600;
}

.chess-wizard__memo {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 6px 8px;
  border: 1px solid #c9d0d8;
  border-radius: 4px;
  background: var(--house-surface, #fff);
  color: inherit;
  font: inherit;
  font-weight: 400;
  resize: vertical;
}

.chess-pick {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 6px;
}

.chess-pick__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 6px 10px;
  border: 1px solid #c9d0d8;
  border-radius: 4px;
  background: var(--house-surface, #fff);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.chess-pick__item--on {
  border-color: var(--house-accent, #0b6fd0);
  box-shadow: inset 0 0 0 1px var(--house-accent, #0b6fd0);
}

.chess-pick__name {
  font-weight: 700;
}

.chess-pick__status {
  color: var(--house-muted, #6b7686);
  font-size: 11px;
}

.chess-factors {
  width: 100%;
}

.chess-factors__name {
  min-width: 260px;
}

.chess-factors__comment {
  width: 100%;
}

.chess-factors__comment .an-cell {
  width: 100%;
  min-width: 180px;
}

.chess-place {
  display: grid;
  grid-template-columns: minmax(200px, 300px) 1fr;
  gap: 16px;
  align-items: start;
}

@media (max-width: 640px) {
  .chess-place {
    grid-template-columns: 1fr;
  }
}

.chess-mini {
  width: 100%;
  height: auto;
  border: 1px solid #c9d0d8;
}

.chess-mini__now {
  fill: #f4f4fa;
  fill-opacity: .85;
  stroke: #5d6088;
  stroke-width: 3;
}

.chess-mini__next {
  fill: #1f6fb2;
  fill-opacity: .55;
  stroke: #1f6fb2;
  stroke-width: 3;
}

.chess-mini__arrow {
  stroke: #1f6fb2;
  stroke-width: 4;
  stroke-dasharray: 9 6;
}

.chess-history {
  margin: 4px 0 0;
  padding-left: 18px;
}

.chess-history li {
  margin-bottom: 2px;
}

.chess-history__date {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Moving and resizing bubbles by hand (the desktop's «edit circle» mode): a bubble moves (the 3D board itself turns with
   the grab hand), the selected one shows a green grip at the right end of its base. */
.chess-bubble,
.chess-dome {
  cursor: move;
}

.chess-fig--dragging,
.chess-fig--dragging .chess-bubble,
.chess-fig--dragging .chess-dome,
.chess-fig--dragging .chess-cell {
  cursor: grabbing;
}

.chess-grip {
  fill: #fff;
  stroke: #2e7d32;
  stroke-width: 4;
  cursor: ew-resize;
}

.chess-grip:hover {
  fill: #c8ecc9;
}

/* ---- Business model canvas (62006) as the desktop draws it: a white A4 page with the nine blocks (title and icon),
   free notes (fill colour, blue edge, soft shadow, monospace text) with their value badges and comment / vote marks, the
   selected note's eight grips, the tray of unplaced notes; the value proposition canvas with its square and circle.
   The page stays white in the dark theme, as the printed canvas. Beside it, the selected note's details. ---- */
.bmc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: 12px;
  align-items: start;
}

.bmc-layout--wide {
  grid-template-columns: minmax(0, 1fr);
}

.bmc-toolbar .add-box {
  margin-bottom: 0;
}

.bmc-toolbar > .bmc-combo {
  flex: none;
  width: 220px;
}

.bmc-board {
  margin: 0;
}

.bmc-fig {
  display: block;
  user-select: none;
  touch-action: none;
  outline: none;
}

.bmc-fig:focus-visible {
  outline: 2px solid var(--house-accent);
  outline-offset: 2px;
}

.bmc-page {
  fill: #fff;
}

.bmc-block rect {
  fill: none;
  stroke: #9b9b9b;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.bmc-icon-box {
  overflow: visible;
  pointer-events: none;
}

.bmc-block__title {
  font-size: 52px;
  line-height: 1.15;
  color: #6f9470;
  overflow: hidden;
  max-height: 140px;
}

.bmc-block__total {
  margin-left: 0.6em;
  font-size: 44px;
  font-weight: 600;
  white-space: nowrap;
}

.bmc-icon {
  display: block;
  width: 128px;
  height: 128px;
  font-size: 110px;
  line-height: 128px;
  text-align: center;
}

.bmc-frame {
  fill: none;
  stroke: #111;
  stroke-width: 16;
}

.bmc-tray {
  fill: #f3f5f8;
  stroke: #b3bdcb;
  stroke-width: 4;
  stroke-dasharray: 22 14;
}

.bmc-tray__caption {
  font-size: 46px;
  color: #6b7686;
}

.bmc-note {
  cursor: grab;
}

.bmc-fig--static .bmc-note {
  cursor: default;
}

.bmc-fig--dragging,
.bmc-fig--dragging .bmc-note {
  cursor: grabbing;
}

.bmc-note__box {
  stroke: #2b4fd8;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.bmc-note--on .bmc-note__box {
  stroke-width: 2;
}

.bmc-note__text {
  height: 100%;
  overflow: hidden;
  font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
  line-height: 1.15;
  color: #151515;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.bmc-note__text--empty {
  color: #9a9a9a;
  font-style: italic;
}

.bmc-marks {
  display: flex;
  align-items: center;
  gap: 0.35em;
  height: 100%;
}

.bmc-mark--flag {
  color: #6b7a8f;
}

.bmc-mark {
  display: flex;
  align-items: center;
  gap: 0.15em;
  line-height: 1;
}

.bmc-mark--comments {
  color: #2f5f9a;
}

.bmc-mark--comments b {
  font-size: 0.8em;
}

.bmc-mark--valid {
  color: #2a7d2a;
}

.bmc-mark--invalid {
  color: #c0392b;
}

.bmc-badges {
  pointer-events: none;
}

.bmc-badge__label {
  fill: #fff;
  font-weight: 700;
}

.bmc-selection {
  fill: none;
  stroke: #e08a00;
  stroke-width: 1.5;
  stroke-dasharray: 6 4;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.bmc-grip {
  fill: #ffe89a;
  stroke: #6b5a12;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.bmc-grip:hover {
  fill: #ffd34d;
}

/* Value proposition canvas: the square (value map) and the circle (customer profile) in blue, the zone captions in bold,
   notes without the blue edge in the zone's pale colour. */
.vpc-shape {
  fill: none;
  stroke: #2160a8;
  stroke-width: 16;
}

.vpc-line {
  stroke: #222;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.vpc-arrow-head {
  fill: #222;
}

.vpc-label {
  font-size: 50px;
  font-weight: 700;
  line-height: 1.1;
  color: #222;
}

.vpc-label--center {
  text-align: center;
}

.bmc-board--value .bmc-note__box {
  stroke: rgba(0, 0, 0, 0.18);
}

.bmc-board--value .bmc-note__text {
  font-family: var(--house-font, Roboto, Arial, sans-serif);
  color: #222;
}

.vpc-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 8px;
}

.vpc-pair__box {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 5px 10px;
  border: 1px solid #2160a8;
  background: var(--house-surface, #fff);
}

.vpc-pair__label {
  flex: none;
  font-style: italic;
  color: var(--house-text);
}

.vpc-pair__combo {
  flex: 1;
  min-width: 0;
}

/* The selected note's details (the desktop's «Details» panel). */
.bmc-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: calc(92vh - 300px);
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--house-band);
  border-radius: 6px;
  background: var(--house-surface, #fff);
}

/* The panel scrolls as a whole: its parts keep their height (the comment list would otherwise shrink to nothing). */
.bmc-panel > * {
  flex-shrink: 0;
}

.bmc-panel--empty {
  align-items: center;
  justify-content: center;
  min-height: 180px;
  color: var(--house-muted);
  text-align: center;
}

.bmc-panel--empty i {
  font-size: 26px;
}

.bmc-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--house-text);
}

.bmc-panel__swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  vertical-align: middle;
}

.bmc-panel__form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bmc-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.bmc-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.bmc-swatch {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.28);
  border-radius: 4px;
  cursor: pointer;
}

.bmc-swatches--small .bmc-swatch {
  width: 17px;
  height: 17px;
}

.bmc-swatch--on {
  outline: 2px solid var(--house-accent);
  outline-offset: 1px;
}

.bmc-votes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.bmc-vote {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: 1px solid var(--house-band);
  border-radius: 4px;
  background: var(--house-surface, #fff);
  color: var(--house-text);
  cursor: pointer;
}

.bmc-vote--valid {
  border-color: #2a7d2a;
  background: #e3f3e3;
  color: #1d5e1d;
}

.bmc-vote--unknown {
  border-color: #7a8494;
  background: #eef0f3;
}

.bmc-vote--invalid {
  border-color: #c0392b;
  background: #fbe4e1;
  color: #8f2a20;
}

.bmc-tally {
  display: flex;
  gap: 12px;
}

.bmc-comments {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow: auto;
}

.bmc-comment-new {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.bmc-comment-new .dxbl-memo {
  width: 100%;
}

/* Budget: costs, revenue and net per note, and the two totals as bars on one scale. */
.bmc-budget tfoot td {
  border-top: 2px solid var(--house-band);
}

.bmc-net {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 560px;
  margin-top: 12px;
}

.bmc-net__bar {
  height: 14px;
  border-radius: 7px;
  background: var(--house-pale);
  overflow: hidden;
}

.bmc-net__fill {
  display: block;
  height: 100%;
  border-radius: 7px;
}

.bmc-net__fill--cost {
  background: #c0392b;
}

.bmc-net__fill--revenue {
  background: #2a7d2a;
}

.bmc-net__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* The page fills its column, but never gets taller than the window leaves once the header, the tabs and the toolbar are
   counted (the totals and the hint may scroll): readability first, as the desktop's full-window canvas. */
.analysis-popup:not(.analysis-popup--sized) .an-chart.bmc-board .chart-svg.bmc-fig {
  width: min(100%, calc((92vh - 330px) * var(--ar, 1.4)));
  margin: 0 auto;
}

.analysis-popup--sized .an-chart.bmc-board .chart-svg.bmc-fig {
  width: min(100%, calc((100cqh - 130px) * var(--ar, 1.4)));
  margin: 0 auto;
}

.analysis-popup--sized .bmc-panel {
  max-height: calc(100cqh - 120px);
}

/* The value proposition canvas window (over the analysis window): the page as large as the window allows. */
.vpc-popup .an-chart.bmc-board .chart-svg.bmc-fig {
  max-width: none;
  width: min(100%, calc((94vh - 330px) * var(--ar, 1.86)));
  margin: 0 auto;
}

.vpc-popup .bmc-panel {
  max-height: calc(94vh - 330px);
}

@media (max-width: 900px) {
  .bmc-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.an-comment__about {
  padding: 0 6px;
  border-radius: 9px;
  background: var(--house-pale);
  color: var(--house-muted);
  font-size: 11px;
}

/* ---- PESTEL, self-contained (2026-10-09): the classic PESTLE chart — the six-letter wheel between two columns of
   dimension cards (coloured icon block on the outer side) — and, in «Data», a block per dimension. ---- */
.pestel-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px) minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

@media (max-width: 900px) {
  .pestel-board {
    grid-template-columns: 1fr;
  }

  .pestel-wheel {
    order: -1;
    max-width: 280px;
    margin: 0 auto;
  }
}

.pestel-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pestel-wheel {
  width: 100%;
  height: auto;
}

.pestel-wheel__sector path {
  stroke: #fff;
  stroke-width: 2;
}

.pestel-wheel__letter {
  fill: #fff;
  font-size: 44px;
  font-weight: 800;
  pointer-events: none;
}

.pestel-wheel__count {
  fill: #fff;
  font-size: 15px;
  font-weight: 700;
  opacity: .9;
  pointer-events: none;
}

.pestel-wheel__hub {
  fill: var(--house-surface, #fff);
  stroke: #d8dde3;
  stroke-width: 2;
}

.pestel-wheel__title {
  fill: #12305a;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: .02em;
}

.pestel-wheel__total {
  fill: var(--house-muted, #6b7686);
  font-size: 14px;
}

@media screen {
  .yap-dark .pestel-wheel__title {
    fill: #dbe6f5;
  }
}

.pestel-card {
  display: grid;
  grid-template-columns: 64px 1fr;
  min-height: 108px;
  border: 1px solid color-mix(in srgb, var(--pestel-color) 45%, transparent);
  border-radius: 8px;
  background: var(--house-surface, #fff);
  overflow: hidden;
}

.pestel-card--right {
  grid-template-columns: 1fr 64px;
}

.pestel-card--right .pestel-card__icon {
  order: 2;
}

.pestel-card__icon {
  display: grid;
  place-items: center;
  background: var(--pestel-color);
  color: #fff;
  font-size: 28px;
}

.pestel-card__body {
  min-width: 0;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--pestel-color) 6%, transparent);
}

.pestel-card__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  color: var(--pestel-color);
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.pestel-card__count {
  padding: 0 7px;
  border-radius: 9px;
  background: var(--pestel-color);
  color: #fff;
  font-size: 11px;
}

.pestel-card__empty {
  margin: 0;
  color: var(--house-muted, #6b7686);
  font-size: 12px;
}

.pestel-card__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pestel-card__list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 54px;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  font-size: 12px;
}

.pestel-card__list li::before {
  content: none;
}

.pestel-card__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pestel-card__name::before {
  content: "•";
  margin-right: 6px;
  color: var(--pestel-color);
}

.pestel-glyphs {
  font-size: 12px;
  white-space: nowrap;
}

.pestel-sign--positive {
  color: #1a7a3c;
}

.pestel-sign--negative {
  color: var(--house-danger, #c0392b);
}

/* Potential impact 0–100 % (the desktop's green bar). */
.pestel-bar {
  position: relative;
  display: inline-block;
  width: 54px;
  height: 8px;
  border-radius: 4px;
  background: #e3e7ec;
  overflow: hidden;
  vertical-align: middle;
}

.pestel-bar::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--pestel-impact, 0%);
  background: #09ab2d;
}

@media screen {
  .yap-dark .pestel-bar {
    background: #2f3842;
  }
}

/* Data: a block per dimension. */
.pestel-data {
  margin: 0 0 12px;
  padding: 6px 10px 8px;
  border: 1px solid var(--house-band, #d8dde3);
  border-left: 5px solid var(--pestel-color, #9aa5b1);
  border-radius: 4px;
}

.pestel-data--unassigned {
  border-left-color: #9aa5b1;
  background: var(--house-pale, #f5f7f9);
}

.pestel-data__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-weight: 700;
}

.pestel-data__head > i {
  color: var(--pestel-color, #6b7686);
}

.pestel-data__badge {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--pestel-color);
  color: #fff;
  font-weight: 800;
}

.pestel-data__table {
  width: 100%;
  margin-bottom: 6px;
}

.pestel-data__factor {
  min-width: 170px;
}

.pestel-data__sub {
  min-width: 150px;
}

/* The factor's second line: its notes (full width) and the dimension it belongs to. */
.pestel-data__factor-rows + .pestel-data__factor-rows > tr:first-child > td {
  border-top: 2px solid var(--house-band, #d8dde3);
}

.pestel-data__more > td {
  padding-top: 0;
}

.pestel-data__more-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.pestel-data__move {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--house-muted, #6b7686);
  font-size: 12px;
  white-space: nowrap;
}

.pestel-data__notes {
  flex: 1 1 auto;
  width: 100%;
  min-width: 220px;
  padding: 3px 6px;
  border: 1px solid #c9d0d8;
  border-radius: 3px;
  background: var(--house-surface, #fff);
  color: inherit;
  font: inherit;
  font-size: 12px;
  resize: vertical;
}

.pestel-data__impact {
  white-space: nowrap;
}

.pestel-data__assign {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
}

.pestel-data__name {
  min-width: 200px;
  font-weight: 600;
}

.pestel-assign {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border: 1px solid var(--pestel-color);
  border-radius: 4px;
  background: transparent;
  color: var(--pestel-color);
  font-size: 11px;
  cursor: pointer;
}

.pestel-assign:hover {
  background: var(--pestel-color);
  color: #fff;
}

.pestel-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0 0 8px;
}

.pestel-suggest__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border: 1px dashed var(--pestel-color);
  border-radius: 12px;
  background: color-mix(in srgb, var(--pestel-color) 8%, transparent);
  color: inherit;
  font-size: 12px;
  cursor: pointer;
}

.pestel-suggest__chip:hover {
  border-style: solid;
}

.pestel-suggest__chip > i {
  color: var(--pestel-color);
}