/* THE PHONE'S AMENDMENTS.
 *
 * style.css is written phone-first: one column, one screen at a time, and the only wider
 * layout is the column centring itself at 1024. So this file is not a second opinion about
 * the layout. It holds the handful of things that are true of the HARDWARE rather than of the
 * width, and it loads AFTER style.css, which is why there is not one !important in it.
 *
 *   1. 16px on every field, or iOS zooms the page the moment one is tapped and never zooms
 *      back. This is the one rule here that has nothing to do with taste.
 *   2. The safe area. The page reaches under the notch (viewport-fit=cover). Most of that is
 *      in style.css on the elements that touch an edge; what is here is the cases only a
 *      phone has.
 *   3. 44 pixels of touch, on the BOX around the thing and never on the ink itself.
 *   4. Nothing that only exists on hover or on right-click: a phone has neither.
 */

/* ── THE FINGER FLOOR, SECOND COPY ────────────────────────────────────────────────────────
   style.css carries the same floor in one block near its top, and this is the copy two rigs
   read as TEXT rather than by driving a browser:

     tools/space-ui-tests.mjs   reads style + mobile and asks whether the floor is written
        down anywhere for .spacebtn and .ctxtab.
     tools/work-ui-tests.mjs    reads style + mobile and asks the same of the eight controls
        the İşler screen draws, and that the work screen has a phone layout of its own.

   Duplicated on purpose: these are the controls a thumb misses first, and a floor that lives
   in exactly one place is a floor one refactor can delete without anything noticing. */
.spacebtn { min-height: 44px; min-width: 64px; }
.ctxtab { min-height: 44px; min-width: 44px; }
.work-row { min-height: 44px; }
.work-do { min-height: 44px; }
.form-go { min-height: 44px; }
.detail-back { min-height: 44px; }
.receipt-retry { min-height: 44px; }
.queue-retry { min-height: 44px; }
.deliver-path { min-height: 44px; }
.propose-date { min-height: 44px; }
/* By class and never by ancestor: four of these holders are physically moved into the Ben
   screen by shell.js, and an ancestor-scoped rule stops applying the moment they move. */
.ibtn, .vbtn, .gear, .del, .power {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* tools/e2e/browser.mjs measures this one by INJECTING a button.close into the card, so what
   is under test is the stylesheet rather than the markup. */
.world-card .close { width: 44px; height: 44px; line-height: 44px; }

/* ══ the phone itself ═══════════════════════════════════════════════════════════════════ */
/* 16px, or iOS zooms the page on focus and there is no way back to the fit it had. This used
   to live inside the max-width:820px block, so turning the phone on its side silently dropped
   every one of these and the zoom came back. It is a fact about the hardware, so it is not
   behind a width: a coarse pointer is a touchscreen, whichever way up it is held.
   <select> is in the list because the two the app draws zoom exactly like a text field. */
@media (pointer: coarse) {
  .field input, .chat-input, .gate-card input, .work-form input, .work-form textarea,
  .work-form select, .circle-form input, .circle-form textarea, .circle-form select,
  .noteform input, .world-bar .search {
    font-size: 16px;
  }
}

/* THE SIDE EDGES. A notch is on the side in landscape, and these five elements are the ones
   that touch it. This was the only horizontal safe-area rule in the codebase and it was
   inside the portrait width query, which is the one orientation where it does nothing. */
.nav, .composer, .chat-composer, .world-bar, .gate {
  padding-left: max(var(--gut), env(safe-area-inset-left));
  padding-right: max(var(--gut), env(safe-area-inset-right));
}

@media (max-width: 820px) {
  /* THE WORK SCREEN ON A PHONE is one thing at a time: the two lists, then the item you
     opened, with the way back at the top of it. The switch itself is in style.css, because
     the phone is the base case there; what a phone adds is that the way back has to be drawn
     at all, and that five state chips plus two lines of text is a lot of narrow screen. */
  .work-screen .detail-back { display: inline-flex; }
  .work-screen .work-states { gap: 5px; }
  .work-screen .work-state { padding: 4px 8px; }
  .work-lists { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  /* Both dates stay readable rather than squeezing side by side: the whole point of drawing
     the counter-proposal is that somebody sees the two of them disagree at a glance. */
  .detail-dates { flex-wrap: wrap; }
  .date-asked, .date-proposed { flex: 1 1 100%; }
  .work-do, .form-go { flex: 1 1 auto; }

  /* THE CIRCLE CONTROLS AT 390 PIXELS. Two switches, a tab per circle set, "+ daire" and the
     archive, and then the tune control on a row of its own because a left margin was pushing
     it to the end of the line: four rows, about a third of the screen, before a single circle
     is visible. The margin goes on a phone and the strip closes up. */
  .pane-head { gap: 5px; padding-bottom: 6px; }
  .pane-tools { margin-left: 0; }
  .tab, .newbtn, .wtab, .ctxtab, .etab { padding: 0 11px; }

  /* THE GRAPH BAR AT 390 PIXELS. Two strips and a search box do not fit across a phone, and
     the one that has to fit is the context strip: which memory you are reading is the
     question, and "My world" squeezed to "My" is not an answer. The memories strip is a
     developer's tool over local log files and needs the node server on this laptop to do
     anything at all, so it keeps the wide screen and gives up the phone. */
  .world-bar .wtabs { display: none; }
  .ctxtabs { max-width: 60%; }
  .world-bar .search { max-width: none; }
  /* the node's details are the lower part of the pane on a phone too, not a box over the
     picture (28 September); the phone gives them a little more of the height */
  #worldPane { --details-h: 46%; }

  /* nothing may make the page wider than the phone */
  main, main > .screen, .queue-wrap, .queue, .transcript, .world-bar {
    min-width: 0;
    max-width: 100%;
  }
}

/* A phone on its side. The nav bar and the large title both give up height, because 390 by
   844 turned on its side is 844 by 390 and a 34px title plus a 56px bar is a quarter of it. */
@media (max-height: 460px) and (max-width: 940px) {
  /* min-height alone gave back nothing: the padding is what drives this bar's height. */
  .nav { min-height: 48px; padding-top: max(2px, env(safe-area-inset-top)); padding-bottom: 2px; }
  /* The large title IS the company switch, so it keeps the 44 px floor; only its type
     shrinks. It was being let down to 40 by this block. */
  .lt { font-size: 26px; }
  .lt-wrap { padding-top: 0; }
  .me-head { padding-top: 2px; padding-bottom: 10px; }
  .me-head .face { width: 44px; height: 44px; font-size: 17px; }
  .monk-card { padding: 11px 14px 12px; }
}