/* Jeongdo Design System — reusable components and layout primitives. */

html { background: var(--color-surface-canvas); }

html.is-app-busy::before {
  position: fixed;
  z-index: 2500;
  top: 0;
  left: 0;
  width: 36%;
  height: .1875rem;
  background: var(--color-action-focus);
  content: "";
  pointer-events: none;
  transform-origin: left center;
  animation: app-progress 1s ease-in-out infinite;
}

@keyframes app-progress {
  0% { transform: translateX(-110%) scaleX(.35); }
  55% { transform: translateX(120%) scaleX(1); }
  100% { transform: translateX(310%) scaleX(.55); }
}

body {
  font-family: var(--font-family-sans);
  line-height: var(--line-height-normal);
  background: var(--color-surface-canvas);
  color: var(--color-text-primary);
}

::selection { background: var(--color-info-subtle); color: var(--color-text-primary); }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--color-action-focus);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

:where(button, input, select, textarea):disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.skip-link {
  position: fixed;
  z-index: 2000;
  top: var(--space-3);
  left: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

.container { max-width: var(--content-max); padding: var(--space-8); }

.site-header {
  position: relative;
  z-index: 100;
  min-height: var(--header-height);
  padding: var(--space-3) max(var(--space-5), calc((100vw - var(--content-max)) / 2));
  border-color: var(--color-border-subtle);
  background: var(--color-header-surface);
  backdrop-filter: blur(12px);
}
.brand { display: inline-flex; align-items: center; gap: var(--space-3); }
.brand-symbol { width: 2.25rem; height: 2.25rem; flex: 0 0 auto; }
.brand-symbol-upper { fill: var(--jjaim-brand-700); }
.brand-symbol-lower { fill: var(--jjaim-ink); }
.brand-symbol-joint { fill: var(--jjaim-brass); }
:root[data-theme="dark"] .brand-symbol-upper { fill: var(--jjaim-dark-logo-upper); }
:root[data-theme="dark"] .brand-symbol-lower { fill: var(--jjaim-dark-text-primary); }
.brand-copy { display: grid; line-height: 1.05; }
.brand-copy small { margin-top: var(--space-1); color: var(--color-text-secondary); font-family: var(--font-family-data); font-size: .625rem; font-weight: var(--font-weight-regular); letter-spacing: .08em; text-transform: uppercase; }
.brand-name { white-space: nowrap; letter-spacing: -.04em; }
.site-nav { display: flex; min-width: 0; flex: 1; align-items: center; justify-content: space-between; gap: var(--space-5); }
.nav-primary, .header-tools { display: flex; align-items: center; gap: var(--space-1); }
.nav-primary { margin-left: var(--space-8); }
.header-tools { margin-left: auto; }
.site-header .site-nav a,
.header-menu summary {
  /* 메뉴 항목은 단어 단위로 줄바꿈하지 않는다. 넓이가 부족한 화면은
     breakpoint의 wrap/가로 스크롤 규칙이 처리한다. */
  white-space: nowrap;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  transition: background var(--motion-fast), color var(--motion-fast);
}
.site-header .site-nav a:hover,
.header-menu summary:hover,
.header-menu[open] > summary { background: var(--color-surface-subtle); color: var(--color-text-primary); }
.header-menu { position: relative; }
.header-menu summary { display: flex; min-height: 2.25rem; align-items: center; gap: var(--space-2); color: var(--color-text-secondary); font-size: var(--font-size-md); list-style: none; cursor: pointer; }
.header-menu summary::-webkit-details-marker { display: none; }
.header-menu-chevron { font-size: var(--font-size-sm); line-height: 1; transition: transform var(--motion-fast); }
.header-menu[open] .header-menu-chevron { transform: rotate(180deg); }
.header-menu-panel { position: absolute; z-index: 30; top: calc(100% + var(--space-2)); right: 0; display: grid; width: 13rem; padding: var(--space-2); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); background: var(--color-surface-default); box-shadow: var(--shadow-md); }
.site-header .header-menu-panel a {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 2.75rem;
  margin: 0;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  touch-action: manipulation;
}
.site-header .header-menu-panel a:hover,
.site-header .header-menu-panel a[aria-current="page"] { background: var(--color-surface-subtle); color: var(--color-text-primary); }
.header-menu-label { margin: var(--space-1) var(--space-3) var(--space-2); color: var(--color-text-disabled); font-family: var(--font-family-data); font-size: .625rem; font-weight: var(--font-weight-semibold); letter-spacing: .08em; text-transform: uppercase; }
.header-menu-divider { height: 1px; margin: var(--space-2) 0; background: var(--color-border-subtle); }
.account-menu-panel { width: 17rem; }
.account-logout-form { margin: 0; }
.account-logout-form .logout-link {
  width: 100%;
  min-height: 2.5rem;
  padding: var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.account-logout-form .logout-link:hover { background: var(--color-surface-subtle); color: var(--color-text-primary); }
.account-context { display: grid; gap: var(--space-1); padding: var(--space-2) var(--space-3) var(--space-3); }
.account-context strong { font-size: var(--font-size-sm); }
.account-context span { overflow: hidden; color: var(--color-text-secondary); font-size: var(--font-size-xs); text-overflow: ellipsis; white-space: nowrap; }
.account-avatar { width: 1.75rem; height: 1.75rem; border: 1px solid var(--color-border-default); border-radius: 50%; background: radial-gradient(circle at center, var(--color-brand-emphasis) 0 28%, transparent 30%), linear-gradient(to top, var(--color-brand-emphasis) 0 33%, transparent 35%); }
.account-name { max-width: 7.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-theme-toggle { display: inline-grid; width: 2.25rem; min-height: 2.25rem; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 50%; background: transparent; color: var(--color-text-secondary); font: inherit; cursor: pointer; }
.app-theme-toggle:hover { border-color: var(--color-border-strong); color: var(--color-text-primary); }
.theme-icon { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.theme-icon-moon { display: none; }
:root[data-theme="dark"] .theme-icon-sun { display: none; }
:root[data-theme="dark"] .theme-icon-moon { display: block; }
.login-theme-toggle { position: fixed; z-index: 10; top: var(--space-4); right: var(--space-4); }

.page-head { gap: var(--space-5); margin-bottom: var(--space-6); }
.page-head h1 { margin: 0; font-size: var(--font-size-2xl); line-height: var(--line-height-tight); }
.page-head-actions, .button-group { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cluster { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: var(--space-3); }
.inline-action-form { display: inline-flex; margin: 0; }
.is-hidden { display: none; }
.w-full { width: 100%; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.ml-3 { margin-left: var(--space-3); }
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.section-heading { margin-top: 0; }
.helper-text { margin: var(--space-2) 0 0; color: var(--color-text-secondary); font-size: var(--font-size-xs); }
.status-panel { margin-top: var(--space-4); padding: var(--space-4); border-radius: var(--radius-md); }
.status-panel.success { background: var(--color-success-subtle); color: var(--color-success); }
.status-title { font-weight: var(--font-weight-semibold); }
.status-meta { margin-top: var(--space-1); color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.status-help { margin-top: var(--space-2); color: var(--color-text-secondary); font-size: var(--font-size-xs); }
.surface-subtle { background: var(--color-surface-subtle); }
.label-auto { width: auto !important; }
.dynamic-swatch { background: var(--swatch-color, var(--color-text-disabled)); }
.dynamic-border { border-left-color: var(--accent-color, var(--color-border-strong)) !important; }
.dynamic-bar { height: var(--bar-size, 0%); }
.dynamic-progress { width: var(--progress, 0%); }
.pay-amount-fixed { width: 6.875rem !important; text-align: right; }
.icon-sm { width: 1rem; height: 1rem; }
.icon-md { width: 1.375rem; height: 1.375rem; }
.icon-lg { width: 2.25rem; height: 2.25rem; }
.empty-icon { font-size: 2.25rem; line-height: 1; }

.btn {
  display: inline-flex;
  min-height: 2.5rem;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-surface-default);
  color: var(--color-text-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--motion-fast), border-color var(--motion-fast),
    color var(--motion-fast), transform var(--motion-fast), box-shadow var(--motion-fast);
}
.btn:hover { border-color: var(--color-border-strong); box-shadow: 0 3px 10px rgba(23, 26, 29, 0.07); }
.btn:active { transform: translateY(1px); }
.btn.primary { border-color: var(--color-action-primary); background: var(--color-action-primary); color: var(--color-action-on-primary); }
.btn.primary:hover { border-color: var(--color-action-primary-hover); background: var(--color-action-primary-hover); }
.btn.danger { border-color: var(--color-danger); color: var(--color-danger); }
.btn.danger:hover { background: var(--color-danger); color: var(--color-text-inverse); }
.btn.ghost { border-color: transparent; background: transparent; box-shadow: none; }
.btn.sm { min-height: 2rem; padding: 0 var(--space-3); font-size: var(--font-size-xs); }
.btn.icon { width: 2.5rem; padding: 0; }

.card, .panel {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-surface-default);
  box-shadow: var(--shadow-sm);
}
.card { padding: var(--space-6); }
.panel { padding: var(--space-5); }
.card-header, .panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }

/* Collapsible index for navigating a long, mutually exclusive category list. */
.category-switcher { margin-bottom: var(--space-5); }
.category-quick-picker { padding: var(--space-4); }
.category-picker-context { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-3); }
.category-picker-value { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-1); }
.category-picker-hint { color: var(--color-text-secondary); font-size: var(--font-size-xs); }
.category-quick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: var(--space-2); }
.category-quick-link {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 3.25rem;
  align-content: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  background: var(--color-surface-default);
  color: var(--color-text-primary);
  text-decoration: none;
  touch-action: manipulation;
  transition: background var(--motion-fast), border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.category-quick-link:hover { border-color: var(--color-border-strong); background: var(--color-surface-subtle); }
.category-quick-link.active { border-color: var(--color-action-focus); background: var(--color-surface-subtle); box-shadow: inset .1875rem 0 0 var(--color-action-focus); }
.category-quick-link span { overflow-wrap: anywhere; font-weight: var(--font-weight-semibold); }
.category-quick-link small { color: var(--color-text-secondary); font-size: var(--font-size-xs); }
.category-browser { display: none; margin-bottom: var(--space-5); padding: 0; overflow: clip; }
.category-browser-summary {
  display: grid;
  min-height: 4rem;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  list-style: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--motion-fast);
}
.category-browser-summary::-webkit-details-marker { display: none; }
.category-browser-summary:hover,
.category-browser[open] > .category-browser-summary { background: var(--color-surface-subtle); }
.category-browser-meta { display: flex; min-width: 0; align-items: center; gap: var(--space-3); }
.category-browser-current { display: grid; min-width: 0; gap: var(--space-1); }
.category-browser-current strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.category-browser-label { color: var(--color-text-secondary); font-size: var(--font-size-xs); font-weight: var(--font-weight-regular); }
.category-browser-action { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text-secondary); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); white-space: nowrap; }
.category-browser-action-open { display: none; }
.category-browser[open] .category-browser-action-closed { display: none; }
.category-browser[open] .category-browser-action-open { display: inline; }
.category-browser-chevron {
  width: .5rem;
  height: .5rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-.125rem) rotate(45deg);
  transition: transform var(--motion-fast);
}
.category-browser[open] .category-browser-chevron { transform: translateY(.125rem) rotate(225deg); }
.category-browser-body { padding: 0 var(--space-4) var(--space-4); border-top: 1px solid var(--color-border-subtle); }
.category-search { margin-top: var(--space-4); }
.category-link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: var(--space-2);
  max-height: 18rem;
  margin-top: var(--space-3);
  overflow-y: auto;
}
.category-link {
  position: relative;
  display: grid;
  min-width: 0;
  gap: var(--space-1);
  padding: var(--space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  background: var(--color-surface-default);
  color: var(--color-text-primary);
  text-decoration: none;
  touch-action: manipulation;
  transition: background var(--motion-fast), border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.category-link:hover { border-color: var(--color-border-strong); background: var(--color-surface-subtle); }
.category-link.active { border-color: var(--color-action-focus); background: var(--color-surface-subtle); box-shadow: inset .1875rem 0 0 var(--color-action-focus); }
.category-quick-link.is-loading,
.category-link.is-loading { padding-right: var(--space-8); cursor: wait; }
.category-quick-link.is-loading::before,
.category-link.is-loading::before { position: absolute; top: var(--space-2); right: var(--space-2); }
.category-link span { overflow-wrap: anywhere; }
.category-link small { color: var(--color-text-secondary); font-size: var(--font-size-xs); }
.category-link[hidden] { display: none; }

.form { width: 100%; max-width: var(--content-narrow); }
.form-card { padding: var(--space-6); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); background: var(--color-surface-default); }
.field, .form .row { display: grid; grid-template-columns: minmax(7.5rem, 0.28fr) 1fr; gap: var(--space-4); align-items: center; margin-bottom: var(--space-4); }
.field-label, .form .row > label { width: auto; color: var(--color-text-secondary); font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); }
.field-hint { margin-top: var(--space-2); color: var(--color-text-secondary); font-size: var(--font-size-xs); }
:where(.field, .form .row, .login-form) input:not([type="checkbox"]):not([type="radio"]),
:where(.field, .form .row, .login-form) select,
:where(.field, .form .row, .login-form) textarea,
.input {
  min-height: 2.625rem;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-surface-default);
  color: var(--color-text-primary);
  font: inherit;
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
:where(.field, .form .row, .login-form) input:focus,
:where(.field, .form .row, .login-form) select:focus,
:where(.field, .form .row, .login-form) textarea:focus,
.input:focus { border-color: var(--color-action-focus); outline: none; box-shadow: var(--focus-ring); }
.form .row.actions { display: flex; gap: var(--space-2); padding-left: calc(28% + var(--space-4)); }

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-surface-subtle);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}
.badge.info { background: var(--color-info-subtle); color: var(--color-info); }
.badge.success { background: var(--color-success-subtle); color: var(--color-success); }
.badge.warning { background: var(--color-warning-subtle); color: var(--color-warning); }
.badge.danger { background: var(--color-danger-subtle); color: var(--color-danger); }

