/* V3: one frame, light-scattering reading surfaces, and a single glass edge. */
:root {
  --canvas-pad: 28px;
  --reading-fill: rgba(255, 255, 253, .90);
  --reading-solid: #fbfcf8;
  --reading-edge: rgba(255, 255, 255, .74);
  --heading-fill: rgba(238, 241, 235, .94);
  --reading-blur: 18px;
  --app-backdrop: url("assets/backdrop-pearl-v1.png");
}
:root[data-theme="graphite"] {
  --reading-fill: rgba(51, 61, 56, .92);
  --reading-solid: #333d38;
  --reading-edge: rgba(232, 246, 237, .13);
  --heading-fill: rgba(36, 42, 39, .94);
  --app-backdrop: url("assets/backdrop-graphite-v1.png");
}

/* Desktop (1440): rail right 220; canvas starts 244; content 272..1412.
   Each topbar/title/card uses that same 28px inset: 1140px of content.
   Small desktop (1024): content 240..1000 = 760px.
   Tablet (768): icon rail right 84; content 132..744 = 612px.
   Phone (390): no side offset; content 16..374 = 358px. */
.main-content {
  min-width: 0;
  padding: 0 var(--canvas-pad);
  background: transparent;
}
.topbar,
.page-heading,
.page-content,
.page-footer {
  min-width: 0;
  width: 100%;
}
.topbar,
.page-heading {
  isolation: isolate;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.topbar::before,
.page-heading::before {
  content: "";
  position: absolute;
  inset: 0 calc(-1 * var(--canvas-pad));
  z-index: -1;
  pointer-events: none;
  background: var(--heading-fill);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--canvas-pad), #000 calc(100% - var(--canvas-pad)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--canvas-pad), #000 calc(100% - var(--canvas-pad)), transparent);
}
.page-heading > div:first-child,
.workspace-label,
.panel-header > div:first-child {
  min-width: 0;
}
.page-heading h1,
.page-description,
.workspace-label {
  overflow-wrap: break-word;
}
.topbar-actions { flex-shrink: 0; }

/* Generated artwork spans the viewport. Its own flow fades into a quiet field;
   do not place the old side-only scene or artificial folds on top of it. */
.material-scene {
  background-color: var(--ground);
  background-image: var(--app-backdrop, none);
  background-position: left center;
  background-size: cover;
}
.material-scene::before,
.material-scene::after {
  content: none;
}
.glass-fold { display: none; }

