/* ============================================================================
   MrChemCoach - phone hardening
   © Mr ChemCoach EdTech Pvt Ltd. All rights reserved.

   This file is loaded LAST on every page, so it can correct phone layout
   without anyone having to touch the individual experiments. It only ever
   adds rules inside a max-width media query, so nothing here can affect the
   desktop view.

   It fixes four things:
     1 · panels running off the side of the screen (the grid/flex blowout)
     2 · text small enough to need squinting at
     3 · buttons too small to hit with a thumb
     4 · long formulas and numbers overlapping their neighbours
   ========================================================================= */

/* iOS silently inflates text in portrait unless this is set, which is one of
   the ways captions end up sitting on top of each other. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

@media (max-width: 820px) {

  /* ── 1 · the grid and flex blowout ──────────────────────────────────────
     A grid or flex child gets min-width:auto by default, which means it
     refuses to shrink below the width of its own content. One long word or
     one wide table inside is enough to push an entire panel past the edge
     of the phone. Setting min-width:0 lets the track shrink properly. */
  .lab-shell, .lab-body, .sim-scene, .lab-layout, .info-grid, .main-container,
  .grid, .stack, .modes, .reads, .qgrid, .selects, .controls, .panel-grid,
  .experiment-panel, .theory-panel, .bench-container, .table-wrapper { min-width: 0; }

  .lab-shell > *, .lab-body > *, .sim-scene > *, .lab-layout > *,
  .info-grid > *, .main-container > *, .grid > *, .stack > *,
  .reads > *, .qgrid > *, .controls > *,
  .panel, .info-card, .iron-column, .env-column, .rust-status,
  .rust-status-headline, .iron-label-row { min-width: 0; }

  /* the two-column benches collapse to one, properly this time */
  .lab-body, .sim-scene, .lab-layout { grid-template-columns: minmax(0, 1fr) !important; }
  .sim-scene { height: auto !important; }
  .main-content, .main-container { flex-direction: column !important; }

  /* anything genuinely too wide to fold gets a swipe instead of a clip */
  .scrollx, .table-wrapper, .periodic-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  *:has(> .periodic-table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  *:has(> table) { max-width: 100%; }

  /* canvases that were never told to be responsive */
  canvas.lab-canvas, canvas.responsive { max-width: 100%; height: auto; }

  /* Wide apparatus: shrinking it to 340 px makes every label unreadable, so
     keep it at a workable size and let the student swipe across instead. */
  .electrolysis-canvas-container {
    aspect-ratio: auto; height: auto;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .electrolysis-canvas-container > canvas {
    width: 660px; height: 410px; max-width: none; flex: none;
  }
  .electrolysis-canvas-container::after,
  .swipe-hint::after {
    content: "Swipe the diagram sideways to see all of it";
    display: block; position: sticky; left: 0;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
    color: rgba(233,239,244,.45); padding: 8px 2px 0;
  }

  /* auto-fit grids whose minimum column is wider than the phone itself */
  .info-grid, .cards, .card-grid, .stat-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)) !important;
  }

  /* the periodic table keeps its own tiny type; just stop the names
     spilling out of their cells */
  .element .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

  /* ── 2 · text you can actually read ────────────────────────────────────
     Nothing below about 10.5 px survives a phone screen in daylight. These
     are the labels that were sitting at 8.6 to 9.9 px. */
  .mono, .mcc-mast-badge, .pill, .grp, .eqlab, .lab-s, .tag, .count, .soon,
  .what, .eyebrow, .linkish, .back, .chip, .qstat .l, .hudchip, .go, .lvl,
  .read span, .opt .tx em, .sim-subtitle, .lab-sub, .title-sub, .theory-title,
  .mini-chip, .env-label, .rust-tag, .stat-label, .readout .k,
  .plan-lvl, .plan-badge, .price-note, .mcc-foot h5, .colophon,
  table.tb th, table.ind th, table th, .foot, small, em.unit,
  h5, .qcard .ans, .obs small, .tog small, .mcc-tag, .grouphead,
  .legend-title, .glowbar-label, .legend-item, .badge-sm,
  .foot a, .mcc-foot a, footer a { font-size: 11.4px !important; letter-spacing: .07em; line-height: 1.5; }

  /* footer links were 14 px wide by 16 px tall, which is not a target */
  .foot a, .mcc-foot a, footer a, .colophon a { display: inline-block; padding-block: 7px; }

  /* range sliders need a taller track to be draggable with a thumb */
  input[type="range"] { height: 34px; }
  input[type="text"], input[type="number"], input[type="search"], textarea { min-height: 40px; }

  .obs, .notes p, .notes li, .qcard .qt, .qcard label, .ans,
  .theory-panel p, .theory-panel li { font-size: 14.2px; line-height: 1.62; }

  /* ── 3 · thumb-sized controls ──────────────────────────────────────────
     40 px is the smallest target most people can hit reliably one-handed. */
  /* single-line controls: centre them and give them height */
  .btn, .chip, .tab, .nav-btn, .neo-btn, .mcc-back, .ubtn,
  .scenario-btn, .bpill, .seg button, .mcc-pill, .mcc-go, .mcc-ghost,
  .mode-btn, .iconbtn, .pill-btn, .toggle-btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* cards that stack a heading over a description keep their own layout,
     they only get the height. Forcing flex here put the two on one line. */
  .mode, .opt, .qopt, .qcard label, .dbtn, select { min-height: 40px; }
  .chip, .tab, .bpill { padding-block: 9px; }
  .mcc-mark, .mark, .mcc-mark-dot { min-height: 40px; }
  .mcc-mark, .mark { align-items: center; }
  .steps .btn { flex: 1 1 auto; }

  /* ── 4 · nothing overlapping its neighbour ─────────────────────────────
     Long formulas, long element names and long numbers are the usual
     culprits. Let them wrap or scroll rather than sit on top of the text
     beside them. */
  .eqbox, .equation, .formula, .reaction-eq, code, pre {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    white-space: nowrap; max-width: 100%;
  }
  h1, h2, h3, h4, .title-main, .lab-title, .sim-title, .panel-title,
  .mcc-mast-title { overflow-wrap: break-word; }
  .read b, .stat-value, .readout .v { overflow-wrap: break-word; }

  /* ── page-specific rescues ─────────────────────────────────────────────
     A few of the older benches are built from absolutely positioned parts
     at a fixed pixel size. Those cannot reflow at all, so they are scaled
     to something readable and given a sideways swipe instead. */

  /* chlor-alkali: a 1000 px scene pinned by absolute coordinates */
  #sim-container { zoom: .62; }
  *:has(> #sim-container) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .reaction-panel { width: 100% !important; max-width: 100%; }
  .nav-buttons { flex-wrap: wrap; }
  header:has(.nav-buttons) { flex-wrap: wrap; row-gap: 10px; }

  /* structure of atom: the readout overlay was sitting under the view
     buttons, so it moves below them and stops being absolutely placed */
  .viewer-overlay { top: auto !important; bottom: 12px; left: 12px; right: 12px;
                    max-width: none; }
  .viewer-overlay .atom-stats { display: flex; flex-wrap: wrap; gap: 6px 14px; }
  .view-controls, .view-mode-controls, .viewer-controls { z-index: 20; }

  /* headers that were laid out side by side need to stack */
  .lab-header, .sim-header, .p-head, .rust-status-headline,
  .iron-label-row { flex-wrap: wrap; row-gap: 8px; }
  .lab-header-right { flex-wrap: wrap; }

  /* Two sticky bars on a phone eat half the screen and slide over one
     another, which is what was covering the page titles. Let them scroll. */
  .mcc-mast { position: static; }
  body:has(.mcc-mast) header:not(.mcc-mast) { position: static !important; }

  /* Several of the older pages make <body> a flex column. Once the page is
     taller than the screen every child shrinks proportionally, which is what
     squashed the mastheads down onto their own titles. Stop them shrinking. */
  body > header, body > .mcc-mast, body > footer, body > .mcc-foot,
  body > nav { flex: none; }
  .mcc-mast { height: auto !important; min-height: 62px; padding-block: 10px; }
}

