/* renderer/outreach.css — "📣 פניות קרות" owner panel (renderer/outreach.js), in the finance-sheet look (finance-sheet.css).
   v3 "calm": one head line (channel tabs with counts · a small icon row · ✕), the "🎯 תחום היום" card (one niche a day,
   picked by the system: a small grey "why" line, the day's message read-only, ONE big "📋 העתק הודעה"), a thin progress
   bar, ONE primary button (+ "✓ סמן את כל מה שפתחתי כנשלח"), then a list where every row is ONE line: number · name ·
   niche pill · (הודעה אחרת) · שלח · סמן נשלח (grey outline) / ✓ נשלח (solid green) · ⋯.
   The panel carries the sheet palette (.fs-tokens → --fs-grid / --fs-head / --fs-cell / --fs-index / --fs-focus …);
   below are only the badge colours finance spells out literally (✓ green, blue, grey, amber, red), named once.
   Status colours = finance logic, shown only as the row colour (the number gutter): green = sent, blue = replied,
   grey = skipped, amber = opened (not sent yet). HQ is dark only, like finance (color-scheme dark keeps native
   controls dark). */
html.or-lock, html.or-lock body { overflow: hidden; }
.or-overlay { position: fixed; inset: 0; z-index: 9000; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(2, 6, 12, .66); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.or-overlay.open { display: flex; }
.or-panel {
  /* the finance sheet's literal colours (finance-sheet.css: finbot-badge / fa-chip / finance-expected-tag / fy-btn) */
  --or-text: #e2e8f0; --or-strong: #f1f5f9; --or-head-text: #cbd5e1; --or-muted: #94a3b8; --or-dim: #64748b;
  --or-ok: #4ade80; --or-ok-soft: #86efac; --or-ok-bg: rgba(34, 197, 94, .18); --or-ok-line: rgba(74, 222, 128, .45);
  --or-info: #7dd3fc; --or-info-bg: rgba(56, 189, 248, .16); --or-info-line: rgba(56, 189, 248, .45);
  --or-skip: #94a3b8; --or-skip-bg: rgba(148, 163, 184, .16); --or-skip-line: rgba(148, 163, 184, .4);
  --or-warn: #fbbf24; --or-warn-bg: rgba(245, 158, 11, .18); --or-warn-line: rgba(245, 158, 11, .45);
  --or-bad: #f87171; --or-bad-bg: rgba(239, 68, 68, .18);
  --or-gold: #d4af37;
  --or-primary: #16a34a; --or-primary-hover: #15803d;
  --or-hover: #16212e;
  --or-tap: 36px;
  color-scheme: dark;
  position: relative; width: 100%; max-width: 860px; max-height: calc(100dvh - 32px); display: flex; flex-direction: column;
  background: var(--fs-cell); color: var(--or-text);
  border: 1px solid var(--fs-grid-strong); border-top: 3px solid var(--fs-focus); border-radius: 8px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55); font-family: inherit; font-size: 13.5px; line-height: 1.45; text-align: right; overflow: hidden;
}
.or-panel *, .or-panel *::before, .or-panel *::after { box-sizing: border-box; }

