/* ══════════════════════════════════════════════════════════════════════════
   VISUAL BLOCKS
   The cards a chat reply carries (steps, a comparison, pros and cons, key
   figures, a chart, pictures), callouts, and math. Drawn by
   static/generator/js/ai_assistant/visual_blocks.js; the app draws the same
   ones in furobox-mobile visual_blocks.dart, and the two should look alike.

   Built from divs: dark_mode.css clears the background of, and recolours,
   every <span> and <p> whose class does not say "badge".
   ══════════════════════════════════════════════════════════════════════════ */

.furo-rich {
    --furo-ink: var(--text-primary, #2d2d2d);
    --furo-muted: #607187;
    --furo-line: #e5e7eb;
    --furo-card: #f6f8fb;
    --furo-card-2: #ffffff;
    --furo-accent: #1b91f8;
    --furo-accent-soft: rgba(27, 145, 248, 0.10);
    --furo-pro: #16a34a;
    --furo-pro-soft: rgba(22, 163, 74, 0.07);
    --furo-con: #dc2626;
    --furo-con-soft: rgba(220, 38, 38, 0.06);
    --furo-star: #f59e0b;
    /* Chart series, in order. */
    --furo-c1: #1b91f8;
    --furo-c2: #0b2f4e;
    --furo-c3: #14b8a6;
    --furo-c4: #f59e0b;
    --furo-c5: #8b5cf6;
    --furo-c6: #f43f5e;
    --furo-c7: #22c55e;
    --furo-c8: #64748b;
}

body.dark .furo-rich {
    --furo-ink: #f9fafb;
    --furo-muted: #9ca3af;
    --furo-line: rgba(255, 255, 255, 0.11);
    --furo-card: rgba(255, 255, 255, 0.045);
    --furo-card-2: rgba(255, 255, 255, 0.03);
    --furo-accent: #4aa8ff;
    --furo-accent-soft: rgba(74, 168, 255, 0.14);
    --furo-pro: #4ade80;
    --furo-pro-soft: rgba(74, 222, 128, 0.08);
    --furo-con: #f87171;
    --furo-con-soft: rgba(248, 113, 113, 0.08);
    --furo-c1: #4aa8ff;
    --furo-c2: #7fb4e0;
    --furo-c8: #94a3b8;
}

/* hidden must win over each block's own display. */
.furo-rich [hidden] {
    display: none !important;
}

.furo-rich > .furo-blk {
    margin: 14px 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--furo-ink);
}

/* One width for every card: the bubble shrinks to fit what is in it, so a
   chart under a short sentence was as narrow as its title. */
.furo-rich > .furo-blk:not(.furo-blk--places) {
    width: 600px;
    max-width: 100%;
}

.furo-rich > .furo-blk:first-child {
    margin-top: 4px;
}

.furo-rich > .furo-blk:last-child {
    margin-bottom: 4px;
}

.furo-rich > .furo-blk--places {
    margin: 0;
}

/* A card that could not be drawn, shown as its text. */
.furo-rich > .furo-blk--text {
    white-space: pre-line;
}

/* Each row, step, tile and picture rises in as it is written. Delayed in turn
   when several land at once. */
@keyframes furoBlockIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

@keyframes furoShimmer {
    from { background-position: 100% 0; }
    to   { background-position: -100% 0; }
}

.furo-rich .furo-in,
.furo-rich .furo-cmp__row.furo-in > .furo-cmp__cell {
    animation: furoBlockIn 0.32s cubic-bezier(0.2, 0.8, 0.3, 1) both;
    animation-delay: calc(var(--furo-i, 0) * 70ms);
}

/* display: contents has no box to move; its cells do. */
.furo-rich .furo-cmp__row.furo-in {
    animation: none;
}

/* ── Steps ─────────────────────────────────────────────────────────────────── */
/* Steps to tick off: a tap turns a step's number into a check and strikes
   it through, and the bar at the top fills (BLOCKS.steps). On the page
   itself, as the other reply cards are: no fill and no border round them
   (the app's _StepsBlock the same). */

.furo-steps {
    padding: 4px 6px 6px;
}

