/* ─────────────────────────────────────────────────────────────────────────────────────────────
   The (i) on a card or a tile sits in its TOP INLINE-END corner  (TASK-2026-097, info_corner.css v1.0.1)

   The owner's standing rule of 2026-09-29: on every card and every tile the (i) info button stands in the
   card's top corner on the reader's END side — the upper-LEFT in Arabic (RTL), the upper-RIGHT in English
   (LTR). It is not beside the title, not in the foot, not next to a status word.

   How it is done, and why it is done this way:

   1. Only LOGICAL properties place it: `inset-block-start` and `inset-inline-end`. Physical `top`, `left`
      and `right` would put it on the same screen side in both languages. tests/test_info_corner_rule.py
      fails on any physical side in this file.

   2. The markup is untouched. The (i) stays where its module wrote it — inside the title, the foot or the
      label — so the keyboard order (the title's (i) after the title, a card's (i) after the card's own
      button) is what it was. Only the drawing moves: the card is made `position: relative`, the button
      `position: absolute`, and every wrapper between the two is left un-positioned so the button resolves
      against the CARD, not against a heading or an `.emp2-card-over` layer. The one wrapper that WAS
      positioned (`.emp2-card-over`) is made static where it holds an (i).

   3. Room is reserved on the title's own line (`padding-inline-end: var(--corner-i-reserve)`), so the title,
      a figure at the header's far end or a card's "opens" cue never runs under the button.

   4. What is NOT here, on purpose: an (i) that belongs to a form-field label, a table cell or column
      header, a page title (the band's h1/h2), a step of a numbered list, a dialog's own title, or an
      inline status word ("Due today", "Paid", a lock beside a button). Those explain one word and stay
      beside it. tests/test_info_corner_rule.py lists them so a new card cannot be skipped by accident.

   Loaded AFTER app.css and offline_tills.css: several of their rules reset `margin-inline-start` on the
   same (i), and at equal specificity the later sheet wins. The floating card the button opens
   (`.info-tip-card`, info_tip.js) is placed from the button's own rectangle and needs nothing here.
   ───────────────────────────────────────────────────────────────────────────────────────────── */

:root {
  /* TASK-2026-163 S3: the (i) in a card's corner is the design system's 28px square (--info-button) at 14px from both
     edges. An (i) beside a label stays the 24px square of app.css (28px on a phone). */
  --corner-i-size: var(--info-button);
  --corner-i-inset: 14px;                     /* gap to the card's edges */
  --corner-i-reserve: calc(var(--corner-i-inset) + var(--corner-i-size) + 8px);
}

/* ── 1. The cards and tiles that carry the corner. Each one is the containing block of its (i). ── */
.emp2-card,                       /* staff_card.js: payroll cards, the empty-state card */
.emp2-empty:not(.is-card),        /* the boxed empty state of an Employees tab */
.emp2-block,                      /* Employment record, Final settlement (also inside their windows) */
.emp2-list,                       /* a titled list panel: the leave balances */
.perm2-col,                       /* a Permissions area column: "Other pages" */
.pay2-sum,                        /* a Payroll figure tile */
.ta-hire,                         /* the Hire someone card */
.ot-note,                         /* a notice card of the offline till (the plan note, the alerts) */
.ot-empty,                        /* the offline-till empty state */
.ot-lead, .ot-trio li, .ot-fact,  /* the offline-till dialogs' lead card and tiles */
.ot-speccard,                     /* the requirements card */
.kpi-card,                        /* a dashboard tile: the corner is ready for the first (i) it gets */
.dash-uncosted,                   /* the dashboard's cost-of-goods tile */
.cogs-note, .cogs-big5,          /* cost-of-goods notice cards (cogs_notes.js) */
.card {                           /* the shared card (TASK-2026-163 S3): app.css makes it positioned too */
  position: relative;
}

/* ── 2. The (i) itself. Selectors name the CARD'S OWN (i) — never one on a row label inside it. ── */
.emp2-card .info-tip,             /* payroll and employment cards' (i), the empty-state card's (i) */
.emp2-empty:not(.is-card) > div > h3 > .info-tip,
.emp2-block-h .info-tip,
.emp2-list-h .info-tip,
.perm2-col-h .info-tip,
.pay2-sum > dt > .info-tip,
.ta-hire > .card-body:first-child .ta-panel-title .info-tip,
.ot-note > b > .info-tip,
.ot-empty h3 > .info-tip,
.ot-lead b > .info-tip,
.ot-trio li > b > .info-tip,
.ot-fact > b > .info-tip,
.ot-side-h h3 > .info-tip,
.kpi-card > .info-tip,
.card > .info-tip,                 /* the shared card (TASK-2026-163 S3): a direct (i), or the one in its header */
.card > .card-header > .info-tip,
.card > .card-header > h3 > .info-tip,
.card > .card-header > div > .info-tip {
  position: absolute;
  inset-block-start: var(--corner-i-inset);
  inset-inline-end: var(--corner-i-inset);
  width: var(--corner-i-size);
  height: var(--corner-i-size);
  margin: 0;
  z-index: 3;                      /* above the card's covering button (z-index 1) */
}

/* ── 3. Room on the title's own line, only where an (i) will stand. ── */
.emp2-card:has(.info-tip) > .emp2-card-top,
.emp2-block-h:has(.info-tip),
.emp2-list-h:has(.info-tip),
.perm2-col-h:has(.info-tip),
.ot-side-h:has(h3 > .info-tip),
.ot-note > b:has(> .info-tip),
.ot-lead b:has(> .info-tip),
.ot-trio li > b:has(> .info-tip),
.ot-fact > b:has(> .info-tip),
.pay2-sum > dt:has(> .info-tip),
.ot-empty h3:has(> .info-tip),
.ta-hire .ta-panel-title:has(.info-tip),
.card > .card-header:has(.info-tip) {
  padding-inline-end: var(--corner-i-reserve);
}
/* A card with an (i) has less width for the "opens" cue's neighbour; the title truncates, never the button. */
.emp2-empty:not(.is-card):has(> div > h3 > .info-tip) { padding-inline-end: max(32px, var(--corner-i-reserve)); }
.ot-side-h:has(h3 > .info-tip) { padding-inline-end: var(--corner-i-reserve); }

/* ── 4. Wrappers that would otherwise catch the button. ── */
.emp2-card-over:has(.info-tip) { position: static; z-index: auto; }   /* was relative + z-index 2 ... */
.emp2-card-over:has(.info-tip) :is(button, a):not(.info-tip) { position: relative; z-index: 2; }   /* ... so its buttons carry the z-index */

/* ── 5. The cost-of-goods (i) (cogs_notes.js `.cogs-i`, TASK-2026-078) where it is a card's own explanation. ──
   Its button is a 28 px hit area around an 18 px ring (40 px around 20 on a touch screen), so the inset is
   the corner gap minus the hit area's own margin. Its sentence lives in a hidden sibling and needs nothing. */
.cogs-note-head > .cogs-i,
.cogs-big5-head > .cogs-i {
  position: absolute;
  inset-block-start: calc(var(--corner-i-inset) - 5px);
  inset-inline-end: calc(var(--corner-i-inset) - 5px);
  margin: 0;
  z-index: 3;
}
@media (pointer: coarse) {
  .cogs-note-head > .cogs-i, .cogs-big5-head > .cogs-i { inset-block-start: 0; inset-inline-end: 0; }
}
/* The reserve is on the card itself: its action button sits at the card's far end, not at the title's. */
.cogs-note:has(.cogs-i), .cogs-big5:has(.cogs-i) { padding-inline-end: var(--corner-i-reserve); }