/* =========================================================
   Shared styles for ideation.html and solution.html
   Two visual languages live here:
   1. Wireframe (wf-*): greyscale boxes and text bars for early options
   2. Figma UI3 tokens (--ui-*): the polished look for chosen options
      and the solution prototype
   ========================================================= */
:root {
  /* Wireframe palette: greys, plus one accent for the element being explored */
  --wf-bg: #ffffff;
  --wf-fill: #f1f2f4;
  --wf-line: #c9ccd2;
  --wf-ink: #5f6269;
  --wf-accent: #315edb;

  /* Figma UI3, light theme */
  --ui-canvas: #f5f5f5;
  --ui-panel: #ffffff;
  --ui-field: #f5f5f5;
  --ui-border: #e6e6e6;
  --ui-text: rgba(0, 0, 0, 0.9);
  --ui-text-2: rgba(0, 0, 0, 0.5);
  --ui-select: #0d99ff;
  --ui-select-soft: #e5f4ff;
  --ui-component: #9747ff;

  /* Anything the agent does or proposes. Change it here to re-theme both pages. */
  --agent: #8b3dff;
  --agent-soft: rgba(139, 61, 255, 0.1);

  /* Ideation page chrome (matches the case study) */
  --page-bg: #f8f8f8;
  --ink: #1e1e1e;
  --grey: #5f6269;
  --muted: #8a8d95;
  --border: #e6e6e6;
  --chosen: #087a55;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
[hidden] { display: none !important; }

/* ---------- Wireframe primitives ---------- */

/* A wireframe sketch: the greyscale card that holds the other wf-* pieces */
.wf {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--wf-bg);
  border: 1px solid var(--wf-line);
  border-radius: 8px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--wf-ink);
}

.wf-label { font-size: 10px; color: var(--muted); }
.wf-text { font-size: 11px; color: var(--wf-ink); }
.wf-text b { color: var(--ink); font-weight: 600; }

.wf-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wf-row--end { align-self: stretch; justify-content: flex-end; }
.wf-row--between { align-self: stretch; justify-content: space-between; }
.wf-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }

/* Placeholder line standing in for text we don't care about yet */
.wf-bar { width: 100%; height: 6px; border-radius: 3px; background: var(--wf-line); }
.wf-bar--40 { width: 40%; }
.wf-bar--60 { width: 60%; }

.wf-box { padding: 8px; background: var(--wf-fill); border: 1px solid var(--wf-line); border-radius: 6px; }
.wf-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; background: var(--wf-bg); border: 1px solid var(--wf-line); border-radius: 999px; white-space: nowrap; }
.wf-btn { display: inline-flex; padding: 3px 10px; background: var(--wf-bg); border: 1px solid var(--wf-line); border-radius: 5px; white-space: nowrap; }
.wf-btn--sm { padding: 1px 8px; font-size: 10px; }

/* A chip that sits inside a sentence, like a mention */
.wf-token { display: inline-flex; padding: 0 5px; border: 1px solid var(--wf-line); border-radius: 4px; white-space: nowrap; }

/* Agent chat prompt box: attachments, text, then the icon row */
.wf-composer { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px; background: var(--wf-bg); border: 1.5px solid var(--wf-line); border-radius: 10px; }
.wf-composer .wf-text { line-height: 1.9; }
.wf-icon { display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid var(--wf-line); border-radius: 50%; font-size: 9px; }
.wf-icon--send { background: var(--wf-ink); border-color: var(--wf-ink); color: #fff; }

/* Figma's own selection outline, so it can be told apart from agent marks */
.wf-selected { border-color: var(--ui-select); box-shadow: 0 0 0 1px var(--ui-select); }

/* A trip card on a wireframe canvas */
.wf-card { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 8px; background: var(--wf-fill); border: 1px solid var(--wf-line); border-radius: 6px; }

/* Boundary drawn around the layers the agent may edit */
.wf-scope { position: relative; display: flex; flex-direction: column; gap: 6px; margin-top: 6px; padding: 16px 6px 6px; border: 1.5px dashed var(--wf-accent); border-radius: 8px; }
.wf-scope__tag { position: absolute; top: -9px; left: 8px; padding: 1px 6px; border-radius: 4px; background: var(--wf-accent); color: #fff; font-size: 10px; }

/* A layer marked by the agent, with an optional name tag on its corner */
.wf-marked { position: relative; border-color: var(--wf-accent); box-shadow: 0 0 0 1px var(--wf-accent); }
.wf-tag { position: absolute; top: -8px; left: 6px; padding: 0 4px; border-radius: 3px; background: var(--wf-accent); color: #fff; font-size: 9px; line-height: 13px; }

/* The mention and the layer the pointer is over, lit up together */
.wf-card.is-hover { background: color-mix(in srgb, var(--wf-accent) 14%, white); }
.wf-token.wf-accent.is-hover { background: var(--wf-accent); color: #fff; }

/* An agent plan: numbered steps, each with a second line saying what it will change */
.wf-plan { display: flex; flex-direction: column; gap: 6px; padding: 8px; background: var(--wf-bg); border: 1px solid var(--wf-line); border-radius: 6px; }
.wf-step { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 0 6px; }
.wf-step > i { grid-row: span 2; font-style: normal; color: var(--muted); }
.wf-step__change { font-size: 10px; color: var(--muted); }

/* Editing a plan: a step's checkbox, a dropped step, a value being typed, and a before/after change */
.wf-check { width: 10px; height: 10px; margin-top: 2px; border: 1px solid var(--wf-line); border-radius: 2px; }
.wf-check.is-on { background: var(--wf-accent); border-color: var(--wf-accent); }
.wf-step.is-dropped > span { color: var(--muted); text-decoration: line-through; }
.wf-field { display: inline-block; min-width: 18px; padding: 0 3px; border: 1px solid var(--wf-accent); border-radius: 3px; background: var(--wf-bg); color: var(--ink); }
.wf-step__change del { color: var(--muted); }
.wf-step__change ins { text-decoration: none; color: var(--wf-accent); font-weight: 600; }

/* Reviewing a plan step by step: each step is approved or edited on its own */
.wf-step--review { grid-template-columns: 12px minmax(0, 1fr) auto; }
.wf-step--review > span { grid-column: 2; }
.wf-step--review > .wf-step__actions { grid-column: 3; grid-row: 1 / span 2; align-self: center; display: flex; gap: 4px; }
.wf-step__approved { font-size: 10px; color: var(--wf-accent); white-space: nowrap; }

/* Two-way switch in the composer, e.g. Plan / Edit */
.wf-switch { display: inline-flex; padding: 1px; border: 1px solid var(--wf-line); border-radius: 5px; font-size: 10px; }
.wf-switch span { padding: 0 6px; border-radius: 4px; }
.wf-switch .is-on { background: var(--wf-accent); color: #fff; }

/* The one element this option is about */
.wf-accent { border-color: var(--wf-accent); color: var(--wf-accent); }
.wf-box.wf-accent, .wf-chip.wf-accent, .wf-btn.wf-accent, .wf-token.wf-accent { background: color-mix(in srgb, var(--wf-accent) 8%, white); }
.wf-dim { opacity: 0.35; }