.header-icon-button {
  position: relative;
  width: var(--ui-header-button-size);
  height: var(--ui-header-button-size);
  color: var(--ui-value-muted);
  cursor: pointer;
}

.header-icon-button svg {
  width: var(--ui-header-icon-size);
  height: var(--ui-header-icon-size);
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.header-icon-button__icon {
  display: block;
  width: var(--ui-header-icon-size);
  height: var(--ui-header-icon-size);
  background: currentColor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}

.header-icon-button__icon--new-workspace {
  mask-image: url("../assets/icons/UI/New-worksp-icon.svg?v=1.0.3");
  -webkit-mask-image: url("../assets/icons/UI/New-worksp-icon.svg?v=1.0.3");
}
.header-icon-button__icon--undo {
  mask-image: url("../assets/icons/UI/Undo-icon.svg?v=1.0.3");
  -webkit-mask-image: url("../assets/icons/UI/Undo-icon.svg?v=1.0.3");
}
.header-icon-button__icon--redo {
  mask-image: url("../assets/icons/UI/Redo-icon.svg?v=1.0.3");
  -webkit-mask-image: url("../assets/icons/UI/Redo-icon.svg?v=1.0.3");
}
.header-icon-button__icon--save-workspace {
  mask-image: url("../assets/icons/UI/Save-worksp-icon.svg?v=1.0.3");
  -webkit-mask-image: url("../assets/icons/UI/Save-worksp-icon.svg?v=1.0.3");
}
.header-icon-button__icon--save-workspace-as {
  mask-image: url("../assets/icons/UI/Save-as-icon.svg?v=1.0.3");
  -webkit-mask-image: url("../assets/icons/UI/Save-as-icon.svg?v=1.0.3");
}
.header-icon-button__icon--open-workspace {
  mask-image: url("../assets/icons/UI/Load-worksp-icon.svg?v=1.0.3");
  -webkit-mask-image: url("../assets/icons/UI/Load-worksp-icon.svg?v=1.0.3");
}
.header-icon-button__icon--export-pdf {
  mask-image: url("../assets/icons/UI/Export-pdf-icon.svg?v=1.0.3");
  -webkit-mask-image: url("../assets/icons/UI/Export-pdf-icon.svg?v=1.0.3");
}
.header-icon-button__icon--view-options {
  mask-image: url("../assets/icons/UI/View-icon.svg?v=1.0.3");
  -webkit-mask-image: url("../assets/icons/UI/View-icon.svg?v=1.0.3");
}

.header-icon-button:not(:disabled):hover,
.header-icon-button[aria-expanded="true"] { color: var(--ui-accent); }
.header-icon-button:disabled { opacity: .32; cursor: default; }

.social-link-button[aria-disabled="true"] { color: var(--ui-value-disabled); cursor: default; opacity: 1; }
.social-link-button__icon {
  display: block;
  width: var(--ui-header-social-icon-size);
  height: var(--ui-header-social-icon-size);
  background: currentColor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}
.social-link-button__icon--reddit {
  mask-image: url("../assets/icons/reddit.svg?v=1.0.3");
  -webkit-mask-image: url("../assets/icons/reddit.svg?v=1.0.3");
}

.app-header__meta .header-icon-button,
.app-header__meta .info-button {
  width: var(--ui-header-button-size);
  height: var(--ui-header-button-size);
}

.app-header__meta .header-icon-button > svg {
  width: var(--ui-header-settings-icon-size);
  height: var(--ui-header-settings-icon-size);
}

.settings-icon__gear-outline {
  stroke-width: 1.35;
  stroke-linejoin: round;
}

.info-button,
.info-dialog__close {
  color: var(--ui-value-muted);
  line-height: var(--ui-line-height-solid);
  cursor: pointer;
}

.info-button {
  position: relative;
  border: 0;
  font-family: Georgia, serif;
  font-size: var(--ui-font-size-body-sm);
  font-style: italic;
}

.info-button::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--ui-header-info-glyph-size);
  height: var(--ui-header-info-glyph-size);
  transform: translate(-50%, -50%);
  border: 2px solid currentColor;
  border-radius: var(--ui-radius-circle);
  content: "";
}

