/* MOBILE-ONLY OVERRIDES — desktop unchanged */
/* "Mobile" = <= 768px */

@media (max-width: 768px) {
  :root {
    /* JS will set these at runtime; these are fallbacks */
    --brand-size: 114px; /* fallback diameter */
    --brand-top:  10px;  /* fallback top gap */
    --brand-left: 24px;  /* fallback left gap */
    
    /* Center the TOOLBAR (trust strip) */
    .trust-strip,
    .trust-strip .container,
    .trust-strip .trust-grid {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
    }
  }

  /* Logo placement driven by CSS variables set by JS (or fallbacks) */
  .brand-fixed {
    position: absolute !important;
    top:  var(--brand-top) !important;
    left: var(--brand-left) !important;
    right: auto !important;
    z-index: 10 !important;
    pointer-events: auto;
  }
  .brand-fixed .brand-logo {
    width:  var(--brand-size) !important;
    height: var(--brand-size) !important;
  }

  /* Toolbar: truly centered on mobile, with clearance updated by JS */
  .trust-strip {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .trust-strip .container,
  .trust-strip .trust-grid,
  .trust-strip .wrap,
  .trust-strip .inner {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
  .trust-strip .trust-item,
  .trust-strip .trust-label {
    white-space: nowrap !important;
  }

  /* Report page: keep the good stacking behavior and center headers */
  main.container > .grid.grid-2 > .card:last-of-type { display: block !important; }
  main.container > .grid.grid-2 > .card:last-of-type > h2 {
    text-align: center !important;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
  }
  #optional-actions { width: 100% !important; }
  #optional-actions .actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
  }
  #optional-actions .oa-card {
    min-width: 0 !important;
    width: 100% !important;
    display: block !important;
  }
  main.container > .grid.grid-2 > .card:last-of-type > ul {
    width: 100% !important;
    margin-top: 4px !important;
  }
}