/*
  Feinh Pro components and app shell (UI v2). Every value comes from tokens.css.
  Logical properties only, so the same CSS serves English (ltr) and Arabic (rtl).
  Classes carry the fp- prefix so they never meet the website bundle's Bootstrap classes (.btn, .card, .badge).
*/

/* ===================== Base ===================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: var(--space-0); padding: var(--space-0); }
body {
  font-family: var(--font-ui);
  font-size: var(--text-table-size);
  line-height: var(--text-table-lh);
  font-weight: var(--weight-regular);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
b, strong { font-weight: var(--weight-strong); }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--text-link-hover); text-decoration: underline; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.fp-icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); flex: none; stroke: currentColor; fill: none; stroke-width: var(--icon-stroke); vector-effect: non-scaling-stroke; }
.fp-icon * { vector-effect: non-scaling-stroke; stroke-width: var(--icon-stroke); }
.fp-icon-brand, .fp-icon-brand * { fill: currentColor; stroke: none; }
.fp-icon-md { inline-size: var(--icon-md); block-size: var(--icon-md); }
[dir="rtl"] .fp-icon-dir { transform: scaleX(-1); }

.fp-num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.fp-ltr { direction: ltr; unicode-bidi: isolate; }
html[dir="ltr"] .fp-truncate[dir="auto"], html[dir="ltr"] .fp-clamp2[dir="auto"] { text-align: left; }   /* align to the page start whatever the script of the name */
html[dir="rtl"] .fp-truncate[dir="auto"], html[dir="rtl"] .fp-clamp2[dir="auto"] { text-align: right; }
.fp-clamp2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.fp-c-1 { color: var(--text-primary); }
.fp-truncate { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-inline-size: var(--space-0); }
.fp-t-title { font-size: var(--text-title-size); line-height: var(--text-title-lh); font-weight: var(--weight-strong); }
.fp-t-display { font-size: var(--text-display-size); line-height: var(--text-display-lh); font-weight: var(--weight-strong); }
.fp-t-section { font-size: var(--text-section-size); line-height: var(--text-section-lh); font-weight: var(--weight-strong); }
.fp-t-body { font-size: var(--text-body-size); line-height: var(--text-body-lh); }
.fp-t-table { font-size: var(--text-table-size); line-height: var(--text-table-lh); }
.fp-t-meta { font-size: var(--text-meta-size); line-height: var(--text-meta-lh); }
.fp-t-strong { font-weight: var(--weight-strong); }
.fp-c-2 { color: var(--text-secondary); }
.fp-c-3 { color: var(--text-tertiary); }
.fp-c-link { color: var(--text-link); }
.fp-c-danger { color: var(--danger-text); }
.fp-c-warning { color: var(--warning-text); }
.fp-c-success { color: var(--success-text); }
.fp-sr-only { position: absolute; inline-size: var(--border-w); block-size: var(--border-w); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

kbd, .fp-kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-inline-size: var(--space-5); block-size: var(--space-5); padding-inline: var(--space-1);
  font-family: var(--font-latin); font-size: var(--text-meta-size); line-height: var(--text-meta-lh);
  color: var(--text-secondary); background: var(--surface-raised);
  border: var(--border-w) solid var(--border-default); border-radius: var(--radius-xs);
}

/* ===================== Buttons ===================== */
.fp-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  block-size: var(--control-md); padding-inline: var(--space-4);
  font-size: var(--text-body-size); line-height: var(--text-body-lh); font-weight: var(--weight-strong);
  border: var(--border-w) solid transparent; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-primary); cursor: pointer; white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.fp-btn-sm { block-size: var(--control-sm); padding-inline: var(--space-3); font-size: var(--text-table-size); line-height: var(--text-table-lh); }
.fp-btn-primary { background: var(--primary); color: var(--text-on-dark); }
.fp-btn-primary:hover, .fp-btn-primary.is-hover { background: var(--primary-hover); }
.fp-btn-primary:active, .fp-btn-primary.is-active { background: var(--primary-press); }
.fp-btn-secondary { background: var(--surface-raised); border-color: var(--border-strong); color: var(--text-primary); }
.fp-btn-secondary:hover, .fp-btn-secondary.is-hover { background: var(--surface-subtle); }
.fp-btn-secondary:active, .fp-btn-secondary.is-active { background: var(--surface-skeleton); }
.fp-btn-ghost { color: var(--text-secondary); }
.fp-btn-ghost:hover, .fp-btn-ghost.is-hover { background: var(--surface-subtle); color: var(--text-primary); }
.fp-btn-ghost:active, .fp-btn-ghost.is-active { background: var(--surface-skeleton); }
.fp-btn-danger { background: var(--danger-solid); color: var(--text-on-dark); }
.fp-btn-danger:hover, .fp-btn-danger.is-hover { background: var(--danger-solid-hover); }
.fp-btn-whatsapp { background: var(--whatsapp); color: var(--whatsapp-ink); }
.fp-btn-whatsapp:hover, .fp-btn-whatsapp.is-hover { background: var(--whatsapp-hover); }
.fp-btn:focus-visible, .fp-btn.is-focus { box-shadow: var(--focus-ring); }
.fp-btn:disabled, .fp-btn.is-disabled { background: var(--surface-subtle); border-color: transparent; color: var(--text-disabled); cursor: not-allowed; }
.fp-btn.is-loading { color: transparent; position: relative; pointer-events: none; }
.fp-btn.is-loading::after {
  content: ""; position: absolute; inline-size: var(--space-1); block-size: var(--space-1); border-radius: var(--radius-full);
  background: var(--text-on-dark); box-shadow: calc(var(--space-2) * -1) 0 0 var(--text-on-dark), var(--space-2) 0 0 var(--text-on-dark);
}
.fp-btn-secondary.is-loading::after, .fp-btn-ghost.is-loading::after { background: var(--text-primary); box-shadow: calc(var(--space-2) * -1) 0 0 var(--text-primary), var(--space-2) 0 0 var(--text-primary); }
.fp-btn-whatsapp.is-loading::after { background: var(--whatsapp-ink); box-shadow: calc(var(--space-2) * -1) 0 0 var(--whatsapp-ink), var(--space-2) 0 0 var(--whatsapp-ink); }
.fp-btn-icon { inline-size: var(--control-md); padding-inline: var(--space-0); }
.fp-btn-icon.fp-btn-sm { inline-size: var(--control-sm); }
.fp-btn .fp-btn-kbd { margin-inline-start: var(--space-1); }
.fp-btn-split { display: inline-flex; }
.fp-btn-split .fp-btn:first-child { border-start-end-radius: var(--space-0); border-end-end-radius: var(--space-0); }
.fp-btn-split .fp-btn:last-child { border-start-start-radius: var(--space-0); border-end-start-radius: var(--space-0); border-inline-start: var(--border-w) solid var(--border-strong); padding-inline: var(--space-2); }
@keyframes fp-spin { to { transform: rotate(360deg); } }

/* ===================== Form controls ===================== */
.fp-field { display: flex; flex-direction: column; gap: var(--space-1); min-inline-size: var(--space-0); }
.fp-label { font-size: var(--text-meta-size); line-height: var(--text-meta-lh); font-weight: var(--weight-strong); color: var(--text-secondary); }
.fp-help { font-size: var(--text-meta-size); line-height: var(--text-meta-lh); color: var(--text-tertiary); }
.fp-help.is-error { color: var(--danger-text); }
.fp-input {
  display: flex; align-items: center; gap: var(--space-2);
  block-size: var(--control-md); padding-inline: var(--space-3);
  font-size: var(--text-body-size); line-height: var(--text-body-lh);
  background: var(--surface-raised); color: var(--text-primary);
  border: var(--border-w) solid var(--border-control); border-radius: var(--radius-sm);
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
  min-inline-size: var(--space-0);
}
.fp-input-sm { block-size: var(--control-sm); font-size: var(--text-table-size); line-height: var(--text-table-lh); }
.fp-input .fp-ph { color: var(--text-tertiary); }
.fp-input:hover, .fp-input.is-hover { border-color: var(--text-secondary); }
.fp-input:focus-within, .fp-input.is-focus { border-color: var(--border-focus); box-shadow: var(--focus-ring); }
.fp-input.is-error { border-color: var(--danger-solid); box-shadow: 0 0 0 var(--border-w) var(--danger-solid); }
.fp-input.is-disabled { background: var(--surface-subtle); border-color: var(--border-default); color: var(--text-disabled); }
.fp-input .fp-icon { color: var(--text-tertiary); }
.fp-input .fp-end { margin-inline-start: auto; display: inline-flex; align-items: center; gap: var(--space-1); color: var(--text-tertiary); }
.fp-input .fp-val { flex: 1; min-inline-size: var(--space-0); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fp-input-multi { block-size: auto; min-block-size: var(--control-md); flex-wrap: wrap; padding-block: var(--space-1); gap: var(--space-1); }
.fp-token {
  display: inline-flex; align-items: center; gap: var(--space-1); block-size: var(--control-sm); max-inline-size: 100%;
  padding-inline: var(--space-2) var(--space-1); border-radius: var(--radius-xs);
  background: var(--surface-subtle); color: var(--text-primary);
  font-size: var(--text-meta-size); line-height: var(--text-meta-lh);
}
.fp-token .fp-x { display: inline-flex; color: var(--text-secondary); flex: none; }
.fp-token > .fp-truncate { flex: 1; }
.fp-token { min-inline-size: var(--space-0); }
.fp-checkbox {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  inline-size: var(--icon-sm); block-size: var(--icon-sm);
  border: var(--border-w) solid var(--border-control); border-radius: var(--radius-xs); background: var(--surface-raised);
}
.fp-checkbox.is-checked { background: var(--primary); border-color: var(--primary); color: var(--text-on-dark); }
.fp-checkbox.is-checked .fp-icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); }
.fp-hit { display: inline-flex; align-items: center; justify-content: center; min-inline-size: var(--control-sm); min-block-size: var(--control-sm); }

