/*
 * Brand-neutral structural baseline, following this organisation's Design
 * Language definition (business-automation-os/interaction-standards/
 * design-language/definition.md — Draft): colour by role, a spacing scale,
 * a small type scale, named interaction states, and component contracts
 * (required states/accessibility per component type), never executable
 * behaviour. Every `--iwe-*` value below is a neutral default a consumer
 * overrides on its own host element (see shared/theme.js).
 */

.iwe-diagnostic,
.iwe-workflow-demo,
.iwe-transformation-demo,
.iwe-brief-renderer,
.iwe-calculator {
  /* Colour roles */
  --iwe-primary: #2a6f5f;
  --iwe-primary-contrast: #ffffff;
  --iwe-secondary: #2a6f5f;
  --iwe-surface: #f6f8f7;
  --iwe-surface-raised: #ffffff;
  --iwe-border: #d8ded9;
  --iwe-text: #16221d;
  --iwe-text-muted: #4a5750;
  --iwe-success: #1f7a4d;
  --iwe-warning: #8a5a00;
  --iwe-warning-surface: #fdf3e0;
  --iwe-danger: #a3231a;
  --iwe-focus: #0b5fff;

  /* Spacing scale: one base unit, multiplied */
  --iwe-space-1: 0.25rem;
  --iwe-space-2: 0.5rem;
  --iwe-space-3: 0.75rem;
  --iwe-space-4: 1rem;
  --iwe-space-5: 1.5rem;
  --iwe-space-6: 2.5rem;

  /* Type scale */
  --iwe-text-body: 1rem;
  --iwe-text-caption: 0.85rem;
  --iwe-text-heading-2: clamp(1.25rem, 2.5vw, 1.6rem);
  --iwe-text-heading-3: 1.05rem;
  --iwe-line-height: 1.6;

  --iwe-radius: 12px;
  --iwe-radius-pill: 999px;
  --iwe-gap: var(--iwe-space-4);
  --iwe-motion-duration: 150ms;
  --iwe-shadow: 0 2px 8px rgba(16, 34, 29, 0.08);
  /* Reserves room for a normal two-line question at desktop/tablet widths,
     so the answer region starts at a consistent vertical position however
     long a given question's wording is - see .iwe-question-heading. */
  --iwe-question-min-height: calc(2 * var(--iwe-line-height) * var(--iwe-text-heading-3));

  color: var(--iwe-text);
  max-width: 100%;
  box-sizing: border-box;
  font-size: var(--iwe-text-body);
  line-height: var(--iwe-line-height);
}

.iwe-diagnostic *,
.iwe-workflow-demo *,
.iwe-transformation-demo *,
.iwe-brief-renderer *,
.iwe-calculator * {
  box-sizing: border-box;
}

.iwe-diagnostic h2, .iwe-workflow-demo h2, .iwe-transformation-demo h2, .iwe-brief-renderer h2, .iwe-calculator h2 {
  font-size: var(--iwe-text-heading-2);
  margin: 0 0 var(--iwe-space-2);
}

.iwe-diagnostic h3, .iwe-workflow-demo h3, .iwe-transformation-demo h3, .iwe-brief-renderer h3, .iwe-calculator h3,
.iwe-diagnostic h4, .iwe-workflow-demo h4, .iwe-transformation-demo h4, .iwe-brief-renderer h4, .iwe-calculator h4 {
  font-size: var(--iwe-text-heading-3);
  margin: 0 0 var(--iwe-space-2);
}

.iwe-description {
  color: var(--iwe-text-muted);
  margin: 0 0 var(--iwe-space-5);
  max-width: 60ch;
}

.iwe-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.iwe-demo-badge {
  display: inline-block;
  font-size: var(--iwe-text-caption);
  font-weight: 600;
  color: var(--iwe-text-muted);
  background: var(--iwe-surface);
  border: 1px solid var(--iwe-border);
  border-radius: var(--iwe-radius-pill);
  padding: var(--iwe-space-1) var(--iwe-space-3);
  margin-bottom: var(--iwe-gap);
}

