/* Metrica Docs · quiet workspace. Loaded after each surface's structural CSS. */
:root,
:root[data-md-theme="light"] {
  color-scheme: light;
  --canvas: #eceff1;
  --surface: #ffffff;
  --surface-muted: #f4f6f7;
  --text: #252b32;
  --text-muted: #616c78;
  --line: #dce1e5;
  --accent: #456f66;
  --accent-strong: #356358;
  --accent-soft: #eaf0ed;
  --success: #27613f;
  --success-bg: #edf6ef;
  --warning: #79521d;
  --warning-strong: #805012;
  --warning-bg: #faf3e5;
  --danger: #a33c3c;
  --danger-bg: #fbefee;
  --action-bg: #30383d;
  --action-text: #ffffff;
  --control-border: #7d8994;
  --focus: #426ba2;
  --glass: rgb(246 248 249 / 88%);
  --glass-edge: rgb(255 255 255 / 88%);
  --shadow: 0 8px 28px rgb(34 42 50 / 5%);
  --overlay-shadow: 0 14px 48px rgb(24 32 40 / 14%);
  --scrim: rgb(30 37 43 / 24%);
  --icon-filter: none;
  --brand-filter: none;
  --action-icon-filter: brightness(0) invert(1);
  --control-min-size: 44px;
  --selection-surface: #ffffff;
}

:root[data-md-theme="dark"] {
  color-scheme: dark;
  --canvas: #201f1d;
  --surface: #292826;
  --surface-muted: #302f2c;
  --text: #ece9e2;
  --text-muted: #b4afa5;
  --line: #45433f;
  --accent: #b3bfa7;
  --accent-strong: #c2ceb6;
  --accent-soft: #333a2f;
  --success: #a9c89c;
  --success-bg: #2e382b;
  --warning: #dfbf84;
  --warning-strong: #dfbf84;
  --warning-bg: #3b3325;
  --danger: #e5aaa0;
  --danger-bg: #402e2b;
  --action-bg: #d4cfc4;
  --action-text: #262522;
  --control-border: #8d877d;
  --focus: #c8b68e;
  --glass: rgb(39 38 35 / 94%);
  --glass-edge: rgb(236 228 212 / 4%);
  --shadow: none;
  --overlay-shadow: 0 8px 28px rgb(0 0 0 / 18%);
  --scrim: rgb(16 15 13 / 48%);
  --icon-filter: brightness(0) invert(.86);
  --brand-filter: brightness(0) invert(.92) sepia(.12);
  --action-icon-filter: brightness(0);
  --selection-surface: #37342f;
}

