/* Mental Models: the Try it widgets. mental-models-widgets.css
 *
 * BRIEF-172 shipped mental-models-widgets.js without this file, so
 * every widget mounted its DOM and rendered as an unstyled pile. The
 * markup is untouched; this is the layout it always needed.
 *
 * Tokens only, no literal colours, so both skins and both themes work
 * by construction. Every widget is scoped under its own root class and
 * sized to work at 390px wide first.
 */

/* ── Shared ─────────────────────────────────────────────────────────────── */

.mmw-interact-hint {
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: 1.5;
  margin-top: var(--s2);
}

/* ── Iceberg: drag the waterline ────────────────────────────────────────── */

.mmw-iceberg {
  position: relative;
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
  user-select: none;
  touch-action: none;
}

.mmw-ice-shape { display: block; }

.mmw-ice-layer {
  min-height: 62px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  border-bottom: 1px solid var(--line);
}

.mmw-ice-layer:last-child { border-bottom: 0; }

.mmw-ice-1 { background: var(--panel); }
.mmw-ice-2 { background: var(--ground); }
.mmw-ice-3 { background: var(--ground-sunk); }
.mmw-ice-4 { background: var(--ground-sunk); filter: brightness(0.96); }

.mmw-l-name {
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--ink);
}

.mmw-l-ex {
  font-size: var(--t-micro);
  color: var(--ink-soft);
  font-style: italic;
}

.mmw-waterline {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 3px dashed var(--accent);
  cursor: grab;
}

.mmw-waterline:active { cursor: grabbing; }

.mmw-waterline-label {
  position: absolute;
  right: 8px;
  top: 4px;
  font-size: var(--t-micro);
  font-weight: 600;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  white-space: nowrap;
}

/* ── DSRP: four quadrants ───────────────────────────────────────────────── */

.mmw-dsrp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.mmw-dsrp-cell {
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 12px;
  min-height: 92px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mmw-dsrp-cell:hover { border-color: var(--accent); }
.mmw-dsrp-cell.is-active { background: var(--accent-soft); border-color: var(--accent); }

.mmw-dsrp-letter {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  color: var(--accent);
}

.mmw-dsrp-name { font-size: var(--t-small); font-weight: 600; color: var(--ink); }

.mmw-dsrp-q {
  font-size: var(--t-micro);
  color: var(--ink-soft);
  line-height: 1.4;
}

/* ── Cynefin: drag problems into domains ────────────────────────────────── */

.mmw-cyn-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.mmw-cyn-q {
  border: var(--border-w) dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 12px;
  min-height: 104px;
}

.mmw-cyn-q.is-drop-over { border-style: solid; border-color: var(--accent); background: var(--accent-soft); }

.mmw-cyn-name { font-size: var(--t-small); font-weight: 600; color: var(--ink); }

.mmw-cyn-rule {
  font-size: var(--t-micro);
  color: var(--ink-soft);
  margin-bottom: 6px;
}

.mmw-cyn-dropped { display: flex; flex-wrap: wrap; gap: 4px; }

.mmw-cyn-tray {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--s2);
}

.mmw-cyn-chip,
.mmw-cyn-tag {
  font-size: var(--t-micro);
  background: var(--ground-sunk);
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius-pill);
  padding: 6px 12px;
  cursor: grab;
  color: var(--ink);
}

.mmw-cyn-chip.is-dragging { opacity: .5; }
.mmw-cyn-tag { cursor: default; }
.mmw-cyn-tag.is-correct { background: var(--accent-soft); border-color: var(--accent); }
.mmw-cyn-tag.is-wrong { border-style: dashed; }
.mmw-cyn-chaos-tag { font-size: var(--t-micro); color: var(--ink-faint); }

/* ── Influence diagram ──────────────────────────────────────────────────── */

.mmw-inf-wrap { text-align: center; }
.mmw-inf-svg { width: 100%; max-width: 340px; height: auto; }
.mmw-inf-shape { fill: var(--panel); stroke: var(--line-strong); stroke-width: 2; cursor: pointer; }
.mmw-inf-shape:hover { stroke: var(--accent); }
.mmw-inf-fill { fill: var(--accent-soft); }
.mmw-inf-accent { fill: var(--accent); }
.mmw-inf-line { stroke: var(--line-strong); stroke-width: 2; fill: none; }
.mmw-inf-arrow { fill: var(--line-strong); }
.mmw-inf-text-light { fill: var(--ink); font-size: 11px; }