.furo-steps__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px 4px;
}

.furo-steps__bar {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--furo-line);
    overflow: hidden;
}

.furo-steps__fill {
    width: 0;
    height: 100%;
    border-radius: 2px;
    background: var(--furo-accent);
    transition: width 0.35s cubic-bezier(0.2, 0.8, 0.3, 1), background-color 0.2s ease;
}

.furo-steps__head.is-complete .furo-steps__fill {
    background: var(--furo-pro);
}

.furo-steps__count {
    min-width: 2.4em;
    color: var(--furo-muted);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.furo-steps__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.furo-steps__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 10px;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.furo-steps__item:hover {
    background: var(--furo-card-2);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

body.dark .furo-steps__item:hover {
    background: rgba(255, 255, 255, 0.05);
    box-shadow: none;
}

.furo-steps__item:focus-visible {
    outline: 2px solid var(--furo-accent);
    outline-offset: -2px;
}

/* The number in a soft rounded square; a check in a green one once done. */
.furo-steps__num {
    position: relative;
    flex: 0 0 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--furo-accent-soft);
    color: var(--furo-accent);
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.furo-steps__n {
    transition: opacity 0.15s ease, transform 0.2s ease;
}

.furo-steps__num .bi {
    position: absolute;
    font-size: 16px;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.18s ease, transform 0.25s cubic-bezier(0.2, 0.8, 0.3, 1.4);
}

.furo-steps__item:active .furo-steps__num {
    transform: scale(0.92);
}

.furo-steps__item.is-done .furo-steps__num {
    background: var(--furo-pro);
    color: #fff;
}

/* Dark mode's green is light: a dark check on it. */
body.dark .furo-steps__item.is-done .furo-steps__num {
    color: #052e16;
}

.furo-steps__item.is-done .furo-steps__n {
    opacity: 0;
    transform: scale(0.5);
}

.furo-steps__item.is-done .furo-steps__num .bi {
    opacity: 1;
    transform: none;
}

.furo-steps__body {
    min-width: 0;
    padding-top: 3px;
}

.furo-steps__title {
    font-weight: 650;
    transition: color 0.2s ease;
}

.furo-steps__detail {
    margin-top: 2px;
    color: var(--furo-muted);
    transition: opacity 0.2s ease;
}

.furo-steps__item.is-done .furo-steps__title {
    color: var(--furo-muted);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.furo-steps__item.is-done .furo-steps__detail {
    opacity: 0.6;
}

/* ── Compare ───────────────────────────────────────────────────────────────── */
/* A plain table, the way a good chat app sets one: no box and no fills, the
   options in bold over one firm rule, faint rules between the rows, the
   attributes muted. The pick and its reason are one quiet line under the
   table; the option's name carries no mark of its own. */

.furo-cmp {
    --furo-rule: rgba(15, 23, 42, 0.07);
    --furo-rule-strong: rgba(15, 23, 42, 0.16);
}

/* With no box round them, the plain cards need more air between them and the
   text and cards around them. */
.furo-rich > .furo-blk.furo-cmp,
.furo-rich > .furo-blk.furo-pc {
    margin-top: 20px;
    margin-bottom: 20px;
}

.furo-rich > .furo-blk.furo-cmp:first-child,
.furo-rich > .furo-blk.furo-pc:first-child {
    margin-top: 4px;
}

.furo-rich > .furo-blk.furo-cmp:last-child,
.furo-rich > .furo-blk.furo-pc:last-child {
    margin-bottom: 4px;
}

body.dark .furo-cmp {
    --furo-rule: rgba(255, 255, 255, 0.08);
    --furo-rule-strong: rgba(255, 255, 255, 0.2);
}

.furo-cmp__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.furo-cmp__grid {
    display: grid;
    grid-template-columns: minmax(84px, max-content) repeat(var(--furo-cols, 2), minmax(120px, 1fr));
    min-width: 100%;
}

.furo-cmp__row,
.furo-cmp__body {
    display: contents;
}

.furo-cmp__cell {
    min-width: 0;
    padding: 11px 16px 11px 0;
    border-top: 1px solid var(--furo-rule);
    overflow-wrap: anywhere;
}

.furo-cmp__cell:last-child {
    padding-right: 0;
}

.furo-cmp__row--head .furo-cmp__cell {
    padding-top: 2px;
    padding-bottom: 10px;
    border-top: 0;
    border-bottom: 1px solid var(--furo-rule-strong);
}

.furo-cmp__body > .furo-cmp__row:first-child > .furo-cmp__cell {
    border-top: 0;
}

.furo-cmp__corner,
.furo-cmp__attr {
    color: var(--furo-muted);
    font-size: 0.88rem;
    font-weight: 500;
    /* Breaks between words only: "anywhere" let the column shrink until
       "Performance" broke in two. */
    overflow-wrap: break-word;
}

.furo-cmp__opt {
    font-weight: 650;
}

.furo-cmp__name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.furo-cmp__pick {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--furo-rule-strong);
}

.furo-cmp__pick > .bi {
    flex: none;
    position: relative;
    top: 1px;
    color: var(--furo-star);
    font-size: 13px;
}

.furo-cmp__pick-text {
    min-width: 0;
}

.furo-cmp__pick-text strong {
    font-weight: 650;
}

/* ── Pros and cons ─────────────────────────────────────────────────────────── */
/* Two columns, as plain as the table: each under a thumb and its count over a
   firm rule, the items marked + or − in its colour. */

.furo-pc {
    --furo-rule-strong: rgba(15, 23, 42, 0.16);
}

body.dark .furo-pc {
    --furo-rule-strong: rgba(255, 255, 255, 0.2);
}

.furo-pc__title {
    margin-bottom: 10px;
    font-weight: 650;
}

.furo-pc__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

.furo-pc__cols--one {
    grid-template-columns: 1fr;
}

.furo-pc__col {
    min-width: 0;
}

.furo-pc__head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--furo-rule-strong);
    font-size: 13px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.furo-pc__head .bi {
    font-size: 14px;
}

.furo-pc__col--pro .furo-pc__head {
    color: var(--furo-pro);
}

.furo-pc__col--con .furo-pc__head {
    color: var(--furo-con);
}

.furo-pc__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.furo-pc__item {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0;
}

.furo-pc__mark {
    flex: none;
    position: relative;
    top: 1px;
    font-size: 13px;
}

.furo-pc__col--pro .furo-pc__mark {
    color: var(--furo-pro);
}

.furo-pc__col--con .furo-pc__mark {
    color: var(--furo-con);
}

.furo-pc__text {
    min-width: 0;
}

@media (max-width: 520px) {
    .furo-pc__cols {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

/* ── Key figures ───────────────────────────────────────────────────────────── */

.furo-stats__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}

.furo-stat {
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--furo-line);
    border-radius: 14px;
    background: var(--furo-card);
}

.furo-stat__value {
    color: var(--furo-accent);
    font-size: 1.55rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.furo-stat__label {
    margin-top: 4px;
    font-size: 0.88rem;
    font-weight: 600;
}

.furo-stat__note {
    margin-top: 2px;
    color: var(--furo-muted);
    font-size: 0.8rem;
}

/* ── Chart ─────────────────────────────────────────────────────────────────── */

.furo-chart {
    padding: 14px 16px 12px;
    border: 1px solid var(--furo-line);
    border-radius: 14px;
    background: var(--furo-card-2);
}

.furo-chart__title {
    margin-bottom: 10px;
    font-size: 0.92rem;
    font-weight: 700;
}

.furo-chart__skeleton > div {
    height: 12px;
    margin: 10px 0;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--furo-card) 0%, var(--furo-line) 50%, var(--furo-card) 100%);
    background-size: 200% 100%;
    animation: furoShimmer 1.2s linear infinite;
}

