/* ═══════════════════════════════════════════════════════════════════
   OWLMARK STUDIO — TOUCH TARGET SIZES
   By Mourad Mekki

   The brief was to move interactive targets toward 44×44 without making
   desktop toolbars visually oversized. Those two goals only conflict if
   the VISIBLE box has to grow — so it does not. Each small control keeps
   its drawn size and gains an invisible, centred hit area through a
   pseudo-element. A finger meets 44 pixels; the eye still sees a compact
   toolbar.

   WHAT IS DELIBERATELY NOT TOUCHED
   Seats in a seating plan (.sp-seat) and lesson cells in a timetable
   (.t-seg) are the printed DOCUMENT, not chrome. They are clickable
   because a teacher edits them in place, but a seat is the size the
   paper needs it to be. Enlarging those would change what comes out of
   the printer, which is the one thing this product must never do to
   satisfy a metric.

   OVERLAP
   Hit areas can only extend where there is room. Expansion is vertical
   first — rows are rarely tight top to bottom — and horizontal only for
   controls that sit in a gapped row. Adjacent expanded areas are tested
   for click-stealing in audit/r1-targets.js.
   ═══════════════════════════════════════════════════════════════════ */

/* The mechanism. Applied only via the lists below, never blanket. */
.om-target{
  position:relative;
}
.om-target::after{
  content:'';
  position:absolute;
  top:50%;
  inset-inline-start:50%;
  transform:translate(-50%,-50%);
  width:max(100%, var(--om-hit-w, 44px));
  height:max(100%, var(--om-hit-h, 44px));
  /* Behind the label, in front of nothing: it exists to catch a finger. */
  z-index:0;
}
body[dir="rtl"] .om-target::after,
[dir="rtl"] .om-target::after{
  transform:translate(50%,-50%);
}
/* The control's own content stays above its hit area. */
.om-target > *{position:relative;z-index:1}

/* ── Canvas toolbar: zoom out, zoom in, fit ──────────────────────────
   Icon-only, on every studio, and small on both phone and desktop. */
.ct-btn{ --om-hit-h:44px; }
@media (pointer: coarse){
  .ct-btn{ --om-hit-w:44px; }
}

/* ── Studio header ───────────────────────────────────────────────────
   36px tall by design so the row stays slim. The hit area grows, the
   button does not. */
.hd-btn{ --om-hit-h:44px; }
.hd-pills button{ --om-hit-h:40px; }   /* pills sit inside a 3px-padded rail */

/* ── Panel steppers and small counters ──────────────────────────────── */
.count-btn,
.count-btn.sm{ --om-hit-w:44px; --om-hit-h:44px; }

/* ── Certificate Studio ──────────────────────────────────────────────
   The largest concentration: 45 plate favourite stars, 19 filter chips,
   5 carousel dots and the step tabs. */
.om-pfav{ --om-hit-w:44px; --om-hit-h:44px; }
.om-chip{ --om-hit-h:40px; }
/* ── Carousel pager dots ─────────────────────────────────────────────
   The R1.4 pass gave these a 34px hit area with a comment claiming the
   dots sit 8px apart. Measurement says otherwise: 9px dots with a 6px
   gap — a 15px pitch — so the 34px areas overlapped by 19px and five
   dots' centre points were owned by their neighbours. No expansion fits
   a 15px pitch; the PITCH has to grow.

   The legacy stylesheet locks the dot's 9px size with !important but
   sets no margin, so the margin is where the room comes from:
   4.5px each side makes the pitch 9 + 6 + 4.5×2 = 24px exactly. A 24px
   hit box at a 24px pitch touches its neighbour and can never overlap
   it — that is the WCAG 2.5.8 spacing minimum, met by construction
   rather than by hope. The visible dot is still 9px; the strip simply
   breathes: six dots grow from 84px to 138px of quiet space. */
.okr-dot{
  margin-inline:4.5px;
  --om-hit-w:24px;
  --om-hit-h:24px;
}
.cs-step-tab{ --om-hit-h:44px; }
.tb-btn{ --om-hit-h:40px; }

/* ── Form controls ───────────────────────────────────────────────────
   A short input is a real problem on a phone: it is genuinely hard to
   place a cursor in. These grow for real, because nothing about a taller
   field is visually wrong. */
@media (pointer: coarse){
  .p-input,
  input[type="text"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  select,
  textarea{
    min-height:44px;
  }
}

/* Print never sees any of this. */
@media print{
  .om-target::after{display:none}
}