/*
 * Campaign Wizard Stylesheet
 *
 * Single-column layout with top progress bar for the 4-step campaign wizard.
 */

/* ============================================
   Wizard Container
   ============================================ */

.wizard-container {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 8rem);
}

.wizard-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* ============================================
   Progress Bar (horizontal top bar)
   ============================================ */

.wizard-progress-bar {
  padding: 2rem 1.5rem;
  border-bottom: 1px solid var(--color-gray-200);
}

.wizard-progress-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: max-content;
}

.wizard-progress-item {
  display: flex;
  align-items: center;
}

/* Connector line between steps — dashed */
.wizard-progress-connector {
  width: 6rem;
  height: 0;
  border-top: 2px dashed var(--color-gray-200);
  margin: 0 0.5rem;
}

/* Step link / static container */
.wizard-progress-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
  transition: background-color 0.15s ease;
}

.wizard-progress-step:hover {
  background-color: var(--color-gray-50);
}

.wizard-progress-step--static {
  cursor: default;
}

.wizard-progress-step--static:hover {
  background-color: transparent;
}

.wizard-progress-step--active:hover {
  background-color: transparent;
}

/* Step dot indicators */
.wizard-progress-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 1rem;
  font-weight: 600;
}

.wizard-progress-dot--active {
  background-color: var(--color-support-1);
  color: white;
}

.wizard-progress-dot--completed {
  background-color: var(--color-support-5);
  color: white;
}

.wizard-progress-dot--pending {
  background-color: var(--color-gray-200);
  color: var(--color-gray-900);
}

/* Step label */
.wizard-progress-label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-gray-900);
  white-space: nowrap;
}

.wizard-progress-step--active .wizard-progress-label {
  color: var(--color-support-1);
}

/* ============================================
   Step Content Area
   ============================================ */

.wizard-content {
  flex: 1;
  min-width: 0;
}

.wizard-step-content {
  padding: 1.5rem;
  max-width: 56rem;
  margin: 0 auto;
}

/* ============================================
   Footer Navigation
   ============================================ */

.wizard-footer {
  padding: 1.5rem;
  border-top: 1px solid var(--color-gray-200);
}

.wizard-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 9999px;
  transition: all 0.15s ease;
  cursor: pointer;
  border: none;
}

.wizard-btn--back {
  background: transparent;
  border: 1px solid var(--color-gray-900);
  color: var(--color-gray-800);
  text-decoration: none;
}

.wizard-btn--back:hover {
  background-color: var(--color-gray-50);
  border-color: var(--color-gray-950);
  color: var(--color-gray-950);
}

.wizard-btn--next {
  background-color: var(--color-gray-1000);
  color: white;
}

.wizard-btn--next:hover {
  background-color: var(--color-gray-950);
}

/* ============================================
   Step Transitions
   ============================================ */

turbo-frame#wizard_step {
  display: block;
  min-height: 300px;
}

/* ============================================
   Preset Cards
   ============================================ */

.preset-card {
  border: 1px solid var(--color-gray-200);
  border-radius: 0.5rem;
  padding: 1rem;
  transition: all 0.15s ease;
  background-color: var(--color-white);
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.preset-card:hover {
  border-color: var(--color-gray-300);
  background-color: var(--color-gray-50);
}

.preset-card--selected {
  border-color: var(--color-gray-1000);
}

.preset-card--selected:hover {
  border-color: var(--color-gray-1000);
}

/* ============================================
   Section Headers (Step 2)
   ============================================ */

.wizard-section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px dashed var(--color-gray-200);
}

.wizard-section-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-gray-1000);
}

/* ============================================
   Budget Type Cards (Step 2)
   ============================================ */

