:root {
  color-scheme: light;
  --radius: 12px;
  /* Light values for the original palette. */
  --ink-light: #20353c;
  --muted-light: #5d7178;
  --teal-light: #175662;
  --teal-hover-light: #103f49;
  --brand-light: #175662;
  --canvas-light: #f3f6f6;
  --surface-light: #ffffff;
  --subtle-light: #edf3f3;
  --line-light: #d8e2e4;
  --amber-light: #85500c;
  --amber-bg-light: #fff5e6;
  --red-light: #a22d32;
  --red-bg-light: #fff0f0;
  --green-light: #286349;
  --green-bg-light: #edf7f1;
  --button-fill-light: #175662;
  --button-hover-light: #103f49;
  --button-ink-light: #ffffff;
  --skeleton-base-light: #e5eded;
  --skeleton-shine-light: #ffffffa6;
  --selection-bg-light: #c7e3e5;
  --selection-ink-light: #123e48;
  --control-active-light: #edf3f3;
  --input-border-light: #71868e;
  --placeholder-light: #5d7178;
  --focus-light: #b77b25;
  --hover-border-light: #7a9ba5;
  --hover-bg-light: #f4f8f8;
  --selected-border-light: #8ab5be;
  --selected-bg-light: #edf5f5;
  --secondary-ink-light: #49616a;
  --badge-ink-light: #425b65;
  --info-bg-light: #e9f2f7;
  --info-ink-light: #315e78;
  --empty-ink-light: #7f9da5;
  --success-border-light: #bad3c5;
  --error-border-light: #e6c1c3;
  --backdrop-light: #122c3a66;
  --dialog-backdrop-light: #152d3b75;
  --popover-shadow-light: #15353e14;
  /* Dark values for the original palette. */
  --ink-dark: #dce8e9;
  --muted-dark: #a4b7bb;
  --teal-dark: #8dc6ce;
  --teal-hover-dark: #acdce2;
  --brand-dark: #8dc6ce;
  --canvas-dark: #132025;
  --surface-dark: #1b2b31;
  --subtle-dark: #243b42;
  --line-dark: #3a5159;
  --amber-dark: #f0c78b;
  --amber-bg-dark: #3b3023;
  --red-dark: #ffb1b4;
  --red-bg-dark: #432c32;
  --green-dark: #a4d8bd;
  --green-bg-dark: #233e34;
  --button-fill-dark: #1c6674;
  --button-hover-dark: #267c8c;
  --button-ink-dark: #ffffff;
  --skeleton-base-dark: #30474f;
  --skeleton-shine-dark: #aacbd217;
  --selection-bg-dark: #42717c;
  --selection-ink-dark: #ffffff;
  --control-active-dark: #2b444d;
  --input-border-dark: #829aa3;
  --placeholder-dark: #a4b7bb;
  --focus-dark: #e2b874;
  --hover-border-dark: #829aa3;
  --hover-bg-dark: #263d45;
  --selected-border-dark: #629aa5;
  --selected-bg-dark: #27434b;
  --secondary-ink-dark: #b5c9ce;
  --badge-ink-dark: #bdd5dc;
  --info-bg-dark: #263e50;
  --info-ink-dark: #b8d7ec;
  --empty-ink-dark: #a4b7bb;
  --success-border-dark: #446e5b;
  --error-border-dark: #87585f;
  --backdrop-dark: #07131899;
  --dialog-backdrop-dark: #07131899;
  --popover-shadow-dark: #00000033;
  --ink: var(--ink-light);
  --muted: var(--muted-light);
  --teal: var(--teal-light);
  --teal-hover: var(--teal-hover-light);
  --brand: var(--brand-light);
  --canvas: var(--canvas-light);
  --surface: var(--surface-light);
  --subtle: var(--subtle-light);
  --line: var(--line-light);
  --amber: var(--amber-light);
  --amber-bg: var(--amber-bg-light);
  --red: var(--red-light);
  --red-bg: var(--red-bg-light);
  --green: var(--green-light);
  --green-bg: var(--green-bg-light);
  --button-fill: var(--button-fill-light);
  --button-hover: var(--button-hover-light);
  --button-ink: var(--button-ink-light);
  --skeleton-base: var(--skeleton-base-light);
  --skeleton-shine: var(--skeleton-shine-light);
  --selection-bg: var(--selection-bg-light);
  --selection-ink: var(--selection-ink-light);
  --control-active: var(--control-active-light);
  --input-border: var(--input-border-light);
  --placeholder: var(--placeholder-light);
  --focus: var(--focus-light);
  --hover-border: var(--hover-border-light);
  --hover-bg: var(--hover-bg-light);
  --selected-border: var(--selected-border-light);
  --selected-bg: var(--selected-bg-light);
  --secondary-ink: var(--secondary-ink-light);
  --badge-ink: var(--badge-ink-light);
  --info-bg: var(--info-bg-light);
  --info-ink: var(--info-ink-light);
  --empty-ink: var(--empty-ink-light);
  --success-border: var(--success-border-light);
  --error-border: var(--error-border-light);
  --backdrop: var(--backdrop-light);
  --dialog-backdrop: var(--dialog-backdrop-light);
  --popover-shadow: var(--popover-shadow-light);
  font: 14px/1.5 "Segoe UI", system-ui, sans-serif; color: var(--ink); background: var(--canvas);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
::selection { background: var(--selection-bg); color: var(--selection-ink); }
input, textarea { caret-color: var(--teal); }
a { color: var(--teal); text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; }
button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 9px 14px; border: 1px solid transparent; border-radius: 7px; cursor: pointer; color: var(--ink); background: transparent; transition: background-color 150ms ease-out, border-color 150ms ease-out; }
button:active:not(:disabled) { background: var(--control-active); }
button:disabled { opacity: .5; cursor: not-allowed; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex="0"]:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
input, select, textarea { width: 100%; padding: 10px 12px; color: var(--ink); background: var(--surface); border: 1px solid var(--input-border); border-radius: 7px; }
input::placeholder, textarea::placeholder { color: var(--placeholder); opacity: 1; }
label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 7px; }
.primary { color: var(--button-ink); background: var(--button-fill); }
.primary:hover:not(:disabled) { background: var(--button-hover); }
.primary:active:not(:disabled) { background: var(--button-hover); }
.secondary { border-color: var(--line); background: var(--surface); }
.secondary:hover:not(:disabled) { background: var(--subtle); border-color: var(--hover-border); }
.text-button { color: var(--teal); padding-inline: 8px; }
.text-button:hover:not(:disabled) { background: var(--subtle); }
.icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon-definitions, .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; top: -80px; left: 16px; background: var(--surface); padding: 12px; z-index: 20; }
.skip-link:focus { top: 12px; }
.topbar { min-height: 72px; display: flex; align-items: center; gap: 28px; padding: 12px 28px; border-bottom: 1px solid var(--line); background: var(--surface); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--teal); text-decoration: none; font-weight: 750; letter-spacing: 1.1px; line-height: 1.1; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 37px; background: var(--button-fill); color: var(--button-ink); border-radius: 5px; font-size: 24px; font-weight: 600; letter-spacing: 0; }
.brand small { display: block; font-size: 9px; font-weight: 500; letter-spacing: 2.1px; margin-top: 5px; }
.app-name { color: var(--muted); border-left: 1px solid var(--line); padding-left: 25px; }
.session { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 12px; }
.connection-label { color: var(--muted); }
main { padding: 25px 26px 26px; max-width: 1800px; margin: auto; }
h1, h2, h3, h4, p { margin: 0; }
h1 { font-size: 25px; line-height: 1.25; letter-spacing: -.5px; font-weight: 650; }
h2 { font-size: 16px; font-weight: 650; }
h3 { font-size: 14px; margin: 24px 0 9px; }
h4 { font-size: 13px; font-weight: 650; }
.hint, .section-note, .local-note { font-size: 12px; color: var(--muted); line-height: 1.6; }
.connection-panel { max-width: 500px; margin: 9vh auto; padding: 0 12px; }
.welcome-mark { display: grid; place-items: center; width: 54px; height: 54px; color: var(--teal); background: var(--subtle); border-radius: 12px; margin-bottom: 25px; }
.welcome-mark svg { width: 26px; height: 26px; }
.connection-panel > p { margin-top: 14px; color: var(--muted); line-height: 1.7; }
.connection-panel form { margin-top: 28px; }
#token-help { margin: 8px 0 22px; }
.connection-panel .primary { width: 100%; }
.local-note { margin-top: 25px !important; }
.file-reference { color: var(--ink); }

