/* The Logan County Fire Tracker (/fires).
   ---------------------------------------------------------------------------
   Built on Public Safety Radio's stock (public-safety.css: the paper, the
   masthead clearance, the heading, the notice, the filter and the Morning
   Capital box). This file has what is the tracker's own: the fire weather
   card, the county map with its numbered heat, and the lists.

   Colour says how recent, never how dangerous: red is the last 24 hours,
   amber the last three days, a dull brown anything older. */

.osc-fr-wrap { max-width: 56rem; }

.osc-fr-h2 {
    margin: 34px 0 12px; padding-bottom: 6px;
    border-bottom: 2px solid #1b1b1b;
    font: 900 1.35rem/1.2 Georgia, 'Times New Roman', serif;
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px;
}
.osc-fr-h2-note { font: 700 0.78rem/1.3 Arial, Helvetica, sans-serif; color: #6b6b6b; }
.osc-fr-intro { margin: 0 0 12px; font: 0.95rem/1.55 Georgia, 'Times New Roman', serif; color: #444; }
.osc-fr-intro a { color: #164f8b; }

/* ---------------------------------------------------------- fire weather -- */
.osc-fr-card {
    margin: 0 0 10px; padding: 12px 16px;
    border-left: 4px solid #1a7f4b; background: #eef6f0;
}
.osc-fr-card--red { border-left-color: #b21f2d; background: #fbe9eb; }
.osc-fr-card--amber { border-left-color: #c2410c; background: #fdf0e3; }
.osc-fr-card-title { margin: 0; font: 900 1.05rem/1.3 Georgia, 'Times New Roman', serif; color: #1b1b1b; }
.osc-fr-card-text { margin: 4px 0 0; font: 0.95rem/1.5 Georgia, 'Times New Roman', serif; color: #333; }
.osc-fr-card-link { margin: 6px 0 0; font: 700 0.82rem/1.3 Arial, Helvetica, sans-serif; }
.osc-fr-card-link a { color: #164f8b; text-decoration: none; }
.osc-fr-card-link a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------- map -- */
.osc-fr-map { margin: 0 0 18px; }
.osc-fr-map svg { display: block; width: 100%; height: auto; border: 1px solid #e3ddd0; background: #fbf8ef; }
.osc-fr-pin circle { stroke: #fff; stroke-width: 3; }
.osc-fr-pin text { font: 800 14px Arial, Helvetica, sans-serif; fill: #fff; }
.osc-fr-pin--day circle { fill: #b21f2d; }
.osc-fr-pin--days circle { fill: #d97706; }
.osc-fr-pin--older circle { fill: #8a7a5c; }
.osc-fr-inc { fill: #7c2d12; stroke: #fff; stroke-width: 2.5; }
.osc-fr-map figcaption { margin-top: 8px; font: 0.8rem/1.6 Arial, Helvetica, sans-serif; color: #6b6b6b; }
.osc-fr-key { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin: 0 3px 0 8px; vertical-align: -1px; }
.osc-fr-key:first-child { margin-left: 0; }
.osc-fr-key--day { background: #b21f2d; } .osc-fr-key--days { background: #d97706; } .osc-fr-key--older { background: #8a7a5c; }
.osc-fr-key-inc { margin-left: 8px; color: #7c2d12; }

/* ------------------------------------------------------------ heat list -- */
.osc-fr-filter { margin-top: 0; }
.osc-fr-list, .osc-fr-incident-list, .osc-fr-radio-list { list-style: none; margin: 0; padding: 0; }
.osc-fr-item { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid #e3ddd0; }
.osc-fr-num {
    flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font: 800 0.8rem/1 Arial, Helvetica, sans-serif; color: #fff; background: #8a7a5c;
}
.osc-fr-item--day .osc-fr-num { background: #b21f2d; }
.osc-fr-item--days .osc-fr-num { background: #d97706; }
.osc-fr-item-body { min-width: 0; }
.osc-fr-meta { margin: 0 0 3px; font: 700 0.72rem/1.4 Arial, Helvetica, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: #6b6b6b; }
.osc-fr-item--day .osc-fr-age { color: #b21f2d; }
.osc-fr-place { margin: 0; font: 800 1.1rem/1.3 Georgia, 'Times New Roman', serif; color: #1b1b1b; }
.osc-fr-detail { margin: 4px 0 0; font: 0.95rem/1.5 Georgia, 'Times New Roman', serif; color: #333; }
.osc-fr-detail a, .osc-fr-links a { color: #164f8b; }
.osc-fr-links { margin: 6px 0 0; font: 700 0.82rem/1.3 Arial, Helvetica, sans-serif; }
.osc-fr-links a { text-decoration: none; }
.osc-fr-links a:hover { text-decoration: underline; }

/* -------------------------------------------------------------- incidents -- */
.osc-fr-incident { padding: 12px 0; border-bottom: 1px solid #e3ddd0; }
.osc-fr-incident:target { background: #fff6dc; }
.osc-fr-gone { font: 700 0.72rem/1 Arial, Helvetica, sans-serif; color: #6b6b6b; text-transform: uppercase; letter-spacing: 0.05em; }
.osc-fr-elsewhere { margin-top: 12px; }
.osc-fr-elsewhere summary { cursor: pointer; font: 700 0.9rem/1.4 Arial, Helvetica, sans-serif; color: #164f8b; }

/* ------------------------------------------------------------------ radio -- */
.osc-fr-radio-list li { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid #e3ddd0; font: 0.95rem/1.45 Georgia, 'Times New Roman', serif; }
.osc-fr-radio-list time { flex: 0 0 9.5rem; font: 700 0.78rem/1.6 Arial, Helvetica, sans-serif; color: #6b6b6b; }
.osc-fr-radio-list a { color: #1b1b1b; }
@media (max-width: 560px) { .osc-fr-radio-list li { flex-direction: column; gap: 2px; } .osc-fr-radio-list time { flex-basis: auto; } }

/* ------------------------------------------------------------------- year -- */
.osc-fr-bars { display: flex; align-items: flex-end; gap: 4px; height: 150px; padding-top: 18px; }
.osc-fr-bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; min-width: 0; }
.osc-fr-bar-fill { display: block; width: 100%; background: #d97706; border-radius: 2px 2px 0 0; }
.osc-fr-bar-n { font: 700 0.7rem/1 Arial, Helvetica, sans-serif; color: #6b6b6b; margin-bottom: 3px; }
.osc-fr-bar-m { position: absolute; bottom: -18px; font: 700 0.66rem/1 Arial, Helvetica, sans-serif; color: #6b6b6b; }
.osc-fr-year { margin-bottom: 40px; }

.osc-fr-credit { margin: 30px 0 0; font: 0.78rem/1.55 Arial, Helvetica, sans-serif; color: #8b8b8b; }