.budget-card {
  border: 1px solid var(--color-gray-200);
  border-radius: 0.5rem;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.budget-card--selected {
  border-color: var(--color-gray-1000);
  border-width: 2px;
}

.budget-card-body {
  padding: 1rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.budget-card-footer {
  padding: 1rem;
  border-top: 1px solid var(--color-gray-200);
  font-size: 0.75rem;
  color: var(--color-gray-800);
}

/* ============================================
   Stacked Bar Chart
   ============================================ */

.stacked-bar {
  display: flex;
  border-radius: 0.5rem;
  overflow: hidden;
  width: 100%;
}

.stacked-bar-segment {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: white;
  white-space: nowrap;
  min-width: 0;
  transition: width 0.3s ease;
}

.stacked-bar-legend {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.stacked-bar-legend-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.625rem;
  color: var(--color-gray-1000);
}

.stacked-bar-legend-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 0.125rem;
  flex-shrink: 0;
}

.legend-money {
  color: var(--color-ink-lighter, #72777a);
  font-weight: 500;
}

/* ============================================
   Budget Breakdown Bar (Step 4 - Premiacao)
   ============================================ */

.budget-bar {
  display: flex;
  height: 1.5rem;
  border-radius: 0.5rem;
  overflow: hidden;
  background-color: var(--color-gray-100);
}

.budget-bar-segment {
  height: 100%;
  min-width: 0;
  transition: width 0.3s ease;
}

.budget-bar-seller {
  background-color: var(--color-support-1);
}

.budget-bar-manager {
  background-color: var(--color-support-5);
}

.budget-bar-supervisor {
  background-color: var(--color-support-3);
}

.budget-detail-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.5rem;
  background-color: var(--color-white);
}

.budget-dot-seller {
  background-color: var(--color-support-1);
}

.budget-dot-manager {
  background-color: var(--color-support-5);
}

.budget-dot-supervisor {
  background-color: var(--color-support-3);
}

.budget-total-amount {
  color: var(--color-gray-1000);
}

/* Pillar icon containers */
.budget-icon-seller {
  background-color: color-mix(in srgb, var(--color-support-1) 10%, transparent);
}

.budget-icon-manager {
  background-color: color-mix(in srgb, var(--color-support-5) 10%, transparent);
}

.budget-icon-supervisor {
  background-color: color-mix(in srgb, var(--color-support-3) 10%, transparent);
}

/* Simulation scenario cards */
.scenario-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  border-radius: 0.5rem;
  border: 1px solid transparent;
  flex: 1;
}

.scenario-card--pessimistic {
  background-color: color-mix(in srgb, var(--color-support-6) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-support-6) 10%, transparent);
  color: var(--color-support-6);
}

.scenario-card--expected {
  background-color: var(--color-gray-50);
  border-color: var(--color-gray-500);
  color: var(--color-gray-950);
}

.scenario-card--optimistic {
  background-color: color-mix(in srgb, var(--color-support-5) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-support-5) 10%, transparent);
  color: var(--color-support-5);
}

.scenario-card-title {
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.scenario-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.scenario-card-row-label {
  font-size: 0.75rem;
  line-height: 1rem;
}

.scenario-card-row-value {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
}

.scenario-card-divider--pessimistic {
  border-top: 1px solid var(--color-support-6);
  opacity: 0.2;
}

.scenario-card-divider--expected {
  border-top: 1px solid var(--color-gray-950);
  opacity: 0.2;
}

.scenario-card-divider--optimistic {
  border-top: 1px solid var(--color-support-5);
  opacity: 0.2;
}

.scenario-card-summary {
  padding: 1rem;
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.scenario-card-summary--pessimistic {
  border: 1px solid color-mix(in srgb, var(--color-support-6) 20%, transparent);
}

.scenario-card-summary--expected {
  border: 1px solid var(--color-gray-500);
}

.scenario-card-summary--optimistic {
  border: 1px solid color-mix(in srgb, var(--color-support-5) 20%, transparent);
}

/* ============================================
   Wizard Modal (HTML <dialog>)
   ============================================ */

dialog.wizard-modal {
  max-width: 56rem;
  width: 95vw;
  max-height: 85vh;
  margin: auto;
  border: none;
  border-radius: 0.75rem;
  padding: 0;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

dialog.wizard-modal::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

dialog.wizard-modal[open] {
  display: flex;
  flex-direction: column;
}

.wizard-modal-panels {
  display: grid;
  grid-template-columns: 3fr 2fr;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}

.wizard-modal-panels > div {
  overflow-y: auto;
}

.wizard-modal-left {
  border-right: 1px solid var(--color-gray-200);
}

/* ============================================
   Confirm dialog (data-turbo-confirm)
   ============================================ */

dialog.nw-confirm {
  width: min(26rem, calc(100vw - 2.5rem));
  margin: auto;
  border: none;
  border-radius: 1.25rem;
  padding: 0;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

dialog.nw-confirm::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

.nw-confirm-body { padding: 1.5rem; }

.nw-confirm-message {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-gray-1000);
  line-height: 1.5;
}

.nw-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px dashed var(--color-gray-200);
}

/* Primary twin of .nw-btn-outline: same pill geometry, ink fill — the
   default (non-destructive) confirm action. */
.nw-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border-radius: 9999px;
  border: none;
  background: var(--color-gray-1000);
  color: white;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
}

.nw-btn-primary:hover {
  background: var(--color-gray-950);
}

/* Destructive twin of .nw-btn-outline: same pill geometry, red fill. */
.nw-btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border-radius: 9999px;
  border: none;
  background: var(--color-red-600, #dc2626);
  color: white;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
}

.nw-btn-danger:hover {
  background: color-mix(in srgb, var(--color-red-600, #dc2626) 88%, black);
}

/* ============================================
   Goal Card
   ============================================ */

.goal-card {
  border: 1px solid var(--color-gray-200);
  border-radius: 0.5rem;
  background-color: var(--color-white);
  transition: box-shadow 0.15s ease;
}

.goal-card:hover {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.goal-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
}

.goal-card-badges {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
}

.goal-card-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 400;
  white-space: nowrap;
}

.goal-card-badge--type {
  background: color-mix(in srgb, var(--color-support-1) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-support-1) 10%, transparent);
  color: var(--color-support-1);
}

.goal-card-badge--weight {
  background: color-mix(in srgb, var(--color-support-2) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-support-2) 10%, transparent);
  color: var(--color-support-2);
}

