/* oz-touch.css — the site under a finger.
 *
 * The owner, 18 Aug: «كل حاجه من على التيليفون مختلفة وحاسسها بايظه» — and again
 * about the reticle, «حاسسها ميته شوية». The layout half of that was real and is
 * fixed (the drawer, the overflow, the sleeping eye). This is the other half,
 * and it is not a layout bug at all:
 *
 *   MEASURED on production at 375px, 23 Aug — controls under 40px tall:
 *     homepage 27 · booking 24 · community 7
 *   The booking time slots are 33px. The drawer's close button is 30×35.
 *
 * A fingertip contact patch is around 9mm, which is ~44 CSS px. A 33px control
 * is not "small", it is a control you miss and press again — which is exactly
 * what "it does not respond" feels like from the other side of the screen.
 * Nothing was broken, so nothing looked broken in a screenshot; it only shows up
 * when you measure the boxes or hold the phone.
 *
 * WHY A SEPARATE FILE. It ships beside oz-motion.css, on the same 15 pages and
 * through the same service-worker asset list, because a rule about how the whole
 * venue answers a finger belongs in one place — the alternative is the same
 * block pasted into 15 inline <style> tags, which is how a rule ends up meaning
 * three different things (§3.10, #80).
 *
 * WHAT IT DELIBERATELY DOES NOT DO:
 *
 *  - It does not touch pointer devices. A mouse is precise; growing every chip
 *    on a laptop would be a downgrade to fix a phone.
 *  - It does not use an invisible ::after hit expander, which is the other
 *    standard trick. That needs `position:relative` on every target, and forcing
 *    it onto every button across 15 pages changes stacking contexts in ways
 *    nothing in this project could verify (§"never break a working feature").
 *  - It does not touch links inside running text. A word in a sentence is not a
 *    control, and padding it out breaks the paragraph it lives in.
 *
 * It grows the HIT AREA and leaves the ink alone: the label, the border and the
 * background are untouched, so a chip still looks like the chip the brand
 * designed — it is just reachable.
 */