/* Component contract: button — default, hover, focus, active, disabled,
   loading (loading unused by these primitives, but the state exists to
   support it if a future consumer needs it). */
.iwe-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--iwe-space-2);
  font: inherit;
  font-weight: 600;
  min-height: 44px;
  padding: var(--iwe-space-3) var(--iwe-space-5);
  border-radius: var(--iwe-radius);
  border: 2px solid var(--iwe-primary);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--iwe-motion-duration) ease,
    color var(--iwe-motion-duration) ease,
    transform var(--iwe-motion-duration) ease;
}

.iwe-btn-primary {
  background: var(--iwe-primary);
  color: var(--iwe-primary-contrast);
}

.iwe-btn-primary:hover {
  transform: translateY(-1px);
}

.iwe-btn-secondary {
  background: transparent;
  color: var(--iwe-primary);
}

/* A utility action (reset/start over) is never a commercial CTA - deliberately
   quieter than even the secondary button: no border, muted colour, smaller
   footprint, so it never competes visually with the CTA group above it. */
.iwe-btn-utility {
  background: transparent;
  border-color: transparent;
  color: var(--iwe-text-muted);
  font-weight: 600;
  min-height: 40px;
  padding: var(--iwe-space-2) var(--iwe-space-3);
}

.iwe-btn-utility:hover {
  color: var(--iwe-text);
  background: var(--iwe-surface);
  transform: none;
}

.iwe-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.iwe-diagnostic :is(button, a.iwe-btn, input, summary, [role="tab"]):focus-visible,
.iwe-workflow-demo :is(button, a.iwe-btn, input, summary, [role="tab"]):focus-visible,
.iwe-transformation-demo :is(button, a.iwe-btn, input, summary, [role="tab"]):focus-visible,
.iwe-brief-renderer :is(button, a.iwe-btn, input, summary, [role="tab"]):focus-visible,
.iwe-calculator :is(button, a.iwe-btn, input, summary, [role="tab"]):focus-visible {
  outline: 3px solid var(--iwe-focus);
  outline-offset: 2px;
}

.iwe-actions,
.iwe-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--iwe-space-3);
  margin-top: var(--iwe-gap);
}

.iwe-utility-row {
  margin-top: var(--iwe-space-3);
  margin-bottom: var(--iwe-space-3);
  display: flex;
}

/* --- Diagnostic: progress + answer cards --- */

.iwe-progress-track {
  display: flex;
  flex-direction: column;
  gap: var(--iwe-space-2);
  margin-bottom: var(--iwe-gap);
}

.iwe-progress-label {
  color: var(--iwe-text-muted);
  font-size: var(--iwe-text-caption);
  font-weight: 600;
}

.iwe-progressbar {
  height: 8px;
  background: var(--iwe-border);
  border-radius: var(--iwe-radius-pill);
  overflow: hidden;
}

.iwe-progressbar-fill {
  height: 100%;
  background: var(--iwe-primary);
  border-radius: var(--iwe-radius-pill);
  transition: width var(--iwe-motion-duration) ease;
}

.iwe-question legend {
  font-size: var(--iwe-text-heading-3);
  font-weight: 600;
  margin-bottom: var(--iwe-space-3);
  padding: 0;
}

/* Reserves a consistent minimum height for the question heading itself, so
   the answer cards below it begin at roughly the same vertical position
   whether a question's wording runs to one line or wraps to two - without
   truncating longer questions or capping a specific pixel height that would
   break narrow/mobile layouts. */
.iwe-question-heading {
  display: flex;
  align-items: flex-start;
  min-height: var(--iwe-question-min-height);
}

.iwe-question {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--iwe-space-2);
}

/* Component contract: answer card — default, hover, focus (via the native
   input's :focus-visible above), selected, disabled. Selected is never
   colour-only: border weight, background, and an explicit checkmark glyph
   all change together. */
.iwe-choice {
  display: flex;
  align-items: center;
  gap: var(--iwe-space-3);
  min-height: 44px;
  padding: var(--iwe-space-3) var(--iwe-space-4);
  border: 2px solid var(--iwe-border);
  border-radius: var(--iwe-radius);
  background: var(--iwe-surface-raised);
  cursor: pointer;
  transition: border-color var(--iwe-motion-duration) ease,
    background-color var(--iwe-motion-duration) ease;
}

