/* Signal-to-action flow section for OpsGrid exception pages.
   Loaded only by pages whose generator entry has a `flow` object (fuel-surcharge-alerts today).
   Relies on the :root tokens defined in exception-page.css, which loads first. */

.xf { background: var(--surface); padding: 3.25rem 1.5rem; border-bottom: 1px solid var(--border) }
.xf-inner { max-width: 1040px; margin: 0 auto }
.xf-eyebrow { font-size: 0.63rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ah); font-weight: 600; margin-bottom: 0.55rem }
.xf-title { font-family: var(--serif); font-size: clamp(1.4rem, 3.4vw, 1.95rem); font-weight: 400; color: var(--ink); line-height: 1.2; margin-bottom: 0.6rem }
.xf-sub { font-size: 0.92rem; color: var(--ink2); max-width: 680px; line-height: 1.65; margin-bottom: 1.6rem }

/* Scenario strip */
.xf-scenario { background: var(--navy); border-radius: var(--rl); padding: 1.1rem 1.25rem 1rem; margin-bottom: 2rem }
.xf-scenario-label { font-size: 0.63rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.7); font-weight: 600; margin-bottom: 0.7rem }
.xf-inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.9rem 1.25rem }
.xf-input dt { font-size: 0.72rem; color: rgba(255,255,255,0.7); margin-bottom: 0.15rem }
.xf-input dd { font-family: var(--serif); font-size: 1.3rem; color: #fff; line-height: 1.2 }
.xf-input--warn dd { color: var(--warn) }
.xf-config { font-size: 0.78rem; color: rgba(255,255,255,0.7); margin-top: 0.85rem; padding-top: 0.75rem; border-top: 1px solid rgba(255,255,255,0.1) }

/* Stages */
.xf-stages { list-style: none; position: relative; margin-bottom: 2.25rem }
.xf-stage { display: grid; grid-template-columns: 2.4rem 1fr; gap: 0 1rem; padding-bottom: 1.6rem; position: relative }
.xf-stage:last-child { padding-bottom: 0 }
.xf-stage::before { content: ''; position: absolute; left: 1.15rem; top: 2.4rem; bottom: 0; width: 1px; background: var(--border) }
.xf-stage:last-child::before { display: none }
.xf-num { width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--accent); color: #fff; font-family: var(--serif); font-style: italic; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.xf-stage-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.8rem; margin-bottom: 0.4rem }
.xf-stage-name { font-family: var(--serif); font-size: 1.35rem; font-weight: 400; color: var(--ink); line-height: 1.2 }
.xf-stage-name a { color: inherit; text-decoration: none }
.xf-stage-name a:hover { text-decoration: underline }
.xf-actor { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink3); font-weight: 600 }
.xf-body { font-size: 0.92rem; color: var(--ink2); line-height: 1.7; max-width: 680px }
.xf-result { font-size: 0.85rem; color: var(--ink); background: var(--s2); border-left: 3px solid var(--accent); border-radius: 0 var(--r) var(--r) 0; padding: 0.55rem 0.8rem; margin-top: 0.75rem; max-width: 680px }
.xf-result strong { font-weight: 600 }

/* Illustrative Teams card */
.xf-card { background: #fff; border: 1px solid var(--border); border-radius: var(--rl); margin-top: 0.9rem; max-width: 560px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.04) }
.xf-card-bar { background: var(--navy); color: #fff; padding: 0.55rem 0.9rem; display: flex; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; font-size: 0.78rem }
.xf-card-bar strong { font-weight: 600 }
.xf-card-bar span { color: rgba(255,255,255,0.75) }
.xf-card-rows { padding: 0.75rem 0.9rem 0.25rem }
.xf-card-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.3rem 0; font-size: 0.84rem; border-bottom: 1px solid var(--border) }
.xf-card-row:last-child { border-bottom: none }
.xf-card-row dt { color: var(--ink3) }
.xf-card-row dd { color: var(--ink); text-align: right; font-weight: 500 }
.xf-card-opts { list-style: none; padding: 0.5rem 0.9rem 0.8rem; display: grid; gap: 0.5rem }
.xf-card-opt { border: 1px solid var(--border); border-radius: var(--r); padding: 0.5rem 0.7rem; font-size: 0.82rem; color: var(--ink2); line-height: 1.5 }
.xf-card-opt strong { color: var(--ink); font-weight: 600; display: block }
.xf-card-note { font-size: 0.74rem; color: var(--ink3); padding: 0 0.9rem 0.8rem }

/* Tables */
.xf-table-wrap { overflow-x: auto; margin-top: 0.9rem; max-width: 680px }
.xf-table { width: 100%; border-collapse: collapse; font-size: 0.85rem }
.xf-table caption { text-align: left; font-size: 0.74rem; color: var(--ink3); padding-bottom: 0.4rem }
.xf-table th, .xf-table td { text-align: left; vertical-align: top; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--border) }
.xf-table thead th { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink3); font-weight: 600; border-bottom: 1px solid rgba(0,0,0,0.2) }
.xf-table tbody th { font-weight: 600; color: var(--ink); width: 28% }
.xf-table td { color: var(--ink2) }

.xf-compare-title { font-family: var(--serif); font-size: 1.35rem; font-weight: 400; color: var(--ink); margin-bottom: 0.2rem }
.xf-compare .xf-table-wrap { max-width: 100% }
.xf-compare .xf-table tbody th { width: 14% }
.xf-compare .xf-table td:last-child { color: var(--ink) }

@media (max-width: 640px) {
  .xf { padding: 2.5rem 1.25rem }
  .xf-stage { grid-template-columns: 1fr; gap: 0.5rem }
  .xf-stage::before { display: none }
  .xf-card-row { flex-direction: column; gap: 0 }
  .xf-card-row dd { text-align: left }
}