@media (hover: none) and (pointer: coarse) {

  /* Every real control. `button` covers most of the venue; the rest are the
     classes this project uses for things that are buttons without being one. */
  button,
  [role='button'],
  input[type='button'],
  input[type='submit'],
  summary {
    min-block-size: 44px;
  }

  /* Anchors are only controls when they carry a control class — an <a> inside a
     paragraph is a word, not a target. */
  a.btn, a.chip, a.ts, a.go, a.gate-go, a.bc-go, a.mm-more, a.card, a.tab, a.daychip {
    min-block-size: 44px;
  }

  /* A control that centres its own label keeps doing so at the new height. This
     is the only reason display is touched at all: a plain inline-block would
     grow downward and leave the text at the top, which looks like a bug even
     though the box is right.

     `[data-ozk]` IS EXCLUDED, AND THAT EXCLUSION IS THE WHOLE POINT OF THIS
     RULE'S SECOND DRAFT. `OZUI.reachable()` stamps role="button" on every
     [onclick] element that is not already a control, so a keyboard can reach it
     — 98 of them. That is a statement about REACHABILITY, not about layout, and
     this file loads AFTER every page's inline <style>, so at equal specificity
     it won.

     On /booking the modal overlay is `<div class="modal" onclick=...>`: it got
     the role, and `display:inline-flex` beat its own `.modal{display:none}`.
     Blockified by `position:fixed` it computed to `flex` — a 375x812 sheet at
     80% black with a 6px blur, permanently over the booking page, on every
     phone and no desk machine. Nothing errored; the page simply could not be
     read or pressed. Measured, not guessed: 15 of 19 stamped elements had their
     display changed, and that one went none -> flex.

     Only DISPLAY is excluded. The 44px floors above stay: an element the
     keyboard pass called a control is one, and a hidden element is not made
     visible by a min-block-size. */
  button, [role='button']:not([data-ozk]), summary,
  a.btn, a.chip, a.ts, a.go, a.gate-go, a.bc-go, a.daychip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Anything already laid out as a block or a grid item keeps its own display —
     overriding those would collapse cards that happen to be buttons.

     Same exclusion, same reason as above: this rule sets `display` too, so it
     is the same door. No stamped element carries `.card` today — it is shut
     before something does, not after. */
  button.card, button.pr, button.item, button.wcard,
  a.card, [role='button']:not([data-ozk]).card {
    display: block;
  }

  /* An icon-only control is square, so the WIDTH matters as much as the height —
     the booking page's help and remove buttons were a comfortable 44 tall and
     24 across, which is a target you hit with the side of a thumb.

     Written STRUCTURALLY rather than as a list of class names. The first draft
     named `.icon`, `.x`, `.drw-x`, `.modal-x`, `.wclear` and missed `.qhelp` and
     `.pc-rm` on the very next page measured — a hand-typed list is how a rule
     misses the thing it was written for (#96, #64). A button whose only child is
     an icon IS an icon button, whatever it is called. */
  button:has(> svg:only-child),
  button:has(> i:only-child),
  a:has(> svg:only-child),
  [role='button']:has(> svg:only-child),
  button.icon, button.x, button.drw-x, button.modal-x, button.wclear,
  button.qhelp, button.pc-rm,
  button[aria-label]:empty {
    min-inline-size: 44px;
  }

  /* A ONE-CHARACTER CONTROL is square too, and the structural rule above cannot
     see it: the language toggle's only child is the letter «ع», not an icon, so
     `:has(> svg:only-child)` does not match. Measured 28px wide on /where and
     35px on /live. CSS cannot ask how long a label is, so these are named — and
     named is fine when the set is small and stable, as long as it is written
     down that this is the reason. */
  button.lang, a.lang, button.chip.lang, #langBtn, [data-lang-toggle] {
    min-inline-size: 44px;
  }

  /* THE LOGO IS HOW PEOPLE GO HOME. It measured 24px tall — the last undersized
     control left on the site after everything else. It sits inside a nav row
     that is already 66px, so this only centres it in space it already has; the
     wordmark's own size is untouched. Only the ANCHOR form: on several pages
     `.brand` is a plain <div> and decoration, not a control. */
  a.brand {
    min-block-size: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* A back link is navigation, not prose. */
  .back, a.back, button.back {
    min-block-size: 44px;
    min-inline-size: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* A NAV LIST IS A COLUMN OF CONTROLS. The footer's links were 34px and the
     bottom row's 22px — wide, so the area was fine, but short enough that a
     thumb travelling down the column lands between two of them. They are laid
     out as blocks already, so height is all that changes. */
  .foot-col a, .foot-bottom a, .drw a, .drawer a, nav.drawer a {
    min-block-size: 44px;
    display: flex;
    align-items: center;
  }

  /* Rows of chips gain a little air, because two 44px targets touching each
     other is one 88px target you cannot aim inside. */
  .chips, .sexchips, .daychips, .slots, .atabs, .gtabs {
    gap: 10px;
  }

  /* NOT INCLUDED, ON PURPOSE: a link inside a paragraph. The homepage's empty
     states carry calls to action written into a sentence («سجّل دخولك وابدأ»,
     24px tall) and those are real controls somebody has to hit — but a 44px
     inline box inside running text pushes the lines apart and looks broken.
     They need their own treatment as buttons, per page, which is design work
     rather than a global rule. Logged in the backlog rather than bodged here. */

  /* The one exception, stated rather than left implicit: a control INSIDE a
     message bubble or a table cell keeps its own size. Growing those pushes the
     line height of every message in the room. */
  .msg button, .bub button, td button, th button,
  .msg a.chip, .bub a.chip {
    min-block-size: 0;
  }
}

/* ---------------------------------------------------------------------------
 * A CONTROL'S LABEL IS NOT TEXT TO DRAG OVER.
 *
 * Owner, 24 Aug, relaying what a friend saw in Brave: *"وبيسيليكت الزراير من
 * بعيد قبل ما يروح عليها"* — the buttons highlight before the cursor reaches
 * them.
 *
 * WHAT IS PROVEN and what is not, because they are different:
 *
 * PROVEN — every page loaded its three typefaces from `fonts.googleapis.com`,
 * which Brave blocks by default, and 336 declarations named ONLY those families
 * with nothing after the comma. So his friend's browser fell to its default
 * serif for the whole site, at Orbitron's sizes. That is the enormous footer and
 * the wrong-looking page, and it also grows every button's box well past where
 * its label appears — which is a control lighting up "from far away". Both are
 * fixed by `oz-fonts.css`: the venue serves its own fonts now.
 *
 * NOT PROVEN — that this line is the rest of it. Dragging across a page selects
 * the words on buttons like any other text, and a half-selected label under the
 * cursor reads as a control that has grabbed you. Suppressing it on CONTROLS
 * only is correct regardless of Brave: nobody has ever wanted to copy the word
 * on a button, and it costs nothing if the fonts were the whole story.
 *
 * Deliberately NOT on inputs, labels or anything holding real content — a
 * customer must always be able to select a booking code, a price or their own
 * message.
 * ------------------------------------------------------------------------- */
button,
.b,
.chip,
[role='button'],
.tabs > *,
.pill {
  -webkit-user-select: none;
  user-select: none;
  /* iOS paints a grey flash box on tap that has nothing to do with the theme
     (§3.7), and it is the same "something highlighted before I arrived"
     complaint on a phone. */
  -webkit-tap-highlight-color: transparent;
}

/* But never the things people legitimately copy. */
input,
textarea,
[contenteditable],
code,
.code,
.msg,
.bub {
  -webkit-user-select: text;
  user-select: text;
}