/* ---------------------------------------------------------------------------
   The Study · Client Guides — screen & mobile adaptation.

   These documents were authored as print artefacts: fixed 1000×1414px pages,
   absolutely-positioned footers, decorative rings placed off-canvas. That is
   right for a PDF and unreadable on a phone. This layer reflows them for
   screens without touching a single line of the authored markup, and leaves
   the print stylesheet completely alone so the PDF output is unchanged.
--------------------------------------------------------------------------- */

/* the floating chrome, on every screen size */
#g-home, #g-print {
  position: fixed; top: 12px; z-index: 10000;
  font: 600 12.5px/1 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  color: #1F2720; text-decoration: none; padding: 12px 15px; border-radius: 100px;
  background: rgba(250, 247, 239, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(31, 39, 32, .14); box-shadow: 0 6px 22px rgba(24, 28, 34, .16);
}
#g-home { left: 12px; }
#g-print { right: 12px; }
@media print { #g-home, #g-print { display: none !important; } }

@media (max-width: 900px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  body { padding-top: 56px; }

  /* the page becomes a section in a scroll, not a sheet of paper */
  .stage { padding: 0 0 40px !important; gap: 0 !important; }
  .page {
    width: 100% !important; height: auto !important; min-height: 0 !important;
    border-radius: 0 !important; box-shadow: none !important;
    border-bottom: 1px solid rgba(31, 39, 32, .12);
  }
  .pad {
    padding: 40px 20px 44px !important; height: auto !important;
    display: block !important;
  }

  /* the footer was pinned to the bottom of a fixed sheet */
  .foot {
    position: static !important; left: auto !important; right: auto !important;
    bottom: auto !important; margin-top: 30px; padding: 0 20px 8px;
    font-size: 9.5px !important; letter-spacing: .18em !important;
  }
  .foot .tag { font-size: 11px !important; }

  /* decorative rings and corner art sized for a 1000px canvas */
  .page > div[style*="border-radius:50%"][style*="position:absolute"],
  .page > img[style*="position:absolute"] { display: none !important; }

  /* two- and three-column grids stack */
  .g2, .g3 { grid-template-columns: 1fr !important; }
  table.t, table.sched { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* the swap tables (say-this-not-that) read as pairs, not columns */
  .swap { grid-template-columns: 1fr !important; gap: 4px !important; padding: 14px 0 !important; }
  .swap .a { text-align: left !important; }

  /* cards get thumb-friendly padding */
  .card, .acccard, .darkcard, .rosecard, .greencard, .plumcard, .tealcard,
  .ambercard, .bluecard, .claycard, .warncard, .crisis, .warn, .daybox { padding: 15px 17px !important; }

  /* everything the author sized for a wide sheet */
  [style*="max-width:730px"], [style*="max-width:720px"], [style*="max-width:640px"],
  [style*="max-width:620px"], [style*="max-width:610px"], [style*="max-width:560px"],
  [style*="max-width:700px"] { max-width: 100% !important; }
}