.goal-card-badge--stores {
  background: color-mix(in srgb, var(--color-support-5) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-support-5) 10%, transparent);
  color: var(--color-support-5);
}

.goal-card-badge--products {
  background: color-mix(in srgb, var(--color-support-3) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-support-3) 10%, transparent);
  color: var(--color-support-3);
}

.goal-card-position {
  display: inline-flex;
  align-items: center;
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-400);
  color: var(--color-gray-900);
  border-radius: 9999px;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
}

/* ============================================
   Goal Type Icons
   ============================================ */

.goal-type-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.goal-type-icon--all-or-nothing {
  background: color-mix(in srgb, var(--color-support-6) 10%, transparent);
  color: var(--color-support-6);
}

.goal-type-icon--proportional-capped {
  background: color-mix(in srgb, var(--color-support-2) 10%, transparent);
  color: var(--color-support-2);
}

.goal-type-icon--proportional-uncapped {
  background: color-mix(in srgb, var(--color-support-4) 10%, transparent);
  color: var(--color-support-4);
}

/* ============================================
   Tag Pills
   ============================================ */

.tag-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 500;
  transition: all 0.15s ease;
  user-select: none;
}

.tag-pill--inactive {
  background-color: var(--color-gray-100);
  color: var(--color-ink-dark);
  border: 1px solid var(--color-gray-200);
}

.tag-pill--inactive:hover {
  background-color: var(--color-gray-200);
}

.tag-pill--active {
  background-color: var(--color-primary);
  color: white;
  border: 1px solid var(--color-primary);
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 768px) {
  .wizard-progress-bar {
    padding: 1rem;
    overflow-x: auto;
  }

  .wizard-progress-list {
    gap: 0;
    min-width: max-content;
  }

  .wizard-progress-connector {
    width: 2rem;
  }

  .wizard-progress-label {
    font-size: 0.75rem;
  }

  .wizard-step-content {
    padding: 1rem;
  }

  .wizard-footer {
    padding: 1rem;
  }

  dialog.wizard-modal {
    max-width: 100vw;
    width: 100vw;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
  }

  .wizard-modal-panels {
    grid-template-columns: 1fr;
  }

  .wizard-modal-left {
    border-right: none;
    border-bottom: 1px solid var(--color-gray-200);
  }
}

/* ============================================================================
   NEW FLOW (U8) — five-step bottom-up wizard
   Sobre → Metas → Ranking → Ofensiva → Revisar. Chrome for the redesigned
   flow; the classes above keep the old wizard working untouched.
   ============================================================================ */

/* The wizard main breathes wider than the admin's 1280px default — the
   two-column body puts the extra width to work. Loads after account.css,
   so the same-specificity max-width override wins by order. Narrower
   screens are unaffected (width stays 100%). */
.nw-wizard-main {
  max-width: 1600px;
}

/* One white shell wraps the whole wizard — stepper, step content and the
   gray receipt all sit inside it (Figma frames: the receipt's torn paper
   reads against the shell's white, not against the page gray). */
.nw-shell {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 1.5rem;
  padding: 1.5rem;
}

/* ---- Top step nav (Sobre/Metas/Ranking/Ofensiva pills) ---- */
.nw-stepnav {
  display: flex;
  align-items: stretch;
  gap: 0;
  /* Hairline separating the stepper strip from the step content (Figma). */
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-gray-100);
}

.nw-stepnav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  padding: 0.75rem 1rem;
  border-radius: 1rem;
  border: 1px solid var(--color-gray-200);
  background: var(--color-white);
  text-decoration: none;
  color: var(--color-gray-900);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.nw-stepnav-item--current {
  border-color: var(--color-orange-800);
}

.nw-stepnav-item--disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.nw-stepnav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  background: var(--color-gray-100);
  color: var(--color-gray-900);
  font-weight: 700;
  font-size: 0.875rem;
  flex-shrink: 0;
}

.nw-stepnav-item--current .nw-stepnav-badge {
  background: color-mix(in srgb, var(--color-orange-800) 12%, transparent);
  color: var(--color-orange-900);
}

.nw-stepnav-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.5rem;
  background: var(--color-green-500, #22c55e);
  color: white;
  flex-shrink: 0;
  margin-left: auto;
}