/* Listbox / popover surfaces */
.fp-popover {
  background: var(--surface-raised); border: var(--border-w) solid var(--border-default);
  border-radius: var(--radius-lg); box-shadow: var(--elevation-2); padding: var(--space-1);
  min-inline-size: var(--space-0);
}
.fp-popover-pad { padding: var(--space-3); }
.fp-menu { display: flex; flex-direction: column; gap: var(--space-0); }
.fp-menu-item {
  display: flex; align-items: center; gap: var(--space-2);
  min-block-size: var(--control-sm); padding-inline: var(--space-2); border-radius: var(--radius-sm);
  font-size: var(--text-table-size); line-height: var(--text-table-lh); color: var(--text-primary); cursor: pointer;
}
.fp-menu-item .fp-icon { color: var(--text-secondary); }
.fp-menu-item .fp-end { margin-inline-start: auto; color: var(--text-tertiary); display: inline-flex; gap: var(--space-1); align-items: center; }
.fp-menu-item:hover, .fp-menu-item.is-active { background: var(--surface-subtle); }
.fp-menu-item.is-selected { color: var(--text-primary); font-weight: var(--weight-strong); }
.fp-menu-item.is-selected .fp-check { color: var(--accent); }
.fp-menu-item.is-danger { color: var(--danger-text); }
.fp-menu-item.is-danger .fp-icon { color: var(--danger-text); }
.fp-menu-item.is-disabled { color: var(--text-disabled); }
.fp-menu-sep { block-size: var(--border-w); background: var(--border-default); margin-block: var(--space-1); }
.fp-menu-label { padding: var(--space-2) var(--space-2) var(--space-1); font-size: var(--text-meta-size); line-height: var(--text-meta-lh); color: var(--text-tertiary); }
.fp-menu-foot { padding: var(--space-2); font-size: var(--text-meta-size); line-height: var(--text-meta-lh); color: var(--text-tertiary); border-block-start: var(--border-w) solid var(--border-default); margin-block-start: var(--space-1); }

/* Date picker */
.fp-datepicker { inline-size: max-content; }
.fp-dp-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-1) var(--space-1) var(--space-2); }
.fp-dp-grid { display: grid; grid-template-columns: repeat(7, var(--control-sm)); gap: var(--space-half); text-align: center; }
.fp-dp-dow { font-size: var(--text-meta-size); line-height: var(--control-sm); color: var(--text-tertiary); }
.fp-dp-day { block-size: var(--control-sm); line-height: var(--control-sm); border-radius: var(--radius-sm); font-size: var(--text-table-size); color: var(--text-primary); }
.fp-dp-day.is-out { color: var(--text-tertiary); }
.fp-dp-day.is-today { color: var(--accent); font-weight: var(--weight-strong); }
.fp-dp-day.is-selected { background: var(--primary); color: var(--text-on-dark); font-weight: var(--weight-strong); }
.fp-dp-day.is-range { background: var(--surface-selected); border-radius: var(--space-0); }

/* ===================== Tabs (underline, the only tab style) ===================== */
.fp-tabs { display: flex; align-items: stretch; gap: var(--space-5); border-block-end: var(--border-w) solid var(--border-default); min-inline-size: var(--space-0); }
.fp-tabs.fp-no-rule { border-block-end: none; }
.fp-tab {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: var(--space-2);
  min-block-size: var(--control-sm); min-inline-size: var(--control-sm); justify-content: center; padding-block: var(--space-2); white-space: nowrap;
  font-size: var(--text-table-size); line-height: var(--text-table-lh); color: var(--text-secondary); cursor: pointer;
}
.fp-tab:hover { color: var(--text-primary); }
.fp-tab.is-active { color: var(--text-primary); font-weight: var(--weight-strong); }
.fp-tab.is-active::after { content: ""; position: absolute; inset-inline: var(--space-0); inset-block-end: calc(var(--border-w) * -1); block-size: var(--focus-ring-w); background: var(--primary); border-radius: var(--radius-xs); }
.fp-tab .fp-count { font-family: var(--font-num); font-size: var(--text-meta-size); line-height: var(--text-meta-lh); color: var(--text-tertiary); font-weight: var(--weight-regular); }
.fp-tab.is-active .fp-count { color: var(--text-secondary); }
.fp-tab .fp-count.is-action { color: var(--danger-text); font-weight: var(--weight-strong); }

/* ===================== Segmented control ===================== */
.fp-seg { display: inline-flex; padding: var(--space-0); gap: var(--space-0); background: var(--surface-subtle); border-radius: var(--radius-sm); flex: none; }
.fp-seg-item {
  position: relative; z-index: 0; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
  block-size: var(--control-sm); min-inline-size: var(--control-sm); padding-inline: var(--space-3); border-radius: var(--radius-sm);
  font-size: var(--text-table-size); line-height: var(--text-table-lh); color: var(--text-secondary); cursor: pointer; white-space: nowrap;
}
.fp-seg-item:hover { color: var(--text-primary); }
.fp-seg-item.is-active { color: var(--text-primary); font-weight: var(--weight-strong); }
.fp-seg-item.is-active::before { content: ""; position: absolute; inset: var(--space-half); z-index: -1; background: var(--surface-raised); border-radius: var(--radius-xs); box-shadow: var(--elevation-1); }
.fp-seg-wrap { display: inline-flex; align-items: center; block-size: var(--control-sm); }

/* ===================== Filter bar with chips (the only filter pattern) ===================== */
.fp-filterbar { display: flex; align-items: center; gap: var(--space-2); block-size: var(--filterbar-h); min-inline-size: var(--space-0); }
.fp-filterbar .fp-spacer { flex: 1; }
.fp-fchip {
  display: inline-flex; align-items: center; gap: var(--space-1); block-size: var(--control-sm); padding-inline: var(--space-3) var(--space-2);
  border: var(--border-w) solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-raised);
  font-size: var(--text-table-size); line-height: var(--text-table-lh); color: var(--text-secondary); white-space: nowrap; cursor: pointer;
}
.fp-fchip:hover { background: var(--surface-subtle); color: var(--text-primary); }
.fp-fchip .fp-icon { color: var(--text-tertiary); }
.fp-fchip.is-set { background: var(--surface-selected); border-color: var(--success-border); color: var(--text-primary); }
.fp-fchip.is-set .fp-k { color: var(--text-secondary); }
.fp-fchip.is-set .fp-v { font-weight: var(--weight-strong); }
.fp-fchip.is-set .fp-icon { color: var(--success-text); }
.fp-fchip-add { border-style: dashed; }
.fp-fsep { inline-size: var(--border-w); block-size: var(--space-5); background: var(--border-default); }

/* ===================== Toolbar ===================== */
.fp-toolbar { display: flex; align-items: center; gap: var(--space-2); min-inline-size: var(--space-0); }
.fp-toolbar .fp-sep { inline-size: var(--border-w); block-size: var(--space-5); background: var(--border-default); margin-inline: var(--space-1); }
.fp-bulkbar { display: flex; align-items: center; gap: var(--space-2); block-size: var(--filterbar-h); padding-inline: var(--space-3); background: var(--surface-dark); color: var(--text-on-dark); border-radius: var(--radius-lg); }
.fp-bulkbar .fp-btn-ghost { color: var(--text-on-dark); }
.fp-bulkbar .fp-btn-ghost:hover { background: var(--primary-hover); }

/* ===================== Badge, status chip, avatar ===================== */
.fp-badge {
  display: inline-flex; align-items: center; justify-content: center; min-inline-size: var(--badge-h); block-size: var(--badge-h);
  padding-inline: var(--space-1); border-radius: var(--radius-xs);
  font-family: var(--font-num); font-size: var(--text-meta-size); line-height: var(--text-meta-lh); font-weight: var(--weight-strong);
  background: var(--surface-subtle); color: var(--text-secondary);
}
.fp-badge-action { background: var(--status-action-bg); color: var(--status-action-text); }
.fp-badge-accent { background: var(--surface-selected); color: var(--success-text); }
.fp-chip {
  display: inline-flex; align-items: center; gap: var(--space-1); block-size: var(--chip-h); max-inline-size: 100%;
  padding-inline: var(--space-2); border-radius: var(--radius-full);
  font-size: var(--text-meta-size); line-height: var(--text-meta-lh); font-weight: var(--weight-regular); white-space: nowrap;
  background: var(--status-neutral-bg); color: var(--status-neutral-text);
}
.fp-chip::before { content: ""; inline-size: var(--dot); block-size: var(--dot); border-radius: var(--radius-full); background: var(--status-neutral-dot); flex: none; }
.fp-chip.fp-nodot::before { display: none; }
.fp-chip-blue { background: var(--status-blue-bg); color: var(--status-blue-text); } .fp-chip-blue::before { background: var(--status-blue-dot); }
.fp-chip-violet { background: var(--status-violet-bg); color: var(--status-violet-text); } .fp-chip-violet::before { background: var(--status-violet-dot); }
.fp-chip-amber { background: var(--status-amber-bg); color: var(--status-amber-text); } .fp-chip-amber::before { background: var(--status-amber-dot); }
.fp-chip-green { background: var(--status-green-bg); color: var(--status-green-text); } .fp-chip-green::before { background: var(--status-green-dot); }
.fp-chip-red { background: var(--status-red-bg); color: var(--status-red-text); } .fp-chip-red::before { background: var(--status-red-dot); }
.fp-chip-action { background: var(--status-action-bg); color: var(--status-action-text); font-weight: var(--weight-strong); }
.fp-chip-action::before { background: var(--status-action-text); }
.fp-chip-outline { background: transparent; box-shadow: inset 0 0 0 var(--border-w) var(--border-default); color: var(--text-secondary); }
.fp-chip-outline::before { display: none; }
.fp-verified { display: inline-flex; color: var(--accent-strong); }
/* plain status text: dot + text, no fill (used in dense grids) */
.fp-st { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; color: var(--text-primary); min-inline-size: var(--space-0); }
.fp-st::before { content: ""; inline-size: var(--dot); block-size: var(--dot); border-radius: var(--radius-full); background: var(--status-neutral-dot); flex: none; }
.fp-st-blue::before { background: var(--status-blue-dot); } .fp-st-violet::before { background: var(--status-violet-dot); }
.fp-st-amber::before { background: var(--status-amber-dot); } .fp-st-green::before { background: var(--status-green-dot); }
.fp-st-red::before { background: var(--status-red-dot); }
.fp-st-lost::before { background: transparent; box-shadow: inset 0 0 0 var(--border-w) var(--status-neutral-dot); }

