/* ==========================================================================
   Dashboard - lane D
   --------------------------------------------------------------------------
   Parallel-work lane. `dashboard.css` is shared, so concurrent sessions
   editing it overwrite each other; each session writes only to its own lane
   file instead. Loaded after `dashboard.css` and declared dependent on it, so
   rules here win at equal specificity and the cascade order stays A, B, C, D.

   Enqueue handle: `uaematch-dashboard-d`
   Registered in: functions.php -> uaematch_dashboard_scripts()
   ========================================================================== */

/* --------------------------------------------------------------------------
   Rows that really are click targets (`data-row-href`, handled in
   assets/js/dashboard/shell.js).

   The pointer and the hover wash already come from `dashboard.css` - every
   `.tbl tbody tr` and every `.ocard` carries them, and a table that is not
   clickable opts out by modifier. Nothing about the mouse needs adding here.

   What is missing is the KEYBOARD half. The row is not focusable on purpose:
   the request-code anchor inside it is the tab stop, so a second one per row
   would buy nothing and cost every keyboard user an extra press. But when that
   anchor takes focus, only ~7 characters light up while the click target is
   the whole row. `:focus-within` puts the row's own hover state on it, so what
   is focused and what is clickable look like the same object.
   -------------------------------------------------------------------------- */
.uaec-dash-root .tbl tbody tr[data-row-href]:focus-within { background: var(--accent-soft);}
.uaec-dash-root .ocard[data-row-href]:focus-within { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: var(--shadow-sm);}

/* --------------------------------------------------------------------------
   The deal in the chat - the offer card docked in an Inbox thread.

   Ported from ui_kits/emirae-dashboard-v2/v2.css (block "2 Aug 2026 - the deal
   in the chat"), scoped to `.uaec-dash-root` like every other dashboard rule in
   this theme. Markup: template-parts/dashboard/deal-card.php. Phone toggle:
   assets/js/dashboard/shell.js.
   -------------------------------------------------------------------------- */
.uaec-dash-root .dcd { container-type: inline-size; position: relative; background: var(--surface); box-shadow: inset 3px 0 0 var(--border-strong);}
.uaec-dash-root .dcd--live { box-shadow: inset 3px 0 0 var(--accent);}
.uaec-dash-root .dcd--ok { box-shadow: inset 3px 0 0 var(--success-700);}
.uaec-dash-root .dcd--warn { box-shadow: inset 3px 0 0 var(--warning-500);}
.uaec-dash-root .dcd--err { box-shadow: inset 3px 0 0 var(--error-500);}
/* Docked: it IS the offer, so it never scrolls away with the messages - and it
   must never bury them either. The thread keeps a floor, and the card, not the
   compose row, is what shrinks and scrolls internally when height runs short. */
.uaec-dash-root .convo > .dcd { flex: 0 1 auto; min-height: 0; border-bottom: 1px solid var(--border); max-height: 62%; overflow-y: auto; overflow-x: hidden;}
.uaec-dash-root .convo > .convo__scroll { min-height: 220px;}
/* The phone strip exists only on a phone. */
.uaec-dash-root .dcd__strip { display: none;}
@media (max-width: 620px) {
  /* Phone: the card is COLLAPSED to one pinned strip by default - deal state,
     current price, and the main action for this role. A tap expands the full
     card (capped at 60vh, scrolling internally, the strip staying pinned to
     collapse it again). */
  .uaec-dash-root .convo > .dcd { max-height: none; overflow: visible;}
  .uaec-dash-root .convo > .dcd.is-open { max-height: 60vh; overflow-y: auto; overflow-x: hidden;}
  .uaec-dash-root .convo > .dcd.is-open ~ .convo__scroll { min-height: 76px;}
  .uaec-dash-root .convo > .dcd:not(.is-open) .dcd__full { display: none;}
  .uaec-dash-root .convo > .dcd .dcd__strip { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; background: var(--surface); border: none; cursor: pointer; text-align: left; font-family: inherit;}
  .uaec-dash-root .convo > .dcd.is-open .dcd__strip { border-bottom: 1px solid var(--border); box-shadow: 0 6px 12px -10px rgba(15,30,60,.3);}
  .uaec-dash-root .dcd__strip:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px;}
  .uaec-dash-root .dcd__strip .chip { flex: none;}
  .uaec-dash-root .dcd__strip-price { font-size: 15px; font-weight: var(--fw-bold); color: var(--text-strong); font-variant-numeric: tabular-nums; white-space: nowrap;}
  .uaec-dash-root .dcd__strip-act { margin-left: auto; flex: none; display: flex;}
  .uaec-dash-root .dcd__strip-act .uaec-btn--sm { padding: 0 12px; height: 34px;}
  .uaec-dash-root .dcd__strip-chev { flex: none; width: 22px; height: 22px; display: grid; place-items: center; color: var(--text-muted); transition: transform .16s;}
  .uaec-dash-root .dcd__strip-chev svg { width: 15px; height: 15px; stroke-width: 2.2;}
  .uaec-dash-root .convo > .dcd.is-open .dcd__strip-chev { transform: rotate(180deg);}
}
.uaec-dash-root .dcd__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 16px 0;}
.uaec-dash-root .dcd__ic { flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center;}
.uaec-dash-root .dcd__ic svg { width: 14px; height: 14px; stroke-width: 2;}
.uaec-dash-root .dcd__t { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-strong); white-space: nowrap;}
.uaec-dash-root .dcd__t .mono { font-size: 12px; color: var(--text-secondary); font-family: var(--font-mono);}
.uaec-dash-root .dcd__open { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); white-space: nowrap;}
.uaec-dash-root .dcd__open svg { width: 12px; height: 12px; stroke-width: 2.2;}
/* The three binding fields, always in the same three places. Labels never break
   mid-phrase. */
