/* Continuum 2026 — v2 responsive layer.
   Injected at build time into the v2 bundle only; v1 is untouched.
   Every console shares the same skeleton (#app > header + main > section.tab > .card + nav),
   so these rules apply across all six. */

/* ---------------------------------------------------------------
   Wide screens (laptops, widescreen tablets in landscape):
   flow the active tab's cards into columns instead of one stretched
   full-width ribbon. More visible at once = less scrolling mid-game.
   --------------------------------------------------------------- */
@media (min-width: 1100px) {
  main > section.tab.active {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(460px, 1fr));
    gap: 14px;
    align-items: start;
  }
  main > section.tab.active > .card { margin-bottom: 0 !important; }
}

@media (min-width: 1700px) {
  main > section.tab.active {
    grid-template-columns: repeat(auto-fit, minmax(520px, 1fr));
  }
}

/* Escape hatch: any card that needs the full width can opt out. */
main > section.tab.active > .card.v2-wide { grid-column: 1 / -1; }

/* ---------------------------------------------------------------
   TOUCH devices (tablet): keep generous, thumb-friendly targets.
   Scoped to coarse pointers so laptops never inherit them.
   --------------------------------------------------------------- */
@media (pointer: coarse) {
  nav button { min-height: 60px; }
}
@media (orientation: portrait) and (pointer: coarse) {
  nav button { min-height: 64px; }
}

/* ---------------------------------------------------------------
   NON-TOUCH: laptop / desktop with a mouse or trackpad.
   Detected via pointer/hover, so the SAME build stays touch-sized on
   the tablet and goes dense here. Laptop screens are SHORT, so the
   big win is reclaiming vertical space from chrome, plus hover and
   keyboard affordances that touch devices can't use.
   --------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  /* Slimmer chrome — header + tab bar cost ~135px of a 900px-tall screen. */
  header { padding: 6px 12px !important; }
  nav button { min-height: 38px !important; padding: 8px 4px 9px !important; }
  main { padding: 10px !important; }
  .card { padding: 12px !important; }
  main > section.tab.active { gap: 10px; }

  /* Mouse affordances — hover feedback simply doesn't exist on touch. */
  nav button:hover { background: rgba(255, 255, 255, .07); }
  .card button:hover { filter: brightness(1.18); }
  .card a:hover { text-decoration: underline; }

  /* Keyboard navigation must be visible when there's no finger. */
  :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 4px; }

}

/* Short laptop panels (typical 768–950px tall): squeeze a little harder. */
@media (hover: hover) and (pointer: fine) and (max-height: 950px) {
  header { padding: 4px 12px !important; }
  nav button { min-height: 34px !important; padding: 6px 4px 7px !important; font-size: 10px !important; }
  main { padding: 8px !important; }
  .card { padding: 10px !important; }
  main > section.tab.active { gap: 8px; }
}

/* ---------------------------------------------------------------
   Fullscreen toggle button (injected into each console header).
   --------------------------------------------------------------- */
.v2-fs {
  background: none;
  border: 1px solid rgba(255, 255, 255, .18);
  color: inherit;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
  flex: 0 0 auto;
}
.v2-fs:active { opacity: .7; }

/* Keyboard-shortcut hint, shown only where a keyboard exists. */
.v2-keyhint {
  display: none;
  font-size: 10px;
  letter-spacing: .08em;
  opacity: .45;
  margin-left: 10px;
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) and (min-width: 1100px) {
  .v2-keyhint { display: inline; }
}

/* Non-touch: the fullscreen button doesn't need a 44px thumb target.
   Declared AFTER the base .v2-fs rule so it actually wins the cascade. */
@media (hover: hover) and (pointer: fine) {
  .v2-fs { min-height: 32px; min-width: 32px; padding: 5px 8px; font-size: 14px; }
}

/* Never print the injected controls. */
@media print { .v2-fs, .v2-keyhint { display: none !important; } }