@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
.dashboard.layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0.75rem;
  align-items: start;
}

.day-start {
  display: grid;
  gap: 1rem;
}

.day-start .loading {
  min-height: 12rem;
}

.day-start .steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 0.5rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.day-start .step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.5rem;
  border-radius: 0.5rem;
  color: var(--placeholder-text-color);
  background: rgba(255, 255, 255, 0.62);
}

.day-start .step.active {
  color: var(--primary-color);
  background: var(--primary-background-color);
}

.day-start .step.complete {
  color: var(--success-color);
}

.day-start .index {
  display: inline-grid;
  flex: 0 0 1.75rem;
  width: 1.75rem;
  height: 1.75rem;
  place-items: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.08);
  font-weight: 700;
}

.day-start .panel {
  min-height: 18rem;
}

.day-start .section {
  display: grid;
  gap: 0.75rem;
}

.day-start .task {
  max-width: 38rem;
}

.day-start .state.empty {
  min-height: 12rem;
}

.day-start .state.empty > .bi {
  font-size: 2rem;
}

.day-start .actions,
.day-start .footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.day-start .footer {
  justify-content: flex-end;
}

.day-start .alert {
  margin: 0;
}

.day-start .action {
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
}
.day-start .action:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.day-start .action:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.day-start .action:disabled, .day-start .action[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}

.day-start .retry.action,
.day-start .open.action,
.day-start .next.action {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--primary-text-color);
}

.day-start .close.action,
.day-start .skip.action,
.day-start .previous.action {
  background: transparent;
  border-color: var(--primary-color);
  box-shadow: none;
  color: var(--primary-color);
}
.day-start .close.action:hover:not(:disabled, [aria-disabled=true]),
.day-start .skip.action:hover:not(:disabled, [aria-disabled=true]),
.day-start .previous.action:hover:not(:disabled, [aria-disabled=true]) {
  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
  border-color: var(--primary-color);
  box-shadow: none;
  color: var(--primary-color);
}

.dashboard.layout.editing {
  padding-bottom: 6.5rem;
}

.dashboard.state {
  display: grid;
  grid-column: 1/-1;
  min-height: 16rem;
  padding: 2rem 1rem;
  place-items: center;
}

.dashboard.state > .state.panel,
.dashboard.state > .state.empty {
  --empty-state-padding: 1rem;
  --empty-state-gap: 0.5rem;
  display: grid;
  place-items: center;
  min-height: 12rem;
  color: var(--empty-state-color, var(--placeholder-text-color));
  gap: var(--empty-state-gap, var(--spacing-sm));
  padding: var(--empty-state-padding, var(--padding-default));
  text-align: center;
  max-width: 34rem;
  text-align: center;
}

.dashboard.state > .state.panel > .bi,
.dashboard.state > .state.empty > .bi {
  --empty-icon-background: color-mix(in srgb, var(--background-input) 94%, var(--primary-background-color));
  --empty-icon-shadow: none;
  align-items: center;
  background: var(--empty-icon-background, linear-gradient(145deg, color-mix(in srgb, var(--background-input) 98%, transparent), color-mix(in srgb, var(--primary-color) 8%, var(--background-input))));
  border: var(--empty-icon-border, var(--border-width-default) solid color-mix(in srgb, #ffffff 78%, transparent));
  border-radius: 999px;
  box-shadow: var(--empty-icon-shadow, 0 1rem 2.2rem color-mix(in srgb, var(--shadow-color, #1f2937) 18%, transparent), 0 0 0 0.65rem color-mix(in srgb, var(--primary-color) 7%, transparent));
  color: var(--empty-icon-color, var(--primary-color));
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 1.35rem;
  height: 3.25rem;
  justify-content: center;
  line-height: 1;
  width: 3.25rem;
}

.dashboard.state > .state.panel h3,
.dashboard.state > .state.empty h3,
.dashboard.box.widget .state.error .title {
  margin: 0.5rem 0 0.35rem;
}

.dashboard.state > .state.panel .actions,
.dashboard.state > .state.empty .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 1rem;
}

.dashboard.state > .state.empty .create.action,
.dashboard.state > .state.empty .default.action,
.dashboard.state > .state.panel .create.action {
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
}
.dashboard.state > .state.empty .create.action:focus-visible,
.dashboard.state > .state.empty .default.action:focus-visible,
.dashboard.state > .state.panel .create.action:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.dashboard.state > .state.empty .create.action:hover:not(:disabled, [aria-disabled=true]),
.dashboard.state > .state.empty .default.action:hover:not(:disabled, [aria-disabled=true]),
.dashboard.state > .state.panel .create.action:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.dashboard.state > .state.empty .create.action:disabled, .dashboard.state > .state.empty .create.action[aria-disabled=true],
.dashboard.state > .state.empty .default.action:disabled,
.dashboard.state > .state.empty .default.action[aria-disabled=true],
.dashboard.state > .state.panel .create.action:disabled,
.dashboard.state > .state.panel .create.action[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}

.dashboard.state > .state.empty .create.action,
.dashboard.state > .state.panel .create.action {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--primary-text-color);
}

.dashboard.state > .state.empty .default.action {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--secondary-text-color);
}

.dashboard.editing.status {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid color-mix(in srgb, var(--primary-color) 32%, transparent);
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--primary-color) 9%, transparent);
}

.dashboard.editing.status > i {
  color: var(--primary-color);
  font-size: 1.25rem;
}

.dashboard.editing.status .copy {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.dashboard.editing.status .copy span {
  color: var(--placeholder-text-color);
  font-size: 0.88rem;
}

.dashboard.box.widget {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  position: relative;
  grid-column: var(--dashboard-sm-start, auto)/span var(--dashboard-sm-width, 12);
}

.dashboard.box.widget > .surface {
  background: color-mix(in srgb, var(--background-input) 96%, transparent);
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 72%, transparent);
  color: var(--color-surface, var(--text-color));
  border-radius: 0.5rem;
  box-shadow: var(--shadow-card);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-inline-start: 0.75rem;
  padding-inline-end: 0.75rem;
  display: grid;
  gap: 0.65rem;
  inline-size: 100%;
  min-width: 0;
}

.dashboard.box.widget > .surface.is-plain {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.dashboard.box.widget > .surface > .header {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.dashboard.box.widget > .surface > .header .title {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.dashboard.box.widget > .surface > .header .title > .bi {
  color: var(--primary-color);
  flex: 0 0 auto;
}

.dashboard.box.widget > .surface > .header h3 {
  min-width: 0;
  margin: 0;
  color: var(--text-color);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.dashboard.box.widget > .surface > .content {
  display: grid;
  gap: 0.65rem;
  inline-size: 100%;
  min-width: 0;
}

.dashboard.box.widget > .surface > .content > header {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
  min-width: 0;
}

.dashboard.box.widget > .surface > .content > header .title {
  color: var(--text-color);
  font-weight: 700;
  min-width: 0;
}

.dashboard.box.widget > .surface > .content > header .danger {
  color: var(--danger-color);
}

.dashboard.box.widget > .surface > .content > header .warning {
  color: var(--warning-color);
}

.dashboard.box.widget a.action,
.dashboard.box.widget .retry.action,
.dashboard.box.widget .pick.action,
.dashboard.box.widget .settings.action {
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--secondary-text-color);
  font-size: var(--button-small-font-size, var(--font-size-small));
  min-height: var(--button-small-min-height, 2rem);
  padding-inline-start: var(--button-small-padding-inline, var(--spacing-sm));
  padding-inline-end: var(--button-small-padding-inline, var(--spacing-sm));
  padding-top: var(--button-small-padding-block, var(--spacing-xs));
  padding-bottom: var(--button-small-padding-block, var(--spacing-xs));
}
.dashboard.box.widget a.action:focus-visible,
.dashboard.box.widget .retry.action:focus-visible,
.dashboard.box.widget .pick.action:focus-visible,
.dashboard.box.widget .settings.action:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.dashboard.box.widget a.action:hover:not(:disabled, [aria-disabled=true]),
.dashboard.box.widget .retry.action:hover:not(:disabled, [aria-disabled=true]),
.dashboard.box.widget .pick.action:hover:not(:disabled, [aria-disabled=true]),
.dashboard.box.widget .settings.action:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.dashboard.box.widget a.action:disabled, .dashboard.box.widget a.action[aria-disabled=true],
.dashboard.box.widget .retry.action:disabled,
.dashboard.box.widget .retry.action[aria-disabled=true],
.dashboard.box.widget .pick.action:disabled,
.dashboard.box.widget .pick.action[aria-disabled=true],
.dashboard.box.widget .settings.action:disabled,
.dashboard.box.widget .settings.action[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}

.dashboard.box.widget .state.empty .pick.action {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--primary-text-color);
}

.dashboard.box.widget .toolbar {
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}

.dashboard.box.widget .toolbar button.action {
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--secondary-text-color);
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  padding: 0;
}
.dashboard.box.widget .toolbar button.action:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.dashboard.box.widget .toolbar button.action:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.dashboard.box.widget .toolbar button.action:disabled, .dashboard.box.widget .toolbar button.action[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}

.dashboard.box.widget .loading {
  display: grid;
  place-items: center;
  min-height: 6rem;
}

.dashboard.box.widget .item {
  min-width: 0;
}

.dashboard.box.widget .state.empty {
  --empty-state-padding: 0.85rem;
  --empty-state-gap: 0.35rem;
  display: grid;
  place-items: center;
  min-height: 8rem;
  color: var(--empty-state-color, var(--placeholder-text-color));
  gap: var(--empty-state-gap, var(--spacing-sm));
  padding: var(--empty-state-padding, var(--padding-default));
  text-align: center;
  min-width: 0;
}

.dashboard.box.widget .state.empty > .bi,
.dashboard.box.widget .state.error > .bi {
  --empty-icon-background: color-mix(in srgb, var(--background-input) 94%, var(--primary-background-color));
  --empty-icon-shadow: none;
  align-items: center;
  background: var(--empty-icon-background, linear-gradient(145deg, color-mix(in srgb, var(--background-input) 98%, transparent), color-mix(in srgb, var(--primary-color) 8%, var(--background-input))));
  border: var(--empty-icon-border, var(--border-width-default) solid color-mix(in srgb, #ffffff 78%, transparent));
  border-radius: 999px;
  box-shadow: var(--empty-icon-shadow, 0 1rem 2.2rem color-mix(in srgb, var(--shadow-color, #1f2937) 18%, transparent), 0 0 0 0.65rem color-mix(in srgb, var(--primary-color) 7%, transparent));
  color: var(--empty-icon-color, var(--primary-color));
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 1.25rem;
  height: 3rem;
  justify-content: center;
  line-height: 1;
  width: 3rem;
}

.dashboard.box.widget .state .title,
.dashboard.box.widget .state .description,
.dashboard.box.widget .state p {
  margin: 0;
  overflow-wrap: anywhere;
}

.dashboard.box.widget .state .title {
  color: var(--text-color);
  font-weight: 700;
}

.dashboard.box.widget .state small,
.dashboard.box.widget .state .description {
  color: var(--placeholder-text-color);
}

@media (min-width: 768px) {
  .dashboard.box.widget {
    grid-column: var(--dashboard-md-start, auto)/span var(--dashboard-md-width, var(--dashboard-sm-width, 12));
  }
}
@media (min-width: 1200px) {
  .dashboard.box.widget {
    grid-column: var(--dashboard-xl-start, auto)/span var(--dashboard-xl-width, var(--dashboard-md-width, 12));
  }
}
.dashboard.box.widget > .edit-tools {
  position: absolute;
  z-index: 4;
  top: 0.25rem;
  right: 0.25rem;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.dashboard.box.widget > .edit-tools button.action {
  flex: 0 0 auto;
  min-height: 2rem;
  min-width: 2rem;
  padding: 0;
  width: 2rem;
}

.dashboard.box.widget > .edit-tools .drag-handle {
  touch-action: none;
  cursor: grab;
}

.dashboard.box.widget.is-dragging {
  opacity: 0.72;
  outline: 2px solid var(--primary-color);
}

.dashboard.editing.actions {
  position: fixed;
  z-index: 6;
  left: 50%;
  bottom: max(0.75rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  max-width: min(48rem, 100% - 2rem);
  padding: 0.5rem;
  border: 1px solid color-mix(in srgb, var(--border-color-default) 70%, transparent);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

.dashboard.editing.actions .action {
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
  width: auto;
}
.dashboard.editing.actions .action:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.dashboard.editing.actions .action:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.dashboard.editing.actions .action:disabled, .dashboard.editing.actions .action[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}

.dashboard.editing.actions .add.action,
.dashboard.editing.actions .save.action {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--primary-text-color);
}

.dashboard.editing.actions .cancel.action {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--secondary-text-color);
}

.dashboard.box.widget .state.error {
  --empty-state-padding: 1rem;
  display: grid;
  place-items: center;
  min-height: 8rem;
  color: var(--empty-state-color, var(--placeholder-text-color));
  gap: var(--empty-state-gap, var(--spacing-sm));
  padding: var(--empty-state-padding, var(--padding-default));
  text-align: center;
  min-width: 0;
}

.dashboard.box.widget .state.error .retry.action {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--secondary-text-color);
  font-size: var(--button-small-font-size, var(--font-size-small));
  min-height: var(--button-small-min-height, 2rem);
  padding-inline-start: var(--button-small-padding-inline, var(--spacing-sm));
  padding-inline-end: var(--button-small-padding-inline, var(--spacing-sm));
  padding-top: var(--button-small-padding-block, var(--spacing-xs));
  padding-bottom: var(--button-small-padding-block, var(--spacing-xs));
  margin-top: 0.75rem;
  width: auto;
}

@media (max-width: 640px) {
  .dashboard.editing.actions {
    width: calc(100% - 1rem);
  }
}
.dashboard.box.settings {
  background: color-mix(in srgb, var(--background-input) 96%, transparent);
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 72%, transparent);
  color: var(--color-surface, var(--text-color));
  border-radius: 0.5rem;
  box-shadow: var(--shadow-card);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-inline-start: 0.75rem;
  padding-inline-end: 0.75rem;
  display: grid;
  gap: 0.75rem;
}

.dashboard.box.settings > header {
  align-items: center;
  color: var(--primary-color);
  display: flex;
  gap: 0.5rem;
  font-weight: 700;
}

.dashboard.box.settings > .body {
  display: grid;
  gap: 0.75rem;
}

.project.selector {
  display: grid;
  gap: 0.35rem;
}

.project.selector .project.option {
  margin: 0;
}

.project.selector .project.option > label {
  align-items: center;
  display: inline-flex;
  gap: 0.35rem;
  min-width: 0;
}

.project.selector .color.swatch {
  width: 0.75rem;
  height: 0.75rem;
  background-color: var(--color-swatch, currentColor);
  border-radius: var(--border-radius-swatch, var(--border-radius-small));
  flex: 0 0 0.75rem;
}

.project.selector .empty {
  color: var(--placeholder-text-color);
  font-size: var(--font-size-small);
}

.dashboard.layout .tabs.layout,
.dashboard.layout .layout.presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}

.dashboard.layout .layout.presets .option.active,
.dashboard.layout .tabs.layout .link.active {
  border-color: var(--primary-color);
  background: var(--primary-background-color);
  color: var(--primary-color);
}

.dashboard.box.add,
.dashboard.pin.picker {
  display: grid;
  gap: 0.75rem;
  min-width: min(100%, 22rem);
}

.dashboard.box.add h3 {
  margin: 0;
}

.dashboard.box.add .add.action,
.dashboard.pin.picker .pin.action {
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--primary-text-color);
}
.dashboard.box.add .add.action:focus-visible,
.dashboard.pin.picker .pin.action:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.dashboard.box.add .add.action:hover:not(:disabled, [aria-disabled=true]),
.dashboard.pin.picker .pin.action:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.dashboard.box.add .add.action:disabled, .dashboard.box.add .add.action[aria-disabled=true],
.dashboard.pin.picker .pin.action:disabled,
.dashboard.pin.picker .pin.action[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}

.dashboard.pin.picker .cancel.action {
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--secondary-text-color);
}
.dashboard.pin.picker .cancel.action:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.dashboard.pin.picker .cancel.action:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.dashboard.pin.picker .cancel.action:disabled, .dashboard.pin.picker .cancel.action[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}

.dashboard.pin.picker .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}

.day-overview .overview.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 5.25rem), 1fr));
  gap: 0.5rem;
}

.day-overview > .title {
  text-align: center;
}

.day-overview .summary.item {
  min-width: 0;
  padding: 0.65rem;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.72);
  text-align: center;
  overflow-wrap: anywhere;
}

.day-overview .summary.item .value {
  display: block;
  font-weight: 700;
  font-size: 1.1rem;
}

.day-overview .summary.item .label {
  display: block;
  color: var(--placeholder-text-color);
  font-size: 0.78rem;
}

.day-overview .next.item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.date.box {
  --background-panel: color-mix(in srgb, var(--background-input) 82%, transparent);
  --border-panel: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 70%, transparent);
  --padding-panel: var(--spacing-default);
  background: var(--background-panel, var(--background-surface, var(--background-input)));
  border: var(--border-panel, var(--border-surface, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-panel, var(--border-radius-card, var(--border-radius-default)));
  box-shadow: var(--shadow-panel, var(--shadow-card, var(--shadow-default)));
  padding-top: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-bottom: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-start: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-end: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  backdrop-filter: var(--filter-panel, none);
  -webkit-backdrop-filter: var(--filter-panel, none);
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}

.date.box .subtitle {
  color: var(--placeholder-text-color);
  font-size: 0.9rem;
}

.date.box .time {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.85rem;
}

.date.box .time span {
  align-items: center;
  display: inline-flex;
  gap: 0.4rem;
  min-width: 0;
}

.daily.focus {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  min-width: 0;
}

.daily.focus.now,
.daily.focus.next,
.daily.focus.routines,
.daily.focus.actions {
  min-height: 100%;
}

.daily.focus > .header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-start;
  justify-content: space-between;
}

.daily.focus .title {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  min-width: 12rem;
}

.daily.focus .title > i {
  color: var(--primary-color);
  font-size: 1.35rem;
  line-height: 1.2;
}

.daily.focus .title h5 {
  margin: 0;
  font-size: 1rem;
}

.daily.focus .title p {
  margin: 0.15rem 0 0;
  color: var(--placeholder-text-color);
  font-size: 0.82rem;
}

.daily.focus .summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.daily.focus .summary span {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  padding: 0.35rem 0.5rem;
  border: var(--border-width-default) solid var(--border-color-default);
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--background-input) 84%, var(--primary-background-color));
  color: var(--placeholder-text-color);
  font-size: 0.75rem;
}

.daily.focus .summary strong {
  color: var(--text-color);
  font-size: 0.9rem;
}

.daily.focus > .header .start.action {
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--secondary-text-color);
  flex: 0 0 auto;
  min-height: 2rem;
  min-width: 2rem;
  padding: 0;
  width: 2rem;
}
.daily.focus > .header .start.action:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.daily.focus > .header .start.action:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.daily.focus > .header .start.action:disabled, .daily.focus > .header .start.action[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}

.daily.focus .quick.capture {
  min-width: 0;
}

.daily.focus .lanes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
}

.daily.focus .lane,
.daily.focus .restart {
  min-width: 0;
  padding: 0.65rem;
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 78%, transparent);
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--background-input) 76%, transparent);
}

.daily.focus .lane.now {
  border-color: color-mix(in srgb, var(--primary-color) 34%, var(--border-color-default));
  background: color-mix(in srgb, var(--background-input) 72%, var(--primary-background-color));
}

.daily.focus .header.lane,
.daily.focus .restart {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
}

.daily.focus .header.lane h6,
.daily.focus .restart h6 {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  min-width: 0;
  margin: 0;
  font-size: 0.88rem;
}

.daily.focus .count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background: var(--background-hover);
  color: var(--placeholder-text-color);
  font-size: 0.75rem;
}

.daily.focus ul {
  display: grid;
  gap: 0.45rem;
  margin: 0.55rem 0 0;
  padding: 0;
  list-style: none;
}

.daily.focus .item {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
  padding: 0.55rem;
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 70%, transparent);
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--background-default) 84%, transparent);
}

.daily.focus .item.primary {
  margin-top: 0.55rem;
}

.daily.focus .item.skipped {
  opacity: 0.72;
}

.daily.focus .item .body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.55rem;
  min-width: 0;
  align-items: flex-start;
}

.daily.focus .item .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary-color) 10%, transparent);
  color: var(--primary-color);
  font-size: 0.9rem;
}

.daily.focus .item .content {
  display: grid;
  min-width: 0;
  gap: 0.18rem;
}

.daily.focus .item .title.action {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  text-align: left;
  overflow-wrap: anywhere;
}

.daily.focus .item .title.action:hover,
.daily.focus .item .title.action:focus-visible {
  color: var(--primary-color);
  text-decoration: underline;
}

.daily.focus .item .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  color: var(--placeholder-text-color);
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

.daily.focus .item .meta span {
  min-width: 0;
}

.daily.focus .item > .actions,
.daily.focus .restart .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-width: 0;
  align-items: center;
}

.daily.focus .item > .actions .action,
.daily.focus .restart .actions .action {
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--secondary-text-color);
}
.daily.focus .item > .actions .action:focus-visible,
.daily.focus .restart .actions .action:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.daily.focus .item > .actions .action:hover:not(:disabled, [aria-disabled=true]),
.daily.focus .restart .actions .action:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.daily.focus .item > .actions .action:disabled, .daily.focus .item > .actions .action[aria-disabled=true],
.daily.focus .restart .actions .action:disabled,
.daily.focus .restart .actions .action[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}

.daily.focus .item > .actions .start.action,
.daily.focus .restart .actions .pick.action {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--primary-text-color);
}

.daily.focus .item > .actions .compact.action {
  flex: 0 0 auto;
  min-height: 2rem;
  min-width: 2rem;
  padding: 0;
  width: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.daily.focus .restart .actions .action {
  width: auto;
}

.daily.focus .state.empty,
.daily.focus .state.empty.line,
.daily.focus .item > .minimum,
.daily.focus .restart p {
  margin: 0;
  color: var(--placeholder-text-color);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.daily.focus .state.empty {
  display: grid;
  gap: 0.15rem;
  margin-top: 0.55rem;
}

.daily.focus .state.empty strong {
  color: var(--text-color);
}

.daily.focus .state.empty.line {
  margin-top: 0.55rem;
}

.daily.focus .item > .minimum {
  padding: 0.45rem 0.55rem;
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--warning-color, #f0b429) 12%, transparent);
  color: var(--text-color);
}

.daily.focus .restart {
  align-items: flex-start;
}

.daily.focus .restart > div {
  min-width: 0;
}

.end-of-day.dashboard {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
}

.end-of-day.dashboard .date {
  margin: 0;
  color: var(--placeholder-text-color);
  font-size: 0.86rem;
}

.end-of-day.dashboard .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.6rem;
}

.end-of-day.dashboard .section,
.end-of-day.dashboard .next {
  min-width: 0;
  padding: 0.7rem;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.72);
}

.end-of-day.dashboard .section > header,
.end-of-day.dashboard .next > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 0;
}

.end-of-day.dashboard .title {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  color: var(--placeholder-text-color);
  font-size: 0.82rem;
}

.end-of-day.dashboard .title span {
  overflow-wrap: anywhere;
}

.end-of-day.dashboard .count {
  flex: 0 0 auto;
  font-size: 1.05rem;
}

.end-of-day.dashboard ul {
  display: grid;
  gap: 0.35rem;
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
}

.end-of-day.dashboard ul li,
.end-of-day.dashboard .action,
.end-of-day.dashboard .state.empty {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 0.9rem;
}

.end-of-day.dashboard .more {
  color: var(--placeholder-text-color);
  font-size: 0.8rem;
}

.end-of-day.dashboard .link {
  color: inherit;
  text-decoration: none;
}

.end-of-day.dashboard .link:hover,
.end-of-day.dashboard .link:focus-visible {
  color: var(--primary-color);
  text-decoration: underline;
}

.end-of-day.dashboard .next {
  display: grid;
  gap: 0.5rem;
}

.today.dashboard {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-width: 0;
}

.today.dashboard > header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-start;
  justify-content: space-between;
}

.today.dashboard > header > .title {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  min-width: 12rem;
}

.today.dashboard > header > .title > i {
  color: var(--primary-color);
  font-size: 1.35rem;
  line-height: 1.2;
}

.today.dashboard > header > .title h5 {
  margin: 0;
  font-size: 1rem;
}

.today.dashboard > header > .title p {
  margin: 0.15rem 0 0;
  color: var(--placeholder-text-color);
  font-size: 0.82rem;
}

.today.dashboard > header > .summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.today.dashboard > header > .summary > .item {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  padding: 0.35rem 0.5rem;
  border: var(--border-width-default) solid var(--border-color-default);
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--background-input) 84%, var(--primary-background-color));
  color: var(--placeholder-text-color);
  font-size: 0.75rem;
}

.today.dashboard > header > .summary > .item strong {
  color: var(--text-color);
  font-size: 0.9rem;
}

.today.dashboard .sections {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
}

.today.dashboard .section {
  min-width: 0;
  padding: 0.65rem;
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 78%, transparent);
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--background-input) 76%, transparent);
}

.today.dashboard .section h6 {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  margin: 0 0 0.5rem;
  font-size: 0.88rem;
}

.today.dashboard .section h6 .count {
  margin-left: auto;
}

.today.dashboard ul {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.today.dashboard ul .item {
  display: flex;
  width: 100%;
  min-width: 0;
  gap: 0.55rem;
  align-items: flex-start;
  padding: 0.35rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: inherit;
  text-align: left;
  text-decoration: none;
}

.today.dashboard ul .item:hover,
.today.dashboard ul .item:focus-visible {
  background: var(--background-hover);
  color: inherit;
  text-decoration: none;
}

.today.dashboard ul .item > i {
  flex: 0 0 auto;
  margin-top: 0.15rem;
  color: var(--primary-color);
}

.today.dashboard ul .item .content {
  display: grid;
  min-width: 0;
  gap: 0.15rem;
}

.today.dashboard ul .item .title,
.today.dashboard ul .item .meta,
.today.dashboard ul .item .preview {
  overflow-wrap: anywhere;
}

.today.dashboard ul .item .title {
  font-weight: 600;
}

.today.dashboard ul .item .meta,
.today.dashboard ul .item .preview,
.today.dashboard .section > .state.empty {
  color: var(--placeholder-text-color);
  font-size: 0.78rem;
}

.today.dashboard ul .item .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.today.dashboard .section > .state.empty {
  margin: 0;
}

.day-circle {
  display: grid;
  min-width: 0;
  width: 100%;
  place-items: center;
}

.day-circle .chart {
  width: 100%;
  height: clamp(20rem, 44vw, 36rem);
  margin-inline: auto;
}

.daily.focus .routine.summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  min-width: 0;
  margin: 0;
}

.daily.focus .routine.summary > div {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
  padding: 0.55rem;
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 72%, transparent);
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--background-default) 82%, transparent);
}

.daily.focus .routine.summary dt,
.daily.focus .routine.summary dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.daily.focus .routine.summary dt {
  color: var(--placeholder-text-color);
  font-size: 0.74rem;
}

.daily.focus .routine.summary dd {
  color: var(--text-color);
  font-size: 1.1rem;
  font-weight: 700;
}

@media (max-width: 520px) {
  .daily.focus .routine.summary {
    grid-template-columns: 1fr;
  }
}
.workflow-graph-editor {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.25rem;
}

.workflow-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-start;
  justify-content: space-between;
}

.workflow-editor-title {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.workflow-editor-title h4 {
  margin: 0;
}

.workflow-editor-note {
  color: var(--placeholder-text-color);
  font-size: var(--font-size-small);
}

.workflow-editor-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.workflow-editor-mode-switch {
  display: inline-flex;
  gap: 0.35rem;
}

.workflow-editor-mode-switch .mode.action {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--secondary-text-color);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.workflow-editor-mode-switch .mode.action.selected {
  border-color: var(--primary-color);
  background: var(--primary-background-color);
  color: var(--text-color);
}

.workflow-snap-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--placeholder-text-color);
  font-size: var(--font-size-small);
}

.workflow-graph-canvas {
  position: relative;
  overflow: auto;
  max-width: 100%;
  min-height: 28rem;
  border: var(--border-width-default) solid var(--border-color-default);
  border-radius: var(--border-radius-card);
  background: linear-gradient(90deg, rgba(74, 144, 226, 0.08) 1px, transparent 1px), linear-gradient(180deg, rgba(74, 144, 226, 0.08) 1px, transparent 1px), rgba(255, 255, 255, 0.74);
  background-size: 24px 24px;
}

.workflow-graph-connectors {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

.workflow-edge {
  fill: none;
  stroke: rgba(18, 51, 88, 0.55);
  stroke-width: 2;
}

.workflow-edge-arrow {
  fill: rgba(18, 51, 88, 0.55);
}

.workflow-graph-node {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.75rem;
  border: var(--border-width-default) solid var(--border-color-card);
  border-radius: var(--border-radius-default);
  background: var(--background-input);
  box-shadow: 0 10px 22px rgba(18, 51, 88, 0.12);
  z-index: 2;
}

.workflow-graph-node.selected {
  border-color: var(--primary-color);
  box-shadow: 0 12px 26px rgba(74, 144, 226, 0.2);
}

.workflow-graph-node-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  cursor: grab;
}

.workflow-graph-node-header:active {
  cursor: grabbing;
}

.workflow-node-kind {
  color: var(--placeholder-text-color);
  font-size: var(--font-size-small);
}

.workflow-graph-node-name {
  min-height: 1.4rem;
  overflow-wrap: anywhere;
  font-weight: 700;
}

.workflow-node-select {
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  margin: 0;
  padding: 0;
  text-align: left;
}

.workflow-step-box .workflow-node-select {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  flex: 1;
}

.workflow-graph-node-name.workflow-node-select {
  width: 100%;
}

.workflow-node-select:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 3px;
  border-radius: var(--border-radius-input);
}

.workflow-output-ports {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.workflow-output-port-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.35rem;
  align-items: center;
}

.workflow-port {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 1.8rem;
  width: 100%;
  padding: 0.25rem 0.4rem;
  border: var(--border-width-default) solid var(--border-color-default);
  border-radius: var(--border-radius-input);
  background: var(--background-card);
  color: var(--text-color);
  font-size: var(--font-size-small);
}

.workflow-port-output {
  cursor: grab;
}

.workflow-port-input.can-drop,
.workflow-port-input.is-drop-hover {
  border-color: var(--primary-color);
  background: var(--primary-background-color);
}

.workflow-port-dot {
  width: 0.65rem;
  height: 0.65rem;
  flex: 0 0 0.65rem;
  border-radius: 999px;
  background: var(--primary-color);
}

.workflow-edge-remove {
  width: 1.8rem;
  height: 1.8rem;
  padding: 0;
}

.workflow.steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1rem 0;
}

.workflow-step-box {
  min-width: 15rem;
  padding: 0.85rem;
  border: var(--border-width-default) solid var(--border-color-card);
  border-radius: var(--border-radius-default);
  background: var(--background-input);
}

.workflow-step-box.selected {
  border-color: var(--primary-color);
  background: var(--primary-background-color);
}

.workflow-step-box .header {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  flex: 0 0 1.7rem;
  border-radius: 999px;
  background: var(--primary-color);
  color: var(--primary-text-color);
  font-weight: 700;
}

.step-name {
  min-width: 0;
  flex: 1;
  overflow-wrap: anywhere;
  font-weight: 700;
}

.step-actions {
  display: inline-flex;
  gap: 0.25rem;
}

.step-actions .action {
  flex: 0 0 auto;
  min-height: 2rem;
  min-width: 2rem;
  padding: 0;
  width: 2rem;
}

.step-actions .delete.action {
  background: transparent;
  border-color: var(--danger-color);
  box-shadow: none;
  color: var(--danger-color);
}
.step-actions .delete.action:hover:not(:disabled, [aria-disabled=true]) {
  background: color-mix(in srgb, var(--danger-color) 12%, transparent);
  border-color: var(--danger-color);
  box-shadow: none;
  color: var(--danger-color);
}

.step-type {
  margin-top: 0.35rem;
  padding-left: 2.2rem;
  color: var(--placeholder-text-color);
  font-size: var(--font-size-small);
}

.step-configuration {
  padding: 1rem;
  border: var(--border-width-default) solid var(--border-color-card);
  border-radius: var(--border-radius-card);
  background: rgba(255, 255, 255, 0.7);
}

.step-config {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

/* Options menu animation styles */
/* AUDIT NOTE: Component-specific animation styles, not a mixin file.
 * DECISION: Keep as-is for now. This provides specific animation behavior for .options component.
 * Could be converted to mixins if needed elsewhere, but current single-use case is acceptable.
 * Well-structured with staggered transition delays for visual effect. */
.options > * {
  transition: transform 0.25s, opacity 0.25s;
  transition-timing-function: ease;
}

.options.closed > *:not(:last-child) {
  opacity: 0;
  pointer-events: none;
  transform: translateX(200%) rotate(180deg);
}

.options > *:nth-child(1) {
  transition-delay: 0s;
}

.options > *:nth-child(2) {
  transition-delay: 0.05s;
}

.options > *:nth-child(3) {
  transition-delay: 0.1s;
}

.options > *:nth-child(4) {
  transition-delay: 0.15s;
}

.options > *:nth-child(5) {
  transition-delay: 0.2s;
}

.options > *:nth-child(6) {
  transition-delay: 0.25s;
}

.options.closed > *:nth-last-child(2) {
  transition-delay: 0s;
}

.options.closed > *:nth-last-child(3) {
  transition-delay: 0.05s;
}

.options.closed > *:nth-last-child(4) {
  transition-delay: 0.1s;
}

.options.closed > *:nth-last-child(5) {
  transition-delay: 0.15s;
}

.options.closed > *:nth-last-child(6) {
  transition-delay: 0.2s;
}

.options.closed > *:nth-last-child(7) {
  transition-delay: 0.25s;
}

.options > *:last-child {
  transform: translateX(0%) !important;
}

.task.item > .menu .options {
  align-items: center;
  display: inline-flex;
  gap: var(--spacing-2xs, 0.25rem);
}

.task.item > .menu .options > * {
  transition: none;
}

.task.item > .menu .options.closed > *:not(:last-child) {
  display: none;
}

.task.item > .menu .options.open > * {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

#blazor-error-ui {
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}

.blazor-error-boundary {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
  padding: 1rem 1rem 1rem 3.7rem;
  color: white;
}

.blazor-error-boundary::after {
  content: "An error has occurred.";
}

.rz-colorpicker:not(.invalid), .rz-lookup-search input:not(.invalid), .rz-numeric:not(.invalid), .rz-datepicker > .rz-inputtext:not(.invalid), .rz-multiselect:not(.invalid), .rz-dropdown:not(.invalid), .mask:not(.invalid), .rz-textarea:not(.invalid), .rz-textbox:not(.invalid) {
  box-shadow: none !important;
}

.timeline {
  position: relative;
  padding-bottom: 20px;
  padding-top: 20px;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 80px;
  width: 1px; /* Breite der Linie */
  background-color: gray; /* Farbe der Linie */
  opacity: 0.7;
}

.event {
  display: flex;
  align-items: flex-start;
}

.event.narrow {
  margin-top: 15px;
  line-height: 12px;
}

.event.snapToTop {
  margin-top: 3px;
}

.event .left, .event .right {
  margin: 0 0;
  opacity: 0.9;
}

.event .left {
  flex: 0 1 auto;
  text-align: right;
  white-space: nowrap;
  margin-left: 0;
  width: 69px;
  padding-right: 10px;
  padding-top: 3px;
}

.event .time::after {
  content: "";
  position: relative;
  right: -18px;
  top: -4px;
  color: gray;
  background-color: gray;
  height: 1px;
  width: 30px;
  display: inline-block;
  opacity: 0.7;
}

.chk-toggle .tgl {
  display: none;
}

.chk-toggle .tgl,
.chk-toggle .tgl:after,
.chk-toggle .tgl:before,
.chk-toggle .tgl *,
.chk-toggle .tgl *:after,
.chk-toggle .tgl *:before,
.chk-toggle .tgl + .tgl-btn {
  box-sizing: border-box;
}

.chk-toggle .tgl::-moz-selection,
.chk-toggle .tgl:after::-moz-selection,
.chk-toggle .tgl:before::-moz-selection,
.chk-toggle .tgl *::-moz-selection,
.chk-toggle .tgl *:after::-moz-selection,
.chk-toggle .tgl *:before::-moz-selection,
.chk-toggle .tgl + .tgl-btn::-moz-selection,
.chk-toggle .tgl::selection,
.chk-toggle .tgl:after::selection,
.chk-toggle .tgl:before::selection,
.chk-toggle .tgl *::selection,
.chk-toggle .tgl *:after::selection,
.chk-toggle .tgl *:before::selection,
.chk-toggle .tgl + .tgl-btn::selection {
  background: none;
}

.chk-toggle .tgl + .tgl-btn {
  outline: 0;
  display: block;
  width: 4em;
  height: 2em;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.chk-toggle .tgl + .tgl-btn:after,
.chk-toggle .tgl + .tgl-btn:before {
  position: relative;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
}

.chk-toggle .tgl + .tgl-btn:after {
  left: 0;
}

.chk-toggle .tgl + .tgl-btn:before {
  display: none;
}

.chk-toggle .tgl:checked + .tgl-btn:after {
  left: 50%;
}

.chk-toggle .tgl-skewed + .tgl-btn {
  overflow: hidden;
  transform: skew(-10deg);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: all 0.2s ease;
  font-family: sans-serif;
  background: #888;
}

.chk-toggle .tgl-skewed + .tgl-btn:after,
.chk-toggle .tgl-skewed + .tgl-btn:before {
  transform: skew(10deg);
  display: inline-block;
  transition: all 0.2s ease;
  width: 100%;
  text-align: center;
  position: absolute;
  line-height: 2em;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

.chk-toggle .tgl-skewed + .tgl-btn:after {
  left: 100%;
  content: attr(data-tg-on);
}

.chk-toggle .tgl-skewed + .tgl-btn:before {
  left: 0;
  content: attr(data-tg-off);
}

.chk-toggle .tgl-skewed + .tgl-btn:active {
  background: #888;
}

.chk-toggle .tgl-skewed + .tgl-btn:active:before {
  left: -10%;
}

.chk-toggle .tgl-skewed:checked + .tgl-btn {
  background: #86d993;
}

.chk-toggle .tgl-skewed:checked + .tgl-btn:before {
  left: -100%;
}

.chk-toggle .tgl-skewed:checked + .tgl-btn:after {
  left: 0;
}

.chk-toggle .tgl-skewed:checked + .tgl-btn:active:after {
  left: 10%;
}

:root {
  --primary-color: #4a90e2;
  --primary-background-color: #e6f0fa;
  --primary-text-color: #ffffff;
  --secondary-color: #123358;
  --secondary-text-color: #ffffff;
  --success-color: #198754;
  --success-text-color: #ffffff;
  --danger-color: #dc3545;
  --danger-text-color: #ffffff;
  --warning-color: #f0b429;
  --warning-text-color: #1f2933;
  --info-color: #0dcaf0;
  --info-text-color: #0f1f2f;
  --light-color: #f8f9fa;
  --light-text-color: #1f2933;
  --dark-color: #123358;
  --dark-text-color: #ffffff;
  --background-default: #f5f7fa;
  --background-alt: color-mix(in srgb, var(--background-default) 86%, var(--background-input));
  --background-card: var(--background-default);
  --background-button: var(--background-default);
  --background-input: #ffffff;
  --text-color: #333333;
  --placeholder-text-color: #6c757d;
  --border-color-default: #cccccc;
  --border-color-card: var(--border-color-default);
  --border-color-button: var(--border-color-default);
  --border-color-input: var(--border-color-default);
  --border-width-default: 1px;
  --border-width-card: var(--border-width-default);
  --border-width-button: var(--border-width-default);
  --border-width-input: var(--border-width-default);
  --border-radius-small: 0.25rem;
  --border-radius-default: 0.5rem;
  --border-radius-card: calc(var(--border-radius-default) * 2);
  --border-radius-button: var(--border-radius-default);
  --border-radius-input: var(--border-radius-default);
  --shadow-default: 0 0.25rem 0.75rem rgba(18, 51, 88, 0.12);
  --shadow-more: 0 1rem 2rem rgba(18, 51, 88, 0.18);
  --shadow-card: var(--shadow-default);
  --shadow-button: var(--shadow-default);
  --shadow-button-more: var(--shadow-more);
  --shadow-input: inset 0 0.15rem 0.35rem rgba(18, 51, 88, 0.08);
  --shadow-input-focus: 0 0 0 0.2rem color-mix(in srgb, var(--primary-color) 18%, transparent);
  --shadow-popover: 0 0.75rem 2rem rgba(0, 0, 0, 0.16);
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 0.75rem;
  --spacing-default: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --padding-default: var(--spacing-default);
  --padding-xs: var(--spacing-xs);
  --padding-sm: var(--spacing-sm);
  --padding-md: var(--spacing-md);
  --padding-lg: var(--spacing-lg);
  --padding-block-default: var(--padding-default);
  --padding-inline-default: var(--padding-default);
  --padding-card: var(--padding-default);
  --padding-button-block: 0.65rem;
  --padding-button-inline: 1rem;
  --padding-input-block: 0.7rem;
  --padding-input-inline: 1rem;
  --margin-default: var(--spacing-default);
  --margin-block-default: var(--margin-default);
  --margin-inline-default: var(--margin-default);
  --margin-card: var(--margin-default);
  --margin-button: 0;
  --margin-input: var(--margin-default);
  --font-family-default: "Inter", "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
  --font-size-default: 1em;
  --font-size-small: calc(var(--font-size-default) * 0.875);
  --font-size-large: calc(var(--font-size-default) * 1.25);
  --font-weight-default: 400;
  --line-height-default: 1.5;
  --focus-color: var(--primary-color);
  --focus-width: 2px;
  --focus-offset: 3px;
  --focus-offset-small: 2px;
  --scrollbar-width: 8px;
  --scrollbar-width-thin: 4px;
  --scrollbar-track-bg: #f1f1f1;
  --scrollbar-thumb-bg: #888888;
  --scrollbar-thumb-hover-bg: #555555;
  --background-hover: rgba(0, 0, 0, 0.05);
  --background-button-hover: rgba(0, 0, 0, 0.1);
  --hover-scale: 1.05;
  --hover-translateY: -5px;
  --transition-duration-default: 0.3s;
  --transition-duration-fast: calc(var(--transition-duration-default) / 2);
  --transition-function-default: ease-in-out;
  --background-surface: var(--background-input);
  --border-surface: var(--border-width-default) solid var(--border-color-default);
  --border-radius-surface: var(--border-radius-default);
  --shadow-surface: none;
  --background-panel: color-mix(in srgb, var(--background-input) 82%, transparent);
  --border-panel: var(--border-width-default) solid color-mix(in srgb, var(--background-input) 70%, transparent);
  --border-radius-panel: var(--border-radius-card);
  --filter-panel: blur(16px);
  --shadow-panel: var(--shadow-more);
  --padding-panel: var(--padding-card);
  --background-status: color-mix(in srgb, var(--primary-color) 5%, transparent);
  --border-status: var(--border-width-default) solid var(--border-color-default);
  --border-radius-status: var(--border-radius-default);
  --shadow-status: none;
  --padding-status: var(--padding-default);
  --icon-size: 2rem;
  --swatch-size: 0.75rem;
  --border-radius-swatch: 2px;
  --button-gap: var(--spacing-xs);
  --button-size: 2.5rem;
  --button-icon-size: var(--button-size);
  --connected-provider-button-size: 3.75rem;
  --connected-provider-icon-size: 1.75rem;
  --border-radius-connected-provider-button: 1rem;
  --padding-connected-provider-button: 0.75rem;
  --width-auth-shell: 34rem;
  --max-width-auth-shell: 36rem;
  --gap-auth-shell: var(--spacing-lg);
  --margin-auth-shell: clamp(1rem, 4vh, 3rem) auto;
  --padding-auth-shell: clamp(1.25rem, 4vw, 2.5rem);
  --gap-auth-header: var(--spacing-sm);
  --gap-provider-grid: var(--spacing-sm);
  --auth-form-padding: 0;
  --gap-feedback-form-field: 0.35rem;
  --min-height-floating-field: 3.2rem;
  --padding-block-start-floating-field-control: 1.25rem;
  --padding-block-end-floating-field-control: 0.55rem;
  --padding-inline-floating-field: var(--padding-default);
  --space-leading-floating-field: 2.65rem;
  --space-trailing-floating-field: 2.35rem;
  --gap-floating-label: 0.35rem;
  --opacity-floating-label: 0.6;
  --translate-x-floating-label: -0.12rem;
  --translate-y-floating-label: -0.65rem;
  --scale-floating-label: 0.82;
  --opacity-active-floating-field-icon: 0.65;
  --translate-y-active-floating-field-icon: -0.5rem;
  --scale-active-floating-field-icon: 0.82;
  --size-action-floating-field-icon: 2rem;
  --gap-checkbox-field: var(--spacing-sm);
  --margin-checkbox-input: 0.2rem 0 0;
  --auth-title-font-size: clamp(2rem, 5vw, 2.75rem);
  --auth-brand-size: 4.5rem;
  --auth-note-background: color-mix(in srgb, #eef1ff 70%, var(--background-input));
  --auth-note-border-color: color-mix(in srgb, var(--primary-color) 18%, transparent);
  --auth-note-icon-background: color-mix(in srgb, var(--primary-color) 10%, transparent);
  --auth-note-icon-color: var(--primary-color);
  --auth-inline-error-color: #e24d5d;
  --shell-nav-width: 17.5rem;
  --shell-header-z-index: 900;
  --shell-drawer-z-index: 960;
  --shell-overlay-z-index: 940;
  --shell-content-max-width: 74rem;
  --shell-content-padding: clamp(1rem, 2.4vw, 2rem);
  --shell-header-background: linear-gradient(to right, #031222 0%, #092642 100%);
  --shell-header-inner-background: linear-gradient(to right, #061b30 0%, #0b3658 100%);
  --shell-header-color: #ffffff;
  --shell-header-margin: var(--spacing-md);
  --shell-header-radius: var(--border-radius-default);
  --shell-header-shadow: 0 0.85rem 1.8rem rgba(1, 18, 37, 0.26);
  --shell-header-height: 64px;
  --shell-header-compact-height: 48px;
  --shell-header-compact-margin: 0.35rem;
  --shell-header-action-size: 2.25rem;
  --shell-popover-z-index: 960;
  --shell-sticky-offset: calc(24px + var(--shell-header-margin) * 2);
  --shell-navigation-close-size: 2.5rem;
  --shell-panel-background: color-mix(in srgb, var(--background-input) 86%, transparent);
  --breadcrumb-menu-link-active-background: color-mix(in srgb, var(--primary-color) 12%, transparent);
  --min-width-menu: 13rem;
  --gap-menu: 0.15rem;
  --margin-menu: var(--spacing-xs) 0 0;
  --min-height-menu-item: 2rem;
  --padding-block-menu-item: 0.45rem;
  --padding-inline-menu-item: 0.55rem;
  --z-index-menu: 1200;
  --collab-menu-size: 12rem;
  --collab-menu-button-size: 3.25rem;
  --collab-menu-background: color-mix(in srgb, var(--background-input) 84%, transparent);
  --collab-menu-border: color-mix(in srgb, var(--border-color-default) 70%, transparent);
  --collab-menu-center-background: color-mix(in srgb, var(--primary-color) 10%, var(--background-input));
  --background-wizard: color-mix(in srgb, var(--background-input) 94%, transparent);
  --border-color-wizard: color-mix(in srgb, #ffffff 68%, transparent);
  --border-radius-wizard: var(--border-radius-card);
  --padding-wizard: clamp(1.5rem, 4vw, 3rem);
  --shadow-wizard: 0 1.5rem 5rem rgba(13, 24, 43, 0.18);
  --wizard-dialog-max-width: 76rem;
  --wizard-dialog-step-color: color-mix(in srgb, var(--placeholder-text-color) 70%, var(--text-color));
  --gap-divider: var(--spacing-default);
  --margin-divider: var(--spacing-sm) 0;
  --border-color-divider: color-mix(in srgb, currentColor 24%, transparent);
  --min-height-form-submit-feedback: 1.25rem;
  --comment-background: var(--background-alt);
  --comment-own-background: color-mix(in srgb, var(--background-alt) 80%, var(--background-default));
  --comment-avatar-size: 2rem;
  --comment-padding: var(--spacing-default);
  --snackbar-background: rgba(20, 34, 48, 0.96);
  --snackbar-border-color: rgba(255, 255, 255, 0.16);
  --snackbar-color: #ffffff;
  --snackbar-action-color: #8fd0ff;
  --snackbar-failed-background: rgba(94, 40, 40, 0.96);
  --snackbar-failed-color: #ffffff;
  --snackbar-focus-color: #ffffff;
  --snackbar-shadow: var(--shadow-more);
  --snackbar-border-radius: var(--border-radius-default);
  --snackbar-z-index: 1200;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family-default);
  font-size: var(--font-size-default);
  color: var(--text-color);
  background-color: var(--background-default);
  line-height: var(--line-height-default);
}

img, svg, video, canvas {
  display: block;
  max-width: 100%;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
  background-color: transparent;
}

button {
  border: none;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

hr {
  border: 0;
  border-top: var(--border-width-default) solid var(--border-color-default);
  margin: var(--spacing-md) 0;
}

html,
body {
  height: 100%;
}

@media (max-width: 768px) {
  .rz-steps-item {
    display: none !important;
  }
  .rz-steps-item.rz-steps-current {
    display: inline-block !important;
  }
}
.form-floating input.invalid {
  border-radius: var(--validation-input-radius, var(--border-radius-input) var(--border-radius-input) 0 0) !important;
  outline-color: var(--danger-color) !important;
}

.form-floating .validation-message {
  background: var(--background-validation-message, var(--danger-color));
  color: var(--color-validation-message, var(--danger-text-color));
  display: block;
  outline: var(--outline-validation-message, var(--border-width-default) solid var(--danger-color));
  padding: var(--padding-validation-message, var(--spacing-sm));
  border-radius: var(--validation-message-radius, 0 0 var(--border-radius-input) var(--border-radius-input)) !important;
}

.drop-target.can-drop {
  transition: outline-color var(--transition-duration-fast, 0.15s) var(--transition-function-default), background-color var(--transition-duration-fast, 0.15s) var(--transition-function-default);
}

.drop-target.is-drop-hover {
  outline: var(--focus-width, 2px) solid var(--focus-color, var(--primary-color));
  outline-offset: var(--focus-offset-small, 2px);
}

.access-remove-dropzone,
.task-checklist-end-dropzone {
  background: var(--background-drop-target, transparent);
  border: var(--border-drop-target, var(--border-width-default) dashed var(--border-color-default));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-drop-target, var(--border-radius-default));
  box-shadow: none;
  padding-top: var(--padding-drop-target, var(--padding-sm, calc(var(--spacing-default) / 2)));
  padding-bottom: var(--padding-drop-target, var(--padding-sm, calc(var(--spacing-default) / 2)));
  padding-inline-start: var(--padding-drop-target, var(--padding-sm, calc(var(--spacing-default) / 2)));
  padding-inline-end: var(--padding-drop-target, var(--padding-sm, calc(var(--spacing-default) / 2)));
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), outline-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
  margin-top: var(--dropzone-margin-top, var(--spacing-sm));
  text-align: center;
}

.access-remove-dropzone.can-drop,
.task-checklist-end-dropzone.can-drop {
  background: var(--drop-target-active-background, color-mix(in srgb, var(--primary-background-color) 72%, var(--background-input)));
  border-color: var(--drop-target-active-border-color, var(--primary-color));
  color: var(--drop-target-active-color, var(--primary-color));
}

.drag-layer-preview {
  background: color-mix(in srgb, var(--background-card) 94%, transparent);
  border: var(--border-width-default) solid color-mix(in srgb, var(--primary-color) 34%, var(--border-color-default));
  border-radius: var(--border-radius-card);
  box-shadow: 0 1rem 2.5rem color-mix(in srgb, var(--shadow-color, #111827) 24%, transparent);
  color: var(--text-color);
  opacity: 0.94;
  padding: var(--spacing-sm);
}

.drag-layer-label {
  color: var(--text-color);
  font-size: var(--font-size-small);
  font-weight: 700;
}

.drag-hover-action.can-activate-drag-hover > * {
  transition: box-shadow var(--transition-fast), outline-color var(--transition-fast), transform var(--transition-fast);
}

.drag-hover-action.is-drag-hover-arming > * {
  box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--primary-color) 28%, transparent);
  outline: 2px solid color-mix(in srgb, var(--primary-color) 58%, transparent);
  outline-offset: 2px;
}

.drag-hover-action.is-drag-hover-active > * {
  transform: translateY(-1px);
}

.popover {
  max-width: none !important;
}

.bi {
  fill: currentColor;
}

.form-floating > .form-control.rz-state-empty:not(:focus-within) ~ label {
  color: var(--text-color);
  transform: scale(1) translateY(0) translateX(0);
}

.avatar-drag-source {
  display: inline-flex;
}

body {
  background-size: cover;
  background-position: center center;
  background-image: url("/_content/Neatly.Applications.UIComponents/wall.jpg");
  min-height: 100%;
  overflow-x: hidden;
}

body:has(> #app) {
  min-height: 100dvh;
}

body:has(> #app) > #app {
  min-height: 100dvh;
  min-width: 0;
}

.status-bar-safe-area {
  display: none;
}

img {
  object-fit: cover;
}

main {
  min-width: 0;
}

.layout.centered {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 100dvh;
  padding: var(--shell-content-padding);
}

#centeredLayout {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 100dvh;
  min-width: 0;
}

#centeredContent {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 0;
  min-width: 0;
  padding: var(--shell-content-padding);
}

.layout.main {
  min-height: 0;
  padding: var(--shell-content-padding);
}

input:not([type]),
input[type=date],
input[type=datetime-local],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=time],
input[type=url],
input[type=week],
.input.text {
  font-size: var(--font-size-default);
  border: var(--border-width-input, var(--border-width-default)) solid var(--border-color-input, var(--border-color-default));
  background-color: var(--background-input, var(--background-default));
  color: var(--color-input, var(--text-color));
  min-height: var(--input-min-height, 2.75rem);
  min-width: 0;
  width: var(--input-width, 100%);
  padding-top: var(--padding-input-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-input-block, calc(var(--padding-default) / 2));
  padding-inline-start: var(--padding-input-inline, var(--padding-default));
  padding-inline-end: var(--padding-input-inline, var(--padding-default));
  border-radius: var(--border-radius-input, var(--border-radius-default));
  box-shadow: var(--shadow-input, none);
  transition: border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
}
input:not([type]):focus,
input[type=date]:focus,
input[type=datetime-local]:focus,
input[type=email]:focus,
input[type=month]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=tel]:focus,
input[type=text]:focus,
input[type=time]:focus,
input[type=url]:focus,
input[type=week]:focus,
.input.text:focus {
  outline: none;
  border-color: var(--focus-border-color, var(--primary-color));
  box-shadow: var(--shadow-input-focus, var(--shadow-default));
}
input:not([type]):focus-visible,
input[type=date]:focus-visible,
input[type=datetime-local]:focus-visible,
input[type=email]:focus-visible,
input[type=month]:focus-visible,
input[type=number]:focus-visible,
input[type=password]:focus-visible,
input[type=search]:focus-visible,
input[type=tel]:focus-visible,
input[type=text]:focus-visible,
input[type=time]:focus-visible,
input[type=url]:focus-visible,
input[type=week]:focus-visible,
.input.text:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-input, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 2px);
  border-radius: var(--border-radius-input, var(--border-radius-default));
}

textarea {
  font-size: var(--font-size-default);
  border: var(--border-width-input, var(--border-width-default)) solid var(--border-color-input, var(--border-color-default));
  background-color: var(--background-input, var(--background-default));
  color: var(--color-input, var(--text-color));
  min-height: var(--input-min-height, 2.75rem);
  min-width: 0;
  width: var(--input-width, 100%);
  padding-top: var(--padding-input-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-input-block, calc(var(--padding-default) / 2));
  padding-inline-start: var(--padding-input-inline, var(--padding-default));
  padding-inline-end: var(--padding-input-inline, var(--padding-default));
  border-radius: var(--border-radius-input, var(--border-radius-default));
  box-shadow: var(--shadow-input, none);
  transition: border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
  min-height: var(--textarea-min-height, 100px);
  resize: vertical;
}
textarea:focus {
  outline: none;
  border-color: var(--focus-border-color, var(--primary-color));
  box-shadow: var(--shadow-input-focus, var(--shadow-default));
}
textarea:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-input, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 2px);
  border-radius: var(--border-radius-input, var(--border-radius-default));
}

.markdown-editor {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--markdown-editor-gap, 0);
  min-width: 0;
  min-width: 0;
  width: 100%;
}
.markdown-editor > .actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--markdown-editor-actions-gap, 0.25rem);
  justify-content: flex-start;
  min-width: 0;
  background: var(--markdown-editor-actions-background, color-mix(in srgb, var(--background-input) 92%, var(--background-default)));
  border: var(--markdown-editor-border, var(--border-width-input, var(--border-width-default)) solid var(--border-color-input, var(--border-color-default)));
  border-block-end: 0;
  min-width: 0;
  padding: var(--markdown-editor-actions-padding, 0.35rem);
  border-start-start-radius: var(--markdown-editor-actions-radius, var(--border-radius-input, var(--border-radius-default)));
  border-start-end-radius: var(--markdown-editor-actions-radius, var(--border-radius-input, var(--border-radius-default)));
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}
.markdown-editor > .actions button {
  flex: 0 0 auto;
  min-height: var(--markdown-editor-action-size, 2rem);
  min-width: var(--markdown-editor-action-size, 2rem);
  padding: 0;
  width: var(--markdown-editor-action-size, 2rem);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--primary-color);
  --button-min-height: var(--markdown-editor-action-size, 2rem);
  --button-icon-size: var(--markdown-editor-action-size, 2rem);
  --padding-button-inline: 0;
  --padding-button-block: 0;
  font-weight: 700;
}
.markdown-editor > .actions button:hover:not(:disabled, [aria-disabled=true]) {
  background: color-mix(in srgb, var(--primary-color) 10%, transparent);
  box-shadow: none;
}
.markdown-editor > .editor {
  font-size: var(--font-size-default);
  border: var(--border-width-input, var(--border-width-default)) solid var(--border-color-input, var(--border-color-default));
  background-color: var(--background-input, var(--background-default));
  color: var(--color-input, var(--text-color));
  min-height: var(--input-min-height, 2.75rem);
  min-width: 0;
  width: var(--input-width, 100%);
  padding-top: var(--padding-input-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-input-block, calc(var(--padding-default) / 2));
  padding-inline-start: var(--padding-input-inline, var(--padding-default));
  padding-inline-end: var(--padding-input-inline, var(--padding-default));
  border-radius: var(--border-radius-input, var(--border-radius-default));
  box-shadow: var(--shadow-input, none);
  transition: border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
  min-height: var(--textarea-min-height, 100px);
  resize: vertical;
  border-start-start-radius: 0;
  border-start-end-radius: 0;
  line-height: var(--markdown-editor-line-height, var(--line-height-default));
  min-height: var(--markdown-editor-min-height, 9rem);
  overflow: auto;
  resize: vertical;
  white-space: normal;
}
.markdown-editor > .editor:focus {
  outline: none;
  border-color: var(--focus-border-color, var(--primary-color));
  box-shadow: var(--shadow-input-focus, var(--shadow-default));
}
.markdown-editor > .editor:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-input, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 2px);
  border-radius: var(--border-radius-input, var(--border-radius-default));
}
.markdown-editor > .editor[data-empty=true]::before {
  color: var(--placeholder-text-color);
  content: attr(data-placeholder);
  pointer-events: none;
}
.markdown-editor > .editor:empty::before {
  color: var(--placeholder-text-color);
  content: attr(data-placeholder);
  pointer-events: none;
}
.markdown-editor > .editor > :first-child {
  margin-block-start: 0;
}
.markdown-editor > .editor > :last-child {
  margin-block-end: 0;
}
.markdown-editor > .editor p,
.markdown-editor > .editor blockquote {
  margin-block: 0 var(--markdown-editor-block-gap, 0.65rem);
}
.markdown-editor > .editor blockquote {
  border-inline-start: var(--markdown-editor-quote-border, 0.2rem solid color-mix(in srgb, var(--primary-color) 40%, var(--border-color-default)));
  color: var(--markdown-editor-quote-color, var(--placeholder-text-color));
  padding-inline-start: var(--markdown-editor-quote-padding, 0.75rem);
}
.markdown-editor > .editor ul,
.markdown-editor > .editor ol {
  margin-block: 0 var(--markdown-editor-block-gap, 0.65rem);
  padding-inline-start: var(--markdown-editor-list-padding, 1.35rem);
}
.markdown-editor > .editor li {
  margin-block: var(--markdown-editor-list-item-gap, 0.15rem);
}
.markdown-editor > .editor h1,
.markdown-editor > .editor h2,
.markdown-editor > .editor h3 {
  font-size: var(--markdown-editor-heading-font-size, 1.05rem);
  line-height: 1.25;
  margin-block: 0 var(--markdown-editor-block-gap, 0.65rem);
}
.markdown-editor > .editor code {
  background: var(--markdown-editor-code-background, color-mix(in srgb, var(--primary-color) 9%, transparent));
  border-radius: var(--markdown-editor-code-radius, var(--border-radius-small));
  color: var(--markdown-editor-code-color, var(--text-color));
  font-family: var(--font-family-monospace, ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace);
  font-size: 0.92em;
  padding: 0.08rem 0.25rem;
}

select {
  appearance: none;
  background-image: var(--select-arrow, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E"));
  background-repeat: no-repeat;
  background-position: right var(--padding-default) center;
  padding-right: calc(var(--padding-default) * 2.5);
  font-size: var(--font-size-default);
  border: var(--border-width-input, var(--border-width-default)) solid var(--border-color-input, var(--border-color-default));
  background-color: var(--background-input, var(--background-default));
  color: var(--color-input, var(--text-color));
  min-height: var(--input-min-height, 2.75rem);
  min-width: 0;
  width: var(--input-width, 100%);
  padding-top: var(--padding-input-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-input-block, calc(var(--padding-default) / 2));
  padding-inline-start: var(--padding-input-inline, var(--padding-default));
  padding-inline-end: var(--padding-input-inline, var(--padding-default));
  border-radius: var(--border-radius-input, var(--border-radius-default));
  box-shadow: var(--shadow-input, none);
  transition: border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
}
select:focus {
  outline: none;
  border-color: var(--focus-border-color, var(--primary-color));
  box-shadow: var(--shadow-input-focus, var(--shadow-default));
}
select:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-input, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 2px);
  border-radius: var(--border-radius-input, var(--border-radius-default));
}

.form-field .rz-dropdown,
.form-field .rz-multiselect,
.form-field .rz-datepicker,
.form-field .rz-numeric,
.task.editor .rz-dropdown,
.task.editor .rz-multiselect,
.task.editor .rz-datepicker,
.task.editor .rz-numeric,
.project.editor .rz-dropdown,
.project.editor .rz-multiselect,
.project.editor .rz-datepicker,
.project.editor .rz-numeric,
.statistics.explorer .global.controls .rz-datepicker,
.statistics.source .rz-dropdown,
.statistics.source .rz-multiselect,
.statistics.line.settings.dialog .rz-dropdown,
.statistics.line.settings.dialog .rz-multiselect,
.statistics.line.settings.dialog .rz-numeric,
.statistics.export.dialog .rz-radiobutton-list {
  font-size: var(--font-size-default);
  border: var(--border-width-input, var(--border-width-default)) solid var(--border-color-input, var(--border-color-default));
  background-color: var(--background-input, var(--background-default));
  color: var(--color-input, var(--text-color));
  min-height: var(--input-min-height, 2.75rem);
  min-width: 0;
  width: var(--input-width, 100%);
  padding-top: var(--padding-input-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-input-block, calc(var(--padding-default) / 2));
  padding-inline-start: var(--padding-input-inline, var(--padding-default));
  padding-inline-end: var(--padding-input-inline, var(--padding-default));
  border-radius: var(--border-radius-input, var(--border-radius-default));
  box-shadow: var(--shadow-input, none);
  transition: border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
  align-items: center;
  display: flex;
  min-height: 2.6rem;
  min-width: 0;
  padding: 0;
  width: 100%;
}
.form-field .rz-dropdown:focus,
.form-field .rz-multiselect:focus,
.form-field .rz-datepicker:focus,
.form-field .rz-numeric:focus,
.task.editor .rz-dropdown:focus,
.task.editor .rz-multiselect:focus,
.task.editor .rz-datepicker:focus,
.task.editor .rz-numeric:focus,
.project.editor .rz-dropdown:focus,
.project.editor .rz-multiselect:focus,
.project.editor .rz-datepicker:focus,
.project.editor .rz-numeric:focus,
.statistics.explorer .global.controls .rz-datepicker:focus,
.statistics.source .rz-dropdown:focus,
.statistics.source .rz-multiselect:focus,
.statistics.line.settings.dialog .rz-dropdown:focus,
.statistics.line.settings.dialog .rz-multiselect:focus,
.statistics.line.settings.dialog .rz-numeric:focus,
.statistics.export.dialog .rz-radiobutton-list:focus {
  outline: none;
  border-color: var(--focus-border-color, var(--primary-color));
  box-shadow: var(--shadow-input-focus, var(--shadow-default));
}
.form-field .rz-dropdown:focus-visible,
.form-field .rz-multiselect:focus-visible,
.form-field .rz-datepicker:focus-visible,
.form-field .rz-numeric:focus-visible,
.task.editor .rz-dropdown:focus-visible,
.task.editor .rz-multiselect:focus-visible,
.task.editor .rz-datepicker:focus-visible,
.task.editor .rz-numeric:focus-visible,
.project.editor .rz-dropdown:focus-visible,
.project.editor .rz-multiselect:focus-visible,
.project.editor .rz-datepicker:focus-visible,
.project.editor .rz-numeric:focus-visible,
.statistics.explorer .global.controls .rz-datepicker:focus-visible,
.statistics.source .rz-dropdown:focus-visible,
.statistics.source .rz-multiselect:focus-visible,
.statistics.line.settings.dialog .rz-dropdown:focus-visible,
.statistics.line.settings.dialog .rz-multiselect:focus-visible,
.statistics.line.settings.dialog .rz-numeric:focus-visible,
.statistics.export.dialog .rz-radiobutton-list:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-input, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 2px);
  border-radius: var(--border-radius-input, var(--border-radius-default));
}

.form-field .rz-dropdown-label,
.form-field .rz-multiselect-label,
.task.editor .rz-dropdown-label,
.task.editor .rz-multiselect-label,
.project.editor .rz-dropdown-label,
.project.editor .rz-multiselect-label,
.statistics.source .rz-dropdown-label,
.statistics.source .rz-multiselect-label,
.statistics.line.settings.dialog .rz-dropdown-label,
.statistics.line.settings.dialog .rz-multiselect-label,
.form-field .rz-datepicker .rz-inputtext,
.task.editor .rz-datepicker .rz-inputtext,
.project.editor .rz-datepicker .rz-inputtext,
.statistics.explorer .global.controls .rz-datepicker .rz-inputtext,
.form-field .rz-numeric .rz-inputtext,
.task.editor .rz-numeric .rz-inputtext,
.project.editor .rz-numeric .rz-inputtext,
.statistics.line.settings.dialog .rz-numeric .rz-inputtext {
  align-items: center;
  background: transparent;
  border: 0;
  box-shadow: none;
  display: flex;
  line-height: 1.25;
  min-height: calc(2.6rem - 2px);
  outline: 0;
  padding-block: 0;
  padding-inline: var(--padding-input-inline, var(--padding-default)) 2.75rem;
}

.form-field .rz-dropdown-label,
.form-field .rz-multiselect-label,
.task.editor .rz-dropdown-label,
.task.editor .rz-multiselect-label,
.project.editor .rz-dropdown-label,
.project.editor .rz-multiselect-label,
.statistics.source .rz-dropdown-label,
.statistics.source .rz-multiselect-label,
.statistics.line.settings.dialog .rz-dropdown-label,
.statistics.line.settings.dialog .rz-multiselect-label {
  color: var(--text-color);
  justify-content: flex-start;
  text-align: left;
  width: 100%;
}

.form-field .rz-placeholder,
.task.editor .rz-placeholder,
.project.editor .rz-placeholder,
.statistics.source .rz-placeholder,
.statistics.line.settings.dialog .rz-placeholder {
  color: var(--placeholder-text-color);
}

.form-field .rz-dropdown-trigger,
.form-field .rz-multiselect-trigger,
.task.editor .rz-dropdown-trigger,
.task.editor .rz-multiselect-trigger,
.project.editor .rz-dropdown-trigger,
.project.editor .rz-multiselect-trigger,
.statistics.source .rz-dropdown-trigger,
.statistics.source .rz-multiselect-trigger,
.statistics.line.settings.dialog .rz-dropdown-trigger,
.statistics.line.settings.dialog .rz-multiselect-trigger,
.form-field .rz-datepicker-trigger,
.task.editor .rz-datepicker-trigger,
.project.editor .rz-datepicker-trigger,
.statistics.explorer .global.controls .rz-datepicker-trigger {
  align-items: center;
  color: var(--placeholder-text-color);
  display: flex;
  justify-content: center;
  min-height: calc(2.6rem - 2px);
}

input[type=checkbox] {
  appearance: none;
  background: var(--checkbox-background, var(--background-input));
  border: var(--checkbox-border, var(--border-width-input, var(--border-width-default)) solid var(--border-color-input, var(--border-color-default)));
  cursor: pointer;
  display: inline-grid;
  flex: 0 0 auto;
  inline-size: var(--checkbox-size, 1.05rem);
  block-size: var(--checkbox-size, 1.05rem);
  margin: 0;
  min-inline-size: var(--checkbox-size, 1.05rem);
  min-block-size: var(--checkbox-size, 1.05rem);
  place-content: center;
  border-radius: var(--checkbox-radius, var(--border-radius-small));
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
}
input[type=checkbox]:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-input, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset-small, 2px);
  border-radius: var(--checkbox-radius, var(--border-radius-small));
}
input[type=checkbox]::after {
  border: solid var(--checkbox-check-color, var(--primary-text-color));
  border-width: 0 0.12rem 0.12rem 0;
  content: "";
  inline-size: 0.32rem;
  block-size: 0.6rem;
  opacity: 0;
  transform: rotate(45deg) translateY(-0.05rem);
}
input[type=checkbox]:checked {
  background: var(--checkbox-checked-background, var(--primary-color));
  border-color: var(--checkbox-checked-border-color, var(--primary-color));
}
input[type=checkbox]:checked::after {
  opacity: 1;
}
input[type=checkbox]:disabled {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}

input[type=radio] {
  appearance: none;
  background: var(--checkbox-background, var(--background-input));
  border: var(--checkbox-border, var(--border-width-input, var(--border-width-default)) solid var(--border-color-input, var(--border-color-default)));
  cursor: pointer;
  display: inline-grid;
  flex: 0 0 auto;
  inline-size: var(--checkbox-size, 1.05rem);
  block-size: var(--checkbox-size, 1.05rem);
  margin: 0;
  min-inline-size: var(--checkbox-size, 1.05rem);
  min-block-size: var(--checkbox-size, 1.05rem);
  place-content: center;
  border-radius: var(--checkbox-radius, var(--border-radius-small));
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
  border-radius: 1000px;
}
input[type=radio]:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-input, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset-small, 2px);
  border-radius: var(--checkbox-radius, var(--border-radius-small));
}
input[type=radio]::after {
  border: solid var(--checkbox-check-color, var(--primary-text-color));
  border-width: 0 0.12rem 0.12rem 0;
  content: "";
  inline-size: 0.32rem;
  block-size: 0.6rem;
  opacity: 0;
  transform: rotate(45deg) translateY(-0.05rem);
}
input[type=radio]:checked {
  background: var(--checkbox-checked-background, var(--primary-color));
  border-color: var(--checkbox-checked-border-color, var(--primary-color));
}
input[type=radio]:checked::after {
  opacity: 1;
}
input[type=radio]:disabled {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}
input[type=radio]::after {
  background: var(--radio-dot-color, var(--primary-text-color));
  border: 0;
  border-radius: 999px;
  block-size: 0.45rem;
  inline-size: 0.45rem;
  transform: none;
}

button {
  border-radius: 1000px;
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
}
button:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
button:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
button:disabled, button[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}

a {
  font-weight: bold;
  color: var(--primary-color);
}

.icon-document-default {
  color: var(--icon-color-default, var(--text-color));
}

.icon-document-pdf {
  color: var(--icon-color-default, #c83c3c);
}

.icon-document-word {
  color: var(--icon-color-default, #2b62d9);
}

.icon-document-spreadsheet {
  color: var(--icon-color-default, #1f8f55);
}

.icon-document-presentation {
  color: var(--icon-color-default, #d97b2b);
}

.icon-document-image {
  color: var(--icon-color-default, #168f9c);
}

.icon-document-archive {
  color: var(--icon-color-default, #6d7680);
}

.icon-document-text {
  color: var(--icon-color-default, #56616c);
}

.icon-document-video {
  color: var(--icon-color-default, #d04949);
}

.icon-document-audio {
  color: var(--icon-color-default, #7a4cd1);
}

.day-picker-outer {
  -webkit-overflow-scrolling: touch;
  overflow-x: var(--day-picker-overflow-x, scroll);
  padding-bottom: var(--day-picker-padding-bottom, 20px);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  touch-action: pan-x;
  white-space: nowrap;
  scrollbar-width: none;
}
.day-picker-outer::-webkit-scrollbar {
  display: none;
}

.day-picker {
  display: inline-flex;
  gap: var(--day-picker-gap, 0);
}

.day-picker .date-item {
  appearance: none;
  background: var(--day-picker-item-background, #eee);
  border: 0;
  border-radius: var(--day-picker-item-radius, 10px);
  box-sizing: border-box;
  color: var(--day-picker-item-color, var(--text-color));
  cursor: pointer;
  display: inline-block;
  flex: 0 0 auto;
  font: inherit;
  inline-size: var(--day-picker-item-width, 40px);
  margin: var(--day-picker-item-margin, 0 4px);
  padding: var(--day-picker-item-padding, 5px);
  scroll-snap-align: center;
  text-align: center;
  transition: background var(--day-picker-transition-duration, 0.2s);
  user-select: none;
  width: var(--day-picker-item-width, 40px);
}
.day-picker .date-item:focus-visible {
  outline: var(--day-picker-focus-width, var(--focus-width, 2px)) solid var(--day-picker-focus-color, var(--primary-color));
  outline-offset: var(--day-picker-focus-offset, 2px);
  border-radius: var(--day-picker-item-radius, 10px);
}
.day-picker .date-item:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--day-picker-item-hover-background, var(--day-picker-item-background, #eee));
  box-shadow: none;
}

.day-picker .date-item.selected {
  background: var(--day-picker-selected-background, linear-gradient(to top, #051B31, #123358));
  color: var(--day-picker-selected-color, white);
}
.day-picker .date-item.selected:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--day-picker-selected-background, linear-gradient(to top, #051B31, #123358));
  color: var(--day-picker-selected-color, white);
}

.day-picker .date-item.date-drop-hover {
  background: var(--day-picker-drop-target-background, color-mix(in srgb, var(--primary-color) 14%, #eee));
  outline: var(--day-picker-drop-target-outline-width, 2px) solid var(--day-picker-drop-target-outline-color, var(--primary-color));
  outline-offset: var(--day-picker-drop-target-outline-offset, 2px);
}

.day-picker .date-item .date {
  font-size: var(--day-picker-date-font-size, 1.2em);
  font-weight: var(--day-picker-date-font-weight, bold);
}

.day-picker .date-item .day {
  font-size: var(--day-picker-weekday-font-size, 0.6em);
}

.day-picker .date-item .progress-ring {
  background: var(--day-picker-progress-empty-background, #ffffff);
  border: var(--day-picker-progress-border, 1px solid rgba(0, 0, 0, 0.12));
  border-radius: 50%;
  height: var(--day-picker-progress-size, 16px);
  margin: var(--day-picker-progress-margin, 0.18rem auto 0);
  width: var(--day-picker-progress-size, 16px);
}

.day-picker .date-item .progress-ring[data-state=active] {
  background: conic-gradient(var(--day-picker-progress-complete-background, #45b85c) 0% var(--date-progress, 0%), var(--day-picker-progress-pending-background, #f44336) var(--date-progress, 0%) 100%);
}

.day-picker .date-item .progress-ring[data-state=complete] {
  background: var(--day-picker-progress-complete-background, #45b85c);
}

.day-picker .date-item .progress-ring[data-state=overdue] {
  background: var(--day-picker-progress-overdue-background, #f44336);
}

.snackbar-region {
  bottom: max(var(--snackbar-safe-edge, var(--spacing-default)), env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: var(--snackbar-gap, var(--spacing-sm));
  inset-inline-end: max(var(--snackbar-safe-edge, var(--spacing-default)), env(safe-area-inset-right));
  max-width: min(var(--snackbar-max-width, 32rem), 100vw - 1.5rem);
  pointer-events: none;
  position: fixed;
  width: max-content;
  z-index: var(--snackbar-z-index);
}
@media (max-width: 480px) {
  .snackbar-region {
    inset-inline: 0.75rem;
    max-width: calc(100vw - 1.5rem);
    width: auto;
  }
}

.snackbar {
  align-items: center;
  background: var(--snackbar-background);
  border: var(--snackbar-border, var(--border-width-default) solid var(--snackbar-border-color));
  color: var(--snackbar-color);
  display: flex;
  gap: var(--snackbar-content-gap, var(--spacing-default));
  justify-content: space-between;
  min-height: var(--snackbar-min-height, 3rem);
  padding: var(--snackbar-padding-block, 0.65rem) var(--snackbar-padding-inline-end, 0.7rem) var(--snackbar-padding-block, 0.65rem) var(--snackbar-padding-inline-start, 0.9rem);
  pointer-events: auto;
  width: min(var(--snackbar-max-width, 32rem), 100vw - 1.5rem);
  border-radius: var(--snackbar-border-radius, var(--border-radius-default));
  box-shadow: var(--snackbar-shadow, var(--shadow-more));
}
@media (max-width: 480px) {
  .snackbar {
    align-items: stretch;
    flex-direction: column;
    gap: var(--snackbar-mobile-gap, var(--spacing-sm));
  }
}

.snackbar.failed {
  background: var(--snackbar-failed-background);
  color: var(--snackbar-failed-color, var(--snackbar-color));
}

.snackbar-message {
  line-height: var(--snackbar-line-height, 1.35);
  min-width: 0;
  overflow-wrap: anywhere;
}

.snackbar-actions {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: var(--snackbar-action-gap, var(--spacing-xs));
}

.snackbar-action {
  appearance: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: inherit;
  font: inherit;
  margin: 0;
  padding: 0;
  text-align: inherit;
  color: inherit;
  cursor: pointer;
  color: var(--snackbar-action-color);
  font-weight: 700;
  padding: var(--snackbar-action-padding-block, 0.35rem) var(--snackbar-action-padding-inline, 0.45rem);
  border-radius: var(--snackbar-action-radius, var(--border-radius-small));
}
.snackbar-action:focus-visible {
  outline: var(--focus-width) solid var(--snackbar-focus-color);
  outline-offset: var(--focus-offset-small);
  border-radius: var(--snackbar-action-radius, var(--border-radius-small));
}
.snackbar-action:disabled {
  cursor: default;
  opacity: var(--disabled-opacity-subtle, 0.7);
}

.snackbar-dismiss {
  appearance: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: inherit;
  font: inherit;
  margin: 0;
  padding: 0;
  text-align: inherit;
  color: inherit;
  cursor: pointer;
  align-items: center;
  display: inline-flex;
  height: var(--snackbar-dismiss-size, 2rem);
  justify-content: center;
  padding: 0;
  width: var(--snackbar-dismiss-size, 2rem);
  border-radius: 1000px;
}
.snackbar-dismiss:focus-visible {
  outline: var(--focus-width) solid var(--snackbar-focus-color);
  outline-offset: var(--focus-offset-small);
  border-radius: 50%;
}

@media (max-width: 480px) {
  .snackbar-actions {
    justify-content: flex-end;
  }
}
.comment {
  background: var(--comment-background, var(--background-alt));
  border-bottom: var(--comment-border, var(--border-width-default) solid var(--comment-border-color, var(--border-color-default)));
  padding: var(--comment-padding, var(--spacing-default));
}
.comment:last-child {
  border-bottom: none;
}
.comment:hover {
  background: var(--comment-hover-background, color-mix(in srgb, var(--text-color) 2%, var(--comment-background, var(--background-alt))));
}
.comment.comment-own {
  background: var(--comment-own-background, color-mix(in srgb, var(--background-alt) 80%, var(--background-default)));
}
.comment:hover .comment-actions, .comment:focus-within .comment-actions {
  opacity: 1;
}

.comment-header,
.comment .header {
  align-items: flex-start;
  display: flex;
  gap: var(--comment-header-gap, var(--spacing-sm));
}

.comment-avatar {
  flex-shrink: 0;
  height: var(--comment-avatar-size, 2rem);
  width: var(--comment-avatar-size, 2rem);
}

.comment-meta {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  font-size: var(--comment-meta-font-size, var(--font-size-small));
  gap: var(--comment-meta-row-gap, var(--spacing-xs)) var(--comment-meta-column-gap, var(--spacing-sm));
  margin: 0;
  min-width: 0;
}
.comment-meta dt {
  color: var(--placeholder-text-color);
  font-weight: 700;
}
.comment-meta dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.comment-meta-item {
  align-items: baseline;
  display: inline-flex;
  gap: var(--comment-meta-item-gap, var(--spacing-xs));
  min-width: 0;
}

.comment-author {
  color: var(--comment-author-color, var(--text-color));
  font-weight: var(--comment-author-font-weight, 700);
}

.comment-time {
  color: var(--comment-time-color, var(--placeholder-text-color));
  font-size: var(--comment-time-font-size, 0.75rem);
}

.comment-body {
  color: var(--comment-body-color, var(--text-color));
  line-height: var(--comment-body-line-height, 1.5);
}
.comment-body p {
  margin-bottom: var(--comment-body-paragraph-gap, var(--spacing-sm));
}
.comment-body p:last-child {
  margin-bottom: 0;
}

.comment-actions {
  opacity: 0;
  transition: opacity var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
  margin-left: auto;
}

.comments.list {
  min-width: 0;
  overflow: auto;
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb-bg) var(--scrollbar-track-bg);
  /* Chrome, Edge, Safari */
  max-block-size: var(--comment-list-max-height, 25rem);
}
.comments.list::-webkit-scrollbar {
  width: var(--scrollbar-width-thin);
  height: var(--scrollbar-width-thin);
}
.comments.list::-webkit-scrollbar-track {
  background: var(--scrollbar-track-bg);
}
.comments.list::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-bg);
  border-radius: calc(var(--scrollbar-width-thin) / 2);
}
.comments.list::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover-bg);
}

.comments {
  display: flex;
  flex-direction: column;
  min-height: var(--comment-list-container-min-height, 12.5rem);
}

.comment.composer {
  background: var(--comment-input-background, var(--comment-background, var(--background-alt)));
  bottom: 0;
  position: sticky;
}

.comments-dialog {
  max-width: min(100%, var(--comment-dialog-max-width, 37.5rem));
  min-width: min(100%, var(--comment-dialog-min-width, 25rem));
}

.comment-edit-form {
  margin-top: var(--comment-edit-form-margin-top, var(--spacing-sm));
  padding-inline-start: var(--comment-edit-form-padding-inline-start, 2.5rem);
}

.comment-edit-form textarea {
  min-height: var(--comment-edit-textarea-min-height, 3.75rem);
  resize: vertical;
}

.comments .state.loading,
.comments .state.empty {
  align-items: center;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: center;
}

.comments .send.action,
.comment-edit-form .save.action,
.comment-edit-form .cancel.action,
.comment-actions .more.action {
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
}
.comments .send.action:focus-visible,
.comment-edit-form .save.action:focus-visible,
.comment-edit-form .cancel.action:focus-visible,
.comment-actions .more.action:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.comments .send.action:hover:not(:disabled, [aria-disabled=true]),
.comment-edit-form .save.action:hover:not(:disabled, [aria-disabled=true]),
.comment-edit-form .cancel.action:hover:not(:disabled, [aria-disabled=true]),
.comment-actions .more.action:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.comments .send.action:disabled, .comments .send.action[aria-disabled=true],
.comment-edit-form .save.action:disabled,
.comment-edit-form .save.action[aria-disabled=true],
.comment-edit-form .cancel.action:disabled,
.comment-edit-form .cancel.action[aria-disabled=true],
.comment-actions .more.action:disabled,
.comment-actions .more.action[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}

.comments .send.action,
.comment-edit-form .save.action {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--primary-text-color);
}

.comment-edit-form .cancel.action {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--secondary-text-color);
}

.comment-actions .more.action {
  flex: 0 0 auto;
  min-height: 2rem;
  min-width: 2rem;
  padding: 0;
  width: 2rem;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--secondary-color);
}
.comment-actions .more.action:hover:not(:disabled, [aria-disabled=true]) {
  background: color-mix(in srgb, var(--secondary-color) 10%, transparent);
  box-shadow: none;
}

.comments-dialog .count {
  align-items: center;
  background: color-mix(in srgb, var(--info-color) 12%, transparent);
  border-radius: 999px;
  color: var(--info-color);
  display: inline-flex;
  font-size: var(--font-size-small);
  font-weight: 700;
  justify-content: center;
  min-height: 1.65rem;
  min-width: 1.65rem;
  padding: 0.1rem 0.5rem;
}

@media (max-width: 576px) {
  .task-comments-dialog,
  .project-comments-dialog {
    min-width: 100%;
  }
  .comment-body,
  .comment-edit-form {
    padding-inline-start: 0;
  }
}
.form-submit-feedback {
  align-items: center;
  color: var(--color-form-submit-feedback, var(--placeholder-text-color));
  display: flex;
  font-size: var(--font-size-small);
  gap: var(--gap-form-submit-feedback, var(--spacing-xs));
  margin: var(--margin-form-submit-feedback, var(--spacing-sm) 0);
  min-height: var(--min-height-form-submit-feedback);
}
.form-submit-feedback:empty {
  display: none;
}

.form-submit-feedback.saved {
  color: var(--form-submit-saved-color, var(--success-color));
}

.form-submit-feedback.failed {
  color: var(--form-submit-failed-color, var(--danger-color));
}

.form-submit-button-pending,
.form-submit-button-retry,
.form-submit-button-saved {
  align-items: center;
  display: inline-flex;
  gap: var(--form-submit-button-gap, var(--spacing-xs));
  justify-content: center;
}

.form-submit-button-pending {
  cursor: progress;
  pointer-events: none;
}

.form-submit-button-pending .bi-hourglass-split {
  animation: neatly-form-submit-spin 1s linear infinite;
}

@keyframes neatly-form-submit-spin {
  to {
    transform: rotate(360deg);
  }
}
.file-upload-dropzone-wrapper {
  position: relative;
  display: block;
}

.file-upload-dropzone-wrapper.compact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.file-upload-dropzone-wrapper.disabled {
  opacity: 0.6;
}

.file-upload-dropzone-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

.file-upload-dropzone {
  background: var(--background-drop-target, transparent);
  border: var(--border-drop-target, var(--border-width-default) dashed var(--border-color-default));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-drop-target, var(--border-radius-default));
  box-shadow: none;
  padding-top: var(--padding-drop-target, var(--padding-sm, calc(var(--spacing-default) / 2)));
  padding-bottom: var(--padding-drop-target, var(--padding-sm, calc(var(--spacing-default) / 2)));
  padding-inline-start: var(--padding-drop-target, var(--padding-sm, calc(var(--spacing-default) / 2)));
  padding-inline-end: var(--padding-drop-target, var(--padding-sm, calc(var(--spacing-default) / 2)));
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), outline-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
  min-height: 8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  background: radial-gradient(circle at top left, rgba(74, 144, 226, 0.18), transparent 45%), linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(240, 246, 252, 0.92));
  color: #123358;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.file-upload-dropzone-wrapper:hover .file-upload-dropzone {
  transform: translateY(-1px);
  border-color: rgba(74, 144, 226, 0.55);
  box-shadow: 0 10px 24px rgba(18, 51, 88, 0.12);
}

.file-upload-dropzone.compact {
  min-height: auto;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.file-upload-dropzone.compact .action,
.file-upload-dropzone.compact .composer-action {
  position: relative;
  z-index: 1;
}

.file-upload-dropzone-icon {
  font-size: 1.7rem;
  line-height: 1;
}

.file-upload-dropzone-title {
  font-weight: 700;
}

.file-upload-dropzone-subtitle {
  color: var(--placeholder-text-color);
}

.attachment-ui {
  min-width: 0;
}

.drive.explorer {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

.drive.explorer > .toolbar {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
}

.drive.explorer .selector {
  display: grid;
  flex: 1 1 14rem;
  gap: 0.25rem;
  min-width: 12rem;
}

.drive.explorer .root.actions,
.drive.explorer .item.row .actions,
.document.shared .item.row .actions {
  display: flex;
  gap: 0.35rem;
}

.drive.explorer .root.actions .action,
.drive.explorer .item.row .actions .action,
.drive.explorer .folder.breadcrumbs .folder.action,
.drive.explorer > .actions .folder.create .create.action,
.document.shared > header .actions .action,
.document.shared .item.row .actions .action,
.drive.share > .actions .action,
.probe.action {
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
}
.drive.explorer .root.actions .action:focus-visible,
.drive.explorer .item.row .actions .action:focus-visible,
.drive.explorer .folder.breadcrumbs .folder.action:focus-visible,
.drive.explorer > .actions .folder.create .create.action:focus-visible,
.document.shared > header .actions .action:focus-visible,
.document.shared .item.row .actions .action:focus-visible,
.drive.share > .actions .action:focus-visible,
.probe.action:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.drive.explorer .root.actions .action:hover:not(:disabled, [aria-disabled=true]),
.drive.explorer .item.row .actions .action:hover:not(:disabled, [aria-disabled=true]),
.drive.explorer .folder.breadcrumbs .folder.action:hover:not(:disabled, [aria-disabled=true]),
.drive.explorer > .actions .folder.create .create.action:hover:not(:disabled, [aria-disabled=true]),
.document.shared > header .actions .action:hover:not(:disabled, [aria-disabled=true]),
.document.shared .item.row .actions .action:hover:not(:disabled, [aria-disabled=true]),
.drive.share > .actions .action:hover:not(:disabled, [aria-disabled=true]),
.probe.action:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.drive.explorer .root.actions .action:disabled, .drive.explorer .root.actions .action[aria-disabled=true],
.drive.explorer .item.row .actions .action:disabled,
.drive.explorer .item.row .actions .action[aria-disabled=true],
.drive.explorer .folder.breadcrumbs .folder.action:disabled,
.drive.explorer .folder.breadcrumbs .folder.action[aria-disabled=true],
.drive.explorer > .actions .folder.create .create.action:disabled,
.drive.explorer > .actions .folder.create .create.action[aria-disabled=true],
.document.shared > header .actions .action:disabled,
.document.shared > header .actions .action[aria-disabled=true],
.document.shared .item.row .actions .action:disabled,
.document.shared .item.row .actions .action[aria-disabled=true],
.drive.share > .actions .action:disabled,
.drive.share > .actions .action[aria-disabled=true],
.probe.action:disabled,
.probe.action[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}

.drive.explorer .root.actions .icon.action,
.drive.explorer .item.row .actions .icon.action,
.document.shared > header .actions .icon.action,
.document.shared .item.row .actions .icon.action {
  flex: 0 0 auto;
  min-height: 2rem;
  min-width: 2rem;
  padding: 0;
  width: 2rem;
}

.probe.action {
  font-size: var(--button-small-font-size, var(--font-size-small));
  min-height: var(--button-small-min-height, 2rem);
  padding-inline-start: var(--button-small-padding-inline, var(--spacing-sm));
  padding-inline-end: var(--button-small-padding-inline, var(--spacing-sm));
  padding-top: var(--button-small-padding-block, var(--spacing-xs));
  padding-bottom: var(--button-small-padding-block, var(--spacing-xs));
}

.drive.explorer .folder.breadcrumbs {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  min-width: 0;
}

.drive.explorer > .actions {
  align-items: stretch;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.drive.explorer .folder.create {
  display: flex;
  flex: 1 1 18rem;
  gap: 0.5rem;
  min-width: 0;
}

.drive.explorer .folder.create .input {
  min-width: 0;
}

.drive.explorer .current.folder.drop.target {
  align-items: center;
  background: var(--background-drop-target, transparent);
  border: var(--border-drop-target, var(--border-width-default) dashed var(--border-color-default));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-drop-target, var(--border-radius-default));
  box-shadow: none;
  padding-top: var(--padding-drop-target, var(--padding-sm, calc(var(--spacing-default) / 2)));
  padding-bottom: var(--padding-drop-target, var(--padding-sm, calc(var(--spacing-default) / 2)));
  padding-inline-start: var(--padding-drop-target, var(--padding-sm, calc(var(--spacing-default) / 2)));
  padding-inline-end: var(--padding-drop-target, var(--padding-sm, calc(var(--spacing-default) / 2)));
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), outline-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
  color: var(--placeholder-text-color);
  display: flex;
  gap: 0.5rem;
  min-height: 2.5rem;
}

.drive.explorer .current.folder.drop.target.can-drop {
  background: var(--drop-target-active-background, color-mix(in srgb, var(--primary-background-color) 72%, var(--background-input)));
  border-color: var(--drop-target-active-border-color, var(--primary-color));
  color: var(--drop-target-active-color, var(--primary-color));
}

.drive.explorer .items.list,
.document.shared .items.list {
  display: grid;
  gap: 0.35rem;
}

.drive.explorer .item.row,
.document.shared .item.row {
  background: var(--background-surface, var(--background-input));
  border: var(--border-surface, var(--border-width-default) solid var(--border-color-default));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-surface, var(--border-radius-default));
  box-shadow: var(--shadow-surface, none);
  min-width: 0;
  padding: 0.55rem 0.65rem;
}

.drive.explorer .item.row > .content,
.document.shared .item.row > .content {
  align-items: center;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr) auto auto;
  min-width: 0;
}

.drive.explorer .item.row.can-drop,
.drive.explorer .item.row.is-drop-hover,
.document.shared .item.row.can-drop,
.document.shared .item.row.is-drop-hover {
  background: var(--drop-target-active-background, color-mix(in srgb, var(--primary-background-color) 72%, var(--background-input)));
  border-color: var(--drop-target-active-border-color, var(--primary-color));
  color: var(--drop-target-active-color, var(--primary-color));
}

.drive.explorer .item.row .open.action,
.document.shared .item.row .open.action {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--border-radius-default);
  color: inherit;
  display: flex;
  gap: 0.55rem;
  justify-content: flex-start;
  min-height: 2.25rem;
  min-width: 0;
  padding: 0;
  text-align: left;
  width: 100%;
}

.drive.explorer .item.row .name,
.document.shared .item.row .name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drive.explorer .item.row .meta,
.document.shared .item.row .meta {
  color: var(--placeholder-text-color);
  font-size: var(--font-size-small);
  white-space: nowrap;
}

.empty-state {
  display: grid;
  place-items: center;
  min-height: var(--empty-state-min-height, 4rem);
  color: var(--empty-state-color, var(--placeholder-text-color));
  gap: var(--empty-state-gap, var(--spacing-sm));
  padding: var(--empty-state-padding, var(--padding-default));
  text-align: center;
}

@media (max-width: 640px) {
  .drive.explorer .item.row > .content,
  .document.shared .item.row > .content {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .drive.explorer .item.row .meta,
  .document.shared .item.row .meta {
    display: none;
  }
  .drive.explorer > .actions,
  .drive.explorer .folder.create {
    flex-direction: column;
  }
}
.composer-upload {
  display: inline-flex;
  align-items: center;
}

.composer {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: var(--composer-gap, 0.45rem);
  min-width: 0;
}

.composer > .avatar,
.composer > div,
.composer-upload {
  flex: 0 0 auto;
}

.composer > .markdown-editor {
  --markdown-editor-action-size: 1.85rem;
  --markdown-editor-actions-padding: 0.25rem;
  --markdown-editor-block-gap: 0.35rem;
  --markdown-editor-min-height: 2.75rem;
  --textarea-min-height: 2.75rem;
  flex: 1 1 var(--composer-editor-basis, 16rem);
  min-width: min(100%, var(--composer-editor-min-width, 14rem));
}
.composer > .markdown-editor > .actions {
  gap: 0.15rem;
}
.composer > .markdown-editor > .editor {
  max-height: var(--composer-editor-max-height, 9rem);
  resize: none;
}

.composer .dropdown {
  display: inline-flex;
}

.composer-action {
  flex: 0 0 auto;
  min-height: var(--composer-action-size, 2.5rem);
  min-width: var(--composer-action-size, 2.5rem);
  padding: 0;
  width: var(--composer-action-size, 2.5rem);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--primary-color);
  --button-min-height: var(--composer-action-size, 2.5rem);
  --button-icon-size: var(--composer-action-size, 2.5rem);
  --padding-button-inline: 0;
  --padding-button-block: 0;
}
.composer-action:hover:not(:disabled, [aria-disabled=true]) {
  background: color-mix(in srgb, var(--primary-color) 10%, transparent);
  box-shadow: none;
}

.composer-action.send {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--primary-text-color);
}

.composer-shell {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.composer-status {
  align-items: center;
  --background-status: color-mix(in srgb, var(--primary-color) 5%, transparent);
  --border-status: var(--border-width-default) solid color-mix(in srgb, var(--primary-color) 20%, var(--border-color-default));
  background: var(--background-status, var(--background-panel, var(--background-input)));
  border: var(--border-status, var(--border-panel, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-status, var(--border-radius-default));
  box-shadow: var(--shadow-status, none);
  padding-top: var(--padding-status, var(--spacing-default));
  padding-bottom: var(--padding-status, var(--spacing-default));
  padding-inline-start: var(--padding-status, var(--spacing-default));
  padding-inline-end: var(--padding-status, var(--spacing-default));
  color: var(--text-color);
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
}

.composer-status.error {
  background: color-mix(in srgb, #fff2f2 78%, var(--background-input));
  border-color: color-mix(in srgb, #c0392b 48%, var(--border-color-default));
}

.composer-retry {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--primary-color);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  padding: 0;
}

.composer-retry:disabled,
.composer-action:disabled,
.composer textarea:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.composer-upload-status {
  align-items: center;
  color: var(--danger-color);
  display: flex;
  font-size: var(--font-size-small);
  gap: 0.35rem;
  line-height: 1.3;
  margin-top: 0.35rem;
  overflow-wrap: anywhere;
}

.composer-upload-status .bi {
  flex: 0 0 auto;
}

.attachment-item [class*=icon-document] {
  font-size: 1.45rem;
}

.auth-form.section {
  padding: var(--section-padding, var(--spacing-lg));
  display: flex;
  flex-direction: column;
  gap: var(--section-gap, var(--spacing-default));
  align-items: stretch;
}

.primary {
  background-color: var(--primary-color);
  color: var(--primary-text-color);
}

.auth {
  background: var(--background-panel, var(--background-surface, var(--background-input)));
  border: var(--border-panel, var(--border-surface, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-panel, var(--border-radius-card, var(--border-radius-default)));
  box-shadow: var(--shadow-panel, var(--shadow-card, var(--shadow-default)));
  padding-top: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-bottom: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-start: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-end: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  backdrop-filter: var(--filter-panel, none);
  -webkit-backdrop-filter: var(--filter-panel, none);
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--gap-auth-shell, var(--spacing-default));
  min-width: 0;
  margin: var(--margin-auth-shell);
  max-width: min(100%, var(--max-width-auth-shell));
  padding: var(--padding-auth-shell, var(--padding-panel, var(--padding-card, var(--spacing-default))));
  text-align: center;
  width: min(var(--width-auth-shell), 100vw - 2rem);
  align-self: center;
}

.auth > .header {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: var(--gap-auth-header, var(--spacing-sm));
  min-width: 0;
}

.auth > .header .brand {
  block-size: var(--auth-brand-size);
  inline-size: var(--auth-brand-size);
}

.auth > .header .title {
  font-size: var(--auth-title-font-size);
  font-weight: 700;
  line-height: 1.08;
  margin: 0;
  text-align: center;
}

.auth > .header .subtitle {
  color: var(--placeholder-text-color);
  font-size: var(--font-size-default);
  line-height: 1.4;
  margin: 0;
}

.auth > .content,
.auth-form-wrapper {
  min-width: 0;
}

.auth-form.section {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--form-gap, var(--spacing-default));
  min-width: 0;
  align-items: stretch;
  gap: var(--auth-form-gap, var(--spacing-default));
  padding: var(--auth-form-padding);
}
.auth-form.section > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) {
  display: grid;
  gap: var(--gap-feedback-form-field);
  min-height: auto;
  position: relative;
}
.auth-form.section > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > :is(input, select, textarea, .input, .rz-datepicker, .rz-dropdown, .rz-numeric),
.auth-form.section > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > label,
.auth-form.section > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > .field-icon {
  grid-area: 1/1;
  transition: color var(--transition-duration-fast) var(--transition-function-default), opacity var(--transition-duration-fast) var(--transition-function-default), transform var(--transition-duration-fast) var(--transition-function-default);
}
.auth-form.section > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > :is(input, select, textarea, .input, .rz-datepicker, .rz-dropdown, .rz-numeric) {
  align-self: stretch;
  min-height: var(--min-height-floating-field);
  min-width: 0;
  width: 100%;
}
.auth-form.section > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > :is(input, select, textarea, .input.text:not(.rz-datepicker):not(.rz-dropdown):not(.rz-numeric)) {
  padding-block: var(--padding-block-start-floating-field-control) var(--padding-block-end-floating-field-control);
  padding-inline: var(--padding-inline-floating-field, var(--padding-default));
}
.auth-form.section > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > :is(.rz-datepicker, .rz-dropdown, .rz-numeric) {
  padding: 0;
}
.auth-form.section > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > :is(.rz-datepicker, .rz-numeric) .rz-inputtext {
  background: transparent;
  border: 0;
  box-shadow: none;
  min-height: var(--min-height-floating-field);
  outline: 0;
  padding-block: var(--padding-block-start-floating-field-control) var(--padding-block-end-floating-field-control);
  padding-inline: var(--padding-inline-floating-field, var(--padding-default));
}
.auth-form.section > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > :is(.rz-dropdown, .rz-multiselect) :is(.rz-dropdown-label, .rz-multiselect-label) {
  min-height: var(--min-height-floating-field);
  padding-block: var(--padding-block-start-floating-field-control) var(--padding-block-end-floating-field-control);
  padding-inline: var(--padding-inline-floating-field, var(--padding-default));
}
.auth-form.section > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > label {
  align-self: center;
  display: inline-flex;
  gap: var(--gap-floating-label);
  line-height: 1;
  opacity: 1;
  padding-block: 0;
  padding-inline: var(--padding-inline-floating-field, var(--padding-default));
  pointer-events: none;
  transform-origin: left center;
  z-index: 2;
}
.auth-form.section > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .field-icon.leading) > :is(input, select, textarea, .input.text:not(.rz-datepicker):not(.rz-dropdown):not(.rz-numeric)) {
  padding-inline-start: calc(var(--padding-inline-floating-field, var(--padding-default)) + var(--space-leading-floating-field));
}
.auth-form.section > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .field-icon.trailing) > :is(input, select, textarea, .input.text:not(.rz-datepicker):not(.rz-dropdown):not(.rz-numeric)) {
  padding-inline-end: calc(var(--padding-inline-floating-field, var(--padding-default)) + var(--space-trailing-floating-field));
}
.auth-form.section > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .field-icon.leading) > label {
  padding-inline-start: calc(var(--padding-inline-floating-field, var(--padding-default)) + var(--space-leading-floating-field));
}
.auth-form.section > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):focus-within > label, .auth-form.section > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> input:not(:placeholder-shown)) > label, .auth-form.section > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> textarea:not(:placeholder-shown)) > label, .auth-form.section > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .input:not(:placeholder-shown)) > label, .auth-form.section > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .input.select) > label, .auth-form.section > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .rz-datepicker) > label, .auth-form.section > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .rz-dropdown) > label, .auth-form.section > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .rz-numeric) > label {
  color: var(--color-floating-label, var(--primary-color));
  opacity: var(--opacity-floating-label);
  transform: translate(var(--translate-x-floating-label), var(--translate-y-floating-label)) scale(var(--scale-floating-label));
}
.auth-form.section > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .field-icon.leading):focus-within > .field-icon.leading, .auth-form.section > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .field-icon.leading):has(> input:not(:placeholder-shown)) > .field-icon.leading, .auth-form.section > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .field-icon.leading):has(> textarea:not(:placeholder-shown)) > .field-icon.leading, .auth-form.section > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .field-icon.leading):has(> .input:not(:placeholder-shown)) > .field-icon.leading, .auth-form.section > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .field-icon.leading):has(> .input.select) > .field-icon.leading, .auth-form.section > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .field-icon.leading):has(> .rz-datepicker) > .field-icon.leading, .auth-form.section > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .field-icon.leading):has(> .rz-dropdown) > .field-icon.leading, .auth-form.section > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .field-icon.leading):has(> .rz-numeric) > .field-icon.leading {
  opacity: var(--opacity-active-floating-field-icon);
  transform: translateY(var(--translate-y-active-floating-field-icon)) scale(var(--scale-active-floating-field-icon));
}
.auth-form.section > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > .field-icon {
  align-self: center;
  color: var(--color-floating-field-icon, var(--placeholder-text-color));
  display: inline-flex;
  justify-content: center;
  pointer-events: none;
  position: relative;
  z-index: 2;
}
.auth-form.section > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > .field-icon.leading {
  justify-self: start;
  margin-inline-start: var(--padding-inline-floating-field, var(--padding-default));
}
.auth-form.section > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > .field-icon.trailing {
  justify-self: end;
  margin-inline-end: var(--padding-inline-floating-field, var(--padding-default));
}
.auth-form.section > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > .field-icon.status {
  color: var(--color-invalid-floating-field, var(--danger-color));
  opacity: 0;
}
.auth-form.section > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> :is(input, .input).invalid) > .field-icon.status {
  opacity: 1;
}
.auth-form.section > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > .field-icon.action {
  appearance: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: inherit;
  font: inherit;
  margin: 0;
  padding: 0;
  text-align: inherit;
  align-items: center;
  border-radius: var(--border-radius-small);
  color: var(--color-action-floating-field-icon, var(--placeholder-text-color));
  cursor: pointer;
  height: var(--size-action-floating-field-icon);
  pointer-events: auto;
  width: var(--size-action-floating-field-icon);
}
.auth-form.section > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > .field-icon.action:hover,
.auth-form.section > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > .field-icon.action:focus-visible {
  color: var(--color-action-hover-floating-field-icon, var(--primary-color));
}
.auth-form.section > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > :is(input, .input).invalid:not([type=checkbox]):not([type=radio]) {
  border-color: color-mix(in srgb, var(--color-invalid-floating-field, var(--danger-color)) 70%, var(--border-color-default));
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-invalid-floating-field, var(--danger-color)) 14%, transparent);
}
.auth-form.section > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> :is(input, .input).invalid:not([type=checkbox]):not([type=radio])) > label {
  color: var(--color-invalid-floating-field, var(--danger-color));
}
.auth-form.section > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > .validation-message {
  grid-column: 1/-1;
}
.auth-form.section > .form-field.checkbox,
.auth-form.section > .form-field.checkbox-field {
  align-items: flex-start;
  display: grid;
  gap: var(--gap-checkbox-field);
  grid-template-columns: auto minmax(0, 1fr);
  min-height: auto;
  text-align: left;
}
.auth-form.section > .form-field.checkbox > input,
.auth-form.section > .form-field.checkbox > label,
.auth-form.section > .form-field.checkbox-field > input,
.auth-form.section > .form-field.checkbox-field > label {
  left: auto;
  padding: 0;
  position: static;
  right: auto;
  transition: none;
}
.auth-form.section > .form-field.checkbox > input[type=checkbox],
.auth-form.section > .form-field.checkbox-field > input[type=checkbox] {
  margin: var(--margin-checkbox-input);
}
.auth-form.section > .form-field.checkbox > label,
.auth-form.section > .form-field.checkbox-field > label {
  line-height: var(--line-height-default);
  opacity: 1;
  z-index: auto;
}
.auth-form.section > .form-field.checkbox > .validation-message,
.auth-form.section > .form-field.checkbox-field > .validation-message {
  grid-column: 1/-1;
}

.auth .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) {
  --padding-inline-floating-field: var(--spacing-default);
  --color-invalid-floating-field: var(--auth-inline-error-color);
  --opacity-floating-label: 0.76;
  --translate-y-floating-label: -0.68rem;
}

.auth .form-field.checkbox,
.auth .form-field.checkbox-field {
  align-items: flex-start;
  display: grid;
  gap: var(--gap-checkbox-field);
  grid-template-columns: auto minmax(0, 1fr);
  min-height: auto;
  text-align: left;
}
.auth .form-field.checkbox > input,
.auth .form-field.checkbox > label,
.auth .form-field.checkbox-field > input,
.auth .form-field.checkbox-field > label {
  left: auto;
  padding: 0;
  position: static;
  right: auto;
  transition: none;
}
.auth .form-field.checkbox > input[type=checkbox],
.auth .form-field.checkbox-field > input[type=checkbox] {
  margin: var(--margin-checkbox-input);
}
.auth .form-field.checkbox > label,
.auth .form-field.checkbox-field > label {
  line-height: var(--line-height-default);
  opacity: 1;
  z-index: auto;
}
.auth .form-field.checkbox > .validation-message,
.auth .form-field.checkbox-field > .validation-message {
  grid-column: 1/-1;
}

.auth .form-field .validation-message {
  background: var(--background-validation-message, var(--danger-color));
  color: var(--color-validation-message, var(--danger-text-color));
  display: block;
  outline: var(--outline-validation-message, var(--border-width-default) solid var(--danger-color));
  padding: var(--padding-validation-message, var(--spacing-sm));
  align-items: center;
  background: transparent;
  border-radius: var(--border-radius-default);
  color: var(--auth-inline-error-color);
  display: flex;
  font-size: var(--font-size-small);
  gap: 0.35rem;
  line-height: 1.35;
  margin: 0;
  outline: 0;
  padding: 0;
  text-align: left;
}

.auth .form-field .validation-message i {
  flex: 0 0 auto;
  margin-inline-end: 0;
}

.register .auth-note {
  align-items: center;
  background: var(--auth-note-background);
  border: 1px solid var(--auth-note-border-color);
  border-radius: var(--border-radius-default);
  color: var(--placeholder-text-color);
  display: grid;
  gap: var(--spacing-sm);
  grid-template-columns: auto minmax(0, 1fr);
  padding: var(--spacing-sm) var(--spacing-default);
  text-align: left;
}

.register .auth-note i {
  align-items: center;
  background: var(--auth-note-icon-background);
  border-radius: 999px;
  color: var(--auth-note-icon-color);
  display: inline-flex;
  font-size: 1.25rem;
  height: 2.25rem;
  justify-content: center;
  width: 2.25rem;
}

.register .auth-note span {
  display: grid;
  gap: 0.2rem;
}

.register .auth-note strong {
  color: var(--text-color);
  font-weight: 600;
}

.signin .auth-step-heading {
  background: color-mix(in srgb, var(--primary-color) 8%, var(--background-input));
  border: 1px solid color-mix(in srgb, var(--primary-color) 24%, var(--border-color-default));
  border-radius: var(--border-radius-default);
  display: grid;
  gap: 0.25rem;
  padding: var(--spacing-sm) var(--spacing-default);
  text-align: left;
}

.signin .auth-step-heading strong {
  color: var(--text-color);
  font-weight: 650;
}

.signin .auth-step-heading span {
  color: var(--placeholder-text-color);
  font-size: var(--font-size-small);
  line-height: 1.35;
}

.auth .auth-error {
  color: var(--danger-color);
  font-size: var(--font-size-small);
  line-height: 1.4;
  margin: 0;
  text-align: left;
}

.register .auth-form.section {
  --auth-form-gap: 1.05rem;
  --margin-divider: 0.25rem 0;
}

.register .auth-form.section > .guest-action {
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
  background: transparent;
  border-color: var(--primary-color);
  box-shadow: none;
  color: var(--primary-color);
  width: 100%;
  background: color-mix(in srgb, var(--background-input) 92%, transparent);
  border-color: color-mix(in srgb, var(--primary-color) 62%, var(--border-color-default));
  color: var(--primary-color);
  min-height: 3rem;
}
.register .auth-form.section > .guest-action:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.register .auth-form.section > .guest-action:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.register .auth-form.section > .guest-action:disabled, .register .auth-form.section > .guest-action[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}
.register .auth-form.section > .guest-action:hover:not(:disabled, [aria-disabled=true]) {
  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
  border-color: var(--primary-color);
  box-shadow: none;
  color: var(--primary-color);
}

.register .auth-form.section > .guest-action:hover:not(:disabled, [aria-disabled=true]),
.register .auth-form.section > .guest-action:focus-visible {
  background: color-mix(in srgb, var(--primary-color) 8%, var(--background-input));
  color: var(--primary-color);
}

.auth .form-field:has(> .field-icon.leading):not(.checkbox):not(.checkbox-field) {
  --translate-x-floating-label: -0.2rem;
}

.auth-form.section .validation-summary-errors {
  --background-status: color-mix(in srgb, var(--danger-color) 5%, transparent);
  --border-status: var(--border-width-default) solid color-mix(in srgb, var(--danger-color) 20%, var(--border-color-default));
  background: var(--background-status, var(--background-panel, var(--background-input)));
  border: var(--border-status, var(--border-panel, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-status, var(--border-radius-default));
  box-shadow: var(--shadow-status, none);
  padding-top: var(--padding-status, var(--spacing-default));
  padding-bottom: var(--padding-status, var(--spacing-default));
  padding-inline-start: var(--padding-status, var(--spacing-default));
  padding-inline-end: var(--padding-status, var(--spacing-default));
  color: var(--danger-color);
  font-size: var(--font-size-small);
  text-align: left;
}

.auth-form.section .validation-summary-errors ul {
  display: grid;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.auth-form.section .validation-summary.action {
  color: inherit;
  display: inline;
  line-height: 1.35;
  min-height: 0;
  padding: 0;
  text-align: left;
}

.auth-form.section > .action,
.auth-form.section > button[type=submit],
.auth-form.section > #upgradeGuestAccount,
.auth-form.section > .guest-action,
.auth-form.section > .passkey {
  width: 100%;
}

.auth-form.section > button[type=submit],
.auth-form.section > #upgradeGuestAccount {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--primary-text-color);
}

.auth-form.section > button[type=button]:not(.field-icon):not(.guest-action):not(#upgradeGuestAccount) {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--secondary-text-color);
}

.signin .auth-inline-state {
  align-items: center;
  background: color-mix(in srgb, var(--auth-note-background) 78%, var(--background-input));
  border: var(--border-width-default) solid var(--auth-note-border-color);
  border-radius: var(--border-radius-default);
  color: var(--placeholder-text-color);
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: center;
  min-width: 0;
  padding: var(--spacing-sm) var(--spacing-default);
}

.signin .auth-inline-state > i {
  color: var(--auth-note-icon-color);
}

.signin .auth-inline-state .spinner {
  flex: 0 0 auto;
}

.signin .provider-state button {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--secondary-text-color);
  margin-inline-start: auto;
  width: auto;
}

.signin .passkey-state {
  justify-content: flex-start;
  text-align: left;
}

.signin .login-options {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: space-between;
  min-width: 0;
  margin: 0;
}

.signin .remember-me {
  align-items: center;
  display: inline-flex;
  gap: var(--spacing-sm);
  margin: 0;
}

.signin .forgot-password {
  white-space: nowrap;
}

.signin span,
.register span,
.activation span,
.signin .hint,
.register .hint,
.activation .hint {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-default);
  line-height: var(--line-height-default);
}

.signin .hint, .register .hint, .activation .hint {
  margin: 0 auto;
  text-align: center;
}

.signin img, .register img, .activation img {
  margin: auto;
  align-self: center;
}

.activation .content,
.activation .actions,
.signin.password-reset .actions {
  display: flex;
  flex-direction: column;
  gap: 1em;
  align-items: center;
}

.activation .actions > .login,
.signin.password-reset .actions > .login {
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--primary-text-color);
}
.activation .actions > .login:focus-visible,
.signin.password-reset .actions > .login:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.activation .actions > .login:hover:not(:disabled, [aria-disabled=true]),
.signin.password-reset .actions > .login:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.activation .actions > .login:disabled, .activation .actions > .login[aria-disabled=true],
.signin.password-reset .actions > .login:disabled,
.signin.password-reset .actions > .login[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}

.activation .actions > .register,
.signin.password-reset .actions > .request-new {
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--primary-text-color);
}
.activation .actions > .register:focus-visible,
.signin.password-reset .actions > .request-new:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.activation .actions > .register:hover:not(:disabled, [aria-disabled=true]),
.signin.password-reset .actions > .request-new:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.activation .actions > .register:disabled, .activation .actions > .register[aria-disabled=true],
.signin.password-reset .actions > .request-new:disabled,
.signin.password-reset .actions > .request-new[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}

.activation .actions > .login:not(:only-child),
.signin.password-reset .actions > .login:not(:only-child) {
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--secondary-text-color);
}
.activation .actions > .login:not(:only-child):focus-visible,
.signin.password-reset .actions > .login:not(:only-child):focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.activation .actions > .login:not(:only-child):hover:not(:disabled, [aria-disabled=true]),
.signin.password-reset .actions > .login:not(:only-child):hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.activation .actions > .login:not(:only-child):disabled, .activation .actions > .login:not(:only-child)[aria-disabled=true],
.signin.password-reset .actions > .login:not(:only-child):disabled,
.signin.password-reset .actions > .login:not(:only-child)[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}

@media (max-width: 640px) {
  .layout.centered,
  #centeredContent {
    align-items: start;
    padding: var(--spacing-default);
  }
  .auth {
    --auth-brand-size: 3.75rem;
    --auth-form-gap: var(--spacing-md);
    --padding-auth-shell: var(--spacing-lg);
    --auth-title-font-size: 2rem;
    margin-block: var(--spacing-default);
    width: min(100%, 100vw - 2rem);
  }
  .signin .login-options {
    align-items: flex-start;
    flex-direction: column;
  }
  .signin .provider-state button {
    margin-inline-start: 0;
    width: 100%;
  }
}
.divider {
  align-items: center;
  color: var(--color-divider, var(--placeholder-text-color));
  display: grid;
  gap: var(--gap-divider, var(--spacing-default));
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  margin: var(--margin-divider);
  text-align: center;
}
.divider::before, .divider::after {
  border-top: var(--border-width-divider, var(--border-width-default)) solid var(--border-color-divider);
  content: "";
}

.connected-providers .content {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-provider-grid, var(--spacing-sm));
  justify-content: center;
  min-width: 0;
}

.connected-provider-button {
  flex: 0 0 auto;
  min-height: var(--connected-provider-button-size, var(--button-size));
  min-width: var(--connected-provider-button-size, var(--button-size));
  padding: 0;
  width: var(--connected-provider-button-size, var(--button-size));
  border-radius: var(--border-radius-connected-provider-button, var(--border-radius-button, var(--border-radius-default)));
  padding: var(--padding-connected-provider-button, var(--padding-button, var(--spacing-default)));
}
.connected-provider-button:focus-visible {
  outline: var(--focus-width) solid var(--focus-color-connected-provider-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset-small);
  border-radius: var(--border-radius-connected-provider-button, var(--border-radius-button, var(--border-radius-default)));
}

.connected-provider-icon {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
  width: var(--connected-provider-icon-size, var(--icon-size));
  height: var(--connected-provider-icon-size, var(--icon-size));
}

.section.panel {
  --background-card: color-mix(in srgb, var(--background-input) 94%, transparent);
  --border-color-card: color-mix(in srgb, var(--border-color-default) 70%, transparent);
  min-width: 0;
}
@media (min-width: 0px) {
  .section.panel {
    background: var(--background-card, var(--background-default));
    color: var(--color-card, var(--text-color));
    border-radius: var(--border-radius-card, var(--border-radius-default));
    padding-top: var(--padding-card, var(--padding-default));
    padding-bottom: var(--padding-card, var(--padding-default));
    padding-inline-start: var(--padding-card, var(--padding-default));
    padding-inline-end: var(--padding-card, var(--padding-default));
    margin-top: var(--margin-card, var(--margin-default));
    margin-bottom: var(--margin-card, var(--margin-default));
    margin-inline-start: var(--margin-card, var(--margin-default));
    margin-inline-end: var(--margin-card, var(--margin-default));
    border: var(--border-width-card, var(--border-width-default)) solid var(--border-color-card, var(--border-color-default));
    transition: all var(--transition-duration-default) var(--transition-function-default);
    box-shadow: var(--shadow-card, var(--shadow-default));
  }
}
@media (min-width: 0px) and (prefers-reduced-motion: reduce) {
  .section.panel {
    transition: none !important;
  }
}
@media (min-width: 576px) {
  .section.panel {
    box-shadow: var(--shadow-card-responsive, var(--shadow-more));
  }
}

.section.panel > .header {
  align-items: center;
  border-bottom: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 65%, transparent);
  display: flex;
  gap: var(--spacing-sm);
  justify-content: space-between;
  margin: calc(var(--padding-card, var(--padding-default)) * -1) calc(var(--padding-card, var(--padding-default)) * -1) var(--spacing-default);
  min-width: 0;
  padding: var(--spacing-default);
}

.section.panel > .header > .title {
  align-items: center;
  display: flex;
  gap: 0.4rem;
  min-width: 0;
}

.section.panel > .header > .title span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.section.panel > .content {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-default);
  min-width: 0;
  min-width: 0;
}

[popover] {
  position-area: bottom;
  background: var(--background-menu, var(--background-panel, var(--background-input)));
  border: var(--border-menu, var(--border-panel, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-menu, var(--border-radius-panel, var(--border-radius-default)));
  box-shadow: var(--shadow-menu, var(--shadow-popover));
  padding-top: var(--padding-menu, var(--spacing-xs));
  padding-bottom: var(--padding-menu, var(--spacing-xs));
  padding-inline-start: var(--padding-menu, var(--spacing-xs));
  padding-inline-end: var(--padding-menu, var(--spacing-xs));
}

#header-notifications[popover],
#header-chat[popover],
#header-quickadd[popover],
#header-profile-menu[popover],
#dashboard-menu {
  background: color-mix(in srgb, var(--background-input) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--border-color-default) 70%, transparent);
  border-radius: 1rem;
  box-shadow: 0 1.5rem 4rem rgba(13, 24, 43, 0.22);
  color: var(--text-color);
  bottom: auto;
  left: var(--popover-anchor-left, calc(100vw - min(22rem, 100vw - 2rem) - var(--shell-header-margin)));
  margin: 0;
  max-height: calc(100dvh - var(--popover-anchor-top, 6rem) - 1rem);
  overflow: auto;
  padding: var(--spacing-default);
  position: fixed;
  position-area: initial;
  right: auto;
  top: var(--popover-anchor-top, calc(var(--shell-header-height) + var(--shell-header-margin) * 2));
  width: var(--popover-anchor-width, min(22rem, 100vw - 2rem));
  z-index: var(--shell-popover-z-index);
}

#header-profile-menu[popover] {
  --popover-anchor-width: min(22rem, calc(100vw - 2rem));
  --profile-menu-scroll-max-block-size: calc(100dvh - var(--popover-anchor-top, 6rem) - 1rem);
  --background-panel: var(--profile-menu-background, color-mix(in srgb, var(--background-input) 96%, var(--body-bg)));
  --border-panel: var(--profile-menu-border, var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 72%, transparent));
  --border-radius-panel: var(--profile-menu-radius, calc(var(--border-radius-default) * 2));
  --shadow-panel: var(--profile-menu-shadow, 0 1.5rem 4rem rgba(13, 24, 43, 0.22));
  background: var(--background-panel, var(--background-surface, var(--background-input)));
  border: var(--border-panel, var(--border-surface, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-panel, var(--border-radius-card, var(--border-radius-default)));
  box-shadow: var(--shadow-panel, var(--shadow-card, var(--shadow-default)));
  padding-top: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-bottom: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-start: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-end: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  backdrop-filter: var(--filter-panel, none);
  -webkit-backdrop-filter: var(--filter-panel, none);
  overflow: hidden;
  padding: 0;
  max-height: var(--profile-menu-scroll-max-block-size);
  overflow: hidden;
  padding: 0;
}

#header-profile-menu[popover]::backdrop {
  background: transparent;
}

#header-profile-menu .profile-grid {
  display: grid;
  gap: var(--spacing-sm);
}

#header-profile-menu .profile-menu-scroll {
  max-block-size: var(--profile-menu-scroll-max-block-size, 100%);
  min-width: 0;
  overflow: auto;
  padding: var(--profile-menu-padding, var(--spacing-default));
  scrollbar-gutter: stable;
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb-bg) var(--scrollbar-track-bg);
  /* Chrome, Edge, Safari */
  padding-top: calc(var(--spacing-default) + 1.8rem);
}
#header-profile-menu .profile-menu-scroll::-webkit-scrollbar {
  width: var(--scrollbar-width-thin);
  height: var(--scrollbar-width-thin);
}
#header-profile-menu .profile-menu-scroll::-webkit-scrollbar-track {
  background: var(--scrollbar-track-bg);
}
#header-profile-menu .profile-menu-scroll::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-bg);
  border-radius: calc(var(--scrollbar-width-thin) / 2);
}
#header-profile-menu .profile-menu-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover-bg);
}

#header-profile-menu .profile-grid > section {
  display: contents;
}

#header-profile-menu .section {
  padding: 0;
}

#header-profile-menu .profile-menu-close {
  flex: 0 0 auto;
  min-height: 2.25rem;
  min-width: 2.25rem;
  padding: 0;
  width: 2.25rem;
  background: color-mix(in srgb, var(--background-input) 82%, transparent);
  color: var(--placeholder-text-color);
  position: absolute;
  right: var(--spacing-sm);
  top: var(--spacing-sm);
  z-index: 2;
}

#header-profile-menu .profile-summary .content {
  align-items: center;
  display: grid;
  gap: var(--spacing-xs);
  justify-items: center;
  padding-block: var(--spacing-xs);
  text-align: center;
}

#header-profile-menu .profile-summary .avatar.lg {
  border: 3px solid color-mix(in srgb, #ffffff 82%, transparent);
  box-shadow: var(--shadow-default);
  height: 5.35rem !important;
  width: 5.35rem !important;
  border-radius: 1000px;
}

#header-profile-menu .profile-summary h4,
#header-profile-menu .profile-summary h5,
#header-profile-menu .profile-summary p {
  margin: 0;
}

#header-profile-menu .profile-summary h4:empty,
#header-profile-menu .profile-summary p:empty {
  display: none;
}

#header-profile-menu .profile-summary h5 {
  font-size: 1rem;
  font-weight: 750;
  overflow-wrap: anywhere;
}

#header-profile-menu .theme.selector {
  display: grid;
  gap: var(--spacing-xs);
  justify-items: center;
}

#header-profile-menu .theme.selector.trigger {
  align-items: center;
  background: color-mix(in srgb, var(--primary-color) 12%, var(--background-input));
  border: var(--border-width-default) solid color-mix(in srgb, var(--primary-color) 26%, var(--border-color-default));
  border-radius: var(--profile-theme-selector-radius, 999px);
  color: var(--primary-color);
  cursor: pointer;
  display: inline-flex;
  font-size: 0.9rem;
  font-weight: 700;
  gap: 0.4rem;
  justify-content: center;
  min-height: 2.35rem;
  padding: 0.35rem 0.7rem;
  width: auto;
}

.theme.menu[popover] {
  --padding-menu: var(--spacing-sm);
  --border-radius-menu: var(--border-radius-default);
  background: var(--profile-theme-menu-background, var(--background-input));
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 72%, transparent);
  border-radius: var(--profile-theme-menu-radius, var(--border-radius-default));
  box-shadow: var(--shadow-more);
  color: var(--text-color);
  left: var(--popover-anchor-left, 1rem);
  margin: 0;
  max-height: min(32rem, 100dvh - var(--popover-anchor-top, 5rem) - 1rem);
  min-width: min(20rem, 100vw - 2rem);
  overflow: auto;
  padding: var(--spacing-sm);
  position: fixed;
  position-area: initial;
  right: auto;
  scrollbar-gutter: stable;
  top: var(--popover-anchor-top, calc(var(--shell-header-height) + 1rem));
  width: var(--popover-anchor-width, min(20rem, 100vw - 2rem));
  z-index: calc(var(--shell-popover-z-index) + 1);
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb-bg) var(--scrollbar-track-bg);
  /* Chrome, Edge, Safari */
}
.theme.menu[popover]::-webkit-scrollbar {
  width: var(--scrollbar-width-thin);
  height: var(--scrollbar-width-thin);
}
.theme.menu[popover]::-webkit-scrollbar-track {
  background: var(--scrollbar-track-bg);
}
.theme.menu[popover]::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-bg);
  border-radius: calc(var(--scrollbar-width-thin) / 2);
}
.theme.menu[popover]::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover-bg);
}

.theme.menu .theme.menu.section {
  display: grid;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs);
}

.theme.menu .theme.menu.section + .theme.menu.section {
  border-top: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 64%, transparent);
  margin-top: var(--spacing-xs);
  padding-top: var(--spacing-sm);
}

.theme.menu .theme.menu.heading {
  color: var(--placeholder-text-color);
  font-size: var(--font-size-small);
  font-weight: 750;
}

.theme.menu .theme.options {
  display: grid;
  gap: var(--spacing-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.theme-select-button,
.theme-mode-button {
  appearance: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: inherit;
  font: inherit;
  margin: 0;
  padding: 0;
  text-align: inherit;
  align-items: center;
  background: color-mix(in srgb, var(--background-input) 86%, transparent);
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 70%, transparent);
  border-radius: var(--border-radius-default);
  color: var(--text-color);
  cursor: pointer;
  display: flex;
  gap: var(--spacing-sm);
  justify-content: space-between;
  min-height: 2.75rem;
  padding: 0.55rem 0.7rem;
  text-align: left;
  width: 100%;
}

.theme-select-button:hover:not(:disabled),
.theme-select-button:focus-visible:not(:disabled),
.theme-mode-button:hover,
.theme-mode-button:focus-visible {
  background: color-mix(in srgb, var(--primary-color) 8%, var(--background-input));
  border-color: color-mix(in srgb, var(--primary-color) 28%, var(--border-color-default));
}

.theme-select-button[aria-pressed=true],
.theme-mode-button.active {
  background: color-mix(in srgb, var(--primary-color) 12%, var(--background-input));
  border-color: color-mix(in srgb, var(--primary-color) 34%, var(--border-color-default));
  color: var(--primary-color);
}

.theme-select-button:disabled {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}

.theme-info,
.theme-name-row {
  align-items: center;
  display: flex;
  gap: var(--spacing-xs);
  min-width: 0;
}

.theme-info {
  align-items: stretch;
  flex: 1 1 auto;
  flex-direction: column;
}

.theme-name-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.theme-requirement {
  color: var(--placeholder-text-color);
  font-size: var(--font-size-small);
}

.theme-lock-icon,
.theme-unlock-icon,
.theme-check,
.theme-mode-check {
  flex: 0 0 auto;
}

.theme.mode.group {
  display: grid;
  gap: var(--spacing-xs);
}

#header-profile-menu .serious-mode-toggle {
  align-items: center;
  background: color-mix(in srgb, var(--background-input) 86%, transparent);
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 70%, transparent);
  border-radius: var(--border-radius-default);
  display: flex;
  gap: var(--spacing-sm);
  margin: 0;
  min-height: 2.75rem;
  padding: 0.55rem 0.7rem;
  text-align: left;
}

#header-profile-menu .serious-mode-toggle input {
  flex: 0 0 auto;
}

#header-quickadd #quickAddMoreOptions {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--secondary-text-color);
}

.add-modal {
  background: var(--background-input);
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 72%, transparent);
  border-radius: 1rem;
  box-shadow: 0 1rem 2.5rem rgba(13, 24, 43, 0.16);
  color: var(--text-color);
  min-width: min(22rem, 100vw - 2rem);
  padding: var(--spacing-default);
}

.add-modal .entity.view.grid {
  display: grid;
  gap: var(--spacing-sm);
  grid-template-columns: repeat(auto-fit, minmax(8.75rem, 1fr));
}

.add-modal .add-task-action {
  align-items: center;
  background: color-mix(in srgb, var(--body-bg) 56%, var(--background-input));
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 76%, transparent);
  border-radius: var(--border-radius-default);
  color: var(--text-color);
  display: grid;
  font-weight: 700;
  gap: var(--spacing-xs);
  justify-items: center;
  min-height: 6.5rem;
  padding: var(--spacing-default);
  text-align: center;
  text-decoration: none;
}

.add-modal .add-task-action:hover,
.add-modal .add-task-action:focus-visible {
  background: color-mix(in srgb, var(--primary-color) 8%, var(--background-input));
  border-color: color-mix(in srgb, var(--primary-color) 28%, var(--border-color-default));
  text-decoration: none;
}

.add-modal .icon-container {
  align-items: center;
  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
  border-radius: 1rem;
  color: var(--primary-color);
  display: inline-flex;
  font-size: 1.35rem;
  height: 3rem;
  justify-content: center;
  width: 3rem;
}

.contact.acquisition.section,
.contact.invitation.section,
.access.invitation.section,
.collab.invitation.section {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-default);
  min-width: 0;
  max-width: 42rem;
}

.contact.acquisition.section > .section.header {
  align-items: center;
  display: grid;
  gap: var(--spacing-sm);
  grid-template-columns: auto minmax(0, 1fr);
}

.contact.acquisition.section > .section.header > i {
  align-items: center;
  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
  border-radius: 1rem;
  color: var(--primary-color);
  display: inline-flex;
  font-size: 1.4rem;
  height: 3rem;
  justify-content: center;
  width: 3rem;
}

.contact.acquisition.section h2,
.contact.acquisition.section p {
  margin: 0;
}

.invitation.form {
  --form-gap: var(--spacing-sm);
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--form-gap, var(--spacing-default));
  min-width: 0;
  align-items: stretch;
}
.invitation.form > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) {
  display: grid;
  gap: var(--gap-feedback-form-field);
  min-height: auto;
  position: relative;
}
.invitation.form > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > :is(input, select, textarea, .input, .rz-datepicker, .rz-dropdown, .rz-numeric),
.invitation.form > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > label,
.invitation.form > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > .field-icon {
  grid-area: 1/1;
  transition: color var(--transition-duration-fast) var(--transition-function-default), opacity var(--transition-duration-fast) var(--transition-function-default), transform var(--transition-duration-fast) var(--transition-function-default);
}
.invitation.form > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > :is(input, select, textarea, .input, .rz-datepicker, .rz-dropdown, .rz-numeric) {
  align-self: stretch;
  min-height: var(--min-height-floating-field);
  min-width: 0;
  width: 100%;
}
.invitation.form > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > :is(input, select, textarea, .input.text:not(.rz-datepicker):not(.rz-dropdown):not(.rz-numeric)) {
  padding-block: var(--padding-block-start-floating-field-control) var(--padding-block-end-floating-field-control);
  padding-inline: var(--padding-inline-floating-field, var(--padding-default));
}
.invitation.form > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > :is(.rz-datepicker, .rz-dropdown, .rz-numeric) {
  padding: 0;
}
.invitation.form > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > :is(.rz-datepicker, .rz-numeric) .rz-inputtext {
  background: transparent;
  border: 0;
  box-shadow: none;
  min-height: var(--min-height-floating-field);
  outline: 0;
  padding-block: var(--padding-block-start-floating-field-control) var(--padding-block-end-floating-field-control);
  padding-inline: var(--padding-inline-floating-field, var(--padding-default));
}
.invitation.form > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > :is(.rz-dropdown, .rz-multiselect) :is(.rz-dropdown-label, .rz-multiselect-label) {
  min-height: var(--min-height-floating-field);
  padding-block: var(--padding-block-start-floating-field-control) var(--padding-block-end-floating-field-control);
  padding-inline: var(--padding-inline-floating-field, var(--padding-default));
}
.invitation.form > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > label {
  align-self: center;
  display: inline-flex;
  gap: var(--gap-floating-label);
  line-height: 1;
  opacity: 1;
  padding-block: 0;
  padding-inline: var(--padding-inline-floating-field, var(--padding-default));
  pointer-events: none;
  transform-origin: left center;
  z-index: 2;
}
.invitation.form > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .field-icon.leading) > :is(input, select, textarea, .input.text:not(.rz-datepicker):not(.rz-dropdown):not(.rz-numeric)) {
  padding-inline-start: calc(var(--padding-inline-floating-field, var(--padding-default)) + var(--space-leading-floating-field));
}
.invitation.form > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .field-icon.trailing) > :is(input, select, textarea, .input.text:not(.rz-datepicker):not(.rz-dropdown):not(.rz-numeric)) {
  padding-inline-end: calc(var(--padding-inline-floating-field, var(--padding-default)) + var(--space-trailing-floating-field));
}
.invitation.form > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .field-icon.leading) > label {
  padding-inline-start: calc(var(--padding-inline-floating-field, var(--padding-default)) + var(--space-leading-floating-field));
}
.invitation.form > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):focus-within > label, .invitation.form > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> input:not(:placeholder-shown)) > label, .invitation.form > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> textarea:not(:placeholder-shown)) > label, .invitation.form > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .input:not(:placeholder-shown)) > label, .invitation.form > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .input.select) > label, .invitation.form > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .rz-datepicker) > label, .invitation.form > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .rz-dropdown) > label, .invitation.form > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .rz-numeric) > label {
  color: var(--color-floating-label, var(--primary-color));
  opacity: var(--opacity-floating-label);
  transform: translate(var(--translate-x-floating-label), var(--translate-y-floating-label)) scale(var(--scale-floating-label));
}
.invitation.form > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .field-icon.leading):focus-within > .field-icon.leading, .invitation.form > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .field-icon.leading):has(> input:not(:placeholder-shown)) > .field-icon.leading, .invitation.form > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .field-icon.leading):has(> textarea:not(:placeholder-shown)) > .field-icon.leading, .invitation.form > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .field-icon.leading):has(> .input:not(:placeholder-shown)) > .field-icon.leading, .invitation.form > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .field-icon.leading):has(> .input.select) > .field-icon.leading, .invitation.form > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .field-icon.leading):has(> .rz-datepicker) > .field-icon.leading, .invitation.form > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .field-icon.leading):has(> .rz-dropdown) > .field-icon.leading, .invitation.form > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .field-icon.leading):has(> .rz-numeric) > .field-icon.leading {
  opacity: var(--opacity-active-floating-field-icon);
  transform: translateY(var(--translate-y-active-floating-field-icon)) scale(var(--scale-active-floating-field-icon));
}
.invitation.form > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > .field-icon {
  align-self: center;
  color: var(--color-floating-field-icon, var(--placeholder-text-color));
  display: inline-flex;
  justify-content: center;
  pointer-events: none;
  position: relative;
  z-index: 2;
}
.invitation.form > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > .field-icon.leading {
  justify-self: start;
  margin-inline-start: var(--padding-inline-floating-field, var(--padding-default));
}
.invitation.form > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > .field-icon.trailing {
  justify-self: end;
  margin-inline-end: var(--padding-inline-floating-field, var(--padding-default));
}
.invitation.form > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > .field-icon.status {
  color: var(--color-invalid-floating-field, var(--danger-color));
  opacity: 0;
}
.invitation.form > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> :is(input, .input).invalid) > .field-icon.status {
  opacity: 1;
}
.invitation.form > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > .field-icon.action {
  appearance: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: inherit;
  font: inherit;
  margin: 0;
  padding: 0;
  text-align: inherit;
  align-items: center;
  border-radius: var(--border-radius-small);
  color: var(--color-action-floating-field-icon, var(--placeholder-text-color));
  cursor: pointer;
  height: var(--size-action-floating-field-icon);
  pointer-events: auto;
  width: var(--size-action-floating-field-icon);
}
.invitation.form > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > .field-icon.action:hover,
.invitation.form > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > .field-icon.action:focus-visible {
  color: var(--color-action-hover-floating-field-icon, var(--primary-color));
}
.invitation.form > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > :is(input, .input).invalid:not([type=checkbox]):not([type=radio]) {
  border-color: color-mix(in srgb, var(--color-invalid-floating-field, var(--danger-color)) 70%, var(--border-color-default));
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-invalid-floating-field, var(--danger-color)) 14%, transparent);
}
.invitation.form > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> :is(input, .input).invalid:not([type=checkbox]):not([type=radio])) > label {
  color: var(--color-invalid-floating-field, var(--danger-color));
}
.invitation.form > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > .validation-message {
  grid-column: 1/-1;
}
.invitation.form > .form-field.checkbox,
.invitation.form > .form-field.checkbox-field {
  align-items: flex-start;
  display: grid;
  gap: var(--gap-checkbox-field);
  grid-template-columns: auto minmax(0, 1fr);
  min-height: auto;
  text-align: left;
}
.invitation.form > .form-field.checkbox > input,
.invitation.form > .form-field.checkbox > label,
.invitation.form > .form-field.checkbox-field > input,
.invitation.form > .form-field.checkbox-field > label {
  left: auto;
  padding: 0;
  position: static;
  right: auto;
  transition: none;
}
.invitation.form > .form-field.checkbox > input[type=checkbox],
.invitation.form > .form-field.checkbox-field > input[type=checkbox] {
  margin: var(--margin-checkbox-input);
}
.invitation.form > .form-field.checkbox > label,
.invitation.form > .form-field.checkbox-field > label {
  line-height: var(--line-height-default);
  opacity: 1;
  z-index: auto;
}
.invitation.form > .form-field.checkbox > .validation-message,
.invitation.form > .form-field.checkbox-field > .validation-message {
  grid-column: 1/-1;
}

.invitation.form > header,
.access.invitation:not(.section) > header {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  min-width: 0;
}

.invitation.form > header .title,
.access.invitation:not(.section) > header .title {
  align-items: center;
  display: flex;
  gap: var(--spacing-sm);
  min-width: 0;
}

.invitation.form > header .title > i,
.access.invitation:not(.section) > header .title > i {
  color: var(--primary-color);
  flex: 0 0 auto;
}

.invitation.form h3,
.invitation.form p,
.access.invitation:not(.section) h3,
.access.invitation:not(.section) p {
  margin: 0;
}

.invitation.form p,
.access.invitation:not(.section) p,
.access.invitation:not(.section) .pending-item small {
  color: var(--placeholder-text-color);
}

.invitation.form .fields,
.access.invitation:not(.section) .content {
  display: grid;
  gap: var(--spacing-sm);
}

.invitation.form .validation-message {
  background: var(--background-validation-message, var(--danger-color));
  color: var(--color-validation-message, var(--danger-text-color));
  display: block;
  outline: var(--outline-validation-message, var(--border-width-default) solid var(--danger-color));
  padding: var(--padding-validation-message, var(--spacing-sm));
}

.access.invitation:not(.section) {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-default);
  min-width: 0;
}

.access.invitation:not(.section) .pending-list {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  min-width: 0;
}

.access.invitation:not(.section) .pending-list h6 {
  margin: 0;
}

.access.invitation:not(.section) .pending-item {
  background: color-mix(in srgb, var(--background-input) 82%, transparent);
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 62%, transparent);
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-default);
  box-shadow: none;
  padding-top: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
  padding-inline-start: var(--spacing-sm);
  padding-inline-end: var(--spacing-sm);
  align-items: center;
  display: flex;
  gap: var(--spacing-sm);
  justify-content: space-between;
}

.access.invitation:not(.section) .pending-item .details {
  min-width: 0;
}

.access.invitation:not(.section) .pending-item span,
.access.invitation:not(.section) .pending-item small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.invitation.section > header {
  align-items: center;
  display: flex;
  gap: var(--spacing-sm);
  justify-content: space-between;
}

.invitation.section > header .title {
  font-size: var(--font-size-xxl);
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.invitation.section > header .status.chip {
  background: color-mix(in srgb, var(--primary-color) 10%, transparent);
  border: var(--border-width-default) solid color-mix(in srgb, var(--primary-color) 24%, transparent);
  color: var(--primary-color);
  flex: 0 0 auto;
}

.invitation.section > .content {
  background: var(--background-panel, var(--background-surface, var(--background-input)));
  border: var(--border-panel, var(--border-surface, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-panel, var(--border-radius-card, var(--border-radius-default)));
  box-shadow: var(--shadow-panel, var(--shadow-card, var(--shadow-default)));
  padding-top: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-bottom: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-start: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-end: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  backdrop-filter: var(--filter-panel, none);
  -webkit-backdrop-filter: var(--filter-panel, none);
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-default);
  min-width: 0;
}

.invitation.section .details {
  display: grid;
  gap: var(--spacing-sm);
  margin: 0;
}

.invitation.section .details > div {
  display: grid;
  gap: 0.15rem;
}

.invitation.section dt {
  color: var(--placeholder-text-color);
  font-size: var(--font-size-small);
  font-weight: 700;
}

.invitation.section dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.invitation.section .actions,
.collab.invitation.dialog > .actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: flex-end;
  min-width: 0;
}

.invitation.section .login.action,
.invitation.section .register.action {
  border-radius: 1000px;
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
}
.invitation.section .login.action:focus-visible,
.invitation.section .register.action:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.invitation.section .login.action:hover:not(:disabled, [aria-disabled=true]),
.invitation.section .register.action:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.invitation.section .login.action:disabled, .invitation.section .login.action[aria-disabled=true],
.invitation.section .register.action:disabled,
.invitation.section .register.action[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}

.invitation.section .login.action {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--primary-text-color);
}

.invitation.section .register.action {
  background: transparent;
  border-color: var(--primary-color);
  box-shadow: none;
  color: var(--primary-color);
}
.invitation.section .register.action:hover:not(:disabled, [aria-disabled=true]) {
  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
  border-color: var(--primary-color);
  box-shadow: none;
  color: var(--primary-color);
}

.invitation.form .send.action {
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--primary-text-color);
}
.invitation.form .send.action:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.invitation.form .send.action:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.invitation.form .send.action:disabled, .invitation.form .send.action[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}

.collab.invitation.dialog {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-default);
  min-width: 0;
  min-width: min(24rem, 100vw - 2rem);
}

.collab.invitation.dialog .status.success {
  --background-status: color-mix(in srgb, var(--success-color) 5%, transparent);
  --border-status: var(--border-width-default) solid color-mix(in srgb, var(--success-color) 20%, var(--border-color-default));
  background: var(--background-status, var(--background-panel, var(--background-input)));
  border: var(--border-status, var(--border-panel, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-status, var(--border-radius-default));
  box-shadow: var(--shadow-status, none);
  padding-top: var(--padding-status, var(--spacing-default));
  padding-bottom: var(--padding-status, var(--spacing-default));
  padding-inline-start: var(--padding-status, var(--spacing-default));
  padding-inline-end: var(--padding-status, var(--spacing-default));
  align-items: center;
  display: flex;
  gap: var(--spacing-sm);
}

.contact.result,
.contact.invitation.result {
  background: var(--background-input);
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 72%, transparent);
  border-radius: var(--border-radius-default);
  display: grid;
  gap: var(--spacing-default);
  padding: var(--spacing-default);
}

.contact.result .content,
.contact.invitation.result .content {
  align-items: center;
  display: grid;
  gap: var(--spacing-sm);
  grid-template-columns: auto minmax(0, 1fr);
}

.contact.result .content > i,
.contact.invitation.result .content > i {
  align-items: center;
  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
  border-radius: 1rem;
  color: var(--primary-color);
  display: inline-flex;
  font-size: 1.3rem;
  height: 3rem;
  justify-content: center;
  width: 3rem;
}

.contact.result .content strong,
.contact.invitation.result .content strong,
.contact.result .content span,
.contact.invitation.result .content span {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.contact.result .content span,
.contact.invitation.result .content span,
.contact.message {
  color: var(--placeholder-text-color);
}

.contact.result .actions,
.profile.contact.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}

.contact.invitation.modal {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-default);
  min-width: 0;
  min-width: min(22rem, 100vw - 2rem);
}

.contact.invitation.target {
  align-items: center;
  background: color-mix(in srgb, var(--primary-color) 8%, var(--background-input));
  border: var(--border-width-default) solid color-mix(in srgb, var(--primary-color) 22%, var(--border-color-default));
  border-radius: var(--border-radius-default);
  display: grid;
  gap: var(--spacing-sm);
  grid-template-columns: 3rem minmax(0, 1fr);
  padding: var(--spacing-sm);
}

.contact.invitation.target > .bi {
  align-items: center;
  background: color-mix(in srgb, var(--primary-color) 14%, transparent);
  border-radius: var(--border-radius-default);
  color: var(--primary-color);
  display: inline-flex;
  height: 3rem;
  justify-content: center;
  width: 3rem;
}

.contact.invitation.target strong,
.contact.invitation.target span {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.contact.invitation.target div > span {
  color: var(--placeholder-text-color);
  font-size: var(--font-size-small);
}

.profile.page {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-default);
  min-width: 0;
  margin-inline: auto;
  max-width: min(56rem, 100%);
}

.profile.hero,
.profile.achievements {
  --background-panel: color-mix(in srgb, var(--background-input) 92%, transparent);
  --border-panel: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 72%, transparent);
  --padding-panel: clamp(1rem, 2.4vw, 1.5rem);
  background: var(--background-panel, var(--background-surface, var(--background-input)));
  border: var(--border-panel, var(--border-surface, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-panel, var(--border-radius-card, var(--border-radius-default)));
  box-shadow: var(--shadow-panel, var(--shadow-card, var(--shadow-default)));
  padding-top: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-bottom: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-start: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-end: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  backdrop-filter: var(--filter-panel, none);
  -webkit-backdrop-filter: var(--filter-panel, none);
}

.profile.hero {
  align-items: center;
  display: grid;
  gap: var(--spacing-default);
  justify-items: center;
  text-align: center;
}

.profile.hero .avatar.xl {
  border: 3px solid color-mix(in srgb, #ffffff 82%, transparent);
  box-shadow: var(--shadow-default);
  height: 6.5rem !important;
  width: 6.5rem !important;
  border-radius: 1000px;
}

.profile.identity {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.profile.identity h1,
.profile.identity p,
.profile.achievements h2,
.profile.achievements p {
  margin: 0;
}

.profile.identity h1 {
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  overflow-wrap: anywhere;
}

.profile.achievements {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-default);
  min-width: 0;
}

.profile.achievements > header {
  align-items: center;
  display: grid;
  gap: var(--spacing-sm);
  grid-template-columns: auto minmax(0, 1fr);
}

.profile.achievements .section-icon {
  align-items: center;
  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
  border-radius: var(--border-radius-default);
  color: var(--primary-color);
  display: inline-flex;
  font-size: 1.25rem;
  height: 3rem;
  justify-content: center;
  width: 3rem;
}

.profile.achievements header p {
  color: var(--placeholder-text-color);
}

.user-challenge-list {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  min-width: 0;
}

.user-challenge-list .empty,
.achievement.visibility .empty {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  min-width: 0;
  color: var(--placeholder-text-color);
  justify-items: center;
  min-height: 7rem;
  text-align: center;
}

.user-challenge-list .empty > i,
.achievement.visibility .empty > i {
  color: color-mix(in srgb, var(--primary-color) 72%, var(--placeholder-text-color));
  font-size: 2rem;
}

.user-challenge-list .empty p,
.user-challenge-list .empty small,
.achievement.visibility .empty p,
.achievement.visibility .empty small {
  margin: 0;
}

.achievement.visibility .list {
  display: grid;
  gap: var(--spacing-sm);
}

.achievement.visibility .item {
  align-items: center;
  background: color-mix(in srgb, var(--background-input) 88%, transparent);
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 70%, transparent);
  border-radius: var(--border-radius-default);
  display: grid;
  gap: var(--spacing-sm);
  grid-template-columns: auto auto minmax(0, 1fr);
  margin: 0;
  padding: var(--spacing-sm);
}

.achievement.visibility .item > span:last-child {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.achievement.visibility .item strong,
.achievement.visibility .item small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.achievement.visibility .item small {
  color: var(--placeholder-text-color);
}

.additional-data-field {
  border-top: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 58%, transparent);
  padding-block: var(--spacing-default);
}

#header-profile-menu .profile-links .content,
#header-profile-menu .profile-links ul {
  display: grid;
  gap: var(--spacing-xs);
}

#header-profile-menu .profile-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#header-profile-menu .profile-links .divider {
  border-top: 1px solid color-mix(in srgb, var(--border-color-default) 70%, transparent);
  margin: var(--spacing-xs) 0;
}

#header-profile-menu .profile-links .link {
  appearance: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: inherit;
  font: inherit;
  margin: 0;
  padding: 0;
  text-align: inherit;
  align-items: center;
  background: var(--profile-menu-row-background, var(--background-input));
  border: var(--profile-menu-row-border, var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 72%, transparent));
  color: var(--text-color);
  display: grid;
  font-size: 1rem;
  font-weight: 650;
  gap: var(--spacing-sm);
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  min-height: 3.15rem;
  padding: 0.45rem var(--spacing-sm);
  text-align: left;
  text-decoration: none;
  width: 100%;
  border-radius: var(--profile-menu-row-radius, var(--border-radius-default));
  box-shadow: 0 0.45rem 1.1rem rgba(13, 24, 43, 0.05);
}
#header-profile-menu .profile-links .link:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset-small);
  border-radius: var(--profile-menu-row-radius, var(--border-radius-default));
}

#header-profile-menu .profile-links .link:hover,
#header-profile-menu .profile-links .link:focus-visible {
  background: color-mix(in srgb, var(--primary-color) 7%, var(--background-input));
  border-color: color-mix(in srgb, var(--primary-color) 25%, var(--border-color-default));
  text-decoration: none;
}

#header-profile-menu .profile-links .menu-icon {
  align-items: center;
  background: color-mix(in srgb, var(--primary-color) 10%, transparent);
  color: var(--primary-color);
  display: inline-flex;
  height: 2.5rem;
  justify-content: center;
  width: 2.5rem;
  border-radius: var(--profile-menu-icon-radius, var(--border-radius-default));
}

#header-profile-menu .profile-links .menu-icon.account {
  background: color-mix(in srgb, var(--primary-color) 10%, transparent);
  color: var(--primary-color);
}

#header-profile-menu .profile-links .menu-icon.security {
  background: color-mix(in srgb, #4f7df0 12%, transparent);
  color: #3e70e8;
}

#header-profile-menu .profile-links .menu-icon.notifications {
  background: color-mix(in srgb, #7659f6 12%, transparent);
  color: #7659f6;
}

#header-profile-menu .profile-links .chevron {
  color: color-mix(in srgb, var(--placeholder-text-color) 80%, transparent);
}

#header-profile-menu .profile-links .logout .link {
  border: 1px solid color-mix(in srgb, var(--danger-color) 24%, transparent);
  color: var(--danger-color);
  grid-template-columns: 2.5rem minmax(0, 1fr);
  margin-top: var(--spacing-xs);
  padding: 0.5rem var(--spacing-sm);
}

#header-profile-menu .profile-links .logout .menu-icon {
  background: transparent;
  color: var(--danger-color);
}

#header-profile-menu .studio.selector {
  border-top: 1px solid color-mix(in srgb, var(--border-color-default) 70%, transparent);
  display: grid;
  gap: var(--spacing-sm);
  padding-top: var(--spacing-default);
}

#header-profile-menu .studio-selector-heading {
  align-items: baseline;
  display: flex;
  gap: var(--spacing-sm);
  justify-content: space-between;
  min-width: 0;
}

#header-profile-menu .studio-selector-heading > span {
  font-weight: 700;
}

#header-profile-menu .studio-selector-heading small {
  color: var(--placeholder-text-color);
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: right;
}

#header-profile-menu .studio-carousel {
  --carousel-action-size: 2rem;
  --carousel-item-min-height: 4rem;
  --carousel-item-min-width: 10.5rem;
  --carousel-item-radius: 1rem;
  align-items: center;
  display: grid;
  gap: var(--carousel-gap, var(--spacing-xs));
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-width: 0;
  max-width: min(100%, 24.5rem);
}

#header-profile-menu .studio-carousel .viewport {
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb-bg) var(--scrollbar-track-bg);
  /* Chrome, Edge, Safari */
}
#header-profile-menu .studio-carousel .viewport::-webkit-scrollbar {
  width: var(--scrollbar-width-thin);
  height: var(--scrollbar-width-thin);
}
#header-profile-menu .studio-carousel .viewport::-webkit-scrollbar-track {
  background: var(--scrollbar-track-bg);
}
#header-profile-menu .studio-carousel .viewport::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-bg);
  border-radius: calc(var(--scrollbar-width-thin) / 2);
}
#header-profile-menu .studio-carousel .viewport::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover-bg);
}

#header-profile-menu .studio-carousel .track {
  display: grid;
  gap: var(--carousel-track-gap, var(--spacing-xs));
  grid-auto-columns: minmax(var(--carousel-item-min-width, 7rem), max-content);
  grid-auto-flow: column;
  padding-block: var(--carousel-track-padding-block, 0.1rem 0.2rem);
  grid-auto-columns: minmax(var(--carousel-item-min-width), 1fr);
}

#header-profile-menu .studio-carousel .action {
  appearance: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: inherit;
  font: inherit;
  margin: 0;
  padding: 0;
  text-align: inherit;
  align-items: center;
  background: var(--carousel-action-background, color-mix(in srgb, var(--background-input) 90%, transparent));
  border: var(--carousel-action-border, var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 72%, transparent));
  border-radius: var(--carousel-action-radius, 999px);
  color: var(--carousel-action-color, var(--placeholder-text-color));
  cursor: pointer;
  display: inline-flex;
  height: var(--carousel-action-size, 2.15rem);
  justify-content: center;
  width: var(--carousel-action-size, 2.15rem);
}
#header-profile-menu .studio-carousel .action:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset-small);
  border-radius: var(--carousel-action-radius, 999px);
}
#header-profile-menu .studio-carousel .action:hover {
  background: var(--carousel-action-hover-background, color-mix(in srgb, var(--primary-color) 10%, var(--background-input)));
  color: var(--carousel-action-hover-color, var(--primary-color));
}

#header-profile-menu .studio-option {
  appearance: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: inherit;
  font: inherit;
  margin: 0;
  padding: 0;
  text-align: inherit;
  align-items: center;
  background: var(--carousel-item-background, var(--background-input));
  border: var(--carousel-item-border, var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 76%, transparent));
  border-radius: var(--carousel-item-radius, var(--border-radius-default));
  color: var(--carousel-item-color, var(--text-color));
  cursor: pointer;
  display: grid;
  font-weight: var(--carousel-item-font-weight, 700);
  min-height: var(--carousel-item-min-height, 4rem);
  min-width: var(--carousel-item-min-width, 10rem);
  padding: var(--carousel-item-padding, var(--spacing-sm) var(--spacing-default));
  scroll-snap-align: center;
  text-align: center;
  white-space: normal;
}
#header-profile-menu .studio-option:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset-small);
  border-radius: var(--carousel-item-radius, var(--border-radius-default));
}

#header-profile-menu .studio-option.active,
#header-profile-menu .studio-option[aria-selected=true] {
  background: color-mix(in srgb, var(--primary-color) 12%, var(--background-input));
  border-color: color-mix(in srgb, var(--primary-color) 35%, var(--border-color-default));
  color: var(--primary-color);
}

.collab.session {
  bottom: clamp(1.5rem, 6vh, 4rem);
  left: calc(var(--shell-nav-width, 17.5rem) + clamp(1rem, 3vw, 2.5rem));
  position: fixed;
  z-index: calc(var(--shell-drawer-z-index) - 20);
}

.collab.session.minimized {
  bottom: 1rem;
}

.collab.session.minimized > button {
  flex: 0 0 auto;
  min-height: 3rem;
  min-width: 3rem;
  padding: 0;
  width: 3rem;
  background: var(--collab-menu-background);
  border-color: var(--collab-menu-border);
  box-shadow: var(--shadow-more);
  color: var(--primary-color);
  position: relative;
}

.collab.session.minimized > button span {
  align-items: center;
  background: var(--primary-color);
  border-radius: 999px;
  color: var(--primary-text-color);
  display: inline-flex;
  font-size: 0.7rem;
  height: 1.1rem;
  justify-content: center;
  min-width: 1.1rem;
  position: absolute;
  right: -0.25rem;
  top: -0.25rem;
}

.collab.session > .controls {
  height: var(--collab-menu-size, 12rem);
  position: relative;
  width: var(--collab-menu-size, 12rem);
}

.collab.session > .controls::before {
  background: radial-gradient(circle at center, transparent 0 2.45rem, var(--collab-menu-border) 2.5rem 2.55rem, transparent 2.6rem), conic-gradient(from -90deg, color-mix(in srgb, var(--background-input) 96%, transparent) 0deg 45deg, color-mix(in srgb, var(--background-input) 84%, transparent) 45deg 90deg, color-mix(in srgb, var(--background-input) 96%, transparent) 90deg 135deg, color-mix(in srgb, var(--background-input) 84%, transparent) 135deg 180deg, color-mix(in srgb, var(--background-input) 96%, transparent) 180deg 225deg, color-mix(in srgb, var(--background-input) 84%, transparent) 225deg 270deg, color-mix(in srgb, var(--background-input) 96%, transparent) 270deg 315deg, color-mix(in srgb, var(--background-input) 84%, transparent) 315deg 360deg);
  border: 1px solid var(--collab-menu-border);
  border-radius: 999px;
  box-shadow: var(--shadow-more);
  content: "";
  inset: 1rem;
  position: absolute;
}

.collab.session > .controls > button {
  flex: 0 0 auto;
  min-height: 2.5rem;
  min-width: 2.5rem;
  padding: 0;
  width: 2.5rem;
  background: color-mix(in srgb, var(--background-input) 92%, transparent);
  border-color: color-mix(in srgb, var(--border-color-default) 60%, transparent);
  border-radius: 999px;
  box-shadow: var(--shadow-default);
  color: var(--text-color);
  position: absolute;
  top: 0;
  z-index: 3;
}

.collab.session > .controls > button:first-of-type {
  left: 0;
}

.collab.session > .controls > button:nth-of-type(2) {
  color: var(--danger-color);
  right: 0;
}

.collab.session > .controls > .peers {
  align-items: center;
  background: var(--collab-menu-center-background);
  border: 1px solid color-mix(in srgb, var(--primary-color) 14%, transparent);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffffff 70%, transparent);
  color: var(--primary-color);
  display: flex;
  height: 4rem;
  justify-content: center;
  left: 50%;
  overflow: hidden;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 4rem;
  z-index: 2;
}

.collab.session > .controls > .peers .avatar {
  align-items: center;
  display: inline-flex;
  font-size: 1.85rem;
  justify-content: center;
}

.collab.session > .controls > .peers .avatar:not(:first-child) {
  display: none;
}

.collab.session > .controls > .sessions {
  bottom: -0.25rem;
  left: 50%;
  min-width: min(12rem, 100vw - 2rem);
  position: absolute;
  transform: translateX(-50%);
  z-index: 4;
}

.collab.session > .controls > .sessions select {
  background: var(--background-input);
  border: var(--border-width-default) solid var(--border-color-default);
  border-radius: var(--border-radius-input, var(--border-radius-default));
  color: var(--text-color);
  font-size: 0.85rem;
  min-height: 2rem;
  padding-block: 0.25rem;
}

.collab.session > .controls > .actions {
  inset: 1rem;
  margin: 0;
  position: absolute;
  z-index: 2;
}

.collab.session > .controls > .actions > button {
  flex: 0 0 auto;
  min-height: var(--collab-menu-button-size, 3.25rem);
  min-width: var(--collab-menu-button-size, 3.25rem);
  padding: 0;
  width: var(--collab-menu-button-size, 3.25rem);
  background: transparent;
  border-color: transparent;
  border-radius: 999px;
  color: color-mix(in srgb, var(--text-color) 92%, var(--placeholder-text-color));
  font-size: 1.2rem;
  position: absolute;
  transform: translate(-50%, -50%);
}

.collab.session > .controls > .actions > button:disabled {
  cursor: default;
  opacity: 1;
}

.collab.session > .controls > .actions > button:hover,
.collab.session > .controls > .actions > button:focus-visible,
.collab.session > .controls > .actions > button[aria-pressed=true] {
  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
  color: var(--primary-color);
}

.collab.session > .controls > .actions > button:nth-of-type(1) {
  left: 50%;
  top: 8%;
}

.collab.session > .controls > .actions > button:nth-of-type(2) {
  left: 78%;
  top: 22%;
}

.collab.session > .controls > .actions > button:nth-of-type(3) {
  left: 92%;
  top: 50%;
}

.collab.session > .controls > .actions > button:nth-of-type(4) {
  left: 78%;
  top: 78%;
}

.collab.session > .controls > .actions > button:nth-of-type(5) {
  left: 50%;
  top: 92%;
}

.collab.session > .controls > .actions > button:nth-of-type(6) {
  left: 22%;
  top: 78%;
}

.collab.session > .controls > .actions > button:nth-of-type(7) {
  left: 8%;
  top: 50%;
}

.collab.session > .controls > .actions > button:nth-of-type(8) {
  left: 22%;
  top: 22%;
}

.collab.session > .video.panel,
.collab.session > .chat {
  background: var(--background-panel, var(--background-surface, var(--background-input)));
  border: var(--border-panel, var(--border-surface, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-panel, var(--border-radius-card, var(--border-radius-default)));
  box-shadow: var(--shadow-panel, var(--shadow-card, var(--shadow-default)));
  padding-top: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-bottom: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-start: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-end: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  backdrop-filter: var(--filter-panel, none);
  -webkit-backdrop-filter: var(--filter-panel, none);
  bottom: 0;
  left: calc(var(--collab-menu-size, 12rem) + var(--spacing-default));
  max-height: min(32rem, 100dvh - 2rem);
  min-width: min(24rem, 100vw - 2rem);
  overflow: auto;
  position: absolute;
}

.collab.session > .device.selection[popover] {
  background: var(--background-panel, var(--background-surface, var(--background-input)));
  border: var(--border-panel, var(--border-surface, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-panel, var(--border-radius-card, var(--border-radius-default)));
  box-shadow: var(--shadow-panel, var(--shadow-card, var(--shadow-default)));
  padding-top: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-bottom: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-start: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-end: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  backdrop-filter: var(--filter-panel, none);
  -webkit-backdrop-filter: var(--filter-panel, none);
  border: 1px solid color-mix(in srgb, var(--border-color-default) 55%, transparent);
  inset: auto auto clamp(1.5rem, 6vh, 4rem) calc(var(--shell-nav-width, 17.5rem) + clamp(1rem, 3vw, 2.5rem) + var(--collab-menu-size, 12rem) + var(--spacing-default));
  margin: 0;
  max-height: min(32rem, 100dvh - 2rem);
  min-width: min(24rem, 100vw - 2rem);
  overflow: auto;
  position: fixed;
}

.collab.start.menu {
  align-items: center;
  display: inline-flex;
  gap: var(--spacing-xs);
}

.collab.start.menu .action {
  flex: 0 0 auto;
  min-height: 2.5rem;
  min-width: 2.5rem;
  padding: 0;
  width: 2.5rem;
}

.collab.whiteboard.start.dialog {
  display: grid;
  gap: var(--spacing-default);
}

.collab.whiteboard.start.dialog .fields {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--form-gap, var(--spacing-default));
  min-width: 0;
  align-items: stretch;
}
.collab.whiteboard.start.dialog .fields > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) {
  display: grid;
  gap: var(--gap-feedback-form-field);
  min-height: auto;
  position: relative;
}
.collab.whiteboard.start.dialog .fields > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > :is(input, select, textarea, .input, .rz-datepicker, .rz-dropdown, .rz-numeric),
.collab.whiteboard.start.dialog .fields > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > label,
.collab.whiteboard.start.dialog .fields > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > .field-icon {
  grid-area: 1/1;
  transition: color var(--transition-duration-fast) var(--transition-function-default), opacity var(--transition-duration-fast) var(--transition-function-default), transform var(--transition-duration-fast) var(--transition-function-default);
}
.collab.whiteboard.start.dialog .fields > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > :is(input, select, textarea, .input, .rz-datepicker, .rz-dropdown, .rz-numeric) {
  align-self: stretch;
  min-height: var(--min-height-floating-field);
  min-width: 0;
  width: 100%;
}
.collab.whiteboard.start.dialog .fields > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > :is(input, select, textarea, .input.text:not(.rz-datepicker):not(.rz-dropdown):not(.rz-numeric)) {
  padding-block: var(--padding-block-start-floating-field-control) var(--padding-block-end-floating-field-control);
  padding-inline: var(--padding-inline-floating-field, var(--padding-default));
}
.collab.whiteboard.start.dialog .fields > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > :is(.rz-datepicker, .rz-dropdown, .rz-numeric) {
  padding: 0;
}
.collab.whiteboard.start.dialog .fields > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > :is(.rz-datepicker, .rz-numeric) .rz-inputtext {
  background: transparent;
  border: 0;
  box-shadow: none;
  min-height: var(--min-height-floating-field);
  outline: 0;
  padding-block: var(--padding-block-start-floating-field-control) var(--padding-block-end-floating-field-control);
  padding-inline: var(--padding-inline-floating-field, var(--padding-default));
}
.collab.whiteboard.start.dialog .fields > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > :is(.rz-dropdown, .rz-multiselect) :is(.rz-dropdown-label, .rz-multiselect-label) {
  min-height: var(--min-height-floating-field);
  padding-block: var(--padding-block-start-floating-field-control) var(--padding-block-end-floating-field-control);
  padding-inline: var(--padding-inline-floating-field, var(--padding-default));
}
.collab.whiteboard.start.dialog .fields > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > label {
  align-self: center;
  display: inline-flex;
  gap: var(--gap-floating-label);
  line-height: 1;
  opacity: 1;
  padding-block: 0;
  padding-inline: var(--padding-inline-floating-field, var(--padding-default));
  pointer-events: none;
  transform-origin: left center;
  z-index: 2;
}
.collab.whiteboard.start.dialog .fields > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .field-icon.leading) > :is(input, select, textarea, .input.text:not(.rz-datepicker):not(.rz-dropdown):not(.rz-numeric)) {
  padding-inline-start: calc(var(--padding-inline-floating-field, var(--padding-default)) + var(--space-leading-floating-field));
}
.collab.whiteboard.start.dialog .fields > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .field-icon.trailing) > :is(input, select, textarea, .input.text:not(.rz-datepicker):not(.rz-dropdown):not(.rz-numeric)) {
  padding-inline-end: calc(var(--padding-inline-floating-field, var(--padding-default)) + var(--space-trailing-floating-field));
}
.collab.whiteboard.start.dialog .fields > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .field-icon.leading) > label {
  padding-inline-start: calc(var(--padding-inline-floating-field, var(--padding-default)) + var(--space-leading-floating-field));
}
.collab.whiteboard.start.dialog .fields > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):focus-within > label, .collab.whiteboard.start.dialog .fields > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> input:not(:placeholder-shown)) > label, .collab.whiteboard.start.dialog .fields > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> textarea:not(:placeholder-shown)) > label, .collab.whiteboard.start.dialog .fields > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .input:not(:placeholder-shown)) > label, .collab.whiteboard.start.dialog .fields > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .input.select) > label, .collab.whiteboard.start.dialog .fields > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .rz-datepicker) > label, .collab.whiteboard.start.dialog .fields > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .rz-dropdown) > label, .collab.whiteboard.start.dialog .fields > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .rz-numeric) > label {
  color: var(--color-floating-label, var(--primary-color));
  opacity: var(--opacity-floating-label);
  transform: translate(var(--translate-x-floating-label), var(--translate-y-floating-label)) scale(var(--scale-floating-label));
}
.collab.whiteboard.start.dialog .fields > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .field-icon.leading):focus-within > .field-icon.leading, .collab.whiteboard.start.dialog .fields > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .field-icon.leading):has(> input:not(:placeholder-shown)) > .field-icon.leading, .collab.whiteboard.start.dialog .fields > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .field-icon.leading):has(> textarea:not(:placeholder-shown)) > .field-icon.leading, .collab.whiteboard.start.dialog .fields > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .field-icon.leading):has(> .input:not(:placeholder-shown)) > .field-icon.leading, .collab.whiteboard.start.dialog .fields > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .field-icon.leading):has(> .input.select) > .field-icon.leading, .collab.whiteboard.start.dialog .fields > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .field-icon.leading):has(> .rz-datepicker) > .field-icon.leading, .collab.whiteboard.start.dialog .fields > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .field-icon.leading):has(> .rz-dropdown) > .field-icon.leading, .collab.whiteboard.start.dialog .fields > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .field-icon.leading):has(> .rz-numeric) > .field-icon.leading {
  opacity: var(--opacity-active-floating-field-icon);
  transform: translateY(var(--translate-y-active-floating-field-icon)) scale(var(--scale-active-floating-field-icon));
}
.collab.whiteboard.start.dialog .fields > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > .field-icon {
  align-self: center;
  color: var(--color-floating-field-icon, var(--placeholder-text-color));
  display: inline-flex;
  justify-content: center;
  pointer-events: none;
  position: relative;
  z-index: 2;
}
.collab.whiteboard.start.dialog .fields > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > .field-icon.leading {
  justify-self: start;
  margin-inline-start: var(--padding-inline-floating-field, var(--padding-default));
}
.collab.whiteboard.start.dialog .fields > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > .field-icon.trailing {
  justify-self: end;
  margin-inline-end: var(--padding-inline-floating-field, var(--padding-default));
}
.collab.whiteboard.start.dialog .fields > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > .field-icon.status {
  color: var(--color-invalid-floating-field, var(--danger-color));
  opacity: 0;
}
.collab.whiteboard.start.dialog .fields > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> :is(input, .input).invalid) > .field-icon.status {
  opacity: 1;
}
.collab.whiteboard.start.dialog .fields > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > .field-icon.action {
  appearance: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: inherit;
  font: inherit;
  margin: 0;
  padding: 0;
  text-align: inherit;
  align-items: center;
  border-radius: var(--border-radius-small);
  color: var(--color-action-floating-field-icon, var(--placeholder-text-color));
  cursor: pointer;
  height: var(--size-action-floating-field-icon);
  pointer-events: auto;
  width: var(--size-action-floating-field-icon);
}
.collab.whiteboard.start.dialog .fields > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > .field-icon.action:hover,
.collab.whiteboard.start.dialog .fields > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > .field-icon.action:focus-visible {
  color: var(--color-action-hover-floating-field-icon, var(--primary-color));
}
.collab.whiteboard.start.dialog .fields > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > :is(input, .input).invalid:not([type=checkbox]):not([type=radio]) {
  border-color: color-mix(in srgb, var(--color-invalid-floating-field, var(--danger-color)) 70%, var(--border-color-default));
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-invalid-floating-field, var(--danger-color)) 14%, transparent);
}
.collab.whiteboard.start.dialog .fields > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> :is(input, .input).invalid:not([type=checkbox]):not([type=radio])) > label {
  color: var(--color-invalid-floating-field, var(--danger-color));
}
.collab.whiteboard.start.dialog .fields > .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > .validation-message {
  grid-column: 1/-1;
}
.collab.whiteboard.start.dialog .fields > .form-field.checkbox,
.collab.whiteboard.start.dialog .fields > .form-field.checkbox-field {
  align-items: flex-start;
  display: grid;
  gap: var(--gap-checkbox-field);
  grid-template-columns: auto minmax(0, 1fr);
  min-height: auto;
  text-align: left;
}
.collab.whiteboard.start.dialog .fields > .form-field.checkbox > input,
.collab.whiteboard.start.dialog .fields > .form-field.checkbox > label,
.collab.whiteboard.start.dialog .fields > .form-field.checkbox-field > input,
.collab.whiteboard.start.dialog .fields > .form-field.checkbox-field > label {
  left: auto;
  padding: 0;
  position: static;
  right: auto;
  transition: none;
}
.collab.whiteboard.start.dialog .fields > .form-field.checkbox > input[type=checkbox],
.collab.whiteboard.start.dialog .fields > .form-field.checkbox-field > input[type=checkbox] {
  margin: var(--margin-checkbox-input);
}
.collab.whiteboard.start.dialog .fields > .form-field.checkbox > label,
.collab.whiteboard.start.dialog .fields > .form-field.checkbox-field > label {
  line-height: var(--line-height-default);
  opacity: 1;
  z-index: auto;
}
.collab.whiteboard.start.dialog .fields > .form-field.checkbox > .validation-message,
.collab.whiteboard.start.dialog .fields > .form-field.checkbox-field > .validation-message {
  grid-column: 1/-1;
}

.collab.whiteboard.start.dialog .actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: flex-end;
}

.collab.whiteboard.start.dialog .actions .action {
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
}
.collab.whiteboard.start.dialog .actions .action:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.collab.whiteboard.start.dialog .actions .action:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.collab.whiteboard.start.dialog .actions .action:disabled, .collab.whiteboard.start.dialog .actions .action[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}

.document.editor,
.document.viewer {
  display: grid;
  gap: var(--spacing-default);
  padding: var(--spacing-default);
}

.document.editor > header,
.document.viewer > header {
  align-items: center;
  display: flex;
  gap: var(--spacing-default);
  justify-content: space-between;
}

.document.editor > header .actions {
  display: flex;
  gap: var(--spacing-sm);
}

.document.editor > header .save.action {
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
}
.document.editor > header .save.action:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.document.editor > header .save.action:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.document.editor > header .save.action:disabled, .document.editor > header .save.action[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}

.document.viewer figure {
  align-items: center;
  display: flex;
  justify-content: center;
  margin: 0;
  min-height: 60vh;
}

.document.viewer img {
  max-height: 80vh;
  max-width: 100%;
  object-fit: contain;
}

.device.options {
  display: grid;
  gap: var(--spacing-default);
}

.device.options > .header {
  align-items: flex-start;
  display: flex;
  gap: var(--spacing-sm);
  justify-content: space-between;
  min-width: 0;
}

.device.options > .header .title,
.device.options > .header .description,
.device.options .hint {
  margin: 0;
}

.device.options > .header .description,
.device.options .hint {
  color: var(--placeholder-text-color);
  font-size: var(--font-size-small);
}

.device.options > .header button {
  flex: 0 0 auto;
  min-height: 2.4rem;
  min-width: 2.4rem;
  padding: 0;
  width: 2.4rem;
}

.device.options .status {
  --background-status: color-mix(in srgb, var(--primary-color) 5%, transparent);
  --border-status: var(--border-width-default) solid color-mix(in srgb, var(--primary-color) 20%, var(--border-color-default));
  background: var(--background-status, var(--background-panel, var(--background-input)));
  border: var(--border-status, var(--border-panel, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-status, var(--border-radius-default));
  box-shadow: var(--shadow-status, none);
  padding-top: var(--padding-status, var(--spacing-default));
  padding-bottom: var(--padding-status, var(--spacing-default));
  padding-inline-start: var(--padding-status, var(--spacing-default));
  padding-inline-end: var(--padding-status, var(--spacing-default));
  align-items: center;
  display: flex;
  gap: var(--spacing-sm);
}

.device.options .status.warning {
  --background-status: color-mix(in srgb, var(--warning-color) 5%, transparent);
  --border-status: var(--border-width-default) solid color-mix(in srgb, var(--warning-color) 20%, var(--border-color-default));
  background: var(--background-status, var(--background-panel, var(--background-input)));
  border: var(--border-status, var(--border-panel, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-status, var(--border-radius-default));
  box-shadow: var(--shadow-status, none);
  padding-top: var(--padding-status, var(--spacing-default));
  padding-bottom: var(--padding-status, var(--spacing-default));
  padding-inline-start: var(--padding-status, var(--spacing-default));
  padding-inline-end: var(--padding-status, var(--spacing-default));
}

.device.options .device.group {
  border: 0;
  display: grid;
  gap: 0.35rem;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.device.options legend {
  color: var(--placeholder-text-color);
  float: none;
  font-size: var(--font-size-small);
  font-weight: 700;
  margin: 0;
}

.device.options select {
  appearance: none;
  background-image: var(--select-arrow, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E"));
  background-repeat: no-repeat;
  background-position: right var(--padding-default) center;
  padding-right: calc(var(--padding-default) * 2.5);
  font-size: var(--font-size-default);
  border: var(--border-width-input, var(--border-width-default)) solid var(--border-color-input, var(--border-color-default));
  background-color: var(--background-input, var(--background-default));
  color: var(--color-input, var(--text-color));
  min-height: var(--input-min-height, 2.75rem);
  min-width: 0;
  width: var(--input-width, 100%);
  padding-top: var(--padding-input-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-input-block, calc(var(--padding-default) / 2));
  padding-inline-start: var(--padding-input-inline, var(--padding-default));
  padding-inline-end: var(--padding-input-inline, var(--padding-default));
  border-radius: var(--border-radius-input, var(--border-radius-default));
  box-shadow: var(--shadow-input, none);
  transition: border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
  width: 100%;
}
.device.options select:focus {
  outline: none;
  border-color: var(--focus-border-color, var(--primary-color));
  box-shadow: var(--shadow-input-focus, var(--shadow-default));
}
.device.options select:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-input, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 2px);
  border-radius: var(--border-radius-input, var(--border-radius-default));
}

.wizard-dialog {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.wizard-dialog .rz-dialog {
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
  padding: 0;
  width: min(var(--wizard-dialog-max-width, 76rem), 100vw - 2rem) !important;
}

.wizard-dialog .rz-dialog-content {
  padding: 0;
}

.wizard-shell {
  color: var(--text-color);
}

.wizard.content {
  --border-color-card: var(--border-color-wizard);
  --border-radius-card: var(--border-radius-wizard);
  --margin-card: 0;
  --padding-card: var(--padding-wizard);
  --shadow-card: var(--shadow-wizard);
  --shadow-card-responsive: var(--shadow-wizard);
  background: var(--background-wizard);
  display: grid;
  gap: var(--spacing-xl);
}
@media (min-width: 0px) {
  .wizard.content {
    background: var(--background-card, var(--background-default));
    color: var(--color-card, var(--text-color));
    border-radius: var(--border-radius-card, var(--border-radius-default));
    padding-top: var(--padding-card, var(--padding-default));
    padding-bottom: var(--padding-card, var(--padding-default));
    padding-inline-start: var(--padding-card, var(--padding-default));
    padding-inline-end: var(--padding-card, var(--padding-default));
    margin-top: var(--margin-card, var(--margin-default));
    margin-bottom: var(--margin-card, var(--margin-default));
    margin-inline-start: var(--margin-card, var(--margin-default));
    margin-inline-end: var(--margin-card, var(--margin-default));
    border: var(--border-width-card, var(--border-width-default)) solid var(--border-color-card, var(--border-color-default));
    transition: all var(--transition-duration-default) var(--transition-function-default);
    box-shadow: var(--shadow-card, var(--shadow-default));
  }
}
@media (min-width: 0px) and (prefers-reduced-motion: reduce) {
  .wizard.content {
    transition: none !important;
  }
}
@media (min-width: 576px) {
  .wizard.content {
    box-shadow: var(--shadow-card-responsive, var(--shadow-more));
  }
}

.wizard-shell .rz-steps {
  display: grid;
  gap: var(--spacing-xl);
}

.wizard-shell .rz-steps > ul,
.wizard-shell .rz-steps-list,
.wizard-shell .rz-steps-header {
  align-items: center;
  display: grid;
  gap: var(--spacing-default);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.wizard-shell .rz-steps-item {
  color: var(--wizard-dialog-step-color);
  font-size: 1.05rem;
  font-weight: 700;
  min-width: 0;
  position: relative;
}

.wizard-shell .rz-steps-item:not(:last-child)::after {
  background: color-mix(in srgb, var(--border-color-default) 70%, transparent);
  content: "";
  height: 2px;
  left: calc(50% + 2.5rem);
  position: absolute;
  right: calc(-50% + 2.5rem);
  top: 1.5rem;
}

.wizard-shell .rz-menuitem-link {
  align-items: center;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: inherit !important;
  display: inline-flex;
  gap: var(--spacing-sm);
  min-height: auto;
  outline: none !important;
  padding: 0;
  position: relative;
  text-decoration: none;
  z-index: 1;
}

.wizard-shell .rz-menuitem-link:focus-visible .rz-steps-number {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 16%, transparent), var(--shadow-default);
}

.wizard-shell .rz-steps-item.rz-steps-current,
.wizard-shell .rz-steps-item.rz-state-highlight {
  color: var(--primary-color);
}

.wizard-shell .rz-steps-item.rz-steps-current:not(:last-child)::after,
.wizard-shell .rz-steps-item.rz-state-highlight:not(:last-child)::after {
  background: linear-gradient(90deg, var(--primary-color), color-mix(in srgb, var(--primary-color) 22%, transparent));
}

.wizard-shell .rz-steps-number,
.wizard-shell .rz-steps-index {
  align-items: center;
  background: var(--background-input);
  border-radius: 999px;
  box-shadow: var(--shadow-default);
  color: inherit;
  display: inline-flex;
  font-size: 1.05rem;
  font-weight: 800;
  height: 3rem;
  justify-content: center;
  position: relative;
  width: 3rem;
  z-index: 1;
}

.wizard-shell .rz-steps-current .rz-steps-number,
.wizard-shell .rz-state-highlight .rz-steps-number,
.wizard-shell .rz-steps-current .rz-steps-index,
.wizard-shell .rz-state-highlight .rz-steps-index {
  background: linear-gradient(135deg, var(--primary-color), #ee5b92);
  color: #ffffff;
}

.wizard-shell .rz-steps-title {
  position: relative;
  z-index: 1;
}

.wizard-panel {
  display: grid;
  gap: var(--spacing-lg);
  min-height: 22rem;
  padding-block: var(--spacing-lg);
}

.wizard-panel .logo-container {
  justify-self: start;
}

.wizard-title-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-default);
}

.wizard-logo {
  border-radius: 1rem;
  box-shadow: var(--shadow-default);
  height: 4.5rem;
  width: 4.5rem;
}

.wizard-panel .title {
  font-size: 2.65rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.08;
  margin: 0;
}

.wizard-panel .content,
.wizard-usage-text {
  color: var(--placeholder-text-color);
  font-size: 1.25rem;
  line-height: 1.45;
  margin: 0;
  max-width: 36rem;
}

.wizard-shell .rz-steps-buttons,
.wizard-shell .rz-steps-actions {
  align-items: center;
  border-bottom: 1px solid color-mix(in srgb, var(--border-color-default) 80%, transparent);
  display: flex;
  gap: var(--spacing-default);
  justify-content: space-between;
  padding-bottom: var(--spacing-lg);
}

.wizard-shell .rz-steps-button,
.wizard-shell .rz-steps-prev,
.wizard-shell .rz-steps-next,
.wizard-shell .rz-button,
.save.action.wizard {
  border-radius: var(--border-radius-default);
  font-size: 1.15rem;
  font-weight: 700;
  min-height: 3.5rem;
  min-width: min(15rem, 42vw);
}

.wizard-shell .rz-steps-prev .rzi,
.wizard-shell .rz-steps-next .rzi {
  display: none;
}

.wizard-shell .rz-steps-next,
.save.action.wizard {
  background: linear-gradient(135deg, var(--primary-color), #7b4ef2) !important;
  border-color: transparent !important;
  box-shadow: var(--shadow-default);
  color: #ffffff !important;
}

.wizard-shell .rz-steps-next::after {
  content: ">";
  font-size: 1.4rem;
  line-height: 0;
  margin-inline-start: var(--spacing-sm);
}

.wizard-shell .rz-steps-prev {
  background: var(--background-input) !important;
  border-color: color-mix(in srgb, var(--border-color-default) 80%, transparent) !important;
  box-shadow: var(--shadow-default);
  color: var(--placeholder-text-color) !important;
}

.wizard-shell .rz-steps-prev::before {
  content: "<";
  font-size: 1.4rem;
  line-height: 0;
  margin-inline-end: var(--spacing-sm);
}

.wizard-secondary-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-default);
}

.wizard-secondary-actions :is(.defer.action, .dismiss.action) {
  background: var(--background-input);
  border-color: color-mix(in srgb, var(--border-color-default) 80%, transparent);
  box-shadow: var(--shadow-default);
  color: var(--placeholder-text-color);
  min-height: 3rem;
}

.wizard-secondary-actions :is(.defer.action, .dismiss.action) i {
  color: color-mix(in srgb, #2ec6b8 86%, var(--primary-color));
}

.wizard-options {
  display: grid;
  gap: var(--spacing-default);
  max-width: 44rem;
}

.wizard-option {
  background: var(--background-panel, var(--background-surface, var(--background-input)));
  border: var(--border-panel, var(--border-surface, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-panel, var(--border-radius-card, var(--border-radius-default)));
  box-shadow: var(--shadow-panel, var(--shadow-card, var(--shadow-default)));
  padding-top: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-bottom: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-start: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-end: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  backdrop-filter: var(--filter-panel, none);
  -webkit-backdrop-filter: var(--filter-panel, none);
  align-items: center;
  grid-template-columns: auto minmax(0, 1fr);
  margin: 0;
}

@media (max-width: 900px) {
  .collab.session {
    bottom: 1rem;
    left: 1rem;
  }
  .collab.session > .device.selection[popover] {
    inset: auto auto 1rem calc(1rem + var(--collab-menu-size, 12rem) + var(--spacing-default));
  }
  .wizard.content {
    border-radius: 1.25rem;
  }
  .wizard-shell .rz-steps > ul,
  .wizard-shell .rz-steps-list,
  .wizard-shell .rz-steps-header {
    grid-template-columns: 1fr;
  }
  .wizard-shell .rz-steps-item:not(.rz-steps-current):not(.rz-state-highlight) {
    display: none;
  }
  .wizard-shell .rz-steps-item::after {
    display: none;
  }
  .wizard-panel {
    min-height: 18rem;
  }
  .wizard-panel .title {
    font-size: 2.15rem;
  }
  .wizard-panel .content,
  .wizard-usage-text {
    font-size: 1.1rem;
  }
}
.collab.sessions.page {
  display: grid;
  gap: var(--spacing-md);
  margin: 0 auto;
  max-width: 56rem;
  padding: var(--spacing-lg);
}
.collab.sessions.page .session.group {
  display: grid;
  gap: var(--spacing-sm);
}
.collab.sessions.page .sessions.list {
  display: grid;
  gap: var(--spacing-xs);
}
.collab.sessions.page .session.item {
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--outline) 40%, transparent);
  border-radius: var(--border-radius-small);
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-sm);
}
.collab.sessions.page .session.item > div {
  display: grid;
  gap: var(--spacing-2xs, 0.25rem);
  min-width: 0;
}
.collab.sessions.page .session.item small,
.collab.sessions.page .state.empty {
  color: var(--text-secondary);
}

@media (max-width: 520px) {
  .collab.session > .controls {
    --collab-menu-size: 10.5rem;
    --collab-menu-button-size: 2.75rem;
  }
  .collab.session > .device.selection[popover] {
    inset-inline: 1rem auto;
    inset-block-end: calc(1rem + var(--collab-menu-size, 10.5rem) + var(--spacing-sm));
    min-width: calc(100vw - 2rem);
  }
  .wizard-shell .rz-steps-buttons,
  .wizard-shell .rz-steps-actions,
  .wizard-secondary-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .wizard-shell .rz-steps-button,
  .wizard-shell .rz-button,
  .save.action.wizard,
  .wizard-secondary-actions :is(.defer.action, .dismiss.action) {
    width: 100%;
  }
}
.breadcrumbs {
  --bs-breadcrumb-margin-bottom: 0;
  --bs-breadcrumb-font-size: 0.8em;
}

.breadcrumbs .breadcrumb.item + .breadcrumb.item::before {
  align-items: center;
  color: var(--breadcrumb-divider-color, var(--bs-breadcrumb-divider-color, #123358));
  content: "»";
  display: inline-flex;
  float: none;
  font-size: 0.9em;
  line-height: 1;
  padding: 0 0.55rem 0 0.35rem;
}

.avatar-group {
  display: flex;
  flex-direction: row-reverse;
}

.avatar-group .avatar {
  margin-left: -10px !important;
}

.avatar {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
  width: var(--avatar-size, var(--icon-size));
  height: var(--avatar-size, var(--icon-size));
  background: var(--background-avatar, var(--primary-background-color));
  border: var(--border-avatar, var(--border-width-default) solid var(--background-input));
  color: var(--color-avatar, var(--primary-color));
  overflow: hidden;
  border-radius: 1000px;
  position: relative;
}

.bottom.menu {
  background: var(--secondary-color);
}

.bottom.menu .navigation {
  font-size: 12px;
  text-align: center;
}

.bottom.menu .item {
  text-align: center;
}

.bottom.menu .link,
.bottom.menu .icon {
  color: var(--light-color);
}

.bottom.menu .link.primary {
  background: color-mix(in srgb, var(--primary-color) 15%, transparent);
}

.bottom.menu .toggle {
  font-size: 12px;
}

.bottom.menu .drawer.toggle.action {
  flex: 0 0 auto;
  min-height: 2.25rem;
  min-width: 2.25rem;
  padding: 0;
  width: 2.25rem;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--secondary-color);
  color: var(--light-color);
}
.bottom.menu .drawer.toggle.action:hover:not(:disabled, [aria-disabled=true]) {
  background: color-mix(in srgb, var(--secondary-color) 10%, transparent);
  box-shadow: none;
}

.bottom.menu .drawer {
  background: var(--secondary-color);
  font-size: 12px;
  height: 8em !important;
}

.bottom.menu .drawer[hidden],
.menu[hidden] {
  display: none !important;
}

.breadcrumbs .breadcrumb.item {
  align-items: center;
  display: inline-flex;
  gap: 0.75rem;
  position: relative;
}

.breadcrumb-action-menu {
  background: var(--background-menu, var(--background-panel, var(--background-input)));
  border: var(--border-menu, var(--border-panel, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-menu, var(--border-radius-panel, var(--border-radius-default)));
  box-shadow: var(--shadow-menu, var(--shadow-popover));
  padding-top: var(--padding-menu, var(--spacing-xs));
  padding-bottom: var(--padding-menu, var(--spacing-xs));
  padding-inline-start: var(--padding-menu, var(--spacing-xs));
  padding-inline-end: var(--padding-menu, var(--spacing-xs));
  display: flex;
  flex-direction: column;
  gap: var(--gap-menu, var(--spacing-xs));
  list-style: none;
  margin: var(--margin-menu);
  min-width: var(--min-width-menu);
  position: absolute;
  right: 0;
  top: 100%;
  z-index: var(--z-index-menu);
  color: var(--text-color);
}
.breadcrumb-action-menu > li {
  min-width: 0;
}
.breadcrumb-action-menu > :is(button, .menu-item),
.breadcrumb-action-menu > li > :is(button, .menu-item) {
  appearance: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: inherit;
  font: inherit;
  margin: 0;
  padding: 0;
  text-align: inherit;
}
.breadcrumb-action-menu > :is(a, button, .menu-item, .breadcrumb-menu-link),
.breadcrumb-action-menu > li > :is(a, button, .menu-item, .breadcrumb-menu-link) {
  align-items: center;
  color: inherit;
  display: flex;
  gap: var(--gap-menu-item, var(--spacing-sm));
  min-height: var(--min-height-menu-item, var(--button-min-height));
  padding: var(--padding-block-menu-item, var(--spacing-sm)) var(--padding-inline-menu-item, var(--spacing-sm));
  text-decoration: none;
  width: 100%;
}
.breadcrumb-action-menu > :is(a, button, .menu-item, .breadcrumb-menu-link):focus-visible,
.breadcrumb-action-menu > li > :is(a, button, .menu-item, .breadcrumb-menu-link):focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color, var(--primary-color));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--focus-radius, var(--border-radius-default));
}

#dashboard-menu > .selector {
  display: grid;
  gap: var(--spacing-xs);
  min-width: min(24rem, 100vw - var(--spacing-lg));
}

#dashboard-menu .option {
  align-items: center;
  display: grid;
  gap: var(--spacing-xs);
  grid-template-columns: minmax(0, 1fr) auto auto;
  min-width: 0;
}

#dashboard-menu .select.action {
  align-items: center;
  display: inline-flex;
  gap: var(--spacing-xs);
  justify-content: space-between;
  min-width: 0;
  width: 100%;
}

#dashboard-menu .select.action > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#dashboard-menu .option .edit.action,
#dashboard-menu .option .delete.action {
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
  flex: 0 0 auto;
  min-height: 2rem;
  min-width: 2rem;
  padding: 0;
  width: 2rem;
}
#dashboard-menu .option .edit.action:focus-visible,
#dashboard-menu .option .delete.action:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
#dashboard-menu .option .edit.action:hover:not(:disabled, [aria-disabled=true]),
#dashboard-menu .option .delete.action:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
#dashboard-menu .option .edit.action:disabled, #dashboard-menu .option .edit.action[aria-disabled=true],
#dashboard-menu .option .delete.action:disabled,
#dashboard-menu .option .delete.action[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}

#dashboard-menu .actions {
  border-top: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 64%, transparent);
  margin-top: var(--spacing-xs);
  padding-top: var(--spacing-xs);
}

#dashboard-menu .actions .menu-item {
  align-items: center;
  display: flex;
  gap: var(--spacing-xs);
  width: 100%;
}

.breadcrumb-action-menu .menu-item {
  text-align: left;
}

.breadcrumb-action-menu .menu-item:hover,
.breadcrumb-menu-link:hover,
.breadcrumb-menu-link.active,
.breadcrumb-menu-link[aria-current=page] {
  background: var(--breadcrumb-menu-link-active-background);
  color: inherit;
  text-decoration: none;
}

.breadcrumb-menu-row {
  align-items: center;
  display: grid;
  gap: 0.25rem;
  grid-template-columns: minmax(0, 1fr) auto;
}

.breadcrumb-menu-main {
  min-width: 0;
}

.breadcrumb-menu-main span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.breadcrumb-menu-check {
  margin-left: auto;
}

.breadcrumb-menu-icon {
  min-height: 2rem;
  min-width: 2rem;
}

#dashboard-menu .state.empty {
  color: var(--placeholder-text-color);
  padding: 0.45rem 0.55rem;
  white-space: nowrap;
}

.studio.selector {
  display: grid;
  gap: 0.35rem;
  max-width: min(100%, 24rem);
  min-width: 14rem;
}

.studio.selector label {
  color: var(--placeholder-text-color);
  font-size: 0.75rem;
  font-weight: 600;
}

.studio.selector select {
  background: color-mix(in srgb, var(--background-input) 94%, transparent);
  border-color: color-mix(in srgb, var(--border-color-default) 70%, transparent);
  border-radius: 999px;
  min-height: 2.35rem;
  padding-inline: 0.75rem;
  width: 100%;
}

.studio-scope-summary {
  align-items: center;
  color: var(--placeholder-text-color);
  display: flex;
  font-size: 0.8rem;
  gap: 0.5rem;
  justify-content: space-between;
  min-width: 0;
}

.studio-scope-summary span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .studio.selector {
    min-width: 0;
    width: 100%;
  }
}
.studio.selector select:focus-visible,
.composer .menu .emoji:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 3px;
  border-radius: 0.375rem;
}

.app-shell {
  display: grid;
  grid-template-columns: var(--shell-nav-width) minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  min-height: 100dvh;
}

.app-shell > #header {
  grid-column: 1/-1;
  grid-row: 1;
}

.app-shell > .accountmessage {
  align-items: center;
  display: flex;
  gap: var(--spacing-sm);
  grid-column: 1/-1;
  grid-row: 2;
  justify-content: center;
  margin: 0 var(--shell-header-margin) var(--spacing-xs);
}

.app-shell > .navigation {
  grid-column: 1;
  grid-row: 3/5;
}

.app-shell > .layout.main {
  grid-column: 2;
  grid-row: 3;
}

.app-shell > .footer {
  grid-column: 2;
  grid-row: 4;
}

.accountmessage-action {
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--secondary-text-color);
  font-size: var(--button-small-font-size, var(--font-size-small));
  min-height: var(--button-small-min-height, 2rem);
  padding-inline-start: var(--button-small-padding-inline, var(--spacing-sm));
  padding-inline-end: var(--button-small-padding-inline, var(--spacing-sm));
  padding-top: var(--button-small-padding-block, var(--spacing-xs));
  padding-bottom: var(--button-small-padding-block, var(--spacing-xs));
}
.accountmessage-action:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.accountmessage-action:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.accountmessage-action:disabled, .accountmessage-action[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}

#header, #header * {
  transition: all var(--transition-duration-fast) var(--transition-function-default);
}

#header {
  background: var(--shell-header-background);
  color: var(--shell-header-color);
  display: flow-root;
  position: sticky;
  top: 0;
  width: auto;
  z-index: var(--shell-header-z-index);
}

#headerInner {
  align-items: center;
  background: var(--shell-header-inner-background);
  border: var(--border-width-default) solid color-mix(in srgb, #ffffff 24%, transparent);
  border-radius: var(--shell-header-radius);
  box-shadow: var(--shell-header-shadow);
  display: grid;
  gap: var(--spacing-default);
  grid-template-columns: minmax(0, 1fr) auto;
  height: var(--shell-header-height) !important;
  margin: var(--shell-header-margin);
  min-width: 0;
  overflow: visible;
  padding: 0 var(--shell-content-padding);
  position: relative;
  z-index: 3;
}

#header .header-popovers {
  display: contents;
}

#header .actions {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--spacing-sm);
  min-width: 0;
}

#header .user-actions {
  justify-content: flex-end;
}

#header .actions button:not(#profileButton) {
  appearance: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: inherit;
  font: inherit;
  margin: 0;
  padding: 0;
  text-align: inherit;
  align-items: center;
  background: transparent;
  border-radius: var(--border-radius-button);
  color: var(--shell-header-color);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 var(--shell-header-action-size);
  font-size: 1rem;
  height: var(--shell-header-action-size);
  justify-content: center;
  min-height: var(--shell-header-action-size);
  min-width: var(--shell-header-action-size);
  width: var(--shell-header-action-size);
}
#header .actions button:not(#profileButton):focus-visible {
  outline: var(--focus-width) solid color-mix(in srgb, #ffffff 82%, transparent);
  outline-offset: var(--focus-offset);
  border-radius: var(--border-radius-button);
}

#header .actions button:hover,
#profileButton:hover {
  background: color-mix(in srgb, #ffffff 12%, transparent);
  color: var(--shell-header-color);
}

#profileButton {
  appearance: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: inherit;
  font: inherit;
  margin: 0;
  padding: 0;
  text-align: inherit;
  align-items: center;
  aspect-ratio: 1;
  border-radius: 999px;
  color: var(--shell-header-color);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
}

#header .breadcrumbs.slot {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

#header .breadcrumbs.slot .breadcrumbs {
  align-items: center;
  display: flex;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#header .breadcrumbs.slot .breadcrumb.item {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#header .breadcrumbs.slot .breadcrumb.item :is(a, button, span) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#header .user-info {
  flex: 0 1 auto;
  margin-left: auto;
  max-width: min(32vw, 18rem);
  min-width: 0;
  text-align: right;
}

#header .username,
#header .studio {
  color: var(--shell-header-color);
  overflow: hidden;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#header .username {
  font-weight: 700;
}

#header .studio {
  font-size: var(--font-size-small);
  opacity: 0.82;
}

#header .header-drawer {
  background: transparent;
  color: var(--shell-header-color);
  display: grid;
  grid-template-rows: 1fr;
  margin: calc((var(--shell-header-margin) + 0.2rem) * -1) var(--shell-header-margin) 0;
  opacity: 1;
  overflow: hidden;
  padding: 0.75rem 0 0 0;
  transform: translateY(0);
}

#nameRow {
  align-items: center;
  display: flex;
  gap: var(--spacing-default);
  justify-content: space-between;
  min-height: var(--shell-header-action-size);
  min-width: 0;
  overflow: hidden;
}

#header.shrink #headerInner {
  height: var(--shell-header-compact-height) !important;
  margin-block: var(--shell-header-compact-margin);
}

#header.shrink .header-drawer {
  grid-template-rows: 0fr;
  height: 0;
  margin-block: 0;
  opacity: 0;
  padding-block: 0;
  pointer-events: none;
  transform: translateY(-1.75rem);
}

#header.shrink #nameRow,
#header.shrink .breadcrumbs.slot,
#header.shrink .accountmessage,
#header.shrink .user-info {
  height: 0;
  margin-block: 0;
  min-height: 0;
  overflow: hidden;
  padding-block: 0;
}

#header.shrink .avatar {
  height: 32px !important;
  width: 32px !important;
}

@media (max-width: 720px) {
  #header .breadcrumbs.slot .breadcrumbs {
    gap: var(--spacing-xs);
  }
  #header .breadcrumbs.slot .breadcrumb.item:first-child:not(:only-child) {
    display: none;
  }
  #header .breadcrumbs.slot .breadcrumb.item:last-child {
    flex: 1 1 auto;
  }
  #header .user-info {
    max-width: min(34vw, 9rem);
  }
}
.app-shell > .navigation {
  background: var(--background-panel, var(--background-surface, var(--background-input)));
  border: var(--border-panel, var(--border-surface, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-panel, var(--border-radius-card, var(--border-radius-default)));
  box-shadow: var(--shadow-panel, var(--shadow-card, var(--shadow-default)));
  padding-top: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-bottom: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-start: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-end: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  backdrop-filter: var(--filter-panel, none);
  -webkit-backdrop-filter: var(--filter-panel, none);
  align-self: stretch;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.navigation-header {
  align-items: center;
  display: flex;
  gap: var(--spacing-sm);
  justify-content: space-between;
  padding: var(--spacing-default);
}

.navigation .brand {
  align-items: center;
  color: var(--text-color);
  display: inline-flex;
  font-weight: 700;
  gap: var(--spacing-sm);
  min-width: 0;
  text-decoration: none;
}

.navigation .brand .logo {
  border-radius: var(--border-radius-small);
  flex: 0 0 auto;
}

.navigation .brand-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#navigationClose {
  appearance: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: inherit;
  font: inherit;
  margin: 0;
  padding: 0;
  text-align: inherit;
  align-items: center;
  border-radius: var(--border-radius-button);
  cursor: pointer;
  display: none;
  height: var(--shell-navigation-close-size);
  justify-content: center;
  min-height: var(--shell-navigation-close-size);
  min-width: var(--shell-navigation-close-size);
  width: var(--shell-navigation-close-size);
}
#navigationClose:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color, var(--primary-color));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--focus-radius, var(--border-radius-default));
}

#navigationClose:hover {
  background: var(--background-hover);
}

#mainMenu.content {
  min-width: 0;
  overflow: auto;
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb-bg) var(--scrollbar-track-bg);
  /* Chrome, Edge, Safari */
  display: grid;
  gap: var(--spacing-default);
  padding: 0 var(--spacing-default) var(--spacing-default);
}
#mainMenu.content::-webkit-scrollbar {
  width: var(--scrollbar-width-thin);
  height: var(--scrollbar-width-thin);
}
#mainMenu.content::-webkit-scrollbar-track {
  background: var(--scrollbar-track-bg);
}
#mainMenu.content::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-bg);
  border-radius: calc(var(--scrollbar-width-thin) / 2);
}
#mainMenu.content::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover-bg);
}

#mainMenu .menu-group {
  display: grid;
  gap: var(--spacing-xs);
}

#mainMenu h2 {
  color: var(--placeholder-text-color);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  margin: 0;
  padding: var(--spacing-xs) var(--spacing-sm);
  text-transform: uppercase;
}

#mainMenu ul {
  display: grid;
  gap: 0.15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

#mainMenu ul.actions {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-xs);
}

#mainMenu ul.actions > li {
  min-width: 0;
}

#mainMenu a,
#mainMenu .action-link {
  appearance: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: inherit;
  font: inherit;
  margin: 0;
  padding: 0;
  text-align: inherit;
  align-items: center;
  border-radius: var(--border-radius-default);
  color: var(--text-color);
  cursor: pointer;
  display: flex;
  gap: var(--spacing-sm);
  min-height: 2.5rem;
  padding: 0.55rem 0.7rem;
  text-align: left;
  text-decoration: none;
  width: 100%;
}

#mainMenu ul.actions .action-link {
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--primary-color) 18%, transparent);
  justify-content: center;
  min-height: 2.75rem;
  padding: 0;
}

#mainMenu ul.actions .action-link span {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

#mainMenu a:hover,
#mainMenu a.active,
#mainMenu a[aria-current=page],
#mainMenu .action-link:hover,
#mainMenu .action-link:focus-visible {
  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
  color: var(--primary-color);
  text-decoration: none;
}

#mainMenu i {
  flex: 0 0 1.25rem;
  text-align: center;
}

#mainMenu ul.actions i {
  flex-basis: auto;
}

.shortcut-help.header > button {
  appearance: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: inherit;
  font: inherit;
  margin: 0;
  padding: 0;
  text-align: inherit;
  flex: 0 0 auto;
  min-height: 2.5rem;
  min-width: 2.5rem;
  padding: 0;
  width: 2.5rem;
  border-radius: var(--border-radius-button);
  cursor: pointer;
}
.shortcut-help.header > button:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color, var(--primary-color));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--focus-radius, var(--border-radius-default));
}

.shortcut-help.header > button:hover {
  background: var(--background-hover);
}

.app-shell > .layout.main {
  margin: 0 auto;
  max-width: var(--shell-content-max-width);
  width: 100%;
}

.app-shell > .layout.main:has(.layout-wide) {
  max-width: none;
}

.layout-wide {
  min-width: 0;
  width: 100%;
}

.route-recovery {
  background: var(--background-panel, var(--background-surface, var(--background-input)));
  border: var(--border-panel, var(--border-surface, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-panel, var(--border-radius-card, var(--border-radius-default)));
  box-shadow: var(--shadow-panel, var(--shadow-card, var(--shadow-default)));
  padding-top: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-bottom: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-start: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-end: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  backdrop-filter: var(--filter-panel, none);
  -webkit-backdrop-filter: var(--filter-panel, none);
  align-items: center;
  display: grid;
  gap: var(--spacing-default);
  justify-items: center;
  margin: clamp(2rem, 10vh, 6rem) auto;
  max-width: min(100%, 34rem);
  min-height: 18rem;
  text-align: center;
}

.route-recovery .icon {
  align-items: center;
  background: var(--empty-icon-background, linear-gradient(145deg, color-mix(in srgb, var(--background-input) 98%, transparent), color-mix(in srgb, var(--primary-color) 8%, var(--background-input))));
  border: var(--empty-icon-border, var(--border-width-default) solid color-mix(in srgb, #ffffff 78%, transparent));
  border-radius: 999px;
  box-shadow: var(--empty-icon-shadow, 0 1rem 2.2rem color-mix(in srgb, var(--shadow-color, #1f2937) 18%, transparent), 0 0 0 0.65rem color-mix(in srgb, var(--primary-color) 7%, transparent));
  color: var(--empty-icon-color, var(--primary-color));
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 1.8rem;
  height: 4.75rem;
  justify-content: center;
  line-height: 1;
  width: 4.75rem;
}

.route-recovery .content {
  display: grid;
  gap: var(--spacing-xs);
  justify-items: center;
  min-width: 0;
}

.route-recovery .content h1 {
  font-size: 1.55rem;
  margin: 0;
}

.route-recovery .content p {
  color: var(--placeholder-text-color);
  margin: 0;
  max-width: 42ch;
}

.route-recovery .actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: center;
  min-width: 0;
}

.route-recovery .back.action,
.route-recovery .home.action,
.route-recovery .retry.action {
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
}
.route-recovery .back.action:focus-visible,
.route-recovery .home.action:focus-visible,
.route-recovery .retry.action:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.route-recovery .back.action:hover:not(:disabled, [aria-disabled=true]),
.route-recovery .home.action:hover:not(:disabled, [aria-disabled=true]),
.route-recovery .retry.action:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.route-recovery .back.action:disabled, .route-recovery .back.action[aria-disabled=true],
.route-recovery .home.action:disabled,
.route-recovery .home.action[aria-disabled=true],
.route-recovery .retry.action:disabled,
.route-recovery .retry.action[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}

.route-recovery .back.action,
.route-recovery .retry.action {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--secondary-text-color);
}

.route-recovery .home.action {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--primary-text-color);
}

button.view.action {
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
  flex: 0 0 auto;
  min-height: 2.25rem;
  min-width: 2.25rem;
  padding: 0;
  width: 2.25rem;
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--secondary-text-color);
  border-radius: 1000px;
}
button.view.action:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
button.view.action:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
button.view.action:disabled, button.view.action[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}

.app-shell > .footer {
  padding: 0;
}

.footer .content {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-default);
  justify-content: space-between;
  min-width: 0;
  color: var(--placeholder-text-color);
  font-size: var(--font-size-small);
  margin: 0 auto;
  max-width: var(--shell-content-max-width);
  padding: var(--spacing-default) var(--shell-content-padding);
  width: 100%;
}

.footer .links {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: flex-end;
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer .social.action {
  flex: 0 0 auto;
  min-height: 2.25rem;
  min-width: 2.25rem;
  padding: 0;
  width: 2.25rem;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--secondary-color);
}
.footer .social.action:hover:not(:disabled, [aria-disabled=true]) {
  background: color-mix(in srgb, var(--secondary-color) 10%, transparent);
  box-shadow: none;
}

#navigationBackdrop {
  display: none;
}

@media (max-width: 900px) {
  .app-shell {
    grid-template-columns: minmax(0, 1fr);
  }
  .app-shell > .navigation {
    bottom: 0;
    box-shadow: var(--shadow-more);
    grid-column: 1;
    inline-size: min(22rem, 100vw - 2rem);
    left: 0;
    max-height: 100dvh;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    transform: none;
    transition: opacity var(--transition-duration-default) var(--transition-function-default), visibility 0s linear var(--transition-duration-default);
    visibility: hidden;
    z-index: var(--shell-drawer-z-index);
  }
  .app-shell > .navigation.is-open {
    opacity: 1;
    pointer-events: auto;
    transition: opacity var(--transition-duration-default) var(--transition-function-default), visibility 0s linear 0s;
    visibility: visible;
  }
  #navigationClose {
    display: inline-flex;
  }
  .app-shell.navigation-open > #navigationBackdrop {
    background: rgba(1, 18, 37, 0.45);
    border: 0;
    display: block;
    inset: 0;
    padding: 0;
    position: fixed;
    z-index: var(--shell-overlay-z-index);
  }
  .app-shell > .layout.main {
    grid-column: 1;
    margin: 0;
    max-width: none;
    width: 100%;
  }
  .app-shell > .footer {
    grid-column: 1;
    padding-inline: 0;
  }
}
.trigger {
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

.breadcrumbs .selector.action {
  align-items: center;
  display: inline-flex;
  gap: 0.75rem;
  min-height: 2.25rem;
}

button.trigger,
.tag-chip .remove,
.attachment.indicator,
.breadcrumbs .selector.action,
.conversation.browser .selector.action,
.dashboard.selector .selector.action,
.inventory.item.action,
.subobject-link.action,
.validation-summary.action,
.tag.chips .chip.action,
.suggestion.action,
.resource.actions button,
.resource.actions a,
.reserved-time.block,
.milestone.action,
.completion.action,
.backdrop.action {
  appearance: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: inherit;
  font: inherit;
  margin: 0;
  padding: 0;
  text-align: inherit;
  cursor: pointer;
  text-decoration: none;
  text-align: inherit;
}

.hyper-menu {
  display: inline-flex;
  position: relative;
  z-index: var(--hyper-menu-z-index, 5);
}
.hyper-menu .menu-row {
  align-items: center;
  display: inline-flex;
  gap: var(--hyper-menu-gap, var(--spacing-2xs, 0.25rem));
  justify-content: flex-end;
  min-width: 0;
}
.hyper-menu .menu-row > button {
  --button-icon-size: var(--hyper-menu-button-size, 2.25rem);
  --background-button: var(--hyper-menu-button-background, var(--primary-color));
  --background-button-hover: var(--hyper-menu-button-hover-background, color-mix(in srgb, var(--primary-color) 86%, var(--secondary-color)));
  --border-color-button: var(--hyper-menu-button-border-color, var(--primary-color));
  --color-button: var(--hyper-menu-button-color, var(--primary-text-color));
  --focus-color-button: var(--hyper-menu-focus-color, color-mix(in srgb, var(--primary-color) 62%, transparent));
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
  flex: 0 0 auto;
  min-height: var(--hyper-menu-button-size, 2.25rem);
  min-width: var(--hyper-menu-button-size, 2.25rem);
  padding: 0;
  width: var(--hyper-menu-button-size, 2.25rem);
  border-radius: 1000px;
  flex: 0 0 auto;
  transform: translateX(0) rotate(0deg) scale(1);
  transition: background-color var(--transition-duration-default) var(--transition-function-default), border-color var(--transition-duration-default) var(--transition-function-default), box-shadow var(--transition-duration-default) var(--transition-function-default), color var(--transition-duration-default) var(--transition-function-default), opacity var(--transition-duration-default) var(--transition-function-default), transform var(--transition-duration-default) var(--transition-function-default);
}
.hyper-menu .menu-row > button:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.hyper-menu .menu-row > button:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.hyper-menu .menu-row > button:disabled, .hyper-menu .menu-row > button[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}
.hyper-menu .menu-row > .menu-toggle {
  --background-button: var(--hyper-menu-toggle-background, var(--secondary-color));
  --background-button-hover: var(--hyper-menu-toggle-hover-background, color-mix(in srgb, var(--secondary-color) 88%, var(--primary-color)));
  --border-color-button: var(--hyper-menu-toggle-border-color, var(--secondary-color));
  --color-button: var(--hyper-menu-toggle-color, var(--secondary-text-color));
}
.hyper-menu:not(.is-open):not(.detail-mode) .menu-row > button:not(.menu-toggle) {
  opacity: 0;
  pointer-events: none;
  transform: translateX(120%) rotate(180deg) scale(0.72);
}
.hyper-menu .menu-row > button:nth-child(1) {
  transition-delay: 0s;
}
.hyper-menu .menu-row > button:nth-child(2) {
  transition-delay: 0.035s;
}
.hyper-menu .menu-row > button:nth-child(3) {
  transition-delay: 0.07s;
}
.hyper-menu .menu-row > button:nth-child(4) {
  transition-delay: 0.105s;
}
.hyper-menu .menu-row > button:nth-child(5) {
  transition-delay: 0.14s;
}
.hyper-menu .menu-row > button:nth-child(6) {
  transition-delay: 0.175s;
}
.hyper-menu .menu-row > button:nth-child(7) {
  transition-delay: 0.21s;
}
.hyper-menu .menu-row > button:nth-child(8) {
  transition-delay: 0.245s;
}
.hyper-menu .menu-row > .menu-toggle {
  transition-delay: 0s;
}
.hyper-menu .menu-row .menu-label {
  display: none;
}
.hyper-menu .menu-vertical,
.hyper-menu .menu-inactive {
  background: var(--hyper-menu-panel-background, var(--background-menu, var(--background-panel, var(--background-input))));
  border: var(--hyper-menu-panel-border, var(--border-menu, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--hyper-menu-panel-radius, var(--border-radius-menu, var(--border-radius-default)));
  box-shadow: var(--hyper-menu-panel-shadow, var(--shadow-popover, var(--shadow-more)));
  padding-top: var(--hyper-menu-panel-padding, var(--spacing-xs));
  padding-bottom: var(--hyper-menu-panel-padding, var(--spacing-xs));
  padding-inline-start: var(--hyper-menu-panel-padding, var(--spacing-xs));
  padding-inline-end: var(--hyper-menu-panel-padding, var(--spacing-xs));
  display: grid;
  gap: var(--hyper-menu-panel-gap, var(--spacing-2xs, 0.25rem));
  min-inline-size: var(--hyper-menu-panel-min-width, 12rem);
  position: absolute;
  right: 0;
  top: calc(100% + var(--spacing-xs));
  z-index: var(--hyper-menu-panel-z-index, 20);
}
.hyper-menu .menu-inactive {
  top: calc(100% + var(--hyper-menu-inactive-offset, 3rem));
}
.hyper-menu .menu-vertical.is-hidden,
.hyper-menu .menu-inactive.is-hidden {
  display: none;
}
.hyper-menu .menu-vertical > button,
.hyper-menu .menu-inactive > button {
  appearance: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: inherit;
  font: inherit;
  margin: 0;
  padding: 0;
  text-align: inherit;
  align-items: center;
  border-radius: var(--border-radius-small);
  color: var(--text-color);
  cursor: pointer;
  display: flex;
  gap: var(--spacing-sm);
  justify-content: flex-start;
  min-block-size: var(--hyper-menu-list-item-height, 2.25rem);
  padding: var(--spacing-xs) var(--spacing-sm);
  text-align: left;
  width: 100%;
}
.hyper-menu .menu-vertical > button:focus-visible,
.hyper-menu .menu-inactive > button:focus-visible {
  outline: var(--focus-width, 2px) solid var(--hyper-menu-focus-color, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset-small, 2px);
  border-radius: var(--border-radius-small);
}
.hyper-menu .menu-vertical > button:hover,
.hyper-menu .menu-inactive > button:hover,
.hyper-menu .menu-vertical > button:focus-visible,
.hyper-menu .menu-inactive > button:focus-visible {
  background: var(--hyper-menu-list-item-hover-background, var(--background-hover));
}
.hyper-menu .menu-vertical i,
.hyper-menu .menu-inactive i {
  align-items: center;
  display: inline-flex;
  flex: 0 0 var(--hyper-menu-list-icon-size, 1rem);
  justify-content: center;
  width: var(--hyper-menu-list-icon-size, 1rem);
}
.hyper-menu .menu-vertical .menu-label,
.hyper-menu .menu-inactive .menu-label {
  display: inline;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hyper-menu.detail-mode .menu-row > button {
  cursor: grab;
}
.hyper-menu.is-drag-over .menu-row,
.hyper-menu .menu-inactive.is-drag-over,
.hyper-menu .menu-vertical.is-drag-over {
  outline: var(--focus-width, 2px) dashed var(--primary-color);
  outline-offset: var(--focus-offset, 3px);
}

.milestone.action,
.tag-chip .remove {
  cursor: pointer;
}

.trigger,
.summary.trigger,
.title.trigger,
.title.text {
  display: block;
  width: 100%;
}

.title.trigger,
.title.text {
  text-align: left;
}

.resource.actions button,
.resource.actions a {
  align-items: center;
  color: inherit;
  display: inline-flex;
  gap: 0.25rem;
  text-decoration: none;
}

.resource.actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: flex-start;
  min-width: 0;
  color: var(--placeholder-text-color);
  font-size: var(--font-size-small);
}

.resource.actions button.empty,
.resource.actions a.empty {
  color: var(--placeholder-text-color);
  opacity: 0.78;
}

.resource.actions .count {
  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
  border-radius: 999px;
  color: var(--primary-color);
  font-size: var(--font-size-small);
  line-height: 1;
  min-inline-size: 1.15rem;
  padding: 0.1rem 0.32rem;
  text-align: center;
}

.attachment.indicator,
.tag.chips .chip.action {
  align-items: center;
  display: inline-flex;
}

.attachment.indicator {
  color: inherit;
  gap: 0.25rem;
}

.conversation.browser .selector.action,
.dashboard.selector .selector.action {
  align-items: center;
  color: inherit;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  text-decoration: none;
  width: 100%;
}

.conversation.browser .selector.action .message {
  align-items: center;
  display: inline-flex;
  gap: 0.75rem;
  min-width: 0;
}

.conversation.browser .selector.action .body {
  display: inline-flex;
  flex-direction: column;
  min-width: 0;
}

.metadata-label {
  color: var(--placeholder-text-color);
  font-weight: 700;
}

.thread.meta,
.conversation.chat .message.group .meta,
.timestamp {
  align-items: baseline;
  display: inline-flex;
  gap: 0.25rem;
  min-width: 0;
}

.thread.meta {
  color: var(--text-color);
}

.conversation.chat .message.group .meta,
.timestamp {
  color: var(--placeholder-text-color);
  font-size: var(--font-size-small);
  margin: 0;
}

.conversation.chat .message.group .meta {
  margin-bottom: 0.25rem;
}

.dashboard.selector .selector.action {
  padding: 0;
}

.dashboard.selector > ul {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-default);
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.dashboard.selector .create.action {
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
  background: transparent;
  border-color: var(--primary-color);
  box-shadow: none;
  color: var(--primary-color);
  font-size: var(--button-small-font-size, var(--font-size-small));
  min-height: var(--button-small-min-height, 2rem);
  padding-inline-start: var(--button-small-padding-inline, var(--spacing-sm));
  padding-inline-end: var(--button-small-padding-inline, var(--spacing-sm));
  padding-top: var(--button-small-padding-block, var(--spacing-xs));
  padding-bottom: var(--button-small-padding-block, var(--spacing-xs));
  width: 100%;
}
.dashboard.selector .create.action:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.dashboard.selector .create.action:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.dashboard.selector .create.action:disabled, .dashboard.selector .create.action[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}
.dashboard.selector .create.action:hover:not(:disabled, [aria-disabled=true]) {
  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
  border-color: var(--primary-color);
  box-shadow: none;
  color: var(--primary-color);
}

.inventory.item.action,
.subobject-link.action,
.reserved-time.block,
.app-ui.option,
.app-ui.grid .app-ui.item,
.task-add-card {
  color: inherit;
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.inventory.item.action > span,
.inventory.item.action .body,
.inventory.item.action .metadata,
.inventory.item.action .unlocks,
.app-ui.option .body,
.app-ui.option .definition-description,
.app-ui.grid .app-ui.item .body,
.app-ui.grid .app-ui.item .definition-description,
.suggestion.action {
  display: block;
}

.subscription-help {
  appearance: none;
  border: 0;
  cursor: pointer;
  font: inherit;
}

.subscription.plans {
  display: grid;
  gap: var(--spacing-default);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.subscription.plan.item {
  --background-card: color-mix(in srgb, var(--background-input) 94%, transparent);
  --border-color-card: color-mix(in srgb, var(--border-color-default) 70%, transparent);
  --margin-card: 0;
  display: grid;
  gap: var(--spacing-default);
  position: relative;
}
@media (min-width: 0px) {
  .subscription.plan.item {
    background: var(--background-card, var(--background-default));
    color: var(--color-card, var(--text-color));
    border-radius: var(--border-radius-card, var(--border-radius-default));
    padding-top: var(--padding-card, var(--padding-default));
    padding-bottom: var(--padding-card, var(--padding-default));
    padding-inline-start: var(--padding-card, var(--padding-default));
    padding-inline-end: var(--padding-card, var(--padding-default));
    margin-top: var(--margin-card, var(--margin-default));
    margin-bottom: var(--margin-card, var(--margin-default));
    margin-inline-start: var(--margin-card, var(--margin-default));
    margin-inline-end: var(--margin-card, var(--margin-default));
    border: var(--border-width-card, var(--border-width-default)) solid var(--border-color-card, var(--border-color-default));
    transition: all var(--transition-duration-default) var(--transition-function-default);
    box-shadow: var(--shadow-card, var(--shadow-default));
  }
}
@media (min-width: 0px) and (prefers-reduced-motion: reduce) {
  .subscription.plan.item {
    transition: none !important;
  }
}
@media (min-width: 576px) {
  .subscription.plan.item {
    box-shadow: var(--shadow-card-responsive, var(--shadow-more));
  }
}

.subscription.plan.item.active {
  border-color: color-mix(in srgb, var(--success-color) 34%, var(--border-color-default));
}

.subscription.plan.item > .item.content {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-default);
  min-width: 0;
}

.subscription.plan.item .price {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
}

.subscription.plan.item .period {
  color: var(--placeholder-text-color);
  font-size: var(--font-size-small);
}

.subscription.plan.item .properties {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.subscription.plan.item .property.item {
  align-items: flex-start;
  display: flex;
  gap: 0.45rem;
}

.subscription.plan.item .actions {
  align-items: stretch;
  display: grid;
  gap: var(--spacing-sm);
}

.subscription.plan.item :is(.purchase.action, .current.action, .unavailable.action) {
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
  width: 100%;
}
.subscription.plan.item :is(.purchase.action, .current.action, .unavailable.action):focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.subscription.plan.item :is(.purchase.action, .current.action, .unavailable.action):hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.subscription.plan.item :is(.purchase.action, .current.action, .unavailable.action):disabled, .subscription.plan.item :is(.purchase.action, .current.action, .unavailable.action)[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}

.subscription.plan.item .purchase.action.primary {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--primary-text-color);
}

.subscription.plan.item .purchase.action.secondary,
.subscription.plan.item .current.action,
.subscription.plan.item .unavailable.action {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--secondary-text-color);
}

.validation-summary.action {
  color: var(--primary-color);
  cursor: pointer;
  text-decoration: underline;
}

.suggestion.action,
.subobject-link.action {
  color: inherit;
}

.modal-overlay.achievement,
.level-up-overlay {
  position: relative;
}

.backdrop.action {
  cursor: pointer;
  inset: 0;
  min-height: 100%;
  position: absolute;
  width: 100%;
  z-index: 0;
}

.modal-overlay.achievement .achievement.modal.panel,
.level-up-overlay > .level-up {
  position: relative;
  z-index: 1;
}

.trigger:hover,
.breadcrumbs .selector.action:hover,
.conversation.browser .selector.action:hover,
.dashboard.selector .selector.action:hover,
.subobject-link.action:hover,
.suggestion.action:hover {
  color: inherit;
  text-decoration: none;
}

.validation-summary.action:hover {
  text-decoration: none;
}

.rz-cell-data :is(.state.chip, .priority.chip, .status.chip, .category.chip, .method.chip, .policy.chip, .role.chip, .unit.chip, .goal.chip),
.task.editor :is(.activity.chip, .unit.chip, .goal.chip),
.reward.chip,
.plan.chip,
.detail.chip {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: var(--font-size-small);
  font-weight: 700;
  gap: 0.25rem;
  padding: 0.2rem 0.55rem;
}

.rz-cell-data :is(.state.chip, .status.chip, .category.chip, .method.chip, .policy.chip, .role.chip),
.task.editor :is(.activity.chip, .unit.chip, .goal.chip),
.detail.chip {
  background: color-mix(in srgb, var(--primary-color) 10%, transparent);
  color: var(--primary-color);
}

.rz-cell-data .priority.chip.high,
.rz-cell-data .status.chip.error,
.progress.chip.warning {
  background: color-mix(in srgb, var(--danger-color) 11%, transparent);
  color: var(--danger-color);
}

.rz-cell-data .priority.chip.medium {
  background: color-mix(in srgb, var(--warning-color) 18%, transparent);
  color: var(--warning-color);
}

.rz-cell-data .priority.chip.low {
  background: color-mix(in srgb, var(--success-color) 12%, transparent);
  color: var(--success-color);
}

.rz-cell-data .status.chip.custom {
  background: color-mix(in srgb, var(--status-color, var(--primary-color)) 12%, transparent);
  color: var(--status-color, var(--primary-color));
}

.reward.chip {
  background: color-mix(in srgb, #f59f00 16%, var(--background-input));
  color: color-mix(in srgb, #7c4a00 72%, var(--text-color));
}

.plan.chip.current {
  background: color-mix(in srgb, var(--success-color) 12%, transparent);
  color: var(--success-color);
}

.trigger:focus-visible,
.breadcrumbs .selector.action:focus-visible,
.resource.actions button:focus-visible,
.resource.actions a:focus-visible,
.tag-chip .remove:focus-visible,
.milestone.action:focus-visible,
.attachment.indicator:focus-visible,
.conversation.browser .selector.action:focus-visible,
.dashboard.selector .selector.action:focus-visible,
.inventory.item.action:focus-visible,
.subobject-link.action:focus-visible,
.validation-summary.action:focus-visible,
.tag.chips .chip.action:focus-visible,
.suggestion.action:focus-visible,
.subscription-help:focus-visible,
.app-ui.option .choice:focus-visible,
.app-ui.grid .app-ui.item .select.action:focus-visible,
.task-add-card:focus-visible,
.reserved-time.block:focus-visible,
.calendar-reserved-time-band:focus-visible,
.backdrop.action:focus-visible,
.menu-item:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color, var(--primary-color));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--focus-radius, var(--border-radius-small));
}

.section.panel.device {
  margin-bottom: 1rem;
}

.pain-map-canvas {
  width: 100%;
  height: 360px;
}

.row {
  text-align: left;
  width: 100%;
}

.row.selected.danger {
  border-color: var(--danger-color);
}

.status-color {
  background-color: var(--status-color);
}

.search-result-item {
  appearance: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: inherit;
  font: inherit;
  margin: 0;
  padding: 0;
  text-align: inherit;
  padding: var(--search-result-padding, var(--spacing-sm) var(--spacing-md));
  border-radius: var(--search-result-radius, var(--border-radius-small));
  color: inherit;
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.command-palette-recent-layer {
  border-bottom: 1px solid color-mix(in srgb, var(--border-color-default) 70%, transparent);
  padding-bottom: 0.75rem;
}

.command-palette-recent-item {
  background: color-mix(in srgb, var(--primary-color) 7%, transparent);
}

.search-result-item:hover,
.search-result-item.active,
.search-result-item:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color, var(--primary-color));
  outline-offset: 2px;
  background: var(--search-result-active-background, color-mix(in srgb, var(--primary-color) 12%, transparent));
  box-shadow: none;
  transform: none;
}

.search-result-item.disabled,
.search-result-item:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.search-result-item.disabled:hover,
.search-result-item:disabled:hover {
  outline: 0;
  background: transparent;
}

.form-field {
  display: grid;
  gap: var(--form-field-gap, 0.35rem);
  min-width: 0;
}

.form-field > label {
  color: var(--placeholder-text-color);
  font-size: var(--font-size-small);
  font-weight: 700;
  height: auto !important;
  line-height: 1.25;
  min-height: 0;
  padding: 0;
}

.form-field > label[class*=bi-]::before,
.entity-view.section label[class*=bi-]::before {
  margin-right: 0.35rem;
}

.form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) {
  --padding-inline-floating-field: 0.95rem;
  display: grid;
  gap: var(--gap-feedback-form-field);
  min-height: auto;
  position: relative;
}
.form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > :is(input, select, textarea, .input, .rz-datepicker, .rz-dropdown, .rz-numeric),
.form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > label,
.form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > .field-icon {
  grid-area: 1/1;
  transition: color var(--transition-duration-fast) var(--transition-function-default), opacity var(--transition-duration-fast) var(--transition-function-default), transform var(--transition-duration-fast) var(--transition-function-default);
}
.form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > :is(input, select, textarea, .input, .rz-datepicker, .rz-dropdown, .rz-numeric) {
  align-self: stretch;
  min-height: var(--min-height-floating-field);
  min-width: 0;
  width: 100%;
}
.form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > :is(input, select, textarea, .input.text:not(.rz-datepicker):not(.rz-dropdown):not(.rz-numeric)) {
  padding-block: var(--padding-block-start-floating-field-control) var(--padding-block-end-floating-field-control);
  padding-inline: var(--padding-inline-floating-field, var(--padding-default));
}
.form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > :is(.rz-datepicker, .rz-dropdown, .rz-numeric) {
  padding: 0;
}
.form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > :is(.rz-datepicker, .rz-numeric) .rz-inputtext {
  background: transparent;
  border: 0;
  box-shadow: none;
  min-height: var(--min-height-floating-field);
  outline: 0;
  padding-block: var(--padding-block-start-floating-field-control) var(--padding-block-end-floating-field-control);
  padding-inline: var(--padding-inline-floating-field, var(--padding-default));
}
.form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > :is(.rz-dropdown, .rz-multiselect) :is(.rz-dropdown-label, .rz-multiselect-label) {
  min-height: var(--min-height-floating-field);
  padding-block: var(--padding-block-start-floating-field-control) var(--padding-block-end-floating-field-control);
  padding-inline: var(--padding-inline-floating-field, var(--padding-default));
}
.form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > label {
  align-self: center;
  display: inline-flex;
  gap: var(--gap-floating-label);
  line-height: 1;
  opacity: 1;
  padding-block: 0;
  padding-inline: var(--padding-inline-floating-field, var(--padding-default));
  pointer-events: none;
  transform-origin: left center;
  z-index: 2;
}
.form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .field-icon.leading) > :is(input, select, textarea, .input.text:not(.rz-datepicker):not(.rz-dropdown):not(.rz-numeric)) {
  padding-inline-start: calc(var(--padding-inline-floating-field, var(--padding-default)) + var(--space-leading-floating-field));
}
.form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .field-icon.trailing) > :is(input, select, textarea, .input.text:not(.rz-datepicker):not(.rz-dropdown):not(.rz-numeric)) {
  padding-inline-end: calc(var(--padding-inline-floating-field, var(--padding-default)) + var(--space-trailing-floating-field));
}
.form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .field-icon.leading) > label {
  padding-inline-start: calc(var(--padding-inline-floating-field, var(--padding-default)) + var(--space-leading-floating-field));
}
.form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):focus-within > label, .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> input:not(:placeholder-shown)) > label, .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> textarea:not(:placeholder-shown)) > label, .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .input:not(:placeholder-shown)) > label, .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .input.select) > label, .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .rz-datepicker) > label, .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .rz-dropdown) > label, .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .rz-numeric) > label {
  color: var(--color-floating-label, var(--primary-color));
  opacity: var(--opacity-floating-label);
  transform: translate(var(--translate-x-floating-label), var(--translate-y-floating-label)) scale(var(--scale-floating-label));
}
.form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .field-icon.leading):focus-within > .field-icon.leading, .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .field-icon.leading):has(> input:not(:placeholder-shown)) > .field-icon.leading, .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .field-icon.leading):has(> textarea:not(:placeholder-shown)) > .field-icon.leading, .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .field-icon.leading):has(> .input:not(:placeholder-shown)) > .field-icon.leading, .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .field-icon.leading):has(> .input.select) > .field-icon.leading, .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .field-icon.leading):has(> .rz-datepicker) > .field-icon.leading, .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .field-icon.leading):has(> .rz-dropdown) > .field-icon.leading, .form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> .field-icon.leading):has(> .rz-numeric) > .field-icon.leading {
  opacity: var(--opacity-active-floating-field-icon);
  transform: translateY(var(--translate-y-active-floating-field-icon)) scale(var(--scale-active-floating-field-icon));
}
.form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > .field-icon {
  align-self: center;
  color: var(--color-floating-field-icon, var(--placeholder-text-color));
  display: inline-flex;
  justify-content: center;
  pointer-events: none;
  position: relative;
  z-index: 2;
}
.form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > .field-icon.leading {
  justify-self: start;
  margin-inline-start: var(--padding-inline-floating-field, var(--padding-default));
}
.form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > .field-icon.trailing {
  justify-self: end;
  margin-inline-end: var(--padding-inline-floating-field, var(--padding-default));
}
.form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > .field-icon.status {
  color: var(--color-invalid-floating-field, var(--danger-color));
  opacity: 0;
}
.form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> :is(input, .input).invalid) > .field-icon.status {
  opacity: 1;
}
.form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > .field-icon.action {
  appearance: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: inherit;
  font: inherit;
  margin: 0;
  padding: 0;
  text-align: inherit;
  align-items: center;
  border-radius: var(--border-radius-small);
  color: var(--color-action-floating-field-icon, var(--placeholder-text-color));
  cursor: pointer;
  height: var(--size-action-floating-field-icon);
  pointer-events: auto;
  width: var(--size-action-floating-field-icon);
}
.form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > .field-icon.action:hover,
.form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > .field-icon.action:focus-visible {
  color: var(--color-action-hover-floating-field-icon, var(--primary-color));
}
.form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > :is(input, .input).invalid:not([type=checkbox]):not([type=radio]) {
  border-color: color-mix(in srgb, var(--color-invalid-floating-field, var(--danger-color)) 70%, var(--border-color-default));
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-invalid-floating-field, var(--danger-color)) 14%, transparent);
}
.form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)):has(> :is(input, .input).invalid:not([type=checkbox]):not([type=radio])) > label {
  color: var(--color-invalid-floating-field, var(--danger-color));
}
.form-field:not(.checkbox):not(.checkbox-field):not(.radio):not(.radio-field):not(.search-field):not(.projects):not(.group):not(.status):not(:has(> input:is([type=checkbox], [type=radio]))):has(> label):has(> :is(input, textarea, select, .input, .rz-datepicker, .rz-dropdown, .rz-numeric)) > .validation-message {
  grid-column: 1/-1;
}

.form-field.group {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--spacing-default);
}

.form-field.checkbox {
  align-items: flex-start;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--spacing-sm);
}

.form-field.checkbox > label {
  color: var(--text-color);
  font-weight: 500;
}

.form.actions,
.form-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: flex-end;
  min-width: 0;
}

.dashboard.editor {
  --background-card: color-mix(in srgb, var(--background-input) 82%, transparent);
  --border-color-card: color-mix(in srgb, var(--border-color-default) 70%, transparent);
  --padding-card: clamp(1rem, 2vw, 1.35rem);
  margin-block: var(--spacing-lg);
  margin-inline: auto;
  max-width: min(100%, 56rem);
}
@media (min-width: 0px) {
  .dashboard.editor {
    background: var(--background-card, var(--background-default));
    color: var(--color-card, var(--text-color));
    border-radius: var(--border-radius-card, var(--border-radius-default));
    padding-top: var(--padding-card, var(--padding-default));
    padding-bottom: var(--padding-card, var(--padding-default));
    padding-inline-start: var(--padding-card, var(--padding-default));
    padding-inline-end: var(--padding-card, var(--padding-default));
    margin-top: var(--margin-card, var(--margin-default));
    margin-bottom: var(--margin-card, var(--margin-default));
    margin-inline-start: var(--margin-card, var(--margin-default));
    margin-inline-end: var(--margin-card, var(--margin-default));
    border: var(--border-width-card, var(--border-width-default)) solid var(--border-color-card, var(--border-color-default));
    transition: all var(--transition-duration-default) var(--transition-function-default);
    box-shadow: var(--shadow-card, var(--shadow-default));
  }
}
@media (min-width: 0px) and (prefers-reduced-motion: reduce) {
  .dashboard.editor {
    transition: none !important;
  }
}
@media (min-width: 576px) {
  .dashboard.editor {
    box-shadow: var(--shadow-card-responsive, var(--shadow-more));
  }
}

.dashboard.editor > form,
.dashboard.editor form {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-default);
  min-width: 0;
}

.dashboard.editor .save.action {
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--primary-text-color);
}
.dashboard.editor .save.action:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.dashboard.editor .save.action:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.dashboard.editor .save.action:disabled, .dashboard.editor .save.action[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}

.dashboard.editor .access.trigger.action {
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
  background: transparent;
  border-color: var(--primary-color);
  box-shadow: none;
  color: var(--primary-color);
}
.dashboard.editor .access.trigger.action:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.dashboard.editor .access.trigger.action:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.dashboard.editor .access.trigger.action:disabled, .dashboard.editor .access.trigger.action[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}
.dashboard.editor .access.trigger.action:hover:not(:disabled, [aria-disabled=true]) {
  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
  border-color: var(--primary-color);
  box-shadow: none;
  color: var(--primary-color);
}

.app-ui.editor,
.tracking.series.picker {
  --background-card: color-mix(in srgb, var(--background-input) 82%, transparent);
  --border-color-card: color-mix(in srgb, var(--border-color-default) 70%, transparent);
  --padding-card: clamp(1rem, 2vw, 1.35rem);
  margin-block: var(--spacing-lg);
  margin-inline: auto;
  max-width: min(100%, 56rem);
}
@media (min-width: 0px) {
  .app-ui.editor,
  .tracking.series.picker {
    background: var(--background-card, var(--background-default));
    color: var(--color-card, var(--text-color));
    border-radius: var(--border-radius-card, var(--border-radius-default));
    padding-top: var(--padding-card, var(--padding-default));
    padding-bottom: var(--padding-card, var(--padding-default));
    padding-inline-start: var(--padding-card, var(--padding-default));
    padding-inline-end: var(--padding-card, var(--padding-default));
    margin-top: var(--margin-card, var(--margin-default));
    margin-bottom: var(--margin-card, var(--margin-default));
    margin-inline-start: var(--margin-card, var(--margin-default));
    margin-inline-end: var(--margin-card, var(--margin-default));
    border: var(--border-width-card, var(--border-width-default)) solid var(--border-color-card, var(--border-color-default));
    transition: all var(--transition-duration-default) var(--transition-function-default);
    box-shadow: var(--shadow-card, var(--shadow-default));
  }
}
@media (min-width: 0px) and (prefers-reduced-motion: reduce) {
  .app-ui.editor,
  .tracking.series.picker {
    transition: none !important;
  }
}
@media (min-width: 576px) {
  .app-ui.editor,
  .tracking.series.picker {
    box-shadow: var(--shadow-card-responsive, var(--shadow-more));
  }
}

.app-ui.editor > form,
.app-ui.editor form,
.tracking.series.picker {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-default);
  min-width: 0;
}

.app-ui.editor > header,
.app-ui.editor .fields {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  min-width: 0;
}

.app-ui.editor > header h3 {
  align-items: center;
  display: inline-flex;
  gap: var(--spacing-sm);
  margin: 0;
}

.app-ui.editor .description,
.app-ui.editor .hint,
.tracking.series.picker .hint {
  color: var(--placeholder-text-color);
  margin: 0;
}

.app-ui.editor .actions,
.tracking.series.picker .candidate-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: flex-end;
  min-width: 0;
}

.app-ui.editor .save.action,
.tracking.series.picker .choose.action {
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--primary-text-color);
}
.app-ui.editor .save.action:focus-visible,
.tracking.series.picker .choose.action:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.app-ui.editor .save.action:hover:not(:disabled, [aria-disabled=true]),
.tracking.series.picker .choose.action:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.app-ui.editor .save.action:disabled, .app-ui.editor .save.action[aria-disabled=true],
.tracking.series.picker .choose.action:disabled,
.tracking.series.picker .choose.action[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}

.app-ui.editor .cancel.action,
.tracking.series.picker .cancel.action {
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--secondary-text-color);
}
.app-ui.editor .cancel.action:focus-visible,
.tracking.series.picker .cancel.action:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.app-ui.editor .cancel.action:hover:not(:disabled, [aria-disabled=true]),
.tracking.series.picker .cancel.action:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.app-ui.editor .cancel.action:disabled, .app-ui.editor .cancel.action[aria-disabled=true],
.tracking.series.picker .cancel.action:disabled,
.tracking.series.picker .cancel.action[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}

.app-ui.editor hr {
  border: 0;
  border-top: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 65%, transparent);
  margin: 0;
}

.tracking.series.entries.page .settings.action {
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
  background: transparent;
  border-color: var(--primary-color);
  box-shadow: none;
  color: var(--primary-color);
}
.tracking.series.entries.page .settings.action:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.tracking.series.entries.page .settings.action:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.tracking.series.entries.page .settings.action:disabled, .tracking.series.entries.page .settings.action[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}
.tracking.series.entries.page .settings.action:hover:not(:disabled, [aria-disabled=true]) {
  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
  border-color: var(--primary-color);
  box-shadow: none;
  color: var(--primary-color);
}

.statistics.explorer .global.controls .rz-datepicker {
  font-size: var(--font-size-default);
  border: var(--border-width-input, var(--border-width-default)) solid var(--border-color-input, var(--border-color-default));
  background-color: var(--background-input, var(--background-default));
  color: var(--color-input, var(--text-color));
  min-height: var(--input-min-height, 2.75rem);
  min-width: 0;
  width: var(--input-width, 100%);
  padding-top: var(--padding-input-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-input-block, calc(var(--padding-default) / 2));
  padding-inline-start: var(--padding-input-inline, var(--padding-default));
  padding-inline-end: var(--padding-input-inline, var(--padding-default));
  border-radius: var(--border-radius-input, var(--border-radius-default));
  box-shadow: var(--shadow-input, none);
  transition: border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
  padding: 0;
  width: 100%;
}
.statistics.explorer .global.controls .rz-datepicker:focus {
  outline: none;
  border-color: var(--focus-border-color, var(--primary-color));
  box-shadow: var(--shadow-input-focus, var(--shadow-default));
}
.statistics.explorer .global.controls .rz-datepicker:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-input, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 2px);
  border-radius: var(--border-radius-input, var(--border-radius-default));
}

.statistics.explorer .global.controls .rz-datepicker .rz-inputtext {
  background: transparent;
  border: 0;
  box-shadow: none;
  min-height: 2.6rem;
  outline: 0;
  padding-inline: var(--padding-input-inline, var(--padding-default)) 2.75rem;
}

.task.editor,
.project.editor {
  --background-card: color-mix(in srgb, var(--background-input) 88%, transparent);
  --border-color-card: color-mix(in srgb, var(--border-color-default) 66%, transparent);
  --padding-card: clamp(1rem, 2vw, 1.4rem);
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-default);
  min-width: 0;
}

.task.editor > .section,
.project.editor .section {
  --background-panel: color-mix(in srgb, var(--background-input) 82%, transparent);
  --border-panel: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 66%, transparent);
  --padding-panel: clamp(1rem, 2vw, 1.25rem);
  background: var(--background-panel, var(--background-surface, var(--background-input)));
  border: var(--border-panel, var(--border-surface, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-panel, var(--border-radius-card, var(--border-radius-default)));
  box-shadow: var(--shadow-panel, var(--shadow-card, var(--shadow-default)));
  padding-top: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-bottom: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-start: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-end: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  backdrop-filter: var(--filter-panel, none);
  -webkit-backdrop-filter: var(--filter-panel, none);
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-default);
  min-width: 0;
  min-width: 0;
}

.project.editor > .content {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-default);
  min-width: 0;
  min-width: 0;
}

.task.editor > .section > header,
.project.editor .section > header {
  align-items: center;
  display: flex;
  gap: var(--spacing-sm);
  justify-content: space-between;
  min-width: 0;
}

.task.editor > .section > header .title,
.project.editor .section > header .title,
.studio.section .access-control > .header .title,
.activity.goals.item > header .title {
  align-items: center;
  color: var(--text-color);
  display: inline-flex;
  font-size: 1rem;
  gap: 0.5rem;
  line-height: 1.25;
  margin: 0;
  min-width: 0;
}

.task.editor > .section > header .title .bi,
.project.editor .section > header .title .bi,
.studio.section .access-control > .header .title .bi,
.activity.goals.item > header .title .bi {
  color: var(--primary-color);
}

.project.editor .section .access.toggle {
  appearance: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: inherit;
  font: inherit;
  margin: 0;
  padding: 0;
  text-align: inherit;
  cursor: pointer;
  text-decoration: none;
  align-items: center;
  color: var(--primary-color);
  display: flex;
  gap: var(--spacing-sm);
  justify-content: space-between;
  min-height: 2.5rem;
  min-width: 0;
  padding: 0.35rem 0;
  text-align: left;
  width: 100%;
}

.project.editor .section .access.toggle > .title {
  flex: 1 1 auto;
}

.studio.section > section.access-control {
  --background-panel: color-mix(in srgb, var(--background-input) 82%, transparent);
  --border-panel: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 66%, transparent);
  --padding-panel: clamp(1rem, 2vw, 1.25rem);
  background: var(--background-panel, var(--background-surface, var(--background-input)));
  border: var(--border-panel, var(--border-surface, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-panel, var(--border-radius-card, var(--border-radius-default)));
  box-shadow: var(--shadow-panel, var(--shadow-card, var(--shadow-default)));
  padding-top: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-bottom: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-start: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-end: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  backdrop-filter: var(--filter-panel, none);
  -webkit-backdrop-filter: var(--filter-panel, none);
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-default);
  min-width: 0;
}

.studio.section .access-control .access.toggle {
  appearance: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: inherit;
  font: inherit;
  margin: 0;
  padding: 0;
  text-align: inherit;
  cursor: pointer;
  text-decoration: none;
  align-items: center;
  color: var(--primary-color);
  display: flex;
  gap: var(--spacing-sm);
  justify-content: space-between;
  min-height: 2.5rem;
  min-width: 0;
  padding: 0.35rem 0;
  text-align: left;
  width: 100%;
}

.studio.section .access-control .access.toggle > .title {
  flex: 1 1 auto;
}

.task.editor > .section > .body,
.project.editor .section > .body {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-default);
  min-width: 0;
  min-width: 0;
}

.task.editor > .section > .body.fields,
.project.editor .section > .body.fields {
  display: grid;
  gap: var(--spacing-default);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--task-form-grid-min, 17rem)), 1fr));
  min-width: 0;
}

.task.editor > .section.details > .body.fields,
.project.editor .section.details > .body.fields {
  --task-form-grid-min: 20rem;
}

.task.editor > .section .form-field[data-input-for=description],
.project.editor .section .form-field[data-input-for=description] {
  grid-column: 1/-1;
}

.task.editor > .section .form-field[data-input-for=description] textarea.input,
.project.editor .section .form-field[data-input-for=description] textarea.input {
  min-height: 7rem;
  resize: vertical;
}

.task.editor .input,
.task.editor .rz-dropdown,
.task.editor .rz-datepicker,
.task.editor .rz-numeric,
.project.editor .input,
.project.editor .rz-dropdown,
.project.editor .rz-datepicker,
.project.editor .rz-numeric {
  min-width: 0;
  width: 100%;
}

.task.editor > .section.favorites > .body,
.project.editor .section.favorites > .body {
  min-height: 3.2rem;
}

.task.editor .goals.editor,
.activity.goals.item,
.tracking.goals,
.subtask-list {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  min-width: 0;
}

.activity.goals.item,
.tracking.goals {
  background: color-mix(in srgb, var(--primary-color) 5%, var(--background-input));
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 68%, transparent);
  border-radius: var(--border-radius-default);
  padding: var(--spacing-default);
}

.tracking.goals > header {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: space-between;
  min-width: 0;
}

.goal.list {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  min-width: 0;
}

.goal.item {
  align-items: center;
  display: grid;
  gap: var(--spacing-sm);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
  min-width: 0;
}

.goal.item .goal.chip {
  justify-self: start;
}

.task.editor > .section .empty-state {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  min-width: 0;
  color: var(--placeholder-text-color);
  margin: 0;
  min-height: 5rem;
  text-align: center;
}

.task.editor > .actions,
.project.editor > .actions {
  align-items: center;
  border-top: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 62%, transparent);
  display: flex;
  justify-content: space-between;
  padding-top: var(--spacing-default);
}

.task.editor > .actions > .actions,
.project.editor > .actions > .actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: flex-end;
  min-width: 0;
}

.task.editor .save.action,
.task.editor .add.action,
.task.editor .remove.action,
.task.editor .recurrence.action,
.task.editor .cancel.action,
.project.editor .cancel.action {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--secondary-text-color);
}

.task.editor .save.action,
.project.editor .save.action,
.poll.composer .save.action {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--primary-text-color);
}

.poll.composer .add.action,
.poll.composer .cancel.action {
  background: transparent;
  border-color: var(--secondary-color);
  box-shadow: none;
  color: var(--secondary-color);
}
.poll.composer .add.action:hover:not(:disabled, [aria-disabled=true]),
.poll.composer .cancel.action:hover:not(:disabled, [aria-disabled=true]) {
  background: color-mix(in srgb, var(--secondary-color) 12%, transparent);
  border-color: var(--secondary-color);
  box-shadow: none;
  color: var(--secondary-color);
}

.poll.composer > .actions .cancel.action {
  background: transparent;
  border-color: var(--primary-color);
  box-shadow: none;
  color: var(--primary-color);
}
.poll.composer > .actions .cancel.action:hover:not(:disabled, [aria-disabled=true]) {
  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
  border-color: var(--primary-color);
  box-shadow: none;
  color: var(--primary-color);
}

.poll.composer .remove.action {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--primary-color);
}
.poll.composer .remove.action:hover:not(:disabled, [aria-disabled=true]) {
  background: color-mix(in srgb, var(--primary-color) 10%, transparent);
  box-shadow: none;
}

:is(.challenge.form,
.challenge.category.form,
.activity.form,
.activity.metric.form,
.note.form,
.metric.form,
.studio.form,
.organization.form,
.user-group.form,
.user-role.form,
.policy.form,
.user-right.form,
.workflow.form,
.webhook.form,
.incident.form,
.incident.status.form,
.countdown.form,
.task.state.form,
.task.state.collection.form,
.reminder.schedule.form,
.recurrence-pattern.form,
.item.form,
.inventory.item.form) :is(.save.action, .send.action, .cancel.action, .reset.action, .back.action) {
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
}
:is(.challenge.form,
.challenge.category.form,
.activity.form,
.activity.metric.form,
.note.form,
.metric.form,
.studio.form,
.organization.form,
.user-group.form,
.user-role.form,
.policy.form,
.user-right.form,
.workflow.form,
.webhook.form,
.incident.form,
.incident.status.form,
.countdown.form,
.task.state.form,
.task.state.collection.form,
.reminder.schedule.form,
.recurrence-pattern.form,
.item.form,
.inventory.item.form) :is(.save.action, .send.action, .cancel.action, .reset.action, .back.action):focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
:is(.challenge.form,
.challenge.category.form,
.activity.form,
.activity.metric.form,
.note.form,
.metric.form,
.studio.form,
.organization.form,
.user-group.form,
.user-role.form,
.policy.form,
.user-right.form,
.workflow.form,
.webhook.form,
.incident.form,
.incident.status.form,
.countdown.form,
.task.state.form,
.task.state.collection.form,
.reminder.schedule.form,
.recurrence-pattern.form,
.item.form,
.inventory.item.form) :is(.save.action, .send.action, .cancel.action, .reset.action, .back.action):hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
:is(.challenge.form,
.challenge.category.form,
.activity.form,
.activity.metric.form,
.note.form,
.metric.form,
.studio.form,
.organization.form,
.user-group.form,
.user-role.form,
.policy.form,
.user-right.form,
.workflow.form,
.webhook.form,
.incident.form,
.incident.status.form,
.countdown.form,
.task.state.form,
.task.state.collection.form,
.reminder.schedule.form,
.recurrence-pattern.form,
.item.form,
.inventory.item.form) :is(.save.action, .send.action, .cancel.action, .reset.action, .back.action):disabled, :is(.challenge.form,
.challenge.category.form,
.activity.form,
.activity.metric.form,
.note.form,
.metric.form,
.studio.form,
.organization.form,
.user-group.form,
.user-role.form,
.policy.form,
.user-right.form,
.workflow.form,
.webhook.form,
.incident.form,
.incident.status.form,
.countdown.form,
.task.state.form,
.task.state.collection.form,
.reminder.schedule.form,
.recurrence-pattern.form,
.item.form,
.inventory.item.form) :is(.save.action, .send.action, .cancel.action, .reset.action, .back.action)[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}

:is(.challenge.form,
.challenge.category.form,
.activity.form,
.activity.metric.form,
.note.form,
.metric.form,
.studio.form,
.organization.form,
.user-group.form,
.user-role.form,
.policy.form,
.user-right.form,
.workflow.form,
.webhook.form,
.incident.form,
.incident.status.form,
.countdown.form,
.task.state.form,
.task.state.collection.form,
.reminder.schedule.form,
.recurrence-pattern.form,
.item.form,
.inventory.item.form) :is(.save.action, .send.action) {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--primary-text-color);
}

:is(.challenge.form,
.challenge.category.form,
.activity.form,
.activity.metric.form,
.note.form,
.metric.form,
.studio.form,
.organization.form,
.user-group.form,
.user-role.form,
.policy.form,
.user-right.form,
.workflow.form,
.webhook.form,
.incident.form,
.incident.status.form,
.countdown.form,
.task.state.form,
.task.state.collection.form,
.reminder.schedule.form,
.recurrence-pattern.form,
.item.form,
.inventory.item.form) :is(.cancel.action, .reset.action, .back.action) {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--secondary-text-color);
}

.task.random.panel .start.action,
.challenge-hub .start.action,
.challenge.state.error .retry.action,
.challenge-reward-toast .dismiss.action,
.achievement.modal.panel .continue.action,
.achievement.modal.panel :is(.close.action, .open.action) {
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
}
.task.random.panel .start.action:focus-visible,
.challenge-hub .start.action:focus-visible,
.challenge.state.error .retry.action:focus-visible,
.challenge-reward-toast .dismiss.action:focus-visible,
.achievement.modal.panel .continue.action:focus-visible,
.achievement.modal.panel :is(.close.action, .open.action):focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.task.random.panel .start.action:hover:not(:disabled, [aria-disabled=true]),
.challenge-hub .start.action:hover:not(:disabled, [aria-disabled=true]),
.challenge.state.error .retry.action:hover:not(:disabled, [aria-disabled=true]),
.challenge-reward-toast .dismiss.action:hover:not(:disabled, [aria-disabled=true]),
.achievement.modal.panel .continue.action:hover:not(:disabled, [aria-disabled=true]),
.achievement.modal.panel :is(.close.action, .open.action):hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.task.random.panel .start.action:disabled, .task.random.panel .start.action[aria-disabled=true],
.challenge-hub .start.action:disabled,
.challenge-hub .start.action[aria-disabled=true],
.challenge.state.error .retry.action:disabled,
.challenge.state.error .retry.action[aria-disabled=true],
.challenge-reward-toast .dismiss.action:disabled,
.challenge-reward-toast .dismiss.action[aria-disabled=true],
.achievement.modal.panel .continue.action:disabled,
.achievement.modal.panel .continue.action[aria-disabled=true],
.achievement.modal.panel :is(.close.action, .open.action):disabled,
.achievement.modal.panel :is(.close.action, .open.action)[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}

.task.random.panel .start.action,
.challenge-hub .start.action,
.challenge.state.error .retry.action,
.achievement.modal.panel .open.action {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--primary-text-color);
}

.challenge-reward-toast .dismiss.action,
.achievement.modal.panel :is(.close.action, .continue.action) {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--secondary-text-color);
}

.risk.form,
.risk.response.form,
.risk.event.form,
.risk.template.form {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--section-gap, var(--spacing-default));
  padding: var(--section-padding, var(--spacing-lg));
}

.risk.form :is(.save.action, .cancel.action),
.risk.response.form :is(.save.action, .cancel.action),
.risk.event.form :is(.save.action, .cancel.action),
.risk.template.form :is(.save.action, .cancel.action),
.risk .add.action.response,
.risk .option.action,
.project-risk-studio :is(.add.action, .trigger.action, .edit.action, .delete.action, .solve.action) {
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
}
.risk.form :is(.save.action, .cancel.action):focus-visible,
.risk.response.form :is(.save.action, .cancel.action):focus-visible,
.risk.event.form :is(.save.action, .cancel.action):focus-visible,
.risk.template.form :is(.save.action, .cancel.action):focus-visible,
.risk .add.action.response:focus-visible,
.risk .option.action:focus-visible,
.project-risk-studio :is(.add.action, .trigger.action, .edit.action, .delete.action, .solve.action):focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.risk.form :is(.save.action, .cancel.action):hover:not(:disabled, [aria-disabled=true]),
.risk.response.form :is(.save.action, .cancel.action):hover:not(:disabled, [aria-disabled=true]),
.risk.event.form :is(.save.action, .cancel.action):hover:not(:disabled, [aria-disabled=true]),
.risk.template.form :is(.save.action, .cancel.action):hover:not(:disabled, [aria-disabled=true]),
.risk .add.action.response:hover:not(:disabled, [aria-disabled=true]),
.risk .option.action:hover:not(:disabled, [aria-disabled=true]),
.project-risk-studio :is(.add.action, .trigger.action, .edit.action, .delete.action, .solve.action):hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.risk.form :is(.save.action, .cancel.action):disabled, .risk.form :is(.save.action, .cancel.action)[aria-disabled=true],
.risk.response.form :is(.save.action, .cancel.action):disabled,
.risk.response.form :is(.save.action, .cancel.action)[aria-disabled=true],
.risk.event.form :is(.save.action, .cancel.action):disabled,
.risk.event.form :is(.save.action, .cancel.action)[aria-disabled=true],
.risk.template.form :is(.save.action, .cancel.action):disabled,
.risk.template.form :is(.save.action, .cancel.action)[aria-disabled=true],
.risk .add.action.response:disabled,
.risk .add.action.response[aria-disabled=true],
.risk .option.action:disabled,
.risk .option.action[aria-disabled=true],
.project-risk-studio :is(.add.action, .trigger.action, .edit.action, .delete.action, .solve.action):disabled,
.project-risk-studio :is(.add.action, .trigger.action, .edit.action, .delete.action, .solve.action)[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}

.risk.form .save.action,
.risk.response.form .save.action,
.risk.event.form .save.action,
.risk.template.form .save.action,
.risk .add.action.response,
.project-risk-studio :is(.add.action.risk, .trigger.action, .solve.action) {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--primary-text-color);
}

.risk.form .cancel.action,
.risk.response.form .cancel.action,
.risk.event.form .cancel.action,
.risk .option.action,
.project-risk-studio :is(.add.action.response, .edit.action) {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--secondary-text-color);
}

.risk .option.action {
  justify-content: flex-start;
  text-align: left;
  width: 100%;
}

.project-risk-studio .delete.action {
  background: var(--danger-color);
  border-color: var(--danger-color);
  color: var(--danger-text-color);
}

.project-risk-studio :is(.template.chip, .status.chip, .count),
.rz-cell-data :is(.template.chip, .count) {
  border-radius: 999px;
  display: inline-flex;
  font-size: var(--font-size-small);
  font-weight: 700;
  padding: 0.2rem 0.55rem;
}

.project-risk-studio .template.chip,
.rz-cell-data .template.chip {
  background: color-mix(in srgb, var(--info-color) 12%, transparent);
  color: var(--info-color);
}

.project-risk-studio .count,
.rz-cell-data .count {
  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
  color: var(--primary-color);
}

.project-risk-studio .status.chip.open {
  background: color-mix(in srgb, var(--warning-color) 16%, transparent);
  color: var(--warning-color);
}

.project-risk-studio .status.chip.solved {
  background: color-mix(in srgb, var(--success-color) 12%, transparent);
  color: var(--success-color);
}

.project-risk-studio .status.chip.empty {
  background: color-mix(in srgb, var(--info-color) 12%, transparent);
  color: var(--info-color);
}

.project.cost.summary.grid {
  display: grid;
  gap: var(--spacing-default);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

.project.cost.summary .summary.item,
.project.cost.series.list .series.form.panel,
.project.cost.series.list .series.item,
.project.cost.series.detail .panel {
  min-width: 0;
}
@media (min-width: 0px) {
  .project.cost.summary .summary.item,
  .project.cost.series.list .series.form.panel,
  .project.cost.series.list .series.item,
  .project.cost.series.detail .panel {
    background: var(--background-card, var(--background-default));
    color: var(--color-card, var(--text-color));
    border-radius: var(--border-radius-card, var(--border-radius-default));
    padding-top: var(--padding-card, var(--padding-default));
    padding-bottom: var(--padding-card, var(--padding-default));
    padding-inline-start: var(--padding-card, var(--padding-default));
    padding-inline-end: var(--padding-card, var(--padding-default));
    margin-top: var(--margin-card, var(--margin-default));
    margin-bottom: var(--margin-card, var(--margin-default));
    margin-inline-start: var(--margin-card, var(--margin-default));
    margin-inline-end: var(--margin-card, var(--margin-default));
    border: var(--border-width-card, var(--border-width-default)) solid var(--border-color-card, var(--border-color-default));
    transition: all var(--transition-duration-default) var(--transition-function-default);
    box-shadow: var(--shadow-card, var(--shadow-default));
  }
}
@media (min-width: 0px) and (prefers-reduced-motion: reduce) {
  .project.cost.summary .summary.item,
  .project.cost.series.list .series.form.panel,
  .project.cost.series.list .series.item,
  .project.cost.series.detail .panel {
    transition: none !important;
  }
}
@media (min-width: 576px) {
  .project.cost.summary .summary.item,
  .project.cost.series.list .series.form.panel,
  .project.cost.series.list .series.item,
  .project.cost.series.detail .panel {
    box-shadow: var(--shadow-card-responsive, var(--shadow-more));
  }
}

.project.cost.summary .summary.item,
.project.cost.series.list,
.project.cost.series.list .series.items,
.project.cost.series.detail,
.project.cost.series.detail .panel > .body {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-default);
  min-width: 0;
}

.project.cost.summary .row,
.project.cost.summary.profit-loss .main,
.project.cost.series.list > header,
.project.cost.series.list .toggle.action,
.project.cost.series.detail .panel > header,
.project.cost.series.detail .summary.row {
  align-items: center;
  display: flex;
  gap: var(--spacing-default);
  justify-content: space-between;
  min-width: 0;
}

.project.cost.series.list .item.header {
  font-size: inherit;
  margin: 0;
}

.project.cost.series.list .toggle.action {
  background: transparent;
  border: 0;
  color: inherit;
  padding: 0;
  text-align: left;
  width: 100%;
}

.project.cost.series.list .toggle.action:hover,
.project.cost.series.list .toggle.action:focus-visible {
  color: var(--primary-color);
}

.project.cost.series.list .item.content.collapsed {
  display: none;
}

.project.cost.series.list .item.content.expanded {
  display: block;
  margin-top: var(--spacing-default);
}

.project.cost.series.detail .overview.grid,
.project.cost.series.detail .fields.row {
  display: grid;
  gap: var(--spacing-default);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.project.cost.series.detail .field {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.project.cost.series.detail .table.area {
  overflow-x: auto;
}

.project.cost.series.detail .value {
  text-align: right;
}

.project.cost.summary .meta,
.project.cost.summary .label {
  min-width: 0;
}

.project.cost.summary .value {
  margin: 0;
}

.project.cost.summary .icon {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--border-radius-default);
  flex: 0 0 auto;
}

.project.cost.summary .icon[data-tone=primary] {
  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
  color: var(--primary-color);
}

.project.cost.summary .icon[data-tone=success] {
  background: color-mix(in srgb, var(--success-color) 12%, transparent);
  color: var(--success-color);
}

.project.cost.summary .icon[data-tone=danger] {
  background: color-mix(in srgb, var(--danger-color) 12%, transparent);
  color: var(--danger-color);
}

.project.cost.summary .status.chip,
.project.cost.series.list .type.chip {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: var(--font-size-small);
  font-weight: 700;
  gap: 0.25rem;
  padding: 0.2rem 0.55rem;
}

.project.cost.summary .status.chip.success,
.project.cost.series.list .type.chip.revenue {
  background: color-mix(in srgb, var(--success-color) 12%, transparent);
  color: var(--success-color);
}

.project.cost.summary .status.chip.warning,
.project.cost.series.list .type.chip.budget {
  background: color-mix(in srgb, var(--warning-color) 16%, transparent);
  color: var(--warning-color);
}

.project.cost.summary .status.chip.danger,
.project.cost.series.list .type.chip.cost {
  background: color-mix(in srgb, var(--danger-color) 12%, transparent);
  color: var(--danger-color);
}

.project.cost.series.list .type.chip.other {
  background: color-mix(in srgb, var(--secondary-color) 12%, transparent);
  color: var(--secondary-color);
}

.project.cost.summary .progress {
  background: color-mix(in srgb, var(--border-color-default) 38%, transparent);
  border-radius: 999px;
  height: 0.6rem;
  overflow: hidden;
}

.project.cost.summary .progress .bar {
  background: var(--progress-color, var(--primary-color));
  height: 100%;
  width: var(--progress, 0%);
}

.project.cost.series.list .state.empty,
.project.cost.series.detail .state.empty {
  display: grid;
  place-items: center;
  min-height: var(--empty-state-min-height, 4rem);
  color: var(--empty-state-color, var(--placeholder-text-color));
  gap: var(--empty-state-gap, var(--spacing-sm));
  padding: var(--empty-state-padding, var(--padding-default));
  text-align: center;
}

.project.cost.series.list :is(.add.action, .save.action, .cancel.action),
.project.cost.series.form :is(.save.action, .cancel.action),
.project.cost.series.detail :is(.add.action, .save.action, .cancel.action, .edit.action, .delete.action) {
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
}
.project.cost.series.list :is(.add.action, .save.action, .cancel.action):focus-visible,
.project.cost.series.form :is(.save.action, .cancel.action):focus-visible,
.project.cost.series.detail :is(.add.action, .save.action, .cancel.action, .edit.action, .delete.action):focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.project.cost.series.list :is(.add.action, .save.action, .cancel.action):hover:not(:disabled, [aria-disabled=true]),
.project.cost.series.form :is(.save.action, .cancel.action):hover:not(:disabled, [aria-disabled=true]),
.project.cost.series.detail :is(.add.action, .save.action, .cancel.action, .edit.action, .delete.action):hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.project.cost.series.list :is(.add.action, .save.action, .cancel.action):disabled, .project.cost.series.list :is(.add.action, .save.action, .cancel.action)[aria-disabled=true],
.project.cost.series.form :is(.save.action, .cancel.action):disabled,
.project.cost.series.form :is(.save.action, .cancel.action)[aria-disabled=true],
.project.cost.series.detail :is(.add.action, .save.action, .cancel.action, .edit.action, .delete.action):disabled,
.project.cost.series.detail :is(.add.action, .save.action, .cancel.action, .edit.action, .delete.action)[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}

.project.cost.series.list :is(.add.action, .save.action),
.project.cost.series.form .save.action,
.project.cost.series.detail :is(.add.action, .save.action) {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--primary-text-color);
}

.project.cost.series.list .cancel.action,
.project.cost.series.form .cancel.action,
.project.cost.series.detail :is(.cancel.action, .edit.action) {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--secondary-text-color);
}

.project.cost.series.detail .delete.action {
  background: var(--danger-color);
  border-color: var(--danger-color);
  color: var(--danger-text-color);
}

.project.cost.series.detail .entry.actions,
.project.cost.series.detail .actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  justify-content: flex-end;
  min-width: 0;
}

.rz-cell-data .response.chip {
  background: color-mix(in srgb, var(--success-color) 12%, transparent);
  border-radius: 999px;
  color: var(--success-color);
  display: inline-flex;
  font-size: var(--font-size-small);
  font-weight: 700;
  padding: 0.2rem 0.55rem;
}

.rz-cell-data .response.chip.missing {
  background: color-mix(in srgb, var(--warning-color) 16%, transparent);
  color: var(--warning-color);
}

.project.reserved-times.page :is(.edit.action, .delete.action, .add.action.reserved-time),
.project.workflow.form .save.action,
.new.action.workflow,
.new.action.webhook,
.clear.action.studio-filter {
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
}
.project.reserved-times.page :is(.edit.action, .delete.action, .add.action.reserved-time):focus-visible,
.project.workflow.form .save.action:focus-visible,
.new.action.workflow:focus-visible,
.new.action.webhook:focus-visible,
.clear.action.studio-filter:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.project.reserved-times.page :is(.edit.action, .delete.action, .add.action.reserved-time):hover:not(:disabled, [aria-disabled=true]),
.project.workflow.form .save.action:hover:not(:disabled, [aria-disabled=true]),
.new.action.workflow:hover:not(:disabled, [aria-disabled=true]),
.new.action.webhook:hover:not(:disabled, [aria-disabled=true]),
.clear.action.studio-filter:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.project.reserved-times.page :is(.edit.action, .delete.action, .add.action.reserved-time):disabled, .project.reserved-times.page :is(.edit.action, .delete.action, .add.action.reserved-time)[aria-disabled=true],
.project.workflow.form .save.action:disabled,
.project.workflow.form .save.action[aria-disabled=true],
.new.action.workflow:disabled,
.new.action.workflow[aria-disabled=true],
.new.action.webhook:disabled,
.new.action.webhook[aria-disabled=true],
.clear.action.studio-filter:disabled,
.clear.action.studio-filter[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}

.project.reserved-times.page :is(.edit.action, .delete.action) {
  flex: 0 0 auto;
  min-height: 2rem;
  min-width: 2rem;
  padding: 0;
  width: 2rem;
}

.project.reserved-times.page :is(.edit.action, .add.action.reserved-time),
.project.workflow.form .save.action,
.new.action.workflow,
.new.action.webhook {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--primary-text-color);
}

.clear.action.studio-filter {
  font-size: var(--button-small-font-size, var(--font-size-small));
  min-height: var(--button-small-min-height, 2rem);
  padding-inline-start: var(--button-small-padding-inline, var(--spacing-sm));
  padding-inline-end: var(--button-small-padding-inline, var(--spacing-sm));
  padding-top: var(--button-small-padding-block, var(--spacing-xs));
  padding-bottom: var(--button-small-padding-block, var(--spacing-xs));
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--secondary-text-color);
}

.project.reserved-times.page .delete.action {
  background: var(--danger-color);
  border-color: var(--danger-color);
  color: var(--danger-text-color);
}

.task-completion.form,
.recurrence-pattern.form,
.task.tracking.activity.picker.form,
.task.tracking.series.picker.form {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-default);
  min-width: 0;
}

.completion-activity {
  background: color-mix(in srgb, var(--primary-color) 4%, var(--background-input));
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 70%, transparent);
  border-radius: var(--border-radius-default);
  display: grid;
  gap: var(--spacing-sm);
  padding: var(--spacing-default);
}

.completion-activity.selected {
  border-color: color-mix(in srgb, var(--primary-color) 32%, var(--border-color-default));
}

.completion-activity > .header,
.completion-activity > .actions {
  align-items: center;
  display: flex;
  gap: var(--spacing-sm);
  justify-content: space-between;
  min-width: 0;
}

.completion-activity > .body.fields,
.recurrence-pattern .body.fields {
  display: grid;
  gap: var(--spacing-default);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--task-completion-grid-min, 12rem)), 1fr));
  min-width: 0;
}

.completion-activity .completion-only {
  align-items: center;
  color: var(--placeholder-text-color);
  display: inline-flex;
  gap: 0.4rem;
  min-height: 2.5rem;
}

.completion-activity .form-field.missing .input,
.completion-activity .form-field.missing .rz-numeric {
  border-color: color-mix(in srgb, var(--danger-color) 58%, var(--border-color-default));
}

.task-completion .validation-message {
  color: var(--danger-color);
  margin: 0;
}

.recurrence-filter,
.recurrence-preview,
.recurrence-preview-list,
.recurrence-choice-list {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  min-width: 0;
  min-width: 0;
}

.recurrence-filter,
.recurrence-preview {
  background: color-mix(in srgb, var(--background-input) 74%, transparent);
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 68%, transparent);
  border-radius: var(--border-radius-default);
  padding: var(--spacing-default);
}

.recurrence-preview h3,
.recurrence-choice-list > label {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
}

.recurrence-preview-list {
  color: var(--placeholder-text-color);
}

.poll.composer {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-default);
  min-width: 0;
  min-width: 0;
}

.poll.composer > .section {
  --background-card: color-mix(in srgb, var(--background-input) 88%, transparent);
  --border-color-card: color-mix(in srgb, var(--border-color-default) 66%, transparent);
  --margin-card: 0;
  --padding-card: clamp(1rem, 2vw, 1.4rem);
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-default);
  min-width: 0;
  min-width: 0;
}

.poll.composer > .section > header {
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
  min-width: 0;
}

.poll.composer > .section .title {
  align-items: center;
  color: var(--text-color);
  display: inline-flex;
  font-size: 1rem;
  gap: var(--spacing-sm);
  line-height: 1.25;
  margin: 0;
  min-width: 0;
}

.poll.composer > .section .title .bi {
  color: var(--primary-color);
}

.poll.composer > .section > .body,
.poll.composer > .section .settings-panel,
.poll.composer .poll.section.editor,
.poll.composer .poll.question.editor,
.poll.composer .poll.options.editor {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-default);
  min-width: 0;
  min-width: 0;
}

.poll.composer > .section > .body.fields,
.poll.composer .poll.settings.fields,
.poll.composer .poll.section.editor > .body.fields,
.poll.composer .poll.question.editor > .body.fields {
  display: grid;
  gap: var(--spacing-default);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--poll-form-grid-min, 17rem)), 1fr));
  min-width: 0;
}

.poll.composer .poll.settings.fields .form-field[data-input-for=poll-description],
.poll.composer .poll.settings.fields .form-field[data-input-for=poll-question-description],
.poll.composer .poll.question.editor .form-field[data-input-for=poll-question-description],
.poll.composer .poll.options.editor {
  grid-column: 1/-1;
}

.poll.composer textarea.input {
  min-height: 6rem;
  resize: vertical;
}

.poll.composer .poll.settings.toggle {
  appearance: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: inherit;
  font: inherit;
  margin: 0;
  padding: 0;
  text-align: inherit;
  cursor: pointer;
  text-decoration: none;
  align-items: center;
  color: var(--primary-color);
  display: flex;
  gap: var(--spacing-sm);
  justify-content: space-between;
  min-height: 2.5rem;
  min-width: 0;
  padding: 0.35rem 0;
  text-align: left;
  width: 100%;
}

.poll.composer .poll.settings.toggle > .title {
  flex: 1 1 auto;
}

.poll.composer .poll.section.editor,
.poll.composer .poll.question.editor,
.poll.composer .poll.options.editor {
  background: color-mix(in srgb, var(--primary-color) 4%, var(--background-input));
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 68%, transparent);
  border-radius: var(--border-radius-default);
  padding: var(--spacing-default);
}

.poll.composer .poll.section.editor > header,
.poll.composer .poll.question.editor > header,
.poll.composer .poll.options.editor > header {
  align-items: center;
  display: flex;
  gap: var(--spacing-sm);
  justify-content: space-between;
  min-width: 0;
}

.poll.composer .poll.options.editor > .content {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  min-width: 0;
}

.poll.composer .poll.option.row {
  align-items: center;
  display: grid;
  gap: var(--spacing-sm);
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
}

.poll.composer .poll.option.row .input {
  min-width: 0;
  width: 100%;
}

.poll.composer .poll.option.row .remove.action {
  flex: 0 0 auto;
  min-height: var(--button-size);
  min-width: var(--button-size);
  padding: 0;
  width: var(--button-size);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--primary-color);
}
.poll.composer .poll.option.row .remove.action:hover:not(:disabled, [aria-disabled=true]) {
  background: color-mix(in srgb, var(--primary-color) 10%, transparent);
  box-shadow: none;
}

.poll.composer > .actions {
  border-top: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 62%, transparent);
  padding-top: var(--spacing-default);
}

@media (max-width: 640px) {
  .task.editor > .actions,
  .project.editor > .actions,
  .poll.composer > .actions {
    align-items: stretch;
    flex-direction: column;
  }
  .task.editor > .actions > .actions,
  .project.editor > .actions > .actions {
    justify-content: stretch;
  }
  .task.editor > .actions > .actions > button,
  .project.editor > .actions > .actions > button,
  .poll.composer > .actions > button {
    flex: 1 1 auto;
  }
}
.reserved-times {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-default);
  min-width: 0;
}

.reserved-times.form {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-default);
  min-width: 0;
}

.reserved-times > .week,
.reserved-times .editor {
  --background-card: color-mix(in srgb, var(--background-input) 82%, transparent);
  --border-color-card: color-mix(in srgb, var(--border-color-default) 72%, transparent);
  --padding-card: clamp(1rem, 2vw, 1.35rem);
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-default);
  min-width: 0;
}
@media (min-width: 0px) {
  .reserved-times > .week,
  .reserved-times .editor {
    background: var(--background-card, var(--background-default));
    color: var(--color-card, var(--text-color));
    border-radius: var(--border-radius-card, var(--border-radius-default));
    padding-top: var(--padding-card, var(--padding-default));
    padding-bottom: var(--padding-card, var(--padding-default));
    padding-inline-start: var(--padding-card, var(--padding-default));
    padding-inline-end: var(--padding-card, var(--padding-default));
    margin-top: var(--margin-card, var(--margin-default));
    margin-bottom: var(--margin-card, var(--margin-default));
    margin-inline-start: var(--margin-card, var(--margin-default));
    margin-inline-end: var(--margin-card, var(--margin-default));
    border: var(--border-width-card, var(--border-width-default)) solid var(--border-color-card, var(--border-color-default));
    transition: all var(--transition-duration-default) var(--transition-function-default);
    box-shadow: var(--shadow-card, var(--shadow-default));
  }
}
@media (min-width: 0px) and (prefers-reduced-motion: reduce) {
  .reserved-times > .week,
  .reserved-times .editor {
    transition: none !important;
  }
}
@media (min-width: 576px) {
  .reserved-times > .week,
  .reserved-times .editor {
    box-shadow: var(--shadow-card-responsive, var(--shadow-more));
  }
}

.reserved-times header,
.access-section > .header,
.access-control .menu-section section > .header,
.access-control-panel > .header,
.current-access > .header,
.add-access > .title {
  align-items: flex-start;
  display: flex;
  gap: var(--spacing-sm);
  justify-content: space-between;
  min-width: 0;
}

.access-section > .header,
.add-access > .title {
  justify-content: flex-start;
}

.reserved-times header .title,
.access-section > .header,
.access-control .menu-section section > .header .title,
.access-control-panel > .header .title,
.current-access > .header .title,
.add-access > .title {
  align-items: center;
  display: inline-flex;
  gap: 0.45rem;
  min-width: 0;
}

.reserved-times .fields {
  display: grid;
  gap: var(--spacing-default);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.reserved-times .form-field.projects {
  grid-column: 1/-1;
}

.reserved-times .project-picker {
  background: var(--background-panel, var(--background-surface, var(--background-input)));
  border: var(--border-panel, var(--border-surface, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-panel, var(--border-radius-card, var(--border-radius-default)));
  box-shadow: var(--shadow-panel, var(--shadow-card, var(--shadow-default)));
  padding-top: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-bottom: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-start: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-end: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  backdrop-filter: var(--filter-panel, none);
  -webkit-backdrop-filter: var(--filter-panel, none);
  --background-panel: color-mix(in srgb, var(--background-input) 76%, transparent);
  --border-panel: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 70%, transparent);
  --padding-panel: var(--spacing-default);
  min-height: 7rem;
}

.reserved-times .project-picker .empty-state {
  margin: 0;
}

.reserved-times .project-option {
  align-items: center;
  display: flex;
  gap: var(--spacing-sm);
}

.reserved-times .actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: flex-start;
  min-width: 0;
}

.reserved-times .week-view-container {
  display: grid;
  gap: var(--spacing-sm);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
  overflow-x: auto;
}

.reserved-times .week-day-column {
  min-width: 0;
}

.reserved-times .week-blocks {
  min-height: 10rem;
  position: relative;
}

.tab-panels > .tab-panel:not(.active),
.tabs.content > .tabs.panel:not(.active) {
  display: none;
}

.access-section,
.access-control .menu-section section,
.access-control-panel {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-default);
  min-width: 0;
}

.access-section,
.access-control .menu-section section {
  background: var(--background-panel, var(--background-surface, var(--background-input)));
  border: var(--border-panel, var(--border-surface, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-panel, var(--border-radius-card, var(--border-radius-default)));
  box-shadow: var(--shadow-panel, var(--shadow-card, var(--shadow-default)));
  padding-top: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-bottom: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-start: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-end: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  backdrop-filter: var(--filter-panel, none);
  -webkit-backdrop-filter: var(--filter-panel, none);
  --background-panel: color-mix(in srgb, var(--background-input) 78%, transparent);
  --border-panel: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 70%, transparent);
  --padding-panel: clamp(1rem, 2vw, 1.25rem);
}

.tabs.access {
  align-items: stretch;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}

.tabs.access > .item,
.tabs.access > .tabs.item {
  margin: 0;
}

.tabs.access .tab-link,
.tabs.access .tabs.link {
  appearance: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: inherit;
  font: inherit;
  margin: 0;
  padding: 0;
  text-align: inherit;
  cursor: pointer;
  text-decoration: none;
  align-items: center;
  background: color-mix(in srgb, var(--background-input) 78%, transparent);
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 78%, transparent);
  border-radius: var(--border-radius-default);
  color: var(--text-color);
  display: flex;
  gap: var(--spacing-sm);
  height: 100%;
  justify-content: flex-start;
  min-width: min(100%, 17rem);
  padding: 0.7rem 0.85rem;
  text-align: left;
}

.tabs.access .tab-link.active,
.tabs.access .tabs.link.active {
  background: color-mix(in srgb, var(--primary-color) 12%, var(--background-input));
  border-color: color-mix(in srgb, var(--primary-color) 42%, var(--border-color-default));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary-color) 18%, transparent);
}

.tabs.access .content,
.tabs.access .tabs.label {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.tabs.access .title,
.tabs.access strong {
  line-height: 1.2;
}

.tabs.access .principal.indicator {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  flex: 0 0 2rem;
  height: 2rem;
  justify-content: center;
  width: 2rem;
}

.tabs.access .principal.indicator.user {
  background: var(--primary-color);
  color: var(--primary-text-color);
}

.tabs.access .principal.indicator.group {
  background: var(--secondary-color);
  color: var(--secondary-text-color);
}

.access-control-panel {
  background: transparent;
  min-width: 0;
}

.access-control-panel > .header {
  border-bottom: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 70%, transparent);
  padding-bottom: var(--spacing-sm);
}

.access-control-panel .current-access,
.access-control-panel .add-access {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  min-width: 0;
}

.access-control-panel hr {
  border: 0;
  border-top: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 60%, transparent);
  margin: 0;
}

.access-control-panel h6,
.access-control-panel p {
  margin: 0;
}

.access-control-panel .list-group {
  display: grid;
  gap: var(--spacing-sm);
}

.access-control-panel .list-group-item {
  align-items: center;
  background: color-mix(in srgb, var(--background-input) 78%, transparent);
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 74%, transparent);
  border-radius: var(--border-radius-default);
  display: flex;
  gap: var(--spacing-sm);
  justify-content: space-between;
  min-width: 0;
  padding: 0.75rem;
}

.access-control-panel .item-info,
.access-control-panel .item-actions {
  min-width: 0;
}

.access-control-panel .item-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: flex-end;
}

.access-control-panel .count {
  align-items: center;
  background: var(--info-color);
  border-radius: 999px;
  color: var(--info-text-color);
  display: inline-flex;
  font-size: var(--font-size-small);
  font-weight: 700;
  justify-content: center;
  min-height: 1.75rem;
  min-width: 1.75rem;
  padding: 0.1rem 0.55rem;
}

.access-control-panel .add.action,
.access-control-panel .cancel.action,
.access-control-panel .remove.action,
.access.invitation .cancel.action,
.access-modal-overlay .cancel.action,
.access-modal-overlay .remove.action,
.access-modal-overlay .close.action {
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
}
.access-control-panel .add.action:focus-visible,
.access-control-panel .cancel.action:focus-visible,
.access-control-panel .remove.action:focus-visible,
.access.invitation .cancel.action:focus-visible,
.access-modal-overlay .cancel.action:focus-visible,
.access-modal-overlay .remove.action:focus-visible,
.access-modal-overlay .close.action:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.access-control-panel .add.action:hover:not(:disabled, [aria-disabled=true]),
.access-control-panel .cancel.action:hover:not(:disabled, [aria-disabled=true]),
.access-control-panel .remove.action:hover:not(:disabled, [aria-disabled=true]),
.access.invitation .cancel.action:hover:not(:disabled, [aria-disabled=true]),
.access-modal-overlay .cancel.action:hover:not(:disabled, [aria-disabled=true]),
.access-modal-overlay .remove.action:hover:not(:disabled, [aria-disabled=true]),
.access-modal-overlay .close.action:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.access-control-panel .add.action:disabled, .access-control-panel .add.action[aria-disabled=true],
.access-control-panel .cancel.action:disabled,
.access-control-panel .cancel.action[aria-disabled=true],
.access-control-panel .remove.action:disabled,
.access-control-panel .remove.action[aria-disabled=true],
.access.invitation .cancel.action:disabled,
.access.invitation .cancel.action[aria-disabled=true],
.access-modal-overlay .cancel.action:disabled,
.access-modal-overlay .cancel.action[aria-disabled=true],
.access-modal-overlay .remove.action:disabled,
.access-modal-overlay .remove.action[aria-disabled=true],
.access-modal-overlay .close.action:disabled,
.access-modal-overlay .close.action[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}

.access-control-panel .add.action {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--primary-text-color);
}

.access-control-panel .remove.action,
.access-modal-overlay .remove.action {
  background: var(--danger-color);
  border-color: var(--danger-color);
  color: var(--danger-text-color);
}

.access-control-panel .cancel.action,
.access.invitation .cancel.action,
.access-modal-overlay .cancel.action {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--secondary-text-color);
}

.access.invitation .pending-item .cancel.action,
.access-modal-overlay .close.action {
  flex: 0 0 auto;
  min-height: var(--button-icon-size, var(--button-size));
  min-width: var(--button-icon-size, var(--button-size));
  padding: 0;
  width: var(--button-icon-size, var(--button-size));
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--secondary-color);
}
.access.invitation .pending-item .cancel.action:hover:not(:disabled, [aria-disabled=true]),
.access-modal-overlay .close.action:hover:not(:disabled, [aria-disabled=true]) {
  background: color-mix(in srgb, var(--secondary-color) 10%, transparent);
  box-shadow: none;
}

.access-control-panel .role-selector {
  min-width: min(100%, 12rem);
}

.access-control-panel .state.empty,
.access-control-panel .search.hint,
.access-remove-dropzone {
  align-items: center;
  background: color-mix(in srgb, var(--background-input) 62%, transparent);
  border: var(--border-width-default) dashed color-mix(in srgb, var(--border-color-default) 72%, transparent);
  border-radius: var(--border-radius-default);
  color: var(--placeholder-text-color);
  display: grid;
  gap: 0.25rem;
  justify-items: center;
  min-height: 4.5rem;
  padding: var(--spacing-default);
  text-align: center;
}

.access-remove-dropzone {
  min-height: 2.75rem;
  padding: 0.55rem;
}

.access-control-panel .input-group {
  align-items: center;
  display: grid;
  gap: var(--spacing-sm);
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.access-control-panel .input-group-text {
  align-items: center;
  color: var(--placeholder-text-color);
  display: inline-flex;
}

.access-control-panel .input-group > .input.text {
  width: 100%;
}

.access-status {
  align-items: center;
  display: inline-flex;
  gap: 0.25rem;
}

.entity-view.section {
  background: var(--background-panel, var(--background-surface, var(--background-input)));
  border: var(--border-panel, var(--border-surface, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-panel, var(--border-radius-card, var(--border-radius-default)));
  box-shadow: var(--shadow-panel, var(--shadow-card, var(--shadow-default)));
  padding-top: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-bottom: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-start: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-end: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  backdrop-filter: var(--filter-panel, none);
  -webkit-backdrop-filter: var(--filter-panel, none);
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--entity-view-gap, var(--spacing-default));
  min-width: 0;
  --entity-view-control-height: 3rem;
  --entity-view-control-radius: var(--border-radius-default);
  --background-panel: color-mix(in srgb, var(--background-input) 86%, transparent);
  --border-panel: var(--border-width-default) solid color-mix(in srgb, #ffffff 62%, transparent);
  --padding-panel: clamp(1rem, 2vw, 1.4rem);
  margin-block-end: var(--spacing-default);
  min-width: 0;
}

.entity-view.section > .header {
  display: grid;
  gap: var(--spacing-default);
  min-width: 0;
  position: relative;
  z-index: 2;
}

.entity-view.section > .header > .search.filters {
  background: color-mix(in srgb, var(--background-input) 90%, transparent);
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 62%, transparent);
  border-radius: var(--border-radius-default);
  box-shadow: 0 1rem 2.25rem color-mix(in srgb, var(--shadow-color, #1f2937) 7%, transparent);
  display: grid;
  gap: var(--spacing-default);
  min-width: 0;
  padding: clamp(1rem, 2vw, 1.35rem);
}

.entity-view.section > .header > .search.filters > .header {
  min-width: 0;
}

.entity-view.section > .header > .search.filters > .header .title {
  color: var(--text-color);
  font-size: 1.15rem;
  line-height: 1.25;
  margin: 0;
}

.entity-view.section > .header > .search.filters > .content {
  align-items: end;
  display: grid;
  gap: clamp(0.75rem, 1.4vw, 1.05rem);
  grid-template-columns: minmax(16rem, 1fr) minmax(8rem, 12rem) auto;
  min-width: 0;
}

.entity-view.section > .header > .search.filters > .content:has(.filter.entity.sort) {
  grid-template-columns: minmax(16rem, 1fr) minmax(10rem, 14rem) minmax(9rem, 10rem) auto;
}

.entity-view.section > .content {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--entity-view-content-gap, 0.85rem);
  min-width: 0;
  background: color-mix(in srgb, var(--background-input) 90%, transparent);
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 62%, transparent);
  border-radius: var(--border-radius-default);
  box-shadow: 0 1rem 2.25rem color-mix(in srgb, var(--shadow-color, #1f2937) 7%, transparent);
  min-width: 0;
  overflow: hidden;
  padding: clamp(1.9rem, 2.8vw, 2.5rem) 0 0;
  position: relative;
  z-index: 1;
}

.entity-view.section .create {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--primary-text-color);
  align-items: center;
  display: inline-flex;
  gap: 0.4rem;
  min-inline-size: max-content;
  min-height: var(--entity-view-control-height);
  white-space: nowrap;
}

.entity-view.section .retry {
  background: transparent;
  border-color: var(--secondary-color);
  box-shadow: none;
  color: var(--secondary-color);
}
.entity-view.section .retry:hover:not(:disabled, [aria-disabled=true]) {
  background: color-mix(in srgb, var(--secondary-color) 12%, transparent);
  border-color: var(--secondary-color);
  box-shadow: none;
  color: var(--secondary-color);
}

.entity-view.section .filter.entity {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

.entity-view.section .filter.entity label,
.entity-view.section .filters.project label,
.entity-view.section .filters.task label {
  color: var(--placeholder-text-color);
  font-size: var(--font-size-small);
  font-weight: 700;
  height: auto !important;
  line-height: 1.2;
  min-height: 0;
  padding: 0 !important;
}

.entity-view.section .filter.entity.search {
  min-width: 0;
}

.entity-view.section .filter.entity.perpage {
  min-inline-size: 9rem;
  min-width: 0;
}

.entity-view.section .filter.entity.sort {
  min-width: 0;
}

.entity-view.section .filters.task {
  display: grid;
  gap: var(--spacing-sm);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  width: min(100%, 36rem);
}

.entity-view.section .filters.project {
  display: grid;
  gap: var(--spacing-sm);
  grid-template-columns: minmax(14rem, 1fr) minmax(12rem, 0.9fr);
  min-width: 0;
}

.entity-view.section .filters.task .form-floating {
  display: grid;
  gap: 0.3rem;
}

.entity-view.section .filters.task .form-floating input,
.entity-view.section .filters.task .form-floating label {
  grid-area: auto;
  position: static;
}

.entity-view.section .filters.task .form-floating label {
  order: -1;
}

.entity-view.section .filters.task .filter.task,
.entity-view.section .filters.project,
.entity-view.section .tag-search-component.section {
  display: grid;
  gap: 0.3rem;
}

.entity-view.section .filter.entity .input,
.entity-view.section .filters.project .input,
.entity-view.section .filters.task .input,
.entity-view.section .tag-search-component.section .input {
  min-height: 2.75rem;
  min-width: 0;
  width: 100%;
}

.entity-view.section .filter.entity .input,
.entity-view.section .filter.entity .rz-dropdown,
.entity-view.section .filter.entity.search .search-field > .input {
  background: color-mix(in srgb, var(--background-input) 96%, transparent);
  border-color: color-mix(in srgb, var(--border-color-default) 68%, transparent);
  border-radius: var(--entity-view-control-radius);
  box-shadow: 0 0.8rem 1.5rem color-mix(in srgb, var(--shadow-color, #1f2937) 8%, transparent), inset 0 1px 0 color-mix(in srgb, #ffffff 70%, transparent);
  min-height: var(--entity-view-control-height);
  min-width: 0;
  width: 100%;
}

.entity-view.section .filter.entity.search .search-field {
  position: relative;
}

.entity-view.section .filter.entity.search .search-field::before {
  bottom: calc((var(--entity-view-control-height) - 1em) / 2);
  color: color-mix(in srgb, var(--placeholder-text-color) 82%, var(--text-color));
  content: "\f52a";
  font-family: "bootstrap-icons";
  font-size: 1.05rem;
  left: var(--spacing-default);
  line-height: 1;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.entity-view.section .filter.entity.search .search-field > .input {
  padding-inline-start: calc(var(--padding-input-inline, var(--padding-default)) + 1.9rem);
}

.entity-view.section .filter.entity .rz-dropdown-label {
  align-items: center;
  display: grid;
  height: calc(var(--entity-view-control-height) - 2px);
  justify-content: flex-start;
  line-height: 1;
  padding-block: 0;
  padding-inline: var(--padding-input-inline, var(--padding-default));
}

.entity-view.section .filter.entity.perpage .rz-dropdown-label {
  align-content: center;
  align-items: center;
  block-size: 100%;
  display: flex;
  line-height: 1;
  min-inline-size: 0;
  padding-block: 0 !important;
  padding-inline-end: 2.75rem;
}

.entity-view.section .filter.entity.perpage .rz-dropdown-label > span,
.entity-view.section .filter.entity.perpage .rz-dropdown-label .rz-dropdown-label-text {
  align-items: center;
  display: inline-flex;
  line-height: 1;
  margin: 0;
  padding: 0;
  transform: none;
}

.entity-view.section .filter.entity .rz-dropdown-trigger {
  color: var(--placeholder-text-color);
  width: 2.75rem;
}

.entity-view.section > .header > .tabs.view-mode {
  align-items: center;
  background: color-mix(in srgb, var(--background-input) 94%, transparent);
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 58%, transparent);
  border-radius: var(--entity-view-control-radius);
  box-shadow: 0 0.8rem 1.5rem color-mix(in srgb, var(--shadow-color, #1f2937) 8%, transparent), inset 0 1px 0 color-mix(in srgb, #ffffff 72%, transparent);
  display: inline-flex;
  gap: 0.2rem;
  justify-self: start;
  margin-block-end: calc(var(--entity-view-control-height) * -0.85);
  margin-inline-start: clamp(0.55rem, 1.2vw, 1rem);
  min-height: var(--entity-view-control-height);
  min-width: 0;
  overflow: hidden;
  padding: 0.25rem;
  position: relative;
  transform: translateY(0.42rem);
  z-index: 3;
}

.entity-view.section .tabs.view-mode .tab {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: calc(var(--entity-view-control-radius) - 0.25rem);
  box-shadow: none;
  color: var(--text-color);
  display: inline-flex;
  gap: 0.45rem;
  justify-content: center;
  font-weight: 500;
  min-height: calc(var(--entity-view-control-height) - 0.55rem);
  min-width: 6rem;
  padding: 0.45rem 1.1rem;
}

.entity-view.section .tabs.view-mode .tab:not(:last-child) {
  border-inline-end: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 52%, transparent);
}

.entity-view.section .tabs.view-mode .tab.active,
.entity-view.section .tabs.view-mode .tab[aria-pressed=true] {
  background: color-mix(in srgb, var(--primary-color) 9%, var(--background-input));
  border-radius: calc(var(--entity-view-control-radius) - 0.25rem) !important;
  border-end-end-radius: calc(var(--entity-view-control-radius) - 0.25rem);
  border-end-start-radius: calc(var(--entity-view-control-radius) - 0.25rem);
  border-inline-end-color: transparent;
  color: var(--primary-color);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 75%, transparent);
}

.entity-view.cards,
.entity-view.list,
.entity-view.table {
  min-width: 0;
}

.entity-view.cards.rz-datalist,
.entity-view.cards.rz-datalist-content,
.entity-view.list.rz-datalist,
.entity-view.list.rz-datalist-content,
.entity-view.table,
.entity-readiness.state.empty {
  border-start-end-radius: var(--border-radius-large);
  border-start-start-radius: var(--border-radius-large);
}

.entity-view.section > .content > .entity-view.cards,
.entity-view.section > .content > .entity-view.list,
.entity-view.section > .content > .entity-view.table,
.entity-view.section > .content > .entity-readiness.state.empty {
  margin-block-start: 0;
}

.entity-view.section > .content > .entity-readiness.state.empty {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding-block: clamp(2rem, 4vw, 3rem);
}

.entity-view.section .entity-readiness.state.empty,
.entity-view.section .entity-readiness.state.empty > .content {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.entity-view.section .entity-readiness.state.empty > .message {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.entity-view.section .state.empty,
.entity-view.section .empty-state {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.entity-view.section .entity-readiness.state.empty > i {
  color: color-mix(in srgb, var(--primary-color) 62%, var(--placeholder-text-color));
}

.entity-view.cards .rz-datalist-data,
.entity-view.list .rz-datalist-data {
  display: grid;
  gap: var(--spacing-default);
  margin: 0;
  padding: 0;
}

.entity-view.cards .rz-datalist-data {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.entity-view.list.rz-datalist-content {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  overflow: hidden;
}

.entity-view.list .rz-datalist-data {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  gap: 0;
}

.entity-view.cards .rz-datalist-item,
.entity-view.list .rz-datalist-item {
  list-style: none;
  min-width: 0;
}

.entity-view.list .rz-datalist-data + .rz-datalist-data,
.entity-view.list .rz-datalist-item + .rz-datalist-item {
  border-top: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 54%, transparent);
}

.entity-view.list .rz-datalist-data > li,
.entity-view.list .rz-datalist-item {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
}

.entity-view.list .item.row {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  gap: var(--spacing-sm);
  margin: 0;
  min-height: 3.15rem;
  min-width: 0;
  padding: 0.85rem 1rem;
}

.entity-view.list .item.row:hover {
  background: color-mix(in srgb, var(--primary-color) 5%, transparent);
}

.entity-view.list .item.row .content,
.entity-view.list .item.row .title {
  min-width: 0;
  overflow-wrap: anywhere;
}

.entity-view.table {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  overflow: hidden;
}

.entity-view.table .rz-grid-table {
  min-width: 100%;
}

.entity-view.table i.status.success {
  color: var(--success-color);
}

.entity-view.table i.status.warning {
  color: var(--warning-color);
}

.entity-view.table i.status.danger {
  color: var(--danger-color);
}

.entity-view.table .rz-paginator,
.entity-view.cards .rz-paginator,
.entity-view.list .rz-paginator {
  background: transparent;
  border-top: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 65%, transparent);
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-sm);
}

.task.item,
.entity.item,
.project.item,
.profile.item,
.challenge.item,
.organization.item,
.studio.item,
.channel.item,
.app-ui.category.item,
.app-ui.item.user {
  --background-card: color-mix(in srgb, var(--background-input) 92%, transparent);
  --border-color-card: color-mix(in srgb, var(--border-color-default) 70%, transparent);
  --margin-card: 0;
  min-width: 0;
}
@media (min-width: 0px) {
  .task.item,
  .entity.item,
  .project.item,
  .profile.item,
  .challenge.item,
  .organization.item,
  .studio.item,
  .channel.item,
  .app-ui.category.item,
  .app-ui.item.user {
    background: var(--background-card, var(--background-default));
    color: var(--color-card, var(--text-color));
    border-radius: var(--border-radius-card, var(--border-radius-default));
    padding-top: var(--padding-card, var(--padding-default));
    padding-bottom: var(--padding-card, var(--padding-default));
    padding-inline-start: var(--padding-card, var(--padding-default));
    padding-inline-end: var(--padding-card, var(--padding-default));
    margin-top: var(--margin-card, var(--margin-default));
    margin-bottom: var(--margin-card, var(--margin-default));
    margin-inline-start: var(--margin-card, var(--margin-default));
    margin-inline-end: var(--margin-card, var(--margin-default));
    border: var(--border-width-card, var(--border-width-default)) solid var(--border-color-card, var(--border-color-default));
    transition: all var(--transition-duration-default) var(--transition-function-default);
    box-shadow: var(--shadow-card, var(--shadow-default));
  }
}
@media (min-width: 0px) and (prefers-reduced-motion: reduce) {
  .task.item,
  .entity.item,
  .project.item,
  .profile.item,
  .challenge.item,
  .organization.item,
  .studio.item,
  .channel.item,
  .app-ui.category.item,
  .app-ui.item.user {
    transition: none !important;
  }
}
@media (min-width: 576px) {
  .task.item,
  .entity.item,
  .project.item,
  .profile.item,
  .challenge.item,
  .organization.item,
  .studio.item,
  .channel.item,
  .app-ui.category.item,
  .app-ui.item.user {
    box-shadow: var(--shadow-card-responsive, var(--shadow-more));
  }
}

.channel.item,
.app-ui.category.item,
.app-ui.item.user {
  overflow: hidden;
}

.task.item,
.entity.item,
.project.item {
  overflow: visible;
  position: relative;
}

.task.item {
  display: grid;
  gap: var(--spacing-sm);
}

.entity.item {
  display: grid;
  gap: var(--spacing-sm);
}

.entity.item > .content {
  padding-inline-end: calc(var(--hyper-menu-button-size, 2.25rem) + var(--spacing-sm));
}

.task.item > .header {
  align-items: flex-start;
  display: grid;
  gap: var(--spacing-sm);
  grid-template-columns: auto minmax(0, 1fr);
}

.task.item .content,
.task.item .title,
.task.item .date,
.task.item .description,
.task.item .meta {
  min-width: 0;
}

.task.item .title {
  margin: 0;
}

.task.item > .header > .content {
  padding-inline-end: calc(var(--hyper-menu-button-size, 2.25rem) + var(--spacing-sm));
}

.task.item .date,
.task.item .meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: flex-start;
  min-width: 0;
  color: var(--placeholder-text-color);
  font-size: var(--font-size-small);
}

.task.item.is-compact {
  --padding-card: 0.45rem;
  gap: 0.28rem;
}

.task.item.is-compact > .header {
  gap: 0.45rem;
}

.task.item.is-compact .title {
  font-size: 0.82rem;
  line-height: 1.25;
}

.task.item.is-compact .date,
.task.item.is-compact .meta {
  font-size: 0.68rem;
  gap: 0.25rem;
  line-height: 1.2;
}

.task.item.is-compact .title.trigger,
.task.item.is-compact .title.text {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-drag-source {
  display: block;
  min-width: 0;
}

.task.item .selection {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
}

.task.item .milestone.action {
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 76%, transparent);
  border-radius: 50%;
  color: var(--placeholder-text-color);
  height: 1.35rem;
  margin-top: 0.1rem;
  width: 1.35rem;
}

.task.item .completion.action {
  align-items: center;
  aspect-ratio: 1;
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 76%, transparent);
  border-radius: 50%;
  box-sizing: border-box;
  color: var(--placeholder-text-color);
  display: inline-flex;
  flex: 0 0 1.55rem;
  height: 1.55rem;
  justify-content: center;
  line-height: 1;
  margin-top: 0.05rem;
  min-height: 1.55rem;
  min-width: 1.55rem;
  padding: 0;
  width: 1.55rem;
}

.task.item .completion.action.incomplete {
  background: color-mix(in srgb, var(--background-input) 72%, transparent);
}

.task.item .completion.action.completed {
  background: color-mix(in srgb, var(--success-color) 14%, var(--background-input));
  border-color: color-mix(in srgb, var(--success-color) 42%, var(--border-color-default));
  color: var(--success-color);
}

.task.item .completion.action.add-occurrence {
  background: color-mix(in srgb, var(--primary-color) 13%, var(--background-input));
  border-color: color-mix(in srgb, var(--primary-color) 48%, var(--border-color-default));
  color: var(--primary-color);
}

.task.item .completion.action:disabled {
  cursor: wait;
  opacity: 0.72;
}

.task.item .completion.action:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset-small);
}

.task.item .milestone.action.milestone-completed {
  background: color-mix(in srgb, var(--success-color) 14%, var(--background-input));
  border-color: color-mix(in srgb, var(--success-color) 42%, var(--border-color-default));
  color: var(--success-color);
}

.task.item .milestone.action.milestone-ready {
  background: color-mix(in srgb, var(--primary-color) 12%, var(--background-input));
  border-color: color-mix(in srgb, var(--primary-color) 42%, var(--border-color-default));
  color: var(--primary-color);
}

.task.item .milestone.action.milestone-blocked,
.task.item .milestone.action.milestone-future {
  background: color-mix(in srgb, var(--warning-color) 10%, var(--background-input));
  border-color: color-mix(in srgb, var(--warning-color) 34%, var(--border-color-default));
  color: color-mix(in srgb, var(--warning-color) 78%, var(--text-color));
}

.task.item .milestone-blocking {
  color: color-mix(in srgb, var(--warning-color) 72%, var(--placeholder-text-color));
  font-size: var(--font-size-small);
  font-weight: 700;
}

.task.item .milestone-predecessors {
  border-top: var(--border-width-default) dashed color-mix(in srgb, var(--border-color-default) 72%, transparent);
  color: var(--placeholder-text-color);
  font-size: var(--font-size-small);
  padding-top: var(--spacing-xs);
}

.task.item .description,
.note.item .description,
.project.item .description {
  color: var(--placeholder-text-color);
  overflow-wrap: anywhere;
}

.notes.explorer :is(.new.action.folder, .save.action.folder, .cancel.action.folder, .rename.action.folder) {
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
}
.notes.explorer :is(.new.action.folder, .save.action.folder, .cancel.action.folder, .rename.action.folder):focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.notes.explorer :is(.new.action.folder, .save.action.folder, .cancel.action.folder, .rename.action.folder):hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.notes.explorer :is(.new.action.folder, .save.action.folder, .cancel.action.folder, .rename.action.folder):disabled, .notes.explorer :is(.new.action.folder, .save.action.folder, .cancel.action.folder, .rename.action.folder)[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}

.notes.explorer :is(.new.action.folder, .save.action.folder) {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--primary-text-color);
}

.notes.explorer :is(.cancel.action.folder, .rename.action.folder) {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--secondary-text-color);
}

.task.item .habit-days {
  align-items: center;
  display: flex;
  gap: 0.35rem;
  min-width: 0;
  padding-inline: calc(1.55rem + var(--spacing-sm)) calc(var(--hyper-menu-button-size, 2.25rem) + var(--spacing-sm));
}

.task.item .habit-day {
  align-items: center;
  background: color-mix(in srgb, var(--background-input) 68%, transparent);
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 72%, transparent);
  border-radius: 50%;
  color: var(--placeholder-text-color);
  display: inline-flex;
  flex: 0 0 0.72rem;
  height: 0.72rem;
  justify-content: center;
  min-height: 0;
  min-width: 0;
  padding: 0;
  position: relative;
  width: 0.72rem;
}

.task.item .habit-day.completed {
  background: color-mix(in srgb, var(--success-color) 58%, var(--background-input));
  border-color: color-mix(in srgb, var(--success-color) 48%, var(--border-color-default));
}

.task.item .habit-day.current {
  box-shadow: 0 0 0 0.16rem color-mix(in srgb, var(--primary-color) 18%, transparent);
}

.task.item .habit-day.multiple {
  flex-basis: 0.9rem;
  height: 0.9rem;
  width: 0.9rem;
}

.task.item .habit-day .count {
  align-items: center;
  background: var(--background-input);
  border: var(--border-width-default) solid color-mix(in srgb, var(--primary-color) 30%, var(--border-color-default));
  border-radius: 999px;
  color: var(--primary-color);
  display: inline-flex;
  font-size: 0.55rem;
  font-weight: 700;
  height: 0.82rem;
  justify-content: center;
  line-height: 1;
  min-width: 0.82rem;
  padding-inline: 0.1rem;
  position: absolute;
  right: -0.45rem;
  top: -0.45rem;
}

.task.item > .menu,
.entity.item > .menu,
.project.item > .menu {
  position: absolute;
  right: var(--spacing-sm);
  top: var(--spacing-sm);
  z-index: 6;
}

.task.item > .drop-target {
  background: transparent;
  border: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  padding: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 2.75rem;
  z-index: 2;
}

.task.item > .drop-target:first-of-type {
  left: 0;
}

.task.item > .drop-target:nth-of-type(2) {
  right: 0;
}

.task.item > .drop-target.can-drop {
  pointer-events: auto;
}

.task.item .preceding,
.task.item .following {
  align-items: center;
  background: color-mix(in srgb, var(--primary-color) 12%, var(--background-input));
  border: var(--border-width-default) solid color-mix(in srgb, var(--primary-color) 42%, var(--border-color-default));
  border-radius: var(--border-radius-default);
  color: var(--primary-color);
  display: flex;
  height: 100%;
  justify-content: center;
  min-height: 3rem;
  opacity: 0.96;
  width: 100%;
}

.task.item > .drop-target:not(.can-drop) .preceding,
.task.item > .drop-target:not(.can-drop) .following,
.task.item .preceding.is-hidden,
.task.item .following.is-hidden {
  display: none;
}

.task.item > .drop-target.can-drop .preceding,
.task.item > .drop-target.can-drop .following {
  display: flex;
}

.quick-enter {
  display: grid;
  gap: var(--spacing-default);
}

.quick-enter > textarea.input.text {
  border-radius: var(--border-radius-default);
  min-height: 6.5rem;
  resize: vertical;
}

.quick-enter .preview-overlay {
  background: color-mix(in srgb, var(--background-input) 94%, transparent);
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 72%, transparent);
  border-radius: var(--border-radius-default);
  box-shadow: var(--shadow-default);
  display: grid;
  gap: var(--spacing-default);
  padding: var(--spacing-default);
}

.quick-entry-project-empty {
  align-items: center;
  background: color-mix(in srgb, var(--warning-color) 9%, var(--background-input));
  border: var(--border-width-default) solid color-mix(in srgb, var(--warning-color) 32%, var(--border-color-default));
  border-radius: var(--border-radius-default);
  color: var(--text-color);
  display: flex;
  gap: var(--spacing-xs);
  min-width: 0;
  padding: var(--spacing-sm);
}

.quick-entry-project-empty > .bi {
  color: var(--warning-color);
  flex: 0 0 auto;
}

.quick-entry-project-empty span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.quick-enter .preview-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: space-between;
}

.quick-enter .preview-actions .create {
  min-width: 10rem;
}

.modal .created.tasks {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.modal .created.tasks .item {
  align-items: center;
  display: flex;
  gap: var(--spacing-sm);
}

.quick-entry-actions .skip.action {
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
  background: transparent;
  border-color: var(--primary-color);
  box-shadow: none;
  color: var(--primary-color);
}
.quick-entry-actions .skip.action:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.quick-entry-actions .skip.action:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.quick-entry-actions .skip.action:disabled, .quick-entry-actions .skip.action[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}
.quick-entry-actions .skip.action:hover:not(:disabled, [aria-disabled=true]) {
  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
  border-color: var(--primary-color);
  box-shadow: none;
  color: var(--primary-color);
}

.kanban-shell {
  --kanban-board-gap: var(--spacing-default);
  --kanban-lane-body-gap: var(--spacing-sm);
  --kanban-lane-min-height: 18rem;
  --kanban-task-list-gap: var(--spacing-sm);
  margin-block: var(--spacing-default);
}

.kanban-toolbar {
  background: color-mix(in srgb, var(--background-input) 94%, transparent);
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 62%, transparent);
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-card);
  box-shadow: var(--shadow-default);
  padding-top: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
  padding-inline-start: var(--spacing-sm);
  padding-inline-end: var(--spacing-sm);
}

.kanban-grouping-tabs {
  background: color-mix(in srgb, var(--background-default) 72%, var(--background-input));
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 70%, transparent);
  border-radius: var(--border-radius-default);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffffff 28%, transparent);
  padding: 0.2rem;
}

.kanban-grouping-tab {
  appearance: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: inherit;
  font: inherit;
  margin: 0;
  padding: 0;
  text-align: inherit;
  border-radius: var(--border-radius-small);
  color: var(--text-color);
  cursor: pointer;
  font-weight: 700;
  min-height: 2.45rem;
  padding: 0.45rem 0.7rem;
}
.kanban-grouping-tab:focus-visible {
  outline: var(--focus-width) solid var(--focus-color, var(--primary-color));
  outline-offset: 2px;
  border-radius: var(--border-radius-small);
}

.kanban-grouping-tab:hover {
  background: color-mix(in srgb, var(--primary-color) 8%, transparent);
  color: var(--primary-color);
}

.kanban-grouping-tab[aria-pressed=true],
.kanban-grouping-tab[aria-pressed=true]:hover,
.kanban-grouping-tab[aria-pressed=true]:focus-visible {
  background: var(--primary-color);
  box-shadow: var(--shadow-button);
  color: var(--primary-text-color);
}

.kanban-board {
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb-bg) var(--scrollbar-track-bg);
  /* Chrome, Edge, Safari */
  scrollbar-gutter: stable;
}
.kanban-board::-webkit-scrollbar {
  width: var(--scrollbar-width-thin);
  height: var(--scrollbar-width-thin);
}
.kanban-board::-webkit-scrollbar-track {
  background: var(--scrollbar-track-bg);
}
.kanban-board::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-bg);
  border-radius: calc(var(--scrollbar-width-thin) / 2);
}
.kanban-board::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover-bg);
}

.kanban-lane,
.kanban-section-lane {
  --background-drop-target: color-mix(in srgb, var(--background-input) 92%, transparent);
  --border-drop-target: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 68%, transparent);
  --border-radius-drop-target: var(--border-radius-card);
  --padding-drop-target: var(--spacing-default);
  --shadow-drop-target: var(--shadow-default);
}

.kanban-lane-drop,
.kanban-section-lane {
  background: var(--background-drop-target);
  border: var(--border-drop-target);
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-drop-target);
  box-shadow: var(--shadow-drop-target);
  padding-top: var(--padding-drop-target);
  padding-bottom: var(--padding-drop-target);
  padding-inline-start: var(--padding-drop-target);
  padding-inline-end: var(--padding-drop-target);
  gap: var(--spacing-sm);
}

.kanban-lane-drop.can-drop {
  border-color: color-mix(in srgb, var(--primary-color) 38%, var(--border-color-default));
}

.kanban-lane-drop.is-drop-hover {
  background: color-mix(in srgb, var(--primary-color) 9%, var(--background-input));
  box-shadow: var(--shadow-default), inset 0 0 0 2px color-mix(in srgb, var(--primary-color) 46%, transparent);
}

.kanban-lane-header {
  border-bottom: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 55%, transparent);
  padding-bottom: var(--spacing-sm);
}

.kanban-lane-title h2 {
  color: var(--text-color);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.2;
}

.kanban-lane-count {
  align-items: center;
  background: var(--primary-color);
  border-radius: 999px;
  color: var(--primary-text-color);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.86rem;
  font-weight: 800;
  height: 2rem;
  justify-content: center;
  min-width: 2rem;
  padding-inline: 0.45rem;
}

.kanban-lane-empty {
  background: color-mix(in srgb, var(--background-default) 68%, var(--background-input));
  border: var(--border-width-default) dashed color-mix(in srgb, var(--border-color-default) 82%, transparent);
  border-radius: var(--border-radius-default);
  color: var(--placeholder-text-color);
  min-height: 7.5rem;
  padding: var(--spacing-default);
}

.kanban-lane-empty .bi {
  color: color-mix(in srgb, var(--primary-color) 58%, var(--placeholder-text-color));
  font-size: 1.4rem;
}

.kanban-empty-title {
  color: var(--text-color);
  font-weight: 800;
}

.kanban-empty-body {
  font-size: var(--font-size-small);
  line-height: 1.35;
}

.kanban-lane-actions {
  border-top: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 48%, transparent);
  padding-top: var(--spacing-sm);
}

.kanban-lane-actions .quick-enter {
  gap: var(--spacing-sm);
}

.kanban-lane-actions .quick-enter > textarea.input.text {
  box-shadow: none;
  font-size: var(--font-size-small);
  min-height: 3rem;
  resize: vertical;
}

.kanban-lane-actions .quick-enter .preview-overlay {
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
}

.kanban-lane-actions .quick-enter .preview-actions .create {
  min-width: 0;
}

.kanban-add-task {
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--primary-color);
  font-weight: 800;
  min-height: 2.35rem;
}
.kanban-add-task:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.kanban-add-task:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.kanban-add-task:disabled, .kanban-add-task[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}
.kanban-add-task:hover:not(:disabled, [aria-disabled=true]) {
  background: color-mix(in srgb, var(--primary-color) 10%, transparent);
  box-shadow: none;
}

.kanban-task-card.is-draggable {
  cursor: grab;
}

.kanban-task-card.is-draggable:active {
  cursor: grabbing;
}

.kanban-task-card .task.item {
  --background-card: color-mix(in srgb, var(--background-input) 96%, transparent);
  --border-color-card: color-mix(in srgb, var(--border-color-default) 72%, transparent);
  --border-radius-card: 0.45rem;
  --padding-card: 0.7rem;
  --shadow-card: 0 0.18rem 0.55rem rgba(18, 51, 88, 0.1);
}

.kanban-task-card .task.item:hover {
  --background-card: color-mix(in srgb, var(--primary-color) 5%, var(--background-input));
  --border-color-card: color-mix(in srgb, var(--primary-color) 26%, var(--border-color-default));
  transform: translateY(-1px);
}

.kanban-task-card .task.item > .header {
  gap: 0.55rem;
}

.kanban-task-card .task.item .title {
  font-size: 0.94rem;
  line-height: 1.28;
}

.kanban-task-card .task.item .date,
.kanban-task-card .task.item .meta {
  font-size: 0.76rem;
}

.task-preview-card {
  background: color-mix(in srgb, var(--background-input) 96%, transparent);
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 74%, transparent);
  border-radius: var(--border-radius-default);
  box-shadow: var(--shadow-default);
  display: grid;
  gap: var(--spacing-default);
  padding: var(--spacing-default);
}

.task-preview-main {
  align-items: flex-start;
  display: grid;
  gap: var(--spacing-sm);
  grid-template-columns: auto minmax(0, 1fr);
}

.task-preview-check {
  border: 2px solid color-mix(in srgb, var(--placeholder-text-color) 58%, transparent);
  border-radius: 50%;
  height: 1.1rem;
  margin-top: 0.2rem;
  width: 1.1rem;
}

.task-preview-content,
.task-preview-title {
  min-width: 0;
}

.task-preview-content {
  display: grid;
  gap: var(--spacing-sm);
}

.task-preview-title-row,
.task-preview-fields {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.task-preview-title {
  color: var(--text-color);
  font-size: 1rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.task-preview-chip {
  align-items: center;
  background: color-mix(in srgb, var(--primary-color) 8%, var(--background-default));
  border: var(--border-width-default) solid color-mix(in srgb, var(--primary-color) 20%, var(--border-color-default));
  border-radius: var(--border-radius-default);
  color: var(--placeholder-text-color);
  display: inline-flex;
  font-size: var(--font-size-small);
  gap: 0.35rem;
  min-height: 2rem;
  padding: 0.25rem 0.55rem;
}

.quick-entry-project {
  align-items: center;
  display: flex;
  flex: 1 1 16rem;
  gap: var(--spacing-sm);
  min-width: min(100%, 16rem);
}

.quick-entry-project label {
  color: var(--placeholder-text-color);
  font-size: var(--font-size-small);
  font-weight: 700;
}

.quick-entry-project .rz-dropdown {
  flex: 1 1 11rem;
  min-width: 11rem;
}

.task-preview-card .templates-section {
  border-top: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 62%, transparent);
  display: grid;
  gap: var(--spacing-sm);
  padding-top: var(--spacing-sm);
}

.task-preview-card .templates-section .header,
.task-preview-card .template-item .content,
.task-preview-card .template-actions,
.task-preview-card .template-badges {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.task-preview-card .template-item {
  background: color-mix(in srgb, var(--primary-color) 5%, var(--background-input));
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 68%, transparent);
  border-radius: var(--border-radius-default);
  padding: var(--spacing-sm);
}

.task-preview-card .template-info {
  display: grid;
  flex: 1 1 16rem;
  gap: 0.35rem;
}

.task-preview-card .template-info h6 {
  margin: 0;
}

.project.item {
  display: grid;
  padding: 0;
}

.channel.item,
.app-ui.category.item,
.app-ui.item.user {
  display: grid;
  gap: var(--spacing-sm);
}

.project.item > .header,
.project.item > .content,
.project.item > .footer {
  padding: var(--spacing-default);
}

.project.item > .header {
  display: grid;
  gap: var(--spacing-sm);
  padding-inline-end: calc(var(--spacing-default) + var(--hyper-menu-button-size, 2.25rem));
  padding-bottom: var(--spacing-sm);
}

.project.item .progress {
  background: color-mix(in srgb, var(--border-color-default) 50%, transparent);
  border-radius: 999px;
  height: 0.35rem;
  overflow: hidden;
  position: relative;
}

.project.item .progress .current,
.project.item .progress .forecast {
  inset-block: 0;
  inset-inline-start: 0;
  position: absolute;
  width: var(--progress, 0%);
}

.project.item .progress .current {
  background: var(--primary-color);
}

.project.item .progress .forecast {
  background: color-mix(in srgb, var(--secondary-color) 72%, transparent);
  opacity: 0.8;
}

.project.item .title {
  margin: 0;
  overflow-wrap: anywhere;
}

.project.item .tasks {
  border-top: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 65%, transparent);
  display: grid;
  gap: var(--spacing-sm);
  padding-top: var(--spacing-sm);
}

.project.item .tasks > .summary {
  appearance: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: inherit;
  font: inherit;
  margin: 0;
  padding: 0;
  text-align: inherit;
  align-items: center;
  border-radius: var(--border-radius-small);
  color: var(--placeholder-text-color);
  display: flex;
  font-size: var(--font-size-small);
  gap: var(--spacing-sm);
  justify-content: space-between;
  padding: var(--spacing-xs) 0;
  text-align: left;
}

.project.item .tasks > .summary:hover,
.project.item .tasks > .summary:focus-visible {
  color: var(--text-color);
}

.project.item .tasks > .content {
  display: grid;
  gap: var(--spacing-sm);
}

.project.item .meta,
.project.item .footer {
  color: var(--placeholder-text-color);
  font-size: var(--font-size-small);
}

.project.item > .footer {
  align-items: center;
  border-top: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 65%, transparent);
  display: flex;
  gap: var(--spacing-sm);
  justify-content: space-between;
}

.channel.item > .header,
.app-ui.category.item > .header {
  align-items: flex-start;
  display: flex;
  gap: var(--spacing-sm);
  justify-content: space-between;
}

.channel.item > .content,
.app-ui.category.item > .content,
.app-ui.category.item > .footer {
  display: grid;
  gap: var(--spacing-sm);
}

.channel.item .title,
.app-ui.category.item .title,
.channel.item .description,
.app-ui.category.item .description {
  margin: 0;
  overflow-wrap: anywhere;
}

.channel.item .description,
.channel.item .meta,
.app-ui.category.item .description,
.app-ui.category.item .placeholder-text {
  color: var(--placeholder-text-color);
  font-size: var(--font-size-small);
}

.channel.item .meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-start;
  min-width: 0;
}

.messages.workspace,
.project.channels.workspace {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-default);
  min-width: 0;
}

.project.channels.header {
  background: var(--background-panel, var(--background-surface, var(--background-input)));
  border: var(--border-panel, var(--border-surface, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-panel, var(--border-radius-card, var(--border-radius-default)));
  box-shadow: var(--shadow-panel, var(--shadow-card, var(--shadow-default)));
  padding-top: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-bottom: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-start: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-end: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  backdrop-filter: var(--filter-panel, none);
  -webkit-backdrop-filter: var(--filter-panel, none);
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-default);
  min-width: 0;
}

.project.channels.header > div:first-child {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: flex-start;
  min-width: 0;
}

.project.channels.header .bi-hash {
  color: var(--primary-color);
  font-size: 1.35rem;
}

.project.channels.header h1,
.project.channels.header p,
.conversation .state.empty h2,
.conversation .state.empty h3,
.conversation .state.empty p {
  margin: 0;
}

.project.channels.header p,
.conversation .state.empty p,
.conversation.list .selector.action .preview,
.conversation.list .selector.action .meta {
  color: var(--placeholder-text-color);
}

.channel.create.fields {
  align-items: end;
  display: grid;
  gap: var(--spacing-sm);
  grid-template-columns: minmax(0, 1fr) auto;
}

.message.search.modal,
.message.search.intro > div,
.message.search.result > .content > div,
.message.search.result.empty > div {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.message.search.intro {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: flex-start;
  min-width: 0;
}

.message.search.intro > .bi {
  align-items: center;
  background: var(--empty-icon-background, linear-gradient(145deg, color-mix(in srgb, var(--background-input) 98%, transparent), color-mix(in srgb, var(--primary-color) 8%, var(--background-input))));
  border: var(--empty-icon-border, var(--border-width-default) solid color-mix(in srgb, #ffffff 78%, transparent));
  border-radius: 999px;
  box-shadow: var(--empty-icon-shadow, 0 1rem 2.2rem color-mix(in srgb, var(--shadow-color, #1f2937) 18%, transparent), 0 0 0 0.65rem color-mix(in srgb, var(--primary-color) 7%, transparent));
  color: var(--empty-icon-color, var(--primary-color));
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 1.25rem;
  height: 3rem;
  justify-content: center;
  line-height: 1;
  width: 3rem;
}

.message.search.intro h2,
.message.search.intro p,
.message.search.result strong,
.message.search.result span {
  margin: 0;
}

.message.search.intro p,
.message.search.result span {
  color: var(--placeholder-text-color);
  font-size: var(--font-size-small);
}

.message.search.result {
  background: var(--background-input);
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 76%, transparent);
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-default);
  box-shadow: none;
  padding-top: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
  padding-inline-start: var(--spacing-sm);
  padding-inline-end: var(--spacing-sm);
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: space-between;
  min-width: 0;
}

.message.search.result .content {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: flex-start;
  min-width: 0;
  min-width: 0;
}

.message.search.result.empty {
  justify-content: flex-start;
}

.message.search.result.empty > .bi {
  align-items: center;
  background: var(--empty-icon-background, linear-gradient(145deg, color-mix(in srgb, var(--background-input) 98%, transparent), color-mix(in srgb, var(--primary-color) 8%, var(--background-input))));
  border: var(--empty-icon-border, var(--border-width-default) solid color-mix(in srgb, #ffffff 78%, transparent));
  border-radius: 999px;
  box-shadow: var(--empty-icon-shadow, 0 1rem 2.2rem color-mix(in srgb, var(--shadow-color, #1f2937) 18%, transparent), 0 0 0 0.65rem color-mix(in srgb, var(--primary-color) 7%, transparent));
  color: var(--empty-icon-color, var(--primary-color));
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 1.2rem;
  height: 3rem;
  justify-content: center;
  line-height: 1;
  width: 3rem;
}

.message.search.state,
.channel.create.feedback {
  --background-status: color-mix(in srgb, var(--primary-color) 5%, transparent);
  --border-status: var(--border-width-default) solid color-mix(in srgb, var(--primary-color) 20%, var(--border-color-default));
  background: var(--background-status, var(--background-panel, var(--background-input)));
  border: var(--border-status, var(--border-panel, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-status, var(--border-radius-default));
  box-shadow: var(--shadow-status, none);
  padding-top: var(--padding-status, var(--spacing-default));
  padding-bottom: var(--padding-status, var(--spacing-default));
  padding-inline-start: var(--padding-status, var(--spacing-default));
  padding-inline-end: var(--padding-status, var(--spacing-default));
}

.new.message.action,
.conversation .start.action,
.conversation .create.action,
.project.channels.header .create.action {
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
}
.new.message.action:focus-visible,
.conversation .start.action:focus-visible,
.conversation .create.action:focus-visible,
.project.channels.header .create.action:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.new.message.action:hover:not(:disabled, [aria-disabled=true]),
.conversation .start.action:hover:not(:disabled, [aria-disabled=true]),
.conversation .create.action:hover:not(:disabled, [aria-disabled=true]),
.project.channels.header .create.action:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.new.message.action:disabled, .new.message.action[aria-disabled=true],
.conversation .start.action:disabled,
.conversation .start.action[aria-disabled=true],
.conversation .create.action:disabled,
.conversation .create.action[aria-disabled=true],
.project.channels.header .create.action:disabled,
.project.channels.header .create.action[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}

.new.message.action,
.conversation .start.action,
.conversation .create.action,
.project.channels.header .create.action {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--primary-text-color);
}

.conversation.workspace.grid {
  align-items: stretch;
  display: grid;
  gap: var(--spacing-default);
  grid-template-columns: minmax(15rem, 20rem) minmax(0, 1fr);
  min-height: clamp(26rem, 100vh - 10rem, 48rem);
  min-width: 0;
}

.conversation.rail,
.conversation.pane {
  background: var(--background-panel, var(--background-surface, var(--background-input)));
  border: var(--border-panel, var(--border-surface, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-panel, var(--border-radius-card, var(--border-radius-default)));
  box-shadow: var(--shadow-panel, var(--shadow-card, var(--shadow-default)));
  padding-top: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-bottom: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-start: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-end: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  backdrop-filter: var(--filter-panel, none);
  -webkit-backdrop-filter: var(--filter-panel, none);
  min-width: 0;
}

.conversation.rail {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

.conversation.rail > .rail.header {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: space-between;
  min-width: 0;
  border-bottom: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 72%, transparent);
  padding: var(--spacing-default);
}

.conversation.rail > .rail.header > div {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  min-width: 0;
}

.conversation.rail > .rail.header h2 {
  font-size: var(--font-size-large);
  margin: 0;
}

.conversation.rail > .rail.header span {
  color: var(--placeholder-text-color);
  font-size: var(--font-size-small);
}

.conversation.list {
  min-width: 0;
  overflow: auto;
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb-bg) var(--scrollbar-track-bg);
  /* Chrome, Edge, Safari */
  display: grid;
  gap: var(--spacing-xs);
  list-style: none;
  margin: 0;
  padding: var(--spacing-sm);
}
.conversation.list::-webkit-scrollbar {
  width: var(--scrollbar-width-thin);
  height: var(--scrollbar-width-thin);
}
.conversation.list::-webkit-scrollbar-track {
  background: var(--scrollbar-track-bg);
}
.conversation.list::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-bg);
  border-radius: calc(var(--scrollbar-width-thin) / 2);
}
.conversation.list::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover-bg);
}

.conversation.list .selector.action {
  appearance: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: inherit;
  font: inherit;
  margin: 0;
  padding: 0;
  text-align: inherit;
  align-items: center;
  border-radius: var(--border-radius-default);
  cursor: pointer;
  display: grid;
  gap: var(--spacing-sm);
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 3.75rem;
  padding: var(--spacing-sm);
  width: 100%;
  transition: background-color var(--transition-duration-fast) var(--transition-function-default), color var(--transition-duration-fast) var(--transition-function-default), box-shadow var(--transition-duration-fast) var(--transition-function-default);
}
.conversation.list .selector.action:focus-visible {
  outline: var(--focus-width) solid var(--focus-color, var(--primary-color));
  outline-offset: var(--focus-offset-small);
  border-radius: var(--border-radius-default);
}

.conversation.list .selector.action:hover,
.conversation.list .selector.action:focus-visible,
.conversation.list .selector.action[aria-current=true] {
  background: color-mix(in srgb, var(--primary-color) 10%, transparent);
}

.conversation.list .selector.action[aria-current=true] {
  box-shadow: inset 3px 0 0 var(--primary-color);
}

.conversation.list .selector.action .content {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.conversation.list .selector.action .title,
.conversation.list .selector.action .preview {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation.list .selector.action .title {
  font-weight: 700;
}

.conversation.list .selector.action .preview,
.conversation.list .selector.action .meta {
  font-size: var(--font-size-small);
}

.conversation.list .selector.action .glyph {
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
  border-radius: 50%;
  color: var(--primary-color);
  font-weight: 700;
  height: 2.25rem;
  width: 2.25rem;
}

.conversation .state.loading,
.conversation .state.empty {
  --empty-state-padding: var(--spacing-lg);
  display: grid;
  place-items: center;
  min-height: 14rem;
  color: var(--empty-state-color, var(--placeholder-text-color));
  gap: var(--empty-state-gap, var(--spacing-sm));
  padding: var(--empty-state-padding, var(--padding-default));
  text-align: center;
}

.conversation .state.empty > .bi {
  align-items: center;
  background: var(--empty-icon-background, linear-gradient(145deg, color-mix(in srgb, var(--background-input) 98%, transparent), color-mix(in srgb, var(--primary-color) 8%, var(--background-input))));
  border: var(--empty-icon-border, var(--border-width-default) solid color-mix(in srgb, #ffffff 78%, transparent));
  border-radius: 999px;
  box-shadow: var(--empty-icon-shadow, 0 1rem 2.2rem color-mix(in srgb, var(--shadow-color, #1f2937) 18%, transparent), 0 0 0 0.65rem color-mix(in srgb, var(--primary-color) 7%, transparent));
  color: var(--empty-icon-color, var(--primary-color));
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 1.45rem;
  height: 4rem;
  justify-content: center;
  line-height: 1;
  width: 4rem;
}

.conversation.pane {
  display: flex;
  overflow: hidden;
  padding: 0;
}

.conversation.pane > .conversation.chat {
  background: transparent;
  border: 0;
  box-shadow: none;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  margin: 0;
  min-height: 0;
  min-width: 0;
  padding: 0;
}

.conversation.pane > .conversation.chat > header {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: space-between;
  min-width: 0;
  border-bottom: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 72%, transparent);
  padding: var(--spacing-default);
}

.conversation.pane > .conversation.chat h5 {
  font-size: var(--font-size-large);
  margin: 0;
}

.conversation.pane .messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: var(--spacing-default);
}

.conversation.pane .composer-shell {
  background: var(--background-panel, var(--background-input));
  border-top: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 72%, transparent);
  bottom: 0;
  padding: var(--spacing-default);
  position: sticky;
}

.conversation.browser {
  min-width: 0;
}
@media (min-width: 0px) {
  .conversation.browser {
    background: var(--background-card, var(--background-default));
    color: var(--color-card, var(--text-color));
    border-radius: var(--border-radius-card, var(--border-radius-default));
    padding-top: var(--padding-card, var(--padding-default));
    padding-bottom: var(--padding-card, var(--padding-default));
    padding-inline-start: var(--padding-card, var(--padding-default));
    padding-inline-end: var(--padding-card, var(--padding-default));
    margin-top: var(--margin-card, var(--margin-default));
    margin-bottom: var(--margin-card, var(--margin-default));
    margin-inline-start: var(--margin-card, var(--margin-default));
    margin-inline-end: var(--margin-card, var(--margin-default));
    border: var(--border-width-card, var(--border-width-default)) solid var(--border-color-card, var(--border-color-default));
    transition: all var(--transition-duration-default) var(--transition-function-default);
    box-shadow: var(--shadow-card, var(--shadow-default));
  }
}
@media (min-width: 0px) and (prefers-reduced-motion: reduce) {
  .conversation.browser {
    transition: none !important;
  }
}
@media (min-width: 576px) {
  .conversation.browser {
    box-shadow: var(--shadow-card-responsive, var(--shadow-more));
  }
}

.conversation.browser > .content {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-default);
  min-width: 0;
}

.conversation.browser > .content > ul {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-default);
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.conversation.browser .count.unread,
.notifications.section .count,
.chat.section .count {
  align-items: center;
  background: var(--primary-color);
  border-radius: 999px;
  color: var(--primary-text-color);
  display: inline-flex;
  font-size: var(--font-size-small);
  font-weight: 700;
  justify-content: center;
  min-height: 1.65rem;
  min-width: 1.65rem;
  padding: 0.1rem 0.5rem;
}

.notifications.section .status.unread {
  background: var(--danger-color);
  border-radius: 999px;
  display: inline-block;
  height: 0.65rem;
  width: 0.65rem;
}

.notifications.section :is(.accept.action, .decline.action, .open.action, .show-all.action),
.chat.section .show-all.action,
.conversation.browser .add.action,
.channel.form :is(.save.action, .cancel.action),
.message.search.modal :is(.cancel.action, .search.action, .message.action),
.attachment.action,
.whiteboard .open.action,
.poll.embed .edit.action {
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
}
.notifications.section :is(.accept.action, .decline.action, .open.action, .show-all.action):focus-visible,
.chat.section .show-all.action:focus-visible,
.conversation.browser .add.action:focus-visible,
.channel.form :is(.save.action, .cancel.action):focus-visible,
.message.search.modal :is(.cancel.action, .search.action, .message.action):focus-visible,
.attachment.action:focus-visible,
.whiteboard .open.action:focus-visible,
.poll.embed .edit.action:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.notifications.section :is(.accept.action, .decline.action, .open.action, .show-all.action):hover:not(:disabled, [aria-disabled=true]),
.chat.section .show-all.action:hover:not(:disabled, [aria-disabled=true]),
.conversation.browser .add.action:hover:not(:disabled, [aria-disabled=true]),
.channel.form :is(.save.action, .cancel.action):hover:not(:disabled, [aria-disabled=true]),
.message.search.modal :is(.cancel.action, .search.action, .message.action):hover:not(:disabled, [aria-disabled=true]),
.attachment.action:hover:not(:disabled, [aria-disabled=true]),
.whiteboard .open.action:hover:not(:disabled, [aria-disabled=true]),
.poll.embed .edit.action:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.notifications.section :is(.accept.action, .decline.action, .open.action, .show-all.action):disabled, .notifications.section :is(.accept.action, .decline.action, .open.action, .show-all.action)[aria-disabled=true],
.chat.section .show-all.action:disabled,
.chat.section .show-all.action[aria-disabled=true],
.conversation.browser .add.action:disabled,
.conversation.browser .add.action[aria-disabled=true],
.channel.form :is(.save.action, .cancel.action):disabled,
.channel.form :is(.save.action, .cancel.action)[aria-disabled=true],
.message.search.modal :is(.cancel.action, .search.action, .message.action):disabled,
.message.search.modal :is(.cancel.action, .search.action, .message.action)[aria-disabled=true],
.attachment.action:disabled,
.attachment.action[aria-disabled=true],
.whiteboard .open.action:disabled,
.whiteboard .open.action[aria-disabled=true],
.poll.embed .edit.action:disabled,
.poll.embed .edit.action[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}

.notifications.section .accept.action,
.channel.form .save.action,
.message.search.modal :is(.search.action, .message.action) {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--primary-text-color);
}

.notifications.section :is(.decline.action, .open.action, .show-all.action),
.chat.section .show-all.action,
.conversation.browser .add.action,
.channel.form .cancel.action,
.message.search.modal .cancel.action,
.attachment.action,
.whiteboard .open.action {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--secondary-text-color);
}

.attachment.action {
  font-size: var(--button-small-font-size, var(--font-size-small));
  min-height: var(--button-small-min-height, 2rem);
  padding-inline-start: var(--button-small-padding-inline, var(--spacing-sm));
  padding-inline-end: var(--button-small-padding-inline, var(--spacing-sm));
  padding-top: var(--button-small-padding-block, var(--spacing-xs));
  padding-bottom: var(--button-small-padding-block, var(--spacing-xs));
  background: transparent;
  border-color: var(--secondary-color);
  box-shadow: none;
  color: var(--secondary-color);
}
.attachment.action:hover:not(:disabled, [aria-disabled=true]) {
  background: color-mix(in srgb, var(--secondary-color) 12%, transparent);
  border-color: var(--secondary-color);
  box-shadow: none;
  color: var(--secondary-color);
}

.poll.embed .status.chip.closed {
  background: color-mix(in srgb, var(--info-color) 12%, transparent);
  border-radius: 999px;
  color: var(--info-color);
  display: inline-flex;
  font-size: var(--font-size-small);
  font-weight: 700;
  padding: 0.2rem 0.55rem;
}

.poll.embed .edit.action {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--primary-color);
}
.poll.embed .edit.action:hover:not(:disabled, [aria-disabled=true]) {
  background: color-mix(in srgb, var(--primary-color) 10%, transparent);
  box-shadow: none;
}

@media (max-width: 860px) {
  .channel.create.fields,
  .conversation.workspace.grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .conversation.workspace.grid {
    min-height: auto;
  }
  .conversation.rail {
    max-height: 22rem;
  }
  .conversation.pane {
    min-height: 34rem;
  }
}
.app-ui.category.item ul {
  display: grid;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.app-ui.category.item ul .item {
  align-items: center;
  display: flex;
  gap: 0.4rem;
}

.app-ui.category.item ul .bi {
  color: var(--primary-color);
}

.app-ui.category.item > .footer {
  border-top: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 65%, transparent);
  margin-top: var(--spacing-xs);
  padding-top: var(--spacing-sm);
}

.app-ui.category.item > .edit.action {
  color: inherit;
  display: block;
  text-decoration: none;
}

.app-ui.category.item > .footer .edit.action {
  background: transparent;
  border-color: var(--secondary-color);
  box-shadow: none;
  color: var(--secondary-color);
  justify-self: start;
}
.app-ui.category.item > .footer .edit.action:hover:not(:disabled, [aria-disabled=true]) {
  background: color-mix(in srgb, var(--secondary-color) 12%, transparent);
  border-color: var(--secondary-color);
  box-shadow: none;
  color: var(--secondary-color);
}

.statistics.expander {
  background: var(--background-panel, var(--background-surface, var(--background-input)));
  border: var(--border-panel, var(--border-surface, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-panel, var(--border-radius-card, var(--border-radius-default)));
  box-shadow: var(--shadow-panel, var(--shadow-card, var(--shadow-default)));
  padding-top: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-bottom: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-start: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-end: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  backdrop-filter: var(--filter-panel, none);
  -webkit-backdrop-filter: var(--filter-panel, none);
  display: grid;
  gap: var(--spacing-sm);
}

.statistics.expander > summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-weight: 700;
  gap: var(--spacing-xs);
  list-style: none;
}

.statistics.expander > summary::-webkit-details-marker {
  display: none;
}

.statistics.expander > summary::after {
  color: var(--placeholder-text-color);
  content: "\f282";
  font-family: "bootstrap-icons";
  margin-left: auto;
  transition: transform var(--transition-duration-fast, 150ms) ease;
}

.statistics.expander[open] > summary::after {
  transform: rotate(180deg);
}

.statistics.explorer {
  align-items: stretch;
  display: grid;
  gap: var(--spacing-default);
  grid-template-columns: clamp(23rem, 30vw, 30rem) minmax(0, 1fr);
  min-height: min(72vh, 48rem);
  min-width: 0;
}

.statistics.explorer.expanded {
  grid-template-columns: auto minmax(0, 1fr);
}

.statistics.explorer .filters {
  background: var(--background-panel, var(--background-surface, var(--background-input)));
  border: var(--border-panel, var(--border-surface, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-panel, var(--border-radius-card, var(--border-radius-default)));
  box-shadow: var(--shadow-panel, var(--shadow-card, var(--shadow-default)));
  padding-top: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-bottom: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-start: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-end: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  backdrop-filter: var(--filter-panel, none);
  -webkit-backdrop-filter: var(--filter-panel, none);
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-default);
  min-width: 0;
  --background-panel: color-mix(in srgb, var(--background-input) 88%, transparent);
  --border-panel: var(--border-width-default) solid color-mix(in srgb, #ffffff 62%, transparent);
  max-height: calc(100vh - 9rem);
  min-width: 0;
  overflow: auto;
}

.statistics.explorer .filters > .header,
.statistics.source .selected.activity {
  align-items: center;
  display: flex;
  gap: var(--spacing-sm);
  justify-content: space-between;
  min-width: 0;
}

.statistics.explorer .filters > .header h3 {
  margin: 0;
}

.statistics-filter-toolbar {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: var(--spacing-xs);
}

.statistics-filter-toolbar .hyper-menu {
  flex: 0 0 auto;
}

.statistics.explorer .panel.actions .actions {
  display: grid;
  gap: var(--spacing-xs);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.statistics.explorer .panel.actions .action {
  --button-font-weight: 600;
  --button-min-height: 2.35rem;
  --border-radius-button: 0.42rem;
  --padding-button-block: 0.38rem;
  --padding-button-inline: 0.62rem;
  --shadow-button: 0 0.35rem 0.9rem color-mix(in srgb, var(--shadow-color, #1f2937) 6%, transparent);
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
  background: color-mix(in srgb, var(--background-input) 92%, transparent);
  border-color: color-mix(in srgb, var(--border-color-default) 68%, transparent);
  color: var(--text-color);
  font-size: 0.82rem;
  justify-content: flex-start;
  min-width: 0;
}
.statistics.explorer .panel.actions .action:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.statistics.explorer .panel.actions .action:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.statistics.explorer .panel.actions .action:disabled, .statistics.explorer .panel.actions .action[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}

.statistics.explorer .panel.actions .action:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--primary-color) 32%, var(--border-color-default));
  color: var(--primary-color);
}

.statistics.explorer .panel.actions .add.comparison.action {
  --background-button: var(--primary-color);
  --background-button-hover: color-mix(in srgb, var(--primary-color) 88%, var(--secondary-color));
  --border-color-button: var(--primary-color);
  --color-button: var(--primary-text-color);
}

.statistics.explorer .panel.actions .action span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.breadcrumbs .preset.selector.action {
  background: transparent;
  border-color: var(--secondary-color);
  box-shadow: none;
  color: var(--secondary-color);
  min-height: 2.35rem;
  padding-inline: 0.75rem;
}
.breadcrumbs .preset.selector.action:hover:not(:disabled, [aria-disabled=true]) {
  background: color-mix(in srgb, var(--secondary-color) 12%, transparent);
  border-color: var(--secondary-color);
  box-shadow: none;
  color: var(--secondary-color);
}

.statistics.explorer .global.controls {
  display: grid;
  gap: var(--spacing-sm);
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

.statistics.explorer .global.controls .form-field,
.statistics.explorer .global.controls .form-field.aggregate {
  min-width: 0;
}

.statistics.explorer .aggregate.options {
  background: color-mix(in srgb, var(--background-input) 78%, transparent);
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 70%, transparent);
  border-radius: var(--border-radius-default);
  display: grid;
  gap: 0.2rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0.2rem;
}

.statistics.explorer .aggregate.option {
  background: var(--light-color);
  border-color: var(--light-color);
  color: var(--light-text-color);
  align-items: center;
  border-color: transparent;
  display: inline-flex;
  gap: var(--spacing-2xs, 0.25rem);
  justify-content: center;
  min-height: 2.05rem;
  min-width: 0;
  padding: 0.25rem 0.35rem;
}

.statistics.explorer .aggregate.option[aria-pressed=true] {
  background: var(--primary-color);
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 24%, transparent);
  color: var(--primary-text-color);
  font-weight: 700;
}

.statistics.explorer .filter.panel.toggle.action {
  --background-button: color-mix(in srgb, var(--background-input) 94%, transparent);
  --background-button-hover: color-mix(in srgb, var(--primary-color) 8%, var(--background-input));
  --border-color-button: color-mix(in srgb, var(--border-color-default) 70%, transparent);
  --border-radius-button: 0.45rem;
  --color-button: var(--text-color);
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
  align-items: center;
  aspect-ratio: 1;
  display: inline-flex;
  justify-content: center;
  min-height: 2.25rem;
  padding: 0;
}
.statistics.explorer .filter.panel.toggle.action:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.statistics.explorer .filter.panel.toggle.action:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.statistics.explorer .filter.panel.toggle.action:disabled, .statistics.explorer .filter.panel.toggle.action[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}

.statistics.explorer .filter.panel.toggle.action:hover {
  --border-color-button: color-mix(in srgb, var(--primary-color) 32%, var(--border-color-default));
  --color-button: var(--primary-color);
}

.statistics.explorer .filter.collapsed {
  align-self: start;
}

.statistics.explorer .block .menu.toggle.action,
.statistics.source .measure.toggle.action,
.statistics.line.settings .more.action {
  --background-button: var(--hyper-menu-button-background, var(--primary-color));
  --background-button-hover: var(--hyper-menu-button-hover-background, color-mix(in srgb, var(--primary-color) 86%, var(--secondary-color)));
  --border-color-button: var(--hyper-menu-button-border-color, var(--primary-color));
  --color-button: var(--hyper-menu-button-color, var(--primary-text-color));
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
  border-radius: 1000px;
  align-items: center;
  aspect-ratio: 1;
  display: inline-flex;
  justify-content: center;
  min-height: var(--hyper-menu-button-size, 2.25rem);
  padding: 0;
}
.statistics.explorer .block .menu.toggle.action:focus-visible,
.statistics.source .measure.toggle.action:focus-visible,
.statistics.line.settings .more.action:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.statistics.explorer .block .menu.toggle.action:hover:not(:disabled, [aria-disabled=true]),
.statistics.source .measure.toggle.action:hover:not(:disabled, [aria-disabled=true]),
.statistics.line.settings .more.action:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.statistics.explorer .block .menu.toggle.action:disabled, .statistics.explorer .block .menu.toggle.action[aria-disabled=true],
.statistics.source .measure.toggle.action:disabled,
.statistics.source .measure.toggle.action[aria-disabled=true],
.statistics.line.settings .more.action:disabled,
.statistics.line.settings .more.action[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}

.statistics.source .clear.action,
.statistics.preset.picker .delete.action,
.statistics.source .remove.action {
  background: var(--light-color);
  border-color: var(--light-color);
  color: var(--light-text-color);
  align-items: center;
  aspect-ratio: 1;
  display: inline-flex;
  flex: 0 0 auto;
  inline-size: 2rem;
  justify-content: center;
  min-height: 2rem;
  min-inline-size: 2rem;
  padding: 0;
}

.statistics-view-actions-menu,
.statistics.explorer .block.menu,
.statistics.line.settings .line.menu,
.statistics.source .measure.menu {
  min-inline-size: 14rem;
}

.statistics.source,
.statistics.source .metric.measures,
.statistics.explorer .block > .lines {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-default);
  min-width: 0;
  min-width: 0;
}

.statistics.source {
  --layout-stack-gap: 0.85rem;
}

.statistics.source > .step {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: auto minmax(0, 1fr);
  min-width: 0;
}

.statistics.source > .step > .number {
  align-items: center;
  background: var(--primary-color);
  border-radius: 999px;
  color: var(--primary-text-color);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 800;
  height: 1.25rem;
  justify-content: center;
  line-height: 1;
  margin-block-start: 0.35rem;
  width: 1.25rem;
}

.statistics.source > .step > .content {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
}

.statistics.source > .step > .content h3 {
  color: color-mix(in srgb, var(--text-color) 82%, var(--placeholder-text-color));
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.2;
  margin: 0;
}

.statistics.source .source.list {
  display: grid;
  gap: var(--spacing-sm);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
}

.statistics.source .source.item {
  background: color-mix(in srgb, var(--background-input) 90%, transparent);
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 72%, transparent);
  border-radius: 0.5rem;
  cursor: pointer;
  display: grid;
  gap: 0.55rem;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 5.6rem;
  min-width: 0;
  padding: 0.65rem;
}

.statistics.source .source.item[aria-selected=true] {
  background: color-mix(in srgb, var(--primary-color) 5%, var(--background-input));
  border-color: color-mix(in srgb, var(--primary-color) 46%, var(--border-color-default));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-color) 16%, transparent);
}

.statistics.source .source.item > input {
  align-self: start;
  grid-column: 2;
  grid-row: 1;
  margin: 0.1rem 0 0;
}

.statistics.source .source.item > .main {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.statistics.source .source.item .title,
.statistics.source .source.item .body,
.statistics.source .source.item .options,
.statistics.source .source.item .option > span {
  display: grid;
  min-width: 0;
}

.statistics.source .source.item .title {
  align-items: center;
  color: var(--text-color);
  font-weight: 800;
  gap: 0.45rem;
  grid-auto-flow: column;
  justify-content: start;
}

.statistics.source .source.item .title .bi {
  color: color-mix(in srgb, var(--primary-color) 74%, var(--text-color));
}

.statistics.source .source.item .body,
.statistics.source .source.item .options small {
  color: var(--placeholder-text-color);
  font-size: 0.78rem;
  line-height: 1.35;
}

.statistics.source .source.item .options {
  gap: 0.35rem;
  grid-column: 1/-1;
}

.statistics.source .source.item .option {
  background: transparent;
  border-radius: 0.35rem;
  min-height: 1.55rem;
  padding: 0;
}

.statistics.source .source.item .option strong {
  color: var(--text-color);
  font-size: 0.78rem;
}

.statistics.source .metric.list,
.statistics.source .selected.metrics,
.statistics.source .selected.lines .source.list {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  min-width: 0;
}

.statistics.source .metric.chip,
.statistics.source .selected.metrics button,
.statistics.source .source.chip {
  align-items: center;
  border-radius: 0.42rem;
  display: inline-flex;
  gap: 0.35rem;
  min-width: 0;
}

.statistics.source .metric.chip {
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
  --button-min-height: 2rem;
  --padding-button-block: 0.25rem;
  --padding-button-inline: 0.6rem;
  background: color-mix(in srgb, var(--background-input) 92%, transparent);
  border-color: color-mix(in srgb, var(--border-color-default) 72%, transparent);
  color: var(--text-color);
  font-size: 0.82rem;
}
.statistics.source .metric.chip:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.statistics.source .metric.chip:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.statistics.source .metric.chip:disabled, .statistics.source .metric.chip[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}

.statistics.source .metric.chip.is-selected,
.statistics.source .metric.chip[aria-pressed=true] {
  --background-button: color-mix(in srgb, var(--primary-color) 11%, var(--background-input));
  --background-button-hover: color-mix(in srgb, var(--primary-color) 16%, var(--background-input));
  --border-color-button: color-mix(in srgb, var(--primary-color) 54%, transparent);
  --color-button: var(--primary-color);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-color) 22%, transparent);
  font-weight: 700;
}

.statistics.source .extra.metric.results {
  background: var(--background-panel, var(--background-surface, var(--background-input)));
  border: var(--border-panel, var(--border-surface, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-panel, var(--border-radius-card, var(--border-radius-default)));
  box-shadow: var(--shadow-panel, var(--shadow-card, var(--shadow-default)));
  padding-top: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-bottom: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-start: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-end: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  backdrop-filter: var(--filter-panel, none);
  -webkit-backdrop-filter: var(--filter-panel, none);
  --background-panel: var(--background-input);
  --padding-panel: 0.35rem;
  display: grid;
  gap: 0.2rem;
  list-style: none;
  margin: 0;
  max-block-size: min(14rem, 36vh);
  overflow: auto;
  padding: var(--padding-panel);
}

.statistics.source .extra.metric.result {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--border-radius-small, 0.35rem);
  color: var(--text-color);
  cursor: pointer;
  display: flex;
  gap: var(--spacing-xs);
  justify-content: space-between;
  min-height: 2.25rem;
  padding: 0.35rem 0.5rem;
  text-align: left;
  width: 100%;
}

.statistics.source .extra.metric.result:hover,
.statistics.source .extra.metric.result:focus-visible {
  background: color-mix(in srgb, var(--primary-color) 10%, transparent);
}

.statistics.source .selected.metrics button {
  background: color-mix(in srgb, var(--primary-color) 8%, var(--background-input));
  border: var(--border-width-default) solid color-mix(in srgb, var(--primary-color) 30%, transparent);
  color: var(--primary-color);
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  min-height: 1.8rem;
  padding: 0.2rem 0.45rem;
}

.statistics.source .selected.lines {
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 70%, transparent);
  border-radius: 0.5rem;
  min-width: 0;
  overflow: hidden;
}

.statistics.source .lines.table {
  border-collapse: collapse;
  font-size: 0.82rem;
  width: 100%;
}

.statistics.source .lines.table th,
.statistics.source .lines.table td {
  border-bottom: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 55%, transparent);
  padding: 0.35rem 0.5rem;
  text-align: left;
  vertical-align: middle;
}

.statistics.source .lines.table th {
  background: color-mix(in srgb, var(--background-default) 72%, var(--background-input));
  color: color-mix(in srgb, var(--placeholder-text-color) 82%, var(--text-color));
  font-size: 0.72rem;
  font-weight: 800;
}

.statistics.source .lines.table tr:last-child td {
  border-bottom: 0;
}

.statistics.source .source.chip {
  background: color-mix(in srgb, var(--primary-color) 9%, var(--background-input));
  border: var(--border-width-default) solid color-mix(in srgb, var(--primary-color) 26%, transparent);
  color: var(--primary-color);
  font-size: 0.72rem;
  font-weight: 700;
  min-height: 1.45rem;
  padding: 0.12rem 0.4rem;
}

.statistics.source .source.chip[data-source-kind=Global] {
  background: color-mix(in srgb, var(--success-color, var(--primary-color)) 9%, var(--background-input));
  border-color: color-mix(in srgb, var(--success-color, var(--primary-color)) 26%, transparent);
  color: color-mix(in srgb, var(--success-color, var(--primary-color)) 74%, var(--text-color));
}

.statistics.source .lines.table .measure.selector .rz-dropdown,
.statistics.source .lines.table .measure.selector .rz-multiselect {
  min-height: 2rem;
}

.statistics.source .helper.empty {
  margin: 0;
}

.statistics.source .add.selected {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.statistics.source .add.action,
.statistics.source .cancel.action {
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
  --button-min-height: 2.35rem;
  --border-radius-button: 0.42rem;
  --padding-button-block: 0.42rem;
  --padding-button-inline: 0.7rem;
}
.statistics.source .add.action:focus-visible,
.statistics.source .cancel.action:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.statistics.source .add.action:hover:not(:disabled, [aria-disabled=true]),
.statistics.source .cancel.action:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.statistics.source .add.action:disabled, .statistics.source .add.action[aria-disabled=true],
.statistics.source .cancel.action:disabled,
.statistics.source .cancel.action[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}

.statistics.source .add.action {
  --background-button: var(--primary-color);
  --background-button-hover: color-mix(in srgb, var(--primary-color) 88%, var(--secondary-color));
  --border-color-button: var(--primary-color);
  --color-button: var(--primary-text-color);
}

.statistics.source .cancel.action {
  --background-button: transparent;
  --background-button-hover: color-mix(in srgb, var(--primary-color) 7%, transparent);
  --border-color-button: transparent;
  --color-button: var(--placeholder-text-color);
}

.rz-dialog:has(.statistics.source),
.rz-dialog:has(.activity.metric.picker),
.rz-dialog:has(.statistics.line.settings.dialog),
.rz-dialog:has(.statistics.derived.line.source) {
  overflow: visible;
}

.rz-dialog-content:has(.statistics.source),
.rz-dialog-content:has(.activity.metric.picker),
.rz-dialog-content:has(.statistics.line.settings.dialog),
.rz-dialog-content:has(.statistics.derived.line.source) {
  max-block-size: calc(100vh - 8rem);
  overflow: auto;
}

.rz-dropdown-panel,
.rz-multiselect-panel {
  z-index: 1200;
}

.statistics.explorer .created.lines,
.statistics.explorer .line.group,
.statistics.source .metric.options {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  min-width: 0;
  min-width: 0;
}

.statistics.source .tracking-series.result,
.statistics.source .tracking-series.result .main,
.statistics.source .tracking-series.result .actions,
.statistics.export.dialog .line.list,
.statistics.line.settings .main,
.statistics.explorer .block > .header > .title,
.statistics.explorer .line.group > .header > .title {
  min-width: 0;
}

.statistics.source .heading.actions {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  justify-content: flex-end;
}

.statistics.source .selected.activity {
  background: color-mix(in srgb, var(--background-input) 84%, transparent);
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 65%, transparent);
  border-radius: var(--border-radius-default);
  padding: 0.35rem;
}

.statistics.source .selected.activity > span {
  flex: 1 1 auto;
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.statistics.source .selected.activity .scope,
.statistics.source .source.item .option,
.statistics.source .measure.option {
  align-items: center;
  display: inline-flex;
  gap: var(--spacing-xs);
  min-width: 0;
}

.statistics.source .selected.activity .scope {
  color: var(--placeholder-text-color);
  flex: 0 0 auto;
  font-size: 0.82rem;
}

.statistics.source .source.link {
  background: transparent;
  border: 0;
  color: var(--primary-color);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0;
}

.statistics.source .activity.results {
  background: var(--background-panel, var(--background-surface, var(--background-input)));
  border: var(--border-panel, var(--border-surface, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-panel, var(--border-radius-card, var(--border-radius-default)));
  box-shadow: var(--shadow-panel, var(--shadow-card, var(--shadow-default)));
  padding-top: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-bottom: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-start: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-end: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  backdrop-filter: var(--filter-panel, none);
  -webkit-backdrop-filter: var(--filter-panel, none);
  --background-panel: var(--background-input);
  --padding-panel: 0.35rem;
  display: grid;
  gap: 0.2rem;
  list-style: none;
  margin: 0;
  max-block-size: min(18rem, 42vh);
  overflow: auto;
  padding: var(--padding-panel);
}

.statistics.source .activity.result {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--border-radius-small, 0.35rem);
  color: var(--text-color);
  cursor: pointer;
  display: flex;
  justify-content: flex-start;
  min-height: 2.25rem;
  padding: 0.35rem 0.5rem;
  text-align: left;
  width: 100%;
}

.statistics.source .activity.result:hover,
.statistics.source .activity.result:focus-visible {
  background: color-mix(in srgb, var(--primary-color) 10%, transparent);
}

.statistics.source .metric.select {
  position: relative;
}

.statistics.source .add.lines {
  position: relative;
  z-index: 20;
}

.statistics.source .metric.select.menu {
  background: var(--background-panel, var(--background-surface, var(--background-input)));
  border: var(--border-panel, var(--border-surface, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-panel, var(--border-radius-card, var(--border-radius-default)));
  box-shadow: var(--shadow-panel, var(--shadow-card, var(--shadow-default)));
  padding-top: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-bottom: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-start: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-end: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  backdrop-filter: var(--filter-panel, none);
  -webkit-backdrop-filter: var(--filter-panel, none);
  --background-panel: var(--background-input);
  --padding-panel: 0.35rem;
  display: grid;
  gap: 0.2rem;
  inset-block-start: calc(100% + 0.25rem);
  inset-inline: 0;
  list-style: none;
  margin: 0;
  max-block-size: min(14rem, 42vh);
  overflow: auto;
  position: absolute;
  z-index: 18;
}

.statistics.source .metric.select.menu[hidden] {
  display: none;
}

.statistics.source .metric.select.header {
  align-items: center;
  border-bottom: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 55%, transparent);
  color: var(--placeholder-text-color);
  display: flex;
  gap: var(--spacing-xs);
  justify-content: space-between;
  padding: 0.25rem 0.2rem 0.4rem;
}

.statistics.source .metric.select.header button,
.activity.metric.picker .selected.list button {
  background: transparent;
  border: 0;
  color: var(--primary-color);
  cursor: pointer;
  padding: 0;
}

.statistics.explorer .state.empty.lines {
  --background-status: color-mix(in srgb, var(--primary-color) 5%, transparent);
  --border-status: var(--border-width-default) solid color-mix(in srgb, var(--primary-color) 20%, var(--border-color-default));
  background: var(--background-status, var(--background-panel, var(--background-input)));
  border: var(--border-status, var(--border-panel, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-status, var(--border-radius-default));
  box-shadow: var(--shadow-status, none);
  padding-top: var(--padding-status, var(--spacing-default));
  padding-bottom: var(--padding-status, var(--spacing-default));
  padding-inline-start: var(--padding-status, var(--spacing-default));
  padding-inline-end: var(--padding-status, var(--spacing-default));
  align-items: center;
  display: grid;
  gap: var(--spacing-sm);
  justify-items: center;
  padding: var(--spacing-default);
  text-align: center;
}

.statistics.explorer .state.empty.lines > i {
  color: color-mix(in srgb, var(--primary-color) 62%, var(--placeholder-text-color));
  font-size: 2rem;
}

.statistics.explorer .state.empty.lines > div {
  display: grid;
  gap: 0.15rem;
}

.statistics.explorer .state.empty.lines strong {
  color: var(--text-color);
}

.statistics.explorer .state.empty.lines span {
  color: var(--placeholder-text-color);
  font-size: var(--font-size-small);
}

.statistics.source .tracking-series.result {
  align-items: stretch;
  display: grid;
  gap: var(--spacing-sm);
  grid-template-columns: minmax(0, 1fr) auto;
  width: 100%;
}

.statistics.source .tracking-series.result .main {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}

.statistics.source .tracking-series.result .actions {
  align-items: center;
  display: flex;
  gap: var(--spacing-xs);
}

.tracking-series-measures {
  grid-column: 1/-1;
}

.statistics.source .source.details {
  background: color-mix(in srgb, var(--background-input) 58%, transparent);
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 52%, transparent);
  border-radius: var(--border-radius-default);
  padding: 0.45rem 0.55rem;
}

.statistics.source .source.details > summary {
  color: var(--text-color);
}

.statistics.source .source.option {
  background: color-mix(in srgb, var(--background-input) 70%, transparent);
  border-radius: var(--border-radius-default);
  min-height: 2rem;
  padding: 0.25rem 0.35rem;
}

.statistics.source .source.suboption {
  justify-self: start;
}

.statistics.source .helper.count {
  background: color-mix(in srgb, var(--primary-color) 8%, var(--background-input));
  border: var(--border-width-default) solid color-mix(in srgb, var(--primary-color) 20%, transparent);
  border-radius: var(--border-radius-default);
  color: var(--text-color);
  display: block;
  padding: 0.5rem 0.65rem;
}

.statistics.explorer .line.group,
.statistics.explorer .block {
  --background-status: color-mix(in srgb, var(--primary-color) 5%, transparent);
  --border-status: var(--border-width-default) solid color-mix(in srgb, var(--primary-color) 20%, var(--border-color-default));
  background: var(--background-status, var(--background-panel, var(--background-input)));
  border: var(--border-status, var(--border-panel, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-status, var(--border-radius-default));
  box-shadow: var(--shadow-status, none);
  padding-top: var(--padding-status, var(--spacing-default));
  padding-bottom: var(--padding-status, var(--spacing-default));
  padding-inline-start: var(--padding-status, var(--spacing-default));
  padding-inline-end: var(--padding-status, var(--spacing-default));
}

.statistics.explorer .line.group {
  gap: var(--spacing-xs);
  padding: var(--spacing-sm);
}

.statistics.explorer .line.group > .header,
.statistics.explorer .block > .header,
.statistics.line.settings,
.statistics.line.settings .actions,
.statistics.line.settings .meta,
.statistics.line.settings .title,
.statistics.explorer .line.group .status,
.statistics.line.settings.dialog .date.range {
  align-items: center;
  display: flex;
  gap: var(--spacing-xs);
  min-width: 0;
}

.statistics.explorer .line.group > .header,
.statistics.explorer .block > .header,
.statistics.line.settings {
  justify-content: space-between;
}

.statistics.explorer .line.group > .header > .title {
  display: grid;
  gap: 0.1rem;
}

.statistics.explorer .line.group > .header > .title h4 {
  font-size: 1rem;
  margin: 0;
}

.statistics.explorer .line.group > .header > .title span,
.statistics.line.settings .meta,
.statistics.explorer .block > .header > .title small {
  color: var(--placeholder-text-color);
  font-size: 0.82rem;
}

.statistics.explorer .line.group .status {
  border-radius: var(--border-radius-default);
  font-size: 0.78rem;
  padding: 0.25rem 0.45rem;
}

.statistics.explorer .line.group .status.error {
  background: color-mix(in srgb, var(--danger-color) 12%, transparent);
  color: var(--danger-color);
}

.statistics.explorer .line.group .status.warning {
  background: color-mix(in srgb, var(--warning-color) 14%, transparent);
  color: var(--warning-color);
}

.statistics.explorer .line.group .status.info {
  background: color-mix(in srgb, var(--primary-color) 10%, transparent);
  color: var(--primary-color);
}

.statistics.explorer .block {
  display: grid;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs);
}

.statistics.explorer .block > .header > .title {
  display: grid;
  gap: 0.1rem;
}

.statistics.explorer .block > .header > .title > span {
  font-weight: 700;
}

.statistics.explorer .block > .header > .actions {
  flex: 0 0 auto;
  position: relative;
}

.statistics.explorer .line.group > summary,
.statistics.source .source.details > summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: var(--spacing-xs);
  justify-content: space-between;
  list-style: none;
}

.statistics.explorer .line.group > summary::-webkit-details-marker,
.statistics.source .source.details > summary::-webkit-details-marker {
  display: none;
}

.statistics.explorer .line.group > summary::after,
.statistics.source .source.details > summary::after {
  color: var(--placeholder-text-color);
  content: "\f282";
  font-family: "bootstrap-icons";
  transition: transform var(--transition-duration-fast, 150ms) ease;
}

.statistics.explorer .line.group[open] > summary::after,
.statistics.source .source.details[open] > summary::after {
  transform: rotate(180deg);
}

.statistics.source .metric.option,
.statistics.source .measure.option {
  background: color-mix(in srgb, var(--background-input) 84%, transparent);
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 62%, transparent);
  border-radius: var(--border-radius-default);
  cursor: pointer;
}

.statistics.source .metric.option {
  align-items: center;
  display: flex;
  gap: var(--spacing-xs);
  min-height: 2.15rem;
  padding: 0.3rem 0.45rem;
}

.statistics.source .metric.options {
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
}

.statistics.source .metric.option.selected {
  background: color-mix(in srgb, var(--primary-color) 11%, var(--background-input));
  border-color: color-mix(in srgb, var(--primary-color) 42%, transparent);
}

.statistics.source .measure.option {
  color: var(--placeholder-text-color);
  font-size: 0.82rem;
  min-height: 1.85rem;
  padding: 0.2rem 0.4rem;
}

.statistics.source .measure.option:has(input:checked),
.statistics.source .measure.option:has(.rz-chkbox-box.rz-state-active) {
  background: color-mix(in srgb, var(--primary-color) 8%, var(--background-input));
  border-color: color-mix(in srgb, var(--primary-color) 30%, transparent);
  color: var(--text-color);
}

.statistics.source .metric.row {
  align-items: center;
  display: flex;
  gap: var(--spacing-sm);
  justify-content: space-between;
  min-width: 0;
}

.statistics.source .metric.row .series-chip {
  flex: 1 1 auto;
}

.statistics.source .metric.measures {
  gap: var(--spacing-xs);
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
}

.statistics.source .metric.measures .series-chip {
  justify-content: flex-start;
}

.statistics.source .lines.table .metric.title {
  align-items: center;
  display: flex;
  gap: 0.25rem;
}

.statistics.source .metric.title > span,
.statistics.source .metric.title > small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.statistics.source .metric.title > span {
  font-weight: 700;
}

.statistics.source .metric.title > small {
  color: var(--placeholder-text-color);
}

.statistics.source .metric.title > .unit {
  color: var(--placeholder-text-color);
  font-size: 0.84em;
  font-weight: 600;
}

.statistics.source .measure.selector {
  min-width: 0;
}

.statistics.source .measure.selector .rz-dropdown,
.statistics.source .measure.selector .rz-multiselect {
  min-height: 2.25rem;
}

.statistics.source .tracking-series.result .actions {
  align-items: center;
  display: flex;
  gap: var(--spacing-xs);
  position: relative;
}

.statistics.line.settings {
  border-radius: var(--border-radius-default);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 2.1rem;
  padding: 0.25rem 0.35rem;
}

.statistics.line.settings:hover {
  background: color-mix(in srgb, var(--background-input) 70%, transparent);
}

.statistics.line.settings.is-hidden {
  opacity: 0.62;
}

.statistics.line.settings .main {
  display: grid;
  gap: 0.1rem;
}

.statistics.line.settings .title {
  font-weight: 600;
}

.statistics.line.settings .title > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.statistics.line.settings .meta {
  flex-wrap: wrap;
}

.statistics.line.settings .meta span:not(:last-child)::after {
  content: "·";
  margin-left: var(--spacing-xs);
}

.statistics.line.settings .actions {
  flex: 0 0 auto;
  position: relative;
}

.statistics.line.settings .status {
  font-size: 1.05rem;
  pointer-events: none;
}

.statistics.line.settings .status.access-denied,
.statistics.line.settings .status.load-failed {
  color: var(--danger-color);
}

.statistics.line.settings .status.suppressed {
  color: var(--warning-color);
}

.statistics.line.settings .status.no-data {
  color: var(--primary-color);
}

.statistics.line.popover,
.statistics.derived.line.popover {
  background: var(--background-panel, var(--background-surface, var(--background-input)));
  border: var(--border-panel, var(--border-surface, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-panel, var(--border-radius-card, var(--border-radius-default)));
  box-shadow: var(--shadow-panel, var(--shadow-card, var(--shadow-default)));
  padding-top: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-bottom: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-start: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-end: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  backdrop-filter: var(--filter-panel, none);
  -webkit-backdrop-filter: var(--filter-panel, none);
  --background-panel: color-mix(in srgb, var(--background-input) 95%, transparent);
  --padding-panel: var(--spacing-default);
  display: grid;
  gap: var(--spacing-sm);
  inline-size: min(24rem, 100vw - 2rem);
  margin: 0;
}

.statistics.line.popover {
  flex: 1 0 100%;
  max-block-size: min(42rem, 100dvh - 2rem);
  overflow: auto;
}

.statistics.line.popover.is-open {
  inset: 50% auto auto 50%;
  position: fixed;
  transform: translate(-50%, -50%);
  z-index: 1000;
}

.statistics.derived.line.popover:popover-open {
  inset: 50% auto auto 50%;
  max-block-size: min(34rem, 100dvh - 2rem);
  overflow: auto;
  transform: translate(-50%, -50%);
}

.statistics.derived.line.source,
.statistics.derived.line.inline,
.statistics.derived.line.source .derived.line.form,
.statistics.line.settings.dialog {
  display: grid;
  gap: var(--spacing-sm);
  min-width: 0;
}

.statistics.line.settings.dialog .number.settings {
  display: grid;
  gap: var(--spacing-sm);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.statistics.line.popover .form-field,
.statistics.line.settings.dialog .form-field,
.statistics.derived.line.popover .form-field,
.statistics.derived.line.inline .form-field,
.statistics.derived.line.source .derived.line.form .form-field,
.statistics.export.dialog .field {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.statistics.export.dialog > .actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: flex-end;
  min-width: 0;
}

.statistics.line.popover .rz-dropdown,
.statistics.line.popover .rz-numeric,
.statistics.line.popover input[type=color],
.statistics.line.settings.dialog .rz-dropdown,
.statistics.line.settings.dialog .rz-numeric,
.statistics.line.settings.dialog input[type=color],
.statistics.derived.line.popover .rz-dropdown,
.statistics.derived.line.inline .rz-dropdown,
.statistics.derived.line.source .derived.line.form .rz-dropdown,
.statistics.export.dialog .rz-radiobutton-list {
  border-radius: var(--border-radius-default);
  min-height: 2.45rem;
  width: 100%;
}

.activity.metric.picker,
.statistics.preset.picker {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-default);
  min-width: 0;
  min-width: 0;
}

.activity.metric.picker {
  max-block-size: calc(100vh - 9rem);
  overflow: auto;
  padding-inline-end: 0.15rem;
}

.activity.metric.picker .results,
.statistics.preset.picker .results {
  min-width: 0;
}

.activity.metric.picker .metric.search.results,
.statistics.preset.picker .results {
  display: grid;
  gap: var(--spacing-xs);
  list-style: none;
  margin: 0;
  max-block-size: min(24rem, 52vh);
  overflow: auto;
  padding: 0;
}

.activity.metric.picker .metric.search.result,
.statistics.preset.picker .result {
  align-items: center;
  background: color-mix(in srgb, var(--background-input) 86%, transparent);
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 64%, transparent);
  border-radius: var(--border-radius-default);
  display: grid;
  gap: var(--spacing-xs);
  min-width: 0;
}

.activity.metric.picker .metric.search.result {
  color: var(--text-color);
  cursor: pointer;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 2.35rem;
  padding: 0.35rem 0.5rem;
  text-align: start;
  width: 100%;
}

.activity.metric.picker .metric.search.result.selected,
.statistics.preset.picker .result.active {
  background: color-mix(in srgb, var(--primary-color) 10%, var(--background-input));
  border-color: color-mix(in srgb, var(--primary-color) 36%, transparent);
}

.activity.metric.picker .footer {
  background: var(--background-panel, var(--background-input));
  border-top: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 60%, transparent);
  display: grid;
  gap: var(--spacing-sm);
  inset-block-end: 0;
  padding-block-start: var(--spacing-sm);
  position: sticky;
}

.activity.metric.picker .selected.summary,
.activity.metric.picker .selected.list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  min-width: 0;
}

.activity.metric.picker .selected.summary {
  color: var(--placeholder-text-color);
}

.activity.metric.picker .selected.list button {
  align-items: center;
  background: color-mix(in srgb, var(--primary-color) 8%, var(--background-input));
  border: var(--border-width-default) solid color-mix(in srgb, var(--primary-color) 28%, transparent);
  border-radius: 999px;
  color: var(--text-color);
  display: inline-flex;
  gap: 0.25rem;
  min-height: 1.75rem;
  padding: 0.15rem 0.45rem;
}

.statistics.preset.picker .state {
  --background-status: color-mix(in srgb, var(--primary-color) 5%, transparent);
  --border-status: var(--border-width-default) solid color-mix(in srgb, var(--primary-color) 20%, var(--border-color-default));
  background: var(--background-status, var(--background-panel, var(--background-input)));
  border: var(--border-status, var(--border-panel, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-status, var(--border-radius-default));
  box-shadow: var(--shadow-status, none);
  padding-top: var(--padding-status, var(--spacing-default));
  padding-bottom: var(--padding-status, var(--spacing-default));
  padding-inline-start: var(--padding-status, var(--spacing-default));
  padding-inline-end: var(--padding-status, var(--spacing-default));
  align-items: center;
  display: flex;
  gap: var(--spacing-sm);
  justify-content: center;
  min-height: 8rem;
  padding: var(--spacing-default);
}

.statistics.preset.picker .result {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 0.25rem;
}

.statistics.preset.picker .open.action {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--text-color);
  cursor: pointer;
  display: flex;
  gap: var(--spacing-sm);
  min-height: 2.25rem;
  min-width: 0;
  padding: 0.25rem 0.35rem;
  text-align: start;
}

.statistics.preset.picker .open.action span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.statistics.export.dialog .line.list {
  display: grid;
  gap: var(--spacing-xs);
  max-height: min(18rem, 45vh);
  overflow: auto;
}

.statistics.chart {
  background: var(--background-panel, var(--background-surface, var(--background-input)));
  border: var(--border-panel, var(--border-surface, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-panel, var(--border-radius-card, var(--border-radius-default)));
  box-shadow: var(--shadow-panel, var(--shadow-card, var(--shadow-default)));
  padding-top: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-bottom: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-start: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-end: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  backdrop-filter: var(--filter-panel, none);
  -webkit-backdrop-filter: var(--filter-panel, none);
  --background-panel: color-mix(in srgb, var(--background-input) 90%, transparent);
  --padding-panel: var(--spacing-default);
  display: grid;
  grid-template-rows: auto auto minmax(28rem, 1fr);
  min-height: 32rem;
  min-width: 0;
  position: relative;
}

.statistics.chart > .header h3 {
  color: var(--text-color);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
  margin: 0;
}

.calendar.page {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-default);
  min-width: 0;
  min-width: 0;
}

.calendar.page > .title {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.calendar.page > .header {
  background: var(--background-panel, var(--background-surface, var(--background-input)));
  border: var(--border-panel, var(--border-surface, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-panel, var(--border-radius-card, var(--border-radius-default)));
  box-shadow: var(--shadow-panel, var(--shadow-card, var(--shadow-default)));
  padding-top: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-bottom: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-start: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-end: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  backdrop-filter: var(--filter-panel, none);
  -webkit-backdrop-filter: var(--filter-panel, none);
  --background-panel: color-mix(in srgb, var(--background-input) 88%, transparent);
  --padding-panel: var(--spacing-default);
}

.calendar.page > .header h1 {
  font-size: 1.35rem;
  line-height: 1.2;
  margin: 0;
}

.calendar-shell {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-default);
  min-width: 0;
  --calendar-cell-width: 220px;
  --calendar-cell-height: 280px;
  --calendar-grid-width: calc(var(--calendar-cell-width) * 7);
  min-width: 0;
}

.calendar-navigation {
  align-items: center;
  gap: var(--spacing-default);
}

.calendar-title h2 {
  color: var(--text-color);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.2;
}

.calendar-title span {
  color: var(--placeholder-text-color);
  font-size: var(--font-size-small);
  font-weight: 600;
}

.calendar-toolbar {
  gap: var(--spacing-sm);
}

.calendar-period-actions {
  gap: var(--spacing-xs);
}

.calendar-step,
.calendar-today,
.calendar-view-tab {
  --button-min-height: 2.35rem;
  --border-radius-button: 0.5rem;
  --padding-button-block: 0.45rem;
  --padding-button-inline: 0.8rem;
  --shadow-button: 0 0.35rem 0.9rem color-mix(in srgb, var(--shadow-color, #1f2937) 8%, transparent);
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
  font-size: 0.84rem;
  font-weight: 700;
}
.calendar-step:focus-visible,
.calendar-today:focus-visible,
.calendar-view-tab:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.calendar-step:hover:not(:disabled, [aria-disabled=true]),
.calendar-today:hover:not(:disabled, [aria-disabled=true]),
.calendar-view-tab:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.calendar-step:disabled, .calendar-step[aria-disabled=true],
.calendar-today:disabled,
.calendar-today[aria-disabled=true],
.calendar-view-tab:disabled,
.calendar-view-tab[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}

.calendar-step {
  --background-button: var(--background-input);
  --background-button-hover: color-mix(in srgb, var(--primary-color) 8%, var(--background-input));
  --border-color-button: color-mix(in srgb, var(--border-color-default) 68%, transparent);
  --color-button: var(--text-color);
  flex: 0 0 auto;
  min-height: 2.35rem;
  min-width: 2.35rem;
  padding: 0;
  width: 2.35rem;
}

.calendar-today {
  --background-button: color-mix(in srgb, var(--primary-color) 5%, var(--background-input));
  --background-button-hover: color-mix(in srgb, var(--primary-color) 11%, var(--background-input));
  --border-color-button: color-mix(in srgb, var(--primary-color) 34%, var(--border-color-default));
  --color-button: var(--primary-color);
}

.calendar-view-tabs {
  background: color-mix(in srgb, var(--background-input) 94%, transparent);
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 58%, transparent);
  border-radius: 0.5rem;
  box-shadow: 0 0.8rem 1.5rem color-mix(in srgb, var(--shadow-color, #1f2937) 8%, transparent), inset 0 1px 0 color-mix(in srgb, #ffffff 72%, transparent);
  padding: 0.2rem;
}

.calendar-view-tab {
  --background-button: transparent;
  --background-button-hover: color-mix(in srgb, var(--primary-color) 7%, transparent);
  --border-color-button: transparent;
  --color-button: var(--text-color);
  --padding-button-inline: 1rem;
  box-shadow: none;
  min-width: 4.75rem;
  white-space: nowrap;
}

.calendar-view-tab:not(:last-child) {
  border-inline-end: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 45%, transparent);
}

.calendar-view-tabs .calendar-view-drag-action:not(:last-child) .calendar-view-tab {
  border-inline-end: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 45%, transparent);
}

.calendar-view-tab.active,
.calendar-view-tab[aria-pressed=true] {
  --background-button: var(--primary-color);
  --background-button-hover: color-mix(in srgb, var(--primary-color) 92%, var(--background-input));
  --border-color-button: var(--primary-color);
  --color-button: var(--primary-text-color);
  border-inline-end-color: transparent;
  box-shadow: 0 0.45rem 1rem color-mix(in srgb, var(--primary-color) 22%, transparent), inset 0 1px 0 color-mix(in srgb, #ffffff 38%, transparent);
}

.calendar-view-drag-action.is-drag-hover-arming .calendar-view-tab,
.calendar-period-drag-action.is-drag-hover-arming .calendar-step,
.calendar-period-drag-action.is-drag-hover-arming .calendar-today {
  --background-button-hover: color-mix(in srgb, var(--primary-color) 16%, var(--background-input));
  border-color: color-mix(in srgb, var(--primary-color) 62%, var(--border-color-default));
}

.calendar-state {
  background: color-mix(in srgb, var(--primary-color) 6%, var(--background-input));
  border: var(--border-width-default) solid color-mix(in srgb, var(--primary-color) 18%, var(--border-color-default));
  color: var(--color-surface, var(--text-color));
  border-radius: 0.5rem;
  box-shadow: none;
  padding-top: var(--spacing-default);
  padding-bottom: var(--spacing-default);
  padding-inline-start: var(--spacing-default);
  padding-inline-end: var(--spacing-default);
  color: var(--placeholder-text-color);
}

.calendar-state-icon {
  align-items: center;
  background: var(--primary-color);
  border-radius: 50%;
  color: var(--primary-text-color);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 1.1rem;
  height: 2.4rem;
  justify-content: center;
  width: 2.4rem;
}

.calendar-state-title,
.calendar-state-content strong,
.calendar-state > span:last-child:not(.calendar-state-content) {
  color: var(--text-color);
  font-weight: 700;
}

.calendar-state-body {
  color: var(--placeholder-text-color);
}

.calendar-day-cockpit {
  background: color-mix(in srgb, var(--background-input) 96%, var(--background-default));
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 72%, transparent);
  color: var(--color-surface, var(--text-color));
  border-radius: 0.5rem;
  box-shadow: 0 0.75rem 1.8rem color-mix(in srgb, var(--shadow-color, #1f2937) 7%, transparent);
  padding-top: var(--spacing-default);
  padding-bottom: var(--spacing-default);
  padding-inline-start: var(--spacing-default);
  padding-inline-end: var(--spacing-default);
}

.calendar-day-cockpit-eyebrow {
  color: var(--placeholder-text-color);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0;
}

.calendar-day-cockpit-header h3 {
  color: var(--text-color);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.2;
}

.calendar-day-cockpit-metrics span {
  background: color-mix(in srgb, var(--primary-color) 7%, var(--background-default));
  border: var(--border-width-default) solid color-mix(in srgb, var(--primary-color) 16%, var(--border-color-default));
  border-radius: 0.45rem;
  color: var(--placeholder-text-color);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.32rem 0.5rem;
}

.calendar-day-cockpit-metrics strong {
  color: var(--text-color);
}

.calendar-day-empty {
  color: var(--placeholder-text-color);
  font-size: 0.86rem;
}

.calendar-day-empty > .bi {
  align-items: center;
  background: color-mix(in srgb, var(--primary-color) 11%, var(--background-default));
  border-radius: 50%;
  color: var(--primary-color);
  display: inline-flex;
  flex: 0 0 auto;
  height: 2.1rem;
  justify-content: center;
  width: 2.1rem;
}

.calendar-day-empty strong {
  color: var(--text-color);
  font-weight: 800;
}

.calendar-agenda-section h4 {
  color: var(--placeholder-text-color);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0;
}

.calendar-agenda-item {
  appearance: none;
  background: color-mix(in srgb, var(--background-default) 74%, var(--background-input));
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 62%, transparent);
  border-radius: 0.45rem;
  color: var(--text-color);
  cursor: pointer;
  font: inherit;
  padding: 0.48rem 0.55rem;
}

.calendar-agenda-item:hover {
  background: color-mix(in srgb, var(--primary-color) 6%, var(--background-input));
  border-color: color-mix(in srgb, var(--primary-color) 22%, var(--border-color-default));
}

.calendar-agenda-item:focus-visible {
  outline: var(--focus-outline-width, 2px) solid var(--focus-outline-color, var(--primary-color));
  outline-offset: 2px;
}

.calendar-agenda-item > .bi,
.calendar-agenda-item > .calendar-reserved-swatch {
  color: var(--primary-color);
  flex: 0 0 auto;
  margin-top: 0.1rem;
}

.calendar-agenda-risk > .bi {
  color: var(--warning-color);
}

.calendar-agenda-item strong {
  font-size: 0.84rem;
  font-weight: 800;
}

.calendar-agenda-item small {
  color: var(--placeholder-text-color);
  font-size: 0.72rem;
}

.calendar-agenda-reserved {
  border-color: color-mix(in srgb, var(--reserved-time-color) 32%, var(--border-color-default));
}

.calendar-weekdays {
  align-items: center;
  color: color-mix(in srgb, var(--text-color) 72%, var(--placeholder-text-color));
  font-size: 0.72rem;
  font-weight: 700;
  gap: 0;
  letter-spacing: 0;
  min-height: 2rem;
  text-align: center;
}

.calendar-weekday,
.calendar-weekdays span {
  padding: 0.35rem 0.45rem;
}

.calendar-grid:not(.month) {
  background: color-mix(in srgb, var(--background-input) 96%, var(--background-default));
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 72%, transparent);
  border-radius: 0.5rem;
  box-shadow: 0 0.8rem 1.8rem color-mix(in srgb, var(--shadow-color, #1f2937) 7%, transparent);
}

.calendar-grid:not(.month) .calendar-day,
.calendar-grid:not(.month) .calendar-timeline-day,
.calendar-grid.year .calendar-month {
  background: color-mix(in srgb, var(--background-input) 94%, var(--background-default));
  border-right: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 58%, transparent);
}

.calendar-grid:not(.month) .calendar-day.is-weekend,
.calendar-grid:not(.month) .calendar-timeline-day.is-weekend {
  background: color-mix(in srgb, var(--primary-color) 4%, var(--background-input));
}

.calendar-grid:not(.month) .calendar-day.is-today,
.calendar-grid:not(.month) .calendar-timeline-day.is-today {
  background: color-mix(in srgb, var(--primary-color) 7%, var(--background-input));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary-color) 36%, transparent);
}

.calendar-grid:not(.month) .calendar-day.is-selected,
.calendar-grid:not(.month) .calendar-timeline-day.is-selected {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary-color) 52%, transparent);
}

.calendar-hour,
.timeline-hour {
  border-bottom: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 46%, transparent);
}

.calendar-hour:hover,
.timeline-hour:hover {
  background: color-mix(in srgb, var(--primary-color) 5%, transparent);
}

.day-dot {
  background: transparent;
  border-radius: 0.25rem;
  color: var(--placeholder-text-color);
  cursor: pointer;
  font-size: 0.66rem;
  font-weight: 800;
}

.day-dot:hover,
.day-dot:focus-visible {
  background: color-mix(in srgb, var(--primary-color) 10%, transparent);
  color: var(--primary-color);
}

.day-dot:focus-visible {
  outline: var(--focus-outline-width, 2px) solid var(--focus-outline-color, var(--primary-color));
  outline-offset: 1px;
}

.day-dot.is-weekend {
  background: color-mix(in srgb, var(--primary-color) 5%, transparent);
  color: color-mix(in srgb, var(--primary-color) 70%, var(--placeholder-text-color));
}

.day-dot.is-today {
  background: var(--primary-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 22%, transparent);
  color: var(--primary-text-color);
}

.day-dot.is-selected:not(.is-today) {
  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
  box-shadow: inset 0 0 0 1px var(--primary-color);
  color: var(--primary-color);
}

.month-preview-weekdays {
  color: color-mix(in srgb, var(--placeholder-text-color) 78%, var(--text-color));
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.calendar-grid.month {
  background: var(--background-input);
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 76%, transparent);
  border-radius: 0.5rem;
  box-shadow: 0 1rem 2.25rem color-mix(in srgb, var(--shadow-color, #1f2937) 9%, transparent);
  min-height: 0;
  overflow: hidden;
}

.calendar-grid.month .calendar-day {
  background: color-mix(in srgb, var(--background-input) 96%, var(--background-default));
  border-bottom: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 58%, transparent);
  border-right: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 58%, transparent);
  cursor: pointer;
  min-height: var(--calendar-cell-height);
}

.calendar-grid.month .calendar-day:focus-visible {
  outline: var(--focus-outline-width, 2px) solid var(--focus-outline-color, var(--primary-color));
  outline-offset: -3px;
}

.calendar-grid.month .calendar-day:hover {
  background: color-mix(in srgb, var(--primary-color) 4%, var(--background-input));
}

.calendar-grid.month .calendar-day .drop-target.can-drop {
  background: color-mix(in srgb, var(--primary-color) 5%, transparent);
}

.calendar-grid.month .calendar-day .drop-target.is-drop-hover {
  background: color-mix(in srgb, var(--primary-color) 10%, transparent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary-color) 48%, transparent);
}

.calendar-grid.month .calendar-day:nth-child(7n) {
  border-right: 0;
}

.calendar-grid.month .calendar-day.is-weekend {
  background: color-mix(in srgb, var(--primary-color) 5%, var(--background-input));
}

.calendar-grid.month .calendar-day.is-outside-month {
  background: color-mix(in srgb, var(--background-default) 54%, var(--background-input));
  color: var(--placeholder-text-color);
}

.calendar-grid.month .calendar-day.is-today {
  background: color-mix(in srgb, var(--primary-color) 8%, var(--background-input));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary-color) 42%, transparent);
}

.calendar-grid.month .calendar-day.is-selected {
  background: color-mix(in srgb, var(--primary-color) 10%, var(--background-input));
  box-shadow: inset 0 0 0 2px var(--primary-color);
}

.calendar-day-header {
  background-color: color-mix(in srgb, var(--background-input) 90%, transparent);
  color: var(--text-color);
}

.calendar-day-name {
  font-weight: 800;
}

.calendar-day-date {
  color: color-mix(in srgb, var(--placeholder-text-color) 86%, var(--text-color));
  font-size: 0.75rem;
  font-weight: 700;
}

.calendar-day-header small {
  background: var(--primary-color);
  border-radius: 999px;
  color: var(--primary-text-color);
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1;
  padding: 0.16rem 0.32rem;
}

.calendar-grid:not(.month) .calendar-day.is-today .calendar-day-header,
.calendar-grid:not(.month) .calendar-timeline-day.is-today .calendar-day-header,
.calendar-grid:not(.month) .calendar-day.is-weekend .calendar-day-header,
.calendar-grid:not(.month) .calendar-timeline-day.is-weekend .calendar-day-header {
  color: var(--primary-color);
}

.calendar-grid.month .calendar-day-header {
  background: transparent;
  border: 0;
  color: inherit;
  display: flex;
  justify-content: space-between;
  gap: 0.3rem;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.2;
  padding: 0.55rem 0.6rem 0.35rem;
  position: relative;
  top: auto;
}

.calendar-day-selector {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 0.35rem;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  flex: 1 1 auto;
  font: inherit;
  font-weight: inherit;
  gap: 0.35rem;
  justify-content: space-between;
  min-width: 0;
  padding: 0.1rem 0.15rem;
  text-align: left;
}

.calendar-day-selector:hover {
  background: color-mix(in srgb, var(--primary-color) 7%, transparent);
}

.calendar-day-selector:focus-visible {
  outline: var(--focus-outline-width, 2px) solid var(--focus-outline-color, var(--primary-color));
  outline-offset: 2px;
}

.calendar-grid.month .calendar-day.is-today .calendar-day-header,
.calendar-grid.month .calendar-day.is-weekend:not(.is-outside-month) .calendar-day-header {
  color: var(--primary-color);
}

.calendar-grid.month .calendar-month-reserved-indicators {
  padding-inline: 0.6rem;
}

.calendar-grid.month .calendar-month-reserved-indicator {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--reserved-time-color) 18%, transparent);
}

.calendar-month-risk-chip {
  appearance: none;
  border-radius: 0.35rem;
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  min-height: 1.35rem;
  padding: 0.22rem 0.34rem;
  text-align: left;
}

.calendar-task-drag {
  height: 100%;
  width: 100%;
}

.calendar-item .task.item {
  --background-card: color-mix(in srgb, var(--background-default) 82%, var(--background-input));
  --border-color-card: color-mix(in srgb, var(--primary-color) 18%, var(--border-color-default));
  --border-radius-card: 0.45rem;
  --padding-card: 0.4rem;
  --shadow-card: none;
  height: 100%;
  max-width: 100%;
  overflow: hidden;
  width: 100%;
}

.calendar-item .task.item:hover {
  --background-card: color-mix(in srgb, var(--primary-color) 7%, var(--background-default));
  --border-color-card: color-mix(in srgb, var(--primary-color) 30%, var(--border-color-default));
}

.calendar-selected-task-card .calendar-task-drag,
.calendar-month-task-card .calendar-task-drag {
  height: auto;
}

.calendar-month-task-card .task.item {
  --background-card: color-mix(in srgb, var(--background-default) 78%, var(--background-input));
  --border-color-card: color-mix(in srgb, var(--primary-color) 18%, var(--border-color-default));
  --border-radius-card: 0.45rem;
  --padding-card: 0.45rem;
  --shadow-card: none;
  gap: 0.25rem;
  overflow: hidden;
}

.calendar-month-task-card .task.item:hover {
  --background-card: color-mix(in srgb, var(--primary-color) 7%, var(--background-default));
  --border-color-card: color-mix(in srgb, var(--primary-color) 30%, var(--border-color-default));
}

.calendar-month-task-card .task.item > .header {
  gap: 0.4rem;
}

.calendar-month-task-card .task.item .selection {
  margin-top: 0.05rem;
}

.calendar-month-task-card .task.item .title {
  font-size: 0.76rem;
  line-height: 1.25;
}

.calendar-month-task-card .task.item .title.trigger {
  display: block;
  max-width: 100%;
}

.calendar-month-task-card .task.item .date,
.calendar-month-task-card .task.item .meta {
  font-size: 0.66rem;
  gap: 0.25rem;
  line-height: 1.2;
}

.calendar-selected-task-card .task.item,
.dashboard.box.milestone .task.item {
  --background-card: color-mix(in srgb, var(--background-default) 84%, var(--background-input));
  --border-color-card: color-mix(in srgb, var(--border-color-default) 70%, transparent);
  --border-radius-card: 0.45rem;
  --padding-card: 0.55rem;
  --shadow-card: none;
}

.calendar-month-risk-chip {
  background: color-mix(in srgb, var(--warning-color) 12%, var(--background-default));
  border: var(--border-width-default) solid color-mix(in srgb, var(--warning-color) 30%, var(--border-color-default));
  color: color-mix(in srgb, var(--warning-color) 70%, var(--text-color));
}

.calendar-month-risk-chip:focus-visible {
  outline: var(--focus-outline-width, 2px) solid var(--focus-outline-color, var(--primary-color));
  outline-offset: 1px;
}

.calendar-month-more {
  color: var(--placeholder-text-color);
  font-size: 0.68rem;
  font-weight: 800;
  padding-inline: 0.1rem;
}

.calendar-month-more.warning {
  color: color-mix(in srgb, var(--warning-color) 76%, var(--text-color));
}

.calendar-item.risk-event {
  border: var(--border-width-default) solid color-mix(in srgb, var(--warning-color) 36%, var(--border-color-default));
  border-radius: 0.4rem;
  background: color-mix(in srgb, var(--warning-color) 12%, var(--background-input));
  color: color-mix(in srgb, var(--warning-color) 72%, var(--text-color));
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.35rem 0.45rem;
  text-align: left;
}

@media (max-width: 720px) {
  .calendar-navigation {
    align-items: stretch;
  }
  .calendar-title,
  .calendar-toolbar {
    width: 100%;
  }
  .calendar-toolbar {
    align-items: stretch;
  }
  .calendar-period-actions,
  .calendar-view-tabs {
    max-width: 100%;
  }
  .calendar-view-tabs {
    flex: 1 1 100%;
  }
  .calendar-view-tab {
    min-width: 4.35rem;
    --padding-button-inline: 0.75rem;
  }
  .calendar-viewport {
    min-height: 24rem;
  }
  .calendar-day-cockpit {
    padding: var(--spacing-sm);
  }
  .calendar-day-cockpit-header h3 {
    font-size: 0.98rem;
  }
}
.statistics.chart > .canvas {
  height: max(var(--chart-height, 600px), 28rem);
  min-height: 28rem;
  min-width: 0;
  width: 100%;
}

.statistics.chart > .placeholder {
  --empty-icon-font-size: 2rem;
  --empty-icon-size: 4.75rem;
  --empty-state-gap: var(--spacing-sm);
  --empty-state-padding: var(--spacing-lg);
  display: grid;
  place-items: center;
  min-height: 28rem;
  color: var(--empty-state-color, var(--placeholder-text-color));
  gap: var(--empty-state-gap, var(--spacing-sm));
  padding: var(--empty-state-padding, var(--padding-default));
  text-align: center;
}

.statistics.chart > .placeholder i {
  align-items: center;
  background: var(--empty-icon-background, linear-gradient(145deg, color-mix(in srgb, var(--background-input) 98%, transparent), color-mix(in srgb, var(--primary-color) 8%, var(--background-input))));
  border: var(--empty-icon-border, var(--border-width-default) solid color-mix(in srgb, #ffffff 78%, transparent));
  border-radius: 999px;
  box-shadow: var(--empty-icon-shadow, 0 1rem 2.2rem color-mix(in srgb, var(--shadow-color, #1f2937) 18%, transparent), 0 0 0 0.65rem color-mix(in srgb, var(--primary-color) 7%, transparent));
  color: var(--empty-icon-color, var(--primary-color));
  display: inline-flex;
  flex: 0 0 auto;
  font-size: var(--empty-icon-font-size, 2rem);
  height: var(--empty-icon-size, 5.25rem);
  justify-content: center;
  line-height: 1;
  width: var(--empty-icon-size, 5.25rem);
}

.statistics.chart > .placeholder strong {
  color: var(--text-color);
  font-size: 1.15rem;
}

.statistics.chart > .placeholder + .canvas {
  display: none;
}

.statistics.world.map.page {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-default);
  min-width: 0;
  min-width: 0;
}

.statistics.world.map.page > header {
  background: var(--background-panel, var(--background-surface, var(--background-input)));
  border: var(--border-panel, var(--border-surface, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-panel, var(--border-radius-card, var(--border-radius-default)));
  box-shadow: var(--shadow-panel, var(--shadow-card, var(--shadow-default)));
  padding-top: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-bottom: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-start: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-end: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  backdrop-filter: var(--filter-panel, none);
  -webkit-backdrop-filter: var(--filter-panel, none);
  --background-panel: color-mix(in srgb, var(--background-input) 90%, transparent);
  --padding-panel: var(--spacing-default);
  align-items: center;
  display: flex;
  gap: var(--spacing-sm);
}

.statistics.world.map.page > header > .bi {
  color: var(--primary-color);
  font-size: 1.35rem;
}

.statistics.world.map.page > header h1 {
  font-size: 1.35rem;
  line-height: 1.2;
  margin: 0;
}

.statistics.world.map.page > .content {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-default);
  min-width: 0;
  min-width: 0;
}

.statistics.world.map.page .description {
  color: var(--placeholder-text-color);
  margin: 0;
}

.world.map:not(.page) {
  background: var(--background-panel, var(--background-surface, var(--background-input)));
  border: var(--border-panel, var(--border-surface, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-panel, var(--border-radius-card, var(--border-radius-default)));
  box-shadow: var(--shadow-panel, var(--shadow-card, var(--shadow-default)));
  padding-top: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-bottom: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-start: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-end: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  backdrop-filter: var(--filter-panel, none);
  -webkit-backdrop-filter: var(--filter-panel, none);
  --background-panel: color-mix(in srgb, var(--background-input) 90%, transparent);
  --padding-panel: var(--spacing-default);
  display: grid;
  gap: var(--spacing-default);
  min-width: 0;
}

.world.map:not(.page) > .controls .row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: space-between;
  min-width: 0;
}

.world.map:not(.page) .label {
  color: var(--placeholder-text-color);
  font-size: var(--font-size-small);
  font-weight: 700;
}

.world.map:not(.page) .summary {
  color: var(--placeholder-text-color);
  font-size: var(--font-size-small);
}

.world.map:not(.page) .refresh.action {
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--secondary-text-color);
}
.world.map:not(.page) .refresh.action:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.world.map:not(.page) .refresh.action:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.world.map:not(.page) .refresh.action:disabled, .world.map:not(.page) .refresh.action[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}

.world.map:not(.page) > .state.loading {
  align-items: center;
  display: flex;
  gap: var(--readiness-gap, var(--spacing-sm));
  justify-content: center;
  min-height: var(--readiness-min-height, 7rem);
  background: var(--background-readiness, var(--background-status, var(--background-panel, var(--background-input))));
  border: var(--border-readiness, var(--border-status, var(--border-panel, var(--border-width-default) solid var(--border-color-default))));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-readiness, var(--border-radius-status, var(--border-radius-default)));
  box-shadow: var(--shadow-readiness, var(--shadow-status, none));
  padding-top: var(--padding-readiness, var(--padding-status, var(--spacing-default)));
  padding-bottom: var(--padding-readiness, var(--padding-status, var(--spacing-default)));
  padding-inline-start: var(--padding-readiness, var(--padding-status, var(--spacing-default)));
  padding-inline-end: var(--padding-readiness, var(--padding-status, var(--spacing-default)));
  min-height: 16rem;
}

.world.map:not(.page) > .state.loading .spinner {
  animation: entity-readiness-spin 0.8s linear infinite;
  border: var(--spinner-border-width, 2px) solid color-mix(in srgb, var(--primary-color) 24%, transparent);
  border-radius: 999px;
  border-top-color: var(--primary-color);
  height: 1.25rem;
  width: 1.25rem;
}

.world.map:not(.page) > .chart {
  height: clamp(22rem, 56vh, 38rem);
  min-width: 0;
  width: 100%;
}

.world.map:not(.page) > .legend {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: flex-start;
  min-width: 0;
  color: var(--placeholder-text-color);
  font-size: var(--font-size-small);
}

.world.map:not(.page) > .legend .item {
  align-items: center;
  display: inline-flex;
  gap: 0.35rem;
}

.world.map:not(.page) > .legend .marker {
  color: var(--success-color);
}

.dashboard.box.statistics.chart {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  min-width: 0;
  min-width: 0;
}

.dashboard.box.statistics.chart > .state {
  align-items: center;
  display: flex;
  gap: var(--readiness-gap, var(--spacing-sm));
  justify-content: center;
  min-height: var(--readiness-min-height, 7rem);
  background: var(--background-readiness, var(--background-status, var(--background-panel, var(--background-input))));
  border: var(--border-readiness, var(--border-status, var(--border-panel, var(--border-width-default) solid var(--border-color-default))));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-readiness, var(--border-radius-status, var(--border-radius-default)));
  box-shadow: var(--shadow-readiness, var(--shadow-status, none));
  padding-top: var(--padding-readiness, var(--padding-status, var(--spacing-default)));
  padding-bottom: var(--padding-readiness, var(--padding-status, var(--spacing-default)));
  padding-inline-start: var(--padding-readiness, var(--padding-status, var(--spacing-default)));
  padding-inline-end: var(--padding-readiness, var(--padding-status, var(--spacing-default)));
  min-height: 14rem;
}

.dashboard.box.statistics.chart > .state.empty {
  display: grid;
  place-items: center;
  min-height: 14rem;
  color: var(--empty-state-color, var(--placeholder-text-color));
  gap: var(--empty-state-gap, var(--spacing-sm));
  padding: var(--empty-state-padding, var(--padding-default));
  text-align: center;
}

.dashboard.box.statistics.chart > .state.empty > .bi {
  align-items: center;
  background: var(--empty-icon-background, linear-gradient(145deg, color-mix(in srgb, var(--background-input) 98%, transparent), color-mix(in srgb, var(--primary-color) 8%, var(--background-input))));
  border: var(--empty-icon-border, var(--border-width-default) solid color-mix(in srgb, #ffffff 78%, transparent));
  border-radius: 999px;
  box-shadow: var(--empty-icon-shadow, 0 1rem 2.2rem color-mix(in srgb, var(--shadow-color, #1f2937) 18%, transparent), 0 0 0 0.65rem color-mix(in srgb, var(--primary-color) 7%, transparent));
  color: var(--empty-icon-color, var(--primary-color));
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 1.25rem;
  height: 3rem;
  justify-content: center;
  line-height: 1;
  width: 3rem;
}

.dashboard.box.statistics.chart > .alert.warning {
  --background-status: color-mix(in srgb, var(--warning-color) 5%, transparent);
  --border-status: var(--border-width-default) solid color-mix(in srgb, var(--warning-color) 20%, var(--border-color-default));
  background: var(--background-status, var(--background-panel, var(--background-input)));
  border: var(--border-status, var(--border-panel, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-status, var(--border-radius-default));
  box-shadow: var(--shadow-status, none);
  padding-top: var(--padding-status, var(--spacing-default));
  padding-bottom: var(--padding-status, var(--spacing-default));
  padding-inline-start: var(--padding-status, var(--spacing-default));
  padding-inline-end: var(--padding-status, var(--spacing-default));
  align-items: flex-start;
  color: color-mix(in srgb, var(--warning-color) 72%, var(--text-color));
  display: flex;
  gap: var(--spacing-sm);
}

.dashboard.box.statistics.chart > .access.warning {
  border-color: color-mix(in srgb, var(--warning-color) 36%, var(--border-color-default));
}

.dashboard.box.statistics.chart > .statistics.chart {
  --padding-panel: var(--spacing-sm);
  grid-template-rows: auto auto minmax(18rem, 1fr);
  min-height: 20rem;
}

.dashboard.box.statistics.chart > .statistics.chart > .canvas {
  height: max(var(--chart-height, 320px), 18rem);
  min-height: 18rem;
}

.dashboard.box.statistics.chart > .statistics.chart > .header h3 {
  font-size: 0.9rem;
}

.spotter.form,
.spotter.rounds,
.pomodoro.widget,
.pomodoro.cycles,
.pomodoro.cycles.overview,
.pomodoro.summary,
.pomodoro.timer {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spotter-gap, var(--spacing-sm));
  min-width: 0;
  min-width: 0;
}

.spotter.form > .panel,
.spotter.rounds > .panel,
.pomodoro.widget > .panel {
  background: var(--spotter-panel-background, color-mix(in srgb, var(--background-input) 94%, transparent));
  border: var(--spotter-panel-border, var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 72%, transparent));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--spotter-panel-radius, var(--border-radius-default));
  box-shadow: var(--spotter-panel-shadow, var(--shadow-card));
  padding-top: var(--spotter-panel-padding, var(--spacing-default));
  padding-bottom: var(--spotter-panel-padding, var(--spacing-default));
  padding-inline-start: var(--spotter-panel-padding, var(--spacing-default));
  padding-inline-end: var(--spotter-panel-padding, var(--spacing-default));
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  min-width: 0;
}

.spotter.form .body,
.spotter.rounds .body,
.pomodoro.widget .body {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spotter-gap, var(--spacing-sm));
  min-width: 0;
}

.spotter.form > .state.loading,
.pomodoro.widget > .state.loading,
.dashboard.box.widget > .surface > .content > .state.loading {
  align-items: center;
  display: flex;
  gap: var(--readiness-gap, var(--spacing-sm));
  justify-content: center;
  min-height: var(--readiness-min-height, 7rem);
  background: var(--background-readiness, var(--background-status, var(--background-panel, var(--background-input))));
  border: var(--border-readiness, var(--border-status, var(--border-panel, var(--border-width-default) solid var(--border-color-default))));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-readiness, var(--border-radius-status, var(--border-radius-default)));
  box-shadow: var(--shadow-readiness, var(--shadow-status, none));
  padding-top: var(--padding-readiness, var(--padding-status, var(--spacing-default)));
  padding-bottom: var(--padding-readiness, var(--padding-status, var(--spacing-default)));
  padding-inline-start: var(--padding-readiness, var(--padding-status, var(--spacing-default)));
  padding-inline-end: var(--padding-readiness, var(--padding-status, var(--spacing-default)));
  min-height: var(--spotter-loading-min-height, 8rem);
}

.spotter.form > .state.loading .spinner,
.pomodoro.widget > .state.loading .spinner,
.dashboard.box.widget > .surface > .content > .state.loading .spinner {
  animation: entity-readiness-spin 0.8s linear infinite;
  border: var(--spinner-border-width, 2px) solid color-mix(in srgb, var(--primary-color) 24%, transparent);
  border-radius: 999px;
  border-top-color: var(--primary-color);
  height: 1.25rem;
  width: 1.25rem;
}

.spotter.form > .panel > .body > .title,
.pomodoro.widget > .panel > .body > .title {
  align-items: center;
  display: flex;
  font-size: 1rem;
  font-weight: 700;
  gap: 0.45rem;
  margin: 0;
  min-width: 0;
}

.spotter.form .series,
.spotter.form .round.values,
.pomodoro.cycles,
.pomodoro.cycles.overview,
.pomodoro.summary {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spotter-gap, var(--spacing-sm));
  min-width: 0;
}

.spotter.form .series > header,
.pomodoro.cycles > header,
.spotter.rounds > .panel > header {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: space-between;
  min-width: 0;
}

.spotter.form .series > header h6,
.pomodoro.cycles > header h6,
.pomodoro.cycles.overview h6,
.spotter.rounds > .panel > header h6 {
  align-items: center;
  display: flex;
  font-size: 0.92rem;
  font-weight: 700;
  gap: 0.4rem;
  margin: 0;
}

.spotter.form .timer.summary,
.pomodoro.timer {
  align-items: center;
  text-align: center;
}

.spotter.form .timer.summary .value,
.pomodoro.timer > .value {
  color: var(--text-color);
  font-size: clamp(2.35rem, 7vw, 4rem);
  font-weight: 800;
  line-height: 1;
  overflow-wrap: anywhere;
  text-align: center;
}

.spotter.form .timer.summary .meta,
.pomodoro.timer > .meta,
.spotter.form .meta,
.spotter.rounds .meta,
.pomodoro.cycles.overview .duration {
  color: var(--placeholder-text-color);
  font-size: var(--font-size-small);
}

.spotter.form .list,
.spotter.rounds .list,
.pomodoro.cycles.overview .list {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  min-width: 0;
}

.spotter.form .item,
.spotter.rounds .item,
.pomodoro.cycles .cycle.item,
.pomodoro.cycles.overview .item {
  background: var(--spotter-item-background, color-mix(in srgb, var(--background-input) 86%, transparent));
  border: var(--spotter-item-border, var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 70%, transparent));
  border-radius: var(--spotter-item-radius, var(--border-radius-default));
  display: grid;
  gap: var(--spotter-item-gap, var(--spacing-xs));
  min-width: 0;
  padding: var(--spotter-item-padding, var(--spacing-sm));
}

.spotter.form .row,
.spotter.rounds .row,
.pomodoro.cycles.overview .item {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  justify-content: space-between;
  min-width: 0;
}

.spotter.form .content,
.spotter.rounds .values,
.spotter.rounds .value.item > div,
.pomodoro.cycles.overview .item > span {
  min-width: 0;
}

.spotter.form .item .title,
.spotter.rounds .item .title {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.spotter.form .field {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.spotter.form .field label {
  color: var(--placeholder-text-color);
  font-size: var(--font-size-small);
}

.spotter.form .hint,
.spotter.rounds .hint {
  color: var(--placeholder-text-color);
  font-size: var(--font-size-small);
  overflow-wrap: anywhere;
}

.spotter.form .state.empty,
.pomodoro.cycles .state.empty,
.spotter.rounds .state.empty {
  display: grid;
  place-items: center;
  min-height: var(--spotter-empty-min-height, 6rem);
  color: var(--empty-state-color, var(--placeholder-text-color));
  gap: var(--empty-state-gap, var(--spacing-sm));
  padding: var(--empty-state-padding, var(--padding-default));
  text-align: center;
}

.spotter.form .state.empty > .bi,
.pomodoro.cycles .state.empty > .bi,
.spotter.rounds .state.empty > .bi {
  align-items: center;
  background: var(--empty-icon-background, linear-gradient(145deg, color-mix(in srgb, var(--background-input) 98%, transparent), color-mix(in srgb, var(--primary-color) 8%, var(--background-input))));
  border: var(--empty-icon-border, var(--border-width-default) solid color-mix(in srgb, #ffffff 78%, transparent));
  border-radius: 999px;
  box-shadow: var(--empty-icon-shadow, 0 1rem 2.2rem color-mix(in srgb, var(--shadow-color, #1f2937) 18%, transparent), 0 0 0 0.65rem color-mix(in srgb, var(--primary-color) 7%, transparent));
  color: var(--empty-icon-color, var(--primary-color));
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 1.15rem;
  height: 2.75rem;
  justify-content: center;
  line-height: 1;
  width: 2.75rem;
}

.spotter.form .actions,
.pomodoro.widget .actions,
.pomodoro.summary .actions,
.pomodoro.cycles .actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  justify-content: center;
  min-width: 0;
}

.spotter.form .actions.reset {
  justify-content: center;
}

.spotter.form .add.action,
.spotter.form .start.action,
.pomodoro.widget .start.action,
.pomodoro.widget .resume.action,
.pomodoro.cycles .add.action {
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--primary-text-color);
}
.spotter.form .add.action:focus-visible,
.spotter.form .start.action:focus-visible,
.pomodoro.widget .start.action:focus-visible,
.pomodoro.widget .resume.action:focus-visible,
.pomodoro.cycles .add.action:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.spotter.form .add.action:hover:not(:disabled, [aria-disabled=true]),
.spotter.form .start.action:hover:not(:disabled, [aria-disabled=true]),
.pomodoro.widget .start.action:hover:not(:disabled, [aria-disabled=true]),
.pomodoro.widget .resume.action:hover:not(:disabled, [aria-disabled=true]),
.pomodoro.cycles .add.action:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.spotter.form .add.action:disabled, .spotter.form .add.action[aria-disabled=true],
.spotter.form .start.action:disabled,
.spotter.form .start.action[aria-disabled=true],
.pomodoro.widget .start.action:disabled,
.pomodoro.widget .start.action[aria-disabled=true],
.pomodoro.widget .resume.action:disabled,
.pomodoro.widget .resume.action[aria-disabled=true],
.pomodoro.cycles .add.action:disabled,
.pomodoro.cycles .add.action[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}

.spotter.form .pause.action,
.pomodoro.widget .pause.action {
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
  background: var(--warning-color);
  border-color: var(--warning-color);
  color: var(--warning-text-color);
}
.spotter.form .pause.action:focus-visible,
.pomodoro.widget .pause.action:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.spotter.form .pause.action:hover:not(:disabled, [aria-disabled=true]),
.pomodoro.widget .pause.action:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.spotter.form .pause.action:disabled, .spotter.form .pause.action[aria-disabled=true],
.pomodoro.widget .pause.action:disabled,
.pomodoro.widget .pause.action[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}

.spotter.form .stop.action,
.spotter.form .delete.action,
.pomodoro.cycles .delete.action {
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
  background: var(--danger-color);
  border-color: var(--danger-color);
  color: var(--danger-text-color);
}
.spotter.form .stop.action:focus-visible,
.spotter.form .delete.action:focus-visible,
.pomodoro.cycles .delete.action:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.spotter.form .stop.action:hover:not(:disabled, [aria-disabled=true]),
.spotter.form .delete.action:hover:not(:disabled, [aria-disabled=true]),
.pomodoro.cycles .delete.action:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.spotter.form .stop.action:disabled, .spotter.form .stop.action[aria-disabled=true],
.spotter.form .delete.action:disabled,
.spotter.form .delete.action[aria-disabled=true],
.pomodoro.cycles .delete.action:disabled,
.pomodoro.cycles .delete.action[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}

.spotter.form .next.action,
.spotter.form .reset.action,
.pomodoro.widget .stop.action,
.pomodoro.widget .skip.action,
.pomodoro.summary .reset.action {
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--secondary-text-color);
}
.spotter.form .next.action:focus-visible,
.spotter.form .reset.action:focus-visible,
.pomodoro.widget .stop.action:focus-visible,
.pomodoro.widget .skip.action:focus-visible,
.pomodoro.summary .reset.action:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.spotter.form .next.action:hover:not(:disabled, [aria-disabled=true]),
.spotter.form .reset.action:hover:not(:disabled, [aria-disabled=true]),
.pomodoro.widget .stop.action:hover:not(:disabled, [aria-disabled=true]),
.pomodoro.widget .skip.action:hover:not(:disabled, [aria-disabled=true]),
.pomodoro.summary .reset.action:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.spotter.form .next.action:disabled, .spotter.form .next.action[aria-disabled=true],
.spotter.form .reset.action:disabled,
.spotter.form .reset.action[aria-disabled=true],
.pomodoro.widget .stop.action:disabled,
.pomodoro.widget .stop.action[aria-disabled=true],
.pomodoro.widget .skip.action:disabled,
.pomodoro.widget .skip.action[aria-disabled=true],
.pomodoro.summary .reset.action:disabled,
.pomodoro.summary .reset.action[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}

.spotter.form .toggle.action,
.spotter.form .delete.action,
.pomodoro.cycles .previous.action,
.pomodoro.cycles .next.action,
.pomodoro.cycles .delete.action {
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--secondary-text-color);
  flex: 0 0 auto;
  min-height: var(--spotter-icon-action-size, 2.15rem);
  min-width: var(--spotter-icon-action-size, 2.15rem);
  padding: 0;
  width: var(--spotter-icon-action-size, 2.15rem);
}
.spotter.form .toggle.action:focus-visible,
.spotter.form .delete.action:focus-visible,
.pomodoro.cycles .previous.action:focus-visible,
.pomodoro.cycles .next.action:focus-visible,
.pomodoro.cycles .delete.action:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.spotter.form .toggle.action:hover:not(:disabled, [aria-disabled=true]),
.spotter.form .delete.action:hover:not(:disabled, [aria-disabled=true]),
.pomodoro.cycles .previous.action:hover:not(:disabled, [aria-disabled=true]),
.pomodoro.cycles .next.action:hover:not(:disabled, [aria-disabled=true]),
.pomodoro.cycles .delete.action:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.spotter.form .toggle.action:disabled, .spotter.form .toggle.action[aria-disabled=true],
.spotter.form .delete.action:disabled,
.spotter.form .delete.action[aria-disabled=true],
.pomodoro.cycles .previous.action:disabled,
.pomodoro.cycles .previous.action[aria-disabled=true],
.pomodoro.cycles .next.action:disabled,
.pomodoro.cycles .next.action[aria-disabled=true],
.pomodoro.cycles .delete.action:disabled,
.pomodoro.cycles .delete.action[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}

.spotter.form .delete.action,
.pomodoro.cycles .delete.action {
  background: var(--danger-color);
  border-color: var(--danger-color);
  color: var(--danger-text-color);
}

.pomodoro.cycles .fields {
  align-items: center;
  display: grid;
  gap: var(--spacing-xs);
  grid-template-columns: minmax(8rem, 1fr) minmax(5rem, 0.5fr) minmax(5rem, 0.5fr) auto;
  min-width: 0;
}

.pomodoro.cycles .field {
  min-width: 0;
}

.pomodoro.cycles .field.duration,
.pomodoro.cycles .field.break {
  align-items: center;
  display: grid;
  gap: 0.35rem;
  grid-template-columns: minmax(0, 1fr) auto;
}

.pomodoro.cycles .unit {
  color: var(--placeholder-text-color);
  font-size: var(--font-size-small);
}

.spotter.form .status.row,
.pomodoro.widget .status.row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  justify-content: center;
  min-width: 0;
}

.spotter.form .status.running,
.pomodoro.timer .status.running,
.spotter.rounds .status.active {
  --spotter-status-color: var(--success-color);
  align-items: center;
  background: color-mix(in srgb, var(--spotter-status-color) 10%, transparent);
  border: var(--border-width-default) solid color-mix(in srgb, var(--spotter-status-color) 30%, transparent);
  border-radius: 999px;
  color: color-mix(in srgb, var(--spotter-status-color) 78%, var(--text-color));
  display: inline-flex;
  font-size: var(--font-size-small);
  font-weight: 700;
  gap: 0.35rem;
  line-height: 1.2;
  padding: 0.25rem 0.55rem;
}

.spotter.form .status.paused,
.pomodoro.timer .status.paused {
  --spotter-status-color: var(--warning-color);
  align-items: center;
  background: color-mix(in srgb, var(--spotter-status-color) 10%, transparent);
  border: var(--border-width-default) solid color-mix(in srgb, var(--spotter-status-color) 30%, transparent);
  border-radius: 999px;
  color: color-mix(in srgb, var(--spotter-status-color) 78%, var(--text-color));
  display: inline-flex;
  font-size: var(--font-size-small);
  font-weight: 700;
  gap: 0.35rem;
  line-height: 1.2;
  padding: 0.25rem 0.55rem;
}

.spotter.form .status.stopped {
  --spotter-status-color: var(--secondary-color);
  align-items: center;
  background: color-mix(in srgb, var(--spotter-status-color) 10%, transparent);
  border: var(--border-width-default) solid color-mix(in srgb, var(--spotter-status-color) 30%, transparent);
  border-radius: 999px;
  color: color-mix(in srgb, var(--spotter-status-color) 78%, var(--text-color));
  display: inline-flex;
  font-size: var(--font-size-small);
  font-weight: 700;
  gap: 0.35rem;
  line-height: 1.2;
  padding: 0.25rem 0.55rem;
}

.pomodoro.timer .status.break {
  --spotter-status-color: var(--success-color);
  align-items: center;
  background: color-mix(in srgb, var(--spotter-status-color) 10%, transparent);
  border: var(--border-width-default) solid color-mix(in srgb, var(--spotter-status-color) 30%, transparent);
  border-radius: 999px;
  color: color-mix(in srgb, var(--spotter-status-color) 78%, var(--text-color));
  display: inline-flex;
  font-size: var(--font-size-small);
  font-weight: 700;
  gap: 0.35rem;
  line-height: 1.2;
  padding: 0.25rem 0.55rem;
}

.pomodoro.timer .status.focus {
  --spotter-status-color: var(--primary-color);
  align-items: center;
  background: color-mix(in srgb, var(--spotter-status-color) 10%, transparent);
  border: var(--border-width-default) solid color-mix(in srgb, var(--spotter-status-color) 30%, transparent);
  border-radius: 999px;
  color: color-mix(in srgb, var(--spotter-status-color) 78%, var(--text-color));
  display: inline-flex;
  font-size: var(--font-size-small);
  font-weight: 700;
  gap: 0.35rem;
  line-height: 1.2;
  padding: 0.25rem 0.55rem;
}

.pomodoro.widget .progress {
  background: color-mix(in srgb, var(--border-color-default) 35%, transparent);
  border-radius: 999px;
  height: var(--spotter-progress-height, 0.65rem);
  overflow: hidden;
  width: 100%;
}

.pomodoro.widget .progress .bar {
  background: var(--primary-color);
  border-radius: inherit;
  height: 100%;
  transition: width var(--transition-duration-default) var(--transition-function-default), background-color var(--transition-duration-default) var(--transition-function-default);
  width: var(--progress, 0%);
}

.pomodoro.widget .progress .bar[data-state=break] {
  background: var(--success-color);
}

.spotter.form .summary.grid,
.pomodoro.summary .summary.grid {
  display: grid;
  gap: var(--spacing-xs);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr));
  min-width: 0;
}

.spotter.form .summary.item,
.pomodoro.summary .summary.item {
  background: color-mix(in srgb, var(--background-default) 86%, transparent);
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 68%, transparent);
  border-radius: var(--border-radius-default);
  display: grid;
  gap: 0.15rem;
  min-width: 0;
  padding: var(--spacing-sm);
  text-align: center;
}

.spotter.form .summary.item .label,
.pomodoro.summary .summary.item .label {
  color: var(--placeholder-text-color);
  font-size: var(--font-size-small);
}

.spotter.form .summary.item .value,
.pomodoro.summary .summary.item .value {
  color: var(--text-color);
  font-size: 1.2rem;
  font-weight: 800;
}

.spotter.form hr {
  border: 0;
  border-top: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 68%, transparent);
  margin: 0;
  width: 100%;
}

.spotter.rounds .counter {
  align-items: center;
  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
  border-radius: 999px;
  color: var(--primary-color);
  display: inline-flex;
  font-weight: 800;
  height: 1.75rem;
  justify-content: center;
  margin-right: 0.4rem;
  min-width: 1.75rem;
}

.spotter.rounds .values {
  display: grid;
  gap: var(--spacing-xs);
}

.pomodoro.cycles.overview .item.active {
  border-color: color-mix(in srgb, var(--primary-color) 42%, var(--border-color-default));
  background: color-mix(in srgb, var(--primary-background-color) 58%, var(--background-input));
}

.pomodoro.cycles.overview .item.completed {
  opacity: 0.76;
}

.pomodoro.cycles.overview .marker {
  color: var(--placeholder-text-color);
}

.pomodoro.cycles.overview .marker.active {
  color: var(--primary-color);
}

.pomodoro.cycles.overview .marker.completed {
  color: var(--success-color);
}

@media (max-width: 640px) {
  .world.map:not(.page) > .controls .row {
    align-items: stretch;
  }
  .world.map:not(.page) .refresh.action,
  .spotter.form .actions .action,
  .pomodoro.widget .actions .action,
  .pomodoro.summary .actions .action {
    width: 100%;
  }
  .pomodoro.cycles .fields {
    grid-template-columns: minmax(0, 1fr);
  }
  .pomodoro.cycles .actions {
    justify-content: flex-start;
  }
}
.tag-suggestions.empty {
  color: var(--placeholder-text-color);
  padding: 0.6rem 0.75rem;
}

@media (max-width: 900px) {
  .statistics.explorer,
  .statistics.explorer.expanded {
    grid-template-columns: minmax(0, 1fr);
  }
  .statistics.explorer .global.controls,
  .statistics.explorer .aggregate.options,
  .statistics.line.settings.dialog .number.settings,
  .statistics.source .tracking-series.result {
    grid-template-columns: minmax(0, 1fr);
  }
  .statistics.source .tracking-series.result .actions {
    justify-content: flex-start;
  }
  .statistics.source .source.list,
  .statistics.explorer .panel.actions .actions {
    grid-template-columns: minmax(0, 1fr);
  }
  .statistics.source .selected.lines {
    overflow-x: auto;
  }
  .statistics.explorer .filters {
    max-height: none;
  }
  .statistics.source .selected.activity {
    align-items: center;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .statistics.source .selected.activity > span {
    grid-column: 1;
    grid-row: 1;
  }
  .statistics.source .selected.activity .scope {
    grid-column: 1/-1;
    grid-row: 2;
  }
  .statistics.source .selected.activity .clear.action {
    grid-column: 2;
    grid-row: 1;
  }
}
.settings.layout {
  align-items: start;
  display: grid;
  gap: var(--spacing-default);
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 16rem);
  min-width: 0;
}

.settings.layout .settings-sidebar {
  background: var(--background-panel, var(--background-surface, var(--background-input)));
  border: var(--border-panel, var(--border-surface, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-panel, var(--border-radius-card, var(--border-radius-default)));
  box-shadow: var(--shadow-panel, var(--shadow-card, var(--shadow-default)));
  padding-top: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-bottom: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-start: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-end: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  backdrop-filter: var(--filter-panel, none);
  -webkit-backdrop-filter: var(--filter-panel, none);
  --background-panel: color-mix(in srgb, var(--background-input) 88%, transparent);
  grid-column: 2;
  position: sticky;
  top: var(--shell-sticky-offset);
}

.settings.main,
.settings.aside,
.settings.secondary,
.settings-page.content {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-default);
  min-width: 0;
}

.settings.main {
  grid-column: 1;
}

.settings.aside {
  grid-column: 1;
}

.settings-page.header {
  align-items: center;
  display: flex;
  gap: var(--spacing-default);
  min-width: 0;
}

.settings-page.icon {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--border-radius-default);
  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
  color: var(--primary-color);
  font-size: 1.35rem;
}

.settings-page.title-group {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  min-width: 0;
}

.settings-page.title-group h1,
.settings-page.title-group p {
  margin: 0;
  overflow-wrap: anywhere;
}

.settings-page.title-group h1 {
  font-size: var(--settings-page-title-size, 1.65rem);
  line-height: 1.2;
}

.settings-page.title-group p {
  color: var(--placeholder-text-color);
}

.nav.settings ul {
  display: grid;
  gap: 0.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav.settings a {
  appearance: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: inherit;
  font: inherit;
  margin: 0;
  padding: 0;
  text-align: inherit;
  align-items: center;
  border-radius: var(--border-radius-default);
  color: var(--text-color);
  display: flex;
  gap: 0.55rem;
  min-height: 2.4rem;
  padding: 0.5rem 0.65rem;
  text-decoration: none;
}

.nav.settings a i {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
}

.nav.settings a:hover,
.nav.settings a.active,
.nav.settings a[aria-current=page] {
  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
  color: var(--primary-color);
  text-decoration: none;
}

.section.panel > .section.header {
  align-items: center;
  border-bottom: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 65%, transparent);
  display: flex;
  gap: var(--spacing-sm);
  margin: calc(var(--padding-card, var(--padding-default)) * -1) calc(var(--padding-card, var(--padding-default)) * -1) var(--spacing-default);
  padding: var(--spacing-default);
}

.section.panel > .section.body {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-default);
  min-width: 0;
}

.settings :is(.save.action,
.cancel.action,
.retry.action,
.register.action,
.revoke.action,
.release.action,
.lock.action,
.disable.action,
.delete.action,
.activate.action,
.setup.action,
.details.action,
.upload.action,
.choose.action,
.manage.action,
.view.action) {
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
}
.settings :is(.save.action,
.cancel.action,
.retry.action,
.register.action,
.revoke.action,
.release.action,
.lock.action,
.disable.action,
.delete.action,
.activate.action,
.setup.action,
.details.action,
.upload.action,
.choose.action,
.manage.action,
.view.action):focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.settings :is(.save.action,
.cancel.action,
.retry.action,
.register.action,
.revoke.action,
.release.action,
.lock.action,
.disable.action,
.delete.action,
.activate.action,
.setup.action,
.details.action,
.upload.action,
.choose.action,
.manage.action,
.view.action):hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.settings :is(.save.action,
.cancel.action,
.retry.action,
.register.action,
.revoke.action,
.release.action,
.lock.action,
.disable.action,
.delete.action,
.activate.action,
.setup.action,
.details.action,
.upload.action,
.choose.action,
.manage.action,
.view.action):disabled, .settings :is(.save.action,
.cancel.action,
.retry.action,
.register.action,
.revoke.action,
.release.action,
.lock.action,
.disable.action,
.delete.action,
.activate.action,
.setup.action,
.details.action,
.upload.action,
.choose.action,
.manage.action,
.view.action)[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}

.settings :is(.save.action, .activate.action, .setup.action, .choose.action) {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--primary-text-color);
}

.settings :is(.cancel.action, .retry.action, .register.action, .revoke.action, .release.action, .lock.action, .disable.action, .details.action, .manage.action, .view.action) {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--secondary-text-color);
}

.settings .upload.action {
  font-size: var(--button-small-font-size, var(--font-size-small));
  min-height: var(--button-small-min-height, 2rem);
  padding-inline-start: var(--button-small-padding-inline, var(--spacing-sm));
  padding-inline-end: var(--button-small-padding-inline, var(--spacing-sm));
  padding-top: var(--button-small-padding-block, var(--spacing-xs));
  padding-bottom: var(--button-small-padding-block, var(--spacing-xs));
  background: transparent;
  border-color: var(--secondary-color);
  box-shadow: none;
  color: var(--secondary-color);
}
.settings .upload.action:hover:not(:disabled, [aria-disabled=true]) {
  background: color-mix(in srgb, var(--secondary-color) 12%, transparent);
  border-color: var(--secondary-color);
  box-shadow: none;
  color: var(--secondary-color);
}

.settings .delete.action {
  background: var(--danger-color);
  border-color: var(--danger-color);
  color: var(--danger-text-color);
}

.settings :is(.save.action.timeline, .save.action.permission) {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--primary-text-color);
}

.gdpr-disabled-content + .section.body .permission.action {
  appearance: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: inherit;
  font: inherit;
  margin: 0;
  padding: 0;
  text-align: inherit;
  color: var(--primary-color);
  cursor: pointer;
  font-weight: 700;
  padding: 0;
  text-decoration: underline;
}

.settings .billing.summary .summary.grid {
  display: grid;
  gap: var(--spacing-default);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

.settings .billing.summary .summary.item {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  min-width: 0;
}

.settings .billing .state.loading,
.settings .billing .state.empty {
  justify-items: center;
  text-align: center;
}

.settings .billing .state.empty {
  display: grid;
  place-items: center;
  min-height: var(--empty-state-min-height, 4rem);
  color: var(--empty-state-color, var(--placeholder-text-color));
  gap: var(--empty-state-gap, var(--spacing-sm));
  padding: var(--empty-state-padding, var(--padding-default));
  text-align: center;
}

.settings .billing .status.chip,
.settings .billing .provider.chip {
  border-radius: 999px;
  display: inline-flex;
  font-size: var(--font-size-small);
  font-weight: 700;
  padding: 0.2rem 0.55rem;
}

.settings .billing .status.chip,
.settings .billing .provider.chip {
  background: color-mix(in srgb, var(--info-color) 12%, transparent);
  color: var(--info-color);
}

.settings .billing .status.chip.active {
  background: color-mix(in srgb, var(--success-color) 12%, transparent);
  color: var(--success-color);
}

.settings .billing .status.chip.expiring {
  background: color-mix(in srgb, var(--warning-color) 16%, transparent);
  color: var(--warning-color);
}

.settings .billing .status.chip.expired {
  background: color-mix(in srgb, var(--secondary-color) 12%, transparent);
  color: var(--secondary-color);
}

.settings .billing .provider.account.row,
.settings .billing .payment.method.row {
  align-items: center;
  display: flex;
  gap: var(--spacing-default);
  justify-content: space-between;
  min-width: 0;
}

.settings .billing .provider.account.row > .content,
.settings .billing .payment.method.row > .content {
  align-items: center;
  display: flex;
  gap: var(--spacing-sm);
  min-width: 0;
}

.vault.form,
.vault.secret.form {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--section-gap, var(--spacing-default));
  padding: var(--section-padding, var(--spacing-lg));
}

.vault.secret,
.vault.unlock-panel,
.vault.inbox-item {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-default);
  min-width: 0;
  min-width: 0;
}

.vault :is(.save.action,
.cancel.action,
.copy.action,
.reveal.action,
.check.action,
.share.action,
.decline.action,
.accept.action,
.manage.action,
.generate.action,
.unlock.action,
.lock.action,
.edit.action),
.vault-key-setup :is(.copy.action, .generate.action) {
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
}
.vault :is(.save.action,
.cancel.action,
.copy.action,
.reveal.action,
.check.action,
.share.action,
.decline.action,
.accept.action,
.manage.action,
.generate.action,
.unlock.action,
.lock.action,
.edit.action):focus-visible,
.vault-key-setup :is(.copy.action, .generate.action):focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.vault :is(.save.action,
.cancel.action,
.copy.action,
.reveal.action,
.check.action,
.share.action,
.decline.action,
.accept.action,
.manage.action,
.generate.action,
.unlock.action,
.lock.action,
.edit.action):hover:not(:disabled, [aria-disabled=true]),
.vault-key-setup :is(.copy.action, .generate.action):hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.vault :is(.save.action,
.cancel.action,
.copy.action,
.reveal.action,
.check.action,
.share.action,
.decline.action,
.accept.action,
.manage.action,
.generate.action,
.unlock.action,
.lock.action,
.edit.action):disabled, .vault :is(.save.action,
.cancel.action,
.copy.action,
.reveal.action,
.check.action,
.share.action,
.decline.action,
.accept.action,
.manage.action,
.generate.action,
.unlock.action,
.lock.action,
.edit.action)[aria-disabled=true],
.vault-key-setup :is(.copy.action, .generate.action):disabled,
.vault-key-setup :is(.copy.action, .generate.action)[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}

.vault :is(.save.action, .share.action, .accept.action, .manage.action) {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--primary-text-color);
}

.vault :is(.cancel.action, .copy.action, .reveal.action, .check.action, .decline.action, .generate.action, .unlock.action, .lock.action, .edit.action),
.vault-key-setup :is(.copy.action, .generate.action) {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--secondary-text-color);
}

.vault .count {
  align-items: center;
  background: var(--primary-color);
  border-radius: 999px;
  color: var(--primary-text-color);
  display: inline-flex;
  font-size: var(--font-size-small);
  font-weight: 700;
  justify-content: center;
  min-height: 1.65rem;
  min-width: 1.65rem;
  padding: 0.1rem 0.5rem;
}

.vault.crypto.settings,
.vault.crypto.settings dl,
.vault.crypto.settings dd {
  min-width: 0;
}

.vault.crypto.settings dl {
  display: grid;
  gap: 0.35rem var(--spacing-default);
  grid-template-columns: minmax(7rem, auto) minmax(0, 1fr);
  margin: 0;
}

.vault.crypto.settings dt {
  color: var(--placeholder-text-color);
  font-weight: 700;
}

.vault.crypto.settings dd {
  font-family: var(--font-family-monospace, ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace);
  margin: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.vault.crypto.settings .placeholder-text {
  overflow-wrap: anywhere;
}

.page.integrations,
.app-ui.catalog {
  background: var(--background-panel, var(--background-surface, var(--background-input)));
  border: var(--border-panel, var(--border-surface, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-panel, var(--border-radius-card, var(--border-radius-default)));
  box-shadow: var(--shadow-panel, var(--shadow-card, var(--shadow-default)));
  padding-top: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-bottom: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-start: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-end: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  backdrop-filter: var(--filter-panel, none);
  -webkit-backdrop-filter: var(--filter-panel, none);
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-default);
  min-width: 0;
  --background-panel: color-mix(in srgb, var(--background-input) 88%, transparent);
  --border-panel: var(--border-width-default) solid color-mix(in srgb, #ffffff 62%, transparent);
  --padding-panel: clamp(1rem, 2.4vw, 1.5rem);
}

.page.integrations > .header,
.app-ui.catalog > .header {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.page.integrations .title,
.app-ui.catalog h3 {
  margin: 0;
  overflow-wrap: anywhere;
}

.page.integrations .description,
.app-ui.catalog .placeholder-text {
  color: var(--placeholder-text-color);
  margin: 0;
}

.list {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-default);
  min-width: 0;
}

.tracking.list .overview {
  background: var(--background-panel, var(--background-surface, var(--background-input)));
  border: var(--border-panel, var(--border-surface, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-panel, var(--border-radius-card, var(--border-radius-default)));
  box-shadow: var(--shadow-panel, var(--shadow-card, var(--shadow-default)));
  padding-top: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-bottom: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-start: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-end: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  backdrop-filter: var(--filter-panel, none);
  -webkit-backdrop-filter: var(--filter-panel, none);
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-default);
  min-width: 0;
  --background-panel: color-mix(in srgb, var(--background-input) 88%, transparent);
  --border-panel: var(--border-width-default) solid color-mix(in srgb, #ffffff 62%, transparent);
  --padding-panel: clamp(1rem, 2.4vw, 1.5rem);
}

.tracking.list .overview > header {
  align-items: center;
  display: flex;
  gap: var(--spacing-sm);
  justify-content: space-between;
  min-width: 0;
}

.tracking.list .overview .categories {
  align-items: center;
  background: color-mix(in srgb, var(--background-input) 94%, transparent);
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 58%, transparent);
  border-radius: var(--entity-view-control-radius, var(--border-radius-default));
  box-shadow: 0 0.8rem 1.5rem color-mix(in srgb, var(--shadow-color, #1f2937) 8%, transparent), inset 0 1px 0 color-mix(in srgb, #ffffff 72%, transparent);
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  min-width: 0;
  padding: 0.25rem;
}

.tracking.list .overview .categories .category-tab {
  appearance: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: inherit;
  font: inherit;
  margin: 0;
  padding: 0;
  text-align: inherit;
  cursor: pointer;
  text-decoration: none;
  background: transparent;
  border: 0;
  border-radius: calc(var(--entity-view-control-radius, var(--border-radius-default)) - 0.25rem);
  color: var(--text-color);
  display: inline-flex;
  gap: 0.35rem;
  justify-content: center;
  min-height: 2.35rem;
  padding: 0.45rem 0.85rem;
  text-decoration: none;
}

.tracking.list .overview .categories .category-tab.active {
  background: color-mix(in srgb, var(--primary-color) 12%, var(--background-input));
  color: var(--primary-color);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 75%, transparent);
}

.tracking.list .overview .categories .category-tab.add {
  background: color-mix(in srgb, var(--primary-color) 6%, var(--background-input));
  color: color-mix(in srgb, var(--primary-color) 78%, var(--text-color));
  min-width: 2.35rem;
  padding-inline: 0.65rem;
}

.tracking.list .category.widgets {
  align-items: start;
  display: grid;
  gap: var(--spacing-default);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
  min-width: 0;
}

.list-item {
  min-width: 0;
  position: relative;
}

.app-ui.widget {
  --background-card: var(--tracking-widget-background, color-mix(in srgb, var(--background-input) 94%, transparent));
  --border-color-card: var(--tracking-widget-border, color-mix(in srgb, var(--border-color-default) 70%, transparent));
  --margin-card: 0;
  --padding-card: 0;
  display: grid;
  gap: 0;
  min-width: 0;
  overflow: hidden;
}
@media (min-width: 0px) {
  .app-ui.widget {
    background: var(--background-card, var(--background-default));
    color: var(--color-card, var(--text-color));
    border-radius: var(--border-radius-card, var(--border-radius-default));
    padding-top: var(--padding-card, var(--padding-default));
    padding-bottom: var(--padding-card, var(--padding-default));
    padding-inline-start: var(--padding-card, var(--padding-default));
    padding-inline-end: var(--padding-card, var(--padding-default));
    margin-top: var(--margin-card, var(--margin-default));
    margin-bottom: var(--margin-card, var(--margin-default));
    margin-inline-start: var(--margin-card, var(--margin-default));
    margin-inline-end: var(--margin-card, var(--margin-default));
    border: var(--border-width-card, var(--border-width-default)) solid var(--border-color-card, var(--border-color-default));
    transition: all var(--transition-duration-default) var(--transition-function-default);
    box-shadow: var(--shadow-card, var(--shadow-default));
  }
}
@media (min-width: 0px) and (prefers-reduced-motion: reduce) {
  .app-ui.widget {
    transition: none !important;
  }
}
@media (min-width: 576px) {
  .app-ui.widget {
    box-shadow: var(--shadow-card-responsive, var(--shadow-more));
  }
}

.app-ui.widget .header {
  align-items: center;
  border-bottom: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 58%, transparent);
  display: flex;
  gap: var(--spacing-sm);
  justify-content: space-between;
  min-width: 0;
  padding: var(--tracking-widget-header-padding, 0.9rem 1rem);
}

.app-ui.widget .title {
  align-items: center;
  display: inline-flex;
  gap: 0.45rem;
  min-width: 0;
}

.app-ui.widget .title strong {
  overflow-wrap: anywhere;
}

.app-ui.widget .marker {
  color: var(--tracking-widget-accent, var(--primary-color));
}

.app-ui.widget .header.info,
.app-ui.widget.water {
  --tracking-widget-accent: var(--info-color);
}

.app-ui.widget.energy {
  --tracking-widget-accent: var(--warning-color);
}

.app-ui.widget.ledger {
  --tracking-widget-accent: var(--warning-color);
}

.app-ui.widget.steps {
  --tracking-widget-accent: var(--success-color);
}

.app-ui.widget.weight {
  --tracking-widget-accent: var(--primary-color);
}

.app-ui.widget.workout {
  --tracking-widget-accent: var(--primary-color);
}

.app-ui.widget.heart-rate,
.app-ui.widget.blood-pressure,
.app-ui.widget.temperature {
  --tracking-widget-accent: var(--primary-color);
}

.app-ui.widget.blood-glucose {
  --tracking-widget-accent: var(--warning-color);
}

.app-ui.widget.pain {
  --tracking-widget-accent: var(--danger-color);
}

.app-ui.widget.symptom {
  --tracking-widget-accent: var(--warning-color);
}

.app-ui.widget .body {
  display: grid;
  gap: var(--tracking-widget-gap, 1rem);
  min-width: 0;
  padding: var(--tracking-widget-body-padding, 1rem);
}

.app-ui.widget .panel,
.app-ui.widget .section {
  min-width: 0;
}

.app-ui.widget .panel {
  background: var(--background-panel, var(--background-surface, var(--background-input)));
  border: var(--border-panel, var(--border-surface, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-panel, var(--border-radius-card, var(--border-radius-default)));
  box-shadow: var(--shadow-panel, var(--shadow-card, var(--shadow-default)));
  padding-top: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-bottom: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-start: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-end: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  backdrop-filter: var(--filter-panel, none);
  -webkit-backdrop-filter: var(--filter-panel, none);
  display: grid;
  gap: var(--spacing-sm);
  min-width: 0;
}

.app-ui.widget .title,
.app-ui.widget .panel-header {
  color: var(--text-color);
  font-size: var(--font-size-small);
  font-weight: 800;
  margin: 0;
}

.app-ui.widget .summary,
.app-ui.widget .chips,
.app-ui.widget .actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  min-width: 0;
}

.app-ui.widget .summary {
  color: var(--placeholder-text-color);
  font-size: var(--font-size-small);
}

.app-ui.widget .tracking-meter {
  display: grid;
  justify-items: center;
  min-width: 0;
}

.app-ui.widget .tracking-ring {
  aspect-ratio: 1;
  display: grid;
  inline-size: min(100%, var(--tracking-ring-size, 15rem));
  place-items: center;
  position: relative;
}

.app-ui.widget .tracking-ring-svg {
  display: block;
  height: 100%;
  width: 100%;
}

.app-ui.widget .tracking-ring-content {
  display: grid;
  inset: 0;
  min-width: 0;
  padding: 0.75rem;
  place-content: center;
  position: absolute;
  text-align: center;
}

.app-ui.widget .tracking-ring-value {
  font-size: clamp(1.45rem, 3vw, 2rem);
  font-weight: 800;
  line-height: 1;
  max-inline-size: calc(var(--tracking-ring-size, 13rem) * 0.74);
  overflow-wrap: anywhere;
}

.app-ui.widget .tracking-goal-cycle {
  align-content: start;
  display: grid;
  gap: var(--spacing-sm);
  justify-items: center;
  min-width: 0;
  text-align: center;
}

.app-ui.widget .tracking-goal-cycle.large .tracking-ring {
  --tracking-ring-size: 15rem;
}

.app-ui.widget .tracking-goal-cycle.compact .tracking-ring {
  --tracking-ring-size: 12rem;
}

.app-ui.widget .tracking-goal-ring-track {
  stroke: color-mix(in srgb, var(--border-color-default) 70%, transparent);
}

.app-ui.widget .tracking-goal-ring-progress {
  filter: drop-shadow(0 0.35rem 0.7rem color-mix(in srgb, var(--tracking-goal-color, var(--tracking-widget-accent, var(--primary-color))) 18%, transparent));
  stroke: var(--tracking-goal-color, var(--tracking-widget-accent, var(--primary-color)));
  transition: stroke-dashoffset 0.25s ease, stroke 0.25s ease;
}

.app-ui.widget .tracking-goal-marker {
  stroke: var(--text-color);
  stroke-linecap: round;
  stroke-width: 4;
}

.app-ui.widget .tracking-goal-icon {
  color: var(--tracking-goal-color, var(--tracking-widget-accent, var(--primary-color)));
  font-size: 1rem;
  line-height: 1;
}

.app-ui.widget .tracking-goal-copy {
  display: grid;
  gap: 0.25rem;
  max-inline-size: 16rem;
}

.app-ui.widget .tracking-goal-progress-label {
  color: var(--tracking-goal-color, var(--tracking-widget-accent, var(--primary-color)));
  font-size: var(--font-size-small);
  font-weight: 800;
}

.app-ui.widget .actions .action {
  align-items: center;
  display: inline-flex;
  gap: 0.4rem;
  justify-content: center;
}

.app-ui.widget .action-main,
.app-ui.widget :is(.log.action, .create.action, .add.action, .settings.action, .save.action) {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--primary-text-color);
}

.app-ui.widget .action-compact {
  background: transparent;
  border-color: var(--info-color);
  box-shadow: none;
  color: var(--info-color);
}
.app-ui.widget .action-compact:hover:not(:disabled, [aria-disabled=true]) {
  background: color-mix(in srgb, var(--info-color) 12%, transparent);
  border-color: var(--info-color);
  box-shadow: none;
  color: var(--info-color);
}

.app-ui.widget .input.group {
  align-items: stretch;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
}

.app-ui.widget .input.group > .input {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
  min-width: 0;
}

.app-ui.widget .addon {
  align-items: center;
  background: color-mix(in srgb, var(--background-input) 84%, transparent);
  border: var(--border-width-input, var(--border-width-default)) solid var(--border-color-input, var(--border-color-default));
  border-inline-start: 0;
  border-start-end-radius: var(--border-radius-input, var(--border-radius-default));
  border-end-end-radius: var(--border-radius-input, var(--border-radius-default));
  color: var(--placeholder-text-color);
  display: inline-flex;
  font-weight: 700;
  padding-inline: 0.75rem;
}

.app-ui.widget .entry,
.app-ui.widget .field,
.app-ui.widget .rz-dropdown,
.app-ui.widget .rz-datepicker,
.app-ui.widget .rz-numeric {
  background: var(--background-input);
  color: var(--text-color);
}

.app-ui.widget .rz-datepicker {
  font-size: var(--font-size-default);
  border: var(--border-width-input, var(--border-width-default)) solid var(--border-color-input, var(--border-color-default));
  background-color: var(--background-input, var(--background-default));
  color: var(--color-input, var(--text-color));
  min-height: var(--input-min-height, 2.75rem);
  min-width: 0;
  width: var(--input-width, 100%);
  padding-top: var(--padding-input-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-input-block, calc(var(--padding-default) / 2));
  padding-inline-start: var(--padding-input-inline, var(--padding-default));
  padding-inline-end: var(--padding-input-inline, var(--padding-default));
  border-radius: var(--border-radius-input, var(--border-radius-default));
  box-shadow: var(--shadow-input, none);
  transition: border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
  padding: 0;
}
.app-ui.widget .rz-datepicker:focus {
  outline: none;
  border-color: var(--focus-border-color, var(--primary-color));
  box-shadow: var(--shadow-input-focus, var(--shadow-default));
}
.app-ui.widget .rz-datepicker:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-input, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 2px);
  border-radius: var(--border-radius-input, var(--border-radius-default));
}

.app-ui.widget .rz-datepicker .rz-inputtext {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--text-color);
  min-height: 2.75rem;
  outline: 0;
  padding-inline: var(--padding-input-inline, var(--padding-default));
}

.app-ui.widget .tracking-help {
  color: var(--placeholder-text-color);
  display: grid;
  gap: 0.35rem;
  font-size: var(--font-size-small);
}

.app-ui.widget .tracking-help > summary {
  align-items: center;
  color: var(--primary-color);
  cursor: pointer;
  display: inline-flex;
  font-weight: 700;
  gap: 0.35rem;
  width: max-content;
}

.app-ui.widget .state.empty.compact {
  --background-status: color-mix(in srgb, var(--primary-color) 5%, transparent);
  --border-status: var(--border-width-default) solid color-mix(in srgb, var(--primary-color) 20%, var(--border-color-default));
  background: var(--background-status, var(--background-panel, var(--background-input)));
  border: var(--border-status, var(--border-panel, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-status, var(--border-radius-default));
  box-shadow: var(--shadow-status, none);
  padding-top: var(--padding-status, var(--spacing-default));
  padding-bottom: var(--padding-status, var(--spacing-default));
  padding-inline-start: var(--padding-status, var(--spacing-default));
  padding-inline-end: var(--padding-status, var(--spacing-default));
  align-items: center;
  display: flex;
  gap: var(--spacing-sm);
}

.app-ui.widget .state.loading,
.app-ui.widget .state.empty:not(.compact) {
  --background-status: color-mix(in srgb, var(--primary-color) 5%, transparent);
  --border-status: var(--border-width-default) solid color-mix(in srgb, var(--primary-color) 20%, var(--border-color-default));
  background: var(--background-status, var(--background-panel, var(--background-input)));
  border: var(--border-status, var(--border-panel, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-status, var(--border-radius-default));
  box-shadow: var(--shadow-status, none);
  padding-top: var(--padding-status, var(--spacing-default));
  padding-bottom: var(--padding-status, var(--spacing-default));
  padding-inline-start: var(--padding-status, var(--spacing-default));
  padding-inline-end: var(--padding-status, var(--spacing-default));
  align-items: center;
  display: grid;
  gap: var(--spacing-xs);
  justify-items: center;
  min-block-size: 7rem;
  text-align: center;
}

.app-ui.widget .state.empty.chart {
  min-block-size: 9rem;
}

.app-ui.widget .state.empty p {
  margin: 0;
}

.app-ui.widget .actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
}

.app-ui.widget .action {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--secondary-text-color);
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
  min-block-size: 2.25rem;
  min-inline-size: 2.25rem;
  padding-inline: 0.6rem;
}

.app-ui.widget .action:hover:not(:disabled, [aria-disabled=true]) {
  background: color-mix(in srgb, var(--secondary-color) 18%, var(--background-input));
  border-color: color-mix(in srgb, var(--secondary-color) 64%, var(--border-color-default));
  color: var(--text-color);
}

.app-ui.widget .statistics.chart {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  gap: 0;
  grid-template-rows: auto auto;
  min-height: 0;
  padding: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.app-ui.widget .statistics.chart > .canvas {
  height: var(--chart-height, 220px);
  min-height: var(--chart-height, 220px);
}

.app-ui.widget .label,
.app-ui.widget label.label {
  color: var(--text-color);
  display: block;
  font-size: var(--font-size-small);
  font-weight: 800;
  margin-block-end: 0.35rem;
}

.app-ui.widget .subtitle {
  color: var(--text-color);
  font-size: var(--font-size-small);
  font-weight: 800;
  margin: 0;
}

.app-ui.widget .grid,
.app-ui.widget .fields.two,
.app-ui.widget .summary.grid {
  display: grid;
  gap: var(--spacing-sm);
  grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
  min-width: 0;
}

.app-ui.widget .grid.compact {
  grid-template-columns: repeat(auto-fit, minmax(min(8rem, 100%), 1fr));
}

.app-ui.widget .summary.item,
.app-ui.widget .panel,
.app-ui.widget .section {
  background: var(--background-panel, var(--background-surface, var(--background-input)));
  border: var(--border-panel, var(--border-surface, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-panel, var(--border-radius-card, var(--border-radius-default)));
  box-shadow: var(--shadow-panel, var(--shadow-card, var(--shadow-default)));
  padding-top: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-bottom: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-start: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-end: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  backdrop-filter: var(--filter-panel, none);
  -webkit-backdrop-filter: var(--filter-panel, none);
  display: grid;
  gap: var(--spacing-sm);
  min-width: 0;
}

.app-ui.widget .section {
  --background-panel: color-mix(in srgb, var(--background-input) 88%, transparent);
  border-color: color-mix(in srgb, var(--tracking-widget-accent, var(--primary-color)) 34%, var(--border-color-default));
}

.app-ui.widget .label,
.app-ui.widget .entry.time,
.app-ui.widget .tracking-meta,
.app-ui.widget .hint {
  color: var(--placeholder-text-color);
  font-size: var(--font-size-small);
}

.app-ui.widget .value,
.app-ui.widget .display.value {
  background-color: transparent;
  color: var(--text-color);
  font-size: clamp(1.2rem, 2.4vw, 1.75rem);
  font-weight: 850;
  line-height: 1.05;
}

.app-ui.widget .display {
  display: grid;
  gap: 0.3rem;
  justify-items: center;
  min-width: 0;
  text-align: center;
}

.app-ui.widget .display.value {
  font-size: clamp(2rem, 5vw, 3rem);
}

.app-ui.widget .accent.primary,
.app-ui.widget .display.value.primary {
  color: var(--primary-color);
}

.app-ui.widget .accent.success,
.app-ui.widget .tracking-ring-value.success {
  color: var(--success-color);
}

.app-ui.widget .accent.warning,
.app-ui.widget .display.value.warning {
  color: var(--warning-color);
}

.app-ui.widget .accent.danger,
.app-ui.widget .display.value.danger {
  color: var(--danger-color);
}

.app-ui.widget .featured {
  grid-column: 1/-1;
}

.app-ui.widget .row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: space-between;
  min-width: 0;
}

.app-ui.widget .row > * {
  min-width: 0;
}

.app-ui.widget .row.option {
  background: color-mix(in srgb, var(--background-input) 84%, transparent);
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 70%, transparent);
  border-radius: var(--border-radius-default);
  color: inherit;
  padding: var(--spacing-sm);
  text-align: start;
  width: 100%;
}

.app-ui.widget .row.option.selected {
  border-color: var(--tracking-widget-accent, var(--primary-color));
  box-shadow: 0 0 0 0.16rem color-mix(in srgb, var(--tracking-widget-accent, var(--primary-color)) 18%, transparent);
}

.app-ui.widget .panel-list,
.app-ui.widget .list,
.app-ui.widget .cell.list {
  display: grid;
  gap: var(--spacing-sm);
  min-width: 0;
}

.app-ui.widget .cell.list {
  align-items: stretch;
}

.app-ui.widget .chip-list,
.app-ui.widget .options,
.app-ui.widget .option.choices,
.app-ui.widget .related-signal .options {
  display: grid;
  gap: var(--spacing-sm);
  grid-template-columns: repeat(auto-fit, minmax(min(7.5rem, 100%), 1fr));
  min-width: 0;
}

.app-ui.widget.energy .options {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.app-ui.widget.energy .option.choice[style*="--choice-color"] {
  border-color: color-mix(in srgb, var(--choice-color) 52%, var(--border-color-default));
  color: color-mix(in srgb, var(--choice-color) 82%, var(--text-color));
}

.app-ui.widget .chips .action,
.app-ui.widget .chip-list .action,
.app-ui.widget .option.choice,
.app-ui.widget .related-signal .option {
  min-width: 0;
  white-space: normal;
}

.app-ui.widget .option.choice,
.app-ui.widget .related-signal .option {
  display: grid;
  gap: 0.2rem;
  justify-items: center;
  min-block-size: 4.25rem;
  min-width: 0;
  text-align: center;
  white-space: normal;
}

.app-ui.widget .tracking-mood-emoji {
  font-size: 1.35rem;
  line-height: 1;
}

.app-ui.widget .input-hidden {
  block-size: 1px;
  inline-size: 1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
}

.app-ui.widget .input-hidden:focus-visible + .option.choice,
.app-ui.widget .input-hidden:focus-visible + .option.choice,
.app-ui.widget .input-hidden:focus-visible + .intensity.choice,
.app-ui.widget .related-signal .input-hidden:focus-visible + .option {
  outline: 0.16rem solid var(--focus-ring-color, var(--primary-color));
  outline-offset: 0.15rem;
}

.app-ui.widget .input-hidden:checked + .option.choice,
.app-ui.widget .input-hidden:checked + .option.choice,
.app-ui.widget .input-hidden:checked + .intensity.choice,
.app-ui.widget .related-signal .input-hidden:checked + .option,
.app-ui.widget .chip.selectable:has(input:checked) {
  border-color: var(--tracking-widget-accent, var(--primary-color));
  box-shadow: 0 0 0 0.16rem color-mix(in srgb, var(--tracking-widget-accent, var(--primary-color)) 18%, transparent);
}

.app-ui.widget .related-signal {
  background: var(--background-panel, var(--background-surface, var(--background-input)));
  border: var(--border-panel, var(--border-surface, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-panel, var(--border-radius-card, var(--border-radius-default)));
  box-shadow: var(--shadow-panel, var(--shadow-card, var(--shadow-default)));
  padding-top: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-bottom: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-start: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-end: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  backdrop-filter: var(--filter-panel, none);
  -webkit-backdrop-filter: var(--filter-panel, none);
  display: grid;
  gap: var(--spacing-sm);
  min-width: 0;
  --background-panel: color-mix(in srgb, var(--background-input) 88%, transparent);
  display: grid;
  gap: var(--spacing-sm);
}

.app-ui.widget .related-signal .chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  min-width: 0;
}

.app-ui.widget .related-signal .chip.trigger {
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
  background: transparent;
  border-color: var(--primary-color);
  box-shadow: none;
  color: var(--primary-color);
  font-size: var(--button-small-font-size, var(--font-size-small));
  min-height: var(--button-small-min-height, 2rem);
  padding-inline-start: var(--button-small-padding-inline, var(--spacing-sm));
  padding-inline-end: var(--button-small-padding-inline, var(--spacing-sm));
  padding-top: var(--button-small-padding-block, var(--spacing-xs));
  padding-bottom: var(--button-small-padding-block, var(--spacing-xs));
}
.app-ui.widget .related-signal .chip.trigger:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.app-ui.widget .related-signal .chip.trigger:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.app-ui.widget .related-signal .chip.trigger:disabled, .app-ui.widget .related-signal .chip.trigger[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}
.app-ui.widget .related-signal .chip.trigger:hover:not(:disabled, [aria-disabled=true]) {
  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
  border-color: var(--primary-color);
  box-shadow: none;
  color: var(--primary-color);
}

.app-ui.widget .related-signal .chip.trigger.active {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--primary-text-color);
}

.app-ui.widget .related-signal .chip.trigger.has-value {
  box-shadow: 0 0 0 0.16rem color-mix(in srgb, var(--tracking-widget-accent, var(--primary-color)) 18%, transparent);
}

.app-ui.widget .related-signal .picker {
  display: grid;
  gap: var(--spacing-xs);
  min-width: 0;
}

.app-ui.widget .related-signal .option {
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
  background: transparent;
  border-color: var(--primary-color);
  box-shadow: none;
  color: var(--primary-color);
  min-block-size: 3.2rem;
}
.app-ui.widget .related-signal .option:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.app-ui.widget .related-signal .option:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.app-ui.widget .related-signal .option:disabled, .app-ui.widget .related-signal .option[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}
.app-ui.widget .related-signal .option:hover:not(:disabled, [aria-disabled=true]) {
  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
  border-color: var(--primary-color);
  box-shadow: none;
  color: var(--primary-color);
}

.app-ui.widget .related-signal .option.success {
  background: transparent;
  border-color: var(--success-color);
  box-shadow: none;
  color: var(--success-color);
}
.app-ui.widget .related-signal .option.success:hover:not(:disabled, [aria-disabled=true]) {
  background: color-mix(in srgb, var(--success-color) 12%, transparent);
  border-color: var(--success-color);
  box-shadow: none;
  color: var(--success-color);
}

.app-ui.widget .related-signal .option.warning {
  background: transparent;
  border-color: var(--warning-color);
  box-shadow: none;
  color: var(--warning-color);
}
.app-ui.widget .related-signal .option.warning:hover:not(:disabled, [aria-disabled=true]) {
  background: color-mix(in srgb, var(--warning-color) 12%, transparent);
  border-color: var(--warning-color);
  box-shadow: none;
  color: var(--warning-color);
}

.app-ui.widget .related-signal .option.danger {
  background: transparent;
  border-color: var(--danger-color);
  box-shadow: none;
  color: var(--danger-color);
}
.app-ui.widget .related-signal .option.danger:hover:not(:disabled, [aria-disabled=true]) {
  background: color-mix(in srgb, var(--danger-color) 12%, transparent);
  border-color: var(--danger-color);
  box-shadow: none;
  color: var(--danger-color);
}

.app-ui.widget .related-signal .option > .bi {
  font-size: 1.2rem;
  line-height: 1;
}

.app-ui.widget .related-signal .status {
  --background-status: color-mix(in srgb, var(--primary-color) 5%, transparent);
  --border-status: var(--border-width-default) solid color-mix(in srgb, var(--primary-color) 20%, var(--border-color-default));
  background: var(--background-status, var(--background-panel, var(--background-input)));
  border: var(--border-status, var(--border-panel, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-status, var(--border-radius-default));
  box-shadow: var(--shadow-status, none);
  padding-top: var(--padding-status, var(--spacing-default));
  padding-bottom: var(--padding-status, var(--spacing-default));
  padding-inline-start: var(--padding-status, var(--spacing-default));
  padding-inline-end: var(--padding-status, var(--spacing-default));
  align-items: center;
  display: flex;
  gap: var(--spacing-xs);
  min-width: 0;
}

.app-ui.widget .related-signal .status.success {
  --background-status: color-mix(in srgb, var(--success-color) 5%, transparent);
  --border-status: var(--border-width-default) solid color-mix(in srgb, var(--success-color) 20%, var(--border-color-default));
  background: var(--background-status, var(--background-panel, var(--background-input)));
  border: var(--border-status, var(--border-panel, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-status, var(--border-radius-default));
  box-shadow: var(--shadow-status, none);
  padding-top: var(--padding-status, var(--spacing-default));
  padding-bottom: var(--padding-status, var(--spacing-default));
  padding-inline-start: var(--padding-status, var(--spacing-default));
  padding-inline-end: var(--padding-status, var(--spacing-default));
}

.app-ui.widget .related-signal .status.warning {
  --background-status: color-mix(in srgb, var(--warning-color) 5%, transparent);
  --border-status: var(--border-width-default) solid color-mix(in srgb, var(--warning-color) 20%, var(--border-color-default));
  background: var(--background-status, var(--background-panel, var(--background-input)));
  border: var(--border-status, var(--border-panel, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-status, var(--border-radius-default));
  box-shadow: var(--shadow-status, none);
  padding-top: var(--padding-status, var(--spacing-default));
  padding-bottom: var(--padding-status, var(--spacing-default));
  padding-inline-start: var(--padding-status, var(--spacing-default));
  padding-inline-end: var(--padding-status, var(--spacing-default));
}

.app-ui.widget .related-signal .status.danger {
  --background-status: color-mix(in srgb, var(--danger-color) 5%, transparent);
  --border-status: var(--border-width-default) solid color-mix(in srgb, var(--danger-color) 20%, var(--border-color-default));
  background: var(--background-status, var(--background-panel, var(--background-input)));
  border: var(--border-status, var(--border-panel, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-status, var(--border-radius-default));
  box-shadow: var(--shadow-status, none);
  padding-top: var(--padding-status, var(--spacing-default));
  padding-bottom: var(--padding-status, var(--spacing-default));
  padding-inline-start: var(--padding-status, var(--spacing-default));
  padding-inline-end: var(--padding-status, var(--spacing-default));
}

.app-ui.widget .option.choices.compact {
  grid-template-columns: repeat(auto-fit, minmax(min(5.25rem, 100%), 1fr));
}

.app-ui.widget .option.choices.compact .option.choice {
  min-block-size: 3rem;
}

.app-ui.widget.period .period-checkin-day {
  display: grid;
  gap: var(--spacing-xs);
}

.app-ui.widget.period .period-cycle-summary {
  --background-panel: color-mix(in srgb, var(--background-input) 86%, transparent);
  border-color: color-mix(in srgb, var(--danger-color) 26%, var(--border-color-default));
  display: grid;
  gap: var(--spacing-sm);
}

.app-ui.widget.period .period-cycle-summary .panel-header {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: space-between;
  min-width: 0;
}

.app-ui.widget.period .cycle summary {
  grid-template-columns: repeat(auto-fit, minmax(min(8.5rem, 100%), 1fr));
}

.app-ui.widget.period .summary.item.flow.light .value,
.app-ui.widget.period .period-cycle-day.flow-light .period-cycle-flow-dot {
  color: var(--info-color);
}

.app-ui.widget.period .summary.item.flow.medium .value,
.app-ui.widget.period .period-cycle-day.flow-medium .period-cycle-flow-dot {
  color: var(--primary-color);
}

.app-ui.widget.period .summary.item.flow.heavy .value,
.app-ui.widget.period .period-cycle-day.flow-heavy .period-cycle-flow-dot {
  color: var(--warning-color);
}

.app-ui.widget.period .summary.item.flow.very-heavy .value,
.app-ui.widget.period .period-cycle-day.flow-very-heavy .period-cycle-flow-dot {
  color: var(--danger-color);
}

.app-ui.widget.period .period-cycle-note {
  --background-status: color-mix(in srgb, var(--primary-color) 5%, transparent);
  --border-status: var(--border-width-default) solid color-mix(in srgb, var(--primary-color) 20%, var(--border-color-default));
  background: var(--background-status, var(--background-panel, var(--background-input)));
  border: var(--border-status, var(--border-panel, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-status, var(--border-radius-default));
  box-shadow: var(--shadow-status, none);
  padding-top: var(--padding-status, var(--spacing-default));
  padding-bottom: var(--padding-status, var(--spacing-default));
  padding-inline-start: var(--padding-status, var(--spacing-default));
  padding-inline-end: var(--padding-status, var(--spacing-default));
  align-items: flex-start;
  display: grid;
  gap: 0.2rem;
}

.app-ui.widget.period .period-cycle-note > .bi {
  grid-column: 1;
  grid-row: 1/span 2;
  margin-block-start: 0.1rem;
}

.app-ui.widget.period .period-cycle-note > span,
.app-ui.widget.period .period-cycle-note > small {
  grid-column: 2;
}

.app-ui.widget.period .period-cycle-note.active {
  --background-status: color-mix(in srgb, var(--warning-color) 5%, transparent);
  --border-status: var(--border-width-default) solid color-mix(in srgb, var(--warning-color) 20%, var(--border-color-default));
  background: var(--background-status, var(--background-panel, var(--background-input)));
  border: var(--border-status, var(--border-panel, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-status, var(--border-radius-default));
  box-shadow: var(--shadow-status, none);
  padding-top: var(--padding-status, var(--spacing-default));
  padding-bottom: var(--padding-status, var(--spacing-default));
  padding-inline-start: var(--padding-status, var(--spacing-default));
  padding-inline-end: var(--padding-status, var(--spacing-default));
}

.app-ui.widget.period .period-companion-fields {
  align-items: start;
}

.app-ui.widget.period .period-cycle-strip-section {
  display: grid;
  gap: var(--spacing-sm);
}

.app-ui.widget.period .period-cycle-strip {
  display: grid;
  gap: 0.35rem;
  grid-template-columns: repeat(auto-fit, minmax(2.15rem, 1fr));
  min-width: 0;
}

.app-ui.widget.period .period-cycle-day {
  align-items: center;
  aspect-ratio: 1;
  background: color-mix(in srgb, var(--background-input) 86%, transparent);
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 76%, transparent);
  border-radius: var(--border-radius-default);
  color: var(--text-color);
  display: grid;
  gap: 0.15rem;
  justify-items: center;
  min-width: 0;
  padding: 0.25rem;
}

.app-ui.widget.period .period-cycle-day.selected {
  border-color: var(--tracking-widget-accent, var(--danger-color));
  box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--tracking-widget-accent, var(--danger-color)) 18%, transparent);
}

.app-ui.widget.period .period-cycle-day.today {
  outline: 0.1rem dashed color-mix(in srgb, var(--primary-color) 48%, transparent);
  outline-offset: 0.12rem;
}

.app-ui.widget.period .period-cycle-day.period-window {
  background: color-mix(in srgb, var(--danger-color) 10%, var(--background-input));
}

.app-ui.widget.period .period-cycle-day.fertile-window {
  border-color: color-mix(in srgb, var(--warning-color) 45%, var(--border-color-default));
}

.app-ui.widget.period .period-cycle-day-number {
  font-size: var(--font-size-small);
  font-weight: 850;
  line-height: 1;
}

.app-ui.widget.period .period-cycle-flow-dot,
.app-ui.widget.period .period-cycle-window-dot,
.app-ui.widget.period .period-cycle-fertile-dot {
  block-size: 0.45rem;
  border-radius: 999px;
  display: inline-block;
  inline-size: 0.45rem;
}

.app-ui.widget.period .period-cycle-flow-dot {
  background: currentColor;
  color: color-mix(in srgb, var(--border-color-default) 75%, transparent);
}

.app-ui.widget.period .period-cycle-window-dot {
  background: color-mix(in srgb, var(--danger-color) 70%, transparent);
}

.app-ui.widget.period .period-cycle-fertile-dot {
  background: color-mix(in srgb, var(--warning-color) 72%, transparent);
}

.app-ui.widget.period .period-cycle-legend {
  color: var(--placeholder-text-color);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--font-size-small);
  gap: var(--spacing-sm);
}

.app-ui.widget.period .period-cycle-legend span {
  align-items: center;
  display: inline-flex;
  gap: 0.3rem;
}

.app-ui.widget .tracking-sleep-duration {
  --background-status: color-mix(in srgb, var(--primary-color) 5%, transparent);
  --border-status: var(--border-width-default) solid color-mix(in srgb, var(--primary-color) 20%, var(--border-color-default));
  background: var(--background-status, var(--background-panel, var(--background-input)));
  border: var(--border-status, var(--border-panel, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-status, var(--border-radius-default));
  box-shadow: var(--shadow-status, none);
  padding-top: var(--padding-status, var(--spacing-default));
  padding-bottom: var(--padding-status, var(--spacing-default));
  padding-inline-start: var(--padding-status, var(--spacing-default));
  padding-inline-end: var(--padding-status, var(--spacing-default));
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  justify-content: space-between;
}

.app-ui.widget .tracking-sleep-duration strong {
  color: var(--tracking-widget-accent, var(--primary-color));
  font-size: 1.15rem;
}

.app-ui.widget .chip.selectable {
  align-items: center;
  background: color-mix(in srgb, var(--background-input) 82%, transparent);
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 72%, transparent);
  border-radius: var(--border-radius-default);
  color: var(--text-color);
  cursor: pointer;
  display: inline-flex;
  gap: 0.4rem;
  padding: 0.45rem 0.6rem;
}

.app-ui.widget .intensity.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(2.75rem, 1fr));
}

.app-ui.widget .intensity.choice {
  min-block-size: 2.5rem;
  padding-inline: 0.35rem;
}

.app-ui.widget.pain .pain-log-section,
.app-ui.widget.pain .pain-details,
.app-ui.widget.pain .pain-chart {
  border-color: color-mix(in srgb, var(--tracking-widget-accent) 24%, var(--border-color-default));
}

.app-ui.widget.pain .pain-map-section .header {
  align-items: center;
}

.app-ui.widget.pain .intensity.choice {
  font-weight: 850;
}

.app-ui.widget.pain .row > div {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.app-ui.widget.pain .content {
  border-color: color-mix(in srgb, var(--tracking-widget-accent) 20%, var(--border-color-default));
}

.app-ui.widget.symptom .symptom-checkin,
.app-ui.widget.symptom .symptom-details,
.app-ui.widget.symptom .symptom-timeline {
  border-color: color-mix(in srgb, var(--tracking-widget-accent) 22%, var(--border-color-default));
}

.app-ui.widget.symptom .symptom-selection-list {
  gap: 0.7rem;
}

.app-ui.widget.symptom .symptom-selection-card {
  gap: 0.75rem;
}

.app-ui.widget.symptom .symptom-severity-grid {
  gap: 0.35rem;
}

.app-ui.widget.symptom .intensity.choice {
  font-weight: 850;
}

.app-ui.widget.symptom .row > div {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-width: 0;
}

.app-ui.widget.symptom .content {
  border-color: color-mix(in srgb, var(--tracking-widget-accent) 20%, var(--border-color-default));
}

.app-ui.widget .meter,
.app-ui.widget .progress-rail.tracking-progress {
  background: color-mix(in srgb, var(--border-color-default) 40%, transparent);
  border-radius: 999px;
  min-block-size: 0.75rem;
  overflow: hidden;
  width: 100%;
}

.app-ui.widget .fill,
.app-ui.widget .progress-bar {
  align-items: center;
  background: var(--tracking-fill-color, var(--tracking-widget-accent, var(--primary-color)));
  color: var(--button-primary-text-color, #fff);
  display: flex;
  font-size: var(--font-size-small);
  font-weight: 800;
  inline-size: var(--tracking-fill-width, var(--progress, 0%));
  justify-content: center;
  min-block-size: 100%;
  min-inline-size: 0.35rem;
  transition: inline-size 160ms ease;
}

.app-ui.widget .chip,
.app-ui.widget .stat.chip,
.app-ui.widget .chip {
  align-items: center;
  background: color-mix(in srgb, var(--background-input) 88%, transparent);
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 72%, transparent);
  border-radius: 999px;
  color: var(--text-color);
  display: inline-flex;
  font-size: var(--font-size-small);
  font-weight: 800;
  gap: 0.25rem;
  padding: 0.25rem 0.55rem;
  white-space: normal;
}

.app-ui.widget.nutrition {
  --tracking-widget-accent: var(--success-color);
}

.app-ui.widget.macronutrients {
  --tracking-widget-accent: var(--primary-color);
}

.app-ui.widget .section > .header,
.app-ui.widget .section.header,
.nutrition.meal.history.dialog .actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: space-between;
  min-width: 0;
}

.app-ui.widget .hero.summary {
  background: linear-gradient(135deg, color-mix(in srgb, var(--tracking-widget-accent, var(--primary-color)) 12%, var(--background-card)), color-mix(in srgb, var(--background-input) 92%, transparent));
  display: grid;
  gap: var(--spacing-default);
}

.app-ui.widget .hero.summary > .main {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-default);
  justify-content: space-between;
  min-width: 0;
}

.app-ui.widget .hero.summary > .main > div {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.app-ui.widget .hero.summary > .main small,
.app-ui.widget .title span,
.nutrition.meal.history.dialog .title span {
  color: var(--placeholder-text-color);
  font-size: var(--font-size-small);
  font-weight: 800;
}

.app-ui.widget .hero.summary > .main strong {
  color: var(--tracking-widget-accent, var(--primary-color));
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  line-height: 1;
}

.app-ui.widget .hero.summary > .main span {
  color: var(--text-color);
  font-size: var(--font-size-small);
}

.app-ui.widget .summary.grid {
  grid-template-columns: repeat(auto-fit, minmax(min(8.5rem, 100%), 1fr));
}

.app-ui.widget .muted.summary.item {
  opacity: 0.76;
}

.app-ui.widget .state.empty {
  --background-status: color-mix(in srgb, var(--primary-color) 5%, transparent);
  --border-status: var(--border-width-default) solid color-mix(in srgb, var(--primary-color) 20%, var(--border-color-default));
  background: var(--background-status, var(--background-panel, var(--background-input)));
  border: var(--border-status, var(--border-panel, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-status, var(--border-radius-default));
  box-shadow: var(--shadow-status, none);
  padding-top: var(--padding-status, var(--spacing-default));
  padding-bottom: var(--padding-status, var(--spacing-default));
  padding-inline-start: var(--padding-status, var(--spacing-default));
  padding-inline-end: var(--padding-status, var(--spacing-default));
  align-items: center;
  display: grid;
  gap: var(--spacing-sm);
  justify-items: center;
  min-block-size: 10rem;
  text-align: center;
}

.app-ui.widget .state.empty.compact {
  min-block-size: 7rem;
}

.app-ui.widget .state.empty p,
.nutrition.meal.history.dialog .state.empty p {
  color: var(--placeholder-text-color);
  margin: 0;
  max-inline-size: 34rem;
}

.app-ui.widget .recent.section,
.nutrition.meal.history.dialog,
.nutrition.meal.dialog {
  display: grid;
  gap: var(--spacing-sm);
  min-width: 0;
}

.app-ui.widget .meal.list,
.nutrition.meal.history.dialog .meal.list {
  display: grid;
  gap: var(--spacing-sm);
  min-width: 0;
}

.app-ui.widget .meal.list.compact,
.nutrition.meal.history.dialog .meal.list.compact {
  gap: 0.65rem;
}

.app-ui.widget .meal.item,
.nutrition.meal.history.dialog .meal.item {
  background: var(--background-panel, var(--background-surface, var(--background-input)));
  border: var(--border-panel, var(--border-surface, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-panel, var(--border-radius-card, var(--border-radius-default)));
  box-shadow: var(--shadow-panel, var(--shadow-card, var(--shadow-default)));
  padding-top: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-bottom: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-start: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-end: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  backdrop-filter: var(--filter-panel, none);
  -webkit-backdrop-filter: var(--filter-panel, none);
  display: grid;
  gap: var(--spacing-sm);
  min-width: 0;
  display: grid;
  gap: var(--spacing-sm);
  min-width: 0;
}

.app-ui.widget .meal.item .main,
.nutrition.meal.history.dialog .meal.item .main {
  align-items: flex-start;
  display: grid;
  gap: var(--spacing-sm);
  grid-template-columns: auto minmax(0, 1fr);
  min-width: 0;
}

.app-ui.widget .meal.item .marker,
.nutrition.meal.history.dialog .meal.item .marker {
  align-items: center;
  background: color-mix(in srgb, var(--tracking-widget-accent, var(--primary-color)) 13%, transparent);
  border-radius: var(--border-radius-default);
  color: var(--tracking-widget-accent, var(--primary-color));
  display: inline-flex;
  block-size: 2.2rem;
  inline-size: 2.2rem;
  justify-content: center;
}

.app-ui.widget .meal.item .title,
.nutrition.meal.history.dialog .meal.item .title {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: space-between;
  min-width: 0;
}

.app-ui.widget .meal.item .title strong,
.nutrition.meal.history.dialog .meal.item .title strong {
  color: var(--text-color);
  font-size: var(--font-size-base);
}

.app-ui.widget .meal.item p,
.nutrition.meal.history.dialog .meal.item p {
  color: var(--placeholder-text-color);
  font-size: var(--font-size-small);
  margin: 0.2rem 0 0;
}

.app-ui.widget .nutrient.chips,
.nutrition.meal.history.dialog .nutrient.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-width: 0;
}

.app-ui.widget .nutrient.chip,
.nutrition.meal.history.dialog .nutrient.chip {
  --chip-color: var(--tracking-widget-accent, var(--primary-color));
}

.app-ui.widget .meal.item .actions,
.nutrition.meal.history.dialog .meal.item .actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
}

.nutrition.meal.dialog .section,
.nutrition.meal.dialog details.section {
  background: var(--background-panel, var(--background-surface, var(--background-input)));
  border: var(--border-panel, var(--border-surface, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-panel, var(--border-radius-card, var(--border-radius-default)));
  box-shadow: var(--shadow-panel, var(--shadow-card, var(--shadow-default)));
  padding-top: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-bottom: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-start: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-end: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  backdrop-filter: var(--filter-panel, none);
  -webkit-backdrop-filter: var(--filter-panel, none);
  display: grid;
  gap: var(--spacing-sm);
  min-width: 0;
}

.nutrition.meal.dialog summary.title {
  cursor: pointer;
}

.nutrition.meal.dialog .meal.type.choices .choice {
  justify-content: center;
}

@media (max-width: 640px) {
  .app-ui.widget .hero.summary > .main,
  .app-ui.widget .section > .header,
  .app-ui.widget .section.header,
  .nutrition.meal.history.dialog .actions {
    align-items: stretch;
    flex-direction: column;
  }
  .app-ui.widget .hero.summary > .main .action,
  .app-ui.widget .section > .header .action,
  .app-ui.widget .section.header .action,
  .nutrition.meal.history.dialog .actions .action {
    inline-size: 100%;
    justify-content: center;
  }
  .app-ui.widget .meal.item .actions,
  .nutrition.meal.history.dialog .meal.item .actions {
    justify-content: stretch;
  }
  .app-ui.widget .meal.item .actions .action,
  .nutrition.meal.history.dialog .meal.item .actions .action {
    flex: 1 1 0;
  }
}
.daily-signals,
.daily-signals-dialog {
  display: grid;
  gap: var(--spacing-default);
  min-width: 0;
}

.daily-signals-header,
.daily-signals-dialog-header {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-default);
  justify-content: space-between;
  min-width: 0;
}

.daily-signals-title {
  align-items: flex-start;
  display: flex;
  gap: var(--spacing-sm);
  min-width: 0;
}

.daily-signals-title > .bi {
  align-items: center;
  background: color-mix(in srgb, var(--primary-color) 14%, transparent);
  border-radius: var(--border-radius-default);
  color: var(--primary-color);
  display: inline-flex;
  flex: 0 0 2.5rem;
  block-size: 2.5rem;
  inline-size: 2.5rem;
  justify-content: center;
}

.daily-signals h4,
.daily-signals h5,
.daily-signals-dialog h4 {
  margin: 0;
}

.daily-signals p,
.daily-signals-dialog p {
  margin: 0;
}

.daily-signals-header time,
.daily-signals-title p,
.daily-signals-dialog-header p {
  color: var(--placeholder-text-color);
  font-size: var(--font-size-small);
}

.daily-signals-dialog-header .close.action {
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--secondary-text-color);
  flex: 0 0 auto;
  min-height: 2.4rem;
  min-width: 2.4rem;
  padding: 0;
  width: 2.4rem;
}
.daily-signals-dialog-header .close.action:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.daily-signals-dialog-header .close.action:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.daily-signals-dialog-header .close.action:disabled, .daily-signals-dialog-header .close.action[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}

.daily-signals-metrics {
  display: grid;
  gap: var(--spacing-sm);
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  min-width: 0;
}

.daily-signals-metric,
.daily-signals-insight {
  align-items: flex-start;
  background: color-mix(in srgb, var(--background-default) 84%, transparent);
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 70%, transparent);
  border-radius: var(--border-radius-default);
  display: flex;
  gap: var(--spacing-sm);
  min-width: 0;
  padding: 0.65rem;
  text-align: start;
}

.daily-signals-metric > .bi,
.daily-signals-insight > .bi {
  color: var(--daily-signals-accent, var(--primary-color));
  flex: 0 0 auto;
  font-size: 1.25rem;
  line-height: 1;
  margin-block-start: 0.1rem;
}

.daily-signals-metric span,
.daily-signals-metric small,
.daily-signals-insight p {
  color: var(--placeholder-text-color);
}

.daily-signals-metric strong {
  color: var(--text-color);
  display: block;
  font-size: 1.2rem;
  line-height: 1.1;
  margin-block: 0.15rem;
}

.daily-signals-insights {
  display: grid;
  gap: var(--spacing-sm);
  min-width: 0;
}

.daily-signals-insight {
  --daily-signals-accent: var(--info-color);
}

.daily-signals-insight-care {
  --daily-signals-accent: var(--warning-color);
}

.daily-signals-insight-good {
  --daily-signals-accent: var(--success-color);
}

.daily-signals-insight-work {
  --daily-signals-accent: var(--primary-color);
}

.daily-signals-insight-steady {
  --daily-signals-accent: var(--secondary-color);
}

.daily-signals-empty {
  --empty-state-padding: 0.85rem;
  --empty-state-gap: var(--spacing-xs);
  display: grid;
  place-items: center;
  min-height: 8rem;
  color: var(--empty-state-color, var(--placeholder-text-color));
  gap: var(--empty-state-gap, var(--spacing-sm));
  padding: var(--empty-state-padding, var(--padding-default));
  text-align: center;
  align-items: center;
  min-width: 0;
}

.daily-signals-empty > .bi {
  --empty-icon-background: color-mix(in srgb, var(--background-input) 94%, var(--primary-background-color));
  --empty-icon-shadow: none;
  align-items: center;
  background: var(--empty-icon-background, linear-gradient(145deg, color-mix(in srgb, var(--background-input) 98%, transparent), color-mix(in srgb, var(--primary-color) 8%, var(--background-input))));
  border: var(--empty-icon-border, var(--border-width-default) solid color-mix(in srgb, #ffffff 78%, transparent));
  border-radius: 999px;
  box-shadow: var(--empty-icon-shadow, 0 1rem 2.2rem color-mix(in srgb, var(--shadow-color, #1f2937) 18%, transparent), 0 0 0 0.65rem color-mix(in srgb, var(--primary-color) 7%, transparent));
  color: var(--empty-icon-color, var(--primary-color));
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 1.25rem;
  height: 3rem;
  justify-content: center;
  line-height: 1;
  width: 3rem;
}

.daily-signals-empty strong,
.daily-signals-empty p {
  margin: 0;
  overflow-wrap: anywhere;
}

.app-ui.widget .header {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: space-between;
  min-width: 0;
}

.app-ui.widget .header small {
  display: block;
}

.app-ui.widget .form {
  background: var(--background-panel, var(--background-surface, var(--background-input)));
  border: var(--border-panel, var(--border-surface, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-panel, var(--border-radius-card, var(--border-radius-default)));
  box-shadow: var(--shadow-panel, var(--shadow-card, var(--shadow-default)));
  padding-top: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-bottom: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-start: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-end: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  backdrop-filter: var(--filter-panel, none);
  -webkit-backdrop-filter: var(--filter-panel, none);
  display: grid;
  gap: var(--spacing-sm);
  min-width: 0;
  display: grid;
  gap: var(--spacing-sm);
}

.app-ui.widget .fields {
  display: grid;
  gap: var(--spacing-sm);
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  min-width: 0;
}

.app-ui.widget .insight {
  --background-status: color-mix(in srgb, var(--primary-color) 5%, transparent);
  --border-status: var(--border-width-default) solid color-mix(in srgb, var(--primary-color) 20%, var(--border-color-default));
  background: var(--background-status, var(--background-panel, var(--background-input)));
  border: var(--border-status, var(--border-panel, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-status, var(--border-radius-default));
  box-shadow: var(--shadow-status, none);
  padding-top: var(--padding-status, var(--spacing-default));
  padding-bottom: var(--padding-status, var(--spacing-default));
  padding-inline-start: var(--padding-status, var(--spacing-default));
  padding-inline-end: var(--padding-status, var(--spacing-default));
  align-items: flex-start;
  display: grid;
  gap: var(--spacing-sm);
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-width: 0;
}

.app-ui.widget .insight > .bi {
  color: var(--insight-accent, var(--primary-color));
  font-size: 1.25rem;
  margin-block-start: 0.1rem;
}

.app-ui.widget .insight p {
  color: var(--placeholder-text-color);
  margin: 0;
}

.app-ui.widget .insight-care {
  --insight-accent: var(--warning-color);
}

.app-ui.widget .insight-good {
  --insight-accent: var(--success-color);
}

.app-ui.widget .insight-steady,
.app-ui.widget .insight-notice {
  --insight-accent: var(--primary-color);
}

.app-ui.widget aside.hint {
  --background-status: color-mix(in srgb, var(--info-color) 5%, transparent);
  --border-status: var(--border-width-default) solid color-mix(in srgb, var(--info-color) 20%, var(--border-color-default));
  background: var(--background-status, var(--background-panel, var(--background-input)));
  border: var(--border-status, var(--border-panel, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-status, var(--border-radius-default));
  box-shadow: var(--shadow-status, none);
  padding-top: var(--padding-status, var(--spacing-default));
  padding-bottom: var(--padding-status, var(--spacing-default));
  padding-inline-start: var(--padding-status, var(--spacing-default));
  padding-inline-end: var(--padding-status, var(--spacing-default));
  align-items: center;
  color: var(--info-text-color);
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.app-ui.widget aside.hint > span {
  flex: 1 1 14rem;
  min-width: 0;
}

.app-ui.widget ul,
.app-ui.widget ol {
  display: grid;
  gap: var(--spacing-sm);
  list-style: none;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.app-ui.widget ul > li,
.app-ui.widget ol > li {
  display: grid;
  gap: var(--spacing-sm);
  grid-template-columns: auto minmax(0, 1fr);
  min-width: 0;
}

.app-ui.widget ul > li > .marker,
.app-ui.widget ol > li > .marker,
.app-ui.widget .timeline .marker {
  background: var(--tracking-widget-accent, var(--primary-color));
  border-radius: 999px;
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--tracking-widget-accent, var(--primary-color)) 18%, transparent);
  display: inline-flex;
  block-size: 0.7rem;
  inline-size: 0.7rem;
  margin-block-start: 0.45rem;
}

.app-ui.widget .content {
  background: color-mix(in srgb, var(--background-input) 88%, transparent);
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 70%, transparent);
  border-radius: var(--border-radius-default);
  display: grid;
  gap: 0.4rem;
  min-width: 0;
  padding: var(--spacing-sm);
}

.app-ui.widget .row {
  align-items: center;
  display: flex;
  gap: var(--spacing-sm);
  justify-content: space-between;
}

.app-ui.widget .row time,
.app-ui.widget .note {
  color: var(--placeholder-text-color);
  font-size: var(--font-size-small);
}

.app-ui.widget .note {
  margin: 0;
  overflow-wrap: anywhere;
}

.state.empty.compact {
  min-height: 6rem;
}

.app-ui.widget .status.chip {
  align-items: center;
  background: color-mix(in srgb, var(--background-input) 88%, transparent);
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 72%, transparent);
  border-radius: 999px;
  color: var(--text-color);
  display: inline-flex;
  font-size: var(--font-size-small);
  font-weight: 800;
  gap: 0.25rem;
  padding: 0.25rem 0.55rem;
  white-space: normal;
  background: color-mix(in srgb, var(--tracking-widget-accent, var(--primary-color)) 10%, var(--background-surface));
  border: 1px solid color-mix(in srgb, var(--tracking-widget-accent, var(--primary-color)) 22%, var(--border-color-default));
  color: var(--text-color-default);
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.2;
  max-width: 100%;
  min-height: 1.75rem;
  padding: 0.32rem 0.65rem;
}

.app-ui.widget .status.chip.taken {
  background: color-mix(in srgb, var(--success-color, #2f8f5b) 14%, var(--background-surface));
  border-color: color-mix(in srgb, var(--success-color, #2f8f5b) 30%, var(--border-color-default));
}

.app-ui.widget .status.chip.due {
  background: color-mix(in srgb, var(--warning-color, #c58b00) 14%, var(--background-surface));
  border-color: color-mix(in srgb, var(--warning-color, #c58b00) 30%, var(--border-color-default));
}

.app-ui.widget .status.chip.overdue {
  background: color-mix(in srgb, var(--danger-color, #c84d4d) 12%, var(--background-surface));
  border-color: color-mix(in srgb, var(--danger-color, #c84d4d) 30%, var(--border-color-default));
}

.app-ui.widget.medication .body {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "today" "setup" "confirm" "weekly";
}

.app-ui.widget.medication .medication-today {
  background: var(--background-panel, var(--background-surface, var(--background-input)));
  border: var(--border-panel, var(--border-surface, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-panel, var(--border-radius-card, var(--border-radius-default)));
  box-shadow: var(--shadow-panel, var(--shadow-card, var(--shadow-default)));
  padding-top: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-bottom: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-start: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-end: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  backdrop-filter: var(--filter-panel, none);
  -webkit-backdrop-filter: var(--filter-panel, none);
  display: grid;
  gap: var(--spacing-sm);
  min-width: 0;
  display: grid;
  gap: var(--spacing-md);
  grid-area: today;
}

.app-ui.widget.medication .medication-setup {
  grid-area: setup;
}

.app-ui.widget.medication .medication-confirm {
  grid-area: confirm;
}

.app-ui.widget.medication .medication-weekly {
  background: var(--background-panel, var(--background-surface, var(--background-input)));
  border: var(--border-panel, var(--border-surface, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-panel, var(--border-radius-card, var(--border-radius-default)));
  box-shadow: var(--shadow-panel, var(--shadow-card, var(--shadow-default)));
  padding-top: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-bottom: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-start: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-end: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  backdrop-filter: var(--filter-panel, none);
  -webkit-backdrop-filter: var(--filter-panel, none);
  display: grid;
  gap: var(--spacing-sm);
  min-width: 0;
  display: grid;
  gap: var(--spacing-md);
  grid-area: weekly;
}

.app-ui.widget.medication .medication-hero {
  align-items: start;
  display: grid;
  gap: var(--spacing-md);
  grid-template-columns: minmax(0, 1fr) auto;
}

.app-ui.widget.medication .medication-hero strong {
  display: block;
  font-size: 1.35rem;
  line-height: 1.2;
  margin-top: 0.15rem;
}

.app-ui.widget.medication .medication-hero p,
.app-ui.widget.medication .medication-dose-card p {
  margin: 0.25rem 0 0;
}

.app-ui.widget.medication .medication-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.app-ui.widget.medication .medication-dose-list,
.app-ui.widget.medication .medication-week-list,
.app-ui.widget.medication .medication-time-list {
  display: grid;
  gap: var(--spacing-sm);
}

.app-ui.widget.medication .medication-dose-card,
.app-ui.widget.medication .medication-week-row,
.app-ui.widget.medication .medication-time-row {
  background: color-mix(in srgb, var(--background-surface) 92%, var(--tracking-widget-accent, var(--primary-color)));
  border: 1px solid color-mix(in srgb, var(--tracking-widget-accent, var(--primary-color)) 18%, var(--border-color-default));
  border-radius: var(--border-radius-md, 0.5rem);
  display: grid;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
}

.app-ui.widget.medication .medication-dose-card.overdue {
  border-color: color-mix(in srgb, var(--danger-color, #c84d4d) 34%, var(--border-color-default));
}

.app-ui.widget.medication .medication-dose-card.taken {
  opacity: 0.82;
}

.app-ui.widget.medication .medication-dose-main,
.app-ui.widget.medication .medication-week-row,
.app-ui.widget.medication .medication-time-row {
  align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
}

.app-ui.widget.medication .medication-dose-main {
  display: grid;
  gap: var(--spacing-sm);
}

.app-ui.widget.medication .medication-dose-main strong,
.app-ui.widget.medication .medication-week-row strong {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.app-ui.widget.medication .medication-dose-time {
  color: var(--tracking-widget-accent, var(--primary-color));
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
}

.app-ui.widget.medication .medication-dose-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.app-ui.widget.medication .medication-dose-meta span {
  background: color-mix(in srgb, var(--tracking-widget-accent, var(--primary-color)) 8%, transparent);
  border-radius: var(--border-radius-pill, 999px);
  font-size: 0.82rem;
  padding: 0.25rem 0.55rem;
}

.app-ui.widget.medication .medication-setup .panel,
.app-ui.widget.medication .medication-confirm .panel {
  background: var(--background-panel, var(--background-surface, var(--background-input)));
  border: var(--border-panel, var(--border-surface, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-panel, var(--border-radius-card, var(--border-radius-default)));
  box-shadow: var(--shadow-panel, var(--shadow-card, var(--shadow-default)));
  padding-top: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-bottom: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-start: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-end: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  backdrop-filter: var(--filter-panel, none);
  -webkit-backdrop-filter: var(--filter-panel, none);
  display: grid;
  gap: var(--spacing-sm);
  min-width: 0;
}

.app-ui.widget.medication .tracking-segmented {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.app-ui.widget.medication .medication-days {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.45rem;
}

.app-ui.widget.medication .medication-days .chip {
  min-width: 0;
  padding-inline: 0.45rem;
}

.app-ui.widget.medication .medication-time-row {
  grid-template-columns: minmax(7rem, 10rem) auto auto;
  padding: var(--spacing-sm);
}

.app-ui.widget.medication .medication-time-row input {
  min-width: 0;
}

.rz-dialog-content .tracking.capture.dialog {
  box-shadow: none;
  margin: 0;
  max-width: none;
}

.nutrition.meal.dialog .rz-dialog, .app-ui.ledger.dialog .rz-dialog {
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
  padding: 0;
}

.nutrition.meal.dialog .rz-dialog-content, .app-ui.ledger.dialog .rz-dialog-content {
  padding: 0;
}

.nutrition.meal.dialog .rz-dialog-titlebar, .app-ui.ledger.dialog .rz-dialog-titlebar {
  background: transparent;
  border: 0;
  padding-inline: 0;
}

.tracking.entry.editor,
.tracking.capture.dialog {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-default);
  min-width: 0;
  min-width: 0;
}

.tracking.entry.editor > form,
.tracking.capture.dialog > form {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-default);
  min-width: 0;
  min-width: 0;
}

.tracking.entry.editor .input.group,
.tracking.capture.dialog .input.group {
  align-items: stretch;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
}

.tracking.entry.editor .input.group > .field,
.tracking.capture.dialog .input.group > .field {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
  min-width: 0;
}

.tracking.entry.editor .addon,
.tracking.capture.dialog .addon {
  align-items: center;
  background: color-mix(in srgb, var(--background-input) 84%, transparent);
  border: var(--border-width-input, var(--border-width-default)) solid var(--border-color-input, var(--border-color-default));
  border-inline-start: 0;
  border-start-end-radius: var(--border-radius-input, var(--border-radius-default));
  border-end-end-radius: var(--border-radius-input, var(--border-radius-default));
  color: var(--placeholder-text-color);
  display: inline-flex;
  font-weight: 700;
  padding-inline: 0.75rem;
}

.tracking.capture.dialog .section,
.tracking.capture.dialog .entries {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  min-width: 0;
  min-width: 0;
}

.tracking.capture.dialog .entry {
  background: var(--background-panel, var(--background-surface, var(--background-input)));
  border: var(--border-panel, var(--border-surface, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-panel, var(--border-radius-card, var(--border-radius-default)));
  box-shadow: var(--shadow-panel, var(--shadow-card, var(--shadow-default)));
  padding-top: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-bottom: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-start: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-end: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  backdrop-filter: var(--filter-panel, none);
  -webkit-backdrop-filter: var(--filter-panel, none);
  display: grid;
  gap: var(--spacing-sm);
  min-width: 0;
  border-radius: var(--border-radius-default);
}

.tracking.capture.dialog .row.header {
  gap: 0.45rem;
  justify-content: flex-start;
}

.tracking.context.expander {
  background: var(--background-panel, var(--background-surface, var(--background-input)));
  border: var(--border-panel, var(--border-surface, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-panel, var(--border-radius-card, var(--border-radius-default)));
  box-shadow: var(--shadow-panel, var(--shadow-card, var(--shadow-default)));
  padding-top: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-bottom: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-start: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-end: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  backdrop-filter: var(--filter-panel, none);
  -webkit-backdrop-filter: var(--filter-panel, none);
  display: grid;
  gap: var(--spacing-sm);
  min-width: 0;
}

.tracking.context.expander > .summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: var(--spacing-sm);
  justify-content: space-between;
  min-width: 0;
}

.tracking.context.expander .section {
  margin-top: var(--spacing-sm);
}

.tracking .chips,
.entry.list .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-width: 0;
}

.tracking .chip,
.entry.list .chip {
  align-items: center;
  background: color-mix(in srgb, var(--background-input) 88%, transparent);
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 72%, transparent);
  border-radius: 999px;
  color: var(--text-color);
  display: inline-flex;
  font-size: var(--font-size-small);
  font-weight: 800;
  gap: 0.25rem;
  padding: 0.25rem 0.55rem;
  white-space: normal;
}

.tracking .action,
.entry.list .action {
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
}
.tracking .action:focus-visible,
.entry.list .action:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.tracking .action:hover:not(:disabled, [aria-disabled=true]),
.entry.list .action:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.tracking .action:disabled, .tracking .action[aria-disabled=true],
.entry.list .action:disabled,
.entry.list .action[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}

.tracking .save.action {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--primary-text-color);
}

.tracking .cancel.action {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--secondary-text-color);
}

.tracking .delete.action,
.entry.list .delete.action {
  background: transparent;
  border-color: var(--danger-color);
  box-shadow: none;
  color: var(--danger-color);
}
.tracking .delete.action:hover:not(:disabled, [aria-disabled=true]),
.entry.list .delete.action:hover:not(:disabled, [aria-disabled=true]) {
  background: color-mix(in srgb, var(--danger-color) 12%, transparent);
  border-color: var(--danger-color);
  box-shadow: none;
  color: var(--danger-color);
}

.tracking.context.expander .choice.action,
.entry-toggle .choice.action {
  background: transparent;
  border-color: var(--primary-color);
  box-shadow: none;
  color: var(--primary-color);
  font-size: var(--button-small-font-size, var(--font-size-small));
  min-height: var(--button-small-min-height, 2rem);
  padding-inline-start: var(--button-small-padding-inline, var(--spacing-sm));
  padding-inline-end: var(--button-small-padding-inline, var(--spacing-sm));
  padding-top: var(--button-small-padding-block, var(--spacing-xs));
  padding-bottom: var(--button-small-padding-block, var(--spacing-xs));
}
.tracking.context.expander .choice.action:hover:not(:disabled, [aria-disabled=true]),
.entry-toggle .choice.action:hover:not(:disabled, [aria-disabled=true]) {
  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
  border-color: var(--primary-color);
  box-shadow: none;
  color: var(--primary-color);
}

.tracking.context.expander .choice.action.selected,
.entry-toggle .choice.action.selected {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--primary-text-color);
}

.entry.list .add.action {
  background: var(--success-color);
  border-color: var(--success-color);
  color: var(--success-text-color);
  font-size: var(--button-small-font-size, var(--font-size-small));
  min-height: var(--button-small-min-height, 2rem);
  padding-inline-start: var(--button-small-padding-inline, var(--spacing-sm));
  padding-inline-end: var(--button-small-padding-inline, var(--spacing-sm));
  padding-top: var(--button-small-padding-block, var(--spacing-xs));
  padding-bottom: var(--button-small-padding-block, var(--spacing-xs));
}

.entry-actions .edit.action,
.entry-actions .delete.action {
  flex: 0 0 auto;
  min-height: 2rem;
  min-width: 2rem;
  padding: 0;
  width: 2rem;
}

.entry-actions .edit.action {
  background: transparent;
  border-color: var(--primary-color);
  box-shadow: none;
  color: var(--primary-color);
}
.entry-actions .edit.action:hover:not(:disabled, [aria-disabled=true]) {
  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
  border-color: var(--primary-color);
  box-shadow: none;
  color: var(--primary-color);
}

.tracking.entry.note {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  min-width: 0;
}

.tracking.entry.note .editor,
.tracking.entry.note .display {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  min-width: 0;
}

.tracking.entry.note .actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  min-width: 0;
}

.tracking.entry.note .link.action {
  appearance: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: inherit;
  font: inherit;
  margin: 0;
  padding: 0;
  text-align: inherit;
  color: var(--primary-color);
  display: inline-flex;
  gap: 0.35rem;
}

.app-ui.widget.medication .medication-week-doses {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: flex-end;
}

.app-ui.widget.workout .body {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "today" "setup" "plans" "recent";
}

.app-ui.widget.workout .workout-today {
  background: var(--background-panel, var(--background-surface, var(--background-input)));
  border: var(--border-panel, var(--border-surface, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-panel, var(--border-radius-card, var(--border-radius-default)));
  box-shadow: var(--shadow-panel, var(--shadow-card, var(--shadow-default)));
  padding-top: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-bottom: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-start: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-end: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  backdrop-filter: var(--filter-panel, none);
  -webkit-backdrop-filter: var(--filter-panel, none);
  display: grid;
  gap: var(--spacing-sm);
  min-width: 0;
  display: grid;
  gap: var(--spacing-md);
  grid-area: today;
}

.app-ui.widget.workout .workout-setup {
  grid-area: setup;
}

.app-ui.widget.workout .workout-plans {
  background: var(--background-panel, var(--background-surface, var(--background-input)));
  border: var(--border-panel, var(--border-surface, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-panel, var(--border-radius-card, var(--border-radius-default)));
  box-shadow: var(--shadow-panel, var(--shadow-card, var(--shadow-default)));
  padding-top: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-bottom: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-start: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-end: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  backdrop-filter: var(--filter-panel, none);
  -webkit-backdrop-filter: var(--filter-panel, none);
  display: grid;
  gap: var(--spacing-sm);
  min-width: 0;
  display: grid;
  gap: var(--spacing-md);
  grid-area: plans;
}

.app-ui.widget.workout .workout-recent {
  background: var(--background-panel, var(--background-surface, var(--background-input)));
  border: var(--border-panel, var(--border-surface, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-panel, var(--border-radius-card, var(--border-radius-default)));
  box-shadow: var(--shadow-panel, var(--shadow-card, var(--shadow-default)));
  padding-top: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-bottom: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-start: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-end: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  backdrop-filter: var(--filter-panel, none);
  -webkit-backdrop-filter: var(--filter-panel, none);
  display: grid;
  gap: var(--spacing-sm);
  min-width: 0;
  display: grid;
  gap: var(--spacing-md);
  grid-area: recent;
}

.app-ui.widget.workout .workout-setup .panel {
  background: var(--background-panel, var(--background-surface, var(--background-input)));
  border: var(--border-panel, var(--border-surface, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-panel, var(--border-radius-card, var(--border-radius-default)));
  box-shadow: var(--shadow-panel, var(--shadow-card, var(--shadow-default)));
  padding-top: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-bottom: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-start: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-end: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  backdrop-filter: var(--filter-panel, none);
  -webkit-backdrop-filter: var(--filter-panel, none);
  display: grid;
  gap: var(--spacing-sm);
  min-width: 0;
}

.app-ui.widget.workout .workout-hero {
  align-items: start;
  display: grid;
  gap: var(--spacing-md);
  grid-template-columns: minmax(0, 1fr) auto;
}

.app-ui.widget.workout .workout-hero strong {
  display: block;
  font-size: 1.35rem;
  line-height: 1.2;
  margin-top: 0.15rem;
}

.app-ui.widget.workout .workout-hero p {
  margin: 0.25rem 0 0;
}

.app-ui.widget.workout .workout-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.app-ui.widget.workout .workout.list,
.app-ui.widget.workout .workout-plan-list {
  display: grid;
  gap: var(--spacing-sm);
}

.app-ui.widget.workout .workout.item,
.app-ui.widget.workout .plan.item {
  background: color-mix(in srgb, var(--background-surface) 92%, var(--tracking-widget-accent, var(--primary-color)));
  border: 1px solid color-mix(in srgb, var(--tracking-widget-accent, var(--primary-color)) 18%, var(--border-color-default));
  border-radius: var(--border-radius-md, 0.5rem);
  display: grid;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
}

.app-ui.widget.workout .workout.item.overdue {
  border-color: color-mix(in srgb, var(--danger-color, #c84d4d) 34%, var(--border-color-default));
}

.app-ui.widget.workout .workout.item.taken {
  opacity: 0.86;
}

.app-ui.widget.workout .main {
  align-items: center;
  display: grid;
  gap: var(--spacing-sm);
  grid-template-columns: minmax(0, 1fr) auto;
}

.app-ui.widget.workout .main strong {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.app-ui.widget.workout .time {
  color: var(--tracking-widget-accent, var(--primary-color));
  display: block;
  font-size: 0.9rem;
  font-weight: 750;
}

.app-ui.widget.workout .workout-session-meta,
.app-ui.widget.workout .workout-session-values {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-block-start: 0.35rem;
}

.app-ui.widget.workout .workout-session-values span {
  background: color-mix(in srgb, var(--tracking-widget-accent, var(--primary-color)) 8%, transparent);
  border-radius: var(--border-radius-pill, 999px);
  color: var(--text-color);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.25rem 0.55rem;
}

.app-ui.widget.workout .status.chip.connected {
  background: color-mix(in srgb, var(--info-color, #3478f6) 12%, var(--background-surface));
  border-color: color-mix(in srgb, var(--info-color, #3478f6) 30%, var(--border-color-default));
}

.app-ui.widget.workout .workout-days {
  gap: 0.45rem;
}

.app-ui.widget.workout ul > li.connected .marker {
  background: var(--info-color, var(--tracking-widget-accent, var(--primary-color)));
}

.app-ui.widget.workout .content {
  min-width: 0;
}

.app-ui.widget.workout .row > div {
  min-width: 0;
}

.app-ui.widget.workout.session.dialog,
.app-ui.widget.workout.history.dialog {
  box-shadow: none;
  margin: 0;
}

.app-ui.widget.workout .workout-dialog-heading {
  background: var(--background-panel, var(--background-surface, var(--background-input)));
  border: var(--border-panel, var(--border-surface, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-panel, var(--border-radius-card, var(--border-radius-default)));
  box-shadow: var(--shadow-panel, var(--shadow-card, var(--shadow-default)));
  padding-top: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-bottom: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-start: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-end: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  backdrop-filter: var(--filter-panel, none);
  -webkit-backdrop-filter: var(--filter-panel, none);
  display: grid;
  gap: var(--spacing-sm);
  min-width: 0;
  align-items: start;
  display: grid;
  gap: var(--spacing-sm);
  grid-template-columns: auto minmax(0, 1fr);
  margin-bottom: var(--spacing-md);
}

.app-ui.widget.workout .workout-dialog-heading p {
  color: var(--placeholder-text-color);
  margin: 0.2rem 0 0;
}

.app-ui.widget.vitals .body {
  grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr);
  grid-template-areas: "summary summary" "sources sources" "log log" "timeline timeline" "chart chart";
}

.app-ui.widget.vitals .vitals-summary {
  background: var(--background-panel, var(--background-surface, var(--background-input)));
  border: var(--border-panel, var(--border-surface, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-panel, var(--border-radius-card, var(--border-radius-default)));
  box-shadow: var(--shadow-panel, var(--shadow-card, var(--shadow-default)));
  padding-top: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-bottom: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-start: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-end: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  backdrop-filter: var(--filter-panel, none);
  -webkit-backdrop-filter: var(--filter-panel, none);
  display: grid;
  gap: var(--spacing-sm);
  min-width: 0;
  align-items: start;
  display: grid;
  gap: var(--spacing-md);
  grid-area: summary;
  grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr) auto;
}

.app-ui.widget.vitals .vitals-source-summary {
  grid-area: sources;
}

.app-ui.widget.vitals .vitals-log {
  background: var(--background-panel, var(--background-surface, var(--background-input)));
  border: var(--border-panel, var(--border-surface, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-panel, var(--border-radius-card, var(--border-radius-default)));
  box-shadow: var(--shadow-panel, var(--shadow-card, var(--shadow-default)));
  padding-top: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-bottom: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-start: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-end: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  backdrop-filter: var(--filter-panel, none);
  -webkit-backdrop-filter: var(--filter-panel, none);
  display: grid;
  gap: var(--spacing-sm);
  min-width: 0;
  grid-area: log;
}

.app-ui.widget.vitals .vitals-timeline {
  background: var(--background-panel, var(--background-surface, var(--background-input)));
  border: var(--border-panel, var(--border-surface, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-panel, var(--border-radius-card, var(--border-radius-default)));
  box-shadow: var(--shadow-panel, var(--shadow-card, var(--shadow-default)));
  padding-top: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-bottom: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-start: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-end: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  backdrop-filter: var(--filter-panel, none);
  -webkit-backdrop-filter: var(--filter-panel, none);
  display: grid;
  gap: var(--spacing-sm);
  min-width: 0;
  grid-area: timeline;
}

.app-ui.widget.vitals .vitals-chart {
  background: var(--background-panel, var(--background-surface, var(--background-input)));
  border: var(--border-panel, var(--border-surface, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-panel, var(--border-radius-card, var(--border-radius-default)));
  box-shadow: var(--shadow-panel, var(--shadow-card, var(--shadow-default)));
  padding-top: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-bottom: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-start: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-end: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  backdrop-filter: var(--filter-panel, none);
  -webkit-backdrop-filter: var(--filter-panel, none);
  display: grid;
  gap: var(--spacing-sm);
  min-width: 0;
  grid-area: chart;
}

.app-ui.widget.vitals .vitals-current {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.app-ui.widget.vitals .vitals-current .display.value {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  overflow-wrap: anywhere;
}

.app-ui.widget.vitals .vitals-summary .actions {
  align-self: start;
  justify-content: flex-end;
}

.app-ui.widget.vitals .vitals-source-summary .panel {
  block-size: 100%;
}

.app-ui.widget.vitals .vitals-chart {
  block-size: auto;
}

.app-ui.widget.vitals .vitals-source-summary .state.empty {
  align-items: start;
  grid-template-columns: auto minmax(0, 1fr);
  justify-items: start;
  text-align: start;
}

.app-ui.widget.vitals .vitals-source-summary .state.empty p {
  margin: 0.2rem 0 0;
}

.app-ui.widget.vitals .vitals-log .log.action {
  justify-self: start;
}

.app-ui.widget.vitals .content {
  border-color: color-mix(in srgb, var(--tracking-widget-accent, var(--primary-color)) 24%, var(--border-color-default));
}

.app-ui.widget.vitals .row strong {
  color: var(--tracking-widget-accent, var(--primary-color));
}

.app-ui.widget.ledger .body {
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  grid-template-areas: "selector selector" "setup setup" "summary summary" "log people" "settlements people" "activity activity";
}

.app-ui.widget.ledger .ledger-selector {
  grid-area: selector;
}

.app-ui.widget.ledger .ledger-empty-ledgers,
.app-ui.widget.ledger .ledger-setup {
  grid-area: setup;
}

.app-ui.widget.ledger .ledger-summary {
  grid-area: summary;
}

.app-ui.widget.ledger .ledger-log {
  grid-area: log;
}

.app-ui.widget.ledger .ledger-people {
  grid-area: people;
}

.app-ui.widget.ledger .ledger-settlements {
  grid-area: settlements;
}

.app-ui.widget.ledger .ledger-activity {
  grid-area: activity;
}

.app-ui.widget.ledger .ledger-summary,
.app-ui.widget.ledger .ledger-log,
.app-ui.widget.ledger .ledger-people,
.app-ui.widget.ledger .ledger-settlements,
.app-ui.widget.ledger .ledger-activity,
.app-ui.widget.ledger .ledger-setup {
  background: var(--background-panel, var(--background-surface, var(--background-input)));
  border: var(--border-panel, var(--border-surface, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-panel, var(--border-radius-card, var(--border-radius-default)));
  box-shadow: var(--shadow-panel, var(--shadow-card, var(--shadow-default)));
  padding-top: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-bottom: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-start: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-end: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  backdrop-filter: var(--filter-panel, none);
  -webkit-backdrop-filter: var(--filter-panel, none);
  display: grid;
  gap: var(--spacing-sm);
  min-width: 0;
}

.app-ui.widget.ledger .ledger-hero {
  align-items: stretch;
  display: grid;
  gap: var(--spacing-md);
  grid-template-columns: minmax(12rem, 17rem) minmax(0, 1fr);
  min-width: 0;
}

.app-ui.widget.ledger .ledger-hero > .display {
  --background-status: color-mix(in srgb, var(--primary-color) 5%, transparent);
  --border-status: var(--border-width-default) solid color-mix(in srgb, var(--primary-color) 20%, var(--border-color-default));
  background: var(--background-status, var(--background-panel, var(--background-input)));
  border: var(--border-status, var(--border-panel, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-status, var(--border-radius-default));
  box-shadow: var(--shadow-status, none);
  padding-top: var(--padding-status, var(--spacing-default));
  padding-bottom: var(--padding-status, var(--spacing-default));
  padding-inline-start: var(--padding-status, var(--spacing-default));
  padding-inline-end: var(--padding-status, var(--spacing-default));
  justify-items: start;
  text-align: start;
}

.app-ui.widget.ledger .ledger-hero .value.small {
  font-size: clamp(1rem, 2vw, 1.25rem);
}

.app-ui.widget.ledger .ledger-mode-switch {
  display: grid;
  gap: var(--spacing-sm);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
}

.app-ui.widget.ledger .ledger-mode-switch .choice {
  justify-content: center;
  min-width: 0;
  white-space: normal;
}

.app-ui.widget.ledger .ledger-person-grid,
.app-ui.widget.ledger .ledger-settlement-list {
  display: grid;
  gap: var(--spacing-sm);
  min-width: 0;
}

.app-ui.widget.ledger .ledger-person,
.app-ui.widget.ledger .ledger-settlement {
  background: color-mix(in srgb, var(--background-input) 88%, transparent);
  border: var(--border-width-default) solid color-mix(in srgb, var(--tracking-widget-accent) 22%, var(--border-color-default));
  border-radius: var(--border-radius-default);
  display: grid;
  gap: var(--spacing-sm);
  min-width: 0;
  padding: var(--spacing-sm);
}

.app-ui.widget.ledger .ledger-person.overdue {
  border-color: color-mix(in srgb, var(--danger-color) 42%, var(--border-color-default));
}

.app-ui.widget.ledger .ledger-person.credit {
  border-color: color-mix(in srgb, var(--primary-color) 34%, var(--border-color-default));
}

.app-ui.widget.ledger .ledger-person.settled {
  border-color: color-mix(in srgb, var(--success-color) 30%, var(--border-color-default));
  opacity: 0.88;
}

.app-ui.widget.ledger .ledger-person-header,
.app-ui.widget.ledger .ledger-settlement-flow {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: space-between;
  min-width: 0;
}

.app-ui.widget.ledger .ledger-person-header > div {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.app-ui.widget.ledger .ledger-person-header strong,
.app-ui.widget.ledger .ledger-settlement-flow strong {
  overflow-wrap: anywhere;
}

.app-ui.widget.ledger .ledger-person-balance {
  color: var(--tracking-widget-accent);
  font-size: clamp(1.15rem, 2.4vw, 1.55rem);
  font-weight: 850;
}

.app-ui.widget.ledger .ledger-settlement {
  border-color: color-mix(in srgb, var(--success-color) 30%, var(--border-color-default));
}

.app-ui.widget.ledger .ledger-settlement p {
  color: var(--placeholder-text-color);
  font-size: var(--font-size-small);
  margin: 0;
}

.app-ui.widget.ledger .ledger-settlement-flow {
  justify-content: start;
}

.app-ui.widget.ledger .ledger-settlement-flow i {
  color: var(--success-color);
}

.app-ui.widget.ledger .ledger-activity-meta {
  align-items: center;
  color: var(--placeholder-text-color);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: var(--font-size-small);
}

.app-ui.widget.ledger ul > li.overdue .content {
  border-color: color-mix(in srgb, var(--danger-color) 38%, var(--border-color-default));
}

.app-ui.widget.ledger.entry.dialog {
  display: grid;
  gap: var(--spacing-md);
}

@media (max-width: 42rem) {
  .app-ui.widget .insight {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .app-ui.widget .insight > .action {
    grid-column: 2;
    justify-self: start;
  }
}
.app-ui.widget .input.action {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

.app-ui.widget .tracking-table {
  display: block;
  max-inline-size: 100%;
  overflow-x: auto;
  white-space: nowrap;
}

.app-ui.widget .tracking-table th,
.app-ui.widget .tracking-table td {
  vertical-align: top;
}

.app-ui.widget.water .body {
  grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
  grid-template-areas: "meter sources" "meter actions" "custom custom" "timeline timeline" "chart chart";
}

.app-ui.widget.water .water-progress {
  grid-area: meter;
}

.app-ui.widget.water .water-source-summary {
  grid-area: sources;
  align-self: stretch;
}

.app-ui.widget.water .water-quick-add {
  grid-area: actions;
  background: var(--background-panel, var(--background-surface, var(--background-input)));
  border: var(--border-panel, var(--border-surface, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-panel, var(--border-radius-card, var(--border-radius-default)));
  box-shadow: var(--shadow-panel, var(--shadow-card, var(--shadow-default)));
  padding-top: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-bottom: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-start: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-end: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  backdrop-filter: var(--filter-panel, none);
  -webkit-backdrop-filter: var(--filter-panel, none);
  display: grid;
  gap: var(--spacing-sm);
  min-width: 0;
  display: grid;
  gap: var(--spacing-sm);
}

.app-ui.widget.water .water-custom-log {
  grid-area: custom;
}

.app-ui.widget.water .water-today-timeline {
  grid-area: timeline;
}

.app-ui.widget.water .water-history-chart {
  grid-area: chart;
}

.app-ui.widget.water .tracking-ring {
  --tracking-ring-size: 14rem;
}

.app-ui.widget.water .water-progress {
  align-content: start;
  gap: var(--spacing-sm);
}

.app-ui.widget.water .water-progress-copy {
  display: grid;
  gap: 0.25rem;
  max-inline-size: 15rem;
  text-align: center;
}

.app-ui.widget.water .water-source-summary .panel,
.app-ui.widget.water .water-history-chart {
  block-size: 100%;
}

.app-ui.widget.water .water-source-summary .state.empty {
  align-items: start;
  grid-template-columns: auto minmax(0, 1fr);
  justify-items: start;
  text-align: start;
}

.app-ui.widget.water .water-source-summary .state.empty p {
  margin: 0.2rem 0 0;
}

.app-ui.widget.water .water-preset {
  min-block-size: 3.15rem;
}

.app-ui.widget.water .water-preset small {
  color: currentColor;
  font-size: var(--font-size-small);
  font-weight: 800;
  opacity: 0.75;
}

.app-ui.widget.water .primary-preset {
  justify-content: space-between;
}

.app-ui.widget.water .primary-preset i {
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
}

.app-ui.widget.water .content {
  border-color: color-mix(in srgb, var(--info-color) 24%, var(--border-color-default));
}

.app-ui.widget.water .row strong {
  color: var(--info-color);
}

.app-ui.widget.steps .body {
  grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr);
  grid-template-areas: "meter summary" "sources summary" "manual manual" "timeline timeline" "chart chart";
}

.app-ui.widget.steps .steps-progress {
  grid-area: meter;
}

.app-ui.widget.steps .steps-summary {
  align-self: stretch;
  grid-area: summary;
}

.app-ui.widget.steps .steps-source-summary {
  grid-area: sources;
}

.app-ui.widget.steps .steps-manual-log {
  grid-area: manual;
}

.app-ui.widget.steps .steps-today-timeline {
  grid-area: timeline;
}

.app-ui.widget.steps .steps-history-chart {
  grid-area: chart;
}

.app-ui.widget.steps .steps-summary,
.app-ui.widget.steps .steps-manual-log,
.app-ui.widget.steps .steps-history-chart {
  background: var(--background-panel, var(--background-surface, var(--background-input)));
  border: var(--border-panel, var(--border-surface, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-panel, var(--border-radius-card, var(--border-radius-default)));
  box-shadow: var(--shadow-panel, var(--shadow-card, var(--shadow-default)));
  padding-top: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-bottom: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-start: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-end: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  backdrop-filter: var(--filter-panel, none);
  -webkit-backdrop-filter: var(--filter-panel, none);
  display: grid;
  gap: var(--spacing-sm);
  min-width: 0;
}

.app-ui.widget.steps .steps-summary {
  display: grid;
  gap: var(--spacing-sm);
}

.app-ui.widget.steps .steps-source-summary .panel,
.app-ui.widget.steps .steps-history-chart {
  block-size: 100%;
}

.app-ui.widget.steps .steps-source-summary .state.empty {
  align-items: start;
  grid-template-columns: auto minmax(0, 1fr);
  justify-items: start;
  text-align: start;
}

.app-ui.widget.steps .steps-source-summary .state.empty p {
  margin: 0.2rem 0 0;
}

.app-ui.widget.steps .content {
  border-color: color-mix(in srgb, var(--success-color) 24%, var(--border-color-default));
}

.app-ui.widget.steps .row strong {
  color: var(--success-color);
}

.app-ui.widget.steps .steps-manual-log .log.action {
  justify-self: start;
}

.app-ui.widget.weight .body {
  grid-template-columns: minmax(15rem, 18rem) minmax(0, 1fr);
  grid-template-areas: "summary summary" "sources height" "log log" "recent recent" "chart chart";
}

.app-ui.widget.weight .weight-summary {
  grid-area: summary;
}

.app-ui.widget.weight .weight-source-summary {
  grid-area: sources;
}

.app-ui.widget.weight .weight-height {
  grid-area: height;
}

.app-ui.widget.weight .weight-log {
  grid-area: log;
}

.app-ui.widget.weight .weight-recent {
  grid-area: recent;
}

.app-ui.widget.weight .weight-history-chart {
  grid-area: chart;
}

.app-ui.widget.weight .weight-summary,
.app-ui.widget.weight .weight-height,
.app-ui.widget.weight .weight-log,
.app-ui.widget.weight .weight-history-chart {
  background: var(--background-panel, var(--background-surface, var(--background-input)));
  border: var(--border-panel, var(--border-surface, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-panel, var(--border-radius-card, var(--border-radius-default)));
  box-shadow: var(--shadow-panel, var(--shadow-card, var(--shadow-default)));
  padding-top: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-bottom: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-start: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-end: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  backdrop-filter: var(--filter-panel, none);
  -webkit-backdrop-filter: var(--filter-panel, none);
  display: grid;
  gap: var(--spacing-sm);
  min-width: 0;
}

.app-ui.widget.weight .weight-summary {
  display: grid;
  gap: var(--spacing-sm);
  grid-template-columns: minmax(11rem, 0.8fr) minmax(0, 1.4fr);
}

.app-ui.widget.weight .weight-current {
  align-content: center;
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.app-ui.widget.weight .unit {
  font-size: var(--font-size-small);
  font-weight: 800;
}

.app-ui.widget.weight .weight-summary .summary.grid {
  grid-template-columns: repeat(auto-fit, minmax(min(8.5rem, 100%), 1fr));
}

.app-ui.widget.weight .weight-target,
.app-ui.widget.weight .actions {
  grid-column: 1/-1;
}

.app-ui.widget.weight .weight-source-summary .panel,
.app-ui.widget.weight .weight-height,
.app-ui.widget.weight .weight-history-chart {
  block-size: 100%;
}

.app-ui.widget.weight .weight-source-summary .state.empty {
  align-items: start;
  grid-template-columns: auto minmax(0, 1fr);
  justify-items: start;
  text-align: start;
}

.app-ui.widget.weight .weight-source-summary .state.empty p {
  margin: 0.2rem 0 0;
}

.app-ui.widget.weight .weight-height {
  display: grid;
  gap: var(--spacing-sm);
}

.app-ui.widget.weight .weight-height-actions {
  align-content: end;
}

.app-ui.widget.weight .tracking-value-chip {
  --background-status: color-mix(in srgb, var(--primary-color) 5%, transparent);
  --border-status: var(--border-width-default) solid color-mix(in srgb, var(--primary-color) 20%, var(--border-color-default));
  background: var(--background-status, var(--background-panel, var(--background-input)));
  border: var(--border-status, var(--border-panel, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-status, var(--border-radius-default));
  box-shadow: var(--shadow-status, none);
  padding-top: var(--padding-status, var(--spacing-default));
  padding-bottom: var(--padding-status, var(--spacing-default));
  padding-inline-start: var(--padding-status, var(--spacing-default));
  padding-inline-end: var(--padding-status, var(--spacing-default));
  align-items: center;
  display: inline-flex;
  font-size: var(--font-size-small);
  font-weight: 800;
  min-block-size: 2.25rem;
  padding-block: 0.35rem;
  padding-inline: 0.75rem;
}

.app-ui.widget.weight .weight-log .log.action {
  justify-self: start;
}

.app-ui.widget.weight .content {
  border-color: color-mix(in srgb, var(--primary-color) 24%, var(--border-color-default));
}

.app-ui.widget.weight .row strong {
  color: var(--primary-color);
}

.list-item-toolbar {
  position: absolute;
  right: var(--spacing-sm);
  top: var(--spacing-sm);
  z-index: 2;
}

.list-item-toolbar .pin.action {
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--secondary-text-color);
  flex: 0 0 auto;
  min-height: 2.5rem;
  min-width: 2.5rem;
  padding: 0;
  width: 2.5rem;
  border-radius: 999px;
}
.list-item-toolbar .pin.action:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.list-item-toolbar .pin.action:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.list-item-toolbar .pin.action:disabled, .list-item-toolbar .pin.action[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}

.list-item:has(.action) .list-item-toolbar {
  right: calc(var(--spacing-sm) + 3.1rem);
}

.list-item:has(.actions .action:nth-of-type(2)) .list-item-toolbar {
  right: calc(var(--spacing-sm) + 6.2rem);
}

.list-item:has(.actions .action:nth-of-type(3)) .list-item-toolbar {
  right: calc(var(--spacing-sm) + 9.3rem);
}

.list-item:has(.actions .action:nth-of-type(4)) .list-item-toolbar {
  right: calc(var(--spacing-sm) + 12.4rem);
}

.list-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: flex-start;
  min-width: 0;
}

.list-actions .add.action {
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--primary-text-color);
}
.list-actions .add.action:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.list-actions .add.action:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.list-actions .add.action:disabled, .list-actions .add.action[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}

.app-ui.add.modal {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-default);
  min-width: 0;
  min-width: 0;
}

.app-ui.add.modal .steps-indicator > div {
  align-items: start;
  display: grid;
  gap: var(--spacing-sm);
  grid-template-columns: auto minmax(1.5rem, 1fr) auto minmax(1.5rem, 1fr) auto minmax(1.5rem, 1fr) auto;
  min-width: 0;
}

.app-ui.add.modal .step {
  align-items: center;
  display: grid;
  gap: 0.35rem;
  justify-items: center;
  min-width: 0;
}

.app-ui.add.modal .step-circle {
  align-items: center;
  background: color-mix(in srgb, var(--background-input) 88%, transparent);
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 76%, transparent);
  border-radius: 999px;
  color: var(--placeholder-text-color);
  display: inline-flex;
  font-weight: 700;
  height: 2.1rem;
  justify-content: center;
  width: 2.1rem;
}

.app-ui.add.modal .step.active .step-circle {
  background: color-mix(in srgb, var(--primary-color) 14%, var(--background-input));
  border-color: color-mix(in srgb, var(--primary-color) 45%, var(--border-color-default));
  color: var(--primary-color);
}

.app-ui.add.modal .step small,
.app-ui.add.modal .step-note,
.app-ui.add.modal .name-hint,
.tracking.series.selection .description,
.tracking.series.selection .last-entry,
.tracking.series.selection .hint,
.task.selection .description,
.task.selection .last-entry,
.app-ui.add.modal .summary .definition-description,
.app-ui.add.modal .summary .settings-note {
  color: var(--placeholder-text-color);
  margin: 0;
}

.app-ui.add.modal .step-line {
  background: color-mix(in srgb, var(--border-color-default) 72%, transparent);
  height: var(--border-width-default);
  margin-top: 1.05rem;
}

.app-ui.add.modal .step-line.active {
  background: color-mix(in srgb, var(--primary-color) 55%, var(--border-color-default));
}

.app-ui.add.modal > .content,
.app-ui.add.modal > .content .step-1,
.app-ui.add.modal > .content .step-2,
.app-ui.add.modal > .content .step-3,
.app-ui.add.modal > .content .step-4,
.app-ui.add.modal .series.setup {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-default);
  min-width: 0;
  min-width: 0;
}

.app-ui.settings {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-default);
  min-width: 0;
  min-width: 0;
}

.app-ui.settings > .section {
  background: var(--background-panel, var(--background-surface, var(--background-input)));
  border: var(--border-panel, var(--border-surface, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-panel, var(--border-radius-card, var(--border-radius-default)));
  box-shadow: var(--shadow-panel, var(--shadow-card, var(--shadow-default)));
  padding-top: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-bottom: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-start: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  padding-inline-end: var(--padding-panel, var(--padding-card, var(--spacing-default)));
  backdrop-filter: var(--filter-panel, none);
  -webkit-backdrop-filter: var(--filter-panel, none);
  display: grid;
  gap: var(--spacing-sm);
  min-width: 0;
}

.app-ui.settings > .section > header,
.app-ui.settings > .overview h5 {
  align-items: center;
  display: inline-flex;
  gap: var(--spacing-sm);
  margin: 0;
}

.app-ui.settings > .danger.zone {
  align-items: center;
  background: color-mix(in srgb, var(--danger-color) 5%, var(--background-input));
  border: var(--border-width-default) solid color-mix(in srgb, var(--danger-color) 28%, var(--border-color-default));
  border-radius: var(--border-radius-default);
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-default);
  justify-content: space-between;
  padding: var(--spacing-default);
}

.app-ui.settings > .danger.zone p {
  color: var(--placeholder-text-color);
  margin: 0.2rem 0 0;
}

.app-ui.settings .action,
.tracking.series.selection .choose.action,
.tracking.context.expander .choice.action,
.app-ui.add.modal .action {
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
}
.app-ui.settings .action:focus-visible,
.tracking.series.selection .choose.action:focus-visible,
.tracking.context.expander .choice.action:focus-visible,
.app-ui.add.modal .action:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.app-ui.settings .action:hover:not(:disabled, [aria-disabled=true]),
.tracking.series.selection .choose.action:hover:not(:disabled, [aria-disabled=true]),
.tracking.context.expander .choice.action:hover:not(:disabled, [aria-disabled=true]),
.app-ui.add.modal .action:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.app-ui.settings .action:disabled, .app-ui.settings .action[aria-disabled=true],
.tracking.series.selection .choose.action:disabled,
.tracking.series.selection .choose.action[aria-disabled=true],
.tracking.context.expander .choice.action:disabled,
.tracking.context.expander .choice.action[aria-disabled=true],
.app-ui.add.modal .action:disabled,
.app-ui.add.modal .action[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}

.app-ui.settings .add.action,
.app-ui.settings .cancel.action,
.tracking.series.selection .choose.action {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--secondary-text-color);
}

.app-ui.settings .section > .remove.action {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--secondary-text-color);
}

.app-ui.settings > .danger.zone .remove.action {
  background: transparent;
  border-color: var(--danger-color);
  box-shadow: none;
  color: var(--danger-color);
}
.app-ui.settings > .danger.zone .remove.action:hover:not(:disabled, [aria-disabled=true]) {
  background: color-mix(in srgb, var(--danger-color) 12%, transparent);
  border-color: var(--danger-color);
  box-shadow: none;
  color: var(--danger-color);
}

.app-ui.settings .save.action,
.app-ui.add.modal .next.action {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--primary-text-color);
}

.app-ui.add.modal .add.action {
  background: var(--success-color);
  border-color: var(--success-color);
  color: var(--success-text-color);
}

.app-ui.add.modal .cancel.action {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--secondary-text-color);
}

.app-ui.add.modal .previous.action {
  background: var(--light-color);
  border-color: var(--light-color);
  color: var(--light-text-color);
}

.tracking.context.expander .choice.action {
  background: transparent;
  border-color: var(--primary-color);
  box-shadow: none;
  color: var(--primary-color);
  font-size: var(--button-small-font-size, var(--font-size-small));
  min-height: var(--button-small-min-height, 2rem);
  padding-inline-start: var(--button-small-padding-inline, var(--spacing-sm));
  padding-inline-end: var(--button-small-padding-inline, var(--spacing-sm));
  padding-top: var(--button-small-padding-block, var(--spacing-xs));
  padding-bottom: var(--button-small-padding-block, var(--spacing-xs));
}
.tracking.context.expander .choice.action:hover:not(:disabled, [aria-disabled=true]) {
  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
  border-color: var(--primary-color);
  box-shadow: none;
  color: var(--primary-color);
}

.tracking.context.expander .choice.action.selected {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--primary-text-color);
}

.tracking.context.expander .chip {
  align-items: center;
  background: color-mix(in srgb, var(--background-input) 88%, transparent);
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 72%, transparent);
  border-radius: 999px;
  color: var(--text-color);
  display: inline-flex;
  font-size: var(--font-size-small);
  font-weight: 800;
  gap: 0.25rem;
  padding: 0.25rem 0.55rem;
}

.app-ui.grid {
  --catalog-card-min: 15rem;
}

.app-ui.grid .app-ui.option > .choice {
  --background-card: color-mix(in srgb, var(--background-input) 94%, transparent);
  --border-color-card: color-mix(in srgb, var(--border-color-default) 70%, transparent);
  --margin-card: 0;
  --padding-card: 0;
  appearance: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: inherit;
  font: inherit;
  margin: 0;
  padding: 0;
  text-align: inherit;
  display: grid;
  gap: 0;
  height: 100%;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
@media (min-width: 0px) {
  .app-ui.grid .app-ui.option > .choice {
    background: var(--background-card, var(--background-default));
    color: var(--color-card, var(--text-color));
    border-radius: var(--border-radius-card, var(--border-radius-default));
    padding-top: var(--padding-card, var(--padding-default));
    padding-bottom: var(--padding-card, var(--padding-default));
    padding-inline-start: var(--padding-card, var(--padding-default));
    padding-inline-end: var(--padding-card, var(--padding-default));
    margin-top: var(--margin-card, var(--margin-default));
    margin-bottom: var(--margin-card, var(--margin-default));
    margin-inline-start: var(--margin-card, var(--margin-default));
    margin-inline-end: var(--margin-card, var(--margin-default));
    border: var(--border-width-card, var(--border-width-default)) solid var(--border-color-card, var(--border-color-default));
    transition: all var(--transition-duration-default) var(--transition-function-default);
    box-shadow: var(--shadow-card, var(--shadow-default));
  }
}
@media (min-width: 0px) and (prefers-reduced-motion: reduce) {
  .app-ui.grid .app-ui.option > .choice {
    transition: none !important;
  }
}
@media (min-width: 576px) {
  .app-ui.grid .app-ui.option > .choice {
    box-shadow: var(--shadow-card-responsive, var(--shadow-more));
  }
}

.app-ui.grid .app-ui.option > .choice.selected,
.app-ui.grid .app-ui.option > .choice[aria-pressed=true] {
  --border-color-card: color-mix(in srgb, var(--primary-color) 55%, var(--border-color-default));
  box-shadow: 0 0 0 0.16rem color-mix(in srgb, var(--primary-color) 12%, transparent);
}

.app-ui.add.modal .section,
.tracking.series.selection .panel,
.task.selection.panel,
.app-ui.add.modal .summary {
  --background-card: color-mix(in srgb, var(--background-input) 94%, transparent);
  --border-color-card: color-mix(in srgb, var(--border-color-default) 72%, transparent);
  --margin-card: 0;
}
@media (min-width: 0px) {
  .app-ui.add.modal .section,
  .tracking.series.selection .panel,
  .task.selection.panel,
  .app-ui.add.modal .summary {
    background: var(--background-card, var(--background-default));
    color: var(--color-card, var(--text-color));
    border-radius: var(--border-radius-card, var(--border-radius-default));
    padding-top: var(--padding-card, var(--padding-default));
    padding-bottom: var(--padding-card, var(--padding-default));
    padding-inline-start: var(--padding-card, var(--padding-default));
    padding-inline-end: var(--padding-card, var(--padding-default));
    margin-top: var(--margin-card, var(--margin-default));
    margin-bottom: var(--margin-card, var(--margin-default));
    margin-inline-start: var(--margin-card, var(--margin-default));
    margin-inline-end: var(--margin-card, var(--margin-default));
    border: var(--border-width-card, var(--border-width-default)) solid var(--border-color-card, var(--border-color-default));
    transition: all var(--transition-duration-default) var(--transition-function-default);
    box-shadow: var(--shadow-card, var(--shadow-default));
  }
}
@media (min-width: 0px) and (prefers-reduced-motion: reduce) {
  .app-ui.add.modal .section,
  .tracking.series.selection .panel,
  .task.selection.panel,
  .app-ui.add.modal .summary {
    transition: none !important;
  }
}
@media (min-width: 576px) {
  .app-ui.add.modal .section,
  .tracking.series.selection .panel,
  .task.selection.panel,
  .app-ui.add.modal .summary {
    box-shadow: var(--shadow-card-responsive, var(--shadow-more));
  }
}

.app-ui.add.modal .section {
  display: grid;
  gap: 0.45rem;
}

.tracking.series.selection .panel,
.task.selection.panel {
  display: grid;
  gap: 0;
  overflow: hidden;
}

.tracking.series.selection .panel > header,
.task.selection.panel > header,
.app-ui.add.modal .summary > header,
.app-ui.add.modal .summary > .content {
  padding: var(--spacing-default);
}

.tracking.series.selection .panel > header,
.task.selection.panel > header,
.app-ui.add.modal .summary > header {
  border-bottom: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 60%, transparent);
}

.tracking.series.selection .panel h3,
.task.selection.panel h3,
.app-ui.add.modal .summary h3 {
  font-size: 1rem;
  line-height: 1.35;
  margin: 0;
}

.tracking.series.selection .panel > .content,
.task.selection.panel > .content {
  display: grid;
  gap: var(--spacing-sm);
  padding: var(--spacing-default);
}

.tracking.series.selection .options,
.task.selection .options {
  display: grid;
  gap: var(--spacing-sm);
}

.tracking.series.selection .option.choice,
.task.selection .option.choice {
  align-items: start;
  background: color-mix(in srgb, var(--background-input) 80%, transparent);
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 70%, transparent);
  border-radius: var(--border-radius-default);
  display: grid;
  gap: var(--spacing-sm);
  grid-template-columns: auto minmax(0, 1fr) auto;
  margin: 0;
  padding: var(--spacing-sm);
}

.tracking.series.selection .option.choice.selected,
.task.selection .option.choice.selected {
  background: color-mix(in srgb, var(--primary-color) 8%, var(--background-input));
  border-color: color-mix(in srgb, var(--primary-color) 35%, var(--border-color-default));
}

.tracking.series.selection .option.choice input[type=radio],
.task.selection .option.choice input[type=radio] {
  margin-top: 0.25rem;
}

.tracking.series.selection .selector.label,
.task.selection .selector.label {
  min-width: 0;
}

.tracking.series.selection .selector.label > div,
.task.selection .selector.label > div,
.app-ui.add.modal .section {
  display: grid;
  gap: 0.2rem;
}

.tracking.series.selection .name,
.task.selection .name {
  font-weight: 700;
}

.app-ui.add.modal .summary {
  overflow: hidden;
}

.app-ui.add.modal .summary > header {
  align-items: center;
  display: flex;
  gap: 0.45rem;
  font-weight: 700;
}

.app-ui.add.modal .summary ul {
  display: grid;
  gap: var(--spacing-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}

.app-ui.add.modal .summary li > div {
  align-items: center;
  display: flex;
  gap: 0.45rem;
  min-width: 0;
}

.app-ui.add.modal .summary .marker.skipped,
.app-ui.add.modal .summary .status.chip.skipped {
  color: var(--placeholder-text-color);
}

.app-ui.add.modal .summary .marker.recommended,
.app-ui.add.modal .summary .marker.new,
.app-ui.add.modal .summary .status.chip.recommended,
.app-ui.add.modal .summary .status.chip.new {
  color: var(--primary-color);
}

.app-ui.add.modal .summary .marker.existing,
.app-ui.add.modal .summary .status.chip.existing {
  color: var(--success-color);
}

.actions {
  align-items: center;
  border-top: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 60%, transparent);
  display: flex;
  gap: var(--spacing-sm);
  justify-content: space-between;
  padding-top: var(--spacing-default);
}

.actions .footer-actions,
.actions .footer-start {
  align-items: center;
  display: flex;
  gap: var(--spacing-sm);
  min-height: 2.5rem;
}

.state.empty {
  display: grid;
  place-items: center;
  min-height: 12rem;
  color: var(--empty-state-color, var(--placeholder-text-color));
  gap: var(--empty-state-gap, var(--spacing-sm));
  padding: var(--empty-state-padding, var(--padding-default));
  text-align: center;
}

.state.empty .marker {
  --empty-icon-font-size: 1.5rem;
  --empty-icon-size: 4rem;
  align-items: center;
  background: var(--empty-icon-background, linear-gradient(145deg, color-mix(in srgb, var(--background-input) 98%, transparent), color-mix(in srgb, var(--primary-color) 8%, var(--background-input))));
  border: var(--empty-icon-border, var(--border-width-default) solid color-mix(in srgb, #ffffff 78%, transparent));
  border-radius: 999px;
  box-shadow: var(--empty-icon-shadow, 0 1rem 2.2rem color-mix(in srgb, var(--shadow-color, #1f2937) 18%, transparent), 0 0 0 0.65rem color-mix(in srgb, var(--primary-color) 7%, transparent));
  color: var(--empty-icon-color, var(--primary-color));
  display: inline-flex;
  flex: 0 0 auto;
  font-size: var(--empty-icon-font-size, 2rem);
  height: var(--empty-icon-size, 5.25rem);
  justify-content: center;
  line-height: 1;
  width: var(--empty-icon-size, 5.25rem);
}

.state.empty .state.empty-text,
.state.empty .hint {
  margin: 0;
}

.connections.layout,
.collection.providers,
.app-ui.grid {
  min-width: 0;
}

.collection.providers,
.app-ui.grid {
  display: grid;
  gap: var(--spacing-default);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--catalog-card-min, 18rem)), 1fr));
  min-width: 0;
}

.provider.item,
.app-ui.grid .app-ui.item > .panel {
  --background-card: color-mix(in srgb, var(--background-input) 94%, transparent);
  --border-color-card: color-mix(in srgb, var(--border-color-default) 70%, transparent);
  --margin-card: 0;
  --padding-card: 0;
  display: grid;
  gap: 0;
  height: 100%;
  overflow: hidden;
}
@media (min-width: 0px) {
  .provider.item,
  .app-ui.grid .app-ui.item > .panel {
    background: var(--background-card, var(--background-default));
    color: var(--color-card, var(--text-color));
    border-radius: var(--border-radius-card, var(--border-radius-default));
    padding-top: var(--padding-card, var(--padding-default));
    padding-bottom: var(--padding-card, var(--padding-default));
    padding-inline-start: var(--padding-card, var(--padding-default));
    padding-inline-end: var(--padding-card, var(--padding-default));
    margin-top: var(--margin-card, var(--margin-default));
    margin-bottom: var(--margin-card, var(--margin-default));
    margin-inline-start: var(--margin-card, var(--margin-default));
    margin-inline-end: var(--margin-card, var(--margin-default));
    border: var(--border-width-card, var(--border-width-default)) solid var(--border-color-card, var(--border-color-default));
    transition: all var(--transition-duration-default) var(--transition-function-default);
    box-shadow: var(--shadow-card, var(--shadow-default));
  }
}
@media (min-width: 0px) and (prefers-reduced-motion: reduce) {
  .provider.item,
  .app-ui.grid .app-ui.item > .panel {
    transition: none !important;
  }
}
@media (min-width: 576px) {
  .provider.item,
  .app-ui.grid .app-ui.item > .panel {
    box-shadow: var(--shadow-card-responsive, var(--shadow-more));
  }
}

.provider.item > .header,
.app-ui.grid .app-ui.item .header,
.app-ui.grid .app-ui.option .header {
  align-items: flex-start;
  border-bottom: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 60%, transparent);
  display: flex;
  gap: var(--spacing-default);
  justify-content: space-between;
  min-width: 0;
  padding: var(--spacing-default);
}

.provider-main,
.app-ui.grid .app-ui.item .header .content,
.app-ui.grid .app-ui.option .header .content {
  align-items: flex-start;
  display: flex;
  gap: var(--spacing-sm);
  min-width: 0;
}

.provider-icon,
.app-ui.grid .app-ui.item .header i,
.app-ui.grid .app-ui.option .header i {
  align-items: center;
  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
  border-radius: var(--border-radius-default);
  color: var(--primary-color);
  display: inline-flex;
  flex: 0 0 2.5rem;
  height: 2.5rem;
  justify-content: center;
  width: 2.5rem;
}

.provider-name,
.app-ui.grid .app-ui.item .title,
.app-ui.grid .app-ui.option .title {
  margin: 0;
  overflow-wrap: anywhere;
}

.provider-connections,
.app-ui.grid .app-ui.item .body,
.app-ui.grid .app-ui.item .footer,
.app-ui.grid .app-ui.option .body {
  padding: var(--spacing-default);
}

.app-ui.grid .app-ui.item .body,
.app-ui.grid .app-ui.option .body {
  display: grid;
  gap: var(--spacing-sm);
}

.app-ui.grid .app-ui.item .description,
.app-ui.grid .app-ui.item .more,
.app-ui.grid .app-ui.item small,
.app-ui.grid .app-ui.option .description,
.app-ui.grid .app-ui.option .more,
.app-ui.grid .app-ui.option small {
  color: var(--placeholder-text-color);
  margin: 0;
  overflow-wrap: anywhere;
}

.app-ui.grid .app-ui.item .category,
.app-ui.grid .app-ui.option .category {
  align-items: center;
  background: color-mix(in srgb, var(--primary-color) 10%, transparent);
  border-radius: 999px;
  color: var(--primary-color);
  display: inline-flex;
  font-size: var(--font-size-small);
  font-weight: 700;
  justify-self: start;
  padding: 0.25rem 0.55rem;
}

.app-ui.grid .app-ui.item .requirements-list {
  display: grid;
  gap: 0.35rem;
}

.app-ui.grid .app-ui.item ul {
  display: grid;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.app-ui.grid .app-ui.item li {
  align-items: center;
  display: flex;
  gap: 0.35rem;
  min-width: 0;
}

.app-ui.grid .app-ui.item li .bi {
  color: var(--success-color);
}

.app-ui.grid .app-ui.item .notice.existing {
  --background-status: color-mix(in srgb, var(--info-color) 5%, transparent);
  --border-status: var(--border-width-default) solid color-mix(in srgb, var(--info-color) 20%, var(--border-color-default));
  background: var(--background-status, var(--background-panel, var(--background-input)));
  border: var(--border-status, var(--border-panel, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-status, var(--border-radius-default));
  box-shadow: var(--shadow-status, none);
  padding-top: var(--padding-status, var(--spacing-default));
  padding-bottom: var(--padding-status, var(--spacing-default));
  padding-inline-start: var(--padding-status, var(--spacing-default));
  padding-inline-end: var(--padding-status, var(--spacing-default));
  align-items: center;
  color: var(--info-text-color);
  display: flex;
  font-size: var(--font-size-small);
  gap: 0.35rem;
}

.app-ui.grid .app-ui.item .footer {
  align-items: center;
  border-top: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 60%, transparent);
  display: flex;
  justify-content: flex-end;
}

.app-ui.grid .app-ui.item .footer > .select.action {
  align-items: center;
  appearance: none;
  background: var(--background-button, var(--background-default));
  border: var(--border-width-button, var(--border-width-default)) solid var(--border-color-button, var(--border-color-default));
  color: var(--color-button, var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--button-font-weight, var(--font-weight-default));
  gap: var(--button-gap, var(--spacing-xs));
  justify-content: center;
  line-height: var(--button-line-height, var(--line-height-default));
  margin: var(--margin-button, 0);
  min-height: var(--button-min-height, 2.5rem);
  min-width: 0;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button, var(--border-radius-default));
  padding-inline-start: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-inline-end: var(--padding-button-inline, var(--padding-button, var(--padding-default)));
  padding-top: var(--padding-button-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-button-block, calc(var(--padding-default) / 2));
  box-shadow: var(--shadow-button, none);
  transition: background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), transform var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--primary-text-color);
  align-items: center;
  display: inline-flex;
  gap: 0.4rem;
}
.app-ui.grid .app-ui.item .footer > .select.action:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--border-radius-button, var(--border-radius-default));
}
.app-ui.grid .app-ui.item .footer > .select.action:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--background-button-hover, var(--background-hover));
  box-shadow: var(--shadow-button-more, var(--shadow-button, none));
}
.app-ui.grid .app-ui.item .footer > .select.action:disabled, .app-ui.grid .app-ui.item .footer > .select.action[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity, 0.55);
}

.app-ui.state.loading,
.app-ui.state.empty,
.loading-indicator,
.message {
  --background-status: color-mix(in srgb, var(--primary-color) 5%, transparent);
  --border-status: var(--border-width-default) solid color-mix(in srgb, var(--primary-color) 20%, var(--border-color-default));
  background: var(--background-status, var(--background-panel, var(--background-input)));
  border: var(--border-status, var(--border-panel, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-status, var(--border-radius-default));
  box-shadow: var(--shadow-status, none);
  padding-top: var(--padding-status, var(--spacing-default));
  padding-bottom: var(--padding-status, var(--spacing-default));
  padding-inline-start: var(--padding-status, var(--spacing-default));
  padding-inline-end: var(--padding-status, var(--spacing-default));
  align-items: center;
  display: flex;
  gap: var(--spacing-sm);
  min-width: 0;
}

.entity-readiness.state {
  align-items: center;
  display: flex;
  gap: var(--readiness-gap, var(--spacing-sm));
  justify-content: center;
  min-height: var(--readiness-min-height, 7rem);
  background: var(--background-readiness, var(--background-status, var(--background-panel, var(--background-input))));
  border: var(--border-readiness, var(--border-status, var(--border-panel, var(--border-width-default) solid var(--border-color-default))));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-readiness, var(--border-radius-status, var(--border-radius-default)));
  box-shadow: var(--shadow-readiness, var(--shadow-status, none));
  padding-top: var(--padding-readiness, var(--padding-status, var(--spacing-default)));
  padding-bottom: var(--padding-readiness, var(--padding-status, var(--spacing-default)));
  padding-inline-start: var(--padding-readiness, var(--padding-status, var(--spacing-default)));
  padding-inline-end: var(--padding-readiness, var(--padding-status, var(--spacing-default)));
}

.entity-readiness.state.compact {
  justify-content: flex-start;
  min-height: auto;
  padding: var(--readiness-compact-padding, calc(var(--padding-default) / 2) calc(var(--padding-default) * 0.75));
}

.entity-readiness.state.empty {
  background: color-mix(in srgb, var(--background-input) 94%, transparent);
  border: var(--border-width-default) solid color-mix(in srgb, #ffffff 70%, transparent);
  border-radius: var(--border-radius-large);
  box-shadow: 0 1.4rem 3rem color-mix(in srgb, var(--shadow-color, #1f2937) 10%, transparent), inset 0 1px 0 color-mix(in srgb, #ffffff 78%, transparent);
  flex-direction: column;
  gap: var(--spacing-default);
  min-height: var(--entity-empty-min-height, 22rem);
  padding: clamp(1.5rem, 4vw, 3rem);
  text-align: center;
}

.entity-view.section > .content > .entity-readiness.state.empty,
.entity-view.section > .content > .entity-readiness.state.empty > .content {
  background: transparent;
  border: 0;
  box-shadow: none;
  min-height: min(22rem, 42vh);
}

.entity-readiness.state.failed,
.entity-readiness.state.permission-denied {
  justify-content: space-between;
}

.entity-readiness.state > .bi {
  flex: 0 0 auto;
  color: var(--placeholder-text-color);
  font-size: 1.5rem;
  line-height: 1;
}

.entity-readiness.state.empty > .bi {
  align-items: center;
  background: var(--empty-icon-background, linear-gradient(145deg, color-mix(in srgb, var(--background-input) 98%, transparent), color-mix(in srgb, var(--primary-color) 8%, var(--background-input))));
  border: var(--empty-icon-border, var(--border-width-default) solid color-mix(in srgb, #ffffff 78%, transparent));
  border-radius: 999px;
  box-shadow: var(--empty-icon-shadow, 0 1rem 2.2rem color-mix(in srgb, var(--shadow-color, #1f2937) 18%, transparent), 0 0 0 0.65rem color-mix(in srgb, var(--primary-color) 7%, transparent));
  color: var(--empty-icon-color, var(--primary-color));
  display: inline-flex;
  flex: 0 0 auto;
  font-size: var(--empty-icon-font-size, 2rem);
  height: var(--empty-icon-size, 5.25rem);
  justify-content: center;
  line-height: 1;
  width: var(--empty-icon-size, 5.25rem);
}

.entity-readiness.state .message {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.entity-readiness.state .message strong {
  font-size: 1.35rem;
  line-height: 1.2;
}

.entity-readiness.state .message p {
  margin: 0;
  color: var(--placeholder-text-color);
}

.entity-readiness.state :is(.retry, .create) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.entity-readiness.state .spinner {
  animation: entity-readiness-spin 0.8s linear infinite;
  border: var(--spinner-border-width, 2px) solid color-mix(in srgb, var(--primary-color) 24%, transparent);
  border-radius: 999px;
  border-top-color: var(--primary-color);
  height: var(--spinner-size, 1rem);
  width: var(--spinner-size, 1rem);
}

@keyframes entity-readiness-spin {
  to {
    transform: rotate(360deg);
  }
}
.habit-starter-entry > .header {
  align-items: center;
  display: flex;
  gap: var(--spacing-default);
  justify-content: space-between;
}

.habit-starter-entry .starter {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--primary-text-color);
}

.habit-template.dialog {
  align-items: center;
  display: flex;
  justify-content: center;
}

.habit-template.dialog .rz-dialog {
  margin: auto;
  max-height: calc(100dvh - 1rem);
  min-height: 0;
  overflow: hidden;
}

.habit-template.dialog .rz-dialog-content {
  min-height: 0;
  overflow: hidden;
  padding: 0;
}

.habit-template.starter {
  background: var(--background-input);
  color: var(--text-color);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}

.habit-template.starter > .header {
  align-items: center;
  border-bottom: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 70%, transparent);
  display: flex;
  gap: var(--spacing-default);
  justify-content: space-between;
  padding: var(--spacing-default) var(--spacing-lg);
}

.habit-template.starter > .header .close {
  flex: 0 0 auto;
  min-height: var(--button-icon-size, var(--button-size));
  min-width: var(--button-icon-size, var(--button-size));
  padding: 0;
  width: var(--button-icon-size, var(--button-size));
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--secondary-color);
}
.habit-template.starter > .header .close:hover:not(:disabled, [aria-disabled=true]) {
  background: color-mix(in srgb, var(--secondary-color) 10%, transparent);
  box-shadow: none;
}

.habit-template.starter h2,
.habit-template.starter h3,
.habit-template.starter h4 {
  margin: 0;
  overflow-wrap: anywhere;
}

.habit-template.starter > .content {
  display: grid;
  grid-template-columns: minmax(16rem, 0.42fr) minmax(0, 1fr);
  min-height: 0;
}

.habit-template.starter .discovery,
.habit-template.starter .preview {
  min-height: 0;
  min-width: 0;
  overflow: auto;
  padding: var(--spacing-default);
}

.habit-template.starter .discovery {
  background: color-mix(in srgb, var(--background-alt) 64%, var(--background-input));
  border-right: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 70%, transparent);
  display: grid;
  gap: var(--spacing-default);
  grid-template-rows: auto auto auto minmax(0, 1fr);
}

.habit-template.starter .search {
  display: grid;
  gap: 0.35rem;
}

.habit-template.starter .search label,
.habit-template.starter .destination .field label {
  color: var(--placeholder-text-color);
  font-size: var(--font-size-small);
  font-weight: 700;
}

.habit-template.starter .search .field {
  align-items: center;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  position: relative;
}

.habit-template.starter .search .field i {
  color: var(--placeholder-text-color);
  left: 0.85rem;
  pointer-events: none;
  position: absolute;
}

.habit-template.starter .search input {
  padding-left: 2.35rem;
  width: 100%;
}

.habit-template.starter .categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.habit-template.starter .categories > .category {
  font-size: var(--button-small-font-size, var(--font-size-small));
  min-height: var(--button-small-min-height, 2rem);
  padding-inline-start: var(--button-small-padding-inline, var(--spacing-sm));
  padding-inline-end: var(--button-small-padding-inline, var(--spacing-sm));
  padding-top: var(--button-small-padding-block, var(--spacing-xs));
  padding-bottom: var(--button-small-padding-block, var(--spacing-xs));
  background: transparent;
  border-color: var(--secondary-color);
  box-shadow: none;
  color: var(--secondary-color);
  align-items: center;
  display: inline-flex;
  gap: 0.35rem;
}
.habit-template.starter .categories > .category:hover:not(:disabled, [aria-disabled=true]) {
  background: color-mix(in srgb, var(--secondary-color) 12%, transparent);
  border-color: var(--secondary-color);
  box-shadow: none;
  color: var(--secondary-color);
}

.habit-template.starter .categories > .category[aria-pressed=true] {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--primary-text-color);
}

.habit-template.starter .swatch {
  background: var(--template-category-color, var(--primary-color));
  border-radius: var(--border-radius-swatch, 2px);
  flex: 0 0 0.7rem;
  height: 0.7rem;
  width: 0.7rem;
}

.habit-template.starter .list,
.habit-template.starter .tasks {
  display: grid;
  min-height: 0;
  overflow: auto;
}

.habit-template.starter .list {
  gap: 0.45rem;
}

.habit-template.starter .list > .item {
  appearance: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: inherit;
  font: inherit;
  margin: 0;
  padding: 0;
  text-align: inherit;
  align-items: stretch;
  border: var(--border-width-default) solid transparent;
  border-radius: var(--border-radius-default);
  color: var(--text-color);
  cursor: pointer;
  display: grid;
  gap: 0.35rem;
  padding: 0.7rem 0.8rem;
  text-align: left;
  width: 100%;
}

.habit-template.starter .list > .item:hover,
.habit-template.starter .list > .item:focus-visible {
  background: color-mix(in srgb, var(--primary-color) 8%, var(--background-input));
}

.habit-template.starter .list > .item[aria-pressed=true] {
  background: color-mix(in srgb, var(--primary-color) 12%, var(--background-input));
  border-color: color-mix(in srgb, var(--primary-color) 36%, var(--border-color-default));
}

.habit-template.starter .title {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.habit-template.starter .meta {
  align-items: center;
  color: var(--placeholder-text-color);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--font-size-small);
  gap: 0.5rem;
  min-width: 0;
}

.habit-template.starter .meta .category {
  align-items: center;
  display: inline-flex;
  gap: 0.35rem;
  min-width: 0;
}

.habit-template.starter .preview {
  display: grid;
  gap: var(--spacing-default);
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
}

.habit-template.starter .preview > .header {
  align-items: flex-start;
  display: flex;
  gap: var(--spacing-default);
  justify-content: space-between;
}

.habit-template.starter .preview > .header p {
  color: var(--placeholder-text-color);
  margin: 0.25rem 0 0;
  overflow-wrap: anywhere;
}

.habit-template.starter .preview .count {
  --background-status: color-mix(in srgb, var(--info-color) 5%, transparent);
  --border-status: var(--border-width-default) solid color-mix(in srgb, var(--info-color) 20%, var(--border-color-default));
  background: var(--background-status, var(--background-panel, var(--background-input)));
  border: var(--border-status, var(--border-panel, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-status, var(--border-radius-default));
  box-shadow: var(--shadow-status, none);
  padding-top: var(--padding-status, var(--spacing-default));
  padding-bottom: var(--padding-status, var(--spacing-default));
  padding-inline-start: var(--padding-status, var(--spacing-default));
  padding-inline-end: var(--padding-status, var(--spacing-default));
  font-size: var(--font-size-small);
  white-space: nowrap;
}

.habit-template.starter .tasks {
  gap: 0.5rem;
  padding-right: 0.25rem;
}

.habit-template.starter .task.item {
  align-items: flex-start;
  background: color-mix(in srgb, var(--background-input) 92%, var(--background-alt));
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 76%, transparent);
  border-radius: var(--border-radius-default);
  display: grid;
  gap: 0.65rem;
  grid-template-columns: auto minmax(0, 1fr);
  min-width: 0;
  padding: 0.75rem;
}

.habit-template.starter .task.item[data-selected=false] {
  opacity: 0.58;
}

.habit-template.starter .task.item input {
  margin-top: 0.2rem;
}

.habit-template.starter .task.item .copy {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

.habit-template.starter .task.item strong,
.habit-template.starter .task.item small {
  overflow-wrap: anywhere;
}

.habit-template.starter .task.item small {
  color: var(--placeholder-text-color);
}

.habit-template.starter .tasks .meta {
  gap: 0.35rem;
}

.habit-template.starter .tasks :is(.detail.chip, .goal.chip) {
  background: color-mix(in srgb, var(--primary-color) 8%, var(--background-input));
  border: var(--border-width-default) solid color-mix(in srgb, var(--primary-color) 18%, transparent);
  color: var(--text-color);
}

.habit-template.starter .destination {
  border-top: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 70%, transparent);
  display: grid;
  gap: var(--spacing-sm);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-top: var(--spacing-default);
}

.habit-template.starter .destination > .header,
.habit-template.starter .destination > .state {
  grid-column: 1/-1;
}

.habit-template.starter .destination .field {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.habit-template.starter .destination .rz-dropdown,
.habit-template.starter .destination .rz-datepicker {
  font-size: var(--font-size-default);
  border: var(--border-width-input, var(--border-width-default)) solid var(--border-color-input, var(--border-color-default));
  background-color: var(--background-input, var(--background-default));
  color: var(--color-input, var(--text-color));
  min-height: var(--input-min-height, 2.75rem);
  min-width: 0;
  width: var(--input-width, 100%);
  padding-top: var(--padding-input-block, calc(var(--padding-default) / 2));
  padding-bottom: var(--padding-input-block, calc(var(--padding-default) / 2));
  padding-inline-start: var(--padding-input-inline, var(--padding-default));
  padding-inline-end: var(--padding-input-inline, var(--padding-default));
  border-radius: var(--border-radius-input, var(--border-radius-default));
  box-shadow: var(--shadow-input, none);
  transition: border-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), box-shadow var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default), background-color var(--transition-duration-fast, calc(var(--transition-duration-default) / 2)) var(--transition-function-default);
  align-items: center;
  display: flex;
  min-height: 2.6rem;
  min-width: 0;
  padding: 0;
  width: 100%;
}
.habit-template.starter .destination .rz-dropdown:focus,
.habit-template.starter .destination .rz-datepicker:focus {
  outline: none;
  border-color: var(--focus-border-color, var(--primary-color));
  box-shadow: var(--shadow-input-focus, var(--shadow-default));
}
.habit-template.starter .destination .rz-dropdown:focus-visible,
.habit-template.starter .destination .rz-datepicker:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-input, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset, 2px);
  border-radius: var(--border-radius-input, var(--border-radius-default));
}

.habit-template.starter .destination .rz-dropdown-label,
.habit-template.starter .destination .rz-datepicker .rz-inputtext {
  background: transparent;
  border: 0;
  box-shadow: none;
  min-height: calc(2.6rem - 2px);
  outline: 0;
}

.habit-template.starter .destination .rz-dropdown-label {
  align-items: center;
  display: flex;
  justify-content: flex-start;
  padding-inline: var(--padding-input-inline, var(--padding-default)) 2.75rem;
  width: 100%;
}

.habit-template.starter .destination .rz-datepicker .rz-inputtext {
  padding-block: 0;
  padding-inline: var(--padding-input-inline, var(--padding-default));
}

.habit-template.starter .destination .rz-dropdown-trigger,
.habit-template.starter .destination .rz-datepicker-trigger {
  align-items: center;
  color: var(--placeholder-text-color);
  display: flex;
  justify-content: center;
  min-height: calc(2.6rem - 2px);
}

.habit-template.starter > .state,
.habit-template.starter .empty.state {
  align-items: center;
  color: var(--placeholder-text-color);
  display: flex;
  gap: var(--spacing-sm);
  justify-content: center;
  min-height: 10rem;
  padding: var(--spacing-lg);
}

.habit-template.starter .project-required.state {
  --background-status: color-mix(in srgb, var(--info-color) 5%, transparent);
  --border-status: var(--border-width-default) solid color-mix(in srgb, var(--info-color) 20%, var(--border-color-default));
  background: var(--background-status, var(--background-panel, var(--background-input)));
  border: var(--border-status, var(--border-panel, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-status, var(--border-radius-default));
  box-shadow: var(--shadow-status, none);
  padding-top: var(--padding-status, var(--spacing-default));
  padding-bottom: var(--padding-status, var(--spacing-default));
  padding-inline-start: var(--padding-status, var(--spacing-default));
  padding-inline-end: var(--padding-status, var(--spacing-default));
  align-items: center;
  color: var(--info-text-color);
  display: flex;
  gap: var(--spacing-sm);
}

.habit-template.starter .project-required .projects {
  font-size: var(--button-small-font-size, var(--font-size-small));
  min-height: var(--button-small-min-height, 2rem);
  padding-inline-start: var(--button-small-padding-inline, var(--spacing-sm));
  padding-inline-end: var(--button-small-padding-inline, var(--spacing-sm));
  padding-top: var(--button-small-padding-block, var(--spacing-xs));
  padding-bottom: var(--button-small-padding-block, var(--spacing-xs));
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--secondary-text-color);
  margin-left: auto;
}

.habit-template.starter .error.state {
  --background-status: color-mix(in srgb, var(--danger-color) 5%, transparent);
  --border-status: var(--border-width-default) solid color-mix(in srgb, var(--danger-color) 20%, var(--border-color-default));
  background: var(--background-status, var(--background-panel, var(--background-input)));
  border: var(--border-status, var(--border-panel, var(--border-width-default) solid var(--border-color-default)));
  color: var(--color-surface, var(--text-color));
  border-radius: var(--border-radius-status, var(--border-radius-default));
  box-shadow: var(--shadow-status, none);
  padding-top: var(--padding-status, var(--spacing-default));
  padding-bottom: var(--padding-status, var(--spacing-default));
  padding-inline-start: var(--padding-status, var(--spacing-default));
  padding-inline-end: var(--padding-status, var(--spacing-default));
  align-items: center;
  color: var(--danger-color);
  display: flex;
  gap: var(--spacing-sm);
}

.habit-template.starter .actions {
  align-items: center;
  display: flex;
  justify-content: flex-end;
}

.habit-template.starter .actions .import {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--primary-text-color);
}

.habit-template.starter .success.state {
  align-items: center;
  display: grid;
  gap: var(--spacing-default);
  grid-template-columns: auto minmax(0, 1fr);
  padding: clamp(1.5rem, 5vw, 3rem);
}

.habit-template.starter .success.state > i {
  color: var(--success-color);
  font-size: 2.4rem;
}

.habit-template.starter .success .message {
  min-width: 0;
}

.habit-template.starter .success h3,
.habit-template.starter .success p {
  margin: 0;
  overflow-wrap: anywhere;
}

.habit-template.starter .success p {
  color: var(--placeholder-text-color);
  margin-top: 0.25rem;
}

.habit-template.starter .success .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  grid-column: 2;
  justify-content: flex-start;
}

.habit-template.starter .success .calendar {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--primary-text-color);
}

.habit-template.starter .success .project {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--secondary-text-color);
}

.habit-template.starter .success .undo {
  background: transparent;
  border-color: var(--secondary-color);
  box-shadow: none;
  color: var(--secondary-color);
}
.habit-template.starter .success .undo:hover:not(:disabled, [aria-disabled=true]) {
  background: color-mix(in srgb, var(--secondary-color) 12%, transparent);
  border-color: var(--secondary-color);
  box-shadow: none;
  color: var(--secondary-color);
}

@media (max-width: 900px) {
  .habit-template.dialog .rz-dialog {
    height: calc(100dvh - 1rem);
    width: calc(100vw - 1rem);
  }
  .habit-template.starter > .content {
    grid-template-columns: minmax(0, 1fr);
    overflow: auto;
  }
  .habit-template.starter .discovery,
  .habit-template.starter .preview {
    overflow: visible;
  }
  .habit-template.starter .discovery {
    border-bottom: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 70%, transparent);
    border-right: 0;
    grid-template-rows: auto auto auto auto;
  }
  .habit-template.starter .list {
    max-height: 18rem;
  }
  .habit-template.starter .preview {
    grid-template-rows: auto auto auto auto auto;
  }
  .habit-template.starter .tasks {
    max-height: none;
    overflow: visible;
  }
}
@media (max-width: 640px) {
  .habit-starter-entry > .header,
  .habit-template.starter .preview > .header,
  .habit-template.starter .success.state {
    align-items: stretch;
    grid-template-columns: minmax(0, 1fr);
  }
  .habit-starter-entry > .header {
    flex-direction: column;
  }
  .habit-starter-entry .actions,
  .habit-starter-entry .starter,
  .habit-template.starter .actions .import,
  .habit-template.starter .success .actions,
  .habit-template.starter .success .actions button {
    width: 100%;
  }
  .habit-template.starter > .header {
    padding: var(--spacing-default);
  }
  .habit-template.starter .destination {
    grid-template-columns: minmax(0, 1fr);
  }
  .habit-template.starter .project-required.state {
    align-items: stretch;
    flex-direction: column;
  }
  .habit-template.starter .project-required .projects {
    margin-left: 0;
    width: 100%;
  }
  .habit-template.starter .success .actions {
    grid-column: 1;
  }
}
@media (max-width: 1100px) {
  .settings.layout {
    grid-template-columns: minmax(0, 1fr) minmax(11rem, 14rem);
  }
}
@media (max-width: 760px) {
  .settings.layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .settings.layout .settings-sidebar,
  .settings.main,
  .settings.aside,
  .settings.secondary {
    grid-column: 1;
  }
  .settings.layout .settings-sidebar {
    max-width: 100%;
    order: -1;
    overflow-x: auto;
    padding: 0.75rem;
    position: static;
  }
  .nav.settings ul {
    display: flex;
    gap: 0.35rem;
    overflow: visible;
  }
  .nav.settings li {
    flex: 0 0 auto;
  }
  .nav.settings a {
    min-height: 2.25rem;
    padding: 0.45rem 0.7rem;
    white-space: nowrap;
  }
  .entity-view.section > .header {
    gap: var(--spacing-sm);
  }
  .entity-view.section > .header > .search.filters {
    padding: var(--spacing-default);
  }
  .entity-view.section > .header > .search.filters > .content,
  .entity-view.section > .header > .search.filters > .content:has(.filter.entity.sort),
  .entity-view.section .filters.project {
    grid-template-columns: minmax(0, 1fr);
  }
  .entity-view.section > .header > .search.filters > .content {
    align-items: stretch;
  }
  .entity-view.section .filter.entity,
  .entity-view.section .filters.task,
  .entity-view.section .filters.project,
  .entity-view.section .tag-search-component.section {
    width: 100%;
  }
  .entity-view.section .filter.entity.search,
  .entity-view.section .filter.entity.perpage {
    flex: 0 0 auto;
  }
  .entity-view.section > .header > .tabs.view-mode {
    display: flex;
    justify-self: stretch;
    width: 100%;
  }
  .entity-view.section .tabs.view-mode .tab {
    min-width: 0;
    flex: 1 1 0;
    padding-inline: 0.45rem;
  }
  .entity-view.section .create,
  .app-ui.grid .app-ui.item .footer > .select.action {
    width: 100%;
  }
  .tracking.list .overview > header {
    align-items: stretch;
    flex-direction: column;
  }
  .tracking.list .category.widgets {
    grid-template-columns: minmax(0, 1fr);
  }
  .app-ui.widget.water .body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "meter" "sources" "actions" "custom" "timeline" "chart";
  }
  .app-ui.widget.water .tracking-ring {
    --tracking-ring-size: min(18rem, 100%);
  }
  .app-ui.widget.steps .body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "meter" "summary" "sources" "manual" "timeline" "chart";
  }
  .app-ui.widget.steps .tracking-ring {
    --tracking-ring-size: min(18rem, 100%);
  }
  .app-ui.widget.steps .steps-manual-log .log.action {
    justify-self: stretch;
  }
  .app-ui.widget.weight .body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "summary" "sources" "height" "log" "recent" "chart";
  }
  .app-ui.widget.weight .weight-summary {
    grid-template-columns: minmax(0, 1fr);
  }
  .app-ui.widget.weight .weight-log .log.action {
    justify-self: stretch;
  }
  .app-ui.widget.ledger .body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "selector" "setup" "summary" "log" "people" "settlements" "activity";
  }
  .app-ui.widget.ledger .ledger-hero {
    grid-template-columns: minmax(0, 1fr);
  }
  .app-ui.widget.ledger .ledger-mode-switch {
    grid-template-columns: minmax(0, 1fr);
  }
  .app-ui.widget.ledger .ledger-log .log.action,
  .app-ui.widget.ledger .ledger-setup .create.action {
    justify-self: stretch;
  }
  .app-ui.widget.medication .medication-hero,
  .app-ui.widget.medication .medication-summary,
  .app-ui.widget.medication .medication-dose-main,
  .app-ui.widget.medication .medication-week-row,
  .app-ui.widget.medication .medication-time-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .app-ui.widget.medication .medication-hero .action,
  .app-ui.widget.medication .medication-dose-card .action {
    width: 100%;
  }
  .app-ui.widget.medication .medication-week-doses {
    justify-content: flex-start;
  }
  .app-ui.widget.workout .workout-hero,
  .app-ui.widget.workout .workout-summary,
  .app-ui.widget.workout .main {
    grid-template-columns: minmax(0, 1fr);
  }
  .app-ui.widget.workout .workout-hero .action,
  .app-ui.widget.workout .main .action {
    width: 100%;
  }
  .app-ui.widget.vitals .body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "summary" "sources" "log" "timeline" "chart";
  }
  .app-ui.widget.vitals .vitals-summary {
    grid-template-columns: minmax(0, 1fr);
  }
  .app-ui.widget.vitals .vitals-summary .actions,
  .app-ui.widget.vitals .vitals-log .log.action {
    justify-self: stretch;
  }
  .app-ui.widget .actions {
    align-items: stretch;
    flex-direction: column;
  }
  .app-ui.widget .actions .action {
    width: 100%;
  }
  .vault.crypto.settings dl {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 640.98px) {
  .entity-readiness.state.failed,
  .entity-readiness.state.permission-denied {
    align-items: stretch;
    flex-direction: column;
  }
  .entity-readiness.state :is(.retry, .create) {
    width: 100%;
  }
}
.support.cockpit,
.support.detail,
.support.triage,
.support-conversation {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 0px) {
  .support.cockpit,
  .support.detail,
  .support.triage,
  .support-conversation {
    background: var(--background-card, var(--background-default));
    color: var(--color-card, var(--text-color));
    border-radius: var(--border-radius-card, var(--border-radius-default));
    padding-top: var(--padding-card, var(--padding-default));
    padding-bottom: var(--padding-card, var(--padding-default));
    padding-inline-start: var(--padding-card, var(--padding-default));
    padding-inline-end: var(--padding-card, var(--padding-default));
    margin-top: var(--margin-card, var(--margin-default));
    margin-bottom: var(--margin-card, var(--margin-default));
    margin-inline-start: var(--margin-card, var(--margin-default));
    margin-inline-end: var(--margin-card, var(--margin-default));
    border: var(--border-width-card, var(--border-width-default)) solid var(--border-color-card, var(--border-color-default));
    transition: all var(--transition-duration-default) var(--transition-function-default);
    box-shadow: var(--shadow-card, var(--shadow-default));
  }
}
@media (min-width: 0px) and (prefers-reduced-motion: reduce) {
  .support.cockpit,
  .support.detail,
  .support.triage,
  .support-conversation {
    transition: none !important;
  }
}
@media (min-width: 576px) {
  .support.cockpit,
  .support.detail,
  .support.triage,
  .support-conversation {
    box-shadow: var(--shadow-card-responsive, var(--shadow-more));
  }
}

.support .header,
.support-conversation .header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.support .header h1,
.support .header h2,
.support-conversation .header h2 {
  margin: 0;
}

.support .header p,
.support-conversation .header p {
  color: var(--placeholder-text-color);
  margin: 0.25rem 0 0;
}

.support.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 0.75rem;
}

.support.metrics article {
  border: 1px solid var(--border-color-default);
  border-radius: var(--border-radius-default);
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.72);
}

.support.metrics span {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
}

.support.latest,
.support.empty,
.support.request-state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid var(--border-color-default);
  border-radius: var(--border-radius-default);
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.7);
}

.support.empty {
  justify-content: center;
  text-align: center;
}

.support.history {
  margin: 1rem 0 0;
}

.support.triage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.75rem;
}

.support.triage-grid label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.support .actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.incident.item .header {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
}

.incident.item p {
  color: var(--placeholder-text-color);
}

.eyebrow {
  color: var(--placeholder-text-color);
  font-size: var(--font-size-small);
  font-weight: 700;
}

.form-intro {
  color: var(--placeholder-text-color);
}

@media (max-width: 576px) {
  .support .header,
  .support.latest,
  .support.request-state {
    align-items: stretch;
    flex-direction: column;
  }
}
.organization.cockpit.section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-default);
  padding: var(--spacing-lg);
}

.organization.cockpit.section > .cockpit.header,
.cockpit.panel > header,
.group.item > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-default);
}

.organization.cockpit.section > .cockpit.header h1 {
  margin: 0;
  font-size: var(--font-size-xxl);
}

.organization.cockpit.section > .cockpit.header p {
  margin: 0.35rem 0 0;
  color: var(--placeholder-text-color);
}

.cockpit.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 0.75rem;
}

.cockpit.metrics .metric,
.cockpit.panel {
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 70%, transparent);
  border-radius: var(--border-radius-default);
  background: var(--background-panel, var(--background-input));
}

.cockpit.metrics .metric {
  padding: 0.85rem;
}

.cockpit.metrics .metric span {
  display: block;
  font-size: var(--font-size-xl);
  font-weight: 700;
}

.cockpit.metrics .metric small,
.member.item small,
.pending.item small,
.group.item small,
.permission.item small {
  color: var(--placeholder-text-color);
}

.cockpit.grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--spacing-default);
  align-items: start;
}

.cockpit.panel {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: var(--spacing-default);
}

.cockpit.panel > header .title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.group.item > header .title {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.cockpit.panel > header .title h2 {
  margin: 0;
  font-size: var(--font-size-large);
}

.cockpit.panel > header .title i {
  color: var(--primary-color);
}

.cockpit.panel .inline-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(10rem, 0.45fr) auto;
  gap: 0.75rem;
  align-items: end;
}

.cockpit.panel .inline-form.compact {
  grid-template-columns: minmax(0, 1fr) auto;
}

.member-removal.option {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--placeholder-text-color);
  font-size: var(--font-size-small);
}

.member-list,
.pending-list,
.group-list,
.permission-list,
.project-list,
.group-members {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.member.item,
.pending.item,
.permission.item,
.project.item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.65rem;
  min-height: 2.75rem;
  padding: 0.55rem 0;
  border-bottom: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 55%, transparent);
}

.member.item {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.project.item {
  grid-template-columns: auto minmax(0, 1fr);
  color: inherit;
  text-decoration: none;
}

.group.item {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.75rem;
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 55%, transparent);
  border-radius: var(--border-radius-default);
}

.group-members {
  flex-direction: row;
  flex-wrap: wrap;
}

.group-members .chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2rem;
  padding: 0.2rem 0.55rem;
  border: var(--border-width-default) solid color-mix(in srgb, var(--border-color-default) 70%, transparent);
  border-radius: var(--border-radius-default);
  background: var(--background-input);
}

.group-members .chip button {
  border: 0;
  background: transparent;
  color: inherit;
}

.organization.cockpit.section :is(.remove.action.member, .delete.action.group, .save.action.role, .clear.action.role) {
  flex: 0 0 auto;
  min-height: 2rem;
  min-width: 2rem;
  padding: 0;
  width: 2rem;
}

.organization.cockpit.section :is(.remove.action.member, .clear.action.role) {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--secondary-text-color);
}

.organization.cockpit.section .save.action.role {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--primary-text-color);
}

.organization.cockpit.section .delete.action.group {
  background: var(--danger-color);
  border-color: var(--danger-color);
  color: var(--danger-text-color);
}

@media (max-width: 900px) {
  .cockpit.grid,
  .cockpit.panel .inline-form {
    grid-template-columns: 1fr;
  }
  .organization.cockpit.section > .cockpit.header {
    align-items: stretch;
    flex-direction: column;
  }
}
.connected-provider-status.auth {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 8.5em;
  padding: 1.5rem;
  text-align: center;
}

.connected-provider-status .header {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.connected-provider-status .brand {
  align-self: center;
  margin: auto;
}

.connected-provider-status .title {
  margin: 0;
}

.connected-provider-status .meta {
  line-height: 1.45;
  margin: 0;
}

.connected-provider-status .status-icon {
  align-items: center;
  border: 1px solid currentColor;
  border-radius: 999px;
  display: inline-flex;
  font-size: 1.5rem;
  height: 3rem;
  justify-content: center;
  width: 3rem;
}

.connected-provider-status .status-icon.success {
  background: color-mix(in srgb, #2f9e44 14%, transparent);
  color: #2f9e44;
}

.connected-provider-status .status-icon.warning {
  background: color-mix(in srgb, #c98200 16%, transparent);
  color: #9a6700;
}

.connected-provider-status .status-icon.neutral {
  background: color-mix(in srgb, var(--placeholder-text-color) 14%, transparent);
  color: var(--placeholder-text-color);
}

.connected-provider-status .status-icon.danger {
  background: color-mix(in srgb, #c92a2a 14%, transparent);
  color: #c92a2a;
}

.connected-provider-status .actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.connected-provider-status .actions .action {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  margin: 0;
  min-height: 2.75rem;
  text-decoration: none;
  width: 100%;
}

.connected-providers .content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.connected-provider-login {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.connected-provider-login.has-recovery {
  flex: 1 1 100%;
}

.connected-provider-button {
  align-items: center;
  border-radius: var(--border-radius-connected-provider-button, var(--border-radius-button, var(--border-radius-default)));
  display: inline-flex;
  height: var(--connected-provider-button-size, var(--button-size));
  justify-content: center;
  min-width: var(--connected-provider-button-size, var(--button-size));
  padding: var(--padding-connected-provider-button, var(--padding-button, var(--spacing-default)));
  width: var(--connected-provider-button-size, var(--button-size));
}

.connected-provider-button:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-connected-provider-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset-small, var(--focus-offset, 0.15rem));
}

.connected-provider-icon {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  width: var(--connected-provider-icon-size, var(--icon-size));
  height: var(--connected-provider-icon-size, var(--icon-size));
}

.connected-provider-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.passkey {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.login-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0.75rem 0 1rem;
}

.remember-me {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  color: var(--bs-body-color, #212529);
}

.remember-me input {
  inline-size: 1rem;
  block-size: 1rem;
}

.forgot-password {
  white-space: nowrap;
}

.connected-provider-recovery {
  width: min(100%, 22rem);
  margin: 0;
  text-align: left;
}

.connected-provider-recovery p {
  margin: 0.35rem 0 0;
}

.connected-provider-recovery .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.connected-provider-recovery {
  background: color-mix(in srgb, #fff7ed 70%, var(--background-input, var(--background-default)));
  border: var(--border-width-default, 1px) solid color-mix(in srgb, #b45309 42%, var(--border-color-default, #cccccc));
  border-radius: var(--border-radius-default, 0.75rem);
  color: var(--text-color, #333333);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.85rem;
  text-align: left;
}

.connected-provider-recovery:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color, var(--primary-color));
  outline-offset: var(--focus-offset-small, var(--focus-offset, 0.15rem));
}

.connected-provider-recovery p {
  margin: 0;
}

.connected-provider-recovery .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.connected-provider-recovery .action {
  margin: 0;
  min-width: 8rem;
  width: auto;
}

.connected-provider-recovery .retry.action,
.connected-provider-recovery .login.action {
  width: auto;
}

.connected-provider-option {
  align-items: center;
  display: inline-flex;
  flex-direction: column;
  gap: 0.65rem;
}

.connected-provider-option.has-recovery {
  align-items: stretch;
  flex-basis: 100%;
}

.connected-provider-button {
  align-items: center;
  border-radius: var(--border-radius-connected-provider-button, var(--border-radius-button, var(--border-radius-default)));
  display: inline-flex;
  height: var(--connected-provider-button-size, var(--button-size));
  justify-content: center;
  min-width: var(--connected-provider-button-size, var(--button-size));
  padding: var(--padding-connected-provider-button, var(--padding-button, var(--spacing-default)));
  width: var(--connected-provider-button-size, var(--button-size));
}

.connected-provider-button:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color-connected-provider-button, var(--focus-color, var(--primary-color)));
  outline-offset: var(--focus-offset-small, var(--focus-offset, 0.15rem));
}

.connected-provider-recovery:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color, var(--primary-color));
  outline-offset: var(--focus-offset-small, var(--focus-offset, 0.15rem));
}

.connected-provider-recovery {
  background: color-mix(in srgb, #fff7ed 70%, var(--background-input, var(--background-default)));
  border: var(--border-width-default, 1px) solid color-mix(in srgb, #b45309 42%, var(--border-color-default, #cccccc));
  border-radius: var(--border-radius-default, 0.75rem);
  color: var(--text-color, #333333);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.85rem;
  text-align: left;
}

.connected-provider-recovery p {
  margin: 0;
}

.connected-provider-recovery .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.connected-provider-recovery .action {
  margin: 0;
  min-width: 8rem;
  width: auto;
}

.connected-provider-recovery .retry.action,
.connected-provider-recovery .login.action {
  width: auto;
}

/*# sourceMappingURL=theme-default.css.map */