/* very small phones: 360 px and under */
@media (max-width: 380px) {
  .title-main, .lab-title { font-size: 1.25rem !important; letter-spacing: .06em !important; }
  .reads { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .steps .btn { width: 100%; }
}

/* ============================================================================
   LANDSCAPE PHONES
   A phone on its side is wide and short, which is the opposite problem. The
   width is now the resource and the height is scarce, so the benches go back
   to two columns and the chrome gets out of the way.
   ========================================================================= */
@media (orientation: landscape) and (max-height: 560px) {

  /* ── give the height back ── */
  .mcc-mast {
    position: static; min-height: 0; padding-block: 6px; margin-bottom: 10px;
  }
  .mcc-mast-badge { display: none; }
  .mcc-mast-mid { flex: 1 1 auto !important; order: 0 !important;
                  padding-left: 12px !important; border-left: 1px solid var(--line) !important; }
  .mcc-mast-title { font-size: .92rem; }
  .wrap { padding-bottom: 20px; }
  .p-head { padding: 8px 14px; }
  .p-body { padding: 12px; }
  .stack { gap: 12px; }

  /* A landscape phone is wider than 820 px, so the portrait type floor above
     does not reach it. These labels need the same minimum either way. */
  .mono, .mcc-mast-badge, .pill, .grp, .eqlab, .lab-s, .tag, .count, .soon,
  .what, .eyebrow, .linkish, .back, .chip, .qstat .l, .hudchip, .go, .lvl,
  .read span, .opt .tx em, .sim-subtitle, .lab-sub, .title-sub, .theory-title,
  .mini-chip, .env-label, .rust-tag, .stat-label, .readout .k, .mcc-tag,
  .grouphead, .legend-title, .glowbar-label, .legend-item, .badge-sm,
  .plan-lvl, .plan-badge, .price-note, .mcc-foot h5, .colophon,
  table.tb th, table.ind th, table th, .foot, small, h5,
  .foot a, .mcc-foot a, footer a { font-size: 11px !important; letter-spacing: .06em; }

  /* ── use the width ── */
  .grid { grid-template-columns: minmax(0, 1fr) minmax(250px, 330px) !important; }
  .lab-body { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) !important; }
  .sim-scene { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr) !important; }
  .main-content, .main-container { flex-direction: row !important; }
  .modes { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
  .mode { padding: 10px 12px; }
  .mode span { font-size: .74rem; }
  .qgrid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .reads { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }

  /* apparatus is height-bound now, not width-bound */
  #bench, canvas.bench { max-height: 62vh; width: auto; margin-inline: auto; }
  .electrolysis-canvas-container { height: auto; overflow-x: visible; }
  .electrolysis-canvas-container > canvas { width: 100%; height: auto; }
  .electrolysis-canvas-container::after { content: none; }
  #benchwrap::after { content: none; }
  #bench { min-width: 0 !important; }
  #sim-container { zoom: .78; }

  /* ── the digital lab shows every experiment again ── */
  body:has(.dl-body) .burger { display: none !important; }
  .dl-body .side {
    position: static !important; transform: none !important;
    width: 246px !important; inset: auto !important;
    box-shadow: none !important; border-right: 1px solid var(--line) !important;
  }
  .dl-body .scrim { display: none !important; }

  /* the sidebar has to earn its width: compact search, filters on one
     swipeable row, so the experiment list gets the vertical space */
  .dl-body .side .side-top { padding: 8px 10px; }
  .dl-body .side .search input { padding: 7px 0; font-size: .8rem; }
  .dl-body .side .chips {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    margin-top: 7px; padding-bottom: 3px; gap: 5px;
  }
  .dl-body .side .chips::-webkit-scrollbar { display: none; }
  .dl-body .side .chip { min-height: 30px; padding-block: 5px; flex: none; }
  .dl-body .side .count { padding-block: 6px; }
  .dl-body .item { padding-block: 9px; }

  /* room for the rotate button */
  .foot, .mcc-foot { padding-bottom: 62px; }
}

/* very short landscape, such as an older phone at 320 px tall */
@media (orientation: landscape) and (max-height: 400px) {
  .mcc-mast { padding-block: 4px; }
  #bench, canvas.bench { max-height: 58vh; }
  .modes { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .modes .mode { flex: 0 0 210px; }
}