html {
  background: var(--canvas);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { color: var(--text); }
button, input, select, textarea { font: inherit; }
input, select, textarea { accent-color: var(--accent); }
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea {
  color: var(--text);
  background-color: var(--surface);
}
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 1; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
::selection { color: var(--text); background: var(--accent-soft); }

[data-workspace] { background: var(--canvas); }
[data-workspace] h1 { letter-spacing: -.035em; font-weight: 620; }
[data-workspace] h2 { letter-spacing: -.02em; font-weight: 620; }
[data-workspace] h3 { font-weight: 620; }
[data-workspace] button { border-radius: 9px; }
[data-workspace] button:disabled { cursor: not-allowed; }
[data-workspace] :is(button, a, input, select, textarea) {
  transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

/* Navigation is a quiet translucent layer; data remains on opaque surfaces. */
[data-sidebar] {
  position: relative;
  z-index: 10;
  overflow: visible;
  padding: 12px 10px 10px;
  gap: 8px;
  border-right: 0;
  isolation: isolate;
  background: transparent;
}
/* Keep backdrop-filter off the popup ancestor: chat menus are viewport-fixed. */
[data-sidebar]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--glass);
  box-shadow: inset -1px 0 var(--glass-edge);
  backdrop-filter: blur(20px) saturate(115%);
  -webkit-backdrop-filter: blur(20px) saturate(115%);
}
[data-sidebar-brand] { padding: 0 6px; min-height: 32px; }
[data-sidebar] > header a strong { font-size: 14px; font-weight: 650; white-space: nowrap; letter-spacing: -.025em; }
[data-sidebar] > header a small { margin-top: 3px; color: var(--text-muted); font-size: 11px; }
[data-sidebar-brand] > a { min-height: 44px; gap: 10px; }
[data-sidebar] > header a > img[data-brand-mark],
.brand img[data-brand-mark],
[data-auth-brand] img[data-brand-mark] {
  width: 44px;
  height: 28px;
  flex: 0 0 44px;
  object-fit: contain;
  filter: var(--brand-filter);
}
[data-sidebar-scroll] {
  gap: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
[data-sidebar-scroll]::-webkit-scrollbar { width: 6px; height: 6px; }
[data-sidebar-scroll]::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
[data-sidebar-scroll]::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
[data-sidebar-scroll]::-webkit-scrollbar-track { background: transparent; }
[data-sidebar-scroll] > ul { gap: 2px; padding-bottom: 10px; }
[data-sidebar-scroll] > ul,
[data-chat-navigation] { flex: 0 0 auto; }
[data-sidebar-scroll] > ul a {
  min-height: 44px;
  gap: 10px;
  padding: 4px 8px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 450;
}
[data-sidebar-scroll] > ul a:hover { background: var(--surface-muted); }
[data-sidebar-scroll] > ul a[aria-current="page"],
[data-chat][aria-current="true"] {
  color: var(--text);
  background: var(--selection-surface);
  box-shadow: 0 1px 3px rgb(0 0 0 / 5%), inset 0 0 0 1px var(--line);
}
[data-chat][aria-current="true"] > button:first-child,
[data-chat][aria-current="true"] [data-chat-menu-trigger] {
  background: transparent;
  color: inherit;
}
[data-sidebar] h2 { font-size: 12px; font-weight: 500; letter-spacing: 0; }
[data-new-chat] { margin-bottom: 8px; border-radius: 10px; font-weight: 550; }
[data-chat] { min-height: 44px; grid-template-columns: minmax(0, 1fr) 44px; }
[data-chat] > button:first-child { padding: 4px 8px; font-weight: 400; }
[data-chat] [data-chat-menu-trigger] { width: 44px; min-width: 44px; min-height: 44px; }
[data-chat] [data-chat-menu-trigger] img { width: 20px; height: 20px; }
[data-chat-menu] button { min-height: 44px; }
[data-chat-menu] { max-height: calc(100dvh - 16px); overflow-y: auto; }
[data-sidebar-account] { padding-top: 12px; }
[data-workspace] img[src$=".svg"], [data-account-close] img { filter: var(--icon-filter); }

/* A continuous work area with a single boundary, not a stack of decorative cards. */
[data-workspace] > [data-section-panel] {
  margin: 8px 8px 8px 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
[data-section-panel],
[data-equipment-panel],
[data-cases-panel],
[data-documents-panel],
[data-inbox-panel],
[data-verifications-panel] {
  padding-top: 20px;
  padding-bottom: 28px;
}
[data-chat-greeting] { max-width: 760px; padding-bottom: 40px; }
[data-chat-greeting] h1 { font-size: clamp(26px, 2.5vw, 34px); font-weight: 570; }
[data-chat-greeting] > p { max-width: 560px; line-height: 1.7; }
[data-agent-start-cards] { gap: 12px; margin-top: 28px; }
[data-agent-start-cards] :is(button, a) {
  padding: 17px 16px;
  gap: 8px;
  border-radius: 13px;
  background: var(--surface);
}
[data-agent-start-cards] :is(button, a):hover { background: var(--surface-muted); border-color: var(--control-border); }
[data-agent-start-cards] strong { color: var(--text); font-size: 14px; font-weight: 600; }
[data-agent-start-cards] small { color: var(--text-muted); line-height: 1.5; }
[data-composer] {
  border-color: var(--control-border);
  border-radius: 20px;
  background: var(--surface-muted);
  box-shadow: var(--shadow);
}
[data-composer] textarea { background: transparent; }
[data-composer] > button[type="submit"] {
  background: var(--action-bg);
  color: var(--action-text);
  border-radius: 12px;
}
[data-composer] > button[type="submit"] img { filter: var(--action-icon-filter); }
[data-agent-help-link] { color: var(--text-muted); font-size: 12px; }
[data-message="user"] { border: 1px solid var(--line); border-radius: 18px 18px 5px 18px; }

[data-inspector] {
  background: var(--glass);
  border-color: var(--line);
  box-shadow: var(--overlay-shadow);
  backdrop-filter: blur(20px) saturate(115%);
  -webkit-backdrop-filter: blur(20px) saturate(115%);
}
[data-inspector-toolbar] {
  min-height: 58px;
  background: var(--glass);
  color: var(--text-muted);
  font-size: 13px;
  box-shadow: inset 0 1px var(--glass-edge);
}
[data-inspector-toolbar] > strong { min-width: 0; overflow-wrap: anywhere; font-weight: 550; }
[data-inspector-toolbar] [data-inspector-close], [data-account-close] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;
  width: auto;
  min-width: 44px;
  min-height: 44px;
  height: auto;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-muted);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
}
[data-inspector-toolbar] [data-inspector-close] img, [data-account-close] img {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
[data-sidebar-collapse] { width: 44px; min-width: 44px; min-height: 44px; }
[data-sidebar-collapse] img { width: 22px; height: 22px; }
[data-inspector-back] { min-height: 44px; padding: 8px 12px; background: var(--surface-muted); color: var(--text); }
:is([data-inspector-close], [data-account-close], [data-sidebar-collapse], [data-chat-menu-trigger], [data-inspector-back]):hover {
  background: var(--selection-surface);
  border-color: var(--control-border);
}
[data-inspector] > [data-inspector-panel] { padding: 22px 22px 30px; }
[data-inspector-panel] > header > p:first-child { color: var(--text-muted); font-size: 12px; }
[data-inspector-panel] > header h2 { font-size: 21px; line-height: 1.35; }
[data-inspector] :is(dl, table) { background: var(--surface); }
[data-inspector] dl { padding: 0 12px; border: 1px solid var(--line); border-radius: 11px; }
[data-inspector] dt { color: var(--text-muted); font-weight: 450; }
[data-inspector] dd { color: var(--text); font-variant-numeric: tabular-nums; }
[data-inspector-backdrop] { background: var(--scrim); }
[data-account-panel], [data-chat-menu] {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: var(--overlay-shadow);
  border-radius: 13px;
}
[data-account-panel] { max-height: min(70dvh, 520px); overflow-y: auto; overscroll-behavior: contain; }

/* All tables retain their existing column sizes and local horizontal scroll. */
[data-workspace] table { background: var(--surface); font-size: 14px; font-variant-numeric: tabular-nums; }
[data-workspace] th {
  background: var(--surface-muted);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
}
[data-workspace] td { color: var(--text); }
[data-equipment-table] th, [data-equipment-table] td { padding: 10px 12px; }
[data-equipment-open] { font-weight: 550; }
[data-equipment-reset] { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border: 1px solid var(--control-border); background: var(--surface-muted); color: var(--text); }
[data-equipment-row]:hover, [data-equipment-row]:focus-within { background: var(--surface-muted); }
[data-equipment-row][aria-selected="true"] { background: var(--accent-soft); }
[data-workspace] :is([data-equipment-table-scroll], [data-inbox-table-scroll], [data-metrology-table-scroll]) {
  border-radius: 12px;
  background: var(--surface);
}
[data-workspace] :is([data-equipment-filters], [data-inbox-filters], [data-verification-filters]) {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-muted);
}
[data-workspace] :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
  border-color: var(--control-border);
  border-radius: 9px;
}
[data-case-list] > li > button, [data-inbox-list] > li > button { border-radius: 12px; }
[data-case-working-exports] { display: grid; gap: 12px; }
[data-case-working-exports] > :is(h3, p) { margin: 0; }
[data-case-working-exports] > label { display: grid; gap: 7px; font-size: 13px; }
[data-case-working-exports] input { width: 100%; min-width: 0; min-height: 40px; padding: 8px 10px; border: 1px solid var(--control-border); }
[data-case-working-exports] > button {
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid var(--control-border);
  color: var(--text);
  background: var(--surface);
  text-align: left;
}
[data-case-working-exports] > button:hover { background: var(--surface-muted); }