.nw-stepnav-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  /* One line always — a wrapped label ("Sobre a / Campanha") makes its card
     taller than its siblings and the whole row reads broken. */
  white-space: nowrap;
}

.nw-stepnav-item--current .nw-stepnav-label { color: var(--color-gray-1000); }
.nw-stepnav-item--current .nw-stepnav-label svg { color: var(--color-orange-800); }

.nw-stepnav-connector {
  align-self: center;
  width: 1.5rem;
  border-top: 1px solid var(--color-gray-200);
  flex-shrink: 0;
}

/* ---- Two-column body: content + receipt ---- */
.nw-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

.nw-body--with-receipt {
  grid-template-columns: minmax(0, 1fr) 22rem;
}

/* The step content sits directly on the shell's white — the shell is the
   card now; an inner border would just draw a box inside a box. */
.nw-card {
  padding: 2rem 2rem 1.5rem;
}

/* ---- Step header (icon + title + subtitle + role selector + toggle) ---- */
.nw-step-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  /* Tight row-gap: on the rare width where the controls do wrap, the second
     row hugs the title block instead of floating in a band of air. */
  gap: 0.75rem 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

/* The title sets the block's floor; the subtitle wraps inside it instead of
   widening the block and shoving the controls off the row. When title +
   controls genuinely don't fit, the controls wrap below, right-aligned —
   the title never breaks mid-phrase. */
.nw-step-header > div:first-child {
  flex: 1 1 0;
  min-width: min-content;
}

.nw-step-header .nw-step-title { white-space: nowrap; }

.nw-step-title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  /* 22px keeps the title commanding while letting the longest role titles
     ("Ofensiva da Loja (Gerente)") share the row with the controls. */
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-gray-1000);
}

.nw-step-subtitle {
  font-size: 0.9375rem;
  color: var(--color-gray-800);
  margin-top: 0.25rem;
}

.nw-header-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  /* When the header does wrap (small screens), the controls row keeps the
     right edge instead of dangling left-aligned under the title. */
  margin-left: auto;
}

/* ---- Role selector (three icon buttons) ---- */
.nw-role-select { display: flex; gap: 0.5rem; }

.nw-role-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.875rem;
  border: 1px solid var(--color-gray-200);
  background: var(--color-white);
  color: var(--color-gray-800);
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.nw-role-icon[data-active="true"] {
  border-color: var(--color-orange-800);
  color: var(--color-orange-800);
}

.nw-role-icon[data-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}

.nw-role-icon-check {
  position: absolute;
  top: -0.375rem;
  right: -0.375rem;
  width: 1rem;
  height: 1rem;
  border-radius: 9999px;
  background: var(--color-green-500, #22c55e);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Pillar enable toggle ---- */
.nw-pillar-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  border-radius: 0.875rem;
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
}

.nw-pillar-toggle-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-gray-900);
}

.nw-switch {
  position: relative;
  width: 2.75rem;
  height: 1.5rem;
  border-radius: 9999px;
  background: var(--color-gray-300);
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
  flex-shrink: 0;
}

.nw-switch::after {
  content: "";
  position: absolute;
  top: 0.1875rem;
  left: 0.1875rem;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 9999px;
  background: white;
  transition: transform 0.15s ease;
}

[data-enabled="true"] .nw-switch { background: var(--color-orange-800); }
[data-enabled="true"] .nw-switch::after { transform: translateX(1.25rem); }

.nw-pillar--off { opacity: 0.5; pointer-events: none; }

/* ---- Accordion sections ---- */
.nw-section {
  border: 1px solid var(--color-gray-200);
  border-radius: 1rem;
  margin-top: 1rem;
  background: var(--color-white);
  position: relative;
}

/* Short vertical connectors bridging the gap between stacked sections
   (frames 07/14/21: one line ~2.5rem in from each edge). */
.nw-section + .nw-section::before,
.nw-section + .nw-section::after {
  content: "";
  position: absolute;
  top: calc(-1rem - 1px);
  height: 1rem;
  width: 1px;
  background: var(--color-gray-200);
}

.nw-section + .nw-section::before { left: 2.5rem; }
.nw-section + .nw-section::after { right: 2.5rem; }

.nw-section[data-state="locked"] {
  border-style: dashed;
  background: var(--color-gray-50);
}

.nw-section-summary,
.nw-section-locked { display: none; }

.nw-section[data-state="complete"] .nw-section-summary { display: flex; }
.nw-section[data-state="locked"] .nw-section-locked { display: flex; }
.nw-section[data-state="open"] .nw-section-body { display: block; }
/* Review sections are native <details> — their bodies are shown/hidden by the
   element itself, not by the accordion's data-state machine. */
.nw-section:not([data-state="open"]):not(.nw-review-section) .nw-section-body { display: none; }

.nw-section-summary,
.nw-section-locked {
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
}

