/* Enrollment detail (admin) - /admin/enrollments/:id. Hebrew RTL island.
   Everything the panel knows about ONE sale and the person behind it.

   THREE CONTRACTS THIS FILE LIVES UNDER
   -------------------------------------
   1. It is linked AFTER admin-lead-detail.css AND after admin-enrollments.css
      (index.html), and it reuses the whole `.ld-*` card kit from the lead page.
      A bare `.ld-x { }` here therefore wins on /admin/leads/:id too. So no
      `.ld-*`, `.reg-*`, `.btn*`, `.form-*`, `.modal*`, `.empty-state`, `.toast`
      or `.lal-*` selector is ever redefined bare - a needed divergence is
      scoped `.edt-page .ld-x { }`.

   2. RTL: this root follows the `.enr-page` convention (declare direction in
      the page's own stylesheet) rather than the `.ld-page` one (join the shared
      island groups at the end of admin.css). Consequences, both deliberate:
        - `.edt-page` is NOT in admin.css's overflow-x/overscroll-behavior-x
          group, so the page body has no horizontal scroller of its own and
          must never need one. Every wide thing scrolls inside its own box -
          the payments ledger in `.ld-pay-scroll`, the two technical tables in
          `.edt-tech-scroll` - exactly as `.enr-table-wrap` does on the list.
          That is the better shape here anyway: a root-level scroller on a page
          made of collapsible panels grows and vanishes as panels toggle.
        - The `.ld-page` mirrors at the end of admin-lead-detail.css are scoped
          to `.ld-page`, so `.edt-page` inherits NONE of them. Every physically
          positioned bit of the borrowed kit is restated below under our root.
      `.lal-*` (LeadActivityLog) is deliberately absent from that list: that
      component is RTL BY DEFAULT, so mirroring it would double-flip it.

   3. Exactly two breakpoints: max-width 1024px and max-width 767px. The other
      widths already in admin.css are pre-existing and are not this file's to
      change.

   Shell tokens (--adm-*) are defined on `.admin-layout`, an ancestor of every
   selector here. #8E8F9E (tertiary ink) has no token and is written out. */

/* ── RTL island ──────────────────────────────────────── */

.edt-page {
  direction: rtl;
  text-align: right;
}

/* ── RTL mirrors for the borrowed kit ────────────────── */

/* The grey hint that trails a field label - "₪, ברירת מחדל ממחיר הקורס" after
   מחיר מחירון, "%" after אחוז הנחה, and so on through every modal on the page.
   admin.css spaces it off its label with `margin-left: 0.35rem`, which under
   RTL lays the gap down on the far side of the hint and butts the two strings
   together: "מחיר מחירון₪, ברירת מחדל ממחיר הקורס".

   Every other Hebrew island already carries this mirror - five of them join a
   shared group in admin.css, `.ep-page` keeps its own copy. Ours stays here and
   stays scoped: adding `.edt-page` to that group edits a file five other
   screens read, and touching the base rule restyles every LTR admin page. */
.edt-page .form-label-hint {
  margin-left: 0;
  margin-right: 0.35rem;
}

/* Auto-margin rails: the kit pushes these to the LEFT edge, which is the start
   edge under RTL. Flip each one to the end edge instead. */
.edt-page .ld-header-contact {
  margin-left: 0;
  margin-right: auto;
}

.edt-page .ld-wa-inbound {
  margin-left: 0;
  margin-right: auto;
}

.edt-page .ld-progress-over {
  margin-left: 0;
  margin-right: auto;
}

/* Partner-journey rail: the vertical line, the dots and the indent all sit on
   the physical left in the kit. */
.edt-page .ld-journey::before {
  left: auto;
  right: 7px;
}

.edt-page .ld-journey-step {
  padding: 0.35rem 1.6rem 0.35rem 0;
}

.edt-page .ld-journey-step::before {
  left: auto;
  right: 3px;
}

.edt-page .ld-journey-ts {
  margin-left: 0;
  margin-right: auto;
}

/* Payments ledger: `.ld-pay-table th` is left-aligned in the kit and the row
   actions are right-aligned. Both are backwards here. */
.edt-page .ld-pay-table th {
  text-align: right;
}

.edt-page .ld-pay-actions {
  text-align: left;
}

/* The evidence and caveat lists carry machine strings (landing URLs, click
   ids) at dir="ltr". With no page-level scroller to catch them, an unbreakable
   one would push the whole body sideways - so break it instead. */
