/* ═══════════════════════════════════════════════════════════════════════════
   Offline tills — offline_tills.css v1.0.8 (spec 045 S3, T042; TASK-2026-087)

   The Branches page (mockup m1), the add dialog (m2) and the empty state (m8), ported from the
   approved mockups' stylesheet `scratch/mockups/045-brand.css` (rated 9/10 by the owner on
   2026-09-27). Built as drawn: the bag silhouette, the teal header band, the dashed door.

   What changed on the way in, and why:
   - The mockup's own palette (`--b-*`) became `--ot-*` tokens. Their default reads the app's
     tokens, so the four older palettes follow; only the two brand themes carry the drawn hexes,
     the same pattern spec 046's `--emp2-*` block uses in app.css. No gold is written here.
   - Every rule is scoped to `.ot-page` or `.ot-dlg`, so nothing here restyles another screen.
   - Only the rules m1, m2 and m8 draw are here. The till's card, the ledger, the joining code and
     the cashier strip (m3 to m7) arrive with the slices that build those screens.
   - Nothing here that is toggled with the `hidden` attribute is given a `display` without its
     `[hidden]` twin.
   - Nothing here is rotated, so there is no drawn shape that needs physical sides; the one mirrored
     glyph, the tile's chevron, is an icon-font glyph flipped once under `html[dir="rtl"]`.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --ot-fill: var(--fill);
  --ot-on-fill: var(--on-fill);
  --ot-line: var(--brand);
  --ot-text: var(--brand);
  --ot-strong: var(--text);
  --ot-soft: var(--muted);
  --ot-surface: var(--tint);
  --ot-surface-2: var(--surface);
  --ot-tint: var(--tint);
  --ot-rule: var(--line);
  --ot-card: var(--surface);
  --ot-well: var(--surface);
  --ot-summary: var(--surface);
  --ot-label: var(--text-muted);
  --ot-ink: var(--sunken);
}
html[data-theme="retailpower"] {
  --ot-ink: #034959; --ot-fill: #2C6B78; --ot-on-fill: #ffffff; --ot-line: #2C6B78; --ot-text: #034959;
  --ot-strong: #034959; --ot-soft: #2C5F6B; --ot-surface: #D0EFF2; --ot-surface-2: #EAF7F9; --ot-tint: #EEF7F8;
  --ot-rule: #C7E3E7; --ot-card: #ffffff; --ot-well: #F9F8F6; --ot-summary: rgba(255, 255, 255, 0.5); --ot-label: #4A5E72;
}
html[data-theme="retailpower-dark"] {
  --ot-ink: #034959; --ot-fill: #2C6B78; --ot-on-fill: #ffffff; --ot-line: #50B4BF; --ot-text: #84D0D9;
  --ot-strong: #D0EFF2; --ot-soft: #A9DCE2; --ot-surface: rgba(80, 180, 191, 0.13); --ot-surface-2: rgba(80, 180, 191, 0.07);
  --ot-tint: rgba(80, 180, 191, 0.07); --ot-rule: rgba(80, 180, 191, 0.28); --ot-card: var(--surface); --ot-well: var(--surface);
  --ot-summary: rgba(0, 0, 0, 0.14); --ot-label: #C9C4BD;
}

/* ─────────────── page frame ─────────────── */
/* The mockup set the shell's padding to zero and padded the page; here the shell keeps its own
   padding (every page lines up with the header title) and the page adds none at its sides. */
.ot-page { max-width: 1120px; margin: 0 auto; padding: 8px 0 40px; box-sizing: border-box; display: flex; flex-direction: column;
  gap: 24px; font-size: 15px; color: var(--text); --text-muted: var(--ot-label); }
.ot-num { font-family: 'Outfit', 'Cairo', sans-serif; font-variant-numeric: tabular-nums; }
.ot-arch { flex: none; width: 18px; height: 11px; color: var(--ot-line); }
.ot-page .btn[aria-disabled="true"], .ot-dlg .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* header band */
.ot-band { background: var(--ot-surface); border: 1px solid var(--ot-rule); border-radius: 2px; padding: 28px 32px 0; overflow: hidden; }
.ot-band-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px 24px; }
.ot-band-text { min-width: 0; flex: 1 1 360px; }
.ot-h1 { margin: 0; display: flex; align-items: center; gap: 12px; font-size: 26px; font-weight: 700; line-height: 1.35; color: var(--ot-strong); }
.ot-h1 .ot-arch { width: 26px; height: 16px; }
.ot-h1 .info-tip { margin-inline-start: 0; align-self: center; }
.ot-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 24px -32px 0; border-top: 1px solid var(--ot-rule);
  background: var(--ot-summary); }