.nw-section-summary-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 600;
  color: var(--color-gray-1000);
}

.nw-section-locked-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 600;
  color: var(--color-gray-500);
}

.nw-section-locked-hint { font-size: 0.875rem; color: var(--color-gray-500); }

.nw-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.5rem;
  background: var(--color-green-500, #22c55e);
  color: white;
  flex-shrink: 0;
}

.nw-edit-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.9375rem;
  color: var(--color-gray-800);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
}

.nw-edit-link:hover { color: var(--color-gray-1000); }

.nw-section-body { padding: 1.5rem; }

.nw-section-heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-gray-1000);
}

.nw-section-desc {
  font-size: 0.875rem;
  color: var(--color-gray-800);
  margin: 0.25rem 0 1.25rem;
}

/* ---- Field primitives ---- */
.nw-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-gray-1000);
  margin-bottom: 0.5rem;
}

/* Label with a leading glyph (podium medals). Tailwind's .flex lives in a
   @layer and loses to the unlayered display: block above — the inline layout
   must be authored here, not with utilities. */
.nw-label--inline {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.nw-input {
  width: 100%;
  height: 3rem;
  padding: 0 1rem;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.625rem;
  background: var(--color-white);
  font-size: 0.875rem;
}

.nw-input:focus {
  outline: none;
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--color-orange-800);
}

.nw-input-money { display: flex; align-items: center; gap: 0.5rem; }

.nw-money-prefix {
  padding-left: 1rem;
  color: var(--color-gray-800);
  font-size: 0.875rem;
}

.nw-hint { font-size: 0.75rem; color: var(--color-gray-500); margin-top: 0.375rem; }
/* A consequence the admin should read once (a past start counts past sales):
   hint-sized, in the body ink rather than the placeholder gray, never red. */
