/* WS1 — responsive layer. Mobile first; loaded after main.css.
   Contract: ≤479 phone · 480–767 large phone · 768–1023 tablet ·
   1024–1439 laptop · 1440–2299 desktop · ≥2300 TV / 4K. */

/* --- phone (base) ------------------------------------------------------- */
/* Base styles in main.css are the phone layout. Touch targets stay ≥44px. */

@media (max-width: 479px) {
  .shell { width: min(100% - 1.5rem, var(--shell)); }
  .header-nav a.nav-link { display: none; }          /* keep only theme + jump link */
  .btn-row { grid-template-columns: 1fr 1fr; }
  .panel-body { padding: var(--sp-2); }
  .preview-stage { padding: var(--sp-3) var(--sp-2); min-height: 9.5rem; }
  th, td { padding: 0.6rem var(--sp-2); }
}

/* --- large phone / small tablet ----------------------------------------- */
@media (min-width: 480px) {
  .btn-row { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
}

/* --- tablet ------------------------------------------------------------- */
@media (min-width: 768px) {
  .tool { padding: var(--sp-6) 0; }
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .site-header .shell { min-height: 4.25rem; }
}

/* --- laptop: two-column workbench, sticky preview ------------------------ */
@media (min-width: 1024px) {
  .workbench {
    grid-template-columns: minmax(20rem, 27rem) minmax(0, 1fr);
    gap: var(--sp-4);
  }
  .preview-panel { position: sticky; top: 5.5rem; }
  .preview-stage { min-height: 16rem; }
}

/* --- desktop ------------------------------------------------------------ */
@media (min-width: 1440px) {
  :root { --shell: 1320px; }
  .workbench { grid-template-columns: 30rem minmax(0, 1fr); gap: var(--sp-5); }
  .preview-stage { min-height: 20rem; }
}

/* --- large desktop / small TV ------------------------------------------- */
@media (min-width: 1920px) {
  :root { --shell: 1560px; font-size: 17.5px; }
  .preview-stage { min-height: 24rem; }
}

/* --- 4K TV and very large displays -------------------------------------- */
@media (min-width: 2300px) {
  :root {
    --shell: 1900px;
    font-size: 21px;
    --radius: 14px;
    --radius-sm: 9px;
  }
  .btn { min-height: 3.4rem; }
  input[type="text"], select { min-height: 3.4rem; }
  .preview-stage { min-height: 32rem; }
  .cards { grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); }
}

@media (min-width: 3200px) {
  :root { --shell: 2400px; font-size: 26px; }
  .preview-stage { min-height: 40rem; }
}

/* --- TV / remote-control input: no hover, bigger focus ring -------------- */
@media (hover: none) and (pointer: coarse) {
  .btn, input[type="text"], select { min-height: 3rem; }
  :where(a, button, input, select, summary):focus-visible { outline-width: 4px; }
}

/* --- short landscape phones --------------------------------------------- */
@media (max-height: 520px) and (orientation: landscape) {
  .site-header { position: static; }
  .preview-panel { position: static; }
  .tool { padding: var(--sp-3) 0; }
}

/* --- forced colors (Windows high contrast) ------------------------------ */
@media (forced-colors: active) {
  .panel, .preview-stage, .card, .table-wrap { border: 1px solid CanvasText; }
  .btn { border: 1px solid ButtonText; }
  .preview-stage::after { display: none; }
}

/* --- multi-page additions --- */
@media (min-width: 768px) {
  .link-list { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 2300px) {
  .link-list { grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr)); }
}