/* stage glyph + temperature icon */
.fp-st2 { display: inline-flex; align-items: center; gap: var(--space-2); min-inline-size: var(--space-0); max-inline-size: 100%; color: var(--text-primary); vertical-align: middle; }
.fp-sg { inline-size: var(--glyph); block-size: var(--glyph); flex: none; }
.fp-sg .fp-sg-ring { fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); }
.fp-sg .fp-sg-fill { fill: currentColor; stroke: none; }
.fp-sg .fp-sg-check, .fp-sg .fp-sg-x { fill: none; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; }
.fp-sg .fp-sg-check { stroke: var(--surface-page); }
.fp-sg .fp-sg-x { stroke: currentColor; }
.fp-sg-prog { color: var(--stage-progress); } .fp-sg-new { color: var(--stage-new); } .fp-sg-won { color: var(--stage-won); } .fp-sg-lost { color: var(--stage-lost); }
.fp-chip-stage { gap: var(--space-1); padding-inline: var(--space-2); }
/* ONE stage and status chip set (design system pass, 2 Nov 2026; tokens.css --stage-*). Every screen's stage chip reads these
   tokens: bg + text + 1px border of the same role, a dot of the same role. Won and Overdue are the only solid ones. */
.fp-stage { display: inline-flex; align-items: center; gap: var(--space-1); min-block-size: var(--chip-h); padding-inline: var(--space-2); border: var(--border-w) solid var(--stage-contacted-border); border-radius: var(--radius-full); background: var(--stage-contacted-bg); color: var(--stage-contacted-fg); font-size: var(--text-meta-size); line-height: var(--text-meta-lh); font-weight: var(--weight-strong); white-space: nowrap; }
.fp-stage::before { content: ""; inline-size: var(--dot); block-size: var(--dot); border-radius: var(--radius-full); background: var(--stage-contacted-dot); flex: none; }
.fp-stage-new { background: var(--stage-new-bg); color: var(--stage-new-fg); border-color: var(--stage-new-border); } .fp-stage-new::before { background: var(--stage-new-dot); }
.fp-stage-qualified { background: var(--stage-qualified-bg); color: var(--stage-qualified-fg); border-color: var(--stage-qualified-border); } .fp-stage-qualified::before { background: var(--stage-qualified-dot); }
.fp-stage-viewing { background: var(--stage-viewing-bg); color: var(--stage-viewing-fg); border-color: var(--stage-viewing-border); } .fp-stage-viewing::before { background: var(--stage-viewing-dot); }
.fp-stage-offer { background: var(--stage-offer-bg); color: var(--stage-offer-fg); border-color: var(--stage-offer-border); } .fp-stage-offer::before { background: var(--stage-offer-dot); }
.fp-stage-reserved { background: var(--stage-reserved-bg); color: var(--stage-reserved-fg); border-color: var(--stage-reserved-border); } .fp-stage-reserved::before { background: var(--stage-reserved-dot); }
.fp-stage-won { background: var(--stage-won-bg); color: var(--stage-won-fg); border-color: var(--stage-won-border); } .fp-stage-won::before { background: var(--stage-won-fg); }
.fp-stage-lost { background: var(--stage-lost-bg); color: var(--stage-lost-fg); border-color: var(--stage-lost-border); text-decoration: line-through; } .fp-stage-lost::before { background: transparent; box-shadow: inset 0 0 0 var(--border-w) var(--stage-lost-dot); }
.fp-stage-overdue { background: var(--stage-overdue-bg); color: var(--stage-overdue-fg); border-color: var(--stage-overdue-border); } .fp-stage-overdue::before { background: var(--stage-overdue-fg); }
.fp-tmp { flex: none; }
.fp-tmp-hot { color: var(--temp-hot); } .fp-tmp-hot * { fill: currentColor; }
.fp-tmp-warm { color: var(--temp-warm); } .fp-tmp-cold { color: var(--temp-cold); }
.fp-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  inline-size: var(--avatar-sm); block-size: var(--avatar-sm); border-radius: var(--radius-full);
  background: var(--surface-subtle); color: var(--text-secondary); box-shadow: inset 0 0 0 var(--border-w) var(--border-default);
  font-family: var(--font-latin); font-size: var(--text-meta-size); line-height: var(--text-meta-lh); font-weight: var(--weight-strong);
}
.fp-avatar[lang="ar"] { font-family: var(--font-arabic); }
.fp-avatar-xs { inline-size: var(--avatar-xs); block-size: var(--avatar-xs); }
.fp-avatar-md { inline-size: var(--avatar-md); block-size: var(--avatar-md); }
.fp-avatar-lg { inline-size: var(--avatar-lg); block-size: var(--avatar-lg); font-size: var(--text-table-size); line-height: var(--text-table-lh); }
.fp-avatar-me { background: var(--primary); color: var(--text-on-dark); box-shadow: none; }

/* ===================== Data grid ===================== */
.fp-grid-wrap { overflow: auto; min-block-size: var(--space-0); }
.fp-grid { inline-size: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: var(--text-table-size); line-height: var(--text-table-lh); }
.fp-grid th {
  position: sticky; inset-block-start: var(--space-0); z-index: var(--z-sticky); block-size: var(--row-header);
  padding-inline: var(--space-3); text-align: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: var(--text-meta-size); line-height: var(--text-meta-lh); font-weight: var(--weight-strong); color: var(--text-secondary);
  background: var(--surface-page); border-block-end: var(--border-w) solid var(--border-default);
}
.fp-grid th .fp-sort { display: inline-flex; vertical-align: middle; color: var(--text-primary); margin-inline-start: var(--space-1); }
.fp-grid th.is-sorted { color: var(--text-primary); }
.fp-grid td {
  block-size: var(--row-comfortable); padding-inline: var(--space-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-block-end: var(--border-w) solid var(--border-subtle); color: var(--text-primary); background: var(--surface-page);
}
.fp-grid[data-density="compact"] td { block-size: var(--row-compact); }
.fp-grid td.fp-num, .fp-grid th.fp-num { text-align: end; }
.fp-grid tr:hover td, .fp-grid tr.is-hover td { background: var(--surface-subtle); }
.fp-grid tr.is-selected td { background: var(--surface-selected); }
.fp-grid tr.is-selected td .fp-c-3 { color: var(--text-secondary); }
.fp-grid tr.is-focus td:first-child { box-shadow: inset var(--focus-ring-w) 0 0 var(--border-focus); }
[dir="rtl"] .fp-grid tr.is-focus td:first-child { box-shadow: inset calc(var(--focus-ring-w) * -1) 0 0 var(--border-focus); }
.fp-grid td.fp-sel, .fp-grid th.fp-sel { inline-size: var(--space-10); padding-inline: var(--space-3) var(--space-0); }
.fp-grid td, .fp-grid th { vertical-align: middle; }
.fp-grid .fp-sel .fp-checkbox { vertical-align: middle; display: flex; }
.fp-cell { display: flex; align-items: center; gap: var(--space-2); min-inline-size: var(--space-0); }
.fp-cell > .fp-truncate { flex: 1 1 auto; }
.fp-grid td { position: relative; }
.fp-row-actions { position: absolute; inset-block: var(--space-0); inset-inline-end: var(--space-1); display: inline-flex; align-items: center; gap: var(--space-0); visibility: hidden; padding-inline-start: var(--space-4); background: linear-gradient(to left, var(--surface-subtle) 80%, transparent); }
[dir="rtl"] .fp-row-actions { background: linear-gradient(to right, var(--surface-subtle) 80%, transparent); }
.fp-grid tr.is-selected .fp-row-actions { background: var(--surface-selected); }
.fp-grid tr:hover .fp-row-actions, .fp-grid tr.is-hover .fp-row-actions, .fp-grid tr.is-selected .fp-row-actions { visibility: visible; }
.fp-grid .fp-btn-icon.fp-btn-sm { block-size: var(--control-sm); }
.fp-grid[data-density="compact"] .fp-btn-icon.fp-btn-sm { block-size: var(--control-sm); }
.fp-loadmore { display: flex; align-items: center; justify-content: center; gap: var(--space-3); padding-block: var(--space-4); color: var(--text-tertiary); font-size: var(--text-meta-size); line-height: var(--text-meta-lh); }

/* ===================== Kanban ===================== */
.fp-board { display: flex; gap: var(--space-3); align-items: flex-start; overflow-x: auto; min-block-size: var(--space-0); }
.fp-col { flex: none; inline-size: var(--kanban-col-w); display: flex; flex-direction: column; gap: var(--space-2); background: var(--surface-sunken); border-radius: var(--radius-lg); padding: var(--space-2); }
.fp-col-head { display: flex; align-items: center; gap: var(--space-2); block-size: var(--control-sm); padding-inline: var(--space-1) var(--space-0); }
.fp-col-head .fp-name { font-size: var(--text-table-size); line-height: var(--text-table-lh); font-weight: var(--weight-strong); }
.fp-col-head .fp-count { font-family: var(--font-num); font-size: var(--text-meta-size); color: var(--text-tertiary); }
.fp-col-head .fp-sum { margin-inline-start: auto; white-space: nowrap; font-family: var(--font-num); font-size: var(--text-meta-size); line-height: var(--text-meta-lh); color: var(--text-secondary); }
.fp-col-bar { block-size: var(--space-half); border-radius: var(--radius-xs); background: var(--border-default); overflow: hidden; margin-inline: var(--space-1); }
.fp-col-bar > i { display: block; block-size: 100%; background: var(--status-neutral-dot); }
.fp-kcard {
  display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3);
  background: var(--surface-raised); border-radius: var(--radius-lg); box-shadow: var(--elevation-1); min-inline-size: var(--space-0); cursor: grab;
}
.fp-kcard:hover, .fp-kcard.is-hover { box-shadow: var(--elevation-2); }
.fp-kcard.is-dragging { box-shadow: var(--kanban-drag-shadow); transform: rotate(var(--drag-tilt)); }
.fp-kcard.is-selected { box-shadow: var(--focus-ring); }
.fp-kcard .fp-k-top { display: flex; align-items: center; gap: var(--space-2); min-inline-size: var(--space-0); }
.fp-kcard .fp-k-name { flex: 1; font-size: var(--text-table-size); line-height: var(--text-table-lh); font-weight: var(--weight-strong); }
.fp-kcard .fp-k-val { font-family: var(--font-num); font-size: var(--text-table-size); line-height: var(--text-table-lh); font-weight: var(--weight-strong); }
.fp-kcard .fp-k-meta { font-size: var(--text-meta-size); line-height: var(--text-meta-lh); color: var(--text-secondary); }
.fp-kcard .fp-k-foot { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-meta-size); line-height: var(--text-meta-lh); color: var(--text-secondary); min-inline-size: var(--space-0); }
.fp-kcard .fp-k-foot .fp-end { margin-inline-start: auto; display: inline-flex; align-items: center; gap: var(--space-1); }
.fp-col-add { display: flex; align-items: center; gap: var(--space-2); min-block-size: var(--control-sm); padding-inline: var(--space-2); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: var(--text-table-size); }
.fp-col-add:hover { background: var(--surface-subtle); color: var(--text-primary); }
.fp-col-empty { padding: var(--space-4) var(--space-3); text-align: center; color: var(--text-tertiary); font-size: var(--text-meta-size); line-height: var(--text-meta-lh); border: var(--border-w) dashed var(--border-strong); border-radius: var(--radius-lg); }