.edt-page .ld-ch-list {
  overflow-wrap: anywhere;
}

/* ── Links dressed as buttons ────────────────────────── */

/* `.btn` (admin.css) never clears the UA underline because every other
   consumer of it is a <button>. admin-enrollments.css does this normalisation
   scoped to `.enr-page`, a scope this page is deliberately outside of. */
.edt-page a.btn,
.edt-page .edt-ribbon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* מחיקה לצמיתות. Quiet until pointed at, then unmistakably the red one - this
   is the only control on the page that destroys a sale and its payment rows.
   Not `.ld-btn-danger`: that class stays the lead page's, so the two can
   diverge without either restyling the other. */
.edt-btn-danger {
  background: #fff;
  color: #dc2626;
  border-color: rgba(220, 38, 38, 0.45);
}

.edt-btn-danger:hover {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
}

/* ── Try again ───────────────────────────────────────── */

/* One control with two very different hosts, and neither of them is a flex row
   with a gap to lean on: the failed-load `.empty-state`, where it sits in a
   centred line between "the read failed" and the way back to the list, and the
   enrolment modal's warning notice, where it closes the sentence saying the
   cohort list did not load. Both are runs of inline text, so the button carries
   its own breathing room on all four sides. */
.edt-retry {
  margin-inline: 0.5rem;
  margin-block: 0.2rem;
  vertical-align: middle;
}

/* `.btn:hover` only lifts the border to a slightly darker grey. This is the one
   control that undoes a dead end, so it answers the pointer like an action
   rather than like furniture. */
.edt-retry:hover:not(:disabled) {
  border-color: var(--adm-accent);
  color: var(--adm-accent-ink);
}

/* admin.css gives `.btn` no disabled state at all, so a retry already in flight
   would look pressable and invite a second identical request. Same treatment
   the rest of the panel uses (`.reg-action:disabled`). */
.edt-retry:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ── Header ──────────────────────────────────────────── */

/* `.edt-header` (the modifier on `.ld-header`) has no rule of its own on
   purpose. It marks the header as this page's rather than the lead page's, and
   every block inside it - the name row from `.ld-header-top`, the two below,
   the `.ld-actions` ribbon - already carries its own spacing. A rule here would
   only restate `.ld-header`'s own padding and margin. */

/* Cohort, enrolment date, closing channel, sale page - the four things you
   check before reading anything else. */
.edt-header-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-top: 0.75rem;
  font-size: 0.82rem;
}

.edt-fact {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  min-width: 0;
}

.edt-fact-label {
  color: #8e8f9e;
  font-size: 0.72rem;
  font-weight: 600;
}

.edt-fact-value {
  color: var(--adm-ink);
}

.edt-fact-link {
  color: var(--adm-accent);
  text-decoration: none;
}

.edt-fact-link:hover {
  text-decoration: underline;
}

/* ── Header: the money band ──────────────────────────── */

/* Deliberately NOT `.enr-kpis`: that lives under a prefix contested with the
   public checkout page, whose stylesheet loads later.

   It is also not the `.enr-kpis` glass recipe. That band floats on the shell's
   own gradient; this one sits inside the white `.ld-header` card, where
   --adm-glass (72% white) and --adm-glass-border (65% white) both resolve to
   plain white and the band would read as a drop shadow with no edges. A faint
   accent wash gives it a legible plane on white and ties the band to the money
   it carries. */
.edt-kpis {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.9rem;
  padding: 0.7rem 1rem;
  background: rgba(0, 113, 227, 0.035);
  border: 1px solid rgba(0, 113, 227, 0.09);
  border-radius: 14px;
}

/* `flex: 1 1 auto` rather than a fixed tile: the band is as wide as the header
   card, and four content-width tiles would cluster against the start edge and
   leave the rest of it visibly empty. A basis of `auto` (not 0) keeps each
   tile's own content as its floor, so a nowrap figure is never squeezed. */
.edt-kpi {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  min-width: 110px;
  padding: 0.35rem 0.9rem;
  border: 1px solid transparent;
  border-radius: 12px;
}

