/* [pres-blocks-v2] Styles for renderer_blocks.js: cards, diagram, map, mockup, widget, table and chart tools,
 * plus [pres-typography-v2] for the answer text.
 *
 * Kit rule: weights 400 / 500 / 600 / 700 only (Segoe cannot render 650 reliably).
 * Drop-in replacement for v1: every class name, data attribute and token the JS and renderer.css rely on is unchanged.
 * Colours are still the answer tokens (--dr-*) from renderer.css with the dark values as fallbacks, so a block drawn
 * outside an answer (report print page, gallery) stays readable. Light theme comes with the tokens.
 *
 * What v2 adds on top of v1
 *   - one small design-token layer (--drx-*): radii, elevation, motion, focus, so every block shares one rhythm
 *   - elevation by hierarchy: interactive/data blocks float, reading blocks (sources, quotes, notes) stay flat
 *   - friendlier controls: bigger hit areas, a search icon in table filters, a segmented Chart | Table switch,
 *     a visible "sortable" hint on table headers, row hover, a chevron on expandable notices
 *   - richer type: a lead first line, softer reading measure, real underlines on links, mark / kbd / task lists
 *   - forced-colours (Windows high contrast), touch, reduced-motion and print handled in one place each
 */

/* =====================================================================================================================
   0. design tokens (prefixed --drx- so they never collide with renderer.css)
   ===================================================================================================================== */
