/* ============================================================
   Editorial pass · Reimbursements view (PR 1)
   Scoped to #view-reimbursements[data-editorial="reimbursements"]

   Matches the signals/resources editorial pattern (Gambetta
   masthead + Public Sans body). Brand v2.01 colors only:
     STONE  background  → var(--cream)   (#E8E6E0)
     FOREST primary CTA → var(--moss)    (#11443B)
     WALNUT stale ribbon→ var(--walnut)  (#B8392B — soft alert)
     INK    text        → var(--ink-9) / var(--ink-7)
   Stale ribbon is the only Walnut surface in this view.
   ============================================================ */

/* Confidence pip tokens (spec checklist). */
#view-reimbursements[data-editorial="reimbursements"] {
  --reimb-confidence-high: var(--moss);
  --reimb-confidence-medium: var(--ink-7, #2D2A24);
  --reimb-confidence-low: var(--ink-4, #7E796F);
  --reimb-terra: var(--walnut, #B8392B);
}

/* Only force block layout when this view is active — otherwise leave the
   global .app-view { display:none } rule in charge. */
#view-reimbursements[data-editorial="reimbursements"].active { display: block; }

#view-reimbursements[data-editorial="reimbursements"] .reimb-view {
  display: block;
  padding: 0 0 48px;
}

/* ── View header (shared editorial masthead pattern) ─────────── */
#view-reimbursements[data-editorial="reimbursements"] .view-header {
  display: block;
  padding: 18px 0 14px;
  margin: 0 0 8px;
  border-bottom: 1px solid var(--ink-2, rgba(0,0,0,0.08));
}
#view-reimbursements[data-editorial="reimbursements"] .view-header__eyebrow {
  font-family: var(--sans, "Public Sans", system-ui, sans-serif);
  font-size: var(--type-micro, 11px);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-5, #5F5A52);
  margin: 0 0 6px;
}
#view-reimbursements[data-editorial="reimbursements"] .view-header__title {
  font-family: var(--serif, "Gambetta", Georgia, serif);
  font-weight: 400;
  font-size: var(--type-display, 32px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--ink-9, #161312);
  margin: 0 0 6px;
  font-variation-settings: "opsz" 72, "SOFT" 60;
}
#view-reimbursements[data-editorial="reimbursements"] .view-header__lede {
  font-family: var(--sans, "Public Sans", system-ui, sans-serif);
  font-size: var(--type-body, 14px);
  line-height: 1.45;
  color: var(--ink-5, #5F5A52);
  margin: 0;
}

/* ── Section heads ───────────────────────────────────────────── */
#view-reimbursements[data-editorial="reimbursements"] .reimb-section-head {
  font-family: var(--sans, "Public Sans", system-ui, sans-serif);
  font-size: var(--type-micro, 11px);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-5, #5F5A52);
  margin: 22px 0 10px;
}

/* ── Buttons ─────────────────────────────────────────────────── */
#view-reimbursements[data-editorial="reimbursements"] .reimb-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: var(--moss);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 15px;
  font-family: var(--sans, "Public Sans", system-ui, sans-serif);
  font-size: var(--type-body, 14px);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
  margin-top: 16px;
}
#view-reimbursements[data-editorial="reimbursements"] .reimb-btn-primary:hover {
  background: var(--moss-deep, #11443B);
}
#view-reimbursements[data-editorial="reimbursements"] .reimb-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--moss);
  border: 1.5px solid var(--moss);
  border-radius: 12px;
  padding: 11px 16px;
  font-family: var(--sans, "Public Sans", system-ui, sans-serif);
  font-size: var(--type-meta, 13px);
  font-weight: 500;
  cursor: pointer;
  margin-top: 12px;
  transition: background 0.15s;
}

/* ── Empty state ─────────────────────────────────────────────── */
#view-reimbursements[data-editorial="reimbursements"] .reimb-empty {
  padding: 24px 0 8px;
}
#view-reimbursements[data-editorial="reimbursements"] .reimb-empty-body {
  font-family: var(--sans, "Public Sans", system-ui, sans-serif);
  font-size: var(--type-body, 14px);
  color: var(--ink-5, #5F5A52);
  line-height: 1.5;
}

