/* Stage 5 P10: the PMESC Freight Index — public pages, hub widget and staff desk.
   Uses the shared tokens (tokens.css / portal.css / site-v2.css) and the house chart colours.
   Nothing here depends on JavaScript; every state (empty, loading-free, error, success) is designed. */

/* ---------- shared bits ---------- */

.fi-soft { background: var(--pm-navy-06, #f1f3f5); }

.fi-muted { color: var(--pm-navy-75, #4d6c86); }

.fi-num { text-align: right; font-variant-numeric: tabular-nums; }

.fi-sub { display: block; color: var(--pm-navy-75, #4d6c86); font-size: 0.78rem; font-weight: 400; margin-top: 0.15rem; }

.fi-none { color: var(--pm-navy-75, #4d6c86); font-size: 0.86rem; }

.fi-caption { text-align: left; padding: 0.9rem 1rem 0.4rem; font-weight: 700; color: var(--pm-navy, #123b5d); }

.fi-hint { color: var(--pm-navy-75, #4d6c86); font-size: 0.92rem; margin: 0.9rem 0 0; max-width: 52rem; }

.fi-inline-link { color: var(--pm-navy, #123b5d); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

.fi-inline-link:hover { color: #0d2c47; }

.fi-delta { display: inline-flex; align-items: baseline; gap: 0.3rem; font-weight: 700; white-space: nowrap; }

.fi-delta.is-up { color: #1c6b4b; }

.fi-delta.is-down { color: #8a4b00; }

.fi-delta-word { font-weight: 600; color: var(--pm-navy-75, #4d6c86); font-size: 0.85em; }

.fi-tag { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; font-weight: 700; padding: 0.2em 0.65em; border-radius: 999px; background: var(--pm-navy-12, #e3e7ec); color: var(--pm-navy, #123b5d); }

.fi-tag--ok { background: #e6f4ef; color: #1c6b4b; }

.fi-tag--muted { background: var(--pm-navy-12, #e3e7ec); color: var(--pm-navy-75, #4d6c86); }

.fi-tag--warn { background: #fff3d6; color: #7a5300; }

.fi-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: 1.5rem; }

.fi-actions--center { justify-content: center; }

.fi-btn { background: var(--pm-navy, #123b5d); color: #fff; border-color: var(--pm-navy, #123b5d); }

.fi-btn:hover { background: #0d2c47; border-color: #0d2c47; color: #fff; }

.fi-rule { border: 0; border-top: 1px solid var(--pm-navy-12, #e3e7ec); margin: 1.25rem 0; }

.fi-callout { margin-bottom: 1.5rem; }

.fi-callout--warn { background: #fff8e6; border-color: #f0d79a; }

.fi-withdrawn-list { margin: 0.5rem 0 0; padding-left: 1.1rem; }

.fi-withdrawn-list li + li { margin-top: 0.35rem; }

/* ---------- the "first edition coming" page ---------- */

.fi-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; margin-top: 0.5rem; }

.fi-card { background: #fff; border: 1px solid var(--pm-navy-12, #e3e7ec); border-radius: 14px; padding: 1.5rem; box-shadow: 0 1px 2px rgba(18, 59, 93, 0.04); }

.fi-card h2 { font-size: 1.15rem; color: var(--pm-navy, #123b5d); margin: 0 0 0.85rem; }

.fi-lane-list { list-style: none; margin: 0; padding: 0; }

.fi-lane-list li { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.65rem 0; border-bottom: 1px solid var(--pm-navy-12, #e3e7ec); }

.fi-lane-list li:last-child { border-bottom: 0; }

.fi-lane-name { font-weight: 700; color: var(--pm-navy, #123b5d); }

.fi-lane-code { color: var(--pm-navy-75, #4d6c86); font-size: 0.82rem; }

.fi-how { list-style: none; margin: 0 0 1rem; padding: 0; }

.fi-how li { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.45rem 0; }

.fi-how .icon { color: #1c6b4b; flex: none; margin-top: 0.2rem; }

.fi-badge { display: inline-block; background: var(--pm-navy-06, #f1f3f5); border-radius: 999px; padding: 0.3em 0.8em; font-size: 0.82rem; font-weight: 700; color: var(--pm-navy, #123b5d); }

/* ---------- composite + headline ---------- */

.fi-summary { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 2rem; align-items: start; background: #fff; border: 1px solid var(--pm-navy-12, #e3e7ec); border-radius: 16px; padding: clamp(1.4rem, 1rem + 1.5vw, 2.2rem); box-shadow: 0 1px 2px rgba(18, 59, 93, 0.04); }

.fi-summary-label { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.75rem; font-weight: 800; color: var(--pm-navy-75, #4d6c86); margin: 0 0 0.35rem; }

.fi-summary-week { color: var(--pm-navy, #123b5d); font-weight: 700; margin: 0 0 0.35rem; }

.fi-summary-value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem; font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.6rem); font-weight: 800; line-height: 1; color: var(--pm-navy, #123b5d); margin: 0 0 0.5rem; font-variant-numeric: tabular-nums; }

.fi-summary-value .fi-delta { font-size: 1rem; }

.fi-summary-none { color: var(--pm-navy-45, #94a7b6); }

.fi-published { color: var(--pm-navy-75, #4d6c86); font-size: 0.88rem; margin: 0.5rem 0 0; }

.fi-headline { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); color: var(--pm-navy, #123b5d); margin: 0 0 0.6rem; }

.fi-headline--plain { color: var(--pm-navy-75, #4d6c86); }

.fi-note { color: #26465f; margin: 0; }

/* ---------- lane table ---------- */

.fi-table-wrap { margin-top: 1.25rem; }

.fi-lane-table tbody th { white-space: normal; }

.fi-lane-table td { vertical-align: top; }

/* ---------- charts ---------- */

.fi-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 1.5rem; }

.fi-chart-card { background: #fff; border: 1px solid var(--pm-navy-12, #e3e7ec); border-radius: 14px; padding: 1.25rem 1.25rem 1rem; min-width: 0; }

.fi-chart-title { font-size: 1rem; color: var(--pm-navy, #123b5d); margin: 0 0 0.75rem; display: flex; flex-direction: column; gap: 0.15rem; }

.fi-chart-code { color: var(--pm-navy-75, #4d6c86); font-size: 0.78rem; font-weight: 500; }

.fi-chart { position: relative; }

.fi-chart svg { width: 100%; height: auto; display: block; overflow: visible; }

.fi-chart-unit { color: var(--pm-navy-75, #4d6c86); font-size: 0.78rem; margin: 0.35rem 0 0; text-align: right; }

.fi-grid { stroke: var(--pm-navy-12, #e3e7ec); stroke-width: 1; }

.fi-axis { fill: var(--pm-navy-75, #4d6c86); font-size: 12px; }

.fi-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

.fi-line-0 { stroke: var(--chart-1, #123b5d); }

.fi-line-1 { stroke: var(--chart-2, #2c6ea8); }

.fi-line-2 { stroke: var(--chart-3, #45b5e6); }

.fi-line-3 { stroke: var(--chart-4, #45b58f); }

.fi-line-4 { stroke: var(--chart-5, #8a98b8); }

.fi-line-5 { stroke: var(--chart-6, #6b8fd4); }

.fi-line-6 { stroke: var(--chart-7, #8b6bb8); }

.fi-dot { fill: #fff; stroke-width: 2.5; }

.fi-dot-0 { stroke: var(--chart-1, #123b5d); }

.fi-dot-1 { stroke: var(--chart-2, #2c6ea8); }

.fi-dot-2 { stroke: var(--chart-3, #45b5e6); }

.fi-dot-3 { stroke: var(--chart-4, #45b58f); }

.fi-dot-4 { stroke: var(--chart-5, #8a98b8); }

.fi-dot-5 { stroke: var(--chart-6, #6b8fd4); }

.fi-dot-6 { stroke: var(--chart-7, #8b6bb8); }

.fi-dot:hover { fill: var(--pm-navy-06, #f1f3f5); }

.fi-chart-table { margin-top: 0.75rem; font-size: 0.9rem; }

.fi-chart-table summary { cursor: pointer; color: var(--pm-navy, #123b5d); font-weight: 700; padding: 0.35rem 0; }

.fi-mini-table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }

.fi-mini-table th, .fi-mini-table td { text-align: left; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--pm-navy-12, #e3e7ec); font-variant-numeric: tabular-nums; }

.fi-mini-table thead th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--pm-navy-75, #4d6c86); }

.fi-mini-table th:nth-child(2), .fi-mini-table td:nth-child(2), .fi-mini-table th:nth-child(3), .fi-mini-table td:nth-child(3) { text-align: right; }

/* ---------- methodology ---------- */

.fi-method { max-width: 52rem; }

.fi-method-block { padding: 1.15rem 0; border-bottom: 1px solid var(--pm-navy-12, #e3e7ec); }

.fi-method-block:last-child { border-bottom: 0; }

.fi-method-block h2 { font-size: 1.12rem; color: var(--pm-navy, #123b5d); margin: 0 0 0.5rem; }

.fi-method-block p { margin: 0 0 0.6rem; color: #26465f; }

.fi-method-block p:last-child { margin-bottom: 0; }

/* ---------- hub widget ---------- */

.fi-widget { gap: 0.6rem; }

.fi-widget-eyebrow { margin: 0; }

.fi-widget-title { font-size: 1.1rem; color: var(--pm-navy, #123b5d); margin: 0; line-height: 1.3; }

.fi-widget-text { color: var(--pm-navy-75, #4d6c86); margin: 0; font-size: 0.94rem; }

.fi-widget-composite { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.6rem; margin: 0; }

.fi-widget-num { font-size: 2rem; font-weight: 800; line-height: 1; color: var(--pm-navy, #123b5d); font-variant-numeric: tabular-nums; }

.fi-widget-composite .fi-delta { font-size: 0.9rem; }

.fi-widget-caption { color: var(--pm-navy-75, #4d6c86); font-size: 0.8rem; }

.fi-widget-lanes { list-style: none; margin: 0.25rem 0 0; padding: 0; }

.fi-widget-lanes li { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid var(--pm-navy-12, #e3e7ec); }

.fi-widget-lanes li:last-child { border-bottom: 0; }

.fi-widget-lane { display: flex; flex-direction: column; gap: 0.1rem; font-weight: 600; color: var(--pm-navy, #123b5d); font-size: 0.92rem; }

.fi-widget-code { color: var(--pm-navy-75, #4d6c86); font-size: 0.75rem; font-weight: 500; }

.fi-widget-usd { font-weight: 700; color: var(--pm-navy, #123b5d); white-space: nowrap; font-variant-numeric: tabular-nums; }

.fi-widget-lane-delta { font-size: 0.8rem; }

.fi-widget-lane-delta.is-up { color: #1c6b4b; }

.fi-widget-lane-delta.is-down { color: #8a4b00; }

.fi-widget-link { margin-top: auto; font-weight: 700; color: var(--pm-navy, #123b5d); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- staff desk ---------- */

.fi-week-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; margin: 1.25rem 0; padding: 1rem 1.25rem; background: var(--pm-navy-06, #f1f3f5); border: 1px solid var(--pm-navy-12, #e3e7ec); border-radius: 12px; }

.fi-week-bar .field-hint { flex-basis: 100%; margin: 0; }

.fi-week-bar label { display: block; font-weight: 700; margin-bottom: 0.3rem; }

.fi-count { color: var(--pm-navy-75, #4d6c86); font-size: 0.88rem; }

.fi-notice { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.85rem 1rem; border-radius: 10px; background: var(--pm-navy-06, #f1f3f5); border: 1px solid var(--pm-navy-12, #e3e7ec); margin: 0.5rem 0 1rem; font-size: 0.94rem; }

.fi-notice .icon { flex: none; margin-top: 0.15rem; }

.fi-notice--ok { background: #e9f6ef; border-color: #bfe3cf; color: #1c5c40; }

.fi-notice--bad { background: #fdeceb; border-color: #f0c4c0; color: #8f231a; }

.fi-notice--bad strong { display: block; margin-bottom: 0.35rem; }

.fi-problem-list { margin: 0; padding-left: 1.1rem; }

.fi-problem-list li { margin-top: 0.25rem; }

.fi-row--out { background: var(--pm-navy-06, #f1f3f5); }

.fi-inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }

.fi-reason-input { max-width: 13rem; }

.fi-add { border-top: 1px solid var(--pm-navy-12, #e3e7ec); margin-top: 1rem; padding-top: 0.75rem; }

.fi-add summary { cursor: pointer; font-weight: 700; color: var(--pm-navy, #123b5d); }

.fi-form { margin-top: 1rem; }

.fi-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; margin-bottom: 1rem; }

.fi-form-grid > div { display: flex; flex-direction: column; gap: 0.3rem; }

.fi-form-wide { grid-column: 1 / -1; }

.fi-form-grid label, .fi-form > div > label { font-weight: 700; font-size: 0.9rem; }

.fi-form textarea { width: 100%; font-family: inherit; }

.fi-confirm-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 1rem; }

.fi-lane-rows { display: grid; gap: 1rem; margin-top: 1rem; }

.fi-lane-row { border: 1px solid var(--pm-navy-12, #e3e7ec); border-radius: 12px; padding: 1rem 1.15rem; background: #fff; }

.fi-lane-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem; margin-bottom: 0.75rem; }

.fi-lane-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }

.fi-switch { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; }

.fi-values-table .fi-delta { font-size: 0.9rem; }

/* ---------- small screens ---------- */

@media (max-width: 900px) {
  .fi-charts { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 800px) {
  .fi-layout, .fi-summary { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
}

@media (max-width: 700px) {
  .fi-form-grid { grid-template-columns: minmax(0, 1fr); }
  .fi-caption { padding-left: 0.9rem; }
  .fi-week-bar { flex-direction: column; align-items: stretch; }
}