/* Shared material system. The user explicitly selected liquid glass and tactile
   controls. Keep content opaque enough to read; never blur a text layer. */
:root {
  --canvas: #e8edf3;
  --paper: #ffffff;
  --paper-soft: #f2f5f9;
  --input: #eaf0f6;
  --ink: #172b3e;
  --ink-secondary: #40566b;
  --ink-tertiary: #53667a;
  --ink-muted: #506277;
  --action: #245ac2;
  --action-hover: #19449a;
  --action-soft: #e2ecfc;
  --archive: #146a5c;
  --archive-soft: #e2f2eb;
  --attention: #86560a;
  --attention-soft: #fff1d8;
  --danger: #a03543;
  --danger-soft: #fce8ed;
  --line: rgba(51, 72, 100, .13);
  --line-soft: rgba(51, 72, 100, .08);
  --line-strong: rgba(51, 72, 100, .25);
  --focus: #386cc5;
  --radius-control: 12px;
  --radius-panel: 20px;
  --radius-dialog: 24px;
  --glass-face: rgba(255, 255, 255, .76);
  --glass-raised: rgba(250, 253, 255, .94);
  --glass-edge: rgba(255, 255, 255, .9);
  --glass-shadow: 0 8px 26px -12px rgba(41, 64, 99, .24), 0 2px 5px -2px rgba(41, 64, 99, .12), inset 0 1px 0 var(--glass-edge);
  --glass-control-shadow: 0 3px 7px -3px rgba(33, 57, 89, .24), inset 0 1px 0 rgba(255, 255, 255, .95);
  --glass-inset-shadow: inset 2px 3px 6px rgba(53, 75, 105, .07), inset -2px -2px 5px rgba(255, 255, 255, .8);
}
html { background: var(--canvas); }
body { background: transparent; isolation: isolate; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 12% 14%, rgba(186, 208, 238, .7), transparent 51%),
    radial-gradient(ellipse at 88% 75%, rgba(202, 225, 225, .65), transparent 50%),
    linear-gradient(145deg, #edf2f8 8%, #e3eaf3 54%, #edf3f5 100%);
}
::selection { color: #142f58; background: #b8d2fa; }
input, textarea { caret-color: var(--action); }
* { scrollbar-width: thin; scrollbar-color: #9eadbd transparent; }
a { text-underline-offset: .22em; }
button, a, input, select, textarea, summary { scroll-margin: 100px 20px; }
.app-shell { grid-template-columns: 226px minmax(0, 1fr); }
.sidebar {
  padding: 30px 18px 22px; background: rgba(244, 248, 253, .45);
  border-right-color: rgba(255, 255, 255, .7);
  box-shadow: 2px 0 16px -10px rgba(36, 58, 84, .2);
  backdrop-filter: blur(22px) saturate(125%); -webkit-backdrop-filter: blur(22px) saturate(125%);
}
.brand-mark { background: linear-gradient(145deg, #4276cc, #29529c); border-radius: 12px; box-shadow: var(--glass-control-shadow); }
.brand strong { font-size: 18px; }
.brand small, .workspace-label, .local-label { font-size: 11px; }
.nav-link { min-height: 48px; border-radius: 14px; font-size: 14px; }
.nav-link.active {
  color: #244f91; background: rgba(255, 255, 255, .75);
  box-shadow: var(--glass-shadow); font-weight: 650;
}
.nav-link.active::before { display: none; }
.nav-link:hover { background: rgba(255, 255, 255, .46); }
.nav-link.active:hover { background: rgba(255, 255, 255, .9); }
.nav-count { border-radius: 8px; background: #e7eef7; color: #365272; }
.workspace-label { margin-top: 28px; }
.archive-destination, .sidebar-bottom { font-size: 12px; }
.destination-icon { font-size: 28px; }
.connection-line, .build-label, .archive-destination small { font-size: 11px; }
.topbar {
  height: 68px; padding: 0 28px; background: rgba(246, 249, 253, .62);
  border-bottom-color: rgba(255, 255, 255, .8);
  backdrop-filter: blur(24px) saturate(125%); -webkit-backdrop-filter: blur(24px) saturate(125%);
  box-shadow: 0 4px 18px -14px rgba(34, 55, 87, .35);
}
.breadcrumb { font-size: 13px; }
.global-search { height: 42px; border: 0; background: rgba(233, 240, 248, .88); box-shadow: var(--glass-inset-shadow); border-radius: 12px; }
.global-search input { font-size: 13px; }
main { padding: 28px; }
h1 { font-size: 28px; letter-spacing: -.6px; }
.page-heading { margin-bottom: 24px; }
.page-description { color: var(--ink-secondary); }
.panel, .summary-strip, .model-overview {
  background: var(--glass-face); border: 1px solid rgba(255, 255, 255, .64);
  box-shadow: var(--glass-shadow); border-radius: var(--radius-panel);
  backdrop-filter: blur(18px) saturate(115%); -webkit-backdrop-filter: blur(18px) saturate(115%);
}
.panel-header { padding: 22px 24px 18px; }
.panel-title h2 { font-size: 17px; }
.panel-description { font-size: 12px; }
.summary-strip { background: rgba(247, 251, 255, .68); }
.summary-label { font-size: 13px; }
.summary-value { font-size: 30px; font-weight: 550; }
.summary-context, .summary-value small { font-size: 12px; }
.source-flow { font-size: 12px; }
.summary-item + .summary-item::before { background: var(--line-soft); }
.button, .filter-menu summary, .select-field {
  border-color: rgba(255, 255, 255, .85); background: var(--glass-raised);
  box-shadow: var(--glass-control-shadow); color: var(--ink-secondary); font-size: 13px;
  transition: transform 140ms var(--ease), box-shadow 140ms var(--ease), background-color 140ms var(--ease);
}
.button:hover:not(:disabled) { background: #fff; border-color: #fff; box-shadow: 0 5px 13px -6px rgba(36, 60, 98, .28), inset 0 1px 0 #fff; }
.button.primary { background: linear-gradient(165deg, #386bc7, #2454ad); border-color: rgba(38, 77, 141, .32); color: #fff; box-shadow: 0 5px 14px -7px rgba(25, 68, 140, .45), inset 0 1px 0 rgba(255, 255, 255, .3); }
.button.primary:hover:not(:disabled) { background: linear-gradient(165deg, #2d60be, #1f4b9e); border-color: rgba(30, 62, 118, .4); }
.button.subtle { background: transparent; box-shadow: none; border-color: transparent; }
.button.danger { color: var(--danger); }
button:active:not(:disabled), .button:active:not(:disabled) { transform: scale(.98) translateY(1px); box-shadow: var(--glass-inset-shadow); }
button:disabled { opacity: .6; transform: none; box-shadow: none; }
.icon-button { border-radius: 12px; }
.icon-button:hover { background: rgba(255, 255, 255, .75); box-shadow: var(--glass-control-shadow); }
.search-field, .collab-text-input, .collab-requirement, .review-form textarea {
  background: rgba(229, 237, 246, .75); border: 1px solid rgba(255, 255, 255, .58); box-shadow: var(--glass-inset-shadow);
}
.search-field input { font-size: 13px; }
input::placeholder, textarea::placeholder { color: #586c80; opacity: 1; }
.search-field:focus-within, .global-search:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.badge, .tag { font-size: 11px; border-radius: 7px; }
.count-pill { border-radius: 8px; font-size: 12px; }
.data-table th { font-size: 12px; background: rgba(237, 243, 249, .72); }
.data-table td { font-size: 13px; }
.data-table tbody tr:hover { background: rgba(255, 255, 255, .7); }
.table-title-button { font-size: 13px; }
.row-caption, .library-table .row-summary, .model-table .model-evidence { font-size: 12px; }
.tag, .row-caption { line-height: 1.7; }
.library-table .table-main { width: auto; }
.small-note, .callout, .panel-footer, .result-note, .pagination-number, .source-row p, .tool-description { font-size: 12px; }
.callout { border-radius: 12px; }
.progress-track { box-shadow: inset 0 1px 3px rgba(49, 73, 102, .11); background: #dbe5ef; }
.progress-fill { background: linear-gradient(90deg, #648cce, #315fac); }
.progress-caption, .unknown-progress { font-size: 11px; }
.tool-avatar { border: 0; box-shadow: var(--glass-control-shadow); background: rgba(231, 239, 251, .88); border-radius: 13px; }
.tool-kind, .tool-card-footer, .tool-card-metrics span, .recent-meta { font-size: 12px; }
.tool-card { padding: 24px; }
.tool-card-metrics strong { font-size: 22px; }
.event-message { font-size: 12px; }
.event-time { font-size: 11px; }
.switch input { box-shadow: var(--glass-inset-shadow); background: #b9c7d6; border: 0; }
.switch input::after { top: 3px; left: 3px; box-shadow: 0 2px 4px rgba(23, 45, 79, .2), inset 0 1px 0 #fff; }
.switch input:checked { background: #3260ae; }
.switch input:checked::after { transform: translateX(18px); }
.stage-node { border-radius: 12px; font-size: 11px; background: rgba(240, 245, 251, .8); }
.stage-node.current { background: #e3edfc; box-shadow: var(--glass-inset-shadow); }
.filter-options { background: var(--glass-raised); box-shadow: 0 16px 36px -14px rgba(38, 59, 91, .3), inset 0 1px 0 #fff; border-color: #fff; border-radius: 14px; backdrop-filter: blur(20px); }
.detail-dialog, .mobile-nav-dialog { background: rgba(247, 250, 253, .94); border-color: rgba(255, 255, 255, .94); backdrop-filter: blur(28px) saturate(120%); box-shadow: 0 20px 70px -25px rgba(27, 48, 77, .4), inset 0 1px 0 #fff; }
.detail-dialog::backdrop, .mobile-nav-dialog::backdrop { background: rgba(39, 55, 76, .24); backdrop-filter: blur(5px); }
.detail-section .text-view, .detail-section p { font-size: 14px; }
.detail-eyebrow { display: none; }
.detail-footer { background: rgba(234, 241, 249, .7); }
.detail-footer p, .detail-section .definition-list { font-size: 12px; }
.path-box { background: rgba(230, 237, 246, .6); border: 0; box-shadow: var(--glass-inset-shadow); border-radius: 12px; }
.path-box .mono, .path-box-label, .hash-line { font-size: 11px; }
.toast { background: var(--glass-raised); border-color: white; border-radius: 16px; backdrop-filter: blur(24px); }
.empty-symbol { background: rgba(255, 255, 255, .7); border: 0; box-shadow: var(--glass-control-shadow); }
.empty-state p { font-size: 13px; }
.page-footer { font-size: 11px; }
.chat-thread, .chat-evidence { background: rgba(249, 252, 255, .74); }
.chat-composer { background: rgba(247, 251, 255, .88); box-shadow: var(--glass-shadow); backdrop-filter: blur(22px); }
.chat-message[data-kind="agent"] .chat-bubble { background: rgba(255, 255, 255, .88); }
.chat-message[data-kind="user"] .chat-bubble { background: #e4edfb; }
.collab-job-item.selected { background: rgba(222, 234, 250, .8); }
.collab-job-item.selected::before { display: none; }
.collab-job-title { font-size: 13px; }
.collab-job-steps, .collab-jobs-footer { font-size: 11px; }
@media (max-width: 1100px) {
  .app-shell { grid-template-columns: 190px minmax(0, 1fr); }
  .sidebar { padding-left: 12px; padding-right: 12px; }
  .brand strong { font-size: 16px; }
  .topbar { padding: 0 22px; }
  main { padding: 24px; }
}
@media (max-width: 760px) {
  .app-shell { display: block; }
  .sidebar { display: none; }
  .topbar { height: 62px; padding: 0 14px; gap: 7px; }
  main { padding: 22px 16px; }
  .page-heading { gap: 16px; margin-bottom: 20px; }
  h1 { font-size: 24px; }
  .page-description { font-size: 13px; line-height: 1.7; }
  .panel, .summary-strip, .model-overview { border-radius: 18px; backdrop-filter: blur(12px); }
  .summary-item { padding: 18px; }
  .summary-value { font-size: 27px; }
  .button, .select-field, .filter-menu summary { min-height: 44px; font-size: 13px; }
  .data-table td, .table-title-button, .search-field input { font-size: 14px; }
  .row-caption, .tag, .badge, .model-table .model-evidence { font-size: 12px; }
  .detail-dialog { inset: 0; width: 100vw; height: 100dvh; border-radius: 0; }
  .detail-header, .detail-section { padding: 22px 20px; }
  .detail-footer { padding: 16px 20px max(16px, env(safe-area-inset-bottom)); }
  .mobile-nav-dialog { width: min(340px, calc(100vw - 24px)); padding: 24px 20px; border-radius: 0 24px 24px 0; }
  .mobile-nav-dialog .nav-link { font-size: 15px; min-height: 50px; }
  .filter-options { width: min(240px, calc(100vw - 48px)); }
  .global-search input, textarea, .collab-text-input { font-size: 16px; }
  .toast-region { bottom: max(20px, env(safe-area-inset-bottom)); }
  .source-flow { gap: 8px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .panel, .summary-strip, .model-overview, .sidebar, .topbar, .chat-composer { background: #f5f8fc; }
  .detail-dialog, .mobile-nav-dialog, .filter-options, .toast { background: #fff; }
}