/* ==========================================================================
   Web-reading and responsive overrides for the case-study reports.
   The reports were authored as A4 documents. These rules let them be read
   comfortably in a browser and on a phone without touching their identity.
   Loaded after each report's own stylesheet.
   ========================================================================== */

/* Slightly larger body text for on-screen reading than the A4 print size */
@media screen and (min-width:901px){
  body{font-size:11pt;line-height:1.58}
}

@media screen and (max-width:900px){
  /* --- Family A: .page / .cover A4 sheets --- */
  body{background:var(--fill2)}
  .page{
    width:100%;min-height:0;margin:14px 0;padding:22px 18px;
    box-shadow:0 1px 10px rgba(22,41,74,.10);border-radius:0;
  }
  .page.cover,
  .cover{
    margin:0;padding:38px 22px 42px;min-height:0;
  }
  .cover h1{font-size:1.85rem;line-height:1.18}
  .cover .sub{font-size:1.02rem;max-width:none}
  .cover .meta{margin-top:26px;line-height:1.9}
  .cover .note{margin-top:26px}

  /* --- Family A: two-column body text --- */
  .two-col{column-count:1}

  /* --- KPI rows stack --- */
  .kpis{flex-wrap:wrap}
  .kpi{flex:1 1 46%;min-width:150px}

  /* --- Snapshot tables --- */
  .snap td:first-child{white-space:normal;width:auto}

  /* --- Family B: .sheet --- */
  .sheet{max-width:none;padding:20px 16px}
  .cover{padding-top:34px}
  .kicker{margin-bottom:16px}
  .band{padding:24px 20px 20px}
  .band h1.title{font-size:1.55rem}
  .band .sub{font-size:1.05rem}
  .cards{flex-direction:column;gap:12px}
  .twocol{flex-direction:column;gap:14px}
  .meta td.k{width:auto}
  .mail{padding:14px}
  .toc{padding:12px 14px}
}

@media screen and (max-width:560px){
  .kpi{flex:1 1 100%}
  h2{font-size:1.25rem}
  h3{font-size:1.05rem}
  .page, .sheet{padding-left:13px;padding-right:13px}
  .cover{padding-left:16px;padding-right:16px}
  /* Report tables stay on one line each and scroll horizontally instead of
     being squeezed unreadably; main.js adds the scroll wrapper. */
  .table-scroll{box-shadow:inset -12px 0 12px -12px rgba(22,41,74,.28)}
}