/* Theme selection remains local to the browser and available in compact layouts. */
[data-theme-control] { display: flex; align-items: center; gap: 10px; padding: 6px; color: var(--text-muted); font-size: 12px; }
[data-theme-control] select { min-width: 0; width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--control-border); border-radius: 8px; font: inherit; }
[data-theme-control] label { display: flex; align-items: center; gap: 10px; width: 100%; }
[data-theme-control] span { white-space: nowrap; }
[data-account-panel] [data-theme-control] { padding: 8px 10px; }
[data-page-theme-control] { justify-content: flex-end; padding: 0; }
[data-page-theme-control] label { width: auto; margin: 0; font-size: 13px; font-weight: 500; }
[data-page-theme-control] select { width: auto; min-width: 128px; }
[data-auth-card] > [data-page-theme-control] { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
[data-account-window] > [data-page-theme-control] { margin-top: 20px; }
[data-browser-state] { overflow-wrap: anywhere; }
[data-browser-state] > a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent-strong); }
[data-document-review-root] > nav, [data-document-detail-page] > nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
[data-document-page-error] { padding: 12px; border-radius: 8px; color: var(--danger); background: var(--danger-bg); }
[data-workspace].is-sidebar-collapsed [data-sidebar-account] > [data-theme-control] { display: none; }
[data-workspace].is-sidebar-collapsed [data-sidebar] { overflow: visible; }
[data-workspace].is-sidebar-collapsed [data-sidebar-brand] { flex-direction: column; gap: 4px; padding: 0; }
[data-workspace].is-sidebar-collapsed [data-sidebar-scroll] > ul a,
[data-workspace].is-sidebar-collapsed [data-new-chat] { width: 44px; min-width: 44px; min-height: 44px; }
[data-workspace].is-sidebar-collapsed [data-account-trigger] { width: 44px; min-height: 44px; grid-template-columns: 44px; padding: 0; }
[data-workspace].is-sidebar-collapsed [data-account-copy],
[data-workspace].is-sidebar-collapsed [data-account-chevron] { display: none; }