.alert, .flash { padding: var(--space-3) var(--space-4); border: 1px solid transparent; border-radius: var(--radius-md); font-size: var(--font-size-sm); }
.alert.info { border-color: var(--color-info-border); background: var(--color-info-subtle); color: var(--color-info); }
.alert.success, .flash.ok { border-color: var(--color-success-border); background: var(--color-success-subtle); color: var(--color-success); }
.alert.warning { border-color: var(--color-warning-border); background: var(--color-warning-subtle); color: var(--color-warning); }
.alert.danger, .flash.error { border-color: var(--color-danger-border); background: var(--color-danger-subtle); color: var(--color-danger); }

.toast {
  position: fixed;
  z-index: 1200;
  right: var(--space-6);
  bottom: var(--space-6);
  display: flex;
  max-width: min(24rem, calc(100vw - var(--space-8)));
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-pill);
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-md);
  font-size: var(--font-size-sm);
}
.toast.success { background: var(--color-success); }
.toast.warning { background: var(--color-warning); }
.toast.danger { background: var(--color-danger); }
.is-loading { cursor: wait; }
[data-interaction-pending="true"] { pointer-events: none; }
.is-loading::before {
  width: .875rem;
  height: .875rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: jd-spin .7s linear infinite;
  content: "";
}
@keyframes jd-spin { to { transform: rotate(360deg); } }

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.data-table { width: 100%; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); border-collapse: separate; border-spacing: 0; overflow: hidden; background: var(--color-surface-default); }
.data-table th { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-subtle); background: var(--color-surface-subtle); color: var(--color-text-secondary); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); text-align: left; }
.data-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-subtle); }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--color-surface-canvas); }
.action-cell { text-align: right; }
.action-cell .button-group { justify-content: flex-end; }

