/* Shared finishing layer. Load after component and polish styles.
   This changes focus, reading contrast and specific small controls, not the
   approved orbital field, layout or motion preference. */
:root { --text-3: #65645c; --pc-focus: #565347; }
:root[data-theme="dark"] { --text-3: #a6ad9f; --pc-focus: #c5d4b7; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --text-3: #a6ad9f; --pc-focus: #c5d4b7; }
}
body :is(button, a, input, select, textarea, summary, [role="button"], [role="switch"], [role="link"]):focus-visible,
body table.mapping input:focus-visible,
body .strict-add input:focus-visible,
body .strict-alias:focus-visible,
body .modal input:focus-visible {
  outline: 2px solid var(--pc-focus);
  outline-offset: 3px;
}
body .badge, body .pro-tag, body .drawer-section,
body.pro #sidebar .drawer-section, body.pro .sb-note,
body .receipt-table td:nth-child(2), body .receipt-table td:nth-child(3),
body .receipt-stats dt, body .receipt-caption, body .receipt-table th,
body .receipt-transcript summary, body .receipt-role, body .receipt-msg, body .strict-sub,
body #sb-list .conv-meta, body.pro #sb-list .conv-meta,
body .conv-meta, body .sb-client-time, body.pro .sb-client-time,
body .job-status, body .chip-file .meta, body .pdf-page-label,
body .pdf-modal-note, body .usage-row small, body #cb-mappings,
body .receipt-fidelity, body .setting-link small {
  font-size: 12px;
  line-height: 1.5;
}
body .receipt-table td:nth-child(3) { white-space: normal; overflow-wrap: anywhere; }
body .doc-card-sub { color: var(--text-2); font-size: 12px; line-height: 1.5; }
body .strict-sub, body .receipt-fidelity, body .setting-row small { font-size: 13px; }
body .drawer-section, body.pro #sidebar .drawer-section { letter-spacing: .055em; }
body .chip-file .meta, body .pdf-modal-note { letter-spacing: normal; }
@media (pointer: coarse) {
  body .msg-act, body .conv-menu, body .receipt-dl, body .chip-toggle,
  body .chip button, body .strict-add button, body .strict-pages,
  body .toggle button { min-height: 44px; min-width: 44px; }
  body .strict-alias, body .strict-add input, body table.mapping input,
  body .modal input, body .dlg-input { min-height: 44px; font-size: 16px; }
}
@media (forced-colors: active) {
  body :is(button, a, input, select, textarea, summary, [role="button"], [role="switch"], [role="link"]):focus-visible { outline-color: Highlight; }
  body .switch { border: 1px solid ButtonText; }
}

/* Edited document cards follow the shared theme and focus colors. */
body .doc-preview summary { color: var(--text-2); font-size: 12px; }
body .strict-row.locked { opacity: 1; }
body .strict-row.locked .switch { opacity: .65; }
/* Reading view is its own answer surface: marks and links must follow that
   surface's foreground rather than the surrounding application's text token. */
body .pc-reading .bubble .restored,
body .pc-reading .bubble .math-restored,
body .pc-failed-run .bubble .restored,
body .pc-failed-run .bubble .math-restored {
  color: inherit;
  border-bottom-color: color-mix(in srgb, currentColor 55%, transparent);
  text-decoration-color: currentColor;
}
body .pc-reading .bubble a,
body .pc-reading .bubble mark { color: inherit; }
body .pc-reading .bubble mark:not(.restored) { background: color-mix(in srgb, currentColor 10%, transparent); }
body .pc-reading .bubble { --pc-focus: var(--bubble-ai-text); }
body .pc-reading .bubble::selection,
body .pc-reading .bubble ::selection { background: color-mix(in srgb, currentColor 22%, transparent); }

/* Document cards use their actual reading surface. Pro desktop intentionally
   keeps a paper-colored answer, while the other layouts use themed cards. */
body .doc-card {
  --pc-doc-text: var(--text);
  --pc-doc-muted: var(--text-2);
  --pc-doc-border: var(--border);
  color: var(--pc-doc-text);
}
body .doc-card .doc-card-sub,
body .doc-card .doc-card-note,
body .doc-card .doc-preview summary { color: var(--pc-doc-muted); }
body .doc-card .doc-card-note { border-color: var(--pc-doc-border); }
body .doc-card .doc-reattach {
  color: var(--pc-doc-text);
  border-color: var(--pc-doc-muted);
  background: transparent;
}
body .doc-card .doc-reattach:hover { background: color-mix(in srgb, var(--pc-doc-text) 7%, transparent); }
body .doc-card .doc-reattach:focus-visible { outline-color: var(--pc-doc-text); }
@media (min-width: 900px) {
  body.pro .doc-card {
    --pc-doc-text: var(--bubble-ai-text);
    --pc-doc-muted: color-mix(in srgb, var(--bubble-ai-text) 74%, var(--bubble-ai));
    --pc-doc-border: color-mix(in srgb, var(--bubble-ai-text) 22%, var(--bubble-ai));
  }
}