.ot-sum { display: flex; flex-direction: column; gap: 4px; padding: 16px 32px 18px; min-width: 0; }
.ot-sum + .ot-sum { border-inline-start: 1px solid var(--ot-rule); }
.ot-sum dt { font-size: 13px; color: var(--ot-soft); font-weight: 600; }
.ot-sum dd { margin: 0; display: flex; align-items: center; gap: 10px; font-family: 'Outfit', 'Cairo', sans-serif; font-size: 26px; font-weight: 600;
  line-height: 1.3; color: var(--ot-strong); }
.ot-sum-sub { font-size: 13px; color: var(--ot-soft); }
.ot-slots { display: inline-flex; gap: 4px; }
.ot-slot { width: 22px; height: 26px; }
.ot-of { font-size: 16px; font-weight: 500; color: var(--ot-soft); }

/* ─────────────── branch cards ─────────────── */
.ot-branches { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 24px; align-items: start; }
.ot-branch { background: var(--ot-card); border: 1px solid var(--line); border-radius: 2px; overflow: hidden; min-width: 0; }
.ot-branch-h { padding: 24px; display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.ot-branch-id { min-width: 0; flex: 1 1 auto; }
.ot-branch-h h2 { margin: 0; font-size: 18px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ot-branch-h address { font-style: normal; font-size: 14px; color: var(--muted); margin-top: 4px; display: flex; gap: 8px; align-items: center; }
.ot-branch-h address i { color: var(--ot-line); font-size: 12px; }
.ot-tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; font-size: 12px; font-weight: 700; border-radius: 2px;
  color: var(--ot-strong); background: var(--ot-surface); line-height: 1.7; }
.ot-mini { display: flex; gap: 24px; margin: 0; }
.ot-mini div { display: flex; flex-direction: column; align-items: center; min-width: 56px; }
.ot-mini dd { margin: 0; font-family: 'Outfit', 'Cairo', sans-serif; font-size: 22px; font-weight: 600; color: var(--text); line-height: 1.2; }
.ot-mini dt { font-size: 13px; color: var(--muted); white-space: nowrap; }
.ot-zone { background: var(--ot-card); border-top: 1px solid var(--line); padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.ot-zone-h { font-size: 13px; font-weight: 700; color: var(--muted); margin: 0; }
.ot-tiles { display: flex; flex-direction: column; gap: 12px; }

/* a till row and the door share the bag silhouette */
.ot-tile, .ot-door { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; min-height: 72px;
  box-sizing: border-box; padding: 14px 18px; text-align: start; border-radius: 2px; font: inherit; cursor: pointer; width: 100%; }
.ot-tile { background: var(--ot-card); border: 1px solid var(--line); color: var(--text); text-decoration: none; }
.ot-tile:hover { border-color: var(--ot-line); }
.ot-tile:focus-visible, .ot-door:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ot-tile.is-new { border-color: var(--ot-line); box-shadow: inset 0 0 0 1px var(--ot-line); }
.ot-tile.is-danger { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.ot-tile .ot-bag, .ot-door .ot-bag { width: 38px; height: 44px; grid-row: span 2; }
.ot-tile-name { font-size: 16px; font-weight: 700; line-height: 1.35; }
.ot-tile .ot-st { grid-column: 2; }
.ot-tile .ot-go { grid-column: 3; grid-row: 1 / span 2; color: var(--text-muted); font-size: .8rem; }
html[dir="rtl"] .ot-go { transform: scaleX(-1); }
.ot-bag { width: 56px; height: 64px; display: block; flex: none; }
.ot-door { background: var(--ot-surface-2); border: 1px dashed var(--ot-line); color: var(--ot-text); }
.ot-door:hover { background: var(--ot-surface); }
.ot-door b { font-size: 15px; line-height: 1.4; grid-column: 2; grid-row: 1 / span 2; color: var(--ot-strong); }
.ot-door small { font-size: 13px; line-height: 1.45; color: var(--muted); grid-column: 3; grid-row: 1 / span 2; }
.ot-door.is-locked { background: transparent; border-color: var(--line); color: var(--muted); }
.ot-door.is-locked:hover { background: var(--tint); }
.ot-door.is-locked b { color: var(--text); }

/* status: shape + colour + word */
.ot-st { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.ot-st i { font-size: .6rem; }
.ot-st.is-ok { color: var(--success); }
.ot-st.is-wait { color: var(--warning); }
.ot-st.is-bad { color: var(--danger); }
.ot-st.is-bad i { font-size: .74rem; }
.ot-st.is-off { color: var(--text-muted); }
.ot-st.is-off i { font-size: .72rem; }

/* notices */
.ot-note { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; padding: 16px 20px; background: var(--ot-card);
  border: 1px solid var(--line); border-inline-start: 3px solid var(--ot-line); border-radius: 2px; }
.ot-note > i { margin-top: 5px; color: var(--ot-line); }
.ot-note b { font-size: 15px; color: var(--text); }
.ot-note b .info-tip { margin-inline-start: 8px; }
.ot-note .ot-note-act { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.ot-note.is-warn { border-inline-start-color: var(--warning); } .ot-note.is-warn > i { color: var(--warning); }
.ot-note.is-bad { border-inline-start-color: var(--danger); background: var(--danger-tint); } .ot-note.is-bad > i { color: var(--danger); }
.ot-note.is-quiet { border-inline-start-color: var(--text-muted); } .ot-note.is-quiet > i { color: var(--text-muted); }
.ot-why { font-size: 13px; color: var(--muted); }

/* ─────────────── empty state (m8) ─────────────── */
.ot-empty { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 32px; align-items: center; padding: 16px 8px; }
.ot-empty .ot-empty-bag { width: 112px; height: 128px; }
.ot-empty h3 { margin: 0 0 16px; font-size: 19px; color: var(--text); display: flex; align-items: center; gap: 8px; }
.ot-empty h3 .info-tip { margin-inline-start: 0; }

/* ─────────────── dialogs (m1 locked, m2 add) ─────────────── */
.modal-card.ot-dlg { width: min(640px, calc(calc(100 * var(--vw)) - 32px)); max-width: none; container-type: inline-size; --ot-field-h: 44px;
  background: var(--ot-card); color: var(--text); }
.ot-dlg .modal-header h3 { font-size: 18px; }
.ot-dlg .modal-body { display: flex; flex-direction: column; gap: 20px; padding: 24px; font-size: 15px; overflow-y: auto; }
.ot-dlg .modal-footer { padding: 16px 24px; gap: 12px; }
.ot-dlg .form-group { margin: 0; }
.ot-dlg label { text-transform: none; letter-spacing: normal; font-size: .86rem; font-weight: 600; color: var(--text); display: flex;
  align-items: center; gap: 6px; margin-bottom: 6px; }
.ot-dlg input:not([type="checkbox"]):not([type="radio"]) { height: var(--ot-field-h); width: 100%; box-sizing: border-box; padding-block: 0; }
.ot-dlg p.ot-dlg-p { margin: 0; font-size: 15px; line-height: 1.75; color: var(--muted); }
.ot-dlg-notices:empty { display: none; }
.ot-stepper { display: flex; list-style: none; margin: 0 0 4px; padding: 0; }
.ot-stepper li { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0; margin: 0;
  font-size: 13px; color: var(--muted); text-align: center; }
.ot-stepper li:not(:first-child)::before { content: ""; position: absolute; top: 17px; inset-inline-end: calc(50% + 22px); width: calc(100% - 44px);
  height: 2px; background: var(--line); }
.ot-stepper li.is-on::before, .ot-stepper li.is-done::before { background: var(--ot-line); }
.ot-stepper-n { width: 36px; height: 36px; box-sizing: border-box; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--line);
  background: var(--ot-card); font-family: 'Outfit', 'Cairo', sans-serif; font-weight: 600; font-size: 15px; color: var(--muted); position: relative; }
.ot-stepper li.is-on .ot-stepper-n { background: var(--ot-fill); border-color: var(--ot-fill); color: var(--ot-on-fill); }
.ot-stepper li.is-done .ot-stepper-n { border-color: var(--ot-line); color: var(--ot-line); }
.ot-stepper li.is-on .ot-stepper-l { color: var(--ot-strong); font-weight: 700; }
.ot-lead { display: flex; align-items: center; gap: 20px; padding: 20px 24px; background: var(--ot-surface); border: 1px solid var(--ot-rule); border-radius: 2px; }
.ot-lead.is-quiet { background: var(--ot-surface-2); }
.ot-lead-bag { width: 52px; height: 60px; flex: none; }
.ot-lead b { display: flex; align-items: center; gap: 8px; font-size: 18px; color: var(--ot-strong); }
.ot-lead b .info-tip { margin-inline-start: 0; }
.ot-trio { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ot-trio li { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--line); border-radius: 2px; }
.ot-trio i.fa-solid { font-size: 18px; color: var(--ot-line); margin-bottom: 4px; }
.ot-trio b { font-size: 15px; color: var(--text); }
.ot-trio b .info-tip { margin-inline-start: 6px; }
.ot-dlg-for { display: flex; align-items: center; gap: 10px; padding: 12px 16px; font-size: 14px; color: var(--muted); background: var(--ot-well);
  border: 1px solid var(--line); border-radius: 2px; }
.ot-dlg-for i { color: var(--ot-line); }
.ot-dlg-for b { font-size: 15px; color: var(--text); }
.ot-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ot-fact { padding: 16px; border: 1px solid var(--line); border-radius: 2px; display: flex; flex-direction: column; gap: 6px; background: var(--ot-card); }
.ot-fact b { font-size: .92rem; color: var(--text); }
.ot-fact span { font-size: .8rem; line-height: 1.65; color: var(--muted); }
.ot-fact.is-key { border-color: var(--ot-rule); background: var(--ot-tint); }
.ot-fact.is-key b { font-size: 1rem; }
.ot-dlg .ot-empty { padding: 0; gap: 16px 24px; }
.ot-dlg .ot-empty .ot-bag { width: 84px; height: 96px; }
.ot-dlg .ot-plan-why { margin: 0; font-size: 13px; color: var(--muted); }
@container (max-width: 540px) {
  .ot-trio { grid-template-columns: minmax(0, 1fr); }
  .ot-dlg .modal-footer .btn { flex: 1 1 auto; }
}
@container (max-width: 460px) {
  .ot-facts { grid-template-columns: minmax(0, 1fr); }
  .ot-dlg .modal-footer { flex-wrap: wrap; }
}

/* the added-till message (m2 "card" state) */
.ot-toast { position: fixed; inset-block-end: 24px; inset-inline-end: 24px; z-index: var(--z-toast, 3000); max-width: min(420px, calc(calc(100 * var(--vw)) - 32px));
  display: flex; gap: 12px; align-items: center; padding: 16px 20px; background: var(--ot-fill); color: var(--ot-on-fill); border-radius: 2px;
  box-shadow: var(--shadow-float); font-size: 15px; }
.ot-toast[hidden] { display: none; }

/* ─────────────── narrower ─────────────── */
@media (max-width: 640px) {
  .ot-page { padding: 0 0 32px; gap: 16px; }
  .ot-band { padding: 20px 16px 0; }
  .ot-h1 { font-size: 22px; }
  .ot-summary { margin: 20px -16px 0; grid-template-columns: minmax(0, 1fr); }
  .ot-sum { padding: 12px 16px; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .ot-sum dd { font-size: 20px; }
  .ot-sum-sub { flex-basis: 100%; }
  .ot-sum + .ot-sum { border-inline-start: 0; border-top: 1px solid var(--ot-rule); }
  .ot-branches { grid-template-columns: minmax(0, 1fr); }
  .ot-branch-h { padding: 16px; flex-wrap: wrap; }
  .ot-zone { padding: 16px; }
  .ot-door small { grid-column: 2; grid-row: auto; }
  .ot-door b { grid-row: auto; }
  .ot-empty { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .ot-empty .ot-empty-bag { width: 80px; height: 92px; }
  .ot-toast { inset-inline: 16px; }
}


/* ═══════════════ Slices S4 to S7 (TASK-2026-087): the till's card (m3, m4), the ledger (m5), the bell and cashier strip (m6), the
   switch-off dialog (m7). Ported from 045-brand.css with the same token mapping as above (--b-* became --ot-*). Nothing here is
   rotated except the crumb's chevron, an icon-font glyph flipped once under html[dir="rtl"]. ═══════════════ */

/* a summary value that is words or a date, not a big number */
.ot-sum dd:not(:has(.ot-num)) { font-family: 'Cairo', sans-serif; font-size: 18px; font-weight: 700; }
.ot-date { white-space: nowrap; }

/* breadcrumb and the card's band */
.ot-crumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--ot-soft); margin-bottom: 8px; }
.ot-crumb a { color: var(--ot-soft); text-decoration: none; }
.ot-crumb a:hover { text-decoration: underline; }
.ot-crumb i { font-size: .6rem; }
html[dir="rtl"] .ot-crumb i { transform: scaleX(-1); }
.ot-band .ot-lede { margin: 6px 0 0; font-size: 15px; color: var(--ot-soft); }
.ot-band-bag { width: 36px; height: 41px; flex: none; }
.ot-band-end { display: flex; gap: 8px; flex-wrap: wrap; }
.ot-band-end .btn { background: var(--ot-card); }

/* the card: install steps beside the minimum PC */
.ot-till-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.ot-panel { background: var(--ot-card); border: 1px solid var(--line); border-radius: 2px; padding: 32px; min-width: 0; }
.ot-panel-h { display: flex; align-items: center; gap: 10px; margin: 0 0 28px; font-size: 18px; font-weight: 700; color: var(--text); }
.ot-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ot-step { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px 20px; position: relative; padding-bottom: 32px; }
.ot-step:last-child { padding-bottom: 0; }
.ot-step::before { content: ""; position: absolute; inset-inline-start: 19px; top: 46px; bottom: 6px; border-inline-start: 2px solid var(--line); }
.ot-step:last-child::before { display: none; }
.ot-step-n { width: 40px; height: 40px; box-sizing: border-box; border-radius: 50%; display: grid; place-items: center; font-family: 'Outfit', 'Cairo', sans-serif;
  font-weight: 600; font-size: 16px; border: 2px solid var(--ot-line); color: var(--ot-text); background: var(--ot-card); }
.ot-step.is-blocked .ot-step-n { border-color: var(--line); color: var(--text-muted); }
.ot-step.is-done .ot-step-n, .ot-step.is-current .ot-step-n { background: var(--ot-fill); border-color: var(--ot-fill); color: var(--ot-on-fill); }
.ot-step h3 { margin: 8px 0 0; font-size: 17px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ot-step.is-blocked h3 { color: var(--muted); }
.ot-step h3 .info-tip { margin-inline-start: 0; }
.ot-step-b { grid-column: 2; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; min-width: 0; }
.ot-step-b.ot-wide { align-items: stretch; }
.ot-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ot-meta { font-size: 13px; color: var(--muted); }
.ot-status-panel { display: flex; gap: 14px; align-items: flex-start; width: 100%; box-sizing: border-box; padding: 16px 18px; background: var(--ot-surface-2);
  border: 1px solid var(--ot-rule); border-radius: 2px; }
.ot-status-panel > i { font-size: 18px; color: var(--ot-line); margin-top: 3px; }
.ot-status-panel b { display: block; font-size: 15px; color: var(--ot-strong); }
.ot-status-panel span { display: block; font-size: 14px; color: var(--muted); margin-top: 2px; }
.ot-speccard { display: flex; flex-direction: column; gap: 16px; }
.ot-side-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.ot-side-h h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; }
.ot-side-h h3 .info-tip { margin-inline-start: 0; }
.ot-spec { margin: 0; }
.ot-spec div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.ot-spec div:last-child { border-bottom: 0; }
.ot-spec dt { color: var(--muted); }
.ot-spec dd { margin: 0; font-weight: 600; color: var(--text); text-align: end; }
.ot-tag.is-proposed { background: transparent; border: 1px solid var(--ot-rule); color: var(--muted); }

/* the joining code: large separate characters, always left to right */
.ot-code-panel { width: 100%; box-sizing: border-box; padding: 24px; border: 1px solid var(--ot-rule); background: var(--ot-surface); border-radius: 2px;
  display: flex; flex-direction: column; gap: 16px; }
.ot-code-panel.is-spent { background: var(--ot-well); border-color: var(--line); }
.ot-code-panel p { margin: 0; }
.ot-code { display: flex; gap: 8px 6px; direction: ltr; flex-wrap: wrap; align-self: flex-start; align-items: center; }
.ot-code-g { display: inline-flex; gap: 6px; }
.ot-ch { width: 42px; height: 56px; display: grid; place-items: center; font-family: 'Outfit', ui-monospace, monospace; font-size: 28px; font-weight: 600;
  color: var(--ot-strong); background: var(--ot-card); border: 1px solid var(--ot-rule); border-radius: 2px; }
.ot-code em { width: 12px; display: grid; place-items: center; color: var(--text-muted); font-style: normal; font-size: 20px; }
.ot-code.is-masked .ot-ch { color: var(--text-muted); border-color: var(--line); }
.ot-code-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14px; color: var(--muted); }
.ot-code-meta b { color: var(--text); }
.ot-code-once { font-size: 14px; font-weight: 700; color: var(--warning); display: flex; gap: 8px; align-items: center; }
.ot-code-once .info-tip { margin-inline-start: 0; }

/* the ledger (m5, m6, m7): one card per till */
.ot-secure { display: flex; align-items: center; gap: 10px; font-size: .88rem; color: var(--muted); padding: 10px 16px; margin: 0;
  border: 1px solid var(--line); border-radius: 2px; background: var(--ot-card); }
.ot-secure i { color: var(--success); }
.ot-secure b { color: var(--text); font-weight: 700; }
.ot-sum.is-bad { background: var(--danger-tint); }
.ot-sum dd .ot-st { font-family: 'Cairo', sans-serif; font-size: 16px; font-weight: 700; }
.ot-till { background: var(--ot-card); border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.ot-till.is-danger { border-color: var(--danger); box-shadow: inset 0 3px 0 var(--danger); }
.ot-till.is-offcard { background: var(--ot-well); }
.ot-till-h { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; padding: 24px; }
.ot-till-h .ot-bag { width: 48px; height: 55px; }
.ot-till-id { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ot-till-id h2 { margin: 0; font-size: 18px; font-weight: 700; color: var(--text); }
.ot-till-id > span { font-size: 14px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.ot-till-id a { color: inherit; text-decoration: none; }
.ot-till-id a:hover { text-decoration: underline; }
.ot-till-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ot-till-alert { padding: 0 24px 20px; }
.ot-ledger-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); border-top: 1px solid var(--line); }
.ot-today { padding: 24px; display: flex; flex-direction: column; gap: 14px; border-inline-end: 1px solid var(--line); }
.ot-today-h { font-size: 13px; font-weight: 700; color: var(--muted); margin: 0; }
.ot-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 12px; margin: 0; }
.ot-pair div { display: flex; flex-direction: column; gap: 2px; }
.ot-pair dt { font-size: 13px; color: var(--muted); order: 2; }
.ot-pair dd { margin: 0; font-family: 'Outfit', 'Cairo', sans-serif; font-size: 44px; line-height: 1.05; font-weight: 600; color: var(--text); order: 1; }
.ot-pair .ot-eq { font-size: 1.3rem; color: var(--success); padding-bottom: 28px; }
.ot-pair.is-bad dd.is-short, .ot-pair.is-bad .ot-eq { color: var(--danger); }
.ot-pair.is-quiet dd, .ot-pair.is-quiet .ot-eq { color: var(--text-muted); }
.ot-verdict { font-size: 14px; font-weight: 600; display: flex; gap: 8px; align-items: center; margin: 0; }
.ot-verdict.is-ok { color: var(--success); }
.ot-verdict.is-bad { color: var(--danger); }
.ot-verdict.is-info { color: var(--ot-text); }
.ot-verdict.is-wait { color: var(--muted); }
.ot-days { padding: 16px 24px 20px; min-width: 0; overflow-x: auto; }
.ot-days table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ot-days caption { text-align: start; font-size: 13px; font-weight: 700; color: var(--muted); padding: 8px 0 6px; }
.ot-days th { text-align: start; font-weight: 600; font-size: 13px; color: var(--muted); padding: 8px 0; border-bottom: 1px solid var(--line);
  text-transform: none; letter-spacing: normal; }
.ot-days td { padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--text); }
.ot-days th + th, .ot-days td + td { padding-inline-start: 12px; }
.ot-days tr:last-child td { border-bottom: 0; }
.ot-days td.n { font-family: 'Outfit', 'Cairo', sans-serif; font-weight: 600; }
.ot-days tr.is-bad td { color: var(--danger); background: var(--danger-tint); }
.ot-foot { display: flex; flex-wrap: wrap; gap: 8px 28px; padding: 16px 24px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted);
  background: var(--ot-well); }
.ot-foot b { color: var(--text); font-weight: 600; }

/* the red mark on the group and on the Offline tills item */
.ot-red-mark::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-inline-start: 8px; vertical-align: middle;
  background: var(--danger); border-radius: 50%; }