.iwe-choice:hover {
  border-color: var(--iwe-primary);
}

.iwe-choice:has(input:checked) {
  border-color: var(--iwe-primary);
  background: color-mix(in srgb, var(--iwe-primary) 8%, var(--iwe-surface-raised));
  font-weight: 600;
}

.iwe-choice input[type="radio"] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: var(--iwe-primary);
}

.iwe-choice-check {
  margin-left: auto;
  color: var(--iwe-primary);
  font-weight: 700;
  visibility: hidden;
}

.iwe-choice:has(input:checked) .iwe-choice-check {
  visibility: visible;
}

.iwe-result {
  padding: var(--iwe-space-5);
  border: 1px solid var(--iwe-border);
  border-radius: var(--iwe-radius);
  background: var(--iwe-surface-raised);
  box-shadow: var(--iwe-shadow);
}

.iwe-result h3 {
  font-size: var(--iwe-text-heading-2);
  margin-bottom: var(--iwe-space-4);
}

/* Vertical rhythm inside the result card - headings, paragraphs, and lists
   each get breathing room from what follows them, and the last element
   never carries a trailing gap the card itself already provides. */
.iwe-result h4 {
  margin-top: var(--iwe-space-4);
}

.iwe-result p {
  margin: 0 0 var(--iwe-space-3);
  line-height: var(--iwe-line-height);
}

.iwe-result ul {
  margin: 0 0 var(--iwe-space-4);
  padding-left: 1.2em;
  display: flex;
  flex-direction: column;
  gap: var(--iwe-space-2);
}

.iwe-result li {
  line-height: var(--iwe-line-height);
}

.iwe-result > :last-child {
  margin-bottom: 0;
}

/* --- Workflow demo: a real progression timeline --- */

.iwe-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  margin: 0 0 var(--iwe-gap);
  padding: 0;
}

@media (min-width: 700px) {
  .iwe-timeline {
    flex-direction: row;
    align-items: flex-start;
  }
}

.iwe-timeline-item {
  display: flex;
  padding: 0;
}

@media (min-width: 700px) {
  .iwe-timeline-item {
    flex: 1 1 0;
  }
}

.iwe-timeline-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}

@media (min-width: 700px) {
  .iwe-timeline-rail {
    flex-direction: row;
    width: 100%;
  }
}

.iwe-timeline-connector {
  width: 3px;
  flex: 1 1 auto;
  min-height: var(--iwe-space-5);
  background: var(--iwe-border);
}

.iwe-timeline-connector.iwe-traversed {
  background: var(--iwe-primary);
}

@media (min-width: 700px) {
  .iwe-timeline-connector {
    width: auto;
    height: 3px;
    min-height: 0;
    min-width: var(--iwe-space-5);
  }
  .iwe-timeline-item:first-child .iwe-timeline-connector.iwe-connector-before {
    visibility: hidden;
  }
}

.iwe-timeline-item:first-child .iwe-timeline-connector.iwe-connector-before {
  visibility: hidden;
}

.iwe-timeline-marker {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  border: 2px solid var(--iwe-border);
  background: var(--iwe-surface-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--iwe-text-muted);
  cursor: pointer;
}

.iwe-timeline-marker[aria-current="step"] {
  border-color: var(--iwe-primary);
  color: var(--iwe-primary-contrast);
  background: var(--iwe-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--iwe-primary) 20%, transparent);
}

.iwe-timeline-marker.iwe-visited:not([aria-current="step"]) {
  border-color: var(--iwe-primary);
  color: var(--iwe-primary);
}

.iwe-timeline-marker.iwe-kind-decision {
  border-style: dashed;
}

.iwe-timeline-select {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--iwe-space-3);
  width: 100%;
  background: none;
  border: 0;
  padding: var(--iwe-space-2);
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  border-radius: var(--iwe-radius);
  min-height: 44px;
}

.iwe-timeline-select:hover {
  background: var(--iwe-surface);
}

