/* Phone fixes, loaded after each page's own styles so it wins.
   Everything here is about iOS specifically — the things that make a web page
   feel wrong on an iPhone rather than merely narrow. */

html {
  /* stop Safari inflating text in landscape */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  /* Nothing should scroll sideways — but `hidden` turns the body into a scroll
     container, and once it is one you can zoom in and then not pan around,
     which reads as "pinch to zoom is broken". `clip` crops the same overflow
     without creating that container. */
  overflow-x: hidden;      /* fallback for older Safari */
  overflow-x: clip;
}

/* Never let a stray wide element widen the page */
img, video, canvas, table, pre { max-width: 100%; }

@media (max-width: 820px) {
  /* THE big one: iOS zooms the whole page in whenever you tap a field whose
     text is under 16px, and doesn't zoom back out. Every input we had was
     ~15px, so every tap jumped the layout. */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Apple's minimum comfortable tap target is 44pt. The diary's consultation
     marker is exempt: it sits inside a half-hour appointment block that is
     itself only ~48px tall, and it grows its own hit area with a pseudo-element. */
  .btn, button, .nav-btn, .side-nav a, .sugg a, .result {
    min-height: 44px;
  }
  .blk .cflag { min-height: 0; }
  .btn.sm, .btn.small, button.sm {
    min-height: 38px;      /* secondary actions can be a little smaller */
  }

  /* Content must clear the notch, the status bar and the home indicator.
     In the installed app there's no browser chrome above us, so the very top
     of the page sits under the clock unless we pad it ourselves. */
  nav {
    padding-top: env(safe-area-inset-top);
  }
  main, .shell > main, body > .wrap:first-of-type {
    padding-top: calc(16px + env(safe-area-inset-top));
  }
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  /* Safari sizes date and time inputs to their own idea of the content width
     and refuses to shrink, so they hang off the edge of their card. */
  input[type="date"], input[type="time"] {
    -webkit-appearance: none;
    appearance: none;
    min-width: 0;
    max-width: 100%;
  }
  input[type="date"]::-webkit-date-and-time-value,
  input[type="time"]::-webkit-date-and-time-value { text-align: left; margin: 0; }

  /* Long words (emails, salon slugs) shouldn't push the layout wide */
  body, .card, .panel, .appt, .visit, .rowitem, .cl, td, dd {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Opening hours: seven columns of time inputs don't fit a phone, and the
     closing time was being cut off the right edge. Stack each day instead. */
  table.hours, table.hours tbody, table.hours tr, table.hours td { display: block; width: 100%; }
  table.hours tr {
    border-bottom: 1px solid var(--line);
    padding: 12px 0 14px;
    display: grid;
    grid-template-columns: auto auto 1fr;
    grid-template-areas: "day day day" "from arrow to" "shut shut shut";
    align-items: center;
    gap: 8px 10px;
  }
  table.hours tr:last-child { border-bottom: none; }
  table.hours td { padding: 0 !important; }
  table.hours td:nth-child(1) { grid-area: day; font-size: .95rem; }
  table.hours td:nth-child(2) { grid-area: from; }
  table.hours td:nth-child(3) { grid-area: arrow; color: var(--muted); }
  table.hours td:nth-child(4) { grid-area: to; }
  table.hours td:nth-child(5) { grid-area: shut; }
  table.hours input[type=time] { width: 100%; }

  /* Money tables: drop the least useful column rather than squeezing four in */
  table.ledger th:nth-child(2), table.ledger td:nth-child(2) { display: none; }
  table.ledger th, table.ledger td { padding-left: 0; padding-right: 0; }

  /* List rows: name and details get the full width, controls sit underneath,
     rather than three buttons squeezing a treatment name into three lines. */
  .rowitem { flex-wrap: wrap; row-gap: 10px; }
  .rowitem .grow { flex: 1 1 100%; min-width: 0; }
  .rowitem > form { flex: none; }
  .cl-nums { width: 100%; order: 3; }
  .rowitem > .btn:last-child { margin-left: auto; }

  /* Give inputs and cards a bit more room to breathe */
  .wrap, .shell { padding-left: 14px; padding-right: 14px; }

  /* The diary handles its own sideways scrolling now — .cal-wrap is the
     scroller, so that the hours can stay pinned on the left while the staff
     columns move. Don't make .cal or the panel scroll as well, or the sticky
     time column has the wrong container and slides away. */
  #s-diary .panel { max-width: 100%; }

  /* Sit the install prompt above the tab bar instead of on top of it */
  .installbar { bottom: calc(84px + env(safe-area-inset-bottom)); }

  /* The login menu is a fixed 345px panel hung off its trigger, which on a phone
     puts most of it off the left edge. Pin it to the screen instead. */
  .login-drop {
    position: fixed;
    left: 12px;
    right: 12px;
    top: calc(56px + env(safe-area-inset-top));
    width: auto;
    padding-top: 0;
  }
  .login-card .ld { white-space: normal; }
}

/* Running as an installed app or inside the native shell: no browser chrome to
   scroll away, so lock down the rubber-banding that makes it feel like a page. */
@media (display-mode: standalone) {
  body {
    overscroll-behavior-y: none;
  }
  /* text selection on a tap-and-hold looks broken in an app */
  .nav-btn, .side-nav a, .btn, .pill, .tier, .cl-av, .avatar {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
  /* kill the grey flash iOS paints over tapped links */
  a, button { -webkit-tap-highlight-color: transparent; }
}