/* ===================== Stage path and record header ===================== */
.fp-path { display: flex; gap: var(--space-half); min-inline-size: var(--space-0); }
.fp-path-step {
  flex: 1 1 auto; min-inline-size: max-content; display: flex; align-items: center; justify-content: center; gap: var(--space-1);
  block-size: var(--control-sm); padding-inline: var(--space-2);
  font-size: var(--text-meta-size); line-height: var(--text-meta-lh); color: var(--text-secondary); background: var(--surface-subtle);
  white-space: nowrap; cursor: pointer;
}
.fp-path-step:first-child { border-start-start-radius: var(--radius-sm); border-end-start-radius: var(--radius-sm); }
.fp-path-step:last-child { border-start-end-radius: var(--radius-sm); border-end-end-radius: var(--radius-sm); }
.fp-path-step.is-done { background: var(--surface-selected); color: var(--success-text); }
.fp-path-step.is-current { background: var(--primary); color: var(--text-on-dark); font-weight: var(--weight-strong); }
.fp-path-step:hover:not(.is-current) { color: var(--text-primary); }

.fp-rec-head { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-block-end: var(--border-w) solid var(--border-default); }
.fp-rec-id { display: flex; align-items: center; gap: var(--space-3); min-inline-size: var(--space-0); }
.fp-rec-id .fp-who { display: flex; flex-direction: column; gap: var(--space-1); min-inline-size: var(--space-0); flex: 1; }
.fp-rec-id .fp-name-row { display: flex; align-items: center; gap: var(--space-2); min-inline-size: var(--space-0); }
.fp-rec-id .fp-meta-row { display: flex; align-items: center; gap: var(--space-2); color: var(--text-secondary); font-size: var(--text-table-size); line-height: var(--text-table-lh); min-inline-size: var(--space-0); white-space: nowrap; }
.fp-rec-id .fp-meta-row .fp-sep::before { content: "·"; color: var(--text-tertiary); }
.fp-rec-actions { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.fp-rec-status { display: flex; align-items: center; gap: var(--space-4); min-inline-size: var(--space-0); }
.fp-rec-status .fp-path { flex: 1; }
.fp-temp { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; font-size: var(--text-table-size); line-height: var(--text-table-lh); min-inline-size: var(--space-0); }
.fp-nba {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  background: var(--surface-sunken); border: var(--border-w) solid var(--border-default); border-radius: var(--radius-lg); min-inline-size: var(--space-0);
}
.fp-nba .fp-icon { color: var(--accent-strong); }
.fp-nba .fp-txt { flex: 1; min-inline-size: var(--space-0); font-size: var(--text-table-size); line-height: var(--text-table-lh); }

/* ===================== Cards and panels ===================== */
.fp-card { background: var(--surface-raised); border: var(--border-w) solid var(--border-default); border-radius: var(--radius-lg); min-inline-size: var(--space-0); }
.fp-card-head { display: flex; align-items: center; gap: var(--space-2); min-block-size: var(--space-12); padding-inline: var(--space-4) var(--space-2); border-block-end: var(--border-w) solid var(--border-subtle); }
.fp-card-head .fp-t { font-size: var(--text-body-size); line-height: var(--text-body-lh); font-weight: var(--weight-strong); }
.fp-card-head .fp-end { margin-inline-start: auto; display: inline-flex; align-items: center; gap: var(--space-1); }
.fp-card-body { padding: var(--space-4); }
.fp-section-title { font-size: var(--text-meta-size); line-height: var(--text-meta-lh); font-weight: var(--weight-strong); color: var(--text-secondary); }

/* Definition list for record fields */
.fp-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-6); row-gap: var(--space-0); }
.fp-fld { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; padding-block: var(--space-1); gap: var(--space-3); min-block-size: var(--control-md); border-block-end: var(--border-w) solid var(--border-subtle); min-inline-size: var(--space-0); }
.fp-fld .fp-k { color: var(--text-secondary); font-size: var(--text-table-size); line-height: var(--text-table-lh); padding-block: var(--space-1); }
.fp-fld .fp-v { color: var(--text-primary); font-size: var(--text-table-size); line-height: var(--text-table-lh); overflow-wrap: break-word; padding: var(--space-1) var(--space-2); margin-inline: calc(var(--space-2) * -1); border-radius: var(--radius-sm); min-block-size: var(--space-6); }
.fp-fld .fp-v:hover { background: var(--surface-subtle); }
.fp-fld .fp-v.is-empty { color: var(--text-tertiary); }

/* ===================== Activity panel (CloudOffix pattern, calmer) ===================== */
.fp-activity { display: flex; flex-direction: column; min-block-size: var(--space-0); border-inline-start: var(--border-w) solid var(--border-default); background: var(--surface-page); }
.fp-act-actions { display: flex; gap: var(--space-1); padding: var(--space-3) var(--space-4) var(--space-0); }
.fp-act-actions .fp-btn { flex: 1; padding-inline: var(--space-2); }
.fp-composer { margin: var(--space-3) var(--space-4); border: var(--border-w) solid var(--border-control); border-radius: var(--radius-lg); background: var(--surface-raised); }
.fp-composer .fp-ta { padding: var(--space-3); min-block-size: var(--space-16); color: var(--text-tertiary); font-size: var(--text-table-size); line-height: var(--text-table-lh); }
.fp-composer .fp-bar { display: flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-1) var(--space-1) var(--space-2); border-block-start: var(--border-w) solid var(--border-subtle); }
.fp-composer .fp-bar .fp-end { margin-inline-start: auto; }
.fp-act-sec { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4) var(--space-2); }
.fp-act-sec .fp-end { margin-inline-start: auto; display: inline-flex; gap: var(--space-1); }
.fp-planned { margin-inline: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.fp-plan-item { display: flex; gap: var(--space-3); padding: var(--space-3); border: var(--border-w) solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-raised); min-inline-size: var(--space-0); }
.fp-plan-item.is-overdue { box-shadow: inset var(--focus-ring-w) 0 0 var(--danger-solid); }
[dir="rtl"] .fp-plan-item.is-overdue { box-shadow: inset calc(var(--focus-ring-w) * -1) 0 0 var(--danger-solid); }
.fp-plan-item .fp-pi-ico { display: inline-flex; align-items: center; justify-content: center; inline-size: var(--avatar-md); block-size: var(--avatar-md); border-radius: var(--radius-sm); background: var(--surface-subtle); color: var(--text-secondary); flex: none; }
.fp-plan-item .fp-pi-body { flex: 1; min-inline-size: var(--space-0); display: flex; flex-direction: column; gap: var(--space-half); }
.fp-plan-item .fp-pi-acts { display: flex; gap: var(--space-0); margin-block-start: var(--space-1); margin-inline-start: calc(var(--space-2) * -1); }
.fp-timeline { display: flex; flex-direction: column; padding-inline: var(--space-4); }
.fp-tl-day { padding-block: var(--space-3) var(--space-2); font-size: var(--text-meta-size); line-height: var(--text-meta-lh); color: var(--text-tertiary); font-weight: var(--weight-strong); }
.fp-tl-item { display: grid; grid-template-columns: var(--avatar-md) minmax(0, 1fr); gap: var(--space-3); padding-block: var(--space-2); position: relative; }
.fp-tl-item::before { content: ""; position: absolute; inset-inline-start: calc(var(--avatar-md) / 2); inset-block: calc(var(--space-2) + var(--avatar-md)) calc(var(--space-2) * -1); inline-size: var(--border-w); background: var(--border-default); }
.fp-tl-item:last-child::before { display: none; }
.fp-tl-ico { display: inline-flex; align-items: center; justify-content: center; inline-size: var(--avatar-md); block-size: var(--avatar-md); border-radius: var(--radius-full); background: var(--surface-subtle); color: var(--text-secondary); position: relative; z-index: 1; }
.fp-tl-ico.is-wa { background: var(--surface-subtle); color: var(--text-secondary); }
.fp-tl-body { min-inline-size: var(--space-0); display: flex; flex-direction: column; gap: var(--space-half); }
.fp-tl-line { display: flex; align-items: baseline; gap: var(--space-2); min-inline-size: var(--space-0); }
.fp-tl-line .fp-end { margin-inline-start: auto; flex: none; }
.fp-tl-note { margin-block-start: var(--space-1); padding: var(--space-2) var(--space-3); background: var(--surface-sunken); border-radius: var(--radius-sm); color: var(--text-primary); }