.iwe-timeline-select:hover .iwe-timeline-marker:not([aria-current="step"]) {
  border-color: var(--iwe-primary);
}

@media (min-width: 700px) {
  .iwe-timeline-select {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--iwe-space-2);
  }
}

/* A category/status label, not a control - deliberately no hover state, no
   pointer cursor of its own, no role/tabindex (see workflow-demo.js): it is
   a plain <span>, and the enclosing step button is the only interactive
   element. Distinguished by more than colour alone - each kind also has its
   own text (BEFORE/TRIGGER/AUTOMATED STEP/HUMAN DECISION/OUTCOME) and its
   own border colour, not background tint alone. */
.iwe-timeline-kind {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  padding: 0.15rem var(--iwe-space-2);
  border-radius: var(--iwe-radius-pill);
  border: 1.5px solid transparent;
  display: inline-block;
  width: fit-content;
  cursor: inherit;
}

@media (min-width: 700px) {
  .iwe-timeline-kind {
    margin: 0 auto;
  }
}

/* BEFORE - neutral: the prior, unimproved state. */
.iwe-kind-before .iwe-timeline-kind {
  background: var(--iwe-surface);
  color: var(--iwe-text-muted);
  border-color: var(--iwe-border);
}

/* TRIGGER - accent: the event that starts the sequence. */
.iwe-kind-trigger .iwe-timeline-kind {
  background: color-mix(in srgb, var(--iwe-primary) 14%, white);
  color: var(--iwe-primary);
  border-color: var(--iwe-primary);
}

/* AUTOMATED STEP - system/automation treatment, distinct from TRIGGER. */
.iwe-kind-stage .iwe-timeline-kind {
  background: color-mix(in srgb, var(--iwe-success) 15%, white);
  color: var(--iwe-success);
  border-color: var(--iwe-success);
}

/* HUMAN DECISION - attention: a human, not automation, decides here. */
.iwe-kind-decision .iwe-timeline-kind {
  background: var(--iwe-warning-surface);
  color: var(--iwe-warning);
  border-color: var(--iwe-warning);
}

/* OUTCOME - completion: a stronger fill than AUTOMATED STEP's tint, so the
   end of the sequence reads as done, not as another automated step. */
.iwe-kind-outcome .iwe-timeline-kind {
  background: var(--iwe-success);
  color: var(--iwe-primary-contrast);
  border-color: var(--iwe-success);
}

.iwe-timeline-label {
  font-weight: 600;
  font-size: 0.95rem;
  max-width: 22ch;
}

.iwe-step-panel {
  border: 1px solid var(--iwe-border);
  border-radius: var(--iwe-radius);
  padding: var(--iwe-space-5);
  background: var(--iwe-surface-raised);
  box-shadow: var(--iwe-shadow);
}

/* Deliberately its own class, not a reuse of .iwe-timeline-kind - that class
   carries a desktop `margin: 0 auto` meant to centre a badge under its own
   timeline step, which visually indented this kicker relative to the
   flush-left heading/paragraph beneath it when reused here. Same badge
   look, no centring, so the kicker, the heading, and the paragraph all
   share one left edge. */
.iwe-step-panel-kind {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  padding: 0.15rem var(--iwe-space-2);
  border-radius: var(--iwe-radius-pill);
  display: inline-block;
  width: fit-content;
  margin-bottom: var(--iwe-space-2);
  background: var(--iwe-surface);
  color: var(--iwe-text-muted);
}

.iwe-step-panel h4 {
  font-size: var(--iwe-text-heading-2);
}

/* No max-width here (unlike most other body copy in this stylesheet) -
   the panel itself is already reasonably width-constrained by whatever
   contains it, and a blanket 60ch cap left the explanation narrower than
   the panel around it, with unexplained empty space on the right. The
   kicker and title above have no cap either, so this keeps one consistent
   available width for all three, not just a shared left edge. */
.iwe-step-panel p {
  color: var(--iwe-text-muted);
}

/* --- Transformation demo: input -> structured output -> final output --- */

.iwe-transform-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--iwe-space-3);
  align-items: stretch;
}

