/* ============================================================================
   Phone layout.
   ----------------------------------------------------------------------------
   Apart from the few defaults at the top that HIDE the phone-only controls,
   this whole file is inert on a desktop: every other rule sits inside one
   media query, so a desktop browser parses it and matches nothing — there is
   no second copy of the app to keep in sync, which is the thing that actually
   rots when you ship a separate mobile build. It must be linked WITHOUT a
   `media` attribute, or a desktop never receives those hiding defaults.
   `app.js` mirrors the same test in JS and puts `.is-mobile` on <body>
   for the behaviour that CSS cannot express (touch panning, pinch zoom).

   The query is deliberately BOTH a width test and a pointer test:
     - max-width alone would flip a desktop into phone layout on a narrow window
     - pointer:coarse alone would catch touchscreen laptops and large tablets
   A phone is the intersection: a coarse pointer on a small screen.
   ============================================================================ */

/* Phone-only furniture, hidden by default on every platform. The reveal rules
   live inside the media query below.

   These defaults MUST come first: they are single-class selectors, so an
   identical selector later in the file wins on source order alone.

   NOTE — this block was briefly shared with desktop, putting the compact bar
   and the collapsible palette on both. That was reverted then. In October 2026
   the desktop got its own redesign instead (css/app.css, "build tab"): a build
   rail on the left with flyouts, an inspector drawer under the map and a
   journal on the right, because the always-open dock and the two toolbars left
   the map 22% of a 1366x768 window. The phone keeps this bar and its sheets;
   the desktop pieces are hidden here.
   --------------------------------------------------------------------------- */