.nw-hint--note { color: var(--color-gray-900); }
.nw-field-error { font-size: 0.75rem; color: var(--color-red-600, #dc2626); margin-top: 0.375rem; }

/* ---- Choice cards (metric, funding, frequency, definition) ---- */
.nw-choice-grid {
  display: grid;
  gap: 0.75rem;
}

.nw-choice-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nw-choice-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.nw-choice {
  border: 1px solid var(--color-gray-200);
  border-radius: 0.625rem;
  padding: 0.875rem 1rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.nw-choice[data-selected="true"] { border-color: var(--color-orange-800); }
.nw-choice[data-disabled="true"] { opacity: 0.45; pointer-events: none; }

.nw-choice-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-gray-1000);
}

.nw-choice-desc { font-size: 0.75rem; color: var(--color-gray-800); margin-top: 0.25rem; }

.nw-choice-box {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 0.3125rem;
  border: 2px solid var(--color-gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: transparent;
}

.nw-choice[data-selected="true"] .nw-choice-box {
  border-color: var(--color-green-500, #22c55e);
  background: var(--color-green-500, #22c55e);
  color: white;
}

/* ---- Steppers ---- */
.nw-stepper { display: inline-flex; align-items: stretch; gap: 0.5rem; }

.nw-stepper-btn {
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.625rem;
  background: var(--color-white);
  color: var(--color-gray-900);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nw-stepper-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.nw-stepper-value {
  min-width: 6rem;
  height: 3rem;
  border: 1px solid var(--color-orange-800);
  border-radius: 0.625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 600;
}

/* ---- Meta tiles ---- */
.nw-tiles { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.5rem; }

.nw-tile {
  border: 1px solid var(--color-gray-200);
  border-radius: 1.25rem;
  padding: 0.875rem 1rem;
  min-width: 12rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-decoration: none;
  color: var(--color-gray-1000);
}

.nw-tile--selected { border-color: var(--color-orange-800); }

/* The tile's link is a child (the delete form sits beside it, outside the
   anchor); it inherits the tile's text styling and takes the flexible width. */
.nw-tile-link { flex: 1; text-decoration: none; color: inherit; }

.nw-tile-name { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.875rem; }
.nw-tile-sub { font-size: 0.75rem; color: var(--color-gray-500); margin-top: 0.125rem; }

.nw-tile--new {
  border-style: dashed;
  color: var(--color-gray-700);
  justify-content: center;
  font-weight: 500;
  font-size: 0.875rem;
}

/* ---- Empty state ---- */
.nw-empty {
  border: 1px dashed var(--color-gray-200);
  border-radius: 1rem;
  background: var(--color-gray-50);
  padding: 3.5rem 1.5rem;
  text-align: center;
  color: var(--color-gray-800);
}

.nw-empty-icon { color: var(--color-orange-800); display: flex; justify-content: center; margin-bottom: 1rem; }
.nw-empty-title { font-weight: 700; color: var(--color-gray-900); }
.nw-empty-desc { font-size: 0.875rem; margin: 0.25rem 0 1.25rem; }

.nw-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border-radius: 9999px;
  border: 1px solid var(--color-gray-300);
  background: var(--color-white);
  color: var(--color-gray-900);
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  text-decoration: none;
}

.nw-btn-outline:hover { background: var(--color-gray-50); }

.nw-btn-dark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  border: none;
  background: var(--color-gray-1000);
  color: white;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  text-decoration: none;
}

.nw-btn-dark:hover { background: var(--color-gray-950); }

/* Step-level advance CTAs disabled by wizard-accordion until every section
   completes (frames 01/03/05: gray, non-interactive). */
.nw-btn-outline:disabled,
.nw-btn-dark:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.nw-btn-outline:focus-visible,
.nw-btn-dark:focus-visible,
.nw-switch:focus-visible,
.nw-role-icon:focus-visible,
.nw-stepper-btn:focus-visible,
.nw-edit-link:focus-visible,
.nw-link-accent:focus-visible,
.nw-chip-x:focus-visible,
.nw-choice:focus-within {
  outline: 2px solid var(--color-orange-800);
  outline-offset: 2px;
}

.nw-section-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.5rem;
}

.nw-step-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.nw-step-footer-muted {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--color-gray-500);
  font-size: 0.9375rem;
  text-decoration: none;
}

/* ---- Orçamento receipt (right sidebar) ---- */
/* Zigzag receipt-paper teeth top and bottom (frames 19-34): each band layer
   punches transparent triangular notches; the middle layer keeps the body. */
.nw-receipt {
  /* One step darker than the page gray: inside the white shell the panel
     must read as its own material, not as a hole in the card. */
  background: var(--color-gray-100);
  border-radius: 0.5rem;
  padding: 2rem 1.5rem;
  align-self: start;
  --nw-tooth-w: 22px; /* half period */
  --nw-tooth-h: 14px; /* 115deg = 2 × atan(22/14) */
  -webkit-mask:
    conic-gradient(from -57.5deg at 50% 100%, #0000 115deg, #000 0) 50% 0 / calc(var(--nw-tooth-w) * 2) var(--nw-tooth-h) repeat-x,
    conic-gradient(from 122.5deg at 50% 0, #0000 115deg, #000 0) 50% 100% / calc(var(--nw-tooth-w) * 2) var(--nw-tooth-h) repeat-x,
    linear-gradient(#000, #000) 0 var(--nw-tooth-h) / 100% calc(100% - var(--nw-tooth-h) * 2) no-repeat;
  mask:
    conic-gradient(from -57.5deg at 50% 100%, #0000 115deg, #000 0) 50% 0 / calc(var(--nw-tooth-w) * 2) var(--nw-tooth-h) repeat-x,
    conic-gradient(from 122.5deg at 50% 0, #0000 115deg, #000 0) 50% 100% / calc(var(--nw-tooth-w) * 2) var(--nw-tooth-h) repeat-x,
    linear-gradient(#000, #000) 0 var(--nw-tooth-h) / 100% calc(100% - var(--nw-tooth-h) * 2) no-repeat;
}

/* The receipt sits on a near-identical page gray — a drop-shadow on the
   wrapper defines its edge while following the torn-paper silhouette
   (a border can't: the mask would clip it flat across the teeth). */
.nw-receipt-shadow {
  filter: drop-shadow(0 1px 2px rgba(23, 23, 23, 0.05));
}

.nw-receipt-title { font-size: 1.25rem; font-weight: 700; color: var(--color-gray-1000); margin: 0.75rem 0 1.25rem; }

/* Collapsible group card (native <details>): tinted icon + labels + amount +
   rotating chevron on the summary, line items in the body (frames 20/22/34). */
.nw-receipt-group {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 0.875rem;
  margin-bottom: 0.875rem;
}

.nw-receipt-group-head {
  display: flex;
  /* Top-aligned so the amount and chevron sit on the group name's line —
     centering floats them between the name and its meta line below. */
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  cursor: pointer;
  list-style: none;
}

.nw-receipt-group-head::-webkit-details-marker { display: none; }

.nw-receipt-group-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  flex-shrink: 0;
  /* The icon alone stays centered against the two-line label block. */
  align-self: center;
}

/* Support-palette tints. Numbering follows the Support/N ramp in Figma. */
.nw-tint-blue { background: color-mix(in srgb, var(--color-support-1) 10%, transparent); color: var(--color-support-1); }
.nw-tint-green { background: color-mix(in srgb, var(--color-support-5) 10%, transparent); color: var(--color-support-5); }
.nw-tint-orange { background: var(--color-orange-100); color: var(--color-orange-800); }

.nw-receipt-group-labels { flex: 1; min-width: 0; }
.nw-receipt-group-name { display: block; font-weight: 600; color: var(--color-gray-1000); font-size: 0.875rem; line-height: 1.25rem; }
/* The meta never wraps — a two-line "3 Metas • 2 / perfis" stretches the head
   and floats the amount off the title's line. Ellipsis is the floor. */
.nw-receipt-group-meta {
  display: block;
  font-size: 0.625rem;
  color: var(--color-gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nw-receipt-group-value {
  font-weight: 700;
  color: var(--color-gray-1000);
  font-size: 0.875rem;
  line-height: 1.25rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.nw-receipt-chevron { color: var(--color-gray-500); flex-shrink: 0; transition: transform 0.15s ease; margin-top: 0.125rem; }
.nw-receipt-group[open] .nw-receipt-chevron { transform: rotate(180deg); }

.nw-receipt-group-body { padding: 0 1rem 0.875rem; }

/* Dotted leader between a line's label and value (frames 20/22/34). */
.nw-receipt-leader {
  flex: 1 1 1.5rem;
  min-width: 1rem;
  border-bottom: 2px dotted var(--color-gray-300);
  transform: translateY(0.2em);
}

.nw-receipt-role {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.875rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-gray-100);
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--color-gray-1000);
}

.nw-receipt-group-body > .nw-receipt-role:first-child { margin-top: 0; }

.nw-receipt-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--color-gray-900);
}

.nw-receipt-line-label { display: flex; align-items: center; gap: 0.375rem; }

.nw-receipt-summary {
  margin-top: 1.5rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-gray-900);
}

.nw-receipt-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.75rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-gray-900);
}

.nw-receipt-divider {
  border: none;
  border-top: 1px dashed var(--color-gray-300);
  margin: 1.25rem 0;
}

.nw-receipt-total-label {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-gray-900);
}

.nw-receipt-total-value {
  font-size: 2rem;
  font-weight: 600;
  color: var(--color-gray-1000);
  margin-top: 0.25rem;
}

.nw-receipt-empty { text-align: center; color: var(--color-gray-900); padding: 1.5rem 0; }
.nw-receipt-empty-icon { color: var(--color-orange-800); display: flex; justify-content: center; margin-bottom: 0.75rem; }

/* ---- Revisar (read-only review) ---- */
.nw-review-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.nw-review-section { margin-bottom: 1.5rem; }
.nw-review-block { padding: 1.5rem 0; border-top: 1px dashed var(--color-gray-200); }
/* The section body already pads the top — don't stack a second 1.5rem on it. */
.nw-review-block:first-child { border-top: none; padding-top: 0; }

/* Collapsible section header (frames 33-34): title + chevron toggle, no Editar. */
.nw-review-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  list-style: none;
}
.nw-review-summary::-webkit-details-marker { display: none; }
.nw-review-chevron {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-gray-400);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.nw-review-section[open] > .nw-review-summary .nw-review-chevron { transform: rotate(180deg); }

