/* ============================================================================ *
 *  SHARED interpretation / confirm card  (window.DxConfirm)                    *
 *                                                                              *
 *  Used by BOTH the DxDatabase entry page (Pages/Dxdatabase.cshtml) and the    *
 *  Search SPA (src/dxask/web/index.html -> generated dxask.* + _DxAskApp).     *
 *  Neutral `.dxc-*` classes with self-contained colours so the card renders    *
 *  identically on both pages — it does NOT depend on `.dxask-app` scoping or    *
 *  on either page's CSS custom properties.                                     *
 *                                                                              *
 *  Edit this file (src/dxask/web/dxask-confirm.css); scripts/port_dxask_assets *
 *  copies it verbatim into wwwroot/dxask/dxask-confirm.css.                    *
 * ============================================================================ */

/* The card is a seamless "zone" inside the input card (hairline divider on top,
   white surface, room on the right for the dismiss X). */
.dxc-card{
  position:relative;text-align:left;
  border-top:1px solid rgba(15,23,42,0.11);background:#fff;
  padding:15px 46px 17px 18px;transition:opacity .18s ease;
  font-family:'Inter','Inter Variable',system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:#1a2230;
}
.dxc-card.hidden,.dxc-card[hidden]{display:none !important}

/* dismiss ("X") — subtle, top-right, visible in active + dimmed/stale states */
.dxc-dismiss{
  position:absolute;top:9px;right:9px;width:28px;height:28px;padding:0;margin:0;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid transparent;border-radius:8px;background:transparent;color:#4d5a6e;
  cursor:pointer;transition:background .15s ease,color .15s ease;
}
.dxc-dismiss:hover{background:rgba(15,23,42,0.06);color:#1a2230}
.dxc-dismiss:focus-visible{outline:2px solid rgba(15,118,110,0.55);outline-offset:2px}
.dxc-dismiss svg{width:15px;height:15px;display:block}

/* colour-coded eyebrow + interpretation title + sources line */
.dxc-eyebrow{
  font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.09em;
  color:#4d5a6e;margin-bottom:2px;
}
.dxc-lowconf .dxc-eyebrow{color:#b45309}
.dxc-title{margin:4px 0 0;font-size:21px;line-height:1.25;font-weight:600;letter-spacing:-.01em;color:#1a2230}
.dxc-src{margin-top:6px;color:#4d5a6e;font-size:13px}
.dxc-busy{margin-top:6px;font-size:13px;color:#4d5a6e;line-height:1.5}

/* tinted, colour-coded low-confidence guidance note */
.dxc-note{
  margin-top:10px;padding:9px 11px;border-radius:10px;font-size:12.5px;line-height:1.45;
  background:rgba(245,158,11,.09);border:1px solid rgba(245,158,11,.35);color:#92610a;
}
/* inline clickable actions inside the note ("Refine", "Edit question") */
.dxc-card .dxc-note-act{
  font-family:inherit;cursor:pointer;border:0;background:transparent;padding:0;margin:0;
  font-size:inherit;font-weight:600;color:#92610a;text-decoration:underline;text-underline-offset:2px;
}
.dxc-card .dxc-note-act:hover{color:#7a4f08}
.dxc-card .dxc-note-act:focus-visible{outline:2px solid rgba(180,83,9,.5);outline-offset:2px;border-radius:3px}

/* actions */
.dxc-actions{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.dxc-card .dxc-btn{
  font-family:inherit;cursor:pointer;border-radius:10px;padding:.5rem .95rem;
  font-size:13px;font-weight:500;line-height:1.2;border:1px solid transparent;
  transition:background .18s ease,border-color .18s ease,filter .18s ease,opacity .18s ease;
}
/* the single FILLED action on the card: the primary "Show table" (solid green) */
.dxc-card .dxc-go{background:#0f9d6b;color:#fff;font-weight:600;border-color:transparent}
.dxc-card .dxc-go:hover{background:#0c875b}
/* QUIET related action: ghost/outline (teal text, no fill), a touch smaller, so
   related tables never compete with the primary's one filled button. */
.dxc-card .dxc-rel-go{
  background:transparent;color:#0c875b;font-weight:600;
  border-color:rgba(15,118,110,.34);padding:.4rem .8rem;font-size:12.5px;
}
.dxc-card .dxc-rel-go:hover{background:rgba(15,118,110,.08);border-color:rgba(15,118,110,.5)}
.dxc-card .dxc-rel-go:focus-visible{outline:2px solid rgba(15,118,110,0.55);outline-offset:2px}
.dxc-card .dxc-refine{background:#fff;color:#1a2230;border-color:rgba(15,23,42,0.16);font-weight:500}
.dxc-card .dxc-refine:hover{background:rgba(15,23,42,0.04);filter:none}
.dxc-card .dxc-edit{background:transparent;color:#4d5a6e;border-color:rgba(15,23,42,0.14);font-weight:500}
.dxc-card .dxc-edit:hover{background:rgba(15,23,42,0.04);filter:none}
.dxc-card .dxc-btn[disabled],.dxc-card .dxc-btn:disabled{opacity:.55;cursor:not-allowed}
/* bottom secondary actions: Refine / Edit question as QUIET text links (no box) */
.dxc-actions-secondary .dxc-refine,.dxc-actions-secondary .dxc-edit{
  background:transparent;border-color:transparent;padding:.35rem .15rem;color:#4d5a6e;font-weight:500;
}
.dxc-actions-secondary .dxc-refine:hover,.dxc-actions-secondary .dxc-edit:hover{
  background:transparent;color:#0c875b;text-decoration:underline;text-underline-offset:3px;
}
.dxc-options{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.dxc-option{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  border:1px solid rgba(15,23,42,0.12);border-radius:12px;background:rgba(248,250,252,.85);
  padding:11px 12px;
}
.dxc-option-copy{min-width:0}
.dxc-option-label{font-size:14px;font-weight:650;color:#1a2230;line-height:1.3}
.dxc-option-desc{margin-top:3px;font-size:12.5px;color:#4d5a6e;line-height:1.4}
.dxc-option .dxc-src{font-size:12px}
.dxc-option .dxc-go{flex:none;white-space:nowrap;margin-top:1px}
.dxc-actions-secondary{margin-top:12px}
@media (max-width:640px){
  .dxc-option{flex-direction:column;align-items:stretch}
  .dxc-option .dxc-go{width:100%}
}

/* ---- Best match + Related tables redesign (primary + ranked related) ---- */
/* the dominant "Best match" block: title, chips, sources, primary action */
.dxc-best .dxc-title{margin-top:2px}
.dxc-best .dxc-actions{margin-top:13px}
/* the primary stays the one solid button, just a touch more compact */
.dxc-best .dxc-go{padding:.46rem .9rem}

/* divergence badge: a sibling that could not inherit a primary filter/breakdown */
.dxc-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.dxc-badge{
  display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;line-height:1.1;
  padding:3px 8px;border-radius:999px;white-space:nowrap;
  background:rgba(245,158,11,.12);color:#92610a;border:1px solid rgba(245,158,11,.4);
}
.dxc-badge::before{content:"\26A0";font-size:10px;line-height:1}

/* small descriptive chips (measure / universe / source count) */
.dxc-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.dxc-chip{
  display:inline-flex;align-items:center;font-size:11.5px;font-weight:500;line-height:1;
  padding:4px 8px;border-radius:999px;background:rgba(15,23,42,0.05);color:#4d5a6e;
  border:1px solid rgba(15,23,42,0.08);white-space:nowrap;
}
.dxc-chip-measure{background:rgba(15,118,110,.10);color:#0c875b;border-color:rgba(15,118,110,.22);font-weight:600}

/* related tables section */
.dxc-related{margin-top:15px;padding-top:13px;border-top:1px solid rgba(15,23,42,0.08)}
.dxc-related-head{
  font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;
  color:#4d5a6e;margin-bottom:9px;
}
.dxc-related .dxc-options,.dxc-related .dxc-option{margin-top:0}
.dxc-related .dxc-option + .dxc-option{margin-top:10px}

/* quiet related chips (confident state): clickable, subtle */
.dxc-rel-chips{display:flex;flex-wrap:wrap;gap:8px}
.dxc-card .dxc-rel-chip{
  font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:500;color:#1a2230;line-height:1.2;
  padding:6px 11px;border-radius:999px;background:#fff;border:1px solid rgba(15,23,42,0.16);
  transition:background .15s ease,border-color .15s ease;
}
.dxc-card .dxc-rel-chip:hover{background:rgba(15,118,110,.06);border-color:rgba(15,118,110,.40)}
.dxc-card .dxc-rel-chip:focus-visible{outline:2px solid rgba(15,118,110,0.55);outline-offset:2px}
.dxc-card .dxc-rel-chip[disabled],.dxc-card .dxc-rel-chip:disabled{opacity:.5;cursor:not-allowed}
.dxc-rel-chip-meas{font-size:10.5px;font-weight:600;color:#0c875b;text-transform:uppercase;letter-spacing:.04em}

/* stale: the shown interpretation no longer matches the (edited, un-sent) ask
   box. Dim the card and disable its commit actions (done in JS) so the OLD
   interpretation can't be committed against a NEW query. */
.dxc-stale-hint{margin-top:10px;font-size:12px;color:#4d5a6e}
.dxc-stale-hint.hidden,.dxc-stale-hint[hidden]{display:none}
.dxc-card.dxc-stale{opacity:.5}
.dxc-card.dxc-stale .dxc-actions button:not(.dxc-edit){cursor:not-allowed}

/* "Analysing…" loading skeleton (interpretation placeholder, in place) */
.dxc-analysing{display:flex;flex-direction:column;gap:11px;padding:2px 0}
.dxc-analysing-label{display:inline-flex;align-items:center;gap:8px;color:#4d5a6e;font-size:13px;font-weight:500;letter-spacing:.01em}
.dxc-analysing-dot{width:7px;height:7px;border-radius:50%;background:#0f9d6b;animation:dxc-pulse 1s ease-in-out infinite}
.dxc-skel{height:13px;border-radius:7px;background:linear-gradient(90deg,rgba(15,23,42,0.05) 20%,rgba(15,118,110,0.14) 50%,rgba(15,23,42,0.05) 80%);background-size:200% 100%;animation:dxc-skel 1.5s ease-in-out infinite}
.dxc-skel.t{height:22px;width:54%;border-radius:8px}
.dxc-skel.s{width:38%}
@keyframes dxc-pulse{0%,100%{opacity:.3;transform:scale(.82)}50%{opacity:1;transform:scale(1)}}
@keyframes dxc-skel{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* analysing glow on the parent input card (routed through the module via the
   `glowEl` option). Animations win the cascade over the page's resting (non-
   important) box-shadow, so this lights up identically on both cards. */
.dxc-glow{animation:dxc-glow 2.2s ease-in-out infinite}
@keyframes dxc-glow{
  0%,100%{box-shadow:0 1px 0 rgba(10,10,10,0.05),0 18px 44px rgba(15,23,42,0.13),0 0 0 1px rgba(15,118,110,0.20),0 8px 26px rgba(15,118,110,0.14)}
  50%{box-shadow:0 1px 0 rgba(10,10,10,0.05),0 18px 44px rgba(15,23,42,0.13),0 0 0 1px rgba(34,211,238,0.32),0 14px 42px rgba(34,211,238,0.26)}
}
@media (prefers-reduced-motion:reduce){
  .dxc-analysing-dot,.dxc-skel{animation:none}
  .dxc-glow{animation:none}
}

/* ---- One-tap interpretation feedback strip -------------------------------- *
 *  A quiet, dismissible "Did we get this right?" bar shown under the confirm  *
 *  card. Signal only; never blocks results.                                   */
.dxfb{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:10px 2px 0;
  padding:8px 12px;border-radius:10px;font-size:13px;
  background:rgba(15,23,42,0.03);border:1px solid rgba(15,23,42,0.08)}
.dxfb.hidden{display:none}
.dxfb-q{color:#475569;font-weight:500}
.dxfb-acts,.dxfb-reasons{display:inline-flex;gap:6px;align-items:center}
.dxfb-reasons.hidden,.dxfb-acts.hidden{display:none}
.dxfb-btn,.dxfb-reason{cursor:pointer;border:1px solid rgba(15,118,110,0.35);
  background:#fff;color:#0f766e;border-radius:999px;padding:3px 12px;
  font-size:12px;line-height:1.4;transition:background .12s,border-color .12s}
.dxfb-btn:hover,.dxfb-reason:hover{background:rgba(15,118,110,0.08)}
.dxfb-reason{border-color:rgba(148,163,184,0.5);color:#475569}
.dxfb-reason:hover{background:rgba(148,163,184,0.14)}
.dxfb-x{margin-left:auto;cursor:pointer;border:none;background:transparent;
  color:#94a3b8;font-size:16px;line-height:1;padding:2px 6px}
.dxfb-x:hover{color:#475569}
.dxfb-thanks{color:#0f766e;font-weight:500}