[hidden] { display: none !important; }

:root {
  color-scheme: light dark;

  --color-brand: #00749e;
  --color-brand-hover: color-mix(in srgb, var(--color-brand), black 12%);
  --color-brand-active: color-mix(in srgb, var(--color-brand), black 22%);
  --color-brand-soft: light-dark(color-mix(in srgb, var(--color-brand), white 94%), color-mix(in srgb, var(--color-brand), #111315 80%));
  --color-accent: light-dark(var(--color-brand), color-mix(in srgb, var(--color-brand), white 55%));
  --color-accent-hover: light-dark(var(--color-brand-hover), color-mix(in srgb, var(--color-brand), white 70%));
  --color-focus: color-mix(in srgb, var(--color-brand), white 15%);
  --color-on-brand: #fff;
  --color-primary-button: #4f6246;
  --color-primary-button-hover: #405238;
  --color-text: light-dark(#1c2024, #eceef0);
  --color-muted: light-dark(#606b75, #a0a8b0);
  --color-background: light-dark(#f6f6f6, #252525);
  --color-sidebar: light-dark(#f2f2f2, #252525);
  --color-surface: light-dark(#fcfcfc, #252525);
  --color-surface-raised: light-dark(#fff, #2c2c2c);
  --color-border: light-dark(#dedede, #424242);
  --color-card-border: light-dark(#e8e8e8, #303030);
  --color-disabled: light-dark(#eaeaea, #292929);
  --color-danger: light-dark(#b42318, #ff9b91);

  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-sm: 0.6875rem;
  --font-size-base: 0.8125rem;
  --font-size-heading: 1.375rem;
  --font-weight-heading: 600;
  --font-weight-medium: 500;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --radius-sm: 0.5rem;
  --radius-button: 0.25rem;
  --radius-lg: 0.75rem;
  /* Secondary radius for pill-shaped controls. Most buttons keep --radius-button or 6px. */
  --radius-pill: 999px;
  --shadow-card: 0 8px 24px rgb(28 32 36 / 4%);
  --card-padding: 0.625rem;
  --sidebar-width: 11.5rem;
  --topbar-height: calc(var(--nav-row-height) + var(--space-4));
  --icon-size: 0.8125rem;
  --nav-row-height: 1.625rem;
  --control-height: var(--nav-row-height);
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-sidebar);
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: 1.5;
  overflow-wrap: break-word;
}

h1, h2, h3, p {
  margin: 0;
}

h1, h2, h3 {
  margin-bottom: var(--space-2);
  font-weight: var(--font-weight-heading);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

h1, h2 { font-size: var(--font-size-heading); }
h3 { font-size: var(--font-size-base); }

a {
  color: var(--color-accent);
  text-decoration: none;
}

a:hover { color: var(--color-accent-hover); }

button, input, select, textarea {
  font: inherit;
  font-size: var(--font-size-base);
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

/* The root paints the page background. The case editor gives body a container,
   and containment stops the body background from filling the canvas. */
body:has(.workspace-sheet) { background: none; }
:root:has(.workspace-sheet) {
  background-color: light-dark(#f7f5ed, #20211d);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='grain' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cpath fill='%23808080' opacity='.08' filter='url(%23grain)' d='M0 0h180v180H0z'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 0% 12%, light-dark(#f0e8ce, #353125), transparent 58%),
    radial-gradient(ellipse at 95% 0%, light-dark(#dfe3d3, #303529), transparent 52%),
    radial-gradient(ellipse at 100% 100%, light-dark(#eee4d7, #332e26), transparent 56%),
    radial-gradient(ellipse at 5% 95%, light-dark(#dfe2d2, #2d3227), transparent 48%);
  background-size: 180px 180px, cover, cover, cover, cover;
  background-attachment: fixed;
}
.workspace-heading { text-align: center; padding: 42px 20px 30px; }
.workspace-eyebrow { display: block; font-size: 10px; letter-spacing: .2em; color: var(--color-muted); }
.workspace-heading h1 { font-size: clamp(28px, 4vw, 38px); margin: 8px 0 0; letter-spacing: -.04em; }
.workspace-sheet {
  width: min(1200px, calc(100% - 64px));
  min-height: calc(100dvh - 194px);
  margin: 0 auto 40px;
  border: 1px solid light-dark(#e1e6df, #39423c);
  border-radius: var(--radius-sm);
  background: light-dark(#fff, #252b27);
  box-shadow: 0 12px 48px rgb(30 50 35 / 5%);
}
.content-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 41px; padding: 4px 16px; border-bottom: 1px solid var(--color-card-border); }
.home-link { display: inline-flex; align-items: center; gap: 4px; }
.home-link svg { width: 15px; height: 15px; }
.header-icon-button { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 6px; background: transparent; color: var(--color-muted); }
.header-icon-button:hover { background: var(--color-disabled); color: var(--color-text); }
.header-icon-button svg { width: 15px; height: 15px; }
.workspace-content { padding: 40px; }
.settings-navigation { display: flex; gap: 6px; margin-left: auto; }
.settings-navigation a { padding: 6px 12px; border: 1px solid var(--color-border); border-radius: 5px; background: var(--color-surface-raised); color: var(--color-muted); font-weight: 500; }
.settings-navigation a:hover { background: var(--color-disabled); color: var(--color-text); }
.settings-navigation a[aria-current="page"] { background: var(--color-brand-soft); border-color: var(--color-accent); color: var(--color-text); }
.tile-heading.usecase-heading { align-items: center; }
.usecase-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 24px 0 16px; font-size: 12px; }
.usecase-search { flex: 1 1 260px; }
.usecase-search input { width: 100%; padding: 7px 9px; font: inherit; color: inherit; border: 1px solid var(--color-card-border); border-radius: 6px; background: var(--color-surface); }
.usecase-filter { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--color-card-border); border-radius: 6px; background: var(--color-surface-raised); color: var(--color-muted); font: inherit; }
.usecase-filter:hover { background: var(--color-disabled); color: var(--color-text); }
.usecase-filter svg { width: 15px; height: 15px; flex-shrink: 0; }
.usecase-category-menu { max-height: 320px; max-width: min(360px, calc(100vw - 24px)); overflow: auto; }
.case-table.usecase-table td[data-column="title"] a { max-width: none; }
.usecase-table .usecase-actions { min-width: 200px; padding: 10px; }
.usecase-table .settings-control { padding: 4px; vertical-align: middle; }
.member-table { margin-top: 16px; }
.case-table.member-table th { padding: 8px 10px; color: var(--color-muted); font-weight: 500; }
.case-table.member-table td { padding: 10px; overflow-wrap: anywhere; }
.member-table td[data-column="status"], .member-table td[data-column="since"] { white-space: nowrap; }
.member-table td small { display: block; margin-top: 4px; color: var(--color-muted); white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 40rem) {
  /* Stack each entry: email first, then status and date on one line. */
  .member-table thead { display: none; }
  .member-table tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--color-card-border); }
  .case-table.member-table td { padding: 0; border: 0; }
  .member-table td[data-column="email"] { flex-basis: 100%; }
  /* The status badge and date share a line; "by …" goes below them. */
  .case-table.member-table td[data-column="status"] { display: contents; }
  .member-table td[data-column="since"] { order: 1; color: var(--color-muted); }
  .member-table td small { order: 2; flex-basis: 100%; margin: 0; }
  /* The archive button ends the date line instead of covering the date. */
  .member-table td.settings-control { order: 1; width: auto; margin-left: auto; padding: 0; }
}
/* The permissions text is the button; it reads as a link so it does not crowd the row. */
.member-edit-button { padding: 0; border: 0; background: none; color: var(--color-accent); font: inherit; text-align: left; cursor: pointer; }
.member-edit-button:hover { color: var(--color-accent-hover); text-decoration: underline; }
.member-edit-button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 2px; }
.member-status { padding: 1px 6px; border-radius: 4px; background: var(--color-disabled); color: var(--color-muted); font-size: 11px; font-weight: 500; }
.member-status--active { background: var(--color-brand-soft); color: var(--color-text); }
.member-status--archived { background: transparent; box-shadow: inset 0 0 0 1px var(--color-border); }
.member-anonymized { color: var(--color-muted); font-style: italic; }
.member-table .settings-control { width: 1%; padding: 4px; vertical-align: middle; }
.usecase-table .usecase-approval { width: 1%; white-space: nowrap; vertical-align: middle; }
.usecase-table .usecase-approval form { display: flex; margin: 0; }
.usecase-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 16px; font-size: 12px; }
.settings-actions { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }
.settings-actions li { padding: 2px 7px; border-radius: 4px; background: var(--color-disabled); font-size: 11px; }
.settings-skills { display: grid; gap: 4px; list-style: none; padding: 0; margin: 0; }
.settings-skills li { display: flex; align-items: baseline; gap: 8px; }
.create-case .citation-ref { display: inline; width: auto; margin: 0; padding: 0 1px; border: 0; border-radius: 3px; background: transparent; color: var(--color-accent); font: inherit; font-size: .85em; cursor: pointer; }
.create-case .citation-ref:hover { background: var(--color-disabled); }
.citation-dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); margin: auto; padding: 24px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface-raised); color: var(--color-text); cursor: default; }
.citation-dialog::backdrop { background: rgb(0 0 0 / 35%); }
.citation-dialog header { display: flex; align-items: center; gap: 16px; }
.create-case .citation-dialog h2 { flex: 1; margin: 0; color: var(--color-muted); font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: normal; text-transform: none; }
.create-case .citation-dialog-dismiss { display: grid; place-items: center; flex: none; width: 28px; height: 28px; margin: 0; padding: 0; border: 0; background: transparent; color: var(--color-muted); font-size: 24px; line-height: 1; }
.citation-dialog blockquote { margin: 16px 0; padding: 2px 0 2px 14px; border-left: 3px solid var(--color-accent); font-size: 15px; line-height: 1.55; }
.citation-dialog footer { font-size: 13px; }
.passage { margin-top: 20px; padding: 4px 0 4px 12px; border-left: 2px solid transparent; }
.passage.is-target { border-left-color: var(--color-card-border); }
.passage h3 { margin: 0 0 6px; font-size: 13px; }
.passage-sentences { margin: 0; padding-left: 22px; line-height: 1.6; }
.passage-sentences li:target { background: var(--color-disabled); border-radius: 3px; }
.settings-empty { color: var(--color-muted); }
.settings-detail-title { margin-top: 20px; }
.settings-details { margin: 24px 0 0; }
.settings-details dt { margin-top: 20px; color: var(--color-muted); font-size: 12px; font-weight: 500; }
.settings-details dd { margin: 6px 0 0; padding-bottom: 16px; border-bottom: 1px solid var(--color-card-border); overflow-wrap: anywhere; }
.settings-text { white-space: pre-wrap; line-height: 1.8; }
.settings-badge { margin-left: 6px; padding: 1px 6px; border-radius: 4px; background: var(--color-brand-soft); color: var(--color-text); font-size: 11px; font-weight: 500; }
.settings-imported, .settings-imported:hover { background: transparent; color: var(--color-accent); }
.settings-heading-actions { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.settings-form { display: grid; gap: 8px; max-width: 720px; margin-top: 24px; }
.settings-form > label, .settings-form legend { margin-top: 12px; padding: 0; font-weight: 600; }
.settings-form p { margin: 0; color: var(--color-muted); font-size: 12px; }
.settings-form .form-error { color: var(--color-danger); font-size: 14px; }
.settings-form input[type="text"], .settings-form textarea { width: 100%; padding: 8px 12px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface); color: var(--color-text); font: inherit; }
.settings-form textarea { resize: vertical; line-height: 1.6; }
.settings-form fieldset { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; }
.settings-form fieldset label { display: flex; align-items: baseline; gap: 8px; }
.settings-form .form-submit { margin-top: 16px; }
.settings-option span { display: grid; gap: 2px; }
.settings-option strong { font-weight: 500; }
.settings-option small { color: var(--color-muted); font-size: 12px; }
@media (max-width: 40rem) {
  .workspace-settings .workspace-content { padding: 24px 16px; }
  .workspace-settings .content-header { flex-wrap: wrap; }
  .settings-navigation a { padding: 6px 8px; }
}
.workspace-form { display: grid; gap: 12px; max-width: 480px; margin: 0 auto; }
.workspace-form label { font-weight: 600; }
.workspace-form input { width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface); color: var(--color-text); }
.workspace-form input[aria-invalid="true"] { border-color: var(--color-danger); }
.workspace-form p { font-size: 12px; color: var(--color-muted); }
.workspace-form .form-error { color: var(--color-danger); }
.form-error:empty { display: none; }
.form-submit { justify-self: start; padding: 9px 16px; border: 0; border-radius: 6px; color: var(--color-on-brand); background: var(--color-primary-button); }
/* Workspace home tools use pill shapes. */
.workspace-home .content-header { flex-wrap: wrap; }
.header-toolbar { display: flex; flex: 1; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.case-search { position: relative; flex: 0 1 200px; min-width: 120px; }
.header-search { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 4px 0 10px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface-raised); color: var(--color-muted); cursor: text; }
.header-search:focus-within { border-color: var(--color-focus); }
.header-search svg { flex: none; width: 15px; height: 15px; }
.header-search input { flex: 1; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--color-text); font-size: 12px; outline: none; }
/* Suggestions reuse the pin picker surface and its .pin-choices rows. */
.case-suggestions { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; width: min(480px, calc(100vw - 32px)); padding: 6px; }
.case-search:not(:focus-within) .case-suggestions, .case-suggestions:empty { display: none; }
.case-suggestions > p { margin: 0; padding: 10px; color: var(--color-muted); font-size: 12px; }
.case-suggestions .pin-choices { margin: 0; max-height: min(420px, 60dvh); }
.case-suggestions .pin-choices a:last-child { border-bottom: 0; }
/* The row background marks keyboard focus, as it marks hover. */
.case-suggestions .pin-choices a:focus-visible { outline: none; }
.header-search kbd { padding: 0 4px; line-height: 16px; border: 1px solid var(--color-card-border); border-radius: var(--radius-pill); background: var(--color-surface); font: inherit; font-size: 10px; }
.header-create-case { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 12px 0 10px; font-size: 12px; border: 0; border-radius: var(--radius-pill); background: var(--color-primary-button); color: var(--color-on-brand); font-weight: 500; white-space: nowrap; cursor: pointer; }
.header-create-case:hover { background: var(--color-primary-button-hover); }
.header-create-case svg { width: 15px; height: 15px; }
/* SVG text is placed without pixel snapping. dy is half the cap height of common UI fonts, so the initials center on the circle. */
.header-avatar { display: block; flex: none; width: 28px; height: 28px; border-radius: 50%; background: light-dark(#1c2024, #eceef0); color: light-dark(#fff, #1c2024); }
.header-avatar svg { display: block; width: 28px; height: 28px; }
.header-avatar text { fill: currentColor; font-size: 10px; font-weight: 600; }
.form-submit:hover { background: var(--color-primary-button-hover); }
.workspace-heading a { color: inherit; text-decoration: none; }
.account-control { position: absolute; top: 12px; right: 20px; z-index: 5; display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--color-muted); }
.account-control form { margin: 0; }
.account-email { max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Keep clear of the fixed Demo prototype menu on the case editor. */
body:has(.demo-toggle) .account-control { right: 96px; }
@media (max-width: 40rem) {
  .account-control { position: static; justify-content: flex-end; padding: 8px 12px 0; }
  .account-email { max-width: 22ch; }
  body:has(.demo-toggle) .account-control { padding-right: 96px; }
}
.account-link { padding: 4px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--color-text); cursor: pointer; }
.account-link:hover { background: var(--color-disabled); color: var(--color-text); }
.auth-form { padding: 48px 0; }
.workspace-form .auth-lead { font-size: var(--font-size-base); color: var(--color-text); }
.form-submit:disabled { opacity: .6; cursor: not-allowed; }
.form-secondary { justify-self: start; padding: 8px 15px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface-raised); color: var(--color-text); cursor: pointer; }
.form-secondary:hover { background: var(--color-disabled); }
.form-secondary:disabled { opacity: .6; cursor: not-allowed; }
.auth-email { margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--color-card-border); }
.auth-email label { font-weight: 500; }
.case-layout { position: relative; width: min(1200px, calc(100% - 432px)); margin: 0 auto 40px; }
.case-layout .workspace-sheet { width: 100%; margin: 0; }
/* Registered so that the rail inside the composer container inherits a computed length, not container units. */
@property --side-panel-width { syntax: '<length>'; inherits: true; initial-value: 216px; }
.case-layout:has(:where(.case-side-panel)) { --side-panel-width: 256px; width: min(1200px, calc(100% - 2 * var(--side-panel-width) - 48px)); }
.case-activities { margin-top: 32px; padding: 0 32px; }
.case-timeline { list-style: none; margin: 0; padding: 0; color: var(--color-muted); font-size: 12px; }
.case-timeline li { position: relative; line-height: 20px; padding: 0 0 12px 28px; }
.case-timeline li:not(:last-child)::before { content: ""; position: absolute; left: 7px; top: 19px; bottom: 1px; border-left: 1px solid var(--color-border); }
.case-timeline-icon { position: absolute; left: 0; top: 2px; }
.case-timeline-icon svg { display: block; width: 15px; height: 15px; }
.case-timeline-entry { overflow-wrap: anywhere; }
.case-timeline-date { white-space: nowrap; }
.case-timeline time { font-size: inherit; }
@media (max-width: 64rem) {
  .case-layout { width: calc(100% - 64px); }
}
@media (max-width: 40rem) {
  .case-layout { width: calc(100% - 24px); }
  .case-layout .workspace-sheet { min-height: 300px; }
  .case-activities { padding: 0 14px; }
}
.new-case-dialog { width: min(680px, calc(100vw - 32px)); box-sizing: border-box; margin: auto; padding: 24px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-raised); color: var(--color-text); text-align: left; box-shadow: 0 24px 80px #0003; }
.new-case-dialog::backdrop { background: rgb(0 0 0 / 35%); }
.new-case-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; min-width: 0; margin: 0 0 12px; padding: 0; border: 0; }
.new-case-modes label { position: relative; min-width: 0; cursor: pointer; }
.new-case-modes input { position: absolute; opacity: 0; }
.new-case-modes label > span { display: grid; grid-template-columns: 1fr 15px; align-content: start; gap: 4px 10px; height: 100%; box-sizing: border-box; padding: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.new-case-modes label:hover > span { border-color: var(--color-accent); }
.new-case-modes input:checked + span { border-color: var(--color-accent); background: var(--color-brand-soft); box-shadow: inset 0 0 0 1px var(--color-accent); }
.new-case-modes input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 2px; }
/* The title leads; the icon sits top right. The title line box matches the 15px icon, so both align. */
.new-case-mode-name { font-weight: 600; line-height: 15px; }
.new-case-modes label > span > svg { display: block; width: 15px; height: 15px; color: var(--color-muted); }
.new-case-modes input:checked + span :is(.new-case-mode-name, svg) { color: var(--color-accent); }
.new-case-mode-help { grid-column: 1 / -1; color: var(--color-muted); font-size: 12px; line-height: 1.4; }
/* The scrollbar keeps its space but shows only while the text scrolls. */
.new-case-dialog textarea { display: block; width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface); color: var(--color-text); line-height: 1.5; resize: vertical; scrollbar-width: thin; scrollbar-color: transparent transparent; }
.new-case-dialog textarea[data-scrolling] { scrollbar-color: var(--color-muted) transparent; }
.new-case-dialog textarea::placeholder { color: var(--color-muted); }
.new-case-dialog[data-email-over] textarea { border-style: dashed; border-color: var(--color-accent); background: var(--color-brand-soft); }
.new-case-status { margin: 6px 0 0; color: var(--color-muted); font-size: 12px; }
.new-case-error { margin: 8px 0 0; color: var(--color-danger); font-size: 12px; }
.new-case-dialog footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.new-case-cancel { padding: 9px 16px; border: 0; border-radius: 6px; background: transparent; color: var(--color-muted); cursor: pointer; }
.new-case-cancel:hover { color: var(--color-text); }
.new-case-dialog .form-submit:disabled { opacity: .6; }
.invite-dialog { width: min(480px, calc(100vw - 32px)); }
.invite-dialog h2 { font-size: var(--font-size-base); }
.invite-dialog .workspace-form { max-width: none; margin: 0; }
.invite-dialog footer { margin-top: 4px; }
.invite-dialog .settings-option { display: flex; align-items: baseline; gap: 8px; font-weight: normal; }
.invite-dialog .settings-option input { width: auto; min-height: 0; padding: 0; }
.invite-dialog .archive-message { margin: 0; color: var(--color-text); font-size: var(--font-size-base); overflow-wrap: anywhere; }
@media (max-width: 40rem) { .new-case-modes { grid-template-columns: 1fr; } .new-case-dialog { padding: 16px; } }
.create-case-heading { position: relative; width: min(1200px, calc(100% - 64px)); margin: auto; }
#case-title [data-inline-edit-input] { field-sizing: content; width: auto; min-width: 1ch; max-width: 100%; text-align: center; }
.demo-toggle { position: fixed; top: 12px; right: 16px; z-index: 10; font-size: 11px; padding: 5px 9px; }
#demo-menu { position: fixed; inset: 44px 16px auto auto; margin: 0; padding: 5px; min-width: 150px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface-raised); color: var(--color-text); box-shadow: var(--shadow-card); }
#demo-menu button { display: block; width: 100%; border: 0; text-align: left; }
.create-case, body:has(.workspace-home) { isolation: isolate; }
.create-case > .workspace-sheet { min-height: 0; }
:is(.create-case > .workspace-sheet, .workspace-home) { position: relative; border: 0; box-shadow: 0 0 10px rgb(0 0 0 / 30%); }
:is(.create-case > .workspace-sheet, .workspace-home)::before, :is(.create-case > .workspace-sheet, .workspace-home)::after {
  content: '';
  height: 98%;
  width: 100%;
  border-radius: inherit;
  position: absolute;
  pointer-events: none;
}
:is(.create-case > .workspace-sheet, .workspace-home)::before {
  background: light-dark(#fafafa, #242424);
  box-shadow: 0 0 8px rgb(0 0 0 / 20%);
  left: -5px;
  top: 4px;
  transform: rotate(-.45deg);
  z-index: -2;
}
:is(.create-case > .workspace-sheet, .workspace-home)::after {
  background: light-dark(#f6f6f6, #202020);
  box-shadow: 0 0 3px rgb(0 0 0 / 20%);
  right: -3px;
  top: 1px;
  transform: rotate(.25deg);
  z-index: -1;
}
@media (max-width: 40rem) {
  :is(.create-case > .workspace-sheet, .workspace-home)::before { left: -2px; transform: rotate(-.08deg); }
  :is(.create-case > .workspace-sheet, .workspace-home)::after { right: 0; transform: rotate(.05deg); }
}
.case-composer { padding: 32px; }
.editor-save-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; min-width: 0; }
.create-case .editor-save-controls button { padding: 2px 8px; font-size: 11px; line-height: 1.6; }
.editor-save-controls:not(:has(button:not([hidden]))) { display: none; }
.composer-divider { display: flex; align-items: center; gap: 16px; margin: 40px 0; color: var(--color-muted); font-size: 11px; }
.composer-divider::before, .composer-divider::after { content: ''; flex: 1; border-top: 3px double var(--color-border); }
.composer-section { position: relative; margin-bottom: 32px; }
.composer-section:last-child { margin-bottom: 0; }
.composer-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.composer-heading h2 { font-size: 17px; margin: 0; }
.action-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.create-case button, .create-case select, .create-case-heading button { border: 1px solid var(--color-border); border-radius: 5px; padding: 7px 10px; background: var(--color-surface-raised); color: var(--color-text); }
.create-case button:hover:not(:disabled), .create-case-heading button:hover { background: var(--color-brand-soft); border-color: var(--color-accent); }
.create-case button:disabled { opacity: .5; }
.use-case-label { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; font-size: 11px; color: var(--color-muted); margin-left: auto; }
.use-case-selection { display: flex; align-items: flex-start; gap: 6px; min-width: 0; margin: 0; padding: 12px; background: var(--color-background); }
.use-case-selection .use-case-label { flex: 1; gap: 6px; font-size: 12px; }
#use-case-information { flex: 1; min-width: 0; font-size: 12px; }
#use-case-information summary { padding: 8px 0; font-weight: 600; overflow-wrap: anywhere; cursor: pointer; }
#use-case-information summary, .triage-intelligence summary { display: flex; align-items: center; gap: 6px; list-style: none; }
#use-case-information summary::-webkit-details-marker, .triage-intelligence summary::-webkit-details-marker { display: none; }
#use-case-information summary > svg:first-child, .triage-intelligence summary > svg:first-child { width: 15px; height: 15px; flex-shrink: 0; margin: 0; }
#use-case-information[open] summary > svg:first-child, .triage-intelligence[open] summary > svg:first-child { transform: rotate(90deg); }
.use-case-description { white-space: pre-wrap; margin: 8px 0 0 16px; line-height: 1.6; color: var(--color-muted); }
.use-case-dropdown { position: relative; flex: 1; min-width: 0; }
.use-case-dropdown > svg { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; pointer-events: none; }
.create-case #use-case { appearance: none; width: 100%; height: 34px; padding-right: 34px; text-overflow: ellipsis; }
.create-case #use-case-confirm { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 8px; }
#use-case-confirm svg { width: 15px; height: 15px; }
.create-case .detection-reset { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px; flex-shrink: 0; }
.detection-reset svg { width: 15px; height: 15px; }
.use-case-selection .detection-reset { margin-left: auto; height: 34px; }
.use-case-selection .use-case-change { flex-shrink: 0; height: 34px; }
.create-case select { width: 360px; min-width: 0; max-width: 100%; font-size: 12px; }
.create-case textarea { display: block; width: 100%; min-height: 320px; field-sizing: content; resize: vertical; padding: 22px 0; border: 0; border-radius: 0; background: transparent; color: var(--color-text); line-height: 1.85; font-size: 14px; }
.create-case textarea:focus { outline: none; }
.create-case textarea:disabled { color: var(--color-muted); }
.create-case textarea::placeholder { color: var(--color-muted); opacity: .8; }
.highlight-editor { position: relative; }
.highlight-editor textarea { position: relative; z-index: 1; overflow-x: hidden; white-space: pre-wrap; overflow-wrap: break-word; }
.highlight-viewport { position: absolute; top: 0; left: 0; overflow: hidden; pointer-events: none; }
.highlight-mirror { box-sizing: border-box; white-space: pre-wrap; color: transparent; }
.highlight-mirror mark { color: transparent; background: light-dark(#f9ebc5, #665325); border-radius: 2px; }
.highlight-mirror mark.is-active { background: light-dark(#f2cf6b, #8f7024); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 2px; }
/* Inquiry cards are suggestions: a dashed border until a statement accepts them. Outcome notes are results. */
#inquiry-annotations .annotation-card { border: 1px dashed var(--color-annotation); background: var(--color-surface-raised); }
#inquiry-annotations .annotation-card:not([data-statement=""]) { border-style: solid; }
.annotation-arrows { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; color: var(--color-annotation); }
.annotation-arrows path { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }
.annotation-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.annotation-card .annotation-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; width: auto; padding: 3px 5px; }
/* In-flight request guards must not flash every other annotation action. */
.create-case[data-request-pending="true"] [data-annotation-action]:disabled:not([data-unavailable]) { opacity: 1; }
.annotation-actions svg { flex: 0 0 15px; width: 15px; height: 15px; max-width: 15px; max-height: 15px; }
.annotation-card.is-collapsed .annotation-actions button { margin-top: 0; }
.annotation-original-text { margin: auto; padding: 20px; width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; box-sizing: border-box; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface-raised); color: var(--color-text); box-shadow: 0 8px 32px #0003; }
.annotation-original-text p { white-space: pre-wrap; overflow-wrap: anywhere; }
@media (min-width: 64.001rem) {
  .composer-section { min-height: var(--annotations-height, 0px); }
}
.triage-intelligence { padding: 12px 0; border-top: 1px solid var(--color-card-border); color: var(--color-muted); font-size: 12px; }
.triage-intelligence.is-empty, .case-next.is-empty { opacity: .6; }
.triage-intelligence summary { cursor: pointer; font: inherit; }
.triage-intelligence summary svg { width: 15px; height: 15px; vertical-align: middle; margin: 0 4px; }
.triage-results { display: grid; gap: 8px; margin: 10px 0 0; font-size: 12px; line-height: 1.5; }
.triage-results > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: center; gap: 12px; }
.triage-results dt, .triage-results p { color: var(--color-muted); }
.triage-results dd, .triage-results p { margin: 0; }
#triage-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag, .create-case .tag { display: inline-block; padding: 1px 6px; border: 1px solid var(--color-card-border); border-radius: 4px; background: transparent; color: var(--color-muted); font-size: 12px; font-weight: 400; line-height: 1.7; letter-spacing: .04em; overflow-wrap: anywhere; }
.tag[aria-pressed="false"] { opacity: .45; }
.criticality-switch, .side-panel-switch { display: inline-flex; min-width: 0; margin: 0; padding: 2px; border: 0; border-radius: 5px; background: var(--color-disabled); }
:is(.criticality-switch, .side-panel-switch) label { position: relative; cursor: pointer; }
:is(.criticality-switch, .side-panel-switch) input { position: absolute; opacity: 0; width: 1px; height: 1px; }
:is(.criticality-switch, .side-panel-switch) input + span { display: block; min-width: 62px; padding: 3px 10px; border: 1px solid transparent; border-radius: 4px; text-align: center; }
:is(.criticality-switch, .side-panel-switch) input:checked + span { background: var(--color-surface-raised); border-color: var(--color-border); }
:is(.criticality-switch, .side-panel-switch) input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 1px; }
@media (max-width: 40rem) {
  .triage-results > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .use-case-selection { flex-wrap: wrap; }
  .use-case-selection .use-case-label:has(#use-case-confirm:not([hidden])) { flex-basis: 100%; }
  #use-case-information { flex-basis: 100%; }
}
.annotation-rail { position: absolute; top: 0; left: calc(100% + 45px); width: calc(var(--side-panel-width) - 16px); font-size: 11px; color: var(--color-muted); }
.annotation-heading { margin: 3px 0 16px; }
.create-case .content-header { position: relative; display: grid; grid-template-columns: minmax(64px, 1fr) minmax(0, 4fr) minmax(64px, 1fr); }
.create-case .content-header .home-link { grid-area: 1 / 1; justify-self: start; }
.editor-operation > .use-case-label { margin-left: 0; white-space: normal; overflow-wrap: anywhere; text-align: center; }
.editor-operation > p { margin: 0; font-size: 11px; line-height: 1.6; color: var(--color-muted); }
.editor-operation > p:empty { display: none; }
.editor-operation > p[role="alert"] { color: var(--color-danger); }
.editor-operation { grid-area: 1 / 2; min-width: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; text-align: center; overflow-wrap: anywhere; }
/* The header shows one message. Messages appear in priority order; the first visible one hides the rest. */
.editor-operation > :is(p:not([hidden], :empty), span:not(:empty)) ~ :not(.editor-save-controls) { display: none; }
#editor-case-status { grid-area: 1 / 3; justify-self: end; font-size: inherit; font-weight: 500; line-height: 1.6; color: var(--color-muted); text-align: right; }
#editor-operation-status { font-size: 11px; font-weight: 500; line-height: 1.6; color: var(--color-muted); pointer-events: none; }
#editor-operation-status:empty { display: none; }
#editor-operation-status[data-busy="true"] { background: linear-gradient(100deg, var(--color-muted) 35%, var(--color-surface-raised) 50%, var(--color-muted) 65%); background-size: 250% 100%; background-clip: text; color: transparent; animation: operation-shimmer 1.8s linear infinite; }
@keyframes operation-shimmer { from { background-position: 150% 0; } to { background-position: -150% 0; } }
@media (prefers-reduced-motion: reduce) {
  #editor-operation-status[data-busy="true"], .job-status.is-writing { animation: none; background: none; color: var(--color-muted); }
}
#analyse-again { height: 34px; flex-shrink: 0; white-space: nowrap; }
.annotation-numbers span { position: absolute; transform: translate(1px, -60%); color: var(--color-annotation); font-size: 10px; font-weight: 700; line-height: 1; white-space: nowrap; }
.annotation-numbers span.is-active { text-decoration: underline; }
.annotation-card { position: relative; padding: 12px; margin: 0 0 12px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface-raised); }
.annotation-card h3 { font-size: 12px; color: var(--color-annotation); line-height: 1.5; }
.annotation-card.is-collapsed h3 { color: var(--color-muted); }
.annotation-body { display: grid; grid-template-rows: 1fr; opacity: 1; visibility: visible; transition: grid-template-rows 220ms cubic-bezier(.2, .7, .2, 1), opacity 180ms ease, visibility 220ms; }
.annotation-body[hidden] { display: grid !important; }
.annotation-body-content { min-height: 0; overflow: hidden; transform: translateY(0); transition: transform 220ms cubic-bezier(.2, .7, .2, 1); }
.annotation-body[aria-hidden="true"] { grid-template-rows: 0fr; opacity: 0; visibility: hidden; }
.annotation-body[aria-hidden="true"] > .annotation-body-content { transform: translateY(-4px); }
.create-case:not([data-editor-ready]) :is(.annotation-body, .annotation-body-content) { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .annotation-body, .annotation-body-content { transition: none; }
}
.annotation-card p { margin: 8px 0; line-height: 1.6; }
.clarification-request { overflow-wrap: anywhere; }
.clarification-request > h3 { display: flex; align-items: center; gap: 4px; }
.clarification-status { position: relative; display: inline-flex; flex-shrink: 0; color: var(--color-muted); }
.clarification-status svg { width: 15px; height: 15px; }
.clarification-status:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.clarification-status-tooltip { position: absolute; bottom: calc(100% + 6px); right: 0; z-index: 5; padding: 3px 6px; border: 1px solid var(--color-border); border-radius: 4px; background: var(--color-surface-raised); color: var(--color-text); font-size: 11px; font-weight: normal; white-space: nowrap; visibility: hidden; }
.clarification-status:focus .clarification-status-tooltip { visibility: visible; }
@media (hover: hover) {
  .clarification-status:hover .clarification-status-tooltip { visibility: visible; }
}
.clarification-dialog { width: min(680px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); margin: auto; padding: 0; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface-raised); color: var(--color-text); cursor: default; }
.clarification-dialog::backdrop { background: rgb(0 0 0 / 35%); }
.clarification-dialog::before, .clarification-dialog::after { content: ""; display: block; height: 8px; background: repeating-linear-gradient(135deg, #659bc3 0 12px, #faf9f6 12px 22px, #e68e61 22px 34px, #faf9f6 34px 44px); }
.clarification-letter-header { position: relative; padding: 18px 24px 0; }
.clarification-dialog .clarification-letter-label { margin: 0 32px 12px 0; color: var(--color-muted); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.clarification-dialog h2 { margin: 0 0 10px; font-size: 22px; font-weight: 700; line-height: 1.3; }
.clarification-letter-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.clarification-dialog .clarification-recipient { display: flex; align-items: baseline; gap: 10px; min-width: 0; margin: 0; color: var(--color-muted); font-size: 14px; }
.clarification-recipient span { min-width: 0; padding: 3px 10px; border: 1px solid var(--color-border); border-radius: 6px; background: light-dark(#f0f1f4, #35383d); color: var(--color-text); }
.clarification-dialog .clarification-date { margin: 0 0 0 auto; color: var(--color-muted); font-size: 12px; text-align: right; }
.clarification-dialog .clarification-message { white-space: pre-wrap; margin: 20px 24px; font-size: 14px; line-height: 1.4; }
.clarification-message blockquote { display: inline-block; box-sizing: border-box; width: 100%; margin: 0; padding: 8px 12px; border-left: 3px solid var(--color-muted); border-radius: 0 6px 6px 0; background: light-dark(#f0f1f4, #35383d); vertical-align: middle; }
.clarification-letter-footer { display: flex; justify-content: flex-end; padding: 10px 24px; border-top: 1px solid var(--color-border); }
.clarification-dialog .clarification-letter-footer button { width: auto; margin: 0; font-size: 13px; padding: 6px 14px; }
.clarification-dialog .clarification-letter-dismiss { position: absolute; top: 15px; right: 16px; display: grid; place-items: center; width: 32px; height: 32px; margin: 0; padding: 0; border: 0; background: transparent; color: var(--color-muted); font-size: 28px; line-height: 1; }
.clarification-public { margin: 40px auto; max-height: none; overflow: hidden; }
.clarification-public h1 { margin: 0 0 14px; font-size: 24px; }
.clarification-reply { padding: 20px 24px; border-top: 1px solid var(--color-border); }
.clarification-reply h2 { display: flex; align-items: center; gap: 8px; }
.clarification-reply-text, .clarification-public .clarification-message { white-space: pre-wrap; overflow-wrap: anywhere; }
.clarification-reply label { font-weight: 600; }
.clarification-reply #reply-help { color: var(--color-muted); font-size: 13px; }
.clarification-reply textarea { box-sizing: border-box; width: 100%; padding: 12px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface); color: var(--color-text); font: inherit; resize: vertical; }
.clarification-reply button { margin-top: 12px; }
#clarification-toolbar { position: fixed; inset: auto; margin: 0; padding: 2px; border: 1px solid var(--color-border); border-radius: 5px; background: var(--color-surface-raised); box-shadow: 0 2px 8px rgb(0 0 0 / 15%); }
#clarification-toolbar button { margin: 0; padding: 4px 8px; border: 0; font-size: 11px; }
#clarification-form { margin: 0; }
#clarification-form label:not(.boolean-switch) { display: block; margin: 10px 0 4px; color: var(--color-muted); font-size: 12px; }
#clarification-form input:not([type="hidden"]):not([type="checkbox"]), #clarification-form textarea { box-sizing: border-box; width: 100%; padding: 7px 10px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface); color: var(--color-text); font: inherit; }
#clarification-form textarea { resize: vertical; min-height: 150px; font-size: 14px; line-height: 1.4; }
.clarification-compose-body { padding: 16px 24px; }
.clarification-delivery-note { margin: 10px 0 0; color: var(--color-muted); font-size: 12px; line-height: 1.4; }
#clarification-error { font-size: 13px; color: var(--color-text); }
#clarification-form .clarification-letter-footer { gap: 8px; }
.boolean-switch { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.boolean-switch input { appearance: none; flex: 0 0 30px; width: 30px; height: 18px; margin: 0; padding: 2px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-muted); cursor: pointer; }
.boolean-switch input::before { content: ""; display: block; width: 12px; height: 12px; border-radius: 50%; background: white; }
.boolean-switch input:checked { background: var(--color-accent); }
.boolean-switch input:checked::before { transform: translateX(12px); }
.boolean-switch input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.annotation-card button { width: 100%; font-size: 11px; margin-top: 6px; }
.annotation-card:has(.annotation-toggle) h3 { padding-right: 24px; }
.create-case .annotation-card .annotation-toggle { position: absolute; top: 9px; right: 8px; display: grid; place-items: center; width: 24px; height: 24px; margin: 0; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--color-muted); cursor: pointer; }
.create-case .annotation-card .annotation-toggle:hover { background: var(--color-disabled); color: var(--color-text); }
.annotation-toggle svg { display: block; width: 15px; height: 15px; transition: transform 150ms ease; }
.annotation-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.case-next { container-type: inline-size; }
.case-next-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 8px; }
/* Four actions form one row, or two even rows instead of three and one. */
.case-next-actions:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container (min-width: 40rem) {
  .case-next-actions:has(> :nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.case-next-actions hold-confirm { display: flex; }
.create-case .case-next-actions button { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 10px 12px; border-radius: 8px; text-align: left; }
.case-next-actions strong { font-weight: 600; }
.case-next-actions button span { color: var(--color-muted); font-size: 11px; line-height: 1.4; }
.case-next-actions .approval-button span { color: color-mix(in srgb, var(--color-on-brand), transparent 20%); }
.create-case .approval-button { background: var(--color-primary-button); color: var(--color-on-brand); border-color: var(--color-primary-button); }
.create-case .approval-button:hover:not(:disabled) { background: var(--color-primary-button-hover); }
hold-confirm > button { user-select: none; touch-action: none; -webkit-touch-callout: none; }
.create-case hold-confirm button {
  --hold-background: var(--color-surface-raised);
  --hold-fill: color-mix(in srgb, var(--color-surface-raised), var(--color-text) 14%);
}
.create-case hold-confirm .approval-button {
  --hold-background: var(--color-primary-button);
  --hold-fill: color-mix(in srgb, var(--color-primary-button), black 35%);
}
.create-case hold-confirm button[data-holding],
.create-case hold-confirm button[data-holding]:hover:not(:disabled) {
  background: linear-gradient(to right, var(--hold-fill) var(--hold-progress, 0%), var(--hold-background) var(--hold-progress, 0%));
}
.reanalysis-dialog { width: min(480px, calc(100vw - 32px)); box-sizing: border-box; margin: auto; padding: 28px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface-raised); color: var(--color-text); box-shadow: 0 24px 80px #0003; }
.reanalysis-dialog::backdrop { background: #0006; }
.reanalysis-dialog h2 { margin: 0 0 18px; font-size: 20px; }
.reanalysis-dialog p { margin: 0 0 14px; font-size: 14px; line-height: 1.6; }
.reanalysis-submit { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 24px; }
/* Each card scopes the anchor name, so every popover anchors to its own trash button. */
/* FormPopover: a small form below its trigger. Each card scopes its own anchor. */
.annotation-card { anchor-scope: --form-popover; }
.form-popover-trigger { anchor-name: --form-popover; }
.form-popover { position-anchor: --form-popover; inset: auto; top: anchor(bottom); right: anchor(right); position-try-fallbacks: flip-block; width: min(300px, calc(100vw - 32px)); box-sizing: border-box; margin: 6px 0; padding: 10px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface-raised); color: var(--color-text); box-shadow: 0 8px 24px rgb(0 0 0 / 14%); }
.create-case .form-popover textarea { box-sizing: border-box; min-height: 72px; field-sizing: fixed; padding: 7px 9px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface); font: inherit; font-size: 13px; line-height: 1.4; }
.create-case .form-popover textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.form-popover .form-popover-help { margin: 6px 0 0; color: var(--color-muted); font-size: 12px; line-height: 1.4; }
.form-popover-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; }
.create-case .form-popover button { width: auto; margin-top: 0; padding: 4px 10px; font-size: 12px; }
.create-case .form-popover .annotation-remove-confirm { color: var(--color-danger); }
@media (max-width: 64rem) {
  .annotation-rail { position: static; width: auto; margin-top: 16px; }
  .annotation-arrows { display: none; }
}
@media (max-width: 40rem) {
  .case-composer { padding: 20px 14px; }
  .composer-heading { flex-wrap: wrap; gap: 4px; }
  .create-case select { flex: 1; min-width: 0; }
  .create-case textarea { padding: 16px 0; }
  .annotation-rail > div { grid-template-columns: 1fr; }
}
.case-list { display: grid; grid-template-columns: fit-content(40%) 15px minmax(0, 1fr); column-gap: 8px; list-style: none; padding: 0; margin: 10px 0 0; max-height: max(0px, calc(100% - 48px)); overflow: clip; }
.case-list li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; }
.case-list a { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; padding: 5px 0; font-size: 13px; }
.case-id { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.case-status, .case-status svg { display: block; width: 15px; height: 15px; color: var(--color-muted); }
.case-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.case-list .case-title { display: flex; align-items: center; min-width: 0; }
.case-list .case-title > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.case-approval-badge { flex: none; white-space: nowrap; }
[data-card-type="cases"]:has(.case-table) { display: flex; flex-direction: column; padding-bottom: 34px; }
[data-card-type="cases"]:has(.case-table) .tile-heading { flex-shrink: 0; }
.case-table-scroll { overflow: auto; min-height: 0; margin-top: 10px; touch-action: pan-x pan-y; }
.case-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; text-align: left; }
.case-table th { position: sticky; top: 0; z-index: 1; background: var(--color-surface-raised); border-bottom: 1px solid var(--color-card-border); }
.case-table th button { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 8px 10px; border: 0; background: transparent; color: var(--color-muted); font: inherit; white-space: nowrap; }
.case-table th[aria-sort="ascending"] button, .case-table th[aria-sort="descending"] button { color: var(--color-text); }
.case-table th button:hover, .case-table tbody tr:hover { background: var(--color-disabled); }
.case-table td { padding: 0; border-bottom: 1px solid var(--color-card-border); vertical-align: top; }
.case-table td a { display: block; padding: 10px; color: inherit; white-space: nowrap; }
.case-table td[data-column="title"] { min-width: 180px; width: 100%; }
.case-table td[data-column="title"] a { min-width: 180px; max-width: 340px; white-space: normal; overflow-wrap: anywhere; }
.case-table td[data-column="id"], .case-table time { color: var(--color-muted); font-variant-numeric: tabular-nums; }
.table-criticality { text-transform: capitalize; }
.table-criticality::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #b38a39; }
.table-criticality[data-level="low"]::before { background: #6f9778; }
.table-criticality[data-level="high"]::before { background: #c96759; }
.table-tag { display: inline-block; margin-right: 4px; color: var(--color-muted); }
.case-table-limit { flex-shrink: 0; margin: 6px 0 0; font-size: 11px; color: var(--color-muted); }
[data-bento-item][data-card-type="metrics"] { display: flex; flex-direction: column; padding-bottom: 32px; }
[data-card-type="metrics"] .tile-heading { flex-shrink: 0; padding-right: 70px; }
.metrics-total { position: absolute; top: 12px; right: 12px; color: var(--color-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.case-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: auto 0; min-height: 0; overflow: auto; touch-action: pan-y; }
.case-metrics > div { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 3px 4px; min-width: 0; text-align: center; }
.case-metrics > div:not(:nth-child(3n)) { border-right: 1px solid var(--color-card-border); }
.case-metrics > div:nth-child(n+4) { border-top: 1px solid var(--color-card-border); }
.case-metrics dt { color: var(--color-muted); font-size: 11px; line-height: 1.2; }
.case-metrics dd { order: -1; margin: 0; font-size: 26px; line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.case-metrics[data-view="simple"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 20px; }
.case-metrics[data-view="simple"] > div { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 8px; padding: 4px 0; border: 0; border-bottom: 1px solid var(--color-card-border); text-align: left; }
.case-metrics[data-view="simple"] dt { font-size: 12px; }
.case-metrics[data-view="simple"] dd { order: 0; color: var(--color-text); font-size: inherit; line-height: inherit; }
.case-metrics.metrics-tube { display: block; flex: 1; margin: 8px 0 0; overflow: auto; --tube-main: light-dark(#164873, #92c4ee); --tube-waiting: light-dark(#d89019, #efb84b); }
.metrics-tube > svg { display: block; width: 100%; height: 100%; fill: var(--tube-main); }
.tube-line, .tube-branch { fill: none; stroke: var(--tube-main); stroke-width: 5; stroke-linejoin: round; }
.tube-branch { stroke: var(--tube-waiting); }
.tube-direction { fill: none; stroke: var(--color-muted); stroke-width: 2; }
.tube-station > circle { fill: var(--color-surface-raised); stroke: var(--tube-main); stroke-width: 4; }
.tube-station > .tube-interchange { fill: var(--tube-main); stroke: none; }
.tube-station[data-stage="Waiting"] > circle { stroke: var(--tube-waiting); }
.tube-count { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tube-label { font-size: 12px; font-weight: 600; }
.case-metrics.metrics-airport { display: flex; flex-direction: column; flex: 1; gap: 6px; margin: 8px 0 0; }
.airport-board { container-type: inline-size; display: grid; grid-template-rows: repeat(4, minmax(22px, 1fr)); flex: 1; gap: 5px; margin: 0; padding: 8px; border: 1px solid #354751; border-radius: 8px; background: #101e26; box-shadow: inset 0 1px 4px #0008; }
.airport-row { display: grid; gap: 3px; min-width: 0; }
.airport-row dt, .airport-row dd { display: grid; grid-template-columns: subgrid; order: 0; gap: 3px; margin: 0; color: #fff0c7; font: 600 clamp(10px, 4cqw, 24px)/1 ui-monospace, monospace; }
.airport-row dt { grid-column: 1 / 13; }
.airport-row dd { grid-column: 13 / -1; }
.airport-flap { position: relative; display: grid; place-items: center; min-width: 0; border: 1px solid #354550; border-radius: 3px; background: linear-gradient(#23333d 49%, #0a1218 49%, #0a1218 52%, #1a2932 52%); box-shadow: 0 1px 2px #0009; white-space: pre; }
.airport-flap::after { content: ""; position: absolute; inset: 49% -2px auto; height: 2px; border-inline: 2px solid #829099; }
.card-settings-menu { margin: 0; padding: 5px; min-width: 140px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface-raised); color: var(--color-text); box-shadow: var(--shadow-card); }
.card-settings-menu [role="menuitem"], .card-settings-menu [role="menuitemradio"] { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; border: 0; border-radius: 4px; background: transparent; color: inherit; text-align: left; }
.card-settings-menu [role="menuitemradio"]::before { content: ""; width: 12px; }
.card-settings-menu [aria-checked="true"]::before { content: "✓"; }
.card-settings-menu button:not(:disabled):hover, .card-settings-menu button:focus-visible { background: var(--color-disabled); }
/* The menu takes focus when it opens; its items show the keyboard focus. */
.card-settings-menu:focus-visible { outline: none; }
.card-settings-menu [data-submenu] { justify-content: space-between; }
.card-settings-menu .menu-heading { margin: 0; padding: 5px 10px; color: var(--color-muted); font-size: 11px; }
.card-settings-menu hr { margin: 5px 0; border: 0; border-top: 1px solid var(--color-border); }
.status-checkbox { display: grid; place-items: center; flex: 0 0 13px; height: 13px; border: 1px solid var(--color-muted); border-radius: 2px; font-size: 11px; line-height: 1; }
.card-settings-menu button:disabled { opacity: .55; }
[data-bento-item][data-card-type="closetime"] { display: flex; flex-direction: column; padding-bottom: 32px; }
[data-card-type="closetime"] .tile-heading { flex-shrink: 0; }
.close-time { display: flex; flex-direction: column; flex: 1; min-height: 0; margin-top: 10px; overflow: auto; touch-action: pan-y; font-size: 12px; font-variant-numeric: tabular-nums; }
.close-time .tile-empty { margin: auto 0; }
.close-time dl, .close-time dd { margin: 0; }
.close-time-list { min-height: 0; overflow: auto; touch-action: pan-y; }
.close-time-list > div { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) 52px; gap: 10px; align-items: center; min-height: 26px; }
.close-time-list dt, .close-time-extremes dt, .close-time-table th[scope="row"] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.close-time-list dd:last-child { text-align: right; }
.close-time-bar span { display: block; min-width: 2px; height: 8px; background: var(--color-brand); }
.close-time-list > div:nth-child(n+4) .close-time-bar span { background: var(--color-border); }
.close-time-spread { position: relative; height: 16px; }
.close-time-spread span { position: absolute; }
.close-time-range { top: 7px; height: 2px; background: var(--color-border); }
.close-time-middle { top: 4px; height: 8px; background: color-mix(in srgb, var(--color-brand), transparent 65%); }
.close-time-mark { top: 1px; width: 2px; height: 14px; margin-left: -1px; background: var(--color-brand); }
.close-time-note { margin: auto 0 0; padding-top: 6px; color: var(--color-muted); font-size: 11px; }
.close-time-note + .close-time-note { margin-top: 0; padding-top: 2px; }
.close-time-scroll { min-height: 0; overflow: auto; touch-action: pan-x pan-y; }
.close-time-table { width: 100%; border-collapse: collapse; }
.close-time-table th, .close-time-table td { padding: 5px 0 5px 12px; border-bottom: 1px solid var(--color-card-border); text-align: right; white-space: nowrap; }
.close-time-table thead th { position: sticky; top: 0; background: var(--color-surface-raised); color: var(--color-muted); font-weight: 400; }
.close-time-table th:first-child { max-width: 160px; padding-left: 0; text-align: left; }
.close-time-table th[scope="row"] { font-weight: 400; }
.close-time-muted { color: var(--color-muted); }
.close-time-headline { display: flex; align-items: baseline; gap: 8px; margin: 0 0 12px; color: var(--color-muted); }
.close-time-headline strong { color: var(--color-text); font-size: 26px; line-height: 1; font-weight: 600; }
.close-time-extremes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.close-time-extremes h3 { margin: 0 0 4px; color: var(--color-muted); font-size: 11px; font-weight: 400; }
.close-time-extremes dl > div { display: flex; justify-content: space-between; gap: 8px; min-height: 22px; align-items: center; }
.close-time-extremes dd, .close-time-list dd:last-child { white-space: nowrap; }
.card-filter-label { margin: 3px 0 0; color: var(--color-muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-heading:has(.card-filter-label) { display: block; }
[data-card-type="cases"]:has(.card-filter-label) .case-list { max-height: max(0px, calc(100% - 67px)); }
.case-metrics[data-view="grid"]:has(> div:last-child:nth-child(1)) { grid-template-columns: 1fr; }
.case-metrics[data-view="grid"]:has(> div:last-child:nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
button { cursor: pointer; }
button:disabled { cursor: default; }
svg { width: 24px; height: 24px; }
.add-tool {
  display: grid; place-items: center; width: 60px; height: 60px;
  border: 1.5px dashed light-dark(#aab6ad, #79887e); border-radius: 14px;
  color: light-dark(#526b59, #c0d1c4); background: transparent;
  transition: background .15s, border-color .15s;
}
.add-tool svg { width: 29px; height: 29px; }
.add-tool:hover, .add-tool[aria-expanded="true"] { background: light-dark(#edf4ed, #344239); border-color: #729078; }
.workspace-empty {
  position: relative; max-width: 490px; margin: 32px 0 70px 76px; padding: 32px;
  border: 1.5px dashed light-dark(#d9bf71, #827240); border-radius: 14px;
  background: light-dark(#fffcf3, #2e2e24);
}
.welcome-arrow { position: absolute; width: 90px; height: 82px; top: -32px; left: -63px; color: light-dark(#caa23b, #e0bb58); pointer-events: none; }
.empty-eyebrow { color: light-dark(#927124, #d2b667); font-size: 10px; font-weight: 600; letter-spacing: .13em; }
.workspace-empty h2 { font-size: 25px; letter-spacing: -.035em; margin: 12px 0; }
.workspace-empty p { color: var(--color-muted); font-size: 15px; line-height: 1.75; }
.workspace-empty .empty-note { font-size: 13px; margin-top: 22px; }
.tool-picker {
  position: fixed; inset: auto; margin: 0; padding: 12px;
  color: var(--color-text); background: light-dark(#fff, #2a302c);
  border: 1px solid var(--color-border); border-radius: 16px;
  box-shadow: 0 16px 60px rgb(20 35 25 / 18%); overflow-y: auto;
}
.tool-picker h2 { padding: 10px 12px 14px; margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: light-dark(#927124, #d2b667); }
.tool-option { display: flex; align-items: center; gap: 13px; width: 100%; border: 0; border-radius: 10px; background: transparent; color: inherit; padding: 12px; text-align: left; }
.tool-option:hover, .tool-option:focus-visible { background: light-dark(#f1f5f0, #374139); }
.tool-option:disabled { opacity: .45; }
.tool-option strong { display: block; font-size: 14px; font-weight: 600; }
.tool-description { display: block; color: var(--color-muted); font-size: 12px; margin-top: 3px; }
.tool-option-plus { display: grid; place-items: center; flex-shrink: 0; margin-left: auto; color: var(--color-muted); font-size: 15px; }
.tool-option-plus svg { width: 15px; height: 15px; }
.tool-added, .tool-option:disabled .tool-option-plus svg { display: none; }
.tool-option:disabled .tool-added { display: inline; }
.tool-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0; background: light-dark(#eaf0e9, #3b4a3d); color: light-dark(#4e6b51, #c0d8c3); }
.tool-icon[data-kind="metrics"] { background: light-dark(#f6efdc, #4c4430); color: light-dark(#9a7826, #e6cd8f); }
.tool-icon[data-kind="closetime"] { background: light-dark(#e3eef3, #2c3e46); color: light-dark(#00749e, #8fc7dc); }
.tool-icon[data-kind="pin"] { background: light-dark(#f5e9e4, #4d3730); color: light-dark(#a4674c, #e7b39c); }
.tool-icon[data-kind="chat"] { background: light-dark(#e8edf6, #303d52); color: light-dark(#5c76a6, #adbee1); }
.tool-icon[data-kind="docs"] { background: light-dark(#eeebf6, #40374e); color: light-dark(#82659e, #cdb6e3); }
pd-bento-workspace { display: block; }
.tool-controls { align-self: start; }
[data-bento-grid] { display: grid; grid-template-columns: repeat(var(--bento-columns, 4), minmax(0, 1fr)); grid-auto-rows: 100px; gap: 18px; }
[data-bento-item] {
  position: relative; min-width: 0; overflow: hidden; padding: 12px; container-type: size;
  border: 1px solid var(--color-card-border); border-radius: 14px;
  background: light-dark(#fdfefc, #2a312c); box-shadow: 0 2px 5px rgb(30 50 35 / 3%);
  touch-action: none; cursor: grab; transition: transform 180ms cubic-bezier(.2, 0, 0, 1);
}
.tile-heading { display: flex; align-items: flex-start; gap: 8px; }
.tile-heading h2 { font-size: 13px; margin: 0; text-align: left; min-width: 0; width: 100%; }
inline-edit { display: block; }
[data-inline-edit-value] { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: text; }
[data-inline-edit-input] { box-sizing: border-box; width: 100%; min-width: 0; padding: 0; margin: 0; font: inherit; color: inherit; background: transparent; border: 0; border-radius: 2px; outline: 2px solid var(--color-muted); outline-offset: 2px; }
.tile-actions { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 2px; }
.tile-actions button { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--color-muted); }
.tile-actions svg { width: 15px; height: 15px; }
.tile-actions button:hover { background: var(--color-disabled); }
.tile-empty { color: var(--color-muted); font-size: 13px; max-width: 280px; margin-top: 12px; line-height: 1.5; }
.tile-preview { position: absolute; left: 12px; bottom: 14px; color: var(--color-muted); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.files-content { position: absolute; inset: 38px 12px 36px; display: flex; flex-direction: column; gap: 8px; overflow: auto; cursor: auto; font-size: 12px; scrollbar-width: thin; }
.files-toolbar { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.files-toolbar[hidden] { display: none; }
.files-actions { display: flex; gap: 4px; flex-shrink: 0; margin-top: -5px; }
.files-actions > button { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 5px; color: var(--color-muted); background: transparent; cursor: pointer; }
.files-actions > button:hover:not(:disabled), .files-actions > button[aria-expanded="true"] { background: var(--color-disabled); color: var(--color-text); }
.files-actions > button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.files-actions button:disabled { opacity: .45; }
.files-actions svg { width: 15px; height: 15px; }
.files-add-menu, .files-folder-menu { width: min(260px, calc(100vw - 32px)); box-sizing: border-box; }
.files-actions .card-settings-menu [hidden], .files-content .card-settings-menu [hidden] { display: none; }
.files-folder-input { display: flex; gap: 6px; padding: 4px; }
.files-folder-input input { min-width: 0; width: 0; flex: 1; padding: 6px 8px; border: 1px solid var(--color-border); border-radius: 4px; background: var(--color-surface); color: inherit; font: inherit; }
.files-folder-input button { padding: 5px 9px; border: 1px solid var(--color-border); border-radius: 4px; background: var(--color-surface); color: inherit; font: inherit; }
[data-folder-form] [data-form-error] { margin: 4px; color: var(--color-danger); font-size: 12px; white-space: normal; }
[data-folder-form] [data-form-error]:empty { display: none; }
.files-toolbar input[type="search"] { width: 0; min-width: 50px; flex: 1; padding: 7px 9px; font: inherit; color: inherit; border: 1px solid var(--color-card-border); border-radius: 6px; background: var(--color-surface); }
.files-content button { padding: 6px 9px; border: 1px solid var(--color-card-border); border-radius: 6px; background: var(--color-surface); color: inherit; font: inherit; white-space: nowrap; }
.files-toolbar button:hover:not(:disabled), .files-pages button:hover:not(:disabled), .files-list li:hover { background: var(--color-disabled); }
.files-content button:disabled { opacity: .45; }
.files-content :is(button, input, a):focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.files-results { flex: 1; min-height: 90px; display: flex; flex-direction: column; gap: 8px; }
.files-list { list-style: none; margin: 0; padding: 0; overflow: auto; min-height: 0; flex: 1; scrollbar-width: thin; touch-action: pan-y; }
.files-list li + li { border-top: 1px solid var(--color-card-border); }
.files-list li { display: flex; align-items: center; gap: 2px; border-radius: 5px; }
.files-list a { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px; border-radius: 5px; color: inherit; text-decoration: none; }
.files-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.files-meta { color: var(--color-muted); font-size: 10px; white-space: nowrap; }
.files-pages { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-shrink: 0; font-size: 11px; }
.files-pages span { color: var(--color-muted); white-space: nowrap; }
.files-empty { flex: 1; display: grid; place-items: center; text-align: center; margin: 0; color: var(--color-muted); line-height: 1.6; }
.files-breadcrumb { display: flex; align-items: center; gap: 6px; min-height: 30px; flex-shrink: 0; }
.files-breadcrumb > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files-notice { margin: 0; color: var(--color-muted); font-size: 11px; }
.files-list .files-folder-row { flex: 1; min-width: 0; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: center; border: 0; background: transparent; text-align: left; padding: 9px 6px; }
.files-folder-row svg { width: 18px; height: 18px; color: var(--color-muted); }
.files-list .files-menu-trigger { border: 0; background: transparent; padding: 6px; font-size: 18px; color: var(--color-muted); }
.files-location { grid-column: 1 / -1; font-size: 10px; color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files-content .card-settings-menu button { border: 0; background: transparent; border-radius: 3px; }
.files-content .card-settings-menu button:hover { background: var(--color-disabled); }
.files-content .card-settings-menu { max-width: min(260px, calc(100vw - 32px)); max-height: min(400px, calc(100dvh - 32px)); overflow: auto; }
.files-content [data-move-options] button { display: block; overflow: hidden; text-overflow: ellipsis; }
.files-drop-overlay:not([hidden]) { position: fixed; inset: 16px; z-index: 2000; display: grid; place-items: center; padding: 24px; border: 2px dashed var(--color-focus); border-radius: 12px; background: color-mix(in srgb, var(--color-surface) 94%, transparent); color: var(--color-text); font-size: 20px; text-align: center; pointer-events: none; }
.pin-content { position: absolute; inset: 38px 12px 48px; display: flex; flex-direction: column; cursor: auto; }
.pin-content > :not(.pin-excerpt) { flex-shrink: 0; }
.pin-excerpt { min-height: 0; overflow-y: auto; touch-action: pan-y; }
.pin-excerpt, .case-table-scroll { scrollbar-width: thin; scrollbar-gutter: stable; scrollbar-color: transparent transparent; }
.pin-excerpt[data-scrolling], .case-table-scroll[data-scrolling] { scrollbar-color: color-mix(in srgb, var(--color-muted) 35%, transparent) transparent; }
.pin-excerpt[data-more-below] { mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent); }
@supports selector(::-webkit-scrollbar) {
  .pin-excerpt, .pin-excerpt[data-scrolling], .case-table-scroll, .case-table-scroll[data-scrolling] { scrollbar-width: auto; scrollbar-color: auto; }
  .pin-excerpt::-webkit-scrollbar, .case-table-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
  .pin-excerpt::-webkit-scrollbar-track, .pin-excerpt::-webkit-scrollbar-thumb, .case-table-scroll::-webkit-scrollbar-track, .case-table-scroll::-webkit-scrollbar-thumb, .case-table-scroll::-webkit-scrollbar-corner { background: transparent; }
  .pin-excerpt[data-scrolling]::-webkit-scrollbar-thumb, .case-table-scroll[data-scrolling]::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--color-muted) 35%, transparent); border-radius: 6px; }
}
.pin-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--color-muted); font-size: 11px; }
.pin-meta time { font-size: inherit; }
.pin-title { margin: 4px 0 10px; font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
.pin-title a { color: inherit; text-decoration: none; }
.pin-title a:hover { text-decoration: underline; }
.pin-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 6px; }
.pin-badges > * + *::before { content: "\2022"; margin-right: 6px; }
.pin-criticality { text-transform: capitalize; }
.pin-tags { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; font-size: 11px; }
.pin-tags span { max-width: 100%; padding: 3px 8px; border-radius: 12px; background: light-dark(#eaf0e9, #3b4a3d); overflow-wrap: anywhere; }
.pin-excerpt { color: var(--color-muted); font-size: 12px; line-height: 1.5; margin: 10px 0; white-space: pre-line; overflow-wrap: anywhere; }
.pin-links { position: absolute; inset: auto 66px 10px 12px; display: flex; flex-wrap: wrap; gap: 6px; font-size: 11px; }
.pin-action { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-card-border); border-radius: 6px; padding: 5px 9px; background: var(--color-surface); color: inherit; font: inherit; line-height: 1.4; text-decoration: none; white-space: nowrap; }
.pin-action:hover { background: var(--color-disabled); text-decoration: none; }
.pin-picker, .case-suggestions { border: 1px solid var(--color-card-border); border-radius: 14px; color: var(--color-text); background: light-dark(#fdfefc, #2a312c); box-shadow: 0 16px 60px rgb(20 35 25 / 18%); }
.pin-picker { width: min(440px, calc(100vw - 32px)); max-height: min(580px, 80dvh); padding: 18px; cursor: auto; touch-action: pan-y; }
.pin-picker:popover-open { display: flex; flex-direction: column; height: min(580px, 80dvh); }
.pin-picker [data-pin-search] { width: 100%; margin-top: 14px; padding: 10px 12px; border: 1px solid var(--color-card-border); border-radius: 6px; background: var(--color-surface); color: inherit; font: inherit; font-size: 13px; }
.pin-picker [data-pin-options] { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.pin-picker [data-pin-options] > p { margin-top: 14px; }
.pin-picker::backdrop { background: rgb(20 35 25 / 15%); }
.pin-picker-heading, .pin-pages { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pin-picker-heading h3 { margin: 0; font-size: 16px; }
.pin-picker-heading button { background: transparent; color: inherit; border: 0; font-size: 22px; padding: 0 6px; }
.pin-choices { margin: 14px 0; overflow-y: auto; min-height: 0; flex: 1; }
.pin-choices :is(button, a) { display: block; width: 100%; text-align: left; padding: 10px; background: transparent; color: inherit; border: 0; border-bottom: 1px solid var(--color-card-border); border-radius: 0; text-decoration: none; }
.pin-choices :is(button, a):is(:hover, :focus-visible) { background: light-dark(#eaf0e9, #3b4a3d); }
.pin-choices strong { display: block; margin-top: 3px; font-size: 13px; overflow-wrap: anywhere; }
.pin-pages { font-size: 12px; }
.pin-pages button { padding: 5px 10px; font-size: inherit; }
[data-bento-resize] { cursor: nwse-resize; touch-action: none; }
[data-bento-target] { border: 2px dashed #729078; border-radius: 14px; background: rgb(114 144 120 / 8%); pointer-events: none; }
[data-bento-projecting]:not([data-dragging]) { opacity: .45; }
[data-bento-resizing], [data-dragging] { opacity: .7; }
body:has([data-drag-active], [data-resize-active]) { user-select: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip-link {
  position: fixed;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 10;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-button);
  background: var(--color-surface);
  transform: translateY(calc(-100% - var(--space-4)));
}

.skip-link:focus { transform: translateY(0); }

@media (max-width: 40rem) {
  [data-bento-item], [data-bento-resize] { touch-action: pan-y; cursor: auto; }
  #workspace-bento:not([data-layout-ready]) [data-bento-grid] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #workspace-bento:not([data-layout-ready]) [data-bento-item] { grid-column: 1 / span 2 !important; grid-row: auto / span var(--card-height) !important; }
  #workspace-bento:not([data-layout-ready]) .tool-controls { grid-column: 1 !important; grid-row: auto !important; }
  .workspace-heading { padding: 28px 16px 24px; }
  .workspace-sheet { width: calc(100% - 24px); margin-bottom: 12px; min-height: calc(100dvh - 140px); }
  .workspace-content { padding: 24px 20px; }
  .workspace-empty { margin: 36px 0 36px 24px; padding: 24px; }
  .welcome-arrow { width: 54px; height: 65px; left: -29px; top: -34px; }
  .workspace-empty h2 { font-size: 22px; }
  .workspace-empty p { font-size: 14px; }
}

@container (max-height: 135px) {
  .tile-empty, .tile-preview { display: none; }
}

@container (max-width: 210px) {
  .tile-heading h2 { font-size: 12px; }
  .case-metrics[data-view="grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-metrics[data-view="grid"] > div:nth-child(n) { border: 0; }
  .case-metrics[data-view="grid"] > div:nth-child(odd) { border-right: 1px solid var(--color-card-border); }
  .case-metrics[data-view="grid"] > div:nth-child(n+3) { border-top: 1px solid var(--color-card-border); }
}
.case-metrics[data-view="grid"] > div:last-child { border-right: 0; }

#flash-region { position: fixed; bottom: calc(1.5rem + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 2rem); z-index: 100; pointer-events: none; }
.flash-pill { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem .75rem 1.25rem; border-radius: 999px; background: var(--color-text); color: var(--color-surface-raised); box-shadow: 0 .5rem 2rem rgb(0 0 0 / 20%); pointer-events: auto; }
.flash-pill > span { min-width: 0; overflow-wrap: anywhere; }
.flash-pill--error { background: var(--color-danger); color: light-dark(#fff, #1c2024); }
.flash-dismiss { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.75rem; height: 1.75rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; font-size: 20px; }
.flash-refresh { flex-shrink: 0; padding: 4px; border: 0; background: transparent; color: inherit; text-decoration: underline; }
.flash-dismiss:hover, .flash-refresh:hover { background: rgb(128 128 128 / 25%); }
.flash-dismiss:focus-visible, .flash-refresh:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Three-sheet editor for cases with saved utilities. */
.create-case > .workspace-sheet.editor-split { background: transparent; box-shadow: none; }
.create-case > .workspace-sheet.editor-split::before,
.create-case > .workspace-sheet.editor-split::after { content: none; }
.editor-split > .content-header { position: sticky; top: 0; z-index: 4; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: var(--color-surface-raised); }
.create-case[data-mode="research"] > .editor-split > .content-header { border-radius: var(--radius-sm); }
.editor-split .case-composer { padding: 0; }
.editor-split .case-composer > .composer-section { margin: 0; padding: 32px; background: var(--color-surface-raised); }
.editor-split .case-composer > .composer-section:is([aria-labelledby="inquiry-heading"], :last-child) { border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.editor-split .case-composer > .composer-section.outcome-section { border-radius: var(--radius-sm); }
.editor-split .case-composer > .composer-section:has(.triage-intelligence) { padding-bottom: 0; }
/* The artifact starts its own box, with the same gap as the utilities bar. */
.editor-split .case-composer > .composer-section.artifact-section { margin-top: 12px; border-top-left-radius: var(--radius-sm); border-top-right-radius: var(--radius-sm); }
.editor-split .annotation-rail { left: calc(100% + 20px); top: 32px; }
@media (max-width: 40rem) {
  .editor-split .case-composer > .composer-section { padding: 20px 14px; }
}

/* Editor utilities: shared shell, headings, and catalog. */
.case-utilities { margin: 12px 0; background: var(--color-surface-raised); box-shadow: 0 1px 6px rgb(0 0 0 / 10%); }
.editor-split .case-utilities { border-radius: var(--radius-sm); }
.utility-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 20px 8px 32px; }
.utility-bar h2 { font-size: 17px; margin: 0; }
.utility-tablist { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.create-case .utility-tablist > button { border: 0; border-radius: 0; background: transparent; padding: 12px; position: relative; }
.create-case .utility-tablist > button:hover:not(:disabled) { background: light-dark(#f7f5ed, #353125); }
.create-case .utility-tablist > button.is-active { color: var(--color-accent); background: light-dark(#f7f5ed, #353125); }
.utility-add svg { display: block; width: 15px; height: 15px; }
/* The remove button floats in the panel's top padding, so it does not push the utility content down. */
.utility-remove-form { position: absolute; top: 3px; right: 16px; }
.create-case .utility-remove-form button { padding: 2px 6px; border: 0; background: transparent; color: var(--color-muted); font-size: 12px; }
.create-case .utility-remove-form button:hover:not(:disabled) { border: 0; background: transparent; color: var(--color-danger); }
.utility-new { display: none; margin-left: 6px; font-size: 11px; color: var(--color-accent); }
.utility-new::after { content: 'New'; }
[data-utility-new] > .utility-new { display: inline-block; animation: utility-new 3s ease-out forwards; }
.create-case .utility-tablist > [data-utility-new] { animation: utility-arrive 3s ease-out; }
@keyframes utility-new {
  0% { opacity: 0; display: inline-block; }
  10%, 85% { opacity: 1; }
  100% { opacity: 0; display: none; }
}
@keyframes utility-arrive {
  0% { opacity: 0; transform: translateX(24px); background: var(--color-brand-soft); box-shadow: inset 0 0 0 1px var(--color-accent); }
  12% { opacity: 1; transform: none; background: var(--color-brand-soft); box-shadow: inset 0 0 0 1px var(--color-accent); }
  70% { background: var(--color-brand-soft); box-shadow: inset 0 0 0 1px var(--color-accent); }
}
@media (prefers-reduced-motion: reduce) {
  [data-utility-new] > .utility-new { animation: utility-new-static 3s step-end forwards; }
  .create-case .utility-tablist > [data-utility-new] { animation: utility-arrive-static 3s step-end; }
}
@keyframes utility-new-static {
  from { display: inline-block; }
  to { display: none; }
}
@keyframes utility-arrive-static {
  from { background: var(--color-brand-soft); box-shadow: inset 0 0 0 1px var(--color-accent); }
}
.utility-picker-header { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.utility-note { color: var(--color-muted); font-size: 12px; line-height: 1.5; }
.utility-panel { position: relative; border-top: 1px solid var(--color-border); padding: 24px; }
.utility-placeholder { margin: 0; color: var(--color-muted); font-size: 14px; }
[data-utility-id="visualize"] .visualize { margin: 0; }
[data-utility-id="visualize"] figcaption { margin-bottom: var(--space-4); font-weight: var(--font-weight-medium); text-wrap: balance; }
[data-utility-id="visualize"] .visualize-scroll { overflow-x: auto; }
[data-utility-id="visualize"] .visualize-svg { display: block; width: 100%; height: auto; }
[data-utility-id="visualize"] .visualize-svg text { font-size: 12px; fill: var(--color-text); }
[data-utility-id="visualize"] .visualize-svg .is-muted { font-size: 11px; fill: var(--color-muted); }
[data-utility-id="visualize"] .visualize-svg .is-accent { fill: var(--color-accent); }
[data-utility-id="visualize"] .visualize-svg .is-halo { paint-order: stroke; stroke: var(--color-surface-raised); stroke-width: 3px; stroke-linejoin: round; }
[data-utility-id="visualize"] .visualize-node rect { fill: var(--color-surface-raised); stroke: var(--color-border); }
[data-utility-id="visualize"] .visualize-node.is-focus rect { stroke: var(--color-accent); stroke-width: 1.5; }
[data-utility-id="visualize"] .visualize-node.is-dim rect { stroke-dasharray: 3 3; }
[data-utility-id="visualize"] .visualize-node.is-dim text { fill: var(--color-muted); }
[data-utility-id="visualize"] .visualize-edge { fill: none; stroke: var(--color-muted); marker-end: url(#visualize-arrow); }
[data-utility-id="visualize"] .visualize-edge.is-focus { stroke: var(--color-accent); stroke-width: 1.5; marker-end: url(#visualize-arrow-focus); }
[data-utility-id="visualize"] .visualize-edge.is-dashed { stroke-dasharray: 3 3; }
[data-utility-id="visualize"] #visualize-arrow path { fill: var(--color-muted); }
[data-utility-id="visualize"] #visualize-arrow-focus path { fill: var(--color-accent); }
[data-utility-id="visualize"] .visualize-zone { fill: none; stroke: var(--color-border); stroke-dasharray: 4 4; }
[data-utility-id="visualize"] .visualize-line.is-lifeline { stroke: var(--color-border); stroke-dasharray: 2 3; }
[data-utility-id="visualize"] .visualize-line.is-grid { stroke: var(--color-card-border); }
[data-utility-id="visualize"] .visualize-line.is-rule { stroke: var(--color-muted); stroke-dasharray: 3 3; }
[data-utility-id="visualize"] .visualize-bar.is-plan { fill: var(--color-border); }
[data-utility-id="visualize"] .visualize-bar.is-actual { fill: var(--color-accent); }
[data-utility-id="visualize"] .visualize-bar.is-forecast { fill: none; stroke: var(--color-accent); stroke-dasharray: 2 2; }
[data-utility-id="visualize"] .visualize-bar.is-band { fill: var(--color-brand-soft); }
[data-utility-id="visualize"] .visualize-warning { fill: var(--color-danger); }
[data-utility-id="visualize"] .visualize-table { border-collapse: collapse; min-width: 100%; font-size: var(--font-size-base); }
[data-utility-id="visualize"] .visualize-table th, [data-utility-id="visualize"] .visualize-table td { padding: 6px 16px 6px 0; border-bottom: 1px solid var(--color-card-border); text-align: left; font-weight: 400; white-space: nowrap; }
[data-utility-id="visualize"] .visualize-table thead th { color: var(--color-muted); border-bottom-color: var(--color-border); }
[data-utility-id="visualize"] .visualize-table .is-muted { color: var(--color-muted); }
[data-utility-id="visualize"] .visualize-table .is-changed::before, [data-utility-id="visualize"] .visualize-table .is-problem::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; vertical-align: 1px; background: var(--color-accent); }
[data-utility-id="visualize"] .visualize-table .is-problem::before { background: var(--color-danger); }
.utility-count { margin-left: 6px; padding: 1px 6px; border-radius: 4px; background: var(--color-disabled); color: var(--color-muted); font-size: 11px; }
.utility-panel-similar { padding: 8px 20px 12px; }
[data-utility-id="similar_cases"] .similar-cases { margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.4; }
[data-utility-id="similar_cases"] .similar-cases > li + li { border-top: 1px solid var(--color-card-border); }
[data-utility-id="similar_cases"] summary { display: grid; grid-template-columns: 15px auto minmax(0, 1fr) auto auto auto; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 4px; cursor: pointer; list-style: none; }
[data-utility-id="similar_cases"] summary::-webkit-details-marker { display: none; }
[data-utility-id="similar_cases"] summary > svg:first-child { width: 15px; height: 15px; color: var(--color-muted); }
[data-utility-id="similar_cases"] details[open] > summary > svg:first-child { transform: rotate(90deg); }
[data-utility-id="similar_cases"] summary:hover { background: light-dark(#f7f5ed, #353125); }
[data-utility-id="similar_cases"] .similar-id, [data-utility-id="similar_cases"] time { color: var(--color-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
[data-utility-id="similar_cases"] .similar-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-utility-id="similar_cases"] .similar-status { padding: 0 6px; border-radius: 4px; background: var(--color-disabled); color: var(--color-muted); font-size: 11px; }
[data-utility-id="similar_cases"] .similar-count { min-width: 80px; color: var(--color-muted); font-size: 12px; text-align: right; }
[data-utility-id="similar_cases"] details { counter-reset: similar-picked; }
[data-utility-id="similar_cases"] .similar-statements { display: grid; gap: 2px; margin: 2px 0 0; padding: 0 6px 0 29px; list-style: none; }
[data-utility-id="similar_cases"] .similar-statements > li:not(:has(label)) { list-style: disc; }
[data-utility-id="similar_cases"] .similar-statements label { display: flex; align-items: baseline; gap: 8px; padding: 2px 0; cursor: pointer; }
[data-utility-id="similar_cases"] .similar-statements input { flex: none; margin: 0; transform: translateY(2px); }
[data-utility-id="similar_cases"] .similar-statements input:checked:enabled { counter-increment: similar-picked; }
[data-utility-id="similar_cases"] .similar-statements label:has(:disabled) { color: var(--color-muted); cursor: default; }
[data-utility-id="similar_cases"] .similar-actions { display: flex; align-items: center; gap: 6px; padding: 6px 6px 8px 29px; font-size: 12px; }
.create-case [data-utility-id="similar_cases"] .similar-add { padding: 3px 10px; font-size: 12px; }
.create-case [data-utility-id="similar_cases"] .similar-icon { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--color-muted); cursor: pointer; }
.create-case [data-utility-id="similar_cases"] .similar-icon:hover { background: var(--color-disabled); color: var(--color-text); }
[data-utility-id="similar_cases"] .similar-icon svg { width: 15px; height: 15px; }
[data-utility-id="similar_cases"] .similar-peek { inset: auto; position-area: bottom span-right; position-try-fallbacks: flip-block; width: min(640px, calc(100vw - 32px)); max-height: min(480px, 70vh); margin: 6px 0; padding: 10px 12px; overflow-y: auto; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface-raised); color: var(--color-text); box-shadow: 0 6px 20px rgb(0 0 0 / 10%); font-size: 12px; line-height: 1.45; }
[data-utility-id="similar_cases"] .similar-peek-body > * { margin: 0; }
[data-utility-id="similar_cases"] .similar-peek-empty { color: var(--color-muted); }
[data-utility-id="similar_cases"] .similar-peek h3 { font-size: 14px; }
[data-utility-id="similar_cases"] .similar-peek-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
[data-utility-id="similar_cases"] .similar-peek-chips span { padding: 0 6px; border-radius: 4px; background: var(--color-disabled); color: var(--color-muted); font-size: 11px; }
[data-utility-id="similar_cases"] .similar-peek h4 { margin-top: 10px; color: var(--color-muted); font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
[data-utility-id="similar_cases"] .similar-peek-inquiry { max-height: 9.5lh; overflow-y: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
[data-utility-id="similar_cases"] .similar-peek-notes { display: grid; gap: 4px; padding-left: 16px; }
[data-utility-id="similar_cases"] .similar-peek-notes strong { font-weight: 600; margin-right: 4px; }
[data-utility-id="similar_cases"] .similar-picked::before { content: counter(similar-picked); }
[data-utility-id="similar_cases"] details:not(:has(.similar-statements input:checked:enabled)) .similar-add { opacity: .5; cursor: default; }
.utility-picker { width: min(760px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); margin: auto; padding: 24px; border: 1px solid var(--color-border); border-radius: 8px; color: var(--color-text); background: var(--color-surface-raised); }
.utility-picker::backdrop { background: rgb(0 0 0 / 35%); }
.utility-picker-header h2 { margin: 0 0 20px; font-size: 20px; }
.create-case .utility-picker-header button { padding: 0 8px; border: 0; font-size: 24px; }
.utility-picker > .utility-note { margin: 12px 0; }
#utility-search { width: 100%; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 4px; background: var(--color-surface); color: var(--color-text); }
.utility-catalog { list-style: none; padding: 0; margin: 16px 0; }
.utility-catalog li { display: grid; grid-template-columns: 92px 1fr auto; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--color-border); }
.utility-catalog h3 { margin: 0 0 4px; font-size: 13px; font-weight: 500; }
.utility-catalog p { margin: 0; font-size: 12px; color: var(--color-muted); line-height: 1.5; }
.utility-availability { font-size: 11px; color: var(--color-muted); white-space: nowrap; }
.utility-thumbnail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; height: 52px; padding: 8px; border: 1px solid var(--color-border); border-radius: 4px; }
.utility-thumbnail span { background: var(--color-disabled); border-radius: 1px; }
.utility-thumbnail span:nth-child(5) { background: var(--color-accent); opacity: .5; }
.utility-thumbnail-1, .utility-thumbnail-5, .utility-thumbnail-8 { grid-template-columns: 8px 1fr 12px; }
/* File Browser: a list beside a preview. */
.utility-thumbnail-3 { grid-template-columns: 1fr 2fr; grid-template-rows: repeat(3, 1fr); }
.utility-thumbnail-3 span:nth-child(2) { grid-column: 2; grid-row: 1 / 4; }
.utility-thumbnail-3 span:nth-child(5) { grid-column: 1; grid-row: 2; }
.utility-thumbnail-3 span:nth-child(n+6) { display: none; }
.utility-thumbnail-4 { grid-template-columns: repeat(3, 1fr); align-items: center; }
.utility-thumbnail-4 span { height: 4px; }
.utility-thumbnail-10 { grid-template-columns: 1fr 1fr; }
.utility-thumbnail-11 { grid-template-columns: 1fr; }
.utility-thumbnail-11 span:nth-child(n+4), .utility-thumbnail-10 span:last-child { display: none; }
.utility-thumbnail-11 span:nth-child(2) { width: 75%; justify-self: end; background: var(--color-brand-soft); }
.utility-empty { color: var(--color-muted); font-size: 13px; }
.utility-catalog:has(li:not([style*="display: none"])) + .utility-empty { display: none; }
@media (max-width: 40rem) {
  .utility-bar { padding: 4px 8px 4px 14px; gap: 8px; }
  .utility-tablist { gap: 4px; }
  .create-case .utility-tablist > button { padding: 10px 8px; }
  .utility-tablist > [data-utility-toggle] { min-width: 0; text-align: left; }
  .utility-picker { padding: 16px; }
  .utility-catalog li { grid-template-columns: 64px 1fr; gap: 8px 12px; }
  .utility-availability { grid-column: 2; }
  .utility-thumbnail { height: 44px; }
}

/* Utility: Risk Analysis. Scope by code ID, independent of the display name. */
:where([data-utility="risk_analysis"]) {
  &.risk-utility-panel h4 { margin: 0; font-size: 14px; font-weight: 500; }
  .risk-introduction { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; align-items: start; margin-bottom: 24px; }
  .risk-size { border: 0; margin: 0; padding: 0; min-width: 0; }
  .risk-size legend { padding: 0; margin-bottom: 8px; font-size: 12px; }
  .risk-size-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .risk-size-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 4px; border: 1px solid var(--color-border); border-radius: 4px; font-size: 12px; cursor: pointer; }
  .risk-size-tile input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
  .risk-size-tile:has(input:checked) { background: light-dark(#f7f5ed, #353125); border-color: var(--color-primary-button); }
  .risk-size-tile:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
  .risk-size-tile:has(input:disabled) { opacity: .6; cursor: default; }
  .risk-size-grid { display: grid; width: 32px; height: 32px; gap: 2px; color: var(--color-muted); }
  .risk-size-grid span { background: currentColor; }
  .risk-size-tile:has(input:checked) .risk-size-grid { color: var(--color-primary-button); }
  .create-case & .risk-disclosure { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; padding: 16px 8px; border: 0; border-bottom: 1px solid var(--color-border); border-radius: 0; text-align: left; color: var(--color-text); background: transparent; font-size: 14px; }
  .risk-disclosure-summary { margin-left: auto; font-size: 12px; font-weight: 400; }
  .create-case & .risk-disclosure:hover:not(:disabled) { background: transparent; border-color: var(--color-border); }
  .risk-disclosure-icon { flex: 0 0 15px; width: 15px; height: 15px; color: var(--color-muted); }
  .risk-content { border: 0; padding: 0; margin: 0; min-width: 0; }
  .risk-step { padding: 20px 8px 20px 35px; border-bottom: 1px solid var(--color-border); }
  .risk-step h4 { margin-bottom: 12px; }
  .risk-field { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; font-size: 12px; }
  &.risk-utility-panel textarea, .risk-field input, .risk-field select { box-sizing: border-box; width: 100%; min-width: 0; padding: 9px; border: 1px solid var(--color-border); border-radius: 4px; background: var(--color-surface-raised); color: var(--color-text); font: inherit; font-size: 12px; line-height: 1.5; }
  &.risk-utility-panel textarea { field-sizing: fixed; resize: vertical; min-height: 90px; overflow: auto; scrollbar-width: thin; scrollbar-color: transparent transparent; }
  &.risk-utility-panel textarea.is-scrolling { scrollbar-color: var(--color-muted) transparent; }
  .create-case &.risk-utility-panel textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
  &.risk-utility-panel summary { cursor: pointer; font-size: 12px; color: var(--color-muted); }
  .risk-warning { border-left: 3px solid var(--color-accent); padding: 10px 12px; background: var(--color-brand-soft); font-size: 12px; line-height: 1.6; }
  .risk-result { display: flex; flex-direction: column; margin-top: 24px; padding: 16px; background: var(--color-disabled); border: 1px solid var(--color-border); border-radius: 4px; }
  .risk-insert { display: inline-flex; align-items: center; gap: 8px; align-self: flex-end; }
  .risk-insert svg { width: 15px; height: 15px; flex: 0 0 15px; }
  .risk-result [role=status] { overflow-wrap: anywhere; font-size: 13px; line-height: 1.7; }
  .risk-statements { margin: 8px 0; padding-left: 18px; }
  .risk-assessment { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
  .utility-note + .risk-assessment { margin-top: 16px; }
  .risk-net-assessment { margin-top: 24px; }
  .risk-entry-list { --color-border: light-dark(#d8d1c5, #514b40); --color-focus: light-dark(#897553, #c0aa84); display: grid; margin: 16px 0; counter-reset: entry; border: 1px solid var(--color-border); border-radius: 4px; overflow: hidden; }
  .risk-entry-list:empty { display: none; }
  .risk-entry { position: relative; counter-increment: entry; padding: 8px 44px; }
  .risk-entry + .risk-entry { border-top: 1px solid var(--color-border); }
  .risk-entry::before { content: counter(entry) "."; position: absolute; left: 16px; top: 16px; font-size: 13px; }
  .create-case & .risk-entry-remove { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; padding: 6px; border: 0; background: transparent; color: var(--color-muted); }
  .risk-entry-remove svg { width: 15px; height: 15px; }
  .risk-entry .risk-field { margin: 0; }
  .risk-entry textarea { field-sizing: content; min-height: 36px; border: 0; background: transparent; resize: none; }
  .risk-check { display: flex; align-items: baseline; gap: 8px; margin: 12px 0; font-size: 12px; line-height: 1.6; }
  .risk-check input { accent-color: var(--color-accent); }
  .create-case & .risk-add { white-space: nowrap; font-size: 12px; }
  #risk-controls-list:empty + .risk-add { margin-top: 16px; }
  .risk-matrix { border: 0; padding: 0; margin: 0; min-width: 0; }
  .risk-matrix legend { margin-bottom: 16px; font-size: 12px; }
  .risk-likelihood-title, .risk-impact-title { color: var(--color-muted); font-size: 13px; font-weight: 500; }
  .risk-likelihood-title { grid-row: 1 / span var(--risk-size); writing-mode: vertical-rl; transform: rotate(180deg); justify-self: center; }
  .risk-likelihood-direction { grid-row: 1 / span var(--risk-size); align-self: stretch; justify-self: center; border-left: 1px solid currentColor; }
  .risk-likelihood-direction, .risk-impact-direction { position: relative; color: var(--color-muted); opacity: .6; }
  .risk-likelihood-direction::before, .risk-impact-direction::after { content: ''; position: absolute; width: 5px; height: 5px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; }
  .risk-likelihood-direction::before { top: 1px; left: -3px; transform: rotate(-45deg); }
  .risk-axis-spacer { grid-column: 1 / 4; }
  .risk-impact-direction { grid-column: 4 / -1; border-top: 1px solid currentColor; margin: 5px 0; }
  .risk-impact-direction::after { right: 1px; top: -3px; transform: rotate(45deg); }
  .risk-impact-title { grid-column: 4 / -1; margin-bottom: 12px; }
  .risk-score-grid { display: grid; gap: 4px; align-items: center; text-align: center; color: var(--color-muted); font-size: 11px; }
  .risk-axis { text-align: center; font-size: 12px; }
  .risk-score-cell { position: relative; height: 40px; cursor: pointer; }
  .risk-score-cell input { appearance: none; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border: 1px solid hsl(var(--risk-hue) 35% 65%); border-radius: 2px; background: hsl(var(--risk-hue) 65% 85%); cursor: pointer; }
  .risk-score-cell input:checked { border: 3px solid #263b39; box-shadow: inset 0 0 0 2px rgb(255 255 255 / 80%); }
  .risk-score-cell input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
  .risk-score-cell span { position: relative; line-height: 40px; pointer-events: none; color: #263b39; font-size: 14px; }
  @media (max-width: 40rem) {
    .risk-introduction { grid-template-columns: 1fr; gap: 16px; }
    .create-case & .risk-disclosure { flex-wrap: wrap; gap: 8px; padding: 14px 4px; }
    .risk-disclosure-summary { width: calc(100% - 23px); margin-left: 23px; }
    .risk-step { padding: 16px 4px; }
    .risk-assessment { grid-template-columns: 1fr; gap: 20px; }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}
/* Outcome statements and final form */
.create-case { --color-justified: light-dark(#127a6a, #5cc8b4); --color-annotation: light-dark(#986d22, #e6c078); }
.outcome-heading { justify-content: flex-start; align-items: center; }
/* The justified count follows the heading; the filter sits at the right edge. */
.outcome-heading .statements-meta { flex: 1; margin-left: 0; }
.outcome-heading .statement-filter-button { margin-left: auto; }
.outcome-summary { display: inline-flex; align-items: center; gap: 4px; color: var(--color-muted); font-size: 12px; }
.outcome-summary[hidden] { display: none; }
.outcome-statement-source:not(.is-modified) svg { color: var(--color-justified); }
.outcome-statements { list-style: none; margin: 0; padding: 8px 0 0; }
.outcome-statement { display: flex; align-items: center; gap: 4px; margin: 0 -8px; padding: 3px 8px; border-radius: 6px; font-size: 14px; line-height: 1.7; }
.outcome-statement::before { content: '•'; flex: none; width: 14px; color: var(--color-muted); }
.outcome-statement:hover, .outcome-statement.is-linked, .outcome-statement:focus-within { background: light-dark(#f3f3f1, #333); }
.outcome-statement.is-dragging { opacity: .5; }
.outcome-statement-text { flex: 1; min-width: 0; overflow-wrap: anywhere; cursor: text; }
.create-case .outcome-statement-input { flex: 1; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; outline: none; background: transparent; color: var(--color-text); font: inherit; line-height: inherit; resize: none; field-sizing: content; overflow-wrap: anywhere; }
.create-case .outcome-statement > button { display: inline-flex; align-items: center; gap: 3px; flex: none; padding: 4px; border-color: transparent; background: transparent; color: var(--color-muted); }
.create-case .outcome-statement > button:hover:not(:disabled) { background: transparent; border-color: transparent; color: var(--color-text); }
.outcome-note-tools > hold-confirm { display: inline-flex; }
.create-case .outcome-note-tools > hold-confirm > button[data-holding] { --hold-background: transparent; --hold-fill: color-mix(in srgb, var(--color-danger) 25%, transparent); color: var(--color-danger); }
.outcome-statement:not(:hover, :focus-within) > :is(.outcome-statement-delete, .outcome-statement-move) { opacity: .45; }
.create-case .outcome-statement > .outcome-statement-move { cursor: grab; }
.outcome-statement-source { font-size: 11px; }
.outcome-statement-editor { display: contents; }
.outcome-statement:has(.outcome-statement-input) > .outcome-statement-text { display: none; }
.outcome-statement svg, .outcome-add-submit svg { display: block; width: 15px; height: 15px; }
.outcome-add { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; padding: 6px 10px; border: 1px solid var(--color-border); border-radius: 6px; color: var(--color-muted); }
.outcome-add:focus-within { border-color: var(--color-accent); }
.outcome-add input { flex: 1; min-width: 0; border: 0; padding: 4px 0; background: transparent; color: var(--color-text); font: inherit; font-size: 14px; }
.outcome-add input:focus { outline: none; }
.create-case .outcome-add-submit { display: inline-flex; align-items: center; justify-content: center; flex: none; margin-left: auto; padding: 4px; border: 0; border-radius: 4px; background: transparent; }
.create-case .outcome-add-submit:hover:not(:disabled) { border: 0; background: light-dark(#f3f3f1, #333); }
.outcome-error { margin: 8px 0 0; color: var(--color-danger); font-size: 12px; }
/* Artifact: the result document. Statement blocks are not editable; the x removes one. */
.artifact-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; color: var(--color-muted); font-size: 12px; }
.create-case .artifact-actions > button { display: inline-flex; align-items: center; gap: 5px; padding: 4px 6px; border: 0; background: transparent; color: var(--color-muted); font-size: 12px; }
.create-case .artifact-actions > button:hover:not(:disabled) { color: var(--color-text); }
/* The Templates button keeps its border on hover, so its size stays the same. */
.create-case .artifact-actions > .artifact-templates { padding: 4px 8px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface-raised); color: var(--color-text); }
/* The template menu is the shared context menu; items stack a hint below the label. */
.artifact-template-menu { min-width: 220px; }
.card-settings-menu.artifact-template-menu [role="menuitem"] { flex-direction: column; align-items: flex-start; gap: 0; }
.artifact-template-menu small { color: var(--color-muted); font-size: 12px; }
.artifact-actions svg { display: block; flex: none; width: 15px; height: 15px; }
.job-status.is-writing { background: linear-gradient(100deg, var(--color-muted) 35%, var(--color-surface-raised) 50%, var(--color-muted) 65%); background-size: 250% 100%; background-clip: text; color: transparent; animation: operation-shimmer 1.8s linear infinite; }
.job-status.is-failed { color: var(--color-danger); }
/* The text starts at the heading edge. Line numbers hang in the section padding; a narrow screen keeps an indent for them. */
.artifact-card { padding: 14px 18px 14px 0; }
@media (max-width: 40rem) { .artifact-card { padding-left: 18px; } }
.artifact-editor { min-height: 160px; font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; outline: none; }
.artifact-editor[data-placeholder]:empty:not([data-working])::before { content: attr(data-placeholder); color: var(--color-muted); pointer-events: none; }
.artifact-editor[data-working] { opacity: .5; cursor: progress; }
.artifact-editor h1 { margin: 12px 0 8px; font-size: 22px; }
.artifact-editor h2 { margin: 20px 0 6px; font-size: 17px; }
.artifact-editor h3 { margin: 16px 0 4px; font-size: 15px; }
.artifact-editor p, .artifact-editor ul, .artifact-editor ol { margin: 0 0 10px; }
/* Line numbers: each block and each list item is one line. The number sits in the 32px left of the text,
   centered in the height of the first line; its margins add up to zero, so the text does not move.
   --line-box registers as a length, so 1lh computes on the line itself, not on the smaller number. */
@property --line-box { syntax: '<length>'; inherits: true; initial-value: 0px; }
.artifact-editor { counter-reset: artifact-line; }
.artifact-editor > :is(p, h1, h2, h3, div), .artifact-editor li { --line-box: 1lh; counter-increment: artifact-line; }
.artifact-editor li { --line-shift: 40px; }
.artifact-editor li li { --line-shift: 80px; }
.artifact-editor li li li { --line-shift: 120px; }
.artifact-editor > :is(p, h1, h2, h3, div)::before, .artifact-editor li::before { content: counter(artifact-line); display: inline-block; width: 24px; margin: 0 calc(8px + var(--line-shift, 0px)) 0 calc(-32px - var(--line-shift, 0px)); color: var(--color-muted); font: 400 12px/var(--line-box) ui-monospace, "SF Mono", Menlo, Consolas, monospace; vertical-align: top; font-variant-numeric: tabular-nums; text-align: right; user-select: none; }
.artifact-statement { display: inline; padding: 2px 6px; border-radius: 4px; background: light-dark(#f3eedc, #3d3826); box-decoration-break: clone; -webkit-box-decoration-break: clone; user-select: none; cursor: default; }
.artifact-statement-text { overflow-wrap: anywhere; }
.artifact-statement > :not(.artifact-statement-text) { margin-left: 4px; }
.create-case .artifact-statement .note-pill { padding: 0 6px; border: 0; background: var(--color-disabled); color: var(--color-muted); font-size: 11px; vertical-align: 1px; cursor: pointer; }
.create-case .artifact-statement-remove { display: inline-flex; padding: 0; border: 0; background: transparent; color: var(--color-muted); vertical-align: -2px; cursor: pointer; }
.create-case .artifact-statement-remove:hover { border: 0; background: transparent; color: var(--color-text); }
.artifact-statement-remove svg { display: block; width: 15px; height: 15px; }
.artifact-statement.is-removed .artifact-statement-text { color: var(--color-muted); font-style: italic; }
.artifact-statement.is-flash { animation: statement-flash 1.6s ease-out; }
.artifact-format { position: fixed; inset: auto; margin: 0; padding: 2px; overflow: visible; display: flex; align-items: center; gap: 2px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface-raised); box-shadow: 0 2px 8px rgb(0 0 0 / 15%); }
.artifact-format:not(:popover-open) { display: none; }
.create-case .artifact-format button { display: inline-flex; align-items: center; gap: 2px; margin: 0; padding: 5px 6px; border: 0; border-radius: 4px; background: transparent; color: var(--color-text); }
.create-case .artifact-format button:hover, .create-case .artifact-format button[aria-pressed="true"], .create-case .artifact-format button[aria-expanded="true"] { background: var(--color-disabled); }
.artifact-format svg { display: block; flex: none; width: 15px; height: 15px; }
.artifact-format-size { position: relative; }
.artifact-format-menu { position: absolute; top: calc(100% + 6px); left: -3px; display: grid; min-width: 160px; padding: 4px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface-raised); box-shadow: 0 6px 20px rgb(0 0 0 / 12%); }
.create-case .artifact-format-menu button { display: block; width: 100%; padding: 4px 8px; text-align: left; font-size: 13px; }
.create-case .artifact-format-menu .artifact-format-h1 { font-size: 20px; font-weight: 700; }
.create-case .artifact-format-menu .artifact-format-h2 { font-size: 17px; font-weight: 700; }
.create-case .artifact-format-menu .artifact-format-h3 { font-size: 15px; font-weight: 700; }
.artifact-format-divider { align-self: stretch; width: 1px; margin: 3px 2px; background: var(--color-border); }
.create-case .artifact-format [data-rephrase-open] { gap: 5px; padding-right: 8px; }
.create-case .artifact-format [data-rephrase-open][hidden] { display: none; }
.artifact-rephrase { position: fixed; inset: auto; margin: 0; padding: 8px 12px; overflow: visible; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-raised); color: var(--color-text); box-shadow: 0 4px 16px rgb(0 0 0 / 12%); font-size: 14px; outline: none; }
.artifact-rephrase:not(:popover-open) { display: none; }
.artifact-rephrase-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding-bottom: 8px; border-bottom: 1px solid var(--color-border); }
.artifact-rephrase-modes { display: inline-flex; padding: 2px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-disabled); }
.artifact-rephrase-modes label { padding: 4px 12px; border-radius: 6px; color: var(--color-muted); cursor: pointer; }
.artifact-rephrase-modes label:has(:checked) { background: var(--color-surface-raised); color: var(--color-text); box-shadow: 0 1px 2px rgb(0 0 0 / 12%); }
.artifact-rephrase-modes label:has(:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.artifact-rephrase-modes input { position: absolute; opacity: 0; pointer-events: none; }
.artifact-rephrase-state { color: var(--color-muted); text-align: right; }
.artifact-rephrase-result { max-height: 40vh; margin: 0; padding: 10px 0; border-bottom: 1px solid var(--color-border); overflow: auto; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.artifact-rephrase-result del { color: var(--color-danger); text-decoration-thickness: 1px; }
.artifact-rephrase-result ins { background: color-mix(in srgb, var(--color-justified) 16%, transparent); color: var(--color-justified); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.artifact-rephrase-block { padding: 0 6px; border: 1px solid var(--color-border); border-radius: 4px; color: var(--color-muted); font-size: var(--font-size-sm); }
.artifact-rephrase-actions { display: flex; align-items: center; gap: 4px; padding-top: 6px; color: var(--color-muted); }
.create-case .artifact-rephrase-actions button { margin: 0; padding: 4px 8px; border: 0; border-radius: var(--radius-button); background: transparent; color: var(--color-muted); }
.create-case .artifact-rephrase-actions button:hover { background: var(--color-disabled); color: var(--color-text); }
.create-case .artifact-rephrase-actions .artifact-rephrase-apply { background: var(--color-primary-button); color: #fff; }
.create-case .artifact-rephrase-actions .artifact-rephrase-apply:hover { background: var(--color-primary-button-hover); color: #fff; }
.artifact-rephrase-actions kbd { padding: 4px 8px; font: inherit; }
::highlight(artifact-rephrase) { background: color-mix(in srgb, var(--color-brand) 22%, transparent); }
/* The insert button of a statement row. The check badge overlaps the icon corner, so both states have the same size. */
.statement-insert { position: relative; }
.statement-insert svg { display: block; width: 15px; height: 15px; }
.statement-insert-used { position: absolute; right: -4px; bottom: -3px; display: flex; border-radius: 50%; background: var(--color-accent); color: var(--color-surface-raised); box-shadow: 0 0 0 1.5px var(--color-surface-raised); }
.statement-insert .statement-insert-used svg { width: 9px; height: 9px; }
.create-case .statement-insert.is-used { color: var(--color-accent); }
.statement-row:not(:hover, :focus-within) > .statement-insert.is-used { opacity: 1; }
[data-filter="used"] .statement-row:not([data-in-artifact]), [data-filter="unused"] .statement-row[data-in-artifact] { display: none; }
[data-filter="used"] .outcome-statements:not(:has([data-in-artifact]))::after { content: 'No statements in the artifact.'; }
[data-filter="unused"] .outcome-statements:has([data-statement]):not(:has([data-statement]:not([data-in-artifact])))::after { content: 'All statements are in the artifact.'; }
.outcome-note { font-size: 12px; color: var(--color-text); }
.create-case .outcome-note { border: 1.5px solid var(--color-accent); background: var(--color-surface-raised); box-shadow: 0 3px 10px rgb(0 60 90 / 14%); }
.create-case .outcome-note h3 { color: var(--color-accent); }
.create-case .outcome-note h3 { padding-right: 44px; }
.outcome-note-tools { position: absolute; top: 12px; right: 12px; display: flex; gap: 6px; }
.create-case .outcome-note-tools button { display: inline-flex; width: 15px; height: 15px; margin: 0; padding: 0; border: 0; background: transparent; color: var(--color-muted); }
.create-case .outcome-note-tools button:hover:not(:disabled) { border: 0; background: transparent; color: var(--color-text); }
.outcome-note-tools svg, .outcome-note-statement svg { display: block; flex: none; width: 15px; height: 15px; }
.outcome-note-statement { display: flex; gap: 4px; margin: 6px 0 0; color: var(--color-muted); font-size: 11px; line-height: 1.4; }
.outcome-note-statement span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.outcome-note-link-menu { inset: auto; position-area: bottom span-left; margin: 4px 0 0; padding: 4px; max-width: 320px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface-raised); box-shadow: 0 6px 20px rgb(0 0 0 / 10%); }
.create-case .outcome-note-link-menu button { position: relative; display: block; width: 100%; border: 0; padding: 6px 28px 6px 10px; background: transparent; text-align: left; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.create-case .outcome-note-link-menu button[aria-checked="true"]::after { content: '✓'; position: absolute; right: 10px; }
.outcome-note-text { margin: 6px 0 0; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.outcome-note-origin { margin: 6px 0 0; color: var(--color-muted); font-size: 11px; }
/* Text wraps, so only long statements need a vertical scrollbar. */
.create-case .outcome-statement-input { box-sizing: border-box; overflow-x: hidden; overflow-y: auto; white-space: pre-wrap; scrollbar-width: thin; }

/* Side panel: annotation notes or placeholder comments beside the split editor. */
.case-side-panel, .case-resizer { display: none; }
@media (min-width: 64.001rem) {
  .case-side-panel { display: block; position: absolute; top: 0; bottom: 0; left: calc(100% + 12px); width: var(--side-panel-width); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--color-surface-raised) 45%, transparent); }
  .case-resizer { display: block; position: absolute; top: 0; bottom: 0; left: -12px; z-index: 3; width: 12px; cursor: col-resize; touch-action: none; }
  .case-resizer[data-resize-edge="panel"] { left: auto; right: -12px; }
  .case-resizer::before { content: ""; position: absolute; top: 0; bottom: 0; left: 5px; width: 2px; border-radius: 1px; }
  .case-resizer:hover::before { background: var(--color-border); }
  .case-resizer:is([data-dragging], :focus-visible)::before { background: var(--color-accent); }
  .case-resizer:focus-visible { outline: none; }
  /* An action, so a button element; it looks like a usual link. */
  .create-case .layout-reset { position: absolute; top: 100%; right: 0; margin-top: 6px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--color-accent); font-size: 12px; cursor: pointer; }
  .create-case .layout-reset:hover:not(:disabled) { border: 0; background: none; color: var(--color-accent-hover); text-decoration: underline; }
  .case-layout:not([data-resized]) .layout-reset { display: none; }
  /* Container units let the registered --side-panel-width resolve against the page width. */
  body:has(.case-side-panel) { container-type: inline-size; }
  /* On narrow pages the default panel gives up width, so the sheet keeps the 480px minimum that the resize handles use. */
  .case-layout:has(.case-side-panel) { --side-panel-width: min(256px, (100cqw - 528px) / 2); width: min(1200px, calc(100% - 2 * var(--side-panel-width) - 48px)); }
  /* Saved sizes come from an inline script before first paint. CSS fits them to the page: the sheet shrinks before the panel. */
  .case-layout[data-resized]:has(.case-side-panel) {
    --case-sheet-width: max(480px, min(var(--sheet-size), 100cqw - 36px - max(200px, var(--panel-size))));
    --side-panel-width: max(200px, min(var(--panel-size), 100cqw - 36px - var(--case-sheet-width)));
    width: var(--case-sheet-width);
    margin-left: max(12px, min(50cqw + var(--layout-offset) - (var(--case-sheet-width) + 12px + var(--side-panel-width)) / 2, 100cqw - 24px - var(--case-sheet-width) - var(--side-panel-width)));
  }
  .editor-split > .content-header, .side-panel-header { min-height: 49px; }
  .side-panel-header { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; box-sizing: border-box; padding: 4px 8px; border-bottom: 1px solid color-mix(in srgb, var(--color-card-border) 60%, transparent); border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: color-mix(in srgb, var(--color-surface-raised) 45%, transparent); backdrop-filter: blur(12px); }
  .case-layout:is(:has(#side-panel-thread:checked), [data-panel-collapsed]) :is(.annotation-rail, .annotation-rail *, .annotation-arrows) { visibility: hidden; }
  /* A collapsed panel keeps a 40px strip with its expand button and a vertical title. Sheet and panel keep their saved sizes. */
  .case-layout.case-layout[data-panel-collapsed]:has(.case-side-panel) { --side-panel-width: 40px; }
  /* The rail would reflow to the strip width and stretch the inquiry, so it leaves the layout. */
  .case-layout[data-panel-collapsed] .annotation-rail, .case-layout[data-panel-collapsed] .case-resizer, .case-layout[data-panel-collapsed] .case-side-panel > :not(.side-panel-header, .layout-reset) { display: none; }
  .case-layout[data-panel-collapsed] .side-panel-header { flex-direction: column; gap: 10px; padding: 12px 0; border: 0; }
  .case-layout[data-panel-collapsed] .side-panel-switch { display: none; }
  .case-layout[data-panel-collapsed] .side-panel-title { display: block; writing-mode: vertical-rl; font-size: 14px; font-weight: 600; }
  .case-layout[data-panel-collapsed] .side-panel-header .column-collapse { order: -1; margin: 0; }
  .case-layout[data-panel-collapsed] .side-panel-header .column-collapse svg { transform: rotate(180deg); }
}
@media (min-width: 64.001rem) and (max-width: 80rem) {
  /* Use both page edges before first paint; explicit resize preferences still win. */
  .case-layout:has(.case-side-panel):not([data-resized]) {
    --side-panel-width: 256px;
    width: calc(100% - var(--side-panel-width) - 36px);
    margin-left: 12px;
  }
}
.side-panel-switch { display: flex; width: 100%; font-size: 12px; }
.side-panel-switch label { flex: 1; }
.side-panel-switch input + span { min-width: 0; padding: 3px 6px; }
.side-panel-count { margin-left: 2px; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.create-case .side-panel-header .column-collapse { display: inline-flex; flex: none; margin: 0 -4px 0 4px; padding: 4px; border: 0; background: transparent; color: var(--color-muted); }
.create-case .side-panel-header .column-collapse:hover:not(:disabled) { border: 0; background: transparent; color: var(--color-text); }
.side-panel-title, .side-panel-title > span { display: none; }
.case-side-panel:has(input[value="notes"]:checked) .side-panel-title > span:first-child, .case-side-panel:has(#side-panel-thread:checked) .side-panel-title > span:last-child { display: inline; }
/* The thread stays in view below the panel header; case-resizers.js fits its height to the window, so its log scrolls and the composer stays visible. */
.side-thread { display: none; position: sticky; top: 49px; flex-direction: column; height: var(--side-thread-height, calc(100dvh - 49px)); max-height: calc(100% - 49px); }
.case-layout:not([data-panel-collapsed]) .case-side-panel:has(input[value="thread"]:checked) .side-thread { display: flex; }
.side-thread .thread-log { padding: 12px 16px; }
.side-thread .thread-message { max-width: 100%; font-size: 12px; }
.side-thread .thread-message.is-user { max-width: 92%; }
.side-thread-error { margin: 0 16px 6px; }
.create-case .side-thread .thread-composer { flex: none; margin: 0 16px 12px; padding: 4px 4px 4px 8px; align-items: flex-end; background: var(--color-surface-raised); }
.create-case .side-thread .thread-composer textarea { padding: 4px 0; border: 0; background: transparent; font-size: 12px; }
.side-thread:has([data-agent-working]) .thread-composer button { pointer-events: none; opacity: .4; }

/* Editor parts: statements, note pills, references, and the AI thread (editor_parts.templ). */
.statement-row.is-flash { animation: statement-flash 1.6s ease-out; }
.note-reference { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 6px 0; padding: 4px 8px; border-radius: 4px; background: light-dark(#f3f3f1, #333); font-size: 12px; overflow-wrap: anywhere; }
.note-reference > a, .note-reference > span { display: inline-flex; align-items: center; gap: 6px; flex: 1; min-width: 0; color: inherit; }
.note-reference q { flex-basis: 100%; color: var(--color-muted); font-style: italic; }
.create-case .note-reference-delete { padding: 0 4px; border: 0; background: transparent; color: var(--color-muted); line-height: 1; }
.create-case .note-reference-button { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; padding: 3px 8px; font-size: 11px; }
.note-reference-button svg { display: block; width: 15px; height: 15px; }
.note-pill { display: inline-flex; align-items: center; padding: 1px 7px; border: 0; border-radius: 4px; background: var(--color-disabled); color: var(--color-muted); font-size: 11px; line-height: 1.6; white-space: nowrap; }
.form-popover .note-reference-fields { margin: 0; }
.note-reference-fields { display: grid; gap: 6px; margin: 10px 0 0; min-width: 0; padding: 0; border: 0; }
.note-reference-fields legend { margin-bottom: 4px; color: var(--color-muted); font-size: 12px; }
.note-reference-fields legend span { opacity: .7; }
.note-reference-fields input { padding: 6px 8px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 12px; }
.statement-row { position: relative; align-items: flex-start; margin: 0; padding-left: calc(4px + var(--depth) * 24px); }
.create-case .statement-row > button.outcome-statement-move { position: absolute; top: 3px; left: calc(var(--depth) * 24px - 18px); padding-inline: 1px; cursor: grab; }
.statement-row:not(:hover, :focus-within, .is-dragging) > .outcome-statement-move, .statement-row:not(:hover, :focus-within) .statement-shifts { opacity: 0; }
.statement-line { flex: 0 1 auto; min-width: 0; margin-right: auto; overflow-wrap: anywhere; }
.statement-line > .outcome-statement-text { display: inline; }
.statement-row:has(.outcome-statement-input) > .statement-line { display: none; }
.statement-shifts { display: inline-flex; margin-left: 4px; vertical-align: -3px; }
.create-case .statement-shifts > button { display: inline-flex; padding: 0; border: 0; background: transparent; color: var(--color-muted); }
.create-case .statement-shifts > button:hover:not(:disabled) { border: 0; background: transparent; color: var(--color-text); }
.statement-shifts > button:disabled { opacity: .3; cursor: default; }
.statement-shifts svg { display: block; width: 15px; height: 15px; }
.statement-row > :not(.statement-line, .outcome-statement-text, .outcome-statement-editor) { min-height: calc(14px * 1.7); }
.create-case .statement-row > button { padding-block: 0; }
.statement-badges { align-items: center; }
.statement-row::before { content: attr(data-bullet); color: var(--color-text); }
.statement-row[data-depth="2"]::before { font-size: 11px; }
.statement-row > .outcome-statement-text { flex: 0 1 auto; margin-right: auto; }
.statement-row:has(.outcome-statement-input) > .outcome-statement-editor { display: flex; flex: 1; }
.statement-badges { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; margin-left: 8px; }
.create-case .statement-badges .note-pill { padding: 1px 7px; border: 0; background: var(--color-disabled); color: var(--color-muted); cursor: pointer; }
.create-case .statement-badges .note-pill:hover { background: var(--color-brand-soft); color: var(--color-text); border: 0; }
.statement-row:not(:hover, :focus-within) > .outcome-statement-delete { opacity: .45; }
.create-case .statement-badges > .outcome-statement-source { display: inline-flex; align-items: center; gap: 3px; padding: 0 4px; border-color: transparent; background: transparent; color: var(--color-muted); }
.create-case .statement-badges > .outcome-statement-source:hover:not(:disabled) { border-color: transparent; background: transparent; color: var(--color-text); }
.statement-badges:empty { display: none; }
.create-case .outcome-note .note-reference-button { width: auto; margin-top: 6px; }
.create-case .outcome-note .note-reference-delete { width: auto; margin: 0; }
.statement-row.is-drop-before { box-shadow: inset 0 2px 0 var(--color-accent); }
.statement-row.is-drop-after { box-shadow: inset 0 -2px 0 var(--color-accent); }
.thread-log { display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; padding: 16px; overflow-y: auto; }
.thread-message { max-width: 92%; font-size: 13px; line-height: 1.55; }
.thread-message > p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.thread-tool-calls { display: grid; gap: 2px; margin: 0 0 6px; padding: 0; list-style: none; font-size: 12px; line-height: 1.5; }
.thread-tool-calls li { display: flex; align-items: baseline; gap: 10px; }
.thread-tool-calls li::before { content: ''; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--color-muted); opacity: .6; transform: translateY(-2px); }
.thread-tool-calls li.is-failed::before { background: light-dark(#b45309, #f59e0b); opacity: 1; }
.thread-tool-text { flex: 1; min-width: 0; color: var(--color-muted); overflow-wrap: anywhere; }
.thread-tool-name { color: var(--color-text); }
.thread-message.is-user { align-self: flex-end; padding: 8px 12px; border-radius: 8px; background: var(--color-brand-soft); }
.thread-message time { display: block; margin-top: 4px; color: var(--color-muted); font-size: 11px; }
.thread-message.is-user time { text-align: right; }
.thread-proposal { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 8px; background: light-dark(#f7f8f5, #2a2e2b); }
.thread-proposal h4 { margin: 0 0 4px; font-size: 12px; }
.thread-proposal p { margin: 0 0 6px; }
.thread-proposal-meta { color: var(--color-muted); font-size: 12px; }
.thread-proposal.is-dismissed { opacity: .6; }
.thread-proposal.is-added { border-color: light-dark(#cfe3d2, #3a5642); background: light-dark(#eef6ef, #24332a); }
.thread-proposal.is-added .thread-proposal-status { color: light-dark(#2f6b3a, #8fcf9b); }
.thread-proposal.is-added .note-reference { background: light-dark(rgb(255 255 255 / 60%), rgb(0 0 0 / 20%)); }
.thread-proposal-actions { display: flex; gap: 6px; margin-top: 8px; }
.create-case .thread-proposal-actions button { padding: 4px 14px; font-size: 12px; }
.thread-proposal-status { display: flex; align-items: center; gap: 4px; color: var(--color-muted); font-size: 12px; }
.thread-artifact-edit { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding: 6px 10px; border: 1px solid var(--color-border); border-radius: 8px; background: light-dark(#f7f8f5, #2a2e2b); color: var(--color-muted); font-size: 12px; }
.thread-artifact-edit svg { display: block; flex: none; width: 15px; height: 15px; }
.thread-artifact-edit > span:first-of-type { flex: 1; color: var(--color-text); }
.create-case .thread-artifact-edit button { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font-size: 12px; }
.thread-thinking { margin: 0; font-size: 13px; }
.thread-composer { margin: 0 12px 12px; align-items: flex-end; }
/* The composer starts at two rows and grows with its text up to eight rows; then it scrolls. */
.create-case .thread-composer textarea { flex: 1; box-sizing: border-box; min-height: calc(2lh + 8px); max-height: calc(8lh + 8px); padding: 4px 0; field-sizing: content; resize: none; line-height: 1.5; }
.create-case .column-collapse { display: inline-flex; flex: none; margin-right: 4px; padding: 4px; border: 0; background: transparent; color: var(--color-muted); }
.create-case .column-collapse:hover:not(:disabled) { border: 0; background: transparent; color: var(--color-text); }
.column-collapse svg { display: block; width: 15px; height: 15px; }

.thread-empty { margin: 0; color: var(--color-muted); font-size: 13px; line-height: 1.5; }
/* The help centers in the empty log. */
.thread-help { display: grid; gap: 10px; max-width: 34ch; margin: auto; text-align: center; font-size: 12px; }
.thread-help p { margin: 0; }
.thread-help ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.thread-help-list strong { display: block; color: var(--color-text); font-weight: 600; }
.thread-help .thread-help-heading { margin-top: 6px; color: var(--color-text); font-weight: 600; }
.thread-help .thread-help-examples { gap: 4px; font-style: italic; }
.note-reference svg, .thread-proposal-status svg { display: block; flex: none; width: 15px; height: 15px; }
@keyframes statement-flash { from { background: var(--color-brand-soft); } }
@keyframes note-flash { from { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-brand-soft); } }

.outcome-note.is-flash { animation: note-flash 1.2s ease-out; }
/* Statement filter: a menu below its button; the editor root carries the choice. */
.statements-meta { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.statements-meta[hidden] { display: none; }
.create-case .statement-filter-button { anchor-name: --statement-filter; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; color: var(--color-muted); font-size: 12px; }
.create-case .statement-filter-button.is-active { border-color: var(--color-accent); color: var(--color-accent); }
.statement-filter-button svg { display: block; width: 15px; height: 15px; }
.statement-filter-menu { position-anchor: --statement-filter; inset: auto; top: anchor(bottom); right: anchor(right); margin: 4px 0 0; padding: 4px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface-raised); color: var(--color-text); box-shadow: 0 6px 20px rgb(0 0 0 / 10%); }
.create-case .statement-filter-menu button { display: block; width: 100%; min-width: 140px; padding: 6px 10px; border: 0; background: transparent; text-align: left; font-size: 12px; }
.create-case .statement-filter-menu button:hover:not(:disabled) { border: 0; background: light-dark(#f3f3f1, #333); }
.create-case .statement-filter-menu button[aria-checked="true"] { font-weight: 600; }
[data-filter="justified"] .statement-row:not([data-justified]), [data-filter="unjustified"] .statement-row[data-justified] { display: none; }
[data-filter="justified"] .outcome-statements:not(:has([data-justified]))::after { content: 'No justified statements.'; }
[data-filter="unjustified"] .outcome-statements:has([data-statement]):not(:has([data-statement]:not([data-justified])))::after { content: 'No unjustified statements.'; }
[data-filter] .outcome-statements::after { display: block; padding: 8px 0; color: var(--color-muted); font-size: 13px; }
.statement-filter-separator { margin: 4px 0; border: 0; border-top: 1px solid var(--color-border); }

@media (max-width: 64rem) { .create-case .column-collapse { display: none; } }

/* Utility: AI Scorecard. Saved answers use the shared editor buffer. */
:where([data-utility="ai_scorecard"]) {
  [hidden] { display: none !important; }
  h4 { font-size: 14px; font-weight: 500; margin: 0 0 8px; }
  .create-case & .scorecard-disclosure { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px 8px; margin: 0; border: 0; border-bottom: 1px solid var(--color-border); border-radius: 0; text-align: left; background: transparent; color: var(--color-text); font-size: 14px; }
  .create-case & .scorecard-disclosure:hover:not(:disabled) { background: transparent; border-color: var(--color-border); }
  .scorecard-disclosure svg { width: 15px; height: 15px; flex: 0 0 15px; color: var(--color-muted); }
  .scorecard-disclosure[aria-expanded="true"] svg { transform: rotate(90deg); }
  .scorecard-summary { margin-left: auto; color: var(--color-muted); font-size: 12px; font-weight: 400; }
  .scorecard-section { padding: 20px 8px 24px 35px; border-bottom: 1px solid var(--color-border); }
  .scorecard-field { min-width: 0; border: 0; padding: 0; margin: 0 0 24px; }
  .scorecard-followup { margin: 14px 0 14px 23px; }
  .scorecard-missing { display: inline-block; margin-left: 8px; padding: 1px 6px; border: 1px solid var(--color-border); border-radius: 4px; background: var(--color-disabled); color: var(--color-muted); font-size: 11px; font-weight: 400; white-space: nowrap; vertical-align: middle; }
  .scorecard-field > label, .scorecard-field > legend { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; }
  .scorecard-field .utility-note { margin: 0 0 10px; }
  .scorecard-options { display: grid; gap: 6px; }
  .create-case & .scorecard-choice { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-weight: 400; font-size: 14px; cursor: pointer; }
  .create-case & .scorecard-choice input { flex: 0 0 auto; width: 15px; height: 15px; margin: 4px 0 0; }
  .create-case & textarea { width: 100%; min-height: 90px; padding: 10px; border: 1px solid var(--color-border); border-radius: 4px; background: var(--color-background); color: var(--color-text); font: inherit; resize: vertical; }
  .scorecard-requirement { padding: 14px 0; border-bottom: 1px solid var(--color-border); font-size: 13px; }
  .scorecard-requirement p { margin: 6px 0; }
  details { margin: 12px 0; font-size: 13px; }
  summary { cursor: pointer; }
  .scorecard-result { margin-top: 24px; padding: 16px; background: var(--color-disabled); border: 1px solid var(--color-border); border-radius: 4px; }
  .scorecard-statements { list-style: disc; padding-left: 24px; }
  .scorecard-statements li { padding: 6px 0; overflow-wrap: anywhere; }
  .scorecard-result > button { display: block; margin-left: auto; }
  [data-scorecard-legal] { white-space: pre-line; }
  .scorecard-footnotes { border-top: 1px solid var(--color-border); margin: 16px 0 0; padding: 12px 0 0 20px; font-size: 12px; }
  .scorecard-footnotes li { margin-top: 6px; scroll-margin-top: 24px; }
  .scorecard-footnotes li:target { outline: 2px solid currentColor; outline-offset: 3px; }
  .scorecard-section sup { margin-left: 2px; font-size: 11px; }
  @media (max-width: 40rem) {
    .create-case & .scorecard-disclosure { flex-wrap: wrap; }
    .scorecard-summary { width: calc(100% - 27px); margin-left: 27px; text-align: left; }
    .scorecard-section { padding-left: 8px; }
  }
}

/* Utility: CVSS Calculator. Severity colors are relative positions, not company risk classes. */
:where([data-utility="cvss_calculator"]) {
  --cvss-none: light-dark(#ececec, #3a3a3a); --cvss-none-border: light-dark(#cfcfcf, #555);
  --cvss-low: light-dark(#c6efc2, #2f4a2c); --cvss-low-border: light-dark(#8fcf89, #4f7a4a);
  --cvss-medium: light-dark(#f1e8c0, #4a4428); --cvss-medium-border: light-dark(#d6c47a, #7a6c3a);
  --cvss-high: light-dark(#f6d3b5, #533a26); --cvss-high-border: light-dark(#dc9e6b, #8a5e3a);
  --cvss-critical: light-dark(#f0c4c0, #55302d); --cvss-critical-border: light-dark(#d0827b, #8f4c46);
  [hidden] { display: none !important; }
  h4 { margin: 16px 0 4px; font-size: 12px; font-weight: 500; color: var(--color-muted); text-transform: uppercase; letter-spacing: .04em; }
  .cvss-head { display: flex; justify-content: space-between; align-items: start; gap: 24px; margin-bottom: 12px; }
  .cvss-gauge { flex: 1; display: grid; gap: 8px; max-width: 560px; }
  .cvss-score { display: flex; align-items: center; gap: 10px; font-size: 32px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
  .cvss-score.is-empty { color: var(--color-muted); font-weight: 400; }
  .cvss-muted { font-size: 12px; font-weight: 400; color: var(--color-muted); }
  .cvss-pill { display: inline-flex; padding: 1px 8px; border: 1px solid; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--color-text); }
  .cvss-sev-none { background: var(--cvss-none); border-color: var(--cvss-none-border); }
  .cvss-sev-low { background: var(--cvss-low); border-color: var(--cvss-low-border); }
  .cvss-sev-medium { background: var(--cvss-medium); border-color: var(--cvss-medium-border); }
  .cvss-sev-high { background: var(--cvss-high); border-color: var(--cvss-high-border); }
  .cvss-sev-critical { background: var(--cvss-critical); border-color: var(--cvss-critical-border); }
  .cvss-meter { position: relative; }
  .cvss-bands { display: flex; height: 18px; border-radius: 3px; overflow: hidden; font-size: 10px; }
  .cvss-bands span { display: grid; place-items: center; border: 0; color: var(--color-text); opacity: .85; }
  .cvss-needle { position: absolute; top: -4px; width: 3px; height: 26px; margin-left: -1.5px; border-radius: 2px; background: var(--color-text); }
  .cvss-base-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--color-muted); }
  .cvss-base-line strong { color: var(--color-text); font-variant-numeric: tabular-nums; }
  .cvss-version { display: inline-flex; flex: none; border: 1px solid var(--color-border); border-radius: 4px; overflow: hidden; }
  .cvss-version label { position: relative; padding: 5px 12px; font-size: 12px; cursor: pointer; white-space: nowrap; }
  .cvss-version label + label { border-left: 1px solid var(--color-border); }
  .cvss-version input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
  .cvss-version label:has(input:checked) { background: light-dark(#eef0e9, #33382f); color: var(--color-primary-button); box-shadow: inset 0 -2px 0 var(--color-primary-button); font-weight: 500; }
  .cvss-version label:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: -2px; }
  .cvss-version label:has(input:disabled) { cursor: default; }
  .cvss-axis, .cvss-row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 12px; align-items: center; }
  .cvss-axis { grid-template-columns: 220px 1fr 1fr; margin-top: 8px; font-size: 11px; color: var(--color-muted); }
  .cvss-axis span:last-child { justify-self: end; }
  .cvss-row { padding: 3px 0; }
  .cvss-label { font-size: 13px; }
  .cvss-key { margin-left: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; color: var(--color-muted); }
  .cvss-cells { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; }
  .cvss-cell { position: relative; padding: 6px 4px; border: 1px solid var(--color-card-border); border-radius: 3px; background: var(--color-surface); text-align: center; font-size: 12px; cursor: pointer; overflow-wrap: anywhere; }
  .cvss-cell:hover:not(:has(input:disabled)) { border-color: var(--color-muted); }
  .cvss-cell input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
  .cvss-cell:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 1px; }
  .cvss-cell:has(input:checked) { font-weight: 600; }
  .cvss-cell:has(input:disabled) { cursor: default; }
  .cvss-cell:has(input:disabled) input { cursor: default; }
  .is-critical:has(input:checked) { background: var(--cvss-critical); border-color: var(--cvss-critical-border); }
  .is-high:has(input:checked) { background: var(--cvss-high); border-color: var(--cvss-high-border); }
  .is-medium:has(input:checked) { background: var(--cvss-medium); border-color: var(--cvss-medium-border); }
  .is-low:has(input:checked) { background: var(--cvss-low); border-color: var(--cvss-low-border); }
  .is-undefined { color: var(--color-muted); }
  .is-undefined:has(input:checked) { background: var(--cvss-none); border-color: var(--cvss-none-border); color: var(--color-text); }
  .cvss-help { position: relative; display: inline-flex; margin-left: 4px; vertical-align: middle; }
  .create-case & .cvss-help-button { display: inline-grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--color-muted); }
  .create-case & .cvss-help-button:hover:not(:disabled), .create-case & .cvss-help-button[aria-expanded="true"] { background: transparent; border-color: transparent; color: var(--color-accent); }
  .cvss-help-button svg { width: 15px; height: 15px; }
  .cvss-tip { position: absolute; z-index: 5; left: -8px; top: calc(100% + 6px); width: max-content; max-width: 280px; padding: 8px 10px; border-radius: 4px; background: #1c2024; color: #eceef0; font-size: 12px; font-weight: 400; line-height: 1.45; text-transform: none; letter-spacing: 0; box-shadow: 0 4px 12px rgb(0 0 0 / 15%); opacity: 0; visibility: hidden; transition: opacity .12s; }
  /* The bridge keeps hover while the pointer moves from the icon onto the tooltip. */
  .cvss-tip::before { content: ''; position: absolute; left: 0; right: 0; top: -6px; height: 6px; }
  /* Escape sets data-dismissed until the pointer leaves or focus moves. */
  .cvss-help:not([data-dismissed]):hover .cvss-tip, .cvss-help:not([data-dismissed]) .cvss-help-button:focus-visible + .cvss-tip, .cvss-help-button[aria-expanded="true"] + .cvss-tip { opacity: 1; visibility: visible; }
  .create-case & .cvss-disclosure { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 12px; padding: 16px 8px; border: 0; border-bottom: 1px solid var(--color-border); border-radius: 0; text-align: left; background: transparent; color: var(--color-text); font-size: 14px; }
  .create-case & .cvss-disclosure:hover:not(:disabled) { background: transparent; border-color: var(--color-border); }
  .cvss-disclosure svg { width: 15px; height: 15px; flex: 0 0 15px; color: var(--color-muted); }
  .cvss-disclosure[aria-expanded="true"] svg { transform: rotate(90deg); }
  .cvss-summary { margin-left: auto; font-size: 12px; color: var(--color-muted); }
  .cvss-optional > .utility-note { margin: 8px 0; }
  .cvss-base-only { margin-top: 12px; }
  .cvss-vector { display: grid; gap: 4px; margin-top: 16px; font-size: 12px; }
  .cvss-vector-row { display: flex; align-items: center; gap: 10px; }
  .cvss-mono { flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid var(--color-border); border-radius: 4px; background: var(--color-surface-raised); color: var(--color-text); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
  .create-case & .cvss-copy { display: inline-flex; flex: none; align-items: center; gap: 5px; padding: 4px 6px; border: 0; background: transparent; color: var(--color-muted); font-size: 12px; white-space: nowrap; }
  .create-case & .cvss-copy:hover:not(:disabled) { background: transparent; border-color: transparent; color: var(--color-text); }
  .cvss-copy svg { display: block; flex: none; width: 15px; height: 15px; }
  .cvss-error { color: var(--color-danger); }
  .cvss-error:empty { display: none; }
  .cvss-result { margin-top: 24px; padding: 16px; background: var(--color-disabled); border: 1px solid var(--color-border); border-radius: 4px; }
  .cvss-result h4 { margin: 0 0 8px; font-size: 14px; color: var(--color-text); text-transform: none; letter-spacing: 0; }
  .cvss-result ul { margin: 8px 0; padding-left: 18px; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
  .cvss-result > button { display: block; margin-left: auto; }
  @media (max-width: 48rem) {
    .cvss-head { flex-direction: column; }
    .cvss-axis { display: none; }
    .cvss-row { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 6px 0; }
  }
}

/* Utility: File Browser. Scope by code ID, independent of the display name. */
[data-utility-id="file_browser"] {
  .file-browser { display: grid; grid-template-columns: minmax(240px, 2fr) 3fr; gap: 16px; height: 480px; font-size: 12px; }
  .file-browser-pane { display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 6px; min-height: 0; }
  .file-browser-search { position: relative; display: block; }
  .file-browser-search svg { position: absolute; left: 8px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); color: var(--color-muted); }
  .file-browser-search input { box-sizing: border-box; width: 100%; padding: 6px 8px 6px 28px; border: 1px solid var(--color-card-border); border-radius: 6px; background: var(--color-surface); color: inherit; font: inherit; }
  .file-browser-error { margin: 0; color: var(--color-danger); }
  .file-browser-list { display: flex; flex-direction: column; gap: 4px; min-height: 0; }
  .file-browser-list ul { flex: 1; min-height: 0; overflow: auto; margin: 0; padding: 0; list-style: none; scrollbar-width: thin; }
  .file-browser-list li + li { border-top: 1px solid var(--color-card-border); }
  .file-browser-crumbs { display: flex; align-items: center; gap: 4px; min-height: 26px; min-width: 0; }
  .file-browser-crumbs > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--font-weight-medium); }
  .create-case & .file-browser-crumbs button { padding: 2px 6px; border: 0; border-radius: 4px; background: transparent; color: var(--color-accent); cursor: pointer; }
  .create-case & .file-browser-crumbs button:hover { background: var(--color-disabled); }
  .create-case & .file-browser-row { display: grid; grid-template-columns: 15px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; width: 100%; padding: 7px 8px; border: 0; border-radius: 5px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
  .create-case & .file-browser-row:hover { background: var(--color-disabled); }
  .create-case & .file-browser-row.is-selected { background: var(--color-brand-soft); box-shadow: inset 2px 0 0 var(--color-accent); }
  .file-browser-row:has(.file-browser-folder) { grid-template-columns: 15px minmax(0, 1fr) auto; }
  :is(button, a, input):focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
  .file-browser-icon { display: grid; place-items: center; color: var(--color-muted); }
  .file-browser-icon svg { width: 15px; height: 15px; }
  .file-browser-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; font-size: inherit; font-weight: var(--font-weight-medium); letter-spacing: normal; }
  .file-browser-location { display: block; overflow: hidden; text-overflow: ellipsis; color: var(--color-muted); font-size: 10px; font-weight: 400; }
  .file-browser-meta { color: var(--color-muted); font-size: 11px; white-space: nowrap; }
  .file-browser-notice { margin: 0; color: var(--color-muted); font-size: 11px; }
  .file-browser-empty { margin: auto; padding: 24px; color: var(--color-muted); text-align: center; }
  .file-browser-pages { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 11px; }
  .file-browser-pages span { color: var(--color-muted); }
  .create-case & .file-browser-pages button { padding: 4px 9px; border: 1px solid var(--color-card-border); border-radius: 6px; background: var(--color-surface); color: inherit; font: inherit; cursor: pointer; }
  .create-case & .file-browser-pages button:hover:not(:disabled) { background: var(--color-disabled); }
  .file-browser-pages button:disabled { opacity: .45; cursor: default; }
  .file-browser-preview { display: flex; flex-direction: column; min-width: 0; min-height: 0; border: 1px solid var(--color-card-border); border-radius: 6px; background: var(--color-surface); }
  .file-browser-preview header { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--color-card-border); }
  .file-browser-preview header .file-browser-name { flex: 1; }
  .file-browser-action { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 5px; color: var(--color-muted); }
  .file-browser-action:hover { background: var(--color-disabled); color: var(--color-text); }
  .file-browser-action svg { width: 15px; height: 15px; }
  .file-browser-body { flex: 1; min-height: 0; overflow: auto; padding: 10px; scrollbar-width: thin; }
  .file-browser-image { display: grid; place-items: center; }
  .file-browser-image img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 3px; box-shadow: 0 1px 4px rgb(0 0 0 / 12%); }
  .file-browser-pdf { padding: 0; overflow: hidden; }
  .file-browser-pdf iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
  .file-browser-text pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.55 ui-monospace, Menlo, monospace; }
  .file-browser-table table { border-collapse: collapse; font-size: 11px; }
  .file-browser-table :is(th, td) { padding: 4px 6px; border: 1px solid var(--color-card-border); text-align: left; vertical-align: top; }
  .file-browser-table th { background: var(--color-background); font-weight: 600; }
  .file-browser-preview > .file-browser-notice { padding: 6px 10px; border-top: 1px solid var(--color-card-border); }
  .file-browser-body:not(.file-browser-image, .file-browser-pdf, .file-browser-text, .file-browser-table) { display: grid; place-items: center; }
  .file-browser-download { display: grid; justify-items: center; gap: 10px; color: var(--color-muted); text-align: center; }
  .file-browser-download > svg { width: 15px; height: 15px; }
  .file-browser-download a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--color-border); border-radius: 4px; background: var(--color-surface-raised); color: var(--color-text); text-decoration: none; }
  .file-browser-download a:hover { background: var(--color-disabled); }
  .file-browser-download a svg { width: 15px; height: 15px; }
  @media (max-width: 48rem) {
    .file-browser { grid-template-columns: 1fr; grid-template-rows: 280px 380px; height: auto; }
  }
}