/* ==========================================================================
   Touch targets: 44px, one shared rule (night audit 2026-10-20, C-04).

   Linked after every other stylesheet but print.css (index.html), because the rules it
   fixes were each lost to a later, equal-specificity rule of a view or a
   component (.check-item asked for 44px in form.css and got 40px from
   dictionary-editor.css). It applies on a phone width and on any touch
   screen; a computer with a mouse is untouched.

   Three ways, by what the control is:
   1. A row, a link or a round button gets its real size (44px).
   2. A capsule option, a chip, a tool in the top bar or a switch keeps the
      look it was drawn with, and a 44px area is centred on it: a
      pseudo-element that is at least 44px each way (the pattern the Journal
      and the pill toggle already used for height; here width too).
   3. A field in a tile keeps the tile and grows its own box into the tile's
      padding with a negative margin, so the tile does not change height.
   ========================================================================== */

@media (max-width: 880px), (pointer: coarse) {
  /* ---- 1. Real size ---- */
  .pl-week__step,
  .jd-round,
  .ac-menu__btn {
    width: 44px;
    height: 44px;
  }

  /* The footer links of the windows: the text keeps its line under the
     window's rhythm, the target reaches down to 44px. */

  .fs__hide {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .jv-textbtn,
  .jf-link,
  .jf-check,
  .check-item {
    min-height: 44px;
  }

  .acct-check {
    align-items: center;
    min-height: 44px;
  }

  /* ---- 2. The look stays, the target is 44px ---- */
  .pill-toggle__opt,
  .pf-seg button,
  .pf-leg__b,
  .dv-seg__b,
  .jf-seg__opt,
  .jv-chip,
  .jv-seg__opt,
  .cselect__trigger,
  .jf-x,
  .week-card__edit,
  .top-tool,
  .topbar__actions .sync-status,
  .topbar__actions .demo-tag,
  .topbar__actions .access-pill,
  .topnav__tools .sync-status,
  .topnav__tools .demo-tag,
  .topnav__tools .access-pill,
  #view-root .btn--sm.btn--primary,
  #view-root .btn--sm.btn--secondary {
    position: relative;
  }

  .pill-toggle__opt::after,
  .pf-seg button::after,
  .pf-leg__b::after,
  .dv-seg__b::after,
  .jf-seg__opt::after,
  .jv-chip::after,
  .jv-seg__opt::after,
  .cselect__trigger::after,
  .jf-x::after,
  .week-card__edit::after,
  .top-tool::after,
  .topbar__actions .sync-status::after,
  .topbar__actions .demo-tag::after,
  .topbar__actions .access-pill::after,
  .topnav__tools .sync-status::after,
  .topnav__tools .demo-tag::after,
  .topnav__tools .access-pill::after,
  #view-root .btn--sm.btn--primary::after,
  #view-root .btn--sm.btn--secondary::after,
  .set-switch::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    right: auto;
    /* Height only: widening narrow capsules would overlap their neighbours. */
    width: 100%;
    height: max(100%, 44px);
    transform: translate(-50%, -50%);
  }

  /* ---- 3. Fields in a tile ---- */
  .jf-input:not(textarea),
  .jf-select {
    min-height: 44px;
    margin-block: -8px;
  }

  /* The padding is the target; the focus ring is drawn back inside it so it
     still hugs the figure (it was 3px outside the text). */
  .jf-fig__in {
    padding: 10px 0;
    margin: -10px 0;
  }

  .jf-fig__in:focus {
    outline-offset: -8px;
  }
}

/* The footer links of the windows, on a phone width only (a touch laptop at
   desktop width keeps the windows' rhythm): the text keeps its line, the
   target reaches down to 44px. */
@media (max-width: 880px) {
  .pf-fl,
  .dv-fl {
    display: inline-flex;
    align-items: flex-end;
    min-height: 44px;
    padding-bottom: 6px;
  }
}