/* ============================================================
   Formatter styles — the cell components a grid paints.

   TWO MECHANISMS, and it matters which one a formatter uses:

   1. Signal formatters set `style="color:<semantic>"` in TypeScript, and the
      CSS derives the fill and the border from that same currentColor through
      color-mix(). One inline colour therefore produces a whole badge that is
      correct in both themes. Keep this — it is why these adapt for free.

   2. Everything else takes its colour from a token here. No formatter should
      name a surface or a border colour inline; two of them used to
      (`rgba(0,0,0,.2)` on the accent and colour swatches, invisible on a dark
      panel) and that geometry now lives in this file instead.

   SHAPE — deliberately one step quieter than `.wgl-status-pill`.

   The hand-written lists carry ONE status sticker per row, on a 40px card, and
   it gets the full treatment: the 2px edge and the 2px hard offset. A grid can
   show four badge columns across twenty-five rows, and a hundred hard offsets
   on one screen is texture, not signal — it would make the thing harder to
   scan, which is the opposite of the point.

   So a cell badge keeps the sticker's SHAPE and TYPE — the 7px chip radius, the
   uppercase micro-label — and drops the offset. Same family, read at density.
   ============================================================ */

/* ── Shared badge foundation ─────────────────────────────── */
.fmt-badge,
.fmt-badge-muted,
.fmt-datetime {
  display: inline-flex;
  align-items: center;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--header-font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
  box-sizing: border-box;
}

/* ── Status / label pill ─────────────────────────────────── */
/* DisplayOrder, FileSize, MessageType, Role badges. The border is 1.5px to
   match --wgl-edge-thin; the 2px edge belongs to the record-level sticker. */
.fmt-badge {
  justify-content: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: var(--wgl-r-chip);
  border: 1.5px solid color-mix(in srgb, currentColor 34%, transparent);
  background-color: color-mix(in srgb, currentColor 11%, transparent);
  transition: opacity var(--s-transition);
}

/* ── Muted / placeholder pill (no colour signal) ─────────── */
.fmt-badge-muted {
  justify-content: center;
  padding: 2px 9px;
  border-radius: var(--wgl-r-chip);
  border: 1.5px solid var(--s-wgl-hairline);
  color: var(--s-wgl-ink-mute);
}

/* ── DateTime pill (relative time + sub-label) ───────────── */
/* Left-aligned to fit its icon, and NOT uppercased: it carries a date, and
   "3 DAYS AGO" in tracked caps is harder to read than the sentence form. */
.fmt-datetime {
  justify-content: flex-start;
  gap: 5px;
  padding: 2px 8px;
  border-radius: var(--wgl-r-chip);
  border: 1.5px solid color-mix(in srgb, currentColor 26%, transparent);
  background-color: color-mix(in srgb, currentColor 9%, transparent);
  font-family: var(--s-tabular-font);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: tabular-nums;
  cursor: default;
}

.fmt-datetime-sub {
  font-size: 0.72em;
  font-weight: 400;
  opacity: 0.6;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
  padding-left: 6px;
}

/* A plain calendar date. Same chip as the timestamp above, so the two read as
   siblings — but neutral, because DateFormatter sets no colour. On these chips
   colour means recency; its absence means "which day", which is all a quotation
   date or a rental start is claiming. */
.fmt-date {
  width: auto;
  color: var(--s-wgl-ink-dim);
  border-color: var(--s-wgl-hairline);
  background-color: var(--s-wgl-surface-2);
}

.fmt-date i {
  opacity: 0.55;
}

/* ── Link formatters (Email / Phone) ─────────────────────── */
.fmt-link-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  color: var(--s-tool-icon);
  font-size: 0.875rem;
}

.fmt-link-cell i {
  font-size: 0.8rem;
  flex-shrink: 0;
}

.fmt-link-cell a {
  color: var(--bs-link-color);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* A phone number is a figure people compare down a column. */
.fmt-link-cell a {
  font-variant-numeric: tabular-nums;
}

.fmt-link-cell a:hover {
  color: var(--bs-link-hover-color);
  text-decoration: underline;
}

/* ── Download icon button ────────────────────────────────── */
.fmt-download-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.fmt-download-cell a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--s-tool-icon);
  width: 26px;
  height: 26px;
  border: 1.5px solid transparent;
  border-radius: var(--wgl-r-chip);
  text-decoration: none;
  transition: background var(--s-transition), color var(--s-transition),
              border-color var(--s-transition);
}