/* ===================== Drawer, modal, tooltip, toast ===================== */
.fp-scrim { position: absolute; inset: var(--space-0); background: var(--surface-overlay); }
.fp-drawer { position: absolute; inset-block: var(--space-0); inset-inline-end: var(--space-0); inline-size: var(--drawer-w); background: var(--surface-raised); box-shadow: var(--elevation-3); display: flex; flex-direction: column; }
.fp-drawer-head, .fp-modal-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-4) var(--space-4) var(--space-6); border-block-end: var(--border-w) solid var(--border-default); }
.fp-drawer-head .fp-end, .fp-modal-head .fp-end { margin-inline-start: auto; }
.fp-drawer-body, .fp-modal-body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.fp-drawer-foot, .fp-modal-foot { margin-block-start: auto; display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4) var(--space-6); border-block-start: var(--border-w) solid var(--border-default); }
.fp-modal { inline-size: var(--modal-w); background: var(--surface-raised); border-radius: var(--radius-lg); box-shadow: var(--elevation-3); display: flex; flex-direction: column; }
.fp-tooltip { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2); background: var(--surface-dark); color: var(--text-on-dark); border-radius: var(--radius-sm); box-shadow: var(--elevation-2); font-size: var(--text-meta-size); line-height: var(--text-meta-lh); }
.fp-tooltip .fp-kbd { background: transparent; color: var(--text-on-dark-secondary); border-color: var(--text-on-dark-secondary); }
.fp-toast { display: inline-flex; align-items: center; gap: var(--space-3); min-block-size: var(--control-md); padding: var(--space-1) var(--space-1) var(--space-1) var(--space-4); background: var(--surface-dark); color: var(--text-on-dark); border-radius: var(--radius-lg); box-shadow: var(--elevation-2); font-size: var(--text-table-size); line-height: var(--text-table-lh); }
.fp-toast .fp-icon { color: var(--text-accent-on-dark); }
.fp-toast .fp-undo { color: var(--text-accent-on-dark); font-weight: var(--weight-strong); }
.fp-toast .fp-btn.fp-btn-ghost { color: var(--text-accent-on-dark); font-weight: var(--weight-strong); }   /* round3c: beats .fp-v2 .fp-btn-ghost (pro-v2.css), which made it dark on dark (1.8:1) */
.fp-toast .fp-btn.fp-btn-ghost:hover { background: var(--primary-hover); color: var(--text-on-dark); }

/* ===================== Empty, skeleton, error ===================== */
.fp-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); padding: var(--space-10) var(--space-6); }
.fp-empty .fp-ill { display: inline-flex; align-items: center; justify-content: center; inline-size: var(--space-12); block-size: var(--space-12); border-radius: var(--radius-lg); background: var(--surface-selected); color: var(--accent); margin-block-end: var(--space-2); }
.fp-empty .fp-t { font-size: var(--text-body-size); line-height: var(--text-body-lh); font-weight: var(--weight-strong); }
.fp-empty .fp-d { max-inline-size: var(--measure-short); color: var(--text-secondary); font-size: var(--text-table-size); line-height: var(--text-table-lh); }
.fp-empty .fp-acts { display: flex; gap: var(--space-2); margin-block-start: var(--space-2); }
.fp-empty.is-error .fp-ill { background: var(--danger-bg); color: var(--danger-text); }
.fp-sk { display: block; block-size: var(--space-3); border-radius: var(--radius-xs); background: linear-gradient(90deg, var(--surface-skeleton) 25%, var(--surface-skeleton-shine) 50%, var(--surface-skeleton) 75%); background-size: 200% 100%; animation: fp-shimmer var(--skeleton-cycle) linear infinite; }
.fp-sk-circle { inline-size: var(--avatar-sm); block-size: var(--avatar-sm); border-radius: var(--radius-full); }
@keyframes fp-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ===================== Command palette ===================== */
.fp-palette { inline-size: var(--palette-w); background: var(--surface-raised); border-radius: var(--radius-lg); box-shadow: var(--elevation-3); overflow: hidden; border: var(--border-w) solid var(--border-default); }
.fp-palette-input { display: flex; align-items: center; gap: var(--space-3); block-size: var(--space-12); padding-inline: var(--space-4); border-block-end: var(--border-w) solid var(--border-default); font-size: var(--text-body-size); line-height: var(--text-body-lh); }
.fp-palette-input .fp-icon { color: var(--text-tertiary); }
.fp-palette-input .fp-typed { flex: 1; color: var(--text-primary); }
.fp-palette-input .fp-caret { display: inline-block; inline-size: var(--border-w); block-size: var(--space-5); background: var(--text-primary); vertical-align: middle; margin-inline-start: var(--border-w); }
.fp-palette-list { padding: var(--space-1); display: flex; flex-direction: column; }
.fp-palette-group { padding: var(--space-2) var(--space-3) var(--space-1); font-size: var(--text-meta-size); line-height: var(--text-meta-lh); color: var(--text-tertiary); }
.fp-palette-item { display: flex; align-items: center; gap: var(--space-3); min-block-size: var(--control-md); padding-inline: var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-table-size); line-height: var(--text-table-lh); min-inline-size: var(--space-0); }
.fp-palette-item .fp-icon { color: var(--text-secondary); }
.fp-palette-item .fp-sub { color: var(--text-tertiary); }
.fp-palette-item .fp-end { margin-inline-start: auto; display: inline-flex; gap: var(--space-1); align-items: center; flex: none; }
.fp-palette-item.is-active { background: var(--surface-subtle); }
.fp-palette-item mark { background: transparent; color: var(--text-primary); font-weight: var(--weight-strong); }
.fp-palette-foot { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-2) var(--space-4); border-block-start: var(--border-w) solid var(--border-default); background: var(--surface-sunken); font-size: var(--text-meta-size); line-height: var(--text-meta-lh); color: var(--text-tertiary); }
.fp-palette-foot span { display: inline-flex; align-items: center; gap: var(--space-1); }


/* ===================== Overlays in the live app (fixed to the window) ===================== */
.fp-scrim { position: fixed; z-index: var(--z-drawer); }
.fp-drawer { position: fixed; z-index: var(--z-drawer); max-inline-size: 100vw; }
.fp-tooltip-pop { position: fixed; z-index: var(--z-tooltip); pointer-events: none; }
.fp-toasts { position: fixed; inset-block-end: var(--space-6); inset-inline-start: 50%; transform: translateX(-50%); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-2); }
[dir="rtl"] .fp-toasts { transform: translateX(50%); }

/* ===================== App shell: sidebar, top bar ===================== */
body.fp-body { background: var(--surface-page); }
.fp-app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-block-size: 100vh; }
.fp-app.is-folded { grid-template-columns: var(--sidebar-rail-w) minmax(0, 1fr); }
.fp-sidebar { position: sticky; inset-block-start: 0; block-size: 100vh; display: flex; flex-direction: column; background: var(--surface-sunken); border-inline-end: var(--border-w) solid var(--border-default); min-inline-size: 0; z-index: var(--z-sidebar); }
.fp-sb-top { display: flex; align-items: center; gap: var(--space-2); block-size: var(--topbar-h); padding-inline: var(--space-4) var(--space-2); flex: none; }
.fp-wordmark { display: inline-flex; align-items: baseline; font-family: var(--font-latin); font-size: var(--text-title-size); line-height: var(--text-title-lh); font-weight: var(--weight-strong); color: var(--primary); letter-spacing: var(--tracking-tight); text-decoration: none; }
.fp-wordmark:hover { text-decoration: none; color: var(--primary); }
.fp-wordmark[lang="ar"] { font-family: var(--font-arabic); }
.fp-wordmark .fp-dot { display: inline-block; inline-size: var(--dot); block-size: var(--dot); border-radius: var(--radius-full); background: var(--accent-strong); margin-inline-start: var(--space-half); }
.fp-wordmark .fp-mono { display: none; }
.fp-pro-tag { font-size: var(--text-meta-size); line-height: var(--text-meta-lh); color: var(--text-secondary); padding-inline: var(--space-1); border: var(--border-w) solid var(--border-strong); border-radius: var(--radius-xs); }
.fp-sb-top .fp-fold { margin-inline-start: auto; }
.fp-sb-nav { flex: 1; overflow-y: auto; padding: var(--space-2) var(--space-2) var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); min-block-size: 0; }
.fp-nav-group { display: flex; flex-direction: column; gap: var(--space-half); }
.fp-nav-group-label { padding: 0 var(--space-2) var(--space-1); font-size: var(--text-meta-size); line-height: var(--text-meta-lh); color: var(--text-tertiary); font-weight: var(--weight-strong); white-space: nowrap; }
.fp-nav-item { display: flex; align-items: center; gap: var(--space-2); block-size: var(--control-sm); padding-inline: var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-table-size); line-height: var(--text-table-lh); color: var(--text-secondary); white-space: nowrap; position: relative; text-decoration: none; }
.fp-nav-item .fp-icon { color: var(--text-tertiary); }
.fp-nav-item .fp-lbl { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }
a.fp-nav-item:hover { background: var(--surface-subtle); color: var(--text-primary); text-decoration: none; }
.fp-nav-item.is-active { background: var(--surface-raised); color: var(--text-primary); font-weight: var(--weight-strong); box-shadow: var(--elevation-1); }
.fp-nav-item.is-active .fp-icon { color: var(--accent); }
.fp-nav-item.is-soon { cursor: default; }
.fp-nav-item .fp-soon { font-size: var(--text-meta-size); line-height: var(--text-meta-lh); color: var(--text-tertiary); font-weight: var(--weight-regular); }
.fp-sb-foot { padding: var(--space-3) var(--space-4) var(--space-3); border-block-start: var(--border-w) solid var(--border-default); font-size: var(--text-meta-size); line-height: var(--text-meta-lh); color: var(--text-tertiary); flex: none; }
.fp-legal { display: flex; flex-wrap: wrap; column-gap: var(--space-3); margin-block-start: var(--space-1); }
.fp-legal a { display: inline-flex; align-items: center; min-block-size: var(--control-sm); color: var(--text-secondary); font-size: var(--text-meta-size); line-height: var(--text-meta-lh); }
.fp-unfold { display: none; }
/* folded rail */
.fp-app.is-folded .fp-sb-top { padding-inline: 0; justify-content: center; }
.fp-app.is-folded .fp-wordmark .fp-txt, .fp-app.is-folded .fp-pro-tag, .fp-app.is-folded .fp-nav-item .fp-soon,
.fp-app.is-folded .fp-sb-foot, .fp-app.is-folded .fp-fold { display: none; }
.fp-app.is-folded .fp-wordmark .fp-mono { display: inline; }
/* polish3 (independent review): the folded rail keeps each place's name for screen readers (and its tooltip, shell.js) */
.fp-app.is-folded .fp-nav-item .fp-lbl { position: absolute; inline-size: var(--border-w); block-size: var(--border-w); overflow: hidden; clip-path: inset(50%); white-space: nowrap; flex: none; }
.fp-tip { position: fixed; z-index: var(--z-tooltip); max-inline-size: var(--measure-short); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: var(--primary); color: var(--text-on-dark); font-size: var(--text-meta-size); line-height: var(--text-meta-lh); font-weight: var(--weight-strong); white-space: nowrap; pointer-events: none; box-shadow: var(--elevation-2); }
.fp-tip[hidden] { display: none; }
.fp-app.is-folded .fp-unfold { display: inline-flex; margin: var(--space-1) auto 0; flex: none; }
.fp-app.is-folded .fp-nav-group-label { visibility: hidden; block-size: var(--space-1); padding: 0; overflow: hidden; }
.fp-app.is-folded .fp-nav-item { justify-content: center; padding-inline: 0; }
.fp-app.is-folded .fp-sb-nav { padding: var(--space-3) var(--space-2) var(--space-4); }
/* rail badges sit beside the icon's top corner (never over the glyph) */
.fp-app.is-folded .fp-nav-item .fp-badge { position: absolute; inset-block-start: calc(var(--space-half) * -1); inset-inline-end: calc(var(--space-half) * -1); min-inline-size: var(--space-4); block-size: var(--space-4); padding-inline: var(--space-half); box-shadow: 0 0 0 var(--space-half) var(--surface-sunken); }

