/* site.css — shell only. Everything about the board itself lives in board.js's
   own injected stylesheet, exactly as it does in OPHub.

   DESIGN NOTE, learned the hard way: do NOT override the height of
   .jobboard-layout. board.js sizes it with height:clamp(440px,72vh,720px),
   which is already viewport-relative and battle-tested. An earlier version of
   this file replaced that with flex:1 to "fill the viewport like a data page" —
   and on a 1280x620 laptop that squeezed the map panel to 101px tall. The
   clamp keeps every panel usable at any height and lets the page scroll when
   the viewport is genuinely too short. Nothing is ever cropped either way.

   Selectors are prefixed with `body` so they outrank board.js's single-class
   rules regardless of stylesheet order. */

* { box-sizing: border-box; }

html {
    height: 100%;
    background: #0d1a30;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    background: #0d1a30;
    color: #e8eef6;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    /* Always scrollable. The board decides its own height; if that exceeds the
       viewport the page scrolls rather than clipping a panel. */
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ---- boot / failure state ---- */
#bootStatus {
    padding: 14px clamp(12px, 3vw, 28px);
    font-size: 13.5px;
    color: #9fb4cc;
}
body.board-ready #bootStatus { display: none; }

/* ---- host ---- */
#boardHost {
    padding: clamp(8px, 1.5vw, 18px);
    /* Never allow a child to force horizontal scroll — that is the one kind of
       overflow that genuinely crops content on a phone. */
    max-width: 100%;
    overflow-x: hidden;
}

/* The RSS theme injects its hero as a sibling of .jobboard-layout. Pin it to
   its natural height so nothing can squeeze the kicker/title/quote away. */
body #boardHost .jbtheme-hero { flex: 0 0 auto; }

/* Belt and braces against horizontal overflow at very small widths. */
body #boardHost .jobboard-wrap,
body #boardHost .jobboard-layout { max-width: 100%; }

/* The state name next to "Map" carries an inline color:#0a2847 from board.js —
   navy on navy inside the app, but the RSS template paints that panel head dark
   green, so it reads as near-invisible here. Legibility only. */
body #boardHost .jobboard-wrap[data-jb-theme="rss"] .jobboard-map-statelabel {
    color: #e8dcc5 !important;
}

/* ...and the two spans in that header sit flush against each other, so the
   panel reads "MAPWashington". Give the state name some air. */
body #boardHost .jobboard-map-statelabel:not(:empty) { margin-left: 8px; }

/* Print: let everything flow onto the page. */
@media print {
    html, body { height: auto; background: #fff; color: #000; }
    body #boardHost .jobboard-layout {
        height: auto !important;
        display: block !important;
    }
    body #boardHost .jobboard-mappanel { page-break-inside: avoid; }
}