/* Inner block header: icon + title + description, Editar on the right. */
.nw-review-blockhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.nw-review-blocktitle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--color-gray-1000);
}
.nw-review-blocktitle svg { color: var(--color-gray-500); flex-shrink: 0; }
.nw-review-blockdesc { font-size: 0.875rem; color: var(--color-gray-500); margin-top: 0.25rem; }

/* Read-only chip container with a "N selecionadas" caption (frame 34). */
.nw-review-chipbox {
  margin-top: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.875rem;
}
.nw-review-chipbox-label {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  font-size: 0.8125rem;
}
.nw-review-chipbox-label strong { font-weight: 600; color: var(--color-gray-1000); }
.nw-review-chipbox-label span { color: var(--color-gray-500); }

.nw-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--color-support-1) 8%, transparent);
  color: var(--color-support-1);
  font-size: 0.75rem;
  font-weight: 500;
}

.nw-chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-left: 0.125rem;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
}

.nw-chip--more {
  border: none;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

/* ---- Support-palette glyph tints (choice-card icons, frames 11/19/28/30) ----
   Named tints for the wizard's choice-card glyphs. `text-support-*` utilities
   work here now that account.css no longer forces `color: inherit` on admin
   content; these stay because the wizard refers to them by name. Note they are
   unlayered, so they beat a `text-*` utility on the same element. */
.nw-glyph-blue { color: var(--color-support-1); }
.nw-glyph-purple { color: var(--color-support-2); }
.nw-glyph-green { color: var(--color-support-5); }

/* Pool-picker summary row: muted count + separator (frames 04/14). */
.nw-pool-count { color: var(--color-gray-800); }
.nw-pool-sep { color: var(--color-gray-400); }

/* ---- Accent text link ("+ Adicionar mais uma posição", frame 21) ---- */
.nw-link-accent {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: none;
  border: none;
  padding: 0;
  color: var(--color-orange-800);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}

.nw-link-accent:hover { color: var(--color-orange-900); }

.nw-review-readonly { pointer-events: none; }

/* Read-only input replica (Revisar: Premiação Total, podium positions). */
.nw-review-display {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 3rem;
  padding: 0 1rem;
  margin-top: 0.5rem;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.625rem;
  background: var(--color-white);
  font-size: 0.875rem;
  color: var(--color-gray-1000);
}

.nw-review-display-affix { color: var(--color-gray-800); }
.nw-review-display-value { flex: 1; min-width: 0; }

.nw-review-pos-label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-gray-1000);
}