/* One hairline between tiles rather than a box around each. */
.edt-kpi:not(:first-child) {
  border-inline-start-color: var(--adm-line);
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

/* Solid ink at weight 600. The brand gradient never touches a bold numeral -
   it only reads cleanly through light letterforms, and this is a work
   surface. */
.edt-kpi-value {
  font-size: 1.18rem;
  font-weight: 600;
  color: var(--adm-ink);
  white-space: nowrap;
}

/* Same tile, a word instead of a number. */
.edt-kpi-value--text {
  font-size: 0.95rem;
}

.edt-kpi-label {
  font-size: 0.72rem;
  color: #8e8f9e;
  white-space: nowrap;
}

/* What is still owed - the one number staff act on, so it carries the warm
   accent rather than plain ink. */
.edt-kpi--balance .edt-kpi-value {
  color: #c4551a;
}

/* Payment state, same palette as the enrollments list so the two screens agree
   at a glance. Declared after .edt-kpi-value so the tint wins. */
.edt-paystate--paid {
  color: #1a7f45;
  font-weight: 600;
}

.edt-paystate--partial {
  color: #9a7215;
  font-weight: 600;
}

.edt-paystate--unpaid {
  color: #b3352c;
}

.edt-paystate--none {
  color: #8e8f9e;
}

/* Where the money ended up on a CANCELLED sale ("הוחזר במלואו", "נגבה ולא
   הוחזר"). Muted ink on purpose: none of these states is owed, chased or
   overdue, so borrowing the warm balance colour would put urgency on a closed
   sale. It is a short sentence rather than a figure, so it also gives back the
   `nowrap` every other tile value needs. */
.edt-paystate--cancelled {
  color: var(--adm-ink-2);
  white-space: normal;
  text-align: center;
}

/* The line under the band on a cancelled sale, explaining why there is no
   balance tile and where the collected money stands. Same start-aligned icon
   shape as `.edt-notice`, without the box: it annotates the band above it
   rather than interrupting the page. */
.edt-kpi-note {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin: 0.45rem 0.25rem 0;
  color: var(--adm-ink-2);
  font-size: 0.8rem;
  line-height: 1.5;
}

.edt-kpi-note > i {
  flex-shrink: 0;
  margin-top: 0.2rem;
  color: #8e8f9e;
  font-size: 0.8rem;
}

/* ── Track (מסלול) chip ──────────────────────────────── */

/* Same palette as `.enr-sku-chip--*` on the list, under our own prefix. */
.edt-sku-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.16rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

.edt-sku-chip--developer {
  background: #eaf3ff;
  color: #0b62c4;
}

.edt-sku-chip--architect {
  background: #f1ecff;
  color: #6d3fd6;
}

.edt-sku-chip--bundle {
  background: #fff3e6;
  color: #b35a12;
}

.edt-sku-chip--none {
  background: #f2f4f8;
  color: #8e8f9e;
}

/* ── Notices ─────────────────────────────────────────── */

/* The workhorse of the page: every "you cannot see this", "this was rebuilt,
   not captured" and "this will not be saved" sentence is one of these. */
.edt-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.7rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 0.82rem;
  line-height: 1.5;
}

.edt-notice > i {
  flex-shrink: 0;
  margin-top: 0.15rem;
  font-size: 0.85rem;
}

/* `.ld-card-body` carries only a margin-top and `.ld-mk-sub` only a padding-top
   - neither is a flex container with a gap - so a notice that OPENS a body or
   a subsection must not add a second gap on top of theirs. */
.ld-card-body > .edt-notice:first-child,
.ld-mk-sub > .edt-notice:first-child {
  margin-top: 0;
}

/* Something is wrong, missing, or about to be lost. */
.edt-notice--warn {
  background: #fff8e1;
  border-color: #f0d089;
  color: #8a6100;
}

/* Provenance and consequence: where a date came from, what a button will do. */
.edt-notice--info {
  background: #eef5ff;
  border-color: #cfe0f7;
  color: var(--adm-accent-ink);
}

/* "Not shown to your account" - a permission boundary, not a problem. */
.edt-notice--muted {
  background: #f6f7fa;
  border-color: #e8e9f0;
  color: var(--adm-ink-2);
}

/* The sale with no CRM record. This single warning explains four other empty
   panels (notes, transcript, marketing, cancellation reason), so it gets a
   thicker start rail to stop it reading as boilerplate. */
.edt-nolead {
  border-inline-start-width: 3px;
}

/* ── The ledger nets NEGATIVE ────────────────────────── */