.empty-state, .empty { max-width: 32rem; margin: var(--space-12) auto; padding: var(--space-10); border: 1px dashed var(--color-border-default); border-radius: var(--radius-lg); background: var(--color-surface-default); text-align: center; color: var(--color-text-secondary); }
.empty-state-title { margin: 0 0 var(--space-2); color: var(--color-text-primary); font-size: var(--font-size-xl); }

.file-dropzone {
  display: grid;
  width: 100%;
  min-height: 9rem;
  place-items: center;
  gap: var(--space-2);
  padding: var(--space-6);
  border: 2px dashed var(--color-border-default);
  border-radius: var(--radius-lg);
  background: var(--color-surface-default);
  color: var(--color-text-secondary);
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--motion-fast), background var(--motion-fast), box-shadow var(--motion-fast);
}
.file-dropzone:hover { border-color: var(--color-border-strong); background: var(--color-surface-subtle); }
.file-dropzone.is-dragover { border-color: var(--color-info); background: var(--color-info-subtle); box-shadow: var(--focus-ring); }
.file-dropzone.is-success { border-color: var(--color-success); background: var(--color-success-subtle); }
.file-dropzone.is-invalid { border-color: var(--color-danger); background: var(--color-danger-subtle); color: var(--color-danger); }
.file-dropzone.is-uploading { border-color: var(--color-info); background: var(--color-info-subtle); cursor: wait; }
.file-dropzone-title { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }
.file-dropzone-detail { display: block; font-size: var(--font-size-xs); }
.file-dropzone-status { margin-top: var(--space-2); color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.file-dropzone-status.is-success { color: var(--color-success); }
.file-dropzone-status.is-error { color: var(--color-danger); }

.modal-backdrop { background: rgba(23, 26, 29, 0.68); backdrop-filter: blur(3px); }
.modal-content { border: 1px solid var(--color-overlay-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-dialog); }

.confirmation-dialog {
  width: min(32rem, calc(100vw - var(--space-8)));
  max-height: calc(100dvh - var(--space-8));
  margin: auto;
  padding: var(--space-6);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-surface-default);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-dialog);
  overflow-wrap: anywhere;
}
.confirmation-dialog::backdrop { background: var(--color-overlay); }
.confirmation-dialog h2 { margin: 0; font-size: var(--font-size-xl); word-break: keep-all; }
.confirmation-dialog .card-header { align-items: flex-start; gap: var(--space-3); }
.confirmation-dialog .button-group form { margin: 0; }