/* One continuous edge only. Blur changes the material, never text opacity. */
.panel,
.metrics-band,
.analysis-metrics,
.member-card,
.dialog-content,
.filters-toolbar,
.patient-info-bar {
  background: var(--reading-fill);
  border: 1px solid var(--reading-edge);
  box-shadow: none;
  -webkit-backdrop-filter: blur(var(--reading-blur)) saturate(1.04);
  backdrop-filter: blur(var(--reading-blur)) saturate(1.04);
  background-clip: padding-box;
}
.filters-toolbar,
.patient-info-bar {
  padding: 12px 14px;
  border-radius: var(--radius);
}
.member-rule-note,
.page-footer { color: var(--ink); }
.page-footer a,
.page-footer button { color: inherit; }
.member-card:hover {
  background: var(--reading-solid);
  border-color: var(--control);
}
.panel .panel,
.dialog-content .panel,
.dialog-content .metrics-band,
.dialog-content .analysis-metrics {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.side-rail,
.detail-dialog,
.login-card {
  box-shadow: 0 16px 42px -24px var(--glass-shadow);
}
.side-rail { border: 1px solid var(--glass-inner); }
.side-rail::after { content: none; }
.side-rail::before { border: 0; box-shadow: none; }
.nav-item.is-active { border-color: transparent; box-shadow: none; }
.detail-dialog,
.login-card { border: 1px solid var(--glass-inner); }
.dialog-content { border-radius: 12px; }
.dialog-content .table-panel { border-color: var(--rule); }
.login-preview {
  background-color: var(--ground);
  background-image: var(--app-backdrop);
  background-position: center;
  background-size: cover;
}
.login-brand-panel { background: transparent; }
.login-brand-panel::after,
.login-form-panel::before { content: none; }
.login-back,
.login-filing { color: var(--ink); }

/* A flexible text lane cannot force the canvas wider than its viewport. */
.operations-grid > *,
.insight-grid > *,
.analysis-panels > *,
.analysis-bottom > *,
.backups-grid > *,
.member-cards > *,
.metric,
.analysis-metrics > div { min-width: 0; }
.table-wrap { max-width: 100%; }
.nas-facts dd,
.backup-note,
.detail-meta strong,
.clinical-detail { overflow-wrap: anywhere; }

@media (min-width: 1900px) {
  :root { --canvas-pad: 32px; }
  .main-content { padding-left: var(--canvas-pad); padding-right: var(--canvas-pad); }
}
@media (max-width: 1250px) {
  :root { --canvas-pad: 24px; }
  .main-content { padding-left: var(--canvas-pad); padding-right: var(--canvas-pad); }
}
@media (max-width: 980px) {
  .main-content { padding-left: var(--canvas-pad); padding-right: var(--canvas-pad); }
  .nav-item { font-size: 11px; }
  .metric-foot { font-size: 11px; }
}
@media (max-width: 650px) {
  :root { --canvas-pad: 16px; --reading-blur: 12px; }
  .main-content {
    margin-left: 0;
    padding: 0 var(--canvas-pad) calc(88px + env(safe-area-inset-bottom));
    scrollbar-gutter: auto;
  }
  .topbar { gap: 8px; }
  .topbar-actions { gap: 7px; }
  .workspace-label { gap: 7px; }
  .admin-profile > span + span { display: none; }
  .side-rail {
    bottom: calc(8px + env(safe-area-inset-bottom));
    border-radius: 18px;
  }
  .material-scene { display: block; background-position: center; }
  .panel-header { flex-wrap: wrap; }
  .panel-meta { white-space: normal; }
  .trend-summary { flex-wrap: wrap; }
  .trend-summary .period-dates { margin-left: 0; }
  .dialog-heading { padding: 21px 18px; }
  .trend-summary .period-dates,
  .record-detail,
  .legend > span,
  .member-role,
  .member-role-counts,
  .member-today,
  .page-footer { font-size: 11px; }
}
@media (max-width: 370px) {
  .member-cards { grid-template-columns: 1fr; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .panel,
  .metrics-band,
  .analysis-metrics,
  .member-card,
  .dialog-content,
  .filters-toolbar,
  .patient-info-bar { background: var(--reading-solid); border-color: var(--line); }
  .topbar::before,
  .page-heading::before { background: var(--ground); }
  .side-rail,
  .detail-dialog,
  .login-card { background: var(--raised); }
}
@media (prefers-reduced-transparency: reduce) {
  .material-scene { display: none; }
  .login-preview { background-image: none; }
  .panel,
  .metrics-band,
  .analysis-metrics,
  .member-card,
  .dialog-content,
  .filters-toolbar,
  .patient-info-bar { background: var(--reading-solid); border-color: var(--line); }
  .topbar::before,
  .page-heading::before { background: var(--ground); }
  .side-rail,
  .detail-dialog,
  .login-card { background: var(--raised); }
  .panel,
  .metrics-band,
  .analysis-metrics,
  .member-card,
  .dialog-content,
  .filters-toolbar,
  .patient-info-bar,
  .topbar,
  .page-heading,
  .topbar::before,
  .page-heading::before,
  .detail-dialog::backdrop,
  .side-rail,
  .detail-dialog,
  .dialog-heading,
  .login-card { -webkit-backdrop-filter: none; backdrop-filter: none; }
}