/*
 * Answer block: ```style, and the look a student picks in Settings > General >
 * How Aluma answers (blocks/style.js). Tokens in blocks.css.
 *
 *   1. Palettes      [data-ab-palette] restates the --ab-* role and accent
 *                    tokens, for both themes. On <body> it recolours every
 *                    reply; on any element (a swatch, a preview) it scopes the
 *                    palette to that element.
 *   2. Role hooks    in Mono, roles are told apart by weight and line style,
 *                    not hue: an element marked data-ab-role="measure|calc|
 *                    given|ignore" gets them, and an SVG can read the dash
 *                    tokens.
 *   3. Text size     body[data-ab-text]: --ab-scale on the reply's prose, its
 *                    tables, its KaTeX (which sizes in em) and, through zoom,
 *                    its blocks.
 *   4. Spacing       body[data-ab-density]: line height, paragraph flow and
 *                    the gap around blocks (--ab-leading, --ab-flow, --ab-gap;
 *                    Lumi's steps --ab-lumi-*). Comfortable is each reply's
 *                    own look.
 *   5. The card      what a ```style block draws in a reply.
 *   6. Settings      the How Aluma answers section and its live preview.
 *
 * Only replies and answer blocks change. The app chrome reads none of these.
 * A reply is the chat's (.view-chat .msg.assistant .msg-content) or Lumi's
 * (.lumi-assistant .lumi-msg-content): a phone has no chat view, so Lumi's
 * panel is where a phone shows every answer. Lumi scales from its own 13px
 * base (lumi.css), not the chat's.
 */

/* ── 1. Palettes ─────────────────────────────────────────────────────────
   Aluma is blocks.css's defaults, restated so a swatch can show them on a page
   that has another palette on. Dark first (the :root default), then light. */
[data-ab-palette="aluma"] {
  --ab-ink: var(--text); --ab-muted: var(--text-muted);
  --ab-card: var(--bg-elev-1); --ab-paper: var(--bg-elev-2);
  --ab-rule: var(--border-strong); --ab-hair: var(--border); --ab-accent: var(--accent);
  --ab-measure: #f0696e; --ab-measure-soft: rgba(240, 105, 110, 0.14);
  --ab-calc: #86aaf2; --ab-calc-soft: rgba(134, 170, 242, 0.14);
  --ab-given: var(--text); --ab-ignore: var(--text-muted);
  --ab-good: #62c58d; --ab-good-soft: rgba(98, 197, 141, 0.14);
  --ab-warn: #e5b060; --ab-warn-soft: rgba(229, 176, 96, 0.16);
}
body[data-theme="light"][data-ab-palette="aluma"],
body[data-theme="light"] [data-ab-palette="aluma"] {
  --ab-measure: #bc2a30; --ab-measure-soft: #f8e3e2;
  --ab-calc: #1d4e9e; --ab-calc-soft: #e2eaf8;
  --ab-good: #2b7849; --ab-good-soft: #e0f1e6;
  --ab-warn: #a3620c; --ab-warn-soft: #fbeeda;
}

/* Lab: the lab-guide look. Paper and ink, red you measure, blue you work out. */
[data-ab-palette="lab"] {
  --ab-ink: #e3e9e5; --ab-muted: #98a59e;
  --ab-card: #171e1a; --ab-paper: #101512;
  --ab-rule: #2b3530; --ab-hair: #232c27; --ab-accent: #86aaf2;
  --ab-measure: #f0696e; --ab-measure-soft: #3a1d20;
  --ab-calc: #86aaf2; --ab-calc-soft: #1a2640;
  --ab-given: #e3e9e5; --ab-ignore: #98a59e;
  --ab-good: #62c58d; --ab-good-soft: #163222;
  --ab-warn: #e5b060; --ab-warn-soft: #3a2b13;
}
body[data-theme="light"][data-ab-palette="lab"],
body[data-theme="light"] [data-ab-palette="lab"] {
  --ab-ink: #18201c; --ab-muted: #56625b;
  --ab-card: #ffffff; --ab-paper: #f3f5f1;
  --ab-rule: #cbd3cc; --ab-hair: #e2e8e1; --ab-accent: #1d4e9e;
  --ab-measure: #bc2a30; --ab-measure-soft: #f8e3e2;
  --ab-calc: #1d4e9e; --ab-calc-soft: #e2eaf8;
  --ab-given: #18201c; --ab-ignore: #56625b;
  --ab-good: #2b7849; --ab-good-soft: #e0f1e6;
  --ab-warn: #94570a; --ab-warn-soft: #fbeeda;
}