/* Bring feature-specific legacy surfaces onto the same visual foundation. */
:where(.dash-cover, .dash-card, .dash-quick, .exp-metric, .exp-add,
  .exp-list-wrap, .ce-add, .ce-list-wrap, .ce-year-summary, .cd-card,
  .cd-section, .slide-block, .cal-sidebar, .share-card) {
  border-color: var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-default);
  box-shadow: var(--shadow-sm);
}
:where(.dash-card, .material-card, .cd-card) {
  transition: border-color var(--motion-fast), transform var(--motion-fast),
    box-shadow var(--motion-fast);
}
:where(.dash-card, .material-card, .cd-card):hover {
  border-color: var(--color-border-default);
  box-shadow: var(--shadow-md);
}
:where(.exp-add-form, .ce-add-form, .mat-search-bar, .inline-form) input,
:where(.exp-add-form, .ce-add-form, .mat-search-bar, .inline-form) select {
  border-color: var(--color-border-default);
  border-radius: var(--radius-sm);
}
:where(.exp-add-form, .ce-add-form, .mat-search-bar, .inline-form) input:focus,
:where(.exp-add-form, .ce-add-form, .mat-search-bar, .inline-form) select:focus {
  border-color: var(--color-action-focus);
  outline: none;
  box-shadow: var(--focus-ring);
}
:where(.project-table, .exp-table, .ce-table, .cd-proj-table) th {
  background: var(--color-surface-subtle);
  color: var(--color-text-secondary);
}