.fp-main { display: flex; flex-direction: column; min-inline-size: 0; }
.fp-topbar { position: sticky; inset-block-start: 0; z-index: var(--z-sidebar); display: flex; align-items: center; gap: var(--space-2); block-size: var(--topbar-h); padding-inline: var(--space-6) var(--space-4); border-block-end: var(--border-w) solid var(--border-default); background: var(--surface-page); flex: none; }
.fp-search-trigger { display: flex; align-items: center; gap: var(--space-2); inline-size: min(100%, var(--search-w)); min-inline-size: 0; block-size: var(--control-sm); padding-inline: var(--space-3) var(--space-1); background: var(--surface-sunken); border: var(--border-w) solid var(--border-default); border-radius: var(--radius-sm); color: var(--text-tertiary); font-size: var(--text-table-size); line-height: var(--text-table-lh); cursor: text; text-align: start; }
.fp-search-trigger .fp-ph { flex: 1; min-inline-size: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fp-search-trigger:hover { border-color: var(--border-strong); }
/* 2 Nov 2026 (layout check): from 761 to 1023px the top bar is short of room (New, the bell, and for staff "Viewing as"),
   so the search box is a round search button there; its words stay for screen readers */
@media (min-width: 761px) and (max-width: 1023px) {
  .fp-topbar .fp-search-trigger { flex: none; inline-size: var(--control-sm); justify-content: center; padding: 0; border-radius: var(--radius-full); }
  .fp-topbar .fp-search-trigger .fp-kbd { display: none; }
  .fp-topbar .fp-search-trigger .fp-ph { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.fp-topbar .fp-spacer { flex: 1; }
.fp-viewing { font-weight: var(--weight-regular); gap: var(--space-1); max-inline-size: calc(var(--search-w) * 0.75); min-inline-size: 0; }
.fp-viewing b { font-weight: var(--weight-strong); overflow: hidden; text-overflow: ellipsis; min-inline-size: 0; }
.fp-viewing .fp-c-2 { flex: none; }
.fp-menu-wrap { position: relative; display: inline-flex; flex: none; }
.fp-menu-pop { position: absolute; inset-block-start: calc(100% + var(--space-1)); inset-inline-end: 0; z-index: var(--z-popover); min-inline-size: calc(var(--space-16) * 3.5); max-block-size: calc(100vh - var(--topbar-h) - var(--space-4)); overflow-y: auto; }
.fp-menu-pop.is-start { inset-inline-end: auto; inset-inline-start: 0; }
.fp-menu-pop .fp-menu-item { text-decoration: none; }
.fp-menu-pop .fp-menu-item:hover { text-decoration: none; color: var(--text-primary); }
.fp-menu-pop .fp-menu-foot a { color: var(--text-secondary); }
.fp-menu-filter { margin: var(--space-1); }
.fp-menu-filter input { border: 0; outline: 0; background: transparent; flex: 1; min-inline-size: 0; font-size: var(--text-table-size); }
.fp-viewing-list { max-block-size: calc(var(--space-16) * 5); overflow-y: auto; }
.fp-bell { position: relative; }
.fp-bell .fb-n { position: absolute; inset-block-start: calc(var(--space-1) * -1); inset-inline-end: calc(var(--space-1) * -1); pointer-events: none; min-inline-size: var(--space-4); block-size: var(--space-4); padding-inline: var(--space-1); border-radius: var(--radius-full); background: var(--status-action-bg); color: var(--status-action-text); font-family: var(--font-num); font-size: var(--text-meta-size); line-height: var(--space-4); font-weight: var(--weight-strong); text-align: center; box-shadow: 0 0 0 var(--space-half) var(--surface-page); }
.fp-bell .fb-n[hidden] { display: none; }
.fp-page { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; }
.fp-page > * { min-inline-size: 0; }
.fp-ph-title, .fp-ph-only { display: none; }
/* record breadcrumb and pager */
.fp-crumbbar { display: flex; align-items: center; gap: var(--space-2); min-block-size: var(--control-md); padding-inline: var(--space-6); border-block-end: var(--border-w) solid var(--border-subtle); }
.fp-crumbs a { gap: var(--space-1); }
.fp-pager .fp-btn[aria-disabled="true"] { color: var(--text-disabled); pointer-events: none; }

/* command palette in the live app */
.fp-overlay { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; justify-content: center; align-items: flex-start; padding: var(--space-16) var(--space-4) var(--space-4); background: var(--surface-overlay); }
.fp-overlay[hidden] { display: none; }
.fp-palette { max-inline-size: 100%; display: flex; flex-direction: column; max-block-size: calc(100vh - var(--space-16) * 2); }
.fp-palette-input input { flex: 1; min-inline-size: 0; border: 0; outline: 0; background: transparent; font-size: var(--text-body-size); line-height: var(--text-body-lh); color: var(--text-primary); }
.fp-palette-input input:focus-visible { box-shadow: none; }
.fp-palette-list { overflow-y: auto; min-block-size: 0; }
.fp-palette-item { cursor: pointer; color: var(--text-primary); text-decoration: none; }
.fp-palette-item:hover { text-decoration: none; color: var(--text-primary); }
.fp-palette-item .fp-main-txt { display: flex; flex-direction: column; min-inline-size: 0; flex: 1; }
.fp-palette-item .fp-main-txt > * { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fp-palette-empty { padding: var(--space-6) var(--space-4); color: var(--text-secondary); text-align: center; font-size: var(--text-table-size); }
.fp-palette-item .fp-btn-whatsapp-mark { color: var(--whatsapp); }
.fp-kbd-list { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-4); align-items: center; font-size: var(--text-table-size); }
.fp-modal-layer { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: var(--space-4); background: var(--surface-overlay); }
.fp-modal-layer[hidden] { display: none; }
.fp-modal-layer .fp-modal { max-inline-size: 100%; max-block-size: calc(100vh - var(--space-8)); overflow-y: auto; }

/* sign-in and other pages without the shell */
.fp-bare-top { display: flex; align-items: center; gap: var(--space-3); block-size: var(--topbar-h); padding-inline: var(--space-6); border-block-end: var(--border-w) solid var(--border-default); background: var(--surface-page); }
.fp-bare-top .fp-spacer { flex: 1; }
.fp-bare-foot { padding: var(--space-4) var(--space-6); border-block-start: var(--border-w) solid var(--border-default); color: var(--text-tertiary); font-size: var(--text-meta-size); line-height: var(--text-meta-lh); }

/* ===================== Phone (760px and narrower): top bar, bottom tabs, More sheet ===================== */
.fp-tabbar, .fp-sheet-layer { display: none; }
@media (max-width: 760px) {
  .fp-app, .fp-app.is-folded { display: block; }
  .fp-sidebar { display: none; }
  .fp-topbar { block-size: var(--phone-topbar-h); padding-inline: var(--space-4) var(--space-1); gap: var(--space-1); }
  .fp-topbar .fp-search-trigger, .fp-topbar .fp-new, .fp-topbar .fp-lang, .fp-topbar .fp-avatar-wrap, .fp-topbar .fp-viewing-wrap { display: none; }
  .fp-ph-title { display: block; flex: 1; min-inline-size: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: match-parent; font-size: var(--text-section-size); line-height: var(--text-section-lh); font-weight: var(--weight-strong); }
  .fp-ph-only { display: inline-flex; }
  .fp-topbar .fp-spacer { display: none; }
  .fp-topbar .fp-btn-icon { inline-size: var(--control-touch); block-size: var(--control-touch); }
  body.fp-body { padding-block-end: var(--phone-tabbar-h); }
  .fp-tabbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--z-sidebar); block-size: var(--phone-tabbar-h); border-block-start: var(--border-w) solid var(--border-default); background: var(--surface-page); padding-inline: var(--space-1); }
  .fp-tabbar .fp-ti { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-half); min-block-size: var(--control-touch); color: var(--text-secondary); font-size: var(--text-meta-size); line-height: var(--text-meta-lh); position: relative; white-space: nowrap; text-decoration: none; background: transparent; border: 0; }
  .fp-tabbar .fp-ti .fp-icon { inline-size: var(--icon-md); block-size: var(--icon-md); }
  .fp-tabbar .fp-ti.is-active { color: var(--text-primary); font-weight: var(--weight-strong); }
  .fp-tabbar .fp-ti.is-active .fp-icon { color: var(--accent); }
  .fp-tabbar .fp-ti .fp-pip { position: absolute; inset-block-start: var(--space-1); inset-inline-start: calc(50% + var(--space-2)); min-inline-size: var(--space-4); block-size: var(--space-4); padding-inline: var(--space-1); border-radius: var(--radius-full); background: var(--status-action-bg); color: var(--status-action-text); font-family: var(--font-num); font-size: var(--text-meta-size); line-height: var(--space-4); text-align: center; font-weight: var(--weight-strong); }
  .fp-sheet-layer { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--surface-overlay); }
  .fp-sheet-layer:not([hidden]) { display: block; }
  .fp-sheet { position: absolute; inset-inline: 0; inset-block-end: 0; max-block-size: var(--phone-sheet-max); overflow-y: auto; background: var(--surface-raised); border-start-start-radius: var(--radius-lg); border-start-end-radius: var(--radius-lg); box-shadow: var(--elevation-3); display: flex; flex-direction: column; padding: 0 var(--space-4) var(--space-4); }
  .fp-sheet .fp-grab { inline-size: var(--space-10); block-size: var(--space-1); border-radius: var(--radius-full); background: var(--border-strong); margin: var(--space-2) auto var(--space-2); flex: none; }
  .fp-sheet .fp-search-trigger { inline-size: 100%; block-size: var(--control-touch); }
  .fp-sheet-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
  .fp-sheet-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); min-block-size: calc(var(--control-touch) + var(--space-4)); border: var(--border-w) solid var(--border-default); border-radius: var(--radius-lg); color: var(--text-primary); font-size: var(--text-meta-size); line-height: var(--text-meta-lh); text-decoration: none; background: var(--surface-raised); padding: var(--space-1); text-align: center; }
  .fp-sheet-tile:hover { text-decoration: none; color: var(--text-primary); background: var(--surface-subtle); }
  .fp-sheet-tile .fp-icon { color: var(--text-secondary); }
  .fp-sheet .fp-menu-label { padding-inline: 0; margin-block-start: var(--space-3); }
  .fp-sheet .fp-legal a, .fp-sheet .fp-menu-item { min-block-size: var(--control-touch); }
  .fp-menu-pop .fp-menu-item, .fp-palette-item { min-block-size: var(--control-touch); }
  .fp-overlay { padding: var(--space-2); }
  .fp-palette { inline-size: 100%; max-block-size: calc(100vh - var(--space-4)); }
  .fp-crumbbar { padding-inline: var(--space-4); }
  .fp-crumbbar .fp-btn { block-size: var(--control-touch); min-inline-size: var(--control-touch); }
  .fp-crumbs a { min-block-size: var(--control-touch); }
  .fp-bare-top { padding-inline: var(--space-4); }
}

