/* Forecast Raven — the Forecast City atlas look on top of Forecast Eagle's explorer.
 *
 * Site-owned (tools/explorer/forecastraven.json: site_owned). Loaded after eaglebase.css
 * (Eagle's forecasteagle.css) and explorer.css, so it only remaps Eagle's tokens and adds
 * Raven's own header and footer. Never edit the vendored files; change things here.
 */
:root {
  /* Eagle token            Forecast City value (static/css/raven.css) */
  --paper: #FBF8F1;
  --card: #FFFFFF;
  --ink: #1F1B16;
  --ink2: #4A4238;
  --mut: #62584C;
  --line: #DDD2BE;
  --line2: #ECE5D6;
  --sign: #00703C;
  --sign-dk: #004F2A;
  --sign-tx: #FFFFFF;
  --sign-sub: #CDEBD9;
  --amber: #FFCE00;
  --footer-bg: #F3EDE0;

  --font: 'Overpass', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono-font: 'Overpass Mono', ui-monospace, Menlo, monospace;

  /* Raven's own */
  --paper-2: #F3EDE0;
  --body: #2B2620;
  --hairline: #DDD2BE;
  --accent: #FFCE00;
  --display: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  --cond: 'Barlow Condensed', 'Roboto Condensed', 'Arial Narrow', sans-serif;
  --gutter: 24px;
  color-scheme: light;
}

body { background: var(--paper); color: var(--ink); }

/* ---- Raven header (from static/css/raven.css) ---- */
.raven-hd { position: relative; z-index: 5; background: var(--paper); }
.raven-hd .wrap { max-width: none; margin: 0; padding-left: var(--gutter); padding-right: var(--gutter); }
.raven-hd .hd { min-height: 64px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 36px; border-bottom: 1px solid var(--hairline); }
.raven-hd .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.raven-hd .brand:hover { color: var(--ink); text-decoration: none; }
.raven-hd .brand-mark { display: block; width: auto; height: 44px; flex: none; }
.raven-hd .brand-word { display: inline-flex; align-items: baseline; gap: 9px; line-height: 1; }
.raven-hd .brand b { font-size: 20px; font-weight: 900; letter-spacing: 3px; }
.raven-hd .brand i { font-style: normal; font-size: 22px; font-weight: 900; letter-spacing: 3px; color: var(--ink); padding: 0 1px 3px; border-bottom: 4px solid var(--accent); }
@media (max-width: 640px) { .raven-hd .brand-mark { height: 36px; } .raven-hd .brand b { font-size: 16px; letter-spacing: 2px; } .raven-hd .brand i { font-size: 18px; letter-spacing: 2px; } }
.raven-hd .main-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 26px; font-size: 15px; font-weight: 700; }
.raven-hd .main-nav a { color: var(--ink); text-decoration: none; padding: 10px 0; }
.raven-hd .main-nav a:hover { color: var(--sign); }
.raven-hd .main-nav a[aria-current="page"] { color: var(--sign); box-shadow: inset 0 -3px 0 var(--accent); }
.raven-hd .yellow-rule { height: 4px; background: var(--accent); }

/* ---- the explorer's title bar in the atlas voice ---- */
.explorer .titlebar h1 { font-family: var(--display); font-weight: 700; letter-spacing: -0.01em; }
.explorer .titlebar .sub { font-family: var(--cond); font-weight: 600; letter-spacing: 0.06em; }
.explorer .badge-live { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.about .rule h2 { font-family: var(--display); font-weight: 700; }
.about .panel p { font-family: var(--display); font-size: 17px; line-height: 1.6; color: var(--body); }
.about .panel p.faint { font-family: var(--font); font-size: 12px; }

/* ---- Raven footer (from static/css/raven.css) ---- */
.raven-ft { background: var(--paper-2); border-top: 4px solid var(--accent); color: var(--ink); }
.raven-ft .wrap { max-width: 1320px; margin: 0 auto; padding: 32px var(--gutter); display: flex; flex-direction: column; gap: 12px; }
.raven-ft .foot-net { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; font-size: 15px; font-weight: 700; }
.raven-ft .foot-net .net-label { font-size: 12px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); margin-right: 6px; }
.raven-ft .foot-net a { color: var(--ink); padding: 6px 0; text-decoration: none; }
.raven-ft .foot-net a:hover { color: var(--sign); }
.raven-ft .foot-credit { margin: 0; font-size: 15px; line-height: 1.55; color: var(--body); max-width: 760px; }
.raven-ft .foot-small { margin: 0; font-size: 13px; color: var(--mut); }

@media (max-width: 640px) {
  :root { --gutter: 16px; }
  .raven-hd .main-nav { gap: 4px 18px; font-size: 14px; }
}

/* ---- the shell's rail on narrower desktops: Raven's badge and source label are longer than Eagle's, and at
   ~1200 px they pushed LINK and OPTIONS off the right edge. Drop the badge first, then narrow the source menu. ---- */
@media (max-width: 1360px) {
  .lrail .lbrand .badge { display: none; }
  .lrail #source-select { max-width: 150px; }
}
@media (max-width: 1100px) {
  .lrail .source-pick > label { display: none; }
  .lrail #source-select { max-width: 120px; }
}
/* Below ~1100 px the rail (overflow-x: auto, no scrollbar) still runs past the edge with Raven's longer labels, and
   the shell only shows its floating OPTIONS button on phones (<= 700 px). Show it wherever the rail may hide OPTIONS. */
@media (max-width: 1100px) {
  .dash .stage-wrap .stage-options {
    display: inline-block; position: absolute; z-index: 6; right: 10px; bottom: 62px;
    font-size: 10.5px; padding: 6px 10px; box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
  }
}