.topbar { position: sticky; top: 0; z-index: 10; background: var(--surface); }
.test-mode { font-size: 12px; color: var(--teal); padding-left: 20px; border-left: 1px solid var(--line); overflow-wrap: anywhere; max-width: 440px; }
main { max-width: 1480px; padding: 26px 28px 40px; }
.desk-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 24px; }
.desk-heading p { color: var(--muted); font-size: 13px; margin-top: 6px; }
.workspace-tools { display: flex; gap: 14px; align-items: center; }
.workspace-tools .hint { font-variant-numeric: tabular-nums; }
.sync-strip { display: flex; gap: 16px; align-items: center; justify-content: space-between; font-size: 13px; line-height: 1.6; margin-bottom: 20px; padding: 9px 14px; background: var(--subtle); border-radius: 7px; color: var(--teal); }
.sync-strip > div { min-width: 0; }
#sync-details { margin: 0; }
#sync-details summary { font-size: 12px; padding: 4px 0 0; font-weight: 500; }
#sync-details p { font-size: 12px; margin-top: 6px; }
.sync-strip.error { background: var(--red-bg); color: var(--red); }
.sync-strip.error button { color: var(--red); }
.workspace { display: grid; grid-template-columns: 290px minmax(0,1fr); gap: 24px; align-items: start; }
.queue-panel, .draft-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; }
.queue-panel { display: flex; flex-direction: column; max-height: calc(100dvh - 220px); position: sticky; top: 96px; padding: 20px 14px 12px; }
.queue-heading { display: flex; justify-content: space-between; align-items: center; margin: 0 5px 18px; }
.queue-heading h2 { display: flex; align-items: center; gap: 8px; }
.count { font-size: 12px; font-weight: 500; padding: 1px 7px; border-radius: 5px; background: var(--subtle); font-variant-numeric: tabular-nums; }
.search-field { position: relative; margin-bottom: 10px; }
.search-field svg { position: absolute; top: 12px; left: 11px; color: var(--muted); }
.search-field input { padding-left: 35px; font-size: 13px; }
.queue-panel select { font-size: 13px; }
.queue-description { font-size: 12px; color: var(--muted); margin: 12px 5px; }
.job-list { position: relative; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--input-border) transparent; margin: 0 -7px; padding: 1px 7px; }
.job { display: block; width: 100%; text-align: left; margin: 5px 0; padding: 13px 12px; border: 1px solid transparent; border-radius: 8px; }
.job:hover { background: var(--hover-bg); }
.job.selected { border-color: var(--selected-border); background: var(--selected-bg); }
.job-name { display: block; font-size: 14px; font-weight: 650; overflow-wrap: anywhere; }
.job-equipment { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; color: var(--secondary-ink); line-height: 1.5; margin: 4px 0 10px; }
.job-bottom { display: flex; align-items: center; gap: 8px; justify-content: space-between; flex-wrap: wrap; font-size: 11px; color: var(--muted); }
.badge { display: inline-flex; padding: 4px 8px; border-radius: 5px; background: var(--subtle); color: var(--badge-ink); font-size: 12px; line-height: 1.5; font-weight: 600; overflow-wrap: anywhere; }
.badge.pending { background: var(--info-bg); color: var(--info-ink); }
.badge.approved, .badge.sent { background: var(--green-bg); color: var(--green); }
.badge.review, .badge.held { background: var(--amber-bg); color: var(--amber); }
.badge.uncertain { background: var(--red-bg); color: var(--red); }
.queue-footer { font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); padding: 14px 4px 0; margin-top: 14px; }
.queue-empty { padding: 24px 6px; color: var(--muted); font-size: 13px; }
.draft-panel { overflow: visible; height: auto; max-height: none; }
.draft-detail { padding: 28px 32px 0; }
.case-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
#job-title { font-size: 25px; line-height: 1.3; overflow-wrap: anywhere; }
#equipment-name { margin-top: 7px; font-size: 17px; line-height: 1.5; overflow-wrap: anywhere; }
#draft-subtitle { margin-top: 5px; }
.case-tools { display: flex; flex-direction: column; align-items: end; gap: 8px; flex-shrink: 0; max-width: 220px; }
.case-tools .text-button { font-size: 12px; padding: 4px 0; }
.listing-details { margin: 16px 0 0; }
.buyer-request { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 22px 0; margin-top: 22px; }
.buyer-request h3 { margin: 0 0 8px; font-size: 14px; }
#request-copy { font-size: 15px; line-height: 1.75; max-width: 72ch; white-space: pre-wrap; overflow-wrap: anywhere; }
.attention { background: var(--amber-bg); color: var(--amber); padding: 12px 14px; border-radius: 7px; margin-top: 18px; font-size: 13px; line-height: 1.6; }
.no-draft { padding: 24px 0 20px; max-width: 75ch; }
.no-draft h3 { font-size: 21px; line-height: 1.35; margin: 0 0 10px; }
.no-draft p { font-size: 14px; line-height: 1.75; overflow-wrap: anywhere; }
#blocked-next { margin-top: 10px; color: var(--badge-ink); }
.blocked-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 19px; }
#assessment-help { margin-top: 9px; font-size: 12px; }
.assessment-details { margin: 20px 0 0; border-top: 1px solid var(--line); padding-top: 12px; }
.assessment-details h4 { margin: 16px 0 7px; }
.assessment-details li { margin: 7px 0; line-height: 1.7; }
.assessment-details .hint { font-size: 12px; color: var(--muted); }
.mail-headers { margin: 24px 0; font-size: 13px; }
.mail-headers > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.mail-headers > div > span:first-child { min-width: 40px; color: var(--muted); }
#recipient-email { color: var(--muted); overflow-wrap: anywhere; }
.mail-headers label { margin: 18px 0 6px; }
#subject { font-size: 14px; padding: 9px 12px; }
.editor-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.editor-toolbar label { margin: 0; }
.mail-editor, .mail-preview { width: 100%; min-height: 310px; padding: 16px; font-size: 15px; line-height: 1.8; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); overflow-wrap: anywhere; }
.mail-editor { resize: vertical; }
.mail-preview { white-space: pre-wrap; }
.editor-meta { display: flex; gap: 12px; justify-content: space-between; font-size: 12px; color: var(--muted); margin: 10px 0 22px; }
.review-actions { position: static; border-top: 1px solid var(--line); margin: 0 -32px; padding: 16px 25px 20px; background: var(--surface); border-radius: 0 0 12px 12px; }
.save-state { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.save-state.unsaved { color: var(--amber); }
.action-row { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.action-spacer { flex: 1; }
#action-help { margin-top: 10px; font-size: 12px; }
.next-draft { margin: 15px 0; }
.context-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(1000px,94vw); z-index: 40; background: var(--surface); border-left: 1px solid var(--line); box-shadow: -14px 0 40px #20353c24; display: flex; flex-direction: column; }
.context-heading { display: flex; justify-content: space-between; align-items: start; padding: 24px 22px 18px; gap: 16px; }
.context-heading h2 { font-size: 19px; margin-bottom: 7px; }
.context-tabs { display: flex; border-bottom: 1px solid var(--line); padding: 0 12px; gap: 4px; }
.context-tabs button { flex: 1; min-height: 48px; border-radius: 0; border-bottom: 2px solid transparent; font-size: 13px; padding: 8px 5px; color: var(--muted); }
.context-tabs button[aria-selected="true"] { color: var(--teal); border-bottom-color: var(--teal); font-weight: 650; }
.context-tabs button:hover { background: var(--hover-bg); }
.context-content { padding: 24px; overflow-y: auto; flex: 1; scrollbar-width: thin; scrollbar-color: var(--input-border) transparent; }
.section-note { margin-bottom: 18px; }
.message { padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.message:last-child { border-bottom: 0; margin-bottom: 0; }
.message h3 { margin: 0 0 8px; font-size: 17px; }
.message-subject { font-size: 13px; color: var(--muted); margin: 8px 0 14px; overflow-wrap: anywhere; }
.message-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.8; }
.fact { padding: 0 0 20px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.fact h3 { margin-top: 0; }
.fact p { font-size: 14px; line-height: 1.75; overflow-wrap: anywhere; }
.fact .hint { margin-top: 10px; font-size: 12px; }
details { margin: 18px 0; }
summary { cursor: pointer; font-size: 13px; color: var(--teal); font-weight: 600; padding: 7px 0; }
details p { margin-top: 10px; line-height: 1.75; overflow-wrap: anywhere; }
dl { margin: 0; font-size: 14px; }
dt { font-weight: 650; margin: 18px 0 5px; }
dt:first-child { margin-top: 0; }
dd { margin: 0; color: var(--secondary-ink); line-height: 1.75; white-space: pre-line; overflow-wrap: anywhere; }
#crm { font-size: 14px; color: var(--muted); line-height: 1.75; }
.empty-selection { display: grid; place-content: center; text-align: center; min-height: 420px; padding: 40px; }
.empty-selection p { max-width: 40ch; font-size: 14px; color: var(--muted); margin: 12px auto; line-height: 1.75; }
.empty-icon { width: 36px; height: 36px; stroke: var(--empty-ink); fill: none; stroke-width: 1.2; margin: 0 auto 20px; }
.status-message { padding: 12px 15px; margin-bottom: 16px; border: 1px solid var(--success-border); border-radius: 7px; background: var(--green-bg); color: var(--green); font-size: 14px; }
.status-message.error { background: var(--red-bg); color: var(--red); border-color: var(--error-border); }
dialog { max-width: 480px; width: calc(100% - 32px); color: var(--ink); border: 0; background: var(--surface); padding: 28px; border-radius: 14px; box-shadow: 0 20px 70px #122b3740; }
dialog::backdrop { background: var(--dialog-backdrop); }
dialog h2 { font-size: 21px; margin-bottom: 12px; }
dialog p { color: var(--muted); font-size: 14px; line-height: 1.7; margin: 12px 0; }
dialog label { margin-top: 21px; }
.dialog-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; flex-wrap: wrap; }
.dialog-summary { background: var(--subtle); border-radius: 7px; padding: 14px; }
.dialog-summary dd { font-size: 14px; }
.field-error { color: var(--red); }
@media (max-width: 1000px) {
  .workspace { grid-template-columns: 250px minmax(0,1fr); gap: 18px; }
  .app-name { display: none; }
  .topbar { gap: 16px; }
  .test-mode { max-width: 340px; }
  .case-heading { flex-direction: column; gap: 14px; }
  .case-tools { flex-direction: row; align-items: center; max-width: none; flex-wrap: wrap; }
}
@media (max-width: 760px) {
  .topbar { padding: 12px 16px; flex-wrap: wrap; gap: 10px 16px; }
  .brand { font-size: 12px; }
  .session { font-size: 12px; gap: 5px; }
  .connection-label { display: none; }
  .test-mode { order: 3; width: 100%; max-width: none; padding: 0; border: 0; }
  main { padding: 20px 12px; }
  .desk-heading { align-items: start; gap: 12px; }
  h1 { font-size: 23px; }
  .workspace-tools { flex-direction: column-reverse; align-items: end; gap: 5px; }
  .workspace-tools .hint { max-width: 150px; font-size: 11px; text-align: right; }
  .sync-strip { align-items: start; gap: 8px; padding: 10px; }
  .sync-strip p { flex: 1; }
  .sync-strip button { max-width: 140px; font-size: 12px; }
  .workspace { grid-template-columns: minmax(0,1fr); gap: 18px; }
  .queue-panel { position: static; max-height: 330px; }
  .queue-description, .queue-footer { display: none; }
  .queue-heading { margin-bottom: 12px; }
  .job-equipment { -webkit-line-clamp: 1; margin-bottom: 7px; }
  .draft-detail { padding: 22px 20px 0; }
  #job-title { font-size: 23px; }
  #equipment-name { font-size: 16px; }
  .case-heading { gap: 12px; }
  .review-actions { margin-inline: -20px; padding-inline: 16px; }
  .editor-meta { flex-wrap: wrap; }
  .mail-editor, .mail-preview { font-size: 16px; }
  .action-spacer { display: none; }
  .action-row .primary { margin-left: auto; }
  .context-heading { padding: 20px 16px 16px; }
  .context-content { padding: 20px; }
  button { min-height: 44px; }
  .connection-panel { margin-top: 5vh; }
  #draft-panel { scroll-margin-top: 120px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }

/* The conversation is a reading surface, with the email layout isolated below it. */
.history-summary{padding:12px 16px;background:var(--subtle);border-radius:6px;color:var(--teal);font-size:13px;margin:0 0 22px}
.original-email{margin-top:18px;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface)}
.original-email>summary{padding:14px 16px;font-weight:600;background:var(--subtle);cursor:pointer}
.original-email>p,.original-email>.outlook-link{margin:10px 16px;display:block}
.mail-envelope{font-size:13px;line-height:1.5;overflow-wrap:anywhere;color:var(--secondary-ink)}
.email-frame{display:block;width:100%;height:min(760px,75vh);border:0;background:white}
.plain-source{padding:14px 16px;border-top:1px solid var(--line)}
.research-header{padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:20px}
.research-header h3{margin-top:0}.product-source>a{font-weight:600;line-height:1.5;color:var(--teal)}
.source-scope{padding:8px 12px;background:var(--subtle);border-radius:5px;color:var(--teal)}
.source-excerpt{white-space:pre-wrap;max-height:400px;overflow:auto}
.verification-checks{padding:16px 20px;background:var(--amber-bg);border:1px solid var(--line);border-radius:8px}
.verification-checks h4{margin:0 0 10px}.verification-checks li{margin:8px 0;line-height:1.5}
#brief dt{margin-top:18px;color:var(--teal)}#brief dd{line-height:1.65;max-width:78ch}
@media(max-width:760px){.context-panel{width:100vw}.email-frame{height:65vh}}

#request-copy{max-height:180px;overflow-y:auto;padding-right:8px}
.request-provenance{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;margin-top:12px}
.request-provenance p{margin:0;font-size:12px;line-height:1.6}
.request-provenance button{font-size:12px;min-height:36px;padding:7px 12px}

/* Processing surfaces stay local to the operation; hidden surfaces never animate. */
.top-progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 60; overflow: hidden; background: var(--subtle); pointer-events: none; }
.top-progress::after { content: ""; display: block; width: 38%; height: 100%; background: var(--teal); transform: translateX(-110%); animation: loading-travel 1.25s ease-in-out infinite; }
.inline-spinner, .operation-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; flex: none; vertical-align: -.1em; }
.inline-spinner { margin-right: 8px; animation: loading-turn .8s linear infinite; }
.operation-spinner { width: 12px; height: 12px; visibility: hidden; }
button[data-loading="true"] { cursor: wait; opacity: 1; }
button[data-loading="true"] .operation-spinner { visibility: visible; animation: loading-turn .8s linear infinite; }
.operation-status { display: flex; align-items: center; gap: 10px 18px; padding: 9px 14px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--muted); font-size: 13px; line-height: 1.6; }
#operation-message { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.operation-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.operation-actions button { min-height: 34px; padding-block: 5px; font-size: 12px; }
.operation-status[data-state="delayed"], .operation-status[data-state="stalled"] { color: var(--amber); background: var(--amber-bg); }
.operation-status[data-state="error"] { color: var(--red); background: var(--red-bg); border-color: currentColor; }
.operation-status[data-state="success"] { color: var(--green); background: var(--green-bg); }
.skeleton-surface { position: relative; overflow: hidden; isolation: isolate; }
.skeleton-surface::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(100deg, transparent 25%, var(--skeleton-shine) 50%, transparent 75%); transform: translateX(-110%); animation: loading-travel 1.6s ease-in-out infinite; }
.skeleton-line { display: block; width: 100%; height: 12px; margin-bottom: 10px; border-radius: 4px; background: var(--skeleton-base); }
.skeleton-name { width: 58%; height: 15px; margin-bottom: 13px; }
.skeleton-medium { width: 62%; }
.skeleton-long { width: 88%; }
.skeleton-short { width: 25%; }
.skeleton-label { width: 23%; height: 13px; margin-bottom: 17px; }
.skeleton-badge { width: 38%; height: 21px; margin: 13px 0 0; }
.queue-skeleton { min-height: 345px; }
.skeleton-card { padding: 15px 12px; border-bottom: 1px solid var(--line); }
.skeleton-card:last-child { border-bottom: 0; }
.draft-skeleton { padding: 34px 32px 30px; min-height: 650px; }
.skeleton-case-heading { padding-bottom: 24px; }
.skeleton-title { height: 26px; width: 43%; margin-bottom: 14px; }
.skeleton-heading-copy { height: 17px; width: 85%; margin-bottom: 13px; }
.skeleton-request { padding: 24px 0 15px; border-block: 1px solid var(--line); }
.skeleton-mail { padding-top: 26px; }
.skeleton-mail > .skeleton-label { margin-top: 24px; }
.skeleton-editor { min-height: 220px; padding: 23px 16px; border: 1px solid var(--line); border-radius: 7px; }
.skeleton-editor .skeleton-line { margin-bottom: 15px; }
@keyframes loading-turn { to { transform: rotate(360deg); } }
@keyframes loading-travel { to { transform: translateX(275%); } }
@media (max-width: 760px) {
  .operation-status { align-items: start; flex-wrap: wrap; }
  .operation-actions { margin-left: auto; }
  .draft-skeleton { padding: 28px 20px 24px; min-height: 590px; }
  .queue-skeleton { min-height: 130px; overflow: hidden; }
  .queue-skeleton .skeleton-card:not(:first-child) { display: none; }
  .skeleton-title { width: 60%; }
  .skeleton-label { width: 35%; }
}