@media (min-width: 860px) {
  .iwe-transform-grid {
    grid-template-columns: 1fr auto 1fr auto 1fr;
  }
}

.iwe-transform-stage {
  border: 1px solid var(--iwe-border);
  border-radius: var(--iwe-radius);
  background: var(--iwe-surface-raised);
  padding: var(--iwe-space-4);
  min-width: 0;
}

.iwe-transform-stage h4 {
  font-size: 0.95rem;
  color: var(--iwe-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: var(--iwe-space-3);
}

.iwe-transform-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--iwe-text-muted);
  font-size: 1.4rem;
  padding: var(--iwe-space-1) 0;
}

.iwe-transform-arrow::before {
  content: "↓";
}

@media (min-width: 860px) {
  .iwe-transform-arrow::before {
    content: "→";
  }
}

.iwe-transform-raw,
.iwe-transform-draft {
  white-space: pre-wrap;
  background: var(--iwe-surface);
  border-radius: var(--iwe-radius);
  padding: var(--iwe-space-3);
  font-family: inherit;
  max-width: 60ch;
  line-height: var(--iwe-line-height);
  margin: 0;
}

.iwe-actions-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--iwe-space-2);
}

.iwe-action-card {
  border: 1px solid var(--iwe-border);
  border-radius: var(--iwe-radius);
  background: var(--iwe-surface);
}

.iwe-action-card summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--iwe-space-1);
  padding: var(--iwe-space-3);
  min-height: 44px;
}

.iwe-action-card summary::-webkit-details-marker {
  display: none;
}

.iwe-action-text {
  font-weight: 600;
}

/* Every field always stacks label-over-value, and every card always stacks
   its fields vertically - never label-beside-value on one card and
   label-above-value on another, regardless of how long a given value runs. */
.iwe-action-fields {
  display: flex;
  flex-direction: column;
  gap: var(--iwe-space-2);
  margin-top: var(--iwe-space-1);
}

.iwe-action-field {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: var(--iwe-text-caption);
}

.iwe-action-field-label {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: var(--iwe-text-muted);
}

.iwe-action-field-value {
  color: var(--iwe-text);
}

.iwe-transform-progression {
  font-weight: 700;
  font-size: var(--iwe-text-caption);
  letter-spacing: 0.02em;
  color: var(--iwe-primary);
  margin: 0 0 var(--iwe-space-1);
}

.iwe-transform-chain-hint {
  color: var(--iwe-text-muted);
  font-size: var(--iwe-text-caption);
  margin: 0 0 var(--iwe-gap);
}

.iwe-transform-stage-kicker {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--iwe-text-muted);
  margin: 0 0 var(--iwe-space-1);
}

.iwe-transform-stage-caption {
  font-size: var(--iwe-text-caption);
  color: var(--iwe-text-muted);
  margin: 0 0 var(--iwe-space-3);
}

.iwe-action-source {
  margin: 0 var(--iwe-space-3) var(--iwe-space-3);
  padding-left: var(--iwe-space-3);
  border-left: 3px solid var(--iwe-border);
  color: var(--iwe-text-muted);
  font-size: var(--iwe-text-caption);
}

/* --- Operational brief accordion --- */

.iwe-brief-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--iwe-space-3);
}

.iwe-brief {
  border: 1px solid var(--iwe-border);
  border-radius: var(--iwe-radius);
  background: var(--iwe-surface-raised);
}

.iwe-brief[open] {
  box-shadow: var(--iwe-shadow);
}

.iwe-brief summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--iwe-space-3);
  font-weight: 600;
  min-height: 44px;
  padding: var(--iwe-space-4);
}

.iwe-brief summary:hover {
  background: var(--iwe-surface);
}

.iwe-brief summary::-webkit-details-marker {
  display: none;
}

.iwe-brief-summary-text {
  display: flex;
  flex-direction: column;
  gap: var(--iwe-space-1);
  min-width: 0;
}

.iwe-brief-date {
  color: var(--iwe-text-muted);
  font-weight: 400;
  font-size: var(--iwe-text-caption);
}