/* icons from the sprite (<svg class="fp-icon"><use href="...#i-name"/></svg>): 1.5px on screen at 16 and 20px */
.fp-icon { stroke-width: var(--icon-stroke-16); stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.fp-icon.fp-icon-md { stroke-width: var(--icon-stroke-20); }
.fp-icon.fp-icon-brand { fill: currentColor; stroke: none; }
.fp-sb-foot p, .fp-menu-foot p, .fp-bare-foot p { margin: 0; }
.fp-wordmark { min-block-size: var(--control-sm); align-items: center; }
.fp-not-found { min-block-size: calc(100vh - var(--topbar-h) * 3); justify-content: center; }
.fp-not-found h1 { margin: 0; }
.fp-not-found p { margin: 0; }
@media (max-width: 760px) { .fp-bare-top .fp-btn, .fp-bare-top .fp-wordmark { min-block-size: var(--control-touch); } }
.fp-skip { position: fixed; inset-block-start: var(--space-2); inset-inline-start: var(--space-2); z-index: var(--z-tooltip); padding: var(--space-2) var(--space-3); background: var(--surface-dark); color: var(--text-on-dark); border-radius: var(--radius-sm); transform: translateY(-200%); }
.fp-skip:focus { transform: none; color: var(--text-on-dark); }
.fp-page:focus { outline: none; box-shadow: none; }
.fp-page input[type=checkbox]:focus-visible, .fp-page input[type=radio]:focus-visible { outline: var(--focus-ring-w) solid var(--border-focus); outline-offset: var(--space-half); box-shadow: none; }
button.fp-menu-item { appearance: none; inline-size: 100%; border: 0; background: transparent; text-align: start; font-family: inherit; }
button.fp-menu-item:hover { background: var(--surface-subtle); }
/* record breadcrumb and pager */
.fp-crumbs { display: flex; align-items: center; gap: var(--space-1); flex: 1 1 auto; min-inline-size: 0; overflow: hidden; white-space: nowrap; font-size: var(--text-table-size); line-height: var(--text-table-lh); color: var(--text-secondary); }
.fp-crumbs a { display: inline-flex; align-items: center; min-block-size: var(--control-sm); min-inline-size: var(--control-sm); flex: none; color: var(--text-link); }
.fp-crumbs .fp-icon { color: var(--text-tertiary); flex: none; }
.fp-crumbs .fp-here { color: var(--text-primary); font-weight: var(--weight-strong); min-inline-size: 0; }
.fp-pager { display: inline-flex; align-items: center; gap: var(--space-1); flex: none; font-family: var(--font-num); font-size: var(--text-meta-size); line-height: var(--text-meta-lh); color: var(--text-secondary); }
@media (max-width: 760px) { .fp-crumbs a { min-block-size: var(--control-touch); min-inline-size: var(--control-touch); } .fp-bare-top .fp-wordmark { min-inline-size: var(--control-touch); } }
/* sidebar "More" group (folded unless opened, remembered per person) */
button.fp-nav-item { appearance: none; inline-size: 100%; border: 0; background: transparent; font-family: inherit; text-align: start; cursor: pointer; }
button.fp-nav-item:hover { background: var(--surface-subtle); color: var(--text-primary); }
.fp-more-toggle .fp-chev { margin-inline-start: auto; color: var(--text-tertiary); transition: transform var(--duration-fast) var(--ease-standard); }
.fp-more-toggle[aria-expanded="true"] .fp-chev { transform: rotate(180deg); }
.fp-more-items { display: flex; flex-direction: column; gap: var(--space-half); }
.fp-more-items[hidden] { display: none; }
.fp-app.is-folded .fp-more-toggle .fp-chev { display: none; }

/* Drill-down (refs.js): a reference code in text is a link to its record, or plain text when the viewer may not open it */
.pp-ref-link{color:var(--text-link);font-weight:var(--weight-strong);text-decoration:none;white-space:normal;overflow-wrap:anywhere;unicode-bidi:isolate}   /* a link now carries a person's name (R3), which may wrap */
.pp-ref-link:hover{color:var(--text-link-hover);text-decoration:underline}
.pp-ref-link:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-xs)}
.pp-ref-plain{white-space:nowrap;unicode-bidi:isolate}
.c3-opens{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-half)}

/* v0.81 layout check: tap targets */
.fp-app.is-folded .fp-wordmark { min-inline-size: var(--control-sm); justify-content: center; }   /* the folded sidebar's one-letter mark */
@media (max-width: 760px) {
  .fp-legal a { min-block-size: var(--control-touch); min-inline-size: var(--control-touch); justify-content: center; }
  .fp-acts .fp-btn { min-block-size: var(--control-touch); }
}
/* "Open customer", "Open lead" on a task: real tap targets */
.ag-opens a, .c3-opens a, .bd-opens a { display: inline-flex; align-items: center; min-block-size: var(--control-sm); }
@media (max-width: 760px) { .ag-opens a, .c3-opens a, .bd-opens a { min-block-size: var(--control-touch); } }
@media (max-width: 760px) { .fp-tab { min-inline-size: var(--control-touch); } }

/* R3: staff always see whose Feinh Pro they are looking at. On desktop the top-bar switcher itself is the banner (tinted,
   "Viewing as ..."); on a phone it becomes a slim strip under the top bar. Nothing floats over the page. */
.fp-viewing-wrap.is-as .fp-viewing{background:var(--info-bg);border-color:var(--info-border);color:var(--text-primary)}
@media (max-width:760px){
  .fp-topbar .fp-viewing-wrap.is-as{display:flex;position:fixed;inset-block-start:var(--phone-topbar-h);inset-inline:0;z-index:var(--z-popover);padding:var(--space-1) var(--space-4);background:var(--info-bg);border-block-end:var(--border-w) solid var(--info-border)}
  .fp-viewing-wrap.is-as .fp-viewing{inline-size:100%;max-inline-size:none;min-block-size:var(--control-touch);justify-content:flex-start;border:0;background:none}
  .fp-viewing-wrap.is-as .fp-viewing .fp-icon{margin-inline-start:auto}
  .fp-viewing-wrap.is-as .fp-menu-pop{inset-inline:var(--space-2);min-inline-size:0}
  body:has(.fp-viewing-wrap.is-as) .fp-page{padding-block-start:calc(var(--control-touch) + var(--space-2))}
}