@media (prefers-reduced-motion: reduce) {
  .top-progress::after, .skeleton-surface::after, .inline-spinner, button[data-loading="true"] .operation-spinner { animation: none; }
  .top-progress::after { width: 100%; transform: none; opacity: .6; }
  .skeleton-surface::after { display: none; }
}

/* Review workspace: the decision leads, with source detail available on demand. */
.topbar { min-height: 64px; padding: 10px 28px; gap: 20px; }
.brand-mark { width: 30px; height: 33px; font-size: 22px; }
.brand { gap: 9px; font-size: 13px; }
.brand small { font-size: 8px; margin-top: 4px; }
.app-name { font-size: 13px; padding-left: 20px; }
.test-mode { border: 1px solid var(--line); padding: 3px 9px; border-radius: 5px; color: var(--teal); background: var(--subtle); font-size: 11px; font-weight: 650; white-space: nowrap; }
.delivery-details { position: relative; margin: 0 0 0 -12px; }
.delivery-details > summary { padding: 5px 4px; min-height: 24px; font-size: 11px; font-weight: 500; }
.delivery-details[open] { z-index: 12; }
.delivery-popover { position: absolute; left: -90px; top: calc(100% + 8px); width: 320px; padding: 13px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 5px 18px var(--popover-shadow); font-size: 13px; overflow-wrap: anywhere; }
.delivery-popover > p { margin: 0; }
.delivery-popover > p.hint { margin-top: 8px; font-size: 11px; }
main { max-width: 1560px; padding: 20px 28px 36px; }
.desk-heading { margin-bottom: 18px; }
.desk-heading h1 { font-size: 23px; }
.desk-heading p { margin-top: 3px; font-size: 12px; }
.workspace-tools { gap: 12px; }
.workspace-tools button { min-height: 36px; padding: 7px 11px; font-size: 12px; }
.sync-strip { margin-bottom: 18px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); gap: 16px; align-items: flex-start; color: var(--ink); }
.sync-information { flex: 1; }
.sync-overview { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
#pilot-sync-state { font-size: 12px; font-weight: 600; }
.sync-warning { margin-top: 5px; font-size: 12px; line-height: 1.6; color: var(--amber); max-width: 110ch; }
#sync-details summary { display: inline-block; min-height: 24px; font-size: 11px; padding: 3px 0; }
#sync-details summary::before { content: "+ "; }
#sync-details[open] summary::before { content: "− "; }
#sync-details[open] { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 5px; }
#pilot-sync-note { max-width: 110ch; white-space: pre-line; color: var(--muted); }
#pilot-sync-note dl { display: grid; grid-template-columns: minmax(130px, 200px) minmax(0, 1fr); gap: 4px 16px; margin-top: 9px; font-size: 11px; white-space: normal; }
#pilot-sync-note dt, #pilot-sync-note dd { margin: 0; line-height: 1.7; font-size: 11px; }
#pilot-sync-note dt { font-weight: 500; }
#pilot-sync-note dd { font-weight: 600; color: var(--ink); }
#pilot-sync { min-height: 34px; font-size: 12px; padding: 6px 10px; flex: none; }
.sync-strip.error { border-color: var(--error-border); }
.workspace { grid-template-columns: 304px minmax(0, 1fr); gap: 20px; }
.queue-panel { padding: 16px 12px 10px; top: 84px; max-height: calc(100dvh - 104px); border-radius: 10px; }
.queue-heading { margin: 0 4px 6px; gap: 8px; align-items: baseline; }
.queue-heading h2 { font-size: 15px; }
#queue-scope { text-align: right; font-size: 11px; }
.queue-metrics { display: flex; flex-wrap: wrap; gap: 5px 16px; padding: 0 4px 14px; color: var(--muted); font-size: 11px; }
.queue-metrics strong { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 650; }
.search-field { margin-bottom: 10px; }
.search-field input { height: 39px; padding-right: 54px; }
.search-field input::-webkit-search-cancel-button { display: none; }
.clear-search { position: absolute; right: 4px; top: 3px; min-height: 32px; padding: 4px 6px; font-size: 11px; }
.quick-filters { display: flex; gap: 3px; padding: 3px; border-radius: 7px; background: var(--subtle); margin-bottom: 10px; }
.quick-filters button { flex: 1; min-height: 32px; padding: 6px 5px; font-size: 11px; line-height: 1.3; color: var(--muted); border-radius: 5px; white-space: nowrap; }
.quick-filters button[aria-pressed="true"] { color: var(--teal); background: var(--surface); border-color: var(--line); font-weight: 650; }
.queue-selects { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: 7px; }
.queue-selects > div { min-width: 0; }
.queue-selects select { padding: 8px 5px; font-size: 11px; min-height: 36px; }
.queue-description { margin: 10px 4px 6px; font-size: 11px; line-height: 1.5; }
.job-list { padding: 1px 7px; overscroll-behavior: contain; }
.job { margin: 4px 0; padding: 12px 10px; border-radius: 7px; }
.job.selected { box-shadow: inset 3px 0 0 var(--teal); }
.job-name { font-size: 13px; line-height: 1.45; }
.job-equipment { font-size: 12px; margin: 4px 0 8px; }
.job-bottom { font-size: 10px; gap: 6px; }
.job-bottom .badge { font-size: 10px; padding: 3px 6px; }
.job-time, .job-activity { display: block; font-size: 10px; line-height: 1.5; color: var(--muted); margin-top: 6px; font-variant-numeric: tabular-nums; }
.queue-footer { margin-top: 10px; padding-top: 10px; font-size: 11px; }
.draft-panel { border-radius: 10px; }
.draft-detail { padding: 24px 26px 0; }
.case-heading { gap: 16px; }
.case-heading > div:first-child { min-width: 0; flex: 1; }
#job-title { font-size: 23px; line-height: 1.3; letter-spacing: -.3px; }
#equipment-name { font-size: 15px; margin-top: 5px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#draft-subtitle { font-size: 11px; line-height: 1.6; margin-top: 4px; }
.case-tools { max-width: 190px; gap: 5px; }
.case-tools .text-button { font-size: 11px; min-height: 30px; }
.case-freshness { margin-top: 8px; }
.listing-details { margin: 6px 0 16px; }
.listing-details > summary { padding-block: 4px; font-size: 11px; font-weight: 500; }
.listing-details p { font-size: 13px; }
.eyebrow { color: var(--teal); text-transform: uppercase; letter-spacing: .7px; font-size: 10px; font-weight: 700; }
.recommendation { padding: 17px 18px; background: var(--subtle); border: 1px solid var(--line); border-left: 3px solid var(--teal); border-radius: 7px; overflow-wrap: anywhere; }
.recommendation h3 { font-size: 18px; line-height: 1.45; margin: 5px 0 7px; letter-spacing: -.2px; }
#recommendation-reason { font-size: 14px; line-height: 1.7; max-width: 80ch; }
.recommendation-next { margin-top: 10px; font-size: 12px; line-height: 1.7; color: var(--teal); font-weight: 600; }
.recommendation-findings { margin: 10px 0 0; padding-left: 18px; font-size: 12px; line-height: 1.7; }
#findings-details { margin-top: 8px; font-size: 12px; }
#findings-details > summary { padding: 4px 0; font-size: 12px; }
.recommendation-missing { margin-top: 10px; font-size: 12px; line-height: 1.7; color: var(--amber); }
#recommendation-communication { margin-top: 8px; }
.case-dimensions { display: flex; gap: 12px 28px; flex-wrap: wrap; padding: 11px 1px 15px; border-bottom: 1px solid var(--line); }
.case-dimensions p { display: flex; gap: 7px; font-size: 11px; line-height: 1.6; }
.case-dimensions p > span { color: var(--muted); }
.case-dimensions strong { font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.section-heading h3 { margin: 0; font-size: 13px; }
.section-heading .text-button { min-height: 30px; padding: 5px 0 5px 8px; font-size: 11px; flex: none; }
.conversation-glance { padding: 16px 0 12px; }
.glance-timeline { list-style: none; padding: 0; margin: 10px 0 0; }
.glance-timeline > li { padding: 0 0 14px 17px; border-left: 1px solid var(--line); position: relative; margin-left: 4px; font-size: 12px; line-height: 1.65; }
.glance-timeline > li::before { content: ""; position: absolute; width: 7px; height: 7px; left: -4px; top: 5px; border-radius: 50%; background: var(--teal); border: 1px solid var(--surface); }
.glance-timeline > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.glance-timeline h4, .glance-label { font-size: 11px; font-weight: 650; margin: 0 0 3px; }
.glance-heading { display: flex; align-items: baseline; gap: 7px; margin-bottom: 3px; flex-wrap: wrap; }
.glance-heading strong { font-size: 11px; font-weight: 650; }
.glance-timeline p { margin: 0; max-width: 90ch; color: var(--muted); white-space: pre-line; overflow-wrap: anywhere; }
.glance-timeline time { color: var(--muted); font-size: 10px; font-weight: 400; margin-left: 6px; }
.materials-details, .buyer-request { border: 0; border-top: 1px solid var(--line); border-radius: 0; margin: 0; padding: 7px 0; }
.materials-details > summary, .buyer-request > summary { font-size: 12px; padding: 8px 0; }
#review-materials { padding: 2px 0 10px; font-size: 12px; line-height: 1.7; }
#review-materials p { margin-top: 7px; max-width: 85ch; }
#review-materials h4 { font-size: 12px; margin: 8px 0 3px; }
#review-materials ul { padding-left: 18px; margin: 6px 0; }
#review-materials li { margin: 6px 0; }
#review-materials .hint { font-size: 11px; }
#request-copy { max-height: none; overflow: visible; padding-right: 0; font-size: 13px; line-height: 1.8; margin-top: 4px; }
.buyer-request .request-provenance { margin-bottom: 10px; }
.attention { font-size: 12px; padding: 10px 12px; margin-top: 12px; }
.no-draft { padding: 19px 0 18px; }
.no-draft h3 { font-size: 17px; margin-bottom: 7px; }
.no-draft p { font-size: 13px; line-height: 1.75; }
.blocked-actions { margin-top: 14px; gap: 8px; }
.blocked-actions button { font-size: 12px; min-height: 38px; }
.assessment-details { margin-top: 14px; padding-top: 7px; }
.assessment-details > summary { font-size: 12px; }
.mail-headers { margin: 18px 0; font-size: 12px; }
.mail-headers label { margin-top: 13px; }
#subject { font-size: 13px; }
.editor-toolbar { gap: 8px; flex-wrap: wrap; }
.editor-toolbar > label { margin-right: auto; }
.editor-toolbar button { font-size: 11px; min-height: 32px; }
.mail-editor, .mail-preview { font-size: 14px; line-height: 1.8; min-height: 280px; background: var(--surface); }
.editor-meta { font-size: 11px; margin: 8px 0 18px; }
.review-actions { margin: 0 -26px; padding: 14px 20px 18px; border-radius: 0 0 10px 10px; background: var(--surface); }
.review-actions button { font-size: 12px; }
.save-state { margin-bottom: 9px; font-size: 11px; }
#action-help { font-size: 11px; line-height: 1.7; }
.next-draft { font-size: 12px; margin: 12px 0; min-height: 36px; }
.mobile-back { display: none; }
.context-backdrop { position: fixed; inset: 0; z-index: 35; background: var(--backdrop); }
body.context-open { overflow: hidden; }
.context-panel { width: min(920px,94vw); background: var(--surface); box-shadow: -12px 0 36px #112b3324; }
.context-panel.expanded, .context-panel[data-expanded="true"] { width: min(1280px,calc(100vw - 32px)); }
.context-heading { flex: none; padding: 18px 24px 14px; align-items: start; }
.context-heading h2 { font-size: 18px; margin-bottom: 4px; }
.context-heading-actions { display: flex; align-items: center; gap: 4px; flex: none; }
.context-heading-actions button { min-height: 34px; padding: 6px 10px; font-size: 12px; }
.context-tabs { flex: none; padding-inline: 16px; }
.context-tabs button { min-height: 44px; font-size: 12px; }
.context-content { min-height: 0; padding: 20px 24px 36px; overscroll-behavior: contain; overflow-y: auto; overflow-x: hidden; }
.context-content > section { max-width: 1120px; margin-inline: auto; }
.context-content h3 { font-size: 14px; }
.context-content p, .context-content dd, .context-content li { max-width: 100ch; }
.history-summary { background: var(--subtle); color: var(--teal); padding: 10px 13px; margin-bottom: 18px; font-size: 12px; }
.message { position: relative; margin: 0 0 20px 4px; padding: 0 0 20px 20px; border: 0; border-left: 1px solid var(--line); }
.message::before { content: ""; position: absolute; width: 7px; height: 7px; left: -4px; top: 7px; border-radius: 50%; background: var(--teal); }
.message:last-child { border-left-color: transparent; }
.message h3 { font-size: 14px; line-height: 1.5; }
.message .hint, .message-subject { font-size: 11px; }
.message-subject { margin: 6px 0 9px; }
.message-body { font-size: 13px; line-height: 1.8; max-width: 100ch; }
.message-preview { font-size: 13px; line-height: 1.75; color: var(--muted); white-space: pre-line; overflow-wrap: anywhere; }
.message-heading { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.message-direction, .message-role { display: inline-flex; font-size: 10px; line-height: 1.6; color: var(--teal); background: var(--subtle); padding: 2px 6px; border-radius: 4px; margin-bottom: 5px; }
.original-email { margin: 12px 0 0; background: var(--surface); border-color: var(--line); }
.original-email > summary { font-size: 12px; padding: 10px 12px; background: var(--subtle); }
.plain-source { padding: 10px 12px; border-color: var(--line); }
.plain-source > summary { font-size: 12px; }
.source-excerpt { max-height: none; overflow: visible; font-size: 12px; line-height: 1.8; }
.research-header { margin-bottom: 16px; padding-bottom: 16px; border-color: var(--line); }
.research-header h3 { margin-bottom: 6px; }
.research-header p { font-size: 12px; line-height: 1.75; }
.fact { border: 1px solid var(--line); border-radius: 8px; padding: 16px; margin-bottom: 12px; background: var(--surface); overflow-wrap: anywhere; }
.fact h3 { margin: 0 0 7px; font-size: 14px; line-height: 1.55; }
.fact p { font-size: 12px; line-height: 1.8; }
.fact .hint { font-size: 11px; margin-top: 7px; }
.fact details { margin: 10px 0 0; }
.fact summary { font-size: 12px; }
.product-source > a { color: var(--teal); font-size: 13px; }
.source-scope { background: var(--subtle); color: var(--teal); font-size: 11px; padding: 7px 10px; margin-top: 9px; }
.verification-checks { padding: 13px 16px; background: var(--amber-bg); border-color: var(--line); }
.verification-checks h4 { font-size: 12px; }
.verification-checks li { font-size: 12px; line-height: 1.7; }
.assessment-summary, .assessment-overview { padding: 15px 17px; background: var(--subtle); border: 1px solid var(--line); border-radius: 7px; margin-bottom: 14px; overflow-wrap: anywhere; }
.assessment-summary h3, .assessment-overview h3 { margin: 0 0 7px; font-size: 17px; }
.assessment-overview h4 { margin: 12px 0 4px; font-size: 12px; }
.assessment-summary p, .assessment-summary li, .assessment-overview p { font-size: 13px; line-height: 1.75; }
#brief dt { color: var(--teal); font-size: 12px; margin-top: 16px; }
#brief dd { color: var(--muted); font-size: 13px; line-height: 1.8; max-width: 92ch; }
#brief details { padding: 10px 0; margin: 0; border-bottom: 1px solid var(--line); }
#brief details > summary { padding: 5px 0; }
#crm, #meta { font-size: 12px; }
.context-content > section > details { border-top: 1px solid var(--line); padding-top: 8px; }

@media (max-width: 1100px) {
  .workspace { grid-template-columns: 280px minmax(0,1fr); gap: 16px; }
  .topbar { gap: 14px; padding-inline: 22px; }
  .app-name { display: none; }
  main { padding-inline: 20px; }
  .draft-detail { padding: 22px 22px 0; }
  .review-actions { margin-inline: -22px; padding-inline: 18px; }
  .case-heading { flex-direction: column; gap: 10px; }
  .case-tools { flex-direction: row; align-items: center; max-width: none; gap: 12px; }
  .case-tools .text-button { padding-block: 1px; }
}
@media (max-width: 760px) {
  .topbar { min-height: 60px; padding: 10px 14px; gap: 7px 10px; flex-wrap: wrap; }
  .brand { font-size: 11px; gap: 7px; }
  .brand-mark { width: 27px; height: 30px; font-size: 20px; }
  .brand small { font-size: 7px; letter-spacing: 1.6px; }
  .session { gap: 5px; }
  .session button { min-height: 32px; padding: 5px; font-size: 11px; }
  .test-mode { order: initial; width: auto; max-width: none; padding: 3px 7px; font-size: 10px; }
  .delivery-details { order: 3; margin-left: 0; }
  .delivery-details > summary { font-size: 10px; padding: 1px 0; }
  .delivery-popover { position: fixed; left: 12px; top: 80px; width: min(320px,calc(100vw - 24px)); }
  main { padding: 14px 12px 24px; }
  .desk-heading { margin-bottom: 14px; gap: 8px; }
  .desk-heading h1 { font-size: 21px; }
  .desk-heading p { font-size: 11px; max-width: 32ch; }
  .workspace-tools { gap: 4px; }
  .workspace-tools button { font-size: 11px; padding: 6px 8px; min-height: 36px; gap: 5px; }
  .workspace-tools .hint { font-size: 10px; max-width: 130px; }
  .sync-strip { padding: 10px; margin-bottom: 14px; gap: 8px; }
  .sync-overview { display: block; }
  #pilot-sync-state, #sync-last, .sync-warning { font-size: 11px; }
  #pilot-sync { font-size: 11px; padding: 5px 7px; min-height: 36px; max-width: 130px; gap: 5px; }
  .workspace { grid-template-columns: minmax(0,1fr); gap: 14px; }
  .queue-panel { position: static; max-height: none; padding: 15px 12px 10px; }
  .queue-heading h2 { font-size: 16px; }
  .queue-metrics { font-size: 12px; }
  .quick-filters button { min-height: 40px; font-size: 12px; }
  .queue-selects select { min-height: 40px; font-size: 12px; padding-inline: 8px; }
  .search-field input { height: 44px; font-size: 16px; }
  .search-field svg { top: 14px; }
  .clear-search { min-height: 36px; top: 4px; }
  .queue-description { display: block; font-size: 11px; margin-bottom: 6px; }
  .queue-footer { display: block; }
  .job-list { max-height: none; }
  .job { padding: 14px 12px; }
  .job-name { font-size: 14px; }
  .job-equipment { font-size: 13px; -webkit-line-clamp: 2; }
  .job-bottom, .job-time, .job-activity { font-size: 11px; }
  .job-bottom .badge { font-size: 11px; }
  #desk[data-mobile-view="case"] .queue-panel { display: none; }
  #desk:not([data-mobile-view="case"]) .draft-panel { display: none; }
  .mobile-back { display: inline-flex; min-height: 36px; padding: 2px 0; font-size: 12px; margin-bottom: 13px; }
  .mobile-back .icon { transform: rotate(180deg); width: 14px; height: 14px; }
  .draft-detail { padding: 16px 17px 0; }
  #job-title { font-size: 22px; }
  #equipment-name { font-size: 14px; }
  .case-tools { gap: 12px; }
  .case-tools .text-button { font-size: 11px; }
  .listing-details { margin-bottom: 13px; }
  .recommendation { padding: 14px; }
  .recommendation h3 { font-size: 17px; }
  #recommendation-reason { font-size: 13px; }
  .case-dimensions { gap: 7px 18px; padding-block: 10px 12px; }
  .case-dimensions p { font-size: 10px; gap: 5px; }
  .section-heading { align-items: baseline; gap: 8px; }
  .section-heading h3 { font-size: 12px; }
  .section-heading .text-button { font-size: 10px; min-height: 32px; }
  .glance-timeline > li { font-size: 12px; }
  .glance-timeline time { display: block; margin-left: 0; }
  .review-actions { margin-inline: -17px; padding-inline: 14px; }
  .review-actions button { min-height: 42px; }
  .action-row { gap: 6px; }
  .action-row .primary { margin-left: 0; }
  .mail-editor, .mail-preview { font-size: 16px; min-height: 300px; }
  .editor-meta { font-size: 10px; }
  .context-panel, .context-panel.expanded, .context-panel[data-expanded="true"] { width: 100vw; border-left: 0; }
  .context-heading { padding: 16px 14px 12px; gap: 8px; }
  .context-heading h2 { font-size: 16px; }
  .context-heading .hint { font-size: 10px; }
  .context-heading-actions button { min-height: 36px; padding: 5px 8px; font-size: 11px; }
  #expand-context { display: none; }
  .context-tabs { padding-inline: 6px; gap: 0; }
  .context-tabs button { min-height: 44px; padding-inline: 3px; font-size: 11px; }
  .context-content { padding: 16px 14px 28px; }
  .message { padding-left: 14px; }
  .message h3 { font-size: 13px; }
  .message-body, .message-preview { font-size: 12px; }
  .fact { padding: 13px; }
  .original-email > summary { padding: 10px; }
  #draft-panel { scroll-margin-top: 80px; }
  .draft-skeleton { padding: 24px 18px; }
}


/* Short landscape/zoomed viewports must retain a usable case list below its tools. */
@media (min-width: 761px) and (max-height: 600px) {
  .queue-panel { position: static; max-height: none; }
  .job-list { max-height: 360px; }
}

/* Palette choices affect presentation only, including loading and evidence surfaces. */
.brand { color: var(--brand); }
:root[data-palette="navy"] {
  --ink-light: #182B3A;
  --muted-light: #526579;
  --teal-light: #16324F;
  --teal-hover-light: #132c46;
  --brand-light: #0F766E;
  --canvas-light: #F5F8FA;
  --surface-light: #FFFFFF;
  --subtle-light: #f1f3f4;
  --line-light: #d5d9dc;
  --button-fill-light: #16324F;
  --button-hover-light: #132c46;
  --button-ink-light: #FFFFFF;
  --skeleton-base-light: #eaeced;
  --skeleton-shine-light: #ffffffa6;
  --selection-bg-light: #E8F3F2;
  --selection-ink-light: #182B3A;
  --control-active-light: #e1e4e8;
  --input-border-light: #808a93;
  --placeholder-light: #526579;
  --focus-light: #2458a6;
  --hover-border-light: #808a93;
  --hover-bg-light: #f7f8f9;
  --selected-border-light: #16324F;
  --selected-bg-light: #E8F3F2;
  --secondary-ink-light: #526579;
  --badge-ink-light: #526579;
  --empty-ink-light: #526579;
  --ink-dark: #E5EEF7;
  --muted-dark: #A9BDCE;
  --teal-dark: #A9CDEF;
  --teal-hover-dark: #b3d3f1;
  --brand-dark: #8DCDC7;
  --canvas-dark: #111B26;
  --surface-dark: #1A2A3A;
  --subtle-dark: #27394a;
  --line-dark: #475564;
  --button-fill-dark: #A9CDEF;
  --button-hover-dark: #b3d3f1;
  --button-ink-dark: #102338;
  --skeleton-base-dark: #3a4958;
  --skeleton-shine-dark: #ffffff17;
  --selection-bg-dark: #243F54;
  --selection-ink-dark: #E5EEF7;
  --control-active-dark: #304559;
  --input-border-dark: #8a96a2;
  --placeholder-dark: #A9BDCE;
  --focus-dark: #91c2ff;
  --hover-border-dark: #8a96a2;
  --hover-bg-dark: #2d3f52;
  --selected-border-dark: #A9CDEF;
  --selected-bg-dark: #243F54;
  --secondary-ink-dark: #A9BDCE;
  --badge-ink-dark: #A9BDCE;
  --empty-ink-dark: #A9BDCE;
}
:root[data-palette="cobalt"] {
  --ink-light: #1E293B;
  --muted-light: #526174;
  --teal-light: #1D4ED8;
  --teal-hover-light: #1a45be;
  --brand-light: #175662;
  --canvas-light: #F5F7FB;
  --surface-light: #FFFFFF;
  --subtle-light: #f1f4fd;
  --line-light: #d7d8dc;
  --button-fill-light: #1D4ED8;
  --button-hover-light: #1a45be;
  --button-ink-light: #FFFFFF;
  --skeleton-base-light: #ebeced;
  --skeleton-shine-light: #ffffffa6;
  --selection-bg-light: #EBF1FF;
  --selection-ink-light: #1E293B;
  --control-active-light: #e2e8fa;
  --input-border-light: #838993;
  --placeholder-light: #526174;
  --focus-light: #2458a6;
  --hover-border-light: #838993;
  --hover-bg-light: #f7f9fe;
  --selected-border-light: #1D4ED8;
  --selected-bg-light: #EBF1FF;
  --secondary-ink-light: #526174;
  --badge-ink-light: #526174;
  --empty-ink-light: #526174;
  --ink-dark: #E6EDF7;
  --muted-dark: #B4C0D2;
  --teal-dark: #A9C7FF;
  --teal-hover-dark: #b3ceff;
  --brand-dark: #8DC6CE;
  --canvas-dark: #111827;
  --surface-dark: #1E293B;
  --subtle-dark: #2b374d;
  --line-dark: #4a5464;
  --button-fill-dark: #A9C7FF;
  --button-hover-dark: #b3ceff;
  --button-ink-dark: #112346;
  --skeleton-base-dark: #3e4859;
  --skeleton-shine-dark: #ffffff17;
  --selection-bg-dark: #273C5E;
  --selection-ink-dark: #E6EDF7;
  --control-active-dark: #3d4c66;
  --input-border-dark: #8c95a2;
  --placeholder-dark: #B4C0D2;
  --focus-dark: #91c2ff;
  --hover-border-dark: #8c95a2;
  --hover-bg-dark: #303e54;
  --selected-border-dark: #A9C7FF;
  --selected-bg-dark: #273C5E;
  --secondary-ink-dark: #B4C0D2;
  --badge-ink-dark: #B4C0D2;
  --empty-ink-dark: #B4C0D2;
}
:root[data-palette="petrol"] {
  --ink-light: #292D2B;
  --muted-light: #606762;
  --teal-light: #115E59;
  --teal-hover-light: #0f534e;
  --brand-light: #175662;
  --canvas-light: #F6F5F1;
  --surface-light: #FFFFFF;
  --subtle-light: #f1f5f5;
  --line-light: #d8d9d9;
  --button-fill-light: #115E59;
  --button-hover-light: #0f534e;
  --button-ink-light: #FFFFFF;
  --skeleton-base-light: #ececec;
  --skeleton-shine-light: #ffffffa6;
  --selection-bg-light: #E5F0EC;
  --selection-ink-light: #292D2B;
  --control-active-light: #e0eae9;
  --input-border-light: #898c8a;
  --placeholder-light: #606762;
  --focus-light: #2458a6;
  --hover-border-light: #898c8a;
  --hover-bg-light: #f7f9f9;
  --selected-border-light: #115E59;
  --selected-bg-light: #E5F0EC;
  --secondary-ink-light: #606762;
  --badge-ink-light: #606762;
  --empty-ink-light: #606762;
  --ink-dark: #EDF1EB;
  --muted-dark: #B6C4BB;
  --teal-dark: #8DD3C9;
  --teal-hover-dark: #9bd8cf;
  --brand-dark: #8DD3C9;
  --canvas-dark: #18201E;
  --surface-dark: #24312D;
  --subtle-dark: #2d403b;
  --line-dark: #505b57;
  --button-fill-dark: #8DD3C9;
  --button-hover-dark: #9bd8cf;
  --button-ink-dark: #132D2B;
  --skeleton-base-dark: #44504b;
  --skeleton-shine-dark: #ffffff17;
  --selection-bg-dark: #2D4540;
  --selection-ink-dark: #EDF1EB;
  --control-active-dark: #344d47;
  --input-border-dark: #939b96;
  --placeholder-dark: #B6C4BB;
  --focus-dark: #91c2ff;
  --hover-border-dark: #939b96;
  --hover-bg-dark: #324641;
  --selected-border-dark: #8DD3C9;
  --selected-bg-dark: #2D4540;
  --secondary-ink-dark: #B6C4BB;
  --badge-ink-dark: #B6C4BB;
  --empty-ink-dark: #B6C4BB;
}
:root[data-palette="indigo"] {
  --ink-light: #252738;
  --muted-light: #606277;
  --teal-light: #4338CA;
  --teal-hover-light: #3b31b2;
  --brand-light: #175662;
  --canvas-light: #F6F6FA;
  --surface-light: #FFFFFF;
  --subtle-light: #f4f3fc;
  --line-light: #d8d8db;
  --button-fill-light: #4338CA;
  --button-hover-light: #3b31b2;
  --button-ink-light: #FFFFFF;
  --skeleton-base-light: #ebeced;
  --skeleton-shine-light: #ffffffa6;
  --selection-bg-light: #EEECFC;
  --selection-ink-light: #252738;
  --control-active-light: #e7e5f8;
  --input-border-light: #878892;
  --placeholder-light: #606277;
  --focus-light: #2458a6;
  --hover-border-light: #878892;
  --hover-bg-light: #f8f8fd;
  --selected-border-light: #4338CA;
  --selected-bg-light: #EEECFC;
  --secondary-ink-light: #606277;
  --badge-ink-light: #606277;
  --empty-ink-light: #606277;
  --ink-dark: #EFEEFA;
  --muted-dark: #BCBBD0;
  --teal-dark: #C3BDFF;
  --teal-hover-dark: #cac5ff;
  --brand-dark: #8DC6CE;
  --canvas-dark: #191924;
  --surface-dark: #272738;
  --subtle-dark: #35344a;
  --line-dark: #535363;
  --button-fill-dark: #C3BDFF;
  --button-hover-dark: #cac5ff;
  --button-ink-dark: #241A53;
  --skeleton-base-dark: #474757;
  --skeleton-shine-dark: #ffffff17;
  --selection-bg-dark: #38344F;
  --selection-ink-dark: #EFEEFA;
  --control-active-dark: #494864;
  --input-border-dark: #9594a3;
  --placeholder-dark: #BCBBD0;
  --focus-dark: #91c2ff;
  --hover-border-dark: #9594a3;
  --hover-bg-dark: #3b3a52;
  --selected-border-dark: #C3BDFF;
  --selected-bg-dark: #38344F;
  --secondary-ink-dark: #BCBBD0;
  --badge-ink-dark: #BCBBD0;
  --empty-ink-dark: #BCBBD0;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: var(--ink-dark);
  --muted: var(--muted-dark);
  --teal: var(--teal-dark);
  --teal-hover: var(--teal-hover-dark);
  --brand: var(--brand-dark);
  --canvas: var(--canvas-dark);
  --surface: var(--surface-dark);
  --subtle: var(--subtle-dark);
  --line: var(--line-dark);
  --amber: var(--amber-dark);
  --amber-bg: var(--amber-bg-dark);
  --red: var(--red-dark);
  --red-bg: var(--red-bg-dark);
  --green: var(--green-dark);
  --green-bg: var(--green-bg-dark);
  --button-fill: var(--button-fill-dark);
  --button-hover: var(--button-hover-dark);
  --button-ink: var(--button-ink-dark);
  --skeleton-base: var(--skeleton-base-dark);
  --skeleton-shine: var(--skeleton-shine-dark);
  --selection-bg: var(--selection-bg-dark);
  --selection-ink: var(--selection-ink-dark);
  --control-active: var(--control-active-dark);
  --input-border: var(--input-border-dark);
  --placeholder: var(--placeholder-dark);
  --focus: var(--focus-dark);
  --hover-border: var(--hover-border-dark);
  --hover-bg: var(--hover-bg-dark);
  --selected-border: var(--selected-border-dark);
  --selected-bg: var(--selected-bg-dark);
  --secondary-ink: var(--secondary-ink-dark);
  --badge-ink: var(--badge-ink-dark);
  --info-bg: var(--info-bg-dark);
  --info-ink: var(--info-ink-dark);
  --empty-ink: var(--empty-ink-dark);
  --success-border: var(--success-border-dark);
  --error-border: var(--error-border-dark);
  --backdrop: var(--backdrop-dark);
  --dialog-backdrop: var(--dialog-backdrop-dark);
  --popover-shadow: var(--popover-shadow-dark);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ink: var(--ink-dark);
    --muted: var(--muted-dark);
    --teal: var(--teal-dark);
    --teal-hover: var(--teal-hover-dark);
    --brand: var(--brand-dark);
    --canvas: var(--canvas-dark);
    --surface: var(--surface-dark);
    --subtle: var(--subtle-dark);
    --line: var(--line-dark);
    --amber: var(--amber-dark);
    --amber-bg: var(--amber-bg-dark);
    --red: var(--red-dark);
    --red-bg: var(--red-bg-dark);
    --green: var(--green-dark);
    --green-bg: var(--green-bg-dark);
    --button-fill: var(--button-fill-dark);
    --button-hover: var(--button-hover-dark);
    --button-ink: var(--button-ink-dark);
    --skeleton-base: var(--skeleton-base-dark);
    --skeleton-shine: var(--skeleton-shine-dark);
    --selection-bg: var(--selection-bg-dark);
    --selection-ink: var(--selection-ink-dark);
    --control-active: var(--control-active-dark);
    --input-border: var(--input-border-dark);
    --placeholder: var(--placeholder-dark);
    --focus: var(--focus-dark);
    --hover-border: var(--hover-border-dark);
    --hover-bg: var(--hover-bg-dark);
    --selected-border: var(--selected-border-dark);
    --selected-bg: var(--selected-bg-dark);
    --secondary-ink: var(--secondary-ink-dark);
    --badge-ink: var(--badge-ink-dark);
    --info-bg: var(--info-bg-dark);
    --info-ink: var(--info-ink-dark);
    --empty-ink: var(--empty-ink-dark);
    --success-border: var(--success-border-dark);
    --error-border: var(--error-border-dark);
    --backdrop: var(--backdrop-dark);
    --dialog-backdrop: var(--dialog-backdrop-dark);
    --popover-shadow: var(--popover-shadow-dark);
  }
}

/* The comparison controls follow dashboard content and never cover review actions. */
.appearance-controls { margin-top: 24px; padding: 18px 20px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; }
.appearance-heading { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.appearance-heading h2 { font-size: 14px; }
.appearance-heading p { color: var(--muted); font-size: 12px; }
.appearance-group { border: 0; padding: 0; margin: 0; min-width: 0; }
.appearance-group + .appearance-group { margin-top: 14px; }
.appearance-group legend { font-size: 12px; font-weight: 600; padding: 0; margin-bottom: 7px; }
.appearance-options { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.appearance-options button { min-height: 40px; background: var(--surface); border: 1px solid var(--input-border); color: var(--ink); font-size: 12px; padding: 8px 12px; }
.appearance-options button:hover { background: var(--hover-bg); }
.appearance-options button[aria-pressed="true"] { background: var(--selected-bg); border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal); font-weight: 650; }
.palette-swatch { width: 14px; height: 14px; border-radius: 50%; flex: none; background: var(--swatch); outline: 1px solid var(--input-border); outline-offset: 2px; }
.palette-option[data-palette-choice="original"] { --swatch: #175662; }
.palette-option[data-palette-choice="navy"] { --swatch: #16324f; }
.palette-option[data-palette-choice="cobalt"] { --swatch: #1d4ed8; }
.palette-option[data-palette-choice="petrol"] { --swatch: #115e59; }
.palette-option[data-palette-choice="indigo"] { --swatch: #4338ca; }
@media (max-width: 760px) {
  .appearance-controls { padding: 16px; margin-top: 18px; }
  .appearance-heading { display: block; }
  .appearance-heading p { margin-top: 4px; }
  .appearance-options button { min-height: 44px; }
}