/* =========================================================
   responsive.css
   Centralized responsive rules (extracted from index/report/settings)
   IMPORTANT: Do NOT rename selectors — this file only overrides layout
   ========================================================= */

/* =======================
   Breakpoint: 980px
   - shared app-shell stack
   - index grid spans + form
   - report spans + bars
   ======================= */
@media (max-width: 980px) {

  /* shared: Mobile stack */
  .app-shell {
    grid-template-columns: 1fr;
  }

  /* -------- index.css responsive rules -------- */
  .span-7,
  .span-5,
  .span-12 {
    grid-column: span 12;
  }

  .form {
    grid-template-columns: 1fr;
  }

  .field.span-2 {
    grid-column: span 1;
  }

  /* -------- report.css responsive rules -------- */
  .span-8 {
    grid-column: span 12;
  }

  .span-4 {
    grid-column: span 12;
  }

  .span-6 {
    grid-column: span 12;
  }

  .field:nth-child(4) {
    grid-column: span 1;
  }

  .bar-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .bar-value {
    text-align: left;
  }
}

/* =======================
   Breakpoint: 700px
   - settings grid becomes 1 column
   ======================= */
@media (max-width: 700px) {
  .grid {
    grid-template-columns: 1fr;
  }

  .card.full {
    grid-column: span 1;
  }
}