.uaec-dash-root .dcd__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); gap: 10px 20px; padding: 10px 16px 0;}
.uaec-dash-root .dcd__f { min-width: 0;}
.uaec-dash-root .dcd__f > span { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.uaec-dash-root .dcd__f > b { display: block; margin-top: 2px; font-size: 15px; font-weight: var(--fw-bold); color: var(--text-strong); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere;}
.uaec-dash-root .dcd__f--price > b { font-size: 17px;}
.uaec-dash-root .dcd__f--scope { grid-column: 1 / -1;}
.uaec-dash-root .dcd__f--scope > b { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.uaec-dash-root .dcd__act { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; padding: 12px 16px 14px;}
.uaec-dash-root .dcd__hint { flex: 1 1 200px; min-width: 0; font-size: 11px; color: var(--text-muted); line-height: 1.45;}
.uaec-dash-root .dcd__out { display: flex; gap: 10px; align-items: flex-start; margin: 12px 16px 14px; padding: 11px 13px; border-radius: var(--radius-md); background: var(--surface-alt); border: 1px solid var(--border);}
.uaec-dash-root .dcd__out > svg { width: 16px; height: 16px; stroke-width: 2; color: var(--text-muted); flex: none; margin-top: 1px;}
.uaec-dash-root .dcd__out > div { min-width: 0;}
.uaec-dash-root .dcd__out b { display: block; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--text-strong); margin-bottom: 3px;}
.uaec-dash-root .dcd__out span { display: block; font-size: var(--fs-xs); color: var(--text-secondary); line-height: 1.55;}
.uaec-dash-root .dcd__out .linklike { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: var(--fs-xs); text-align: left;}
.uaec-dash-root .dcd__out .linklike svg { width: 12px; height: 12px; stroke-width: 2.2; flex: none;}
.uaec-dash-root .dcd__out--ok { background: var(--success-50); border-color: color-mix(in srgb, var(--success-700) 22%, transparent);}
.uaec-dash-root .dcd__out--ok > svg { color: var(--success-700);}
.uaec-dash-root .dcd__out--warn { background: var(--warning-50); border-color: color-mix(in srgb, var(--warning-700) 26%, transparent);}
.uaec-dash-root .dcd__out--warn > svg { color: var(--warning-700);}
.uaec-dash-root .dcd__out--err { background: var(--error-50, #fdecec); border-color: color-mix(in srgb, var(--error-500) 24%, transparent);}
.uaec-dash-root .dcd__out--err > svg { color: var(--error-500);}
.uaec-dash-root .dcd__foot { display: flex; gap: 7px; align-items: flex-start; padding: 8px 16px; border-top: 1px dashed var(--border-strong); background: var(--gray-50); font-size: 10.5px; color: var(--text-muted); line-height: 1.5;}
.uaec-dash-root .dcd__foot svg { width: 12px; height: 12px; stroke-width: 2; flex: none; margin-top: 1px;}
/* A narrow CONTAINER - the card in a phone thread - stacks its actions rather
   than letting a button clip. A container query, not a media query: the card is
   the same object in a 700px thread and in a 320px one. */
@container (max-width: 560px) {
  .uaec-dash-root .dcd__act { flex-direction: column; align-items: stretch;}
  .uaec-dash-root .dcd__act .uaec-btn { width: 100%; white-space: normal; height: auto; min-height: 44px;}
}

/* --------------------------------------------------------------------------
   GROUP 1 - the money window on the offer screens.

   Ported from ui_kits/emirae-dashboard-v2/v2.css (the `.leadprice`, `.vercmp`,
   `.vrow`, `.cmpwrap` and confirmation-window blocks), scoped to
   `.uaec-dash-root` like every other dashboard rule in this theme.

   `.vrow*` and `.inlinepanel*` are NOT repeated here - lane A already carries
   both, ported from the same kit file, and a second copy would be a second
   home for them. Only what the theme did not have yet is below.

   Markup: template-parts/dashboard/provider-offer-detail.php (the revision
   window), template-parts/dashboard/provider-request-detail.php (the send
   window). The diff is filled by assets/js/dashboard/shell.js.
   -------------------------------------------------------------------------- */

/* The one sentence that says what a win costs, wherever a provider is deciding. */
.uaec-dash-root .leadprice { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--surface-alt); border: 1px solid var(--border);}
.uaec-dash-root .leadprice > svg { width: 17px; height: 17px; stroke-width: 1.9; color: var(--text-muted); flex: none; align-self: center;}
.uaec-dash-root .leadprice__k { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .02em; color: var(--text-secondary);}
.uaec-dash-root .leadprice b { font-size: 21px; font-weight: var(--fw-bold); letter-spacing: -0.02em; color: var(--text-strong); font-variant-numeric: tabular-nums; margin-left: auto;}
.uaec-dash-root .leadprice--big b { font-size: 26px;}
.uaec-dash-root .leadprice__free { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--success-700); margin-left: 6px;}
.uaec-dash-root .leadprice--free { background: var(--success-50); border-color: color-mix(in srgb, var(--success-700) 24%, transparent);}
.uaec-dash-root .leadprice--free > svg,
.uaec-dash-root .leadprice--free b { color: var(--success-700);}
.uaec-dash-root .leadprice__x { flex: 1 0 100%; font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5;}
/* Hero: the lead price is the point of the window, so it is the biggest thing in it. */
.uaec-dash-root .leadprice--hero { padding: 15px 18px;}
.uaec-dash-root .leadprice--hero > svg { width: 20px; height: 20px;}
.uaec-dash-root .leadprice--hero .leadprice__k { font-size: var(--fs-sm);}
.uaec-dash-root .leadprice--hero b { font-size: 32px;}

/* The provider's own terms, quiet beside the hero: a key-value block in a frame. */
.uaec-dash-root .mdlfacts { margin: 0; padding: 3px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface);}
/* The compensation line: a footnote under a rule, never a second paragraph of
   the same weight as the one above it. */