.dash-sub-spaced { margin: var(--space-6) 0; }
.dash-icon, .share-icon {
  display: inline-grid;
  width: fit-content;
  min-width: 3rem;
  min-height: 1.75rem;
  place-items: center;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-info);
  font-family: var(--font-family-data);
  font-size: .6875rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .08em;
}
.share-icon { margin-inline: auto; }
.text-success { color: var(--color-success); }
.text-muted { color: var(--color-text-secondary); }
.text-warning { color: var(--color-warning); }
.text-danger { color: var(--color-danger); }
.dash-progress-bar { width: var(--progress, 0%); background: var(--progress-color, var(--color-info)); }

.hero {
  position: relative;
  overflow: hidden;
  padding: var(--space-16) 0 var(--space-10);
  text-align: left;
}
.hero::after {
  position: absolute;
  inset: var(--space-8) 0 auto auto;
  width: min(26rem, 42vw);
  height: 8rem;
  background-image: linear-gradient(var(--color-border-subtle) 1px, transparent 1px), linear-gradient(90deg, var(--color-border-subtle) 1px, transparent 1px);
  background-size: 1rem 1rem;
  content: "";
  opacity: .62;
  pointer-events: none;
  mask-image: linear-gradient(90deg, transparent, var(--color-text-primary));
}
.hero-kicker { position: relative; z-index: 1; margin: 0 0 var(--space-3); color: var(--color-brand-emphasis); font-family: var(--font-family-data); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); letter-spacing: .12em; text-transform: uppercase; }
.hero h1 { position: relative; z-index: 1; max-width: 46rem; font-size: var(--font-size-display); line-height: 1.08; letter-spacing: -.045em; }
.hero-sub { position: relative; z-index: 1; max-width: 38rem; margin-top: var(--space-4); font-size: var(--font-size-lg); }