.furo-chart__skeleton > div:nth-child(1) { width: 82%; }
.furo-chart__skeleton > div:nth-child(2) { width: 58%; }
.furo-chart__skeleton > div:nth-child(3) { width: 70%; }

.furo-bar {
    display: grid;
    grid-template-columns: minmax(56px, 30%) 1fr auto;
    align-items: center;
    gap: 10px;
    margin: 7px 0;
}

.furo-bar__label {
    overflow: hidden;
    color: var(--furo-muted);
    font-size: 0.84rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.furo-bar__track {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.furo-bar__fill {
    height: 10px;
    border-radius: 5px;
    background: var(--furo-color, var(--furo-c1));
    transform-origin: left center;
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.furo-bar__fill:only-child {
    height: 14px;
    border-radius: 7px;
}

.furo-bar__fill.is-negative {
    background: var(--furo-con);
}

.furo-bar__value {
    font-size: 0.84rem;
    font-variant-numeric: tabular-nums;
    font-weight: 650;
    white-space: nowrap;
}

.furo-line {
    position: relative;
    height: 170px;
    margin: 20px 4px 4px;
}

/* Drawn in from the left. Not with stroke-dasharray: a dash with a constant
   (non-scaling) stroke width is measured on screen, so the line came out in
   pieces. */
.furo-line svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    clip-path: inset(-10px -10px -10px -10px);
    transition: clip-path 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.furo-line__grid {
    stroke: var(--furo-line);
    stroke-width: 1;
}

.furo-line__path {
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.furo-line__dot {
    position: absolute;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: var(--furo-color, var(--furo-c1));
    transition: opacity 0.3s ease 0.7s;
}

.furo-line__val {
    position: absolute;
    transform: translate(-50%, -160%);
    color: var(--furo-ink);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    font-weight: 650;
    white-space: nowrap;
    transition: opacity 0.3s ease 0.8s;
}

/* Before it draws itself in: no line yet, and no dots. */
.furo-line.is-drawing svg {
    clip-path: inset(-10px 100% -10px -10px);
    transition: none;
}

.furo-line.is-drawing .furo-line__dot,
.furo-line.is-drawing .furo-line__val {
    opacity: 0;
    transition: none;
}

.furo-line__x {
    position: relative;
    height: 18px;
    margin: 8px 4px 0;
}

.furo-line__x > div {
    position: absolute;
    transform: translateX(-50%);
    color: var(--furo-muted);
    font-size: 0.74rem;
    white-space: nowrap;
}

.furo-pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
}

.furo-pie__ring {
    flex: none;
    width: 132px;
    height: 132px;
}

.furo-pie__track {
    fill: none;
    stroke: var(--furo-line);
    stroke-width: 6;
}

.furo-pie__seg {
    fill: none;
    stroke-width: 6;
    transition: stroke-dasharray 0.9s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.furo-pie__legend {
    display: flex;
    flex: 1 1 180px;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.furo-pie__item {
    display: grid;
    grid-template-columns: 10px 1fr auto auto;
    align-items: center;
    gap: 8px;
    font-size: 0.86rem;
}

.furo-pie__label {
    min-width: 0;
    overflow-wrap: anywhere;
}

.furo-pie__value {
    color: var(--furo-muted);
    font-variant-numeric: tabular-nums;
}

.furo-pie__share {
    min-width: 36px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    text-align: right;
}

.furo-chart__swatch {
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.furo-chart__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 10px;
    color: var(--furo-muted);
    font-size: 0.8rem;
}

.furo-chart__key {
    display: flex;
    align-items: center;
    gap: 6px;
}

.furo-chart__source {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    color: var(--furo-muted);
    font-size: 0.76rem;
}

/* ── Pictures ──────────────────────────────────────────────────────────────── */

.furo-imgs__row {
    display: flex;
    gap: 6px;
    height: 160px;
}

.furo-img {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    border-radius: 12px;
    background: var(--furo-card);
    cursor: zoom-in;
}

.furo-img:focus-visible {
    outline: 2px solid var(--furo-accent);
    outline-offset: 2px;
}

.furo-rich .furo-img img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.furo-img:hover img {
    transform: scale(1.04);
}

.furo-rich .furo-img__src {
    position: absolute;
    left: 6px;
    bottom: 6px;
    max-width: calc(100% - 12px);
    overflow: hidden;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff !important;
    font-size: 11px;
    line-height: 1.5;
    text-decoration: none !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.furo-img--loading {
    background: linear-gradient(90deg, var(--furo-card) 0%, var(--furo-line) 50%, var(--furo-card) 100%);
    background-size: 200% 100%;
    animation: furoShimmer 1.2s linear infinite;
    cursor: default;
}

.furo-imgs__caption {
    margin-top: 6px;
    color: var(--furo-muted);
    font-size: 0.8rem;
}

/* ── Callouts: > [!TIP] and the rest ───────────────────────────────────────── */

.furo-callout--note      { --fc: #1b91f8; --fc-soft: rgba(27, 145, 248, 0.08); }
.furo-callout--tip       { --fc: #16a34a; --fc-soft: rgba(22, 163, 74, 0.08); }
.furo-callout--important { --fc: #8b5cf6; --fc-soft: rgba(139, 92, 246, 0.09); }
.furo-callout--warning   { --fc: #d97706; --fc-soft: rgba(245, 158, 11, 0.11); }
.furo-callout--caution   { --fc: #dc2626; --fc-soft: rgba(220, 38, 38, 0.08); }

/* Over dark_mode.css's blockquote, which is !important throughout. */
.bubble .md blockquote.furo-callout,
body.dark .bubble .md blockquote.furo-callout {
    position: relative;
    margin: 0.8rem 0;
    padding: 0.7rem 0.95rem 0.7rem 2.65rem;
    border-left: 4px solid var(--fc) !important;
    border-radius: 0 10px 10px 0;
    background: var(--fc-soft) !important;
    color: inherit !important;
}

.furo-callout__icon {
    position: absolute;
    left: 0.9rem;
    top: 0.78rem;
    color: var(--fc);
    font-size: 1rem;
    line-height: 1;
}

/* Over .bubble .md p's own margins, which would sit the text below its icon. */
.bubble .md blockquote.furo-callout > p {
    margin: 0 0 0.5rem;
}

.bubble .md blockquote.furo-callout > :last-child {
    margin-bottom: 0;
}

/* ── Math ──────────────────────────────────────────────────────────────────── */

.furo-math--display {
    display: block;
    margin: 0.5rem 0;
    padding: 2px 0;
    overflow-x: auto;
    overflow-y: hidden;
    text-align: center;
}

/* Before KaTeX has loaded: the formula as typed. */
.furo-math--pending {
    color: var(--furo-muted, #607187);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85em;
}

/* ── Follow-up suggestions ─────────────────────────────────────────────────── */
/* Under the newest reply, outside .furo-rich: what the user may want to send
   next, one tap each (showFollowUps in ai_assistant_detail.html). */

.furo-next {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 14px;
}

.furo-next-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 7px 14px 7px 11px;
    border: 1px solid #dbe3ee;
    border-radius: 18px;
    background: transparent;
    color: #1f2937;
    font: inherit;
    font-size: 0.9rem;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.furo-next-btn i {
    flex: none;
    color: #1b91f8;
    font-size: 0.95rem;
}

.furo-next-btn:hover {
    background: #f3f7fc;
    border-color: #c4d3e6;
}

.furo-next-btn:focus-visible {
    outline: 2px solid #1b91f8;
    outline-offset: 2px;
}

/* Risen in one after another as a reply finishes; already there on a reload. */
.furo-next--in .furo-next-btn {
    animation: furoBlockIn 0.32s ease both;
    animation-delay: calc(var(--i, 0) * 70ms + 120ms);
}

body.dark .furo-next-btn {
    border-color: rgba(255, 255, 255, 0.14);
    color: #e5e7eb;
}

body.dark .furo-next-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.22);
}

body.dark .furo-next-btn i {
    color: #4aa8ff;
}

/* ── Tables ──────────────────────────────────────────────────────────────── */
/* Markdown tables set the way ChatGPT sets them: no grid, frame, header fill or
   stripes; a bold header over one firm rule, faint rules between the rows, the
   text flush with the reply's. The app draws the same (message_bubble.dart).
   Group chats' tables are set the same (group_chat_detail.html wraps them).
   The selectors are strong on purpose: the chat page's own table rules,
   dark_mode.css (with !important) and the phone layer all style .bubble .md
   tables too. */

.bubble .md .furo-table,
.group-bubble .md .furo-table {
    --furo-trule: rgba(13, 13, 13, 0.08);
    --furo-trule-strong: rgba(13, 13, 13, 0.15);
    margin: 14px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

body.dark .bubble .md .furo-table,
body.dark .group-bubble .md .furo-table {
    --furo-trule: rgba(255, 255, 255, 0.1);
    --furo-trule-strong: rgba(255, 255, 255, 0.18);
}

.bubble .md .furo-table > table,
.group-bubble .md .furo-table > table {
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    border-radius: 0;
    font-size: inherit;
    line-height: 1.5;
}

.bubble .md .furo-table th,
.bubble .md .furo-table td,
.group-bubble .md .furo-table th,
.group-bubble .md .furo-table td {
    min-width: 6em;
    padding: 10px 16px 10px 0;
    border: 0;
    border-bottom: 1px solid var(--furo-trule);
    background: none;
    text-align: left;
    vertical-align: top;
}

.bubble .md .furo-table tr > :last-child,
.group-bubble .md .furo-table tr > :last-child {
    padding-right: 0;
}

.bubble .md .furo-table th,
.group-bubble .md .furo-table th {
    padding-top: 2px;
    border-bottom-color: var(--furo-trule-strong);
    font-weight: 600;
}

.bubble .md .furo-table tbody tr:last-child > *,
.group-bubble .md .furo-table tbody tr:last-child > * {
    border-bottom: 0;
}

body.dark .bubble .md .furo-table th,
body.dark .bubble .md .furo-table td,
body.dark .group-bubble .md .furo-table th,
body.dark .group-bubble .md .furo-table td {
    background: none !important;
    border-color: var(--furo-trule) !important;
}

body.dark .bubble .md .furo-table th,
body.dark .group-bubble .md .furo-table th {
    border-color: var(--furo-trule-strong) !important;
}

/* ── Phones: the app's 15px text and font ──────────────────────────────────── */

@media (max-width: 768px) {
    html.fm .furo-rich {
        --furo-ink: var(--fm-text, #0d0d0d);
    }

    html.fm .furo-next-btn {
        font-family: var(--fm-font);
        font-size: 14.5px;
    }

    /* Over the phone layer's framed grid (mobile_app.css), which loads later. */
    html.fm body .bubble.bubble-furobox .md .furo-table > table {
        margin: 0;
        border: 0;
        border-collapse: collapse;
        border-radius: 0;
        overflow: visible;
        font-size: 14.5px;
        line-height: 1.45;
    }

    html.fm body .bubble.bubble-furobox .md .furo-table th,
    html.fm body .bubble.bubble-furobox .md .furo-table td {
        padding: 10px 16px 10px 0;
        border-right: 0;
        border-bottom: 1px solid var(--furo-trule);
        background: none;
    }

    html.fm body .bubble.bubble-furobox .md .furo-table tr > :last-child {
        padding-right: 0;
    }

    html.fm body .bubble.bubble-furobox .md .furo-table th {
        padding-top: 2px;
        border-bottom-color: var(--furo-trule-strong);
        font-weight: 600;
    }

    html.fm .furo-rich > .furo-blk {
        font-family: var(--fm-font);
        font-size: 15px;
    }

    html.fm .furo-imgs__row {
        height: 120px;
    }

    html.fm .furo-stat__value {
        font-size: 1.4rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .furo-rich .furo-in,
    .furo-rich .furo-cmp__row.furo-in > .furo-cmp__cell,
    .furo-chart__skeleton > div,
    .furo-img--loading,
    .furo-next--in .furo-next-btn {
        animation: none;
    }

    .furo-steps__fill,
    .furo-steps__num,
    .furo-steps__num .bi,
    .furo-steps__n,
    .furo-bar__fill,
    .furo-line svg,
    .furo-line__dot,
    .furo-line__val,
    .furo-pie__seg,
    .furo-cmp__cell {
        transition: none;
    }
}