/* More was handed back than was ever collected, so the school owes the customer
   money. That is a THIRD state, not a low percentage, and half a second is all
   a staff member spends on this bar: collected is a green fill, uncollected is
   the bare grey track, and a refunded sale must not be mistakable for either.

   `progressPct` already clamps to 0, so the fill paints nothing here and the
   TRACK carries the whole statement. A hatch rather than a flat rose tint,
   because texture survives greyscale and a printed page while a tint just
   becomes one more neutral bar. The stripe angle is decorative and carries no
   meaning, so it is not mirrored under RTL. */
.edt-progress--negative {
  background: repeating-linear-gradient(135deg, #f3d2cd 0 4px, #fae7e4 4px 8px);
  box-shadow: inset 0 0 0 1px rgba(179, 53, 44, 0.28);
}

/* The sentence under the bar, which is what actually names the state - the bar
   alone can only say "not normal". It borrows `.edt-notice`'s shape so it reads
   as one of the page's explanations, and `.edt-nolead`'s thick start rail
   because it contradicts every other money figure on the page. The palette is
   its own: not the amber of a warning (nothing here is unfinished) and nowhere
   near the green of money received.

   The logical start-edge longhands come after the `border` shorthand on
   purpose - they resolve to the physical right edge under RTL and must win. */
.edt-progress-negative {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.55rem 0 0;
  padding: 0.6rem 0.75rem;
  border: 1px solid #f0cdc8;
  border-inline-start-width: 3px;
  border-inline-start-color: #b3352c;
  border-radius: 10px;
  background: #fdf4f3;
  color: #93261f;
  font-size: 0.82rem;
  line-height: 1.5;
}

.edt-progress-negative > i {
  flex-shrink: 0;
  margin-top: 0.15rem;
  font-size: 0.85rem;
}

/* ── A CANCELLED sale: the closing statement ─────────── */

/* Replaces the progress bar, and is not a quieter version of it. A bar answers
   "how far toward the target"; a cancelled sale has no target, so the honest
   answer is not 0% - it is a different question. What is drawn instead is what
   MOVED: collected, refunded, kept, and where that leaves the money.

   Deliberately flatter than `.edt-kpis` in the header even though it carries the
   same figures. That band is the page's headline; this is the ledger's own
   summary, sitting directly above the rows it summarises, and two identically
   weighted bands one scroll apart would compete instead of agreeing. So: a hair
   of neutral wash, one hairline, no accent. */
.edt-pay-closed {
  margin-top: 0.7rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid #e8e9f0;
  border-radius: 12px;
  background: #fafbfd;
}

.edt-pay-closed-head {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin: 0;
  color: var(--adm-ink-2);
  font-size: 0.82rem;
  line-height: 1.5;
}

.edt-pay-closed-head > i {
  flex-shrink: 0;
  margin-top: 0.2rem;
  color: #8e8f9e;
  font-size: 0.8rem;
}

/* Wraps rather than scrolls: the page has no root scroller (see the header), and
   at four figures on a narrow column the tiles have to fall to a second line. */
.edt-pay-sums {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  margin-top: 0.6rem;
}

.edt-pay-sum {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

/* One rank below `.edt-kpi-value`. Same solid ink at weight 600 - the brand
   gradient never touches a bold numeral. */
.edt-pay-sum-value {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--adm-ink);
  white-space: nowrap;
}

/* The money-state tile carries a short sentence, not a figure. */
.edt-pay-sum-value--text {
  font-size: 0.85rem;
  font-weight: 500;
}

/* That sentence is the SAME state the band's own cancelled tile prints, so it
   wears `.edt-paystate--cancelled` and resolves to the same --adm-ink-2. The
   two-class selector is not extra specificity for its own sake: that rule is
   declared far earlier in this file, so `.edt-pay-sum-value` above would
   otherwise win `color` and `white-space` on the same element and the tile would
   come out full-strength ink on one nowrap line. `text-align` returns to the
   page's start edge - the band centres its tile inside a stretched column, this
   one sits shoulder to shoulder with the figures beside it. */
.edt-pay-sum-value.edt-paystate--cancelled {
  color: var(--adm-ink-2);
  white-space: normal;
  text-align: inherit;
}

.edt-pay-sum-label {
  font-size: 0.7rem;
  color: #8e8f9e;
  white-space: nowrap;
}

/* ── Small in-card furniture ─────────────────────────── */

/* An explanatory line above a panel's content (e.g. documents belong to the
   PERSON, not to this one sale). */
.edt-hint {
  margin: 0 0 0.6rem;
  font-size: 0.8rem;
  color: var(--adm-ink-2);
}

/* A standalone "go and open the other screen" row. */
.edt-crm-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.7rem;
  font-size: 0.85rem;
  color: #2456c4;
  text-decoration: none;
}

