/**
 * CNL Site - The Macroscope tab
 * Location: assets/css/macroscope.css
 *
 * Created: October 20, 2026 - His idea and "proceed": the Macroscope tab (macroscope.php, the whole live pulse) and
 *          the Weather, Birds and Observations pages its tiles open (weather.php, birds.php, observations.php), drawn
 *          by the Macroscope's shared renderers from macroscope.earth. This sheet holds the tab's strip, each page's
 *          title, the dashboard's full-width band, and the pages' look in canemah.org's colours (his "color choice is
 *          fine"): the renderers bring their own sheet and read the --lc- properties set here.
 */

/* ============================================================================
   The strip: the tab's four pages, in the band's slate and taupe
   ============================================================================ */
.mx-sub { background: #2a3444; border-top: 2px solid #8b7d6b; }
.mx-sub .mx-in { max-width: 1400px; margin: 0 auto; padding: 8px 24px; display: flex; gap: 6px; flex-wrap: wrap; }
.mx-sub a { color: #cbd5e1; padding: 5px 14px; border-radius: 18px; font-size: 0.95rem; }
.mx-sub a:hover { text-decoration: none; background: rgba(255, 255, 255, 0.08); }
.mx-sub a.on { background: #cbd5e1; color: #2a3444; font-weight: 600; }

/* ============================================================================
   A page: its title and one line beneath it, then the page itself. The body is a flex column, so each block is
   given its width.
   ============================================================================ */
.mx-head, .mx-room, .mx-foot { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 24px; }
.mx-head h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 2rem; margin: 22px 0 4px; }
.mx-head p { color: #5c5240; margin: 0 0 16px; max-width: 820px; }
.mx-foot { padding-top: 18px; padding-bottom: 8px; }

/* ============================================================================
   The dashboard's band: the home page's, the window's width as owlfarm.earth's is
   ============================================================================ */
.sensor-band { background: #2a3444; border-top: 2px solid #8b7d6b; }
.sensor-band-inner { padding: 0.75rem 24px; }
.sensor-widget { color: #cbd5e1; font-size: 0.9rem; line-height: 1.5; }
.widget-placeholder { color: #64748b; font-style: italic; padding: 1rem 0; }

/* ============================================================================
   The pages' look: the renderers' --lc- properties in canemah.org's colours and type; --lc-top clears the sticky
   site header
   ============================================================================ */
#closer {
    --lc-ink: #333; --lc-mute: #6b6b6b; --lc-page: #f3f4f6; --lc-card: #fff; --lc-line: #e0e0e0; --lc-rule: #eeeeee;
    --lc-accent: #4A6B8A; --lc-tint: #e9eff5; --lc-ring: #a9bccd; --lc-hot: #b45309; --lc-deep: #2a3444; --lc-mark: #f4d57b;
    --lc-cur: #f5f8fb; --lc-grid: #e5e7eb; --lc-bar: #6b8fb3; --lc-rain: #2F6FB3; --lc-top: 78px;
    --lc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --lc-head-font: Georgia, "Times New Roman", serif; --lc-head-weight: 400;
}