:root {
  --drx-r-xs: 6px; /* chips inside blocks, inline code */
  --drx-r-sm: 9px; /* buttons, inputs, small tiles */
  --drx-r-md: 12px; /* reading blocks: sources, quotes, notes */
  --drx-r-lg: 16px; /* data blocks: cards, widgets, mockups */
  --drx-r-pill: 999px;

  --drx-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --drx-fast: 0.14s;
  --drx-med: 0.24s;

  /* elevation: 0 = flat (border only), 1 = resting data block, 2 = floating (tooltip, hovered card) */
  --drx-hi: inset 0 1px 0 rgba(255, 255, 255, 0.045);
  --drx-shadow-1:
    var(--drx-hi), 0 1px 2px rgba(0, 0, 0, 0.28),
    0 8px 22px -12px rgba(0, 0, 0, 0.55);
  --drx-shadow-2:
    var(--drx-hi), 0 2px 6px rgba(0, 0, 0, 0.3),
    0 18px 40px -16px rgba(0, 0, 0, 0.65);

  --drx-focus: 2px solid var(--dr-accent, #6d8dff);
  --drx-tap: 28px; /* min height of every control; 36px on touch screens (see section 9) */
}
:root[data-theme="light"] {
  --drx-hi: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --drx-shadow-1:
    var(--drx-hi), 0 1px 2px rgba(16, 24, 40, 0.06),
    0 6px 18px -10px rgba(16, 24, 40, 0.16);
  --drx-shadow-2:
    var(--drx-hi), 0 2px 6px rgba(16, 24, 40, 0.08),
    0 16px 36px -14px rgba(16, 24, 40, 0.24);
}

/* =====================================================================================================================
   1. shared controls: tooltip, tool buttons
   ===================================================================================================================== */
.dr-tip {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  max-width: 280px;
  padding: 7px 11px;
  border-radius: var(--drx-r-sm);
  font-size: 12px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.005em;
  color: #f4efe6;
  background: color-mix(in srgb, #0b1020 92%, transparent);
  border: 1px solid rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.25),
    0 14px 30px -12px rgba(0, 0, 0, 0.5);
}
.dr-tip[hidden] {
  display: none;
}
.dr-tip b,
.dr-tip strong {
  font-weight: 700;
  color: #fff;
}

.dr-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: var(--drx-tap);
  padding: 0 10px;
  border-radius: var(--drx-r-sm);
  font: inherit;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  color: var(--dr-dim, #9aa6c2);
  background: color-mix(in srgb, var(--dr-surface, #151d33) 70%, transparent);
  border: 1px solid var(--dr-border, #24304d);
  transition:
    color var(--drx-fast),
    border-color var(--drx-fast),
    background-color var(--drx-fast);
}
.dr-tool:hover {
  color: var(--dr-text, #e8ecf6);
  border-color: color-mix(
    in srgb,
    var(--dr-accent, #6d8dff) 60%,
    var(--dr-border, #24304d)
  );
  background: color-mix(
    in srgb,
    var(--dr-accent, #6d8dff) 8%,
    var(--dr-surface, #151d33)
  );
}
.dr-tool:active {
  background: color-mix(
    in srgb,
    var(--dr-accent, #6d8dff) 14%,
    var(--dr-surface, #151d33)
  );
}
.dr-tool .dr-ic {
  width: 14px;
  height: 14px;
}

/* =====================================================================================================================
   2. table tools: filter, count, sort, "show more"
   ===================================================================================================================== */
.dr-tbl {
  position: relative;
}
.msg.assistant .md > .dr-tbl {
  margin-top: var(--dr-gap, 16px);
  margin-bottom: var(--dr-gap, 16px);
}
.dr-tbl > table {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.dr-tbl-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  margin-bottom: 8px;
}
.dr-tbl-q {
  -webkit-appearance: none;
  appearance: none;
  height: 32px;
  width: 220px;
  max-width: 55%;
  padding: 0 11px 0 31px;
  border-radius: var(--drx-r-sm);
  font: inherit;
  font-size: 12.5px;
  color: var(--dr-text, #e8ecf6);
  background-color: var(--dr-surface, #151d33);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238a94ad' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='4.6'/%3E%3Cpath d='M10.6 10.6 14 14'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 10px 50%;
  background-size: 14px;
  border: 1px solid var(--dr-border, #24304d);
  transition:
    border-color var(--drx-fast),
    box-shadow var(--drx-fast);
}
.dr-tbl-q::placeholder {
  color: var(--dr-faint, #6f7a96);
  opacity: 1;
}
.dr-tbl-q:hover {
  border-color: color-mix(
    in srgb,
    var(--dr-accent, #6d8dff) 35%,
    var(--dr-border, #24304d)
  );
}
.dr-tbl-q:focus,
.dr-tbl-q:focus-visible {
  outline: none;
  border-color: var(--dr-accent, #6d8dff);
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--dr-accent, #6d8dff) 24%, transparent);
}
.dr-tbl-n {
  font-size: 12px;
  color: var(--dr-dim, #9aa6c2);
  font-variant-numeric: tabular-nums;
}

/* tools are half-visible at rest so people know they exist; full strength on hover / focus */
.dr-tbl-tools {
  margin-left: auto;
  display: flex;
  gap: 6px;
  opacity: 0.5;
  transition: opacity var(--drx-fast);
}
.dr-tbl:hover .dr-tbl-tools,
.dr-tbl:focus-within .dr-tbl-tools {
  opacity: 1;
}

/* sorting: a faint up/down hint on hover says "this column sorts"; the active column shows its direction */
.dr-tbl th[data-dr-sort] {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: color var(--drx-fast);
}
.dr-tbl th[data-dr-sort]::after {
  content: "\2195";
  display: inline-block;
  margin-left: 0.4em;
  font-size: 0.82em;
  font-weight: 600;
  color: var(--dr-faint, #6f7a96);
  opacity: 0;
  transition: opacity var(--drx-fast);
}
.dr-tbl th[data-dr-sort]:hover {
  color: var(--dr-text, #e8ecf6);
}
.dr-tbl th[data-dr-sort]:hover::after,
.dr-tbl th[data-dr-sort]:focus-visible::after {
  opacity: 1;
}
.dr-tbl th[data-dr-sort]:focus-visible {
  outline: var(--drx-focus);
  outline-offset: -2px;
  border-radius: 4px;
}
.dr-tbl th[aria-sort="ascending"],
.dr-tbl th[aria-sort="descending"] {
  color: var(--dr-text, #e8ecf6);
}
.dr-tbl th[aria-sort="ascending"]::after {
  content: "\2191";
  opacity: 1;
  color: var(--dr-accent, #6d8dff);
}
.dr-tbl th[aria-sort="descending"]::after {
  content: "\2193";
  opacity: 1;
  color: var(--dr-accent, #6d8dff);
}

/* rows: a soft hover band helps the eye follow a row across wide tables */
.dr-tbl tbody tr > td {
  transition: background-color var(--drx-fast);
}
.dr-tbl tbody tr:hover > td {
  background-color: color-mix(
    in srgb,
    var(--dr-accent, #6d8dff) 6%,
    transparent
  );
}

.dr-tbl tr[hidden],
.dr-tbl tr.dr-tbl-more {
  display: none;
}
.dr-tool-more {
  opacity: 1;
  color: var(--dr-accent, #6d8dff);
  border-color: color-mix(in srgb, var(--dr-accent, #6d8dff) 45%, transparent);
  background: color-mix(in srgb, var(--dr-accent, #6d8dff) 8%, transparent);
}
.dr-tool-more:hover {
  color: var(--dr-text, #e8ecf6);
}
.dr-print .dr-tbl tr.dr-tbl-more {
  display: table-row;
}

/* =====================================================================================================================
   3. Chart | Table switch: a segmented control, right-aligned
   ===================================================================================================================== */
.msg.assistant .md > .dr-view {
  margin-top: var(--dr-gap, 16px);
  margin-bottom: var(--dr-gap, 16px);
}
.dr-view-bar {
  display: flex;
  gap: 2px;
  width: fit-content;
  margin: 0 0 8px auto;
  padding: 3px;
  border-radius: calc(var(--drx-r-sm) + 3px);
  background: var(--dr-surface, #151d33);
  border: 1px solid var(--dr-border, #24304d);
}
.dr-view-bar .dr-tool {
  min-height: 26px;
  border-color: transparent;
  background: transparent;
}
.dr-view-bar .dr-tool:hover {
  border-color: transparent;
  background: color-mix(in srgb, var(--dr-text, #e8ecf6) 6%, transparent);
}
.dr-view-bar .dr-tool[aria-pressed="true"] {
  color: var(--dr-text, #e8ecf6);
  border-color: transparent;
  background: color-mix(
    in srgb,
    var(--dr-accent, #6d8dff) 18%,
    var(--dr-surface-2, #1b2440)
  );
  box-shadow:
    var(--drx-hi),
    0 1px 2px rgba(0, 0, 0, 0.18);
}
.dr-view > [hidden] {
  display: none;
}

/* =====================================================================================================================
   4. chart tools and drill-down
   ===================================================================================================================== */
.dr-chart {
  position: relative;
}
.dr-tools {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  display: flex;
  gap: 6px;
  opacity: 0;
  transition: opacity var(--drx-fast);
}
.dr-chart:hover .dr-tools,
.dr-chart:focus-within .dr-tools {
  opacity: 1;
}
/* the tools sit over the plot, so they get a frosted backing to stay legible over lines and bars */
.dr-tools .dr-tool {
  background: color-mix(in srgb, var(--dr-surface, #151d33) 84%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
[data-dr-drill] {
  cursor: pointer;
  transition: filter var(--drx-fast);
}
[data-dr-drill]:hover {
  filter: brightness(1.14) saturate(1.05);
}
[data-dr-drill]:focus-visible {
  outline: var(--drx-focus);
  outline-offset: 2px;
}
.dr-chart svg .dr-pt {
  stroke: transparent;
  stroke-width: 14px;
}

/* =====================================================================================================================
   5. :::card  (data blocks: elevation 1, lift only when the card does something)
   ===================================================================================================================== */
.dr-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin: var(--dr-gap, 16px) 0;
}
.dr-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--drx-r-lg);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--dr-text, #e8ecf6) 3.5%, transparent),
      transparent 60%
    ),
    var(--dr-surface, #151d33);
  border: 1px solid var(--dr-border, #24304d);
  box-shadow: var(--drx-shadow-1);
  transition:
    border-color var(--drx-med) var(--drx-ease),
    box-shadow var(--drx-med) var(--drx-ease),
    transform var(--drx-med) var(--drx-ease);
}
.dr-card:has(.dr-card-actions, a[href], [data-dr-drill]):hover {
  transform: translateY(-2px);
  border-color: color-mix(
    in srgb,
    var(--dr-accent, #6d8dff) 40%,
    var(--dr-border, #24304d)
  );
  box-shadow: var(--drx-shadow-2);
}
.dr-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 16px 14px;
  flex: 1;
}
.dr-card-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 9px;
}
.dr-card-title {
  font-weight: 700;
  font-size: 1.02em;
  line-height: 1.3;
  letter-spacing: -0.008em;
  color: var(--dr-text, #e8ecf6);
  overflow-wrap: anywhere;
}
.dr-card-sub {
  color: var(--dr-dim, #9aa6c2);
  font-size: 0.9em;
  line-height: 1.4;
}
.dr-card-value {
  margin-top: 4px;
  font-size: 1.75em;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--dr-text, #e8ecf6);
  font-variant-numeric: tabular-nums;
}
.dr-card-value span {
  font-size: 0.46em;
  font-weight: 500;
  color: var(--dr-dim, #9aa6c2);
  margin-left: 8px;
  letter-spacing: 0;
  vertical-align: 0.15em;
}
.dr-card-meta {
  color: var(--dr-dim, #9aa6c2);
  font-size: 0.86em;
  line-height: 1.5;
}
.dr-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid
    color-mix(in srgb, var(--dr-border, #24304d) 70%, transparent);
}
.dr-card-actions .dr-chip {
  font-size: 0.82em;
  padding: 5px 12px;
  min-height: var(--drx-tap);
}
.dr-card-av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--dr-text, #e8ecf6);
  background: linear-gradient(
    140deg,
    color-mix(in srgb, var(--dr-accent, #6d8dff) 34%, transparent),
    color-mix(in srgb, var(--dr-accent-2, #b8a6ff) 22%, transparent)
  );
  box-shadow: inset 0 0 0 1px
    color-mix(in srgb, var(--dr-accent, #6d8dff) 30%, transparent);
}
.dr-card-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--drx-r-sm);
  color: var(--dr-accent, #6d8dff);
  background: color-mix(in srgb, var(--dr-accent, #6d8dff) 12%, transparent);
}
.dr-card-ic .dr-ic {
  width: 17px;
  height: 17px;
}
.dr-card-img {
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.94);
  box-shadow: inset 0 -48px 40px -36px rgba(0, 0, 0, 0.28); /* a soft floor so the image meets the body cleanly */
}
.dr-card-img-gen .dr-ic {
  width: 34px;
  height: 34px;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

/* loading: a slow sheen tells people content is on its way (static under reduced motion) */
.dr-cards.dr-shimmer .dr-card {
  min-height: 96px;
  background:
    linear-gradient(
        100deg,
        transparent 30%,
        color-mix(in srgb, var(--dr-text, #e8ecf6) 6%, transparent) 50%,
        transparent 70%
      )
      0 0 / 220% 100%,
    var(--dr-surface, #151d33);
  animation: dr-sheen 1.6s linear infinite;
}
@keyframes dr-sheen {
  from {
    background-position:
      120% 0,
      0 0;
  }
  to {
    background-position:
      -100% 0,
      0 0;
  }
}

/* =====================================================================================================================
   6. :::diagram, :::map
   ===================================================================================================================== */
.dr-diagram svg {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}
.dr-dg-edge {
  fill: none;
  stroke: var(--dr-faint, #6f7a96);
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.7;
}
.dr-dg-arrow {
  fill: var(--dr-faint, #6f7a96);
}
.dr-dg-node {
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.18));
}
.dr-dg-node rect,
.dr-dg-node polygon {
  fill: var(--dr-surface, #151d33);
  stroke: var(--dr-border, #24304d);
  stroke-width: 1.4;
  transition: stroke var(--drx-fast);
}
.dr-dg-node[data-dr-drill]:hover {
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.18)) brightness(1.1);
}
.dr-dg-node[data-dr-drill]:hover rect,
.dr-dg-node[data-dr-drill]:hover polygon {
  stroke: var(--dr-accent, #6d8dff);
}
.dr-chart svg text.dr-dg-label,
.msg.assistant .md .dr-chart svg text.dr-dg-label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  fill: var(--dr-text, #e8ecf6);
}
.dr-chart svg text.dr-dg-sub,
.msg.assistant .md .dr-chart svg text.dr-dg-sub {
  font-size: 11px;
  fill: var(--dr-dim, #9aa6c2);
  font-variant-numeric: tabular-nums;
}
.dr-chart svg text.dr-dg-elabel,
.msg.assistant .md .dr-chart svg text.dr-dg-elabel {
  font-size: 10.5px;
  font-weight: 500;
  fill: var(--dr-dim, #9aa6c2);
}
.dr-dg-node.dr-t-good rect,
.dr-dg-node.dr-t-good polygon {
  stroke: var(--dr-good, #4ccf9a);
  fill: color-mix(
    in srgb,
    var(--dr-good, #4ccf9a) 12%,
    var(--dr-surface, #151d33)
  );
}
.dr-dg-node.dr-t-warn rect,
.dr-dg-node.dr-t-warn polygon {
  stroke: var(--dr-warn, #f2c25c);
  fill: color-mix(
    in srgb,
    var(--dr-warn, #f2c25c) 12%,
    var(--dr-surface, #151d33)
  );
}
.dr-dg-node.dr-t-bad rect,
.dr-dg-node.dr-t-bad polygon {
  stroke: var(--dr-bad, #ff6b7d);
  fill: color-mix(
    in srgb,
    var(--dr-bad, #ff6b7d) 12%,
    var(--dr-surface, #151d33)
  );
}
.dr-dg-node.dr-t-info rect,
.dr-dg-node.dr-t-info polygon {
  stroke: var(--dr-info, #5fb3f0);
  fill: color-mix(
    in srgb,
    var(--dr-info, #5fb3f0) 12%,
    var(--dr-surface, #151d33)
  );
}

.dr-map-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}
.dr-map-wrap svg {
  flex: 1 1 280px;
  min-width: 240px;
  max-width: 440px;
  height: auto;
}
.dr-map-blob {
  fill: color-mix(
    in srgb,
    var(--dr-accent, #6d8dff) 9%,
    var(--dr-surface-2, #1b2440)
  );
  stroke: var(--dr-border, #24304d);
  stroke-width: 1;
  stroke-linejoin: round;
}
.dr-map-dot {
  fill: color-mix(in srgb, var(--dr-accent, #6d8dff) 65%, transparent);
  stroke: var(--dr-accent, #6d8dff);
  stroke-width: 1.2;
  cursor: default;
  transition: fill var(--drx-fast);
}
.dr-map-dot:hover {
  fill: var(--dr-accent, #6d8dff);
}
.dr-map-dot.dr-map-top {
  fill: var(--dr-accent, #6d8dff);
  stroke: color-mix(in srgb, var(--dr-text, #e8ecf6) 70%, transparent);
}
.dr-map-dot:focus-visible {
  outline: 2px solid var(--dr-text, #e8ecf6);
  outline-offset: 2px;
}
.dr-chart svg text.dr-map-t,
.msg.assistant .md .dr-chart svg text.dr-map-t {
  font-size: 10px;
  font-weight: 700;
  fill: var(--dr-bg, #0f1526);
  pointer-events: none;
}
.dr-map-list {
  flex: 0 1 200px;
  min-width: 160px;
  font-size: 0.9em;
}
.dr-map-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 6px 8px;
  margin: 0 -8px;
  border-radius: var(--drx-r-xs);
  border-bottom: 1px solid
    color-mix(in srgb, var(--dr-border, #24304d) 55%, transparent);
  transition: background-color var(--drx-fast);
}
.dr-map-row:last-child {
  border-bottom: 0;
}
.dr-map-row:hover {
  background: color-mix(in srgb, var(--dr-accent, #6d8dff) 7%, transparent);
}
.dr-map-row b {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--dr-text, #e8ecf6);
}
.dr-map-unit,
.dr-map-note {
  color: var(--dr-dim, #9aa6c2);
  font-size: 0.8em;
  line-height: 1.45;
  margin-top: 8px;
}

/* [pres-map-geo-v1] a real map: dotted land, each bubble on its place, the rank ties it to the list */
.dr-map-land {
  fill: none;
  stroke: color-mix(in srgb, var(--dr-text, #e8ecf6) 17%, transparent);
  stroke-linecap: round;
  pointer-events: none;
}
.dr-map-pin {
  fill: var(--dr-text, #e8ecf6);
  opacity: 0.6;
  pointer-events: none;
}
/* light: a pale card needs darker land (slate with a touch of the accent) and deeper bubbles to read */
:root[data-theme="light"] .dr-map-land {
  stroke: color-mix(in srgb, color-mix(in srgb, var(--dr-accent, #3456e0) 35%, var(--dr-text, #172036)) 62%, transparent);
}
:root[data-theme="light"] .dr-map-inset {
  fill: #ffffff;
  stroke: color-mix(in srgb, var(--dr-text, #172036) 45%, transparent);
}
:root[data-theme="light"] :is(.dr-map-world, .dr-map-india, .dr-map-usa) .dr-map-dot {
  fill: color-mix(in srgb, var(--dr-accent, #3456e0) 90%, var(--dr-surface, #f5f7fc));
  stroke: var(--dr-surface, #f5f7fc);
  stroke-width: 1.6;
}
:root[data-theme="light"] :is(.dr-map-world, .dr-map-india, .dr-map-usa) .dr-map-dot.dr-map-top {
  fill: color-mix(in srgb, var(--dr-accent, #3456e0) 80%, var(--dr-text, #172036));
}
.dr-map-world .dr-map-dot,
.dr-map-india .dr-map-dot,
.dr-map-usa .dr-map-dot {
  fill: color-mix(in srgb, var(--dr-accent, #6d8dff) 78%, var(--dr-surface, #151d33));
  stroke: var(--dr-surface, #151d33);
  stroke-width: 1.4;
}
.dr-map-world .dr-map-dot.dr-map-top,
.dr-map-india .dr-map-dot.dr-map-top,
.dr-map-usa .dr-map-dot.dr-map-top {
  fill: var(--dr-accent, #6d8dff);
}
.dr-map .dr-map-dot.dr-map-on {
  fill: var(--dr-accent, #6d8dff);
  stroke: var(--dr-text, #e8ecf6);
  stroke-width: 2;
}
.dr-map-world .dr-map-wrap {
  display: block;
}
.dr-map-world .dr-map-wrap svg {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: none;
}
.dr-map-world .dr-map-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  column-gap: 28px;
  margin-top: 12px;
}
.dr-map-world .dr-map-unit {
  grid-column: 1 / -1;
}
.dr-map-india .dr-map-wrap svg {
  flex: 1 1 260px;
  max-width: 340px;
}
.dr-map-india .dr-map-list {
  flex: 1 1 220px;
}
.dr-map-row span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dr-map-row i {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  font-style: normal;
  font-size: 0.78em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--dr-text, #e8ecf6);
  background: color-mix(in srgb, var(--dr-accent, #6d8dff) 18%, transparent);
}
/* [pres-map-pins-v1] places with no figure: the pin's number, the name, and what the list says about it */
.dr-map-pinrow span {
  white-space: normal;
}
.dr-map-pinrow small {
  display: block;
  margin-top: 2px;
  color: var(--dr-dim, #9aa6c2);
  font-size: 0.86em;
  line-height: 1.4;
}
.dr-map-pins .dr-map-list {
  flex: 1 1 300px;
}
.dr-map-row.dr-map-on {
  background: color-mix(in srgb, var(--dr-accent, #6d8dff) 12%, transparent);
}

/* [pres-map-grouped-v1] the USA map beside its list; a switch between the figures of a grouped map */
.dr-map-inset {
  fill: var(--dr-surface, #151d33);
  stroke: color-mix(in srgb, var(--dr-text, #e8ecf6) 28%, transparent);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}
.dr-chart svg text.dr-map-inset-t,
.msg.assistant .md .dr-chart svg text.dr-map-inset-t {
  font-size: 8px;
  font-weight: 700;
  fill: var(--dr-dim, #9aa6c2);
  pointer-events: none;
}
.dr-map-usa .dr-map-wrap svg {
  flex: 1 1 300px;
  max-width: 460px;
}
.dr-map-usa .dr-map-list {
  flex: 1 1 220px;
}
.dr-map-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  width: fit-content;
  margin: 0 0 12px;
  padding: 3px;
  border-radius: calc(var(--drx-r-sm) + 3px);
  background: var(--dr-surface, #151d33);
  border: 1px solid var(--dr-border, #24304d);
}
.dr-map-switch button {
  min-height: 26px;
  padding: 3px 12px;
  border: 0;
  border-radius: var(--drx-r-sm);
  background: transparent;
  color: var(--dr-dim, #9aa6c2);
  font: inherit;
  font-size: 0.85em;
  font-weight: 600;
  cursor: pointer;
}
.dr-map-switch button:hover {
  background: color-mix(in srgb, var(--dr-text, #e8ecf6) 6%, transparent);
}
.dr-map-switch button.dr-on {
  color: var(--dr-text, #e8ecf6);
  background: color-mix(in srgb, var(--dr-accent, #6d8dff) 18%, var(--dr-surface-2, #1b2440));
  box-shadow: var(--drx-hi), 0 1px 2px rgba(0, 0, 0, 0.18);
}
.dr-map-switch button:focus-visible {
  outline: 2px solid var(--dr-accent, #6d8dff);
  outline-offset: 1px;
}
.dr-map-pane[hidden] {
  display: none;
}

/* =====================================================================================================================
   7. :::mockup  (a dotted "stage" so the device reads as a presented object)
      Platform colours inside the mockup imitate the real apps on purpose and stay hard-coded.
   ===================================================================================================================== */
.dr-mockup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin: var(--dr-gap, 16px) 0;
  padding: 24px;
  border-radius: var(--drx-r-lg);
  background:
    radial-gradient(
        color-mix(in srgb, var(--dr-text, #e8ecf6) 8%, transparent) 1px,
        transparent 1.2px
      )
      0 0 / 16px 16px,
    radial-gradient(
      120% 90% at 30% 20%,
      color-mix(in srgb, var(--dr-accent, #6d8dff) 7%, transparent),
      transparent 70%
    ),
    var(--dr-surface, #151d33);
  border: 1px solid var(--dr-border, #24304d);
  box-shadow: var(--drx-shadow-1);
}
.dr-mk-phone {
  width: 236px;
  padding: 7px;
  border-radius: 34px;
  background: linear-gradient(160deg, #2a2826, #0f0e0d 40%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 2px 4px rgba(0, 0, 0, 0.3),
    0 24px 48px -18px rgba(0, 0, 0, 0.6);
}
.dr-mk-phone > * {
  border-radius: 27px;
  overflow: hidden;
}
.dr-mk-plain {
  width: min(100%, 370px);
}
.dr-mk-feed,
.dr-mk-li,
.dr-mk-g,
.dr-mk-yt {
  background: #fff;
  color: #1d1b19;
  font-size: 12.5px;
  line-height: 1.4;
}
.dr-mk-plain > * {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.12),
    0 16px 34px -18px rgba(0, 0, 0, 0.45);
}
.dr-mk-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
}
.dr-mk-head b {
  display: block;
  font-size: 12.5px;
}
.dr-mk-head em,
.dr-mk-story-h em {
  font-style: normal;
  font-size: 11px;
  color: #7a746c;
}
.dr-mk-av {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: #b4492b;
}
.dr-mk-art {
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  color: #2a1b14;
}
.dr-mk-art b {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  line-height: 1.15;
  text-wrap: balance;
}
.dr-mk-art i {
  font-style: normal;
  font-size: 12.5px;
  margin-top: 6px;
  opacity: 0.95;
}
.dr-mk-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  background: #f4f2ef;
  font-size: 11.5px;
}
.dr-mk-foot span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dr-mk-foot button {
  flex: none;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: #fff;
  background: #2563eb;
  border: 0;
  border-radius: 6px;
  padding: 5px 11px;
}
.dr-mk-li-d {
  padding: 0 12px 10px;
}
.dr-mk-g {
  padding: 14px 16px;
}
.dr-mk-g-url {
  font-size: 11.5px;
  color: #4d5156;
}
.dr-mk-g-url u {
  text-decoration: none;
  font-weight: 700;
  color: #1d1b19;
}
.dr-mk-g-t {
  font-size: 17px;
  color: #1a0dab;
  margin: 3px 0;
}
.dr-mk-g-d {
  color: #4d5156;
  line-height: 1.45;
}
.dr-mk-yt {
  padding: 0 0 10px;
}
.dr-mk-yt-th {
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.dr-mk-yt-th span {
  width: 46px;
  height: 32px;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.55);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dr-mk-yt-th .dr-ic {
  width: 18px;
  height: 18px;
}
.dr-mk-yt-t {
  font-weight: 600;
  padding: 9px 12px 2px;
}
.dr-mk-yt-m {
  padding: 0 12px;
  color: #606060;
  font-size: 11.5px;
}
.dr-mk-instagram_story {
  width: 194px;
}
.dr-mk-story {
  aspect-ratio: 9 / 16;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-size: cover;
  background-position: center;
  color: #2a1b14;
  padding: 12px;
}
.dr-mk-story-img {
  color: #fff;
}
.dr-mk-story-h {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 600;
}
.dr-mk-story-h em {
  color: inherit;
  opacity: 0.85;
}
.dr-mk-story-c {
  text-align: center;
}
.dr-mk-story-c b {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  line-height: 1.15;
  text-wrap: balance;
}
.dr-mk-story-c i {
  font-style: normal;
  font-size: 12px;
  opacity: 0.95;
}
.dr-mk-story-cta {
  align-self: center;
  font-size: 11.5px;
  font-weight: 700;
  padding: 7px 16px;
  border-radius: 999px;
  background: #fff;
  color: #1d1b19;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

/* metric tiles beside the mockup and the widget's outputs share one tile style */
.dr-mk-metrics {
  flex: 1 1 200px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 190px;
  max-width: 330px;
}
.dr-mk-m,
.dr-wid-out {
  border-radius: var(--drx-r-md);
  padding: 11px 13px;
  background: var(--dr-surface-2, #1b2440);
  border: 1px solid var(--dr-border, #24304d);
  box-shadow: var(--drx-hi);
}
.dr-mk-m b,
.dr-wid-out b {
  display: block;
  font-size: 1.36em;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--dr-text, #e8ecf6);
}
.dr-mk-m span,
.dr-wid-out span {
  display: block;
  margin-top: 3px;
  font-size: 0.84em;
  line-height: 1.35;
  color: var(--dr-dim, #9aa6c2);
}

/* =====================================================================================================================
   8. :::widget
   ===================================================================================================================== */
.dr-widget {
  margin: var(--dr-gap, 16px) 0;
  padding: 18px 20px;
  border-radius: var(--drx-r-lg);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--dr-text, #e8ecf6) 3%, transparent),
      transparent 50%
    ),
    var(--dr-surface, #151d33);
  border: 1px solid var(--dr-border, #24304d);
  box-shadow: var(--drx-shadow-1);
}
.dr-widget .dr-chart-title {
  margin-bottom: 12px;
}
.dr-wid-row {
  margin: 8px 0 16px;
}
.dr-wid-row label {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 6px 12px;
  color: var(--dr-dim, #9aa6c2);
  font-size: 0.9em;
}
.dr-wid-row label > :nth-child(2):not(input) {
  color: var(--dr-text, #e8ecf6);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.dr-wid-row input[type="range"] {
  grid-column: 1 / -1;
  width: 100%;
  height: 24px;
  margin: 0;
  accent-color: var(--dr-accent, #6d8dff);
  cursor: pointer;
}
.dr-wid-outs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}
/* the first output is the answer to the widget's question: it gets the accent */
.dr-wid-outs > .dr-wid-out:first-child {
  border-color: color-mix(
    in srgb,
    var(--dr-accent, #6d8dff) 45%,
    var(--dr-border, #24304d)
  );
  background: color-mix(
    in srgb,
    var(--dr-accent, #6d8dff) 10%,
    var(--dr-surface-2, #1b2440)
  );
}

/* =====================================================================================================================
   9. :::sources, citation chips, :::quote, :::define  (reading blocks: flat, elevation 0)
   ===================================================================================================================== */
.dr-sources {
  list-style: none;
  margin: var(--dr-gap, 16px) 0;
  padding: 0;
  display: grid;
  gap: 8px;
  counter-reset: none;
}
.msg.assistant .md ol.dr-sources {
  max-width: none;
}
.dr-src {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--drx-r-md);
  background: var(--dr-surface, #151d33);
  border: 1px solid var(--dr-border, #24304d);
  transition:
    border-color var(--drx-med) var(--drx-ease),
    box-shadow var(--drx-med) var(--drx-ease),
    background-color var(--drx-med);
}
.dr-src:has(a.dr-src-t:hover) {
  border-color: color-mix(
    in srgb,
    var(--dr-accent, #6d8dff) 40%,
    var(--dr-border, #24304d)
  );
  background: color-mix(
    in srgb,
    var(--dr-accent, #6d8dff) 4%,
    var(--dr-surface, #151d33)
  );
}
.dr-src-n {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: var(--drx-r-xs);
  margin-top: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--dr-text, #e8ecf6);
  background: color-mix(in srgb, var(--dr-accent, #6d8dff) 20%, transparent);
  box-shadow: inset 0 0 0 1px
    color-mix(in srgb, var(--dr-accent, #6d8dff) 30%, transparent);
}
.dr-src-b {
  min-width: 0;
}
.dr-src-t {
  font-weight: 600;
  line-height: 1.35;
  color: var(--dr-text, #e8ecf6);
  overflow-wrap: anywhere;
  text-decoration: none;
}
a.dr-src-t:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  color: var(--dr-accent, #6d8dff);
}
a.dr-src-t:focus-visible {
  outline: var(--drx-focus);
  outline-offset: 2px;
  border-radius: 3px;
}
.dr-src-m {
  color: var(--dr-dim, #9aa6c2);   /* [prs1b-src-contrast-v1] --dr-faint read 3.9:1 dark / 2.9:1 light (WCAG AA needs 4.5) */
  font-size: 0.82em;
  margin-top: 2px;
}
.dr-src-s {
  color: var(--dr-dim, #9aa6c2);
  font-size: 0.9em;
  line-height: 1.55;
  margin-top: 5px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dr-src-flash {
  border-color: var(--dr-accent, #6d8dff);
  box-shadow: 0 0 0 4px
    color-mix(in srgb, var(--dr-accent, #6d8dff) 20%, transparent);
}

/* [pres-source-pills-v1] the answer's sources at its foot: one row of site pills (title on hover), not a card list */
.dr-src-pills {
  margin: calc(var(--dr-gap, 16px) + 4px) 0 var(--dr-gap, 16px);
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--dr-border, #24304d) 70%, transparent);
}
.dr-src-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 0.74em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dr-dim, #9aa6c2);
}
.dr-src-head span {
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.dr-src-head span::before {
  content: "\00b7";
  margin-right: 8px;
}
.msg.assistant .md ul.dr-src-row,
.dr-src-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: none;
}
.msg.assistant .md .dr-src-row > li.dr-src-pill,
.dr-src-pill {
  display: inline-flex;
  margin: 0;
  padding: 0;
  gap: 0;
  border-radius: 999px;
  background: var(--dr-surface, #151d33);
  border: 1px solid var(--dr-border, #24304d);
}
.msg.assistant .md .dr-src-row > li.dr-src-pill::before {
  content: none;
  display: none;
}
.dr-src-pill > a.dr-src-a,
.dr-src-pill > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 11px 3px 4px;
  border-radius: 999px;
  color: var(--dr-text, #e8ecf6);
  text-decoration: none;
  font-size: 0.84em;
  line-height: 1.4;
}
.dr-src-pill .dr-src-n {
  width: 19px;
  height: 19px;
  margin: 0;
  border-radius: 999px;
  font-size: 10.5px;
}
.dr-src-d {
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dr-src-pill:hover {
  border-color: color-mix(in srgb, var(--dr-accent, #6d8dff) 45%, var(--dr-border, #24304d));
  background: color-mix(in srgb, var(--dr-accent, #6d8dff) 7%, var(--dr-surface, #151d33));
}
.dr-src-pill > a.dr-src-a:hover .dr-src-d {
  color: var(--dr-accent, #6d8dff);
}
.dr-src-pill > a.dr-src-a:focus-visible {
  outline: var(--drx-focus);
  outline-offset: 2px;
}
.dr-src-pill.dr-src-flash {
  border-color: var(--dr-accent, #6d8dff);
}

.dr-cite {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin: 0 1px;
  border-radius: var(--drx-r-pill);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  vertical-align: 2px;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  color: var(--dr-text, #e8ecf6);
  background: color-mix(in srgb, var(--dr-accent, #6d8dff) 20%, transparent);
  box-shadow: inset 0 0 0 1px
    color-mix(in srgb, var(--dr-accent, #6d8dff) 28%, transparent);
  transition:
    background-color var(--drx-fast),
    color var(--drx-fast);
}
a.dr-cite,
.msg.assistant .md a.dr-cite {
  color: var(--dr-text, #e8ecf6);
  text-decoration: none;
}
.dr-cite:hover,
.msg.assistant .md a.dr-cite:hover {
  background: var(--dr-accent, #6d8dff);
  color: var(--dr-bg, #0f1526);
}

.dr-quote {
  position: relative;
  margin: var(--dr-gap, 16px) 0;
  padding: 16px 20px 15px 22px;
  border-radius: var(--drx-r-md);
  background: var(--dr-surface, #151d33);
  border: 1px solid var(--dr-border, #24304d);
  border-left: 3px solid var(--dr-accent, #6d8dff);
  overflow: hidden;
}
.dr-quote::after {
  /* a large, quiet quotation mark in the corner */
  content: "\201D";
  position: absolute;
  top: -14px;
  right: 14px;
  pointer-events: none;
  font:
    700 84px/1 Georgia,
    "Times New Roman",
    serif;
  color: color-mix(in srgb, var(--dr-accent, #6d8dff) 16%, transparent);
}
.dr-quote blockquote {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 1.06em;
  line-height: 1.62;
  font-style: italic;
  letter-spacing: -0.003em;
  text-wrap: pretty;
  color: var(--dr-text, #e8ecf6);
}
.dr-quote figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-top: 10px;
  font-size: 0.84em;
  color: var(--dr-dim, #9aa6c2);
}
.dr-quote figcaption em {
  font-style: normal;
  font-weight: 700;
  color: var(--dr-good-ink, #8ee6c0);
}

.dr-define {
  margin: var(--dr-gap, 16px) 0;
  padding: 15px 18px;
  border-radius: var(--drx-r-md);
  background: var(--dr-surface, #151d33);
  border: 1px solid var(--dr-border, #24304d);
}
.dr-def-term {
  font-weight: 700;
  font-size: 1.06em;
  letter-spacing: -0.01em;
  color: var(--dr-text, #e8ecf6);
}
.dr-def-body {
  margin-top: 5px;
  line-height: 1.62;
  color: var(--dr-dim, #9aa6c2);
  text-wrap: pretty;
}
.dr-def-formula {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 11px;
  border-radius: var(--drx-r-sm);
  font-family: var(
    --font-mono,
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace
  );
  font-size: 0.9em;
  color: var(--dr-text, #e8ecf6);
  background: var(--dr-surface-2, #1b2440);
  border: 1px solid
    color-mix(in srgb, var(--dr-border, #24304d) 80%, transparent);
}

/* =====================================================================================================================
   10. :::labels, :::notice, :::state
   ===================================================================================================================== */
.dr-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}
.msg.assistant .md > :where(.dr-labels, .dr-notice, .dr-state) {
  margin-top: 10px;
  margin-bottom: 10px;
}
.dr-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: var(--drx-r-pill);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--dr-dim, #9aa6c2);
  background: var(--dr-surface, #151d33);
  border: 1px solid var(--dr-border, #24304d);
}
.dr-label-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dr-faint, #6f7a96);
  flex: none;
}
/* every tone is tinted the same way, so they read as one family */
.dr-label-info {
  color: var(--dr-info-ink, #a9d4f7);
  border-color: color-mix(in srgb, var(--dr-info, #5fb3f0) 38%, transparent);
  background: color-mix(in srgb, var(--dr-info, #5fb3f0) 10%, transparent);
}
.dr-label-info .dr-label-dot {
  background: var(--dr-info, #5fb3f0);
}
.dr-label-warn {
  color: var(--dr-warn-ink, #f7d88f);
  border-color: color-mix(in srgb, var(--dr-warn, #f2c25c) 42%, transparent);
  background: color-mix(in srgb, var(--dr-warn, #f2c25c) 11%, transparent);
}
.dr-label-warn .dr-label-dot {
  background: var(--dr-warn, #f2c25c);
}
.dr-label-bad {
  color: var(--dr-bad-ink, #ffa3ae);
  border-color: color-mix(in srgb, var(--dr-bad, #ff6b7d) 38%, transparent);
  background: color-mix(in srgb, var(--dr-bad, #ff6b7d) 10%, transparent);
}
.dr-label-bad .dr-label-dot {
  background: var(--dr-bad, #ff6b7d);
}
.dr-label-good {
  color: var(--dr-good-ink, #8ee6c0);
  border-color: color-mix(in srgb, var(--dr-good, #4ccf9a) 38%, transparent);
  background: color-mix(in srgb, var(--dr-good, #4ccf9a) 10%, transparent);
}
.dr-label-good .dr-label-dot {
  background: var(--dr-good, #4ccf9a);
}

.dr-notice {
  font-size: 0.88em;
  line-height: 1.55;
  color: var(--dr-dim, #9aa6c2);
  padding: 8px 12px 8px 14px;
  border-radius: 0 var(--drx-r-sm) var(--drx-r-sm) 0;
  border-left: 3px solid
    color-mix(in srgb, var(--dr-warn, #f2c25c) 70%, transparent);
  background: color-mix(in srgb, var(--dr-warn, #f2c25c) 5%, transparent);
}
.dr-notice summary {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  cursor: pointer;
  color: var(--dr-warn-ink, #f7d88f);
  font-weight: 600;
}
.dr-notice summary::-webkit-details-marker {
  display: none;
}
.dr-notice summary::before {
  /* chevron that turns when the notice opens */
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-left: 1px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--drx-med) var(--drx-ease);
}
.dr-notice[open] summary::before {
  transform: rotate(45deg) translate(-1px, -1px);
}
.dr-notice summary:focus-visible {
  outline: var(--drx-focus);
  outline-offset: 2px;
  border-radius: 3px;
}
.dr-notice summary b {
  font-weight: 700;
  margin-left: 2px;
}
.dr-notice ul {
  margin: 8px 0 2px;
  padding-left: 20px;
}
.dr-notice li + li {
  margin-top: 3px;
}

.dr-state {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: var(--dr-gap, 16px) 0;
  padding: 18px 20px;
  border-radius: var(--drx-r-md);
  background: color-mix(in srgb, var(--dr-surface, #151d33) 70%, transparent);
  border: 1px dashed
    color-mix(in srgb, var(--dr-border, #24304d) 75%, var(--dr-faint, #6f7a96));
}
.dr-state-ic {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--dr-dim, #9aa6c2);
  background: var(--dr-surface-2, #1b2440);
  box-shadow: inset 0 0 0 1px var(--dr-border, #24304d);
}
.dr-state-ic .dr-ic {
  width: 19px;
  height: 19px;
}
.dr-state-error {
  border-color: color-mix(in srgb, var(--dr-warn, #f2c25c) 45%, transparent);
}
.dr-state-error .dr-state-ic {
  color: var(--dr-warn-ink, #f7d88f);
  background: color-mix(
    in srgb,
    var(--dr-warn, #f2c25c) 12%,
    var(--dr-surface-2, #1b2440)
  );
}
.dr-state-t {
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--dr-text, #e8ecf6);
}
.dr-state-x {
  color: var(--dr-dim, #9aa6c2);
  margin-top: 3px;
  line-height: 1.5;
}

/* =====================================================================================================================
   11. answer typography  [pres-typography-v2]
   RS 2026-10-23 brief: "make the text design (headings, paragraphs, sub headings) rich and premium, with the brand kit",
   variant B (lime joins the accent) folded in. Answer text only: blocks keep their own styles. Brand kit tokens (--tb-*)
   where they exist, the answer's --dr-* palette as fallback. Same-specificity selectors as renderer.css, later in the
   cascade: these win without !important.
   ===================================================================================================================== */
.msg.assistant .md {
  --dr-ink: color-mix(
    in srgb,
    var(--dr-text) 86%,
    var(--dr-dim)
  ); /* body text: one step softer than headings */
  --dr-accent-2: var(--tb-lilac, #b8a6ff); /* the brand kit's second accent */
  --dr-accent-soft: color-mix(in srgb, var(--dr-accent) 10%, transparent);
  --dr-lime: var(--tb-success, #c6f24e); /* "done" lime: fill everywhere */
  --dr-lime-ink: var(--tb-success-text, #c6f24e); /* lime as text (dark only) */
  --dr-lime-soft: color-mix(in srgb, var(--dr-lime) 30%, transparent);
  --dr-measure: 74ch; /* comfortable line length; set to none to disable */

  font-family: var(
    --font,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI Variable Text",
    "Segoe UI",
    system-ui,
    sans-serif
  );
  font-feature-settings: "kern", "liga", "calt", "cv11";
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
:root[data-theme="light"] .msg.assistant .md {
  --dr-accent-2: #6d48d1;
  --dr-lime-ink: #3f6b06; /* lime is never text on light */
  --dr-lime-soft: color-mix(in srgb, #c6f24e 72%, transparent);
}
.msg.assistant .md ::selection {
  background: color-mix(in srgb, var(--dr-accent) 32%, transparent);
  color: var(--dr-text);
}

/* --- paragraphs and lists: a calm reading column (answer text only, never inside a block) ------------------------- */
.msg.assistant .md :is(.md, .dr-pane, blockquote) > p,
.msg.assistant .md :is(.md, .dr-pane, blockquote) > :is(ul, ol):not([class]) li,
.msg.assistant .md > p,
.msg.assistant .md > :is(ul, ol):not([class]) li {
  color: var(--dr-ink);
  line-height: 1.7;
  text-wrap: pretty;
  hanging-punctuation: first;
}
.msg.assistant
  .md
  :is(.md, .dr-pane)
  > :is(p, ul:not([class]), ol:not([class])),
.msg.assistant .md > :is(p, ul:not([class]), ol:not([class])) {
  max-width: var(--dr-measure);
}

/* the answer's first line is the answer: full strength and a touch larger */
.msg.assistant .md > p:first-child {
  color: var(--dr-text);
  font-size: 1.04em;
  line-height: 1.64;
  letter-spacing: -0.004em;
}
.msg.assistant .md > :is(p, ul, ol, blockquote) strong,
.msg.assistant .md .dr-pane > :is(p, ul, ol) strong {
  color: var(--dr-text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.msg.assistant .md > :is(p, ul, ol, blockquote) em {
  color: var(--dr-text);
}
/* the answer's key figures: lime ink, the UI's lime (dark green on light, where lime text cannot be read), no stroke.
   Same selector as renderer.css's accent rule and later in the cascade, so it wins. [pres-headline-lime-v1] */
.msg.assistant .md > p:first-child strong {
  color: var(--dr-lime-ink);
  background: none;
  padding: 0;
}

/* --- headings ------------------------------------------------------------------------------------------------------ */
.msg.assistant .md :is(h1, h2, h3, h4, h5, h6) {
  scroll-margin-top: 72px;
  break-after: avoid;
  text-wrap: balance;
}

/* H1: the answer's title (rare) */
.msg.assistant .md h1 {
  font-size: 1.62em;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.026em;
  margin: 0.2em 0 0.7em;
  color: var(--dr-text);
}
/* H2: a section. Brand bar (accent into lime) on the left, a hairline that fades out to the right */
.msg.assistant .md h2 {
  position: relative;
  font-size: 1.25em;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.018em;
  margin: 2em 0 0.9em;
  padding: 0 0 0.6em 15px;
  color: var(--dr-text);
  border-bottom: 0;
  background: linear-gradient(
      90deg,
      var(--dr-border),
      color-mix(in srgb, var(--dr-border) 40%, transparent) 70%,
      transparent
    )
    left bottom / 100% 1px no-repeat;
}
.msg.assistant .md h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.16em;
  height: 1.08em;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--dr-accent), var(--dr-lime));
}
.msg.assistant .md > h2:first-child {
  margin-top: 0.15em;
}
/* H3 (and a line that is only bold): a sub-heading led by a lime dot */
.msg.assistant .md :is(h3, p.dr-subhead) {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 1.06em;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.008em;
  margin: 1.55em 0 0.55em;
  color: var(--dr-text);
}
.msg.assistant .md :is(h3, p.dr-subhead)::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transform: translateY(-1px);
  background: var(--dr-lime);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dr-lime) 18%, transparent);
}
:root[data-theme="light"] .msg.assistant .md :is(h3, p.dr-subhead)::before {
  box-shadow:
    0 0 0 1.5px #6e9f1a,
    0 0 0 4px rgba(63, 107, 6, 0.14); /* a darker rim so the dot shows on white */
}
.msg.assistant .md p.dr-subhead strong {
  font-weight: inherit;
  color: inherit;
  background: none;
  padding: 0;
}
/* H4-H6: a small group heading in lime ink. Sentence case (v1 was all caps): easier to read, calmer next to H3 */
.msg.assistant .md :is(h4, h5, h6) {
  font-size: 0.86em;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--dr-lime-ink);
  margin: 1.5em 0 0.45em;
}

/* --- lists (plain lists only: sources, choices and other blocks keep their own) ------------------------------------ */
.msg.assistant .md :is(ul, ol):not([class]) {
  padding-left: 1.4em;
}
.msg.assistant .md :is(ul, ol):not([class]) > li {
  margin: 0.36em 0;
  padding-left: 0.25em;
}
.msg.assistant .md ul:not([class]) > li::marker {
  content: "\25CF  ";
  color: var(--dr-lime-ink);
  font-size: 0.7em;
}
.msg.assistant .md ul:not([class]) ul:not([class]) > li::marker {
  content: "\25CB  ";
  color: var(--dr-faint);
}
.msg.assistant .md ol:not([class]) > li::marker {
  color: var(--dr-accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.msg.assistant .md li > :is(ul, ol) {
  margin: 0.3em 0 0.4em;
}
/* task lists: "- [x] done" */
.msg.assistant .md li:has(> input[type="checkbox"]) {
  list-style: none;
  margin-left: -1.3em;
}
.msg.assistant .md li > input[type="checkbox"] {
  accent-color: var(--dr-lime);
  width: 1em;
  height: 1em;
  margin: 0 0.5em 0 0;
  vertical-align: -0.12em;
}
.msg.assistant .md li:has(> input[type="checkbox"]:checked) {
  color: var(--dr-dim);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--dr-dim) 60%, transparent);
}

/* --- quotes: a quiet tinted card with the brand bar (callouts are .dr-callout and keep theirs) --------------------- */
.msg.assistant .md blockquote:not(.dr-callout):not(.dr-quote *) {
  position: relative;
  margin-left: 0;
  margin-right: 0;
  padding: 13px 18px 13px 20px;
  border-left: 0;
  border-radius: var(--drx-r-md);
  background: var(--dr-accent-soft);
  color: var(--dr-ink);
}
.msg.assistant .md blockquote:not(.dr-callout):not(.dr-quote *)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--dr-lime), var(--dr-accent));
}
.msg.assistant .md blockquote:not(.dr-callout):not(.dr-quote *) > :first-child {
  margin-top: 0;
}
.msg.assistant .md blockquote:not(.dr-callout):not(.dr-quote *) > :last-child {
  margin-bottom: 0;
}

/* --- links: always underlined (colour alone is not enough to spot a link), the underline firms up on hover ----------- */
.msg.assistant .md a:not([class]) {
  color: var(--tb-accent-text, var(--dr-accent));
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  transition:
    text-decoration-color var(--drx-fast),
    color var(--drx-fast);
}
.msg.assistant .md a:not([class]):hover {
  text-decoration-color: currentColor;
}
.msg.assistant .md a:not([class]):focus-visible {
  outline: var(--drx-focus);
  outline-offset: 2px;
  border-radius: 3px;
  text-decoration: none;
}

/* --- inline code, keys, marks, small print ------------------------------------------------------------------------ */
.msg.assistant .md :not(pre) > code {
  font-family: var(
    --font-mono,
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace
  );
  font-size: 0.86em;
  padding: 0.12em 0.42em;
  border-radius: var(--drx-r-xs);
  border: 1px solid var(--dr-border);
  background: var(--dr-code-bg, var(--dr-surface-2));
  color: var(--dr-text);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.msg.assistant .md kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0.08em 0.45em;
  text-align: center;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.8em;
  line-height: 1.5;
  color: var(--dr-text);
  border-radius: var(--drx-r-xs);
  border: 1px solid var(--dr-border);
  border-bottom-width: 2px;
  background: var(--dr-surface, #151d33);
}
.msg.assistant .md mark {
  color: inherit;
  padding: 0 2px;
  border-radius: 2px;
  background: linear-gradient(
    transparent 52%,
    var(--dr-lime-soft) 52%,
    var(--dr-lime-soft) 94%,
    transparent 94%
  );
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.msg.assistant .md :is(sup, sub) {
  line-height: 0;
  font-size: 0.74em;
}
.msg.assistant .md small {
  font-size: 0.86em;
  color: var(--dr-dim);
}
.msg.assistant .md abbr[title] {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: help;
}
.msg.assistant .md :is(.md, .dr-pane) > p > img,
.msg.assistant .md > p > img {
  max-width: 100%;
  height: auto;
  border-radius: var(--drx-r-md);
  border: 1px solid var(--dr-border);
}
.msg.assistant .md hr {
  border: 0;
  height: 1px;
  margin: 2em 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--dr-border) 12%,
    var(--dr-border) 88%,
    transparent
  );
}

/* a rise is "done well": a lime pill (a fall keeps its red) */
.msg.assistant .md .dr-kpi-delta.dr-pos {
  color: var(--dr-lime-ink);
  background: var(--dr-lime-soft);
}
/* [pres-quad-declutter-v1] a dot whose name has no room carries a number; the names are listed under the chart */
.dr-quad svg .dr-quad-n {
  font-size: 10px;
  font-weight: 700;
  fill: #0b1020;
  pointer-events: none;
}
.dr-quad .dr-quad-near {
  margin: 4px 14px 12px;
  font-size: 0.86em;
  line-height: 1.55;
  color: var(--dr-dim);
}
.dr-quad .dr-quad-near b {
  color: var(--dr-text);
  font-weight: 600;
}
/* [pres-sent-images-v1] the images and files a sent message carried, above its bubble */
.msg.user .msg-atts {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 6px;
}
.msg.user .msg-att-img {
  display: block;
  max-width: min(360px, 80%);
  max-height: 300px;
  width: auto;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--border-2);
  background: transparent;
  object-fit: contain;   /* [pres-sent-original-v1] the whole picture, never cropped */
  cursor: zoom-in;
}
.msg.user .msg-att-file {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 260px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--border-2);
  background: var(--user-bub);
  font-size: 0.88em;
}
.msg.user .msg-att-file .nm {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg.user .msg-att-file .sz {
  color: var(--dim);
  flex: none;
}
/* [pres-sent-dialog-v1] the larger view is a dialog: name, a close (x) button, the picture as it was sent */
.msg-att-lb {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.72);
}
.msg-att-dlg {
  display: flex;
  flex-direction: column;
  max-width: 94vw;
  max-height: 94vh;
  background: var(--panel);
  border: 1px solid var(--border-2);
  border-radius: 14px;
  box-shadow: 0 16px 60px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.msg-att-dlg-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 10px 10px 18px;
  border-bottom: 1px solid var(--border);
}
.msg-att-dlg-t {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-weight: 600;
  font-size: 0.92em;
}
.msg-att-x {
  flex: none;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-2);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.msg-att-x:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.msg-att-x:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.msg-att-dlg-b {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 14px;
  overflow: auto;
}
.msg-att-dlg-b img {
  display: block;
  max-width: calc(94vw - 30px);
  max-height: calc(94vh - 90px);
  object-fit: contain;
  border-radius: 6px;
}
/* [pres-chart-gaps-v1] a chart names the categories it has no figure for, under the bars */
.dr-chart .dr-chart-gaps {
  margin: 6px 2px 0;
  font-size: 0.82em;
  line-height: 1.45;
  color: var(--dr-dim);
  font-style: italic;
}
/* [pres-quad-explain-v1] a quadrant matrix says how to read it, and lists its four groups under the chart */
.msg.assistant .md .dr-quad-help {
  margin: 2px 0 10px;
  font-size: 0.88em;
  line-height: 1.5;
  color: var(--dr-dim);
  max-width: none;
}
.msg.assistant .md .dr-quad-help b {
  color: var(--dr-text);
  font-weight: 600;
}
.msg.assistant .md .dr-quad-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.msg.assistant .md .dr-quad-g {
  padding: 10px 12px 11px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--dr-accent) 6%, var(--dr-surface));
  border: 1px solid var(--dr-border);
  break-inside: avoid;
}
.msg.assistant .md .dr-quad-gt {
  font-size: 0.82em;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--dr-text);
  margin-bottom: 6px;
}
.msg.assistant .md .dr-quad-gt span {
  display: inline-block;
  min-width: 1.6em;
  margin-left: 4px;
  padding: 0 6px;
  border-radius: 999px;
  text-align: center;
  font-size: 0.92em;
  color: var(--dr-lime-ink);
  background: var(--dr-lime-soft);
}
.msg.assistant .md .dr-quad-g ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.msg.assistant .md .dr-quad-g li {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 3px 0 0;
  padding: 0;
  font-size: 0.86em;
  line-height: 1.35;
  color: var(--dr-text);
}
.msg.assistant .md .dr-quad-g li::before {
  content: none;
}
.msg.assistant .md .dr-quad-g li i {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.msg.assistant .md .dr-quad-none {
  margin: 0;
  font-size: 0.84em;
  color: var(--dr-faint);
}
@media (max-width: 560px) {
  .msg.assistant .md .dr-quad-groups {
    grid-template-columns: 1fr;
  }
}

/* [pres-kpi-fit-v1] a pill with no direction ("41% of total", "of 23") wears the UI's lime, not grey (RS) */
.msg.assistant .md .dr-kpi-delta:not(.dr-pos):not(.dr-neg) {
  color: var(--dr-lime-ink);
  background: var(--dr-lime-soft);
}
/* [pres-kpi-fit-v1] a value too wide for its card (a name, a figure with words) is set smaller, on up to two lines */
.msg.assistant .md .dr-kpi-value.dr-kpi-long {
  font-size: 1.12em;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  flex: 1 1 100%;
  min-width: 0;
  max-width: 100%;
}

/* =====================================================================================================================
   12. accessibility, touch, small screens
   ===================================================================================================================== */
.dr-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.dr-sr table {
  width: auto;
}
.dr-chip:focus-visible,
.dr-tool:focus-visible,
.dr-wid-row input:focus-visible,
.dr-cite:focus-visible {
  outline: var(--drx-focus);
  outline-offset: 2px;
}

/* touch: no hover, so tools are always visible and every control is a comfortable thumb target */
@media (hover: none) {
  :root {
    --drx-tap: 36px;
  }
  .dr-tbl-tools,
  .dr-tools {
    opacity: 1;
  }
  .dr-tbl-q {
    height: 38px;
    font-size: 16px;
  } /* 16px stops iOS zooming into the field */
  .dr-card:hover {
    transform: none;
  }
}

@media (max-width: 640px) {
  .dr-tbl {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .dr-tbl > table {
    min-width: 520px;
  }
  .dr-tbl :is(td, th):first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--dr-bg, #0f1526);
    box-shadow: 1px 0 0 var(--dr-border, #24304d); /* a hairline shows where the frozen column ends */
  }
  .dr-tbl tbody tr:hover > td:first-child {
    background: color-mix(
      in srgb,
      var(--dr-accent, #6d8dff) 6%,
      var(--dr-bg, #0f1526)
    );
  }
  .dr-tbl-bar {
    flex-wrap: wrap;
  }
  .dr-tbl-q {
    width: 100%;
    max-width: none;
  }
  .dr-cards {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
    gap: 10px;
  }
  .dr-mockup {
    padding: 14px;
    gap: 14px;
  }
  .dr-mk-metrics {
    max-width: none;
  }
  .dr-widget {
    padding: 14px 15px;
  }
  .dr-state {
    align-items: flex-start;
    padding: 14px 15px;
  }
  .dr-quote::after {
    font-size: 64px;
    top: -10px;
  }
  .msg.assistant .md h2 {
    margin-top: 1.7em;
  }
}

/* Windows high contrast: shadows and tints vanish there, so give structure back with real borders */
@media (forced-colors: active) {
  .dr-card,
  .dr-widget,
  .dr-mockup,
  .dr-src,
  .dr-quote,
  .dr-define,
  .dr-state,
  .dr-view-bar,
  .dr-mk-m,
  .dr-wid-out {
    border: 1px solid CanvasText;
  }
  .dr-tbl-q:focus {
    outline: 2px solid Highlight;
  }
  .dr-view-bar .dr-tool[aria-pressed="true"] {
    border: 1px solid Highlight;
  }
  .dr-map-switch {
    border: 1px solid CanvasText;
  }
  .dr-map-switch button.dr-on {
    border: 1px solid Highlight;
  }
  .msg.assistant .md h2::before,
  .msg.assistant .md :is(h3, p.dr-subhead)::before,
  .msg.assistant .md blockquote:not(.dr-callout):not(.dr-quote *)::before {
    background: CanvasText;
    forced-color-adjust: none;
  }
}

/* reduced motion: one place for all of it */
@media (prefers-reduced-motion: reduce) {
  .dr-tool,
  .dr-tbl-q,
  .dr-tbl-tools,
  .dr-tools,
  .dr-tbl th[data-dr-sort],
  .dr-tbl th[data-dr-sort]::after,
  .dr-tbl tbody tr > td,
  .dr-card,
  .dr-src,
  .dr-src-flash,
  .dr-cite,
  .dr-map-dot,
  .dr-map-row,
  .dr-dg-node rect,
  .dr-dg-node polygon,
  [data-dr-drill],
  .dr-notice summary::before,
  .msg.assistant .md a:not([class]) {
    transition: none;
  }
  .dr-card:hover {
    transform: none;
  }
  .dr-cards.dr-shimmer .dr-card {
    animation: none;
  }
}

/* =====================================================================================================================
   13. print: controls are for the screen only; the blocks stay as drawn
   ===================================================================================================================== */
@media print {
  .dr-tools,
  .dr-tbl-bar,
  .dr-view-bar,
  .dr-card-actions,
  .dr-tip {
    display: none !important;
  }
  .dr-tbl tr.dr-tbl-more {
    display: table-row;
  }
  .dr-view > [hidden] {
    display: block;
  }
  .dr-view > table[hidden] {
    display: table;
  }
  .dr-widget input[type="range"] {
    pointer-events: none;
  }
  .dr-card,
  .dr-widget,
  .dr-mockup {
    box-shadow: none;
    break-inside: avoid;
  }
  .dr-src,
  .dr-quote,
  .dr-define,
  .dr-mk-m,
  .dr-wid-out {
    break-inside: avoid;
  }
  .msg.assistant .md a:not([class]) {
    text-decoration-color: currentColor;
  }
  .msg.assistant .md h2,
  .msg.assistant .md h2::before,
  .msg.assistant .md :is(h3, p.dr-subhead)::before,
  .msg.assistant .md > p:first-child strong,
  .msg.assistant .md mark {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}
.dr-print .dr-tools,
.dr-print .dr-tbl-bar,
.dr-print .dr-card-actions {
  display: none !important;
}
.dr-print .dr-card,
.dr-print .dr-widget,
.dr-print .dr-mockup {
  box-shadow: none;
}

/* [pres-artifact-preview-v1] a delivered file the person can view (mockup, report, image, PDF) shows in the answer,
   with "Open full screen" and "Download" above it; the frame can be dragged taller */
.dr-art {
  margin: var(--dr-gap, 16px) 0;
  border: 1px solid var(--dr-border, #24304d);
  border-radius: var(--drx-r-md, 12px);
  background: var(--dr-surface, #151d33);
  overflow: hidden;
}
.dr-art-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 8px 14px;
  border-bottom: 1px solid var(--dr-border, #24304d);
  font-size: 0.88em;
}
.dr-art-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--dr-text, #e8ecf6);
}
.msg.assistant .md .dr-art-bar a.dr-art-btn,
.dr-art-bar a.dr-art-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 3px 12px;
  border-radius: var(--drx-r-sm, 8px);
  border: 1px solid var(--dr-border, #24304d);
  color: var(--dr-text, #e8ecf6);
  text-decoration: none;
  font-weight: 600;
}
.msg.assistant .md .dr-art-bar a.dr-art-btn:hover,
.dr-art-bar a.dr-art-btn:hover {
  border-color: color-mix(in srgb, var(--dr-accent, #6d8dff) 50%, var(--dr-border, #24304d));
  color: var(--dr-accent, #6d8dff);
}
.msg.assistant .md .dr-art-bar a.dr-art-dl,
.dr-art-bar a.dr-art-dl {
  border-color: transparent;
  background: var(--dr-accent, #6d8dff);
  color: #fff;
}
.msg.assistant .md .dr-art-bar a.dr-art-dl:hover,
.dr-art-bar a.dr-art-dl:hover {
  color: #fff;
  filter: brightness(1.08);
}
.dr-art-bar a.dr-art-btn:focus-visible {
  outline: var(--drx-focus, 2px solid #6d8dff);
  outline-offset: 2px;
}
.dr-art-frame {
  height: 420px;
  min-height: 200px;
  resize: vertical;
  overflow: auto;
  background: #ffffff;
}
.dr-art-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #ffffff;
}
.dr-art-image .dr-art-frame {
  height: auto;
  max-height: 560px;
  resize: none;
  display: flex;
  justify-content: center;
  background: color-mix(in srgb, var(--dr-text, #e8ecf6) 4%, var(--dr-surface, #151d33));
}
.dr-art-frame img {
  display: block;
  max-width: 100%;
  max-height: 560px;
  object-fit: contain;
}
.dr-art-pdf .dr-art-frame {
  height: 520px;
}

/* [pres-artifact-preview-v1] a PDF in a media card: the browser's viewer, with Open full screen and Download */
.dr-media-box.dr-media-pdfbox {
  height: 460px;
  background: #ffffff;
  resize: vertical;
  overflow: auto;
}
.dr-media-pdfbox iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.msg.assistant .md figure.dr-media a.dr-media-act,
figure.dr-media a.dr-media-act {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: var(--drx-r-sm, 8px);
  border: 1px solid var(--dr-border, #24304d);
  color: var(--dr-text, #e8ecf6);
  font-size: 0.88em;
  font-weight: 600;
  text-decoration: none;
}
.msg.assistant .md figure.dr-media a.dr-media-act:hover,
figure.dr-media a.dr-media-act:hover {
  color: var(--dr-accent, #6d8dff);
  border-color: color-mix(in srgb, var(--dr-accent, #6d8dff) 50%, var(--dr-border, #24304d));
}

/* [pres-mockup-preview-v1] width buttons above an HTML preview, and the full-screen dialog */
.dr-art-dev {
  flex: none;
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--dr-border, #24304d);
  border-radius: var(--drx-r-sm, 8px);
}
.dr-art-dev-b {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--dr-dim, #9aa6c4);
  font: inherit;
  font-size: 0.86em;
  font-weight: 600;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 6px;
  cursor: pointer;
}
.dr-art-dev-b:hover {
  color: var(--dr-text, #e8ecf6);
}
.dr-art-dev-b[aria-pressed="true"] {
  background: var(--dr-accent, #6d8dff);
  color: #fff;
}
.dr-art-dev-b:focus-visible,
.dr-art-dlg-x:focus-visible,
.dr-art-dlg-tab:focus-visible {
  outline: var(--drx-focus, 2px solid #6d8dff);
  outline-offset: 2px;
}
.dr-art-frame.dr-art-framed {
  display: flex;
  justify-content: center;
  background: color-mix(in srgb, var(--dr-text, #e8ecf6) 6%, var(--dr-surface, #151d33));
}
.dr-art-frame.dr-art-framed iframe {
  flex: none;
  max-width: 100%;
  box-shadow: 0 0 0 1px var(--dr-border, #24304d), 0 12px 30px rgba(0, 0, 0, 0.25);
}
@media (max-width: 560px) {
  .dr-art-dev {
    display: none;
  }
}
html.dr-art-dlg-open {
  overflow: hidden;
}
.dr-art-dlg {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3vh 3vw;
  background: rgba(8, 10, 24, 0.74);
  backdrop-filter: blur(3px);
}
.dr-art-dlg-card {
  display: flex;
  flex-direction: column;
  width: min(1480px, 100%);
  height: 100%;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid #2b3556;
  background: #151d33;
  color: #e8ecf6;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  font-family: inherit;
}
.dr-art-dlg-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 10px 18px;
  border-bottom: 1px solid #2b3556;
  font-size: 0.9rem;
}
.dr-art-dlg-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}
.dr-art-dlg .dr-art-dev {
  border-color: #2b3556;
}
.dr-art-dlg .dr-art-dev-b {
  color: #aab4d4;
}
.dr-art-dlg .dr-art-dev-b[aria-pressed="true"] {
  color: #fff;
}
.dr-art-dlg-tab {
  flex: none;
  color: #e8ecf6;
  text-decoration: none;
  font-weight: 600;
  padding: 4px 12px;
  border: 1px solid #2b3556;
  border-radius: 8px;
}
.dr-art-dlg-tab:hover {
  border-color: #6d8dff;
  color: #9db3ff;
}
.dr-art-dlg-x {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid #2b3556;
  border-radius: 50%;
  background: transparent;
  color: #e8ecf6;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.dr-art-dlg-x:hover {
  background: #6d8dff;
  border-color: #6d8dff;
  color: #fff;
}
.dr-art-dlg-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  justify-content: center;
  overflow: auto;
  background: #ffffff;
}
.dr-art-dlg-body.dr-art-framed {
  background: #e9ebf5;
}
.dr-art-dlg-body iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #ffffff;
}
.dr-art-dlg-body.dr-art-framed iframe {
  flex: none;
  max-width: 100%;
  box-shadow: 0 0 0 1px #c9ccec, 0 12px 30px rgba(20, 18, 58, 0.18);
}
.dr-art-dlg-body img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  align-self: center;
}

/* [pres-svg-tools-v1] a drawn diagram: the page's text colour for plain text (light and dark), and the toolbar above it */
.dr-svg > svg {
  color: var(--dr-text, #1e1b4b);
}
.dr-svg > svg text:not([fill]),
.dr-svg > svg tspan:not([fill]) {
  fill: currentColor;
}
.dr-svg-tools {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  margin: 12px 0 -6px;
}
.dr-svg-btn {
  appearance: none;
  min-height: 26px;
  padding: 0 11px;
  border: 1px solid var(--dr-border, #24304d);
  border-radius: var(--drx-r-sm, 8px);
  background: transparent;
  color: var(--dr-dim, #9aa6c4);
  font: inherit;
  font-size: 0.82em;
  font-weight: 600;
  cursor: pointer;
}
.dr-svg-btn:hover {
  border-color: color-mix(in srgb, var(--dr-accent, #6d8dff) 55%, var(--dr-border, #24304d));
  color: var(--dr-accent, #6d8dff);
}
.dr-svg-btn:focus-visible {
  outline: var(--drx-focus, 2px solid #6d8dff);
  outline-offset: 2px;
}
.dr-art-dlg .dr-svg-btn {
  border-color: #2b3556;
  color: #e8ecf6;
}
.dr-art-dlg .dr-svg-btn:hover {
  border-color: #6d8dff;
  color: #9db3ff;
}
.dr-svg-full {
  align-items: center;
  padding: 24px;
  background: #ffffff;
}
.dr-svg-full > svg {
  width: 100%;
  height: auto;
  max-height: 100%;
}
html.dr-export .dr-svg-tools,
.dr-print .dr-svg-tools {
  display: none !important;
}
@media (max-width: 560px) {
  .dr-svg-tools {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}