@media (max-width: 1000px) {
  .ot-till-grid, .ot-ledger-wrap { grid-template-columns: minmax(0, 1fr); }
  .ot-today { border-inline-end: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .ot-panel { padding: 20px 16px; }
  .ot-till-h, .ot-today, .ot-days, .ot-foot { padding-inline: 16px; }
  .ot-till-alert { padding-inline: 16px; }
  .ot-till-acts { width: 100%; }
  .ot-code-panel { padding: 16px; }
  .ot-ch { width: 26px; height: 38px; font-size: 17px; }
  .ot-code-g { gap: 3px; }
  .ot-code { gap: 6px 2px; }
  .ot-code em { width: 7px; font-size: 16px; }
  .ot-pair dd { font-size: 34px; }
  .ot-days { overflow-x: visible; }
  .ot-days table { table-layout: fixed; font-size: 13px; }
  .ot-days th, .ot-days td { white-space: normal; overflow-wrap: anywhere; }
  .ot-days th + th, .ot-days td + td { padding-inline-start: 8px; }
  .ot-days .ot-st { white-space: normal; }
}

/* the cashier's strip while offline (m6): the dark brand colour, an ordinary working state and not an alarm */
.ot-strip.is-offline { background: var(--ot-ink); color: var(--ot-on-fill); }
.ot-strip.is-offline .till-strip-dot { background: currentColor; }

/* the Faults page: events an offline till made and the site never received */
.ot-faultlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ot-fault { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.ot-fault b { color: var(--text); }
.ot-fault-what { color: var(--danger); font-weight: 600; }
.ot-fault-when { color: var(--text-muted); font-size: 13px; }

/* The joining code prints through the shared roll-paper frame (thermal_paper.js printPaper); the paper carries its own rules (offline_tills.js). */

/* ─────────────── names, the main branch, the corner (i) (TASK-2026-087, owner walk 2026-09-29 (c)) ───────────────
   The (i) of a CARD sits in the card's top inline-end corner: upper-left in Arabic, upper-right in English (logical sides, so it
   follows the direction by itself). The cards that already had an (i) are placed by `info_corner.css` (TASK-2026-097); the branch card
   is new here and carries its own, with the same 10 px gap. Nothing here is toggled with the `hidden` attribute. */
.ot-page .has-corner-tip { position: relative; }
.ot-page .has-corner-tip > .ot-corner-tip { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; margin: 0; z-index: 3; }
.ot-branch.has-corner-tip .ot-branch-h { padding-block-start: 38px; }
.ot-store { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; color: var(--ot-soft); }
.ot-store > i { color: var(--ot-line); font-size: 14px; }
.ot-store-l { font-size: 13px; font-weight: 600; }
.ot-store b { font-size: 16px; color: var(--ot-strong); }
.ot-icon-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--ot-rule); border-radius: 2px;
  background: var(--ot-card); color: var(--ot-text); font-size: 13px; cursor: pointer; flex: none; }
.ot-icon-btn:hover { border-color: var(--ot-line); background: var(--ot-surface-2); }
.ot-icon-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ot-h1 .ot-icon-btn { margin-inline-start: 4px; }
.ot-branch-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ot-tool { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 12px; border: 1px solid var(--ot-rule); border-radius: 2px;
  background: var(--ot-card); color: var(--ot-text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.ot-tool i { font-size: 12px; color: var(--ot-line); }
.ot-tool:hover { border-color: var(--ot-line); background: var(--ot-surface-2); }
.ot-tool:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }