/* ==========================================================
   RATE FARM — FUEL & FREIGHT WATCH
   A data-first market layer. It should feel like a monitoring
   instrument, not a news page or a promotional banner.
   ========================================================== */

.fuel-watch-hero { padding-bottom: 34px; }
.fuel-breadcrumb { display:flex; align-items:center; gap:8px; margin-bottom:22px; color:var(--text-tertiary); font-size:11px; }
.fuel-breadcrumb a { color:var(--text-secondary); text-decoration:none; }
.fuel-breadcrumb a:hover { color:var(--blue-bright); }
.fuel-breadcrumb span[aria-hidden="true"] { color:var(--border-strong); }
.fuel-watch-dashboard { padding: 34px 0 72px; }
.fuel-watch-head { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; margin-bottom:24px; }
.fuel-watch-head h2 { font-size:28px; margin:8px 0 8px; }
.fuel-watch-head p { max-width:700px; font-size:14px; line-height:1.6; }
.fuel-watch-status { display:flex; align-items:center; gap:8px; flex-shrink:0; font:500 11px/1 var(--font-data); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:.06em; }
.fuel-watch-status .dot { width:7px; height:7px; border-radius:50%; background:var(--confidence-high); box-shadow:0 0 0 4px rgba(52,192,122,.08); }
.fuel-watch-unavailable .fuel-watch-status .dot { background:var(--confidence-medium); box-shadow:0 0 0 4px rgba(232,168,62,.08); }

.fuel-market-grid { display:grid; grid-template-columns:1.35fr repeat(3,1fr); border:1px solid var(--border-strong); border-radius:var(--radius-lg); overflow:hidden; background:rgba(16,22,42,.72); box-shadow:var(--shadow-card); }
.fuel-market-card { min-height:168px; padding:24px; border-right:1px solid var(--border); display:flex; flex-direction:column; justify-content:flex-start; }
.fuel-market-card:last-child { border-right:0; }
.fuel-market-card-primary { background:linear-gradient(180deg, rgba(59,111,237,.10), rgba(59,111,237,.025)); }
.fuel-market-label { color:var(--text-tertiary); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.fuel-market-value { display:block; margin:18px 0 8px; font-size:34px; line-height:1; letter-spacing:-.03em; color:var(--text-primary); }
.fuel-market-change { min-height:18px; font:500 11px/1.4 var(--font-data); color:var(--text-secondary); }
.fuel-market-meta { margin-top:auto; padding-top:14px; color:var(--text-tertiary); font-size:11.5px; line-height:1.45; }
.fuel-context { margin-top:12px; padding:16px 18px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--bg-raised); display:flex; align-items:center; justify-content:space-between; gap:20px; }
.fuel-context-label { display:block; margin-bottom:4px; color:var(--text-tertiary); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; }
.fuel-context a { color:var(--text-primary); font-size:13.5px; font-weight:600; }
.fuel-context a:hover { color:var(--blue-bright); }
.fuel-context-source { flex-shrink:0; color:var(--text-tertiary); font:500 11px/1 var(--font-data); }
.fuel-source-line { display:flex; flex-wrap:wrap; gap:10px 16px; margin-top:12px; color:var(--text-tertiary); font-size:11px; }
.fuel-source-line a { color:var(--text-tertiary); text-decoration:underline; text-decoration-color:var(--border-strong); text-underline-offset:2px; }
.fuel-source-line a:hover { color:var(--text-secondary); text-decoration-color:var(--text-secondary); }