.uaec-dash-root .mdlfine { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding-top: 12px; border-top: 1px solid var(--border); font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.55;}
.uaec-dash-root .mdlfine svg { width: 14px; height: 14px; stroke-width: 1.9; flex: none; margin-top: 1px;}
.uaec-dash-root .mdlbody { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.6; margin: 14px 0 0;}
/* `.inlinepanel__b` is a flex column with its own gap (lane A), so a paragraph
   inside it must not add a margin on top of that gap. */
.uaec-dash-root .inlinepanel__b > .mdlbody { margin: 0;}
.uaec-dash-root .mdlbody b { color: var(--text-strong); font-weight: var(--fw-bold);}

/* v(N) beside v(N+1). */
.uaec-dash-root .cmpwrap { container-type: inline-size; margin: 0;}
.uaec-dash-root .vercmp { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;}
.uaec-dash-root .vercmp__col { padding: 14px 16px; min-width: 0;}
.uaec-dash-root .vercmp__col + .vercmp__col { border-left: 1px solid var(--border);}
.uaec-dash-root .vercmp__col.is-old { background: var(--gray-50);}
.uaec-dash-root .vercmp__tag { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px;}
.uaec-dash-root .vercmp__col.is-new .vercmp__tag { color: var(--accent-hover);}
.uaec-dash-root .vrow__v em { white-space: nowrap;}
/* A CONTAINER query, not a media query: the same object sits in a 560px window
   on a desktop and in a much narrower one on a phone, and "unchanged" must
   never be cut to "UNCH...". */
@container (max-width: 460px) {
  .uaec-dash-root .vercmp { grid-template-columns: 1fr;}
  .uaec-dash-root .vercmp__col + .vercmp__col { border-left: none; border-top: 1px solid var(--border);}
  .uaec-dash-root .cmpwrap .vrow { flex-direction: column; align-items: flex-start; gap: 2px;}
  .uaec-dash-root .cmpwrap .vrow__v { text-align: left; justify-content: flex-start;}
}

/* The confirmation step's own trigger is a <summary> painted as a button, so it
   must not also stretch across the column it sits in. */