/* Ocean: sea blues, with coral for what you measure. */
[data-ab-palette="ocean"] {
  --ab-ink: #e1eef4; --ab-muted: #93acb8;
  --ab-card: #0f1f27; --ab-paper: #0a171e;
  --ab-rule: #25414d; --ab-hair: #1a323c; --ab-accent: #5ec6e4;
  --ab-measure: #ff946a; --ab-measure-soft: #3b2219;
  --ab-calc: #6cc0f2; --ab-calc-soft: #102f40;
  --ab-given: #e1eef4; --ab-ignore: #93acb8;
  --ab-good: #5ecf9f; --ab-good-soft: #12322a;
  --ab-warn: #f0ba5c; --ab-warn-soft: #3a2c12;
}
body[data-theme="light"][data-ab-palette="ocean"],
body[data-theme="light"] [data-ab-palette="ocean"] {
  --ab-ink: #0e2230; --ab-muted: #4a6270;
  --ab-card: #ffffff; --ab-paper: #eef5f8;
  --ab-rule: #c2d5de; --ab-hair: #dce8ee; --ab-accent: #0a6a86;
  --ab-measure: #b4400e; --ab-measure-soft: #fceadf;
  --ab-calc: #0a5c8c; --ab-calc-soft: #dfeef8;
  --ab-given: #0e2230; --ab-ignore: #4a6270;
  --ab-good: #1d7552; --ab-good-soft: #ddf2e8;
  --ab-warn: #8f5b00; --ab-warn-soft: #fbf0d9;
}

/* Contrast: every ink at 7:1 or more on its card (WCAG AAA), black and white
   grounds, rules you can see. */
[data-ab-palette="contrast"] {
  --ab-ink: #ffffff; --ab-muted: #dadada;
  --ab-card: #000000; --ab-paper: #000000;
  --ab-rule: #ffffff; --ab-hair: #9a9a9a; --ab-accent: #9ccbff;
  --ab-measure: #ffa3a3; --ab-measure-soft: #3a0006;
  --ab-calc: #a6ccff; --ab-calc-soft: #00204d;
  --ab-given: #ffffff; --ab-ignore: #bdbdbd;
  --ab-good: #86f2b0; --ab-good-soft: #00321a;
  --ab-warn: #ffd27a; --ab-warn-soft: #3a2600;
}
body[data-theme="light"][data-ab-palette="contrast"],
body[data-theme="light"] [data-ab-palette="contrast"] {
  --ab-ink: #000000; --ab-muted: #2e2e2e;
  --ab-card: #ffffff; --ab-paper: #ffffff;
  --ab-rule: #000000; --ab-hair: #6b6b6b; --ab-accent: #0037a6;
  --ab-measure: #a1000b; --ab-measure-soft: #ffe3e3;
  --ab-calc: #0037a6; --ab-calc-soft: #e1e9ff;
  --ab-given: #000000; --ab-ignore: #4a4a4a;
  --ab-good: #00562a; --ab-good-soft: #ddf5e6;
  --ab-warn: #6e3f00; --ab-warn-soft: #fff0d6;
}

/* Mono: greys only. Measure is the darkest ink and bold, calc a step lighter
   with a dashed line (section 2), so the key still reads without colour. */