.mmw-inf-info {
  font-size: var(--t-small);
  color: var(--ink-soft);
  min-height: 40px;
  margin-top: var(--s2);
  line-height: 1.5;
}

/* ── Habits list ────────────────────────────────────────────────────────── */

.mmw-habits-list { display: grid; gap: 8px; }

.mmw-habit-item {
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 10px 12px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  width: 100%;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.mmw-habit-item:hover { border-color: var(--accent); }

.mmw-habit-num {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--accent);
  font-size: 15px;
  line-height: 1.4;
}

.mmw-habit-body { flex: 1; }
.mmw-habit-name { font-size: var(--t-small); font-weight: 600; color: var(--ink); }

.mmw-habit-desc {
  font-size: var(--t-micro);
  color: var(--ink-soft);
  line-height: 1.45;
  margin-top: 3px;
}

/* ── Stocks and flows: the tub ──────────────────────────────────────────── */

.mmw-sf-wrap { display: grid; gap: var(--s2); }

.mmw-sf-tub {
  height: 130px;
  border: var(--border-w-heavy) solid var(--line-strong);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--ground-sunk);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.mmw-sf-water {
  width: 100%;
  background: var(--accent);
  transition: height 400ms ease;
}

.mmw-sf-labels { display: flex; gap: var(--s2); }

.mmw-sf-ctrl {
  flex: 1;
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius);
  padding: 10px;
  text-align: center;
  background: var(--panel);
}

.mmw-sf-ctrl-label {
  font-size: var(--t-micro);
  text-transform: var(--label-case);
  letter-spacing: var(--label-track);
  color: var(--ink-faint);
}

.mmw-sf-val {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  color: var(--ink);
  line-height: 1.2;
}

.mmw-sf-buttons { display: flex; gap: 6px; justify-content: center; }

.mmw-sf-btn {
  font: inherit;
  font-size: 16px;
  line-height: 1;
  width: 34px;
  height: 34px;
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--ground-sunk);
  color: var(--ink);
  cursor: pointer;
}

.mmw-sf-btn:hover { border-color: var(--accent); }

.mmw-sf-level {
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: 1.5;
  min-height: 38px;
}

/* ── Behaviour over time: tabbed chart ──────────────────────────────────── */

.mmw-bot-wrap { display: grid; gap: var(--s2); }
.mmw-bot-tabs { display: flex; flex-wrap: wrap; gap: 6px; }

.mmw-bot-tab {
  font: inherit;
  font-size: var(--t-micro);
  padding: 6px 12px;
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}

.mmw-bot-tab.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.mmw-bot-chart {
  width: 100%;
  height: auto;
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
}

.mmw-bot-axis { stroke: var(--line-strong); stroke-width: 2; }
.mmw-bot-axis-label { fill: var(--ink-faint); font-size: 10px; }
.mmw-bot-path { stroke: var(--accent); stroke-width: 2.5; fill: none; }

.mmw-bot-caption {
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: 1.5;
  min-height: 40px;
}

/* ── Loops ──────────────────────────────────────────────────────────────── */

.mmw-loops-wrap { display: grid; gap: var(--s2); justify-items: center; }
.mmw-loops-btns { display: flex; gap: 8px; }

.mmw-loops-btn {
  font: inherit;
  font-size: var(--t-small);
  padding: 8px 16px;
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}

.mmw-loops-btn.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.mmw-loops-svg { width: 100%; max-width: 300px; height: auto; }
.mmw-loops-edge { stroke: var(--accent); stroke-width: 2.5; fill: none; }
.mmw-loops-arrow { fill: var(--accent); }
.mmw-loops-node { fill: var(--panel); stroke: var(--line-strong); stroke-width: 2; }
.mmw-loops-text { fill: var(--ink); font-size: 10px; }

.mmw-loops-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  fill: var(--accent);
}

.mmw-loops-caption {
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: 1.5;
  text-align: center;
  min-height: 40px;
}

/* ── Systems archetypes ─────────────────────────────────────────────────── */