.m-actionbar { display: none; }
.m-scrim { display: none; }
.m-sheet-head { display: none; }
.m-maptools { display: none; gap: 6px; align-items: center; }
.m-maptools .btn { font-size: 12px; padding: 6px 10px; }
.m-maptools .on { background: var(--color-accent-600); color: #fff; }

@media (max-width: 820px), (pointer: coarse) and (max-width: 1024px) {

  /* ---- chrome ------------------------------------------------------------ */

  html, body { overscroll-behavior: none; }

  /* The top bar carries seven stat chips that will not fit. Let them scroll
     sideways as one strip rather than wrapping into a wall of text that eats
     half the screen. */
  /* Measured at 147px across three stacked rows — bigger than the action bar,
     and all of it stolen from the map. Brand, day stamp and speed now share
     one row; the stat strip is the only second row. */
  .topbar {
    flex-wrap: wrap;
    gap: 4px 8px;
    padding: 5px 10px;
    align-items: center;
  }
  .topbar .brand {
    font-size: 15px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* "Mayor · you" is the one thing on screen that never changes. */
  .topbar > .tag-neutral:first-of-type { display: none; }
  .topbar .stats {
    order: 3;
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 5px;
    padding-bottom: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .topbar .stats::-webkit-scrollbar { display: none; }
  .topbar .stats .tag { flex: none; font-size: 10.5px; padding: 2px 7px; }
  .topbar .right { margin-left: auto; gap: 6px; display: flex; align-items: center; flex-wrap: wrap; min-width: 0; }
  .topbar .right #dayLabel { font-size: 11px; }
  /* Speed control is the one thing you reach for constantly — keep the taps big. */
  .seg-opt span { padding: 5px 9px; font-size: 12px; }

  /* The tabs sit inside the top bar on a desktop; here they keep a row of
     their own under the stat strip, and every stat stays in the strip rather
     than behind "⋯". */
  .topbar .tabbar { order: 4; flex: 1 0 100%; }
  .stats-more { display: contents; }
  .stats-more-btn, .stats-pop::before { display: none; }
  .stats-pop { display: contents; }

  /* Tabs scroll horizontally instead of wrapping. */
  .tabbar {
    padding: 4px 10px 0;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabbar::-webkit-scrollbar { display: none; }
  .tabbar .tabbtn { flex: none; padding: 7px 12px; font-size: 12.5px; }

  /* ---- build tab: map fills the screen, panels slide up over it ----------- */

  /* The map is the screen. Stacking the palette, the selected-asset rail and
     the production-function grid underneath it left the canvas fighting for a
     third of the viewport on a phone — you could not see the city you were
     building. Both panels are now bottom SHEETS: off-screen until summoned by
     the action bar, and gone again the moment you are done with them. */
  #tab-build.on { display: flex; flex-direction: column; overflow: hidden; position: relative; }
  .build-main { flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
  .map-col { padding: 6px 10px 0; gap: 5px; flex: 1; min-height: 0; }

  /* The desktop's build rail, flyout, inspector drawer and journal. The phone
     builds from the Build sheet and inspects in the asset sheet. */
  .build-rail, .build-flyout, .build-card, .inspector, .journal-side { display: none !important; }
  .asset-sheet { display: flex; flex-direction: column; gap: 10px; }

  /* The map's toolbars are rows here, not overlays. */
  .map-hud-top, .map-hud-bottom { position: static; z-index: auto; pointer-events: auto; align-items: center; }
  .hud-pill, #mapStatus, .hud-draft, .map-legend { background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0; }
  #mapStatus { max-width: none; }
  .hud-draft.idle { display: flex; }
  /* The action bar already says which tool is in hand. */
  .hud-tool, .drop-tool { display: none !important; }

  #gridCanvas {
    /* Intrinsic size, set by grid.js to exactly vw x vh cells. Stretching it
       with CSS width:100% is what made a wider screen draw BIGGER cells
       instead of showing more of the world. */
    display: block;
    margin: 0 auto;
    /* Without this the browser claims every drag for scrolling and the map
       never sees a gesture. All panning/zooming is handled in grid.js. */
    touch-action: none;
  }

  /* ---- bottom sheets ----------------------------------------------------- */



  /* On a phone the selected-asset rail is a sheet too — there is no room for
     it as a side column. On a desktop it stays where it is. */
  .rail-col {
    position: absolute;
    left: 0; right: 0;
    bottom: 0;
    z-index: 48;
    max-height: 62vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--color-surface);
    border-top: 1px solid var(--color-divider);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -8px 28px rgba(20,18,16,.18);
    transform: translateY(102%);
    visibility: hidden;
    transition: transform .22s ease, visibility .22s;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .sheet-info-open .rail-col { transform: none; visibility: visible; }
  .dock-row, .road-sheet { -webkit-overflow-scrolling: touch; }

  .rail-col { width: auto; border-left: 0; padding: 0 12px 12px; }

  .m-sheet-head {
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 6px 0 8px;
    margin-bottom: 2px;
    background: var(--color-surface);
  }
  .m-grip {
    width: 38px; height: 4px; border-radius: 2px;
    background: var(--color-divider);
    margin: 0 auto;
  }
  .m-sheet-close { position: absolute; right: 0; font-size: 12px; }

  /* The production-function reference is the least urgent thing in the sheet;
     it stays available but does not push the palette off the screen. */
  .dock-fn { order: 3; }

  .map-toolbar {
    flex-wrap: nowrap;
    gap: 6px;
    font-size: 10.5px;
    line-height: 1.25;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
  }
  .map-toolbar::-webkit-scrollbar { display: none; }
  .map-toolbar .btn { min-height: 26px; padding: 3px 8px; }
  .map-toolbar .spacer { margin-left: 0; }
  /* Reclaim the space; the colours are self-evident and a finger pans. Two
     classes, because `.map-toolbar .spacer` (display: flex) outranked one. */
  .map-toolbar .map-legend { display: none; }

  /* Inside the sheet the three fixed-width columns become one stack. */
  .dock-row {
    display: flex;
    height: auto;
    flex-direction: column;
    gap: 10px;
    padding: 0 12px 10px;
  }
  .dock-pal, .dock-info, .dock-fn { width: auto; flex: none; }
  .dock-pal .items { max-height: none; }
  .fn-grid { grid-template-columns: repeat(2, 1fr); }

  /* Palette chips need thumb-sized targets. (The class is `pal-item`; an
     earlier `.palitem` typo here silently did nothing.) */
  .dock-pal .items .pal-item,
  .dock-pal .items button { min-height: 46px; }
  .dock-pal .items { gap: 8px; }

  /* ---- data tabs --------------------------------------------------------- */

  /* Every statement table is far wider than a phone. Rather than squeeze the
     type down to unreadable, let each table scroll inside its own box so the
     PAGE never scrolls sideways. */
  .tabpanel.on { padding-left: 10px; padding-right: 10px; }
  #tab-roads.on { grid-template-columns: 1fr; padding: 12px 10px; }
  .smgrid { grid-template-columns: 1fr; }

  .books-section,
  .companies-list,
  .company-detail { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table { font-size: 11.5px; }
  .table th, .table td { padding: 5px 6px; }

  /* Charts and the market histogram are drawn at a fixed pixel width; scale
     them to the viewport instead of overflowing it. */
  .mkt-chart svg, .mkt-histogram svg, .chart svg, .analytics svg { width: 100%; height: auto; }

  /* Tap targets inside lists. */
  .companies-table tr[data-open] td { padding-top: 9px; padding-bottom: 9px; }
  .btn { min-height: 38px; }
  .btn-ghost { min-height: 32px; }

  /* ---- entry screen ------------------------------------------------------ */

  #entry-screen { overflow-y: auto; padding: 12px; align-items: flex-start; }
  .entry-card { flex-direction: column; max-width: 100%; margin: 0; }
  .entry-hero { min-height: 120px; }
  .entry-body { padding: 16px; }
  /* The founding rules run to four long paragraphs — readable on a desktop,
     a wall on a phone. Cap it and let the player scroll if they want it. */
  .entry-body .rules { max-height: 34vh; overflow-y: auto; font-size: 13px; }

  /* ---- map gesture controls (shown only on mobile) ----------------------- */

  .m-maptools { display: flex; }
  .m-sheet-head { display: flex; }

  /* ---- the build bar and its sheets (phone only) ------------------------ */
  #tab-build.on { position: relative; overflow: hidden; }
  /* The palette is absolutely positioned now, so the map column has to be the
     thing that takes up the slack. */
  #tab-build.on > .build-main { flex: 1; min-height: 0; }

  /* Scrim: one tap anywhere outside the sheet closes it. */
  .m-scrim {
    position: absolute; inset: 0;
    background: rgba(20,18,16,.34);
    z-index: 45;
  }
  .m-scrim[hidden] { display: none; }


  .m-actionbar {
    display: flex;
    flex: none;
    gap: 4px;
    padding: 5px 8px calc(5px + env(safe-area-inset-bottom, 0px));
    background: var(--color-surface);
    border-top: 1px solid var(--color-divider);
    z-index: 50;
  }
  .m-act {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 5px 2px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--color-text);
    font: inherit;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .m-act:hover { background: color-mix(in srgb, var(--color-accent-600) 12%, transparent); }
  .m-act b { font-size: 17px; font-weight: 400; }
  .m-act span { font-size: 10px; letter-spacing: .01em; }
  .m-act.on, .m-act.on:hover { background: var(--color-accent-600); color: #fff; }

  /* The palette and the road panel are sheets on every platform: parked
     off-screen, raised on demand. `visibility` keeps a closed sheet out of the
     tab order too. */
  .dock-row, .road-sheet {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 48;
    height: auto;
    max-height: 62vh;
    overflow-y: auto;
    background: var(--color-surface);
    border-top: 1px solid var(--color-divider);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -8px 28px rgba(20,18,16,.18);
    transform: translateY(102%);
    visibility: hidden;
    transition: transform .22s ease, visibility .22s;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .sheet-build-open .dock-row,
  .sheet-road-open .road-sheet { transform: none; visibility: visible; }

  .road-sheet { padding: 0 14px 14px; }
  .road-sheet .road-lvls { display: flex; flex-wrap: wrap; gap: 6px; }
  .road-sheet .road-lvls .tag { cursor: pointer; border: 0; font: inherit; min-height: 34px; padding: 6px 12px; }
  .road-sheet .kv { font-size: 12px; }

  .m-actionbar { display: flex; gap: 2px; padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px)); }
  .m-scrim { display: block; }
  .m-scrim[hidden] { display: none; }
  .m-act[data-act="info"] { display: flex; }
}



/* ============================================================================
   Very narrow phones (iPhone SE and friends, <= 430 CSS px).
   ----------------------------------------------------------------------------
   The day stamp plus the four-way speed control measure 357px together, which
   is wider than the whole screen — measured as a 369px page against a 320px
   viewport, so the entire UI scrolled sideways on every tab. They get their
   own full-width row here rather than being crushed.
   ============================================================================ */
@media (max-width: 430px) {
  /* The day stamp and speed control stay on the brand's row — the brand
     truncates to make room, which costs a few characters of a name you chose
     rather than a whole 40px band of map. (They were on their own full-width
     row; that plus the stat strip is what kept the top bar at 132px.) */
  .topbar .right { flex-wrap: nowrap; }
  .topbar .right #dayLabel { font-size: 10px; }
  .seg-opt span { padding: 5px 7px; font-size: 11px; }
  .topbar .brand { font-size: 14px; max-width: 38vw; }
  .topbar .stats .tag { font-size: 10px; padding: 2px 6px; }
  /* Two palette columns are too tight below ~360px. */
  .fn-grid { grid-template-columns: 1fr; }
}