/* "RESUMO:" footer of a ranking role block (frame 34). */
.nw-review-resumo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.875rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--color-gray-200);
  font-size: 0.8125rem;
  color: var(--color-gray-800);
}

.nw-review-resumo-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-gray-500);
}

.nw-review-resumo-item { display: inline-flex; align-items: center; gap: 0.375rem; }
.nw-review-resumo-item strong { color: var(--color-gray-1000); font-weight: 600; }
.nw-review-resumo-sep { color: var(--color-gray-300); }

.nw-review-resumo-ok {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--color-green-600, #16a34a);
  font-weight: 600;
}

/* ---- Ofensiva rule explanation panel (frames 30/31/33-34) ---- */
.nw-ofx {
  border: 1px dashed var(--color-gray-300);
  border-radius: 1rem;
  background: var(--color-gray-50);
  padding: 1.25rem;
}

.nw-ofx-title {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-gray-500);
  margin-bottom: 0.375rem;
}

.nw-ofx-sentence { font-size: 0.875rem; color: var(--color-gray-800); }
.nw-ofx-sentence strong { text-decoration: underline; }

.nw-ofx-divider {
  border: none;
  border-top: 1px solid var(--color-gray-200);
  margin: 1rem 0;
}

.nw-ofx-formula {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.nw-ofx-formula-term { font-size: 0.8125rem; font-weight: 700; color: var(--color-gray-1000); }
.nw-ofx-sep { color: var(--color-gray-300); font-weight: 400; }

.nw-ofx-badge { display: inline-flex; flex-shrink: 0; }
.nw-ofx-badge svg { width: 1.375rem; height: 1.375rem; }
.nw-ofx-badge[data-on="true"] { color: var(--color-orange-800); }
.nw-ofx-badge[data-on="false"] { color: var(--color-gray-400); }

.nw-ofx-examples-title { margin: 1.25rem 0 0.25rem; }

.nw-ofx-row { display: flex; align-items: flex-start; gap: 0.375rem; margin-top: 0.75rem; }

.nw-ofx-day {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  width: 2.125rem;
  flex-shrink: 0;
}

.nw-ofx-day > svg { width: 1.75rem; height: 1.75rem; color: var(--color-gray-400); }
.nw-ofx-day[data-on="true"] > svg { color: var(--color-orange-800); }

.nw-ofx-day-count {
  position: absolute;
  top: -0.3125rem;
  right: 0;
  min-width: 0.875rem;
  height: 0.875rem;
  padding: 0 0.125rem;
  border-radius: 9999px;
  background: var(--color-red-500, #ef4444);
  color: white;
  font-size: 0.5625rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nw-ofx-day[data-on="false"] .nw-ofx-day-count { display: none; }

.nw-ofx-day-count--legend { position: static; }

.nw-ofx-day-label {
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-gray-500);
}

.nw-ofx-eq { align-self: center; margin: 0 0.25rem; padding-bottom: 0.875rem; color: var(--color-gray-500); font-weight: 700; font-size: 0.8125rem; }

.nw-ofx-flame { width: 1.5rem; height: 1.5rem; flex-shrink: 0; color: var(--color-orange-800); }

.nw-ofx-row > .nw-ofx-flame,
.nw-ofx-row > .nw-ofx-result { align-self: center; margin-bottom: 0.875rem; }

.nw-ofx-result { font-size: 0.8125rem; color: var(--color-gray-700); }

.nw-ofx-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-gray-200);
  font-size: 0.75rem;
  color: var(--color-gray-700);
}

.nw-ofx-legend-title {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-gray-500);
}

.nw-ofx-legend-item { display: inline-flex; align-items: center; gap: 0.375rem; }
.nw-ofx-legend .nw-ofx-flame { width: 1.25rem; height: 1.25rem; }

@media (max-width: 900px) {
  .nw-body--with-receipt { grid-template-columns: minmax(0, 1fr); }
  .nw-stepnav { flex-wrap: wrap; }
  .nw-stepnav-connector { display: none; }
  .nw-choice-grid--3 { grid-template-columns: minmax(0, 1fr); }
  .nw-step-header .nw-step-title { white-space: normal; }
  .nw-shell { padding: 1rem; border-radius: 1rem; }
  .nw-card { padding: 1rem 0.5rem; }
}