.mmw-arch-list { display: grid; gap: 8px; }

.mmw-arch-card {
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 10px 12px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  width: 100%;
}

.mmw-arch-card:hover { border-color: var(--accent); }
.mmw-arch-card.is-open { background: var(--accent-soft); border-color: var(--accent); }

.mmw-arch-name { font-size: var(--t-small); font-weight: 600; color: var(--ink); }

.mmw-arch-tell {
  font-size: var(--t-micro);
  color: var(--ink-soft);
  font-style: italic;
  margin-top: 2px;
}

.mmw-arch-detail {
  font-size: var(--t-micro);
  color: var(--ink);
  line-height: 1.5;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dotted var(--line);
}

/* ── Six tools grid ─────────────────────────────────────────────────────── */

.mmw-tools6-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.mmw-tool6 {
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 10px 6px;
  cursor: pointer;
  text-align: center;
  font: inherit;
  min-height: 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.mmw-tool6:hover { border-color: var(--accent); }
.mmw-tool6.is-active { background: var(--accent-soft); border-color: var(--accent); }

.mmw-tool6-ico { font-size: 20px; line-height: 1; }
.mmw-tool6-name { font-size: var(--t-micro); font-weight: 600; color: var(--ink); }

.mmw-tool6-desc {
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: 1.5;
  margin-top: var(--s2);
  min-height: 40px;
}

/* ── Twelve leverage points: drag to rank ───────────────────────────────── */

.mmw-lev-wrap { display: grid; gap: var(--s2); }

.mmw-lev-hint {
  font-size: var(--t-micro);
  color: var(--ink-faint);
  line-height: 1.45;
}

.mmw-lev-list { display: grid; gap: 4px; }

.mmw-lev-item {
  display: flex;
  align-items: center;
  gap: 8px;
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 8px 10px;
  cursor: grab;
  touch-action: none;
}

.mmw-lev-item.is-dragging { opacity: .5; }
.mmw-lev-item.is-correct { border-color: var(--good); background: var(--accent-soft); }
.mmw-lev-item.is-incorrect { border-style: dashed; }

.mmw-lev-rank {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--ink-faint);
  min-width: 18px;
  text-align: center;
}

.mmw-lev-text { flex: 1; font-size: var(--t-micro); color: var(--ink); line-height: 1.35; }

.mmw-lev-true {
  font-size: var(--t-micro);
  color: var(--ink-faint);
  display: none;
  white-space: nowrap;
}

.mmw-lev-list.is-revealed .mmw-lev-true { display: inline; }

.mmw-lev-check {
  font: inherit;
  font-size: var(--t-small);
  padding: 10px 16px;
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--ground-sunk);
  color: var(--ink);
  cursor: pointer;
}

.mmw-lev-check:hover { border-color: var(--accent); }

/* ── Rich picture: place and drag icons ─────────────────────────────────── */

.mmw-rp-canvas {
  position: relative;
  height: 240px;
  border: var(--border-w) dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--ground-sunk);
  overflow: hidden;
  touch-action: none;
}

.mmw-rp-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--t-small);
  color: var(--ink-faint);
  text-align: center;
  padding: var(--s3);
  pointer-events: none;
}

.mmw-rp-placed {
  position: absolute;
  font-size: 26px;
  line-height: 1;
  cursor: grab;
  user-select: none;
}

.mmw-rp-placed.is-dragging { cursor: grabbing; }

.mmw-rp-elements {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--s2);
}

.mmw-rp-tool {
  font-size: var(--t-micro);
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--panel);
  padding: 6px 10px;
  cursor: pointer;
  color: var(--ink);
}

.mmw-rp-tool:hover { border-color: var(--accent); }
.mmw-rp-tool.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.mmw-rp-clear {
  font: inherit;
  font-size: var(--t-micro);
  background: none;
  border: 0;
  padding: 6px 0 0;
  color: var(--ink-faint);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.mmw-rp-clear:hover { color: var(--ink); }

/* ── Narrow screens ─────────────────────────────────────────────────────── */

@media (max-width: 420px) {
  .mmw-tools6-grid { grid-template-columns: repeat(2, 1fr); }
  .mmw-ice-layer { min-height: 56px; }
}