/* ============================================================================
   typography/interface.css — the interface layer (§14 layer 3).

   tokens.css settles what the type tokens MEAN. This settles the handful of
   density facts §7 asks for that no type token can express, and nothing else.
   It is deliberately short: the interface's sizes and weights are already
   correct through the token layer, and adding a second opinion about them here
   would be exactly the "last stylesheet wins" layer §14 rules out.

   THE TOUCH TARGET

   Measured at 390x844 with touch emulation, before this file existed
   (tools/typography-density-a11y.mjs):

       input 38px      select 38px      textarea 38px

   §7 puts the floor for a touch target at 44px.

   Four stylesheets already TRY to raise it -- sharp-type-v5, executive-theme,
   odoo-suite -- and all four lose, because the winning rule is

       html[data-jb-theme="executive"] .main :is(.inp, .pf input, ...) {
         min-height: var(--ctl-h);
       }

   and --ctl-h is 38px. Stacking a fifth min-height rule on top would be a
   specificity fight against a rule that is doing its job correctly. The
   control height is already a TOKEN; the right move is to give that token its
   touch value at touch sizes and let every one of those rules keep working.
   That is what this file does, in three declarations.

   WHAT IS DELIBERATELY NOT RAISED

   A checkbox or radio is not stretched to 44px: a 44px tick box looks broken,
   and its real hit area comes from the label wrapping it. The journal
   worksheet's account pill keeps its grid height -- forcing 44px into a dense
   entry grid would break the row rhythm the worksheet depends on. Both are
   recorded in docs/design/TYPOGRAPHY-AUDIT.md rather than silently omitted.

   No !important is used here, and nothing observes the DOM.
   ========================================================================== */

/* Phone and small tablet. 768px is the app's existing mobile breakpoint, so
   this introduces no new one. */
@media (max-width: 768px) {
  /* `html[data-jb-theme]` matches the same weight as the rule that sets the
     desktop values -- html[data-jb-theme="executive"], (0,1,1) -- and this
     file loads later, so it wins the tie. A plain :root at (0,1,0) does not,
     which is why the first attempt at this measured no change at all. The
     bare :root is kept for an install with no theme attribute set. */
  :root,
  html[data-jb-theme] {
    --ctl-h: 44px;   /* was 38px */
    --btn-h: 44px;   /* was 36px */
    --row-h: 44px;   /* §7: a touch row is a touch target too */
  }
}

/* A coarse pointer at any width is still a thumb: a tablet in landscape, a
   touchscreen laptop, a point-of-use terminal. */
@media (pointer: coarse) {
  :root,
  html[data-jb-theme] {
    --ctl-h: 44px;
    --btn-h: 44px;
    --row-h: 44px;
  }
}

/* Controls that size themselves rather than reading the token still need the
   floor. These are ordinary rules at ordinary weight; the token above is what
   does the work for everything that already reads it. */
@media (max-width: 768px), (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    min-height: var(--ctl-h);
  }
}

/* Two touch targets that size themselves rather than reading --ctl-h, found by
   sweeping all 31 views at 390px with touch emulation:

     button.rlist-item   38px   the report/metrics list — tapping one is how you
                                change report, so it is a primary target
     #view-batch input   36px   the worksheet's own controls, which §7 puts in
                                the 44-48px band for exactly this reason

   The journal grid's account pill (21px) is NOT raised: it sits inside a dense
   entry grid where a 44px control would break the row rhythm, and it is reached
   by keyboard as much as by tap. That exception is recorded in
   docs/design/TYPOGRAPHY-AUDIT.md rather than quietly skipped. */
@media (max-width: 768px), (pointer: coarse) {
  button.rlist-item,
  .rlist-item {
    min-height: var(--ctl-h);
  }
  #view-batch input:not([type="checkbox"]):not([type="radio"]),
  #view-batch select {
    min-height: var(--ctl-h);
  }
}