/* ── Stale ribbon (Walnut — soft alert, the only Walnut surface here) ─ */
#view-reimbursements[data-editorial="reimbursements"] .reimb-ribbon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(184, 57, 43, 0.10);
  border: 1px solid rgba(184, 57, 43, 0.30);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 14px 0 6px;
  font-family: var(--sans, "Public Sans", system-ui, sans-serif);
  font-size: var(--type-meta, 13px);
  color: var(--reimb-terra, #B8392B);
}
#view-reimbursements[data-editorial="reimbursements"] .reimb-ribbon-btn {
  flex-shrink: 0;
  background: var(--reimb-terra, #B8392B);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 7px 16px;
  font-family: var(--sans, "Public Sans", system-ui, sans-serif);
  font-size: var(--type-meta, 13px);
  font-weight: 500;
  cursor: pointer;
}

/* ── Situation summary + prefill chips ───────────────────────── */
#view-reimbursements[data-editorial="reimbursements"] .reimb-situation {
  margin: 8px 0 4px;
}
#view-reimbursements[data-editorial="reimbursements"] .reimb-prefill-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
#view-reimbursements[data-editorial="reimbursements"] .reimb-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--cream, #E8E6E0);
  border: 1px solid var(--ink-2, #BFB9AC);
  border-radius: 999px;
  padding: 7px 12px;
  font-family: var(--sans, "Public Sans", system-ui, sans-serif);
  font-size: var(--type-meta, 13px);
  color: var(--ink-9, #161312);
}
#view-reimbursements[data-editorial="reimbursements"] .reimb-chip-prov {
  font-size: var(--type-micro, 11px);
  color: var(--ink-4, #7E796F);
}
#view-reimbursements[data-editorial="reimbursements"] .reimb-chip-edit {
  background: none;
  border: none;
  color: var(--moss);
  font-family: var(--sans, "Public Sans", system-ui, sans-serif);
  font-size: var(--type-micro, 11px);
  font-weight: 500;
  cursor: pointer;
  padding: 0;
}
#view-reimbursements[data-editorial="reimbursements"] .reimb-assessed {
  font-family: var(--sans, "Public Sans", system-ui, sans-serif);
  font-size: var(--type-micro, 11px);
  color: var(--ink-4, #7E796F);
  margin-top: 8px;
}

/* ── Question flow ───────────────────────────────────────────── */
#view-reimbursements[data-editorial="reimbursements"] .reimb-q {
  margin: 0 0 18px;
}
#view-reimbursements[data-editorial="reimbursements"] .reimb-q-label {
  font-family: var(--sans, "Public Sans", system-ui, sans-serif);
  font-size: var(--type-body, 14px);
  font-weight: 500;
  color: var(--ink-9, #161312);
  margin: 0 0 8px;
}
#view-reimbursements[data-editorial="reimbursements"] .reimb-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#view-reimbursements[data-editorial="reimbursements"] .reimb-option {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--cream, #E8E6E0);
  border: 1.5px solid var(--ink-2, #BFB9AC);
  border-radius: 11px;
  padding: 11px 14px;
  font-family: var(--sans, "Public Sans", system-ui, sans-serif);
  font-size: var(--type-body, 14px);
  color: var(--ink-9, #161312);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
#view-reimbursements[data-editorial="reimbursements"] .reimb-option:hover {
  border-color: var(--moss);
}
#view-reimbursements[data-editorial="reimbursements"] .reimb-input {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid var(--ink-2, #BFB9AC);
  border-radius: 12px;
  padding: 13px 16px;
  font-family: var(--sans, "Public Sans", system-ui, sans-serif);
  font-size: var(--type-body, 14px);
  color: var(--ink-9, #161312);
  background: #fff;
  outline: none;
}
#view-reimbursements[data-editorial="reimbursements"] .reimb-input:focus {
  border-color: var(--moss);
}