/* Account and authentication pages use the same materials and palette. */
.md-account-page { background: var(--canvas); }
[data-account-window] {
  border-color: var(--glass-edge);
  background: var(--glass);
  box-shadow: inset 0 1px var(--glass-edge), var(--overlay-shadow);
  backdrop-filter: blur(20px) saturate(115%);
  -webkit-backdrop-filter: blur(20px) saturate(115%);
}
[data-account-window] input:not([type="hidden"]), [data-security-card] input:not([type="hidden"]) {
  background: var(--surface);
  border-color: var(--control-border);
}
[data-account-close] { background: var(--surface-muted); color: var(--text); }
[data-account-window] > header { padding-top: 40px; }
[data-account-avatar] { background: var(--action-bg); color: var(--action-text); font-weight: 600; }
[data-security-actions] button { background: var(--action-bg); color: var(--action-text); }
[data-auth-card] button, [data-auth-card] button:hover {
  background: var(--action-bg);
  color: var(--action-text);
}
[data-auth-card] button:hover { box-shadow: 0 0 0 2px var(--control-border); }
[data-auth-card] input { border-color: var(--control-border); }

@media (min-width: 1280px) {
  [data-inspector] { margin: 12px 12px 12px 0; border: 1px solid var(--line); border-radius: 18px; }
}
@media (max-width: 1023px) {
  [data-sidebar] { padding: 10px 12px; gap: 8px; }
  [data-sidebar-brand] { padding: 0; }
  [data-sidebar-scroll] { gap: 6px; }
  [data-sidebar-scroll] > ul { padding: 0; }
  [data-sidebar-account] { display: flex; align-items: center; gap: 8px; padding: 0; }
  [data-sidebar-account] > [data-theme-control] { display: none; }
  [data-workspace] > [data-section-panel] { margin: 0 8px 8px; border-radius: 14px; }
  [data-inspector] { border-left: 1px solid var(--line); }
  [data-inspector] > [data-inspector-panel] { padding: 18px; }
}
@media (pointer: coarse) {
  [data-theme-control] select { min-height: 44px; font-size: 16px; }
  [data-workspace] input, [data-workspace] select, [data-workspace] textarea { font-size: 16px; }
}
@media (max-width: 640px) {
  [data-sidebar-brand] [data-sidebar-label] { display: none; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  [data-sidebar]::before, [data-inspector], [data-inspector-toolbar], [data-account-window] {
    background: var(--surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-sidebar]::before, [data-inspector], [data-inspector-toolbar], [data-account-window] { background: var(--surface); }
}
@media (prefers-contrast: more) {
  :root, :root[data-md-theme] { --line: var(--control-border); }
}
@media (forced-colors: active) {
  [data-workspace] > [data-section-panel], [data-inspector] { border: 1px solid CanvasText; }
  [data-workspace] img[src$=".svg"], [data-account-close] img { filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

[data-equipment-report-card], [data-report-controls] { display: grid; gap: 10px; }
[data-equipment-report-card] > header, [data-report-controls] .report-action-row {
  align-items: center; display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between;
}
[data-report-controls] form { align-items: end; display: flex; flex-wrap: wrap; gap: 8px; }
[data-report-controls] button, [data-report-controls] input, [data-equipment-report-card] a { min-height: 44px; }