.fuel-current-section { padding:76px 0; border-top:1px solid var(--border); }
.fuel-current-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,.72fr); gap:54px; align-items:start; }
.fuel-current-copy h2 { font-size:30px; margin:10px 0 16px; max-width:650px; }
.fuel-current-copy p { max-width:700px; font-size:15px; line-height:1.75; margin-bottom:16px; }
.fuel-current-note { margin-top:24px; padding:18px 20px; border-left:2px solid var(--blue-bright); background:rgba(59,111,237,.06); border-radius:0 var(--radius-md) var(--radius-md) 0; }
.fuel-current-note strong { display:block; margin-bottom:6px; font-size:13px; color:var(--text-primary); }
.fuel-current-note span { display:block; font-size:13px; line-height:1.65; color:var(--text-secondary); }
.fuel-current-sources { display:grid; gap:12px; }
.fuel-source-card { padding:19px 20px; border:1px solid var(--border); border-radius:var(--radius-lg); background:rgba(16,22,42,.35); }
.fuel-source-label { display:block; margin-bottom:7px; color:var(--text-tertiary); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; }
.fuel-source-card a { color:var(--text-primary); font-size:13px; font-weight:650; }
.fuel-source-card a:hover { color:var(--blue-bright); }
.fuel-source-card p { margin-top:8px; color:var(--text-tertiary); font-size:12px; line-height:1.55; }
.fuel-faq-section { padding:0 0 76px; }
.fuel-faq-list { border-top:1px solid var(--border); }
.fuel-faq-list details { border-bottom:1px solid var(--border); }
.fuel-faq-list summary { cursor:pointer; list-style:none; padding:20px 0; color:var(--text-primary); font-size:15px; font-weight:650; }
.fuel-faq-list summary::-webkit-details-marker { display:none; }
.fuel-faq-list summary::after { content:"+"; float:right; color:var(--text-tertiary); font:400 20px/1 var(--font-data); }
.fuel-faq-list details[open] summary::after { content:"–"; }
.fuel-faq-list details p { max-width:780px; padding:0 40px 20px 0; color:var(--text-secondary); font-size:13.5px; line-height:1.7; }
.fuel-related-section { padding:0 0 76px; }
.fuel-related-grid { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; }
.fuel-related-grid a { padding:22px; display:flex; flex-direction:column; gap:8px; border-right:1px solid var(--border); background:rgba(10,14,26,.25); color:inherit; text-decoration:none; }
.fuel-related-grid a:last-child { border-right:0; }
.fuel-related-grid a:hover { background:rgba(59,111,237,.05); }
.fuel-related-grid strong { color:var(--text-primary); font-size:14px; }
.fuel-related-grid span { color:var(--text-tertiary); font-size:12px; line-height:1.5; }

.fuel-explain-section { padding:76px 0; border-top:1px solid var(--border); background:rgba(16,22,42,.20); }
.fuel-two-column { display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:64px; align-items:start; }
.fuel-explain-copy h2 { font-size:30px; margin:10px 0 16px; max-width:560px; }
.fuel-explain-copy p { max-width:600px; font-size:15px; line-height:1.75; margin-bottom:16px; }
.fuel-explain-copy p:last-child { margin-bottom:0; }
.fuel-explain-copy strong { color:var(--text-primary); }
.fuel-mechanism { border:1px solid var(--border-strong); border-radius:var(--radius-lg); overflow:hidden; background:var(--bg-raised); }
.fuel-mechanism > div { display:grid; grid-template-columns:38px minmax(0,180px) 1fr; gap:16px; align-items:start; padding:19px 20px; border-bottom:1px solid var(--border); }
.fuel-mechanism > div:last-child { border-bottom:0; }
.fuel-mechanism span { color:var(--blue-bright); font:600 11px/1 var(--font-data); padding-top:3px; }
.fuel-mechanism strong { font-size:13.5px; color:var(--text-primary); }
.fuel-mechanism small { color:var(--text-tertiary); font-size:12.5px; line-height:1.5; }

.fuel-practical-section { padding:76px 0; }
.fuel-practical-grid { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; }
.fuel-practical-grid article { padding:24px; min-height:200px; border-right:1px solid var(--border); background:rgba(10,14,26,.28); }
.fuel-practical-grid article:last-child { border-right:0; }
.fuel-step { display:block; margin-bottom:22px; color:var(--text-tertiary); font:600 11px/1 var(--font-data); }
.fuel-practical-grid h3 { font-size:16px; margin-bottom:9px; }
.fuel-practical-grid p { font-size:13px; line-height:1.6; }

.fuel-boundary-section { padding:0 0 76px; }
.fuel-boundary { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,430px); gap:40px; align-items:center; padding:28px; border:1px solid var(--border); border-radius:var(--radius-lg); background:rgba(16,22,42,.34); }
.fuel-boundary h2 { font-size:22px; margin-top:9px; }
.fuel-boundary p { font-size:13px; line-height:1.65; }
.fuel-tools-section { padding-bottom:12px; }
.fuel-tools-actions { display:flex; gap:10px; flex-wrap:wrap; }
.fuel-method-section { padding-top:52px; }

