/* Final presentation layer. Comfortable type and explicit contrast at every viewport. */
:root {
  --lg-body: 16px;
  --lg-input: 16px;
  --lg-label: 14px;
  --lg-control: 14px;
  --lg-helper: 13px;
  --lg-small: 12px;
  --lg-table: 14px;
  --lg-heading: 28px;
  --lg-control-height: 44px;
  --lg-row-height: 48px;
  --lg-ink: #203d35;
  --lg-muted: #52665d;
  --lg-green: #177c72;
  --lg-line: #ccddd4;
  --lg-soft: #eef6f1;
  --lg-focus: #0c796d;
  --lg-motion: 190ms;
  --lg-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
body.nucleo-view-expanded {
  --lg-body: 18px;
  --lg-input: 18px;
  --lg-label: 16px;
  --lg-control: 16px;
  --lg-helper: 15px;
  --lg-small: 14px;
  --lg-table: 16px;
  --lg-heading: 30px;
  --lg-control-height: 48px;
  --lg-row-height: 52px;
}
body {
  font-size: var(--lg-body);
  line-height: 1.55;
  color: var(--lg-ink);
  --text: var(--lg-ink);
  --ink: var(--lg-ink);
  --muted: var(--lg-muted);
  --teal: var(--lg-green);
  --text-muted: var(--lg-muted);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body :is(input, select, textarea, button) {
  font-family: inherit;
}
body
  :is(
    input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='file']):not(
        [type='color']
      ),
    select,
    textarea
  ) {
  font-size: var(--lg-input) !important;
  line-height: 1.45;
  color: var(--lg-ink);
  min-height: var(--lg-control-height);
  border-color: #b7ccc0;
}
body :is(input, textarea)::placeholder {
  color: #667d71;
  opacity: 1;
}
body
  :is(
    .form-field label,
    .form-field > label,
    label.ag-check,
    label.cl-check,
    .ag-working-days label,
    .cl-consent-check
  ) {
  font-size: var(--lg-label) !important;
  line-height: 1.55;
  color: var(--lg-ink);
  font-weight: 500;
}
body .form-field label :is(input, select, textarea) {
  margin-top: 8px;
}
body .form-grid {
  gap: 20px;
}
body :is(input[type='checkbox'], input[type='radio']) {
  accent-color: var(--lg-green);
}
body :is(.ag-check, .cl-check, .cl-consent-check) {
  min-height: var(--lg-control-height);
}
body
  :is(
    .form-hint,
    .form-help,
    .cl-help,
    .ag-muted,
    .biz-note,
    .cl-editor-footnote,
    .cl-subtle-note,
    .ag-grid-help
  ) {
  font-size: var(--lg-helper) !important;
  line-height: 1.65;
  color: var(--lg-muted) !important;
}
body small {
  font-size: var(--lg-helper);
  line-height: 1.5;
}
body
  :is(
    .muted,
    .text-muted,
    .panel-subtitle,
    .page-subtitle,
    .stat-foot,
    .empty-state p,
    .timeline-list small
  ) {
  color: var(--lg-muted) !important;
}
body .page-title {
  font-size: var(--lg-heading);
  line-height: 1.22;
  letter-spacing: -0.65px;
  color: var(--lg-ink);
}
body .page-subtitle {
  font-size: var(--lg-body);
  line-height: 1.6;
  max-width: 72ch;
}
body :is(.panel-title, .settings-card h2) {
  font-size: 21px;
  line-height: 1.35;
  color: var(--lg-ink);
}
body .panel-subtitle {
  font-size: var(--lg-helper) !important;
  line-height: 1.65;
}
body .eyebrow {
  font-size: var(--lg-small);
  color: var(--lg-green);
  letter-spacing: 1px;
  font-weight: 700;
}
body :is(.panel, .settings-card, .stat-card) {
  border-color: var(--lg-line);
  background: #fff;
}
body .panel {
  box-shadow: 0 4px 18px #183c2d05;
}
body .panel-header {
  gap: 18px;
}
body :is(.btn, .cl-workspace .btn, .ag-module .btn, .data-table td .btn) {
  min-height: var(--lg-control-height) !important;
  font-size: var(--lg-control) !important;
  line-height: 1.35;
  padding: 10px 15px;
  gap: 8px;
  text-overflow: clip;
  transition:
    background-color var(--lg-motion),
    color var(--lg-motion),
    border-color var(--lg-motion),
    box-shadow 220ms,
    transform 160ms var(--lg-ease);
}
body :is(.btn-ghost, .btn-secondary, .btn.secondary, .btn.ghost, .btn.text) {
  color: var(--lg-green);
}
body :is(.btn-primary, .btn.primary) {
  color: #fff;
  background: var(--lg-green);
  border-color: var(--lg-green);
}
body :is(.btn .icon, .icon-btn .icon) {
  width: 19px;
  height: 19px;
}
body :is(.icon-btn, .topbar .mobile-menu, .drawer-heading button) {
  min-width: var(--lg-control-height);
  min-height: var(--lg-control-height);
}
body
  :is(
    button:disabled,
    .btn:disabled,
    .cl-fieldset:disabled button,
    .cl-fieldset[data-readonly] button:disabled
  ) {
  opacity: 1 !important;
  color: #63766d;
  background: #edf2ef;
  border-color: #d4dfd8;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
body :is(.module-tabs, .segmented, .cl-segmented) {
  align-items: stretch;
  gap: 6px;
}
body :is(.module-tabs a, .module-tabs .btn, .segmented .btn, .cl-segmented .btn) {
  font-size: var(--lg-control) !important;
  min-height: var(--lg-control-height);
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 16px;
  white-space: nowrap;
  flex-shrink: 0;
  height: auto;
}
body :is(.toolbar .segmented, .cl-segmented) {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
}
body .page-header .page-actions {
  gap: 10px;
}
body .badge {
  font-size: var(--lg-small) !important;
  line-height: 1.35;
  padding: 6px 10px;
  height: auto;
}
body .person-name,
body .person strong {
  font-size: var(--lg-table);
  line-height: 1.45;
  color: var(--lg-ink);
}
body .person small {
  font-size: var(--lg-helper);
  color: var(--lg-muted);
}
body .data-table {
  font-size: var(--lg-table) !important;
}
body .data-table th {
  font-size: var(--lg-helper) !important;
  line-height: 1.5;
  color: var(--lg-muted);
  padding: 14px 16px;
  letter-spacing: 0.2px;
}
body .data-table td {
  font-size: var(--lg-table) !important;
  line-height: 1.55;
  padding: 16px;
  color: var(--lg-ink);
}
body .data-table td small {
  font-size: var(--lg-helper) !important;
  color: var(--lg-muted) !important;
  line-height: 1.5;
}
body .data-table td :is(.btn, .badge) {
  vertical-align: middle;
}
body .stat-label {
  font-size: var(--lg-label);
  color: var(--lg-muted);
}
body .stat-foot {
  font-size: var(--lg-helper);
  line-height: 1.5;
}
body .stat-value {
  font-size: 30px;
  line-height: 1.3;
  color: var(--lg-ink);
}
body :is(.notice, .ag-form-note, .cl-info, .cl-alert) {
  font-size: var(--lg-helper);
  color: var(--lg-muted);
  line-height: 1.65;
}
body .empty-state h3 {
  font-size: 20px;
  color: var(--lg-ink);
}
body .empty-state p {
  font-size: var(--lg-helper);
  line-height: 1.65;
  max-width: 45ch;
}
body .timeline-list li {
  font-size: var(--lg-table);
}
body .modal-header h2 {
  font-size: 24px;
  line-height: 1.25;
  color: var(--lg-ink);
}
body .modal-body {
  font-size: var(--lg-body);
  line-height: 1.6;
}
body .modal-footer {
  gap: 10px;
}
body .toast {
  font-size: var(--lg-label);
  line-height: 1.5;
}
body .document-paper {
  font-size: var(--lg-body);
  line-height: 1.8;
  max-width: 80ch;
  margin-inline: auto;
}
body .document-paper > small {
  font-size: var(--lg-small);
  color: var(--lg-muted);
}
body .message-preview {
  font-size: var(--lg-body);
  line-height: 1.7;
}

/* Header and 300 px navigation drawer. */
body .topbar {
  gap: 16px;
}
body .topbar-left {
  gap: 12px;
}
body .topbar-actions {
  gap: 12px;
  align-items: center;
}
body .breadcrumb {
  font-size: var(--lg-helper);
  color: var(--lg-muted);
}
body .topbar .search-box {
  min-height: var(--lg-control-height);
  border-color: var(--lg-line);
}
body .topbar .search-box input {
  font-size: var(--lg-input) !important;
  width: 180px;
  min-height: var(--lg-control-height);
}
body .demo-banner {
  font-size: var(--lg-small);
  color: var(--lg-muted);
  min-height: 42px;
}
body .demo-banner .btn {
  font-size: var(--lg-small) !important;
  min-height: 36px !important;
}
body .sidebar {
  width: 300px;
}
body .sidebar .nav-item {
  font-size: 15px;
  min-height: var(--lg-row-height);
  line-height: 1.4;
  padding: 12px 14px;
  gap: 13px;
}
body .nav-group.has-children .nav-item {
  padding-right: 54px;
}
body .nav-group > .nav-expand {
  top: 2px;
  right: 2px;
  width: 44px;
  height: 44px;
  border-radius: 10px;
}
body .nav-expand .icon {
  width: 19px;
  height: 19px;
}
body .nav-submenu {
  padding: 5px 0 10px 32px;
  gap: 3px;
}
body .nav-submenu a {
  font-size: var(--lg-label);
  min-height: 44px;
  line-height: 1.5;
  padding: 11px 13px;
  color: var(--lg-muted);
}
body .sidebar .nav-label {
  font-size: var(--lg-small);
  letter-spacing: 1.1px;
  color: var(--lg-muted);
}
body .drawer-heading {
  font-size: var(--lg-small);
  color: var(--lg-muted);
  gap: 10px;
}
body .sidebar :is(.person-name, .user-meta strong, .workspace-card strong) {
  font-size: var(--lg-label);
  color: var(--lg-ink);
}
body .sidebar :is(.user-meta small, .workspace-card small) {
  font-size: var(--lg-helper);
  color: var(--lg-muted);
  line-height: 1.5;
}
body .app-footer {
  font-size: var(--lg-small);
  color: var(--lg-muted);
}

/* Clinical workspace: quiet cards, clear text, readable support information. */
body .cl-workspace {
  --cl-ink: var(--lg-ink);
  --cl-muted: var(--lg-muted);
  --cl-green: var(--lg-green);
  --cl-line: var(--lg-line);
  color: var(--lg-ink);
}
body .cl-patient-header h1 {
  font-size: var(--lg-heading);
  line-height: 1.25;
  color: var(--lg-ink);
}
body .cl-patient-header p {
  font-size: var(--lg-helper) !important;
  color: var(--lg-muted);
  gap: 10px;
  line-height: 1.6;
}
body .cl-context-label {
  font-size: var(--lg-small) !important;
  color: var(--lg-muted);
}
body .cl-nav-tab {
  font-size: var(--lg-control) !important;
  padding: 15px 16px;
  min-height: 48px;
  color: var(--lg-muted);
  gap: 9px;
}
body .cl-nav-tab svg {
  width: 19px;
  height: 19px;
}
body .cl-nav-tab.is-active {
  color: var(--lg-green);
  border-bottom-color: var(--lg-green);
}
body .cl-tab-count {
  font-size: var(--lg-small);
  min-width: 22px;
  height: 22px;
  color: var(--lg-green);
}
body .cl-workspace .panel {
  border-color: var(--lg-line);
  padding: 26px !important;
}
body .cl-workspace .panel-title {
  font-size: 21px !important;
  color: var(--lg-ink);
  line-height: 1.35;
}
body .cl-workspace .panel-subtitle {
  font-size: var(--lg-helper) !important;
  color: var(--lg-muted) !important;
  line-height: 1.65;
  max-width: 65ch;
}
body .cl-workspace .form-field label {
  font-size: var(--lg-label) !important;
  color: var(--lg-ink);
}
body .cl-workspace .form-field :is(input, select, textarea) {
  font-size: var(--lg-input) !important;
  color: var(--lg-ink);
  border-color: #b7ccc0;
}
body .cl-fieldset textarea {
  line-height: 1.65;
  padding: 14px 16px;
}
body
  .cl-workspace
  :is(.cl-fieldset:disabled, .cl-fieldset[data-readonly])
  :is(input, select, textarea) {
  color: #405c4e;
  background: #f3f7f4;
}
body .cl-work-aside {
  gap: 18px;
}
body .cl-side-card {
  border-color: var(--lg-line);
  padding: 21px;
  background: #fff;
}
body .cl-side-title h2 {
  font-size: var(--lg-label) !important;
  color: var(--lg-ink);
  line-height: 1.45;
}
body .cl-side-card p,
body .cl-appointment-card > p,
body .cl-progress-note {
  font-size: var(--lg-helper) !important;
  color: var(--lg-muted);
  line-height: 1.65;
}
body .cl-progress-step {
  min-height: 58px;
  gap: 11px;
}
body .cl-progress-step strong {
  font-size: var(--lg-label) !important;
  color: var(--lg-ink);
  line-height: 1.4;
}
body .cl-progress-step small {
  font-size: var(--lg-helper) !important;
  color: var(--lg-muted);
  line-height: 1.4;
}
body .cl-progress-overview {
  font-size: var(--lg-helper);
  color: var(--lg-muted);
}
body .cl-progress-overview > strong {
  color: var(--lg-green);
}
body .cl-time {
  font-size: var(--lg-helper);
  color: var(--lg-muted);
}
body .cl-time strong {
  font-size: 18px;
  color: var(--lg-ink);
}
body .cl-save-state {
  font-size: var(--lg-helper) !important;
  color: var(--lg-muted);
}
body .cl-save-state[data-state='pending'] svg {
  animation: none;
}
body .cl-work-footer {
  border-top-color: var(--lg-line);
}
body .cl-section-kicker {
  font-size: var(--lg-small);
  color: var(--lg-green);
}
body .cl-overview-hero h3 {
  font-size: 24px;
  color: var(--lg-ink);
  line-height: 1.3;
}
body .cl-overview-hero p {
  font-size: var(--lg-body) !important;
  color: var(--lg-muted);
  line-height: 1.6;
}
body .cl-quick-cards strong {
  font-size: var(--lg-label) !important;
  color: var(--lg-ink);
  line-height: 1.45;
}
body .cl-quick-cards small {
  font-size: var(--lg-helper) !important;
  color: var(--lg-muted);
  line-height: 1.5;
}
body .cl-quick-cards > button {
  padding: 18px;
  gap: 14px;
  border-color: var(--lg-line);
}
body .cl-consent-check {
  padding: 16px;
  color: var(--lg-ink);
}
body .cl-editor-toolbar {
  font-size: var(--lg-helper) !important;
  color: var(--lg-muted);
  line-height: 1.5;
  flex-wrap: wrap;
  gap: 10px;
}
body .cl-editor-toolbar button {
  min-width: 38px;
  min-height: 38px;
}
body .cl-writing-area textarea {
  font-size: var(--lg-input) !important;
  line-height: 1.85 !important;
  min-height: 340px !important;
}
body :is(.cl-map-legend, .cl-arch-caption, .cl-jaw-label, .cl-map-keyboard) {
  font-size: var(--lg-small) !important;
  color: var(--lg-muted) !important;
  line-height: 1.6;
}
body .cl-map-toolbar {
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
}
body .cl-map-legend {
  flex-wrap: wrap;
  row-gap: 9px;
}
body .cl-workspace .cl-tooth-number,
body .cl-tooth > span {
  font-size: 14px !important;
  color: var(--lg-ink);
  line-height: 1.4;
  font-weight: 600;
}
body .cl-tooth small {
  font-size: var(--lg-small) !important;
  color: var(--lg-muted);
}
body .cl-workspace .cl-tooth-row {
  min-width: 892px;
  gap: 4px;
}
body .cl-workspace .cl-tooth {
  width: 52px;
  min-width: 52px;
  max-width: 52px;
  flex: 0 0 52px;
  padding: 6px 2px;
}
body .cl-workspace .cl-tooth > svg.clv-tooth {
  width: 48px !important;
  min-width: 48px;
  height: 96px !important;
  max-width: none;
}
/* Preserve the atlas viewport against older descendant-wide clinical SVG rules. */
body .cl-workspace .cl-tooth > svg.clv-tooth > g > svg {
  width: 120px;
  min-width: 0;
  height: 180px;
  max-width: none;
  margin: 0;
}
body .cl-workspace .cl-tooth .cl-tooth-dot {
  width: 20px;
  height: 20px;
  font-size: var(--lg-small) !important;
  line-height: 1;
}
body .cl-workspace .cl-tooth.has-record .cl-tooth-dot {
  background: #e4b86a;
  color: #473414;
}
body .cl-workspace .cl-tooth.has-record .cl-tooth-dot.is-executed {
  background: var(--lg-green);
  color: #fff;
}
body .clv-tooth .clv-crown {
  stroke: #859d8b;
}
body .clv-tooth .clv-crown-line {
  stroke: #79927f;
  opacity: 0.9;
}
body .clv-tooth .clv-root-line {
  stroke: #8ca48e;
  opacity: 0.8;
}
body .cl-tooth-selection-title small,
body .cl-tooth-selection-meta,
body .cl-tooth-selection-meta small {
  font-size: var(--lg-small) !important;
  color: var(--lg-muted);
  line-height: 1.5;
}
body .cl-tooth-selection-title h3 {
  color: var(--lg-ink);
  font-size: 26px;
}
body .cl-surface-preview > small {
  font-size: var(--lg-helper) !important;
  color: var(--lg-muted);
}
body .cl-inline-empty h4 {
  font-size: var(--lg-label) !important;
  color: var(--lg-ink);
}
body .cl-inline-empty p {
  font-size: var(--lg-helper) !important;
  color: var(--lg-muted);
  line-height: 1.65;
}
body .cl-dental-record h4 {
  font-size: var(--lg-label) !important;
  color: var(--lg-ink);
  line-height: 1.45;
}
body .cl-dental-record p {
  font-size: var(--lg-helper) !important;
  color: var(--lg-muted);
  line-height: 1.6;
}
body :is(.cl-record-status, .cl-surface-tags > span) {
  font-size: var(--lg-small) !important;
  line-height: 1.45;
  min-height: 24px;
}
body .cl-record-summary summary {
  font-size: var(--lg-label) !important;
  min-height: 44px;
  color: var(--lg-ink);
}
body .cl-record-summary summary > span {
  font-size: var(--lg-helper) !important;
  color: var(--lg-muted);
}
body .cl-surface-editor .cl-check {
  font-size: var(--lg-label) !important;
  min-height: 44px;
}
body .clv-surface text {
  font-size: 14px;
  fill: var(--lg-green);
}
body .clv-surface-caption {
  font-size: 12px;
  fill: var(--lg-muted);
  letter-spacing: 0.5px;
}
body .cl-material-chip {
  font-size: var(--lg-label) !important;
  color: var(--lg-ink);
  min-height: 44px;
}
body .cl-material-chip small {
  font-size: var(--lg-small) !important;
  color: var(--lg-muted);
}
body :is(.cl-face-board-label, .cl-face-board-footer) {
  font-size: var(--lg-helper) !important;
  color: var(--lg-muted);
  line-height: 1.6;
}
body .cl-inspector-header h3 {
  font-size: 18px;
  color: var(--lg-ink);
}
body .cl-point-number {
  min-width: 28px;
  height: 28px;
  font-size: var(--lg-small) !important;
  font-weight: 600;
}
body .cl-point-record > button {
  padding: 16px;
  gap: 11px;
  min-height: 65px;
}
body .cl-point-record > button strong {
  font-size: var(--lg-label) !important;
  color: var(--lg-ink);
  line-height: 1.4;
}
body .cl-point-record > button small {
  font-size: var(--lg-helper) !important;
  color: var(--lg-muted);
  line-height: 1.5;
}
body .cl-point-record > button > b {
  font-size: var(--lg-label) !important;
  color: var(--lg-green);
}
body .cl-point-detail {
  padding: 0 16px 16px;
}
body .cl-point-detail dt {
  font-size: var(--lg-small) !important;
  color: var(--lg-muted);
}
body .cl-point-detail dd {
  font-size: var(--lg-helper) !important;
  color: var(--lg-ink);
  line-height: 1.5;
}
body .cl-point-detail > div {
  flex-wrap: wrap;
  gap: 8px;
}
body .cl-inspector-empty h4 {
  font-size: 17px;
  color: var(--lg-ink);
}
body .cl-inspector-empty p {
  font-size: var(--lg-helper) !important;
  color: var(--lg-muted);
  line-height: 1.65;
}
body .cl-history-content > strong {
  font-size: 16px;
  color: var(--lg-ink);
  line-height: 1.45;
}
body .cl-history-content > small,
body .cl-history-note small {
  font-size: var(--lg-small) !important;
  color: var(--lg-muted);
}
body .cl-history-content > span,
body .cl-history-note p,
body .cl-history-modal-head p {
  font-size: var(--lg-helper) !important;
  color: var(--lg-muted);
  line-height: 1.7;
}
body .cl-history-document h3 {
  font-size: 18px;
  color: var(--lg-ink);
}
body .cl-history-document p {
  font-size: var(--lg-body);
  color: var(--lg-ink);
  line-height: 1.8;
}
body .cl-illustrated-empty h3 {
  font-size: 20px;
  color: var(--lg-ink);
}
body .cl-illustrated-empty p,
body .cl-workspace .cl-plan p {
  font-size: var(--lg-helper) !important;
  color: var(--lg-muted);
  line-height: 1.7;
}
body .cl-workspace .cl-plan h3 {
  font-size: 18px;
  color: var(--lg-ink);
}

/* Agenda: preserve time positioning while giving labels room to breathe. */
body .ag-mini-title strong {
  font-size: var(--lg-label);
  color: var(--lg-ink);
}
body .ag-weekletter,
body .ag-mini-day {
  font-size: var(--lg-small);
}
body .ag-mini-day {
  min-height: 28px;
}
body .ag-mini-day.outside:not(.selected) {
  color: #75897c;
}
body .ag-filter-details summary {
  font-size: var(--lg-label);
  min-height: 32px;
  color: var(--lg-ink);
}
body .ag-filter-fields :is(input, select) {
  font-size: var(--lg-input) !important;
}
body .ag-legend,
body .ag-legend strong {
  font-size: var(--lg-small);
  color: var(--lg-muted);
  line-height: 1.55;
}
body .ag-date-toolbar h2 {
  font-size: 16px;
  color: var(--lg-ink);
}
body .ag-date-jump {
  font-size: var(--lg-helper);
  color: var(--lg-muted);
}
body .ag-date-jump input {
  max-width: 168px;
}
body .ag-summary {
  font-size: var(--lg-helper);
  color: var(--lg-muted);
  gap: 16px;
}
body .ag-summary b {
  font-size: var(--lg-label);
  color: var(--lg-ink);
}
body .ag-grid {
  grid-template-columns: 64px repeat(var(--ag-columns), minmax(152px, 1fr));
  min-width: calc(64px + var(--ag-columns) * 152px);
  grid-template-rows: 82px var(--ag-height);
}
body .ag-grid-corner,
body .ag-times span {
  font-size: var(--lg-small);
  color: var(--lg-muted);
}
body .ag-column-title {
  gap: 4px;
}
body .ag-column-title > span {
  font-size: var(--lg-helper);
  color: var(--lg-muted);
}
body .ag-column-title strong {
  font-size: var(--lg-label);
  color: var(--lg-ink);
}
body .ag-column-title small {
  font-size: var(--lg-small);
  color: var(--lg-muted);
}
body .ag-column-title button {
  width: 36px;
  height: 36px;
  font-size: 22px;
}
body .ag-event {
  font-size: var(--lg-helper);
  line-height: 1.25;
  padding: 5px 6px;
  gap: 2px;
}
body .ag-event strong {
  font-size: var(--lg-helper);
  line-height: 1.3;
}
body .ag-event > span:not(.ag-event-time),
body .ag-event small,
body .ag-event-time {
  font-size: var(--lg-small);
  line-height: 1.3;
}
body .ag-event-time {
  opacity: 1;
}
body .ag-status-completed {
  color: #496654;
}
body .ag-status-cancelled {
  color: #6b756f;
  opacity: 1;
}
body .ag-cell-sub {
  font-size: var(--lg-helper);
  color: var(--lg-muted);
}
body :is(.ag-detail-grid dt, .ag-wait-card dt) {
  font-size: var(--lg-helper);
  color: var(--lg-muted);
}
body :is(.ag-detail-grid dd, .ag-wait-card dd, .ag-notes) {
  font-size: var(--lg-body);
  color: var(--lg-ink);
}
body .ag-empty-inline {
  font-size: var(--lg-helper);
  color: var(--lg-muted);
}

/* User-controlled display preference, independent from clinical data. */
.lg-display-control {
  position: relative;
  flex: none;
}
body .lg-display-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--lg-control-height);
  border: 1px solid #b9d0c3;
  border-radius: 12px;
  background: #fff;
  color: var(--lg-ink);
  padding: 10px 13px;
  font-family: inherit;
  font-size: var(--lg-control);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}