/* ── Program cards ───────────────────────────────────────────── */
#view-reimbursements[data-editorial="reimbursements"] .reimb-programs {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
}
#view-reimbursements[data-editorial="reimbursements"] .reimb-card {
  background: var(--cream, #E8E6E0);
  border: 1px solid var(--ink-2, #BFB9AC);
  border-left: 4px solid var(--moss);
  border-radius: 12px;
  padding: 18px 18px 16px;
}
#view-reimbursements[data-editorial="reimbursements"] .reimb-card-name {
  font-family: var(--serif, "Gambetta", Georgia, serif);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
  color: var(--ink-9, #161312);
  margin: 0 0 4px;
}
#view-reimbursements[data-editorial="reimbursements"] .reimb-card-amount {
  font-family: var(--sans, "Public Sans", system-ui, sans-serif);
  font-size: var(--type-body, 14px);
  font-weight: 600;
  color: var(--moss-text, #11443B);
  margin: 0 0 10px;
}
#view-reimbursements[data-editorial="reimbursements"] .reimb-pip {
  display: inline-block;
  font-family: var(--sans, "Public Sans", system-ui, sans-serif);
  font-size: var(--type-micro, 11px);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: capitalize;
  padding: 3px 10px;
  border-radius: 999px;
}
#view-reimbursements[data-editorial="reimbursements"] .reimb-pip--high {
  color: #fff;
  background: var(--reimb-confidence-high, var(--moss));
}
#view-reimbursements[data-editorial="reimbursements"] .reimb-pip--medium {
  color: var(--reimb-confidence-medium, #2D2A24);
  background: rgba(45, 42, 36, 0.10);
}
#view-reimbursements[data-editorial="reimbursements"] .reimb-pip--low {
  color: var(--reimb-confidence-low, #7E796F);
  background: rgba(126, 121, 111, 0.12);
}
#view-reimbursements[data-editorial="reimbursements"] .reimb-card-sub {
  font-family: var(--sans, "Public Sans", system-ui, sans-serif);
  font-size: var(--type-micro, 11px);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-5, #5F5A52);
  margin: 14px 0 6px;
}
#view-reimbursements[data-editorial="reimbursements"] .reimb-card-why ul,
#view-reimbursements[data-editorial="reimbursements"] .reimb-card-caveats ul {
  margin: 0;
  padding-left: 18px;
}
#view-reimbursements[data-editorial="reimbursements"] .reimb-card-why li,
#view-reimbursements[data-editorial="reimbursements"] .reimb-card-caveats li {
  font-family: var(--sans, "Public Sans", system-ui, sans-serif);
  font-size: var(--type-meta, 13px);
  line-height: 1.5;
  color: var(--ink-7, #2D2A24);
  margin: 0 0 4px;
}
#view-reimbursements[data-editorial="reimbursements"] .reimb-card-caveats {
  margin-top: 12px;
}
#view-reimbursements[data-editorial="reimbursements"] .reimb-card-caveats summary {
  font-family: var(--sans, "Public Sans", system-ui, sans-serif);
  font-size: var(--type-meta, 13px);
  font-weight: 500;
  color: var(--ink-5, #5F5A52);
  cursor: pointer;
  margin-bottom: 8px;
}
#view-reimbursements[data-editorial="reimbursements"] .reimb-card-cta {
  display: inline-block;
  margin-top: 14px;
  color: var(--moss);
  font-family: var(--sans, "Public Sans", system-ui, sans-serif);
  font-size: var(--type-meta, 13px);
  font-weight: 600;
  text-decoration: none;
}
#view-reimbursements[data-editorial="reimbursements"] .reimb-card-cta:hover {
  text-decoration: underline;
}

/* ── Signals (lower priority) ────────────────────────────────── */
#view-reimbursements[data-editorial="reimbursements"] .reimb-signals {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--ink-2, rgba(0,0,0,0.08));
}
#view-reimbursements[data-editorial="reimbursements"] .reimb-signal-row {
  margin: 0 0 12px;
}
#view-reimbursements[data-editorial="reimbursements"] .reimb-signal-title {
  font-family: var(--sans, "Public Sans", system-ui, sans-serif);
  font-size: var(--type-body, 14px);
  font-weight: 600;
  color: var(--ink-9, #161312);
  margin: 0 0 3px;
}
#view-reimbursements[data-editorial="reimbursements"] .reimb-signal-why {
  font-family: var(--sans, "Public Sans", system-ui, sans-serif);
  font-size: var(--type-meta, 13px);
  line-height: 1.5;
  color: var(--ink-5, #5F5A52);
}

/* ── Footer disclaimer ───────────────────────────────────────── */
#view-reimbursements[data-editorial="reimbursements"] .reimb-footer {
  font-family: var(--sans, "Public Sans", system-ui, sans-serif);
  font-size: var(--type-micro, 11px);
  line-height: 1.6;
  color: var(--ink-4, #7E796F);
  margin-top: 32px;
}