.uaec-dash-root .offer-confirm > summary { max-width: max-content;}
/* A phone is narrower than two buttons: let them wrap rather than clip. */
@media (max-width: 620px) {
  .uaec-dash-root .offer-confirm > summary { max-width: none; width: 100%; justify-content: center;}
  .uaec-dash-root .offer-confirm .form-actions { flex-direction: column; align-items: stretch;}
  /* Every control in the window, not only the ones inside a `.form-actions`
     row: the send button on the request screen is a direct child of the panel
     body, and a 40px button directly under a 44px one is the kind of half-done
     rule that looks like a bug. Matches the kit's own `.dcd__act .uaec-btn`. */
  .uaec-dash-root .offer-confirm .uaec-btn,
  .uaec-dash-root .offer-confirm > summary { width: 100%; white-space: normal; height: auto; min-height: 44px;}
}

/* --------------------------------------------------------------------------
   GROUP 4 - system lines in a conversation, on two axes.

   Markup: template-parts/dashboard/inbox.php. The class is
   `msg--sys-{hue}` plus `is-loud`, and BOTH halves are decided server-side by
   uaec_system_line_tone() - the colour derived from the central status
   registry, the weight from who performed the action. Nothing is decided here.

   COLOUR = what happened to the deal, identical for both sides.
   WEIGHT  = whether it is news to this reader. Two weights, no more.

   The base `.msg--sys` in dashboard.css is a transparent pill with a dashed
   border in `--text-muted`. That stays the shape; what changes is that the
   quiet level is now READABLE (`--text-secondary`, a solid hairline) and the
   loud level is unmistakable. No fifth palette is introduced: every colour
   below is an existing token, the same ones the status chips use.
   -------------------------------------------------------------------------- */

/* The border mixes below are high because the border is part of the SIGNAL
   here, not decoration: it is measured against its own bubble and has to
   clear 3:1 (WCAG 1.4.11). Text on every one of these clears 4.5:1.

/* QUIET - the default, and what an unrecognised line keeps. Same pill, but it
   can be read: the old --text-muted on transparent was the whole complaint. */
.uaec-dash-root .msg--sys .msg__bubble { color: var(--text-secondary); border-style: solid; border-color: var(--border-strong);}

/* Quiet + a hue: a hairline and a wash, nothing more. */
.uaec-dash-root .msg--sys-info .msg__bubble { color: var(--accent-hover); border-color: color-mix(in srgb, var(--accent) 72%, var(--border)); background: color-mix(in srgb, var(--accent-soft) 55%, transparent);}
.uaec-dash-root .msg--sys-success .msg__bubble { color: var(--success-700); border-color: color-mix(in srgb, var(--success-700) 72%, var(--border)); background: color-mix(in srgb, var(--success-50) 60%, transparent);}
.uaec-dash-root .msg--sys-warning .msg__bubble { color: var(--warning-700); border-color: color-mix(in srgb, var(--warning-700) 72%, var(--border)); background: color-mix(in srgb, var(--warning-50) 60%, transparent);}
.uaec-dash-root .msg--sys-error .msg__bubble { color: var(--error-500); border-color: color-mix(in srgb, var(--error-500) 72%, var(--border)); background: color-mix(in srgb, var(--error-50, #fcebeb) 60%, transparent);}

/* LOUD - a decisive event this reader did not cause. The same hue, said at full
   strength: solid ground, a real border, and the weight of a heading. The text
   colour is unchanged from the quiet level, so the contrast that was measured
   for one holds for the other. */
.uaec-dash-root .msg--sys.is-loud { max-width: 96%;}
.uaec-dash-root .msg--sys.is-loud .msg__bubble { font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: -0.005em; padding: 9px 18px; border-width: 1.5px; box-shadow: var(--shadow-xs);}
.uaec-dash-root .msg--sys-neutral.is-loud .msg__bubble { background: var(--surface-alt); border-color: var(--border-strong); color: var(--text-strong);}
.uaec-dash-root .msg--sys-info.is-loud .msg__bubble { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 88%, var(--border));}
.uaec-dash-root .msg--sys-success.is-loud .msg__bubble { background: var(--success-50); border-color: color-mix(in srgb, var(--success-700) 88%, var(--border));}
.uaec-dash-root .msg--sys-warning.is-loud .msg__bubble { background: var(--warning-50); border-color: color-mix(in srgb, var(--warning-700) 88%, var(--border));}
.uaec-dash-root .msg--sys-error.is-loud .msg__bubble { background: var(--error-50, #fcebeb); border-color: color-mix(in srgb, var(--error-500) 88%, var(--border));}

/* A system line is a statement about the deal, not a bubble somebody wrote, so
   it stays centred and never takes a side of the thread. Unchanged from before;
   repeated here only because `.is-loud` widens it. */
.uaec-dash-root .msg--sys.is-loud { align-self: center; text-align: center;}