.edt-crm-link:hover {
  text-decoration: underline;
}

/* Signed-on / created-on beside a contract's status pill and price. */
.edt-contract-meta {
  font-size: 0.76rem;
  color: #8e8f9e;
}

/* "Only the last N messages are shown", above the read-only transcript. */
.edt-wa-cap {
  margin-top: 0.5rem;
  font-size: 0.76rem;
  color: #8e8f9e;
}

/* ── Documents ───────────────────────────────────────── */

.edt-doc-filter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.6rem 0;
}

/* The base `.form-select` is full width, which is wrong for a one-word facet. */
.edt-doc-filter .form-select {
  width: auto;
  min-width: 140px;
}

.edt-doc-list {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* `margin: 0` clears global.css's `li { margin-bottom: 8px }`; the gap above is
   the only spacing. The end padding reserves the remove button's lane. */
.edt-doc {
  position: relative;
  margin: 0;
  padding: 0.6rem 0.75rem;
  padding-inline-end: 2.4rem;
  border: 1px solid #eef0f6;
  border-radius: 10px;
}

.edt-doc-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.edt-doc-link {
  color: #2456c4;
  font-size: 0.88rem;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.edt-doc-link:hover {
  text-decoration: underline;
}

.edt-doc-type {
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: #f0f1f5;
  color: var(--adm-ink-2);
  font-size: 0.7rem;
  white-space: nowrap;
}

.edt-doc-note {
  margin: 0.25rem 0 0;
  font-size: 0.8rem;
  color: var(--adm-ink-2);
}

.edt-doc-meta {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.72rem;
  color: #8e8f9e;
}

.edt-doc-remove {
  position: absolute;
  top: 0.5rem;
  inset-inline-end: 0.4rem;
}

/* ── The same person's other sales ───────────────────── */

.edt-sibling-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.edt-sibling {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
  padding: 0.55rem 0.7rem;
  border: 1px solid #eef0f6;
  border-radius: 10px;
}

.edt-sibling-link {
  font-weight: 600;
  color: var(--adm-ink);
  text-decoration: none;
}

.edt-sibling-link:hover {
  color: var(--adm-accent);
}

/* Money to the far end of the row, the date after it. */
.edt-sibling-money {
  margin-inline-start: auto;
  font-size: 0.82rem;
  color: var(--adm-ink-2);
  white-space: nowrap;
}

.edt-sibling-when {
  font-size: 0.72rem;
  color: #8e8f9e;
  white-space: nowrap;
}

/* ── Full-width reference panels ─────────────────────── */

/* Marketing and technical details sit OUTSIDE `.ld-grid`, as siblings of it,
   so that on a phone - where the grid collapses to one column - they stay last
   in the reading order instead of interleaving with the working panels. */
.edt-wide {
  margin-top: 1.25rem;
}

/* Provenance, above everything else in the marketing panel: how much of what
   follows was captured when the sale happened and how much was rebuilt later. */
.edt-snapshot {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid #f0f1f5;
}

/* The column gap is the spacing here - the notices' own margin would double it. */
.edt-snapshot .edt-notice {
  margin-top: 0;
}

/* ── Partner code chips: the third state ─────────────── */

/* A code with NO row in the database, which is NOT the same fact as a partner
   who was retired - and the two used to share one treatment. The live journey
   arrives with `archived: true` stamped on any code the server could not
   resolve, so the journey chip was struck through with a blank name while the
   last-touch chip an inch above, resolving the same code here, called it
   unrecognized and stood upright. One code, two verdicts, on one screen.

   `.ld-attr-chip--archived` belongs to the lead card and is untouched. This is
   the state beside it, and it is deliberately NOT a variation on it:

     - no strike-through. A strike says "this partner is withdrawn". Nothing is
       withdrawn - `?c=` accepts any 2-8 alphanumeric string and checks nothing
       against the partner table, so a code that resolves to nothing was very
       probably never a partner at all.
     - a trailing question mark. Colour alone cannot carry this (archived is
       already grey, and these screens get read in greyscale), and the page's
       dashed edge is spoken for - `.edt-prov--current` and `.edt-drift` use it
       to mean "today's record", so borrowing it here would say something else
       entirely. The glyph survives greyscale, printing and a 0.72rem chip, and
       the name line beside it spells it out in words. */
.edt-attr-chip--unknown {
  background: #fbfaf7;
  color: #8e8f9e;
  border-color: #e6e3da;
  text-decoration: none;
}

.edt-attr-chip--unknown::after {
  content: '?';
  margin-inline-start: 0.15rem;
  font-weight: 400;
}

/* ── Provenance: which record a value came from ──────── */

/* A person's attribution is OVERWRITTEN every time they come back, so a
   marketing value on this page is one of exactly two things: the sale's own
   frozen record, or the person's CRM record as it stands today. This chip is
   that answer, and a staff member must never have to guess which they are
   reading. It is deliberately quieter than the value beside it - metadata about
   a fact, never the fact.

   The two states are told apart FOUR ways, only one of which is colour. Some
   staff read these screens in greyscale, and the two chips routinely sit one
   line apart:
     1. fill  - the sale's is filled, the live one is not
     2. edge  - the sale's is solid, the live one dashed (the same dashed
                language `.edt-drift` carries below, so dashed always means
                "today's record" on this page)
     3. dot   - solid for the sale, a hollow ring for the live record
     4. ink   - the sale's is the darker of the two
   Drop the colour and all three remaining signals still answer the question.

   The silhouette is a rounded RECTANGLE while every other chip here
   (`.edt-sku-chip`, `.edt-doc-type`, `.ld-attr-chip`, `.ld-ch-chip`) is a 999px
   pill. On this page a pill means STATE; a provenance mark is an annotation, so
   it gets its own shape and is never mistaken for one more status. */
.edt-prov {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 0.3rem;
  margin-inline-start: 0.4rem;
  padding: 0.05rem 0.4rem;
  border: 1px solid transparent;
  border-radius: 5px;
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  /* `.ld-mk-subtitle` is uppercase, tracked and 700, and the chip sits inside
     it. Left inherited, the annotation would shout louder than its heading. */
  letter-spacing: normal;
  text-transform: none;
  /* An inline-flex box takes its baseline from its first flex item, which here
     is an empty dot with no baseline of its own - the synthesized one would
     hang the chip off that dot's bottom edge. Centring on the surrounding
     x-height is both stable and what a badge beside text wants. */
  vertical-align: middle;
}

.edt-prov::before {
  content: '';
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 999px;
}

/* "נשמר על המכירה" - the sale's own frozen record. Filled, solid-edged, the
   darker ink of the two: this value describes THIS sale and cannot change. */
.edt-prov--sale {
  background: #edf0f7;
  border-color: #d6dcea;
  color: var(--adm-ink-2);
}

.edt-prov--sale::before {
  background: currentColor;
}

/* "מרשומת ה-CRM היום" - the person's record as it stands now. Unfilled and
   dashed, because it is live, the next visit can overwrite it, and it is not a
   statement about this sale at all. */
.edt-prov--current {
  background: transparent;
  border-color: #c9cdda;
  border-style: dashed;
  color: #8e8f9e;
}

.edt-prov--current::before {
  border: 1px solid currentColor;
}

/* In the collapsed panel's header the chip annotates `.ld-ch-chip` rather than a
   run of text, and `.ld-card-head` already sets a 0.5rem flex gap between the
   two. Adding the chip's own start margin on top of that reads as unattached to
   the verdict it qualifies, which is the one thing it must never do. */
.edt-prov--head {
  margin-inline-start: 0;
}

/* A label line carrying the provenance of the block beneath it (the partner-code
   journey). Deliberately the same eyebrow recipe as `.ld-ch-listtitle`, which is
   the kit's own answer to "a label above a list inside `.ld-mk-sub`" and sits a
   rank below `.ld-mk-subtitle`. A sentence-case line here instead read HEAVIER
   than the section heading above it and inverted the hierarchy. The chip resets
   the tracking and the uppercase for itself. */
.edt-prov-line {
  margin: 0.7rem 0 0.3rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8e8f9e;
}

/* The two records DISAGREE about this row, and this is what the other one says.
   When it appears it is the most valuable line in the panel, so it takes its own
   line under the value instead of trailing it - but deliberately NOT an error
   colour. Anyone who came back through a second campaign drifts as a matter of
   course; amber on every such row would teach staff to stop seeing it. The
   dashed rail is `.edt-prov--current`'s signal reused, so the note reads as
   "today's record" before a word of it is read. */
.edt-drift {
  display: block;
  margin-top: 0.3rem;
  padding-inline-start: 0.5rem;
  border-inline-start: 2px dashed #c9cdda;
  font-size: 0.76rem;
  line-height: 1.45;
  color: #8e8f9e;
  overflow-wrap: anywhere;
}

/* The differing value itself, lifted out of the preamble that repeats what the
   chip already said. Weight 500 and solid ink - no gradient anywhere near it. */
.edt-drift bdi {
  color: var(--adm-ink-2);
  font-weight: 500;
}

/* Load-bearing. Card-payment attempts and conversion reports carry long
   opaque ids in nowrap cells; this is where that width is absorbed, because
   the page body itself has no horizontal scroller (see the header). */
.edt-tech-scroll {
  overflow-x: auto;
  margin-top: 0.6rem;
  -webkit-overflow-scrolling: touch;
}

/* Headers are start-aligned here, unlike `.ld-pay-table` (left-aligned in the
   kit and mirrored above) - this table is ours and is only ever RTL. */
.edt-tech-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}

.edt-tech-table th {
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid #eef0f6;
  color: #8e8f9e;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-align: right;
  text-transform: uppercase;
  white-space: nowrap;
}

.edt-tech-table td {
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid #f4f5f9;
  color: var(--adm-ink);
  white-space: nowrap;
}

.edt-tech-table tr:last-child td {
  border-bottom: none;
}

/* ── Responsive: tablet ──────────────────────────────── */

/* `.ld-grid` already collapses to one column at this width - do not re-add it. */
@media (max-width: 1024px) {
  /* Two tiles per line. Four across a tablet-width band puts each figure and
     its label within a few pixels of the divider beside it. */
  .edt-kpi {
    flex: 1 1 45%;
    min-width: 0;
  }
}

/* ── Responsive: phone ───────────────────────────────── */

/* `.ld-actions .btn` already goes full width at this breakpoint, and it reaches
   our two anchors too (both carry `.btn`) - do not re-add it. */
@media (max-width: 767px) {
  .edt-header-facts {
    flex-direction: column;
    gap: 0.4rem;
  }

  /* The kit's own phone rules reset `margin-left` on these three; under RTL the
     auto margin we set above is on the OTHER side, so clear that one instead. */
  .edt-page .ld-header-contact,
  .edt-page .ld-wa-inbound,
  .edt-page .ld-journey-ts {
    margin-right: 0;
    width: 100%;
  }

  /* The band becomes a stack of label/value lines: four tiles side by side on a
     phone leaves no room for either the number or its name. */
  .edt-kpis {
    flex-direction: column;
    gap: 0;
  }

  /* row-reverse, not row: the markup is value-then-label, and a Hebrew reader
     expects the label at the start (right) and the figure at the end, exactly
     as `.ld-kv-row` lays out its dt/dd pairs. */
  .edt-kpi {
    flex-direction: row-reverse;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.45rem 0.2rem;
  }

  /* Stacked, the divider belongs between rows, not between columns. */
  .edt-kpi:not(:first-child) {
    border-inline-start-color: transparent;
    border-block-start: 1px solid var(--adm-line);
    border-radius: 0;
  }

  /* `.ld-card-head--chip` gains `flex-wrap: wrap` at this width. Wrapped, the
     provenance chip lands alone on a second line at the START edge while the
     verdict it annotates sits at the END of the first, and a provenance mark
     across the card from its own value is worse than none. Pin it to the end
     edge, where it comes to rest directly under its chip.

     Unwrapped this resolves to zero rather than shoving it anywhere:
     `.ld-card-title` is `flex: 1` and has already consumed the free space an
     auto margin would otherwise take. */
  .edt-prov--head {
    margin-inline-start: auto;
  }

  /* Let the signed/created date drop under the status pill and the price
     instead of squeezing them. */
  .edt-contract-meta {
    flex-basis: 100%;
  }

  /* No room to push the money to the far end - let the row wrap instead. */
  .edt-sibling-money {
    margin-inline-start: 0;
  }
}