/* ---- head: ONE line = tabs with counts · icon row · ✕ ---- */
.or-head { position: relative; flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--fs-head); border-bottom: 1px solid var(--fs-grid-strong); }
.or-tabs { display: flex; align-items: center; min-width: 0; }
.or-tabs button {
  position: relative; display: inline-flex; align-items: center; gap: 5px; min-height: var(--or-tap); padding: 0 10px; border: 0; border-radius: 6px;
  background: transparent; box-shadow: none; color: var(--or-muted); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.or-tabs button + button::before { content: "·"; position: absolute; inset-inline-start: -3px; color: var(--or-dim); font-weight: 400; pointer-events: none; }
.or-tabs button:hover { color: #fff; }
.or-tabs button[aria-selected="true"] { color: #fff; background: var(--fs-cell); box-shadow: inset 0 -2px 0 var(--fs-focus); }
.or-tabs button:focus-visible, .or-tool:focus-visible, .or-menu:focus-visible, .or-x:focus-visible { outline: 2px solid var(--fs-focus); outline-offset: 1px; }
.or-tab-i { line-height: 1; font-size: 15px; display: inline-flex; }
.or-tab-i svg { display: block; }
.or-tab-n { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; font-weight: 700; }
.or-tab-n.is-full { color: var(--or-ok); }
.or-tools { display: flex; align-items: center; gap: 2px; margin-inline-start: auto; }
.or-tool, .or-menu, .or-x, .or-icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 32px; height: 32px; min-height: 0; padding: 0 6px;
  border: 1px solid transparent; border-radius: 6px; background: transparent; box-shadow: none; color: var(--or-muted); font: inherit; font-size: 15px; line-height: 1; cursor: pointer;
}
.or-tool:hover, .or-menu:hover, .or-x:hover, .or-icon:hover { background: var(--fs-index); color: #fff; }
.or-tool[aria-pressed="true"] { background: var(--fs-cell); border-color: var(--fs-grid-strong); color: #fff; }
.or-tool-l { display: none; font-size: 14px; font-weight: 600; }
.or-menu { display: none; font-size: 17px; }
.or-x { font-size: 14px; border-color: rgba(255, 255, 255, .18); }

/* ---- body ---- */
.or-body { flex: 1 1 auto; min-height: 0; padding: 10px 12px 28px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.or-empty { color: var(--or-dim); padding: 18px 8px; text-align: center; line-height: 1.7; }
/* first open before any state: the shape of the day card + rows (no waiting on a blank "טוען…") */
.or-skel { display: grid; gap: 8px; padding: 4px 2px; }
.or-skel i { display: block; height: 34px; border-radius: 10px; background: currentColor; color: var(--or-dim); opacity: .14; animation: or-skel 1.2s ease-in-out infinite alternate; }
.or-skel i.is-big { height: 96px; }
@keyframes or-skel { to { opacity: .26; } }
.or-foot { margin: 8px 2px 0; font-size: 12px; color: var(--or-dim); }
.or-hint { color: var(--or-muted); font-size: 12px; margin: 2px 0 4px; line-height: 1.5; }
.or-hint.warn { color: var(--or-warn); }
.or-muted { color: var(--or-muted); }
.or-dim { color: var(--or-dim); }
.or-legal { font-size: 11.5px; color: var(--or-dim); margin: 4px 2px 12px; line-height: 1.55; }
.or-num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.or-rate { color: var(--or-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.or-view-h { margin: 2px 0 10px; font-size: 14px; font-weight: 800; color: #fff; }

/* thin progress bar (sent today / cap) */
.or-progress { height: 3px; margin: 0 0 10px; border-radius: 2px; background: var(--fs-grid); overflow: hidden; }
.or-progress i { display: block; height: 100%; background: var(--or-primary); transition: width .25s ease; }
.or-progress.is-full i { background: var(--fs-focus); }
/* the ONE primary action of the tab */
.or-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
.or-done { color: var(--or-ok); font-weight: 700; font-size: 13px; }
.or-warn { margin: 0 0 10px; padding: 7px 10px; border: 1px solid var(--or-warn-line); border-radius: 6px; background: rgba(245, 158, 11, .1); color: #fde68a; font-size: 12.5px; line-height: 1.5; }
.or-flash { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; padding: 6px 8px 6px 10px; background: var(--fs-head); border: 1px solid var(--fs-grid-strong); border-inline-start: 4px solid #38bdf8; }
.or-flash-t { flex: 1 1 auto; min-width: 0; font-weight: 700; color: #fff; }

/* "🎯 תחום היום": one niche, one message, one copy button (finance panel look: .or-box) */
.or-day { display: grid; gap: 8px; margin: 0 0 12px; padding: 10px 12px 12px; background: var(--fs-head); border: 1px solid var(--fs-grid-strong); border-inline-start: 4px solid var(--fs-focus); }
.or-day-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.or-day-t { font-size: 14px; font-weight: 700; color: var(--or-head-text); }
.or-day-t b { color: #fff; font-weight: 800; }
.or-day-why { margin-top: -4px; font-size: 12px; color: var(--or-muted); line-height: 1.4; }
.or-day-msg { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 14px; line-height: 1.65; color: var(--or-strong); background: var(--fs-cell); border: 1px solid var(--fs-grid); border-radius: 4px; padding: 8px 10px; user-select: text; -webkit-user-select: text; }
.or-btn.big.or-day-copy { justify-content: center; }
.or-btn.primary.or-day-copy.is-done { background: var(--or-ok-bg); border-color: var(--or-ok-line); color: var(--or-ok); }
.or-msgpre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 12.5px; line-height: 1.6; color: var(--or-text); background: var(--fs-index); border: 1px solid var(--fs-grid); border-radius: 4px; padding: 6px 8px; margin: 4px 0 2px; }

/* ---- buttons (finance: .fy-btn / .fch-act; primary = green) ---- */
.or-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 6px 14px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 6px; background: var(--fs-index); box-shadow: none; color: var(--or-head-text); font: inherit; font-size: 13.5px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; }
.or-btn:hover:not(:disabled) { background: var(--fs-head); color: #fff; }
.or-btn:focus-visible { outline: 2px solid var(--fs-focus); outline-offset: 1px; }
.or-btn.primary { background: var(--or-primary); border-color: var(--or-primary); color: #fff; font-weight: 700; }
.or-btn.primary:hover:not(:disabled) { background: var(--or-primary-hover); }
.or-btn.small { min-height: 30px; padding: 3px 10px; font-size: 12.5px; }
.or-btn.ghost { background: transparent; border-style: dashed; color: var(--or-muted); }
.or-btn.danger { color: #fda4af; }
.or-btn.big { width: 100%; min-height: 52px; padding: 8px 16px; font-size: 16px; justify-content: space-between; gap: 12px; }
.or-big-t { flex: none; }
.or-big-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; opacity: .9; }
.or-btn:disabled { opacity: .5; cursor: progress; }
.or-link-btn { background: none; border: 0; box-shadow: none; min-height: 0; color: var(--or-ok-soft); font: inherit; font-size: 12.5px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; padding: 2px 0; }
.or-link-btn.danger { color: #fda4af; justify-self: start; }

/* ---- the list: one row = one line ---- */
.or-list { list-style: none; margin: 0 0 4px; padding: 0; border: 1px solid var(--fs-grid-strong); background: var(--fs-cell); }
.or-row { border-bottom: 1px solid var(--fs-grid); }
.or-row:last-child, .or-g:last-child { border-bottom: 0; }
.or-line { display: flex; align-items: center; gap: 8px; min-height: 46px; padding-inline-end: 6px; }
.or-row:hover > .or-line { background: var(--or-hover); }
.or-idx { flex: 0 0 30px; align-self: stretch; display: flex; align-items: center; justify-content: center; background: var(--fs-index); color: var(--or-dim); font-size: 11px; font-variant-numeric: tabular-nums; }
/* status = the row colour (finance logic) in the number gutter; finished rows go quiet */
.or-row.is-sent .or-idx { background: var(--or-ok-bg); color: var(--or-ok); box-shadow: inset -3px 0 0 var(--fs-income); }
.or-row.is-replied .or-idx { background: var(--or-info-bg); color: var(--or-info); box-shadow: inset -3px 0 0 #38bdf8; }
.or-row.is-skipped .or-idx { background: var(--or-skip-bg); color: var(--or-skip); }
.or-row.is-opened .or-idx { background: var(--or-warn-bg); color: var(--or-warn); box-shadow: inset -3px 0 0 #f59e0b; }
.or-row:is(.is-sent, .is-skipped, .is-replied) .or-name { color: var(--or-muted); font-weight: 500; }
.or-row:is(.is-sent, .is-skipped) .or-pill { opacity: .6; }
.or-row.is-next { box-shadow: inset 0 0 0 2px var(--fs-focus); }
.or-row.is-open { background: var(--fs-cell-alt); }
.or-name {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 0; border: 0; background: none; box-shadow: none;
  color: var(--or-strong); font: inherit; font-size: 14px; font-weight: 700; text-align: right; cursor: pointer;
}
.or-name bdi { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.or-name:hover bdi { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--fs-grid-strong); }
.or-name:focus-visible { outline: 2px solid var(--fs-focus); outline-offset: 2px; border-radius: 3px; }
.or-bot { flex: none; font-size: 12px; opacity: .8; }
.or-pill.is-own { flex: none; box-shadow: inset 0 0 0 1px var(--or-warn-line); color: var(--or-warn); }
.or-pill { flex: 0 1 auto; max-width: 9.5em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--fs-grid-strong); color: var(--or-head-text); font-size: 11px; font-weight: 600; line-height: 20px; }
.or-acts { flex: none; display: flex; align-items: center; gap: 6px; }
.or-send, .or-tick, .or-more { display: inline-flex; align-items: center; justify-content: center; height: 34px; border-radius: 6px; font: inherit; line-height: 1; cursor: pointer; text-decoration: none; box-shadow: none; touch-action: manipulation; }
.or-send { min-width: 64px; padding: 0 14px; border: 1px solid var(--or-primary); background: var(--or-primary); color: #fff; font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.or-send:hover { background: var(--or-primary-hover); }
.or-send.is-soft { min-width: 0; background: transparent; border-color: var(--fs-grid-strong); color: var(--or-head-text); font-weight: 600; }
.or-send.is-soft:hover { background: var(--fs-head); color: #fff; }
.or-tick { width: 34px; padding: 0; border: 1px solid var(--or-ok-line); background: var(--or-ok-bg); color: var(--or-ok); font-size: 16px; font-weight: 800; }
.or-tick:hover { background: rgba(34, 197, 94, .3); }
.or-more { width: 34px; padding: 0; border: 1px solid var(--fs-grid); background: transparent; color: var(--or-muted); font-size: 18px; font-weight: 700; }
/* "סמן נשלח": grey outline until sent → "✓ נשלח" solid green (Sharon, 5.10: the old lone ✓ was confusing) */
.or-mark { display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 10px; border: 1px solid var(--fs-grid-strong); border-radius: 6px; background: transparent; box-shadow: none; color: var(--or-muted); font: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer; touch-action: manipulation; }
button.or-mark:hover { border-color: var(--or-muted); color: #fff; background: var(--fs-head); }
/* sent = a pressed-in button (Sharon, 5.10): dark green-black, sunken, muted, can't be clicked again */
.or-mark.is-sent { border-color: #14301f; background: #0b1a12; box-shadow: inset 0 2px 5px rgba(0, 0, 0, .65); color: #4f9a6a; font-weight: 600; cursor: default; pointer-events: none; user-select: none; }
.or-mark.is-follow { border-color: var(--or-info-line); color: var(--or-info); }
.or-mark:focus-visible { outline: 2px solid var(--fs-focus); outline-offset: 1px; }
.or-btn.or-mark-all { border-color: var(--or-ok-line); color: var(--or-ok); background: transparent; }
.or-small { font-size: 11.5px; }
.or-pre { white-space: pre-wrap; }
/* 🤖 the newest automatic niche summaries ("לקחים") */
.or-auto { display: grid; gap: 4px; margin: 0 0 12px; padding: 8px 12px; background: var(--fs-head); border: 1px solid var(--fs-grid-strong); border-inline-start: 4px solid #38bdf8; }
.or-auto-h { font-size: 12.5px; font-weight: 800; color: var(--or-head-text); }
.or-auto-l { font-size: 13px; color: var(--or-strong); line-height: 1.5; }
.or-more:hover, .or-row.is-open .or-more { background: var(--fs-head); color: #fff; border-color: var(--fs-grid-strong); }
.or-send:focus-visible, .or-tick:focus-visible, .or-more:focus-visible { outline: 2px solid var(--fs-focus); outline-offset: 1px; }

/* ---- the drawer (⋯ / a tap on the name) ---- */
.or-drawer { display: grid; gap: 8px; padding: 4px 12px 12px; padding-inline-start: 38px; }
.or-info { display: grid; gap: 3px; }
.or-kv { display: flex; gap: 10px; font-size: 12.5px; line-height: 1.5; }
.or-k { flex: 0 0 4.2em; color: var(--or-dim); font-size: 12px; font-weight: 600; }
.or-v { min-width: 0; color: var(--or-head-text); overflow-wrap: anywhere; }
.or-xfield { display: flex; align-items: center; gap: 10px; }
.or-panel .or-xfield input.or-xcell { flex: 1 1 auto; max-width: 20em; min-height: 34px; padding: 3px 8px; font-size: 14px; font-weight: 700; }
.or-msgpre { margin: 0; color: var(--or-muted); }
.or-d-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.or-act { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 12px; border: 1px solid var(--fs-grid-strong); border-radius: 6px; background: transparent; box-shadow: none; color: var(--or-head-text); font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; touch-action: manipulation; }
.or-act:hover { background: var(--fs-head); color: #fff; }
.or-act:focus-visible { outline: 2px solid var(--fs-focus); outline-offset: 1px; }
.or-act.is-ok { border-color: var(--or-ok-line); color: var(--or-ok); }
.or-act.is-info { border-color: var(--or-info-line); color: var(--or-info); }
.or-phone-add { display: flex; gap: 6px; max-width: 24em; }
.or-panel .or-phone-add input { flex: 1; min-width: 0; min-height: 34px; padding: 3px 8px; font-size: 14px; }

/* ---- Facebook: groups = a clean list; the paste box under the selected one ---- */
.or-sec { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 16px 2px 6px; font-size: 13px; font-weight: 800; color: var(--or-head-text); }
.or-list + .or-sec { margin-top: 18px; }
.or-glist .or-g { border-bottom: 1px solid var(--fs-grid); }
.or-glist .or-line { padding-inline-start: 12px; }
.or-glist .or-g.is-sel { background: var(--fs-cell-alt); box-shadow: inset -3px 0 0 var(--fs-focus); }
.or-glist .or-name { font-weight: 600; }
.or-glist .or-g.is-sel .or-name { font-weight: 800; color: #fff; }
.or-g-m { flex: none; font-size: 12px; color: var(--or-muted); white-space: nowrap; }
.or-paste { display: grid; gap: 8px; padding: 2px 12px 12px; }
.or-paste .or-btn { justify-self: start; }

/* ---- small chips (panels) ---- */
.or-chip { display: inline-block; padding: 0 7px; border-radius: 4px; background: var(--or-skip-bg); color: var(--or-head-text); font-size: 11px; font-weight: 700; line-height: 19px; white-space: nowrap; }
.or-chip.is-ok { background: var(--or-ok-bg); color: var(--or-ok); }
.or-chip.is-warn { background: var(--or-warn-bg); color: var(--or-warn); }
.or-chip.is-info { background: var(--or-info-bg); color: var(--or-info); }

/* ---- tables in the views (groups, learning) — finance-table ---- */
.or-grid { width: 100%; margin: 0 0 12px; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.or-grid th, .or-grid td { border: 1px solid var(--fs-grid); padding: 4px 8px; height: 30px; background: var(--fs-cell); text-align: right; vertical-align: middle; }
.or-grid tbody tr:nth-child(even) td { background: var(--fs-cell-alt); }
.or-grid th { background: var(--fs-head); color: var(--or-head-text); font-weight: 700; font-size: 12px; text-align: center; white-space: nowrap; }
.or-grid td.or-c-num { text-align: center; white-space: nowrap; }
.or-grid-stats td { text-align: center; }
.or-grid-stats td:nth-child(2) { text-align: right; }
.or-handle { font-weight: 700; color: var(--or-strong); text-decoration: none; }
.or-handle:hover { color: var(--or-ok-soft); text-decoration: underline; }

/* ---- panels: like ⚠️ התראות כסף (collapsible), the weekly stat tiles ---- */
.or-box { margin: 0 0 10px; padding: 8px 12px; background: var(--fs-head); border: 1px solid var(--fs-grid-strong); border-inline-start: 4px solid var(--or-skip); font-size: 13px; }
.or-box.is-ok { border-inline-start-color: var(--fs-focus); }
.or-box.is-gold { border-inline-start-color: var(--or-gold); }
.or-box-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 28px; list-style: none; cursor: pointer; user-select: none; -webkit-user-select: none; }
.or-box-sum::-webkit-details-marker { display: none; }
.or-box-sum::before { content: "◂"; display: inline-block; width: 10px; color: var(--or-muted); font-size: 12px; transition: transform .12s ease; }
.or-box[open] > .or-box-sum::before { transform: rotate(-90deg); }
.or-box-sum:focus-visible { outline: 2px solid var(--fs-focus); outline-offset: 2px; }
.or-box-title { font-weight: 800; color: #fff; }
.or-box-body { display: grid; gap: 8px; margin-top: 10px; }
.or-sub { display: grid; gap: 6px; padding: 8px 10px; border: 1px solid var(--fs-grid); border-radius: 6px; background: var(--fs-cell-alt); }
.or-sub-meta { display: flex; flex-wrap: wrap; gap: 4px; }
.or-result { display: grid; gap: 4px; padding: 8px 10px; border: 1px solid var(--or-ok-line); border-radius: 6px; background: rgba(34, 197, 94, .07); font-size: 13px; }
.or-msg summary { cursor: pointer; font-size: 12px; color: var(--or-dim); }
.or-msg ul { margin: 4px 0 0; padding-inline-start: 18px; }
.or-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
.or-tile { display: grid; align-content: start; gap: 2px; min-width: 0; padding: 8px 12px 10px; background: var(--fs-head); border: 1px solid var(--fs-grid-strong); border-top: 3px solid var(--or-skip); }
.or-tile.is-ok { border-top-color: var(--fs-income); }
.or-tile.is-info { border-top-color: #38bdf8; }
.or-tile.is-gold { border-top-color: var(--or-gold); }
.or-tile-l { font-size: 12px; font-weight: 600; color: var(--or-muted); }
.or-tile-v { font-size: 22px; font-weight: 800; color: #fff; line-height: 1.2; overflow-wrap: anywhere; }
.or-tile.is-ok .or-tile-v { color: var(--or-ok); }
.or-tile.is-info .or-tile-v { color: var(--or-info); }
.or-tile-s { font-size: 12px; color: var(--or-muted); font-variant-numeric: tabular-nums; }

/* ---- form fields (finance .fy-select / .fch-item-text) ---- */
.or-panel input:not([type="checkbox"]), .or-panel select, .or-panel textarea {
  width: 100%; min-height: 38px; padding: 6px 10px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 6px;
  background: var(--fs-cell-alt); box-shadow: none; color: #f8fafc; font: inherit; font-size: 16px; /* 16px: no zoom-in on iPhone */
}
.or-panel select option { background: var(--fs-cell-alt); color: #f8fafc; }
.or-panel input:not([type="checkbox"]):focus, .or-panel select:focus, .or-panel textarea:focus { outline: 2px solid var(--fs-focus); outline-offset: -1px; border-color: transparent; }
.or-panel textarea { line-height: 1.55; resize: vertical; }
.or-panel input::placeholder, .or-panel textarea::placeholder { color: var(--or-dim); }
.or-form { display: grid; gap: 8px; }
.or-form.row { display: flex; flex-wrap: wrap; gap: 8px; }
.or-form.row > * { flex: 1 1 150px; min-width: 0; }
.or-form.caps label, .or-fl { display: grid; gap: 3px; font-size: 12px; font-weight: 600; color: var(--or-muted); }
.or-check { display: flex; align-items: center; gap: 10px; font-size: 13.5px; cursor: pointer; }
.or-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--fs-focus); flex: 0 0 auto; }

/* ---- toast (finance popup look) ---- */
.or-toast { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%) translateY(20px); opacity: 0; pointer-events: none; max-width: calc(100% - 32px); padding: 9px 14px; border: 1px solid var(--fs-grid-strong); border-top: 3px solid var(--fs-focus); border-radius: 8px; background: var(--fs-cell); box-shadow: 0 18px 44px rgba(0, 0, 0, .6); color: var(--or-text); font-size: 13.5px; transition: opacity .2s, transform .2s; z-index: 5; }
.or-toast.show { opacity: 1; transform: translateX(-50%); }
.or-toast.bad { border-top-color: #e11d48; color: #fecaca; }

/* touch: finger-sized targets */
@media (pointer: coarse) {
  .or-panel { --or-tap: 44px; }
  .or-send, .or-tick, .or-mark, .or-more, .or-act, .or-btn, .or-btn.small { min-height: 44px; height: auto; }
  .or-tick, .or-more { width: 44px; }
  .or-line { min-height: 54px; }
  .or-box-sum { min-height: 40px; }
  .or-tool, .or-menu, .or-x, .or-icon { min-width: 44px; height: 44px; }
}

/* phones: full screen; the icon row hides behind ☰ */
@media (max-width: 640px) {
  .or-overlay { padding: 0; align-items: stretch; }
  .or-panel { max-width: none; max-height: none; height: 100%; height: 100dvh; border-radius: 0; border-width: 3px 0 0; }
  .or-head { padding: calc(4px + env(safe-area-inset-top)) 6px 4px; gap: 2px; }
  .or-tabs { flex: 1 1 auto; }
  .or-tabs button { flex: 1 1 0; justify-content: center; padding: 0 4px; font-size: 13px; gap: 4px; }
  .or-menu { display: inline-flex; margin-inline-start: auto; }
  .or-tools { display: none; position: absolute; top: 100%; inset-inline-end: 6px; z-index: 6; flex-direction: column; align-items: stretch; gap: 2px; min-width: 180px; margin: 4px 0 0; padding: 6px; background: var(--fs-head); border: 1px solid var(--fs-grid-strong); border-radius: 8px; box-shadow: 0 16px 40px rgba(0, 0, 0, .6); }
  .or-panel.menu-open .or-tools { display: flex; }
  .or-tools .or-tool { justify-content: flex-start; width: 100%; padding: 0 12px; }
  .or-tool-l { display: inline; }
  .or-body { padding: 10px 8px calc(28px + env(safe-area-inset-bottom)); }
  .or-line { gap: 6px; padding-inline-end: 4px; }
  .or-idx { flex-basis: 26px; }
  .or-pill { flex: none; max-width: 7.4em; padding: 0 6px; font-size: 10.5px; }
  .or-glist .or-pill { display: none; }
  .or-send { min-width: 54px; padding: 0 10px; }
  .or-send.is-soft { padding: 0 8px; font-size: 12.5px; }
  .or-mark { padding: 0 8px; font-size: 12px; }
  .or-drawer { padding: 4px 10px 12px; }
  .or-xfield input.or-xcell { max-width: none; }

  .or-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .or-grid { font-size: 11.5px; }
  .or-grid :is(th, td) { padding: 3px 4px; }
  .or-box { padding: 8px 10px; }
}
@media (max-width: 360px) {
  .or-pill:not(.is-own) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .or-box-sum::before, .or-toast, .or-progress i { transition: none; }
  .or-skel i { animation: none; }
}