.lg-display-button:hover,
.lg-display-button[aria-expanded='true'] {
  background: #edf6f0;
  border-color: #74a48c;
}
.lg-display-mark {
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -1.2px;
  color: #177c72;
}
.lg-display-button > svg {
  width: 16px;
  height: 16px;
  transition: transform 190ms;
}
.lg-display-button[aria-expanded='true'] > svg {
  transform: rotate(180deg);
}
.lg-display-panel {
  position: absolute;
  z-index: 60;
  top: calc(100% + 12px);
  right: 0;
  width: 320px;
  max-width: calc(100vw - 28px);
  background: #fff;
  border: 1px solid #c0d6c9;
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 16px 48px #173e302b;
  color: #203d35;
}
.lg-display-panel[hidden] {
  display: none;
}
.lg-display-panel:not([hidden]) {
  animation: lg-panel-in 190ms var(--lg-ease);
}
.lg-display-panel h2 {
  margin: 0 0 6px;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 650;
  color: #203d35;
}
.lg-display-panel > p {
  margin: 0 0 16px;
  font-size: 14px;
  color: #52665d;
  line-height: 1.5;
}
.lg-display-panel fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
  display: grid;
  gap: 9px;
}
.lg-display-panel legend {
  font-size: 13px;
  color: #52665d;
  padding: 0;
  margin-bottom: 10px;
}
.lg-display-option {
  display: flex;
  gap: 12px;
  align-items: center;
  border: 1px solid #ccdcd2;
  background: #fff;
  border-radius: 12px;
  padding: 13px;
  min-height: 64px;
  cursor: pointer;
  transition:
    background 190ms,
    border-color 190ms;
}
.lg-display-option:has(input:checked) {
  background: #edf7f0;
  border-color: #5c9e83;
}
.lg-display-option input {
  width: 18px;
  height: 18px;
  flex: none;
  margin: 0 !important;
}
.lg-display-option span {
  display: grid;
  gap: 3px;
}
.lg-display-option strong {
  font-size: 15px;
  color: #203d35;
  line-height: 1.35;
}
.lg-display-option small {
  font-size: 13px;
  color: #52665d;
  line-height: 1.4;
}
.lg-display-status {
  min-height: 20px;
  margin: 12px 0 0 !important;
  font-size: 12px !important;
}
.lg-display-panel .lg-display-close {
  display: block;
  margin: 10px 0 0 auto;
  min-height: 40px;
  border: 0;
  border-radius: 9px;
  background: #edf4ef;
  color: #177c72;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 14px;
  cursor: pointer;
}

