/* ---------------------------------------------------------------------------
   APOL Value Composer — Step 3, "The value you are providing".

   Mounted by apol-value-composer.js on both Step 3 surfaces: the map-first
   journey on the home view and the Create Value workspace. Those two live in
   stylesheets with opposite palettes (a dark journey panel, a light workspace
   card), so nothing here inherits a background from either: every surface it
   draws states its own colours, and the controls are sized for a thumb at
   390px first.
   --------------------------------------------------------------------------- */

.apol-vc { margin-top: 12px; }

/* A short label with its explanation folded behind a (?), rather than a
   paragraph of instruction above every control. */
.apol-vc-head {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 12px 0 6px;
}
.apol-vc-head b {
  font: 800 11.5px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #5b6b78;
}
.apol-vc-head .apol-vc-hint {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid #b9c6d1;
  border-radius: 50%;
  background: #fff;
  color: #4a5b68;
  font: 800 11px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  cursor: pointer;
}
.apol-vc-head .apol-vc-hint:hover { border-color: #6b8298; background: #eef3f8; }
.apol-vc-head .apol-vc-hint:focus-visible { outline: 3px solid #7dd3fc; outline-offset: 2px; }
.apol-vc-hint-body {
  margin: 0 0 8px;
  padding: 9px 11px;
  border-left: 3px solid #b9c6d1;
  border-radius: 0 8px 8px 0;
  background: #f4f7fa;
  color: #3d4d59;
  font: 400 11.5px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* The six starting points. They wrap; they never scroll sideways, because a
   horizontal scroller at 390px hides the last two templates behind a gesture
   nobody knows is available. */
.apol-vc-presets,
.apol-vc-tokens {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 4px;
}
.apol-vc .apol-vc-preset {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid #c3d4e2;
  border-radius: 999px;
  background: #f2f7fc;
  color: #1d3a52;
  font: 700 12px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
  text-align: left;
  cursor: pointer;
}
.apol-vc .apol-vc-preset:hover { border-color: #5e8bb4; background: #e4eff9; }
.apol-vc .apol-vc-preset:focus-visible { outline: 3px solid #7dd3fc; outline-offset: 2px; }
.apol-vc-preset-icon { font-size: 14px; line-height: 1; }

.apol-vc .apol-vc-token {
  min-height: 36px;
  padding: 7px 11px;
  border: 1px dashed #9fb3c4;
  border-radius: 8px;
  background: #fff;
  color: #2c4a63;
  font: 700 11.5px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  cursor: pointer;
}
.apol-vc .apol-vc-token:hover { border-style: solid; background: #eef4fa; }
.apol-vc .apol-vc-token:focus-visible { outline: 3px solid #7dd3fc; outline-offset: 2px; }

/* What it costs, stated in the dispatcher's own arithmetic, and what is still
   missing from it. */
.apol-vc-meter {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 8px;
  font: 700 11.5px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.apol-vc-count { color: #3d4d59; }
.apol-vc-warn {
  padding: 2px 8px;
  border-radius: 999px;
  background: #fff3e0;
  color: #8a5208;
  font-weight: 800;
}

.apol-vc-preview { margin-top: 10px; }
.apol-vc-preview-body {
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #cfe3d3;
  border-radius: 10px 10px 10px 2px;
  background: #e7f6ea;
  color: #14301c;
  font: 400 12.5px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.apol-vc-preview-empty { color: #5d7a66; font-style: italic; }
.apol-vc-preview-body strong { font-weight: 800; }
.apol-vc-preview-body em { font-style: italic; }
.apol-vc-preview-body s { text-decoration: line-through; }

/* The journey panel on the home view is dark. Only the pieces that would
   otherwise sit as a white card on a dark panel are restated. */
.apol-mf-step .apol-vc-head b { color: #a9c3dc; }
.apol-mf-step .apol-vc-head .apol-vc-hint { border-color: #3a5573; background: #132038; color: #cfe0ff; }
.apol-mf-step .apol-vc-head .apol-vc-hint:hover { border-color: #5e8bb4; background: #1a2b49; }
.apol-mf-step .apol-vc-hint-body { border-left-color: #3a5573; background: #101c30; color: #cfe0ff; }
.apol-mf-step .apol-vc .apol-vc-preset { border-color: #2c3f63; background: #132038; color: #dbeafe; }
.apol-mf-step .apol-vc .apol-vc-preset:hover { border-color: #5e8bb4; background: #1a2b49; }
.apol-mf-step .apol-vc .apol-vc-token { border-color: #3a5573; background: #0e1626; color: #cfe0ff; }
.apol-mf-step .apol-vc .apol-vc-token:hover { background: #1a2b49; }
.apol-mf-step .apol-vc-count { color: #b8cbe0; }
.apol-mf-step .apol-vc-warn { background: #3b2a10; color: #ffd79a; }

@media (max-width: 640px) {
  /* 44px in both dimensions is the smallest control this product ships; the
     preset labels wrap inside the pill rather than pushing the row sideways. */
  .apol-vc .apol-vc-preset { min-height: 44px; }
  .apol-vc .apol-vc-token { min-height: 44px; }
}