.big-card { position: relative; min-height: 13rem; padding: var(--space-8); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.big-card:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-md); }
.big-card-num { font-family: var(--font-family-data); color: var(--color-brand-emphasis); }
.big-card.primary { background: var(--color-surface-inverse); color: var(--color-text-inverse); }
.big-card.primary .big-card-num,
.big-card.primary .big-card-desc { color: var(--color-text-inverse); }
.big-card.primary .big-card-num { opacity: .65; }
.big-card.primary .big-card-desc { opacity: .85; }

.login-wrap { position: relative; background: var(--color-surface-canvas); }
.login-wrap::before { position: absolute; inset: 0 50% 0 0; background: var(--color-surface-inverse); content: ""; }
.login-card { position: relative; width: min(100%, 27rem); max-width: none; padding: var(--space-10); border-radius: var(--radius-lg); box-shadow: var(--shadow-dialog); }
.login-brand { display: inline-flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-8); }
.login-brand .brand-symbol { width: 3rem; height: 3rem; }
.login-title { margin: 0; }
.login-form .row { display: block; }
.login-form .row.actions { padding: 0; }
.login-form .row.actions .btn { width: 100%; }
.share-brand { display: inline-flex; align-items: center; gap: var(--space-3); letter-spacing: -.04em; }
.share-brand .brand-symbol { width: 2.75rem; height: 2.75rem; }
.share-brand strong { font-size: var(--font-size-2xl); }