[data-ab-palette="mono"] {
  --ab-ink: #ededed; --ab-muted: #a6a6a6;
  --ab-card: #161616; --ab-paper: #0e0e0e;
  --ab-rule: #3a3a3a; --ab-hair: #2a2a2a; --ab-accent: #ededed;
  --ab-measure: #f5f5f5; --ab-measure-soft: #333333;
  --ab-calc: #c4c4c4; --ab-calc-soft: #242424;
  --ab-given: #ededed; --ab-ignore: #8e8e8e;
  --ab-good: #d6d6d6; --ab-good-soft: #262626;
  --ab-warn: #d6d6d6; --ab-warn-soft: #262626;
  --ab-measure-weight: 700; --ab-calc-weight: 500;
  --ab-measure-dash: none; --ab-calc-dash: 5 4; --ab-ignore-dash: 2 4;
  /* Chart sets 2-4 (set 1 is calc): grey steps apart from it and from each
     other, 3:1 or more on the card; their marker shapes still tell them apart. */
  --ab-series-2: #8a8a8a; --ab-series-3: #f5f5f5; --ab-series-4: #6e6e6e;
}
body[data-theme="light"][data-ab-palette="mono"],
body[data-theme="light"] [data-ab-palette="mono"] {
  --ab-ink: #151515; --ab-muted: #575757;
  --ab-card: #ffffff; --ab-paper: #f4f4f3;
  --ab-rule: #c9c9c8; --ab-hair: #e3e3e2; --ab-accent: #151515;
  --ab-measure: #151515; --ab-measure-soft: #e4e4e3;
  --ab-calc: #3d3d3d; --ab-calc-soft: #f0f0ef;
  --ab-given: #151515; --ab-ignore: #6e6e6e;
  --ab-good: #2e2e2e; --ab-good-soft: #eaeaea;
  --ab-warn: #2e2e2e; --ab-warn-soft: #eaeaea;
  --ab-series-2: #8a8a8a; --ab-series-3: #151515; --ab-series-4: #626262;
}
/* A diagram's materials (diagram.css) are declared on the figure itself, so
   Mono restates them there: wood a solid grey, metal a grey a step away from
   it, water a pale wash. */
[data-ab-palette="mono"] :is(.ab-dg, .ab-dg-overlay) {
  --ab-dg-wood: #5e5e5e; --ab-dg-wood-edge: #8a8a8a;
  --ab-dg-metal: #9a9a9a; --ab-dg-metal-edge: #b5b5b5;
  --ab-dg-water: rgba(220, 220, 220, 0.14); --ab-dg-water-edge: #8f8f8f;
}
body[data-theme="light"][data-ab-palette="mono"] :is(.ab-dg, .ab-dg-overlay),
body[data-theme="light"] [data-ab-palette="mono"] :is(.ab-dg, .ab-dg-overlay) {
  --ab-dg-wood: #bdbdbd; --ab-dg-wood-edge: #7a7a7a;
  --ab-dg-metal: #6b6b6b; --ab-dg-metal-edge: #575757;
  --ab-dg-water: #eeeeee; --ab-dg-water-edge: #8c8c8c;
}

/* A palette other than Aluma also sets the reply's own ink, so prose and the
   blocks inside it read as one page. */