.fmt-download-cell a:hover {
  background: var(--s-wgl-surface-2);
  border-color: var(--s-wgl-hairline);
  color: var(--s-wgl-ink);
}

/* ── URL favicon badge (full-width link row) ─────────────── */
.fmt-url-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  max-width: 100%;
  padding: 2px 7px;
  border-radius: var(--wgl-r-chip);
  text-decoration: none;
  color: var(--bs-body-color);
  background-color: var(--s-wgl-surface-2);
  border: 1.5px solid var(--s-wgl-hairline);
  font-family: var(--s-tabular-font);
  font-size: 0.82rem;
  overflow: hidden;
  white-space: nowrap;
  transition: color var(--s-transition), border-color var(--s-transition),
              background-color var(--s-transition);
}

.fmt-url-badge:hover {
  color: var(--bs-link-color);
  background-color: var(--s-wgl-tint-bg);
  border-color: var(--s-wgl-edge);
  text-decoration: none;
}

.fmt-url-badge img {
  width: 15px;
  height: 15px;
  border-radius: 2px;
  flex-shrink: 0;
  opacity: 0.85;
}

.fmt-url-badge span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* ── Money / price cell ──────────────────────────────────── */
/* Right-aligned tabular figures; pair with [AlignRight] on the column. */
.fmt-money {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 4px;
  width: 100%;
  font-family: var(--s-tabular-font);
  font-variant-numeric: tabular-nums;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}

.fmt-money-cur {
  font-size: 0.72em;
  font-weight: 700;
  opacity: 0.55;
  text-transform: uppercase;
}

/* The converted amount in brackets. Subordinate to the figure it restates —
   it is the same money said twice, not a second number. */
.fmt-money-sec {
  font-size: 0.78em;
  font-weight: 400;
  color: var(--s-wgl-ink-mute);
  font-variant-numeric: tabular-nums;
}

/* Zero is not news. It recedes so the non-zero rows carry the column. */
.fmt-money-zero {
  opacity: 0.4;
  font-weight: 400;
}

/* ── Percent ─────────────────────────────────────────────── */
/* Splits, commission, markdown — all read down a column against each other. */
.fmt-percent {
  display: inline-block;
  width: 100%;
  text-align: end;
  font-family: var(--s-tabular-font);
  font-variant-numeric: tabular-nums;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}

/* ── Status / type pill ──────────────────────────────────── */
/* Inherits .fmt-badge; sized to its label rather than the column. */
.fmt-status {
  width: auto;
  max-width: 100%;
}

/* ── Star rating (single star + value) ───────────────────── */
.fmt-stars {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  color: var(--s-wgl-accent-fg);   /* the one yellow legal as text on paper */
  font-size: 0.82rem;
}

.fmt-stars-val {
  color: var(--bs-body-color);
  font-weight: 600;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

/* ── Colour swatches ─────────────────────────────────────────
   `.fmt-swatch` (ColorSwatchFormatter) and `.fmt-accent` (AccentFormatter) both
   paint a data-driven colour. Only that colour stays inline — the box, the
   radius and the ring are here, because the ring the two formatters used to
   write inline was a literal `rgba(0,0,0,.2)`: invisible against a dark panel,
   which is precisely where a swatch outline is doing its only job.

   The ring is currentColor-neutral rather than a token so it works over a
   swatch of ANY colour, including one that matches the panel behind it. */
.fmt-swatch,
.fmt-accent[style*="background"] {
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 4px;
  vertical-align: -2px;
  box-shadow: inset 0 0 0 1.5px rgba(var(--wgl-black-rgb), 0.22),
              0 0 0 1px var(--s-wgl-hairline);
}

.fmt-accent[style*="background"] {
  width: 18px;
  height: 18px;
}

/* The fallback branch: no known accent, so the raw class name is shown. */
.fmt-accent {
  font-family: var(--s-tabular-font);
  font-size: 0.8rem;
  color: var(--s-wgl-ink-mute);
}

.fmt-color {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--s-tabular-font);
  font-size: 0.82rem;
  color: var(--bs-body-color);
}

/* ── RTL — mirror the directional rules ──────────────────── */
[dir="rtl"] .fmt-datetime-sub {
  margin-left: 0;
  margin-right: auto;
  padding-left: 0;
  padding-right: 6px;
}