*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: "Instrument Sans", system-ui, sans-serif;
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

:root,
  [data-theme='light'] {
  /* surfaces */
  --c-bg: 245 248 250;
  /* #F5F8FA app background          */
  --c-bg-deep: 237 243 246;
  /* #EDF3F6 rails, recessed zones   */
  --c-surface: 255 255 255;
  /* #FFFFFF cards                   */
  --c-surface-muted: 241 245 247;
  --c-border: 218 229 235;
  /* #DAE5EB hairlines               */
  /* text */
  --c-text: 30 51 64;
  /* #1E3340 primary                 */
  --c-ink: 15 34 48;
  /* #0F2230 headlines               */
  --c-muted: 95 120 136;
  /* #5F7888 secondary (DESIGN.md canonical; was #566E7D drift) */
  --c-data: 42 71 89;
  /* #2A4759 numerals                */
  /* accent — CT brand blue */
  --c-accent: 27 93 126;
  /* #1B5D7E                         */
  --c-accent-strong: 21 80 110;
  /* #15506E hover/pressed           */
  /* semantics */
  --c-up: 39 117 74;
  /* #27754A (AA on up/10 chips)     */
  --c-down: 178 59 46;
  /* #B23B2E                         */
  --c-warn: 135 97 8;
  /* #876108 (AA on warn/10 chips)   */
  /* sidebar — deep navy in daylight, ties the two modes together.
       On-sidebar text/accent tokens stay light in BOTH modes because
       the sidebar surface never goes light. */
  --c-sidebar: 15 34 48;
  /* #0F2230                         */
  --c-sidebar-hover: 22 48 63;
  /* #16303F                         */
  --c-sidebar-active: 27 58 76;
  /* #1B3A4C                         */
  --c-sidebar-border: 31 60 78;
  /* #1F3C4E                         */
  --c-sidebar-ink: 226 232 240;
  /* #E2E8F0 active/strong text    */
  --c-sidebar-muted: 148 163 184;
  /* #94A3B8 nav labels            */
  --c-sidebar-accent: 91 171 208;
  /* #5BABD0 active icon, focus    */
  /* modal scrim — ONE treatment app-wide (DESIGN.md rule iv). Deep ink at
       low alpha so cards read as lifted; applied via the .lore-scrim utility. */
  --scrim: 15 34 48;
  /* #0F2230 (ink) */
  --scrim-alpha: 0.42;
}

[data-theme='dark'] {
  /* surfaces — "the Room" */
  --c-bg: 14 20 26;
  /* #0E141A room background         */
  --c-bg-deep: 10 15 20;
  /* #0A0F14 rails, command desk     */
  --c-surface: 21 32 42;
  /* #15202A cards, ask box          */
  --c-surface-muted: 17 26 34;
  --c-border: 34 50 63;
  /* #22323F hairlines               */
  /* text */
  --c-text: 229 237 242;
  /* #E5EDF2                         */
  --c-ink: 242 248 251;
  /* #F2F8FB headlines               */
  --c-muted: 108 130 148;
  /* #6C8294                         */
  --c-data: 175 200 216;
  /* #AFC8D8 numerals                */
  /* accent — CT blue brightened for dark legibility */
  --c-accent: 63 143 181;
  /* #3F8FB5                         */
  --c-accent-strong: 91 171 208;
  /* #5BABD0                         */
  /* semantics */
  --c-up: 111 181 145;
  /* #6FB591                         */
  --c-down: 208 130 118;
  /* #D08276 (AA on down/10 chips)   */
  --c-warn: 217 164 65;
  /* #D9A441                         */
  /* sidebar follows the room */
  --c-sidebar: 10 15 20;
  --c-sidebar-hover: 17 26 34;
  --c-sidebar-active: 21 32 42;
  --c-sidebar-border: 34 50 63;
  --c-sidebar-ink: 242 248 251;
  --c-sidebar-muted: 108 130 148;
  --c-sidebar-accent: 91 171 208;
  /* the Room is already near-black; a pure-black scrim at a higher alpha
       keeps modals separated from the dark surfaces behind them. */
  --scrim: 5 8 11;
  --scrim-alpha: 0.62;
  color-scheme: dark;
}

html {
  background-color: rgb(var(--c-bg));
}

.\!container {
  width: 100% !important;
}

.container {
  width: 100%;
}

@media (min-width: 640px) {
  .\!container {
    max-width: 640px !important;
  }

  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .\!container {
    max-width: 768px !important;
  }

  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .\!container {
    max-width: 1024px !important;
  }

  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .\!container {
    max-width: 1280px !important;
  }

  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .\!container {
    max-width: 1536px !important;
  }

  .container {
    max-width: 1536px;
  }
}

/* ONE scrim treatment for every modal/overlay backdrop (DESIGN.md rule iv).
     Replaces the drifting bg-gray-900/40, /45, black/25 … literals. */

.lore-scrim {
  background-color: rgb(var(--scrim) / var(--scrim-alpha));
}

.compose-blog-prose h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.45em;
  font-weight: 500;
  line-height: 1.3;
  color: rgb(var(--c-ink));
  margin: 1.1em 0 0.45em;
}

.compose-blog-prose h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.2em;
  font-weight: 500;
  color: rgb(var(--c-ink));
  margin: 1em 0 0.4em;
}

.compose-blog-prose h4 {
  font-weight: 600;
  color: rgb(var(--c-ink));
  margin: 0.9em 0 0.35em;
}

.compose-blog-prose p {
  margin: 0 0 0.7em;
}

.compose-blog-prose ul, .compose-blog-prose ol {
  margin: 0.4em 0 0.8em;
  padding-left: 1.4em;
}

.compose-blog-prose ul {
  list-style: disc;
}

.compose-blog-prose ol {
  list-style: decimal;
}

.compose-blog-prose li {
  margin-bottom: 0.3em;
}

.compose-blog-prose blockquote {
  border-left: 3px solid rgb(var(--c-accent));
  background: rgb(var(--c-accent) / 0.06);
  padding: 0.5em 1em;
  margin: 0.8em 0;
  border-radius: 0 8px 8px 0;
  color: rgb(var(--c-data));
}

.compose-blog-prose code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9em;
  background: rgb(var(--c-surface-muted));
  padding: 0.1em 0.35em;
  border-radius: 4px;
}

.compose-blog-prose a {
  color: rgb(var(--c-accent));
  text-decoration: underline;
}

.skill-diff {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.7;
  border: 1px solid rgb(var(--c-border));
  border-radius: 10px;
  overflow: hidden;
  background: rgb(var(--c-surface));
}

.skill-diff .row {
  display: grid;
  grid-template-columns: 44px 1fr;
  border-left: 3px solid transparent;
}

.skill-diff .\!row {
  display: grid !important;
  grid-template-columns: 44px 1fr !important;
  border-left: 3px solid transparent !important;
}

.skill-diff .ln {
  text-align: right;
  padding: 0 10px;
  color: rgb(var(--c-muted));
  opacity: 0.6;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border-right: 1px solid rgb(var(--c-border));
}

.skill-diff .tx {
  padding: 0 12px;
  white-space: pre-wrap;
  word-break: break-word;
  color: rgb(var(--c-data));
}

.skill-diff .add {
  background: rgb(var(--c-up) / 0.10);
  border-left-color: rgb(var(--c-up) / 0.45);
}

.skill-diff .add .tx::before {
  content: "+ ";
  color: rgb(var(--c-up));
}

.skill-diff .del {
  background: rgb(var(--c-down) / 0.09);
  border-left-color: rgb(var(--c-down) / 0.45);
}

.skill-diff .del .tx::before {
  content: "\2212 ";
  color: rgb(var(--c-down));
}

.skill-diff .ctx .tx::before {
  content: "  ";
}

.skill-diff .\!ctx .tx::before {
  content: "  " !important;
}

.skill-diff .hunk {
  background: rgb(var(--c-bg-deep));
  color: rgb(var(--c-muted));
  padding: 3px 12px;
  border-top: 1px solid rgb(var(--c-border));
  border-bottom: 1px solid rgb(var(--c-border));
}

.skill-diff .\!hunk {
  background: rgb(var(--c-bg-deep)) !important;
  color: rgb(var(--c-muted)) !important;
  padding: 3px 12px !important;
  border-top: 1px solid rgb(var(--c-border)) !important;
  border-bottom: 1px solid rgb(var(--c-border)) !important;
}

.skill-diff .hunk:first-child {
  border-top: 0;
}

.skill-diff .\!hunk:first-child {
  border-top: 0 !important;
}

.replay-compare-room,
  .replay-compare-shell {
  /* True fullscreen overlay: without fixed+top z-index the shell's sticky
       header z-fights the app chrome on scroll (operator report 2026-07-03). */
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow-y: auto;
  min-height: 100dvh;
  background: rgb(var(--c-bg));
  color: rgb(var(--c-text));
  font-family: 'Instrument Sans', system-ui, sans-serif;
}

.replay-compare-room {
  --replay-compare-sticky-top: 0px;
  overflow-x: clip;
}

.replay-compare-appbar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  height: 48px;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid rgb(var(--c-border));
  background: rgb(var(--c-bg-deep));
  padding: 0 14px;
}

.replay-compare-appbar .logo {
  display: grid;
  height: 28px;
  width: 28px;
  place-items: center;
  border-radius: 8px;
  background: rgb(var(--c-accent));
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

.replay-compare-appbar b {
  color: rgb(var(--c-ink));
  font-size: 15px;
  font-weight: 600;
}

.replay-compare-appbar nav {
  display: flex;
  align-items: center;
  gap: 2px;
}

.replay-compare-appbar a {
  border-radius: 8px;
  padding: 6px 12px;
  color: rgb(var(--c-muted));
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
}

.replay-compare-appbar a.active,
  .replay-compare-appbar a:hover {
  background: rgb(var(--c-accent) / 0.10);
  color: rgb(var(--c-accent-strong));
}

.replay-compare-appbar a.\!active {
  background: rgb(var(--c-accent) / 0.10) !important;
  color: rgb(var(--c-accent-strong)) !important;
}

.replay-compare-appbar .spacer {
  flex: 1 1 auto;
}

.replay-compare-vault,
  .replay-compare-avatar,
  .replay-compare-job,
  .replay-compare-replayed,
  .replay-compare-pill,
  .replay-compare-metric,
  .replay-compare-label,
  .replay-compare-legend,
  .replay-compare-foot,
  .replay-compare-diff,
  .replay-compare-drawer .drawer-counts {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

.replay-compare-vault {
  border: 1px solid rgb(var(--c-border));
  border-radius: 999px;
  padding: 4px 10px;
  color: rgb(var(--c-muted));
  font-size: 11px;
  white-space: nowrap;
}

.replay-compare-avatar {
  display: grid;
  height: 28px;
  width: 28px;
  place-items: center;
  border: 1px solid rgb(var(--c-border));
  border-radius: 999px;
  background: rgb(var(--c-surface));
  color: rgb(var(--c-data));
  font-size: 11px;
}

/* CC rail — checklist parity with the approved C2 mock (.step/.gate). */

.fb-rail-step {
  position: relative;
  padding-left: 28px;
  padding-bottom: 20px;
}

.fb-rail-step:last-child {
  padding-bottom: 0;
}

.fb-rail-step::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 18px;
  bottom: -2px;
  width: 1px;
  background: rgb(var(--c-border));
}

.fb-rail-step:last-child::before {
  display: none;
}

.fb-rail-glyph {
  position: absolute;
  left: 0;
  top: 0;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  border: 1px solid rgb(var(--c-border));
  background: rgb(var(--c-bg-deep));
  color: rgb(var(--c-muted));
}

.fb-rail-step.is-done .fb-rail-glyph {
  color: rgb(var(--c-up));
  border-color: rgb(var(--c-up) / 0.4);
}

.fb-rail-step.is-current .fb-rail-glyph {
  color: rgb(var(--c-bg-deep));
  background: rgb(var(--c-warn));
  border-color: rgb(var(--c-warn));
}

.fb-rail-step.is-failed .fb-rail-glyph {
  color: rgb(var(--c-down));
  border-color: rgb(var(--c-down) / 0.5);
}

.fb-rail-name {
  font-size: 12.5px;
  font-weight: 500;
  color: rgb(var(--c-text));
  line-height: 1.35;
}

.fb-rail-step.is-pending .fb-rail-name {
  color: rgb(var(--c-muted));
}

.fb-rail-step.is-current .fb-rail-name {
  color: rgb(var(--c-ink));
}

.fb-rail-step.is-failed .fb-rail-name {
  color: rgb(var(--c-down));
}

.fb-rail-meta {
  font-size: 10.5px;
  color: rgb(var(--c-muted));
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  margin-top: 3px;
  letter-spacing: 0.01em;
}

.fb-rail-step.is-current .fb-rail-meta {
  color: rgb(var(--c-warn));
}

.fb-rail-step.is-failed .fb-rail-meta {
  color: rgb(var(--c-down));
}

.fb-rail-gates {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid rgb(var(--c-border));
}

.fb-gate {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 0;
  font-size: 12px;
  color: rgb(var(--c-muted));
}

.fb-gate-mark {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  border: 1px solid rgb(var(--c-border));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: rgb(var(--c-muted));
  flex: none;
}

.fb-gate-name {
  color: rgb(var(--c-text));
  opacity: 0.75;
  min-width: 0;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fb-gate-stat {
  margin-left: auto;
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: rgb(var(--c-muted));
  white-space: nowrap;
}

.fb-gate.is-pass .fb-gate-mark {
  color: rgb(var(--c-up));
  border-color: rgb(var(--c-up) / 0.45);
  background: rgb(var(--c-up) / 0.08);
}

.fb-gate.is-pass .fb-gate-name {
  color: rgb(var(--c-text));
  opacity: 1;
}

.fb-gate.is-pass .fb-gate-stat {
  color: rgb(var(--c-up));
}

.fb-gate.is-fail .fb-gate-mark {
  color: rgb(var(--c-down));
  border-color: rgb(var(--c-down) / 0.5);
  background: rgb(var(--c-down) / 0.08);
}

.fb-gate.is-fail .fb-gate-stat {
  color: rgb(var(--c-down));
}

.fb-rail-land {
  margin-top: 14px;
  font-size: 12px;
  color: rgb(var(--c-accent-strong));
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
}

.fb-rail-land:hover:not(:disabled) {
  text-decoration: underline;
}

.fb-rail-land:disabled {
  color: rgb(var(--c-muted));
  cursor: default;
}

/* Task #33: transient highlight when a #job=<id> deep link scrolls a fix-job
     card into view. A soft accent ring that fades, so the eye lands on it. */

.fb-job-focus-ring {
  outline: 2px solid rgb(var(--c-accent));
  outline-offset: 2px;
  border-radius: 0.375rem;
  animation: fb-job-focus-pulse 2.4s ease-out 1;
}

@keyframes fb-job-focus-pulse {
  0% {
    box-shadow: 0 0 0 0 rgb(var(--c-accent) / 0.45);
  }

  60% {
    box-shadow: 0 0 0 8px rgb(var(--c-accent) / 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgb(var(--c-accent) / 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fb-job-focus-ring {
    animation: none;
  }
}

.replay-compare-actionhead {
  position: sticky;
  top: var(--replay-compare-sticky-top, 0);
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid rgb(var(--c-border));
  background: rgb(var(--c-bg-deep));
  padding: 12px 24px;
}

.replay-compare-question {
  min-width: 280px;
  flex: 1 1 24rem;
}

.replay-compare-label {
  margin-bottom: 3px;
  color: rgb(var(--c-muted));
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
}

.replay-compare-question h1 {
  max-width: 66ch;
  color: rgb(var(--c-ink));
  font-family: Fraunces, Georgia, serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}

.replay-compare-jobline {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
}

.replay-compare-job {
  color: rgb(var(--c-data));
  font-size: 11.5px;
}

.replay-compare-replayed {
  color: rgb(var(--c-muted));
  font-size: 11px;
}

.replay-compare-pill {
  border: 1px solid rgb(var(--c-border));
  border-radius: 999px;
  padding: 3px 9px;
  color: rgb(var(--c-muted));
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.replay-compare-pill.ready {
  border-color: rgb(var(--c-accent-strong) / 0.50);
  background: rgb(var(--c-accent) / 0.10);
  color: rgb(var(--c-accent-strong));
}

.replay-compare-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 10px;
}

.replay-compare-btn {
  display: inline-flex;
  min-height: 40px;
  min-width: 116px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 600;
  outline: none;
  transition: background 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out, filter 150ms ease-out;
}

.replay-compare-btn:focus-visible {
  box-shadow: 0 0 0 2px rgb(var(--c-accent) / 0.35);
}

.replay-compare-btn.approve {
  background: rgb(var(--c-up));
  color: rgb(var(--c-bg-deep));
}

.replay-compare-btn.\!approve {
  background: rgb(var(--c-up)) !important;
  color: rgb(var(--c-bg-deep)) !important;
}

.replay-compare-btn.approve:hover {
  filter: brightness(1.08);
}

.replay-compare-btn.\!approve:hover {
  filter: brightness(1.08) !important;
}

.replay-compare-btn.reject {
  border-color: rgb(var(--c-down));
  color: rgb(var(--c-down));
}

.replay-compare-btn.reject:hover {
  background: rgb(var(--c-down) / 0.10);
}

.replay-compare-btn.ghost {
  min-width: 0;
  border-color: rgb(var(--c-border));
  color: rgb(var(--c-data));
  font-weight: 500;
}

.replay-compare-btn.ghost:hover,
  .replay-compare-btn.ghost.is-open {
  border-color: rgb(var(--c-accent));
  background: rgb(var(--c-accent) / 0.10);
  color: rgb(var(--c-accent-strong));
}

.replay-compare-wrap {
  width: min(100%, 1180px);
  margin: 0 auto;
  padding: 20px 24px 96px;
}

.replay-compare-verdict {
  margin-bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  border: 1px solid rgb(var(--c-border));
  border-radius: 12px;
  background: rgb(var(--c-surface));
  padding: 13px 16px;
}

.replay-compare-verdict .title {
  color: rgb(var(--c-ink));
  font-family: Fraunces, Georgia, serif;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.replay-compare-verdict .\!title {
  color: rgb(var(--c-ink)) !important;
  font-family: Fraunces, Georgia, serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

.replay-compare-verdict .divider {
  align-self: stretch;
  width: 1px;
  background: rgb(var(--c-border));
}

.replay-compare-metric {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  color: rgb(var(--c-data));
  font-size: 13px;
}

.replay-compare-metric-key {
  color: rgb(var(--c-muted));
  font-size: 10.5px;
  text-transform: uppercase;
}

.replay-compare-metric .muted {
  color: rgb(var(--c-muted));
}

.replay-compare-metric .\!muted {
  color: rgb(var(--c-muted)) !important;
}

.replay-compare-metric .up,
  .replay-compare-btn .up,
  .replay-compare-drawer .up {
  color: rgb(var(--c-up));
}

.replay-compare-metric .down,
  .replay-compare-btn .down,
  .replay-compare-drawer .down {
  color: rgb(var(--c-down));
}

.replay-compare-headline-after {
  margin: 4px 0;
  color: rgb(var(--c-ink));
  font-family: Fraunces, Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
}

.replay-compare-headline-before {
  margin-bottom: 16px;
  color: rgb(var(--c-muted));
  font-size: 13px;
}

.replay-compare-headline-before s {
  color: rgb(var(--c-down));
  opacity: 0.85;
}

/* #17: an errored BEFORE state is a real failure — surface the frozen error
     text in the down colour (never struck through, which read as "old prose"). */

.replay-compare-before-error {
  color: rgb(var(--c-down));
  font-weight: 500;
}

.replay-compare-datacard {
  overflow: hidden;
  border: 1px solid rgb(var(--c-border));
  border-radius: 12px;
  background: rgb(var(--c-surface));
}

.replay-compare-datahead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid rgb(var(--c-border));
  padding: 11px 16px;
}

.replay-compare-datahead h3 {
  color: rgb(var(--c-ink));
  font-size: 13px;
  font-weight: 600;
}

.replay-compare-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  color: rgb(var(--c-muted));
  font-size: 11px;
}

.replay-compare-swatch {
  display: inline-block;
  height: 10px;
  width: 10px;
  margin-right: 5px;
  vertical-align: -1px;
  border: 1px solid rgb(var(--c-up) / 0.50);
  border-radius: 3px;
  background: rgb(var(--c-up) / 0.14);
}

.replay-compare-tablescroll {
  overflow-x: auto;
}

.replay-compare-datacard table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: 13px;
}

.replay-compare-datacard th {
  position: sticky;
  top: 0;
  background: rgb(var(--c-bg));
  color: rgb(var(--c-muted));
  padding: 9px 12px;
  text-align: left;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
}

.replay-compare-datacard th.is-added,
  .replay-compare-datacard td.is-added {
  background: rgb(var(--c-up) / 0.14);
  color: rgb(var(--c-up));
}

/* Header row of an ADDED column reads darker/stronger than its cells so
     the header/content boundary stays visible (operator request 2026-07-04). */

.replay-compare-datacard th.is-added {
  background: rgb(var(--c-up) / 0.32);
  color: rgb(var(--c-ink));
  font-weight: 600;
}

.replay-compare-datacard th.is-added span {
  font-weight: 400;
}

.replay-compare-datacard th.is-removed,
  .replay-compare-datacard td.is-removed {
  background: rgb(var(--c-down) / 0.12);
  color: rgb(var(--c-down));
  text-decoration-color: rgb(var(--c-down) / 0.6);
}

.replay-compare-datacard th.is-removed span {
  font-weight: 400;
}

.replay-compare-datacard td {
  border-top: 1px solid rgb(var(--c-border));
  padding: 8px 12px;
  color: rgb(var(--c-data));
}

.replay-compare-datacard td.mono,
  .replay-compare-datacard .mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.replay-compare-datacard tr.is-new td {
  background: rgb(var(--c-up) / 0.14);
}

.replay-compare-datacard tr.is-new td:first-child {
  border-left: 2px solid rgb(var(--c-up) / 0.50);
}

.replay-compare-rowtag {
  margin-left: 8px;
  border: 1px solid rgb(var(--c-up) / 0.50);
  border-radius: 5px;
  padding: 1px 5px;
  color: rgb(var(--c-up));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 500;
  vertical-align: 1px;
}

.replay-compare-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  border-top: 1px solid rgb(var(--c-border));
  padding: 10px 16px;
  color: rgb(var(--c-muted));
  font-size: 11.5px;
}

.replay-compare-backdrop {
  position: fixed;
  inset: var(--replay-compare-sticky-top, 0) 0 0;
  z-index: 54;
  display: none;
  background: rgb(0 0 0 / 0.45);
}

.replay-compare-backdrop.is-open {
  display: block;
}

.replay-compare-drawer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 55;
  display: flex;
  max-height: 70vh;
  transform: translateY(calc(100% - 46px));
  flex-direction: column;
  border-top: 1px solid rgb(var(--c-border));
  background: rgb(var(--c-bg-deep));
  box-shadow: 0 -10px 40px rgb(0 0 0 / 0.50);
  transition: transform 220ms ease-out;
}

.replay-compare-drawer.is-open {
  transform: translateY(0);
}

.replay-compare-drawer-handle {
  display: flex;
  height: 46px;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid transparent;
  padding: 0 20px;
  text-align: left;
  outline: none;
}

.replay-compare-drawer-handle:focus-visible {
  box-shadow: inset 0 0 0 2px rgb(var(--c-accent) / 0.35);
}

.replay-compare-drawer.is-open .replay-compare-drawer-handle {
  border-bottom-color: rgb(var(--c-border));
}

.replay-compare-drawer .drawer-title {
  color: rgb(var(--c-ink));
  font-size: 13px;
  font-weight: 600;
}

.replay-compare-drawer .drawer-counts {
  color: rgb(var(--c-muted));
  font-size: 11px;
}

.replay-compare-drawer .drawer-chevron {
  margin-left: auto;
  color: rgb(var(--c-accent-strong));
  transition: transform 220ms ease-out;
}

.replay-compare-drawer.is-open .drawer-chevron {
  transform: rotate(180deg);
}

.replay-compare-diffscroll {
  overflow: auto;
  padding: 8px 0 16px;
}

.replay-compare-diff {
  font-size: 12.5px;
  line-height: 1.65;
}

.replay-compare-diff-line {
  display: flex;
  border-left: 2px solid transparent;
  padding: 0 20px;
  white-space: pre;
}

.replay-compare-diff-line .gutter {
  width: 22px;
  flex: 0 0 22px;
  color: rgb(var(--c-muted));
  opacity: 0.72;
  text-align: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.replay-compare-diff-line .code {
  min-width: 0;
  flex: 1 1 auto;
}

.replay-compare-diff-line.add {
  border-left-color: rgb(var(--c-up) / 0.50);
  background: rgb(var(--c-up) / 0.14);
}

.replay-compare-diff-line.del {
  border-left-color: rgb(var(--c-down) / 0.50);
  background: rgb(var(--c-down) / 0.14);
}

.replay-compare-diff-line.add .gutter {
  color: rgb(var(--c-up));
}

.replay-compare-diff-line.del .gutter {
  color: rgb(var(--c-down));
}

.replay-compare-diff-line.ctx .code {
  color: rgb(var(--c-muted));
}

.replay-compare-diff-line.\!ctx .code {
  color: rgb(var(--c-muted)) !important;
}

@media (max-width: 767px) {
  .replay-compare-appbar nav,
    .replay-compare-vault {
    display: none;
  }

  /* CC rail — checklist parity with the approved C2 mock (.step/.gate). */

  .fb-rail-step {
    position: relative;
    padding-left: 28px;
    padding-bottom: 20px;
  }

  .fb-rail-step:last-child {
    padding-bottom: 0;
  }

  .fb-rail-step::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 18px;
    bottom: -2px;
    width: 1px;
    background: rgb(var(--c-border));
  }

  .fb-rail-step:last-child::before {
    display: none;
  }

  .fb-rail-glyph {
    position: absolute;
    left: 0;
    top: 0;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    border: 1px solid rgb(var(--c-border));
    background: rgb(var(--c-bg-deep));
    color: rgb(var(--c-muted));
  }

  .fb-rail-step.is-done .fb-rail-glyph {
    color: rgb(var(--c-up));
    border-color: rgb(var(--c-up) / 0.4);
  }

  .fb-rail-step.is-current .fb-rail-glyph {
    color: rgb(var(--c-bg-deep));
    background: rgb(var(--c-warn));
    border-color: rgb(var(--c-warn));
  }

  .fb-rail-step.is-failed .fb-rail-glyph {
    color: rgb(var(--c-down));
    border-color: rgb(var(--c-down) / 0.5);
  }

  .fb-rail-name {
    font-size: 12.5px;
    font-weight: 500;
    color: rgb(var(--c-text));
    line-height: 1.35;
  }

  .fb-rail-step.is-pending .fb-rail-name {
    color: rgb(var(--c-muted));
  }

  .fb-rail-step.is-current .fb-rail-name {
    color: rgb(var(--c-ink));
  }

  .fb-rail-step.is-failed .fb-rail-name {
    color: rgb(var(--c-down));
  }

  .fb-rail-meta {
    font-size: 10.5px;
    color: rgb(var(--c-muted));
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    margin-top: 3px;
    letter-spacing: 0.01em;
  }

  .fb-rail-step.is-current .fb-rail-meta {
    color: rgb(var(--c-warn));
  }

  .fb-rail-step.is-failed .fb-rail-meta {
    color: rgb(var(--c-down));
  }

  .fb-rail-gates {
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid rgb(var(--c-border));
  }

  .fb-gate {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 0;
    font-size: 12px;
    color: rgb(var(--c-muted));
  }

  .fb-gate-mark {
    width: 13px;
    height: 13px;
    border-radius: 3px;
    border: 1px solid rgb(var(--c-border));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: rgb(var(--c-muted));
    flex: none;
  }

  .fb-gate-name {
    color: rgb(var(--c-text));
    opacity: 0.75;
    min-width: 0;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .fb-gate-stat {
    margin-left: auto;
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 10.5px;
    color: rgb(var(--c-muted));
    white-space: nowrap;
  }

  .fb-gate.is-pass .fb-gate-mark {
    color: rgb(var(--c-up));
    border-color: rgb(var(--c-up) / 0.45);
    background: rgb(var(--c-up) / 0.08);
  }

  .fb-gate.is-pass .fb-gate-name {
    color: rgb(var(--c-text));
    opacity: 1;
  }

  .fb-gate.is-pass .fb-gate-stat {
    color: rgb(var(--c-up));
  }

  .fb-gate.is-fail .fb-gate-mark {
    color: rgb(var(--c-down));
    border-color: rgb(var(--c-down) / 0.5);
    background: rgb(var(--c-down) / 0.08);
  }

  .fb-gate.is-fail .fb-gate-stat {
    color: rgb(var(--c-down));
  }

  .fb-rail-land {
    margin-top: 14px;
    font-size: 12px;
    color: rgb(var(--c-accent-strong));
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 0;
  }

  .fb-rail-land:hover:not(:disabled) {
    text-decoration: underline;
  }

  .fb-rail-land:disabled {
    color: rgb(var(--c-muted));
    cursor: default;
  }

  .replay-compare-actionhead {
    padding: 10px 14px;
  }

  .replay-compare-actions {
    width: 100%;
  }

  .replay-compare-btn.approve,
    .replay-compare-btn.reject {
    flex: 1 1 0;
  }

  .replay-compare-wrap {
    padding: 16px 14px 96px;
  }

  .replay-compare-verdict {
    gap: 10px;
  }

  .replay-compare-verdict .divider {
    display: none;
  }

  /* CC rail — checklist parity with the approved C2 mock (.step/.gate). */

  .replay-compare-btn.\!approve {
    flex: 1 1 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .replay-compare-drawer,
    .replay-compare-btn,
    .replay-compare-drawer .drawer-chevron {
    transition: none;
  }
}

.cst-composer,
  .cst-dock {
  position: relative;
  color: rgb(var(--c-text));
  background: rgb(var(--c-surface));
  border: 1px solid rgb(var(--c-border));
  font-family: 'Instrument Sans', system-ui, sans-serif;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out, background 150ms ease-out;
}

.cst-composer {
  width: min(100%, 760px);
  border-radius: 16px;
  /* Roomier interior (founder "better with padding?" 2026-07-07): the chip +
       textarea were hugging the card edges. Comfortable gutters let the composer
       breathe and match the calm CT Ledger density. */
  padding: 20px 20px 16px;
  box-shadow: 0 10px 34px rgb(var(--c-ink) / 0.10);
}

/* Dark-mode composer halo (founder bug 2026-07-05): the base soft shadow uses
     --c-ink at low alpha, which in dark mode is near-white (#F2F8FB) — so the
     card floated inside a light radial glow ported from the light-mode mockup.
     In the Ledger Room a card sits ON dark; recede it with a deep-ink shadow at
     very low alpha (elevation you feel, not a white halo). Light mode keeps its
     original ink shadow above. */

[data-theme='dark'] .cst-composer {
  box-shadow: 0 10px 34px rgb(var(--c-bg-deep) / 0.55);
}

/* Home hero composer spans the full studio column so it lines up flush
     with the type-card gallery below it (founder 2026-07-08). The shared
     760px cap is right for the narrower dock/refine surfaces; on the home
     hero the container is 820px and the cards fill it, so match that here. */

.home-inner > .cst-composer {
  width: 100%;
  max-width: 100%;
}

/* Calm focus (founder bug 2026-07-05): a solid bright-accent border reads as a
     distracting blue outline in dark mode. Instead shift the existing hairline
     to accent at LOW alpha — no outer glow, no shadow spread, just a quiet tint
     that reads in both modes. The 150ms transition softens the change. */

.cst-composer:focus-within {
  border-color: rgb(var(--c-accent) / 0.35);
}

.cst-composer-attached,
  .cst-dock-attached {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-bottom: 11px;
}

/* Founder 2026-07-06: an empty attachment tray reserved ~34px of dead space
     above the input, floating the placeholder + paperclip low in the card.
     Collapse it entirely until a chip is attached — the input row then sits at
     the top of the card and the textarea owns the click area. */

.cst-dock-attached:empty,
  .cst-composer-attached:empty {
  display: none;
}

.cst-composer-ta,
  .cst-dock-ta {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.cst-composer-tokenizer {
  min-width: 0;
  flex: 1 1 auto;
}

/* OVERLAY-MIRROR (BI-style): the display and the textarea are stacked in the
     SAME box. The display paints the recognized-tag pills; the textarea sits on
     top with transparent text (caret + real text metrics preserved) so what the
     user sees is the pills behind their live caret. Both layers share identical
     font / line-height / padding / wrapping, so the caret lands glyph-accurate.
     Nothing toggles on focus — the box never resizes when clicked into. */

.cst-composer-overlay {
  position: relative;
}

/* Shared text metrics for BOTH layers. The per-surface font-size/line-height
     is set on the textarea utility classes (text-[16px]/leading-[1.5] home,
     text-[13px]/leading-[1.45] dock); the display inherits them via `font` and
     these wrapping rules so the two never drift. */

.cst-composer-display,
  .cst-composer-input {
  box-sizing: border-box;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: normal;
  margin: 0;
}

/* DISPLAY: absolutely fills the box behind the textarea. It must copy the
     textarea's font size / line-height / padding exactly — done by matching the
     Tailwind utilities the textarea carries (home vs dock below). */

.cst-composer-display {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  color: rgb(var(--c-text));
  font-family: 'Instrument Sans', system-ui, sans-serif;
}

/* TEXTAREA: on top, transparent text so only the caret + selection show over
     the mirrored pills. min-height comes from the utility class; height is set
     to scrollHeight in JS so both layers grow together. */

.cst-composer-input {
  position: relative;
  z-index: 1;
  display: block;
  /* A bare <textarea> defaults to its cols-based intrinsic width (~181px)
       regardless of the flexed wrapper — the display layer then wraps wide
       while the caret/wrap live in a squished box (founder bug 2026-07-05). */
  width: 100%;
  color: transparent;
  -webkit-text-fill-color: transparent;
  caret-color: rgb(var(--c-ink));
  font-family: 'Instrument Sans', system-ui, sans-serif;
}

.cst-composer-input::-moz-placeholder {
  color: rgb(var(--c-muted));
  -webkit-text-fill-color: rgb(var(--c-muted));
}

.cst-composer-input::placeholder {
  color: rgb(var(--c-muted));
  -webkit-text-fill-color: rgb(var(--c-muted));
}

/* Home surface metrics: text-[16px] leading-[1.5] pt-1, min-h-[96px]. */

.cst-composer-ta .cst-composer-display {
  font-size: 16px;
  line-height: 1.5;
  padding-top: 4px;
}

/* Dock surface metrics: text-[13px] leading-[1.5], py-1.5 (item 4a redesign —
     the mirror must match the textarea's new comfortable 2-line default so the
     caret stays glyph-accurate). */

.cst-dock-ta .cst-composer-display {
  font-size: 13px;
  line-height: 1.5;
  padding-top: 6px;
  padding-bottom: 6px;
}

.cst-mirror-tag {
  font-family: 'Instrument Sans', system-ui, sans-serif;
  /* No border, no horizontal padding: the pill is a background paint over the
       exact character run, so it never shifts the caret. Symmetric vertical
       padding is 0 for the same reason; the amber/accent fill + rounded corners
       give the pill its shape without changing text metrics. */
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.cst-mirror-tag.tag-ct {
  color: rgb(var(--c-accent-strong));
  background: rgb(var(--c-accent) / 0.16);
  box-shadow: 0 0 0 1px rgb(var(--c-accent) / 0.30);
}

.cst-mirror-tag.tag-split {
  color: rgb(var(--c-accent-strong));
  background: rgb(var(--c-accent) / 0.12);
  box-shadow: 0 0 0 1px rgb(var(--c-accent) / 0.22);
}

/* @bi expression: ONE amber pill encasing the whole "@bi: "query"" run. */

.cst-mirror-tag.tag-pd {
  color: rgb(var(--c-warn));
  background: rgb(var(--c-warn) / 0.16);
  box-shadow: 0 0 0 1px rgb(var(--c-warn) / 0.36);
}

.cst-autocomplete {
  position: absolute;
  z-index: 35;
  left: 54px;
  right: 16px;
  bottom: 52px;
  /* Last-item clipping (founder bug 2026-07-05): rows are 42px min-height + a
       2px flex gap (44px pitch) with 6px top/bottom padding. Cap the height at a
       clean multiple of the pitch (6 + 6*44 - 2 gap = 274px) so the list rests
       on a row boundary — never mid-row. Beyond ~6 rows it scrolls internally;
       the 7-skill cohort (incl. ct-pd) shows 6 rows then scrolls to the last. */
  max-height: 274px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid rgb(var(--c-border));
  border-radius: 12px;
  background: rgb(var(--c-surface));
  /* Dark-mode halo (founder bug 2026-07-05): the drop shadow used --c-ink at
       low alpha, which in dark mode is near-white (#F2F8FB) — so the floating
       menu wore a pale halo, same family as the .cst-composer fix above. In the
       Ledger Room recede it with a deep-ink shadow; light mode keeps ink. */
  box-shadow: 0 18px 38px rgb(var(--c-ink) / 0.14);
  padding: 6px;
}

[data-theme='dark'] .cst-autocomplete {
  box-shadow: 0 18px 38px rgb(var(--c-bg-deep) / 0.60);
}

.cst-dock .cst-autocomplete {
  left: 42px;
  right: 11px;
  bottom: 45px;
  /* Dock rows share the 44px pitch; 6 + 5*44 - 2 = 244px = 5 clean rows. */
  max-height: 244px;
}

.cst-autocomplete-row {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  /* flex-none so the flex-column menu never squashes rows below 42px — that
       squashing is what let the last row read as clipped (founder bug). */
  flex: 0 0 auto;
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  padding: 8px 9px;
  color: rgb(var(--c-text));
  font-size: 13px;
}

.cst-autocomplete-row.active,
  .cst-autocomplete-row:hover {
  color: rgb(var(--c-accent-strong));
  background: rgb(var(--c-accent) / 0.08);
}

.cst-autocomplete-row.\!active {
  color: rgb(var(--c-accent-strong)) !important;
  background: rgb(var(--c-accent) / 0.08) !important;
}

.cst-autocomplete-row .ic-wrap {
  display: inline-grid;
  height: 24px;
  width: 24px;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 999px;
  color: rgb(var(--c-accent-strong));
  background: rgb(var(--c-accent) / 0.10);
}

.cst-composer-ta .plus,
  .cst-dock-ta .plus {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgb(var(--c-border));
  color: rgb(var(--c-muted));
  background: rgb(var(--c-surface));
}

.cst-composer-ta .plus {
  height: 30px;
  width: 30px;
  border-radius: 9px;
}

.cst-composer-ph,
  .cst-dock-ph {
  flex: 1 1 auto;
  min-width: 0;
  color: rgb(var(--c-muted));
}

.cst-composer-ph {
  padding-top: 4px;
  font-size: 16px;
  line-height: 1.5;
}

.cst-composer-ph b,
  .cst-dock-ph b {
  color: rgb(var(--c-accent));
  font-weight: 600;
}

.cst-caretline,
  .cst-composer-ph .caretline,
  .cst-dock-ph .caretline,
  .cst-dock-ph .caret {
  display: inline-block;
  width: 1px;
  background: rgb(var(--c-accent));
  margin-left: 1px;
  animation: cst-blink 1.1s step-end infinite;
}

.cst-composer-ph .caretline {
  height: 18px;
  vertical-align: -4px;
}

.cst-dock-ph .caretline,
  .cst-dock-ph .caret {
  height: 14px;
  vertical-align: -2px;
}

.cst-composer-foot,
  .cst-dock-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid rgb(var(--c-border));
}

.cst-composer-foot {
  margin-top: 10px;
  padding-top: 11px;
}

/* P1-6: below sm the composer footer WRAPS instead of pushing the send
     button off-screen (390px viewport: send sat at x=378-422 and the type
     pill was half-cut). The kbd hint already drops below sm; long type-pill
     labels truncate; send pins to the right edge of its own row. */

@media (max-width: 639px) {
  .cst-composer-foot,
    .cst-dock-foot {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .cst-composer-foot .send,
    .cst-dock-foot .send {
    margin-left: auto;
  }

  .home-type-req {
    max-width: min(52vw, 210px);
  }

  .home-type-req > span:not(.ml-0\.5) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.cst-dock-foot {
  margin-top: 9px;
  padding-top: 8px;
  gap: 8px;
}

.cst-composer-hint,
  .cst-composer-afford,
  .cst-dock-hint {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: rgb(var(--c-muted));
}

.cst-composer-hint {
  font-size: 10.5px;
}

/* The affordance line lives on its own row under the composer card, quiet and
     out of the action row's way. Hidden the moment the user starts typing
     (.is-hidden toggled in JS) so it never sits below a live draft. */

.cst-composer-afford {
  margin-top: 9px;
  padding-left: 2px;
  font-size: 10.5px;
  letter-spacing: 0.01em;
  color: rgb(var(--c-muted));
}

.cst-composer-afford.is-hidden {
  display: none;
}

.cst-composer-afford b {
  color: rgb(var(--c-accent));
  font-weight: 500;
}

.cst-dock-hint {
  margin: 8px 2px 0;
  font-size: 9px;
  text-align: center;
}

.cst-composer-hint b,
  .cst-dock-hint b {
  color: rgb(var(--c-accent));
  font-weight: 500;
}

.cst-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 26px;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

.cst-chip-skill {
  color: rgb(var(--c-accent-strong));
  background: rgb(var(--c-accent) / 0.10);
  border: 1px solid rgb(var(--c-accent) / 0.35);
}

.cst-chip-bi {
  color: rgb(var(--c-warn));
  background: rgb(var(--c-warn) / 0.10);
  border: 1px solid rgb(var(--c-warn) / 0.38);
}

.cst-chip-file {
  color: rgb(var(--c-data));
  background: rgb(var(--c-bg-deep));
  border: 1px solid rgb(var(--c-border));
}

.cst-chip .will {
  color: rgb(var(--c-muted));
  font-weight: 400;
}

.cst-file-role {
  position: relative;
  display: inline-flex;
}

.cst-file-role-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 20px;
  padding: 0 6px;
  border: 1px solid rgb(var(--c-border));
  border-radius: 999px;
  color: rgb(var(--c-data));
  background: rgb(var(--c-surface));
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
}

.cst-file-role-btn:hover,
  .cst-file-role-btn[aria-expanded='true'] {
  color: rgb(var(--c-accent-strong));
  border-color: rgb(var(--c-accent) / 0.38);
  background: rgb(var(--c-accent) / 0.08);
}

.cst-file-role-menu {
  position: absolute;
  z-index: 60;
  left: 0;
  top: calc(100% + 6px);
  display: grid;
  min-width: 188px;
  gap: 2px;
  padding: 5px;
  border: 1px solid rgb(var(--c-border));
  border-radius: 10px;
  background: rgb(var(--c-surface));
  box-shadow: 0 16px 32px rgb(10 20 28 / 0.18);
}

[data-theme='dark'] .cst-file-role-menu {
  box-shadow: 0 18px 36px rgb(0 0 0 / 0.34);
}

.cst-file-role-menu.hidden {
  display: none;
}

/* LANGUAGE PASS (finding 7): the menu header + per-role one-liners. */

.cst-file-role-head {
  padding: 3px 7px 1px;
  color: rgb(var(--c-muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cst-file-role-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 26px;
  border-radius: 7px;
  padding: 4px 7px;
  color: rgb(var(--c-text));
  background: transparent;
  font-size: 11.5px;
  font-weight: 500;
  text-align: left;
}

.cst-file-role-option .rl-txt {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.cst-file-role-option .rl-desc {
  color: rgb(var(--c-muted));
  font-size: 10.5px;
  font-weight: 400;
  white-space: nowrap;
}

.cst-file-role-option:hover,
  .cst-file-role-option.selected {
  color: rgb(var(--c-accent-strong));
  background: rgb(var(--c-accent) / 0.08);
}


  .cst-file-role-option.\!selected {
  color: rgb(var(--c-accent-strong)) !important;
  background: rgb(var(--c-accent) / 0.08) !important;
}

.cst-chip .x {
  display: inline-grid;
  place-items: center;
  min-height: 20px;
  min-width: 20px;
  margin-right: -4px;
  padding: 0;
  border: 0;
  color: rgb(var(--c-muted));
  background: transparent;
  border-radius: 999px;
}

.cst-chip .x:hover {
  color: rgb(var(--c-ink));
  background: rgb(var(--c-border) / 0.45);
}

/* COMPOSE ATTACHMENTS: honest per-state chip treatment. The chip never claims
     "pinned as source" until the upload actually returned a source key. */

.cst-chip-file.is-uploading {
  color: rgb(var(--c-muted));
  border-style: dashed;
}

/* Uploading affordance: DESIGN.md forbids spinners ("no spinners"). A calm
     opacity breathe signals in-progress without rotation; the "uploading…" copy
     in .will carries the literal status. Failure/retry chips are unaffected. */

.cst-chip-file.is-uploading svg:first-of-type {
  animation: cst-attach-breathe 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .cst-chip-file.is-uploading svg:first-of-type {
    animation: none;
  }
}

.cst-chip-file.is-failed {
  color: rgb(var(--c-down));
  background: rgb(var(--c-down) / 0.08);
  border-color: rgb(var(--c-down) / 0.40);
}

.cst-chip-file.is-failed .will {
  color: rgb(var(--c-down));
}

.cst-chip .retry {
  display: inline-grid;
  place-items: center;
  min-height: 20px;
  min-width: 20px;
  padding: 0;
  border: 0;
  color: rgb(var(--c-muted));
  background: transparent;
  border-radius: 999px;
}

.cst-chip .\!retry {
  display: inline-grid !important;
  place-items: center !important;
  min-height: 20px !important;
  min-width: 20px !important;
  padding: 0 !important;
  border: 0 !important;
  color: rgb(var(--c-muted)) !important;
  background: transparent !important;
  border-radius: 999px !important;
}

.cst-chip .retry:hover {
  color: rgb(var(--c-ink));
  background: rgb(var(--c-border) / 0.45);
}

.cst-chip .\!retry:hover {
  color: rgb(var(--c-ink)) !important;
  background: rgb(var(--c-border) / 0.45) !important;
}

@keyframes cst-attach-breathe {
  0%, 100% {
    opacity: 0.45;
  }

  50% {
    opacity: 1;
  }
}

/* BPD-011 — one-time blueprint distillation card. CT Ledger editorial card:
     a single hairline room, quiet mono dateline, full-radius steering chips,
     and a loud down-token failure rule. All colors are two-mode tokens. */

.cst-distill-card {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  width: min(720px, 100%);
  margin: 12px auto 0;
  padding: 16px 20px;
  border: 1px solid rgb(var(--c-border));
  border-left: 3px solid rgb(var(--c-accent));
  border-radius: 12px;
  background: rgb(var(--c-surface));
  box-shadow: 0 12px 30px rgb(var(--c-bg-deep) / 0.10);
  color: rgb(var(--c-text));
}

[data-theme='dark'] .cst-distill-card {
  box-shadow: 0 16px 36px rgb(0 0 0 / 0.24);
}

.cst-distill-card:focus-visible {
  outline: 2px solid rgb(var(--c-accent));
  outline-offset: 3px;
}

.cst-distill-card.is-failure {
  border-left-color: rgb(var(--c-down));
  background: color-mix(in srgb, rgb(var(--c-down)) 5%, rgb(var(--c-surface)));
}

/* Happy-path phases (checking / distilling / ready) render as a QUIET strip
     under the composer — a behind-the-scenes step of the generate action, not
     an alarming panel (founder feedback 2026-07-11). Hairline accent rule,
     no box, mono microcopy, progress as an inline flow. */

.cst-distill-card.is-strip {
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 9px;
  padding: 7px 4px 7px 12px;
  border: 0;
  border-left: 2px solid rgb(var(--c-accent) / 0.55);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.cst-distill-card.is-strip .cst-distill-mark {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: transparent;
  color: rgb(var(--c-accent));
}

.cst-distill-card.is-strip h2 {
  display: inline;
  margin: 0 10px 0 0;
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: rgb(var(--c-text));
}

.cst-distill-card.is-strip .cst-distill-kicker {
  display: none;
}

.cst-distill-card.is-strip .cst-distill-copy,
  .cst-distill-card.is-strip .cst-distill-dateline,
  .cst-distill-card.is-strip .cst-distill-wait {
  display: inline;
  margin: 0 10px 0 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgb(var(--c-muted));
}

/* Progress becomes an inline step flow: done steps muted, the live step in
     accent with a soft working pulse (opacity only — nothing spins). */

.cst-distill-card.is-strip .cst-distill-progress {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.cst-distill-card.is-strip .cst-distill-progress li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: rgb(var(--c-muted));
}

.cst-distill-card.is-strip .cst-distill-progress li[aria-current='step'] {
  color: rgb(var(--c-accent-strong));
}

@media (prefers-reduced-motion: no-preference) {
  .cst-distill-card.is-strip .cst-distill-progress li[aria-current='step'] {
    animation: cst-distill-working 2.2s ease-in-out infinite;
  }
}

@keyframes cst-distill-working {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.55;
  }
}

.cst-distill-queued {
  margin-top: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: rgb(var(--c-accent-strong));
}

.cst-distill-card.is-strip .cst-distill-queued {
  margin-top: 2px;
}

.cst-distill-mark {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgb(var(--c-accent) / 0.10);
  color: rgb(var(--c-accent-strong));
}

.cst-distill-card.is-failure .cst-distill-mark {
  background: rgb(var(--c-down) / 0.10);
  color: rgb(var(--c-down));
}

.cst-distill-body {
  min-width: 0;
}

.cst-distill-kicker,
  .cst-distill-dateline {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(var(--c-accent));
}

.cst-distill-card.is-failure .cst-distill-kicker {
  color: rgb(var(--c-down));
}

.cst-distill-card h2 {
  margin: 3px 0 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.25;
  color: rgb(var(--c-ink));
}

.cst-distill-copy {
  margin-top: 6px;
  max-width: 62ch;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgb(var(--c-muted));
}

.cst-distill-dateline,
  .cst-distill-wait {
  margin-top: 13px;
  color: rgb(var(--c-muted));
}

.cst-distill-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}

.cst-distill-chip {
  min-height: 30px;
  padding: 5px 11px;
  border: 1px solid rgb(var(--c-border));
  border-radius: 999px;
  background: rgb(var(--c-bg-deep));
  color: rgb(var(--c-data));
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.2;
  transition: background-color 80ms ease-out, border-color 80ms ease-out, color 80ms ease-out;
}

.cst-distill-chip:hover,
  .cst-distill-chip.is-selected {
  border-color: rgb(var(--c-accent) / 0.45);
  background: rgb(var(--c-accent) / 0.10);
  color: rgb(var(--c-accent-strong));
}

.cst-distill-chip:focus-visible,
  .cst-distill-primary:focus-visible,
  .cst-distill-secondary:focus-visible,
  .cst-distill-generic:focus-visible,
  .cst-distill-always input:focus-visible {
  outline: 2px solid rgb(var(--c-accent));
  outline-offset: 2px;
}

.cst-distill-chip:disabled,
  .cst-distill-primary:disabled,
  .cst-distill-secondary:disabled,
  .cst-distill-generic:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.cst-distill-choice-foot {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
}

.cst-distill-always {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  -moz-column-gap: 8px;
       column-gap: 8px;
  align-items: center;
  color: rgb(var(--c-text));
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.cst-distill-always input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: rgb(var(--c-accent));
}

.cst-distill-always-note {
  grid-column: 2;
  margin-top: 1px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 400;
  color: rgb(var(--c-muted));
}

.cst-distill-count {
  display: grid;
  grid-template-columns: max-content 72px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  margin-top: 12px;
  font-size: 12px;
  font-weight: 600;
  color: rgb(var(--c-text));
}

.cst-distill-count input {
  width: 72px;
  min-height: 32px;
  border: 1px solid rgb(var(--c-border));
  border-radius: 8px;
  background: rgb(var(--c-bg-deep));
  padding: 5px 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: rgb(var(--c-data));
}

.cst-distill-count input:focus-visible {
  outline: 2px solid rgb(var(--c-accent));
  outline-offset: 2px;
}

.cst-distill-count-note {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 400;
  color: rgb(var(--c-muted));
}

.cst-distill-primary,
  .cst-distill-secondary,
  .cst-distill-generic {
  min-height: 34px;
  border-radius: 8px;
  padding: 7px 13px;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.2;
}

.cst-distill-primary {
  flex: none;
  border: 1px solid rgb(var(--c-accent));
  background: rgb(var(--c-accent));
  color: white;
}

.cst-distill-primary:hover {
  background: rgb(var(--c-accent-strong));
}

.cst-distill-secondary {
  border: 1px solid rgb(var(--c-border));
  background: rgb(var(--c-surface));
  color: rgb(var(--c-text));
}

.cst-distill-secondary:hover:not(:disabled) {
  border-color: rgb(var(--c-accent) / 0.45);
  color: rgb(var(--c-accent));
}

.cst-distill-generic {
  border: 1px solid rgb(var(--c-down) / 0.40);
  background: rgb(var(--c-down) / 0.08);
  color: rgb(var(--c-down));
}

.cst-distill-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.cst-distill-error {
  margin-top: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  line-height: 1.45;
  color: rgb(var(--c-down));
}

.cst-distill-progress {
  display: grid;
  gap: 7px;
  margin-top: 14px;
}

.cst-distill-progress li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: rgb(var(--c-muted));
}

.cst-distill-progress li[aria-current='step'] {
  color: rgb(var(--c-data));
}

.cst-distill-step-icon {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 999px;
  background: rgb(var(--c-accent) / 0.10);
  color: rgb(var(--c-accent));
}

@media (max-width: 640px) {
  .cst-distill-card {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 10px;
    padding: 16px;
  }

  .cst-distill-mark {
    width: 24px;
    height: 24px;
  }

  .cst-distill-choice-foot {
    align-items: stretch;
    flex-direction: column;
  }

  .cst-distill-primary {
    width: 100%;
  }

  .cst-distill-count {
    grid-template-columns: minmax(0, 1fr) 72px;
  }

  .cst-distill-count-note {
    grid-column: 1 / -1;
  }
}

.cst-paper {
  position: relative;
  /* CON-222a: anchor for the selection verb bar */
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: 30px 54px 44px;
  background: rgb(var(--c-surface));
  border: 1px solid rgb(var(--c-border));
  border-radius: 4px;
  box-shadow: 0 12px 34px rgb(var(--c-ink) / 0.08);
  color: rgb(var(--c-text));
  font-family: 'Instrument Sans', system-ui, sans-serif;
}

.cst-deck-zone {
  /* FIX (founder 2026-07-24): anchor for the evidence-bar overlay. */
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  background: rgb(var(--c-bg));
  padding: 0;
}

/* HEADER CONTINUITY: the deck drafting status strip — the quiet re-home of
     the "STUDIO · drafting …" ticker after the second (banner) header was
     removed. One hairline mono line under the SAME toolbar the finished deck
     keeps (distill-strip idiom: muted mono, no Fraunces, no title repetition).
     Collapses (0fr grid row, no reserved space) when the ticker goes is-done,
     so completion is a calm fold — not a banner vanishing. */

.cst-deck-status {
  display: grid;
  grid-template-rows: 1fr;
  flex: none;
  width: min(820px, calc(100% - 28px));
  margin: 0 auto;
  transition: grid-template-rows 240ms ease, opacity 180ms ease;
}

.cst-deck-status-in {
  min-height: 0;
  overflow: hidden;
}

.cst-deck-status .cst-thinking-dateline {
  border-bottom: 1px solid rgb(var(--c-border));
  padding: 3px 2px 9px;
}

.cst-deck-status:has(.is-done) {
  grid-template-rows: 0fr;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .cst-deck-status {
    transition: none;
  }
}

.cst-deck-provenance {
  display: inline-flex;
  align-self: center;
  align-items: center;
  gap: 7px;
  flex: none;
  margin: 2px auto 10px;
  max-width: min(820px, calc(100% - 28px));
  border: 1px solid rgb(var(--c-border));
  border-radius: 999px;
  background: rgb(var(--c-surface));
  padding: 4px 12px;
  color: rgb(var(--c-muted));
  font-size: 11.5px;
  line-height: 1.2;
}

.cst-deck-provenance svg {
  color: rgb(var(--c-accent));
  flex: none;
}

.cst-deck-provenance .lbl {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgb(var(--c-muted));
}

.cst-deck-provenance .src {
  overflow: hidden;
  color: rgb(var(--c-ink));
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cst-deck-provenance a.src:hover,
  .cst-deck-provenance a.src:focus-visible {
  color: rgb(var(--c-accent));
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cst-deck-provenance a.src:focus-visible {
  border-radius: 4px;
  outline: 2px solid rgb(var(--c-accent));
  outline-offset: 2px;
}

.cst-slide-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1 1 auto;
  /* Founder 2026-07-16: "the width of the cards can be a little larger" —
       modest bump 720 → 820 at wide viewports, aligning the slide column with
       the deck toolbar's max-w-[820px] (one column rhythm, DESIGN.md layout
       discipline). The ≤900px breakpoints below keep their tighter widths. */
  width: min(820px, 100%);
  margin: 0 auto;
  min-height: 0;
  overflow-y: auto;
  /* --evbar-h = the evidence-bar overlay's live height (0 when absent). */
  padding: 18px 0 calc(34px + var(--evbar-h, 0px));
}

.cst-slide-wrap {
  position: relative;
  scroll-margin-top: 78px;
  outline: none;
  /* P1-5: display sizes clamp against the CARD's width (cqw), not the
       viewport — at 1280-1366 the studio rails squeeze the slide column and
       fixed px display sizes clipped mid-word. */
  container-type: inline-size;
}

.cst-slide-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  border: 1px dashed rgb(var(--c-border));
  border-radius: 8px;
  background: transparent;
  color: rgb(var(--c-muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0;
}

.cst-slide-add:hover,
  .cst-slide-add:focus-visible {
  border-color: rgb(var(--c-accent));
  color: rgb(var(--c-accent));
  outline: none;
}

/* FIX (founder 2026-07-24): the bar OVERLAYS the deck (bottom-anchored)
     instead of eating the scroller's height — expanding it no longer squeezes
     the slide window to a sliver on laptop heights. The scroller keeps its
     full viewport and reserves matching bottom clearance via --evbar-h (a
     ResizeObserver in compose-doc.js tracks the bar's ACTUAL rendered height,
     which varies with card content), so the last slide's bottom always scrolls
     clear of the bar. Clearance lives at the bottom of the scroll run — the
     reading position never jumps on expand/collapse. */

.cst-slide-evidence {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 12;
  border-top: 1px solid rgb(var(--c-border));
  background: rgb(var(--c-bg-deep));
}

.cst-slide-evidence-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  border-bottom: 1px solid transparent;
  background: rgb(var(--c-bg-deep));
  padding: 9px 16px;
  color: rgb(var(--c-text));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0;
  text-align: left;
}

.cst-slide-evidence-head:hover,
  .cst-slide-evidence-head:focus-visible {
  background: rgb(var(--c-accent) / 0.08);
  outline: none;
}

.cst-slide-evidence-head .shield {
  color: rgb(var(--c-up));
}

.cst-slide-evidence-head .ct {
  color: rgb(var(--c-ink));
  font-weight: 600;
}

.cst-slide-evidence-head .\!ct {
  color: rgb(var(--c-ink)) !important;
  font-weight: 600 !important;
}

.cst-slide-evidence-head .hint {
  color: rgb(var(--c-muted));
}

.cst-slide-evidence-head .\!hint {
  color: rgb(var(--c-muted)) !important;
}

.cst-slide-evidence-head .grow {
  flex: 1 1 auto;
}

.cst-slide-evidence-head .state {
  color: rgb(var(--c-accent));
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.cst-slide-evidence-head .\!state {
  color: rgb(var(--c-accent)) !important;
  font-size: 9px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.cst-slide-evidence-head .chev {
  color: rgb(var(--c-accent));
  transition: transform 180ms ease;
}

.cst-slide-evidence.open .cst-slide-evidence-head {
  border-bottom-color: rgb(var(--c-border));
}

.cst-slide-evidence.\!open .cst-slide-evidence-head {
  border-bottom-color: rgb(var(--c-border)) !important;
}

.cst-slide-evidence.open .cst-slide-evidence-head .chev {
  transform: rotate(180deg);
}

.cst-slide-evidence.\!open .cst-slide-evidence-head .chev {
  transform: rotate(180deg) !important;
}

.cst-slide-evidence-scroll {
  display: none;
  gap: 13px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 14px 16px 16px;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
}

.cst-slide-evidence.open .cst-slide-evidence-scroll {
  display: flex;
}

.cst-slide-evidence.\!open .cst-slide-evidence-scroll {
  display: flex !important;
}

.cst-slide-evidence-scroll::-webkit-scrollbar {
  height: 8px;
}

.cst-slide-evidence-scroll::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: rgb(var(--c-border));
}

.cst-slide-evidence-card {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  width: 290px;
  border: 1px solid rgb(var(--c-border));
  border-radius: 8px;
  background: rgb(var(--c-surface));
  padding: 12px 13px;
  scroll-snap-align: start;
}

.cst-slide-evidence-card.hot {
  border-color: rgb(var(--c-accent));
  box-shadow: 0 0 0 3px rgb(var(--c-accent) / 0.1);
}

.cst-slide-evidence-card .dl {
  margin-bottom: 7px;
  color: rgb(var(--c-muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0;
}

.cst-slide-evidence-card .fig {
  margin-bottom: 8px;
  color: rgb(var(--c-ink));
  font-family: 'Fraunces', Georgia, serif;
  font-size: 14.5px;
  line-height: 1.28;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
}

/* SUBSTANCE (founder 2026-07-23): the body is the retrieved source passage —
     set as a quiet quotation, never the slide's own sentence. */

.cst-slide-evidence-card .fig.quote {
  padding-left: 9px;
  border-left: 2px solid rgb(var(--c-accent) / 0.45);
  font-size: 13px;
  line-height: 1.38;
  color: rgb(var(--c-text));
}

.cst-slide-evidence-card .src,
  .cst-slide-evidence-card .verified {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
}


  .cst-slide-evidence-card .\!verified {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10px !important;
}

.cst-slide-evidence-card .src {
  color: rgb(var(--c-accent));
}

.cst-slide-evidence-card .verified {
  margin-top: 9px;
  color: rgb(var(--c-up));
  font-size: 9px;
  cursor: help;
}

.cst-slide-evidence-card .\!verified {
  margin-top: 9px !important;
  color: rgb(var(--c-up)) !important;
  font-size: 9px !important;
  cursor: help !important;
}

/* Honest check states: green ONLY when the automatic claim check actually
     passed; a plain retrieved-and-cited passage stays muted. */

.cst-slide-evidence-card .verified.is-cited {
  color: rgb(var(--c-muted));
}

.cst-slide-evidence-card .\!verified.is-cited {
  color: rgb(var(--c-muted)) !important;
}

.cst-slide-evidence-empty {
  display: flex;
  flex: 1 1 auto;
  min-height: 96px;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgb(var(--c-border));
  border-radius: 8px;
  color: rgb(var(--c-muted));
  font-size: 13px;
  scroll-snap-align: start;
}

.cst-slide-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 7px 1px;
  color: rgb(var(--c-muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0;
  /* LANGUAGE PASS: badges carry human labels now — no shouting caps. */
  text-transform: none;
}

.cst-slide-badge .cst-slide-badge-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cst-slide-lock {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid rgb(var(--c-border));
  border-radius: 999px;
  padding: 2px 6px;
  color: rgb(var(--c-muted));
  text-transform: none;
}

/* FIX A: the hand-edited tag is a real unlock control (edit-section
     hand_edited:false). The "· unlock" suffix stays quiet until the tag is
     hovered/focused; a disabled tag (read-only surfaces) is informational. */

button.cst-slide-lock {
  cursor: pointer;
  font: inherit;
  font-size: 10.5px;
}

.cst-slide-lock .unlock-hint {
  display: none;
  color: rgb(var(--c-accent));
}

button.cst-slide-lock:not(:disabled):hover,
  button.cst-slide-lock:not(:disabled):focus-visible {
  border-color: rgb(var(--c-accent) / 0.55);
  color: rgb(var(--c-text));
  outline: none;
}

/* REVERT (founder 2026-07-16): the quiet "AI changed · revert" pill.
     Same badge-pill idiom as the hand-edited lock — mono, muted, hairline —
     with the accent "· revert" hint revealed on hover/focus. One click
     restores the pre-change slide as a NEW revision; no modal, no fear. */

.cst-slide-aichip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid rgb(var(--c-accent) / 0.3);
  border-radius: 999px;
  padding: 2px 7px;
  color: rgb(var(--c-muted));
  text-transform: none;
  cursor: pointer;
  font: inherit;
  font-size: 10.5px;
  background: transparent;
}

.cst-slide-aichip .revert-hint {
  display: none;
  color: rgb(var(--c-accent));
}

.cst-slide-aichip:not(:disabled):hover,
  .cst-slide-aichip:not(:disabled):focus-visible {
  border-color: rgb(var(--c-accent) / 0.6);
  background: rgb(var(--c-accent) / 0.08);
  color: rgb(var(--c-text));
  outline: none;
}

.cst-slide-aichip:not(:disabled):hover .revert-hint,
  .cst-slide-aichip:not(:disabled):focus-visible .revert-hint {
  display: inline;
}

.cst-slide-aichip:disabled {
  cursor: default;
}

button.cst-slide-lock:not(:disabled):hover .unlock-hint,
  button.cst-slide-lock:not(:disabled):focus-visible .unlock-hint {
  display: inline;
  margin-left: 2px;
}

.cst-slide-editbar {
  position: absolute;
  top: 1px;
  right: 0;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 140ms ease, transform 140ms ease;
}

.cst-slide-wrap:hover .cst-slide-editbar,
  .cst-slide-wrap:focus-within .cst-slide-editbar,
  .cst-slide-wrap.is-active .cst-slide-editbar {
  opacity: 1;
  transform: translateY(0);
}

/* P1-3: ≥32px targets; the dead drag-handle span is gone (it looked like a
     button but did nothing — reordering is the chevrons). */

.cst-slide-refine,
  .cst-slide-edit,
  .cst-slide-structure {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  border: 1px solid rgb(var(--c-border));
  border-radius: 8px;
  background: rgb(var(--c-surface));
  color: rgb(var(--c-text));
  font-size: 12px;
  font-weight: 650;
  box-shadow: 0 8px 22px rgb(var(--c-ink) / 0.08);
}

.cst-slide-refine,
  .cst-slide-edit {
  padding: 0 10px;
}

.cst-slide-structure {
  width: 32px;
  padding: 0;
}

/* P1-3: delete sits apart from the move/edit cluster — a hairline divider
     plus breathing room so a mis-aim at the chevrons can't destroy a slide. */

.cst-slide-structure.danger {
  position: relative;
  margin-left: 12px;
}

.cst-slide-structure.danger::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: rgb(var(--c-border));
}

[data-theme='dark'] .cst-slide-refine,
  [data-theme='dark'] .cst-slide-edit,
  [data-theme='dark'] .cst-slide-structure {
  box-shadow: 0 8px 22px rgb(var(--c-bg-deep) / 0.55);
}

.cst-slide-refine:hover,
  .cst-slide-refine:focus-visible,
  .cst-slide-edit:hover,
  .cst-slide-edit:focus-visible,
  .cst-slide-structure:hover,
  .cst-slide-structure:focus-visible {
  border-color: rgb(var(--c-accent) / 0.55);
  color: rgb(var(--c-accent));
  outline: none;
}

.cst-slide-structure.danger:hover,
  .cst-slide-structure.danger:focus-visible {
  border-color: rgb(var(--c-down) / 0.55);
  color: rgb(var(--c-down));
}

.cst-slide-structure:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.cst-slide {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgb(var(--c-border));
  border-radius: 8px;
  background: rgb(var(--c-surface));
  box-shadow: 0 18px 40px rgb(var(--c-ink) / 0.09);
  color: rgb(var(--c-text));
}

[data-theme='dark'] .cst-slide {
  background: rgb(19 30 39);
  box-shadow: 0 20px 42px rgb(var(--c-bg-deep) / 0.62);
  color: rgb(205 216 225);
}

.cst-slide-wrap.is-active .cst-slide {
  border-color: rgb(var(--c-accent));
  box-shadow: 0 0 0 3px rgb(var(--c-accent) / 0.12), 0 18px 40px rgb(var(--c-ink) / 0.1);
}

[data-theme='dark'] .cst-slide-wrap.is-active .cst-slide {
  box-shadow: 0 0 0 3px rgb(var(--c-accent) / 0.18), 0 20px 42px rgb(var(--c-bg-deep) / 0.68);
}

/* FIX C: editor clip honesty. A body taller than the 16:9 frame used to
     clip silently (overflow:hidden, no signal). When the rendered card
     measures as clipped it gets a quiet bottom fade + a mono chip
     ("content overflows this slide"); the chip expands the card to natural
     height and back. 16:9 stays the default presentation; the data was
     always intact. */

.cst-slide.is-clipped::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 56px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgb(var(--c-surface) / 0), rgb(var(--c-surface) / 0.92));
}

[data-theme='dark'] .cst-slide.is-clipped::after {
  background: linear-gradient(to bottom, rgb(19 30 39 / 0), rgb(19 30 39 / 0.92));
}

.cst-slide.is-expanded {
  aspect-ratio: auto;
}

.cst-slide-overflow {
  position: absolute;
  /* P1-5: straddle the card's bottom seam instead of sitting inside it —
       centered at bottom:10px the chip covered the slide footer text. */
  bottom: -12px;
  left: 50%;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transform: translateX(-50%);
  border: 1px solid rgb(var(--c-border));
  border-radius: 999px;
  background: rgb(var(--c-surface));
  padding: 3px 10px;
  color: rgb(var(--c-muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  box-shadow: 0 8px 22px rgb(var(--c-ink) / 0.08);
  transition: color 100ms ease-out, border-color 100ms ease-out;
}

.cst-slide-overflow[hidden] {
  display: none;
}

[data-theme='dark'] .cst-slide-overflow {
  background: rgb(19 30 39);
  box-shadow: 0 8px 22px rgb(var(--c-bg-deep) / 0.55);
}

.cst-slide-overflow:hover,
  .cst-slide-overflow:focus-visible {
  border-color: rgb(var(--c-accent) / 0.55);
  color: rgb(var(--c-accent));
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .cst-slide-overflow {
    transition: none;
  }
}

/* FIX A: in-place slide editing. The 16:9 frame releases so the card GROWS
     with the text (an honest editor, not a clipped one); the Ledger Room
     surface, kicker, and hairlines stay, so editing reads as "the same slide,
     opened up" rather than a modal detour. */

.cst-slide.is-editing {
  aspect-ratio: auto;
  border-color: rgb(var(--c-accent) / 0.55);
}

.cst-slide.is-editing .cst-slide-pad {
  gap: 10px;
}

.cst-slide-editarea {
  width: 100%;
  min-height: 180px;
  resize: none;
  border: 1px solid rgb(var(--c-border));
  border-radius: 8px;
  background: rgb(var(--c-bg));
  padding: 12px 14px;
  color: rgb(var(--c-text));
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: 13.5px;
  line-height: 1.65;
}

[data-theme='dark'] .cst-slide-editarea {
  background: rgb(var(--c-bg-deep) / 0.55);
}

.cst-slide-editarea:focus {
  border-color: rgb(var(--c-accent) / 0.55);
  outline: none;
  box-shadow: 0 0 0 2px rgb(var(--c-accent) / 0.18);
}

.cst-slide-edit-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* P1-4 hallmark pass: the format hint is a desktop nicety — at narrow
     widths it would crowd the Save/Cancel row, so it drops below sm. */

@media (max-width: 639px) {
  .cst-slide-edit-toolbar .hint.fmt {
    display: none;
  }

  .cst-slide-edit-toolbar .\!hint.fmt {
    display: none !important;
  }
}

.cst-slide-edit-toolbar .grow {
  flex: 1 1 auto;
}

.cst-slide-edit-toolbar .hint {
  color: rgb(var(--c-muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  text-transform: none;
}

.cst-slide-edit-toolbar .\!hint {
  color: rgb(var(--c-muted)) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10.5px !important;
  text-transform: none !important;
}

.cst-slide-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  border: 1px solid rgb(var(--c-border));
  border-radius: 8px;
  background: transparent;
  padding: 0 10px;
  color: rgb(var(--c-text));
  font-size: 12px;
  font-weight: 650;
}

.cst-slide-edit-btn:hover,
  .cst-slide-edit-btn:focus-visible {
  border-color: rgb(var(--c-accent) / 0.55);
  color: rgb(var(--c-accent));
  outline: none;
}

.cst-slide-edit-btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.cst-slide-edit-btn.save {
  border-color: rgb(var(--c-accent));
  background: rgb(var(--c-accent));
  color: #fff;
}

.cst-slide-edit-btn.save:hover,
  .cst-slide-edit-btn.save:focus-visible {
  border-color: rgb(var(--c-accent-strong));
  background: rgb(var(--c-accent-strong));
  color: #fff;
}

.cst-slide-pad {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: clamp(22px, 4vw, 44px);
}

.cst-slide-kicker,
  .cst-slide-footer,
  .cst-slide-cites {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.cst-slide-kicker {
  color: rgb(var(--c-accent));
  margin-bottom: clamp(8px, 1.5vw, 14px);
  /* LANGUAGE PASS: layout words are humanized ("Data slide") — the group
       rule's uppercase would shout them back into enum-speak. */
  text-transform: none;
}

.cst-slide-content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  gap: clamp(10px, 2vw, 18px);
  min-width: 0;
}

.cst-slide-headline {
  max-width: 12ch;
  margin: 0;
  color: rgb(var(--c-ink));
  font-family: 'Fraunces', Georgia, serif;
  font-size: 48px;
  /* P1-5 container clamp (falls back to the fixed size above where cqw is
       unsupported): full size at the 820px column, scaling down as the
       rails compress the card. */
  font-size: clamp(30px, 6.4cqw, 48px);
  font-weight: 600;
  line-height: 0.96;
  overflow-wrap: anywhere;
}

[data-theme='dark'] .cst-slide-headline,
  [data-theme='dark'] .cst-slide-metric-value,
  [data-theme='dark'] .cst-slide-brand {
  color: rgb(232 238 244);
}

[data-theme='dark'] .cst-slide-body,
  [data-theme='dark'] .cst-slide-bullets {
  color: rgb(205 216 225);
}

[data-theme='dark'] .cst-slide-kicker,
  [data-theme='dark'] .cst-slide-footer,
  [data-theme='dark'] .cst-slide-cites,
  [data-theme='dark'] .cst-slide-note,
  [data-theme='dark'] .cst-slide-speaker-note {
  color: rgb(126 180 206);
}

.cst-slide-body {
  max-width: 56ch;
  color: rgb(var(--c-text));
  font-size: 18px;
  line-height: 1.38;
}

.cst-slide-body p {
  margin: 0 0 0.55em;
}

.cst-slide-bullets {
  display: grid;
  gap: clamp(7px, 1.45vw, 12px);
  margin: 0;
  padding: 0;
  list-style: none;
  color: rgb(var(--c-text));
  font-size: 17px;
  line-height: 1.32;
}

.cst-slide-bullets li {
  position: relative;
  padding-left: 18px;
}

.cst-slide-bullets li::before {
  content: '';
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 7px;
  height: 7px;
  border: 1px solid rgb(var(--c-accent));
  border-radius: 999px;
  background: rgb(var(--c-accent) / 0.12);
}

.cst-slide-metric {
  display: grid;
  gap: 10px;
  width: min(100%, 440px);
  border-left: 3px solid rgb(var(--c-data));
  padding-left: clamp(14px, 2.8vw, 24px);
}

.cst-slide-metric-value {
  color: rgb(var(--c-ink));
  font-family: 'Fraunces', Georgia, serif;
  font-size: 62px;
  /* P1-5: was a fixed 62px — clipped mid-word at 1280-1366 laptop widths. */
  font-size: clamp(34px, 8.2cqw, 62px);
  font-weight: 600;
  line-height: 0.95;
  overflow-wrap: anywhere;
}

.cst-slide-metric-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: rgb(var(--c-muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.cst-slide-image-need {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 96px;
  border: 1px dashed rgb(var(--c-border));
  border-radius: 8px;
  background: rgb(var(--c-surface-muted) / 0.72);
  padding: 16px;
  color: rgb(var(--c-muted));
  font-size: 14px;
  line-height: 1.35;
}

.cst-slide-image-need .need {
  min-width: 0;
  flex: 1 1 180px;
}

.cst-slide-image-need .ico {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgb(var(--c-accent) / 0.1);
  color: rgb(var(--c-accent));
}

.cst-slide-image-need .actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.cst-slide-image-need .\!actions {
  display: flex !important;
  flex: 0 0 auto !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  justify-content: flex-end !important;
}

.cst-slide-image-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 30px;
  border: 1px solid rgb(var(--c-border));
  border-radius: 7px;
  background: rgb(var(--c-surface));
  color: rgb(var(--c-text));
  padding: 0 10px;
  font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease;
}

.cst-slide-image-action.primary {
  border-color: rgb(var(--c-accent));
  background: rgb(var(--c-accent));
  color: white;
}

.cst-slide-image-action:hover,
  .cst-slide-image-action:focus-visible {
  border-color: rgb(var(--c-accent));
  outline: none;
  box-shadow: 0 0 0 2px rgb(var(--c-accent) / 0.16);
}

.cst-slide-image-action:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.cst-slide-image-filled {
  display: flex;
  min-height: 180px;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}

.cst-slide-image-frame {
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
  border: 1px solid rgb(var(--c-border));
  border-radius: 8px;
  background: rgb(var(--c-surface-muted) / 0.72);
}

.cst-slide-image-frame img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 160px;
  -o-object-fit: cover;
     object-fit: cover;
}

.cst-slide-image-filled figcaption {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgb(var(--c-muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  line-height: 1.35;
}

.cst-slide-note,
  .cst-slide-speaker-note {
  color: rgb(var(--c-muted));
  font-size: 12px;
  line-height: 1.4;
}

.cst-slide-speaker-note {
  margin-top: 10px;
  border-top: 1px solid rgb(var(--c-border));
  padding-top: 8px;
}

/* LANGUAGE PASS (finding 9): speaker notes carry a quiet mono "Notes" label
     so they never read as stray slide copy. */

.cst-slide-note-label {
  display: inline-block;
  margin-right: 8px;
  color: rgb(var(--c-muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cst-slide-cites {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: clamp(8px, 1.5vw, 14px);
  color: rgb(var(--c-muted));
}

.cst-slide-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: clamp(8px, 1.4vw, 14px);
  color: rgb(var(--c-muted));
}

.cst-slide-brand {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid rgb(var(--c-border));
  border-radius: 50%;
  color: rgb(var(--c-ink));
  font-family: 'Fraunces', Georgia, serif;
  font-size: 12px;
  font-weight: 650;
}

.cst-slide--title .cst-slide-headline,
  .cst-slide--section-divider .cst-slide-headline {
  max-width: 9.5ch;
  font-size: 60px;
  font-size: clamp(36px, 8cqw, 60px);
}

.cst-slide--quote .cst-slide-body {
  max-width: 44ch;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 36px;
  line-height: 1.08;
}

.cst-slide--two-column .cst-slide-content {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  align-items: center;
}

.cst-slide--cta .cst-slide-content {
  justify-content: flex-end;
}

[data-theme='dark'] .cst-slide .cst-slide-headline,
  [data-theme='dark'] .cst-slide .cst-slide-metric-value,
  [data-theme='dark'] .cst-slide .cst-slide-brand {
  color: rgb(246 249 252);
}

[data-theme='dark'] .cst-slide .cst-slide-body,
  [data-theme='dark'] .cst-slide .cst-slide-bullets {
  color: rgb(220 230 237);
}

.cst-deck-empty {
  border: 1px dashed rgb(var(--c-border));
  border-radius: 8px;
  padding: 34px;
  color: rgb(var(--c-muted));
  text-align: center;
}

@media (max-width: 900px) {
  .cst-deck-zone {
    padding: 0;
  }

  .cst-slide-editbar {
    opacity: 1;
    transform: none;
  }

  .cst-slide-stack {
    width: min(720px, calc(100% - 28px));
  }

  .cst-slide--two-column .cst-slide-content {
    grid-template-columns: 1fr;
  }

  .cst-slide-headline {
    font-size: 36px;
  }

  .cst-slide--title .cst-slide-headline,
    .cst-slide--section-divider .cst-slide-headline {
    font-size: 42px;
  }

  .cst-slide-body {
    font-size: 15px;
  }

  .cst-slide-bullets {
    font-size: 14px;
  }

  .cst-slide-metric-value {
    font-size: 42px;
  }

  .cst-slide--quote .cst-slide-body {
    font-size: 26px;
  }
}

@media (max-width: 520px) {
  .cst-deck-zone {
    padding: 0;
  }

  .cst-slide-stack {
    width: min(720px, calc(100% - 20px));
    gap: 14px;
    padding-bottom: calc(34px + var(--evbar-h, 0px));
  }

  .cst-slide-badge {
    max-width: 68%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cst-slide-refine span,
    .cst-slide-add span {
    display: none;
  }

  .cst-slide-evidence-head {
    gap: 7px;
    padding: 8px 10px;
    font-size: 9.5px;
  }

  .cst-slide-evidence-head .hint {
    display: none;
  }

  .cst-slide-evidence-head .state {
    font-size: 8.5px;
  }

  .cst-slide-evidence-scroll {
    padding: 10px;
  }

  .cst-slide-evidence-card {
    width: min(252px, calc(100vw - 38px));
  }

  .cst-slide-pad {
    padding: 18px;
  }

  .cst-slide-headline {
    font-size: 30px;
    max-width: 13ch;
  }

  .cst-slide--title .cst-slide-headline,
    .cst-slide--section-divider .cst-slide-headline {
    font-size: 34px;
    max-width: 12ch;
  }

  .cst-slide-body {
    font-size: 13px;
  }

  .cst-slide-metric-value {
    font-size: 34px;
  }

  .cst-slide-evidence-head .\!hint {
    display: none !important;
  }

  .cst-slide-evidence-head .\!state {
    font-size: 8.5px !important;
  }
}

/* Dark-mode paper elevation (founder 2026-07-06): the light shadow above uses
     --c-ink, near-white in dark → a white halo around the paper. In the Ledger
     Room recede it with the same deep-ink drop the dropdowns use (0 18px 38px
     --c-bg-deep / 0.6). Light mode keeps its ink shadow above. */

[data-theme='dark'] .cst-paper {
  box-shadow: 0 18px 38px rgb(var(--c-bg-deep) / 0.6);
}

.cst-paper h1,
  .cst-paper h2,
  .cst-paper h3 {
  font-family: 'Fraunces', Georgia, serif;
  color: rgb(var(--c-ink));
  font-weight: 600;
  line-height: 1.16;
}

/* paper header stack — mirrors compose-ux-v7 .doc-kicker/.doc-h1/.doc-sub */

.cst-doc-kicker {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(var(--c-accent));
  margin-bottom: 9px;
}

.cst-doc-h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 29px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: rgb(var(--c-ink));
  margin: 0 0 7px;
}

.cst-doc-h1 strong {
  font-weight: 600;
}

.cst-doc-h1 em {
  font-style: italic;
}

.cst-doc-h1 code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.86em;
}

.cst-doc-sub {
  font-size: 14px;
  line-height: 1.5;
  color: rgb(var(--c-muted));
  margin: 0 0 12px;
  max-width: 60ch;
}

/* gates + legend footnote wrapper (inside the paper, content width) */

.cst-gates-wrap {
  border-bottom: 1px solid rgb(var(--c-border));
  margin-bottom: 16px;
}

/* Mobile r3: H1 is 25px (mockup has no 29px downsize) and the gates wrapper
     must not leak its divider into the paper — gates live in the overflow. */

@media (max-width: 767px) {
  .cst-doc-h1 {
    font-size: 25px;
    line-height: 1.08;
  }

  .cst-gates-wrap {
    border-bottom: 0;
    margin-bottom: 0;
  }
}

.cst-sec-h2 {
  font-size: 18px;
  margin: 0 0 5px;
  line-height: 1.16;
}

.cst-paper .num,
  .cst-paper .mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  color: rgb(var(--c-data));
}

/* CON-222a: selection verb bar — a peripheral dark pill anchored at the
     selection (never a modal over the doc — INV-NOPUSH). Mirrors the approved
     dark format pill in docs/design/compose-conv-r2.html. */

.cst-verb-bar {
  position: absolute;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 9px;
  background: rgb(var(--c-sidebar));
  box-shadow: 0 10px 28px rgb(var(--c-ink) / 0.28);
}

/* Dark-mode: recede the floating verb bar with a deep-ink drop, not the
     near-white --c-ink glow ported from light mode. */

[data-theme='dark'] .cst-verb-bar {
  box-shadow: 0 10px 28px rgb(var(--c-bg-deep) / 0.6);
}

.cst-verb-bar::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 22px;
  height: 10px;
  width: 10px;
  background: rgb(var(--c-sidebar));
  transform: rotate(45deg);
}

.cst-verb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: rgb(var(--c-sidebar-ink));
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.cst-verb:hover {
  background: rgb(255 255 255 / 0.12);
}

.cst-verb:focus-visible {
  outline: 2px solid rgb(var(--c-sidebar-accent));
  outline-offset: 1px;
}

.cst-verb .kbd {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  color: rgb(var(--c-sidebar-muted));
}

.cst-verb:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.cst-verb:disabled:hover {
  background: transparent;
}

/* SELECT→REFINE (2026-07-26): the slide editor's floating selection
     affordance — the SAME verb-bar component, docked top-right of the editor
     pad (a textarea selection has no DOM rect to anchor a per-line position
     to), clear of the text. The editor pad is the positioning context. No
     arrow: it isn't pointing at a rect. Static — reduced-motion safe. */

.cst-slide.is-editing .cst-slide-pad {
  position: relative;
}

.cst-verb-bar--slide-editor {
  top: clamp(14px, 2.6vw, 30px);
  right: clamp(14px, 2.6vw, 30px);
  left: auto;
}

.cst-verb-bar--slide-editor::after {
  display: none;
}

/* CON-222a: scope chip in the refine composer — the selection quoted as an
     inspectable, clearable scope. */

.cst-scope-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  margin-bottom: 8px;
  padding: 6px 9px;
  border: 1px solid rgb(var(--c-accent) / 0.35);
  border-radius: 9px;
  background: rgb(var(--c-accent) / 0.08);
  font-size: 12px;
  color: rgb(var(--c-text));
}

.cst-scope-chip[hidden] {
  display: none;
}

.cst-scope-chip .lbl {
  flex: 0 0 auto;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 8.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(var(--c-muted));
}

.cst-scope-chip .q {
  min-width: 0;
  font-style: italic;
  color: rgb(var(--c-accent-strong));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cst-scope-chip .\!q {
  min-width: 0 !important;
  font-style: italic !important;
  color: rgb(var(--c-accent-strong)) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.cst-scope-chip .x {
  flex: 0 0 auto;
  margin-left: auto;
  display: grid;
  place-items: center;
  padding: 2px;
  border: none;
  background: transparent;
  color: rgb(var(--c-muted));
  cursor: pointer;
}

.cst-scope-chip .x:hover {
  color: rgb(var(--c-text));
}

.cst-sec {
  position: relative;
  margin: 0 -12px 9px;
  padding: 9px 12px;
  border-radius: 10px;
  transition: background 120ms ease-out, box-shadow 120ms ease-out;
}

.cst-sec p {
  margin: 0 0 7px;
  font-size: 14px;
  line-height: 1.5;
  color: rgb(var(--c-text));
}

.cst-sec.hover {
  background: rgb(var(--c-accent) / 0.08);
  box-shadow: inset 0 0 0 1px rgb(var(--c-accent) / 0.14);
}

.cst-sec.editing {
  background: rgb(var(--c-surface));
  box-shadow:
      0 0 0 2px rgb(var(--c-accent)),
      0 8px 22px rgb(var(--c-accent) / 0.14);
}

/* LIVENESS: the thinking dateline (mono, muted; the dateline IS the loading
     state per DESIGN.md — no spinner). Lives in the paper header while drafting. */

.cst-thinking-dateline {
  margin: 6px 0 14px;
  color: rgb(var(--c-muted));
}

/* LIVENESS: skeleton placeholder for a section that hasn't landed yet. A
     slow, non-looping shimmer sweep — no bounce; disabled under reduced motion. */

.cst-sec-pending {
  opacity: 0.85;
}

.cst-skeleton {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 2px 0 4px;
}

.cst-skel-line {
  display: block;
  height: 11px;
  width: 100%;
  border-radius: 4px;
  background: linear-gradient(
      90deg,
      rgb(var(--c-hairline) / 0.55) 25%,
      rgb(var(--c-hairline) / 0.25) 37%,
      rgb(var(--c-hairline) / 0.55) 63%
    );
  background-size: 400% 100%;
  animation: cst-skel-sweep 1.4s ease-in-out infinite;
}

@keyframes cst-skel-sweep {
  0% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cst-skel-line {
    animation: none;
  }
}

/* SELFDRAFT piece 1: a header-shaped skeleton line for an unnamed pending slot
     (unknown template) — taller + heavier so it reads as a heading, not a body
     line, holding the H2's vertical rhythm until the real slot name lands. */

.cst-skel-h2 {
  height: 16px;
  margin-bottom: 10px;
  border-radius: 5px;
  background: linear-gradient(
      90deg,
      rgb(var(--c-hairline) / 0.7) 25%,
      rgb(var(--c-hairline) / 0.35) 37%,
      rgb(var(--c-hairline) / 0.7) 63%
    );
  background-size: 400% 100%;
  animation: cst-skel-sweep 1.4s ease-in-out infinite;
}

/* SELFDRAFT piece 1 (Paper Skeleton): the section currently being drafted glows
     in an accent wash while the rest stay quiet skeletons (mockup Variant A). This
     is the pending-section analogue of CON-211's is-redrafting (which glows an
     EXISTING section during a refine). Tokens only, both themes, reduced-motion
     safe. The wash bleeds slightly past the content edge like the mockup's
     -14px inset so the drafting section reads as a lit band on the page. */

.cst-sec-drafting {
  position: relative;
  margin: 0 -14px 22px;
  padding: 6px 14px;
  border-radius: 9px;
  background: rgb(var(--c-accent) / 0.09);
  box-shadow: inset 0 0 0 1px rgb(var(--c-accent) / 0.18);
  animation: cst-drafting-breathe 2.2s ease-in-out infinite;
}

/* The glowing section's skeleton lines pick up the accent tint so the whole
     band reads as "the studio is writing here right now". */

.cst-sec-drafting .cst-skel-line,
  .cst-sec-drafting .cst-skel-h2 {
  background: linear-gradient(
      90deg,
      rgb(var(--c-accent) / 0.16) 25%,
      rgb(var(--c-accent) / 0.30) 50%,
      rgb(var(--c-accent) / 0.16) 63%
    );
  background-size: 400% 100%;
  animation: cst-skel-sweep 1.4s ease-in-out infinite;
}

.cst-sec-drafting .cst-sec-h2 {
  color: rgb(var(--c-accent-strong));
}

@keyframes cst-drafting-breathe {
  0%, 100% {
    box-shadow: inset 0 0 0 1px rgb(var(--c-accent) / 0.18);
  }

  50% {
    box-shadow: inset 0 0 0 1px rgb(var(--c-accent) / 0.32);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cst-skel-h2 {
    animation: none;
  }

  .cst-sec-drafting {
    animation: none;
  }

  .cst-sec-drafting .cst-skel-line,
    .cst-sec-drafting .cst-skel-h2 {
    animation: none;
    background: rgb(var(--c-accent) / 0.20);
  }
}

/* BUG 4 (deck drafting liveness): skeleton slides hold the deck's finished
     shape while generating — one 16:9 shimmer card per expected slot on the
     same dark Ledger Room slide surface, so a distilled-blueprint deck never
     drafts into an empty dead region. Tokens only, both themes. */

.cst-slide-pending {
  opacity: 0.82;
}

.cst-slide-pending .cst-slide {
  box-shadow: none;
}

/* The currently-drafting slot accents the slide FRAME (the paper variant's
     negative-margin accent wash does not fit a slide card). */

.cst-slide-wrap.cst-sec-drafting {
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  animation: none;
}

.cst-slide-wrap.cst-sec-drafting .cst-slide {
  border-color: rgb(var(--c-accent) / 0.6);
  animation: cst-slide-drafting-breathe 2.2s ease-in-out infinite;
}

@keyframes cst-slide-drafting-breathe {
  0%, 100% {
    box-shadow: 0 0 0 3px rgb(var(--c-accent) / 0.10);
  }

  50% {
    box-shadow: 0 0 0 3px rgb(var(--c-accent) / 0.24);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cst-slide-wrap.cst-sec-drafting .cst-slide {
    animation: none;
    box-shadow: 0 0 0 3px rgb(var(--c-accent) / 0.16);
  }
}

/* SELFDRAFT piece 3: the one-time studio entrance. The whole studio (paper +
     both rails) fades and lifts in together, ~300ms, ease-out — the workspace
     assembling. Mount-time only (fired once per thread-open in compose.js), so it
     never reflows mid-draft. Reduced-motion = instant (no transform, no fade). */

@keyframes cst-studio-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.cst-studio-entrance {
  animation: cst-studio-enter 300ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .cst-studio-entrance {
    animation: none;
  }
}

/* CON-211: refine redraft shimmer. A section being rewritten during a refine
     sweeps a soft accent gradient while its prose dims; siblings stay quiet.
     Tokens only, both themes, reduced-motion safe. Shares the pulse class
     family with CON-212's one-shot chip->section pulse (added there). */

@keyframes cst-redraft-sweep {
  0% {
    background-position: -460px 0;
  }

  100% {
    background-position: 460px 0;
  }
}

.cst-sec.is-redrafting {
  background: linear-gradient(
      100deg,
      rgb(var(--c-accent) / 0.12) 8%,
      rgb(var(--c-accent) / 0.24) 20%,
      rgb(var(--c-accent) / 0.12) 33%
    );
  background-size: 900px 100%;
  animation: cst-redraft-sweep 1.35s linear infinite;
  box-shadow: inset 0 0 0 1px rgb(var(--c-accent) / 0.16);
}

/* Dim the frozen prose while the redraft sweeps over it. */

.cst-sec.is-redrafting .cst-sec-h2,
  .cst-sec.is-redrafting [data-section-body] {
  opacity: 0.45;
}

/* The section is read-only mid-redraft — hide its edit affordance so the
     redraft tag owns the top-right corner. */

.cst-sec.is-redrafting .cst-edit-afford {
  display: none;
}

.redraft-tag {
  position: absolute;
  top: 8px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border: 1px solid rgb(var(--c-accent) / 0.30);
  border-radius: 6px;
  background: rgb(var(--c-surface));
  color: rgb(var(--c-accent-strong));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.redraft-tag .sp {
  height: 7px;
  width: 7px;
  border-radius: 999px;
  background: rgb(var(--c-accent));
  animation: cst-redraft-dot 1s ease-in-out infinite;
}

@keyframes cst-redraft-dot {
  50% {
    opacity: 0.3;
  }
}

/* CON-212: one-shot "changed" pulse fired when a rail diff chip is clicked
     to anchor the reader to the section it edited. Shares the .cst-sec redraft
     family (CON-211) — tokens only, <=250ms, reduced-motion = instant ring.
     Ported from docs/design/compose-conv-r2.html (.sec.pulsed / pulseOnce). */

@keyframes cst-pulse-once {
  0% {
    box-shadow:
        inset 0 0 0 2px rgb(var(--c-accent-strong)),
        0 0 0 4px rgb(var(--c-accent) / 0.16);
  }

  100% {
    box-shadow:
        inset 0 0 0 0 transparent,
        0 0 0 0 transparent;
  }
}

.cst-sec.is-pulsed {
  animation: cst-pulse-once 240ms ease-out 1;
}

@media (prefers-reduced-motion: reduce) {
  .cst-sec.is-redrafting {
    animation: none;
    background: rgb(var(--c-accent) / 0.12);
  }

  .redraft-tag .sp {
    animation: none;
  }

  .cst-sec.is-pulsed {
    animation: none;
    box-shadow: inset 0 0 0 2px rgb(var(--c-accent));
  }
}

/* CON-221a: read-only inline hunk decorations (red-delete / green-insert)
     shown in a just-refined section. Reuses the --c-up / --c-down / --c-accent
     tokens so it themes in both modes (design derives ins/del from up/down).
     Ported from docs/design/compose-conv-r2.html (.del / .ins / .touches-cite).
     Controls + accept/reject are CON-221c; this layer is display only. */

.cst-hunk {
  border-radius: 4px;
  transition: background 0.12s ease;
}

.cst-del {
  background: rgb(var(--c-down) / 0.10);
  color: rgb(var(--c-down));
  text-decoration: line-through;
  text-decoration-color: rgb(var(--c-down) / 0.5);
  border-radius: 3px;
  padding: 0 2px;
}

.cst-ins {
  background: rgb(var(--c-up) / 0.12);
  color: rgb(var(--c-up));
  border-radius: 3px;
  padding: 0 2px;
}

/* A citation-touching insert gets an accent underline — pulls verification
     attention to the claim (INV-CITE). */

.cst-ins.touches-cite {
  box-shadow: inset 0 -2px 0 0 rgb(var(--c-accent));
  color: rgb(var(--c-ink));
  background: rgb(var(--c-accent) / 0.08);
  padding-bottom: 1px;
}

.cst-cite-flag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgb(var(--c-accent) / 0.14);
  color: rgb(var(--c-accent-strong));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  vertical-align: baseline;
  white-space: nowrap;
}

.cst-cite-flag svg {
  flex: none;
}

/* CON-221c: per-hunk accept/reject review controls + revision review banner.
     Ports Variant A (.hunk-ctl) + the review banner from
     docs/design/compose-conv-r2.html; tokens only, so it themes in both modes. */

.cst-review-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0 0 12px;
  padding: 8px 12px;
  border: 1px solid rgb(var(--c-border));
  background: rgb(var(--c-bg-deep));
  border-radius: 9px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: rgb(var(--c-muted));
}

.cst-review-banner .cst-review-icon {
  display: inline-flex;
  flex: none;
  color: rgb(var(--c-accent));
}

.cst-review-banner .cst-review-icon svg {
  height: 14px;
  width: 14px;
}

.cst-review-count {
  flex: 0 1 auto;
  min-width: 0;
  color: rgb(var(--c-text));
}

.cst-review-count b {
  color: rgb(var(--c-ink));
  font-weight: 600;
}

.cst-review-grow {
  flex: 1 1 auto;
}

/* Keyboard-hint "?" affordance — the review keys live in its title/aria-label,
     surfaced on hover/focus instead of always-visible prose. */

.cst-review-help {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 999px;
  border: 1px solid rgb(var(--c-border));
  color: rgb(var(--c-muted));
  font-size: 10px;
  line-height: 1;
  cursor: help;
}

.cst-review-help:hover,
  .cst-review-help:focus-visible {
  color: rgb(var(--c-accent));
  border-color: rgb(var(--c-accent) / 0.4);
}

.cst-accept-all-lock {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  color: rgb(var(--c-muted));
  white-space: nowrap;
}

.cst-accept-all-lock svg {
  height: 12px;
  width: 12px;
  flex: none;
}

.cst-review-btn {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  border-radius: 7px;
  padding: 4px 10px;
  cursor: pointer;
  border: 1px solid rgb(var(--c-border));
  background: rgb(var(--c-surface));
  color: rgb(var(--c-text));
}

.cst-review-btn.cst-accept-all {
  color: rgb(var(--c-up));
  border-color: rgb(var(--c-up) / 0.55);
}

.cst-review-btn.cst-reject-all {
  color: rgb(var(--c-down));
  border-color: rgb(var(--c-down) / 0.5);
}

.cst-review-btn:hover {
  background: rgb(var(--c-surface-muted));
}

.cst-review-banner.is-committing {
  opacity: 0.55;
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════════════
     R2.2 — TICK MINIMAP + ON-DEMAND CONTROLS (founder redesign)
     Founder flagged that a full accept/edit/reject cluster PER hunk made the
     gutter grow TALLER THAN THE DOCUMENT at 30–56 word-hunks. Redesign: the
     gutter is a slim CHANGE-MINIMAP — one 3px colored TICK per hunk (accent =
     touches_citation, green = style), pinned to its hunk's vertical offset
     INSIDE the body box, so the gutter is exactly as tall as the prose and can
     NEVER outgrow it. The accept/edit/reject cluster appears ONLY for the
     ACTIVE hunk (hovered in prose or on its tick, or keyboard-focused) as a
     single floating cluster moved next to that hunk. Tokens only, both modes.
     ════════════════════════════════════════════════════════════════════════ */

/* Two-column grid: [tick gutter | prose]. The gutter is a positioning context
     whose HEIGHT tracks the body (grid rows are equal-height by default), so the
     ticks live within the prose box. */

.cst-diff-grid {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 0;
  margin-left: -22px;
}

.cst-degraded-anchors {
  display: none;
}

/* The gutter is a bare positioning strip — no flow layout, so its own content
     never adds height. Ticks are absolutely pinned (top set in JS). */

.cst-gutter {
  position: relative;
  align-self: stretch;
  border-right: 1px solid rgb(var(--c-border));
}

.cst-diff-body {
  position: relative;
  padding-left: 14px;
  min-width: 0;
}

.cst-hunk {
  position: relative;
  border-radius: 4px;
}

/* Prose-side focus / hover tint — cross-highlighted with the gutter tick. */

.cst-hunk.is-focused,
  .cst-hunk.is-hover {
  background: rgb(var(--c-accent) / 0.12);
  box-shadow: 0 0 0 1px rgb(var(--c-accent) / 0.22);
}

.cst-hunk-degraded {
  display: none;
}

/* no inline body — its tick carries it */

/* ── the slim tick: a 3px colored rule pinned to its hunk's line ── */

.cst-gtick {
  position: absolute;
  left: 5px;
  top: 0;
  width: 3px;
  height: 1.3em;
  min-height: 14px;
  padding: 0;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  background: rgb(var(--c-up) / 0.55);
  transition: transform 0.1s, box-shadow 0.1s, filter 0.1s;
}

.cst-gtick-cite {
  background: rgb(var(--c-accent));
}

.cst-gtick-style {
  background: rgb(var(--c-up) / 0.6);
}

.cst-gtick-degraded {
  opacity: 0.7;
}

.cst-gtick:hover,
  .cst-gtick.is-focused {
  transform: scaleX(1.8);
  filter: brightness(1.12);
  box-shadow: 0 0 0 2px rgb(var(--c-accent) / 0.18);
}

.cst-gtick:focus-visible {
  outline: 2px solid rgb(var(--c-accent-strong));
  outline-offset: 2px;
}

.cst-gtick.is-accepted {
  background: rgb(var(--c-up));
  opacity: 0.55;
}

.cst-gtick.is-rejected {
  background: rgb(var(--c-down));
  opacity: 0.4;
}

/* ── the single floating accept/edit/reject cluster (active hunk only) ──
     R2.3 (founder redesign — popover ABOVE the change): the cluster is no longer
     inserted inline (which reflowed the prose + pushed it right). It is an
     absolutely-positioned OVERLAY hosted in the .cst-paper (a position:relative
     ancestor), floated ABOVE the hovered line of the active change by JS
     (computePopoverPlacement). Because it lives inside the paper it tracks the
     change on scroll. .is-below flips it under the rect when there's no room above. */

.cst-active-ctl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 4px 5px;
  border: 1px solid rgb(var(--c-accent));
  border-radius: 9px;
  background: rgb(var(--c-surface));
  box-shadow: 0 4px 16px rgb(var(--c-ink) / 0.12), 0 0 0 3px rgb(var(--c-accent) / 0.12);
}

.cst-active-ctl.is-floating {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 30;
  /* enter motion: the tooltip lands (ease-out, micro). */
  animation: cst-ctl-in 90ms ease-out;
}

/* Hover-intent bridge: an invisible strip spanning the vertical gap between the
     change and the popover so a diagonal trip from one to the other never leaves
     both — the pointer stays "inside" the hover region. Below the popover when
     it sits ABOVE the change; above it when flipped BELOW. */

.cst-active-ctl.is-floating::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 12px;
  top: 100%;
}

.cst-active-ctl.is-floating.is-below::before {
  top: auto;
  bottom: 100%;
}

/* A small pointer caret so the popover reads as attached to the line below/above. */

.cst-active-ctl.is-floating::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  background: rgb(var(--c-surface));
  border: 1px solid rgb(var(--c-accent));
  bottom: -5px;
  border-top: none;
  border-left: none;
}

.cst-active-ctl.is-floating.is-below::after {
  bottom: auto;
  top: -5px;
  border-top: 1px solid rgb(var(--c-accent));
  border-left: 1px solid rgb(var(--c-accent));
  border-bottom: none;
  border-right: none;
}

@keyframes cst-ctl-in {
  from {
    opacity: 0;
    transform: translateY(2px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

[data-theme='dark'] .cst-active-ctl {
  box-shadow: 0 4px 16px rgb(var(--c-bg-deep) / 0.6), 0 0 0 3px rgb(var(--c-accent) / 0.14);
}

.cst-active-ctl[hidden] {
  display: none;
}

.cst-ac-btns {
  display: inline-flex;
  border: 1px solid rgb(var(--c-border));
  border-radius: 7px;
  overflow: hidden;
  background: rgb(var(--c-surface));
}

.cst-ac-btns button {
  display: grid;
  place-items: center;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 4px 7px;
  line-height: 0;
  color: rgb(var(--c-muted));
}

.cst-ac-btns button svg {
  height: 13px;
  width: 13px;
}

.cst-ac-btns .cst-hunk-acc {
  color: rgb(var(--c-up));
}

.cst-ac-btns .cst-hunk-edt {
  color: rgb(var(--c-accent));
  border-left: 1px solid rgb(var(--c-border));
  border-right: 1px solid rgb(var(--c-border));
}

.cst-ac-btns .cst-hunk-rej {
  color: rgb(var(--c-down));
}

.cst-ac-btns button:hover {
  background: rgb(var(--c-surface-muted));
}

.cst-ac-btns button:focus-visible,
  .cst-hunk-ctl button:focus-visible,
  .cst-review-btn:focus-visible,
  .cst-vm-btn:focus-visible {
  outline: 2px solid rgb(var(--c-accent-strong));
  outline-offset: 1px;
}

/* Citation-touching hunks show the re-verify promise; style hunks say the
     change is pure wording. Only the note matching the active hunk's kind shows. */

.cst-ac-note {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  line-height: 1.35;
  max-width: 240px;
  display: none;
  align-items: flex-start;
  gap: 5px;
}

.cst-ac-note svg {
  flex: none;
  margin-top: 1px;
}

.cst-ac-note-cite {
  color: rgb(var(--c-accent-strong));
}

.cst-ac-note-style {
  color: rgb(var(--c-muted));
}

.cst-active-ctl.is-cite .cst-ac-note-cite {
  display: inline-flex;
}

.cst-active-ctl.is-style .cst-ac-note-style {
  display: inline-flex;
}

/* staged decisions — visible mid-review, committed once every hunk resolves.
     Applies to the prose hunk (its tick decision class is handled above). */

.cst-hunk.is-accepted {
  background: rgb(var(--c-up) / 0.10);
}

.cst-hunk.is-accepted .cst-del {
  display: none;
}

.cst-hunk.is-rejected .cst-ins {
  display: none;
}

.cst-hunk.is-rejected .cst-del {
  text-decoration: none;
  color: rgb(var(--c-text));
  background: transparent;
}

/* view-mode toggle (Changes | Result | Original) — compact segmented control */

.cst-view-toggle {
  display: inline-flex;
  flex: none;
  gap: 2px;
  padding: 2px;
  border: 1px solid rgb(var(--c-border));
  border-radius: 999px;
  background: rgb(var(--c-surface));
}

.cst-vm-btn {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.02em;
  color: rgb(var(--c-muted));
  border: none;
  background: transparent;
  border-radius: 999px;
  padding: 3px 10px;
  cursor: pointer;
}

.cst-vm-btn:hover {
  color: rgb(var(--c-text));
}

.cst-vm-btn.is-on {
  background: rgb(var(--c-accent));
  color: rgb(var(--c-surface));
}

/* In Result / Original the gutter is inert: hide it + collapse to a single
     column so the clean prose reads at full width. (The gutter is
     display:none, so the body would otherwise fall into the first grid track —
     collapse to one column and drop the negative margin.) */

[data-view-mode='result'] .cst-diff-grid,
  [data-view-mode='original'] .cst-diff-grid {
  grid-template-columns: minmax(0, 1fr);
  margin-left: 0;
}

[data-view-mode='result'] .cst-gutter,
  [data-view-mode='original'] .cst-gutter {
  display: none;
}

[data-view-mode='result'] .cst-diff-body,
  [data-view-mode='original'] .cst-diff-body {
  padding-left: 0;
}

/* CON-221d: hand-edit a hunk before accept ("accept with my tweaks"). While
     editing, the proposal hides and an inline editor takes over. */

.cst-hunk.is-editing > .cst-del,
  .cst-hunk.is-editing > .cst-ins {
  display: none;
}

.cst-hunk-editing {
  display: inline-block;
  width: 100%;
  margin: 6px 0;
  border: 1px solid rgb(var(--c-accent));
  border-radius: 9px;
  background: rgb(var(--c-surface));
  box-shadow: 0 0 0 3px rgb(var(--c-accent) / 0.18);
  vertical-align: middle;
}

.cst-hunk-editing textarea {
  width: 100%;
  border: none;
  background: transparent;
  resize: none;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.6;
  color: rgb(var(--c-ink));
  padding: 10px 12px 4px;
  outline: none;
}

.cst-hunk-editing .cst-he-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 8px;
  border-top: 1px solid rgb(var(--c-border));
}

.cst-hunk-editing .cst-he-note {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  color: rgb(var(--c-muted));
  margin-right: auto;
}

/* an edited-then-accepted hunk: the reviewer's words landed, marked human */

.cst-hunk.is-edited .cst-ins {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: rgb(var(--c-accent));
  text-underline-offset: 3px;
}

.cst-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Item 4b — studio fills its scrollport (kills the h-[calc(100dvh-116px)]
     magic number that no longer matched the chrome after header/toolbar
     changes, leaving a dead band below the rails + clipping the dock popover).
     The gallery → main-inner → scroll ancestors flex-fill in studio mode; the
     studio owns exactly the remaining height and scrolls internally. Scoped to
     [data-studio-fill] so gallery/bakeoff keep their scrolling container. */

[data-testid='compose-scroll'][data-studio-fill] {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}

[data-testid='compose-main-inner'][data-studio-fill] {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  max-width: none;
  /* FOUNDER BUG (deck layout, 2026-07-11): the shell's mx-auto leaves
       auto cross-axis margins on this flex item, which defeat stretching —
       at wide viewports the whole studio collapsed to its intrinsic width
       and centered, leaving dead bands beside the rails (the refine rail
       read as clipped, with an empty black region next to the deck).
       Full width + explicit zero margins make the studio span the window. */
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

[data-testid='compose-gallery'][data-studio-fill] {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 0;
}

.cst-studio-fill {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

.cst-edit-afford {
  position: absolute;
  top: 7px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgb(var(--c-accent) / 0.30);
  border-radius: 7px;
  background: rgb(var(--c-surface));
  color: rgb(var(--c-accent));
  padding: 2px 7px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  opacity: 0;
  transition: opacity 120ms ease-out, background 120ms ease-out, color 120ms ease-out;
}

.cst-sec.hover .cst-edit-afford,
  .cst-sec.editing .cst-edit-afford {
  opacity: 1;
}

.cst-sec.editing .cst-edit-afford {
  color: rgb(var(--c-surface));
  background: rgb(var(--c-accent));
  border-color: rgb(var(--c-accent));
}

/* Section editor toolbar (founder 2026-07-06: the old segmented row had
     content-width cells — B/I narrow, "rewrite" wide — reading ragged. Now:
     grouped uniform icon cells (format · grounding) + a divider + a commit
     group with a filled Save. Every tool cell is a fixed 30px square. */

.cst-edit-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
  padding: 4px;
  border: 1px solid rgb(var(--c-border));
  border-radius: 11px;
  background: rgb(var(--c-surface));
}

.cst-edit-toolbar .fmt-grp {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.cst-edit-toolbar .fmt-sep {
  width: 1px;
  height: 20px;
  margin: 0 1px;
  background: rgb(var(--c-border));
}

.cst-edit-toolbar .fmt-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgb(var(--c-muted));
  font-size: 13px;
  line-height: 1;
  transition: background 120ms ease-out, color 120ms ease-out;
}

.cst-edit-toolbar .fmt-cell:hover {
  background: rgb(var(--c-border) / 0.55);
  color: rgb(var(--c-text));
}

.cst-edit-toolbar .fmt-cell.on {
  background: rgb(var(--c-accent) / 0.14);
  color: rgb(var(--c-accent));
}

.cst-edit-toolbar .fmt-cell.\!on {
  background: rgb(var(--c-accent) / 0.14) !important;
  color: rgb(var(--c-accent)) !important;
}

.cst-edit-toolbar .fmt-save {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 13px;
  border: 0;
  border-radius: 8px;
  background: rgb(var(--c-accent));
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  transition: background 120ms ease-out;
}

.cst-edit-toolbar .fmt-save:hover {
  background: rgb(var(--c-accent) / 0.88);
}

.cst-edit-toolbar .fmt-cancel {
  height: 30px;
  padding: 0 11px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgb(var(--c-muted));
  font-size: 12.5px;
  transition: background 120ms ease-out, color 120ms ease-out;
}

.cst-edit-toolbar .fmt-cancel:hover {
  background: rgb(var(--c-border) / 0.55);
  color: rgb(var(--c-text));
}

.cst-rail {
  position: relative;
  flex: 0 0 264px;
  min-width: 264px;
  min-height: 0;
  overflow-y: auto;
  padding: 0;
  background: rgb(var(--c-bg-deep));
  border-right: 1px solid rgb(var(--c-border));
  color: rgb(var(--c-text));
  font-family: 'Instrument Sans', system-ui, sans-serif;
}

/* HEADER BLOCK — one machined island: title+badge / segmented / search.
     Top margin clears the .rail-collapse control (top:14px, 26px tall) so the
     collapse chevron sits on the flat --bg-deep rail — identical to the refine
     rail, where its chevron also floats on the bare rail beside the title
     (founder review 2026-07-06: the two collapse controls must render the same,
     not one-over-a-card / one-over-bg). */

.cst-rail .rl-head {
  position: relative;
  margin: 48px 10px 14px;
  padding: 16px;
  background: rgb(var(--c-surface));
  border: 1px solid rgb(var(--c-border));
  border-radius: 14px;
  box-shadow: 0 1px 2px rgb(var(--c-ink) / 0.04);
}

[data-theme='dark'] .cst-rail .rl-head {
  box-shadow: 0 1px 2px rgb(var(--c-bg-deep) / 0.4);
}

.cst-rail .rl-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 2px 12px;
}

.cst-rail .rl-title .lbl {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgb(var(--c-muted));
}

.cst-rail .rl-title .cnt {
  margin-left: auto;
  padding: 3px 8px;
  border: 1px solid rgb(var(--c-border));
  border-radius: 6px;
  background: rgb(var(--c-bg-deep));
  color: rgb(var(--c-data));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cst-rail .rl-title .cnt b {
  color: rgb(var(--c-ink));
  font-weight: 600;
}

/* SCOPE — one quiet line BELOW the header island */

.cst-rail .rl-scope {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 12px 4px;
  padding: 5px 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: rgb(var(--c-accent));
}

.cst-rail .rl-scope .g {
  display: inline-flex;
  align-items: center;
  opacity: 0.85;
}

.cst-rail .rl-scope .\!g {
  display: inline-flex !important;
  align-items: center !important;
  opacity: 0.85 !important;
}

.cst-rail .rl-scope .sep {
  color: rgb(var(--c-muted));
  opacity: 0.6;
}

.cst-rail .rl-scope .txt {
  color: rgb(var(--c-muted));
}

/* Rail collapse control — the ONE shared idiom for both rails. Rendered by
     railCollapseButtonHtml() in compose-ui.js; see DESIGN.md "Rail collapse
     control". Left rail collapses left (--left, chevron pointing at the rail's
     inner/right edge), refine rail collapses right (--right). Identical size,
     radius, border, hover, focus, and offset from the rail's top + inner edge —
     divergence is impossible because there is one class. */

.rail-collapse {
  position: absolute;
  top: 14px;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: rgb(var(--c-muted));
  line-height: 1;
  transition: background 100ms ease-out, border-color 100ms ease-out, color 100ms ease-out;
}

.rail-collapse--left {
  right: 8px;
}

.rail-collapse--right {
  left: 8px;
}

.rail-collapse:hover {
  background: rgb(var(--c-surface));
  border-color: rgb(var(--c-border));
  color: rgb(var(--c-accent));
}

.rail-collapse:focus-visible {
  outline: none;
  border-color: rgb(var(--c-accent));
  box-shadow: 0 0 0 2px rgb(var(--c-accent) / 0.35);
  color: rgb(var(--c-accent));
}

.cst-rail .rl-seg {
  display: flex;
  gap: 4px;
  margin: 0 0 12px;
  padding: 5px;
  border: 1px solid rgb(var(--c-border));
  border-radius: 10px;
  background: rgb(var(--c-bg-deep));
}

.cst-rail .rl-seg .sg {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  border-radius: 8px;
  padding: 8px 5px;
  line-height: 1;
  white-space: nowrap;
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: rgb(var(--c-muted));
}

.cst-rail .rl-seg .sg .n {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-variant-numeric: tabular-nums;
  color: rgb(var(--c-muted));
}

.cst-rail .rl-seg .sg .\!n {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 9.5px !important;
  font-variant-numeric: tabular-nums !important;
  color: rgb(var(--c-muted)) !important;
}

.cst-rail .rl-seg .sg.on {
  color: rgb(var(--c-accent-strong));
  font-weight: 600;
  background: rgb(var(--c-surface));
  box-shadow:
      inset 0 0 0 1px rgb(var(--c-accent) / 0.18),
      0 1px 2px rgb(var(--c-ink) / 0.10);
}

.cst-rail .rl-seg .sg.\!on {
  color: rgb(var(--c-accent-strong)) !important;
  font-weight: 600 !important;
  background: rgb(var(--c-surface)) !important;
  box-shadow:
      inset 0 0 0 1px rgb(var(--c-accent) / 0.18),
      0 1px 2px rgb(var(--c-ink) / 0.10) !important;
}

.cst-rail .rl-seg .sg.on .n {
  color: rgb(var(--c-accent));
}

.cst-rail .rl-seg .sg.\!on .n {
  color: rgb(var(--c-accent)) !important;
}

.cst-rail .rl-seg .sg.on .\!n {
  color: rgb(var(--c-accent)) !important;
}

.cst-rail .rl-search {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid rgb(var(--c-border));
  border-radius: 10px;
  background: rgb(var(--c-bg-deep));
  color: rgb(var(--c-muted));
  font-size: 12.5px;
}

.cst-rail .rl-search .mag {
  display: inline-flex;
  align-items: center;
  opacity: 0.75;
  color: rgb(var(--c-muted));
}

.cst-rail .rl-search input {
  min-width: 0;
  flex: 1 1 auto;
  border: 0;
  outline: 0;
  background: transparent;
  color: rgb(var(--c-text));
  font: inherit;
  font-size: 12.5px;
}

.cst-rail .rl-search input::-moz-placeholder {
  color: rgb(var(--c-muted));
}

.cst-rail .rl-search input::placeholder {
  color: rgb(var(--c-muted));
}

.cst-rail .rl-body {
  padding: 0 8px 14px 6px;
}

.cst-rail .rl-micro {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 14px 12px 4px;
  color: rgb(var(--c-muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cst-rail .rl-micro.pin {
  color: rgb(var(--c-accent));
}

.cst-rail .rl-micro.shape {
  color: rgb(var(--c-data));
}

.cst-rail .rl-micro.\!shape {
  color: rgb(var(--c-data)) !important;
}

.cst-rail .rl-micro .after {
  flex: 1 1 auto;
  height: 1px;
  background: rgb(var(--c-border));
  opacity: 0.7;
}

.cst-rail .rl-micro .\!after {
  flex: 1 1 auto !important;
  height: 1px !important;
  background: rgb(var(--c-border)) !important;
  opacity: 0.7 !important;
}

.cst-rail .rl-conn {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 10px 12px 2px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: rgb(var(--c-data));
}

.cst-rail .rl-conn .cn {
  font-weight: 600;
  color: rgb(var(--c-ink));
}

.cst-rail .rl-conn .cc {
  color: rgb(var(--c-muted));
}

.cst-rail .rl-conn .cico {
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 4px;
  color: #fff;
  background: rgb(var(--c-ink));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 8.5px;
  font-weight: 600;
  flex: 0 0 auto;
}

.cst-rail .rl-row .glyph .cg {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  color: #fff;
  background: rgb(var(--c-ink));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  font-weight: 600;
  overflow: hidden;
}

.cst-rail-strip .sico {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  color: #fff;
  background: rgb(var(--c-ink));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
}

.cst-rail .rl-conn .cico .ic,
  .cst-rail .rl-row .glyph .cg .ic,
  .cst-rail-strip .sico .ic {
  color: #fff;
}

.cst-rail .rl-conn .cico.bi,
  .cst-rail .rl-row .glyph .cg.bi,
  .cst-rail-strip .sico.bi {
  background: rgb(var(--c-accent));
}

.cst-rail .rl-conn .cico.pdf,
  .cst-rail .rl-row .glyph .cg.pdf,
  .cst-rail-strip .sico.pdf {
  background: rgb(var(--c-down));
}

.cst-rail .rl-conn .cico.img,
  .cst-rail .rl-row .glyph .cg.img,
  .cst-rail-strip .sico.img {
  background: rgb(var(--c-data));
}

.cst-rail .rl-conn .cico.\!img,
  .cst-rail .rl-row .glyph .cg.\!img,
  .cst-rail-strip .sico.\!img {
  background: rgb(var(--c-data)) !important;
}

/* DENSE ROW — glyph · pinmark · name · meta · hover-acts, single line 40px */

.cst-rail .rl-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 40px;
  margin: 0;
  padding: 9px 12px;
  border-radius: 8px;
  color: rgb(var(--c-text));
  /* Provenance: the whole row is a "show where in the doc" affordance. */
  cursor: pointer;
  transition: background 120ms ease-out, box-shadow 120ms ease-out;
}

.cst-rail .rl-row + .rl-row {
  box-shadow: inset 0 1px 0 rgb(var(--c-border));
}

.cst-rail .rl-row:hover,
  .cst-rail .rl-row:focus-within {
  background: rgb(var(--c-accent) / 0.08);
}

/* The row whose provenance is currently shown in the document. */

.cst-rail .rl-row.prov-active {
  background: rgb(var(--c-accent) / 0.12);
  box-shadow: inset 3px 0 0 rgb(var(--c-accent));
}

.cst-rail .rl-row.shaping {
  background: rgb(var(--c-data) / 0.06);
  box-shadow: inset 2px 0 0 rgb(var(--c-data) / 0.46);
  cursor: default;
}

.cst-rail .rl-row.\!shaping {
  background: rgb(var(--c-data) / 0.06) !important;
  box-shadow: inset 2px 0 0 rgb(var(--c-data) / 0.46) !important;
  cursor: default !important;
}

.cst-rail .rl-row.shaping:hover,
  .cst-rail .rl-row.shaping:focus-within {
  background: rgb(var(--c-data) / 0.10);
}

.cst-rail .rl-row.\!shaping:hover,
  .cst-rail .rl-row.\!shaping:focus-within {
  background: rgb(var(--c-data) / 0.10) !important;
}

.cst-rail .rl-row.dim {
  opacity: 0.5;
}

.cst-rail .rl-row.dim .nm {
  color: rgb(var(--c-data));
  font-weight: 400;
}

.cst-rail .rl-row.dim .meta {
  color: rgb(var(--c-muted));
}

.cst-rail .rl-row.dim .\!meta {
  color: rgb(var(--c-muted)) !important;
}

.cst-rail .rl-row.struck .nm {
  color: rgb(var(--c-muted));
  font-weight: 400;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* CUX-025: an @bi source whose pipeline call failed — honest, visible. */

.cst-rail .rl-row.failed {
  flex-wrap: wrap;
}

.cst-rail .rl-row.\!failed {
  flex-wrap: wrap !important;
}

.cst-rail .rl-row.failed .meta {
  color: rgb(var(--c-down));
  font-weight: 600;
}

.cst-rail .rl-row.\!failed .meta {
  color: rgb(var(--c-down)) !important;
  font-weight: 600 !important;
}

.cst-rail .rl-row.failed .\!meta {
  color: rgb(var(--c-down)) !important;
  font-weight: 600 !important;
}

.cst-rail .rl-row.failed .rl-fail-note {
  flex-basis: 100%;
  margin-top: 3px;
  padding-left: 22px;
  color: rgb(var(--c-down));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  line-height: 1.4;
}

.cst-rail .rl-row.\!failed .rl-fail-note {
  flex-basis: 100% !important;
  margin-top: 3px !important;
  padding-left: 22px !important;
  color: rgb(var(--c-down)) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10px !important;
  line-height: 1.4 !important;
}

.cst-rail .rl-row.struck .glyph .cg {
  opacity: 0.5;
}

.cst-rail .rl-row.struck .meta {
  color: rgb(var(--c-accent));
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cst-rail .rl-row.struck .\!meta {
  color: rgb(var(--c-accent)) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

.cst-rail .rl-row .glyph {
  flex: 0 0 16px;
  width: 16px;
  display: grid;
  place-items: center;
  line-height: 1;
}

.cst-rail .rl-row .pinmark {
  flex: 0 0 auto;
  display: inline-flex;
  color: rgb(var(--c-muted));
  line-height: 1;
}

.cst-rail .rl-row .nm {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgb(var(--c-ink));
  font-size: 12.5px;
  font-weight: 500;
}

.cst-rail .rl-row .role-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 0 6px;
  border: 1px solid rgb(var(--c-data) / 0.35);
  border-radius: 999px;
  background: rgb(var(--c-data) / 0.09);
  color: rgb(var(--c-data));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.cst-rail .rl-row .meta {
  flex: 0 0 auto;
  border: 0;
  padding: 0;
  background: transparent;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: rgb(var(--c-accent));
}

.cst-rail .rl-row .\!meta {
  flex: 0 0 auto !important;
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10px !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
  color: rgb(var(--c-accent)) !important;
}

.cst-rail .rl-row.shaping .meta {
  color: rgb(var(--c-muted));
}

.cst-rail .rl-row.\!shaping .meta {
  color: rgb(var(--c-muted)) !important;
}

.cst-rail .rl-row.shaping .\!meta {
  color: rgb(var(--c-muted)) !important;
}

.cst-rail .rl-row .acts {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
}

.cst-rail .rl-row:hover .meta,
  .cst-rail .rl-row:focus-within .meta {
  display: none;
}

.cst-rail .rl-row:hover .\!meta,
  .cst-rail .rl-row:focus-within .\!meta {
  display: none !important;
}

.cst-rail .rl-row:hover .acts,
  .cst-rail .rl-row:focus-within .acts {
  display: flex;
}

.cst-rail .rl-row .acts .a {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 1px solid rgb(var(--c-accent) / 0.30);
  border-radius: 6px;
  background: rgb(var(--c-surface));
  color: rgb(var(--c-accent));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  line-height: 1;
}

.cst-rail .rl-row .acts .a .ic {
  display: none;
}

.cst-rail .rl-row .acts .a.mute {
  color: rgb(var(--c-muted));
  border-color: rgb(var(--c-border));
}

/* DSRC-012c: the "→ value" jump on a BI rail row — a quiet accent pill linking
     the row to its repository value. Present at rest (unlike .acts, so a failed
     BI value is still reachable); it firms up on hover/focus. */

.cst-rail .rl-row .rl-bi-jump {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 3px;
  margin-left: 2px;
  height: 20px;
  padding: 0 6px;
  border: 1px solid rgb(var(--c-accent) / 0.28);
  border-radius: 6px;
  background: rgb(var(--c-surface));
  color: rgb(var(--c-accent));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  line-height: 1;
  opacity: 0.72;
  cursor: pointer;
  transition: opacity 120ms ease-out, background 120ms ease-out, border-color 120ms ease-out;
}

.cst-rail .rl-row .rl-bi-jump .ic {
  width: 11px;
  height: 11px;
}

.cst-rail .rl-row:hover .rl-bi-jump,
  .cst-rail .rl-row:focus-within .rl-bi-jump {
  opacity: 1;
  background: rgb(var(--c-accent) / 0.10);
  border-color: rgb(var(--c-accent) / 0.45);
}

.cst-rail .rl-row .rl-bi-jump:hover,
  .cst-rail .rl-row .rl-bi-jump:focus-visible {
  background: rgb(var(--c-accent) / 0.16);
  outline: none;
}

/* POPFIX (founder 2026-07-26): a BI row with no bindable value reads "→ fix"
     in the attention amber — the accent "→ value" promise would be a lie. Same
     pill, same quietness; only the state colour changes (amber = attention,
     per the CT Ledger budget — never red in the rail). */

.cst-rail .rl-row .rl-bi-jump.is-fix {
  border-color: rgb(var(--c-warn) / 0.35);
  color: rgb(var(--c-warn));
}

.cst-rail .rl-row:hover .rl-bi-jump.is-fix,
  .cst-rail .rl-row:focus-within .rl-bi-jump.is-fix {
  background: rgb(var(--c-warn) / 0.10);
  border-color: rgb(var(--c-warn) / 0.5);
}

.cst-rail .rl-row .rl-bi-jump.is-fix:hover,
  .cst-rail .rl-row .rl-bi-jump.is-fix:focus-visible {
  background: rgb(var(--c-warn) / 0.16);
}

.cst-rail .rl-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  width: calc(100% - 24px);
  margin: 12px 12px 4px;
  padding: 9px 0 0;
  border: 0;
  border-top: 1px solid rgb(var(--c-border));
  background: transparent;
  text-align: left;
  color: rgb(var(--c-accent));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
}

.cst-rail .rl-foot .cq {
  display: inline-flex;
  align-items: center;
  color: rgb(var(--c-muted));
}

.cst-rail .rl-empty {
  margin: 26px 18px;
  text-align: center;
  color: rgb(var(--c-muted));
  font-size: 12px;
}

/* Honest error row when /sources itself fails (e.g. 409 while generating or
     after a failed draft) — muted alert, never a fake empty state. */

.cst-rail .rl-alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 18px 16px;
  padding: 10px 12px;
  border: 1px solid rgb(var(--c-border));
  border-radius: 8px;
  background: rgb(var(--c-surface));
  color: rgb(var(--c-muted));
  font-size: 12px;
  line-height: 1.5;
}

.cst-rail .rl-alert .ico {
  flex-shrink: 0;
  margin-top: 1px;
  color: rgb(var(--c-down));
}

.cst-rail-strip {
  flex: 0 0 46px;
  width: 46px;
  min-height: 0;
  background: rgb(var(--c-bg-deep));
  border-right: 1px solid rgb(var(--c-border));
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.cst-rail-strip .expand {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgb(var(--c-border));
  border-radius: 9px;
  background: rgb(var(--c-surface));
  color: rgb(var(--c-accent));
}

.cst-rail-strip .sbadge {
  border: 1px solid rgb(var(--c-border));
  border-radius: 7px;
  background: rgb(var(--c-surface));
  color: rgb(var(--c-ink));
  padding: 3px 6px;
  text-align: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
}

.cst-rail-strip .sbadge span {
  display: block;
  color: rgb(var(--c-muted));
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.06em;
}

.cst-rail-strip .vlabel {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(var(--c-muted));
}

/* Collapsed refine rail — the right-side mirror of .cst-rail-strip. Sits on
     --surface (its expanded rail's colour) with a left hairline. */

.cst-chat-strip {
  position: relative;
  flex: 0 0 46px;
  width: 46px;
  min-height: 0;
  background: rgb(var(--c-surface));
  border-left: 1px solid rgb(var(--c-border));
  padding: 12px 6px;
  align-items: center;
  gap: 12px;
}

.cst-chat-strip .expand {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgb(var(--c-border));
  border-radius: 9px;
  background: rgb(var(--c-bg-deep));
  color: rgb(var(--c-accent));
}

.cst-chat-strip .cico {
  display: inline-flex;
  color: rgb(var(--c-accent));
}

.cst-chat-strip .sbadge {
  border: 1px solid rgb(var(--c-border));
  border-radius: 7px;
  background: rgb(var(--c-bg-deep));
  color: rgb(var(--c-ink));
  padding: 3px 6px;
  text-align: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
}

.cst-chat-strip .sbadge span {
  display: block;
  color: rgb(var(--c-accent-strong));
}

.cst-chat-strip .vlabel {
  writing-mode: vertical-rl;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(var(--c-muted));
}

.cst-chat {
  position: relative;
  flex: 0 0 348px;
  min-height: 0;
  background: rgb(var(--c-surface));
  border-left: 1px solid rgb(var(--c-border));
  display: flex;
  flex-direction: column;
  color: rgb(var(--c-text));
  font-family: 'Instrument Sans', system-ui, sans-serif;
}

/* LAYOUT GUARD (founder 2026-07-26, defect B: the Refine rail took over the
     whole page, squeezing the deck to a sliver). Two belt-and-braces floors so
     NO transient state can zero-width the document/deck pane:
     1. The refine rail is width-clamped by its STABLE data attribute — not only
        the toggleable `.cst-chat` class. If a mid-refine re-render ever drops
        `.cst-chat` (leaving the bare `xl:flex` utility, which is grow-to-content
        `flex: 0 1 auto`), this cap still pins it to the side-rail width so it can
        never expand to fill the row. The 46px collapsed strip opts out.
     2. The one flexible pane (prose doc-zone / deck-zone) keeps a hard min-width
        floor, so even if the fixed rails plus a misbehaving sibling overflow the
        row, the document never collapses below a readable column. */

.\!studio > [data-compose-chat]:not(.cst-chat-strip) {
  flex: 0 0 348px !important;
  max-width: 348px !important;
}

.studio > [data-compose-chat]:not(.cst-chat-strip) {
  flex: 0 0 348px;
  max-width: 348px;
}

.\!studio > .doc-zone,
  .\!studio > .cst-deck-zone {
  min-width: min(360px, 100%) !important;
}

.studio > .doc-zone,
  .studio > .cst-deck-zone {
  min-width: min(360px, 100%);
}

.\!studio > .doc-zone,
  .\!studio > .cst-deck-zone {
  min-width: min(360px, 100%) !important;
}

/* Refine-rail collapse control uses the shared .rail-collapse idiom
     (defined once above; rendered by railCollapseButtonHtml('right')). */

.cst-chat .chat-head {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 13px 16px 12px 40px;
  border-bottom: 1px solid rgb(var(--c-border));
}

/* CON-224 header, uncrowded (founder bug 2026-07-07): a baseline-aligned row —
     "Refine" label, a hairline divider, then the document name as a SINGLE
     truncated line. The name never wraps to a second line or collides with the
     label; the full name lives in its title= tooltip. */

.cst-chat .chat-head .t-row {
  display: flex;
  align-items: baseline;
  gap: 9px;
  min-width: 0;
}

.cst-chat .chat-head .t {
  flex: 0 0 auto;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 15px;
  font-weight: 600;
  color: rgb(var(--c-ink));
}

.cst-chat .chat-head .\!t {
  flex: 0 0 auto !important;
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: rgb(var(--c-ink)) !important;
}

/* Hairline divider between the label and the doc name — reads as one calm
     "Refine · <name>" line rather than two competing labels. */

.cst-chat .chat-head .t-row::before {
  content: "";
  order: 1;
  flex: 0 0 auto;
  align-self: center;
  width: 1px;
  height: 12px;
  background: rgb(var(--c-border));
}

.cst-chat .chat-head .s {
  order: 2;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: 12.5px;
  color: rgb(var(--c-muted));
}

.cst-chat .chat-head .\!s {
  order: 2 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-family: 'Instrument Sans', system-ui, sans-serif !important;
  font-size: 12.5px !important;
  color: rgb(var(--c-muted)) !important;
}

/* CON-224 "working from rev N (incl. your edits)" — the visible INV-SYNC
     guarantee. Ported from docs/design/compose-conv-r2.html .revline; tokens
     only so it themes in both modes. */

.cst-chat .revline {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  background: rgb(var(--c-bg-deep));
  border: 1px solid rgb(var(--c-border));
  border-radius: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: rgb(var(--c-muted));
}

.cst-chat .revline .rv {
  color: rgb(var(--c-accent-strong));
  font-weight: 500;
}

.cst-chat .revline .edited {
  color: rgb(var(--c-up));
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.cst-chat .revline svg {
  height: 12px;
  width: 12px;
  flex: 0 0 auto;
}

.cst-chat .chat-thread {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* VARIANT A — Faithful shadcn Message + Bubble, re-skinned to CT Ledger
     (founder-approved 2026-07-10; deliberate DESIGN.md exception for the refine
     rail only). A message is a shadcn Message: a header (who) above the content.
     A user refine is a RIGHT accent Bubble (.bub-u); a Studio reply is a LEFT
     Message whose prose sits in an assistant Bubble (.bub-a). */

.cst-chat .msg-user {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

/* shadcn Bubble — user variant (accent, right-tucked corner). */

.cst-chat .bub-u {
  max-width: 86%;
  border-radius: 13px 13px 4px 13px;
  padding: 9px 13px;
  background: rgb(var(--c-accent));
  color: rgb(var(--c-surface));
  font-size: 13px;
  line-height: 1.48;
}

.cst-chat .msg-a {
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-width: 96%;
  color: rgb(var(--c-text));
  font-size: 13px;
  line-height: 1.5;
}

/* shadcn Bubble — assistant variant (Studio one-line change summary). A
     distinct recessed card so the summary reads as a spoken reply, above the
     diff Bubble. */

.cst-chat .bub-a {
  border: 1px solid rgb(var(--c-border));
  border-radius: 13px 13px 13px 4px;
  padding: 9px 12px;
  background: rgb(var(--c-bg-deep));
  color: rgb(var(--c-text));
  max-width: 100%;
}

.cst-chat .bub-a b {
  color: rgb(var(--c-ink));
  font-weight: 600;
}

.cst-chat .msg-user.optimistic {
  opacity: 0.75;
}

.cst-chat .msg-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 8.5px;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: rgb(var(--c-muted));
}

/* Variant A shows the "You" header above each user bubble (shadcn Message
     header), right-aligned to sit over the right-tucked bubble. */

.cst-chat .msg-user .msg-meta {
  flex-direction: row-reverse;
}

/* SELFDRAFT piece 2: the initial brief message DOES show its meta (You · brief)
     — it opens the rail's transcript during generation, so the "who + what" label
     is the anchor. Overrides the blanket msg-user meta hide above. */

.cst-chat [data-chat-brief] .msg-meta {
  display: flex;
}

.cst-chat .msg-meta-tag {
  border-radius: 999px;
  background: rgb(var(--c-accent) / 0.12);
  color: rgb(var(--c-accent));
  padding: 1px 7px;
  letter-spacing: 0.06em;
}

.cst-chat .latest-badge {
  margin-left: auto;
  border-radius: 999px;
  background: rgb(var(--c-accent) / 0.12);
  color: rgb(var(--c-accent));
  padding: 2px 6px;
  letter-spacing: 0;
  text-transform: none;
}

.cst-chat .msg-body {
  white-space: pre-wrap;
  word-break: break-word;
}

/* Long-message truncation (ChatGPT-style): a message that ships a "Show more"
     button (data-chat-expand) is clamped to ~6 lines until its article is
     expanded. Line-clamp keeps the collapse purely visual — the full text stays
     in the DOM (copy still grabs it all). data-expanded="true" releases it. */

.cst-chat article:has(.msg-expand) .msg-body {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  overflow: hidden;
}

.cst-chat article[data-expanded="true"] .msg-body {
  display: block;
  -webkit-line-clamp: none;
  line-clamp: none;
  overflow: visible;
}

.cst-chat .msg-expand {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 500;
  color: rgb(var(--c-accent));
  background: transparent;
  border: 0;
  padding: 2px 0;
  cursor: pointer;
  border-radius: 4px;
}

/* Inside the accent-filled user bubble the accent-on-accent button would be
     invisible — use the surface color the bubble text already uses. */

.cst-chat .msg-user .msg-expand {
  color: rgb(var(--c-surface));
  opacity: 0.85;
}

.cst-chat .msg-expand:hover {
  text-decoration: underline;
}

.cst-chat .msg-expand:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* RAIL LIVENESS (founder 2026-07-07): the transient studio-side "working" row.
     Sits right after the just-sent user message so the send is acknowledged
     where the user typed it. Studio-role styling (left-aligned, like .msg-a);
     tokens only, both themes. Cleared when the studio reply lands. */

.cst-chat .cst-working {
  align-self: flex-start;
  max-width: 96%;
}

/* VARIANT A: the working row IS an assistant Bubble (.bub-a) carrying the orb,
     the shimmer status text, and the mono timer in a single flex row. */

.cst-chat .cst-working-row {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgb(var(--c-muted));
}

/* A soft pulsing accent orb — the R1 liveness idiom (accent, non-looping-feel
     breathe), never a spinner. Reduced-motion pins it steady. */

.cst-chat .cst-working-orb {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgb(var(--c-accent));
  box-shadow: 0 0 0 0 rgb(var(--c-accent) / 0.35);
  animation: cst-working-breathe 1.6s ease-in-out infinite;
}

/* Founder round 2 (orbs): with the 20px composing thinking orb mounted inside
     the slot the CSS dot retires entirely — never dot+orb together (the same
     no-double-indicator rule as the intake READING chip). The failed row never
     gets `has-orb` (failure is not a reasoning state) and keeps the static dot. */

.cst-chat .cst-working-orb.has-orb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 0;
  background: none;
  box-shadow: none;
  animation: none;
}

@keyframes cst-working-breathe {
  0%, 100% {
    opacity: 0.55;
    box-shadow: 0 0 0 0 rgb(var(--c-accent) / 0.30);
  }

  50% {
    opacity: 1;
    box-shadow: 0 0 0 4px rgb(var(--c-accent) / 0);
  }
}

.cst-chat .cst-working-text {
  min-width: 0;
  flex: 1 1 auto;
  color: rgb(var(--c-text));
}

/* shadcn "shimmer" — an animated tone sweep across the live status copy so
     "Studio is drafting · <phase>" reads as actively working. Reduced-motion
     falls back to a solid ink tone (below). */

.cst-chat .cst-shimmer {
  background: linear-gradient(
      90deg,
      rgb(var(--c-muted)) 0%,
      rgb(var(--c-muted)) 38%,
      rgb(var(--c-ink)) 50%,
      rgb(var(--c-muted)) 62%,
      rgb(var(--c-muted)) 100%
    );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: cst-shimmer 1.9s linear infinite;
}

@keyframes cst-shimmer {
  0% {
    background-position: 120% 0;
  }

  100% {
    background-position: -120% 0;
  }
}

.cst-chat .cst-working-phase {
  color: inherit;
}

.cst-chat .cst-working-dots {
  display: inline-block;
  width: 1.1em;
  text-align: left;
  color: rgb(var(--c-muted));
}

.cst-chat .cst-working-elapsed {
  flex: 0 0 auto;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: rgb(var(--c-muted));
}

/* Failed refine: the orb + copy shift to the down/error token; timer freezes. */

.cst-chat .cst-working.is-failed .cst-working-orb {
  background: rgb(var(--c-down));
  box-shadow: none;
  animation: none;
}

.cst-chat .cst-working.is-failed .cst-working-text {
  color: rgb(var(--c-down));
}

@media (prefers-reduced-motion: reduce) {
  .cst-chat .cst-working-orb {
    animation: none;
    opacity: 1;
  }

  /* Drop the shimmer sweep to a solid ink tone (motion off, info on). */

  .cst-chat .cst-shimmer {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: rgb(var(--c-ink));
    animation: none;
  }
}

/* STOPPING STATE (founder 2026-07-07): the optimistic "Stopping…" row shown the
     instant the user clicks Stop, held until the backend's cancelled terminal. No
     live phase, no ticking timer — the orb settles to a steady muted dot so the
     row stops reading as active work while the worker finishes its in-flight
     section. Tokens only, both themes. */

.cst-chat .cst-working.is-stopping .cst-working-orb {
  background: rgb(var(--c-muted));
  box-shadow: none;
  animation: none;
}

.cst-chat .cst-working.is-stopping .cst-working-text {
  color: rgb(var(--c-muted));
}

/* The composer's stop control while stopping: a non-interactive spinner (a11y
     aria-disabled) so the click reads as registered and can't be double-fired. */

.cst-chat .send.stop.is-stopping {
  cursor: default;
  opacity: 0.85;
}

.cst-chat .cst-stop-spinner {
  width: 13px;
  height: 13px;
  border-radius: 999px;
  border: 2px solid rgb(var(--c-surface) / 0.4);
  border-top-color: rgb(var(--c-surface));
  animation: cst-stop-spin 0.7s linear infinite;
}

@keyframes cst-stop-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cst-chat .cst-stop-spinner {
    animation: none;
  }
}

/* Quiet per-message copy affordance — reveals on message hover. */

.cst-chat .msg-copy {
  margin-left: auto;
  display: inline-grid;
  place-items: center;
  color: rgb(var(--c-muted));
  opacity: 0;
  transition: opacity 120ms ease-out, color 120ms ease-out;
}

.cst-chat .msg-a:hover .msg-copy,
  .cst-chat .msg-copy:focus-visible {
  opacity: 1;
}

.cst-chat .msg-copy:hover {
  color: rgb(var(--c-accent));
}

/* Honest "stopped" note under a stopped pending message. */

.cst-chat .msg-stopped {
  margin-top: 4px;
}

/* Suggestion chips above the dock composer. */

.cst-chat .chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px 14px;
}

.cst-chat .chat-suggestion {
  border: 1px solid rgb(var(--c-border));
  border-radius: 999px;
  background: transparent;
  color: rgb(var(--c-muted));
  padding: 4px 10px;
  font-size: 12px;
  line-height: 1.2;
  transition: background 120ms ease-out, color 120ms ease-out, border-color 120ms ease-out;
}

.cst-chat .chat-suggestion:hover {
  background: rgb(var(--c-accent) / 0.08);
  border-color: rgb(var(--c-accent) / 0.3);
  color: rgb(var(--c-accent));
}

/* Stop control (send button while a refine is in flight). */

.cst-dock .send.stop {
  background: rgb(var(--c-ink) / 0.8);
}

.cst-chat .msg-empty,
  .cst-chat .chat-error {
  border: 1px dashed rgb(var(--c-border));
  border-radius: 12px;
  padding: 12px;
  color: rgb(var(--c-muted));
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

.cst-chat .chat-error {
  border-color: rgb(var(--c-down) / 0.45);
  background: rgb(var(--c-down) / 0.07);
  color: rgb(var(--c-down));
}

.cst-chat .chat-error button {
  margin-left: 8px;
  color: rgb(var(--c-accent));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
}

.cst-chat .chat-input {
  flex: 0 0 auto;
  padding: 12px 14px 14px;
  border-top: 1px solid rgb(var(--c-border));
}

.cst-dock {
  /* FOOTER FIT (founder 2026-07-26): the dock is an inline-size container so
       the footer can adapt to the dock's OWN width (the clamped 348px refine
       rail gives the dock ~320px — a viewport query can't see that). House
       precedent: .compose-proof-card uses the same idiom. */
  container-type: inline-size;
  border-radius: 13px;
  padding: 10px 11px 8px;
}

/* Calm focus (founder bug 2026-07-05): drop the 3px accent glow ring — in dark
     mode it read as a bright distracting halo. Match the composer: hairline
     shifts to low-alpha accent, no outer shadow spread. */

.cst-dock.focus,
  .cst-dock:focus-within {
  border-color: rgb(var(--c-accent) / 0.35);
}

/* dock mode button (mockup .dock-foot .mode-btn — compact 11.5px) */

.cst-dock .cst-dock-foot [data-composer-mode-button] {
  padding: 5px 9px;
  font-size: 11.5px;
  border-radius: 9px;
}

/* dock send button (mockup .dock-foot .send — 28px) */

.cst-dock .cst-dock-foot .send {
  height: 28px;
  width: 28px;
  border-radius: 8px;
}

/* FOOTER FIT (founder 2026-07-26): in a narrow dock (the clamped 348px refine
     rail → ~320px dock) the footer row has ~0px slack with the kbd hint
     visible, so flex shrink wrapped "Single draft" onto two lines and stacked
     the hint mid-phrase ("send ·" / "newline"). The hint is decorative — below
     360px of dock width it hides (the same treatment `hidden sm:inline` already
     applies below the sm viewport); the mode label and send button stay. */

@container (max-width: 359px) {
  .cst-dock-foot .cst-composer-kbd {
    display: none;
  }
}

.cst-dock-attached {
  gap: 6px;
  margin-bottom: 8px;
}

.cst-dock-attached .cst-chip {
  min-height: 22px;
  padding: 3px 8px;
  font-size: 10px;
}

/* Item 4a — dock redesign. Founder: "Input box too small!" The textarea now
     fills the card width alongside the attach button, with a comfortable ~2-line
     default that grows with content; the attach button + placeholder are
     vertically centred against it (no box-in-box, the tokenizer carries no
     border of its own). */

.cst-dock-ta {
  align-items: center;
  gap: 9px;
}

.cst-dock-ta .cst-composer-tokenizer {
  flex: 1 1 auto;
  min-width: 0;
}

.cst-dock-ta .plus {
  height: 30px;
  width: 30px;
  border-radius: 9px;
  /* Founder 2026-07-07: TOP-ALIGN the paperclip to the placeholder's first
       text line, not centred in the tall (min-h-64) textarea box. The dock
       textarea is font-size:13px / line-height:1.5 (19.5px line box) with a
       6px top pad, so the first line's optical centre sits ~15.75px from the
       box top. A 30px button top-aligned centres its icon at 15px; +1px margin
       lands the icon centre on the first-line centre. Parent is flex-start. */
  align-self: flex-start;
  margin-top: 1px;
}

/* The dock placeholder shares the textarea's first-line metrics — TOP-aligned
     to sit level with the paperclip icon (founder 2026-07-07). */

.cst-dock-ph {
  padding-top: 6px;
  font-size: 13px;
  line-height: 1.5;
  align-self: flex-start;
}

.cst-dock-foot {
  margin-top: 9px;
  padding-top: 8px;
}

.cst-dock-foot .send,
  .cst-composer-foot .send {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 0;
  background: rgb(var(--c-accent));
  color: rgb(var(--c-surface));
}

.cst-dock-foot .send {
  height: 28px;
  width: 28px;
  border-radius: 8px;
}

.cst-composer-foot .send {
  height: 34px;
  width: 34px;
  border-radius: 10px;
}

.cst-dock-hint {
  margin: 8px 2px 0;
  text-align: center;
  font-size: 9px;
}

/* VARIANT A (approved 2026-07-10): the change summary as a distinct,
     collapsible diff Bubble beneath the Studio prose card. A hairline surface
     card whose header carries the +/− word counts, a live section anchor, and a
     "view diff" toggle; the diff-rows body reveals in place when open. */

.cst-diffbub {
  margin-top: 2px;
  border: 1px solid rgb(var(--c-border));
  border-radius: 9px;
  background: rgb(var(--c-surface));
  overflow: hidden;
}

.cst-diffbub-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  line-height: 1;
}

.cst-diffbub-head .plus {
  color: rgb(var(--c-up));
}

.cst-diffbub-head .minus {
  color: rgb(var(--c-down));
}

/* CON-212: the section name is a live anchor — click scrolls the matching
     .cst-sec into view + fires a one-shot pulse (wired against ctx.docRoot). */

.cst-diffbub-head .sect {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  color: rgb(var(--c-muted));
  font: inherit;
}

.cst-diffbub-head .sect .go {
  display: inline-flex;
  align-items: center;
  color: rgb(var(--c-accent));
}

.cst-diffbub-head .sect:hover {
  color: rgb(var(--c-accent));
}

/* Section dropped in a later revision — muted, struck, non-clickable. */

.cst-diffbub-head .sect.dead {
  opacity: 0.5;
  cursor: default;
  text-decoration: line-through;
  text-decoration-color: rgb(var(--c-muted));
}

.cst-diffbub-head .sect.dead:hover {
  color: rgb(var(--c-muted));
}

.cst-diffbub-head .sect.dead .go {
  display: none;
}

.cst-diffbub-head .view {
  margin-left: auto;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  color: rgb(var(--c-accent));
  font: inherit;
}

.cst-diffbub-head .\!view {
  margin-left: auto !important;
  border: 0 !important;
  background: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  color: rgb(var(--c-accent)) !important;
  font: inherit !important;
}

.cst-diffbub-head .view:hover {
  text-decoration: underline;
}

.cst-diffbub-head .\!view:hover {
  text-decoration: underline !important;
}

/* The revealed diff body — the shared .skill-diff rows sit inside the bubble
     with a hairline top rule so it reads as one continuous collapsible surface. */

.cst-diffbub-body {
  border-top: 1px solid rgb(var(--c-border));
  padding: 6px 0;
  margin-top: 0;
}

.cst-diffbub-body.skill-diff {
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}

/* LANGUAGE PASS (finding 2): the humanized word-delta sentence in the
     change-bubble head ("106 words added"). */

.cst-diffbub-head .delta {
  color: rgb(var(--c-up));
}

/* LANGUAGE PASS (finding 2): the expanded change view — stacked BEFORE/AFTER
     cards with quiet mono labels and readable body size, not a patch. */

.cst-ba {
  padding: 8px 10px 10px;
}

.cst-ba + .cst-ba {
  border-top: 1px solid rgb(var(--c-border));
}

.cst-ba-sec {
  margin-bottom: 6px;
  color: rgb(var(--c-muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
}

.cst-ba-card {
  border: 1px solid rgb(var(--c-border));
  border-radius: 8px;
  padding: 7px 9px 8px;
  background: rgb(var(--c-bg));
}

.cst-ba-card + .cst-ba-card {
  margin-top: 6px;
}

.cst-ba-card .lbl {
  display: block;
  margin-bottom: 3px;
  color: rgb(var(--c-muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cst-ba-card.after .lbl {
  color: rgb(var(--c-accent));
}

.cst-ba-card.\!after .lbl {
  color: rgb(var(--c-accent)) !important;
}

.cst-ba-card.before .tx {
  color: rgb(var(--c-muted));
}

.cst-ba-card.\!before .tx {
  color: rgb(var(--c-muted)) !important;
}

.cst-ba-card .tx {
  max-height: 180px;
  overflow-y: auto;
  color: rgb(var(--c-text));
  font-size: 12.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.cst-ba-none {
  padding: 10px;
  color: rgb(var(--c-muted));
  font-size: 12px;
}

/* LANGUAGE PASS (finding 3): manual actions render as quiet system event
     lines — mono, muted, hairline-ruled — visually distinct from typed
     requests (right accent bubbles). */

.cst-chat .msg-event {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
  color: rgb(var(--c-muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  line-height: 1.4;
}

.cst-chat .msg-event::before,
  .cst-chat .msg-event::after {
  content: '';
  flex: 1 1 auto;
  border-top: 1px solid rgb(var(--c-border));
}

.cst-chat .msg-event .evt {
  flex: 0 1 auto;
  text-align: center;
}

/* Legacy diff-chip aliases (kept so any non-rail caller still styles). */

/* VARIANT A (approved 2026-07-10): the shadcn Message footer — copy, jump-to-
     section, and (latest reply only) the feedback thumbs. Quiet by default,
     revealed on message hover / keyboard focus so the transcript stays calm. */

.cst-chat .m-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 1px;
  opacity: 0;
  transition: opacity 120ms ease-out;
}

.cst-chat .msg-a:hover .m-actions,
  .cst-chat .m-actions:focus-within {
  opacity: 1;
}

/* Motion off: don't hide actions behind a hover they can't discover. */

@media (prefers-reduced-motion: reduce) {
  .cst-chat .m-actions {
    opacity: 1;
  }
}

.cst-chat .m-act {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  color: rgb(var(--c-muted));
  transition: color 120ms ease-out;
}

.cst-chat .m-act:hover,
  .cst-chat .m-act:focus-visible {
  color: rgb(var(--c-accent));
}

.cst-chat .m-act svg {
  height: 11px;
  width: 11px;
}

/* The thumbs ride at the right of the footer. The shared cst-fb-thumbs
     (at-thread) block collapses its "Was this useful?" label here — the footer
     is already labelled by copy/jump, so the thumbs read as two more actions. */

.cst-chat .m-thumbs {
  margin-left: auto;
}

.cst-chat .m-thumbs .cst-fb-thumbs.at-thread {
  margin: 0;
  gap: 4px;
  border: 0;
  padding: 0;
  background: none;
}

.cst-chat .m-thumbs .cst-fb-thumbs .lbl {
  display: none;
}

.cst-chat .m-thumbs .cst-fb-thumb {
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 5px;
  color: rgb(var(--c-muted));
}

.cst-chat .m-thumbs .cst-fb-thumb svg {
  height: 12px;
  width: 12px;
}

.cst-chat .m-thumbs .cst-fb-thumb.up:hover {
  border: 0;
  background: none;
  color: rgb(var(--c-up));
}

.cst-chat .m-thumbs .cst-fb-thumb.down:hover {
  border: 0;
  background: none;
  color: rgb(var(--c-warn));
}

.cst-chat .cst-canon-gap {
  margin-top: 10px;
  border-radius: 9px;
  padding: 9px 10px;
}

.cst-chat .cst-canon-gap .badge {
  margin-bottom: 6px;
  padding: 2px 7px;
  font-size: 8.5px;
}

.cst-chat .cst-canon-gap .body {
  font-size: 12px;
}

.cst-chat .cst-canon-gap .\!body {
  font-size: 12px !important;
}

.cst-chat .cst-canon-gap .fix button {
  color: rgb(var(--c-accent));
}

.cst-chat .cst-canon-gap .\!fix button {
  color: rgb(var(--c-accent)) !important;
}

.cst-cite-mark {
  padding: 0 1px;
  vertical-align: super;
  color: rgb(var(--c-accent));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  text-decoration: none;
}

.cst-cite-mark.active {
  padding: 1px 4px;
  border-radius: 5px;
  color: rgb(var(--c-surface));
  background: rgb(var(--c-accent));
  box-shadow: 0 0 0 3px rgb(var(--c-accent) / 0.12);
  vertical-align: baseline;
  font-size: 11px;
  font-weight: 500;
}

.cst-cite-mark.\!active {
  padding: 1px 4px !important;
  border-radius: 5px !important;
  color: rgb(var(--c-surface)) !important;
  background: rgb(var(--c-accent)) !important;
  box-shadow: 0 0 0 3px rgb(var(--c-accent) / 0.12) !important;
  vertical-align: baseline !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}

.cst-cite-anchor {
  position: relative;
  display: inline;
}

/* Provenance visibility: when a Sources-rail row is clicked, every span that
     cites a chunk from that source lights up with a token-driven wash + left
     rule (both themes), and the contributing [n] markers get a solid pill. The
     highlight is distinct from the blue "injected cited data" legend colour so
     it reads as "here's where THIS source landed", not document state. */

.cst-prov-hl {
  position: relative;
  border-radius: 6px;
  background: rgb(var(--c-accent) / 0.10);
  box-shadow: inset 3px 0 0 rgb(var(--c-accent)), 0 0 0 3px rgb(var(--c-accent) / 0.10);
  transition: background 150ms ease-out, box-shadow 150ms ease-out;
}

.cst-cite-mark.prov-source {
  padding: 1px 4px;
  border-radius: 5px;
  color: rgb(var(--c-surface));
  background: rgb(var(--c-accent-strong));
  vertical-align: baseline;
  font-size: 11px;
  font-weight: 500;
}

.cst-prov-pop {
  position: absolute;
  z-index: 30;
  top: calc(100% + 12px);
  left: 0;
  width: min(320px, calc(100vw - 32px));
  border-radius: 11px;
  padding: 13px 14px;
  background: rgb(var(--c-sidebar));
  color: rgb(var(--c-sidebar-muted));
  box-shadow: 0 18px 38px rgb(var(--c-sidebar) / 0.38);
  font-family: 'Instrument Sans', system-ui, sans-serif;
  pointer-events: none;
  /* FIX (2026-07-24): self-contained text defaults. The popover renders
       inside arbitrary anchor contexts — .cst-slide-metric-value sets
       overflow-wrap:anywhere (INHERITED → the header title broke mid-word at
       the popover's right edge) and .cst-slide-cites is uppercase mono. Reset
       every inherited text property that could leak in. */
  font-size: 13px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

/* LEGIBILITY (founder 2026-07-24): the expanded "view query" audit gets real
     room — the popover widens to a comfortable clamp while the audit is open
     (JS toggles .audit-open from the shared wireReceiptAudit onToggle hook).
     Legibility beats compactness once the reader asks to see what ran. */

.cst-prov-pop.audit-open {
  width: min(680px, calc(100vw - 32px));
}

.cst-prov-pop::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 22px;
  width: 10px;
  height: 10px;
  margin-bottom: -5px;
  background: rgb(var(--c-sidebar));
  transform: rotate(45deg);
}

/* FIX (2026-07-23): a cite popover opened from a slide card is PORTALED to
     document.body as a fixed overlay so the card's overflow:hidden can't clip
     it. is-above = flipped above the mark near the viewport bottom (the caret
     moves to the popover's bottom edge). */

.cst-prov-pop.is-portaled {
  z-index: 80;
}

.cst-prov-pop.is-above::after {
  top: 100%;
  bottom: auto;
  margin-top: -5px;
  margin-bottom: 0;
}

.cst-prov-pop b,
  .cst-prov-pop .from b {
  color: rgb(var(--c-sidebar-ink));
}

/* IA (founder 2026-07-24): the header ZONE — citation + source identity +
     the one meta row — closes with a hairline rule so the popover reads as
     labelled sections, not one undifferentiated stack. */

.cst-prov-pop .pop-head {
  padding-bottom: 10px;
  border-bottom: 1px solid rgb(var(--c-sidebar-border));
}

.cst-prov-pop .from {
  font-size: 13px;
  line-height: 1.5;
}

/* Small mono section labels (QUERY · RESULT · PASSAGE) — the house idiom,
     re-scoped to the popover's sidebar tokens. */

.cst-prov-pop .r-sec-lbl {
  color: rgb(var(--c-sidebar-muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cst-prov-pop .r-sec-head {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.cst-prov-pop .page {
  margin-top: 3px;
  color: rgb(var(--c-muted));
  font-size: 11.5px;
  line-height: 1.3;
}

.cst-prov-pop .page .pg {
  color: rgb(var(--c-data));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

.cst-prov-pop .tier {
  display: inline-block;
  margin-top: 2px;
  color: rgb(var(--c-warn));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* SUBSTANCE (founder 2026-07-23): the cite popover's single type/meta row —
     one glyph + one word run replaces the stacked kicker labels. */

.cst-prov-pop .meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  color: rgb(var(--c-sidebar-muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.cst-prov-pop .\!meta {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 5px !important;
  color: rgb(var(--c-sidebar-muted)) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

.cst-prov-pop .meta .pg {
  color: rgb(var(--c-sidebar-ink) / 0.85);
  font-variant-numeric: tabular-nums;
  text-transform: none;
}

.cst-prov-pop .\!meta .pg {
  color: rgb(var(--c-sidebar-ink) / 0.85) !important;
  font-variant-numeric: tabular-nums !important;
  text-transform: none !important;
}

/* The actual supporting passage — quiet quote: hairline left rule, ~6 lines
     at rest, scrollable past that. pointer-events restored so it scrolls. */

.cst-prov-pop .excerpt {
  margin: 7px 0 0;
  padding: 2px 0 2px 10px;
  border-left: 2px solid rgb(var(--c-sidebar-accent) / 0.55);
  color: rgb(var(--c-sidebar-ink) / 0.92);
  font-family: 'Fraunces', Georgia, serif;
  font-size: 13px;
  line-height: 1.55;
  max-height: 132px;
  overflow-y: auto;
  pointer-events: auto;
}

.cst-prov-pop .\!excerpt {
  margin: 7px 0 0 !important;
  padding: 2px 0 2px 10px !important;
  border-left: 2px solid rgb(var(--c-sidebar-accent) / 0.55) !important;
  color: rgb(var(--c-sidebar-ink) / 0.92) !important;
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  max-height: 132px !important;
  overflow-y: auto !important;
  pointer-events: auto !important;
}

.cst-prov-pop .excerpt::-webkit-scrollbar {
  width: 6px;
}

.cst-prov-pop .\!excerpt::-webkit-scrollbar {
  width: 6px !important;
}

.cst-prov-pop .excerpt::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background: rgb(var(--c-sidebar-border));
}

.cst-prov-pop .\!excerpt::-webkit-scrollbar-thumb {
  border-radius: 6px !important;
  background: rgb(var(--c-sidebar-border)) !important;
}

/* BI citation SUMMARY zone — the exact recorded VALUE is the visual lead
     (large mono, lands in its slot when the data-source row joins); the
     plain-English headline reads under it. Row counts live in the RESULT
     caption, never up here. */

.cst-prov-pop .bi-summary {
  margin-top: 10px;
}

.cst-prov-pop .bi-headline {
  margin-top: 3px;
  color: rgb(var(--c-sidebar-ink) / 0.88);
  font-size: 12.5px;
  line-height: 1.5;
}

.cst-prov-pop .bi-headline .rows {
  color: rgb(var(--c-sidebar-muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
}

.cst-prov-pop .bi-headline .\!rows {
  color: rgb(var(--c-sidebar-muted)) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
}

.cst-prov-pop .bi-value {
  color: rgb(var(--c-sidebar-ink));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 18px;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

/* Reused receipt-audit disclosure inside the cite popover (same classes the
     BI receipt renders — one renderer, one look, re-scoped to sidebar tokens).
     The QUERY row (hairline + label + view/hide chevron) is the collapse
     affordance; RESULT opens with the same rule + label. */

.cst-prov-pop .r-audit-wrap {
  margin-top: 10px;
  pointer-events: auto;
}

.cst-prov-pop .r-audit-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 0;
  border-top: 1px solid rgb(var(--c-sidebar-border));
  padding: 9px 0 0;
  background: none;
  cursor: pointer;
}

.cst-prov-pop .r-toggle-state {
  color: rgb(var(--c-sidebar-muted));
}

.cst-prov-pop .r-audit-toggle:hover .r-toggle-state,
  .cst-prov-pop .r-audit-toggle:focus-visible .r-toggle-state {
  color: rgb(var(--c-sidebar-accent));
}

.cst-prov-pop .r-audit-toggle:focus-visible {
  outline: none;
}

/* Defect C.2: the failed-receipt "Details" disclosure reuses the audit-toggle
     idiom (hairline top rule, muted→accent state word, rotating chevron) and the
     .r-sql reading treatment (mono, wrapping, bounded height) for its verbatim
     technical error. */

.cst-prov-pop .r-detail-wrap {
  margin-top: 10px;
  pointer-events: auto;
}

.cst-prov-pop .r-detail-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 0;
  border-top: 1px solid rgb(var(--c-sidebar-border));
  padding: 9px 0 0;
  background: none;
  cursor: pointer;
}

.cst-prov-pop .r-detail-toggle:hover .r-toggle-state,
  .cst-prov-pop .r-detail-toggle:focus-visible .r-toggle-state {
  color: rgb(var(--c-sidebar-accent));
}

.cst-prov-pop .r-detail-toggle:focus-visible {
  outline: none;
}

.cst-prov-pop .r-detail {
  margin-top: 6px;
  padding: 9px 10px;
  border-radius: 6px;
  background: rgb(var(--c-sidebar-hover) / 0.6);
  border: 1px solid rgb(var(--c-sidebar-border));
  color: rgb(var(--c-sidebar-ink) / 0.92);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
}

.cst-prov-pop .r-result-head {
  border-top: 1px solid rgb(var(--c-sidebar-border));
  padding-top: 9px;
}

/* LEGIBILITY (founder 2026-07-24): the audit type matches the BI receipt's
     own audit — multi-line pretty-printed SQL (sql-format.js) at ≥12px mono,
     wrapping (never a one-line horizontal scroller), ~12 lines before it
     scrolls vertically. One audit renderer, one reading size, two homes. */

.cst-prov-pop .r-sql-wrap {
  position: relative;
}

.cst-prov-pop .r-sql {
  margin-top: 6px;
  padding: 9px 10px;
  border-radius: 6px;
  background: rgb(var(--c-sidebar-hover) / 0.6);
  border: 1px solid rgb(var(--c-sidebar-border));
  color: rgb(var(--c-sidebar-ink) / 0.92);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  max-height: 236px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Re-scope the shared copy affordance to the popover's sidebar tokens. */

.cst-prov-pop .r-sql-copy {
  top: 11px;
  border-color: rgb(var(--c-sidebar-border));
  background: rgb(var(--c-sidebar) / 0.92);
  color: rgb(var(--c-sidebar-muted));
}

.cst-prov-pop .r-sql-copy:hover,
  .cst-prov-pop .r-sql-copy:focus-visible {
  color: rgb(var(--c-sidebar-accent));
  border-color: rgb(var(--c-sidebar-accent) / 0.55);
}

.cst-prov-pop .r-preview-scroll {
  margin-top: 8px;
  max-width: 100%;
  max-height: 40vh;
  overflow: auto;
}

.cst-prov-pop .r-preview {
  border-collapse: collapse;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.cst-prov-pop .r-preview th,
  .cst-prov-pop .r-preview td {
  padding: 4px 12px 4px 0;
  text-align: left;
  white-space: nowrap;
  color: rgb(var(--c-sidebar-muted));
  border-bottom: 1px solid rgb(var(--c-sidebar-border));
}

.cst-prov-pop .r-preview td {
  color: rgb(var(--c-sidebar-ink) / 0.92);
}

.cst-prov-pop .r-rowcount {
  margin-top: 5px;
  color: rgb(var(--c-sidebar-muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
}

.cst-prov-pop .steer {
  display: flex;
  gap: 8px;
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid rgb(var(--c-sidebar-border));
}

.cst-prov-pop .steer .b {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid rgb(var(--c-sidebar-border));
  border-radius: 7px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  pointer-events: auto;
  cursor: pointer;
}

/* FIX (2026-07-24): an unmatched citation renders Pin/Mute disabled — they
     must LOOK disabled (a disabled button swallows clicks with no feedback). */

.cst-prov-pop .steer .b[disabled] {
  opacity: 0.4;
  cursor: default;
}

.cst-prov-pop .steer .pin {
  color: rgb(var(--c-sidebar-ink));
  background: rgb(var(--c-accent));
  border-color: rgb(var(--c-accent));
}

.cst-prov-pop .steer .mute {
  color: rgb(var(--c-sidebar-muted));
  background: transparent;
}

/* Sign-off popover reuses the .cst-prov-pop shell; its form + trigger chip
     styling lives here (CT Ledger sidebar tokens). */

.cst-prov-pop.at-signoff {
  width: min(300px, calc(100vw - 32px));
  left: 50%;
  transform: translateX(-50%);
}

.cst-prov-pop.at-signoff::after {
  left: 50%;
  margin-left: -5px;
}

.cst-prov-pop .body-line {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.45;
}

.cst-prov-pop .signoff-form {
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid rgb(var(--c-sidebar-border));
}

.cst-prov-pop .signoff-form .lbl {
  display: block;
  margin-bottom: 5px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(var(--c-sidebar-muted));
}

.cst-prov-pop .signoff-form input {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: 1px solid rgb(var(--c-sidebar-border));
  border-radius: 7px;
  background: rgb(var(--c-sidebar) / 0.5);
  color: rgb(var(--c-sidebar-ink));
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: 12.5px;
  pointer-events: auto;
}

.cst-prov-pop .signoff-form input:focus {
  outline: none;
  border-color: rgb(var(--c-accent));
}

.cst-prov-pop .signoff-form .steer {
  margin-top: 10px;
  padding-top: 0;
  border-top: 0;
}

.cst-prov-pop .signoff-form .steer .b[disabled] {
  opacity: 0.55;
  pointer-events: none;
}

.cst-prov-pop.at-signoff .hint {
  margin-top: 9px;
  color: rgb(var(--c-sidebar-muted));
  font-size: 10.5px;
  line-height: 1.4;
}

.cst-prov-pop.at-signoff .\!hint {
  margin-top: 9px !important;
  color: rgb(var(--c-sidebar-muted)) !important;
  font-size: 10.5px !important;
  line-height: 1.4 !important;
}

/* An actionable (held) compliance chip: pointer + suppress the hover tooltip
     once the click popover is open so the two don't stack. */

.cst-gate.signoff-actionable {
  cursor: pointer;
}

.cst-gate.signoff-open .cst-gate-tip {
  opacity: 0;
  visibility: hidden;
}

/* Studio feedback thumbs (audit F1) — quiet, low-chrome. */

.cst-fb-thumbs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cst-fb-thumbs .lbl {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgb(var(--c-muted));
}

.cst-fb-thumbs.at-thread {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid rgb(var(--c-border));
}

.cst-fb-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgb(var(--c-border));
  border-radius: 7px;
  color: rgb(var(--c-muted));
  background: transparent;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}

.cst-fb-thumb:hover {
  background: rgb(var(--c-surface));
}

.cst-fb-thumb.up:hover {
  color: rgb(var(--c-up));
  border-color: rgb(var(--c-up) / 0.4);
}

.cst-fb-thumb.down:hover {
  color: rgb(var(--c-warn));
  border-color: rgb(var(--c-warn) / 0.4);
}

/* Compact "what's wrong" feedback modal (👎 path). */

.cst-fb-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgb(0 0 0 / 0.42);
}

[data-theme='dark'] .cst-fb-modal-backdrop {
  background: rgb(0 0 0 / 0.62);
}

.cst-fb-modal {
  width: min(440px, 100%);
  border-radius: 14px;
  border: 1px solid rgb(var(--c-border));
  background: rgb(var(--c-surface));
  box-shadow: 0 24px 48px rgb(0 0 0 / 0.28);
  padding: 18px 18px 16px;
}

[data-theme='dark'] .cst-fb-modal {
  border-color: rgb(var(--c-border));
  box-shadow: 0 24px 56px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(0 0 0 / 0.4);
}

.cst-fb-modal .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.cst-fb-modal .\!head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 12px !important;
}

.cst-fb-modal .head .t {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 17px;
  color: rgb(var(--c-ink));
}

.cst-fb-modal .\!head .t {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 17px !important;
  color: rgb(var(--c-ink)) !important;
}

.cst-fb-modal .head .\!t {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 17px !important;
  color: rgb(var(--c-ink)) !important;
}

.cst-fb-modal .head .x {
  display: inline-flex;
  color: rgb(var(--c-muted));
}

.cst-fb-modal .\!head .x {
  display: inline-flex !important;
  color: rgb(var(--c-muted)) !important;
}

.cst-fb-modal .lbl {
  display: block;
  margin: 10px 0 5px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgb(var(--c-muted));
}

.cst-fb-modal .lbl .req {
  color: rgb(var(--c-warn));
}

.cst-fb-modal .lbl .opt {
  color: rgb(var(--c-muted));
  opacity: 0.7;
}

.cst-fb-modal .lbl .\!opt {
  color: rgb(var(--c-muted)) !important;
  opacity: 0.7 !important;
}

.cst-fb-modal textarea {
  width: 100%;
  resize: vertical;
  padding: 9px 11px;
  border: 1px solid rgb(var(--c-border));
  border-radius: 9px;
  background: rgb(var(--c-surface));
  color: rgb(var(--c-ink));
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
}

.cst-fb-modal textarea:focus {
  outline: none;
  border-color: rgb(var(--c-accent));
}

.cst-fb-modal .foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

.cst-fb-modal .btn-ghost,
  .cst-fb-modal .btn-primary {
  height: 34px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
}

.cst-fb-modal .btn-ghost {
  border: 1px solid rgb(var(--c-border));
  background: transparent;
  color: rgb(var(--c-ink));
}

.cst-fb-modal .btn-primary {
  background: rgb(var(--c-accent));
  color: rgb(var(--c-accent-ink, 255 255 255));
  border: 1px solid rgb(var(--c-accent));
}

.cst-fb-modal .btn-primary[disabled] {
  opacity: 0.55;
  pointer-events: none;
}

.cst-gates {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 2px;
  padding: 9px 0 4px;
  border-top: 1px solid rgb(var(--c-border));
  border-bottom: 1px solid rgb(var(--c-border));
  background: transparent;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.cst-gate {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  white-space: nowrap;
  color: rgb(var(--c-muted));
}

.cst-gate + .cst-gate {
  border-left: 1px solid rgb(var(--c-border));
}

.cst-gate.ok .s {
  color: rgb(var(--c-up));
}

.cst-gate.\!ok .s {
  color: rgb(var(--c-up)) !important;
}

.cst-gate.ok .\!s {
  color: rgb(var(--c-up)) !important;
}

.cst-gate.ok {
  color: rgb(var(--c-muted));
}

.cst-gate.\!ok {
  color: rgb(var(--c-muted)) !important;
}

.cst-gate.neutral .s {
  color: rgb(var(--c-muted));
}

.cst-gate.neutral .\!s {
  color: rgb(var(--c-muted)) !important;
}

.cst-gate.warn,
  .cst-gate.warn .s {
  color: rgb(var(--c-warn));
}


  .cst-gate.warn .\!s {
  color: rgb(var(--c-warn)) !important;
}

.cst-gate-tip {
  position: absolute;
  z-index: 20;
  top: calc(100% + 9px);
  left: 50%;
  width: 280px;
  transform: translateX(-50%);
  border-radius: 10px;
  padding: 12px 13px;
  background: rgb(var(--c-sidebar));
  color: rgb(var(--c-sidebar-muted));
  box-shadow: 0 16px 32px rgb(var(--c-sidebar) / 0.32);
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 1.45;
  text-transform: none;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 140ms ease, visibility 140ms ease;
}

.cst-gate:hover .cst-gate-tip,
  .cst-gate:focus-visible .cst-gate-tip,
  .cst-gate:focus-within .cst-gate-tip {
  opacity: 1;
  visibility: visible;
}

.cst-gate-tip::after {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 10px;
  height: 10px;
  background: rgb(var(--c-sidebar));
  transform: translateX(-50%) rotate(45deg);
}

.cst-gate-tip b {
  color: rgb(var(--c-sidebar-ink));
}

.cst-gate-tip .req {
  display: block;
  margin-top: 6px;
  color: rgb(var(--c-warn));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
}

/* DOC-SWITCHER title button (mockup .doc-switch .ds-btn) */

/* Standalone back control — top-left of the toolbar row (founder ask: move
     "All pieces" out of the dropdown to a classic top-left back arrow). Same
     exit wiring (data-toolbar-exit). */

.cst-toolbar-back {
  display: inline-grid;
  place-items: center;
  height: 34px;
  width: 34px;
  border: 1px solid rgb(var(--c-border));
  border-radius: 9px;
  background: transparent;
  color: rgb(var(--c-muted));
  cursor: pointer;
}

.cst-toolbar-back:hover {
  border-color: rgb(var(--c-accent) / 0.45);
  background: rgb(var(--c-surface));
  color: rgb(var(--c-accent));
}

.cst-toolbar-back:focus-visible {
  outline: 2px solid rgb(var(--c-accent-strong));
  outline-offset: 1px;
}

.cst-toolbar .cst-ds-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Width cap moved to .cst-ds-wrap (max-w-[340px]); the button fills up to
       that via max-w-full so it can NEVER exceed its container and overlap the
       action buttons (a fixed max-width here overrode the container constraint,
       spilling a 340px button 27px into Repurpose). */
  padding: 5px 10px;
  border: 1px solid rgb(var(--c-border));
  border-radius: 9px;
  background: transparent;
  color: rgb(var(--c-ink));
  font-family: 'Instrument Sans', system-ui, sans-serif;
  white-space: nowrap;
  text-align: left;
}

.cst-toolbar .cst-ds-btn:hover {
  border-color: rgb(var(--c-accent) / 0.45);
  background: rgb(var(--c-surface));
  box-shadow: 0 1px 2px rgb(var(--c-ink) / 0.05);
}

[data-theme='dark'] .cst-toolbar .cst-ds-btn:hover {
  box-shadow: 0 1px 2px rgb(var(--c-bg-deep) / 0.4);
}

/* Piece switcher — the doc-family control (founder review 2026-07-06):
     stack icon + current doc title in the editorial serif. The "PIECES ·"
     prefix label was dropped (founder screenshot) — the stack icon + caret
     already read as a switcher. */

.cst-toolbar .cst-ds-btn .ds-ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  color: rgb(var(--c-accent));
}

.cst-toolbar .cst-ds-btn .dn-txt {
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 15px;
  font-weight: 600;
  color: rgb(var(--c-ink));
}

/* BUG 6: the deck switcher stacks the title over the slide-count/audience
     meta so the removed second title bar's info still has a home INSIDE the one
     header. The stack column vertically centers against the icon + caret; the
     button drops to align-items:flex-start so the two lines read as a unit. */

.cst-toolbar .cst-ds-btn.has-meta {
  align-items: flex-start;
  padding-top: 4px;
  padding-bottom: 4px;
}

.cst-toolbar .cst-ds-btn.has-meta .ds-ico,
  .cst-toolbar .cst-ds-btn.has-meta .car {
  margin-top: 2px;
}

.cst-toolbar .cst-ds-btn .ds-stack {
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
}

.cst-toolbar .cst-ds-btn .ds-stack .dn-txt {
  line-height: 1.2;
}

.cst-toolbar .cst-ds-btn .dn-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgb(var(--c-muted));
}

.cst-toolbar .cst-ds-btn .car {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin-left: 4px;
  color: rgb(var(--c-muted));
}

/* Custom doc-switcher tooltip (founder bug 2026-07-07): the old native
     title= rendered at the cursor and overlapped the Repurpose button while
     leaking a raw thread UUID. This popover is LEFT-anchored under the switcher,
     capped to the paper width, and never extends over the action row on the
     right. Shown only while hovering/focusing the switcher AND only when the
     name is actually clipped (JS toggles [data-clipped]). */

.cst-toolbar .cst-ds-tip {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  max-width: min(360px, 60vw);
  padding: 5px 9px;
  border: 1px solid rgb(var(--c-border));
  border-radius: 8px;
  background: rgb(var(--c-surface));
  box-shadow: 0 8px 22px rgb(var(--c-ink) / 0.12);
  color: rgb(var(--c-ink));
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: 12.5px;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
  opacity: 0;
  transform: translateY(-2px);
  pointer-events: none;
  transition: opacity 100ms ease-out, transform 100ms ease-out;
}

[data-theme='dark'] .cst-toolbar .cst-ds-tip {
  box-shadow: 0 8px 22px rgb(var(--c-bg-deep) / 0.55);
}

.cst-toolbar .cst-ds-wrap[data-clipped='true']:hover .cst-ds-tip,
  .cst-toolbar .cst-ds-wrap[data-clipped='true']:focus-within .cst-ds-tip {
  opacity: 1;
  transform: translateY(0);
}

/* Founder bug (2026-07-10): when the "Pieces" dropdown is OPEN, the clipped-title
     tooltip (z-40) rendered over the menu and visually covered "New piece" /
     the Repurpose targets. Suppress the tooltip entirely while the switcher menu
     is open — the open menu already shows the full title in its rows. The
     open-state hook is the toggle button's aria-expanded="true" (set by setMenu). */

.cst-toolbar .cst-ds-wrap:has([data-toolbar-toggle='doc'][aria-expanded='true']) .cst-ds-tip {
  opacity: 0 !important;
  transform: translateY(-2px) !important;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .cst-toolbar .cst-ds-tip {
    transition: none;
    transform: none;
  }
}

/* TOOLBAR BUTTON FAMILY (mockup .tool-btn) */

.cst-toolbar .cst-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid rgb(var(--c-border));
  border-radius: 10px;
  background: rgb(var(--c-surface));
  color: rgb(var(--c-text));
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.cst-toolbar .cst-tool-btn:hover {
  border-color: rgb(var(--c-accent) / 0.30);
}

.cst-toolbar .cst-tool-btn .ic {
  color: rgb(var(--c-muted));
}

.cst-toolbar .cst-tool-btn .mono {
  margin-left: 1px;
  display: inline-flex;
  align-items: center;
}

.cst-toolbar .cst-tool-btn.accent {
  border-color: rgb(var(--c-accent));
  color: rgb(var(--c-accent-strong));
}

.cst-toolbar .cst-tool-btn.accent .ic {
  color: currentColor;
}

.cst-toolbar .cst-tool-btn.ghost {
  padding: 8px 10px;
  border-color: transparent;
  background: transparent;
  color: rgb(var(--c-muted));
}

.cst-toolbar .cst-tool-btn.ghost:hover {
  border-color: rgb(var(--c-border));
  background: rgb(var(--c-surface));
}

.cst-mode-menu,
  .cst-scope-menu,
  .cst-ds-menu,
  .cst-tf-menu {
  position: absolute;
  z-index: 25;
  width: min(280px, calc(100vw - 32px));
  border: 1px solid rgb(var(--c-border));
  border-radius: 12px;
  background: rgb(var(--c-surface));
  box-shadow: 0 18px 38px rgb(var(--c-ink) / 0.14);
  padding: 6px;
  color: rgb(var(--c-text));
  font-family: 'Instrument Sans', system-ui, sans-serif;
}

/* Toolbar-menu shadow fix (founder screenshot): in dark mode --c-ink is
     near-white, so the drop shadow cast a LIGHT glow instead of a dark shadow.
     Recede every toolbar/dock menu with a deep-ink shadow in the Ledger Room —
     one shared rule covers doc / repurpose / export / publish / overflow / mode
     / scope menus. */

[data-theme='dark'] .cst-mode-menu,
  [data-theme='dark'] .cst-scope-menu,
  [data-theme='dark'] .cst-ds-menu,
  [data-theme='dark'] .cst-tf-menu {
  box-shadow: 0 18px 38px rgb(var(--c-bg-deep) / 0.6);
}

.cst-mode-menu {
  z-index: 35;
}

.cst-mode-menu .h,
  .cst-scope-menu .h,
  .cst-ds-menu .h,
  .cst-tf-menu .h {
  padding: 6px 9px 4px;
  color: rgb(var(--c-muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cst-mode-item,
  .cst-scope-row,
  .cst-ds-item,
  .cst-tf-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 34px;
  border-radius: 8px;
  padding: 8px 9px;
  text-align: left;
  color: rgb(var(--c-text));
  font-size: 13px;
}

.cst-mode-item:hover {
  background: rgb(var(--c-accent) / 0.08);
}

/* Attention pulse for the type gallery when a freeform submit needs a type. */

.cst-pulse {
  animation: cst-pulse 0.6s ease-out 2;
  border-radius: 12px;
}

@keyframes cst-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgb(var(--c-accent) / 0);
  }

  50% {
    box-shadow: 0 0 0 4px rgb(var(--c-accent) / 0.18);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cst-pulse {
    animation: none;
  }
}

.cst-mode-item.sel,
  .cst-scope-row.sel,
  .cst-ds-item.cur,
  .cst-tf-item.hi {
  color: rgb(var(--c-accent-strong));
  background: rgb(var(--c-accent) / 0.08);
}

.cst-mode-item.\!sel,
  .cst-scope-row.\!sel {
  color: rgb(var(--c-accent-strong)) !important;
  background: rgb(var(--c-accent) / 0.08) !important;
}

.cst-scope-menu::before,
  .cst-ds-menu::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 22px;
  width: 10px;
  height: 10px;
  margin-bottom: -5px;
  border-left: 1px solid rgb(var(--c-border));
  border-top: 1px solid rgb(var(--c-border));
  background: rgb(var(--c-surface));
  transform: rotate(45deg);
}

.cst-scope-foot,
  .cst-ds-cap,
  .cst-tf-foot {
  margin-top: 4px;
  padding: 8px 8px 4px;
  border-top: 1px solid rgb(var(--c-border));
  color: rgb(var(--c-muted));
  font-size: 11px;
  line-height: 1.4;
}

.cst-ds-sep,
  .cst-tf-sep {
  height: 1px;
  margin: 4px 6px;
  background: rgb(var(--c-border));
}

.cst-tcard {
  display: flex;
  flex-direction: column;
  min-height: 136px;
  border: 1px solid rgb(var(--c-border));
  border-radius: 12px;
  background: rgb(var(--c-surface));
  padding: 14px;
  transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
}

.cst-tcard:hover {
  border-color: rgb(var(--c-accent));
  box-shadow: 0 6px 18px rgb(var(--c-accent) / 0.10);
}

.cst-tcard .tt {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  color: rgb(var(--c-ink));
  font-family: 'Fraunces', Georgia, serif;
  font-size: 16px;
  font-weight: 600;
}

.cst-tcard .td {
  min-height: 34px;
  margin-bottom: 11px;
  color: rgb(var(--c-muted));
  font-size: 12.5px;
  line-height: 1.42;
}

.cst-tcard .needs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: auto;
}

.cst-tcard .\!needs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  margin-top: auto !important;
}

.cst-tcard .need {
  border: 1px solid rgb(var(--c-border));
  border-radius: 6px;
  background: rgb(var(--c-bg-deep));
  color: rgb(var(--c-muted));
  padding: 2px 7px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
}

.cst-tcard .need.gap {
  border-color: rgb(var(--c-down) / 0.38);
  background: rgb(var(--c-down) / 0.08);
  color: rgb(var(--c-down));
}

.cst-bakeoff-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  border: 1px solid rgb(var(--c-border));
  border-radius: 12px;
  background: rgb(var(--c-surface));
  padding: 15px 18px;
}

.cst-bakeoff-banner .eyebrow {
  color: rgb(var(--c-accent));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cst-bakeoff-banner .copy {
  margin-top: 3px;
  color: rgb(var(--c-text));
  font-size: 13.5px;
}

.cst-bakeoff-banner .\!copy {
  margin-top: 3px !important;
  color: rgb(var(--c-text)) !important;
  font-size: 13.5px !important;
}

.cst-bakeoff-banner button {
  flex: 0 0 auto;
  border-radius: 9px;
  border: 1px solid rgb(var(--c-border));
  background: rgb(var(--c-bg-deep));
  color: rgb(var(--c-accent));
  padding: 7px 10px;
  font-size: 12.5px;
  font-weight: 600;
}

.cst-variants {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.cst-vcard {
  display: flex;
  min-height: 390px;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgb(var(--c-border));
  border-radius: 12px;
  background: rgb(var(--c-surface));
}

.cst-vcard.win {
  border-color: rgb(var(--c-accent));
  box-shadow:
      0 0 0 4px rgb(var(--c-accent) / 0.12),
      0 6px 20px rgb(var(--c-accent) / 0.14);
}

.cst-vcard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 15px;
  border-bottom: 1px solid rgb(var(--c-border));
  color: rgb(var(--c-muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
}

.cst-vcard-body {
  flex: 1 1 auto;
  padding: 20px 22px;
}

.cst-vcard-body h3 {
  margin: 0 0 9px;
  color: rgb(var(--c-ink));
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.18;
}

.cst-vcard-body p {
  margin: 0 0 10px;
  color: rgb(var(--c-text));
  font-size: 13.5px;
  line-height: 1.6;
}

.cst-vcard-foot,
  .cst-vmeta {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 15px;
  border-top: 1px solid rgb(var(--c-border));
}

.cst-vmeta {
  color: rgb(var(--c-muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
}

.cst-vmeta .ok {
  color: rgb(var(--c-up));
}

.cst-vmeta .\!ok {
  color: rgb(var(--c-up)) !important;
}

.cst-vmeta .cite {
  color: rgb(var(--c-accent));
}

.cst-vmeta .warn {
  color: rgb(var(--c-warn));
}

.cst-vcard-foot {
  justify-content: flex-end;
}

.cst-vcard-foot .pick,
  .cst-reading-modal .rm-foot .pick {
  min-height: 36px;
  border-radius: 10px;
  border: 1px solid rgb(var(--c-border));
  padding: 7px 12px;
  font-size: 12.5px;
  font-weight: 600;
}

.cst-vcard-foot .pick.primary,
  .cst-reading-modal .rm-foot .pick.primary {
  border-color: rgb(var(--c-accent));
  background: rgb(var(--c-accent));
  color: rgb(var(--c-sidebar-ink));
}

.cst-vcard-foot .pick.ghost,
  .cst-reading-modal .rm-foot .pick.ghost {
  background: rgb(var(--c-surface));
  color: rgb(var(--c-accent));
}

.cst-reading-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgb(var(--c-sidebar) / 0.58);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.cst-reading-modal {
  display: flex;
  flex-direction: column;
  width: min(720px, 100%);
  max-height: min(760px, calc(100dvh - 48px));
  overflow: hidden;
  border: 1px solid rgb(var(--c-border));
  border-radius: 14px;
  background: rgb(var(--c-surface));
  color: rgb(var(--c-text));
  box-shadow: 0 22px 70px rgb(var(--c-sidebar) / 0.38);
}

.cst-reading-modal .rm-head,
  .cst-reading-modal .rm-foot,
  .cst-reading-modal .rm-vmeta {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  border-color: rgb(var(--c-border));
}

.cst-reading-modal .rm-head {
  padding: 14px 20px;
  border-bottom: 1px solid rgb(var(--c-border));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: rgb(var(--c-muted));
}

.cst-reading-modal .rm-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 30px 44px 26px;
}

.cst-reading-modal .rm-body h3 {
  margin: 0 0 14px;
  color: rgb(var(--c-ink));
  font-family: 'Fraunces', Georgia, serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.16;
}

.cst-reading-modal .rm-body p {
  margin: 0 0 14px;
  color: rgb(var(--c-text));
  font-size: 15.5px;
  line-height: 1.72;
}

.cst-reading-modal .rm-vmeta {
  padding: 12px 44px;
  border-top: 1px solid rgb(var(--c-border));
  border-bottom: 1px solid rgb(var(--c-border));
  color: rgb(var(--c-muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
}

.cst-reading-modal .rm-foot {
  justify-content: flex-end;
  padding: 14px 20px;
  border-top: 1px solid rgb(var(--c-border));
}

@media (max-width: 767px) {
  .cst-bakeoff-banner {
    align-items: flex-start;
    flex-direction: column;
  }

  .cst-variants {
    grid-template-columns: minmax(0, 1fr);
  }
}

.cst-bi-inline {
  margin: 6px 0 12px;
  border: 1px solid rgb(var(--c-accent) / 0.22);
  border-radius: 11px;
  background: rgb(var(--c-accent) / 0.08);
  padding: 10px 13px;
}

.cst-bi-inline .fig {
  color: rgb(var(--c-text));
  font-size: 13px;
  line-height: 1.5;
}

.cst-bi-inline .fig b {
  color: rgb(var(--c-accent-strong));
}

.cst-bi-inline .why {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  color: rgb(var(--c-accent-strong));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
}

/* CUX-025: real @bi structured-data block (columns/rows/sql). */

.cst-bi-data .bi-q {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgb(var(--c-accent-strong));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  margin-bottom: 6px;
}

.cst-bi-data .bi-headline {
  color: rgb(var(--c-text));
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
}

.cst-bi-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
}

.cst-bi-table th,
  .cst-bi-table td {
  border: 1px solid rgb(var(--c-accent) / 0.20);
  padding: 4px 8px;
  text-align: left;
  color: rgb(var(--c-text));
}

.cst-bi-table th {
  background: rgb(var(--c-accent) / 0.10);
  color: rgb(var(--c-accent-strong));
  font-weight: 600;
}

.cst-bi-data .bi-empty {
  color: rgb(var(--c-muted));
  font-size: 12px;
}

.cst-bi-data .bi-meta {
  margin-top: 7px;
  color: rgb(var(--c-muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
}

.cst-bi-data .bi-sql {
  margin: 7px 0 0;
  padding: 7px 9px;
  border-radius: 8px;
  background: rgb(var(--c-accent) / 0.06);
  color: rgb(var(--c-muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  white-space: pre-wrap;
  overflow-x: auto;
}

.cst-canon-gap {
  margin: 8px 0 0;
  border: 1px dashed rgb(var(--c-down));
  border-radius: 11px;
  background: rgb(var(--c-down) / 0.06);
  padding: 11px 13px;
}

.cst-canon-gap .badge {
  display: inline-block;
  margin-bottom: 8px;
  border-radius: 6px;
  background: rgb(var(--c-down));
  color: rgb(var(--c-surface));
  padding: 3px 9px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* LANGUAGE PASS (finding 4): the slot in house words, beside the badge. */

.cst-canon-gap .slot {
  display: inline-block;
  margin: 0 0 8px 8px;
  color: rgb(var(--c-down));
  font-size: 12.5px;
  font-weight: 600;
}

.cst-canon-gap .\!slot {
  display: inline-block !important;
  margin: 0 0 8px 8px !important;
  color: rgb(var(--c-down)) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}

.cst-canon-gap .body {
  color: rgb(var(--c-text));
  font-size: 13px;
  line-height: 1.5;
}

.cst-canon-gap .\!body {
  color: rgb(var(--c-text)) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

.cst-canon-gap .fix a {
  color: rgb(var(--c-accent));
  text-decoration: none;
}

.cst-canon-gap .\!fix a {
  color: rgb(var(--c-accent)) !important;
  text-decoration: none !important;
}

.cst-canon-gap .fix a:hover {
  text-decoration: underline;
}

.cst-canon-gap .\!fix a:hover {
  text-decoration: underline !important;
}

.cst-canon-gap .body b {
  color: rgb(var(--c-down));
}

.cst-canon-gap .\!body b {
  color: rgb(var(--c-down)) !important;
}

.cst-canon-gap .fix {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  margin-top: 8px;
  color: rgb(var(--c-accent));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
}

.cst-canon-gap .\!fix {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px 12px !important;
  margin-top: 8px !important;
  color: rgb(var(--c-accent)) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
}

/* Slide-level gap notice: a canon-gap sentinel attached to a slide renders
     as this compact red affordance ("red = canon gap"), never as slide copy. */

.cst-slide-canon-gap {
  margin: 0 0 12px;
  padding: 8px 11px;
}

.cst-slide-canon-gap .badge {
  margin-bottom: 5px;
  padding: 2px 7px;
  font-size: 8.5px;
}

.cst-slide-canon-gap .body {
  font-size: 11.5px;
  line-height: 1.45;
}

.cst-slide-canon-gap .\!body {
  font-size: 11.5px !important;
  line-height: 1.45 !important;
}

/* metadata-color legend footnote — mirrors compose-ux-v7 .legend-foot:
     a quiet one-line strip inside the gates-wrap (no border, no fill). */

.cst-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 8px 0 9px;
  color: rgb(var(--c-muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
}

.cst-legend .sw {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.cst-legend .dotc {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 3px;
}

.cst-legend .dotc.red {
  background: rgb(var(--c-down));
}

.cst-legend .dotc.blue {
  background: rgb(var(--c-accent));
}

.cst-legend .dotc.badge {
  border-radius: 2px;
  background: rgb(var(--c-up));
}

.cst-legend .lead {
  color: rgb(var(--c-text));
}

.cst-legend .dismiss {
  margin-left: auto;
  color: rgb(var(--c-muted));
  opacity: 0.55;
}

.cst-legend .\!dismiss {
  margin-left: auto !important;
  color: rgb(var(--c-muted)) !important;
  opacity: 0.55 !important;
}

@media (max-width: 767px) {
  .cst-topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 52px;
    height: 52px;
    padding: 0 12px 0 16px;
    border-bottom: 1px solid rgb(var(--c-border));
    background: rgb(var(--c-surface));
    color: rgb(var(--c-ink));
    font-family: 'Instrument Sans', system-ui, sans-serif;
  }

  .cst-topbar .tb-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: rgb(var(--c-ink));
    font-family: 'Fraunces', Georgia, serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cst-topbar .tb-right {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
  }

  .cst-topbar button,
    .cst-topbar .tb-btn {
    display: inline-grid;
    place-items: center;
    min-width: 44px;
    min-height: 44px;
    border-radius: 11px;
    color: rgb(var(--c-muted));
  }

  .cst-topbar .active {
    color: rgb(var(--c-accent-strong));
    background: rgb(var(--c-accent) / 0.08);
  }

  .cst-of-menu {
    position: absolute;
    z-index: 50;
    top: calc(100% + 6px);
    right: 10px;
    width: min(236px, calc(100vw - 20px));
    border: 1px solid rgb(var(--c-border));
    border-radius: 14px;
    background: rgb(var(--c-surface));
    box-shadow: 0 22px 50px rgb(var(--c-ink) / 0.24);
    padding: 6px;
    color: rgb(var(--c-text));
  }

  [data-theme='dark'] .cst-of-menu {
    box-shadow: 0 22px 50px rgb(var(--c-bg-deep) / 0.6);
  }

  .cst-of-menu .h {
    padding: 7px 9px 5px;
    color: rgb(var(--c-muted));
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .cst-of-menu .of-item {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-height: 44px;
    border-radius: 9px;
    padding: 0 10px;
    color: rgb(var(--c-text));
    font-size: 14px;
    text-align: left;
  }

  .cst-of-menu .of-item .g {
    display: inline-flex;
    color: rgb(var(--c-muted));
  }

  .cst-of-menu .of-item.hi {
    color: rgb(var(--c-accent-strong));
    background: rgb(var(--c-accent) / 0.08);
  }

  .cst-of-menu .of-item.hi .g {
    color: rgb(var(--c-accent));
  }

  .cst-of-menu .of-item.blocked {
    color: rgb(var(--c-muted));
  }

  .cst-of-menu .of-item .arrow {
    display: inline-flex;
    margin-left: auto;
    color: rgb(var(--c-accent));
  }

  .cst-of-menu .of-item .soon {
    margin-left: auto;
    border: 1px solid rgb(var(--c-border));
    border-radius: 5px;
    padding: 2px 6px;
    color: rgb(var(--c-muted));
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9px;
  }

  .cst-of-menu .of-item .row-r {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    color: rgb(var(--c-accent));
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
  }

  .cst-of-menu .of-item .row-r .ic {
    color: rgb(var(--c-accent));
  }

  .cst-of-menu .of-item .row-r .rr-n {
    color: rgb(var(--c-muted));
  }

  .cst-of-menu .of-item .row-r .rr-warn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: rgb(var(--c-warn));
    font-weight: 500;
  }

  .cst-of-menu .of-item .row-r .rr-warn .ic {
    color: rgb(var(--c-warn));
  }

  .cst-of-menu .of-item .lock {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    border: 1px solid rgb(var(--c-warn) / 0.40);
    border-radius: 5px;
    background: rgb(var(--c-warn) / 0.12);
    color: rgb(var(--c-warn));
    padding: 2px 6px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9px;
  }

  .cst-of-menu .of-sep {
    height: 1px;
    margin: 4px 8px;
    background: rgb(var(--c-border));
  }

  .cst-sheet {
    position: fixed;
    z-index: 52;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    max-height: calc(100dvh - 72px);
    min-height: 440px;
    flex-direction: column;
    border-top: 1px solid rgb(var(--c-border));
    border-radius: 24px 24px 0 0;
    background: rgb(var(--c-surface));
    color: rgb(var(--c-text));
    box-shadow: 0 -18px 42px rgb(var(--c-ink) / 0.18);
    padding-top: 8px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    font-family: 'Instrument Sans', system-ui, sans-serif;
  }

  [data-theme='dark'] .cst-sheet {
    box-shadow: 0 -18px 42px rgb(var(--c-bg-deep) / 0.6);
  }

  .cst-sheet.sources {
    height: min(76dvh, 680px);
  }

  .cst-sheet.gates {
    height: 560px;
  }

  .cst-sheet .grab-row,
    .grab-row {
    display: flex;
    justify-content: center;
    min-height: 22px;
    padding: 2px 0 6px;
  }

  .cst-sheet .grab-row::before,
    .grab-row::before {
    content: "";
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: rgb(var(--c-border));
  }

  .cst-sheet .sheet-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px 8px;
  }

  .cst-sheet .sheet-head .t {
    color: rgb(var(--c-ink));
    font-family: 'Fraunces', Georgia, serif;
    font-size: 17px;
    font-weight: 600;
  }

  .cst-sheet .sheet-head .s {
    color: rgb(var(--c-muted));
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
  }

  .cst-sheet .sheet-head .close {
    display: grid;
    place-items: center;
    min-width: 44px;
    min-height: 44px;
    margin-left: auto;
    border: 1px solid rgb(var(--c-border));
    border-radius: 12px;
    background: rgb(var(--c-surface));
    color: rgb(var(--c-muted));
  }

  .cst-sheet .sheet-explain,
    .sheet-explain {
    flex: 0 0 auto;
    max-width: 100%;
    padding: 0 16px 10px;
    color: rgb(var(--c-muted));
    font-size: 12px;
    line-height: 1.42;
  }

  .cst-sheet .seg {
    display: flex;
    gap: 3px;
    margin: 0 16px 10px;
    border: 1px solid rgb(var(--c-border));
    border-radius: 13px;
    background: rgb(var(--c-bg-deep));
    padding: 3px;
  }

  .cst-sheet .seg .s {
    display: inline-flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    border-radius: 10px;
    color: rgb(var(--c-muted));
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    white-space: nowrap;
  }

  .cst-sheet .seg .s span {
    color: rgb(var(--c-data));
  }

  .cst-sheet .seg .s.on {
    background: rgb(var(--c-surface));
    color: rgb(var(--c-accent-strong));
    box-shadow:
        0 1px 2px rgb(var(--c-ink) / 0.12),
        0 0 0 1px rgb(var(--c-accent) / 0.14);
  }

  .cst-sheet .rl-search {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin: 0 16px 12px;
    border: 1px solid rgb(var(--c-border));
    border-radius: 12px;
    background: rgb(var(--c-surface));
    color: rgb(var(--c-muted));
    padding: 0 12px;
    font-size: 12px;
  }

  .cst-sheet .rl-search input {
    min-width: 0;
    flex: 1 1 auto;
    min-height: 44px;
    border: 0;
    outline: 0;
    background: transparent;
    color: rgb(var(--c-text));
    font: inherit;
  }

  .cst-sheet .sheet-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 14px;
    -webkit-mask-image: linear-gradient(to bottom, rgb(var(--c-ink)) calc(100% - 28px), transparent);
    mask-image: linear-gradient(to bottom, rgb(var(--c-ink)) calc(100% - 28px), transparent);
  }

  .cst-sheet .rl-micro {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 11px 16px 6px;
    color: rgb(var(--c-muted));
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9.5px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
  }

  .cst-sheet .rl-micro.pin {
    color: rgb(var(--c-accent));
  }

  .cst-sheet .rl-micro.shape {
    color: rgb(var(--c-data));
  }

  .cst-sheet .rl-micro .after {
    flex: 1 1 auto;
    height: 1px;
    background: rgb(var(--c-border));
    opacity: 0.7;
  }

  .cst-sheet .rl-conn {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    margin: 0 16px;
    color: rgb(var(--c-data));
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
  }

  .cst-sheet .rl-conn .cico,
    .cst-sheet .rl-row .glyph .cg {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: rgb(var(--c-sidebar));
    color: rgb(var(--c-sidebar-ink));
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 600;
  }

  .cst-sheet .rl-conn .cico.bi,
    .cst-sheet .rl-row .glyph .cg.bi {
    background: rgb(var(--c-accent));
  }

  .cst-sheet .rl-conn .cico.pdf,
    .cst-sheet .rl-row .glyph .cg.pdf {
    background: rgb(var(--c-down));
  }

  .cst-sheet .rl-row,
    .cst-sheet .gate-row {
    min-height: 52px;
  }

  .cst-sheet .rl-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 16px;
    color: rgb(var(--c-text));
  }

  .cst-sheet .rl-row + .rl-row {
    box-shadow: inset 0 1px 0 rgb(var(--c-border));
  }

  .cst-sheet .rl-row.dim {
    opacity: 0.62;
  }

  .cst-sheet .rl-row.shaping {
    background: rgb(var(--c-data) / 0.06);
    box-shadow: inset 2px 0 0 rgb(var(--c-data) / 0.42);
  }

  .cst-sheet .rl-row.struck .title {
    color: rgb(var(--c-muted));
    text-decoration: line-through;
    text-decoration-thickness: 1px;
  }

  .cst-sheet .rl-row .body {
    min-width: 0;
    flex: 1 1 auto;
  }

  .cst-sheet .rl-row .title {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    overflow: hidden;
    color: rgb(var(--c-ink));
    font-size: 13px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cst-sheet .rl-row .title .title-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .cst-sheet .rl-row .pinmark {
    display: inline-flex;
    flex: 0 0 auto;
    color: rgb(var(--c-accent));
  }

  .cst-sheet .rl-row .role-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    padding: 0 6px;
    border: 1px solid rgb(var(--c-data) / 0.35);
    border-radius: 999px;
    background: rgb(var(--c-data) / 0.09);
    color: rgb(var(--c-data));
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .cst-sheet .rl-row .sub {
    margin-top: 3px;
    color: rgb(var(--c-muted));
    font-size: 11.5px;
  }

  .cst-sheet .rl-acts {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 9px;
  }

  .cst-sheet .rl-act,
    .cst-sheet .seg .s {
    min-height: 44px;
  }

  .cst-sheet .rl-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid rgb(var(--c-accent) / 0.32);
    border-radius: 11px;
    background: rgb(var(--c-surface));
    color: rgb(var(--c-accent));
    padding: 0 12px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
  }

  .cst-sheet .rl-act.active {
    background: rgb(var(--c-accent));
    color: rgb(var(--c-surface));
    border-color: rgb(var(--c-accent));
  }

  .cst-sheet .rl-act.mute {
    border-color: rgb(var(--c-border));
    color: rgb(var(--c-muted));
  }

  .cst-sheet .rl-act.mute.active {
    border-color: rgb(var(--c-warn) / 0.42);
    background: rgb(var(--c-warn) / 0.12);
    color: rgb(var(--c-warn));
  }

  .cst-sheet .rl-empty {
    margin: 30px 18px;
    text-align: center;
    color: rgb(var(--c-muted));
    font-size: 12px;
  }

  .cst-sheet .sheet-foot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    min-height: 48px;
    border-top: 1px solid rgb(var(--c-border));
    color: rgb(var(--c-accent));
    padding: 0 16px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
  }

  .cst-sheet .gate-list {
    padding: 0 12px 8px;
  }

  .cst-sheet .gate-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    border: 1px solid rgb(var(--c-border));
    border-radius: 14px;
    background: rgb(var(--c-surface));
    padding: 8px 10px;
  }

  .cst-sheet .gate-row + .gate-row {
    margin-top: 8px;
  }

  .cst-sheet .gate-row .gate-ico {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: rgb(var(--c-bg-deep));
    color: rgb(var(--c-muted));
  }

  .cst-sheet .gate-row.ok .gate-ico {
    background: rgb(var(--c-up) / 0.12);
    color: rgb(var(--c-up));
  }

  .cst-sheet .gate-row.warn {
    border-color: rgb(var(--c-warn) / 0.42);
    background: rgb(var(--c-warn) / 0.07);
  }

  .cst-sheet .gate-row.warn .gate-ico {
    background: rgb(var(--c-warn) / 0.14);
    color: rgb(var(--c-warn));
  }

  .cst-sheet .gate-name {
    min-width: 0;
    overflow: hidden;
    color: rgb(var(--c-ink));
    font-size: 13px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cst-sheet .gate-status {
    color: rgb(var(--c-muted));
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
  }

  .cst-sheet .gate-row.ok .gate-status {
    color: rgb(var(--c-up));
  }

  .cst-sheet .gate-row.warn .gate-status {
    color: rgb(var(--c-warn));
  }

  .cst-sheet .held-block {
    margin: 4px 12px 14px;
    border: 1px solid rgb(var(--c-warn) / 0.46);
    border-radius: 15px;
    background: rgb(var(--c-warn) / 0.08);
    padding: 13px 14px;
    color: rgb(var(--c-text));
  }

  .cst-sheet .held-block .hb-title {
    margin-bottom: 6px;
    color: rgb(var(--c-ink));
    font-size: 13px;
    font-weight: 700;
  }

  .cst-sheet .held-block p {
    margin: 0;
    color: rgb(var(--c-muted));
    font-size: 12px;
    line-height: 1.45;
  }

  .cst-sheet .held-block code {
    display: block;
    margin-top: 10px;
    color: rgb(var(--c-warn));
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    white-space: normal;
  }

  .cst-sheet .pub-blocked {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    border-top: 1px solid rgb(var(--c-warn) / 0.32);
    background: rgb(var(--c-warn) / 0.10);
    color: rgb(var(--c-warn));
    padding: 0 16px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 600;
  }

  .cst-fmt-bar {
    position: fixed;
    left: 50%;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    z-index: 48;
    display: flex;
    align-items: center;
    gap: 3px;
    min-height: 52px;
    max-width: calc(100vw - 24px);
    border: 1px solid rgb(var(--c-sidebar-border));
    border-radius: 16px;
    background: rgb(var(--c-sidebar));
    color: rgb(var(--c-sidebar-muted));
    padding: 4px 6px;
    box-shadow:
        0 18px 44px rgb(var(--c-ink) / 0.34),
        0 0 0 1px rgb(var(--c-surface) / 0.04);
    transform: translateX(-50%);
  }

  .cst-fmt-bar button,
    .cst-fmt-bar .fmt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 44px;
    min-height: 44px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: rgb(var(--c-sidebar-muted));
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
  }

  .cst-fmt-bar .on {
    color: rgb(var(--c-sidebar-ink));
    background: rgb(var(--c-sidebar-accent) / 0.24);
    box-shadow: inset 0 0 0 1px rgb(var(--c-sidebar-accent) / 0.36);
  }

  .cst-fmt-bar .rewrite {
    color: rgb(var(--c-sidebar-accent));
  }

  .cst-fmt-bar .sep {
    width: 1px;
    height: 24px;
    margin: 0 2px;
    background: rgb(var(--c-sidebar-border));
  }

  [data-compose-mobile-active='true'] .cst-edit-toolbar {
    display: none;
  }

  .cst-fab-dot {
    position: fixed;
    right: 16px;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    z-index: 46;
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: rgb(var(--c-accent));
    color: rgb(var(--c-surface));
    box-shadow:
        0 10px 24px rgb(var(--c-ink) / 0.32),
        0 0 0 1px rgb(var(--c-accent) / 0.40);
  }

  .cst-fab-dot::after {
    content: "";
    position: absolute;
    top: 1px;
    right: 1px;
    display: none;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: rgb(var(--c-down));
    box-shadow: 0 0 0 2px rgb(var(--c-surface));
  }

  .cst-fab-dot.unread::after {
    display: block;
  }

  .cst-mobile-scrim {
    position: fixed;
    z-index: 51;
    inset: 52px 0 0;
    background: rgb(var(--c-ink) / 0.24);
    -webkit-backdrop-filter: blur(1px);
            backdrop-filter: blur(1px);
  }

  .cst-mobile-composer {
    position: fixed;
    z-index: 45;
    right: 0;
    bottom: 0;
    left: 0;
    border-top: 1px solid rgb(var(--c-border));
    background: rgb(var(--c-surface));
    color: rgb(var(--c-text));
    font-family: 'Instrument Sans', system-ui, sans-serif;
  }

  .cst-mobile-comp-card {
    margin: 6px 10px 0;
    overflow: hidden;
    border: 1px solid rgb(var(--c-border));
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    background: rgb(var(--c-surface));
    box-shadow: 0 -6px 20px rgb(var(--c-ink) / 0.06);
  }

  [data-theme='dark'] .cst-mobile-comp-card {
    box-shadow: 0 -6px 20px rgb(var(--c-bg-deep) / 0.5);
  }

  .cst-mobile-comp-head {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 44px 44px;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgb(var(--c-border));
    padding: 8px 12px 8px 14px;
  }

  .cst-mobile-comp-head .grab {
    flex: 0 0 auto;
    width: 34px;
    height: 5px;
    border-radius: 999px;
    background: rgb(var(--c-border));
  }

  .cst-mobile-comp-head .cap {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: rgb(var(--c-muted));
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .cst-mobile-comp-head .cap-n {
    color: rgb(var(--c-accent));
  }

  .cst-mobile-comp-head .pull,
    .cst-mobile-comp-head .collapse {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    border-radius: 12px;
  }

  .cst-mobile-comp-head .pull {
    background: rgb(var(--c-accent) / 0.10);
    color: rgb(var(--c-accent));
  }

  .cst-mobile-comp-head .collapse {
    border: 1px solid rgb(var(--c-border));
    background: rgb(var(--c-surface));
    color: rgb(var(--c-muted));
  }

  .cst-mobile-comp-card .dock-outer {
    padding: 6px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  }

  /* ONE AI SURFACE: the mobile refine-scope chip — a slide/section refine
       entry landed on the dock; the next instruction targets just that scope.
       Quiet mono metadata, accent only on the glyph, clearable. */

  .cst-mobile-scope {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 6px 12px 0;
    border: 1px solid rgb(var(--c-accent) / 0.35);
    border-radius: 999px;
    background: rgb(var(--c-accent) / 0.08);
    padding: 4px 6px 4px 10px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    color: rgb(var(--c-muted));
  }

  .cst-mobile-scope .lbl {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: rgb(var(--c-accent));
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .cst-mobile-scope .q {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgb(var(--c-text));
  }

  .cst-mobile-scope .x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-left: auto;
    border-radius: 999px;
    color: rgb(var(--c-muted));
  }

  .cst-mobile-scope .x:hover,
    .cst-mobile-scope .x:focus-visible {
    color: rgb(var(--c-accent));
    background: rgb(var(--c-accent) / 0.12);
    outline: none;
  }

  .cst-mobile-composer .cst-dock-attached {
    display: none;
  }

  /* Mockup dock footer is mode-btn + send only — the "Type / for skills"
       hint lives in the placeholder, not a second footer line. */

  .cst-mobile-composer .cst-dock-hint,
    .cst-thread-sheet .cst-dock-hint {
    display: none;
  }

  .cst-thread-sheet {
    position: fixed;
    z-index: 52;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    height: min(90dvh, calc(100dvh - 52px));
    flex-direction: column;
    border-top: 1px solid rgb(var(--c-border));
    border-radius: 24px 24px 0 0;
    background: rgb(var(--c-surface));
    color: rgb(var(--c-text));
    box-shadow: 0 -18px 42px rgb(var(--c-ink) / 0.18);
  }

  [data-theme='dark'] .cst-thread-sheet {
    box-shadow: 0 -18px 42px rgb(var(--c-bg-deep) / 0.6);
  }

  .cst-thread-sheet .ts-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 16px 10px;
    border-bottom: 1px solid rgb(var(--c-border));
  }

  .cst-thread-sheet .ts-head .n {
    color: rgb(var(--c-accent));
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
  }

  .cst-thread-sheet .ts-head .grow {
    flex: 1 1 auto;
  }

  .cst-thread-sheet .ts-head .t {
    color: rgb(var(--c-ink));
    font-family: 'Fraunces', Georgia, serif;
    font-size: 17px;
    font-weight: 600;
  }

  .cst-thread-sheet .ts-head .down {
    display: grid;
    place-items: center;
    min-width: 44px;
    min-height: 44px;
    margin-left: auto;
    border: 1px solid rgb(var(--c-border));
    border-radius: 12px;
    background: rgb(var(--c-surface));
    color: rgb(var(--c-muted));
  }

  .cst-thread-sheet .thread-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
    -webkit-mask-image: linear-gradient(to bottom, rgb(var(--c-ink)) calc(100% - 32px), transparent);
    mask-image: linear-gradient(to bottom, rgb(var(--c-ink)) calc(100% - 32px), transparent);
  }

  .cst-thread-peek {
    max-height: 96px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, rgb(var(--c-ink)) 70%, transparent);
    mask-image: linear-gradient(to bottom, rgb(var(--c-ink)) 70%, transparent);
  }

  .cst-thread-peek .msg-user {
    display: none;
  }

  .cst-thread-peek .msg-a,
    .cst-thread-sheet .msg-user,
    .cst-thread-sheet .msg-a {
    max-width: 96%;
    border: 1px solid rgb(var(--c-border));
    border-radius: 13px;
    padding: 10px 11px;
    font-size: 13px;
    line-height: 1.5;
  }

  .cst-thread-peek .msg-a,
    .cst-thread-sheet .msg-a {
    align-self: flex-start;
    background: rgb(var(--c-bg-deep));
    color: rgb(var(--c-text));
  }

  .cst-thread-sheet .msg-user {
    align-self: flex-end;
    border-color: rgb(var(--c-accent) / 0.45);
    background: rgb(var(--c-accent));
    color: rgb(var(--c-surface));
  }

  .cst-thread-sheet .msg-a.latest {
    border-color: rgb(var(--c-accent) / 0.35);
    box-shadow: inset 3px 0 0 rgb(var(--c-accent));
  }

  .cst-thread-peek .msg-meta,
    .cst-thread-sheet .msg-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    color: rgb(var(--c-muted));
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
  }

  /* FOUNDER BUG (empty top padding + faint vestigial label, 2026-07-07): the
       user bubble is accent-filled and right-aligned — it already reads as "you",
       so the redundant "YOU" meta label was pure dead space at the TOP of the
       bubble (margin-bottom above the text). Desktop already hides it
       (`.cst-chat .msg-user .msg-meta { display:none }`); the mobile thread
       surfaces un-hid it via the blanket `.msg-meta { display:flex }` above. Hide
       it here so the bubble hugs its text on mobile too. (The brief message keeps
       its meta — that surface is a labelled transcript, handled separately.) */

  .cst-thread-peek .msg-user .msg-meta,
    .cst-thread-sheet .msg-user .msg-meta {
    display: none;
  }

  .cst-thread-peek .latest-badge,
    .cst-thread-sheet .latest-badge {
    border-radius: 4px;
    background: rgb(var(--c-accent) / 0.10);
    color: rgb(var(--c-accent));
    padding: 1px 5px;
    font-size: 8.5px;
    letter-spacing: 0.06em;
    text-transform: none;
  }

  .cst-thread-peek .msg-body,
    .cst-thread-sheet .msg-body {
    white-space: pre-wrap;
    word-break: break-word;
  }

  .cst-thread-peek .msg-empty,
    .cst-thread-sheet .msg-empty,
    .cst-thread-sheet .chat-error {
    border: 1px dashed rgb(var(--c-border));
    border-radius: 12px;
    padding: 12px;
    color: rgb(var(--c-muted));
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
  }

  .cst-thread-sheet .cst-canon-gap {
    margin-top: 10px;
    border-radius: 9px;
    padding: 9px 10px;
  }

  .cst-thread-sheet .cst-canon-gap .badge {
    margin-bottom: 6px;
    padding: 2px 7px;
    font-size: 8.5px;
  }

  .cst-thread-sheet .cst-canon-gap .body {
    font-size: 12px;
  }

  .cst-thread-sheet .cst-canon-gap .fix button {
    color: rgb(var(--c-accent));
  }

  .cst-thread-sheet .ts-dock {
    flex: 0 0 auto;
    border-top: 1px solid rgb(var(--c-border));
    padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
    background: rgb(var(--c-surface));
  }

  /* LANGUAGE PASS (finding 9): the [hidden] attribute must actually hide
       the bar — display:flex was overriding the UA default, so a lone
       "0 attached" pill kept rendering with nothing attached. */

  .cst-attach-bar[hidden] {
    display: none;
  }

  .cst-attach-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-height: 44px;
    padding: 8px 14px 2px;
    background: rgb(var(--c-surface));
    color: rgb(var(--c-muted));
  }

  .cst-attach-bar .ab-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 32px;
    border: 1px solid rgb(var(--c-border));
    border-radius: 999px;
    background: rgb(var(--c-bg-deep));
    color: rgb(var(--c-muted));
    padding: 4px 10px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    white-space: nowrap;
  }

  .cst-attach-bar .ab-chips {
    display: none;
    flex-wrap: wrap;
    gap: 6px;
  }

  .cst-attach-bar.expanded .ab-pill {
    border-color: rgb(var(--c-accent) / 0.28);
    color: rgb(var(--c-accent-strong));
    background: rgb(var(--c-accent) / 0.08);
  }

  .cst-attach-bar.expanded .ab-chips {
    display: flex;
  }

  .cst-composer,
    .cst-dock {
    border-radius: 16px;
  }

  .cst-dock {
    border-color: rgb(var(--c-accent));
    box-shadow: 0 0 0 3px rgb(var(--c-accent) / 0.12);
    padding: 11px 12px 9px;
  }

  .cst-dock-ta {
    min-height: 40px;
  }

  .cst-dock-ta .plus {
    min-width: 44px;
    min-height: 44px;
  }

  .cst-dock-foot .send,
    .cst-composer-foot .send {
    min-width: 44px;
    min-height: 44px;
    border-radius: 12px;
  }

  .cst-paper {
    min-height: 100%;
    max-width: none;
    margin: 0;
    padding: 16px 18px 40px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  /* r2/r3: gates are demoted to the overflow ⋯ menu + Publish row on
       mobile — they are NOT ambient in the doc flow. Remove the wrapping
       gates strip and the metadata legend box the mockup omits on mobile. */

  .cst-paper [data-testid="compose-gates-strip"],
    .cst-paper .cst-gates,
    .cst-paper [data-testid="compose-doc-legend"],
    .cst-paper .cst-legend {
    display: none !important;
  }

  /* Doc header block per compose-mobile-final mockup (.doc-kicker /
       .doc-h1 / .doc-sub): clean title treatment, no oversized heading. */

  .cst-paper > .font-mono:first-child {
    margin-bottom: 8px;
    font-size: 10.5px;
    letter-spacing: 0.14em;
  }

  .cst-paper > h1 {
    margin-bottom: 8px;
    font-size: 25px;
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.01em;
  }

  .cst-paper > h1 + p {
    margin-bottom: 14px;
    font-size: 14px;
    line-height: 1.5;
  }

  .cst-topbar .\!active {
    color: rgb(var(--c-accent-strong)) !important;
    background: rgb(var(--c-accent) / 0.08) !important;
  }

  .cst-sheet .rl-act.\!active {
    background: rgb(var(--c-accent)) !important;
    color: rgb(var(--c-surface)) !important;
    border-color: rgb(var(--c-accent)) !important;
  }

  .cst-sheet .rl-act.mute.\!active {
    border-color: rgb(var(--c-warn) / 0.42) !important;
    background: rgb(var(--c-warn) / 0.12) !important;
    color: rgb(var(--c-warn)) !important;
  }

  /* ONE AI SURFACE: the mobile refine-scope chip — a slide/section refine
       entry landed on the dock; the next instruction targets just that scope.
       Quiet mono metadata, accent only on the glyph, clearable. */

  /* Mockup dock footer is mode-btn + send only — the "Type / for skills"
       hint lives in the placeholder, not a second footer line. */

  /* FOUNDER BUG (empty top padding + faint vestigial label, 2026-07-07): the
       user bubble is accent-filled and right-aligned — it already reads as "you",
       so the redundant "YOU" meta label was pure dead space at the TOP of the
       bubble (margin-bottom above the text). Desktop already hides it
       (`.cst-chat .msg-user .msg-meta { display:none }`); the mobile thread
       surfaces un-hid it via the blanket `.msg-meta { display:flex }` above. Hide
       it here so the bubble hugs its text on mobile too. (The brief message keeps
       its meta — that surface is a labelled transcript, handled separately.) */

  /* LANGUAGE PASS (finding 9): the [hidden] attribute must actually hide
       the bar — display:flex was overriding the UA default, so a lone
       "0 attached" pill kept rendering with nothing attached. */

  /* r2/r3: gates are demoted to the overflow ⋯ menu + Publish row on
       mobile — they are NOT ambient in the doc flow. Remove the wrapping
       gates strip and the metadata legend box the mockup omits on mobile. */

  /* Doc header block per compose-mobile-final mockup (.doc-kicker /
       .doc-h1 / .doc-sub): clean title treatment, no oversized heading. */

  .cst-of-menu .of-item .\!g {
    display: inline-flex !important;
    color: rgb(var(--c-muted)) !important;
  }

  .cst-of-menu .of-item.hi .\!g {
    color: rgb(var(--c-accent)) !important;
  }

  /* ONE AI SURFACE: the mobile refine-scope chip — a slide/section refine
       entry landed on the dock; the next instruction targets just that scope.
       Quiet mono metadata, accent only on the glyph, clearable. */

  /* Mockup dock footer is mode-btn + send only — the "Type / for skills"
       hint lives in the placeholder, not a second footer line. */

  /* FOUNDER BUG (empty top padding + faint vestigial label, 2026-07-07): the
       user bubble is accent-filled and right-aligned — it already reads as "you",
       so the redundant "YOU" meta label was pure dead space at the TOP of the
       bubble (margin-bottom above the text). Desktop already hides it
       (`.cst-chat .msg-user .msg-meta { display:none }`); the mobile thread
       surfaces un-hid it via the blanket `.msg-meta { display:flex }` above. Hide
       it here so the bubble hugs its text on mobile too. (The brief message keeps
       its meta — that surface is a labelled transcript, handled separately.) */

  /* LANGUAGE PASS (finding 9): the [hidden] attribute must actually hide
       the bar — display:flex was overriding the UA default, so a lone
       "0 attached" pill kept rendering with nothing attached. */

  /* r2/r3: gates are demoted to the overflow ⋯ menu + Publish row on
       mobile — they are NOT ambient in the doc flow. Remove the wrapping
       gates strip and the metadata legend box the mockup omits on mobile. */

  /* Doc header block per compose-mobile-final mockup (.doc-kicker /
       .doc-h1 / .doc-sub): clean title treatment, no oversized heading. */

  .cst-of-menu .of-item .\!g {
    display: inline-flex !important;
    color: rgb(var(--c-muted)) !important;
  }

  .cst-of-menu .of-item.hi .\!g {
    color: rgb(var(--c-accent)) !important;
  }

  /* ONE AI SURFACE: the mobile refine-scope chip — a slide/section refine
       entry landed on the dock; the next instruction targets just that scope.
       Quiet mono metadata, accent only on the glyph, clearable. */

  /* Mockup dock footer is mode-btn + send only — the "Type / for skills"
       hint lives in the placeholder, not a second footer line. */

  /* FOUNDER BUG (empty top padding + faint vestigial label, 2026-07-07): the
       user bubble is accent-filled and right-aligned — it already reads as "you",
       so the redundant "YOU" meta label was pure dead space at the TOP of the
       bubble (margin-bottom above the text). Desktop already hides it
       (`.cst-chat .msg-user .msg-meta { display:none }`); the mobile thread
       surfaces un-hid it via the blanket `.msg-meta { display:flex }` above. Hide
       it here so the bubble hugs its text on mobile too. (The brief message keeps
       its meta — that surface is a labelled transcript, handled separately.) */

  /* LANGUAGE PASS (finding 9): the [hidden] attribute must actually hide
       the bar — display:flex was overriding the UA default, so a lone
       "0 attached" pill kept rendering with nothing attached. */

  /* r2/r3: gates are demoted to the overflow ⋯ menu + Publish row on
       mobile — they are NOT ambient in the doc flow. Remove the wrapping
       gates strip and the metadata legend box the mockup omits on mobile. */

  /* Doc header block per compose-mobile-final mockup (.doc-kicker /
       .doc-h1 / .doc-sub): clean title treatment, no oversized heading. */

  .cst-sheet.\!sources {
    height: min(76dvh, 680px) !important;
  }

  /* ONE AI SURFACE: the mobile refine-scope chip — a slide/section refine
       entry landed on the dock; the next instruction targets just that scope.
       Quiet mono metadata, accent only on the glyph, clearable. */

  /* Mockup dock footer is mode-btn + send only — the "Type / for skills"
       hint lives in the placeholder, not a second footer line. */

  /* FOUNDER BUG (empty top padding + faint vestigial label, 2026-07-07): the
       user bubble is accent-filled and right-aligned — it already reads as "you",
       so the redundant "YOU" meta label was pure dead space at the TOP of the
       bubble (margin-bottom above the text). Desktop already hides it
       (`.cst-chat .msg-user .msg-meta { display:none }`); the mobile thread
       surfaces un-hid it via the blanket `.msg-meta { display:flex }` above. Hide
       it here so the bubble hugs its text on mobile too. (The brief message keeps
       its meta — that surface is a labelled transcript, handled separately.) */

  /* LANGUAGE PASS (finding 9): the [hidden] attribute must actually hide
       the bar — display:flex was overriding the UA default, so a lone
       "0 attached" pill kept rendering with nothing attached. */

  /* r2/r3: gates are demoted to the overflow ⋯ menu + Publish row on
       mobile — they are NOT ambient in the doc flow. Remove the wrapping
       gates strip and the metadata legend box the mockup omits on mobile. */

  /* Doc header block per compose-mobile-final mockup (.doc-kicker /
       .doc-h1 / .doc-sub): clean title treatment, no oversized heading. */

  .cst-sheet.\!gates {
    height: 560px !important;
  }

  /* ONE AI SURFACE: the mobile refine-scope chip — a slide/section refine
       entry landed on the dock; the next instruction targets just that scope.
       Quiet mono metadata, accent only on the glyph, clearable. */

  /* Mockup dock footer is mode-btn + send only — the "Type / for skills"
       hint lives in the placeholder, not a second footer line. */

  /* FOUNDER BUG (empty top padding + faint vestigial label, 2026-07-07): the
       user bubble is accent-filled and right-aligned — it already reads as "you",
       so the redundant "YOU" meta label was pure dead space at the TOP of the
       bubble (margin-bottom above the text). Desktop already hides it
       (`.cst-chat .msg-user .msg-meta { display:none }`); the mobile thread
       surfaces un-hid it via the blanket `.msg-meta { display:flex }` above. Hide
       it here so the bubble hugs its text on mobile too. (The brief message keeps
       its meta — that surface is a labelled transcript, handled separately.) */

  /* LANGUAGE PASS (finding 9): the [hidden] attribute must actually hide
       the bar — display:flex was overriding the UA default, so a lone
       "0 attached" pill kept rendering with nothing attached. */

  /* r2/r3: gates are demoted to the overflow ⋯ menu + Publish row on
       mobile — they are NOT ambient in the doc flow. Remove the wrapping
       gates strip and the metadata legend box the mockup omits on mobile. */

  /* Doc header block per compose-mobile-final mockup (.doc-kicker /
       .doc-h1 / .doc-sub): clean title treatment, no oversized heading. */

  .cst-sheet .sheet-head .\!t {
    color: rgb(var(--c-ink)) !important;
    font-family: 'Fraunces', Georgia, serif !important;
    font-size: 17px !important;
    font-weight: 600 !important;
  }

  /* ONE AI SURFACE: the mobile refine-scope chip — a slide/section refine
       entry landed on the dock; the next instruction targets just that scope.
       Quiet mono metadata, accent only on the glyph, clearable. */

  /* Mockup dock footer is mode-btn + send only — the "Type / for skills"
       hint lives in the placeholder, not a second footer line. */

  .cst-thread-sheet .ts-head .\!t {
    color: rgb(var(--c-ink)) !important;
    font-family: 'Fraunces', Georgia, serif !important;
    font-size: 17px !important;
    font-weight: 600 !important;
  }

  /* FOUNDER BUG (empty top padding + faint vestigial label, 2026-07-07): the
       user bubble is accent-filled and right-aligned — it already reads as "you",
       so the redundant "YOU" meta label was pure dead space at the TOP of the
       bubble (margin-bottom above the text). Desktop already hides it
       (`.cst-chat .msg-user .msg-meta { display:none }`); the mobile thread
       surfaces un-hid it via the blanket `.msg-meta { display:flex }` above. Hide
       it here so the bubble hugs its text on mobile too. (The brief message keeps
       its meta — that surface is a labelled transcript, handled separately.) */

  /* LANGUAGE PASS (finding 9): the [hidden] attribute must actually hide
       the bar — display:flex was overriding the UA default, so a lone
       "0 attached" pill kept rendering with nothing attached. */

  /* r2/r3: gates are demoted to the overflow ⋯ menu + Publish row on
       mobile — they are NOT ambient in the doc flow. Remove the wrapping
       gates strip and the metadata legend box the mockup omits on mobile. */

  /* Doc header block per compose-mobile-final mockup (.doc-kicker /
       .doc-h1 / .doc-sub): clean title treatment, no oversized heading. */

  .cst-sheet .sheet-head .\!s {
    color: rgb(var(--c-muted)) !important;
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
    font-size: 11px !important;
  }

  .cst-sheet .seg .\!s {
    display: inline-flex !important;
    flex: 1 1 0 !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    min-width: 0 !important;
    border-radius: 10px !important;
    color: rgb(var(--c-muted)) !important;
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }

  .cst-sheet .seg .\!s span {
    color: rgb(var(--c-data)) !important;
  }

  .cst-sheet .seg .\!s.on {
    background: rgb(var(--c-surface)) !important;
    color: rgb(var(--c-accent-strong)) !important;
    box-shadow:
        0 1px 2px rgb(var(--c-ink) / 0.12),
        0 0 0 1px rgb(var(--c-accent) / 0.14) !important;
  }

  
    .cst-sheet .seg .\!s {
    min-height: 44px !important;
  }

  /* ONE AI SURFACE: the mobile refine-scope chip — a slide/section refine
       entry landed on the dock; the next instruction targets just that scope.
       Quiet mono metadata, accent only on the glyph, clearable. */

  /* Mockup dock footer is mode-btn + send only — the "Type / for skills"
       hint lives in the placeholder, not a second footer line. */

  /* FOUNDER BUG (empty top padding + faint vestigial label, 2026-07-07): the
       user bubble is accent-filled and right-aligned — it already reads as "you",
       so the redundant "YOU" meta label was pure dead space at the TOP of the
       bubble (margin-bottom above the text). Desktop already hides it
       (`.cst-chat .msg-user .msg-meta { display:none }`); the mobile thread
       surfaces un-hid it via the blanket `.msg-meta { display:flex }` above. Hide
       it here so the bubble hugs its text on mobile too. (The brief message keeps
       its meta — that surface is a labelled transcript, handled separately.) */

  /* LANGUAGE PASS (finding 9): the [hidden] attribute must actually hide
       the bar — display:flex was overriding the UA default, so a lone
       "0 attached" pill kept rendering with nothing attached. */

  /* r2/r3: gates are demoted to the overflow ⋯ menu + Publish row on
       mobile — they are NOT ambient in the doc flow. Remove the wrapping
       gates strip and the metadata legend box the mockup omits on mobile. */

  /* Doc header block per compose-mobile-final mockup (.doc-kicker /
       .doc-h1 / .doc-sub): clean title treatment, no oversized heading. */

  .cst-sheet .sheet-head .\!s {
    color: rgb(var(--c-muted)) !important;
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
    font-size: 11px !important;
  }

  .cst-sheet .seg .\!s {
    display: inline-flex !important;
    flex: 1 1 0 !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    min-width: 0 !important;
    border-radius: 10px !important;
    color: rgb(var(--c-muted)) !important;
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }

  .cst-sheet .seg .\!s span {
    color: rgb(var(--c-data)) !important;
  }

  .cst-sheet .seg .\!s.on {
    background: rgb(var(--c-surface)) !important;
    color: rgb(var(--c-accent-strong)) !important;
    box-shadow:
        0 1px 2px rgb(var(--c-ink) / 0.12),
        0 0 0 1px rgb(var(--c-accent) / 0.14) !important;
  }

  
    .cst-sheet .seg .\!s {
    min-height: 44px !important;
  }

  /* ONE AI SURFACE: the mobile refine-scope chip — a slide/section refine
       entry landed on the dock; the next instruction targets just that scope.
       Quiet mono metadata, accent only on the glyph, clearable. */

  /* Mockup dock footer is mode-btn + send only — the "Type / for skills"
       hint lives in the placeholder, not a second footer line. */

  /* FOUNDER BUG (empty top padding + faint vestigial label, 2026-07-07): the
       user bubble is accent-filled and right-aligned — it already reads as "you",
       so the redundant "YOU" meta label was pure dead space at the TOP of the
       bubble (margin-bottom above the text). Desktop already hides it
       (`.cst-chat .msg-user .msg-meta { display:none }`); the mobile thread
       surfaces un-hid it via the blanket `.msg-meta { display:flex }` above. Hide
       it here so the bubble hugs its text on mobile too. (The brief message keeps
       its meta — that surface is a labelled transcript, handled separately.) */

  /* LANGUAGE PASS (finding 9): the [hidden] attribute must actually hide
       the bar — display:flex was overriding the UA default, so a lone
       "0 attached" pill kept rendering with nothing attached. */

  /* r2/r3: gates are demoted to the overflow ⋯ menu + Publish row on
       mobile — they are NOT ambient in the doc flow. Remove the wrapping
       gates strip and the metadata legend box the mockup omits on mobile. */

  /* Doc header block per compose-mobile-final mockup (.doc-kicker /
       .doc-h1 / .doc-sub): clean title treatment, no oversized heading. */

  .cst-sheet .sheet-head .\!s {
    color: rgb(var(--c-muted)) !important;
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
    font-size: 11px !important;
  }

  .cst-sheet .seg .\!s {
    display: inline-flex !important;
    flex: 1 1 0 !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    min-width: 0 !important;
    border-radius: 10px !important;
    color: rgb(var(--c-muted)) !important;
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }

  .cst-sheet .seg .\!s span {
    color: rgb(var(--c-data)) !important;
  }

  .cst-sheet .seg .\!s.on {
    background: rgb(var(--c-surface)) !important;
    color: rgb(var(--c-accent-strong)) !important;
    box-shadow:
        0 1px 2px rgb(var(--c-ink) / 0.12),
        0 0 0 1px rgb(var(--c-accent) / 0.14) !important;
  }

  
    .cst-sheet .seg .\!s {
    min-height: 44px !important;
  }

  /* ONE AI SURFACE: the mobile refine-scope chip — a slide/section refine
       entry landed on the dock; the next instruction targets just that scope.
       Quiet mono metadata, accent only on the glyph, clearable. */

  /* Mockup dock footer is mode-btn + send only — the "Type / for skills"
       hint lives in the placeholder, not a second footer line. */

  /* FOUNDER BUG (empty top padding + faint vestigial label, 2026-07-07): the
       user bubble is accent-filled and right-aligned — it already reads as "you",
       so the redundant "YOU" meta label was pure dead space at the TOP of the
       bubble (margin-bottom above the text). Desktop already hides it
       (`.cst-chat .msg-user .msg-meta { display:none }`); the mobile thread
       surfaces un-hid it via the blanket `.msg-meta { display:flex }` above. Hide
       it here so the bubble hugs its text on mobile too. (The brief message keeps
       its meta — that surface is a labelled transcript, handled separately.) */

  /* LANGUAGE PASS (finding 9): the [hidden] attribute must actually hide
       the bar — display:flex was overriding the UA default, so a lone
       "0 attached" pill kept rendering with nothing attached. */

  /* r2/r3: gates are demoted to the overflow ⋯ menu + Publish row on
       mobile — they are NOT ambient in the doc flow. Remove the wrapping
       gates strip and the metadata legend box the mockup omits on mobile. */

  /* Doc header block per compose-mobile-final mockup (.doc-kicker /
       .doc-h1 / .doc-sub): clean title treatment, no oversized heading. */

  .cst-sheet .sheet-head .\!s {
    color: rgb(var(--c-muted)) !important;
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
    font-size: 11px !important;
  }

  .cst-sheet .seg .\!s {
    display: inline-flex !important;
    flex: 1 1 0 !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    min-width: 0 !important;
    border-radius: 10px !important;
    color: rgb(var(--c-muted)) !important;
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }

  .cst-sheet .seg .\!s span {
    color: rgb(var(--c-data)) !important;
  }

  .cst-sheet .seg .\!s.on {
    background: rgb(var(--c-surface)) !important;
    color: rgb(var(--c-accent-strong)) !important;
    box-shadow:
        0 1px 2px rgb(var(--c-ink) / 0.12),
        0 0 0 1px rgb(var(--c-accent) / 0.14) !important;
  }

  
    .cst-sheet .seg .\!s {
    min-height: 44px !important;
  }

  /* ONE AI SURFACE: the mobile refine-scope chip — a slide/section refine
       entry landed on the dock; the next instruction targets just that scope.
       Quiet mono metadata, accent only on the glyph, clearable. */

  /* Mockup dock footer is mode-btn + send only — the "Type / for skills"
       hint lives in the placeholder, not a second footer line. */

  /* FOUNDER BUG (empty top padding + faint vestigial label, 2026-07-07): the
       user bubble is accent-filled and right-aligned — it already reads as "you",
       so the redundant "YOU" meta label was pure dead space at the TOP of the
       bubble (margin-bottom above the text). Desktop already hides it
       (`.cst-chat .msg-user .msg-meta { display:none }`); the mobile thread
       surfaces un-hid it via the blanket `.msg-meta { display:flex }` above. Hide
       it here so the bubble hugs its text on mobile too. (The brief message keeps
       its meta — that surface is a labelled transcript, handled separately.) */

  /* LANGUAGE PASS (finding 9): the [hidden] attribute must actually hide
       the bar — display:flex was overriding the UA default, so a lone
       "0 attached" pill kept rendering with nothing attached. */

  /* r2/r3: gates are demoted to the overflow ⋯ menu + Publish row on
       mobile — they are NOT ambient in the doc flow. Remove the wrapping
       gates strip and the metadata legend box the mockup omits on mobile. */

  /* Doc header block per compose-mobile-final mockup (.doc-kicker /
       .doc-h1 / .doc-sub): clean title treatment, no oversized heading. */

  .cst-sheet .seg .s.\!on {
    background: rgb(var(--c-surface)) !important;
    color: rgb(var(--c-accent-strong)) !important;
    box-shadow:
        0 1px 2px rgb(var(--c-ink) / 0.12),
        0 0 0 1px rgb(var(--c-accent) / 0.14) !important;
  }

  .cst-fmt-bar .\!on {
    color: rgb(var(--c-sidebar-ink)) !important;
    background: rgb(var(--c-sidebar-accent) / 0.24) !important;
    box-shadow: inset 0 0 0 1px rgb(var(--c-sidebar-accent) / 0.36) !important;
  }

  /* ONE AI SURFACE: the mobile refine-scope chip — a slide/section refine
       entry landed on the dock; the next instruction targets just that scope.
       Quiet mono metadata, accent only on the glyph, clearable. */

  /* Mockup dock footer is mode-btn + send only — the "Type / for skills"
       hint lives in the placeholder, not a second footer line. */

  /* FOUNDER BUG (empty top padding + faint vestigial label, 2026-07-07): the
       user bubble is accent-filled and right-aligned — it already reads as "you",
       so the redundant "YOU" meta label was pure dead space at the TOP of the
       bubble (margin-bottom above the text). Desktop already hides it
       (`.cst-chat .msg-user .msg-meta { display:none }`); the mobile thread
       surfaces un-hid it via the blanket `.msg-meta { display:flex }` above. Hide
       it here so the bubble hugs its text on mobile too. (The brief message keeps
       its meta — that surface is a labelled transcript, handled separately.) */

  /* LANGUAGE PASS (finding 9): the [hidden] attribute must actually hide
       the bar — display:flex was overriding the UA default, so a lone
       "0 attached" pill kept rendering with nothing attached. */

  /* r2/r3: gates are demoted to the overflow ⋯ menu + Publish row on
       mobile — they are NOT ambient in the doc flow. Remove the wrapping
       gates strip and the metadata legend box the mockup omits on mobile. */

  /* Doc header block per compose-mobile-final mockup (.doc-kicker /
       .doc-h1 / .doc-sub): clean title treatment, no oversized heading. */

  .cst-sheet .rl-micro.\!shape {
    color: rgb(var(--c-data)) !important;
  }

  /* ONE AI SURFACE: the mobile refine-scope chip — a slide/section refine
       entry landed on the dock; the next instruction targets just that scope.
       Quiet mono metadata, accent only on the glyph, clearable. */

  /* Mockup dock footer is mode-btn + send only — the "Type / for skills"
       hint lives in the placeholder, not a second footer line. */

  /* FOUNDER BUG (empty top padding + faint vestigial label, 2026-07-07): the
       user bubble is accent-filled and right-aligned — it already reads as "you",
       so the redundant "YOU" meta label was pure dead space at the TOP of the
       bubble (margin-bottom above the text). Desktop already hides it
       (`.cst-chat .msg-user .msg-meta { display:none }`); the mobile thread
       surfaces un-hid it via the blanket `.msg-meta { display:flex }` above. Hide
       it here so the bubble hugs its text on mobile too. (The brief message keeps
       its meta — that surface is a labelled transcript, handled separately.) */

  /* LANGUAGE PASS (finding 9): the [hidden] attribute must actually hide
       the bar — display:flex was overriding the UA default, so a lone
       "0 attached" pill kept rendering with nothing attached. */

  /* r2/r3: gates are demoted to the overflow ⋯ menu + Publish row on
       mobile — they are NOT ambient in the doc flow. Remove the wrapping
       gates strip and the metadata legend box the mockup omits on mobile. */

  /* Doc header block per compose-mobile-final mockup (.doc-kicker /
       .doc-h1 / .doc-sub): clean title treatment, no oversized heading. */

  .cst-sheet .rl-micro .\!after {
    flex: 1 1 auto !important;
    height: 1px !important;
    background: rgb(var(--c-border)) !important;
    opacity: 0.7 !important;
  }

  /* ONE AI SURFACE: the mobile refine-scope chip — a slide/section refine
       entry landed on the dock; the next instruction targets just that scope.
       Quiet mono metadata, accent only on the glyph, clearable. */

  /* Mockup dock footer is mode-btn + send only — the "Type / for skills"
       hint lives in the placeholder, not a second footer line. */

  /* FOUNDER BUG (empty top padding + faint vestigial label, 2026-07-07): the
       user bubble is accent-filled and right-aligned — it already reads as "you",
       so the redundant "YOU" meta label was pure dead space at the TOP of the
       bubble (margin-bottom above the text). Desktop already hides it
       (`.cst-chat .msg-user .msg-meta { display:none }`); the mobile thread
       surfaces un-hid it via the blanket `.msg-meta { display:flex }` above. Hide
       it here so the bubble hugs its text on mobile too. (The brief message keeps
       its meta — that surface is a labelled transcript, handled separately.) */

  /* LANGUAGE PASS (finding 9): the [hidden] attribute must actually hide
       the bar — display:flex was overriding the UA default, so a lone
       "0 attached" pill kept rendering with nothing attached. */

  /* r2/r3: gates are demoted to the overflow ⋯ menu + Publish row on
       mobile — they are NOT ambient in the doc flow. Remove the wrapping
       gates strip and the metadata legend box the mockup omits on mobile. */

  /* Doc header block per compose-mobile-final mockup (.doc-kicker /
       .doc-h1 / .doc-sub): clean title treatment, no oversized heading. */

  .cst-sheet .rl-row.\!shaping {
    background: rgb(var(--c-data) / 0.06) !important;
    box-shadow: inset 2px 0 0 rgb(var(--c-data) / 0.42) !important;
  }

  /* ONE AI SURFACE: the mobile refine-scope chip — a slide/section refine
       entry landed on the dock; the next instruction targets just that scope.
       Quiet mono metadata, accent only on the glyph, clearable. */

  /* Mockup dock footer is mode-btn + send only — the "Type / for skills"
       hint lives in the placeholder, not a second footer line. */

  /* FOUNDER BUG (empty top padding + faint vestigial label, 2026-07-07): the
       user bubble is accent-filled and right-aligned — it already reads as "you",
       so the redundant "YOU" meta label was pure dead space at the TOP of the
       bubble (margin-bottom above the text). Desktop already hides it
       (`.cst-chat .msg-user .msg-meta { display:none }`); the mobile thread
       surfaces un-hid it via the blanket `.msg-meta { display:flex }` above. Hide
       it here so the bubble hugs its text on mobile too. (The brief message keeps
       its meta — that surface is a labelled transcript, handled separately.) */

  /* LANGUAGE PASS (finding 9): the [hidden] attribute must actually hide
       the bar — display:flex was overriding the UA default, so a lone
       "0 attached" pill kept rendering with nothing attached. */

  /* r2/r3: gates are demoted to the overflow ⋯ menu + Publish row on
       mobile — they are NOT ambient in the doc flow. Remove the wrapping
       gates strip and the metadata legend box the mockup omits on mobile. */

  /* Doc header block per compose-mobile-final mockup (.doc-kicker /
       .doc-h1 / .doc-sub): clean title treatment, no oversized heading. */

  .cst-sheet .rl-row.struck .\!title {
    color: rgb(var(--c-muted)) !important;
    text-decoration: line-through !important;
    text-decoration-thickness: 1px !important;
  }

  .cst-sheet .rl-row .\!title {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    color: rgb(var(--c-ink)) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .cst-sheet .rl-row .\!title .title-text {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* ONE AI SURFACE: the mobile refine-scope chip — a slide/section refine
       entry landed on the dock; the next instruction targets just that scope.
       Quiet mono metadata, accent only on the glyph, clearable. */

  /* Mockup dock footer is mode-btn + send only — the "Type / for skills"
       hint lives in the placeholder, not a second footer line. */

  /* FOUNDER BUG (empty top padding + faint vestigial label, 2026-07-07): the
       user bubble is accent-filled and right-aligned — it already reads as "you",
       so the redundant "YOU" meta label was pure dead space at the TOP of the
       bubble (margin-bottom above the text). Desktop already hides it
       (`.cst-chat .msg-user .msg-meta { display:none }`); the mobile thread
       surfaces un-hid it via the blanket `.msg-meta { display:flex }` above. Hide
       it here so the bubble hugs its text on mobile too. (The brief message keeps
       its meta — that surface is a labelled transcript, handled separately.) */

  /* LANGUAGE PASS (finding 9): the [hidden] attribute must actually hide
       the bar — display:flex was overriding the UA default, so a lone
       "0 attached" pill kept rendering with nothing attached. */

  /* r2/r3: gates are demoted to the overflow ⋯ menu + Publish row on
       mobile — they are NOT ambient in the doc flow. Remove the wrapping
       gates strip and the metadata legend box the mockup omits on mobile. */

  /* Doc header block per compose-mobile-final mockup (.doc-kicker /
       .doc-h1 / .doc-sub): clean title treatment, no oversized heading. */

  .cst-sheet .rl-row .\!body {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  /* ONE AI SURFACE: the mobile refine-scope chip — a slide/section refine
       entry landed on the dock; the next instruction targets just that scope.
       Quiet mono metadata, accent only on the glyph, clearable. */

  /* Mockup dock footer is mode-btn + send only — the "Type / for skills"
       hint lives in the placeholder, not a second footer line. */

  /* FOUNDER BUG (empty top padding + faint vestigial label, 2026-07-07): the
       user bubble is accent-filled and right-aligned — it already reads as "you",
       so the redundant "YOU" meta label was pure dead space at the TOP of the
       bubble (margin-bottom above the text). Desktop already hides it
       (`.cst-chat .msg-user .msg-meta { display:none }`); the mobile thread
       surfaces un-hid it via the blanket `.msg-meta { display:flex }` above. Hide
       it here so the bubble hugs its text on mobile too. (The brief message keeps
       its meta — that surface is a labelled transcript, handled separately.) */

  .cst-thread-sheet .cst-canon-gap .\!body {
    font-size: 12px !important;
  }

  /* LANGUAGE PASS (finding 9): the [hidden] attribute must actually hide
       the bar — display:flex was overriding the UA default, so a lone
       "0 attached" pill kept rendering with nothing attached. */

  /* r2/r3: gates are demoted to the overflow ⋯ menu + Publish row on
       mobile — they are NOT ambient in the doc flow. Remove the wrapping
       gates strip and the metadata legend box the mockup omits on mobile. */

  /* Doc header block per compose-mobile-final mockup (.doc-kicker /
       .doc-h1 / .doc-sub): clean title treatment, no oversized heading. */

  .cst-sheet .rl-row.struck .\!title {
    color: rgb(var(--c-muted)) !important;
    text-decoration: line-through !important;
    text-decoration-thickness: 1px !important;
  }

  .cst-sheet .rl-row .\!title {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    color: rgb(var(--c-ink)) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .cst-sheet .rl-row .\!title .title-text {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* ONE AI SURFACE: the mobile refine-scope chip — a slide/section refine
       entry landed on the dock; the next instruction targets just that scope.
       Quiet mono metadata, accent only on the glyph, clearable. */

  /* Mockup dock footer is mode-btn + send only — the "Type / for skills"
       hint lives in the placeholder, not a second footer line. */

  /* FOUNDER BUG (empty top padding + faint vestigial label, 2026-07-07): the
       user bubble is accent-filled and right-aligned — it already reads as "you",
       so the redundant "YOU" meta label was pure dead space at the TOP of the
       bubble (margin-bottom above the text). Desktop already hides it
       (`.cst-chat .msg-user .msg-meta { display:none }`); the mobile thread
       surfaces un-hid it via the blanket `.msg-meta { display:flex }` above. Hide
       it here so the bubble hugs its text on mobile too. (The brief message keeps
       its meta — that surface is a labelled transcript, handled separately.) */

  /* LANGUAGE PASS (finding 9): the [hidden] attribute must actually hide
       the bar — display:flex was overriding the UA default, so a lone
       "0 attached" pill kept rendering with nothing attached. */

  /* r2/r3: gates are demoted to the overflow ⋯ menu + Publish row on
       mobile — they are NOT ambient in the doc flow. Remove the wrapping
       gates strip and the metadata legend box the mockup omits on mobile. */

  /* Doc header block per compose-mobile-final mockup (.doc-kicker /
       .doc-h1 / .doc-sub): clean title treatment, no oversized heading. */

  .cst-sheet .rl-row.struck .\!title {
    color: rgb(var(--c-muted)) !important;
    text-decoration: line-through !important;
    text-decoration-thickness: 1px !important;
  }

  .cst-sheet .rl-row .\!title {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    color: rgb(var(--c-ink)) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .cst-sheet .rl-row .\!title .title-text {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* ONE AI SURFACE: the mobile refine-scope chip — a slide/section refine
       entry landed on the dock; the next instruction targets just that scope.
       Quiet mono metadata, accent only on the glyph, clearable. */

  /* Mockup dock footer is mode-btn + send only — the "Type / for skills"
       hint lives in the placeholder, not a second footer line. */

  /* FOUNDER BUG (empty top padding + faint vestigial label, 2026-07-07): the
       user bubble is accent-filled and right-aligned — it already reads as "you",
       so the redundant "YOU" meta label was pure dead space at the TOP of the
       bubble (margin-bottom above the text). Desktop already hides it
       (`.cst-chat .msg-user .msg-meta { display:none }`); the mobile thread
       surfaces un-hid it via the blanket `.msg-meta { display:flex }` above. Hide
       it here so the bubble hugs its text on mobile too. (The brief message keeps
       its meta — that surface is a labelled transcript, handled separately.) */

  /* LANGUAGE PASS (finding 9): the [hidden] attribute must actually hide
       the bar — display:flex was overriding the UA default, so a lone
       "0 attached" pill kept rendering with nothing attached. */

  /* r2/r3: gates are demoted to the overflow ⋯ menu + Publish row on
       mobile — they are NOT ambient in the doc flow. Remove the wrapping
       gates strip and the metadata legend box the mockup omits on mobile. */

  /* Doc header block per compose-mobile-final mockup (.doc-kicker /
       .doc-h1 / .doc-sub): clean title treatment, no oversized heading. */

  .cst-sheet .rl-row .\!sub {
    margin-top: 3px !important;
    color: rgb(var(--c-muted)) !important;
    font-size: 11.5px !important;
  }

  /* ONE AI SURFACE: the mobile refine-scope chip — a slide/section refine
       entry landed on the dock; the next instruction targets just that scope.
       Quiet mono metadata, accent only on the glyph, clearable. */

  /* Mockup dock footer is mode-btn + send only — the "Type / for skills"
       hint lives in the placeholder, not a second footer line. */

  /* FOUNDER BUG (empty top padding + faint vestigial label, 2026-07-07): the
       user bubble is accent-filled and right-aligned — it already reads as "you",
       so the redundant "YOU" meta label was pure dead space at the TOP of the
       bubble (margin-bottom above the text). Desktop already hides it
       (`.cst-chat .msg-user .msg-meta { display:none }`); the mobile thread
       surfaces un-hid it via the blanket `.msg-meta { display:flex }` above. Hide
       it here so the bubble hugs its text on mobile too. (The brief message keeps
       its meta — that surface is a labelled transcript, handled separately.) */

  /* LANGUAGE PASS (finding 9): the [hidden] attribute must actually hide
       the bar — display:flex was overriding the UA default, so a lone
       "0 attached" pill kept rendering with nothing attached. */

  /* r2/r3: gates are demoted to the overflow ⋯ menu + Publish row on
       mobile — they are NOT ambient in the doc flow. Remove the wrapping
       gates strip and the metadata legend box the mockup omits on mobile. */

  /* Doc header block per compose-mobile-final mockup (.doc-kicker /
       .doc-h1 / .doc-sub): clean title treatment, no oversized heading. */

  .cst-sheet .sheet-head .\!s {
    color: rgb(var(--c-muted)) !important;
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
    font-size: 11px !important;
  }

  .cst-sheet .seg .\!s {
    display: inline-flex !important;
    flex: 1 1 0 !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    min-width: 0 !important;
    border-radius: 10px !important;
    color: rgb(var(--c-muted)) !important;
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }

  .cst-sheet .seg .\!s span {
    color: rgb(var(--c-data)) !important;
  }

  .cst-sheet .seg .\!s.on {
    background: rgb(var(--c-surface)) !important;
    color: rgb(var(--c-accent-strong)) !important;
    box-shadow:
        0 1px 2px rgb(var(--c-ink) / 0.12),
        0 0 0 1px rgb(var(--c-accent) / 0.14) !important;
  }

  
    .cst-sheet .seg .\!s {
    min-height: 44px !important;
  }

  /* ONE AI SURFACE: the mobile refine-scope chip — a slide/section refine
       entry landed on the dock; the next instruction targets just that scope.
       Quiet mono metadata, accent only on the glyph, clearable. */

  /* Mockup dock footer is mode-btn + send only — the "Type / for skills"
       hint lives in the placeholder, not a second footer line. */

  /* FOUNDER BUG (empty top padding + faint vestigial label, 2026-07-07): the
       user bubble is accent-filled and right-aligned — it already reads as "you",
       so the redundant "YOU" meta label was pure dead space at the TOP of the
       bubble (margin-bottom above the text). Desktop already hides it
       (`.cst-chat .msg-user .msg-meta { display:none }`); the mobile thread
       surfaces un-hid it via the blanket `.msg-meta { display:flex }` above. Hide
       it here so the bubble hugs its text on mobile too. (The brief message keeps
       its meta — that surface is a labelled transcript, handled separately.) */

  /* LANGUAGE PASS (finding 9): the [hidden] attribute must actually hide
       the bar — display:flex was overriding the UA default, so a lone
       "0 attached" pill kept rendering with nothing attached. */

  /* r2/r3: gates are demoted to the overflow ⋯ menu + Publish row on
       mobile — they are NOT ambient in the doc flow. Remove the wrapping
       gates strip and the metadata legend box the mockup omits on mobile. */

  /* Doc header block per compose-mobile-final mockup (.doc-kicker /
       .doc-h1 / .doc-sub): clean title treatment, no oversized heading. */

  .cst-topbar .\!active {
    color: rgb(var(--c-accent-strong)) !important;
    background: rgb(var(--c-accent) / 0.08) !important;
  }

  .cst-sheet .rl-act.\!active {
    background: rgb(var(--c-accent)) !important;
    color: rgb(var(--c-surface)) !important;
    border-color: rgb(var(--c-accent)) !important;
  }

  .cst-sheet .rl-act.mute.\!active {
    border-color: rgb(var(--c-warn) / 0.42) !important;
    background: rgb(var(--c-warn) / 0.12) !important;
    color: rgb(var(--c-warn)) !important;
  }

  /* ONE AI SURFACE: the mobile refine-scope chip — a slide/section refine
       entry landed on the dock; the next instruction targets just that scope.
       Quiet mono metadata, accent only on the glyph, clearable. */

  /* Mockup dock footer is mode-btn + send only — the "Type / for skills"
       hint lives in the placeholder, not a second footer line. */

  /* FOUNDER BUG (empty top padding + faint vestigial label, 2026-07-07): the
       user bubble is accent-filled and right-aligned — it already reads as "you",
       so the redundant "YOU" meta label was pure dead space at the TOP of the
       bubble (margin-bottom above the text). Desktop already hides it
       (`.cst-chat .msg-user .msg-meta { display:none }`); the mobile thread
       surfaces un-hid it via the blanket `.msg-meta { display:flex }` above. Hide
       it here so the bubble hugs its text on mobile too. (The brief message keeps
       its meta — that surface is a labelled transcript, handled separately.) */

  /* LANGUAGE PASS (finding 9): the [hidden] attribute must actually hide
       the bar — display:flex was overriding the UA default, so a lone
       "0 attached" pill kept rendering with nothing attached. */

  /* r2/r3: gates are demoted to the overflow ⋯ menu + Publish row on
       mobile — they are NOT ambient in the doc flow. Remove the wrapping
       gates strip and the metadata legend box the mockup omits on mobile. */

  /* Doc header block per compose-mobile-final mockup (.doc-kicker /
       .doc-h1 / .doc-sub): clean title treatment, no oversized heading. */

  .cst-topbar .\!active {
    color: rgb(var(--c-accent-strong)) !important;
    background: rgb(var(--c-accent) / 0.08) !important;
  }

  .cst-sheet .rl-act.\!active {
    background: rgb(var(--c-accent)) !important;
    color: rgb(var(--c-surface)) !important;
    border-color: rgb(var(--c-accent)) !important;
  }

  .cst-sheet .rl-act.mute.\!active {
    border-color: rgb(var(--c-warn) / 0.42) !important;
    background: rgb(var(--c-warn) / 0.12) !important;
    color: rgb(var(--c-warn)) !important;
  }

  /* ONE AI SURFACE: the mobile refine-scope chip — a slide/section refine
       entry landed on the dock; the next instruction targets just that scope.
       Quiet mono metadata, accent only on the glyph, clearable. */

  /* Mockup dock footer is mode-btn + send only — the "Type / for skills"
       hint lives in the placeholder, not a second footer line. */

  /* FOUNDER BUG (empty top padding + faint vestigial label, 2026-07-07): the
       user bubble is accent-filled and right-aligned — it already reads as "you",
       so the redundant "YOU" meta label was pure dead space at the TOP of the
       bubble (margin-bottom above the text). Desktop already hides it
       (`.cst-chat .msg-user .msg-meta { display:none }`); the mobile thread
       surfaces un-hid it via the blanket `.msg-meta { display:flex }` above. Hide
       it here so the bubble hugs its text on mobile too. (The brief message keeps
       its meta — that surface is a labelled transcript, handled separately.) */

  /* LANGUAGE PASS (finding 9): the [hidden] attribute must actually hide
       the bar — display:flex was overriding the UA default, so a lone
       "0 attached" pill kept rendering with nothing attached. */

  /* r2/r3: gates are demoted to the overflow ⋯ menu + Publish row on
       mobile — they are NOT ambient in the doc flow. Remove the wrapping
       gates strip and the metadata legend box the mockup omits on mobile. */

  /* Doc header block per compose-mobile-final mockup (.doc-kicker /
       .doc-h1 / .doc-sub): clean title treatment, no oversized heading. */

  .cst-sheet .gate-row.\!ok .gate-ico {
    background: rgb(var(--c-up) / 0.12) !important;
    color: rgb(var(--c-up)) !important;
  }

  .cst-sheet .gate-row.\!ok .gate-status {
    color: rgb(var(--c-up)) !important;
  }

  /* ONE AI SURFACE: the mobile refine-scope chip — a slide/section refine
       entry landed on the dock; the next instruction targets just that scope.
       Quiet mono metadata, accent only on the glyph, clearable. */

  /* Mockup dock footer is mode-btn + send only — the "Type / for skills"
       hint lives in the placeholder, not a second footer line. */

  /* FOUNDER BUG (empty top padding + faint vestigial label, 2026-07-07): the
       user bubble is accent-filled and right-aligned — it already reads as "you",
       so the redundant "YOU" meta label was pure dead space at the TOP of the
       bubble (margin-bottom above the text). Desktop already hides it
       (`.cst-chat .msg-user .msg-meta { display:none }`); the mobile thread
       surfaces un-hid it via the blanket `.msg-meta { display:flex }` above. Hide
       it here so the bubble hugs its text on mobile too. (The brief message keeps
       its meta — that surface is a labelled transcript, handled separately.) */

  /* LANGUAGE PASS (finding 9): the [hidden] attribute must actually hide
       the bar — display:flex was overriding the UA default, so a lone
       "0 attached" pill kept rendering with nothing attached. */

  /* r2/r3: gates are demoted to the overflow ⋯ menu + Publish row on
       mobile — they are NOT ambient in the doc flow. Remove the wrapping
       gates strip and the metadata legend box the mockup omits on mobile. */

  /* Doc header block per compose-mobile-final mockup (.doc-kicker /
       .doc-h1 / .doc-sub): clean title treatment, no oversized heading. */

  .cst-sheet .gate-row.\!ok .gate-ico {
    background: rgb(var(--c-up) / 0.12) !important;
    color: rgb(var(--c-up)) !important;
  }

  .cst-sheet .gate-row.\!ok .gate-status {
    color: rgb(var(--c-up)) !important;
  }

  /* ONE AI SURFACE: the mobile refine-scope chip — a slide/section refine
       entry landed on the dock; the next instruction targets just that scope.
       Quiet mono metadata, accent only on the glyph, clearable. */

  /* Mockup dock footer is mode-btn + send only — the "Type / for skills"
       hint lives in the placeholder, not a second footer line. */

  /* FOUNDER BUG (empty top padding + faint vestigial label, 2026-07-07): the
       user bubble is accent-filled and right-aligned — it already reads as "you",
       so the redundant "YOU" meta label was pure dead space at the TOP of the
       bubble (margin-bottom above the text). Desktop already hides it
       (`.cst-chat .msg-user .msg-meta { display:none }`); the mobile thread
       surfaces un-hid it via the blanket `.msg-meta { display:flex }` above. Hide
       it here so the bubble hugs its text on mobile too. (The brief message keeps
       its meta — that surface is a labelled transcript, handled separately.) */

  /* LANGUAGE PASS (finding 9): the [hidden] attribute must actually hide
       the bar — display:flex was overriding the UA default, so a lone
       "0 attached" pill kept rendering with nothing attached. */

  /* r2/r3: gates are demoted to the overflow ⋯ menu + Publish row on
       mobile — they are NOT ambient in the doc flow. Remove the wrapping
       gates strip and the metadata legend box the mockup omits on mobile. */

  /* Doc header block per compose-mobile-final mockup (.doc-kicker /
       .doc-h1 / .doc-sub): clean title treatment, no oversized heading. */

  .cst-sheet .seg .s.\!on {
    background: rgb(var(--c-surface)) !important;
    color: rgb(var(--c-accent-strong)) !important;
    box-shadow:
        0 1px 2px rgb(var(--c-ink) / 0.12),
        0 0 0 1px rgb(var(--c-accent) / 0.14) !important;
  }

  .cst-fmt-bar .\!on {
    color: rgb(var(--c-sidebar-ink)) !important;
    background: rgb(var(--c-sidebar-accent) / 0.24) !important;
    box-shadow: inset 0 0 0 1px rgb(var(--c-sidebar-accent) / 0.36) !important;
  }

  /* ONE AI SURFACE: the mobile refine-scope chip — a slide/section refine
       entry landed on the dock; the next instruction targets just that scope.
       Quiet mono metadata, accent only on the glyph, clearable. */

  /* Mockup dock footer is mode-btn + send only — the "Type / for skills"
       hint lives in the placeholder, not a second footer line. */

  /* FOUNDER BUG (empty top padding + faint vestigial label, 2026-07-07): the
       user bubble is accent-filled and right-aligned — it already reads as "you",
       so the redundant "YOU" meta label was pure dead space at the TOP of the
       bubble (margin-bottom above the text). Desktop already hides it
       (`.cst-chat .msg-user .msg-meta { display:none }`); the mobile thread
       surfaces un-hid it via the blanket `.msg-meta { display:flex }` above. Hide
       it here so the bubble hugs its text on mobile too. (The brief message keeps
       its meta — that surface is a labelled transcript, handled separately.) */

  /* LANGUAGE PASS (finding 9): the [hidden] attribute must actually hide
       the bar — display:flex was overriding the UA default, so a lone
       "0 attached" pill kept rendering with nothing attached. */

  /* r2/r3: gates are demoted to the overflow ⋯ menu + Publish row on
       mobile — they are NOT ambient in the doc flow. Remove the wrapping
       gates strip and the metadata legend box the mockup omits on mobile. */

  /* Doc header block per compose-mobile-final mockup (.doc-kicker /
       .doc-h1 / .doc-sub): clean title treatment, no oversized heading. */

  /* ONE AI SURFACE: the mobile refine-scope chip — a slide/section refine
       entry landed on the dock; the next instruction targets just that scope.
       Quiet mono metadata, accent only on the glyph, clearable. */

  .cst-mobile-scope .\!q {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: rgb(var(--c-text)) !important;
  }

  /* Mockup dock footer is mode-btn + send only — the "Type / for skills"
       hint lives in the placeholder, not a second footer line. */

  /* FOUNDER BUG (empty top padding + faint vestigial label, 2026-07-07): the
       user bubble is accent-filled and right-aligned — it already reads as "you",
       so the redundant "YOU" meta label was pure dead space at the TOP of the
       bubble (margin-bottom above the text). Desktop already hides it
       (`.cst-chat .msg-user .msg-meta { display:none }`); the mobile thread
       surfaces un-hid it via the blanket `.msg-meta { display:flex }` above. Hide
       it here so the bubble hugs its text on mobile too. (The brief message keeps
       its meta — that surface is a labelled transcript, handled separately.) */

  /* LANGUAGE PASS (finding 9): the [hidden] attribute must actually hide
       the bar — display:flex was overriding the UA default, so a lone
       "0 attached" pill kept rendering with nothing attached. */

  /* r2/r3: gates are demoted to the overflow ⋯ menu + Publish row on
       mobile — they are NOT ambient in the doc flow. Remove the wrapping
       gates strip and the metadata legend box the mockup omits on mobile. */

  /* Doc header block per compose-mobile-final mockup (.doc-kicker /
       .doc-h1 / .doc-sub): clean title treatment, no oversized heading. */

  /* ONE AI SURFACE: the mobile refine-scope chip — a slide/section refine
       entry landed on the dock; the next instruction targets just that scope.
       Quiet mono metadata, accent only on the glyph, clearable. */

  /* Mockup dock footer is mode-btn + send only — the "Type / for skills"
       hint lives in the placeholder, not a second footer line. */

  .cst-thread-sheet .ts-head .\!n {
    color: rgb(var(--c-accent)) !important;
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
    font-size: 11px !important;
  }

  /* FOUNDER BUG (empty top padding + faint vestigial label, 2026-07-07): the
       user bubble is accent-filled and right-aligned — it already reads as "you",
       so the redundant "YOU" meta label was pure dead space at the TOP of the
       bubble (margin-bottom above the text). Desktop already hides it
       (`.cst-chat .msg-user .msg-meta { display:none }`); the mobile thread
       surfaces un-hid it via the blanket `.msg-meta { display:flex }` above. Hide
       it here so the bubble hugs its text on mobile too. (The brief message keeps
       its meta — that surface is a labelled transcript, handled separately.) */

  /* LANGUAGE PASS (finding 9): the [hidden] attribute must actually hide
       the bar — display:flex was overriding the UA default, so a lone
       "0 attached" pill kept rendering with nothing attached. */

  /* r2/r3: gates are demoted to the overflow ⋯ menu + Publish row on
       mobile — they are NOT ambient in the doc flow. Remove the wrapping
       gates strip and the metadata legend box the mockup omits on mobile. */

  /* Doc header block per compose-mobile-final mockup (.doc-kicker /
       .doc-h1 / .doc-sub): clean title treatment, no oversized heading. */

  .cst-sheet .sheet-head .\!t {
    color: rgb(var(--c-ink)) !important;
    font-family: 'Fraunces', Georgia, serif !important;
    font-size: 17px !important;
    font-weight: 600 !important;
  }

  /* ONE AI SURFACE: the mobile refine-scope chip — a slide/section refine
       entry landed on the dock; the next instruction targets just that scope.
       Quiet mono metadata, accent only on the glyph, clearable. */

  /* Mockup dock footer is mode-btn + send only — the "Type / for skills"
       hint lives in the placeholder, not a second footer line. */

  .cst-thread-sheet .ts-head .\!t {
    color: rgb(var(--c-ink)) !important;
    font-family: 'Fraunces', Georgia, serif !important;
    font-size: 17px !important;
    font-weight: 600 !important;
  }

  /* FOUNDER BUG (empty top padding + faint vestigial label, 2026-07-07): the
       user bubble is accent-filled and right-aligned — it already reads as "you",
       so the redundant "YOU" meta label was pure dead space at the TOP of the
       bubble (margin-bottom above the text). Desktop already hides it
       (`.cst-chat .msg-user .msg-meta { display:none }`); the mobile thread
       surfaces un-hid it via the blanket `.msg-meta { display:flex }` above. Hide
       it here so the bubble hugs its text on mobile too. (The brief message keeps
       its meta — that surface is a labelled transcript, handled separately.) */

  /* LANGUAGE PASS (finding 9): the [hidden] attribute must actually hide
       the bar — display:flex was overriding the UA default, so a lone
       "0 attached" pill kept rendering with nothing attached. */

  /* r2/r3: gates are demoted to the overflow ⋯ menu + Publish row on
       mobile — they are NOT ambient in the doc flow. Remove the wrapping
       gates strip and the metadata legend box the mockup omits on mobile. */

  /* Doc header block per compose-mobile-final mockup (.doc-kicker /
       .doc-h1 / .doc-sub): clean title treatment, no oversized heading. */

  .cst-sheet .rl-row .\!body {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  /* ONE AI SURFACE: the mobile refine-scope chip — a slide/section refine
       entry landed on the dock; the next instruction targets just that scope.
       Quiet mono metadata, accent only on the glyph, clearable. */

  /* Mockup dock footer is mode-btn + send only — the "Type / for skills"
       hint lives in the placeholder, not a second footer line. */

  /* FOUNDER BUG (empty top padding + faint vestigial label, 2026-07-07): the
       user bubble is accent-filled and right-aligned — it already reads as "you",
       so the redundant "YOU" meta label was pure dead space at the TOP of the
       bubble (margin-bottom above the text). Desktop already hides it
       (`.cst-chat .msg-user .msg-meta { display:none }`); the mobile thread
       surfaces un-hid it via the blanket `.msg-meta { display:flex }` above. Hide
       it here so the bubble hugs its text on mobile too. (The brief message keeps
       its meta — that surface is a labelled transcript, handled separately.) */

  .cst-thread-sheet .cst-canon-gap .\!body {
    font-size: 12px !important;
  }

  /* LANGUAGE PASS (finding 9): the [hidden] attribute must actually hide
       the bar — display:flex was overriding the UA default, so a lone
       "0 attached" pill kept rendering with nothing attached. */

  /* r2/r3: gates are demoted to the overflow ⋯ menu + Publish row on
       mobile — they are NOT ambient in the doc flow. Remove the wrapping
       gates strip and the metadata legend box the mockup omits on mobile. */

  /* Doc header block per compose-mobile-final mockup (.doc-kicker /
       .doc-h1 / .doc-sub): clean title treatment, no oversized heading. */

  /* ONE AI SURFACE: the mobile refine-scope chip — a slide/section refine
       entry landed on the dock; the next instruction targets just that scope.
       Quiet mono metadata, accent only on the glyph, clearable. */

  /* Mockup dock footer is mode-btn + send only — the "Type / for skills"
       hint lives in the placeholder, not a second footer line. */

  /* FOUNDER BUG (empty top padding + faint vestigial label, 2026-07-07): the
       user bubble is accent-filled and right-aligned — it already reads as "you",
       so the redundant "YOU" meta label was pure dead space at the TOP of the
       bubble (margin-bottom above the text). Desktop already hides it
       (`.cst-chat .msg-user .msg-meta { display:none }`); the mobile thread
       surfaces un-hid it via the blanket `.msg-meta { display:flex }` above. Hide
       it here so the bubble hugs its text on mobile too. (The brief message keeps
       its meta — that surface is a labelled transcript, handled separately.) */

  .cst-thread-sheet .cst-canon-gap .\!fix button {
    color: rgb(var(--c-accent)) !important;
  }

  /* LANGUAGE PASS (finding 9): the [hidden] attribute must actually hide
       the bar — display:flex was overriding the UA default, so a lone
       "0 attached" pill kept rendering with nothing attached. */

  /* r2/r3: gates are demoted to the overflow ⋯ menu + Publish row on
       mobile — they are NOT ambient in the doc flow. Remove the wrapping
       gates strip and the metadata legend box the mockup omits on mobile. */

  /* Doc header block per compose-mobile-final mockup (.doc-kicker /
       .doc-h1 / .doc-sub): clean title treatment, no oversized heading. */

  /* ONE AI SURFACE: the mobile refine-scope chip — a slide/section refine
       entry landed on the dock; the next instruction targets just that scope.
       Quiet mono metadata, accent only on the glyph, clearable. */

  /* Mockup dock footer is mode-btn + send only — the "Type / for skills"
       hint lives in the placeholder, not a second footer line. */

  /* FOUNDER BUG (empty top padding + faint vestigial label, 2026-07-07): the
       user bubble is accent-filled and right-aligned — it already reads as "you",
       so the redundant "YOU" meta label was pure dead space at the TOP of the
       bubble (margin-bottom above the text). Desktop already hides it
       (`.cst-chat .msg-user .msg-meta { display:none }`); the mobile thread
       surfaces un-hid it via the blanket `.msg-meta { display:flex }` above. Hide
       it here so the bubble hugs its text on mobile too. (The brief message keeps
       its meta — that surface is a labelled transcript, handled separately.) */

  /* LANGUAGE PASS (finding 9): the [hidden] attribute must actually hide
       the bar — display:flex was overriding the UA default, so a lone
       "0 attached" pill kept rendering with nothing attached. */

  .cst-attach-bar.\!expanded .ab-pill {
    border-color: rgb(var(--c-accent) / 0.28) !important;
    color: rgb(var(--c-accent-strong)) !important;
    background: rgb(var(--c-accent) / 0.08) !important;
  }

  .cst-attach-bar.\!expanded .ab-chips {
    display: flex !important;
  }

  /* r2/r3: gates are demoted to the overflow ⋯ menu + Publish row on
       mobile — they are NOT ambient in the doc flow. Remove the wrapping
       gates strip and the metadata legend box the mockup omits on mobile. */

  /* Doc header block per compose-mobile-final mockup (.doc-kicker /
       .doc-h1 / .doc-sub): clean title treatment, no oversized heading. */

  /* ONE AI SURFACE: the mobile refine-scope chip — a slide/section refine
       entry landed on the dock; the next instruction targets just that scope.
       Quiet mono metadata, accent only on the glyph, clearable. */

  /* Mockup dock footer is mode-btn + send only — the "Type / for skills"
       hint lives in the placeholder, not a second footer line. */

  /* FOUNDER BUG (empty top padding + faint vestigial label, 2026-07-07): the
       user bubble is accent-filled and right-aligned — it already reads as "you",
       so the redundant "YOU" meta label was pure dead space at the TOP of the
       bubble (margin-bottom above the text). Desktop already hides it
       (`.cst-chat .msg-user .msg-meta { display:none }`); the mobile thread
       surfaces un-hid it via the blanket `.msg-meta { display:flex }` above. Hide
       it here so the bubble hugs its text on mobile too. (The brief message keeps
       its meta — that surface is a labelled transcript, handled separately.) */

  /* LANGUAGE PASS (finding 9): the [hidden] attribute must actually hide
       the bar — display:flex was overriding the UA default, so a lone
       "0 attached" pill kept rendering with nothing attached. */

  .cst-attach-bar.\!expanded .ab-pill {
    border-color: rgb(var(--c-accent) / 0.28) !important;
    color: rgb(var(--c-accent-strong)) !important;
    background: rgb(var(--c-accent) / 0.08) !important;
  }

  .cst-attach-bar.\!expanded .ab-chips {
    display: flex !important;
  }

  /* r2/r3: gates are demoted to the overflow ⋯ menu + Publish row on
       mobile — they are NOT ambient in the doc flow. Remove the wrapping
       gates strip and the metadata legend box the mockup omits on mobile. */

  /* Doc header block per compose-mobile-final mockup (.doc-kicker /
       .doc-h1 / .doc-sub): clean title treatment, no oversized heading. */
}

@media (prefers-reduced-motion: reduce) {
  .cst-caretline,
    .cst-composer-ph .caretline,
    .cst-dock-ph .caretline,
    .cst-dock-ph .caret {
    animation: none;
  }
}

@keyframes cst-blink {
  0%, 50% {
    opacity: 1;
  }

  50.01%, 100% {
    opacity: 0;
  }
}

.compose-proof-card {
  container-type: inline-size;
}

@container (max-width: 460px) {
  .compose-proof-card .compose-btn-label {
    display: none;
  }
}

/* Generated proof-card content can contain long unbroken tokens (URLs,
     IDs). Wrap them so the card never overflows horizontally — matches the
     house style used by the BI fields (.bi-query-display et al). */

[data-testid="compose-proof-face"] {
  overflow-wrap: anywhere;
}

.bi-query-tokenizer {
  min-width: 0;
  flex: 1 1 0%;
  /* NO position:relative, NO min-height. The two children (#bi-query-display
       and #bi-query-input) are normal-flow and MUTUALLY EXCLUSIVE — exactly one
       is shown at a time via the `hidden` attribute. Height comes from whichever
       child is visible, so there is no second box to keep in sync. */
}

/* DISPLAY STATE: a single flowing, auto-height prose block in NORMAL FLOW.
     Holds the rendered recognizer tags inline. The footer is a flex sibling
     below it, so 2/3/4-line questions simply make this taller and push the
     footer down. There is NO fixed height and NO overflow clipping here, so a
     clip is structurally impossible. */

.bi-query-display {
  min-height: 1.5rem;
  height: auto;
  /* content-driven; never pinned */
  line-height: 1.5rem;
  font-size: 0.875rem;
  /* text-sm parity with the textarea (no jump on swap) */
  color: rgb(var(--c-text));
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: normal;
  cursor: text;
  /* NO position, NO inset, NO overflow:hidden, NO max-height. */
}

.bi-query-display:empty::before {
  content: attr(data-placeholder);
  color: rgb(var(--c-muted));
}

/* EDIT STATE: a plain VISIBLE textarea. Auto-grows to its OWN content up to a
     ~7-line max, then scrolls internally so the LAST LINE is never clipped and
     the caret is always reachable. It governs only its own height — there is no
     overlay to keep aligned, so line-height parity with the display block is
     purely cosmetic (prevents a visible height jump on focus/blur). */

.bi-query-textarea {
  min-height: 1.5rem;
  max-height: 168px;
  /* matches BI_QUERY_MAX_HEIGHT_PX */
  overflow-y: auto;
  line-height: 1.5rem;
  overflow-wrap: anywhere;
  word-break: normal;
  white-space: pre-wrap;
}

.bi-query-field-editing {
  border-color: rgb(var(--c-accent) / 0.62);
  box-shadow: 0 0 0 1px rgb(var(--c-accent) / 0.40), inset 0 0 0 1px rgb(var(--c-accent) / 0.18);
}

/* g13: "YOUR QUESTION" label sits above the field with the Edit affordance
     beside it (Edit lives with the label, not crowded next to Run). */

/* g13 question box: a column — text region on top, an action footer (Adjust /
     Run) BELOW the text, never overlapping it. The text region auto-grows; the
     footer stays pinned under it. */

.bi-query-field {
  display: flex;
  flex-direction: column;
}

.bi-query-recognized-tag {
  pointer-events: auto;
  display: inline;
  margin: 0 1.5px;
  border: 1px solid transparent;
  border-radius: 5px;
  /* Issue 5: symmetric vertical padding so the tag is not bottom-cramped. */
  padding: 2px 6px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  transition: box-shadow 100ms ease-out, background 100ms ease-out, border-color 100ms ease-out, filter 100ms ease-out;
  touch-action: manipulation;
}

.bi-query-recognized-tag .tick,
  .bi-query-recognized-tag .ask {
  margin-left: 4px;
  white-space: nowrap;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  /* Issue 5: vertically center the ✓/? within the tag (was baseline → low). */
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  vertical-align: middle;
}

.bi-query-recognized-tag .\!tick {
  margin-left: 4px !important;
  white-space: nowrap !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  /* Issue 5: vertically center the ✓/? within the tag (was baseline → low). */
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

.bi-query-recognized-tag .ask {
  opacity: 0.95;
}

.bi-query-recognized-tag.pending {
  border-style: dashed;
}

.bi-query-recognized-tag.\!pending {
  border-style: dashed !important;
}

.bi-query-recognized-tag:hover {
  filter: brightness(1.14);
}

.bi-query-recognized-tag.tag-ct {
  color: rgb(var(--c-accent-strong));
  background: rgb(var(--c-accent) / 0.10);
  border-color: rgb(var(--c-accent) / 0.36);
}

.bi-query-recognized-tag.tag-pd {
  color: rgb(var(--c-warn));
  background: rgb(var(--c-warn) / 0.12);
  border-color: rgb(var(--c-warn) / 0.42);
}

.bi-query-recognized-tag.tag-split {
  color: rgb(var(--c-ink));
  background: linear-gradient(
      100deg,
      rgb(var(--c-accent) / 0.10) 0%,
      rgb(var(--c-accent) / 0.10) 45%,
      rgb(var(--c-warn) / 0.12) 55%,
      rgb(var(--c-warn) / 0.12) 100%
    );
  border-color: rgb(var(--c-accent) / 0.36);
  border-right-color: rgb(var(--c-warn) / 0.42);
}

@media (hover: none) and (pointer: coarse) {
  .bi-query-recognized-tag:hover {
    filter: none;
  }
}

/* QB-006/QB-007 BI query builder: g13 clarify stepper + interactive
     option states fed by the same recognizer response as the inline tags. */

.bi-query-clarify-scaffold {
  margin-bottom: 0.75rem;
  border: 1px solid rgb(var(--c-border));
  border-radius: 8px;
  background: rgb(var(--c-bg-deep));
  padding: 0.875rem;
}

/* When the scaffold has no content (cleared on submit / between turns) it must
     contribute zero box — otherwise the bordered grey card lingers above the Run
     button as a phantom empty block (most visible mid-collapse on iOS). */

.bi-query-clarify-scaffold:empty {
  display: none;
}

/* Founder refinement 5 (remove the rules bracketing the assumption box): in
     stamp mode the outer scaffold card is stripped to nothing — no border, no
     recessed fill, no padding — so the ONLY separation is the stamp's own Variant
     A hairline box. This kills the double-border that read as a rule above and
     below the assumption. A small bottom margin keeps it off the composer. Holds
     on both widths and both CT Ledger modes (no bespoke colours). */

.bi-query-clarify-scaffold--stamp {
  border: 0;
  background: transparent;
  padding: 0;
  margin-bottom: 0.625rem;
}

/* Dim the thread/hero above the composer while the clarify panel is open, so
     the "Ledger Room" invitation (or prior results) recedes and the term being
     confirmed holds focus. Toggled by refreshBiQueryRunButtonState; clears once
     the question is collapsed/ready or there are no terms to clarify. */

#bi-thread-scroll {
  transition: opacity 220ms ease;
}

#bi-thread-scroll.bi-thread-clarify-dim {
  opacity: 0.32;
  pointer-events: none;
}

.bi-query-clarify-collapsing {
  overflow: hidden;
  /* drop the card chrome while collapsing so a one-frame gap can't show grey */
  border-color: transparent;
  background: transparent;
  transition: opacity 180ms ease-in, max-height 220ms ease-in, margin 220ms ease-in, padding 220ms ease-in;
}

.bi-query-clarify-collapsed {
  display: none;
}

/* Insights-home question-library dock (bi-examples.js) — Variant C's search
     dock grafted onto the "Full Index" landing (insights-home-20260724).
     Anchored to the BI main <section> (position:relative), so it slides over
     the thread scrollport but under nothing else; it lives inside
     #bi-thread-scroll's DOM, so starting/resuming a conversation removes it
     with the rest of the landing. */

.bi-exlib-dock {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 440px;
  max-width: 90%;
  z-index: 30;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 200ms ease-out, visibility 0s linear 200ms;
}

.bi-exlib-dock.open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 200ms ease-out;
}

.bi-exlib-dock.\!open {
  transform: translateX(0) !important;
  visibility: visible !important;
  transition: transform 200ms ease-out !important;
}

@media (prefers-reduced-motion: reduce) {
  .bi-exlib-dock {
    transition: none;
  }
}

/* Manual minimize: fold the OPEN clarify panel to its header bar so the user
     can read/scroll the thread behind it (and switch chats) without answering.
     Re-expands on click. Distinct from -collapsed (post-answer teardown). */

.bi-query-clarify-minimize-handle {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.bi-query-clarify-chevron {
  display: inline-block;
  transition: transform 160ms ease;
  color: rgb(var(--c-muted));
  font-size: 11px;
}

.bi-query-clarify-minimized-hint {
  display: none;
}

.bi-query-clarify-minimized .bi-query-clarify-chevron {
  transform: rotate(-90deg);
}

.bi-query-clarify-minimized [data-bi-query-clarify-body],
  .bi-query-clarify-minimized #bi-query-step-kbd-hints,
  .bi-query-clarify-minimized .bi-query-clarify-open-hint {
  display: none;
}

.bi-query-clarify-minimized .bi-query-clarify-minimized-hint {
  display: inline;
}

.bi-query-clarify-minimized {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.bi-query-clarify-minimized .mb-2 {
  margin-bottom: 0;
}

/* Source-selector: full labelled dropdown on desktop; on mobile it collapses
     to a single icon (see media query) so it stops overpowering the question
     title. The icon overlays a still-tappable native select. */

.bi-conn-select-icon {
  display: none;
}

/* Desktop: a single connected bar that uses the full width — each step
     flexes to share the row so all six full labels fit without truncation.
     Mobile (≤640px) overrides this to a scroll-snap rail (see media query). */

.bi-query-stepper {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.bi-query-step {
  position: relative;
  display: flex;
  min-width: 0;
  flex: 1 1 0%;
  align-items: center;
  gap: 0.4375rem;
  border: 1px solid rgb(var(--c-border));
  border-right-width: 0;
  background: rgb(var(--c-surface));
  padding: 0.4375rem 0.8125rem 0.4375rem 0.6875rem;
  text-align: left;
  transition: background 120ms ease-out, box-shadow 120ms ease-out;
  touch-action: manipulation;
}

.bi-query-step:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.bi-query-step:last-child {
  border-right-width: 1px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.bi-query-step:hover,
  .bi-query-step.active {
  background: rgb(var(--c-surface-muted));
}


  .bi-query-step.\!active {
  background: rgb(var(--c-surface-muted)) !important;
}

.bi-query-step:focus-visible {
  z-index: 3;
  outline: none;
  box-shadow: 0 0 0 2px rgb(var(--c-bg)), 0 0 0 4px rgb(var(--c-accent) / 0.45);
}

.bi-query-step.active.ct {
  box-shadow: inset 0 -2px 0 rgb(var(--c-accent));
}

.bi-query-step.\!active.ct {
  box-shadow: inset 0 -2px 0 rgb(var(--c-accent)) !important;
}

.bi-query-step.active.\!ct {
  box-shadow: inset 0 -2px 0 rgb(var(--c-accent)) !important;
}

.bi-query-step.active.pd {
  box-shadow: inset 0 -2px 0 rgb(var(--c-warn));
}

.bi-query-step.\!active.pd {
  box-shadow: inset 0 -2px 0 rgb(var(--c-warn)) !important;
}

.bi-query-step.active.split {
  box-shadow: inset 0 -2px 0 rgb(var(--c-accent)), inset 0 -4px 0 rgb(var(--c-warn));
}

.bi-query-step.\!active.split {
  box-shadow: inset 0 -2px 0 rgb(var(--c-accent)), inset 0 -4px 0 rgb(var(--c-warn)) !important;
}

.bi-query-step.active.\!split {
  box-shadow: inset 0 -2px 0 rgb(var(--c-accent)), inset 0 -4px 0 rgb(var(--c-warn)) !important;
}

.bi-query-step-pip {
  display: grid;
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgb(var(--c-border));
  border-radius: 9999px;
  background: rgb(var(--c-bg-deep));
  color: rgb(var(--c-muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
}

.bi-query-step-pip.ct.cur {
  border-color: rgb(var(--c-accent));
  color: rgb(var(--c-accent-strong));
}

.bi-query-step-pip.\!ct.cur {
  border-color: rgb(var(--c-accent)) !important;
  color: rgb(var(--c-accent-strong)) !important;
}

.bi-query-step-pip.pd.cur {
  border-color: rgb(var(--c-warn));
  color: rgb(var(--c-warn));
}

.bi-query-step-pip.split.cur {
  border-color: rgb(var(--c-accent-strong));
  color: rgb(var(--c-ink));
}

.bi-query-step-pip.\!split.cur {
  border-color: rgb(var(--c-accent-strong)) !important;
  color: rgb(var(--c-ink)) !important;
}

/* Desktop: show the FULL label (no ellipsis). It may wrap to a second line
     inside its flexed step cell — preferable to a "Reven…" stub. Mobile keeps
     a single nowrap line on the scroll rail (media query below). */

.bi-query-step-label {
  min-width: 0;
  color: rgb(var(--c-muted));
  font-size: 0.75rem;
  line-height: 1.15;
}

.bi-query-step.active.ct .bi-query-step-label {
  color: rgb(var(--c-accent-strong));
}

.bi-query-step.\!active.ct .bi-query-step-label {
  color: rgb(var(--c-accent-strong)) !important;
}

.bi-query-step.active.\!ct .bi-query-step-label {
  color: rgb(var(--c-accent-strong)) !important;
}

.bi-query-step.active.pd .bi-query-step-label {
  color: rgb(var(--c-warn));
}

.bi-query-step.\!active.pd .bi-query-step-label {
  color: rgb(var(--c-warn)) !important;
}

.bi-query-step.active.split .bi-query-step-label {
  color: rgb(var(--c-ink));
}

.bi-query-step.\!active.split .bi-query-step-label {
  color: rgb(var(--c-ink)) !important;
}

.bi-query-step.active.\!split .bi-query-step-label {
  color: rgb(var(--c-ink)) !important;
}

.bi-query-step.answered.ct .bi-query-step-pip {
  border-color: rgb(var(--c-accent));
  background: rgb(var(--c-accent));
  color: white;
}

.bi-query-step.\!answered.ct .bi-query-step-pip {
  border-color: rgb(var(--c-accent)) !important;
  background: rgb(var(--c-accent)) !important;
  color: white !important;
}

.bi-query-step.answered.\!ct .bi-query-step-pip {
  border-color: rgb(var(--c-accent)) !important;
  background: rgb(var(--c-accent)) !important;
  color: white !important;
}

.bi-query-step.answered.pd .bi-query-step-pip {
  border-color: rgb(var(--c-warn));
  background: rgb(var(--c-warn));
  color: white;
}

.bi-query-step.\!answered.pd .bi-query-step-pip {
  border-color: rgb(var(--c-warn)) !important;
  background: rgb(var(--c-warn)) !important;
  color: white !important;
}

.bi-query-step.answered.split .bi-query-step-pip {
  border-color: rgb(var(--c-accent));
  background: linear-gradient(135deg, rgb(var(--c-accent)) 0 50%, rgb(var(--c-warn)) 50% 100%);
  color: white;
}

.bi-query-step.\!answered.split .bi-query-step-pip {
  border-color: rgb(var(--c-accent)) !important;
  background: linear-gradient(135deg, rgb(var(--c-accent)) 0 50%, rgb(var(--c-warn)) 50% 100%) !important;
  color: white !important;
}

.bi-query-step.answered.\!split .bi-query-step-pip {
  border-color: rgb(var(--c-accent)) !important;
  background: linear-gradient(135deg, rgb(var(--c-accent)) 0 50%, rgb(var(--c-warn)) 50% 100%) !important;
  color: white !important;
}

/* Issue 1 — the panel is a flex COLUMN: a fixed header, a SCROLLABLE options
     region, and a fixed footer. When a step has many options (e.g. the 6-option
     dates set) the options scroll internally while the title/question and the
     Back/Next/Run footer stay reachable. Pattern: the WAI-ARIA "scrollable
     region" + a flex sticky-header/footer shell (the common "flex: header /
     min-height:0 scroll body / footer" layout used by dialogs and side panels).
     max-height is viewport-relative so it also collapses gracefully on short
     pages; min-height:0 lets the flex child actually shrink so overflow engages. */

.bi-query-step-panel {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Cap the panel so it never overflows the viewport, but keep a usable floor
       (the max(...)) so on a short page the options region still has room to
       scroll into rather than collapsing to nothing. */
  max-height: max(13rem, min(28rem, calc(100dvh - 16rem)));
  border: 1px solid rgb(var(--c-border));
  border-radius: 8px;
  background: rgb(var(--c-surface));
  padding: 0.875rem;
}

.bi-query-step-panel-header {
  flex: 0 0 auto;
}

.bi-query-step-options {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* keep the focus ring of the first/last option from clipping at the edges */
  margin-inline: -0.25rem;
  padding-inline: 0.25rem;
}

.bi-query-step-options::-webkit-scrollbar {
  width: 9px;
}

.bi-query-step-options::-webkit-scrollbar-thumb {
  border-radius: 9px;
  background: rgb(var(--c-border));
}

/* v1.1 ruling r2 (INTAKE-012b): NO accent top rule on the step panel — no
     inset 1px border-top, no PD amber variant. The step's side colour is carried
     by the badge + the stepper pip/underline alone, so .ct/.pd/.split add no
     panel chrome here. */

.bi-query-step-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.1875rem;
  border-radius: 4px;
  padding: 1px 5px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.5;
}

.bi-query-step-badge.badge-ct {
  border: 1px solid rgb(var(--c-accent) / 0.40);
  background: rgb(var(--c-accent) / 0.10);
  color: rgb(var(--c-accent-strong));
}

.bi-query-step-badge.badge-pd {
  border: 1px solid rgb(var(--c-warn) / 0.42);
  background: rgb(var(--c-warn) / 0.12);
  color: rgb(var(--c-warn));
}

.bi-query-step-badge.badge-split {
  border: 1px solid rgb(var(--c-accent) / 0.40);
  background: linear-gradient(100deg, rgb(var(--c-accent) / 0.10) 50%, rgb(var(--c-warn) / 0.12) 50%);
  color: rgb(var(--c-ink));
}

/* INTAKE-012b: the interpreter "Reading" pill — a deliberate provenance chip
     that belongs beside the Fraunces title, distinct from a CT/PD side badge but
     equal to it in polish. It must NOT borrow a source color (accent/warn) — the
     reading is neither a CT nor a PD source binding, and the accurate per-side
     signal lives on each option's own badge. So it reads in the NEUTRAL ink/data
     family: a filled raised `--c-surface` (not the recessed muted afterthought),
     a full-strength `--c-border` hairline, and `--c-data` (the numeral/mono text
     family, matching this badge's JetBrains Mono) at real contrast — giving it
     intentional identity weight without implying a side. Tokens: --c-surface,
     --c-border, --c-data (DESIGN.md CT Ledger, both modes). */

.bi-query-step-badge.badge-reading {
  border: 1px solid rgb(var(--c-border));
  background: rgb(var(--c-surface));
  color: rgb(var(--c-data));
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

/* INTAKE-012b: the interpreter question reads in Instrument Sans (the UI/body
     font), NOT the Fraunces title idiom the recognizer panels use — it is a
     question to answer, not a finding headline. */

.bi-query-interpreter-question {
  font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  color: rgb(var(--c-ink));
}

/* INTAKE-012b: interpreter options carry the accent side, and hold a plain-verb
     label above a muted explainer line (the assumption text). */

.bi-query-step-option.interpreter {
  border-color: rgb(var(--c-accent) / 0.28);
}

.bi-query-interpreter-explainer {
  margin-top: 0.1875rem;
  color: rgb(var(--c-muted));
  font-size: 12.5px;
  line-height: 1.4;
}

.bi-query-step-option {
  position: relative;
  display: block;
  width: 100%;
  margin-top: 0.4375rem;
  border: 1px solid rgb(var(--c-border));
  border-radius: 8px;
  background: transparent;
  padding: 0.5625rem 2.25rem 0.5625rem 0.6875rem;
  text-align: left;
  transition: background 120ms ease-out, border-color 120ms ease-out, box-shadow 120ms ease-out;
  touch-action: manipulation;
}

/* g13 option body: badge → prominent label → muted "e.g." samples → muted
     "source · column" footnote. */

.bi-query-option-eg {
  margin-top: 0.125rem;
  color: rgb(var(--c-muted));
  font-size: 12px;
  line-height: 1.35;
}

.bi-query-option-eg,
  .bi-query-option-source .font-mono {
  font-variant-numeric: tabular-nums;
}

.bi-query-option-source {
  margin-top: 0.375rem;
  color: rgb(var(--c-muted));
  opacity: 0.85;
  font-size: 10.5px;
  line-height: 1.4;
}

.bi-query-step-option.ct {
  border-color: rgb(var(--c-accent) / 0.28);
}

.bi-query-step-option.\!ct {
  border-color: rgb(var(--c-accent) / 0.28) !important;
}

.bi-query-step-option.pd {
  border-color: rgb(var(--c-warn) / 0.34);
}

.bi-query-step-option.split {
  border-color: rgb(var(--c-accent) / 0.34);
  border-right-color: rgb(var(--c-warn) / 0.42);
}

.bi-query-step-option.\!split {
  border-color: rgb(var(--c-accent) / 0.34) !important;
  border-right-color: rgb(var(--c-warn) / 0.42) !important;
}

.bi-query-step-option:hover {
  background: rgb(var(--c-surface-muted));
}

.bi-query-step-option:focus-visible,
  .bi-query-step-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgb(var(--c-bg)), 0 0 0 4px rgb(var(--c-accent) / 0.42);
}

.bi-query-step-chip.pd:focus-visible {
  box-shadow: 0 0 0 2px rgb(var(--c-bg)), 0 0 0 4px rgb(var(--c-warn) / 0.48);
}

.bi-query-step-option.selected {
  background: rgb(var(--c-accent) / 0.12);
  border-color: rgb(var(--c-accent) / 0.68);
}

.bi-query-step-option.\!selected {
  background: rgb(var(--c-accent) / 0.12) !important;
  border-color: rgb(var(--c-accent) / 0.68) !important;
}

.bi-query-step-option.pd.selected {
  background: rgb(var(--c-warn) / 0.14);
  border-color: rgb(var(--c-warn) / 0.70);
}

.bi-query-step-option.pd.\!selected {
  background: rgb(var(--c-warn) / 0.14) !important;
  border-color: rgb(var(--c-warn) / 0.70) !important;
}

.bi-query-step-option.split.selected {
  background: linear-gradient(100deg, rgb(var(--c-accent) / 0.13) 0 50%, rgb(var(--c-warn) / 0.15) 50% 100%);
  border-color: rgb(var(--c-accent) / 0.66);
  border-right-color: rgb(var(--c-warn) / 0.70);
}

.bi-query-step-option.\!split.selected {
  background: linear-gradient(100deg, rgb(var(--c-accent) / 0.13) 0 50%, rgb(var(--c-warn) / 0.15) 50% 100%) !important;
  border-color: rgb(var(--c-accent) / 0.66) !important;
  border-right-color: rgb(var(--c-warn) / 0.70) !important;
}

.bi-query-step-option.split.\!selected {
  background: linear-gradient(100deg, rgb(var(--c-accent) / 0.13) 0 50%, rgb(var(--c-warn) / 0.15) 50% 100%) !important;
  border-color: rgb(var(--c-accent) / 0.66) !important;
  border-right-color: rgb(var(--c-warn) / 0.70) !important;
}

.bi-query-step-option.selected:focus-visible {
  box-shadow:
      inset 0 0 0 1px rgb(var(--c-accent) / 0.28),
      0 0 0 2px rgb(var(--c-bg)),
      0 0 0 4px rgb(var(--c-accent) / 0.50);
}

.bi-query-step-option.\!selected:focus-visible {
  box-shadow:
      inset 0 0 0 1px rgb(var(--c-accent) / 0.28),
      0 0 0 2px rgb(var(--c-bg)),
      0 0 0 4px rgb(var(--c-accent) / 0.50) !important;
}

.bi-query-step-option.pd.selected:focus-visible {
  box-shadow:
      inset 0 0 0 1px rgb(var(--c-warn) / 0.30),
      0 0 0 2px rgb(var(--c-bg)),
      0 0 0 4px rgb(var(--c-warn) / 0.48);
}

.bi-query-step-option.pd.\!selected:focus-visible {
  box-shadow:
      inset 0 0 0 1px rgb(var(--c-warn) / 0.30),
      0 0 0 2px rgb(var(--c-bg)),
      0 0 0 4px rgb(var(--c-warn) / 0.48) !important;
}

.bi-query-step-option.pd .bi-query-step-check {
  background: rgb(var(--c-warn));
}

.bi-query-step-option.split .bi-query-step-check {
  background: linear-gradient(135deg, rgb(var(--c-accent)) 0 50%, rgb(var(--c-warn)) 50% 100%);
}

.bi-query-step-option.\!split .bi-query-step-check {
  background: linear-gradient(135deg, rgb(var(--c-accent)) 0 50%, rgb(var(--c-warn)) 50% 100%) !important;
}

.bi-query-step-option.selected .bi-query-step-check {
  opacity: 1;
  transform: none;
}

.bi-query-step-option.\!selected .bi-query-step-check {
  opacity: 1 !important;
  transform: none !important;
}

/* Issue 2 — SET steps render as g13's COMPACT horizontal multi-select chips
     (checkbox + colored side dot + label, wrapping). Single-line, low-height —
     6 of them fit without becoming tall cards. */

.bi-query-step-chip.\!ct.selected {
  color: rgb(var(--c-accent-strong)) !important;
  border-color: rgb(var(--c-accent) / 0.40) !important;
  background: rgb(var(--c-accent) / 0.10) !important;
}

.bi-query-step-chip.ct.selected {
  color: rgb(var(--c-accent-strong));
  border-color: rgb(var(--c-accent) / 0.40);
  background: rgb(var(--c-accent) / 0.10);
}

.bi-query-step-chip.ct.\!selected {
  color: rgb(var(--c-accent-strong)) !important;
  border-color: rgb(var(--c-accent) / 0.40) !important;
  background: rgb(var(--c-accent) / 0.10) !important;
}

.bi-query-step-chip.pd.selected {
  color: rgb(var(--c-warn));
  border-color: rgb(var(--c-warn) / 0.42);
  background: rgb(var(--c-warn) / 0.12);
}

.bi-query-step-chip.pd.\!selected {
  color: rgb(var(--c-warn)) !important;
  border-color: rgb(var(--c-warn) / 0.42) !important;
  background: rgb(var(--c-warn) / 0.12) !important;
}

.bi-query-step-chip.\!split.selected {
  color: rgb(var(--c-ink)) !important;
  border-color: rgb(var(--c-accent) / 0.40) !important;
  background: linear-gradient(100deg, rgb(var(--c-accent) / 0.10) 50%, rgb(var(--c-warn) / 0.12) 50%) !important;
}

.bi-query-step-chip.split.selected {
  color: rgb(var(--c-ink));
  border-color: rgb(var(--c-accent) / 0.40);
  background: linear-gradient(100deg, rgb(var(--c-accent) / 0.10) 50%, rgb(var(--c-warn) / 0.12) 50%);
}

.bi-query-step-chip.split.\!selected {
  color: rgb(var(--c-ink)) !important;
  border-color: rgb(var(--c-accent) / 0.40) !important;
  background: linear-gradient(100deg, rgb(var(--c-accent) / 0.10) 50%, rgb(var(--c-warn) / 0.12) 50%) !important;
}

.bi-query-step-chip.\!ct.selected .bi-query-mchip-box {
  background: rgb(var(--c-accent)) !important;
  border-color: rgb(var(--c-accent)) !important;
}

.bi-query-step-chip.ct.selected .bi-query-mchip-box {
  background: rgb(var(--c-accent));
  border-color: rgb(var(--c-accent));
}

.bi-query-step-chip.ct.\!selected .bi-query-mchip-box {
  background: rgb(var(--c-accent)) !important;
  border-color: rgb(var(--c-accent)) !important;
}

.bi-query-step-chip.pd.selected .bi-query-mchip-box {
  background: rgb(var(--c-warn));
  border-color: rgb(var(--c-warn));
}

.bi-query-step-chip.pd.\!selected .bi-query-mchip-box {
  background: rgb(var(--c-warn)) !important;
  border-color: rgb(var(--c-warn)) !important;
}

.bi-query-step-chip.\!split.selected .bi-query-mchip-box {
  background: linear-gradient(135deg, rgb(var(--c-accent)) 0 50%, rgb(var(--c-warn)) 50% 100%) !important;
  border-color: rgb(var(--c-accent)) !important;
}

.bi-query-step-chip.split.selected .bi-query-mchip-box {
  background: linear-gradient(135deg, rgb(var(--c-accent)) 0 50%, rgb(var(--c-warn)) 50% 100%);
  border-color: rgb(var(--c-accent));
}

.bi-query-step-chip.split.\!selected .bi-query-mchip-box {
  background: linear-gradient(135deg, rgb(var(--c-accent)) 0 50%, rgb(var(--c-warn)) 50% 100%) !important;
  border-color: rgb(var(--c-accent)) !important;
}

/* ── Founder refinement 1: Typeform vertical option list (Variant A hairline) ──
     Clarify options no longer wrap like inline pills. Each option is a full-width
     row in a tight vertical stack: a mono numeric shortcut hint, the plain-verb
     label (+ its explainer/samples/source), the CT/PD source badge pinned
     inline-end, and a check that lands on hover/select. Low-chrome Variant A: the
     resting row is a hairline rule; the accent only arrives on hover/selection.
     Both CT Ledger modes are co-equal via the two-mode tokens. */

.bi-query-optrows {
  margin-top: 0.625rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.bi-query-optrow {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.625rem;
  min-height: 44px;
  border: 1px solid rgb(var(--c-border));
  border-radius: 8px;
  background: transparent;
  padding: 0.5rem 0.75rem;
  text-align: left;
  transition: background 120ms ease-out, border-color 120ms ease-out, box-shadow 120ms ease-out;
  touch-action: manipulation;
}

/* Mono numeric shortcut hint (1–9) — the Typeform "press N" affordance. Quiet
     at rest, brightens to accent when the row is chosen. */

.bi-query-optrow-num {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 5px;
  border: 1px solid rgb(var(--c-border));
  background: rgb(var(--c-bg-deep));
  color: rgb(var(--c-muted));
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.bi-query-optrow-body {
  min-width: 0;
  flex: 1 1 auto;
}

.bi-query-optrow-label {
  display: block;
  color: rgb(var(--c-text));
  font-size: 14px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.bi-query-optrow-eg-line {
  display: block;
  margin-top: 0.125rem;
  color: rgb(var(--c-muted));
  font-size: 12px;
  line-height: 1.35;
}

.bi-query-optrow-eg {
  font-variant-numeric: tabular-nums;
}

/* The source badge sits inline-end (right on LTR); it reuses .bi-query-step-badge
     tone, so no new colour is introduced. */

.bi-query-optrow-badge {
  flex: 0 0 auto;
  align-self: center;
}

/* The row check — a small accent tick that reveals on select (single-select) or
     toggles per row (multi). Replaces the floating absolute check of the old card. */

.bi-query-optrow-check {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  color: rgb(var(--c-accent-strong));
  opacity: 0;
  transform: scale(0.82);
  transition: opacity 120ms ease-out, transform 120ms ease-out;
}

/* Multi rows carry a square checkbox affordance instead of a round radio tick. */

.bi-query-optrow-check--box {
  border-radius: 4px;
  border: 1px solid rgb(var(--c-border));
  color: white;
  opacity: 1;
  transform: none;
}

.bi-query-optrow--multi .bi-query-optrow-check--box :where(svg) {
  opacity: 0;
  transition: opacity 120ms ease-out;
}

.bi-query-optrow:hover {
  border-color: rgb(var(--c-accent) / 0.40);
  background: rgb(var(--c-accent) / 0.05);
}

.bi-query-optrow.pd:hover {
  border-color: rgb(var(--c-warn) / 0.42);
  background: rgb(var(--c-warn) / 0.06);
}

.bi-query-optrow:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgb(var(--c-bg)), 0 0 0 4px rgb(var(--c-accent) / 0.42);
}

.bi-query-optrow.pd:focus-visible {
  box-shadow: 0 0 0 2px rgb(var(--c-bg)), 0 0 0 4px rgb(var(--c-warn) / 0.48);
}

.bi-query-optrow.selected {
  border-color: rgb(var(--c-accent) / 0.68);
  background: rgb(var(--c-accent) / 0.12);
}

.bi-query-optrow.\!selected {
  border-color: rgb(var(--c-accent) / 0.68) !important;
  background: rgb(var(--c-accent) / 0.12) !important;
}

.bi-query-optrow.pd.selected {
  border-color: rgb(var(--c-warn) / 0.70);
  background: rgb(var(--c-warn) / 0.14);
}

.bi-query-optrow.pd.\!selected {
  border-color: rgb(var(--c-warn) / 0.70) !important;
  background: rgb(var(--c-warn) / 0.14) !important;
}

.bi-query-optrow.split.selected {
  border-color: rgb(var(--c-accent) / 0.66);
  background: linear-gradient(100deg, rgb(var(--c-accent) / 0.13) 0 50%, rgb(var(--c-warn) / 0.15) 50% 100%);
}

.bi-query-optrow.\!split.selected {
  border-color: rgb(var(--c-accent) / 0.66) !important;
  background: linear-gradient(100deg, rgb(var(--c-accent) / 0.13) 0 50%, rgb(var(--c-warn) / 0.15) 50% 100%) !important;
}

.bi-query-optrow.split.\!selected {
  border-color: rgb(var(--c-accent) / 0.66) !important;
  background: linear-gradient(100deg, rgb(var(--c-accent) / 0.13) 0 50%, rgb(var(--c-warn) / 0.15) 50% 100%) !important;
}

.bi-query-optrow.selected .bi-query-optrow-num {
  border-color: rgb(var(--c-accent) / 0.55);
  background: rgb(var(--c-accent) / 0.16);
  color: rgb(var(--c-accent-strong));
}

.bi-query-optrow.\!selected .bi-query-optrow-num {
  border-color: rgb(var(--c-accent) / 0.55) !important;
  background: rgb(var(--c-accent) / 0.16) !important;
  color: rgb(var(--c-accent-strong)) !important;
}

.bi-query-optrow.pd.selected .bi-query-optrow-num {
  border-color: rgb(var(--c-warn) / 0.55);
  background: rgb(var(--c-warn) / 0.16);
  color: rgb(var(--c-warn));
}

.bi-query-optrow.pd.\!selected .bi-query-optrow-num {
  border-color: rgb(var(--c-warn) / 0.55) !important;
  background: rgb(var(--c-warn) / 0.16) !important;
  color: rgb(var(--c-warn)) !important;
}

.bi-query-optrow.selected .bi-query-optrow-check {
  opacity: 1;
  transform: none;
}

.bi-query-optrow.\!selected .bi-query-optrow-check {
  opacity: 1 !important;
  transform: none !important;
}

/* Multi selected: fill the checkbox and reveal its tick. */

.bi-query-optrow--multi.selected .bi-query-optrow-check--box {
  background: rgb(var(--c-accent));
  border-color: rgb(var(--c-accent));
}

.bi-query-optrow--multi.\!selected .bi-query-optrow-check--box {
  background: rgb(var(--c-accent)) !important;
  border-color: rgb(var(--c-accent)) !important;
}

.bi-query-optrow--multi.pd.selected .bi-query-optrow-check--box {
  background: rgb(var(--c-warn));
  border-color: rgb(var(--c-warn));
}

.bi-query-optrow--multi.pd.\!selected .bi-query-optrow-check--box {
  background: rgb(var(--c-warn)) !important;
  border-color: rgb(var(--c-warn)) !important;
}

.bi-query-optrow--multi.selected .bi-query-optrow-check--box :where(svg) {
  opacity: 1;
}

.bi-query-optrow--multi.\!selected .bi-query-optrow-check--box :where(svg) {
  opacity: 1 !important;
}

/* Founder refinement 2 (label): the stamp-row "change answer" reopen shortens to
     "change" only where the composer is space-constrained (mobile block below). */

.bi-query-intake-adjust-short {
  display: none;
}

/* v1.1 ruling r3 (INTAKE-012b): the panel footer is just `Looks right ›`,
     right-aligned — no "Question ready…" copy sits beside it. */

.bi-query-step-finish {
  flex: 0 0 auto;
  margin-top: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  border-top: 1px solid rgb(var(--c-border));
  padding-top: 0.75rem;
  color: rgb(var(--c-muted));
  font-size: 11.5px;
}

.bi-query-looks-right {
  flex: 0 0 auto;
  border: 1px solid rgb(var(--c-border));
  border-radius: 7px;
  background: rgb(var(--c-surface));
  padding: 0.4375rem 0.75rem;
  color: rgb(var(--c-text));
  font-size: 12px;
  font-weight: 600;
  transition: background 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out;
}

.bi-query-looks-right:hover:not(:disabled) {
  border-color: rgb(var(--c-accent) / 0.48);
  background: rgb(var(--c-accent) / 0.10);
  color: rgb(var(--c-accent-strong));
}

.bi-query-looks-right:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.bi-query-display-collapsed .bi-query-recognized-tag {
  cursor: pointer;
}

/* g13 "filed-slip": recessed bubble, NO blockquote left-rule, symmetric
     padding, prose left-aligned with no odd indent (normal whitespace, not
     pre-wrap — multiple spaces/newlines in the raw question never indent it). */

.bi-sent-question {
  border: 1px solid rgb(var(--c-border));
  border-radius: 10px;
  background: rgb(var(--c-bg-deep));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.03), 0 1px 0 rgb(0 0 0 / 0.16), 0 8px 24px -16px rgb(0 0 0 / 0.45);
  padding: 0.875rem 1rem;
  color: rgb(var(--c-text));
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.9;
  white-space: normal;
  overflow-wrap: anywhere;
  text-indent: 0;
}

.bi-sent-tag {
  /* inline-flex + align-items:center so the leading dot, the label, and the
       tick are all vertically centered within the chip (was display:inline with
       mismatched per-child vertical-aligns → content sat low in the tall line). */
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  position: relative;
  margin: 0 1.5px;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 1px 5px;
  line-height: 1.2;
  cursor: default;
  font-weight: 600;
  white-space: normal;
}

.bi-sent-tag .tick {
  display: inline-grid;
  width: 1rem;
  height: 1rem;
  margin-left: 0.25rem;
  place-items: center;
  border-radius: 9999px;
  background: rgb(var(--c-accent));
  color: white;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.625rem;
  line-height: 1;
  flex: 0 0 auto;
}

.bi-sent-tag .\!tick {
  display: inline-grid !important;
  width: 1rem !important;
  height: 1rem !important;
  margin-left: 0.25rem !important;
  place-items: center !important;
  border-radius: 9999px !important;
  background: rgb(var(--c-accent)) !important;
  color: white !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 0.625rem !important;
  line-height: 1 !important;
  flex: 0 0 auto !important;
}

.bi-sent-tag .tick::before {
  content: '✓';
}

.bi-sent-tag .\!tick::before {
  content: '✓' !important;
}

.bi-sent-tag.tag-ct {
  border-color: rgb(var(--c-accent) / 0.36);
  background: rgb(var(--c-accent) / 0.10);
  color: rgb(var(--c-accent-strong));
}

.bi-sent-tag.tag-pd {
  border-color: rgb(var(--c-warn) / 0.42);
  background: rgb(var(--c-warn) / 0.12);
  color: rgb(var(--c-warn));
}

.bi-sent-tag.tag-pd .tick {
  background: rgb(var(--c-warn));
}

.bi-sent-tag.tag-pd .\!tick {
  background: rgb(var(--c-warn)) !important;
}

.bi-sent-tag.tag-split {
  border-color: rgb(var(--c-accent) / 0.36);
  border-right: 2px solid rgb(var(--c-warn) / 0.50);
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  background: rgb(var(--c-accent) / 0.10);
  color: rgb(var(--c-accent-strong));
}

.bi-sent-tag.tag-split::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 4px;
  border-radius: 9999px;
  background: rgb(var(--c-warn));
  box-shadow: 0 0 0 1.5px rgb(var(--c-accent-strong));
  vertical-align: middle;
}

.bi-sent-tag.tag-split .tick {
  background: linear-gradient(135deg, rgb(var(--c-accent)) 0 50%, rgb(var(--c-warn)) 50% 100%);
}

.bi-sent-tag.tag-split .\!tick {
  background: linear-gradient(135deg, rgb(var(--c-accent)) 0 50%, rgb(var(--c-warn)) 50% 100%) !important;
}

.bi-query-step-kbd-hints {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: rgb(var(--c-muted));
  font-size: 11px;
}

.bi-query-kbd {
  border: 1px solid rgb(var(--c-border));
  border-radius: 4px;
  padding: 1px 5px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
}

/* Desktop/tablet: the dock is a normal flex child of an overflow-hidden
     section, so a tall composer (multi-line pasted bullet query + a clarify
     scaffold) used to be CLIPPED with no way to scroll — the top of the
     scaffold and the Run button became unreachable. Cap it under the 56px
     topbar and let the whole dock scroll internally, mirroring the mobile
     rule below. */

@media (min-width: 641px) {
  .bi-query-dock {
    max-height: calc(100dvh - 3.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

@media (max-width: 640px) {
  /* The whole composer dock is the single scroll container on a phone, with a
       hard ceiling under the 56px topbar and the home-indicator inset respected,
       so the clarify panel, the question field, AND the Run button are always
       reachable by scrolling. */

  .bi-query-dock {
    /* Pinned to the bottom and lifted above the soft keyboard by its inset
         (--bi-kb, measured from visualViewport in bi.js; 0 when closed → rests at
         the bottom). max-height tracks the space above the keyboard so a tall
         clarify panel scrolls internally instead of running off the top. */
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--bi-kb, 0px);
    z-index: 40;
    max-height: calc(100dvh - var(--bi-kb, 0px) - 3.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
  }

  /* The dock is fixed (out of flow), so reserve its height at the bottom of the
       thread; otherwise the latest rows hide behind it. --bi-dock-h is the live
       dock height (ResizeObserver in bi.js); 7rem is a safe fallback. */

  #bi-thread-scroll {
    padding-bottom: var(--bi-dock-h, 7rem);
  }

  /* Drop the scaffold's own cap/scroller so two scroll containers don't nest
       (dock + scaffold); the panel's option list keeps its own inner scroll. */

  .bi-query-clarify-scaffold {
    margin-inline: -0.25rem;
    padding: 0.75rem;
  }

  .bi-query-stepper {
    margin-inline: -0.75rem;
    padding-inline: 0.75rem;
    padding-bottom: 3px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .bi-query-stepper::-webkit-scrollbar {
    display: none;
  }

  .bi-query-step {
    min-height: 44px;
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .bi-query-step-label {
    max-width: none;
    white-space: nowrap;
  }

  .bi-query-step-pip {
    width: 1.625rem;
    height: 1.625rem;
    font-size: 0.875rem;
  }

  .bi-query-step-panel {
    padding: 0.75rem;
    /* lower the floor on phones so the panel yields height to the field+footer
         instead of forcing them off-screen; track the visible viewport so the
         panel shrinks when the keyboard opens */
    max-height: min(20rem, max(7rem, calc(100dvh - 22rem)));
  }

  /* Compact option cards: hide the dev-facing schema path and tighten spacing
       so more options fit a phone screen. */

  .bi-query-option-source {
    display: none;
  }

  .bi-query-step-option {
    margin-top: 0.375rem;
    padding: 0.4375rem 1.875rem 0.4375rem 0.625rem;
  }

  .bi-query-option-label {
    margin-top: 0.25rem;
    font-size: 13.5px;
  }

  .bi-query-option-eg {
    margin-top: 0.0625rem;
  }

  /* Mobile: drop the whole meta band above the ask box — the context/read-only
       chips and the "Your question" + Edit row. The field's placeholder + prompt
       glyph carry the meaning, and tapping the question text edits it, so this
       band is pure clutter on a phone. */

  #bi-context-chips,
    .bi-query-label-row {
    display: none;
  }

  /* Collapse the source dropdown to an icon: hide the select's text + native
       chevron, size it to a 44px tap target, and center the icon over it. The
       native picker still opens on tap (taps pass through the icon). */

  .bi-conn-select {
    width: 2.75rem;
    max-width: 2.75rem;
    min-height: 2.25rem;
    padding-left: 0;
    padding-right: 0;
    color: transparent;
    text-indent: -9999px;
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
  }

  .bi-conn-select-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    color: rgb(var(--c-muted));
  }

  .bi-query-step-finish {
    align-items: stretch;
    flex-direction: column;
  }

  .bi-query-looks-right,
    #bi-query-edit-question,
    #bi-query-submit {
    min-height: 44px;
    justify-content: center;
  }

  /* Footer (now just Run) is full-width on narrow screens; the text region
       still never clips. */

  .bi-query-field-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .bi-query-field-footer #bi-query-submit {
    width: 100%;
  }

  .bi-sent-question {
    font-size: 14.5px;
    line-height: 1.85;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bi-query-clarify-collapsing,
    .bi-query-looks-right,
    .bi-sent-tag .tick {
    transition: none !important;
  }

  
    .bi-sent-tag .\!tick {
    transition: none !important;
  }
}

@media (max-width: 640px), (hover: none) and (pointer: coarse) {
  .bi-query-step-kbd-hints {
    display: none !important;
  }
}

@media (hover: none) and (pointer: coarse) {
  .bi-query-step,
    .bi-query-step-option,
    .bi-query-step-chip {
    min-height: 44px;
  }

  /* keyboard hint is meaningless on touch */

  .bi-chip-kbd-hint {
    display: none;
  }

  /* bigger tap target for the inline recognized tags (tap to re-open clarify);
       keep display:inline + box-decoration-break so multi-term questions wrap. */

  .bi-query-recognized-tag {
    padding: 5px 9px;
  }

  .bi-query-step:hover {
    background: rgb(var(--c-surface));
  }

  .bi-query-step-option:hover,
    .bi-query-step-chip:hover {
    background: transparent;
  }
}

/* Mobile-only elements contribute nothing on desktop. */

.bi-voice-row,
  .bi-mic-hint,
  .bi-mic-inline {
  display: none;
}

/* Desktop Speak-it pill state glyphs (founder consolidation 2026-07-26): the
     orb + its label own the state words; the pill is a pure control. Recording
     swaps mic → stop square (the mobile in-field mic's glyph) and its label
     becomes mobile's plain m:ss timer (mono, tabular) via the capture's labels
     override; transcribing leaves the disabled pill icon-only (the empty label
     collapses, killing its gap slot). Inert on mobile — #bi-query-mic is
     display:none under 768px. */

.bi-mic-pill-stop {
  display: none;
}

#bi-query-field.bi-voice-recording .bi-mic-pill-mic {
  display: none;
}

#bi-query-field.bi-voice-recording .bi-mic-pill-stop {
  display: inline-flex;
}

#bi-query-field.bi-voice-recording [data-bi-mic-label] {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}

[data-bi-mic-label]:empty {
  display: none;
}

@keyframes bi-voice-lvl {
  0%, 100% {
    transform: scaleY(0.5);
  }

  50% {
    transform: scaleY(1);
  }
}

@media (max-width: 767px) {
  /* --- C steal 1: pinned thumb-zone action bar. The dock becomes a flex
       column and stops scrolling itself; the field + hint + footer (Run)
       stay pinned at the bottom while the stamp/clarify region above gets
       the internal scroll (C steal 2, .bi-desk-scroll). --- */

  .bi-query-dock {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  #bi-query-form {
    display: flex;
    width: 100%;
    min-height: 0;
    flex-direction: column;
  }

  .bi-desk-scroll {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  #bi-query-field {
    flex-shrink: 0;
  }

  /* --- Variant B: the bordered "ledger line" is the field BODY; the outer
       wrapper (which also carries the hint + pinned actions) drops its
       chrome. Focus/edit rings move onto the body. --- */

  #bi-query-field,
    #bi-query-field:focus-within,
    #bi-query-field.bi-query-field-editing {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }

  .bi-query-field-body {
    /* The template row is `items-start`; on desktop there is no in-field mic
         so that's fine. Below 768px the 44px mic joins the row, and with a
         flex-start row the mic's optical center (27px) sits ~4px BELOW the
         text's first-line center (23px) — the placeholder + `>` glyph read
         visibly HIGH against the mic. Center the row so the glyph, first text
         line, and mic share one axis in the resting/single-line state; when
         the input grows to 2+ lines the mic stays sensibly middle-anchored
         (messenger convention), which `align-items` gives for free. This
         out-specifies the element's own `items-start` utility (later in the
         bundle) via the id prefix. */
    border: 1px solid rgb(var(--c-border));
    border-radius: 8px;
    background: rgb(var(--c-surface));
    transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
  }

  #bi-query-field .bi-query-field-body {
    align-items: center;
  }

  /* The `text-sm` utility (line-height 20px) wins over the base
       `.bi-query-textarea { line-height: 1.5rem }` in the utilities layer, so
       the placeholder/text sat in a 20px line at the TOP of its 24px min-height
       box, reading high. Restore the 24px line so the text fills its box
       symmetrically, and make the field a block so the tokenizer stops adding a
       ~7px inline baseline strut below it — otherwise `align-items: center`
       centers that phantom space instead of the visible text line. */

  #bi-query-field .bi-query-textarea,
    #bi-query-field .bi-query-display {
    line-height: 1.5rem;
  }

  /* REGRESSION GUARD (2026-07-26 founder report): this rule MUST NOT match a
       [hidden] textarea. The display⇄edit swap (syncBiQueryDisplayMode) hides
       whichever element is inactive via the HTML `hidden` attribute, which only
       works through the UA stylesheet's `[hidden]{display:none}` — an
       unconditional author `display:block` here beat it, so on mobile the raw
       textarea stayed visible UNDER the chip mirror after blur and the query
       rendered twice, stacked. `:not([hidden])` keeps the strut fix when the
       textarea is the active element and yields to `hidden` when it is not.
       SECOND GUARD (2026-07-26 founder report, voice states): it must ALSO
       yield during a voice capture — its 1,2,0 specificity beat the
       `.bi-voice-capture` hide below, so the "Ask the ledger…" placeholder
       stayed stacked above the listening row. */

  #bi-query-field:not(.bi-voice-capture) .bi-query-textarea:not([hidden]) {
    display: block;
  }

  #bi-query-field:focus-within .bi-query-field-body {
    border-color: rgb(var(--c-accent) / 0.5);
    box-shadow: 0 0 0 2px rgb(var(--c-accent) / 0.2);
  }

  #bi-query-field.bi-query-field-editing .bi-query-field-body {
    border-color: rgb(var(--c-accent) / 0.62);
    box-shadow: 0 0 0 1px rgb(var(--c-accent) / 0.40), inset 0 0 0 1px rgb(var(--c-accent) / 0.18);
  }

  /* B: 44px accent-washed mic INSIDE the field (messenger convention).
       Negative margins seat it in the 24px input line without growing the
       resting field beyond one comfortable row. */

  .bi-mic-inline {
    display: flex;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    margin: -8px -6px -8px 0;
    border: 1px solid rgb(var(--c-accent) / 0.38);
    border-radius: 9999px;
    background: rgb(var(--c-accent) / 0.06);
    color: rgb(var(--c-accent-strong));
    transition: background 120ms ease-out, border-color 120ms ease-out, transform 120ms ease-out;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .bi-mic-inline[hidden] {
    display: none;
  }

  .bi-mic-inline:not(:disabled):active {
    background: rgb(var(--c-accent) / 0.16);
    transform: scale(0.94);
  }

  .bi-mic-inline-mic,
    .bi-mic-inline-stop {
    display: flex;
  }

  .bi-mic-inline .bi-mic-inline-stop {
    display: none;
  }

  /* Recording: the mic morphs into the solid-accent stop control. */

  .bi-voice-recording .bi-mic-inline {
    border-color: rgb(var(--c-accent));
    background: rgb(var(--c-accent));
    color: #fff;
  }

  .bi-voice-recording .bi-mic-inline .bi-mic-inline-mic {
    display: none;
  }

  .bi-voice-recording .bi-mic-inline .bi-mic-inline-stop {
    display: flex;
  }

  .bi-voice-busy .bi-mic-inline {
    opacity: 0.55;
    cursor: default;
  }

  /* Idle-only mono hint (B) — now the right side of the shared .bi-mic-subrow
       (founder tidy 2026-07-26: one row with the voice error). bi.js toggles
       -off exactly as before. */

  .bi-mic-hint {
    display: block;
    flex: none;
    margin-left: auto;
    text-align: right;
    font-size: 10px;
    line-height: 1.4;
    color: rgb(var(--c-muted) / 0.85);
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }

  .bi-mic-hint.bi-mic-hint-off {
    display: none;
  }

  /* --- B recording state: the input line swaps for the listening row.
       The row lives inside the tokenizer so the field keeps its exact
       geometry; display/textarea/tag-recall hide while a capture is in
       flight and restore untouched afterwards. --- */

  .bi-voice-capture .bi-query-display,
    .bi-voice-capture .bi-query-textarea,
    .bi-voice-capture #bi-query-tag-recall {
    display: none;
  }

  /* Founder tidy (2026-07-26): while listening/transcribing the field shows
       ONLY the voice row — the `›` prompt glyph retires with the input line
       (the id prefix out-specifies the span's own `flex` utility). */

  #bi-query-field.bi-voice-capture .bi-query-prompt {
    display: none;
  }

  .bi-voice-capture .bi-voice-row {
    display: block;
  }

  .bi-voice-line {
    display: flex;
    min-height: 24px;
    align-items: center;
    gap: 10px;
    color: rgb(var(--c-accent-strong));
  }

  .bi-voice-label {
    font-size: 13px;
    font-weight: 500;
  }

  /* Founder tidy: the timer stays but reads quieter — smaller mono, dimmed
       muted ink, right-aligned on the row with a breath of space before the
       stop control. */

  .bi-voice-timer {
    margin-left: auto;
    padding-right: 2px;
    font-size: 10.5px;
    letter-spacing: 0.02em;
    color: rgb(var(--c-muted) / 0.85);
    font-variant-numeric: tabular-nums;
  }

  .bi-voice-busy .bi-voice-timer {
    display: none;
  }

  .bi-voice-busy .bi-voice-line {
    color: rgb(var(--c-muted));
  }

  /* Live level bars while listening; stilled while transcribing. */

  .bi-voice-levels {
    display: inline-flex;
    align-items: center;
    gap: 2.5px;
    height: 14px;
  }

  .bi-voice-levels i {
    width: 2.5px;
    border-radius: 2px;
    background: currentColor;
    animation: bi-voice-lvl 1s ease-in-out infinite;
  }

  .bi-voice-levels i:nth-child(1) {
    height: 6px;
    animation-delay: 0s;
  }

  .bi-voice-levels i:nth-child(2) {
    height: 12px;
    animation-delay: 0.15s;
  }

  .bi-voice-levels i:nth-child(3) {
    height: 8px;
    animation-delay: 0.3s;
  }

  .bi-voice-levels i:nth-child(4) {
    height: 11px;
    animation-delay: 0.45s;
  }

  .bi-voice-busy .bi-voice-levels i {
    animation-play-state: paused;
    opacity: 0.5;
  }

  /* Thinking orb (listening @64 → working @64) is the reasoning indicator on
       the voice row: it REPLACES the legacy level bars (never both — the bars
       are hidden whenever the orb is mounted). The orb is decorative; the
       aria-live label remains the semantic status. */

  .bi-voice-orb {
    align-items: center;
    justify-content: center;
  }

  .bi-voice-orb:not(:empty) ~ .bi-voice-levels {
    display: none;
  }

  .bi-voice-recording .bi-query-field-body {
    border-color: rgb(var(--c-accent) / 0.5);
    box-shadow: 0 0 0 2px rgb(var(--c-accent) / 0.2);
  }

  /* --- Pinned action bar: the footer stacks under the field — status line
       (errors wrap instead of truncating), then the single full-width Run
       primary. The desktop "Speak it" control retires below 768px (the
       in-field mic IS the voice control — one job, one control). The id
       prefix out-specifies the element's own Tailwind utilities (px-4,
       py-2.5, border-t, items-center), which sit later in the bundle. --- */

  #bi-query-field .bi-query-field-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-top: 0;
    border-top: 0;
    padding: 8px 0 0;
  }

  #bi-query-mic {
    display: none;
  }

  /* The desktop footer voice status (20px orb + text) is desktop-only — the
       mobile listening row already carries the 64px orb + label. ID specificity
       beats the JS-toggled .inline-flex utility. */

  #bi-query-field .bi-mic-voice {
    display: none;
  }

  /* Founder tidy (2026-07-26): the voice error and the idle hint share ONE
       row under the field (the .bi-mic-subrow) — error left (wrapping, matched
       to the hint's 10px mono rhythm; its text-subtle color semantics stay),
       hint right. When an error is showing the hint yields (error wins) and
       returns on the next state change (the capture clears the status on start,
       releasing the :not(:empty) gate; bi-mic-hint-off governs idle as before). */

  .bi-query-field-footer [data-bi-mic-status] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: visible;
    font-size: 10px;
    line-height: 1.4;
    text-overflow: clip;
    white-space: normal;
  }

  .bi-query-field-footer [data-bi-mic-status]:empty {
    display: none;
  }

  .bi-mic-subrow [data-bi-mic-status]:not(:empty) ~ .bi-mic-hint {
    display: none;
  }

  /* No error AND no visible hint → the subrow contributes no phantom row to
       the column footer (which would otherwise leave an empty 8px gap slot). */

  .bi-mic-subrow:has([data-bi-mic-status]:empty):has(.bi-mic-hint.bi-mic-hint-off) {
    display: none;
  }

  .bi-query-field-footer #bi-query-submit {
    width: 100%;
    min-height: 48px;
    justify-content: center;
  }

  /* Intake stamp controls reach the 44px touch floor without inflating the
       row: the paddings compensate inside the existing stamp card. */

  .bi-query-intake-stamp {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }

  .bi-query-intake-adjust-region,
    .bi-query-intake-disclose,
    .bi-query-intake-adjust,
    .bi-query-intake-dismiss {
    min-height: 44px;
  }

  .bi-query-intake-dismiss {
    min-width: 2.25rem;
    align-items: center;
    justify-content: center;
  }

  /* Founder refinement 2 (label, space-constrained mobile): the reopen shrinks
       to "change" so it never crowds the truncated Assumed line on a phone; the
       full "change answer" rides the aria-label for screen readers. */

  .bi-query-intake-adjust-full {
    display: none;
  }

  .bi-query-intake-adjust-short {
    display: inline;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bi-voice-levels i {
    animation: none;
  }
}

.ct-sweep {
  position: relative;
  height: 3px;
  border-radius: 9999px;
  overflow: hidden;
  background: rgb(var(--c-border));
}

.ct-sweep::after {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 38%;
  border-radius: 9999px;
  background: rgb(var(--c-accent));
  animation: ct-sweep-move 1.4s ease-in-out infinite;
}

@keyframes ct-sweep-move {
  0% {
    transform: translateX(-110%);
  }

  100% {
    transform: translateX(290%);
  }
}

.ct-feed-row {
  animation: ct-feed-in 0.18s ease-out;
}

@keyframes ct-feed-in {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ct-sweep::after {
    animation: none;
    width: 100%;
    opacity: 0.45;
  }

  .ct-feed-row {
    animation: none;
  }
}

.fb-cursor-blink {
  display: inline-block;
  width: 7px;
  height: 12px;
  margin-left: 3px;
  vertical-align: -2px;
  background: rgb(var(--c-warn));
  animation: fb-cursor-blink 1.05s steps(1) infinite;
}

@keyframes fb-cursor-blink {
  0%, 50% {
    opacity: 1;
  }

  50.01%, 100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fb-cursor-blink {
    animation: none;
  }
}

.bi-cc-scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgb(7 11 15 / 0.68);
}

.bi-cc-modal {
  width: 560px;
  max-width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: rgb(var(--c-surface));
  border: 1px solid rgb(var(--c-border));
  border-radius: 12px;
  box-shadow:
      0 0 0 1px rgb(0 0 0 / 0.4),
      0 32px 80px -20px rgb(0 0 0 / 0.7),
      0 0 120px -40px rgb(var(--c-accent) / 0.25);
  animation: bi-cc-rise 0.24s cubic-bezier(.2,.7,.2,1) both;
}

@keyframes bi-cc-rise {
  from {
    opacity: 0;
    transform: translateY(12px) scale(.985);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.bi-cc-head {
  flex-shrink: 0;
  padding: 20px 22px 16px;
  border-bottom: 1px solid rgb(var(--c-border));
}

.bi-cc-head-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.bi-cc-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: rgb(var(--c-ink));
}

.bi-cc-count {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: rgb(var(--c-muted));
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bi-cc-count b {
  color: rgb(var(--c-accent-strong));
  font-weight: 600;
}

/* XSRC: the bridged-result note under the modal title (PD anchor → linked
     CT client). Muted, honest, no new hue (DESIGN.md). */

.bi-cc-bridge-note {
  margin: -8px 0 12px;
  font-size: 12px;
  line-height: 1.45;
  color: rgb(var(--c-muted));
}

.bi-cc-search {
  position: relative;
  display: flex;
  align-items: center;
}

.bi-cc-search svg {
  position: absolute;
  left: 12px;
  width: 15px;
  height: 15px;
  stroke: rgb(var(--c-muted));
  pointer-events: none;
}

.bi-cc-search input {
  width: 100%;
  font-size: 14px;
  color: rgb(var(--c-text));
  background: rgb(var(--c-bg-deep));
  border: 1px solid rgb(var(--c-border));
  border-radius: 8px;
  padding: 10px 12px 10px 36px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

.bi-cc-search input::-moz-placeholder {
  color: rgb(var(--c-muted));
}

.bi-cc-search input::placeholder {
  color: rgb(var(--c-muted));
}

.bi-cc-search input:focus {
  border-color: rgb(var(--c-accent));
  box-shadow: 0 0 0 3px rgb(var(--c-accent) / 0.18);
}

.bi-cc-body {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
}

.bi-cc-body::-webkit-scrollbar {
  width: 10px;
}

.bi-cc-body::-webkit-scrollbar-thumb {
  background: rgb(var(--c-border));
  border-radius: 999px;
  border: 3px solid rgb(var(--c-surface));
}

.bi-cc-group-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgb(var(--c-muted));
  padding: 13px 22px 7px;
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgb(var(--c-surface));
}

.bi-cc-row {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 10px 22px;
  cursor: pointer;
  text-align: left;
  border-left: 2px solid transparent;
  background: transparent;
  transition: background .12s, border-color .12s;
}

.bi-cc-row + .bi-cc-row {
  border-top: 1px solid rgb(var(--c-border));
}

.bi-cc-row:hover {
  background: rgb(var(--c-accent) / 0.05);
}

.bi-cc-row.is-on {
  background: rgb(var(--c-accent) / 0.10);
  border-left-color: rgb(var(--c-accent));
}

.bi-cc-row.is-on:hover {
  background: rgb(var(--c-accent) / 0.15);
}

.bi-cc-row.is-locked {
  cursor: default;
}

.bi-cc-row:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px rgb(var(--c-accent) / 0.5);
}

.bi-cc-check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid rgb(var(--c-border));
  background: rgb(var(--c-bg-deep));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .14s;
}

.bi-cc-row:hover .bi-cc-check {
  border-color: rgb(var(--c-muted));
}

.bi-cc-row.is-on .bi-cc-check {
  background: rgb(var(--c-accent));
  border-color: rgb(var(--c-accent));
}

.bi-cc-check svg {
  width: 11px;
  height: 11px;
  stroke: rgb(var(--c-ink));
  stroke-width: 2.5;
  opacity: 0;
  transition: opacity .14s;
}

.bi-cc-row.is-on .bi-cc-check svg {
  opacity: 1;
}

.bi-cc-label {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: rgb(var(--c-text));
}

.bi-cc-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bi-cc-row.is-on .bi-cc-name {
  color: rgb(var(--c-ink));
}

.bi-cc-pii {
  flex-shrink: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgb(var(--c-muted));
  border: 1px solid rgb(var(--c-border));
  border-radius: 999px;
  padding: 1px 6px;
}

.bi-cc-locked-tag {
  flex-shrink: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: rgb(var(--c-accent));
}

.bi-cc-badge {
  flex-shrink: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgb(var(--c-border));
  color: rgb(var(--c-data));
  background: rgb(var(--c-bg) / 0.6);
}

.bi-cc-badge.is-measure {
  color: rgb(var(--c-up));
  border-color: rgb(var(--c-up) / 0.3);
  background: rgb(var(--c-up) / 0.07);
}

.bi-cc-badge.is-pd {
  color: rgb(var(--c-accent-strong));
  border-color: rgb(var(--c-accent-strong) / 0.3);
  background: rgb(var(--c-accent-strong) / 0.07);
}

.bi-cc-empty {
  text-align: center;
  padding: 40px 22px;
  color: rgb(var(--c-muted));
  font-size: 14px;
}

.bi-cc-foot {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  border-top: 1px solid rgb(var(--c-border));
  background: rgb(var(--c-bg-deep));
}

.bi-cc-foot-count {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: rgb(var(--c-muted));
  font-variant-numeric: tabular-nums;
}

.bi-cc-foot-count b {
  color: rgb(var(--c-data));
  font-weight: 600;
}

.bi-cc-btns {
  display: flex;
  gap: 10px;
}

.bi-cc-btn {
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all .14s;
  outline: none;
}

.bi-cc-btn:focus-visible {
  box-shadow: 0 0 0 3px rgb(var(--c-accent) / 0.18);
}

.bi-cc-btn-ghost {
  background: transparent;
  color: rgb(var(--c-data));
  border-color: rgb(var(--c-border));
}

.bi-cc-btn-ghost:hover {
  background: rgb(var(--c-surface-muted));
  color: rgb(var(--c-ink));
  border-color: rgb(var(--c-muted));
}

.bi-cc-btn-primary {
  background: rgb(var(--c-accent));
  color: rgb(var(--c-ink));
  border-color: rgb(var(--c-accent));
}

.bi-cc-btn-primary:hover {
  background: rgb(var(--c-accent-strong));
  border-color: rgb(var(--c-accent-strong));
}

.bi-cc-btn-primary:disabled {
  opacity: 0.55;
  cursor: wait;
}

@media (prefers-reduced-motion: reduce) {
  .bi-cc-modal {
    animation: none;
  }
}

/* 1 · body scale — one quiet wash, value only, format-inheriting. */

.bi-chip {
  font: inherit;
  color: inherit;
  background: rgba(63, 143, 181, 0.14);
  border-radius: 3px;
  padding: 0 0.16em;
  margin: 0 0.02em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  cursor: default;
}

/* failed refresh: the wash turns amber and the chip keeps its last value.
     A never-succeeded chip renders "—" with the same mark. Amber, never red
     or green — the only red in the system lives in a failed receipt's status
     line (DSRC-011a). */

.bi-chip.is-failed {
  background: rgba(217, 164, 65, 0.16);
}

/* FAILED-ASK LANDING (founder fix 2026-07-23): a never-succeeded ask no
     longer degrades to the near-invisible bare "—" — it lands as a visible
     inline affordance: amber mark, the short stored reason, and quiet inline
     Retry / Dismiss actions. Amber, never red (the only red in the system
     stays in the receipt's failed status line). No motion. */

.bi-chip.is-fail-landing {
  background: rgba(217, 164, 65, 0.14);
  border-radius: 4px;
  padding: 0.06em 0.4em;
}

.bi-chip.is-fail-landing .mark {
  color: rgb(var(--c-warn));
  font-weight: 600;
}

.bi-chip.is-fail-landing .why {
  color: rgb(var(--c-text));
}

.bi-chip.is-fail-landing .act {
  border: 0;
  background: transparent;
  padding: 0 0.1em;
  font: inherit;
  font-size: 0.92em;
  color: rgb(var(--c-accent-strong));
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(63, 143, 181, 0.45);
  cursor: pointer;
}

.bi-chip.is-fail-landing .act:hover {
  text-decoration-color: currentColor;
}

.bi-chip.is-fail-landing .act:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgb(var(--c-accent) / 0.18);
  border-radius: 3px;
}

.bi-chip.is-fail-landing .act:disabled {
  cursor: default;
  opacity: 0.55;
}

.bi-chip.is-fail-landing .act.quiet {
  color: rgb(var(--c-muted));
}

/* display scale (headlines, metric callouts): the treatment drops to a
     faint highlight — lower alpha, tighter radius, no pill. */

.cst-slide-headline .bi-chip,
  .cst-slide-metric-value .bi-chip {
  background: rgba(63, 143, 181, 0.08);
  border-radius: 2px;
  padding: 0 0.05em;
  margin: 0;
}

.cst-slide-headline .bi-chip.is-failed,
  .cst-slide-metric-value .bi-chip.is-failed {
  background: rgba(217, 164, 65, 0.10);
}

/* one pulse on insert, then silence (applied by DSRC-010a/b at insert). */

.bi-chip.just-inserted {
  animation: biChipLand 900ms ease-out 1;
}

@keyframes biChipLand {
  0% {
    background: rgba(63, 143, 181, 0.42);
  }

  100% {
    background: rgba(63, 143, 181, 0.14);
  }
}

/* the in-place placeholder while a question runs: chip-shaped, muted, a
     named stage plus (DSRC-010b) a ticking clock. Mono because it is a
     timestamp. */

.bi-chip.is-pending {
  background: rgba(108, 130, 148, 0.14);
  color: rgb(var(--c-muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.82em;
  padding: 0.05em 0.45em;
}

.bi-chip.is-pending .tick {
  font-variant-numeric: tabular-nums;
}

.bi-chip.is-pending .\!tick {
  font-variant-numeric: tabular-nums !important;
}

/* TBL-009c — the list-ready OFFER chip (the fallback affordance when a table
     verdict cannot auto-insert at the origin cursor). A quiet accent wash, NOT
     amber — this is a ready state; the amber dash is failure only. Focusable
     (the wiring sets tabindex/role/aria-label) with a visible focus ring. */

.bi-chip.is-table-offer {
  background: rgba(63, 143, 181, 0.14);
  color: rgb(var(--c-text));
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 0.82em;
  padding: 0.05em 0.5em;
  cursor: pointer;
}

.bi-chip.is-table-offer:focus-visible {
  outline: 2px solid rgb(var(--c-accent));
  outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
  .bi-chip.just-inserted {
    animation: none;
  }
}

.cst-bi-table-block {
  margin: 10px 0 14px;
}

/* TBL-009c — one pulse when a list-shaped ask AUTO-INSERTS its table at the
     cursor (the block sibling of .bi-chip.just-inserted), then silence. Washes
     the whole block once; suppressed under reduced-motion (the table still
     lands — motion only). */

.cst-bi-table-block.just-inserted {
  animation: biTableLand 900ms ease-out 1;
  border-radius: 3px;
}

@keyframes biTableLand {
  0% {
    background: rgba(63, 143, 181, 0.22);
  }

  100% {
    background: rgba(63, 143, 181, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cst-bi-table-block.just-inserted {
    animation: none;
  }
}

.bi-bound-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 13.5px;
  color: rgb(var(--c-text));
}

.bi-bound-table th {
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: rgb(var(--c-muted));
  text-align: left;
  padding: 0 16px 7px 0;
  border-bottom: 1px solid rgb(var(--c-border));
}

.bi-bound-table td {
  padding: 7px 16px 7px 0;
  border-bottom: 1px solid rgb(var(--c-border));
  vertical-align: baseline;
}

.bi-bound-table th:last-child,
  .bi-bound-table td:last-child {
  padding-right: 0;
}

/* numeric cells: mono, tabular, right-aligned, --c-data (alignment is a
     column property — every non-null cell in the column parses numeric). */

.bi-bound-table th.num {
  text-align: right;
}

.bi-bound-table td.num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  color: rgb(var(--c-data));
  text-align: right;
}

.bi-caption {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: rgb(var(--c-muted));
  margin: 9px 0 0;
}

/* failed + last-good: rows kept under the amber wash, row rules turn amber,
     a mono amber reason line replaces the caption. Amber, never red — the only
     red in the system is the failed receipt's status line (INV-CALM). */

.bi-failed-wash {
  background: rgb(var(--c-warn) / 0.16);
  border-radius: 3px;
  padding: 12px 14px;
}

.bi-bound-table--failed th,
  .bi-bound-table--failed td {
  border-bottom-color: rgb(var(--c-warn));
}

.bi-failed-reason {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: rgb(var(--c-warn));
  margin: 8px 0 0;
}

/* never-succeeded / missing / [TABLE UNBOUND] / not_a_table / bad shape — a
     table-shaped amber block carrying the verbatim reason. */

.bi-tombstone {
  background: rgb(var(--c-warn) / 0.16);
  border-radius: 3px;
  padding: 14px 16px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
  color: rgb(var(--c-warn));
}

/* a hand-typed table token surviving INLINE in prose — a compact amber nudge
     ("put it on its own line"), never a block. */

.cst-bi-table-inline {
  background: rgb(var(--c-warn) / 0.16);
  border-radius: 3px;
  padding: 0.05em 0.4em;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.86em;
  color: rgb(var(--c-warn));
  cursor: default;
}

/* TBL-011 — the read-only COMPACT table chip in a hunk-review diff body or a
     refine-chat Before/After quote card. Never the full table inside a diff:
     "⌗ tag · N rows" (mono, muted, quiet accent wash) when the tag resolves to a
     ready/stale table, the amber "—" chip when it does not. Non-interactive — a
     reviewer reads the figure count, not the plumbing (INV-CALM). */

.bi-table-quote {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.86em;
  color: rgb(var(--c-muted));
  background: rgba(63, 143, 181, 0.10);
  border-radius: 3px;
  padding: 0.05em 0.4em;
  white-space: nowrap;
  cursor: default;
}

/* unresolved (missing / pending / failed / not-a-table / [TABLE UNBOUND]): the
     amber "—" chip — the same amber, never red, the rest of the BI surface uses. */

.bi-table-quote.is-failed {
  background: rgba(217, 164, 65, 0.16);
  color: rgb(var(--c-warn));
}

.bi-popover {
  position: absolute;
  z-index: 60;
  width: 302px;
  border: 1px solid rgb(var(--c-border));
  border-radius: 8px;
  background: rgb(var(--c-surface));
  box-shadow: 0 12px 34px rgba(4, 8, 12, 0.55);
  padding: 4px;
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: 13px;
  color: rgb(var(--c-text));
}

.bi-popover .row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: default;
}

.bi-popover .\!row {
  display: flex !important;
  align-items: baseline !important;
  gap: 10px !important;
  padding: 7px 10px !important;
  border-radius: 6px !important;
  cursor: default !important;
}

.bi-popover .row.active {
  background: rgba(63, 143, 181, 0.10);
}

.bi-popover .\!row.active {
  background: rgba(63, 143, 181, 0.10) !important;
}

.bi-popover .row.\!active {
  background: rgba(63, 143, 181, 0.10) !important;
}

.bi-popover .row .v {
  flex: none;
  min-width: 64px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: rgb(var(--c-data));
  font-variant-numeric: tabular-nums;
}

.bi-popover .\!row .v {
  flex: none !important;
  min-width: 64px !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 12px !important;
  color: rgb(var(--c-data)) !important;
  font-variant-numeric: tabular-nums !important;
}

.bi-popover .row .\!v {
  flex: none !important;
  min-width: 64px !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 12px !important;
  color: rgb(var(--c-data)) !important;
  font-variant-numeric: tabular-nums !important;
}

.bi-popover .row .n {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bi-popover .\!row .n {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.bi-popover .row .\!n {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.bi-popover .row .k {
  flex: none;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: rgb(var(--c-muted));
}

.bi-popover .\!row .k {
  flex: none !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  color: rgb(var(--c-muted)) !important;
}

/* the ENABLED Ask BI row (DSRC-010b): the typed phrase, quoted, with the
     accent verb. Its own selectable row when nothing matched. */

.bi-popover .row.ask .n {
  white-space: normal;
  color: rgb(var(--c-text));
  line-height: 1.4;
}

.bi-popover .\!row.ask .n {
  white-space: normal !important;
  color: rgb(var(--c-text)) !important;
  line-height: 1.4 !important;
}

.bi-popover .row.ask .\!n {
  white-space: normal !important;
  color: rgb(var(--c-text)) !important;
  line-height: 1.4 !important;
}

.bi-popover .row.ask .n b {
  color: rgb(var(--c-accent-strong));
  font-weight: 500;
}

.bi-popover .\!row.ask .n b {
  color: rgb(var(--c-accent-strong)) !important;
  font-weight: 500 !important;
}

.bi-popover .row.ask .\!n b {
  color: rgb(var(--c-accent-strong)) !important;
  font-weight: 500 !important;
}

/* the DISABLED ask affordance when BI is not configured (DSRC-002c reason):
     the message + remedy, surfaced before the user submits. Not selectable. */

.bi-popover .row.ask.is-disabled {
  cursor: not-allowed;
}

.bi-popover .\!row.ask.is-disabled {
  cursor: not-allowed !important;
}

.bi-popover .row.ask.is-disabled .n {
  color: rgb(var(--c-muted));
}

.bi-popover .\!row.ask.is-disabled .n {
  color: rgb(var(--c-muted)) !important;
}

.bi-popover .row.ask.is-disabled .\!n {
  color: rgb(var(--c-muted)) !important;
}

/* a failed create (DSRC-010b, 409 limit/conflict or 403): the error copy at
     the cursor, calm and muted — no placeholder was inserted. */

.bi-popover .row.ask.is-error .n {
  color: rgb(var(--c-muted));
}

.bi-popover .\!row.ask.is-error .n {
  color: rgb(var(--c-muted)) !important;
}

.bi-popover .row.ask.is-error .\!n {
  color: rgb(var(--c-muted)) !important;
}

.bi-popover .row.ask .n .remedy {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: rgb(var(--c-muted));
  opacity: 0.85;
}

.bi-popover .\!row.ask .n .remedy {
  display: block !important;
  margin-top: 3px !important;
  font-size: 12px !important;
  color: rgb(var(--c-muted)) !important;
  opacity: 0.85 !important;
}

.bi-popover .row.ask .\!n .remedy {
  display: block !important;
  margin-top: 3px !important;
  font-size: 12px !important;
  color: rgb(var(--c-muted)) !important;
  opacity: 0.85 !important;
}

.bi-receipt {
  position: absolute;
  z-index: 70;
  width: 288px;
  border: 1px solid rgb(var(--c-border));
  border-radius: 8px;
  background: rgb(var(--c-surface));
  box-shadow: 0 12px 34px rgba(4, 8, 12, 0.55);
  padding: 12px 14px 11px;
  font-family: 'Instrument Sans', system-ui, sans-serif;
}

.bi-receipt .r-value {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 14px;
  color: rgb(var(--c-ink));
  font-variant-numeric: tabular-nums;
}

.bi-receipt .r-value .shown {
  color: rgb(var(--c-muted));
}

.bi-receipt .r-value .\!shown {
  color: rgb(var(--c-muted)) !important;
}

/* One muted line explaining a value-less ("—") settled execution. */

.bi-receipt .r-note {
  margin-top: 4px;
  color: rgb(var(--c-muted));
  font-size: 12.5px;
  line-height: 1.45;
}

/* POPFIX (founder 2026-07-26): the reason-led hero of a broken source's
     receipt — the WHY in plain words where the useless giant "—" sat. Amber:
     the attention colour, never red (red stays the failed status line). */

.bi-receipt .r-reason {
  color: rgb(var(--c-warn));
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
}

/* POPFIX heal chips: "Ask separately" + one small chip per metric phrase.
     The chips ARE the receipt's one action for a compound question — clicking
     one fires the existing @-ask flow and lands its own tracked source. */

.bi-receipt .r-split {
  margin-top: 8px;
}

.bi-receipt .r-split-lbl {
  display: block;
  margin-bottom: 5px;
  color: rgb(var(--c-muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.bi-receipt .r-split-chip {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  margin: 0 6px 6px 0;
  border: 1px solid rgb(var(--c-accent) / 0.3);
  border-radius: 999px;
  background: rgb(var(--c-accent) / 0.06);
  padding: 3px 10px;
  color: rgb(var(--c-accent));
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease-out, border-color 120ms ease-out;
}

.bi-receipt .r-split-chip:hover,
  .bi-receipt .r-split-chip:focus-visible {
  background: rgb(var(--c-accent) / 0.14);
  border-color: rgb(var(--c-accent) / 0.5);
  outline: none;
}

.bi-receipt .r-split-chip:disabled {
  cursor: default;
  opacity: 0.55;
}

.bi-receipt .r-split-chip.asked {
  border-color: rgb(var(--c-border));
  background: transparent;
  color: rgb(var(--c-muted));
  opacity: 1;
}

.bi-receipt .r-split-chip.asked::after {
  content: ' ✓';
}

/* LEGIBILITY (founder 2026-07-24): the audit-open card grows so the
     pretty-printed SQL and result rows read comfortably — legibility beats
     compactness once the reader asks to see what ran. The at-rest 4-line card
     stays 288px and calm. */

.bi-receipt.audit-open {
  width: min(680px, calc(100vw - 32px));
}

/* AUDIT disclosure — IA (founder 2026-07-24): labelled sections in the house
     idiom. The QUERY row (hairline rule + small mono label) IS the collapse
     control: label left, "view/hide" + chevron right — a real affordance. The
     RESULT section opens with the same rule + label; its row-count is the
     table's caption line, the count's only home. */

.bi-receipt .r-audit-wrap {
  margin-top: 9px;
}

.bi-receipt .r-sec-lbl {
  color: rgb(var(--c-muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.bi-receipt .r-sec-head {
  display: flex;
  align-items: center;
  border-top: 1px solid rgb(var(--c-border));
  padding-top: 8px;
}

.bi-receipt .r-audit-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 0;
  border-top: 1px solid rgb(var(--c-border));
  background: transparent;
  padding: 8px 0 0;
  cursor: pointer;
}

.bi-receipt .r-toggle-state,
  .cst-prov-pop .r-toggle-state {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.03em;
}

.bi-receipt .r-toggle-state {
  color: rgb(var(--c-muted));
}

.r-audit-toggle .chev,
  .r-detail-toggle .chev {
  transition: transform 180ms ease;
}

.r-audit-toggle[aria-expanded='true'] .chev,
  .r-detail-toggle[aria-expanded='true'] .chev {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .r-audit-toggle .chev,
    .r-detail-toggle .chev {
    transition: none;
  }
}

.bi-receipt .r-audit-toggle:hover .r-toggle-state,
  .bi-receipt .r-audit-toggle:focus-visible .r-toggle-state {
  color: rgb(var(--c-accent));
}

.bi-receipt .r-audit-toggle:focus-visible {
  outline: none;
}

/* Defect C.2: failed-receipt Details disclosure — .bi-receipt (rail/repository)
     home. Mirrors the audit-toggle + .r-sql treatment on the rail tokens. */

.bi-receipt .r-detail-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 0;
  border-top: 1px solid rgb(var(--c-border));
  background: transparent;
  padding: 8px 0 0;
  margin-top: 10px;
  cursor: pointer;
}

.bi-receipt .r-detail-toggle:hover .r-toggle-state,
  .bi-receipt .r-detail-toggle:focus-visible .r-toggle-state {
  color: rgb(var(--c-accent));
}

.bi-receipt .r-detail-toggle:focus-visible {
  outline: none;
}

.bi-receipt .r-detail {
  margin-top: 7px;
  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 6px;
  background: rgb(var(--c-bg-deep) / 0.5);
  padding: 9px 10px;
  color: rgb(var(--c-text));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.bi-receipt .r-audit {
  margin-top: 7px;
}

.bi-receipt .r-result-head {
  margin-top: 10px;
}

/* SQL displays multi-line (sql-format.js) at a readable mono size: ≥12px,
     1.55 line-height, wrapping — NEVER a one-line horizontal scroller. About
     twelve lines fit before the block scrolls vertically. */

.bi-receipt .r-sql-wrap {
  position: relative;
}

.bi-receipt .r-sql {
  margin: 0;
  max-height: 236px;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 6px;
  background: rgb(var(--c-bg-deep) / 0.5);
  padding: 9px 10px;
  color: rgb(var(--c-text));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.bi-receipt .r-sql-copy,
  .cst-prov-pop .r-sql-copy {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 1;
  border: 1px solid rgb(var(--c-border));
  border-radius: 5px;
  background: rgb(var(--c-surface) / 0.92);
  padding: 2px 8px;
  color: rgb(var(--c-muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
}

.bi-receipt .r-sql-copy:hover,
  .bi-receipt .r-sql-copy:focus-visible,
  .cst-prov-pop .r-sql-copy:hover,
  .cst-prov-pop .r-sql-copy:focus-visible {
  color: rgb(var(--c-accent));
  border-color: rgb(var(--c-accent) / 0.55);
  outline: none;
}

.bi-receipt .r-preview-scroll {
  margin-top: 8px;
  max-width: 100%;
  overflow-x: auto;
}

.bi-receipt .r-preview {
  border-collapse: collapse;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* House table restraint (DESIGN.md bound tables): hairline BOTTOM rules
     only — no full cell boxes, no vertical rules. Matches the cite popover's
     audit preview so the one renderer reads identically in both homes. */

.bi-receipt .r-preview th,
  .bi-receipt .r-preview td {
  border-bottom: 1px solid rgb(var(--c-border));
  padding: 4px 14px 4px 0;
  text-align: left;
  white-space: nowrap;
}

.bi-receipt .r-preview th {
  color: rgb(var(--c-muted));
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.bi-receipt .r-rowcount {
  margin-top: 5px;
  color: rgb(var(--c-muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.bi-receipt .r-q {
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.45;
}

.bi-receipt .r-q a {
  color: rgb(var(--c-accent-strong));
  text-decoration: none;
}

.bi-receipt .r-q a:hover {
  text-decoration: underline;
}

.bi-receipt .r-q .r-q-empty {
  color: rgb(var(--c-muted));
}

.bi-receipt .r-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 9px;
}

.bi-receipt .r-status {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: rgb(var(--c-muted));
  font-variant-numeric: tabular-nums;
}

/* amber for stale or >7d-old-but-ready (Q1, display-only). */

.bi-receipt .r-status.is-stale {
  color: rgb(var(--c-warn));
}

/* the ONE red in the system — a failed last execution. */

.bi-receipt .r-status.is-failed {
  color: rgb(var(--c-down));
}

.bi-receipt .r-btn {
  border: 1px solid rgb(var(--c-border));
  border-radius: 6px;
  background: transparent;
  padding: 3px 10px;
  color: rgb(var(--c-muted));
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: 12px;
  cursor: pointer;
}

.bi-receipt .r-btn:hover {
  border-color: rgba(63, 143, 181, 0.55);
  color: rgb(var(--c-accent));
}

.bi-receipt .r-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgb(var(--c-accent) / 0.18);
}

.bi-receipt .r-btn:disabled {
  cursor: default;
  opacity: 0.6;
}

.bi-entry {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  padding: 0 9px;
  color: rgb(var(--c-muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  cursor: pointer;
}

.bi-entry:hover {
  border-color: rgb(var(--c-border));
  color: rgb(var(--c-text));
}

.bi-entry:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgb(var(--c-accent) / 0.18);
}

.bi-entry .dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgb(var(--c-warn));
}

.bi-repo {
  position: absolute;
  z-index: 60;
  width: 384px;
  border: 1px solid rgb(var(--c-border));
  border-radius: 8px;
  background: rgb(var(--c-surface));
  box-shadow: 0 12px 34px rgba(4, 8, 12, 0.55);
  padding: 4px;
}

.bi-repo .row {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 30px 8px 10px;
  border-radius: 6px;
  cursor: default;
}

.bi-repo .\!row {
  position: relative !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 10px !important;
  padding: 8px 30px 8px 10px !important;
  border-radius: 6px !important;
  cursor: default !important;
}

.bi-repo .row:hover {
  background: rgba(63, 143, 181, 0.10);
}

.bi-repo .\!row:hover {
  background: rgba(63, 143, 181, 0.10) !important;
}

.bi-repo .row:focus-visible {
  outline: none;
  background: rgba(63, 143, 181, 0.10);
  box-shadow: 0 0 0 2px rgb(var(--c-accent) / 0.30) inset;
}

.bi-repo .\!row:focus-visible {
  outline: none !important;
  background: rgba(63, 143, 181, 0.10) !important;
  box-shadow: 0 0 0 2px rgb(var(--c-accent) / 0.30) inset !important;
}

.bi-repo .row .st {
  flex: none;
  align-self: center;
  width: 6px;
  height: 6px;
  border-radius: 999px;
}

.bi-repo .\!row .st {
  flex: none !important;
  align-self: center !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 999px !important;
}

.bi-repo .row .\!st {
  flex: none !important;
  align-self: center !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 999px !important;
}

.bi-repo .row .st.run {
  background: rgb(var(--c-accent));
  animation: biRun 1.6s ease-in-out infinite;
}

.bi-repo .\!row .st.run {
  background: rgb(var(--c-accent)) !important;
  animation: biRun 1.6s ease-in-out infinite !important;
}

.bi-repo .row .\!st.run {
  background: rgb(var(--c-accent)) !important;
  animation: biRun 1.6s ease-in-out infinite !important;
}

.bi-repo .row .st.\!run {
  background: rgb(var(--c-accent)) !important;
  animation: biRun 1.6s ease-in-out infinite !important;
}

.bi-repo .row .st.warn {
  background: rgb(var(--c-warn));
}

.bi-repo .\!row .st.warn {
  background: rgb(var(--c-warn)) !important;
}

.bi-repo .row .\!st.warn {
  background: rgb(var(--c-warn)) !important;
}

@keyframes biRun {
  50% {
    opacity: 0.35;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bi-repo .row .st.run {
    animation: none;
  }

  .bi-repo .\!row .st.run {
    animation: none !important;
  }

  .bi-repo .row .\!st.run {
    animation: none !important;
  }

  .bi-repo .row .st.\!run {
    animation: none !important;
  }
}

.bi-repo .row .v {
  flex: none;
  min-width: 78px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: rgb(var(--c-data));
  font-variant-numeric: tabular-nums;
}

.bi-repo .\!row .v {
  flex: none !important;
  min-width: 78px !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 12px !important;
  color: rgb(var(--c-data)) !important;
  font-variant-numeric: tabular-nums !important;
}

.bi-repo .row .\!v {
  flex: none !important;
  min-width: 78px !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 12px !important;
  color: rgb(var(--c-data)) !important;
  font-variant-numeric: tabular-nums !important;
}

.bi-repo .row .v.pending {
  color: rgb(var(--c-muted));
}

.bi-repo .\!row .v.pending {
  color: rgb(var(--c-muted)) !important;
}

.bi-repo .row .\!v.pending {
  color: rgb(var(--c-muted)) !important;
}

.bi-repo .row .v.\!pending {
  color: rgb(var(--c-muted)) !important;
}

/* TBL-011: a table-verdict row's value cell reads its stored row count
     ("12 rows" / "50+ rows") — mono like every value, muted (a count, not a
     figure) so a scalar's --c-data number still reads as the emphasized value. */

.bi-repo .row .v.is-table {
  color: rgb(var(--c-muted));
}

.bi-repo .\!row .v.is-table {
  color: rgb(var(--c-muted)) !important;
}

.bi-repo .row .\!v.is-table {
  color: rgb(var(--c-muted)) !important;
}

.bi-repo .row .n {
  flex: 1 1 auto;
  min-width: 0;
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: 13px;
  color: rgb(var(--c-text));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bi-repo .\!row .n {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-family: 'Instrument Sans', system-ui, sans-serif !important;
  font-size: 13px !important;
  color: rgb(var(--c-text)) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.bi-repo .row .\!n {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-family: 'Instrument Sans', system-ui, sans-serif !important;
  font-size: 13px !important;
  color: rgb(var(--c-text)) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.bi-repo .row .age {
  flex: none;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: rgb(var(--c-muted));
}

.bi-repo .\!row .age {
  flex: none !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10.5px !important;
  color: rgb(var(--c-muted)) !important;
}

/* DSRC-012b row overflow (⋯) + its menu — the ONLY home for manage actions.
     The ⋯ rides each row (hidden until hover/focus) and opens the Rename / Unlink
     / Remove menu below. */

.bi-repo .row .more {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: rgb(var(--c-muted));
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
}

.bi-repo .\!row .more {
  position: absolute !important;
  right: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 20px !important;
  height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 5px !important;
  background: transparent !important;
  color: rgb(var(--c-muted)) !important;
  font-family: 'Instrument Sans', system-ui, sans-serif !important;
  font-size: 13px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  opacity: 0 !important;
}

.bi-repo .row:hover .more,
  .bi-repo .row .more:focus-visible {
  opacity: 1;
}

.bi-repo .\!row:hover .more,
  .bi-repo .\!row .more:focus-visible {
  opacity: 1 !important;
}

.bi-repo .row .more:hover {
  background: rgb(var(--c-surface));
  color: rgb(var(--c-text));
}

.bi-repo .\!row .more:hover {
  background: rgb(var(--c-surface)) !important;
  color: rgb(var(--c-text)) !important;
}

.bi-repo-menu {
  position: absolute;
  z-index: 80;
  width: 128px;
  border: 1px solid rgb(var(--c-border));
  border-radius: 8px;
  background: rgb(var(--c-surface));
  box-shadow: 0 12px 34px rgba(4, 8, 12, 0.55);
  padding: 4px;
}

.bi-repo-menu button {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 5px;
  background: transparent;
  padding: 6px 9px;
  color: rgb(var(--c-text));
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}

.bi-repo-menu button:hover {
  background: rgba(63, 143, 181, 0.10);
}

/* DSRC-012b: a disabled menu item (Unlink with an honest reason) stays visible
     but muted + non-interactive — NO dead control, the guard is legible. */

.bi-repo-menu button[disabled] {
  color: rgb(var(--c-muted));
  cursor: not-allowed;
}

.bi-repo-menu button[disabled]:hover {
  background: transparent;
}

/* DSRC-012b inline rename: the row's name cell becomes a compact input; a 409
     collision surfaces its copy on the amber hint line just below, in place. */

.bi-repo .row .rename {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bi-repo .\!row .rename {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.bi-repo .row .rename-input {
  width: 100%;
  border: 1px solid rgb(var(--c-accent) / 0.5);
  border-radius: 5px;
  background: rgb(var(--c-bg));
  padding: 2px 6px;
  color: rgb(var(--c-text));
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: 13px;
}

.bi-repo .\!row .rename-input {
  width: 100% !important;
  border: 1px solid rgb(var(--c-accent) / 0.5) !important;
  border-radius: 5px !important;
  background: rgb(var(--c-bg)) !important;
  padding: 2px 6px !important;
  color: rgb(var(--c-text)) !important;
  font-family: 'Instrument Sans', system-ui, sans-serif !important;
  font-size: 13px !important;
}

.bi-repo .row .rename-input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgb(var(--c-accent) / 0.30);
}

.bi-repo .\!row .rename-input:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px rgb(var(--c-accent) / 0.30) !important;
}

.bi-repo .row .rename-hint {
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: 11px;
  color: rgb(var(--c-warn));
}

.bi-repo .\!row .rename-hint {
  font-family: 'Instrument Sans', system-ui, sans-serif !important;
  font-size: 11px !important;
  color: rgb(var(--c-warn)) !important;
}

/* DSRC-012b: the conditional "Refresh N stale" affordance — present ONLY when
     ≥2 sources are stale. A quiet accent action row at the top of the panel;
     its amber dot echoes the entry's attention signal. */

.bi-repo-refresh {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  margin-bottom: 2px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  padding: 7px 10px;
  color: rgb(var(--c-accent));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  text-align: left;
  cursor: pointer;
}

.bi-repo-refresh:hover {
  background: rgba(63, 143, 181, 0.10);
}

.bi-repo-refresh:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgb(var(--c-accent) / 0.30) inset;
}

.bi-repo-refresh .dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgb(var(--c-warn));
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.pointer-events-none {
  pointer-events: none;
}

.pointer-events-auto {
  pointer-events: auto;
}

.\!visible {
  visibility: visible !important;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.collapse {
  visibility: collapse;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.inset-0 {
  inset: 0px;
}

.inset-x-0 {
  left: 0px;
  right: 0px;
}

.-right-1\.5 {
  right: -0.375rem;
}

.-top-1\.5 {
  top: -0.375rem;
}

.-top-2\.5 {
  top: -0.625rem;
}

.bottom-0 {
  bottom: 0px;
}

.bottom-\[22px\] {
  bottom: 22px;
}

.bottom-full {
  bottom: 100%;
}

.left-0 {
  left: 0px;
}

.left-1\/2 {
  left: 50%;
}

.left-2\.5 {
  left: 0.625rem;
}

.left-3 {
  left: 0.75rem;
}

.left-4 {
  left: 1rem;
}

.right-0 {
  right: 0px;
}

.right-2 {
  right: 0.5rem;
}

.right-2\.5 {
  right: 0.625rem;
}

.right-3 {
  right: 0.75rem;
}

.top-0 {
  top: 0px;
}

.top-0\.5 {
  top: 0.125rem;
}

.top-1\/2 {
  top: 50%;
}

.top-12 {
  top: 3rem;
}

.top-2 {
  top: 0.5rem;
}

.top-2\.5 {
  top: 0.625rem;
}

.top-\[105px\] {
  top: 105px;
}

.top-\[calc\(100\%\+8px\)\] {
  top: calc(100% + 8px);
}

.top-full {
  top: 100%;
}

.z-10 {
  z-index: 10;
}

.z-20 {
  z-index: 20;
}

.z-30 {
  z-index: 30;
}

.z-40 {
  z-index: 40;
}

.z-50 {
  z-index: 50;
}

.z-\[100\] {
  z-index: 100;
}

.z-\[110\] {
  z-index: 110;
}

.z-\[120\] {
  z-index: 120;
}

.z-\[1\] {
  z-index: 1;
}

.m-0 {
  margin: 0px;
}

.-mx-1 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}

.-mx-2 {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}

.-mx-3 {
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}

.-mx-5 {
  margin-left: -1.25rem;
  margin-right: -1.25rem;
}

.mx-0\.5 {
  margin-left: 0.125rem;
  margin-right: 0.125rem;
}

.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

.mx-1\.5 {
  margin-left: 0.375rem;
  margin-right: 0.375rem;
}

.mx-5 {
  margin-left: 1.25rem;
  margin-right: 1.25rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.\!mt-0 {
  margin-top: 0px !important;
}

.-mb-3 {
  margin-bottom: -0.75rem;
}

.-mb-px {
  margin-bottom: -1px;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-1\.5 {
  margin-bottom: 0.375rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-2\.5 {
  margin-bottom: 0.625rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-3\.5 {
  margin-bottom: 0.875rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-5 {
  margin-bottom: 1.25rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-7 {
  margin-bottom: 1.75rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.ml-0\.5 {
  margin-left: 0.125rem;
}

.ml-1 {
  margin-left: 0.25rem;
}

.ml-1\.5 {
  margin-left: 0.375rem;
}

.ml-11 {
  margin-left: 2.75rem;
}

.ml-2 {
  margin-left: 0.5rem;
}

.ml-3 {
  margin-left: 0.75rem;
}

.ml-4 {
  margin-left: 1rem;
}

.ml-9 {
  margin-left: 2.25rem;
}

.ml-auto {
  margin-left: auto;
}

.mr-1 {
  margin-right: 0.25rem;
}

.mr-1\.5 {
  margin-right: 0.375rem;
}

.mr-2 {
  margin-right: 0.5rem;
}

.mr-auto {
  margin-right: auto;
}

.mt-0\.5 {
  margin-top: 0.125rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-1\.5 {
  margin-top: 0.375rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-2\.5 {
  margin-top: 0.625rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-3\.5 {
  margin-top: 0.875rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-5 {
  margin-top: 1.25rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-8 {
  margin-top: 2rem;
}

.mt-\[6px\] {
  margin-top: 6px;
}

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.\!block {
  display: block !important;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.\!table {
  display: table !important;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.inline-grid {
  display: inline-grid;
}

.contents {
  display: contents;
}

.hidden {
  display: none;
}

.h-0\.5 {
  height: 0.125rem;
}

.h-1\.5 {
  height: 0.375rem;
}

.h-10 {
  height: 2.5rem;
}

.h-11 {
  height: 2.75rem;
}

.h-12 {
  height: 3rem;
}

.h-14 {
  height: 3.5rem;
}

.h-16 {
  height: 4rem;
}

.h-2 {
  height: 0.5rem;
}

.h-2\.5 {
  height: 0.625rem;
}

.h-28 {
  height: 7rem;
}

.h-3 {
  height: 0.75rem;
}

.h-3\.5 {
  height: 0.875rem;
}

.h-4 {
  height: 1rem;
}

.h-5 {
  height: 1.25rem;
}

.h-6 {
  height: 1.5rem;
}

.h-7 {
  height: 1.75rem;
}

.h-8 {
  height: 2rem;
}

.h-9 {
  height: 2.25rem;
}

.h-\[110px\] {
  height: 110px;
}

.h-\[11px\] {
  height: 11px;
}

.h-\[13px\] {
  height: 13px;
}

.h-\[14px\] {
  height: 14px;
}

.h-\[15px\] {
  height: 15px;
}

.h-\[17px\] {
  height: 17px;
}

.h-\[18px\] {
  height: 18px;
}

.h-\[22px\] {
  height: 22px;
}

.h-\[34px\] {
  height: 34px;
}

.h-\[360px\] {
  height: 360px;
}

.h-\[52px\] {
  height: 52px;
}

.h-\[7px\] {
  height: 7px;
}

.h-\[calc\(100dvh-116px\)\] {
  height: calc(100dvh - 116px);
}

.h-dvh {
  height: 100dvh;
}

.h-full {
  height: 100%;
}

.h-px {
  height: 1px;
}

.max-h-40 {
  max-height: 10rem;
}

.max-h-44 {
  max-height: 11rem;
}

.max-h-60 {
  max-height: 15rem;
}

.max-h-64 {
  max-height: 16rem;
}

.max-h-80 {
  max-height: 20rem;
}

.max-h-96 {
  max-height: 24rem;
}

.max-h-\[32rem\] {
  max-height: 32rem;
}

.max-h-\[420px\] {
  max-height: 420px;
}

.max-h-\[440px\] {
  max-height: 440px;
}

.max-h-\[46vh\] {
  max-height: 46vh;
}

.max-h-\[520px\] {
  max-height: 520px;
}

.max-h-\[560px\] {
  max-height: 560px;
}

.max-h-\[65vh\] {
  max-height: 65vh;
}

.max-h-\[calc\(100vh-2rem\)\] {
  max-height: calc(100vh - 2rem);
}

.max-h-\[min\(720px\2c calc\(100vh-3rem\)\)\] {
  max-height: min(720px, calc(100vh - 3rem));
}

.max-h-full {
  max-height: 100%;
}

.min-h-0 {
  min-height: 0px;
}

.min-h-10 {
  min-height: 2.5rem;
}

.min-h-4 {
  min-height: 1rem;
}

.min-h-5 {
  min-height: 1.25rem;
}

.min-h-\[120px\] {
  min-height: 120px;
}

.min-h-\[180px\] {
  min-height: 180px;
}

.min-h-\[220px\] {
  min-height: 220px;
}

.min-h-\[260px\] {
  min-height: 260px;
}

.min-h-\[26px\] {
  min-height: 26px;
}

.min-h-\[420px\] {
  min-height: 420px;
}

.min-h-\[42px\] {
  min-height: 42px;
}

.min-h-\[440px\] {
  min-height: 440px;
}

.min-h-\[520px\] {
  min-height: 520px;
}

.min-h-\[52px\] {
  min-height: 52px;
}

.min-h-\[56px\] {
  min-height: 56px;
}

.min-h-\[60vh\] {
  min-height: 60vh;
}

.min-h-\[64px\] {
  min-height: 64px;
}

.min-h-\[86px\] {
  min-height: 86px;
}

.min-h-\[96px\] {
  min-height: 96px;
}

.min-h-\[calc\(100dvh-116px\)\] {
  min-height: calc(100dvh - 116px);
}

.min-h-full {
  min-height: 100%;
}

.min-h-screen {
  min-height: 100vh;
}

.w-1\.5 {
  width: 0.375rem;
}

.w-1\/2 {
  width: 50%;
}

.w-10 {
  width: 2.5rem;
}

.w-11 {
  width: 2.75rem;
}

.w-11\/12 {
  width: 91.666667%;
}

.w-12 {
  width: 3rem;
}

.w-14 {
  width: 3.5rem;
}

.w-16 {
  width: 4rem;
}

.w-2 {
  width: 0.5rem;
}

.w-2\.5 {
  width: 0.625rem;
}

.w-2\/3 {
  width: 66.666667%;
}

.w-2\/5 {
  width: 40%;
}

.w-20 {
  width: 5rem;
}

.w-24 {
  width: 6rem;
}

.w-28 {
  width: 7rem;
}

.w-3 {
  width: 0.75rem;
}

.w-3\.5 {
  width: 0.875rem;
}

.w-3\/4 {
  width: 75%;
}

.w-32 {
  width: 8rem;
}

.w-4 {
  width: 1rem;
}

.w-4\/5 {
  width: 80%;
}

.w-40 {
  width: 10rem;
}

.w-44 {
  width: 11rem;
}

.w-48 {
  width: 12rem;
}

.w-5 {
  width: 1.25rem;
}

.w-56 {
  width: 14rem;
}

.w-6 {
  width: 1.5rem;
}

.w-64 {
  width: 16rem;
}

.w-7 {
  width: 1.75rem;
}

.w-72 {
  width: 18rem;
}

.w-8 {
  width: 2rem;
}

.w-9 {
  width: 2.25rem;
}

.w-\[1\.2em\] {
  width: 1.2em;
}

.w-\[11px\] {
  width: 11px;
}

.w-\[128px\] {
  width: 128px;
}

.w-\[130px\] {
  width: 130px;
}

.w-\[13px\] {
  width: 13px;
}

.w-\[14px\] {
  width: 14px;
}

.w-\[150px\] {
  width: 150px;
}

.w-\[15px\] {
  width: 15px;
}

.w-\[17px\] {
  width: 17px;
}

.w-\[18px\] {
  width: 18px;
}

.w-\[22px\] {
  width: 22px;
}

.w-\[264px\] {
  width: 264px;
}

.w-\[26px\] {
  width: 26px;
}

.w-\[300px\] {
  width: 300px;
}

.w-\[34px\] {
  width: 34px;
}

.w-\[360px\] {
  width: 360px;
}

.w-\[38px\] {
  width: 38px;
}

.w-\[400px\] {
  width: 400px;
}

.w-\[420px\] {
  width: 420px;
}

.w-\[54px\] {
  width: 54px;
}

.w-\[74px\] {
  width: 74px;
}

.w-\[7px\] {
  width: 7px;
}

.w-\[84px\] {
  width: 84px;
}

.w-\[88\%\] {
  width: 88%;
}

.w-\[90\%\] {
  width: 90%;
}

.w-\[92\%\] {
  width: 92%;
}

.w-\[92px\] {
  width: 92px;
}

.w-\[94\%\] {
  width: 94%;
}

.w-\[96\%\] {
  width: 96%;
}

.w-auto {
  width: auto;
}

.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}

.w-full {
  width: 100%;
}

.w-max {
  width: -moz-max-content;
  width: max-content;
}

.w-px {
  width: 1px;
}

.min-w-0 {
  min-width: 0px;
}

.min-w-\[100px\] {
  min-width: 100px;
}

.min-w-\[10rem\] {
  min-width: 10rem;
}

.min-w-\[12rem\] {
  min-width: 12rem;
}

.min-w-\[13rem\] {
  min-width: 13rem;
}

.min-w-\[16rem\] {
  min-width: 16rem;
}

.min-w-\[200px\] {
  min-width: 200px;
}

.min-w-\[210px\] {
  min-width: 210px;
}

.min-w-\[220px\] {
  min-width: 220px;
}

.min-w-\[240px\] {
  min-width: 240px;
}

.min-w-\[250px\] {
  min-width: 250px;
}

.min-w-\[260px\] {
  min-width: 260px;
}

.min-w-\[4\.75rem\] {
  min-width: 4.75rem;
}

.min-w-\[420px\] {
  min-width: 420px;
}

.min-w-\[6px\] {
  min-width: 6px;
}

.min-w-\[760px\] {
  min-width: 760px;
}

.min-w-\[8rem\] {
  min-width: 8rem;
}

.min-w-\[9rem\] {
  min-width: 9rem;
}

.min-w-full {
  min-width: 100%;
}

.max-w-0 {
  max-width: 0px;
}

.max-w-2xl {
  max-width: 42rem;
}

.max-w-3xl {
  max-width: 48rem;
}

.max-w-4xl {
  max-width: 56rem;
}

.max-w-5xl {
  max-width: 64rem;
}

.max-w-6xl {
  max-width: 72rem;
}

.max-w-7xl {
  max-width: 80rem;
}

.max-w-\[1120px\] {
  max-width: 1120px;
}

.max-w-\[1280px\] {
  max-width: 1280px;
}

.max-w-\[150px\] {
  max-width: 150px;
}

.max-w-\[180px\] {
  max-width: 180px;
}

.max-w-\[200px\] {
  max-width: 200px;
}

.max-w-\[220px\] {
  max-width: 220px;
}

.max-w-\[24rem\] {
  max-width: 24rem;
}

.max-w-\[280px\] {
  max-width: 280px;
}

.max-w-\[300px\] {
  max-width: 300px;
}

.max-w-\[360px\] {
  max-width: 360px;
}

.max-w-\[400px\] {
  max-width: 400px;
}

.max-w-\[440px\] {
  max-width: 440px;
}

.max-w-\[44vw\] {
  max-width: 44vw;
}

.max-w-\[480px\] {
  max-width: 480px;
}

.max-w-\[560px\] {
  max-width: 560px;
}

.max-w-\[56ch\] {
  max-width: 56ch;
}

.max-w-\[640px\] {
  max-width: 640px;
}

.max-w-\[720px\] {
  max-width: 720px;
}

.max-w-\[760px\] {
  max-width: 760px;
}

.max-w-\[820px\] {
  max-width: 820px;
}

.max-w-\[880px\] {
  max-width: 880px;
}

.max-w-\[88vw\] {
  max-width: 88vw;
}

.max-w-\[min\(460px\2c calc\(100vw-24px\)\)\] {
  max-width: min(460px, calc(100vw - 24px));
}

.max-w-full {
  max-width: 100%;
}

.max-w-lg {
  max-width: 32rem;
}

.max-w-md {
  max-width: 28rem;
}

.max-w-sm {
  max-width: 24rem;
}

.max-w-xl {
  max-width: 36rem;
}

.max-w-xs {
  max-width: 20rem;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-shrink {
  flex-shrink: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.shrink {
  flex-shrink: 1;
}

.shrink-0 {
  flex-shrink: 0;
}

.grow {
  flex-grow: 1;
}

.basis-\[320px\] {
  flex-basis: 320px;
}

.border-collapse {
  border-collapse: collapse;
}

.border-separate {
  border-collapse: separate;
}

.border-spacing-0 {
  --tw-border-spacing-x: 0px;
  --tw-border-spacing-y: 0px;
  border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
}

.origin-left {
  transform-origin: left;
}

.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-px {
  --tw-translate-y: -1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-0 {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-0\.5 {
  --tw-translate-x: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-4 {
  --tw-translate-x: 1rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-5 {
  --tw-translate-x: 1.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-full {
  --tw-translate-x: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-90 {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-100 {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-95 {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-x-0 {
  --tw-scale-x: 0;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-wait {
  cursor: wait;
}

.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.select-all {
  -webkit-user-select: all;
     -moz-user-select: all;
          user-select: all;
}

.resize-none {
  resize: none;
}

.resize-y {
  resize: vertical;
}

.resize {
  resize: both;
}

.list-decimal {
  list-style-type: decimal;
}

.list-disc {
  list-style-type: disc;
}

.list-none {
  list-style-type: none;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-\[repeat\(auto-fit\2c minmax\(360px\2c 1fr\)\)\] {
  grid-template-columns: repeat(auto-fit,minmax(360px,1fr));
}

.flex-col {
  flex-direction: column;
}

.flex-col-reverse {
  flex-direction: column-reverse;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.place-items-center {
  place-items: center;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-0\.5 {
  gap: 0.125rem;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-1\.5 {
  gap: 0.375rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-2\.5 {
  gap: 0.625rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-3\.5 {
  gap: 0.875rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-\[5px\] {
  gap: 5px;
}

.gap-x-1\.5 {
  -moz-column-gap: 0.375rem;
       column-gap: 0.375rem;
}

.gap-x-2 {
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}

.gap-x-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}

.gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}

.gap-x-5 {
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
}

.gap-x-7 {
  -moz-column-gap: 1.75rem;
       column-gap: 1.75rem;
}

.gap-x-8 {
  -moz-column-gap: 2rem;
       column-gap: 2rem;
}

.gap-y-0\.5 {
  row-gap: 0.125rem;
}

.gap-y-1 {
  row-gap: 0.25rem;
}

.gap-y-1\.5 {
  row-gap: 0.375rem;
}

.gap-y-3 {
  row-gap: 0.75rem;
}

.gap-y-3\.5 {
  row-gap: 0.875rem;
}

.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}

.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
}

.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}

.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}

.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.divide-hairline > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(var(--c-border) / var(--tw-divide-opacity, 1));
}

.divide-hairline\/60 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(var(--c-border) / 0.6);
}

.divide-up\/20 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(var(--c-up) / 0.2);
}

.self-start {
  align-self: flex-start;
}

.self-center {
  align-self: center;
}

.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-visible {
  overflow: visible;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-y-auto {
  overflow-y: auto;
}

.overscroll-contain {
  overscroll-behavior: contain;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-ellipsis {
  text-overflow: ellipsis;
}

.whitespace-normal {
  white-space: normal;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.whitespace-pre {
  white-space: pre;
}

.whitespace-pre-line {
  white-space: pre-line;
}

.whitespace-pre-wrap {
  white-space: pre-wrap;
}

.text-wrap {
  text-wrap: wrap;
}

.break-words {
  overflow-wrap: break-word;
}

.break-all {
  word-break: break-all;
}

.rounded {
  border-radius: 0.25rem;
}

.rounded-2xl {
  border-radius: 1rem;
}

.rounded-\[10px\] {
  border-radius: 10px;
}

.rounded-\[4px\] {
  border-radius: 4px;
}

.rounded-\[8px\] {
  border-radius: 8px;
}

.rounded-\[9px\] {
  border-radius: 9px;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-lg {
  border-radius: 12px;
}

.rounded-md {
  border-radius: 8px;
}

.rounded-sm {
  border-radius: 4px;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.rounded-b-lg {
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;
}

.rounded-b-none {
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}

.rounded-l-lg {
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

.rounded-r-lg {
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

.rounded-tr-none {
  border-top-right-radius: 0px;
}

.border {
  border-width: 1px;
}

.border-2 {
  border-width: 2px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-b-0 {
  border-bottom-width: 0px;
}

.border-b-2 {
  border-bottom-width: 2px;
}

.border-l {
  border-left-width: 1px;
}

.border-l-2 {
  border-left-width: 2px;
}

.border-l-\[3px\] {
  border-left-width: 3px;
}

.border-r {
  border-right-width: 1px;
}

.border-t {
  border-top-width: 1px;
}

.border-t-2 {
  border-top-width: 2px;
}

.border-dashed {
  border-style: dashed;
}

.border-\[\#E0DFDC\] {
  --tw-border-opacity: 1;
  border-color: rgb(224 223 220 / var(--tw-border-opacity, 1));
}

.border-accent {
  --tw-border-opacity: 1;
  border-color: rgb(var(--c-accent) / var(--tw-border-opacity, 1));
}

.border-accent\/20 {
  border-color: rgb(var(--c-accent) / 0.2);
}

.border-accent\/25 {
  border-color: rgb(var(--c-accent) / 0.25);
}

.border-accent\/30 {
  border-color: rgb(var(--c-accent) / 0.3);
}

.border-accent\/35 {
  border-color: rgb(var(--c-accent) / 0.35);
}

.border-accent\/40 {
  border-color: rgb(var(--c-accent) / 0.4);
}

.border-accent\/45 {
  border-color: rgb(var(--c-accent) / 0.45);
}

.border-accent\/55 {
  border-color: rgb(var(--c-accent) / 0.55);
}

.border-accent\/60 {
  border-color: rgb(var(--c-accent) / 0.6);
}

.border-down {
  --tw-border-opacity: 1;
  border-color: rgb(var(--c-down) / var(--tw-border-opacity, 1));
}

.border-down\/15 {
  border-color: rgb(var(--c-down) / 0.15);
}

.border-down\/20 {
  border-color: rgb(var(--c-down) / 0.2);
}

.border-down\/25 {
  border-color: rgb(var(--c-down) / 0.25);
}

.border-down\/30 {
  border-color: rgb(var(--c-down) / 0.3);
}

.border-down\/40 {
  border-color: rgb(var(--c-down) / 0.4);
}

.border-down\/60 {
  border-color: rgb(var(--c-down) / 0.6);
}

.border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}

.border-hairline {
  --tw-border-opacity: 1;
  border-color: rgb(var(--c-border) / var(--tw-border-opacity, 1));
}

.border-hairline\/50 {
  border-color: rgb(var(--c-border) / 0.5);
}

.border-hairline\/60 {
  border-color: rgb(var(--c-border) / 0.6);
}

.border-ink {
  --tw-border-opacity: 1;
  border-color: rgb(var(--c-ink) / var(--tw-border-opacity, 1));
}

.border-sidebar-border {
  --tw-border-opacity: 1;
  border-color: rgb(var(--c-sidebar-border) / var(--tw-border-opacity, 1));
}

.border-stone-100 {
  --tw-border-opacity: 1;
  border-color: rgb(245 245 244 / var(--tw-border-opacity, 1));
}

.border-stone-200 {
  --tw-border-opacity: 1;
  border-color: rgb(231 229 228 / var(--tw-border-opacity, 1));
}

.border-stone-300 {
  --tw-border-opacity: 1;
  border-color: rgb(214 211 209 / var(--tw-border-opacity, 1));
}

.border-transparent {
  border-color: transparent;
}

.border-up\/20 {
  border-color: rgb(var(--c-up) / 0.2);
}

.border-up\/30 {
  border-color: rgb(var(--c-up) / 0.3);
}

.border-up\/40 {
  border-color: rgb(var(--c-up) / 0.4);
}

.border-warn {
  --tw-border-opacity: 1;
  border-color: rgb(var(--c-warn) / var(--tw-border-opacity, 1));
}

.border-warn\/20 {
  border-color: rgb(var(--c-warn) / 0.2);
}

.border-warn\/30 {
  border-color: rgb(var(--c-warn) / 0.3);
}

.border-warn\/40 {
  border-color: rgb(var(--c-warn) / 0.4);
}

.border-warn\/70 {
  border-color: rgb(var(--c-warn) / 0.7);
}

.border-white {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.border-white\/30 {
  border-color: rgb(255 255 255 / 0.3);
}

.border-l-accent {
  --tw-border-opacity: 1;
  border-left-color: rgb(var(--c-accent) / var(--tw-border-opacity, 1));
}

.border-l-transparent {
  border-left-color: transparent;
}

.border-t-transparent {
  border-top-color: transparent;
}

.bg-\[\#075E54\] {
  --tw-bg-opacity: 1;
  background-color: rgb(7 94 84 / var(--tw-bg-opacity, 1));
}

.bg-\[\#0F2230\] {
  --tw-bg-opacity: 1;
  background-color: rgb(15 34 48 / var(--tw-bg-opacity, 1));
}

.bg-\[\#DCF8C6\] {
  --tw-bg-opacity: 1;
  background-color: rgb(220 248 198 / var(--tw-bg-opacity, 1));
}

.bg-\[\#E5DDD5\] {
  --tw-bg-opacity: 1;
  background-color: rgb(229 221 213 / var(--tw-bg-opacity, 1));
}

.bg-\[\#F4F2EE\] {
  --tw-bg-opacity: 1;
  background-color: rgb(244 242 238 / var(--tw-bg-opacity, 1));
}

.bg-accent {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-accent) / var(--tw-bg-opacity, 1));
}

.bg-accent\/10 {
  background-color: rgb(var(--c-accent) / 0.1);
}

.bg-accent\/15 {
  background-color: rgb(var(--c-accent) / 0.15);
}

.bg-accent\/20 {
  background-color: rgb(var(--c-accent) / 0.2);
}

.bg-accent\/5 {
  background-color: rgb(var(--c-accent) / 0.05);
}

.bg-accent\/70 {
  background-color: rgb(var(--c-accent) / 0.7);
}

.bg-accent\/80 {
  background-color: rgb(var(--c-accent) / 0.8);
}

.bg-accent\/\[0\.03\] {
  background-color: rgb(var(--c-accent) / 0.03);
}

.bg-accent\/\[0\.06\] {
  background-color: rgb(var(--c-accent) / 0.06);
}

.bg-accent\/\[0\.08\] {
  background-color: rgb(var(--c-accent) / 0.08);
}

.bg-black\/30 {
  background-color: rgb(0 0 0 / 0.3);
}

.bg-current {
  background-color: currentColor;
}

.bg-down {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-down) / var(--tw-bg-opacity, 1));
}

.bg-down\/10 {
  background-color: rgb(var(--c-down) / 0.1);
}

.bg-down\/15 {
  background-color: rgb(var(--c-down) / 0.15);
}

.bg-down\/5 {
  background-color: rgb(var(--c-down) / 0.05);
}

.bg-down\/80 {
  background-color: rgb(var(--c-down) / 0.8);
}

.bg-gray-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.bg-hairline {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-border) / var(--tw-bg-opacity, 1));
}

.bg-ink {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-ink) / var(--tw-bg-opacity, 1));
}

.bg-ink\/50 {
  background-color: rgb(var(--c-ink) / 0.5);
}

.bg-ink\/80 {
  background-color: rgb(var(--c-ink) / 0.8);
}

.bg-sidebar-hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-sidebar-hover) / var(--tw-bg-opacity, 1));
}

.bg-stone-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 249 / var(--tw-bg-opacity, 1));
}

.bg-stone-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(68 64 60 / var(--tw-bg-opacity, 1));
}

.bg-subtle {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-muted) / var(--tw-bg-opacity, 1));
}

.bg-subtle\/40 {
  background-color: rgb(var(--c-muted) / 0.4);
}

.bg-subtle\/60 {
  background-color: rgb(var(--c-muted) / 0.6);
}

.bg-surface {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-bg) / var(--tw-bg-opacity, 1));
}

.bg-surface-card {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-surface) / var(--tw-bg-opacity, 1));
}

.bg-surface-card\/40 {
  background-color: rgb(var(--c-surface) / 0.4);
}

.bg-surface-card\/50 {
  background-color: rgb(var(--c-surface) / 0.5);
}

.bg-surface-card\/60 {
  background-color: rgb(var(--c-surface) / 0.6);
}

.bg-surface-card\/70 {
  background-color: rgb(var(--c-surface) / 0.7);
}

.bg-surface-card\/80 {
  background-color: rgb(var(--c-surface) / 0.8);
}

.bg-surface-deep {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-bg-deep) / var(--tw-bg-opacity, 1));
}

.bg-surface-deep\/40 {
  background-color: rgb(var(--c-bg-deep) / 0.4);
}

.bg-surface-deep\/60 {
  background-color: rgb(var(--c-bg-deep) / 0.6);
}

.bg-surface-muted {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-surface-muted) / var(--tw-bg-opacity, 1));
}

.bg-surface-muted\/40 {
  background-color: rgb(var(--c-surface-muted) / 0.4);
}

.bg-surface-muted\/60 {
  background-color: rgb(var(--c-surface-muted) / 0.6);
}

.bg-surface-muted\/70 {
  background-color: rgb(var(--c-surface-muted) / 0.7);
}

.bg-surface\/95 {
  background-color: rgb(var(--c-bg) / 0.95);
}

.bg-transparent {
  background-color: transparent;
}

.bg-up {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-up) / var(--tw-bg-opacity, 1));
}

.bg-up\/10 {
  background-color: rgb(var(--c-up) / 0.1);
}

.bg-up\/15 {
  background-color: rgb(var(--c-up) / 0.15);
}

.bg-up\/80 {
  background-color: rgb(var(--c-up) / 0.8);
}

.bg-warn {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-warn) / var(--tw-bg-opacity, 1));
}

.bg-warn\/10 {
  background-color: rgb(var(--c-warn) / 0.1);
}

.bg-warn\/15 {
  background-color: rgb(var(--c-warn) / 0.15);
}

.bg-warn\/25 {
  background-color: rgb(var(--c-warn) / 0.25);
}

.bg-warn\/5 {
  background-color: rgb(var(--c-warn) / 0.05);
}

.bg-warn\/80 {
  background-color: rgb(var(--c-warn) / 0.8);
}

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.bg-white\/75 {
  background-color: rgb(255 255 255 / 0.75);
}

.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}

.from-accent-strong {
  --tw-gradient-from: rgb(var(--c-accent-strong) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--c-accent-strong) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-surface-card {
  --tw-gradient-from: rgb(var(--c-surface) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--c-surface) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-accent {
  --tw-gradient-to: rgb(var(--c-accent) / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(var(--c-accent) / 1) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.to-accent\/70 {
  --tw-gradient-to: rgb(var(--c-accent) / 0.7) var(--tw-gradient-to-position);
}

.to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}

.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}

.p-0\.5 {
  padding: 0.125rem;
}

.p-1 {
  padding: 0.25rem;
}

.p-1\.5 {
  padding: 0.375rem;
}

.p-2 {
  padding: 0.5rem;
}

.p-2\.5 {
  padding: 0.625rem;
}

.p-3 {
  padding: 0.75rem;
}

.p-3\.5 {
  padding: 0.875rem;
}

.p-4 {
  padding: 1rem;
}

.p-5 {
  padding: 1.25rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-8 {
  padding: 2rem;
}

.p-\[3px\] {
  padding: 3px;
}

.px-0 {
  padding-left: 0px;
  padding-right: 0px;
}

.px-0\.5 {
  padding-left: 0.125rem;
  padding-right: 0.125rem;
}

.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}

.px-10 {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-3\.5 {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-\[18px\] {
  padding-left: 18px;
  padding-right: 18px;
}

.py-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}

.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py-14 {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-7 {
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.py-\[3px\] {
  padding-top: 3px;
  padding-bottom: 3px;
}

.py-\[5px\] {
  padding-top: 5px;
  padding-bottom: 5px;
}

.py-\[9px\] {
  padding-top: 9px;
  padding-bottom: 9px;
}

.py-px {
  padding-top: 1px;
  padding-bottom: 1px;
}

.pb-1 {
  padding-bottom: 0.25rem;
}

.pb-1\.5 {
  padding-bottom: 0.375rem;
}

.pb-16 {
  padding-bottom: 4rem;
}

.pb-2 {
  padding-bottom: 0.5rem;
}

.pb-2\.5 {
  padding-bottom: 0.625rem;
}

.pb-3 {
  padding-bottom: 0.75rem;
}

.pb-4 {
  padding-bottom: 1rem;
}

.pb-5 {
  padding-bottom: 1.25rem;
}

.pb-8 {
  padding-bottom: 2rem;
}

.pl-1 {
  padding-left: 0.25rem;
}

.pl-10 {
  padding-left: 2.5rem;
}

.pl-2 {
  padding-left: 0.5rem;
}

.pl-2\.5 {
  padding-left: 0.625rem;
}

.pl-3 {
  padding-left: 0.75rem;
}

.pl-4 {
  padding-left: 1rem;
}

.pl-5 {
  padding-left: 1.25rem;
}

.pl-8 {
  padding-left: 2rem;
}

.pl-9 {
  padding-left: 2.25rem;
}

.pl-\[13px\] {
  padding-left: 13px;
}

.pr-1 {
  padding-right: 0.25rem;
}

.pr-10 {
  padding-right: 2.5rem;
}

.pr-16 {
  padding-right: 4rem;
}

.pr-20 {
  padding-right: 5rem;
}

.pr-3 {
  padding-right: 0.75rem;
}

.pr-4 {
  padding-right: 1rem;
}

.pr-8 {
  padding-right: 2rem;
}

.pt-0\.5 {
  padding-top: 0.125rem;
}

.pt-1 {
  padding-top: 0.25rem;
}

.pt-1\.5 {
  padding-top: 0.375rem;
}

.pt-2 {
  padding-top: 0.5rem;
}

.pt-3 {
  padding-top: 0.75rem;
}

.pt-3\.5 {
  padding-top: 0.875rem;
}

.pt-4 {
  padding-top: 1rem;
}

.pt-5 {
  padding-top: 1.25rem;
}

.pt-6 {
  padding-top: 1.5rem;
}

.pt-8 {
  padding-top: 2rem;
}

.pt-\[18px\] {
  padding-top: 18px;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.align-top {
  vertical-align: top;
}

.align-middle {
  vertical-align: middle;
}

.font-display {
  font-family: Fraunces, Georgia, serif;
}

.font-mono {
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

.font-sans {
  font-family: "Instrument Sans", system-ui, sans-serif;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-\[10\.5px\] {
  font-size: 10.5px;
}

.text-\[10px\] {
  font-size: 10px;
}

.text-\[11\.5px\] {
  font-size: 11.5px;
}

.text-\[11px\] {
  font-size: 11px;
}

.text-\[12\.5px\] {
  font-size: 12.5px;
}

.text-\[12px\] {
  font-size: 12px;
}

.text-\[13\.5px\] {
  font-size: 13.5px;
}

.text-\[13px\] {
  font-size: 13px;
}

.text-\[14\.5px\] {
  font-size: 14.5px;
}

.text-\[14px\] {
  font-size: 14px;
}

.text-\[15px\] {
  font-size: 15px;
}

.text-\[16px\] {
  font-size: 16px;
}

.text-\[17px\] {
  font-size: 17px;
}

.text-\[18px\] {
  font-size: 18px;
}

.text-\[19px\] {
  font-size: 19px;
}

.text-\[20px\] {
  font-size: 20px;
}

.text-\[21px\] {
  font-size: 21px;
}

.text-\[22px\] {
  font-size: 22px;
}

.text-\[23px\] {
  font-size: 23px;
}

.text-\[26px\] {
  font-size: 26px;
}

.text-\[28px\] {
  font-size: 28px;
}

.text-\[30px\] {
  font-size: 30px;
}

.text-\[34px\] {
  font-size: 34px;
}

.text-\[39px\] {
  font-size: 39px;
}

.text-\[8\.5px\] {
  font-size: 8.5px;
}

.text-\[9\.5px\] {
  font-size: 9.5px;
}

.text-\[9px\] {
  font-size: 9px;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-bold {
  font-weight: 700;
}

.font-medium {
  font-weight: 500;
}

.font-normal {
  font-weight: 400;
}

.font-semibold {
  font-weight: 600;
}

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

.normal-case {
  text-transform: none;
}

.italic {
  font-style: italic;
}

.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.leading-4 {
  line-height: 1rem;
}

.leading-5 {
  line-height: 1.25rem;
}

.leading-6 {
  line-height: 1.5rem;
}

.leading-\[1\.12\] {
  line-height: 1.12;
}

.leading-\[1\.22\] {
  line-height: 1.22;
}

.leading-\[1\.25\] {
  line-height: 1.25;
}

.leading-\[1\.3\] {
  line-height: 1.3;
}

.leading-\[1\.55\] {
  line-height: 1.55;
}

.leading-\[1\.5\] {
  line-height: 1.5;
}

.leading-\[1\.65\] {
  line-height: 1.65;
}

.leading-\[1\.75\] {
  line-height: 1.75;
}

.leading-\[1\.7\] {
  line-height: 1.7;
}

.leading-none {
  line-height: 1;
}

.leading-relaxed {
  line-height: 1.625;
}

.leading-snug {
  line-height: 1.375;
}

.leading-tight {
  line-height: 1.25;
}

.tracking-\[-0\.01em\] {
  letter-spacing: -0.01em;
}

.tracking-\[\.05em\] {
  letter-spacing: .05em;
}

.tracking-\[\.08em\] {
  letter-spacing: .08em;
}

.tracking-\[\.12em\] {
  letter-spacing: .12em;
}

.tracking-\[\.14em\] {
  letter-spacing: .14em;
}

.tracking-\[\.16em\] {
  letter-spacing: .16em;
}

.tracking-\[\.1em\] {
  letter-spacing: .1em;
}

.tracking-\[0\.04em\] {
  letter-spacing: 0.04em;
}

.tracking-\[0\.08em\] {
  letter-spacing: 0.08em;
}

.tracking-\[0\.12em\] {
  letter-spacing: 0.12em;
}

.tracking-\[0\.14em\] {
  letter-spacing: 0.14em;
}

.tracking-\[0\.1em\] {
  letter-spacing: 0.1em;
}

.tracking-normal {
  letter-spacing: 0em;
}

.tracking-wide {
  letter-spacing: 0.025em;
}

.tracking-wider {
  letter-spacing: 0.05em;
}

.text-\[\#111111\] {
  --tw-text-opacity: 1;
  color: rgb(17 17 17 / var(--tw-text-opacity, 1));
}

.text-\[\#191919\] {
  --tw-text-opacity: 1;
  color: rgb(25 25 25 / var(--tw-text-opacity, 1));
}

.text-\[\#34B7F1\] {
  --tw-text-opacity: 1;
  color: rgb(52 183 241 / var(--tw-text-opacity, 1));
}

.text-\[\#666666\] {
  --tw-text-opacity: 1;
  color: rgb(102 102 102 / var(--tw-text-opacity, 1));
}

.text-\[\#6a7c72\] {
  --tw-text-opacity: 1;
  color: rgb(106 124 114 / var(--tw-text-opacity, 1));
}

.text-accent {
  --tw-text-opacity: 1;
  color: rgb(var(--c-accent) / var(--tw-text-opacity, 1));
}

.text-accent-dim {
  --tw-text-opacity: 1;
  color: rgb(var(--c-accent-strong) / var(--tw-text-opacity, 1));
}

.text-accent-light {
  --tw-text-opacity: 1;
  color: rgb(var(--c-accent-strong) / var(--tw-text-opacity, 1));
}

.text-accent-strong {
  --tw-text-opacity: 1;
  color: rgb(var(--c-accent-strong) / var(--tw-text-opacity, 1));
}

.text-accent\/40 {
  color: rgb(var(--c-accent) / 0.4);
}

.text-accent\/70 {
  color: rgb(var(--c-accent) / 0.7);
}

.text-amber-400\/90 {
  color: rgb(251 191 36 / 0.9);
}

.text-body {
  --tw-text-opacity: 1;
  color: rgb(var(--c-text) / var(--tw-text-opacity, 1));
}

.text-data {
  --tw-text-opacity: 1;
  color: rgb(var(--c-data) / var(--tw-text-opacity, 1));
}

.text-down {
  --tw-text-opacity: 1;
  color: rgb(var(--c-down) / var(--tw-text-opacity, 1));
}

.text-down\/50 {
  color: rgb(var(--c-down) / 0.5);
}

.text-down\/70 {
  color: rgb(var(--c-down) / 0.7);
}

.text-down\/90 {
  color: rgb(var(--c-down) / 0.9);
}

.text-emerald-400\/90 {
  color: rgb(52 211 153 / 0.9);
}

.text-hairline {
  --tw-text-opacity: 1;
  color: rgb(var(--c-border) / var(--tw-text-opacity, 1));
}

.text-ink {
  --tw-text-opacity: 1;
  color: rgb(var(--c-ink) / var(--tw-text-opacity, 1));
}

.text-ink\/70 {
  color: rgb(var(--c-ink) / 0.7);
}

.text-red-300 {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}

.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}

.text-sidebar-accent {
  --tw-text-opacity: 1;
  color: rgb(var(--c-sidebar-accent) / var(--tw-text-opacity, 1));
}

.text-sidebar-ink {
  --tw-text-opacity: 1;
  color: rgb(var(--c-sidebar-ink) / var(--tw-text-opacity, 1));
}

.text-sidebar-muted {
  --tw-text-opacity: 1;
  color: rgb(var(--c-sidebar-muted) / var(--tw-text-opacity, 1));
}

.text-stone-400 {
  --tw-text-opacity: 1;
  color: rgb(168 162 158 / var(--tw-text-opacity, 1));
}

.text-stone-600 {
  --tw-text-opacity: 1;
  color: rgb(87 83 78 / var(--tw-text-opacity, 1));
}

.text-stone-700 {
  --tw-text-opacity: 1;
  color: rgb(68 64 60 / var(--tw-text-opacity, 1));
}

.text-subtle {
  --tw-text-opacity: 1;
  color: rgb(var(--c-muted) / var(--tw-text-opacity, 1));
}

.text-subtle\/40 {
  color: rgb(var(--c-muted) / 0.4);
}

.text-subtle\/50 {
  color: rgb(var(--c-muted) / 0.5);
}

.text-subtle\/60 {
  color: rgb(var(--c-muted) / 0.6);
}

.text-subtle\/70 {
  color: rgb(var(--c-muted) / 0.7);
}

.text-subtle\/80 {
  color: rgb(var(--c-muted) / 0.8);
}

.text-surface {
  --tw-text-opacity: 1;
  color: rgb(var(--c-bg) / var(--tw-text-opacity, 1));
}

.text-transparent {
  color: transparent;
}

.text-up {
  --tw-text-opacity: 1;
  color: rgb(var(--c-up) / var(--tw-text-opacity, 1));
}

.text-up\/70 {
  color: rgb(var(--c-up) / 0.7);
}

.text-warn {
  --tw-text-opacity: 1;
  color: rgb(var(--c-warn) / var(--tw-text-opacity, 1));
}

.text-warn\/50 {
  color: rgb(var(--c-warn) / 0.5);
}

.text-warn\/70 {
  color: rgb(var(--c-warn) / 0.7);
}

.text-warn\/80 {
  color: rgb(var(--c-warn) / 0.8);
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.text-white\/85 {
  color: rgb(255 255 255 / 0.85);
}

.underline {
  text-decoration-line: underline;
}

.decoration-accent\/40 {
  text-decoration-color: rgb(var(--c-accent) / 0.4);
}

.decoration-dotted {
  text-decoration-style: dotted;
}

.underline-offset-2 {
  text-underline-offset: 2px;
}

.underline-offset-\[3px\] {
  text-underline-offset: 3px;
}

.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.placeholder-subtle::-moz-placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(var(--c-muted) / var(--tw-placeholder-opacity, 1));
}

.placeholder-subtle::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(var(--c-muted) / var(--tw-placeholder-opacity, 1));
}

.caret-ink {
  caret-color: rgb(var(--c-ink) / 1);
}

.accent-accent {
  accent-color: rgb(var(--c-accent) / 1);
}

.opacity-0 {
  opacity: 0;
}

.opacity-100 {
  opacity: 1;
}

.opacity-25 {
  opacity: 0.25;
}

.opacity-40 {
  opacity: 0.4;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-60 {
  opacity: 0.6;
}

.opacity-70 {
  opacity: 0.7;
}

.opacity-75 {
  opacity: 0.75;
}

.opacity-80 {
  opacity: 0.8;
}

.opacity-90 {
  opacity: 0.9;
}

.opacity-95 {
  opacity: 0.95;
}

.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[inset_0_-1px_0_rgb\(var\(--c-border\)\)\] {
  --tw-shadow: inset 0 -1px 0 rgb(var(--c-border));
  --tw-shadow-colored: inset 0 -1px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[inset_3px_0_0_rgb\(var\(--c-accent\)\)\] {
  --tw-shadow: inset 3px 0 0 rgb(var(--c-accent));
  --tw-shadow-colored: inset 3px 0 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-inner {
  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.outline {
  outline-style: solid;
}

.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-4 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-accent\/10 {
  --tw-ring-color: rgb(var(--c-accent) / 0.1);
}

.ring-accent\/15 {
  --tw-ring-color: rgb(var(--c-accent) / 0.15);
}

.ring-accent\/30 {
  --tw-ring-color: rgb(var(--c-accent) / 0.3);
}

.ring-accent\/50 {
  --tw-ring-color: rgb(var(--c-accent) / 0.5);
}

.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

/* ============================================================
   CT Ledger design tokens (DESIGN.md) — two modes, one system.
   All values are RGB triplets so Tailwind opacity modifiers
   (bg-accent/10 …) keep working: rgb(var(--x) / <alpha>).
   ============================================================ */

/* CG-051: typographic styles for rendered markdown inside compose faces —
   Tailwind preflight strips heading styles, so rendered <h2>/<h3>/<ul>
   read as plain text without these. */

/* SKL-009 Skill version history — inline diff styling. Mirrors the approved
   "Ledger Timeline" mockup but resolves every color through CT Ledger tokens so
   it themes in both modes. Add/del gutters reuse --c-up / --c-down. */

/* REPLAY-007: approved fix-replay compare Variant C ("Unified Overlay").
   The structure mirrors the design-shotgun artifact while resolving every
   surface, data, and semantic color through CT Ledger tokens from DESIGN.md. */

/* COMPOSE STUDIO (CUX-003): approved v7 desktop + r3 mobile */

/* Compose proof-card footer: collapse the Regenerate/Refine word labels to
   icons when the CARD itself is narrow (container query, so it's correct
   whether the gallery is 1-up or 2-up). Stops the footer buttons overflowing
   the card on small/resized viewports without wrapping to a second row. */

/* QB-005 BI query builder: mirrored inline provenance tags over the command
   textarea. The textarea remains the submit/focus source of truth; this layer
   only renders the read-only g13-style tags. */

/* =====================================================================
   Mobile composer (<768px) — approved Variant B ("Mic in the Ledger
   Line") + Variant C's keyboard-open steals (founder sign-off
   2026-07-26; binding artifacts in
   ~/.gstack/projects/lore/designs/mobile-composer-20260726/).

   Everything here is scoped to max-width: 767px except the base
   display:none rows below, so the >=768px desktop composer renders
   byte-identically. The voice state classes (.bi-voice-capture /
   .bi-voice-recording / .bi-voice-busy) are applied by bi.js on EVERY
   viewport — only this block gives them any effect. */

/* Post-connect sync modal (CT Ledger): indeterminate sweep + feed-row enter.
   Solid accent block (never a gradient); the only looping motion, sanctioned
   as the progress indicator. Tokens auto-theme light/dark. */

/* CC-011 mini live-log strip: terminal cursor blink on the newest log line.
   Together with the amber pulse these are the only two motions in the
   feedback command console (DESIGN.md decoration rules; variant-C2). */

/* ENRICH "Customize columns" picker — variant A "Ledger Modal". A centered
   modal on a scrim: fixed header (Fraunces title + live search + mono count),
   scrollable grouped checkbox-rows, sticky footer (count + Cancel/Apply). All
   color resolves through CT Ledger tokens so it themes in both modes; the BI
   route is the dark Ledger Room (DESIGN.md). No gradients, no new hues. */

/* CC console full-bleed: the Settings wrap is max-w-6xl, but the approved
     C2 design is a full-width operations console — break out only when the
     command-centre shell is on screen (operator report 2026-07-04). */

.max-w-6xl:has([data-fb-command-centre-shell]) {
  max-width: none;
}

/* BI room scroll containment: the view sizes itself h-dvh, but it renders
     under the command bar (48px) inside #main-content's margin-top, so the BODY
     scrolled and left dead space below the ask dock (operator reports
     2026-07-04). On the BI route the global search bar is display:none, so the
     room is exactly the viewport minus the fixed bar (--bar-h). Break the wrap
     out and size the room to the leftover viewport — the thread area
     (#bi-thread-scroll) stays the ONLY scrollport. The canonical height +
     #main-content clamp live in index.html; this mirrors them so the built CSS
     never re-introduces the old 104px over-subtraction. */

#app:has([data-testid="bi-view"]) {
  max-width: none;
  padding: 0;
}

#app [data-testid="bi-view"] {
  height: calc(100dvh - var(--bar-h, 48px));
}

/* DSRC-009c — the BI chip treatment (PRD lines 1022-1048).
   A bound value reads as a quietly tinted number and nothing else: the chip
   inherits font, size, weight and color from the surrounding text and adds a
   single subtle wash. Values lifted VERBATIM from the checksum-pinned Design A
   contract docs/design/bi-data-sources-minimal-a/bi.css — the wash rgba() are
   literal in BOTH modes (Q10 default: same alphas over CT Ledger light + dark
   tokens, validated by the both-theme at-rest shots).

   Class names are composed dynamically by static/js/compose-bi-chips.js
   (bi-chip + is-failed/is-pending/is-refreshing) and by DSRC-010a/b on insert
   (just-inserted), so they are safelisted in tailwind.config.js — otherwise the
   content scanner never sees them and the rules purge (the chevron-purge
   lesson). */

/* TBL-008b — bound tables (the {{bi-table:tag}} block). The normative visual
   contract lives in DESIGN.md "BI data chips" › Bound tables; the pixel
   reference is docs/design/bi-table-bindings/table.html. A list-shaped BI result
   binds as a REAL <table>: hairline bottom-only row rules (no vertical rules, no
   cell boxes, no zebra, no fills), Instrument Sans muted header, JetBrains Mono
   tabular right-aligned numerals in --c-data, mono muted caption below, amber
   wash for failed/last-good, table-shaped amber tombstone for the dead states.
   Both modes co-equal via the CT Ledger --c-* tokens.

   Class names (bi-bound-table, num, bi-caption, bi-failed-wash,
   bi-failed-reason, bi-tombstone, cst-bi-table-block/-inline) are composed
   dynamically by compose-bi-chips.js applyBiTable — safelisted in
   tailwind.config.js or the rules purge (the chevron-purge lesson). */

/* DSRC-010a — the @-popover: the entire creation UI. One small listbox at the
   caret (302px). Values lifted VERBATIM from the checksum-pinned Design A
   contract docs/design/bi-data-sources-minimal-a/bi.css, with the reference
   tokens mapped to the app's CT Ledger equivalents (--accent-dim is the same
   rgba(63,143,181,.10) literal in both modes, per Q10). The dynamic class names
   are composed by static/js/compose-bi-popover.js, so they are safelisted in
   tailwind.config.js (the chevron-purge lesson). */

/* DSRC-011a THE RECEIPT — provenance's only home. Four lines + one button, in a
   288px card anchored below the hovered / focused / tapped chip. Values lifted
   VERBATIM from the checksum-pinned Design A contract
   docs/design/bi-data-sources-minimal-a/bi.css, with the reference tokens mapped
   to the app's CT Ledger equivalents (--amber → --c-warn, --down → --c-down —
   the ONLY red in the system). The class names are composed in
   compose-bi-receipt.js, so they are safelisted in tailwind.config.js (the
   chevron-purge lesson). */

/* DSRC-012a — THE REPOSITORY: one flat panel behind one small entry point.
   Ported VERBATIM from the checksum-pinned Design A contract
   docs/design/bi-data-sources-minimal-a/bi.css (section 4), with the reference
   tokens mapped to the app's CT Ledger equivalents (--muted → --c-muted,
   --amber → --c-warn, --accent → --c-accent, --data → --c-data,
   --accent-dim → the popover's rgba(63,143,181,0.10) wash). The class names are
   composed as element strings in compose-bi-repository.js (`bi-entry`, `dot`,
   `bi-repo`, `row`, `st`, `run`, `warn`, `v`, `pending`, `n`, `age`, and — for
   DSRC-012b's row overflow — `more`, `bi-repo-menu`), so the scanner never sees
   the literal names: safelist them or the rules purge (the chevron-purge lesson).
   INV-CALM: the entry is the SECOND and last at-rest addition; fresh is silence
   (no green, ever) — the amber dot appears only when a source is stale/failed. */

/* DSRC-012a touch (Q13): at ≤640px the repository is NOT a 384px popover but the
   existing compose-mobile bottom sheet (cst-sheet shape) — bottom-anchored,
   full-width, rounded top — reusing that pattern rather than inventing new mobile
   chrome. The JS sets position:fixed + inline top/left for the desktop popover;
   `!important` here lets the sheet override those inline styles on small screens.
   Still headerless (no grab-row) — the panel's one job is the flat list. */

@media (max-width: 640px) {
  .bi-repo {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    width: auto !important;
    max-height: min(76dvh, 680px);
    overflow-y: auto;
    border-radius: 24px 24px 0 0;
    border-left: 0;
    border-right: 0;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
  }

  .bi-repo .row {
    padding: 12px 30px 12px 12px;
  }
}

/* ============================================================
   SHARE DIALOG — "C2 · tabular ledger accordion" (founder-approved
   2026-07-23; design law: ~/.gstack/projects/lore/designs/
   share-dialog-20260723/variant-c2.html + SPEC.md).

   One sheet, three accordion rows (Team / Public / Live report).
   Each summary line is a strict aligned register:
     [ icon 20 | kind · fixed col | state · flex | metric · mono
       right tabular-nums | chevron 16 ]
   Exactly one row open at a time; the 2px --accent left rail on the
   open row is the ONLY accent-colored structure. 4px grid, hairlines
   only, ≤560px tall, no internal scroll. Tokens are the app's
   --c-* custom properties so both CT Ledger modes work untouched.
   ============================================================ */

.bishare-dialog {
  /* register geometry — strict 4px grid */
  --bishare-col-kind: 132px;
  --bishare-gutter: 16px;
  --bishare-row-h: 48px;
  --bishare-pad-x: 24px;
  --bishare-rail: 2px;
  --bishare-detail-indent: 36px;
  /* icon 20 + gutter 16 */
  width: 500px;
  max-width: 100%;
  max-height: min(560px, calc(100dvh - 2rem));
  background: rgb(var(--c-surface));
  border: 1px solid rgb(var(--c-border));
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px -24px rgb(var(--scrim) / .45), 0 2px 8px rgb(var(--scrim) / .18);
  font-family: 'Instrument Sans', system-ui, sans-serif;
}

/* ---- Header (24 / 8 / 20 on the 4px grid) ---- */

.bishare-head {
  padding: 24px var(--bishare-pad-x) 20px;
  border-bottom: 1px solid rgb(var(--c-border));
  position: relative;
  flex-shrink: 0;
}

.bishare-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 23px;
  line-height: 1.1;
  color: rgb(var(--c-ink));
  letter-spacing: -.01em;
}

.bishare-sub {
  margin-top: 8px;
  font-size: 13.5px;
  color: rgb(var(--c-muted));
  line-height: 1.45;
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.bishare-sub-tag {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.bishare-sub-convo {
  color: rgb(var(--c-data));
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bishare-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: rgb(var(--c-muted));
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, color .12s;
}

.bishare-close:hover {
  background: rgb(var(--c-accent) / .10);
  color: rgb(var(--c-text));
}

.bishare-close:disabled {
  cursor: not-allowed;
  opacity: .5;
}

/* ---- Ledger rows ---- */

/* The ledger is the dialog's flex-growing body: it takes the height left under
   the fixed header (min-height:0 lets it actually shrink inside the flex
   column) and OWNS any overflow. Without this the ledger grew unbounded, the
   dialog hit max-height:560 + overflow:hidden, and the modal's align-items:
   center pushed the whole content box UP — clipping the top summary rows off
   the dialog's top edge (the 2026-07-23 founder overflow). Contained here, all
   three summary rows always stay inside the box; only a genuinely oversized
   open detail scrolls, and never in the default states (which fit the budget). */

.bishare-ledger {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.bishare-row {
  position: relative;
  border-bottom: 1px solid rgb(var(--c-border));
}

.bishare-row:last-child {
  border-bottom: none;
}

/* FOCUS mechanic: single 2px accent left rail slides onto the open row. */

.bishare-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--bishare-rail);
  background: rgb(var(--c-accent));
  transform: scaleY(0);
  transform-origin: center;
  transition: transform .22s cubic-bezier(.4,0,.2,1);
  z-index: 1;
}

.bishare-row.open::before {
  transform: scaleY(1);
}

/* Summary line — the aligned register row */

.bishare-summary {
  width: 100%;
  min-height: var(--bishare-row-h);
  background: transparent;
  border: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 20px var(--bishare-col-kind) minmax(0, 1fr) auto 16px;
  align-items: center;
  -moz-column-gap: var(--bishare-gutter);
       column-gap: var(--bishare-gutter);
  padding: 0 var(--bishare-pad-x);
  text-align: left;
  color: rgb(var(--c-text));
  font-family: inherit;
  transition: background .12s;
}

.bishare-summary:hover {
  background: rgb(var(--c-accent) / .10);
}

.bishare-row.open > .bishare-summary {
  background: rgb(var(--c-accent) / .10);
}

.bishare-summary:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px rgb(var(--c-accent) / .45);
}

.bishare-icon {
  width: 20px;
  height: 20px;
  color: rgb(var(--c-muted));
  display: flex;
  align-items: center;
  justify-content: center;
}

.bishare-row.open .bishare-icon {
  color: rgb(var(--c-accent-strong));
}

.bishare-row.aside.open .bishare-icon {
  color: rgb(var(--c-data));
}

.bishare-kind {
  font-size: 15px;
  font-weight: 600;
  color: rgb(var(--c-ink));
  letter-spacing: -.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bishare-row.aside .bishare-kind {
  color: rgb(var(--c-data));
  font-weight: 500;
}

.bishare-state {
  font-size: 13.5px;
  color: rgb(var(--c-muted));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bishare-state .locked {
  color: rgb(var(--c-warn));
}

/* Metric — mono, right-aligned, tabular-nums: digits stack across rows. */

.bishare-metric {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: rgb(var(--c-muted));
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
  letter-spacing: .01em;
}

.bishare-row.open .bishare-metric,
.bishare-row.open .bishare-metric .m-count {
  color: rgb(var(--c-data));
}

.bishare-metric .m-count {
  font-weight: 500;
}

.bishare-chevron {
  color: rgb(var(--c-muted));
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .22s cubic-bezier(.4,0,.2,1), color .12s;
}

.bishare-row.open .bishare-chevron {
  transform: rotate(90deg);
  color: rgb(var(--c-data));
}

/* Expandable detail panel — 0fr→1fr grid morph; visibility gates the
   a11y/focus tree so collapsed controls are genuinely unreachable. */

.bishare-detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .24s cubic-bezier(.4,0,.2,1);
}

.bishare-row.open .bishare-detail {
  grid-template-rows: 1fr;
}

.bishare-detail-inner {
  overflow: hidden;
  min-height: 0;
  visibility: hidden;
  transition: visibility 0s .24s;
}

.bishare-row.open .bishare-detail-inner {
  visibility: visible;
  transition: visibility 0s;
}

/* Detail content aligns under the kind column (pad-x + icon + gutter).
   Bottom pad trimmed 24→16 (bic_043): the public configure gained a one-line
   checkbox register, so the sheet buys the height back here — every open
   state stays inside the 560px budget (bi-share-geometry.spec.js). */

.bishare-detail-pad {
  padding: 4px var(--bishare-pad-x) 16px calc(var(--bishare-pad-x) + var(--bishare-detail-indent));
}

/* Compact flow controls */

.bishare-flow-label {
  font-size: 12px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgb(var(--c-muted));
  margin-bottom: 6px;
  font-weight: 500;
  display: block;
}

/* Block rhythm trimmed 16→12 (bic_043): the public configure gained the
   one-line unredacted register, so every open state buys the height back here
   and stays inside the 560px budget (bi-share-geometry.spec.js). */

.bishare-flow-block {
  margin-bottom: 12px;
  border: none;
  padding: 0;
  min-width: 0;
}

.bishare-flow-block:last-child {
  margin-bottom: 0;
}

.bishare-flow-inline {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.bishare-scope-line {
  gap: 12px;
}

.bishare-scope-label {
  margin: 0;
  flex: 0 0 auto;
}

/* The bound-result register (bic_044): one truncating fragment naming WHICH
   result a "This result" mint freezes; empty for conversation scope. */

.bishare-scope-binding {
  font-size: 12px;
  color: rgb(var(--c-muted));
  min-width: 0;
  flex: 1 1 40px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bishare-optional {
  font-size: 12px;
  color: rgb(var(--c-muted));
  margin-left: 8px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
}

/* Segmented control — compact, not fat cards. Radios stay real (sr-only). */

.bishare-segmented {
  display: inline-flex;
  border: 1px solid rgb(var(--c-border));
  border-radius: 8px;
  overflow: hidden;
  background: rgb(var(--c-bg-deep));
}

.bishare-seg {
  display: inline-flex;
  cursor: pointer;
}

.bishare-seg-face {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  font-size: 13px;
  color: rgb(var(--c-muted));
  border-right: 1px solid rgb(var(--c-border));
  transition: background .12s, color .12s;
  white-space: nowrap;
}

.bishare-seg:last-child .bishare-seg-face {
  border-right: none;
}

.bishare-seg:hover .bishare-seg-face {
  color: rgb(var(--c-text));
  background: rgb(var(--c-accent) / .10);
}

.bishare-seg input:checked + .bishare-seg-face {
  background: rgb(var(--c-accent));
  color: #fff;
  font-weight: 500;
}

.bishare-seg input:focus-visible + .bishare-seg-face {
  box-shadow: inset 0 0 0 2px rgb(var(--c-accent-strong));
}

/* TTL presets beyond the unredacted 7-day cap are visibly retired while the
   "Include client data" checkbox is checked — never silently clamped. */

.bishare-seg input:disabled + .bishare-seg-face {
  opacity: .35;
  cursor: not-allowed;
  background: transparent;
  color: rgb(var(--c-muted));
}

.bishare-seg:has(input:disabled) {
  cursor: not-allowed;
}

.bishare-seg:hover input:disabled + .bishare-seg-face {
  background: transparent;
  color: rgb(var(--c-muted));
}

.bishare-seg-rec {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .04em;
  opacity: .8;
  margin-left: 4px;
}

/* Password field. The 160px floor is the founder's proportion ruling
   (2026-07-26): the field must always read as a usable input — it may never
   be crushed to an icon-sized sliver by a wide sibling CTA. flow-inline
   wraps, so when the pair can't share the line the CTA drops below instead. */

.bishare-pw {
  display: flex;
  align-items: center;
  border: 1px solid rgb(var(--c-border));
  border-radius: 8px;
  background: rgb(var(--c-bg-deep));
  padding: 0 12px;
  max-width: 280px;
  min-width: 160px;
  flex: 1;
  transition: border-color .12s;
  color: rgb(var(--c-muted));
}

.bishare-pw:focus-within {
  border-color: rgb(var(--c-accent));
}

.bishare-pw input {
  border: none;
  background: transparent;
  outline: none;
  font-family: inherit;
  font-size: 13.5px;
  color: rgb(var(--c-text));
  padding: 8px 8px;
  width: 100%;
  min-width: 0;
}

.bishare-pw input::-moz-placeholder {
  color: rgb(var(--c-muted));
}

.bishare-pw input::placeholder {
  color: rgb(var(--c-muted));
}

/* CTA */

.bishare-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: rgb(var(--c-accent));
  color: #fff;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s, transform .06s, opacity .12s;
  white-space: nowrap;
}

.bishare-cta:hover {
  background: rgb(var(--c-accent-strong));
}

.bishare-cta:active {
  transform: translateY(1px);
}

.bishare-cta:disabled {
  cursor: not-allowed;
  opacity: .5;
  transform: none;
}

.bishare-cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgb(var(--c-surface)), 0 0 0 4px rgb(var(--c-accent) / .45);
}

/* Live report row — deterministic stacking at EVERY width (founder proportion
   ruling, 2026-07-26). Its CTA label always carries the full report title
   (~312px), so pairing it beside the password field on the 416px content line
   crushed the field to an ~86px "⚿ Set a" sliver. The pair can never share
   the line sensibly, so don't let flex negotiate it: the password field takes
   its own full row, the mint CTA a full-width centered row below — the same
   composition the ≤480px block already ships, which keeps mobile output
   byte-identical (identical property values there). Team/Public desktop rows
   (short CTA labels that DO fit beside their siblings) are untouched. */

.bishare-configure[data-configure="report"] .bishare-pw {
  flex: 1 1 100%;
  max-width: none;
}

.bishare-configure[data-configure="report"] .bishare-cta {
  flex: 1 1 100%;
  justify-content: center;
}

/* Inline status (honest errors) — one line, no boxes. */

.bishare-status {
  min-height: 20px;
  font-size: 12px;
  color: rgb(var(--c-down));
  margin-top: 8px;
  line-height: 1.5;
}

.bishare-error {
  font-size: 13px;
  color: rgb(var(--c-down));
  padding: 12px 0 0;
  line-height: 1.5;
}

.bishare-retry {
  border: none;
  background: transparent;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  color: rgb(var(--c-accent));
  cursor: pointer;
  padding: 8px 0 0;
  letter-spacing: .02em;
}

.bishare-retry:hover {
  color: rgb(var(--c-accent-strong));
  text-decoration: underline;
}

/* Token rows — ONE aligned line each, no card wrapper. */

.bishare-tokens {
  margin-top: 2px;
  border-top: 1px solid rgb(var(--c-border));
}

.bishare-tokens.no-border {
  border-top: none;
  margin-top: 0;
}

.bishare-token-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  min-width: 0;
  border-bottom: 1px solid rgb(var(--c-border));
  font-size: 13px;
}

.bishare-token-row:last-child {
  border-bottom: none;
}

/* The row's display:flex outranks the `.hidden` utility by order (this block
   compiles AFTER utilities), which silently broke the ">2 rows" collapse —
   the "+N more links" toggle was a no-op. The compound selector wins on
   specificity regardless of order. */

.bishare-token-row.hidden {
  display: none;
}

.bishare-token-prefix {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
  color: rgb(var(--c-data));
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  min-width: 88px;
  /* fixed so chips align across token rows */
  flex-shrink: 0;
}

.bishare-chip {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .02em;
  padding: 2px 8px;
  border-radius: 5px;
  border: 1px solid rgb(var(--c-border));
  color: rgb(var(--c-muted));
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  /* Long chips (expiry timestamps) SHRINK with an ellipsis instead of pushing
     the ⋯ control past the register's overflow:hidden clip edge — the
     2026-07-23 dead-overflow bug. Full text stays on title. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bishare-chip.lock {
  color: rgb(var(--c-warn));
  border-color: color-mix(in srgb, rgb(var(--c-warn)) 40%, rgb(var(--c-border)));
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* Unredacted disclosure chip (bic_043) — the register must always show which
   links expose client data. Same warn register as the lock chip. */

.bishare-chip.unredacted {
  color: rgb(var(--c-warn));
  border-color: color-mix(in srgb, rgb(var(--c-warn)) 40%, rgb(var(--c-border)));
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.bishare-token-spacer {
  flex: 1;
}

.bishare-overflow {
  border: none;
  background: transparent;
  color: rgb(var(--c-muted));
  cursor: pointer;
  line-height: 1;
  padding: 4px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  transition: background .12s, color .12s;
}

.bishare-overflow:hover,
.bishare-overflow[aria-expanded="true"] {
  background: rgb(var(--c-accent) / .10);
  color: rgb(var(--c-text));
}

/* Anchored overflow menu (C2 mock intent: Revoke lives in a small menu).
   position:fixed so no row/detail overflow clip can ever swallow it. */

.bishare-menu {
  position: fixed;
  z-index: 130;
  min-width: 132px;
  background: rgb(var(--c-surface));
  border: 1px solid rgb(var(--c-border));
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 12px 32px -12px rgb(var(--scrim) / .4), 0 2px 8px rgb(var(--scrim) / .16);
}

.bishare-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: rgb(var(--c-down));
  padding: 7px 10px;
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s;
}

.bishare-menu-item:hover {
  background: rgb(var(--c-down) / .10);
}

.bishare-menu-item:focus-visible {
  outline: none;
  background: rgb(var(--c-down) / .10);
  box-shadow: inset 0 0 0 2px rgb(var(--c-down) / .35);
}

.bishare-menu-item:disabled {
  cursor: not-allowed;
  opacity: .6;
}

/* Empty state — one muted line, no dashed box. */

.bishare-empty {
  font-size: 13px;
  color: rgb(var(--c-muted));
  padding: 12px 0 0;
  line-height: 1.5;
}

.bishare-note {
  font-size: 13px;
  color: rgb(var(--c-muted));
  line-height: 1.5;
  margin-bottom: 16px;
}

/* Configure-state one-line hint. The long "publishing freezes…" explainer
   now lives HERE (not in the token list) — SPEC rule: empty states are one
   muted line; the explainer belongs to the CONFIGURE state only. Truncates to
   a single line so it can never re-inflate the sheet past its height budget. */

.bishare-hint {
  font-size: 13px;
  color: rgb(var(--c-muted));
  line-height: 1.5;
  margin-top: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Unredacted checkbox (bic_043) — ONE compact register line under the password
   field: checkbox + label + an inline state fragment (locked / ready /
   clamped). Single-line by design so the C2 sheet's hard height budget holds;
   the fragment truncates at narrow widths (full text on title). */

.bishare-check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  min-width: 0;
}

.bishare-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgb(var(--c-text));
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex-shrink: 0;
  white-space: nowrap;
}

.bishare-check input {
  width: 15px;
  height: 15px;
  margin: 0;
  flex-shrink: 0;
  accent-color: rgb(var(--c-accent));
  cursor: pointer;
}

.bishare-check input:disabled {
  cursor: not-allowed;
}

.bishare-check:has(input:disabled) {
  color: rgb(var(--c-muted));
  cursor: not-allowed;
}

.bishare-check input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgb(var(--c-surface)), 0 0 0 4px rgb(var(--c-accent) / .45);
  border-radius: 3px;
}

.bishare-check-state {
  font-size: 12px;
  color: rgb(var(--c-muted));
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bishare-check-state[data-state='clamped'] {
  color: rgb(var(--c-warn));
}

/* The configure block (segmented + password + CTA + hint) COLLAPSES while a
   copy-once reveal is up: the mint is done, so configure + reveal + list at
   once is both a confusion and the height bomb that clipped row 3. display:none
   also drops its inputs from the focus trap's visible set. */

.bishare-configure.is-collapsed {
  display: none;
}

/* Collapse-more control for >2 token lists */

.bishare-more {
  border: none;
  background: transparent;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  color: rgb(var(--c-accent));
  cursor: pointer;
  padding: 8px 0 0;
  letter-spacing: .02em;
}

.bishare-more:hover {
  color: rgb(var(--c-accent-strong));
  text-decoration: underline;
}

/* Copy-once reveal — hairline-bracketed accent wash, NOT a nested card;
   ties to the open-row rail language. Morphs 0fr→1fr on mint, collapses
   back into a compact token row on copy/dismiss. */

.bishare-reveal {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s cubic-bezier(.4,0,.2,1), margin-top .28s cubic-bezier(.4,0,.2,1);
  margin-top: 0;
}

.bishare-reveal.show {
  grid-template-rows: 1fr;
  margin-top: 16px;
}

.bishare-reveal-inner {
  overflow: hidden;
  min-height: 0;
}

.bishare-reveal-card {
  background: rgb(var(--c-accent) / .10);
  border-left: var(--bishare-rail) solid rgb(var(--c-accent));
  border-radius: 0 6px 6px 0;
  padding: 12px 16px;
}

.bishare-reveal-warn {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgb(var(--c-warn));
  margin-bottom: 8px;
  font-weight: 500;
}

.bishare-reveal-urlrow {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bishare-reveal-url {
  flex: 1;
  min-width: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: rgb(var(--c-ink));
  background: rgb(var(--c-surface));
  border: 1px solid rgb(var(--c-border));
  border-radius: 6px;
  padding: 8px 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-feature-settings: "tnum";
  outline: none;
}

.bishare-reveal-url:focus-visible {
  border-color: rgb(var(--c-accent));
}

.bishare-copybtn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: rgb(var(--c-accent));
  color: #fff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s;
}

.bishare-copybtn:hover {
  background: rgb(var(--c-accent-strong));
}

.bishare-copybtn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgb(var(--c-surface)), 0 0 0 4px rgb(var(--c-accent) / .45);
}

.bishare-reveal-dismiss {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: rgb(var(--c-muted));
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  transition: background .12s, color .12s;
}

.bishare-reveal-dismiss:hover {
  background: rgb(var(--c-accent) / .10);
  color: rgb(var(--c-text));
}

/* Freshly morphed token row highlight */

.bishare-token-row.fresh {
  animation: bishareFreshFade 1.4s ease-out;
}

@keyframes bishareFreshFade {
  0% {
    background: rgb(var(--c-accent) / .10);
  }

  100% {
    background: transparent;
  }
}

/* Small screens: tighten the register, stack the configure rows.
   Founder feedback (2026-07-26): at phone widths the nowrap mint CTA
   ("+ Mint Facebook acquisition funnel link", ~312px intrinsic) overflowed
   the dialog's overflow:hidden edge and squeezed the password field to a
   sliver, TTL pills could clip, and token rows crushed four cells into one
   truncated line. Below 480px every configure row stacks full-width
   (uniformly for Team / Public / Live report), controls hit the 44px tap
   minimum (matching the public gate fix), and token rows wrap to two lines
   instead of ellipsizing. Desktop (>480px) is untouched. */

@media (max-width: 480px) {
  .bishare-dialog {
    --bishare-col-kind: 92px;
    --bishare-gutter: 10px;
    --bishare-pad-x: 16px;
    --bishare-detail-indent: 0px;
  }

  /* (The taller stacked rows rely on the BASE .bishare-ledger overflow-y:auto
     — an oversized open detail scrolls inside the sheet at every width, so
     nothing is ever clip-lost against the height budget.) */

  .bishare-seg-face {
    padding: 6px 8px;
    font-size: 12px;
  }

  .bishare-token-prefix {
    min-width: 72px;
  }

  /* TTL pills: distribute the full row evenly so no pill can clip at either
     container edge; wrap is the fallback for very large text scales. */

  .bishare-segmented {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
  }

  .bishare-seg {
    flex: 1 1 auto;
  }

  .bishare-seg-face {
    flex: 1;
    justify-content: center;
  }

  /* The label row never truncates — two short words, wrap if they must. */

  .bishare-flow-label {
    white-space: normal;
  }

  /* Password field: its own full-width row at a real tap size. 16px input
     font stops iOS Safari auto-zooming on focus (same as the public gate). */

  .bishare-pw {
    flex: 1 1 100%;
    max-width: none;
    min-height: 44px;
  }

  .bishare-pw input {
    font-size: 16px;
  }

  /* The CTA (Create / Publish / Mint) is the primary action: full-width on
     its own row, centered, 44px minimum. Long report names wrap to at most
     two lines instead of compressing their siblings or clipping. */

  .bishare-cta {
    flex: 1 1 100%;
    justify-content: center;
    min-height: 44px;
    white-space: normal;
    text-align: center;
  }

  .bishare-cta > span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }

  /* Token rows: wrap to two lines (prefix + expiry, then badges + actions)
     instead of squeezing four truncated cells onto one. Chips keep their
     full text — the wrap absorbs the width the ellipsis used to hide. */

  .bishare-token-row {
    flex-wrap: wrap;
    row-gap: 2px;
    padding: 8px 0;
    min-height: 0;
  }

  .bishare-chip {
    flex-shrink: 0;
    overflow: visible;
    text-overflow: clip;
  }

  /* Wherever the wrap lands the actions control, it hugs the right edge. */

  .bishare-overflow {
    margin-left: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bishare-row::before,
  .bishare-chevron,
  .bishare-detail,
  .bishare-detail-inner,
  .bishare-reveal {
    transition: none;
  }

  .bishare-token-row.fresh {
    animation: none;
  }
}

/* ============================================================================
   REPORTS PAGE — the approved B3c ledger (REP-005, SINGLE CSS OWNER)
   ----------------------------------------------------------------------------
   Ported class-for-class from the locked design artifact
   `docs/design/reports-page/approved-b3c.html` (its \3c style> block, lines
   103-718) onto the CT Ledger two-mode tokens. Per prd-reports-page.md line 105
   (INV-REP-15) REP-005 is the ONE story that writes this file for the whole
   reports feature: the register, the bottom drawer, the full-screen enlarge
   overlay and the promotion wizard classes are ALL declared here, up front,
   from the artifact's class inventory. Later reports stories (REP-006/007/008/
   009/016/017…) consume these classes and never regenerate the bundle.

   The artifact's own `--muted-strong` has no app-wide equivalent, so it is
   declared here per mode with the artifact's exact values (#8DA5B6 dark /
   #42586A light). Everything else resolves through the shared --c-* tokens.
   Artifact frame chrome (its placeholder rail, its own theme toggle, its body
   reset) is deliberately NOT ported — the real app supplies nav and theme.
   ============================================================================ */

:root,
[data-theme='light'] {
  --rp-muted-strong: 66 88 106;
  /* #42586A */
  --rp-shadow: 0 -8px 40px rgb(30 51 64 / .14);
}

[data-theme='dark'] {
  --rp-muted-strong: 141 165 182;
  /* #8DA5B6 */
  --rp-shadow: 0 -8px 40px rgb(0 0 0 / .55);
}

.rp-mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.rp-serif {
  font-family: 'Fraunces', Georgia, serif;
}

/* ---- page frame ---------------------------------------------------------- */

/* The command bar (48px) + the sticky search bar (56px) own the top of the
   viewport, so the register's sticky section heads park underneath them. */

.rp-page {
  --rp-sticky-top: 104px;
}

.rp-page-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 4px;
}

.rp-page-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 23px;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: rgb(var(--c-ink));
}

.rp-grow {
  flex: 1;
}

.rp-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgb(var(--c-border));
  border-radius: 8px;
  background: rgb(var(--c-surface));
  padding: 7px 14px;
  color: rgb(var(--c-data));
  font-size: 13px;
  font-weight: 500;
}

.rp-btn:hover {
  border-color: rgb(var(--c-accent));
  color: rgb(var(--c-ink));
}

.rp-btn svg {
  width: 15px;
  height: 15px;
}

.rp-btn-primary {
  border-color: rgb(var(--c-accent));
  background: rgb(var(--c-accent) / .10);
  color: rgb(var(--c-accent-strong));
}

.rp-btn-primary:hover {
  background: rgb(var(--c-accent));
  color: #fff;
}

.rp-btn-primary:disabled,
.rp-btn:disabled {
  border-color: rgb(var(--c-border));
  background: rgb(var(--c-surface));
  color: rgb(var(--c-muted));
  opacity: .45;
  cursor: not-allowed;
}

.rp-btn-primary:disabled:hover {
  background: rgb(var(--c-surface));
  color: rgb(var(--c-muted));
}

/* ---- the register -------------------------------------------------------- */

.rp-register-inner {
  max-width: 1152px;
  margin: 0 auto;
}

.rp-sec-head {
  position: sticky;
  top: var(--rp-sticky-top, 0px);
  z-index: 5;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  background: rgb(var(--c-bg));
  padding: 22px 4px 8px;
}

.rp-sec-title {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.rp-sec-title-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.rp-sec-label {
  color: rgb(var(--c-text));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.rp-sec-count {
  border: 1px solid rgb(var(--c-border));
  border-radius: 5px;
  background: rgb(var(--c-surface));
  padding: 1px 7px;
  color: rgb(var(--c-data));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.rp-sec-sub {
  color: rgb(var(--c-muted));
  font-size: 12px;
}

.rp-cols {
  display: grid;
  grid-template-columns: 26px minmax(230px, 1.4fr) minmax(200px, 1.2fr) 150px 92px 40px;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid rgb(var(--c-border));
  padding: 6px 14px;
  color: rgb(var(--rp-muted-strong));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.rp-row {
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(230px, 1.4fr) minmax(200px, 1.2fr) 150px 92px 40px;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid rgb(var(--c-border));
  padding: 13px 14px;
  text-align: left;
  transition: background .12s;
}

.rp-row-clickable {
  cursor: pointer;
}

.rp-row-clickable:hover {
  background: rgb(var(--c-surface));
}

.rp-row-active {
  background: rgb(var(--c-surface));
}

.rp-row-active::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: rgb(var(--c-accent));
}

.rp-status {
  justify-self: center;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.rp-dot-ok {
  background: rgb(var(--c-up));
  box-shadow: 0 0 0 3px rgb(var(--c-up) / .12);
}

.rp-dot-warn {
  background: rgb(var(--c-warn));
  box-shadow: 0 0 0 3px rgb(var(--c-warn) / .10);
}

.rp-dot-draft {
  background: rgb(var(--c-muted));
  opacity: .6;
}

.rp-dot-mini {
  display: inline-block;
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(var(--c-warn));
}

.rp-name {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.rp-name-t {
  overflow: hidden;
  color: rgb(var(--c-ink));
  font-family: 'Fraunces', Georgia, serif;
  font-size: 16px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rp-badge {
  border: 1px solid rgb(var(--c-border));
  border-radius: 4px;
  padding: 1px 6px;
  color: rgb(var(--c-muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.rp-badge-live {
  background: transparent;
  color: rgb(var(--c-data));
}

.rp-badge-draft {
  color: rgb(var(--c-muted));
}

.rp-health {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  color: rgb(var(--c-data));
  font-size: 13px;
}

.rp-health-frag {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rp-health-mono {
  color: rgb(var(--rp-muted-strong));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

.rp-health-warn {
  color: rgb(var(--c-warn));
}

.rp-next {
  color: rgb(var(--c-data));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.rp-next-sm {
  color: rgb(var(--c-muted));
  font-size: 11px;
}

.rp-links {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgb(var(--c-data));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.rp-chev {
  display: flex;
  justify-self: end;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: rgb(var(--c-muted));
  opacity: 0;
  transition: opacity .12s;
}

.rp-row-clickable:hover .rp-chev,
.rp-row-active .rp-chev {
  opacity: 1;
}

.rp-chev svg {
  width: 16px;
  height: 16px;
}

/* draft rows sit slimmer than live rows */

.rp-draftrow {
  padding: 11px 14px;
}

/* A landing draft's state note ("landing (PR #13)" + "view PR", or the frozen
   "Saving — retry from the wizard") is wider than the save button it replaces,
   so the draft ledger widens its last data column — and narrows the saved-date
   column, which only ever holds "22 Jul" — instead of letting the note wrap or
   run past the ledger's edge (REP-035). The live ledger keeps its own tracks. */

.rp-draftrow,
.rp-cols-draft {
  grid-template-columns: 26px minmax(230px, 1.4fr) minmax(200px, 1.2fr) 100px 234px 40px;
}

.rp-draftrow .rp-links .rp-srcmini {
  white-space: nowrap;
}

.rp-draftrow .rp-name-t {
  color: rgb(var(--c-data));
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
}

.rp-origin-cell {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.rp-origin-q {
  overflow: hidden;
  color: rgb(var(--rp-muted-strong));
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rp-srcmini {
  width: -moz-fit-content;
  width: fit-content;
  padding: 0;
  color: rgb(var(--c-accent-strong));
  font-size: 11px;
  text-align: left;
  text-decoration: none;
}

.rp-srcmini:hover {
  text-decoration: underline;
}

.rp-save-btn {
  border: 1px solid rgb(var(--c-border));
  border-radius: 6px;
  background: transparent;
  padding: 3px 10px;
  color: rgb(var(--c-data));
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}

.rp-save-btn:hover:not(:disabled) {
  border-color: rgb(var(--c-accent));
  color: rgb(var(--c-ink));
}

.rp-save-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* REP-048 — the draft row's dismissal, sitting beside the Save it must not
   compete with. `.rp-save-btn` geometry EXACTLY (so the pair shares one
   baseline; `.rp-mini`'s 4px padding sat 1px higher), but no drawn border and
   muted ink, so the row keeps ONE primary action (SPEC.md round-4 law 6). The
   destructive treatment arrives on approach — the same hairline-to-`--c-down`
   move `.rp-mini-danger` makes in the Sharing pane. */

.rp-dismiss-btn {
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  padding: 3px 10px;
  color: rgb(var(--c-muted));
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}

.rp-dismiss-btn:hover:not(:disabled) {
  border-color: rgb(var(--c-down));
  color: rgb(var(--c-down));
}

.rp-dismiss-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.rp-row-note {
  color: rgb(var(--c-muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  white-space: nowrap;
}

/* ---- bottom drawer (REP-006/007/008/025) --------------------------------- */

.rp-drawer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  display: flex;
  height: 62vh;
  flex-direction: column;
  border-top: 1px solid rgb(var(--c-accent));
  background: rgb(var(--c-bg-deep));
  box-shadow: var(--rp-shadow);
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}

.rp-drawer-open {
  transform: translateY(0);
}

.rp-drawer-grip {
  display: flex;
  height: 46px;
  flex: none;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid rgb(var(--c-border));
  background: rgb(var(--c-bg-deep));
  padding: 0 24px;
}

.rp-drawer-title {
  color: rgb(var(--c-ink));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 14px;
  letter-spacing: .01em;
}

.rp-drawer-meta {
  color: rgb(var(--c-muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
}

.rp-drawer-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgb(var(--c-border));
  border-radius: 7px;
  color: rgb(var(--c-muted));
}

.rp-drawer-close:hover {
  border-color: rgb(var(--c-accent));
  color: rgb(var(--c-ink));
}

.rp-drawer-close svg {
  width: 16px;
  height: 16px;
}

.rp-dset {
  display: none;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}

.rp-dset-active {
  display: flex;
}

.rp-tabrow {
  display: flex;
  height: 42px;
  flex: none;
  align-items: center;
  gap: 4px;
  border-bottom: 1px solid rgb(var(--c-border));
  background: rgb(var(--c-bg-deep));
  padding: 0 16px;
}

.rp-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 7px;
  padding: 6px 13px;
  color: rgb(var(--c-muted));
  font-size: 13px;
  font-weight: 500;
}

.rp-tab:hover {
  background: rgb(var(--c-surface));
  color: rgb(var(--c-data));
}

.rp-tab-active {
  background: rgb(var(--c-surface));
  box-shadow: inset 0 0 0 1px rgb(var(--c-border));
  color: rgb(var(--c-ink));
}

.rp-tab-count {
  color: rgb(var(--c-muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}

.rp-tab-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(var(--c-warn));
}

.rp-pane {
  display: none;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  overflow: auto;
}

.rp-pane-active {
  display: flex;
}

.rp-phead {
  display: flex;
  flex: none;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid rgb(var(--c-border));
  padding: 11px 24px;
}

.rp-phead-title {
  color: rgb(var(--rp-muted-strong));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.rp-phead-count {
  color: rgb(var(--c-data));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.rp-mini {
  border: 1px solid rgb(var(--c-border));
  border-radius: 6px;
  padding: 4px 10px;
  color: rgb(var(--c-data));
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}

.rp-mini:hover {
  border-color: rgb(var(--c-accent));
  color: rgb(var(--c-ink));
}

.rp-mini-danger:hover {
  border-color: rgb(var(--c-down));
  color: rgb(var(--c-down));
}

.rp-mini-accent {
  border-color: rgb(var(--c-accent));
  color: rgb(var(--c-accent-strong));
}

.rp-mini-accent:hover {
  background: rgb(var(--c-accent) / .10);
}

/* ---- result tables (drawer preview + overlay) ---------------------------- */

.rp-table-wrap {
  flex: 1;
  overflow: auto;
}

.rp-table-wrap-narrow .rp-preview {
  width: auto;
  min-width: 680px;
}

.rp-table-wrap-narrow .rp-preview th,
.rp-table-wrap-narrow .rp-preview td {
  padding-right: 48px;
}

.rp-preview {
  width: 100%;
  border-collapse: collapse;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.rp-preview th {
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom: 1px solid rgb(var(--c-border));
  background: rgb(var(--c-bg-deep));
  padding: 9px 16px;
  color: rgb(var(--rp-muted-strong));
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .06em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.rp-preview td {
  border-bottom: 1px solid rgb(var(--c-border));
  padding: 8px 16px;
  color: rgb(var(--c-data));
  white-space: nowrap;
}

.rp-preview td.rp-num {
  color: rgb(var(--c-ink));
  text-align: right;
}

.rp-preview .rp-morecol {
  color: rgb(var(--c-muted));
}

.rp-col-all {
  padding: 0;
  color: rgb(var(--c-accent-strong));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.rp-col-all:hover {
  text-decoration: underline;
}

/* ---- runs pane (REP-007) -------------------------------------------------- */

.rp-runlist {
  max-width: 980px;
  padding: 10px 24px 24px;
}

.rp-run {
  display: grid;
  grid-template-columns: 14px 118px 118px 1fr auto;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid rgb(var(--c-border));
  padding: 12px 0;
}

.rp-run:last-child {
  border-bottom: none;
}

.rp-run-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.rp-run-when {
  color: rgb(var(--c-data));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.rp-run-stat {
  color: rgb(var(--rp-muted-strong));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.rp-run-stat-plain {
  color: rgb(var(--c-data));
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: 12.5px;
}

.rp-run-code {
  color: rgb(var(--c-warn));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
}

.rp-run-err .rp-run-when {
  color: rgb(var(--c-warn));
}

/* ---- sharing pane (REP-008) ---------------------------------------------- */

.rp-share-wrap {
  max-width: 640px;
  padding: 18px 24px 24px;
}

.rp-share-label {
  margin-bottom: 10px;
  color: rgb(var(--rp-muted-strong));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.rp-linkcard {
  margin-bottom: 10px;
  border: 1px solid rgb(var(--c-border));
  border-radius: 8px;
  padding: 13px 15px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
}

.rp-linkcard-head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgb(var(--c-data));
}

.rp-linkcard-token {
  color: rgb(var(--c-accent-strong));
}

.rp-linkcard-lock {
  color: rgb(var(--c-warn));
}

.rp-linkcard-meta {
  margin-top: 6px;
  color: rgb(var(--c-muted));
  font-size: 11px;
  line-height: 1.6;
}

.rp-link-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.rp-deliv-line {
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgb(var(--c-data));
  font-size: 13px;
}

.rp-deliv-line .rp-mini {
  margin-left: 8px;
}

/* ---- SQL pane (REP-025) --------------------------------------------------- */

.rp-sql-wrap {
  padding: 16px 24px 24px;
}

.rp-fixture-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  color: rgb(var(--c-up));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
}

.rp-fixture-line svg {
  width: 13px;
  height: 13px;
}

.rp-fixture-line-warn {
  color: rgb(var(--c-warn));
}

.rp-merge-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: rgb(var(--c-muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
}

.rp-leg-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.rp-leg-grid-single {
  grid-template-columns: minmax(0, 720px);
}

.rp-leg {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgb(var(--c-border));
  border-radius: 8px;
}

.rp-leg-head {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgb(var(--c-border));
  background: rgb(var(--c-surface));
  padding: 8px 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.rp-leg-name {
  color: rgb(var(--c-data));
  font-size: 12px;
}

.rp-leg-sha {
  margin-left: auto;
  color: rgb(var(--c-muted));
  font-size: 11px;
}

.rp-exp-btn {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgb(var(--c-border));
  border-radius: 6px;
  color: rgb(var(--c-muted));
}

.rp-exp-btn:hover {
  border-color: rgb(var(--c-accent));
  color: rgb(var(--c-accent-strong));
}

.rp-exp-btn svg {
  width: 13px;
  height: 13px;
}

.rp-leg-sql {
  overflow-x: auto;
  background: rgb(var(--c-bg));
  padding: 14px 16px;
  color: rgb(var(--c-data));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  line-height: 1.7;
  white-space: pre;
}

.rp-kw {
  color: rgb(var(--c-accent-strong));
}

.rp-cm {
  color: rgb(var(--c-muted));
}

.rp-restricted-line {
  color: rgb(var(--c-muted));
  font-size: 12.5px;
}

/* ---- about pane (REP-007) ------------------------------------------------- */

.rp-about-wrap {
  max-width: 760px;
  padding: 20px 24px 24px;
}

.rp-about-label {
  margin-bottom: 8px;
  color: rgb(var(--rp-muted-strong));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.rp-origin {
  margin-bottom: 22px;
}

.rp-origin-question {
  margin-bottom: 6px;
  color: rgb(var(--c-ink));
  font-family: 'Fraunces', Georgia, serif;
  font-size: 17px;
  line-height: 1.45;
}

.rp-origin-meta {
  margin-bottom: 6px;
  color: rgb(var(--c-muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
}

.rp-srclink {
  padding: 0;
  color: rgb(var(--c-accent-strong));
  font-size: 12.5px;
  text-decoration: none;
}

.rp-srclink:hover {
  text-decoration: underline;
}

.rp-prov {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgb(var(--c-border));
  padding: 7px 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
}

.rp-prov:last-child {
  border-bottom: none;
}

.rp-prov-k {
  color: rgb(var(--c-muted));
}

.rp-prov-v {
  color: rgb(var(--c-data));
}

.rp-trusted-line {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 20px;
  color: rgb(var(--c-muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .02em;
}

.rp-trusted-line svg {
  flex: none;
  width: 13px;
  height: 13px;
  color: rgb(var(--c-muted));
}

/* ---- full-screen enlarge overlay (REP-009) -------------------------------- */

.rp-enlarge {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  flex-direction: column;
  background: rgb(var(--c-bg));
}

.rp-enlarge-open {
  display: flex;
}

.rp-en-bar {
  display: flex;
  height: 60px;
  flex: none;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid rgb(var(--c-border));
  background: rgb(var(--c-bg));
  padding: 0 28px;
}

.rp-en-title {
  color: rgb(var(--c-ink));
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px;
  font-weight: 500;
}

.rp-en-meta {
  color: rgb(var(--c-muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
}

.rp-en-esc {
  border: 1px solid rgb(var(--c-border));
  border-radius: 5px;
  padding: 2px 7px;
  color: rgb(var(--c-muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: .08em;
}

.rp-en-body {
  flex: 1;
  overflow: auto;
  background: rgb(var(--c-bg));
}

.rp-en-body .rp-preview {
  font-size: 12.5px;
}

.rp-en-body .rp-preview th {
  background: rgb(var(--c-bg));
  padding: 10px 18px;
}

.rp-en-body .rp-preview td {
  padding: 9px 18px;
}

.rp-en-sql {
  min-width: -moz-fit-content;
  min-width: fit-content;
  padding: 28px 40px;
  color: rgb(var(--c-data));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13.5px;
  line-height: 1.75;
  white-space: pre;
}

/* enlarge = edit (SPEC.md round-5.1 ruling 1): the full-screen editor grid */

.rp-en-body-fill {
  display: flex;
  overflow: hidden;
}

.rp-en-editgrid {
  display: grid;
  min-height: 0;
  width: 100%;
  flex: 1;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.rp-en-col {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
}

.rp-en-col + .rp-en-col {
  border-left: 1px solid rgb(var(--c-border));
}

.rp-en-colhead {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgb(var(--c-border));
  background: rgb(var(--c-surface));
  padding: 9px 20px;
  color: rgb(var(--rp-muted-strong));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.rp-en-stats {
  color: rgb(var(--c-data));
  letter-spacing: .02em;
}

.rp-en-textarea {
  flex: 1;
  resize: none;
  border: none;
  outline: none;
  background: rgb(var(--c-bg));
  padding: 18px 22px;
  color: rgb(var(--c-ink));
  caret-color: rgb(var(--c-accent-strong));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  line-height: 1.75;
  -moz-tab-size: 4;
    -o-tab-size: 4;
       tab-size: 4;
  overflow: auto;
  white-space: pre;
}

.rp-en-diffscroll {
  flex: 1;
  overflow: auto;
}

.rp-en-diffscroll pre {
  min-width: -moz-fit-content;
  min-width: fit-content;
  margin: 0;
  padding: 18px 22px;
  color: rgb(var(--c-data));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  line-height: 1.75;
  white-space: pre;
}

/* ---- promotion wizard takeover (REP-017…020) ------------------------------ */

.rp-takeover {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  flex-direction: column;
  background: rgb(var(--c-bg));
}

.rp-takeover-open {
  display: flex;
}

.rp-tk-bar {
  display: flex;
  height: 60px;
  flex: none;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid rgb(var(--c-border));
  padding: 0 28px;
}

.rp-tk-step {
  border: 1px solid rgb(var(--c-accent));
  border-radius: 5px;
  background: rgb(var(--c-accent) / .10);
  padding: 3px 9px;
  color: rgb(var(--c-accent-strong));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.rp-tk-title {
  color: rgb(var(--c-ink));
  font-family: 'Fraunces', Georgia, serif;
  font-size: 21px;
  font-weight: 500;
}

.rp-tk-body {
  width: 100%;
  max-width: 1180px;
  flex: 1;
  margin: 0 auto;
  overflow-y: auto;
  padding: 24px 40px 32px;
}

.rp-tk-origin {
  display: flex;
  min-height: 38px;
  flex: none;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgb(var(--c-border));
  background: rgb(var(--c-bg-deep));
  padding: 8px 28px;
}

.rp-tk-origin-label {
  color: rgb(var(--c-muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.rp-tk-origin-q {
  overflow: hidden;
  color: rgb(var(--c-data));
  font-family: 'Fraunces', Georgia, serif;
  font-size: 14px;
  font-style: italic;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rp-tk-valueline {
  color: rgb(var(--c-muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  white-space: nowrap;
}

.rp-wiz-rail {
  display: grid;
  flex: none;
  border-bottom: 1px solid rgb(var(--c-border));
  background: rgb(var(--c-bg));
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rp-wstep {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
  border-right: 1px solid rgb(var(--c-border));
  padding: 12px 22px;
  text-align: left;
}

.rp-wstep:last-child {
  border-right: none;
}

.rp-wstep::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: transparent;
}

.rp-wstep-current {
  background: rgb(var(--c-surface));
}

.rp-wstep-current::after {
  background: rgb(var(--c-accent));
}

.rp-wstep:hover:not(.rp-wstep-locked):not(.rp-wstep-current) {
  background: rgb(var(--c-surface));
}

.rp-wstep-locked {
  cursor: not-allowed;
}

.rp-wstep-num {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid rgb(var(--c-border));
  border-radius: 50%;
  background: rgb(var(--c-bg-deep));
  color: rgb(var(--c-muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
}

.rp-wstep-num svg {
  width: 12px;
  height: 12px;
}

.rp-wstep-current .rp-wstep-num {
  border-color: rgb(var(--c-accent));
  background: rgb(var(--c-accent) / .10);
  color: rgb(var(--c-accent-strong));
}

.rp-wstep-done .rp-wstep-num {
  border-color: rgb(var(--c-up));
  background: rgb(var(--c-up) / .12);
  color: rgb(var(--c-up));
}

.rp-wstep-invalid .rp-wstep-num {
  border-color: rgb(var(--c-warn));
  background: rgb(var(--c-warn) / .10);
  color: rgb(var(--c-warn));
}

.rp-wstep-txt {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.rp-wstep-lbl {
  overflow: hidden;
  color: rgb(var(--c-text));
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rp-wstep-current .rp-wstep-lbl {
  color: rgb(var(--c-ink));
}

.rp-wstep-locked .rp-wstep-lbl {
  color: rgb(var(--c-muted));
  font-weight: 500;
}

.rp-wstep-cap {
  overflow: hidden;
  color: rgb(var(--c-muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rp-wstep-done .rp-wstep-cap {
  color: rgb(var(--c-up));
}

.rp-wstep-invalid .rp-wstep-cap {
  color: rgb(var(--c-warn));
}

.rp-wpanel {
  display: none;
}

.rp-wpanel-active {
  display: block;
}

/* step 1 — AI draft beside the editable final */

.rp-sxs {
  display: grid;
  align-items: stretch;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rp-leg-editable {
  transition: border-color .12s;
}

.rp-leg-editable:focus-within {
  border-color: rgb(var(--c-accent));
}

.rp-leg-textarea {
  width: 100%;
  min-height: 300px;
  flex: 1;
  resize: vertical;
  border: none;
  outline: none;
  background: rgb(var(--c-bg));
  padding: 14px 16px;
  color: rgb(var(--c-ink));
  caret-color: rgb(var(--c-accent-strong));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  line-height: 1.7;
  -moz-tab-size: 4;
    -o-tab-size: 4;
       tab-size: 4;
  overflow: auto;
  white-space: pre;
}

.rp-edited-chip {
  border: 1px solid rgb(var(--c-accent));
  border-radius: 9999px;
  background: rgb(var(--c-accent) / .10);
  padding: 1px 7px;
  color: rgb(var(--c-accent-strong));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* unified live diff */

.rp-diffu {
  overflow: hidden;
  margin-top: 14px;
  border: 1px solid rgb(var(--c-border));
  border-radius: 8px;
  background: rgb(var(--c-bg));
}

.rp-diffu-head {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgb(var(--c-border));
  background: rgb(var(--c-surface));
  padding: 8px 12px;
  color: rgb(var(--rp-muted-strong));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.rp-diffu-stats {
  color: rgb(var(--c-data));
  letter-spacing: .02em;
}

.rp-diffu pre {
  margin: 0;
  overflow-x: auto;
  padding: 14px 16px;
  color: rgb(var(--c-data));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.7;
  white-space: pre;
}

.rp-del {
  background: rgb(var(--c-down) / .10);
  color: rgb(var(--c-down));
}

.rp-add {
  background: rgb(var(--c-up) / .12);
  color: rgb(var(--c-up));
}

.rp-gl {
  display: inline-block;
  width: 1.1em;
  text-align: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.rp-gl-add {
  color: rgb(var(--c-up));
}

.rp-gl-del {
  color: rgb(var(--c-down));
}

.rp-gl-ctx {
  color: rgb(var(--c-muted));
}

/* foolproof solidify — the cap decision chip + the "This report locks in:"
   summary, both under the diff. Amber marks the one thing needing attention
   (the display cap); the summary is quiet and informational. Both modes use
   only the two-mode tokens. */

.rp-solidify {
  margin-top: 14px;
}

.rp-cap-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  border-left: 2px solid rgb(var(--c-warn));
  border-radius: 0 8px 8px 0;
  background: rgb(var(--c-warn) / .10);
  padding: 10px 14px;
  color: rgb(var(--c-data));
  font-size: 13px;
}

/* Once decided, the chip drops its amber urgency to a resting hairline. */

.rp-cap-chip.rp-cap-decided {
  border-left-color: rgb(var(--c-border));
  background: rgb(var(--c-surface));
  color: rgb(var(--c-muted));
}

.rp-cap-text {
  display: inline-flex;
  align-items: baseline;
  gap: .3em;
}

.rp-cap-num {
  color: rgb(var(--c-warn));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.rp-cap-chip.rp-cap-decided .rp-cap-num {
  color: rgb(var(--c-data));
}

.rp-cap-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.rp-cap-resolved {
  color: rgb(var(--c-muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.rp-locksin {
  margin-top: 12px;
  border: 1px solid rgb(var(--c-border));
  border-radius: 8px;
  background: rgb(var(--c-bg));
  padding: 10px 14px;
}

.rp-locksin-head {
  margin-bottom: 6px;
  color: rgb(var(--rp-muted-strong));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.rp-locksin-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rp-locksin-list.rp-locksin-clamped > .rp-locksin-item:nth-child(n + 7) {
  display: none;
}

.rp-locksin-item {
  padding: 2px 0;
  border-bottom: 1px solid rgb(var(--c-border));
  color: rgb(var(--c-text));
  font-size: 13px;
}

.rp-locksin-item:last-child {
  border-bottom: 0;
}

.rp-locksin-mono {
  color: rgb(var(--c-data));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  word-break: break-word;
}

.rp-locksin .rp-mini {
  margin-top: 8px;
}

.rp-invalid-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  border-left: 2px solid rgb(var(--c-warn));
  border-radius: 0 8px 8px 0;
  background: rgb(var(--c-warn) / .10);
  padding: 10px 14px;
  color: rgb(var(--c-data));
  font-size: 13px;
}

.rp-invalid-note svg {
  flex: none;
  width: 14px;
  height: 14px;
  color: rgb(var(--c-warn));
}

.rp-invalid-note b {
  color: rgb(var(--c-warn));
}

.rp-tk-block {
  margin-bottom: 32px;
}

.rp-block-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: rgb(var(--rp-muted-strong));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.rp-block-num {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid rgb(var(--c-accent));
  border-radius: 50%;
  color: rgb(var(--c-accent-strong));
  font-size: 10px;
}

.rp-block-sub {
  margin: -6px 0 14px;
  color: rgb(var(--c-muted));
  font-size: 12.5px;
}

.rp-diff-legend {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 10px;
  color: rgb(var(--c-muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
}

.rp-lg {
  display: inline-block;
  width: 1.1em;
  margin-right: 5px;
  font-weight: 600;
  text-align: center;
}

.rp-lg-add {
  color: rgb(var(--c-up));
}

.rp-lg-del {
  color: rgb(var(--c-down));
}

/* step 2 — the column checklist */

.rp-contract {
  overflow: hidden;
  border: 1px solid rgb(var(--c-border));
  border-radius: 8px;
}

.rp-contract-row {
  display: grid;
  grid-template-columns: 28px 1fr 120px 210px;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgb(var(--c-border));
  padding: 8px 14px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
}

.rp-contract-row:last-child {
  border-bottom: none;
}

.rp-contract-head {
  background: rgb(var(--c-surface));
  padding: 7px 14px;
  color: rgb(var(--rp-muted-strong));
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.rp-contract-chk {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1px solid rgb(var(--c-up));
  border-radius: 4px;
  background: rgb(var(--c-up) / .12);
  color: rgb(var(--c-up));
}

.rp-contract-chk svg {
  width: 11px;
  height: 11px;
}

.rp-contract-cn {
  color: rgb(var(--c-data));
}

.rp-contract-ct {
  color: rgb(var(--c-muted));
  font-size: 11px;
}

.rp-contract-cnm {
  color: rgb(var(--c-ink));
}

.rp-contract-pick {
  cursor: pointer;
}

.rp-contract-pick:hover {
  background: rgb(var(--c-surface));
}

.rp-contract-off .rp-contract-chk {
  border-color: rgb(var(--c-border));
  background: rgb(var(--c-bg-deep));
}

.rp-contract-off .rp-contract-chk svg {
  display: none;
}

.rp-contract-off .rp-contract-cn,
.rp-contract-off .rp-contract-cnm {
  color: rgb(var(--c-muted));
  text-decoration: line-through;
}

.rp-contract-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid rgb(var(--c-border));
  background: rgb(var(--c-surface));
  padding: 10px 14px;
  color: rgb(var(--c-muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
}

.rp-contract-allok {
  color: rgb(var(--c-up));
}

/* step 3 — the blocking sample run */

.rp-samplerun {
  overflow: hidden;
  border: 1px solid rgb(var(--c-border));
  border-radius: 8px;
}

.rp-samplerun-head {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgb(var(--c-border));
  padding: 10px 14px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
}

.rp-samplerun-ok {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgb(var(--c-up));
}

.rp-samplerun-ok svg {
  width: 15px;
  height: 15px;
}

.rp-samplerun-rc {
  margin-left: auto;
  color: rgb(var(--c-data));
}

/* step 4 — the read-only system integrity record */

.rp-integrity {
  max-width: 860px;
  overflow: hidden;
  border: 1px solid rgb(var(--c-border));
  border-radius: 10px;
}

.rp-irow {
  display: grid;
  grid-template-columns: 26px 168px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 12px;
  border-bottom: 1px solid rgb(var(--c-border));
  padding: 11px 16px;
}

.rp-irow:last-child {
  border-bottom: none;
}

.rp-ig {
  display: flex;
  align-self: center;
  color: rgb(var(--c-up));
}

.rp-ig svg {
  width: 14px;
  height: 14px;
}

.rp-ig-sys {
  color: rgb(var(--c-muted));
}

.rp-ik {
  color: rgb(var(--c-muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.rp-iv {
  color: rgb(var(--c-data));
  font-size: 13px;
  line-height: 1.5;
}

.rp-iv .rp-mono {
  font-size: 12px;
}

.rp-iv b {
  color: rgb(var(--c-ink));
  font-weight: 600;
}

.rp-ijump {
  padding: 0;
  color: rgb(var(--c-accent-strong));
  font-size: 12px;
  white-space: nowrap;
}

.rp-ijump:hover {
  text-decoration: underline;
}

.rp-note-opt {
  max-width: 860px;
  margin-top: 16px;
}

.rp-note-opt label {
  display: block;
  margin-bottom: 6px;
  color: rgb(var(--c-muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.rp-note-opt input {
  width: 100%;
  border: 1px solid rgb(var(--c-border));
  border-radius: 7px;
  background: rgb(var(--c-surface));
  padding: 9px 12px;
  color: rgb(var(--c-text));
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: 13px;
}

.rp-note-opt input:focus {
  border-color: rgb(var(--c-accent));
  outline: none;
}

.rp-approve-line {
  max-width: 860px;
  margin-top: 16px;
  color: rgb(var(--c-muted));
  font-size: 12.5px;
}

.rp-approve-line b {
  color: rgb(var(--c-data));
}

/* gate checkboxes */

.rp-gate-check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  border: 1px solid rgb(var(--c-border));
  border-radius: 8px;
  padding: 10px 12px;
  color: rgb(var(--c-data));
  font-size: 12.5px;
  cursor: pointer;
}

.rp-gate-check:hover {
  border-color: rgb(var(--c-accent));
}

.rp-gate-check input {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgb(var(--c-muted));
  border-radius: 4px;
  background: rgb(var(--c-bg));
  cursor: pointer;
}

.rp-gate-check input:checked {
  border-color: rgb(var(--c-accent));
  background: rgb(var(--c-accent));
}

.rp-gate-check input:checked::after {
  content: "";
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translateY(-1px);
}

.rp-gate-check-locked {
  opacity: .6;
  cursor: not-allowed;
}

.rp-gate-check-locked:hover {
  border-color: rgb(var(--c-border));
}

.rp-gate-check-locked input {
  cursor: not-allowed;
}

.rp-gate-lockmsg {
  margin-left: auto;
  color: rgb(var(--c-warn));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  white-space: nowrap;
}

.rp-gate-check:not(.rp-gate-check-locked) .rp-gate-lockmsg {
  display: none;
}

/* sticky wizard footer */

.rp-tk-foot {
  display: flex;
  height: 60px;
  flex: none;
  align-items: center;
  gap: 16px;
  border-top: 1px solid rgb(var(--c-border));
  background: rgb(var(--c-bg-deep));
  padding: 0 40px;
}

.rp-w-pos {
  color: rgb(var(--c-muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  white-space: nowrap;
}

.rp-w-hint {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: rgb(var(--c-muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rp-w-hint-block {
  color: rgb(var(--c-warn));
}

/* PR landing state banner */

.rp-landing-banner {
  display: none;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  border: 1px solid rgb(var(--c-accent));
  border-radius: 8px;
  background: rgb(var(--c-accent) / .10);
  padding: 12px 16px;
  color: rgb(var(--c-data));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
}

.rp-landing-banner-show {
  display: flex;
}

.rp-landing-banner svg {
  width: 15px;
  height: 15px;
  color: rgb(var(--c-accent-strong));
}

.rp-landing-banner a {
  color: rgb(var(--c-accent-strong));
  text-decoration: underline;
}

.rp-spin {
  animation: rpSpin 1.4s linear infinite;
}

@keyframes rpSpin {
  to {
    transform: rotate(360deg);
  }
}

/* new-report picker overlay (REP-015) */

.rp-picker {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgb(var(--scrim) / var(--scrim-alpha));
}

.rp-picker-open {
  display: flex;
}

.rp-picker-card {
  width: 560px;
  overflow: hidden;
  border: 1px solid rgb(var(--c-border));
  border-radius: 12px;
  background: rgb(var(--c-surface));
  box-shadow: 0 20px 60px rgb(0 0 0 / .5);
}

.rp-picker-head {
  border-bottom: 1px solid rgb(var(--c-border));
  padding: 18px 22px;
}

.rp-picker-title {
  color: rgb(var(--c-ink));
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px;
}

.rp-picker-sub {
  margin-top: 3px;
  color: rgb(var(--c-muted));
  font-size: 12.5px;
}

.rp-conv {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgb(var(--c-border));
  padding: 13px 22px;
  text-align: left;
  cursor: pointer;
}

.rp-conv:hover {
  background: rgb(var(--c-bg));
}

.rp-conv-blocked {
  opacity: .6;
  cursor: not-allowed;
}

.rp-conv-q {
  min-width: 0;
  flex: 1;
}

.rp-conv-qt {
  overflow: hidden;
  color: rgb(var(--c-data));
  font-size: 13.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rp-conv-qm {
  margin-top: 2px;
  color: rgb(var(--c-muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
}

.rp-elig {
  border: 1px solid rgb(var(--c-border));
  border-radius: 4px;
  padding: 2px 8px;
  color: rgb(var(--c-muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.rp-elig-ok {
  border-color: rgb(var(--c-up) / .35);
  background: rgb(var(--c-up) / .12);
  color: rgb(var(--c-up));
}

.rp-picker-foot {
  display: flex;
  justify-content: flex-end;
  padding: 14px 22px;
}

@media (prefers-reduced-motion: reduce) {
  .rp-drawer {
    transition: none;
  }

  .rp-spin {
    animation: none;
  }
}

/* Small screens: the ledger grid collapses to a readable two-column stack. */

@media (max-width: 720px) {
  .rp-cols {
    display: none;
  }

  .rp-row {
    grid-template-columns: 26px minmax(0, 1fr);
    row-gap: 6px;
  }

  .rp-row > .rp-health,
  .rp-row > .rp-next,
  .rp-row > .rp-links,
  .rp-row > .rp-origin-cell {
    grid-column: 2;
  }

  .rp-chev {
    display: none;
  }

  .rp-sxs,
  .rp-leg-grid,
  .rp-en-editgrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .rp-wiz-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============================================================
   home-desk — HD-003. The Home Ops Board (approved variant B4).

   SOLE-OWNER BLOCK. Every Home-Desk rule lives here and nowhere else: later
   tile stories (HD-005b..HD-013) add MARKUP ONLY using these class names, and
   HD-010 refines the grid/breakpoints inside this same section.

   Values are lifted VERBATIM from the founder-approved, checksum-pinned
   artifact (HD-016): docs/design/home-desk/base.css + the variant-b4.html
   style block. Verify the source with
   `sha256sum -c docs/design/home-desk/CHECKSUMS`.

   TOKEN MAPPING. The artifact's own token names map onto the app's CT Ledger
   --c-* tokens (--surface -> --c-surface, --amber -> --c-warn, ...). The three
   values CT Ledger has no global token for — the two per-mode accent washes
   and the card shadow — become #home-view-scoped aliases below, so both modes
   keep the artifact's exact alphas without inventing app-wide tokens.
   `color-mix(in srgb, var(--accent) N%, transparent)` in the artifact is the
   accent at N% alpha, written here as the house `rgb(var(--c-accent) / .N)`.

   SELECTORS are the mockup's own class names, verbatim (the canonical selector
   map: .ask2 .board .tile .sec-head .irow .rrow .lrow .cslot .schip .teach
   .admin-band .hdot .jchip .rowttl .rowmeta .mic-pill .mic-inline) — no hd-*
   prefix. EVERY rule is scoped under #home-view so the generic names (.card,
   .row, .tile, .teach, .body) cannot leak into the rest of the app.

   Authored as plain CSS OUTSIDE @layer — like the .rp-* reports block above —
   so the content scanner can never purge it; the dynamically composed names
   are additionally registered in tailwind.config.js (the chevron-purge
   lesson).
   ============================================================ */

#home-view {
  --hd-sans: 'Instrument Sans', system-ui, sans-serif;
  --hd-display: Fraunces, Georgia, serif;
  --hd-mono: 'JetBrains Mono', ui-monospace, monospace;
  /* artifact base.css: --accent-dim rgba(27,93,126,.08), --accent-wash rgba(27,93,126,.045) */
  --hd-accent-dim: rgb(var(--c-accent) / .08);
  --hd-accent-wash: rgb(var(--c-accent) / .045);
  /* artifact base.css: --shadow 0 1px 2px rgba(15,34,48,.04), 0 1px 3px rgba(15,34,48,.06) */
  --hd-shadow: 0 1px 2px rgb(var(--c-ink) / .04), 0 1px 3px rgb(var(--c-ink) / .06);
}

[data-theme='dark'] #home-view {
  /* artifact base.css: --accent-dim rgba(63,143,181,.10), --accent-wash rgba(63,143,181,.05) */
  --hd-accent-dim: rgb(var(--c-accent) / .10);
  --hd-accent-wash: rgb(var(--c-accent) / .05);
  /* artifact base.css: --shadow 0 1px 2px rgba(0,0,0,.25) */
  --hd-shadow: 0 1px 2px rgb(0 0 0 / .25);
}

/* ---- ledger primitives the board is built from (base.css) ---- */

#home-view .kicker {
  font-family: var(--hd-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgb(var(--c-muted));
}

#home-view .mono {
  font-family: var(--hd-mono);
  font-variant-numeric: tabular-nums;
}

#home-view .display {
  font-family: var(--hd-display);
  font-optical-sizing: auto;
}

#home-view .card {
  background: rgb(var(--c-surface));
  border: 1px solid rgb(var(--c-border));
  border-radius: 12px;
}

#home-view svg {
  display: block;
}

/* section heads (base.css) */

#home-view .sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

#home-view .sec-head .lbl {
  font-family: var(--hd-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgb(var(--c-muted));
}

#home-view .sec-head .more {
  font-size: 12px;
  font-weight: 500;
  color: rgb(var(--c-muted));
}

#home-view .sec-head .more:hover {
  color: rgb(var(--c-accent));
}

/* health dots (base.css) — the dot is never the only signal (INV-HD-004);
   the text label beside it is HD-006/HD-013's. */

#home-view .hdot {
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  flex-shrink: 0;
}

#home-view .hdot.ok {
  background: rgb(var(--c-up));
}

#home-view .hdot.warn {
  background: rgb(var(--c-warn));
}

#home-view .hdot.err {
  background: rgb(var(--c-down));
}

#home-view .hdot.idle {
  background: rgb(var(--c-muted));
}

/* fix-job state chips (base.css) */

#home-view .jchip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--hd-mono);
  font-size: 10px;
  letter-spacing: .02em;
  border-radius: 9999px;
  padding: 2px 9px;
  border: 1px solid transparent;
  white-space: nowrap;
}

#home-view .jchip .g {
  width: 5px;
  height: 5px;
  border-radius: 9999px;
}

/* HD-012 — `idle` is the muted tone under a name that can honestly carry a
   REJECTED job or a report with no fix job at all (`.hdot.idle` already uses
   the same token for the health strip). The mockup only had four coarse
   states; the real FixJobState domain has thirteen, and home-feedback.js maps
   every one of them onto a tone whose meaning matches the triage inbox's. */

#home-view .jchip.queued,
#home-view .jchip.idle {
  color: rgb(var(--c-muted));
  border-color: rgb(var(--c-border));
  background: rgb(var(--c-surface-muted));
}

#home-view .jchip.queued .g,
#home-view .jchip.idle .g {
  background: rgb(var(--c-muted));
}

#home-view .jchip.running {
  color: rgb(var(--c-accent-strong));
  border-color: rgb(var(--c-accent) / .4);
  background: var(--hd-accent-dim);
}

#home-view .jchip.running .g {
  background: rgb(var(--c-accent-strong));
  animation: hd-jchip-pulse 1.4s ease-in-out infinite;
}

/* HD-012 — `attention` shares the amber band with `candidate` (a job PARKED on
   needs_human wants a human exactly as much as a candidate awaiting a verdict)
   but keeps its own name, so the DOM never labels a parked job "candidate". */

#home-view .jchip.candidate,
#home-view .jchip.attention {
  color: rgb(var(--c-warn));
  border-color: rgb(var(--c-warn) / .45);
  background: rgb(var(--c-warn) / .12);
}

#home-view .jchip.candidate .g,
#home-view .jchip.attention .g {
  background: rgb(var(--c-warn));
}

/* HD-012 — a failed / gate-failed fix job. The mockup had no failure chip, and
   rendering one amber (still workable) or green (shipped) would misstate it. */

#home-view .jchip.failed {
  color: rgb(var(--c-down));
  border-color: rgb(var(--c-down) / .45);
  background: rgb(var(--c-down) / .12);
}

#home-view .jchip.failed .g {
  background: rgb(var(--c-down));
}

#home-view .jchip.deployed {
  color: rgb(var(--c-up));
  border-color: rgb(var(--c-up) / .4);
  background: rgb(var(--c-up) / .12);
}

#home-view .jchip.deployed .g {
  background: rgb(var(--c-up));
}

@keyframes hd-jchip-pulse {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: .3;
  }
}

@media (prefers-reduced-motion: reduce) {
  #home-view .jchip.running .g {
    animation: none;
  }
}

/* teaching empty state (base.css + the B4 typography override) */

#home-view .teach {
  border: 1px dashed rgb(var(--c-border) / .9);
  border-radius: 10px;
  padding: 18px 18px;
  background: var(--hd-accent-wash);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#home-view .teach .th {
  font-family: var(--hd-display);
  font-size: 15px;
  font-weight: 500;
  color: rgb(var(--c-ink));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#home-view .teach .td {
  font-size: 12.5px;
  line-height: 1.55;
  color: rgb(var(--c-muted));
  max-width: 46ch;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#home-view .teach .ta {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: rgb(var(--c-accent));
  font-family: var(--hd-sans);
}

#home-view .teach .ta:hover {
  color: rgb(var(--c-accent-strong));
}

/* admin band marker (base.css) */

#home-view .admin-band {
  position: relative;
}

#home-view .admin-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--hd-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgb(var(--c-muted));
  border: 1px solid rgb(var(--c-border));
  border-radius: 9999px;
  padding: 2px 8px;
}

#home-view .admin-tag svg {
  width: 11px;
  height: 11px;
}

/* ---- hero: greeting + full-width composer (HD-003c fills it) ---- */

#home-view .hero {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 10px;
}

#home-view .greet {
  font-family: var(--hd-display);
  font-size: 21px;
  font-weight: 500;
  color: rgb(var(--c-ink));
  letter-spacing: -.01em;
}

#home-view .greet b {
  font-weight: 600;
}

#home-view .ask2 {
  background: rgb(var(--c-surface));
  border: 1px solid rgb(var(--c-border));
  border-radius: 14px;
  box-shadow: var(--hd-shadow);
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}

#home-view .ask2:focus-within {
  border-color: rgb(var(--c-accent) / .5);
  box-shadow: 0 0 0 3px var(--hd-accent-dim);
}

#home-view .ask2 .ask-top {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 17px 20px 13px;
}

#home-view .ask2 .glyph {
  font-family: var(--hd-display);
  color: rgb(var(--c-accent));
  font-size: 22px;
  line-height: 26px;
  flex-shrink: 0;
}

#home-view .ask2 textarea {
  flex: 1;
  min-width: 0;
  background: none;
  resize: none;
  font-family: var(--hd-sans);
  font-size: 15.5px;
  line-height: 26px;
  min-height: 26px;
  color: rgb(var(--c-text));
  caret-color: rgb(var(--c-ink));
}

#home-view .ask2 textarea::-moz-placeholder {
  color: rgb(var(--c-muted));
}

#home-view .ask2 textarea::placeholder {
  color: rgb(var(--c-muted));
}

/* SPEC-NOTES r3 note 1: the inner field is CHROMELESS in EVERY state — the
   outer .ask2 card alone carries the hover/focus treatment via :focus-within. */

#home-view .ask2 textarea,
#home-view .ask2 textarea:hover,
#home-view .ask2 textarea:focus,
#home-view .ask2 textarea:focus-visible,
#home-view .ask2 textarea:active {
  border: none;
  outline: none;
  box-shadow: none;
  background: none;
}

#home-view .ask2 .ask-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid rgb(var(--c-border));
  padding: 10px 14px 10px 20px;
}

/* "Speak it" mic pill — mirrors the shipped Insights composer footer control */

#home-view .mic-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  border: 1px solid rgb(var(--c-border));
  border-radius: 6px;
  padding: 4px 10px;
  font-family: var(--hd-sans);
  font-size: 11px;
  font-weight: 500;
  color: rgb(var(--c-muted));
  cursor: pointer;
  background: none;
}

#home-view .mic-pill:hover:not(:disabled) {
  color: rgb(var(--c-ink));
  border-color: rgb(var(--c-accent) / .5);
}

#home-view .mic-pill svg {
  width: 13px;
  height: 13px;
}

/* HD-004 — the capture (bi-voice-capture.js) HIDES a control it cannot drive.
   An author `display` beats the `hidden` attribute, so every mic rule below is
   written to yield to it: a browser without a recorder shows no mic at all
   rather than a dead one. */

#home-view .mic-pill[hidden] {
  display: none;
}

/* inline mic (mobile field) — mirrors the shipped bi-mic-inline.
   DESKTOP: not rendered — the artifact draws it in the 390 frame only
   (variant-b4.html:358), where the footer pill's label has no room. */

#home-view .mic-inline {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: rgb(var(--c-muted));
  cursor: pointer;
  background: none;
  border: none;
  margin-top: -2px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

#home-view .mic-inline:hover {
  color: rgb(var(--c-accent));
  background: var(--hd-accent-dim);
}

#home-view .mic-inline svg {
  width: 17px;
  height: 17px;
}

/* RECORDING. Both controls are the stop control (the capture is one toggle),
   but they say so differently: the LABELLED pill says it in words (the shared
   capture writes `● 0:07 — Stop` into it), the label-less in-field mic morphs
   into the stop square. Saying it twice on the pill — a stop glyph AND the word
   — is what the first render looked like, and it read as noise.
   The pill's red comes from `.text-down`/`.border-down`, which the shared
   capture adds itself; those are `@layer utilities` (0,1,0) and every rule in
   this block is id-scoped (1,1,0), so without re-stating them here the id
   selector silently wins and the recording pill paints its resting grey. */

#home-view .mic-inline .mic-mic {
  display: inline-flex;
}

#home-view .mic-inline .mic-stop {
  display: none;
}

#home-view .home-voice-recording .mic-inline .mic-mic {
  display: none;
}

#home-view .home-voice-recording .mic-inline .mic-stop {
  display: inline-flex;
}

#home-view .mic-pill.text-down {
  color: rgb(var(--c-down));
}

#home-view .mic-pill.border-down {
  border-color: rgb(var(--c-down));
}

#home-view .home-voice-recording .mic-inline {
  color: #fff;
  background: rgb(var(--c-accent));
}

#home-view .home-voice-busy .mic-inline {
  opacity: .55;
  cursor: default;
}

#home-view .mic-pill:disabled,
#home-view .mic-inline:disabled {
  cursor: not-allowed;
}

/* The capture's error channel (aria-live). Empty in every healthy state, and
   `:empty` keeps it from reserving a gap in the footer when it is. */

#home-view .ask2 .mic-status {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--hd-mono);
  font-size: 10.5px;
  line-height: 1;
  color: rgb(var(--c-down));
}

#home-view .ask2 .mic-status:empty {
  display: none;
}

#home-view .ask2 .kb {
  font-family: var(--hd-mono);
  font-size: 10px;
  color: rgb(var(--c-muted));
  border: 1px solid rgb(var(--c-border));
  border-radius: 6px;
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  cursor: pointer;
}

#home-view .ask2 .kb:hover:not(:disabled) {
  color: rgb(var(--c-accent));
  border-color: rgb(var(--c-accent) / .4);
}

#home-view .ask2 .kb svg {
  width: 11px;
  height: 11px;
}

#home-view .ask2 .foot-spacer {
  flex: 1;
}

#home-view .ask2 .kbd-hint {
  font-family: var(--hd-mono);
  font-size: 10.5px;
  color: rgb(var(--c-muted));
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

#home-view .ask2 .kbd-hint kbd {
  border: 1px solid rgb(var(--c-border));
  border-radius: 4px;
  padding: 1px 4px;
  color: rgb(var(--c-data));
  font-family: inherit;
}

#home-view .btn-ask {
  flex-shrink: 0;
  background: rgb(var(--c-accent));
  color: #fff;
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 13.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

#home-view .btn-ask:hover:not(:disabled) {
  background: rgb(var(--c-accent-strong));
}

#home-view .btn-ask svg {
  width: 14px;
  height: 14px;
}

/* HD-003b — the honest disabled read. Ask ships disabled while the box is
   empty (mirroring the Insights Run button) and `Speak it` stays disabled
   until HD-004, so both need to LOOK unavailable rather than merely swallow
   the click. Same treatment as the app's other disabled buttons (.rp-btn). */

#home-view .mic-pill:disabled,
#home-view .ask2 .kb:disabled,
#home-view .btn-ask:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* ---- the board grid (HD-010) ----------------------------------------------
   THE WRAP. Home keeps the app shell (sidebar + top bar) and is deliberately
   NOT in index.html's full-bleed route list (#/bi, #/share, #/compose) — the
   board is a document, not a room. The shell's own wrap is `max-w-6xl` (1152px);
   the artifact's is `.wrap{max-width:1160px;padding:30px 24px 96px}`
   (variant-b4.html:25). Same 24px gutters, 8px wider column — so Home widens the
   shell's wrap to the artifact's exact figure instead of re-implementing it
   inside #home-view (which would double the gutters). Route-scoped, so it
   cannot leak into any other view.

   THE BREAKPOINTS are the artifact's (variant-b4.html:67-68) and are
   NON-OVERLAPPING by construction: `max-width` queries apply BELOW the boundary,
   so 1081 -> 3-up, 1080 -> 2-up, 721 -> 2-up, 720 -> 1-up, 390 -> 1-up. They are
   VIEWPORT queries, matching the live probe's five-viewport assertion; the
   sidebar's width is absorbed by the 1fr tracks, not by the query. */

#app[data-current-route='home'] {
  max-width: 1160px;
}

#home-view .board-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 26px 0 14px;
}

#home-view .board-head .kicker {
  font-size: 11px;
}

#home-view .board-head .hint {
  font-family: var(--hd-mono);
  font-size: 10.5px;
  color: rgb(var(--c-muted));
}

#home-view .board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

@media (max-width: 1080px) {
  #home-view .board {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 720px) {
  #home-view .board {
    grid-template-columns: 1fr;
  }
}

#home-view .tile {
  padding: 16px 17px 15px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#home-view .tile .sec-head {
  margin-bottom: 12px;
}

/* ============ ONE TYPOGRAPHIC SYSTEM (founder note 8) ============
   tile titles      -> .sec-head .lbl   (mono 11 uppercase)
   row primaries    -> 13px sans 500 --text lh 1.4, 2-line clamp
   row metadata     -> mono 10px --muted
   empty titles     -> Fraunces 15px 500 --ink, exactly 1 line
   empty bodies     -> 12.5px sans --muted, exactly 2 lines               */

#home-view .rowttl {
  font-size: 13px;
  font-weight: 500;
  color: rgb(var(--c-text));
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

#home-view .rowmeta {
  font-family: var(--hd-mono);
  font-size: 10px;
  color: rgb(var(--c-muted));
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

#home-view .rowmeta .sep {
  opacity: .4;
}

/* generic row list (drafts / compose) */

#home-view .rows {
  display: flex;
  flex-direction: column;
}

#home-view .row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid rgb(var(--c-border));
  min-width: 0;
}

#home-view .row:first-child {
  border-top: none;
  padding-top: 2px;
}

#home-view .row .body {
  flex: 1;
  min-width: 0;
}

/* ---- Recent insights: clickable rows w/ LEFT chart slot (SPEC-NOTES r3
   note 2 — fixed-width slot, text never overlaps the chart) ---- */

#home-view .ins-rows {
  display: flex;
  flex-direction: column;
  margin: 0 -17px -15px;
}

#home-view .irow {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 34px 10px 17px;
  border-top: 1px solid rgb(var(--c-border));
  cursor: pointer;
  text-decoration: none;
  min-height: 64px;
}

#home-view .irow:first-child {
  border-top: none;
}

#home-view .irow:last-child {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

#home-view .irow:hover,
#home-view .irow:focus-visible {
  background: var(--hd-accent-wash);
}

#home-view .irow .ibody {
  flex: 1;
  min-width: 0;
}

#home-view .irow .chev {
  position: absolute;
  right: 13px;
  top: 50%;
  margin-top: -8px;
  color: rgb(var(--c-accent));
  opacity: 0;
  transform: translateX(-3px);
  transition: opacity 120ms ease-out, transform 120ms ease-out;
}

#home-view .irow:hover .chev,
#home-view .irow:focus-visible .chev {
  opacity: 1;
  transform: none;
}

#home-view .irow .chev svg {
  width: 14px;
  height: 14px;
}

/* the chart slot — fixed width so text aligns across rows (HD-011 draws it) */

#home-view .cslot {
  width: 72px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#home-view .cslot svg {
  display: block;
}

#home-view .cslot .cline .area {
  fill: var(--hd-accent-dim);
  stroke: none;
}

#home-view .cslot .cline .line {
  fill: none;
  stroke: rgb(var(--c-accent) / .7);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#home-view .cslot .cbars rect {
  fill: rgb(var(--c-accent) / .35);
}

#home-view .cslot .cbars rect.hot {
  fill: rgb(var(--c-accent));
}

#home-view .cslot .cdonut .track {
  fill: none;
  stroke: rgb(var(--c-surface-muted));
  stroke-width: 5;
}

#home-view .cslot .cdonut .arc {
  fill: none;
  stroke: rgb(var(--c-accent));
  stroke-width: 5;
  stroke-linecap: round;
}

#home-view .cslot .scalar {
  font-family: var(--hd-mono);
  font-size: 16px;
  font-weight: 500;
  color: rgb(var(--c-data));
  font-variant-numeric: tabular-nums;
}

#home-view .irow:hover .cline .line {
  stroke: rgb(var(--c-accent));
}

#home-view .irow:hover .cbars rect {
  fill: rgb(var(--c-accent) / .5);
}

#home-view .irow:hover .cbars rect.hot {
  fill: rgb(var(--c-accent-strong));
}

/* ---- Live reports: two-line names (founder note 5) ---- */

#home-view .rrow {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 0;
  border-top: 1px solid rgb(var(--c-border));
}

#home-view .rrow:first-child {
  border-top: none;
  padding-top: 2px;
}

#home-view .rrow .hdot {
  margin-top: 5px;
}

#home-view .rrow .rbody {
  flex: 1;
  min-width: 0;
}

#home-view .rrow .links {
  font-family: var(--hd-mono);
  font-size: 10px;
  color: rgb(var(--c-muted));
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  margin-top: 2px;
}

#home-view .rrow .links svg {
  width: 11px;
  height: 11px;
}

#home-view .rrow.dim .rowttl {
  color: rgb(var(--c-muted));
}

/* r4: non-green health states carry a TEXT label — never color-only (INV-HD-004) */

#home-view .rowmeta .hlab-warn {
  color: rgb(var(--c-warn));
}

#home-view .rowmeta .hlab-err {
  color: rgb(var(--c-down));
}

/* HD-006: the idle states (`not yet run`) speak in the meta's own muted grey,
   named so the greyness is a deliberate token and not inherited by accident. */

#home-view .rowmeta .hlab-idle {
  color: rgb(var(--c-muted));
}

/* HD-006 turned the report row into an <a> to #/reports/<slug>, so it takes the
   board's shared clickable-row affordance — pointer + full-bleed hover wash,
   exactly what `.irow`/`.lrow` already carry. The bleed lives on the ROW (the
   `.rows` container stays as HD-003 shipped it) and the 17px inline padding
   restores the artifact's left edge, so the rows sit where the artifact put
   them and only the hairline + wash reach the card edges. */

#home-view a.rrow {
  margin: 0 -17px;
  padding: 9px 17px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

#home-view a.rrow:hover,
#home-view a.rrow:focus-visible {
  background: var(--hd-accent-wash);
}

/* r4: report-draft rows — the TITLE is the affordance (clickable like insights
   rows); no inline "Save as report" link. */

#home-view .link-rows {
  display: flex;
  flex-direction: column;
  margin: 0 -17px -15px;
}

#home-view .lrow {
  position: relative;
  display: block;
  padding: 9px 34px 9px 17px;
  border-top: 1px solid rgb(var(--c-border));
  cursor: pointer;
  text-decoration: none;
}

#home-view .lrow:first-child {
  border-top: none;
}

#home-view .lrow:last-child {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

#home-view .lrow:hover,
#home-view .lrow:focus-visible {
  background: var(--hd-accent-wash);
}

#home-view .lrow .chev {
  position: absolute;
  right: 13px;
  top: 50%;
  margin-top: -8px;
  color: rgb(var(--c-accent));
  opacity: 0;
  transform: translateX(-3px);
  transition: opacity 120ms ease-out, transform 120ms ease-out;
}

#home-view .lrow:hover .chev,
#home-view .lrow:focus-visible .chev {
  opacity: 1;
  transform: none;
}

#home-view .lrow .chev svg {
  width: 14px;
  height: 14px;
}

/* compose kind glyph + explicit state chips (founder note 7) */

#home-view .kglyph {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: rgb(var(--c-surface-muted));
  border: 1px solid rgb(var(--c-border));
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(var(--c-data));
  flex-shrink: 0;
}

#home-view .kglyph svg {
  width: 14px;
  height: 14px;
}

#home-view .schip {
  font-family: var(--hd-mono);
  font-size: 9px;
  letter-spacing: .09em;
  text-transform: uppercase;
  border-radius: 5px;
  padding: 2px 7px;
  border: 1px solid rgb(var(--c-border));
  color: rgb(var(--c-muted));
  background: rgb(var(--c-surface-muted));
  flex-shrink: 0;
  margin-top: 4px;
}

#home-view .schip.ready {
  color: rgb(var(--c-up));
  border-color: rgb(var(--c-up) / .4);
  background: rgb(var(--c-up) / .1);
}

/* HD-008 turned the compose row into an <a> to #/compose/p/<slug>-<id> (resuming
   the piece is the point), so it takes the board's shared clickable-row
   affordance — pointer + full-bleed hover wash — exactly the treatment HD-006
   gave `a.rrow`. Same geometry as that rule: the bleed lives on the ROW and the
   17px inline padding restores the artifact's left edge. */

#home-view a.row {
  margin: 0 -17px;
  padding: 9px 17px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

#home-view a.row:hover,
#home-view a.row:focus-visible {
  background: var(--hd-accent-wash);
}

/* ---- equal-height teaching empty states (founder note 8) ---- */

#home-view .tile .teach {
  min-height: 128px;
  justify-content: center;
}

/* HD-005b: the two FULL-BLEED row lists (.ins-rows, .link-rows) cancel their
   negative margins while they hold a teaching empty state, so the `.teach` card
   sits inset inside the tile exactly like every other tile's empty state
   (variant-b4.html:291-294) instead of having its dashed edges clipped by the
   card. `data-state` is written by home-tiles.js `makeTileLoader`; the skeleton
   and the retryable error block are inset for the same reason. */

#home-view .ins-rows:not([data-state='ready']),
#home-view .link-rows:not([data-state='ready']) {
  margin: 0;
}

/* ---- admin pinned band (founder note 9) ---- */

#home-view .admin-div {
  margin: 30px 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

#home-view .admin-div .line {
  flex: 1;
  height: 1px;
  background: rgb(var(--c-border));
}

#home-view .admin-band-inner {
  background: rgb(var(--c-surface-muted));
  border: 1px solid rgb(var(--c-border));
  border-radius: 14px;
  padding: 16px;
}

#home-view .admin-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

#home-view .admin-caption {
  font-family: var(--hd-mono);
  font-size: 10.5px;
  color: rgb(var(--c-muted));
}

/* admin — "All my vaults" cross-vault lens toggle (founder 2026-07-27) */

#home-view .home-all-vaults-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid rgb(var(--c-border));
  border-radius: 8px;
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  color: rgb(var(--c-muted));
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}

#home-view .home-all-vaults-toggle svg {
  width: 14px;
  height: 14px;
}

#home-view .home-all-vaults-toggle:hover {
  color: rgb(var(--c-text));
}

#home-view .home-all-vaults-toggle.is-on {
  color: rgb(var(--c-accent));
  border-color: rgb(var(--c-accent) / 0.4);
  background: rgb(var(--c-accent) / 0.1);
}

#home-view .home-all-vaults-toggle:focus-visible {
  outline: 2px solid rgb(var(--c-accent));
  outline-offset: 2px;
}

#home-view .admin-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 16px;
}

@media (max-width: 820px) {
  #home-view .admin-grid {
    grid-template-columns: 1fr;
  }
}

#home-view .admin-grid .card {
  background: rgb(var(--c-surface));
}

/* admin — Feedback & fixes rows (HD-012) */

#home-view .frow {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid rgb(var(--c-border));
}

#home-view .frow:first-child {
  border-top: none;
  padding-top: 2px;
}

#home-view .frow .fbody {
  flex: 1;
  min-width: 0;
}

/* r4: universal 2-line clamp — admin feedback primaries clamp like every other row */

#home-view .frow .fq {
  font-size: 12.5px;
  font-weight: 500;
  color: rgb(var(--c-text));
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

#home-view .frow .fn {
  font-size: 12px;
  color: rgb(var(--c-muted));
  line-height: 1.45;
  margin-top: 2px;
}

#home-view .frow .fmeta {
  font-family: var(--hd-mono);
  font-size: 9.5px;
  color: rgb(var(--c-muted));
  margin-top: 4px;
}

/* admin cross-vault lens: per-row vault label (founder 2026-07-27) */

#home-view .frow .fvault {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 7px;
  border: 1px solid rgb(var(--c-border));
  border-radius: 9999px;
  background: rgb(var(--c-surface-muted));
  font-size: 10px;
  font-weight: 500;
  color: rgb(var(--c-muted));
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#home-view .frow .fright {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

#home-view .frow .faction {
  font-size: 11px;
  font-weight: 600;
  color: rgb(var(--c-accent));
  font-family: var(--hd-sans);
}

#home-view .frow .faction:hover {
  color: rgb(var(--c-accent-strong));
}

/* admin — System-health strip (HD-013) */

#home-view .health-verdict {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-bottom: 13px;
  margin-bottom: 11px;
  border-bottom: 1px solid rgb(var(--c-border));
}

#home-view .health-verdict .hv {
  font-family: var(--hd-mono);
  font-size: 26px;
  font-weight: 500;
  color: rgb(var(--c-up));
  line-height: 1;
}

#home-view .health-verdict .hlabel {
  font-family: var(--hd-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgb(var(--c-muted));
}

#home-view .health-verdict .hsub {
  font-family: var(--hd-mono);
  font-size: 10px;
  color: rgb(var(--c-muted));
  margin-top: 2px;
}

/* HD-013 — the artifact set these two with inline styles (variant-b4.html:645,
   648: a 9px dot and a `toneCol` colour map). They are tokens, not one-offs, so
   they live here: the verdict's value takes its tone as a CLASS, which also
   gives `idle` — the tone HD-002 actually ships for an unknown verdict — a
   home the mockup's three-entry map never had. */

#home-view .health-verdict .hdot {
  width: 9px;
  height: 9px;
}

#home-view .health-verdict .hv {
  font-variant-numeric: tabular-nums;
}

#home-view .health-verdict .hv.ok {
  color: rgb(var(--c-up));
}

#home-view .health-verdict .hv.warn {
  color: rgb(var(--c-warn));
}

#home-view .health-verdict .hv.err {
  color: rgb(var(--c-down));
}

#home-view .health-verdict .hv.idle {
  color: rgb(var(--c-muted));
}

#home-view .synclist {
  display: flex;
  flex-direction: column;
  gap: 0;
}

#home-view .srow {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 0;
}

#home-view .srow .sname {
  flex: 1;
  font-size: 12.5px;
  color: rgb(var(--c-text));
}

#home-view .srow .swhen {
  font-family: var(--hd-mono);
  font-size: 10px;
  color: rgb(var(--c-muted));
}

/* HD-013 — the sync row's STATUS WORD (INV-HD-004 / NO-COLOR-ONLY). The mockup's
   `srow` was dot + source + when, which leaves a degraded connector legible by
   colour alone; this is the same `hlab-*` word family r4 gave the report rows,
   sized to sit beside the mono `when`. `ok` rows carry no word at all. */

#home-view .srow .hlab-warn,
#home-view .srow .hlab-err,
#home-view .srow .hlab-idle {
  font-family: var(--hd-mono);
  font-size: 10px;
  flex-shrink: 0;
}

#home-view .srow .hlab-warn {
  color: rgb(var(--c-warn));
}

#home-view .srow .hlab-err {
  color: rgb(var(--c-down));
}

#home-view .srow .hlab-idle {
  color: rgb(var(--c-muted));
}

/* A vault that syncs nothing yet: one muted line, not a mystery gap. */

#home-view .srow.sempty .sname {
  color: rgb(var(--c-muted));
}

#home-view .fixq {
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid rgb(var(--c-border));
  font-family: var(--hd-mono);
  font-size: 10.5px;
  color: rgb(var(--c-muted));
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

#home-view .fixq b {
  color: rgb(var(--c-data));
  font-weight: 500;
}

/* HD-013 — one bucket = one flex item, with the artifact's own 12px gap INSIDE
   it. Identical to the mockup at 1280; at 390 (where `.fixq` must wrap either
   way) it stops the count being orphaned from its noun. */

#home-view .fixq .fqb {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

/* ---- mobile (the artifact's 390px frame: .mask overrides) ---- */

@media (max-width: 720px) {
  #home-view .ask2 .ask-top {
    padding: 13px 14px 10px;
  }

  #home-view .ask2 textarea {
    font-size: 14px;
    line-height: 22px;
    min-height: 22px;
  }

  #home-view .ask2 .ask-foot {
    padding: 8px 10px 8px 14px;
  }

  /* HD-004 — ONE mic per viewport. The artifact's mobile footer carries no
     "Speak it" pill (its frame, line 361-366, is ⌘K + Ask), and the in-field
     mic takes over there; showing both would be two controls for one capture.
     `:not([hidden])` so an unusable mic stays hidden even here. */

  #home-view .mic-pill {
    display: none;
  }

  #home-view .mic-inline:not([hidden]) {
    display: inline-flex;
  }
}

@media not all and (min-width: 1280px) {
  .max-xl\:hidden {
    display: none;
  }

  .max-xl\:hidden.cst-file-role-menu {
    display: none;
  }
}

@media (min-width: 768px) {
  .md\:hidden.cst-file-role-menu {
    display: none;
  }
}

.file\:mr-3::file-selector-button {
  margin-right: 0.75rem;
}

.file\:rounded-md::file-selector-button {
  border-radius: 8px;
}

.file\:border-0::file-selector-button {
  border-width: 0px;
}

.file\:bg-surface-muted::file-selector-button {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-surface-muted) / var(--tw-bg-opacity, 1));
}

.file\:px-3::file-selector-button {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.file\:py-1\.5::file-selector-button {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.file\:text-xs::file-selector-button {
  font-size: 0.75rem;
  line-height: 1rem;
}

.file\:font-semibold::file-selector-button {
  font-weight: 600;
}

.file\:text-body::file-selector-button {
  --tw-text-opacity: 1;
  color: rgb(var(--c-text) / var(--tw-text-opacity, 1));
}

.placeholder\:text-subtle::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(var(--c-muted) / var(--tw-text-opacity, 1));
}

.placeholder\:text-subtle::placeholder {
  --tw-text-opacity: 1;
  color: rgb(var(--c-muted) / var(--tw-text-opacity, 1));
}

.placeholder\:text-subtle\/70::-moz-placeholder {
  color: rgb(var(--c-muted) / 0.7);
}

.placeholder\:text-subtle\/70::placeholder {
  color: rgb(var(--c-muted) / 0.7);
}

.last\:mb-0:last-child {
  margin-bottom: 0px;
}

.last\:border-0:last-child {
  border-width: 0px;
}

.focus-within\:border-accent\/50:focus-within {
  border-color: rgb(var(--c-accent) / 0.5);
}

.focus-within\:border-accent\/60:focus-within {
  border-color: rgb(var(--c-accent) / 0.6);
}

.focus-within\:bg-surface-muted:focus-within {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-surface-muted) / var(--tw-bg-opacity, 1));
}

.focus-within\:ring-2:focus-within {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-within\:ring-inset:focus-within {
  --tw-ring-inset: inset;
}

.focus-within\:ring-accent\/20:focus-within {
  --tw-ring-color: rgb(var(--c-accent) / 0.2);
}

.focus-within\:ring-accent\/25:focus-within {
  --tw-ring-color: rgb(var(--c-accent) / 0.25);
}

.focus-within\:ring-accent\/30:focus-within {
  --tw-ring-color: rgb(var(--c-accent) / 0.3);
}

.focus-within\:ring-warn\/20:focus-within {
  --tw-ring-color: rgb(var(--c-warn) / 0.2);
}

.focus-within\:ring-offset-2:focus-within {
  --tw-ring-offset-width: 2px;
}

.hover\:border-accent:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--c-accent) / var(--tw-border-opacity, 1));
}

.hover\:border-accent\/30:hover {
  border-color: rgb(var(--c-accent) / 0.3);
}

.hover\:border-accent\/40:hover {
  border-color: rgb(var(--c-accent) / 0.4);
}

.hover\:border-accent\/50:hover {
  border-color: rgb(var(--c-accent) / 0.5);
}

.hover\:border-down:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--c-down) / var(--tw-border-opacity, 1));
}

.hover\:border-down\/20:hover {
  border-color: rgb(var(--c-down) / 0.2);
}

.hover\:border-down\/30:hover {
  border-color: rgb(var(--c-down) / 0.3);
}

.hover\:border-down\/40:hover {
  border-color: rgb(var(--c-down) / 0.4);
}

.hover\:border-down\/50:hover {
  border-color: rgb(var(--c-down) / 0.5);
}

.hover\:border-down\/60:hover {
  border-color: rgb(var(--c-down) / 0.6);
}

.hover\:border-hairline:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--c-border) / var(--tw-border-opacity, 1));
}

.hover\:border-stone-200:hover {
  --tw-border-opacity: 1;
  border-color: rgb(231 229 228 / var(--tw-border-opacity, 1));
}

.hover\:border-stone-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(214 211 209 / var(--tw-border-opacity, 1));
}

.hover\:border-subtle\/30:hover {
  border-color: rgb(var(--c-muted) / 0.3);
}

.hover\:border-subtle\/40:hover {
  border-color: rgb(var(--c-muted) / 0.4);
}

.hover\:border-subtle\/60:hover {
  border-color: rgb(var(--c-muted) / 0.6);
}

.hover\:border-up\/40:hover {
  border-color: rgb(var(--c-up) / 0.4);
}

.hover\:border-warn\/30:hover {
  border-color: rgb(var(--c-warn) / 0.3);
}

.hover\:bg-accent:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-accent) / var(--tw-bg-opacity, 1));
}

.hover\:bg-accent-strong:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-accent-strong) / var(--tw-bg-opacity, 1));
}

.hover\:bg-accent\/10:hover {
  background-color: rgb(var(--c-accent) / 0.1);
}

.hover\:bg-accent\/15:hover {
  background-color: rgb(var(--c-accent) / 0.15);
}

.hover\:bg-accent\/20:hover {
  background-color: rgb(var(--c-accent) / 0.2);
}

.hover\:bg-accent\/5:hover {
  background-color: rgb(var(--c-accent) / 0.05);
}

.hover\:bg-accent\/90:hover {
  background-color: rgb(var(--c-accent) / 0.9);
}

.hover\:bg-accent\/\[0\.07\]:hover {
  background-color: rgb(var(--c-accent) / 0.07);
}

.hover\:bg-down:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-down) / var(--tw-bg-opacity, 1));
}

.hover\:bg-down\/10:hover {
  background-color: rgb(var(--c-down) / 0.1);
}

.hover\:bg-down\/20:hover {
  background-color: rgb(var(--c-down) / 0.2);
}

.hover\:bg-down\/5:hover {
  background-color: rgb(var(--c-down) / 0.05);
}

.hover\:bg-down\/90:hover {
  background-color: rgb(var(--c-down) / 0.9);
}

.hover\:bg-hairline:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-border) / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-500\/10:hover {
  background-color: rgb(239 68 68 / 0.1);
}

.hover\:bg-sidebar-active:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-sidebar-active) / var(--tw-bg-opacity, 1));
}

.hover\:bg-stone-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(245 245 244 / var(--tw-bg-opacity, 1));
}

.hover\:bg-stone-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 249 / var(--tw-bg-opacity, 1));
}

.hover\:bg-stone-50\/50:hover {
  background-color: rgb(250 250 249 / 0.5);
}

.hover\:bg-surface-card:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-surface) / var(--tw-bg-opacity, 1));
}

.hover\:bg-surface-card\/50:hover {
  background-color: rgb(var(--c-surface) / 0.5);
}

.hover\:bg-surface-card\/60:hover {
  background-color: rgb(var(--c-surface) / 0.6);
}

.hover\:bg-surface-card\/70:hover {
  background-color: rgb(var(--c-surface) / 0.7);
}

.hover\:bg-surface-muted:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-surface-muted) / var(--tw-bg-opacity, 1));
}

.hover\:bg-surface-muted\/40:hover {
  background-color: rgb(var(--c-surface-muted) / 0.4);
}

.hover\:bg-surface-muted\/60:hover {
  background-color: rgb(var(--c-surface-muted) / 0.6);
}

.hover\:bg-surface-muted\/70:hover {
  background-color: rgb(var(--c-surface-muted) / 0.7);
}

.hover\:bg-up:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-up) / var(--tw-bg-opacity, 1));
}

.hover\:bg-up\/15:hover {
  background-color: rgb(var(--c-up) / 0.15);
}

.hover\:bg-up\/20:hover {
  background-color: rgb(var(--c-up) / 0.2);
}

.hover\:bg-warn:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-warn) / var(--tw-bg-opacity, 1));
}

.hover\:bg-warn\/10:hover {
  background-color: rgb(var(--c-warn) / 0.1);
}

.hover\:bg-warn\/15:hover {
  background-color: rgb(var(--c-warn) / 0.15);
}

.hover\:bg-warn\/20:hover {
  background-color: rgb(var(--c-warn) / 0.2);
}

.hover\:bg-warn\/90:hover {
  background-color: rgb(var(--c-warn) / 0.9);
}

.hover\:text-accent:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--c-accent) / var(--tw-text-opacity, 1));
}

.hover\:text-accent-dim:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--c-accent-strong) / var(--tw-text-opacity, 1));
}

.hover\:text-accent-strong:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--c-accent-strong) / var(--tw-text-opacity, 1));
}

.hover\:text-body:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--c-text) / var(--tw-text-opacity, 1));
}

.hover\:text-data:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--c-data) / var(--tw-text-opacity, 1));
}

.hover\:text-down:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--c-down) / var(--tw-text-opacity, 1));
}

.hover\:text-ink:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--c-ink) / var(--tw-text-opacity, 1));
}

.hover\:text-red-200:hover {
  --tw-text-opacity: 1;
  color: rgb(254 202 202 / var(--tw-text-opacity, 1));
}

.hover\:text-up:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--c-up) / var(--tw-text-opacity, 1));
}

.hover\:text-warn:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--c-warn) / var(--tw-text-opacity, 1));
}

.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hover\:underline:hover {
  text-decoration-line: underline;
}

.hover\:decoration-accent:hover {
  text-decoration-color: rgb(var(--c-accent) / 1);
}

.hover\:decoration-solid:hover {
  text-decoration-style: solid;
}

.hover\:opacity-100:hover {
  opacity: 1;
}

.hover\:opacity-80:hover {
  opacity: 0.8;
}

.hover\:opacity-90:hover {
  opacity: 0.9;
}

.hover\:shadow-sm:hover {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:ring-1:hover {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.hover\:ring-accent\/30:hover {
  --tw-ring-color: rgb(var(--c-accent) / 0.3);
}

.hover\:brightness-95:hover {
  --tw-brightness: brightness(.95);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.hover\:file\:bg-hairline::file-selector-button:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-border) / var(--tw-bg-opacity, 1));
}

.focus\:border-accent\/50:focus {
  border-color: rgb(var(--c-accent) / 0.5);
}

.focus\:border-down\/50:focus {
  border-color: rgb(var(--c-down) / 0.5);
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-accent\/30:focus {
  --tw-ring-color: rgb(var(--c-accent) / 0.3);
}

.focus-visible\:border-accent:focus-visible {
  --tw-border-opacity: 1;
  border-color: rgb(var(--c-accent) / var(--tw-border-opacity, 1));
}

.focus-visible\:border-accent\/50:focus-visible {
  border-color: rgb(var(--c-accent) / 0.5);
}

.focus-visible\:border-accent\/60:focus-visible {
  border-color: rgb(var(--c-accent) / 0.6);
}

.focus-visible\:border-down\/40:focus-visible {
  border-color: rgb(var(--c-down) / 0.4);
}

.focus-visible\:border-down\/60:focus-visible {
  border-color: rgb(var(--c-down) / 0.6);
}

.focus-visible\:border-stone-300:focus-visible {
  --tw-border-opacity: 1;
  border-color: rgb(214 211 209 / var(--tw-border-opacity, 1));
}

.focus-visible\:border-up\/40:focus-visible {
  border-color: rgb(var(--c-up) / 0.4);
}

.focus-visible\:border-warn\/60:focus-visible {
  border-color: rgb(var(--c-warn) / 0.6);
}

.focus-visible\:bg-accent\/5:focus-visible {
  background-color: rgb(var(--c-accent) / 0.05);
}

.focus-visible\:opacity-100:focus-visible {
  opacity: 1;
}

.focus-visible\:outline-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus-visible\:outline:focus-visible {
  outline-style: solid;
}

.focus-visible\:outline-2:focus-visible {
  outline-width: 2px;
}

.focus-visible\:-outline-offset-2:focus-visible {
  outline-offset: -2px;
}

.focus-visible\:outline-accent\/40:focus-visible {
  outline-color: rgb(var(--c-accent) / 0.4);
}

.focus-visible\:ring-1:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-2:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-inset:focus-visible {
  --tw-ring-inset: inset;
}

.focus-visible\:ring-accent:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--c-accent) / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-accent\/20:focus-visible {
  --tw-ring-color: rgb(var(--c-accent) / 0.2);
}

.focus-visible\:ring-accent\/30:focus-visible {
  --tw-ring-color: rgb(var(--c-accent) / 0.3);
}

.focus-visible\:ring-accent\/40:focus-visible {
  --tw-ring-color: rgb(var(--c-accent) / 0.4);
}

.focus-visible\:ring-down:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--c-down) / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-down\/20:focus-visible {
  --tw-ring-color: rgb(var(--c-down) / 0.2);
}

.focus-visible\:ring-down\/30:focus-visible {
  --tw-ring-color: rgb(var(--c-down) / 0.3);
}

.focus-visible\:ring-down\/40:focus-visible {
  --tw-ring-color: rgb(var(--c-down) / 0.4);
}

.focus-visible\:ring-hairline:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--c-border) / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-red-300:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(252 165 165 / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-sidebar-accent\/50:focus-visible {
  --tw-ring-color: rgb(var(--c-sidebar-accent) / 0.5);
}

.focus-visible\:ring-stone-300:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(214 211 209 / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-stone-500:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(120 113 108 / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-up:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--c-up) / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-up\/30:focus-visible {
  --tw-ring-color: rgb(var(--c-up) / 0.3);
}

.focus-visible\:ring-warn:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--c-warn) / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-warn\/30:focus-visible {
  --tw-ring-color: rgb(var(--c-warn) / 0.3);
}

.focus-visible\:ring-warn\/40:focus-visible {
  --tw-ring-color: rgb(var(--c-warn) / 0.4);
}

.focus-visible\:ring-offset-1:focus-visible {
  --tw-ring-offset-width: 1px;
}

.focus-visible\:ring-offset-2:focus-visible {
  --tw-ring-offset-width: 2px;
}

.focus-visible\:ring-offset-sidebar:focus-visible {
  --tw-ring-offset-color: rgb(var(--c-sidebar) / 1);
}

.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}

.disabled\:cursor-wait:disabled {
  cursor: wait;
}

.disabled\:border-hairline:disabled {
  --tw-border-opacity: 1;
  border-color: rgb(var(--c-border) / var(--tw-border-opacity, 1));
}

.disabled\:bg-surface-muted:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-surface-muted) / var(--tw-bg-opacity, 1));
}

.disabled\:text-subtle:disabled {
  --tw-text-opacity: 1;
  color: rgb(var(--c-muted) / var(--tw-text-opacity, 1));
}

.disabled\:opacity-40:disabled {
  opacity: 0.4;
}

.disabled\:opacity-45:disabled {
  opacity: 0.45;
}

.disabled\:opacity-50:disabled {
  opacity: 0.5;
}

.disabled\:opacity-60:disabled {
  opacity: 0.6;
}

.disabled\:opacity-70:disabled {
  opacity: 0.7;
}

.group[open] .group-open\:rotate-90 {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:focus-within .group-focus-within\:visible {
  visibility: visible;
}

.group\/dot:focus-within .group-focus-within\/dot\:block {
  display: block;
}

.group:focus-within .group-focus-within\:opacity-100 {
  opacity: 1;
}

.group:hover .group-hover\:visible {
  visibility: visible;
}

.group\/dot:hover .group-hover\/dot\:block {
  display: block;
}

.group:hover .group-hover\:inline-flex {
  display: inline-flex;
}

.group:hover .group-hover\:border-accent\/50 {
  border-color: rgb(var(--c-accent) / 0.5);
}

.group:hover .group-hover\:bg-accent-strong {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--c-accent-strong) / var(--tw-bg-opacity, 1));
}

.group:hover .group-hover\:text-accent {
  --tw-text-opacity: 1;
  color: rgb(var(--c-accent) / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-down {
  --tw-text-opacity: 1;
  color: rgb(var(--c-down) / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-ink {
  --tw-text-opacity: 1;
  color: rgb(var(--c-ink) / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-up {
  --tw-text-opacity: 1;
  color: rgb(var(--c-up) / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-warn {
  --tw-text-opacity: 1;
  color: rgb(var(--c-warn) / var(--tw-text-opacity, 1));
}

.group\/h:hover .group-hover\/h\:opacity-100 {
  opacity: 1;
}

.group\/sec:hover .group-hover\/sec\:opacity-100 {
  opacity: 1;
}

.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}

.group:focus-visible .group-focus-visible\:inline-flex {
  display: inline-flex;
}

.peer:focus-visible ~ .peer-focus-visible\:ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.peer:focus-visible ~ .peer-focus-visible\:ring-accent\/30 {
  --tw-ring-color: rgb(var(--c-accent) / 0.3);
}

.peer:focus-visible ~ .peer-focus-visible\:ring-warn\/30 {
  --tw-ring-color: rgb(var(--c-warn) / 0.3);
}

.peer:focus-visible ~ .peer-focus-visible\:ring-offset-1 {
  --tw-ring-offset-width: 1px;
}

.peer:focus-visible ~ .peer-focus-visible\:ring-offset-2 {
  --tw-ring-offset-width: 2px;
}

.has-\[\:checked\]\:border-accent:has(:checked) {
  --tw-border-opacity: 1;
  border-color: rgb(var(--c-accent) / var(--tw-border-opacity, 1));
}

.has-\[\:checked\]\:bg-accent\/10:has(:checked) {
  background-color: rgb(var(--c-accent) / 0.1);
}

.has-\[\:checked\]\:text-accent:has(:checked) {
  --tw-text-opacity: 1;
  color: rgb(var(--c-accent) / var(--tw-text-opacity, 1));
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes pulse {
    50% {
      opacity: .5;
    }
  }

  .motion-safe\:animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }

  .motion-safe\:animate-spin {
    animation: spin 1s linear infinite;
  }

  .motion-safe\:transition {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  .motion-safe\:transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  .motion-safe\:transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  .motion-safe\:transition-opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  .motion-safe\:transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  .motion-safe\:duration-200 {
    transition-duration: 200ms;
  }

  .motion-safe\:duration-300 {
    transition-duration: 300ms;
  }

  .motion-safe\:duration-500 {
    transition-duration: 500ms;
  }

  .motion-safe\:ease-out {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

@media not all and (min-width: 1280px) {
  .max-xl\:hidden {
    display: none;
  }
}

@media (min-width: 640px) {
  .sm\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .sm\:ml-2 {
    margin-left: 0.5rem;
  }

  .sm\:block {
    display: block;
  }

  .sm\:inline {
    display: inline;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:inline-flex {
    display: inline-flex;
  }

  .sm\:w-\[480px\] {
    width: 480px;
  }

  .sm\:w-auto {
    width: auto;
  }

  .sm\:min-w-\[240px\] {
    min-width: 240px;
  }

  .sm\:max-w-\[180px\] {
    max-width: 180px;
  }

  .sm\:max-w-xs {
    max-width: 20rem;
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sm\:grid-cols-\[140px_minmax\(0\2c 1fr\)\] {
    grid-template-columns: 140px minmax(0,1fr);
  }

  .sm\:grid-cols-\[1fr_auto_auto\] {
    grid-template-columns: 1fr auto auto;
  }

  .sm\:grid-cols-\[minmax\(0\2c 1fr\)_130px_140px\] {
    grid-template-columns: minmax(0,1fr) 130px 140px;
  }

  .sm\:grid-cols-\[minmax\(0\2c 1fr\)_180px\] {
    grid-template-columns: minmax(0,1fr) 180px;
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:items-start {
    align-items: flex-start;
  }

  .sm\:items-end {
    align-items: flex-end;
  }

  .sm\:items-center {
    align-items: center;
  }

  .sm\:justify-end {
    justify-content: flex-end;
  }

  .sm\:justify-between {
    justify-content: space-between;
  }

  .sm\:whitespace-nowrap {
    white-space: nowrap;
  }

  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .sm\:py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .sm\:py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .sm\:py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .sm\:text-right {
    text-align: right;
  }

  .sm\:text-\[29px\] {
    font-size: 29px;
  }

  .sm\:opacity-0 {
    opacity: 0;
  }

  .group:focus-within .sm\:group-focus-within\:opacity-100 {
    opacity: 1;
  }

  .group:hover .sm\:group-hover\:opacity-100 {
    opacity: 1;
  }
}

@media (min-width: 768px) {
  .md\:mt-4 {
    margin-top: 1rem;
  }

  .md\:block {
    display: block;
  }

  .md\:flex {
    display: flex;
  }

  .md\:hidden {
    display: none;
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-\[1\.4fr_0\.9fr\] {
    grid-template-columns: 1.4fr 0.9fr;
  }

  .md\:grid-cols-\[1fr_1\.1fr\] {
    grid-template-columns: 1fr 1.1fr;
  }

  .md\:grid-cols-\[1fr_1fr_1fr_1fr_90px_auto\] {
    grid-template-columns: 1fr 1fr 1fr 1fr 90px auto;
  }

  .md\:items-end {
    align-items: flex-end;
  }

  .md\:divide-x > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-x-reverse: 0;
    border-right-width: calc(1px * var(--tw-divide-x-reverse));
    border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
  }

  .md\:divide-y-0 > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(0px * var(--tw-divide-y-reverse));
  }
}

@media (min-width: 1024px) {
  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .lg\:block {
    display: block;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:grid {
    display: grid;
  }

  .lg\:min-h-0 {
    min-height: 0px;
  }

  .lg\:w-80 {
    width: 20rem;
  }

  .lg\:flex-1 {
    flex: 1 1 0%;
  }

  .lg\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .lg\:grid-cols-\[248px_minmax\(0\2c 1fr\)_336px\] {
    grid-template-columns: 248px minmax(0,1fr) 336px;
  }

  .lg\:grid-cols-\[260px_1fr\] {
    grid-template-columns: 260px 1fr;
  }

  .lg\:grid-cols-\[minmax\(0\2c 1\.4fr\)_120px_90px_minmax\(0\2c 1fr\)_88px\] {
    grid-template-columns: minmax(0,1.4fr) 120px 90px minmax(0,1fr) 88px;
  }

  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_340px\] {
    grid-template-columns: minmax(0,1fr) 340px;
  }

  .lg\:flex-row {
    flex-direction: row;
  }

  .lg\:flex-col {
    flex-direction: column;
  }

  .lg\:items-start {
    align-items: flex-start;
  }

  .lg\:items-end {
    align-items: flex-end;
  }

  .lg\:items-center {
    align-items: center;
  }

  .lg\:justify-end {
    justify-content: flex-end;
  }

  .lg\:justify-between {
    justify-content: space-between;
  }

  .lg\:gap-10 {
    gap: 2.5rem;
  }

  .lg\:overflow-hidden {
    overflow: hidden;
  }

  .lg\:overflow-y-auto {
    overflow-y: auto;
  }

  .lg\:border-l {
    border-left-width: 1px;
  }

  .lg\:border-t-0 {
    border-top-width: 0px;
  }
}

@media (min-width: 1280px) {
  .xl\:flex {
    display: flex;
  }

  .xl\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .xl\:grid-cols-\[minmax\(0\2c 1fr\)_minmax\(420px\2c 520px\)\] {
    grid-template-columns: minmax(0,1fr) minmax(420px,520px);
  }

  .xl\:grid-cols-\[minmax\(0\2c 460px\)_minmax\(0\2c 1fr\)\] {
    grid-template-columns: minmax(0,460px) minmax(0,1fr);
  }

  .xl\:flex-col {
    flex-direction: column;
  }
}