.iwe-brief-chevron {
  flex-shrink: 0;
  transition: transform var(--iwe-motion-duration) ease;
  color: var(--iwe-text-muted);
}

.iwe-brief[open] .iwe-brief-chevron {
  transform: rotate(180deg);
}

.iwe-brief-body {
  padding: 0 var(--iwe-space-4) var(--iwe-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--iwe-space-2);
}

/* Provenance/review metadata's own inset panel - visually subordinate to
   the brief itself (smaller text, muted surface, a border rather than the
   brief's own shadow), never styled as another interactive control, and
   never hidden behind a further click - it is a plain <div>, always visible
   whenever the brief is expanded. */
.iwe-brief-source-panel {
  background: var(--iwe-surface);
  border: 1px solid var(--iwe-border);
  border-radius: calc(var(--iwe-radius) - 4px);
  padding: var(--iwe-space-3) var(--iwe-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--iwe-space-2);
  cursor: default;
}

.iwe-brief-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--iwe-space-1) var(--iwe-space-3);
  margin: 0;
  font-size: var(--iwe-text-caption);
}

.iwe-brief-meta dt {
  color: var(--iwe-text-muted);
}

.iwe-freshness {
  display: inline-flex;
  align-items: center;
  gap: var(--iwe-space-1);
  font-size: var(--iwe-text-caption);
  padding: 0.15rem var(--iwe-space-2);
  border-radius: var(--iwe-radius-pill);
  width: fit-content;
  background: var(--iwe-surface);
  color: var(--iwe-text-muted);
}

.iwe-freshness.iwe-review-due {
  background: var(--iwe-warning-surface);
  color: var(--iwe-warning);
  font-weight: 600;
}

.iwe-brief-disclaimer {
  font-size: var(--iwe-text-caption);
  color: var(--iwe-text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .iwe-diagnostic *,
  .iwe-workflow-demo *,
  .iwe-transformation-demo *,
  .iwe-brief-renderer *,
  .iwe-calculator * {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
}

/* --- Capacity / workload calculator --- */

.iwe-calc-fields {
  display: flex;
  flex-direction: column;
  gap: var(--iwe-space-4);
  margin-bottom: var(--iwe-gap);
}

.iwe-calc-field {
  display: flex;
  flex-direction: column;
  gap: var(--iwe-space-1);
}

.iwe-calc-label {
  font-weight: 600;
}

.iwe-calc-required {
  color: var(--iwe-danger);
}

.iwe-calc-input-row {
  display: flex;
  align-items: center;
  gap: var(--iwe-space-2);
  max-width: 320px;
}

.iwe-calc-input-row input[type="number"] {
  flex: 1 1 auto;
  min-height: 44px;
  min-width: 0;
  width: 100%;
  padding: var(--iwe-space-2) var(--iwe-space-3);
  border: 2px solid var(--iwe-border);
  border-radius: var(--iwe-radius);
  font: inherit;
  color: var(--iwe-text);
  background: var(--iwe-surface-raised);
}

.iwe-calc-input-row input[type="number"]:focus-visible {
  border-color: var(--iwe-primary);
}

.iwe-calc-input-row input[aria-invalid="true"] {
  border-color: var(--iwe-danger);
}

.iwe-calc-unit {
  color: var(--iwe-text-muted);
  font-size: var(--iwe-text-caption);
  font-weight: 600;
  white-space: nowrap;
}

.iwe-calc-help {
  color: var(--iwe-text-muted);
  font-size: var(--iwe-text-caption);
  margin: 0;
}

.iwe-calc-error {
  color: var(--iwe-danger);
  font-size: var(--iwe-text-caption);
  margin: 0;
  font-weight: 600;
}

.iwe-calc-headline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--iwe-space-4);
  margin-bottom: var(--iwe-space-4);
}

.iwe-calc-metric {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.iwe-calc-metric-value {
  font-size: var(--iwe-text-heading-2);
  font-weight: 700;
  color: var(--iwe-primary);
}

.iwe-calc-metric-label {
  font-size: var(--iwe-text-caption);
  color: var(--iwe-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}