/* Intelligence hub market card */
.fuel-resource-grid .resource-card { grid-column:1 / -1; }

/* Homepage compact market pulse */
.home-fuel-section { padding:64px 0; border-top:1px solid var(--border); background:rgba(16,22,42,.14); }
.home-fuel-header { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:22px; }
.home-fuel-header h2 { font-size:24px; margin:8px 0 7px; }
.home-fuel-header p { max-width:650px; font-size:13.5px; }
.home-fuel-link { color:var(--blue-bright); font-size:13px; font-weight:600; white-space:nowrap; }
.home-fuel-link:hover { color:var(--text-primary); }
.home-fuel-panel { border:1px solid var(--border-strong); border-radius:var(--radius-lg); overflow:hidden; background:rgba(16,22,42,.68); box-shadow:var(--shadow-card); }
.home-fuel-stats { display:grid; grid-template-columns:1.2fr repeat(3,1fr); }
.home-fuel-stat { padding:20px 22px; border-right:1px solid var(--border); min-height:126px; }
.home-fuel-stat:last-child { border-right:0; }
.home-fuel-stat-primary { background:rgba(59,111,237,.07); }
.home-fuel-stat-label { display:block; color:var(--text-tertiary); font-size:10px; text-transform:uppercase; letter-spacing:.07em; font-weight:700; }
.home-fuel-stat-value { display:block; margin:13px 0 5px; font-size:25px; line-height:1; }
.home-fuel-stat-meta { color:var(--text-tertiary); font-size:11px; }
.home-fuel-foot { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:13px 18px; border-top:1px solid var(--border); background:rgba(10,14,26,.24); }
.home-fuel-foot p { font-size:11.5px; }
.home-fuel-foot a { color:var(--blue-bright); font-size:12px; font-weight:600; white-space:nowrap; }

@media (max-width:900px) {
  .fuel-market-grid { grid-template-columns:repeat(2,1fr); }
  .fuel-market-card:nth-child(2) { border-right:0; }
  .fuel-market-card:nth-child(-n+2) { border-bottom:1px solid var(--border); }
  .fuel-two-column { grid-template-columns:1fr; gap:38px; }
  .fuel-current-grid { grid-template-columns:1fr; gap:38px; }
  .fuel-related-grid { grid-template-columns:1fr; }
  .fuel-related-grid a { border-right:0; border-bottom:1px solid var(--border); }
  .fuel-related-grid a:last-child { border-bottom:0; }
  .fuel-practical-grid { grid-template-columns:repeat(2,1fr); }
  .fuel-practical-grid article:nth-child(2) { border-right:0; }
  .fuel-practical-grid article:nth-child(-n+2) { border-bottom:1px solid var(--border); }
  .home-fuel-stats { grid-template-columns:repeat(2,1fr); }
  .home-fuel-stat:nth-child(2) { border-right:0; }
  .home-fuel-stat:nth-child(-n+2) { border-bottom:1px solid var(--border); }
}

@media (max-width:700px) {
  .fuel-watch-head, .home-fuel-header { display:block; }
  .fuel-watch-status { margin-top:14px; }
  .fuel-market-grid, .home-fuel-stats { grid-template-columns:1fr; }
  .fuel-market-card, .home-fuel-stat { border-right:0; border-bottom:1px solid var(--border); min-height:0; }
  .fuel-market-card:last-child, .home-fuel-stat:last-child { border-bottom:0; }
  .fuel-market-value { font-size:30px; }
  .fuel-context, .fuel-boundary { display:block; }
  .fuel-context-source { display:block; margin-top:10px; }
  .fuel-boundary p { margin-top:18px; }
  .fuel-mechanism > div { grid-template-columns:30px 1fr; gap:10px 14px; }
  .fuel-mechanism small { grid-column:2; }
  .fuel-practical-grid { grid-template-columns:1fr; }
  .fuel-practical-grid article { border-right:0; border-bottom:1px solid var(--border); min-height:0; }
  .fuel-practical-grid article:last-child { border-bottom:0; }
  .home-fuel-link { display:inline-block; margin-top:14px; }
  .home-fuel-foot { align-items:flex-start; flex-direction:column; }
}

@media (prefers-reduced-motion: reduce) {
  .fuel-watch-dashboard *, .home-fuel-section * { scroll-behavior:auto; transition:none !important; animation:none !important; }
}