.info-button:hover,
.info-dialog__close:hover { color: var(--ui-accent); }

.info-dialog {
  width: min(540px, calc(100vw - 40px));
  max-height: min(720px, calc(100vh - 48px));
  padding: 0;
  overflow: hidden;
}

.info-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }

.info-dialog__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 22px var(--dialog-padding) 17px;
  border-bottom: 1px solid var(--ui-border);
}

.info-dialog__eyebrow {
  display: block;
  margin-bottom: 4px;
  color: var(--ui-value-muted);
  font-size: var(--ui-font-size-micro);
  font-weight: var(--ui-font-weight-strong);
  letter-spacing: var(--ui-letter-spacing-section);
  text-transform: uppercase;
}

.info-dialog h2 { margin: 0; font-size: var(--ui-font-size-dialog-title); font-weight: var(--ui-font-weight-dialog-title); letter-spacing: var(--ui-letter-spacing-title); }
.info-dialog__close { margin: -3px -5px 0 12px; font-size: var(--ui-font-size-dialog-close); }
.info-dialog__content { overflow-y: auto; padding: 21px var(--dialog-padding) 26px; }
.info-dialog__content section + section { margin-top: 22px; }
.info-dialog__content h3 { margin: 0 0 7px; font-size: var(--ui-font-size-body-sm); font-weight: var(--ui-font-weight-strong); }
.info-dialog__content p { margin: 0 0 9px; color: var(--ui-text-body-secondary); font-size: var(--ui-font-size-body-sm); line-height: var(--ui-line-height-prose); }
.info-dialog__content p:last-child { margin-bottom: 0; }
.info-dialog__about { padding-top: 18px; border-top: 1px solid var(--ui-border); }
.info-dialog__credit { color: var(--ui-value-muted); }
.info-dialog__credit a {
  color: var(--ui-value-primary);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--ui-accent) 42%, transparent);
}
.info-dialog__credit a:hover { color: var(--ui-accent); }

.new-workspace-dialog {
  width: min(390px, calc(100vw - 40px));
  padding: var(--dialog-padding);
}

.new-workspace-dialog h2 { margin: 0 0 8px; font-size: var(--ui-font-size-dialog-title-sm); font-weight: var(--ui-font-weight-dialog-title); }
.new-workspace-dialog p { margin: 0; color: var(--ui-text-body-secondary); font-size: var(--ui-font-size-body-sm); line-height: var(--ui-line-height-body); }
.new-workspace-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dialog-action-gap);
  margin-top: 20px;
}
.new-workspace-dialog__actions button {
  padding: 7px 10px;
  border: 1px solid var(--ui-border);
  background: var(--ui-surface-field);
  color: var(--ui-value-primary);
  font: inherit;
  font-size: var(--ui-font-size-control);
  cursor: pointer;
}
.new-workspace-dialog__actions button:hover { border-color: var(--ui-value-muted); }
.new-workspace-dialog__actions button[hidden] { display: none; }
.new-workspace-dialog__actions .new-workspace-dialog__primary {
  border-color: var(--ui-accent);
  background: var(--ui-accent);
  color: var(--ui-text-on-accent);
}

.save-overwrite-dialog__session-choice {
  display: flex;
  gap: var(--space-5);
  align-items: center;
  margin-top: var(--space-10);
  color: var(--ui-text-body-secondary);
  font-size: var(--ui-font-size-caption);
  cursor: pointer;
}

.column-delete-dialog__destination {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-10);
  color: var(--ui-text-body-secondary);
  font-size: var(--ui-font-size-caption);
}

.column-delete-dialog__destination .ui-select { width: 100%; }

.view-menu { position: relative; }

.view-menu__popover {
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  z-index: 20;
  width: max-content;
  min-width: 132px;
  padding: 8px;
  transform: translateX(-50%);
}

.view-menu__popover[hidden] { display: none; }

.view-menu__option {
  display: flex;
  align-items: center;
  gap: var(--ui-floating-gap);
  padding: 4px 5px;
  color: var(--ui-value-primary);
  font-size: var(--ui-font-size-control);
  white-space: nowrap;
  cursor: pointer;
}