/* Malaysia Memilih — public shell variant
   The masthead, nav buttons and status bar used by the public-facing pages (map, analysis, reports, methodology).
   Linked before each page's <style>, so page-specific rules still override. */

.brand-bars {
      display: flex;
      gap: 4px;
      height: 27px;
      flex-shrink: 0;
    }
.brand-note {
      margin-top: 4px;
      font-size: 8px;
      letter-spacing: .12em;
      color: #788398;
      text-transform: uppercase;
    }
.masthead-actions {
      display: flex;
      align-items: center;
      gap: 7px;
    }
.header-button.admin-button { border-color: var(--red); }
.masthead {
      flex: none;
      background: #fff;
      color: #0c1220;
      min-height: 68px;
      padding: 14px 26px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      border-bottom: 3px solid #080d16;
    }
.overview-strip::before {
      content: "";
      position: absolute;
      top: 0;
      left: 24px;
      width: 130px;
      height: 2px;
      background: var(--red);
    }
.overview-heading {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }
.main-title {
      margin: 0;
      font-size: 16px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .02em;
    }
.status-tag {
      display: flex;
      align-items: center;
      flex-shrink: 0;
      background: var(--red);
      color: white;
      font-size: 8px;
      font-weight: 700;
      padding: 8px 15px;
    }
.status-message {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
      flex: 1;
      padding: 7px 12px 7px 0;
      color: #95a5bc;
    }
@media (max-width: 700px) {
  .masthead-actions {
        width: 100%;
        gap: 5px;
        overflow-x: auto;
        padding-bottom: 3px;
      }
  .main-subtitle { font-size: 8px; }
  .status-bar { gap: 8px; }
  .status-message { font-size: 8px; gap: 7px; }
}