/* Short, bounded motion; changing routes never washes out the content. */
body .nav-item .nav-icon,
body .drawer-heading button .icon,
body .topbar .mobile-menu .icon {
  transition: transform 190ms var(--lg-ease);
}
body .nav-item:hover .nav-icon {
  transform: translateX(2px);
}
body .topbar .mobile-menu:active .icon {
  transform: scale(0.9);
}
body .drawer-heading button:hover .icon {
  transform: rotate(90deg);
}
body .nav-submenu {
  animation: lg-panel-in 190ms var(--lg-ease);
}
body .nav-submenu a {
  transition:
    background 190ms,
    border-color 190ms,
    color 190ms;
}
body .btn:hover:not(:disabled) {
  transform: translateY(-1px);
}
body .btn:active:not(:disabled),
body .lg-display-button:active {
  transform: translateY(1px);
}
body .cl-enc-section:not([hidden]),
body .page.route-enter > :is(.page-header, .module-tabs, .panel, .stats-grid) {
  animation: lg-content-in 210ms var(--lg-ease);
}
/* This ancestor contains the fixed clinical footer; keep it viewport anchored. */
body .page.route-enter > .cl-workspace {
  animation: lg-workspace-in 100ms ease;
}
@keyframes lg-content-in {
  from {
    transform: translateY(3px);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes lg-workspace-in {
  from {
    opacity: 0.99;
  }
  to {
    opacity: 1;
  }
}
@keyframes lg-panel-in {
  from {
    transform: translateY(-3px);
  }
  to {
    transform: translateY(0);
  }
}
body :is(button, a, summary, input, select, textarea):focus-visible {
  outline: 3px solid var(--lg-focus);
  outline-offset: 3px;
}

@media (min-width: 1200px) {
  body .ag-layout {
    grid-template-columns: 250px minmax(0, 1fr);
  }
  body .cl-work-grid {
    grid-template-columns: minmax(0, 1fr) 270px;
  }
}
@media (max-width: 1100px) {
  body .topbar .search-box input {
    width: 150px;
  }
  body .breadcrumb {
    max-width: 220px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  body .cl-quick-cards {
    grid-template-columns: 1fr;
  }
  body .cl-point-list {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 850px) {
  body .topbar .breadcrumb {
    display: none;
  }
  body .topbar .search-box {
    display: none;
  }
  body .cl-workspace .panel {
    padding: 23px !important;
  }
  body .cl-header-actions {
    gap: 10px;
  }
  body .cl-patient-header {
    flex-wrap: wrap;
  }
  body .cl-patient-header h1 {
    font-size: 26px;
  }
}
@media (max-width: 680px) {
  body .topbar {
    padding-inline: 14px;
    gap: 10px;
  }
  body .topbar-left {
    gap: 10px;
  }
  body .topbar-actions {
    gap: 8px;
  }
  body .topbar-actions > .avatar {
    display: none !important;
  }
  body .sidebar {
    width: min(300px, calc(100vw - 24px));
  }
  body .page {
    padding: 24px 16px 36px;
  }
  body .page-title {
    font-size: 26px;
  }
  body .page-header .page-actions {
    width: 100%;
    max-width: none;
  }
  body .page-actions .btn {
    white-space: normal;
  }
  body .module-tabs {
    margin-bottom: 22px;
  }
  body .module-tabs a,
  body .module-tabs .btn {
    padding: 11px 14px;
  }
  body .data-table th,
  body .data-table td {
    padding: 14px;
  }
  body .modal-header h2 {
    font-size: 22px;
  }
  body .modal-body {
    padding: 20px;
  }
  body .modal-footer .btn {
    flex: 1;
    min-width: 0;
    white-space: normal;
  }
  body .demo-banner {
    min-height: 44px;
    padding-inline: 16px;
    gap: 8px;
  }
  body .demo-banner .btn {
    font-size: 0 !important;
    min-width: 38px;
    min-height: 38px !important;
  }
  body .demo-banner .btn .icon {
    width: 19px;
    height: 19px;
  }
  body .mobile-dock {
    gap: 3px;
    padding: 7px;
  }
  body .mobile-dock > .btn {
    font-size: var(--lg-small) !important;
    min-height: 64px !important;
    line-height: 1.2;
    padding: 8px 2px;
    gap: 5px;
  }
  body .mobile-dock .icon {
    width: 21px;
    height: 21px;
  }
  body .cl-patient-header {
    gap: 16px;
  }
  body .cl-patient-identity {
    gap: 13px;
  }
  body .cl-patient-header h1 {
    font-size: 25px;
  }
  body .cl-header-actions {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
  }
  body .cl-header-actions .btn {
    padding: 10px 13px;
    gap: 8px;
    font-size: var(--lg-control) !important;
  }
  body .cl-header-actions .btn svg {
    width: 18px;
    height: 18px;
  }
  body .cl-workspace .panel {
    padding: 20px !important;
  }
  body .cl-workspace .panel-header {
    gap: 14px;
    padding-bottom: 22px !important;
  }
  body .cl-workspace .panel-title {
    font-size: 20px !important;
  }
  body .cl-workspace .cl-injection-layout,
  body .cl-workspace .cl-work-grid {
    grid-template-columns: 1fr;
  }
  body .cl-workspace .cl-tooth-row {
    min-width: 892px;
    gap: 4px;
  }
  body .cl-tooth-selection-title {
    flex-wrap: wrap;
    gap: 12px;
  }
  body .cl-tooth-selection-title > .btn {
    margin-left: auto;
    white-space: normal;
  }
  body .cl-tooth-selection-meta {
    display: none;
  }
  body .cl-surface-preview svg {
    width: 128px;
    height: 116px;
  }
  body .cl-tooth-detail-content {
    padding: 19px;
  }
  body .cl-surface-tags {
    gap: 6px;
  }
  body .cl-material-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  body .cl-work-footer {
    padding: 13px 16px;
    gap: 12px;
  }
  body .cl-footer-state {
    gap: 12px;
    flex-wrap: wrap;
  }
  body .cl-footer-actions {
    gap: 9px;
  }
  body .cl-footer-actions .btn {
    min-width: 0;
    min-height: var(--lg-control-height) !important;
    font-size: var(--lg-control) !important;
    padding: 11px;
    white-space: normal;
    line-height: 1.4;
  }
  body .cl-footer-actions .btn svg {
    width: 18px;
    height: 18px;
  }
  body .cl-workspace {
    padding-bottom: 195px;
  }
  body .cl-map-keyboard {
    max-width: none;
  }
  body .ag-date-toolbar {
    gap: 12px;
    padding: 16px 12px;
  }
  body .ag-date-toolbar h2 {
    font-size: var(--lg-label);
    line-height: 1.5;
  }
  body .ag-grid {
    grid-template-columns: 60px repeat(var(--ag-columns), minmax(154px, 1fr));
    min-width: calc(60px + var(--ag-columns) * 154px);
  }
  body .ag-filter-fields {
    gap: 14px;
  }
  body .ag-date-jump input {
    max-width: 154px;
  }
  .lg-display-button {
    padding: 10px 11px;
  }
  .lg-display-panel {
    position: fixed;
    right: 14px;
    top: calc(var(--header-height, 64px) + 8px);
    width: 320px;
  }
}
@media (max-width: 420px) {
  body .topbar {
    padding-inline: 12px;
  }
  body .topbar-brand .brand-mark {
    display: none;
  }
  body .topbar-brand .brand-name {
    font-size: 24px;
  }
  .lg-display-mark {
    display: none;
  }
  body .lg-display-button {
    padding: 10px 12px;
    gap: 7px;
  }
  body .cl-material-overview {
    grid-template-columns: 1fr;
  }
  body .ag-date-toolbar > .ag-date-jump {
    width: 100%;
    justify-content: flex-end;
  }
  body .cl-surface-editor .cl-surfaces {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lg-display-panel,
  .lg-display-button,
  .lg-display-button > svg,
  .lg-display-option,
  body .nav-submenu,
  body .nav-item .nav-icon,
  body .drawer-heading button .icon,
  body .topbar .mobile-menu .icon,
  body .cl-enc-section:not([hidden]),
  body .page.route-enter > * {
    animation: none !important;
    transition: none !important;
  }
  body .btn:hover:not(:disabled),
  body .btn:active:not(:disabled),
  body .lg-display-button:active,
  body .nav-item:hover .nav-icon,
  body .drawer-heading button:hover .icon,
  body .topbar .mobile-menu:active .icon {
    transform: none;
  }
}
@media print {
  .lg-display-control {
    display: none !important;
  }
}