body[data-ab-palette]:not([data-ab-palette="aluma"]):not(#_) :is(.view-chat .msg.assistant .msg-content, .lumi-assistant .lumi-msg-content),
body[data-ab-palette]:not([data-ab-palette="aluma"]):not(#_) :is(.view-chat .msg.assistant .msg-content, .lumi-assistant .lumi-msg-content) > :is(p, ul, ol, h1, h2, h3, h4, blockquote, table) {
  color: var(--ab-ink);
}

/* ── 2. Role hooks (Mono) ────────────────────────────────────────────────
   A block marks a quantity with data-ab-role and keeps colouring it with the
   role token; in Mono, weight and line style carry the meaning too. */
body[data-ab-palette="mono"] [data-ab-role="measure"],
[data-ab-palette="mono"] [data-ab-role="measure"] {
  font-weight: 700;
}
body[data-ab-palette="mono"] [data-ab-role="calc"],
[data-ab-palette="mono"] [data-ab-role="calc"] {
  text-decoration: underline dashed;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
body[data-ab-palette="mono"] [data-ab-role="ignore"],
[data-ab-palette="mono"] [data-ab-role="ignore"] {
  font-style: italic;
}

/* ── 3. Text size ────────────────────────────────────────────────────────
   chatclean.css sets the reply's sizes in px (prose 16.5, tables 15) and its
   headings in em of the 15.5px reply; each is restated times --ab-scale, so
   KaTeX (sized in em of its paragraph) follows. The reply box itself keeps
   15.5px, which is what a block inherits; zoom then scales the block once,
   whatever units it uses inside. A block that sizes itself from --ab-scale
   opts out with data-ab-scale="self".
   A markdown table is framed by the tables pass (.ab-mdtable, sheet.css), so
   it is no longer a child of the reply; one inside a block is zoomed with
   that block and is left alone here. */
body[data-ab-text="small"] { --ab-scale: 0.9; }
body[data-ab-text="medium"] { --ab-scale: 1; }
body[data-ab-text="large"] { --ab-scale: 1.12; }
body[data-ab-text="xlarge"] { --ab-scale: 1.25; }
body[data-ab-text]:not(#_) .view-chat .msg.assistant .msg-content > :is(p, ul, ol, blockquote) {
  font-size: calc(16.5px * var(--ab-scale, 1));
}
body[data-ab-text]:not(#_) .view-chat .msg.assistant .msg-content > table,
body[data-ab-text]:not(#_) .view-chat .msg.assistant .msg-content .ab-mdtable:not(.ab-block .ab-mdtable) table {
  font-size: calc(15px * var(--ab-scale, 1));
}
body[data-ab-text]:not(#_) .view-chat .msg.assistant .msg-content > h1 { font-size: calc(15.5px * 1.5 * var(--ab-scale, 1)); }
body[data-ab-text]:not(#_) .view-chat .msg.assistant .msg-content > h2 { font-size: calc(15.5px * 1.3 * var(--ab-scale, 1)); }
body[data-ab-text]:not(#_) .view-chat .msg.assistant .msg-content > h3 { font-size: calc(15.5px * 1.12 * var(--ab-scale, 1)); }
body[data-ab-text]:not(#_) .view-chat .msg.assistant .msg-content > h4 { font-size: calc(15.5px * var(--ab-scale, 1)); }
body[data-ab-text]:not(#_) .view-chat .msg.assistant .msg-content > .math-block {
  font-size: calc(15.5px * var(--ab-scale, 1));
}
/* Lumi: its prose and display math are its 13px base (--fs-sm), its tables
   --fs-xs, its headings the browser's own steps of that base. */
body[data-ab-text]:not(#_) .lumi-assistant .lumi-msg-content > :is(p, ul, ol, blockquote, .math-block) {
  font-size: calc(var(--fs-sm, 13px) * var(--ab-scale, 1));
}
body[data-ab-text]:not(#_) .lumi-assistant .lumi-msg-content > table,
body[data-ab-text]:not(#_) .lumi-assistant .lumi-msg-content .ab-mdtable:not(.ab-block .ab-mdtable) table {
  font-size: calc(var(--fs-xs, 12px) * var(--ab-scale, 1));
}
body[data-ab-text]:not(#_) .lumi-assistant .lumi-msg-content > h1 { font-size: calc(var(--fs-sm, 13px) * 2 * var(--ab-scale, 1)); }
body[data-ab-text]:not(#_) .lumi-assistant .lumi-msg-content > h2 { font-size: calc(var(--fs-sm, 13px) * 1.5 * var(--ab-scale, 1)); }
body[data-ab-text]:not(#_) .lumi-assistant .lumi-msg-content > h3 { font-size: calc(var(--fs-sm, 13px) * 1.17 * var(--ab-scale, 1)); }
body[data-ab-text]:not(#_) .lumi-assistant .lumi-msg-content > h4 { font-size: calc(var(--fs-sm, 13px) * var(--ab-scale, 1)); }
body[data-ab-text]:not([data-ab-text="medium"]):not(#_) :is(.view-chat .msg.assistant .msg-content, .lumi-assistant .lumi-msg-content) .ab-block:not(.ab-block .ab-block):not([data-ab-scale="self"]) {
  zoom: var(--ab-scale, 1);
}

/* ── 4. Spacing ──────────────────────────────────────────────────────────
   Comfortable is what Settings shows when nothing is set, so it is each
   reply's own rhythm; Compact and Roomy step from there.
   The chat's is chatclean.css's, restated as tokens.
   Lumi's is lumi.css's: the reply's --leading-relaxed, --s-2 under a
   paragraph or a list, no gap between list items, and a block's and display
   math's own margins (blocks.css, diagram.css, styles.css). So in Lumi only
   Compact and Roomy set anything, and choosing Comfortable changes nothing
   there; their steps are the app's spacing tokens (--s-1, --s-3). */
body[data-ab-density="compact"] {
  --ab-leading: 1.5; --ab-flow: 0.55em; --ab-li: 0.12em; --ab-gap: 8px;
  --ab-lumi-flow: var(--s-1, 4px); --ab-lumi-li: 0px; --ab-lumi-math: 8px;
}
body[data-ab-density="comfortable"] { --ab-leading: 1.68; --ab-flow: 0.9em; --ab-li: 0.3em; --ab-gap: 14px; }
body[data-ab-density="roomy"] {
  --ab-leading: 1.88; --ab-flow: 1.3em; --ab-li: 0.6em; --ab-gap: 26px;
  --ab-lumi-flow: var(--s-3, 12px); --ab-lumi-li: var(--s-1, 4px); --ab-lumi-math: 20px;
}
body[data-ab-density]:not(#_) .view-chat .msg.assistant .msg-content > :is(p, ul, ol, blockquote) {
  line-height: var(--ab-leading, 1.68);
}
body[data-ab-density]:not(#_) .view-chat .msg.assistant .msg-content > :is(p, ul, ol):not(:last-child) {
  margin-bottom: var(--ab-flow, 0.9em);
}
body[data-ab-density]:not(#_) .view-chat .msg.assistant .msg-content > :is(ul, ol) > li {
  margin-bottom: var(--ab-li, 0.3em);
}
body[data-ab-density]:not(#_) .view-chat .msg.assistant .msg-content .ab-block {
  margin-top: var(--ab-gap, 14px);
  margin-bottom: var(--ab-gap, 14px);
}
body[data-ab-density]:not(#_) .view-chat .msg.assistant .msg-content > .math-block {
  margin-top: calc(var(--ab-gap, 14px) * 0.6);
  margin-bottom: calc(var(--ab-gap, 14px) * 0.6);
}
body:is([data-ab-density="compact"], [data-ab-density="roomy"]):not(#_) .lumi-assistant .lumi-msg-content > :is(p, ul, ol, blockquote) {
  line-height: var(--ab-leading);
}
body:is([data-ab-density="compact"], [data-ab-density="roomy"]):not(#_) .lumi-assistant .lumi-msg-content > :is(p, ul, ol):not(:last-child) {
  margin-bottom: var(--ab-lumi-flow);
}
body:is([data-ab-density="compact"], [data-ab-density="roomy"]):not(#_) .lumi-assistant .lumi-msg-content > :is(ul, ol) > li {
  margin-bottom: var(--ab-lumi-li);
}
body:is([data-ab-density="compact"], [data-ab-density="roomy"]):not(#_) .lumi-assistant .lumi-msg-content .ab-block {
  margin-top: var(--ab-gap);
  margin-bottom: var(--ab-gap);
}
body:is([data-ab-density="compact"], [data-ab-density="roomy"]):not(#_) .lumi-assistant .lumi-msg-content > .math-block {
  margin-top: var(--ab-lumi-math);
  margin-bottom: var(--ab-lumi-math);
}

/* ── 5. The card ─────────────────────────────────────────────────────────
   Quiet and compact: a note in the margin of the reply, not a dialog. */
.ab-style {
  position: relative;
  box-sizing: border-box;
  width: fit-content;
  min-width: min(100%, 300px);
  max-width: min(100%, 560px);
  padding: 12px 16px 14px 14px;
  border: 1px solid var(--ab-hair);
  border-radius: var(--ab-radius);
  background: var(--ab-card);
  color: var(--ab-ink);
  font: 400 14px/1.45 var(--ab-font-ui);
  letter-spacing: 0;
}
/* :not(#_) outweighs the reply's own p / ul / li rules (styles.css). */
.ab-style:not(#_) p { margin: 0; }
.ab-style-head { display: flex; align-items: flex-start; gap: 10px; }
.ab-style-badge {
  flex: none;
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 999px;
  color: var(--ab-accent);
  background: color-mix(in srgb, var(--ab-accent) 14%, transparent);
}
.ab-style-titles { min-width: 0; padding-top: 4px; }
.ab-style-title { font: 600 14px/1.35 var(--ab-font-ui); color: var(--ab-ink); }
.ab-style:not(#_) .ab-style-note { margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--ab-muted); }

.ab-style:not(#_) .ab-style-list {
  list-style: none;
  display: grid; gap: 7px;
  margin: 10px 0 0; padding: 0 0 0 38px;
}
.ab-style:not(#_) .ab-style-item { display: flex; align-items: flex-start; gap: 9px; margin: 0; }
.ab-style-mark {
  flex: none;
  display: grid; place-items: center;
  width: 18px; height: 18px; margin-top: 1px;
  border-radius: 999px;
  color: var(--ab-good);
  background: var(--ab-good-soft);
}
.ab-style-item:is([data-state="pending"], [data-state="earlier"], [data-state="skip"], [data-state="undone"]) .ab-style-mark {
  color: var(--ab-muted);
  background: color-mix(in srgb, var(--ab-muted) 14%, transparent);
}
.ab-style-item[data-state="same"] .ab-style-mark { color: var(--ab-muted); }
.ab-style-item[data-state="error"] .ab-style-mark { color: var(--ab-warn); background: var(--ab-warn-soft); }
.ab-style-line { min-width: 0; overflow-wrap: anywhere; }
.ab-style-text { color: var(--ab-ink); }
.ab-style-item:is([data-state="skip"], [data-state="pending"]) .ab-style-text { color: var(--ab-muted); }
.ab-style-item[data-state="undone"] .ab-style-text {
  color: var(--ab-muted);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--ab-muted) 70%, transparent);
}
.ab-style-why { display: block; margin-top: 1px; font-size: 12.5px; line-height: 1.4; color: var(--ab-muted); }
.ab-style-item[data-state="error"] .ab-style-why { color: var(--ab-warn); }

.ab-style-swatch { display: inline-flex; gap: 3px; margin-left: 8px; vertical-align: -1px; }
.ab-style-swatch i, .set-style-key i {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--ab-measure);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ab-ink) 12%, transparent);
}
.ab-style-swatch i.is-c, .set-style-key i.is-c { background: var(--ab-calc); }

.ab-style-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-left: 38px; }
.ab-style-btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 0 13px 0 11px;
  border: 1px solid var(--ab-rule);
  border-radius: 999px;
  background: transparent;
  color: var(--ab-ink);
  font: 500 13px/1 var(--ab-font-ui);
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease;
}
.ab-style-btn svg { color: var(--ab-muted); }
.ab-style-btn:hover:not(:disabled, [aria-disabled="true"]) {
  background: color-mix(in srgb, var(--ab-ink) 6%, transparent);
  border-color: color-mix(in srgb, var(--ab-ink) 30%, transparent);
}
.ab-style-btn:focus-visible { outline: 2px solid var(--ab-accent); outline-offset: 2px; }
.ab-style-btn:is(:disabled, [aria-disabled="true"]) { opacity: 0.5; cursor: default; }
.ab-style-btn[data-act="undo"] svg, .ab-style-btn[data-act="apply"] svg { color: var(--ab-accent); }

/* A card set back on the page: one that asks from a reply drawn anew
   (history, a chat switched back to, a reply cut off inside the block), one
   that was undone, and one with nothing to save. */
.ab-style[data-fresh="0"][data-phase="confirm"], .ab-style[data-phase="undone"], .ab-style[data-phase="empty"] {
  background: transparent;
  border-style: dashed;
  border-color: var(--ab-rule);
}
.ab-style:is([data-fresh="0"][data-phase="confirm"], [data-phase="undone"], [data-phase="empty"]) .ab-style-badge {
  color: var(--ab-muted);
  background: color-mix(in srgb, var(--ab-muted) 12%, transparent);
}
.ab-style:is([data-fresh="0"][data-phase="confirm"], [data-phase="undone"]) .ab-style-title { font-weight: 500; color: var(--ab-muted); }
.ab-style[data-phase="failed"] .ab-style-badge { color: var(--ab-warn); background: var(--ab-warn-soft); }
.ab-style:is([data-phase="saving"], [data-phase="undoing"]) .ab-style-badge svg { animation: ab-style-breathe 1.1s ease-in-out infinite; }
@keyframes ab-style-breathe { 50% { opacity: 0.35; } }

.ab-style-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;
}

@media (max-width: 420px) {
  .ab-style { width: 100%; padding: 12px 12px 13px; }
  .ab-style:not(#_) :is(.ab-style-list, .ab-style-actions) { padding-left: 0; }
}

/* ── 6. Settings: How Aluma answers ──────────────────────────────────────
   Rows, segmented controls and inputs are the page's own (.set-row,
   .seg-group, .set-input, .ghost-btn); this adds the captions between the
   panels, lets a long control wrap, and draws the preview. */
.set-style-intro {
  margin: 2px var(--s-2, 8px) 0;
  max-width: 640px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-dim);
}
/* Captions inside the one section: small and spaced, like the preview's own
   label, so they never read as a second section title. */
.set-style-cap {
  margin: var(--s-5, 20px) var(--s-5, 20px) 0;
  font: 600 11.5px/1.2 var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.set-style-group > .set-row:first-child { margin-top: var(--s-2, 8px) !important; }
body[data-view="settings"] .set-style .seg-group {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex: 0 0 auto;
  max-width: 100%;
  min-width: 0;
}
body[data-view="settings"] .set-style .seg-btn { white-space: nowrap; }
body[data-view="settings"] .set-style .seg-btn .ab-style-swatch { margin: 0; }
body[data-view="settings"] .set-style .seg-group[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }
body[data-view="settings"] .set-style .seg-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.set-style-err {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--danger, #c54255);
}
.set-style-err[hidden] { display: none; }

/* A rule is the row's whole text; its remove button is a small round "x". */
/* phone.css stacks every row; a rule keeps its remove button on its line. */
body[data-view="settings"] .set-row.set-style-rule { flex-direction: row; align-items: center; }
.set-style-rule-text { min-width: 0; }
.set-style-rule-text .set-label { font-weight: 450; overflow-wrap: anywhere; line-height: 1.45; }
.set-style-del {
  flex: none;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
}
.set-style-del:hover:not(:disabled) { color: var(--danger, #c54255); background: rgb(var(--danger-rgb, 197 66 85) / 0.1); }
.set-style-del:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.set-style-del:disabled { opacity: 0.4; cursor: default; }
.set-style-add { display: flex; gap: 8px; flex: 0 1 380px; min-width: 0; max-width: 380px; }
body[data-view="settings"] .set-style-add .set-input { flex: 1 1 auto !important; max-width: none !important; }
body[data-view="settings"] .set-style-add .ghost-btn { flex: none; }
.set-style-load { margin: var(--s-3, 12px) var(--s-2, 8px) 0; font-size: 13px; color: var(--text-dim); }
.set-style-load[hidden] { display: none; }
.set-style-retry {
  border: 0; padding: 0; background: none;
  color: var(--accent); font: inherit; font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.set-style-reset.is-armed { color: var(--danger, #c54255) !important; border-color: currentColor !important; }

/* The preview: a sample reply drawn with the reply's own type and tokens, so
   every choice above shows here before it reaches a chat. */
.set-style-preview {
  margin: var(--s-3, 12px) 0 0;
  padding: 16px 18px 18px;
  border: 1px solid var(--border);
  border-radius: var(--soft-panel, 20px);
  background: var(--bg);
}
.set-style-preview-cap {
  margin: 0 0 10px;
  font: 600 11.5px/1 var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.set-style-reply {
  color: var(--ab-ink);
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  font-size: calc(16.5px * var(--ab-scale, 1));
  line-height: var(--ab-leading, 1.68);
}
.set-style-reply > p { margin: 0 0 var(--ab-flow, 0.9em); }
.set-style-q { font-family: var(--ab-font-math); font-style: italic; }
.set-style-q.is-measure { color: var(--ab-measure); }
.set-style-q.is-calc { color: var(--ab-calc); }
.set-style-math {
  margin: 0 0 var(--ab-flow, 0.9em);
  overflow-x: auto;
  font-size: calc(15.5px * var(--ab-scale, 1));
  color: var(--ab-ink);
}
.set-style-math .katex-display { margin: 0.2em 0; }
.set-style-table-wrap { overflow-x: auto; margin: 0 0 var(--ab-flow, 0.9em); }
.set-style-table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 250px;
  border: 1px solid var(--ab-rule);
  border-radius: var(--ab-radius-sm);
  overflow: hidden;
  background: var(--ab-card);
  font: 400 calc(14px * var(--ab-scale, 1))/1.4 var(--ab-font-ui);
}
.set-style-table { font-variant-numeric: tabular-nums; }
.set-style-table th, .set-style-table td {
  padding: calc(3px + var(--ab-gap, 14px) / 4) 14px;
  text-align: right;
}
.set-style-table th {
  font-family: var(--ab-font-mono);
  font-size: 0.86em;
  font-weight: 600;
}
.set-style-table th.is-measure { color: var(--ab-measure); background: var(--ab-measure-soft); }
.set-style-table th.is-calc { color: var(--ab-calc); background: var(--ab-calc-soft); }
.set-style-table td { border-top: 1px solid var(--ab-hair); color: var(--ab-ink); }
.set-style-table td.is-calc { color: var(--ab-calc); }
.set-style-key {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  margin: 0 !important;
  font: 400 12.5px/1.4 var(--ab-font-ui);
  color: var(--ab-muted);
}
.set-style-key span { display: inline-flex; align-items: center; gap: 6px; }

/* A phone stacks the row (phone.css), and the control becomes equal cells
   across the full width: one row for up to four choices, rows of three for
   five. A long word ("Extra large") may take two lines inside its cell. */
@media (max-width: 767px) {
  body[data-view="settings"] .set-style .seg-group {
    display: grid;
    grid-template-columns: repeat(var(--seg-cols, 4), minmax(0, 1fr));
    align-self: stretch;
    width: 100%;
  }
  body[data-view="settings"] .set-style .seg-group[data-count="3"] { --seg-cols: 3; }
  body[data-view="settings"] .set-style .seg-group[data-count="5"],
  body[data-view="settings"] .set-style .seg-group[data-count="6"] { --seg-cols: 3; }
  body[data-view="settings"] .set-style .seg-btn {
    justify-content: center;
    min-height: 40px;
    padding: 6px 6px !important;
    white-space: normal;
    text-align: center;
    line-height: 1.15;
  }
  .set-style-add { flex: 1 1 auto; max-width: none; }
  .set-style-preview { padding: 14px 14px 16px; }
}
/* Below 360px even a third of the row is narrower than one word and its
   padding ("Comfortable", or "Contrast" with its swatch), and fit.css keeps a
   button as wide as its word, so it would run over the next one. Every group
   takes two columns there. */
@media (max-width: 359px) {
  body[data-view="settings"] .set-style .seg-group[data-count] { --seg-cols: 2; }
}
@media (max-width: 420px) {
  .set-style-table { min-width: 0; }
  .set-style-table th, .set-style-table td { padding-left: 9px; padding-right: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .ab-style:is([data-phase="saving"], [data-phase="undoing"]) .ab-style-badge svg { animation: none; }
  .ab-style-btn { transition: none; }
}