@media (max-width: 64rem) {
  .brand-copy small { display: none; }
  .nav-primary { margin-left: var(--space-4); }
  .site-header .site-nav a, .header-menu summary { padding-inline: var(--space-2); }
  .account-name { display: none; }
}

@media (max-width: 48rem) {
  .container { padding: var(--space-5); }
  .site-header { align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
  .brand-name { font-size: var(--font-size-md); }
  .brand-copy small { display: none; }
  .site-header > .brand { order: 1; flex: 0 0 auto; }
  .site-header .site-nav {
    order: 3;
    flex: 0 0 100%;
    width: 100%;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: var(--space-2);
  }
  .nav-primary { width: 100%; min-width: 0; justify-content: space-between; margin-left: 0; overflow-x: auto; scrollbar-width: thin; }
  .header-tools { order: 2; flex: 0 0 auto; }
  .site-header .site-nav a, .header-menu summary { flex: 0 0 auto; padding: var(--space-2); font-size: var(--font-size-xs); white-space: nowrap; }
  .site-header .app-theme-toggle { flex: 0 0 auto; }
  .account-menu-panel { width: min(17rem, calc(100vw - var(--space-8))); }
  .company-menu .header-menu-panel { right: auto; left: 50%; transform: translateX(-50%); }
  .page-head { align-items: flex-start; }
  .page-head-actions { width: 100%; }
  .card-grid { grid-template-columns: 1fr; }
  .field, .form .row { display: block; }
  .field-label, .form .row > label { display: block; margin-bottom: var(--space-2); }
  .form .row.actions { padding-left: 0; }
  .login-wrap::before { inset: 0 0 58% 0; }
  .login-card { padding: var(--space-8) var(--space-6); }
  .data-table-responsive, .data-table-responsive tbody, .data-table-responsive tr, .data-table-responsive td { display: block; width: 100%; }
  .data-table-responsive thead { display: none; }
  .data-table-responsive { border: 0; background: transparent; }
  .data-table-responsive tr { display: grid; gap: var(--space-1); margin-bottom: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); background: var(--color-surface-default); }
  .data-table-responsive td { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-1) 0; border: 0; }
  .data-table-responsive td[data-label]::before { content: attr(data-label); color: var(--color-text-secondary); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); }
  .data-table-responsive .action-cell { margin-top: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--color-border-subtle); }
  .data-table-responsive .action-cell .button-group { width: 100%; justify-content: flex-start; }
  .category-quick-picker { display: none; }
  .category-browser { display: block; margin-bottom: 0; }
}

@media (max-width: 40rem) {
  .category-browser-summary { padding: var(--space-3); }
  .category-browser-meta { align-items: flex-start; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
  .category-browser-current { flex: 1 1 10rem; }
  .category-browser-body { padding: 0 var(--space-3) var(--space-3); }
  .category-link-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); max-height: 16rem; }
}

@media print {
  .skip-link { display: none; }
  body { background: var(--color-surface-default); }
}

/* Shared project section heading and overview navigation. */
.project-workspace-head { align-items: center; }
.project-workspace-head .project-workspace-title { display: block; min-width: 0; flex: 1; }
.project-workspace-title h1 { overflow-wrap: anywhere; word-break: keep-all; }
.project-workspace-label { margin: 0 0 var(--space-2); color: var(--color-text-secondary); font-size: var(--font-size-xs); }
.project-workspace-head .page-head-actions { margin-top: 0; flex-shrink: 0; }
.project-workspace-head .btn { min-height: 2.75rem; }
.project-workspace-label a { color: var(--color-text-secondary); text-underline-offset: var(--space-1); }
.project-workspace-label { overflow-wrap: anywhere; }
@media (max-width: 64rem) {
  .project-workspace-head { flex-direction: column; align-items: stretch; }
}