/* PHONE CITY (Phil 14/11): "why do I see the city on only 30-40 % of the display on mobile? It should be full, and all the other
   stuff in hide / unhide tabs: when you open one, another hides" - "only a symbol that pops up at the top right of the building
   I tap, like any mobile game" - "tap and hold for the move mode".
   In its own file because style.css was being edited by another session that evening; it is loaded after style.css.
   Phone portrait only. The city pane takes everything between the header and the dock. #panel becomes a sheet fixed above the
   dock: closed, it shows one line (the three tabs and the tools); open (body.city-open), it shows what was asked for. The lab's
   research, the catalogue and the commander page take the whole height (body.city-page). */
@media (orientation: portrait) and (max-width: 560px) {
  body[data-tab="city"] #app { grid-template-rows: auto auto minmax(0, 1fr) 0 auto; }
  body[data-tab="city"] #app #city-pane, body[data-tab="city"] #app #city-pane.editing { height: auto; min-height: 0; border-bottom: 0; }
  /* the zoom buttons go to the top right, in a column: an open sheet covers the lower part of the city. While the bar of a mode
     (place, move, roads) stands at the top, they come back down: the sheet is closed in every mode */
  body[data-tab="city"] #city-pane .map-btns { top: 6px; bottom: auto; flex-direction: column; }
  body[data-tab="city"] #city-pane:has(.city-bar:not([hidden])) .map-btns { top: auto; bottom: 64px; flex-direction: row; }
  body[data-tab="city"] #panel { position: fixed; z-index: 20; left: 0; right: 0; bottom: var(--dock-h, 62px); max-height: 60vh; max-height: 60dvh; padding-top: 4px; padding-bottom: 8px;
    background: var(--panel); border-top: 2px solid var(--gold); overflow-y: auto; overscroll-behavior: contain; }
  /* a tall sheet: it starts under the zoom buttons (three of 44 px at the top right of the city), so the header, its menu and the
     zoom stay in reach while the catalogue, the commander page or the lab's research is open */
  body[data-tab="city"].city-page #panel { top: calc(var(--city-top, 88px) + 156px); max-height: none; }
  body[data-tab="city"]:not(.city-open) #panel { overflow: hidden; background: rgba(20, 26, 29, .9); border-top-color: var(--line); padding-bottom: 4px; }
  body[data-tab="city"]:not(.city-open) #view-city > :not(:first-child) { display: none; }
  body[data-tab="city"] #view-city .city-head { position: sticky; top: 0; z-index: 2; gap: 6px; margin: 0 0 4px; background: inherit; }
  body[data-tab="city"] #view-city .city-head h2, body[data-tab="city"] #view-city .city-head .hint { display: none; }
  .city-tab.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
  .city-tab-gap { display: block; flex: 1 1 auto; }
  .work-head { display: flex; align-items: center; gap: 8px; margin: 2px 0 6px; }
  /* the chat glyph goes up beside the top of the city, where no sheet reaches (a sheet starts 156 px under the city's top at
     the highest): the sheet then needs no left gutter for it, and its content gets the 30 px back */
  body[data-tab="city"] .talk-btn { top: calc(var(--city-top, 88px) + 62px); }
  body[data-tab="city"] #panel { padding-left: 12px; }
  /* a mode's bar (place, move, roads): ONE row, the words left and the buttons right; the "off the road" sentence floats
     under it as text, so the bar keeps its height and takes no empty line (Phil 14/11: "why that much gaps with empty space") */
  body[data-tab="city"] #city-pane .city-bar:not([hidden]) { position: relative; display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; padding: 4px 8px; }
  body[data-tab="city"] #city-pane .city-bar .city-bar-text { flex: 1 1 auto; min-width: 0; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 10px; }
  body[data-tab="city"] #city-pane .city-bar .btn-row { margin: 0 0 0 auto; flex: none; flex-wrap: nowrap; gap: 6px; }
  body[data-tab="city"] #city-pane .city-bar .road-off { position: absolute; left: 8px; right: 8px; top: 100%; margin-top: 6px; pointer-events: none; text-shadow: 0 1px 2px #000, 0 0 6px #000, 0 0 10px #000; }
  body[data-tab="city"] #city-pane .city-bar .road-off.off { display: none; }
  /* a building's card (behind "i" only): tight */
  body[data-tab="city"] #view-city .card.bld { padding: 8px; margin: 0 0 6px; }
  body[data-tab="city"] #view-city .card.bld > * + * { margin-top: 4px; }
  body[data-tab="city"] #view-city .card.bld .btn-row { margin-top: 6px; }
  .tab-tools { margin-top: 6px; }
  /* what the tapped building needs or costs: text alone at the top centre of the city */
  .city-say:not([hidden]) { position: absolute; z-index: 5; left: 56px; right: 56px; top: 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center;
    pointer-events: none; font-size: 14px; line-height: 1.25; color: #fff; text-shadow: 0 1px 2px #000, 0 0 6px #000, 0 0 12px #000; }
  .city-say strong { font-size: 16px; }
  .city-say .say-line { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 8px; }
  .city-say .warn-text { color: #ffd98a; font-weight: 700; }
  .city-say.flash .warn-text { animation: say-flash .9s ease-out 1; }
  @keyframes say-flash { 0%, 40% { transform: scale(1.18); color: #ff8a6a; } 100% { transform: scale(1); } }
  /* the symbols over a tapped building */
  .city-ctx.bubbles { width: auto; flex-direction: row; align-items: center; gap: 6px; padding: 0; background: none; border: 0; box-shadow: none; }
  .city-ctx.bubbles button { flex: none; width: 46px; min-width: 46px; height: 46px; min-height: 46px; padding: 0; border-radius: 23px; box-shadow: 0 2px 8px rgba(0, 0, 0, .6); }
  .city-ctx.bubbles button.with-text { width: auto; padding: 0 12px 0 10px; gap: 4px; font-weight: 700; }
  .city-ctx.bubbles button.off { opacity: .72; filter: saturate(.4); }
}