/* R3: the account menu footer, small and in two tidy lines: the powered-by line, then the legal links separated by dots */
.fp-menu-foot{padding:var(--space-2) var(--space-3);font-size:var(--text-fine-size);line-height:var(--text-fine-lh);color:var(--text-tertiary)}
.fp-menu-foot p{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fp-menu-foot .fp-legal{display:flex;flex-wrap:nowrap;white-space:nowrap;column-gap:0;margin-block-start:var(--space-1)}
.fp-menu-foot .fp-legal a{min-block-size:0;min-inline-size:0;font-size:var(--text-fine-size);line-height:var(--text-fine-lh);color:var(--text-tertiary);text-decoration:none}
.fp-menu-foot .fp-legal a:hover{color:var(--text-secondary);text-decoration:underline}
.fp-menu-foot .fp-legal a+a::before{content:"·";padding-inline:var(--space-1);color:var(--text-tertiary);display:inline-block;text-decoration:none}
@media (max-width:760px){.fp-menu-foot .fp-legal a{min-block-size:var(--control-sm);align-items:center}}
.fp-menu-foot .fp-version{margin-block-start:var(--space-1);font-variant-numeric:tabular-nums}

/* v0.84.1.3: one soft colour per person (window.FeinhHue / customers.js grad), the same on every page */
.fp-hue.g0,.cu-av.g0,.c3-av.g0{background:var(--hue-0-bg);color:var(--hue-0-ink);box-shadow:none}
.fp-hue.g1,.cu-av.g1,.c3-av.g1{background:var(--hue-1-bg);color:var(--hue-1-ink);box-shadow:none}
.fp-hue.g2,.cu-av.g2,.c3-av.g2{background:var(--hue-2-bg);color:var(--hue-2-ink);box-shadow:none}
.fp-hue.g3,.cu-av.g3,.c3-av.g3{background:var(--hue-3-bg);color:var(--hue-3-ink);box-shadow:none}
.fp-hue.g4,.cu-av.g4,.c3-av.g4{background:var(--hue-4-bg);color:var(--hue-4-ink);box-shadow:none}
.fp-hue.g5,.cu-av.g5,.c3-av.g5{background:var(--hue-5-bg);color:var(--hue-5-ink);box-shadow:none}
/* v0.84.1.16 do-anything bar: the plan card inside the palette */
.fp-pal-mic.is-rec { color: var(--danger-text); }
.fp-plan { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3); }
.fp-plan-sum { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; font-size: var(--text-body-size); line-height: var(--text-body-lh); font-weight: var(--weight-strong); color: var(--text-primary); }
.fp-plan-sum .fp-icon { color: var(--accent-strong); flex: none; margin-block-start: var(--space-half); }
.fp-plan-text { margin: 0; padding: var(--space-2) var(--space-3); border-inline-start: var(--border-w) solid var(--accent-strong); color: var(--text-secondary); font-size: var(--text-table-size); line-height: var(--text-table-lh); white-space: pre-wrap; max-block-size: 10rem; overflow: auto; }
.fp-plan-hint { margin: 0; color: var(--text-secondary); font-size: var(--text-table-size); line-height: var(--text-table-lh); }
.fp-plan-people { display: flex; flex-direction: column; gap: var(--space-1); }
.fp-plan-person { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); min-block-size: var(--control-md); padding-inline: var(--space-3); border-radius: var(--radius-sm); border: var(--border-w) solid var(--border-default); background: var(--surface-raised); color: var(--text-primary); font: inherit; font-size: var(--text-table-size); text-align: start; cursor: pointer; min-inline-size: var(--space-0); }
.fp-plan-person[aria-checked="true"] { border-color: var(--accent-strong); background: var(--accent-subtle); }
.fp-plan-acts { display: flex; justify-content: flex-end; gap: var(--space-2); }
.fp-plan-foot { margin: 0; color: var(--text-tertiary); }

/* v0.84.1.25 look on every Feinh Pro screen (body.fp-body, tokens.css): page titles in the display face, card titles as small
   section labels, so the content, not the furniture, is what the eye lands on. */
.fp-body .fp-page h1 { font-family: var(--font-display); }
.fp-body .fp-card-head .fp-t { font-size: var(--text-meta-size); line-height: var(--text-meta-lh); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); }
[dir="rtl"] .fp-body .fp-card-head .fp-t, .fp-body:lang(ar) .fp-card-head .fp-t { text-transform: none; letter-spacing: 0; }
.fp-body .fp-badge, .fp-body .fp-count, .fp-body .fp-num { font-variant-numeric: tabular-nums; }

/* v0.84.1.28 (founder, 28 Oct): WhatsApp is an ordinary outline button on every Feinh Pro screen, the same weight as Call.
   The bright green fill pulled the eye away from the one thing that matters on each screen. */
.fp-body .fp-btn-whatsapp, .fp-body .c3-btn.wa, .fp-body .c3-hb.wa, .fp-body .c3-r3 .c3-recl .c3-hacts > .c3-hb.wa, .fp-body .c3-btn.pri.wa, .fp-body .c3-pbar a.wa,
.fp-body .bd-btn.wa, .fp-body .cu-btn.wa, .fp-body .pro-btn.wa, .fp-body .td-acts .td-wa {
  background: var(--surface-raised); border-color: var(--border-strong); color: var(--text-primary) !important; }
.fp-body .fp-btn-whatsapp:hover, .fp-body .c3-btn.wa:hover, .fp-body .c3-hb.wa:hover, .fp-body .c3-pbar a.wa:hover, .fp-body .bd-btn.wa:hover, .fp-body .cu-btn.wa:hover,
.fp-body .pro-btn.wa:hover, .fp-body .td-acts .td-wa:hover { background: var(--surface-subtle); border-color: var(--border-control); }
.fp-body .fp-icon-brand, .fp-body .td-wa .fp-icon-brand, .fp-body .td-wa-btn .fp-icon-brand { color: inherit; }
.fp-body .fp-nav-item.is-active .fp-icon, .fp-body .fp-tabbar .fp-ti.is-active .fp-icon { color: var(--text-primary); }
/* v0.84.1.34: signed out in this tab (shell.js syncTab) */
.fp-signed-out{position:fixed;inset-block-start:var(--space-3);inset-inline:0;margin-inline:auto;inline-size:max-content;max-inline-size:calc(100% - 2 * var(--space-4));z-index:var(--z-toast);display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap;padding:var(--space-3) var(--space-4);background:var(--surface-raised);border:var(--border-w) solid var(--border-strong);border-radius:var(--radius-sm);box-shadow:var(--elevation-3)}

/* v1.5.2: the column chooser on every list (fp-columns.js): add or remove columns, drag them into your order */
.fpc-wrap { position: relative; display: flex; justify-content: flex-end; margin-block-end: var(--space-2); }
.fpc-pop { position: absolute; inset-block-start: calc(100% + var(--space-1)); inset-inline-end: var(--space-0); z-index: var(--z-dropdown); inline-size: min(22rem, calc(100vw - var(--space-8))); padding: var(--space-3); display: grid; gap: var(--space-2); box-shadow: var(--elevation-3); background: var(--surface-raised); border: var(--border-w) solid var(--border-default); border-radius: var(--radius-lg); }
.fpc-pop[hidden] { display: none; }
.fpc-hint { margin: var(--space-0); font-size: var(--text-meta-size); color: var(--text-secondary); }
.fpc-list { list-style: none; margin: var(--space-0); padding: var(--space-0); display: grid; gap: var(--space-half); }
.fpc-list li { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: var(--surface-raised); }
.fpc-list li.is-drag { background: var(--surface-selected); box-shadow: var(--elevation-2); }
.fpc-list li.is-fixed { color: var(--text-secondary); }
.fpc-list label { display: flex; align-items: center; gap: var(--space-2); flex: 1; min-inline-size: var(--space-0); cursor: pointer; }
.fpc-list label span { overflow-wrap: anywhere; }
.fpc-grip { appearance: none; border: 0; background: none; color: var(--text-tertiary); cursor: grab; inline-size: var(--space-6); block-size: var(--space-6); border-radius: var(--radius-xs); touch-action: none; font: inherit; letter-spacing: -0.2em; }
span.fpc-grip { cursor: default; }
.fpc-grip:focus-visible { outline: calc(var(--border-w) * 2) solid var(--accent-strong); }
.fpc-reset { justify-self: start; }

/* 2 Nov 2026 (new design, layout check): page header actions, the calendar's New and the sign-in page's forgot link are 44px on phones */
@media (max-width: 760px) {
  .pro-pagehead .fp-btn, .gc-bar .fp-btn { min-block-size: var(--control-touch); }
  .pro-forgot { display: inline-flex; align-items: center; min-block-size: var(--control-touch); }
}

/* ------------------------------------------------------------------ design system pass (2 Nov 2026, review/system.md F9-F11)
   Every number in a column, tile or table lines up (Outfit has tabular figures); long prose opts out.
   <small> is a token size, never the browser's "smaller" (11.375px). b and strong use a weight whose file ships. */
body.fp-body { font-variant-numeric: tabular-nums; }
.fp-prose, .fp-prose * { font-variant-numeric: normal; }
.fp-body small { font-size: var(--text-meta-size); line-height: var(--text-meta-lh); }
.fp-body b, .fp-body strong { font-weight: var(--weight-strong); }

/* One page header (SYS-10, F6): title, optional count and subtitle, actions at the end (one primary at most). Same place and
   size on every screen; templates/includes/fp_page_head.html renders it. Existing page heads are aligned to it below. */
/* the page's container gives the inline padding (--page-pad-x); the head gives the top (--page-pad-top). The title's box
   is always the row's height, so its top sits at the same y on every screen: controls in the head keep their size but
   take no extra height (a 36px button centred on the 28px title line). */
.fp-ph-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); min-block-size: var(--text-title-lh); padding: var(--page-pad-top) var(--space-0) var(--space-4); box-sizing: content-box; }
.fp-ph-head > :not(h1):not(:has(h1)):not(.fp-ph-sub):not(.fp-crumb):not(.fp-ph-count) { margin-block: calc((var(--text-title-lh) - var(--control-md)) / 2); }
.fp-ph-head h1, .fp-page-title { margin: var(--space-0); font-family: var(--font-display); font-size: var(--text-title-size); line-height: var(--text-title-lh); font-weight: var(--weight-strong); letter-spacing: var(--tracking-tight); color: var(--text-primary); }
.fp-ph-head .fp-ph-count { font-family: var(--font-num); font-size: var(--text-body-size); color: var(--text-tertiary); }
.fp-ph-head .fp-ph-sub { flex-basis: 100%; margin: var(--space-0); font-size: var(--text-table-size); line-height: var(--text-table-lh); color: var(--text-secondary); }
.fp-ph-head .fp-ph-actions { margin-inline-start: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--inline-gap); }
/* one breadcrumb style for every child page (Person, Property, Mortgage, Add a property, Book a viewing, Import) */
.fp-crumb { display: flex; align-items: center; gap: var(--space-1); margin: var(--space-0); font-size: var(--text-table-size); line-height: var(--text-table-lh); color: var(--text-tertiary); }
.fp-crumb a { display: inline-flex; align-items: center; min-block-size: var(--control-sm); color: var(--text-link); text-decoration: none; }
@media (max-width: 760px) { .fp-crumb a { min-block-size: var(--control-touch); } }
.fp-crumb a:hover { color: var(--text-link-hover); text-decoration: underline; }
/* a phone shows the page name once, in the top bar (SYS-09): a page h1 that repeats it stays for screen readers only */
@media (max-width: 760px) {
  .fp-ph-head { padding-block-end: var(--space-3); }
  .fp-title-dup { position: absolute; inline-size: var(--border-w); block-size: var(--border-w); overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 0; pointer-events: none; }
}
.fp-ph-head .fp-crumb { flex-basis: 100%; }