/* MathKidoo — Tablet layout (MG-304, design screen D24).
   "D24 Tablet — 10-inch landscape, Field-left layout." (PRD §3.4)

   House rule for this file: CSS ONLY, no markup changes, no JS. Every
   product page links this AFTER its own <style> block, so these rules win
   on source order for any selector of equal specificity; several rules
   below also use :has() to stay scoped to the right page without touching
   any page's own class names.

   THE QUERY: landscape orientation, at least 900px wide.
     @media (orientation: landscape) and (min-width: 900px)
   `orientation: landscape` is the actual signal a "10-inch landscape"
   tablet gives — a phone turned sideways is still a phone, but it is
   almost always well under 900px of CSS width even in landscape (390-844
   long edge on the phones this product ships for), so combining the two
   catches real 10" tablets (iPad 10.2" = 1080x810, a 9-10" Android slate =
   ~960-1280 wide) without also catching a landscape phone. Portrait
   tablets are deliberately left on the phone layout — the PRD's own line
   is landscape only, and the phone layout already works at any width, it
   is just centered with unused margin either side, same as it is on a
   phone dock/emulator wider than 480px today.

   Nothing in here touches `transition`/`animation` — the tablet split is a
   layout change, not a motion change, so prefers-reduced-motion is exactly
   as unaffected as it was before this file existed.

   Pages this file is linked into (Raj adds the <link> tag; see the SP
   handoff note for the one page a wrapper class was considered and not
   needed):
     src/tables.html   — Home/Learn/Practice/Play/Game/Reflex, the one
                          screen family that actually renders the Field.
     src/ladder.html    — the Champion ladder (no Field on this screen at
                          all — the static mock never had one).
     src/parent.html    — dashboard/governor/settings (no Field either).
     src/full/index.html — the Growth Tree map (no Field; its own node
                          grid, not THE FIELD component).
   src/app.html (the shell) already carries its own tablet/desktop-mode
   logic (see its own `body.desktop-mode` rules) and is deliberately left
   alone — out of scope for this file and this ticket. */

@media (orientation: landscape) and (min-width: 900px) {

  /* ======================================================================
     1) src/tables.html — Field-left.
     DOM (unchanged): #mkApp > #mkTopbar, #mkFieldWrap > #mkFieldEl, #mkPanel.
     Scoped with :has(#mkFieldWrap) so this never matches ladder.html's or
     parent.html's own #mkApp, which share the same id/class but have no
     Field wrap in them.
     ================================================================== */
  #mkApp:has(#mkFieldWrap) {
    max-width: none;
    width: min(1400px, 96vw);
    height: 100dvh;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 58% 1fr; /* left column always >=50%, so the
      panel's column (starting at 58%) can never land in the left half —
      see the field-wrap rule below for how the Field itself is kept out
      of the right half too. */
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "topbar topbar"
      "field  panel";
    overflow: hidden; /* the app is a fixed-height shell on tablet, same as
      it visually is on a phone (100dvh); a page-level scrollbar here would
      mean the primary action moved off-screen, which is the one thing the
      spec rules out. */
  }
  #mkApp:has(#mkFieldWrap) > #mkTopbar { grid-area: topbar; }

  #mkApp:has(#mkFieldWrap) > #mkFieldWrap {
    grid-area: field;
    max-height: none; /* undo the phone collapse-height transition target */
    padding: 28px 24px 28px 40px;
    display: flex;
    align-items: center;   /* vertically centred */
    justify-content: flex-start; /* hugs the left edge with room to breathe,
      rather than centring in the 58% column — centring a wide column would
      let the ball graphic's own right edge drift past the 50% line on a
      very wide tablet, and the test (and the spec) wants the Field's whole
      box in the left HALF, not just the left column. */
    overflow: visible;
  }
  /* Reflex and Result are the two screens the Field itself leaves (M7);
     the phone rule already collapses it to zero height — restore that on
     tablet too (this selector is more specific than the one above, so it
     wins), otherwise the tablet-only `max-height: none` above would bring
     the Field back on the one screen the product design says it should not
     be on. */
  #mkApp:has(#mkFieldWrap) > #mkFieldWrap.mk-field-wrap--hidden {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
  }
  #mkApp:has(#mkFieldWrap) > #mkFieldWrap > .mk-field {
    width: 100%;
    /* Capped so the square's right edge stays inside the left half at any
       plausible tablet size: 46% of the width plus the 40px left padding
       is comfortably short of 50vw at 900px and up; 70% of the height
       covers a squarer tablet (e.g. a 4:3 slate) without the Field
       out-growing the row. */
    max-width: min(46vw, 70vh);
  }

  #mkApp:has(#mkFieldWrap) > #mkPanel {
    grid-area: panel;
    padding: 28px 32px 28px 24px;
    justify-content: flex-start; /* top-aligned column of controls, per
      spec — mk-cta's own `margin-top: auto` still pushes the primary
      button toward the bottom of THIS column's own height when there is
      room, same as it does on the phone. */
    overflow-y: auto; /* belt-and-braces only: every screen's content
      measures well under the row's height at 900x600 and up, so this
      should never actually engage. */
  }

  /* ======================================================================
     2) src/ladder.html — the Champion ladder. No Field on this screen; the
     tablet ask here is specific: "more rungs per screen, current rung
     stays obvious." #mklApp is a distinct id from tables.html's/
     parent.html's #mkApp, so no :has() scoping is needed to keep this rule
     off the other two pages.
     ================================================================== */
  #mklApp {
    max-width: min(880px, 92vw);
  }
  #mklApp .mk-ladder-grid {
    /* 5 -> 8 across: the same 33 rungs (L00-L32) now take 5 rows instead
       of 7, so more of the climb — including whichever rung is current —
       is on screen at once without scrolling. `.is-current`'s own purple
       ring + pulse (unchanged) is what keeps the current rung obvious;
       nothing about that rule needed to change, only how many neighbours
       fit around it. */
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 12px;
  }

  /* ======================================================================
     3) src/parent.html — dashboard / governor / settings. No Field, no
     screen-specific tablet ask beyond the general "centre and breathe"
     the other single-column shells get. Scoped off tables.html's #mkApp
     via :has(#mkAppView), an id only parent.html has.
     ================================================================== */
  #mkApp:has(#mkAppView) {
    max-width: min(720px, 90vw);
  }

  /* ======================================================================
     4) src/full/index.html — the Growth Tree map. No Field, no #mkApp
     (this page's own shell is `.app`, a class none of the other three
     pages use, so it needs no extra scoping). The ask: "tiers in two
     columns rather than one long scroll."
     #tiers is a flat sequence of repeated (.tier heading, .grid of nodes)
     pairs — not one wrapper per tier — so true two-column layout is done
     with CSS multi-column flow (fills column 1 top-to-bottom, balances
     into column 2), with break-avoidance so a heading is never stranded
     at the foot of one column while its own nodes start the next. A
     wrapper element per tier (e.g. `<section class="tier-group">` around
     each heading+grid pair) would let a real grid guarantee the pairing
     instead of relying on break-inside/break-after; that one class is the
     only markup change this file would ask for, and it is not made here.
     ================================================================== */
  .app {
    max-width: min(1100px, 94vw);
  }
  .app #tiers {
    column-count: 2;
    column-gap: 28px;
  }
  .app #tiers .tier {
    break-after: avoid-column;
    break-inside: avoid-column;
  }
  .app #tiers .grid {
    break-inside: avoid-column;
  }
}