@import url("./theme.css");

/* Shared layout primitives */
.app-view {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  flex: 1;
}

.app-view--padded {
  padding: var(--space-6);
}

.app-view--narrow {
  width: min(960px, 100%);
  margin: 0 auto;
}

.app-section-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.app-section-stack--page {
  padding: 0 var(--space-6) var(--space-10);
}

@media (max-width: 960px) {
  .app-section-stack--page {
    padding: 0 var(--space-4) var(--space-7);
  }
}

.app-grid {
  display: grid;
  gap: var(--space-5);
}

.app-grid--responsive {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.app-grid--split {
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr);
  align-items: flex-start;
}

@media (max-width: 1080px) {
  .app-grid--split {
    grid-template-columns: minmax(0, 1fr);
  }
}

.app-grid--metadata {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
}

.badge--caps {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.app-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.app-card__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.app-card__empty {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

/* Admin hints */
.admin-hint {
  color: var(--muted, #64748b);
  font-size: 12px;
}

/* Account subscriptions */
.subs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.sub-item {
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  background: rgba(148, 163, 184, 0.08);
}

.sub-item .sub-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.sub-override {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
  align-items: end;
}

/* Admin lists */
.admin-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Topbar modifiers */
.app-topbar--compact {
  margin: var(--space-5);
  padding: var(--space-4) var(--space-6);
}

.app-topbar--wide {
  margin: var(--space-6);
  padding: var(--space-5) var(--space-7);
}

.app-topbar--flush {
  margin: 0;
}

.app-topbar--wrap .app-topbar__actions {
  flex-wrap: wrap;
  row-gap: var(--space-2);
}

/* Toggles */
.app-toggle {
  position: relative;
  width: 48px;
  height: 26px;
  flex-shrink: 0;
  cursor: pointer;
}

/* Tabs */
.app-tabs {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  padding: var(--space-1);
  scroll-snap-type: x mandatory;
}

.app-tab-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-width: 240px;
  scroll-snap-align: start;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.app-tab-card.is-active {
  border-color: rgba(59, 130, 246, 0.45);
  box-shadow: 0 10px 24px rgba(59, 130, 246, 0.18);
}

.app-tab-card__button {
  all: unset;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  min-width: 0;
}

.app-tab-card__title {
  font-size: 16px;
  font-weight: 700;
  color: inherit;
}

/* Structured lists */
.app-kv-list {
  display: grid;
  gap: var(--space-3);
}

.app-kv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: 14px;
}

.app-kv__label {
  color: var(--muted);
  font-weight: 600;
}

.app-detail-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.app-detail {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  align-items: flex-start;
}

.app-detail__main {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
}

.app-detail__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
  color: var(--muted);
  font-size: 12px;
}

.app-detail__icon {
  width: 32px;
  height: 32px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(59, 130, 246, 0.12);
  font-size: 16px;
}

/* Forms */
.form-grid {
  display: grid;
  gap: var(--space-3);
}

.form-grid--columns {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.form-grid label,
.form-grid .form-field,
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-weight: 600;
}

.form-grid input,
.form-grid textarea,
.form-grid select,
.form-field input,
.form-field textarea,
.form-field select {
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  background: rgba(255, 255, 255, 0.96);
  color: inherit;
  font: inherit;
}

.form-grid textarea,
.form-field textarea {
  min-height: 120px;
  resize: vertical;
}


.app-toggle input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: inherit;
}

.app-toggle__visual {
  position: absolute;
  inset: 0;
  background: rgba(148, 163, 184, 0.35);
  border-radius: 999px;
  transition: background 0.2s ease;
}

.app-toggle__visual::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 4px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.2);
  transition: transform 0.2s ease;
}

.app-toggle input:checked + .app-toggle__visual {
  background: linear-gradient(135deg, #60a5fa, #2563eb);
}

.app-toggle input:checked + .app-toggle__visual::after {
  transform: translateX(20px);
}

.app-toggle.is-disabled {
  cursor: not-allowed;
}

.app-toggle.is-disabled .app-toggle__visual {
  background: rgba(148, 163, 184, 0.25);
}

.app-toggle.is-pending .app-toggle__visual::after {
  animation: app-toggle-pulse 1s ease-in-out infinite;
}

@keyframes app-toggle-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
  }
}

/* Board configuration – logic panel */
.board-config__logic {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.board-config__rules {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.board-config__rules-empty {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.board-config__rules-pack {
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  background: rgba(148, 163, 184, 0.08);
}

.board-config__rules-pack > summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

.board-config__rules-pack[open] > summary {
  color: var(--accent);
}

.board-config__rules-list {
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.board-config__rules-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.board-config__rules-entry {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  cursor: default;
}

.board-config__rules-entry input {
  accent-color: var(--accent);
}

.board-config__rules-label {
  font-size: 14px;
}

.board-config__rules-meta {
  color: var(--muted);
  font-size: 13px;
  padding-left: calc(1.5em + var(--space-2));
}

.sb-image-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sb-note-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sb-note-panel__file {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sb-note-panel__file-info {
  font-weight: 600;
  font-size: 14px;
  color: var(--muted, #64748b);
}

.sb-note-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.sb-note-panel__empty {
  font-size: 14px;
  color: var(--muted, #64748b);
}

.sb-note-panel__status {
  min-height: 1.2em;
  font-size: 13px;
  color: var(--muted, #64748b);
}

.sb-note-panel__toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.sb-note-panel__editor-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sb-note-editor {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sb-note-editor__toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.sb-note-panel__editor {
  width: 100%;
  min-height: 260px;
  padding: 12px;
  border: 1px solid var(--line, #cbd5f5);
  border-radius: 8px;
  background: #fff;
  color: inherit;
  font-size: 14px;
  line-height: 1.55;
  font-family: var(--font-mono, 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace);
  resize: vertical;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.sb-note-panel__editor:focus {
  outline: none;
  border-color: transparent;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.45);
}

.sb-note-panel__editor:disabled {
  background: var(--surface-muted, #f8fafc);
  color: var(--muted, #64748b);
}

.sb-note-editor__textarea {
  font-family: var(--font-mono, 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace);
}

.sb-note-editor__preview {
  border: 1px solid var(--line, #cbd5f5);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
  min-height: 260px;
  font-size: 14px;
  line-height: 1.55;
  color: inherit;
  overflow-x: auto;
  word-break: break-word;
}

.sb-note-editor__preview h1,
.sb-note-editor__preview h2,
.sb-note-editor__preview h3,
.sb-note-editor__preview h4,
.sb-note-editor__preview h5,
.sb-note-editor__preview h6 {
  margin: 1.2em 0 0.6em;
  line-height: 1.3;
}

.sb-note-editor__preview p,
.sb-note-editor__preview ul,
.sb-note-editor__preview ol,
.sb-note-editor__preview blockquote,
.sb-note-editor__preview pre {
  margin: 0 0 1em;
}

.sb-note-editor__preview ul,
.sb-note-editor__preview ol {
  padding-left: 1.4em;
}

.sb-note-editor__preview blockquote {
  border-left: 4px solid rgba(59, 130, 246, 0.35);
  margin: 0 0 1em;
  padding-left: 12px;
  color: var(--muted, #64748b);
  background: rgba(59, 130, 246, 0.08);
  border-radius: 4px;
}

.sb-note-editor__preview code {
  font-family: var(--font-mono, 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace);
  background: rgba(15, 23, 42, 0.06);
  padding: 2px 4px;
  border-radius: 4px;
}

.sb-note-editor__preview pre {
  font-family: var(--font-mono, 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace);
  background: var(--surface-muted, #f8fafc);
  padding: 12px;
  border-radius: 8px;
  overflow: auto;
}

.sb-note-editor__preview a {
  color: var(--accent, #2563eb);
  text-decoration: underline;
}

.sb-note-editor__preview img {
  max-width: 100%;
  border-radius: 6px;
  display: block;
  margin: 8px 0;
}

.sb-note-editor__preview-empty {
  color: var(--muted, #64748b);
  font-style: italic;
}

.sb-note-panel__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.sb-note-panel__save-state {
  font-size: 13px;
  color: var(--muted, #64748b);
}

/* Quill editor comfortable min-height */
.sb-note-editor--quill .ql-container,
.sb-note-editor--quill .ql-editor {
  min-height: 260px;
}

/* Toast UI Editor — compact toolbar, no scrollbar */
.sb-note-editor--toastui .toastui-editor-defaultUI-toolbar {
  overflow-x: hidden;
}

.sb-note-editor--toastui .toastui-editor-defaultUI-toolbar button {
  width: 28px;
  height: 28px;
  margin: 5px 4px;
}

.sb-note-editor--toastui .toastui-editor-toolbar {
  height: 40px;
}

.sb-note-editor--toastui .toastui-editor-toolbar-divider {
  height: 14px;
  margin: 8px 6px;
}

.sb-image-panel__preview {
  position: relative;
  border: 1px dashed var(--line, #cbd5f5);
  border-radius: 8px;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--surface-muted, #f8fafc);
  padding: 12px;
  overflow: hidden;
  transition: border-color 120ms ease;
}

.sb-image-panel__preview--with-image {
  border-style: solid;
  background: #fff;
}

.sb-image-panel__preview-image {
  max-width: 100%;
  max-height: 240px;
  object-fit: contain;
  display: none;
}

.sb-image-panel__preview--with-image .sb-image-panel__preview-image {
  display: block;
}

.sb-image-panel__preview-placeholder {
  color: var(--muted, #64748b);
  font-size: 14px;
  text-align: center;
  padding: 8px;
}

.sb-image-panel__info {
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted, #64748b);
  text-align: center;
}

.sb-image-panel__controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.sb-image-panel__url {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.sb-image-panel__url label {
  font-weight: 600;
  font-size: 13px;
}

.sb-image-panel__url input {
  flex: 1 1 220px;
  min-width: 180px;
}

.sb-image-panel__status {
  font-size: 13px;
  color: var(--muted, #64748b);
  min-height: 18px;
}

.sb-image-panel__hint {
  font-size: 13px;
  color: var(--muted, #64748b);
}

.file-library-modal::part(panel) {
  width: min(1040px, 95vw);
  max-height: 90vh;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.file-library {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.35);
  overflow: hidden;
  max-height: 90vh;
}

.file-library__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--line, #e2e8f0);
}

.file-library__heading {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.file-library__title {
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
}

.file-library__subtitle {
  margin: 0;
  color: var(--muted, #64748b);
  font-size: 14px;
}

.file-library__close {
  flex-shrink: 0;
}

.file-library__toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line, #e2e8f0);
}
.file-library__folders {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.file-library__folder-select {
  padding: 6px 10px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 12px;
  background: #fff;
  color: inherit;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.file-library__upload {
  position: relative;
  overflow: hidden;
}

.file-library__upload input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.file-library__status {
  padding: 0 24px;
  font-size: 13px;
  color: var(--muted, #64748b);
  min-height: 20px;
}

.file-library__body {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  grid-template-areas: 'folders files';
  gap: 16px;
  padding: 16px 24px 24px;
  overflow: auto;
}

.file-library__folders-list {
  grid-area: folders;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 12px;
  border-right: 1px solid var(--line, #e2e8f0);
  min-width: 200px;
}

.file-library__folder-item {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px 6px;
  border-radius: 8px;
}

.file-library__folder-item:hover,
.file-library__folder-item:focus-within {
  background: var(--surface-muted, #f8fafc);
}

.file-library__folder-icon {
  opacity: 0.8;
}

.file-library__folder-name {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  padding: 4px 6px;
  border-radius: 8px;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.file-library__folder-actions .btn {
  padding: 4px 6px;
}

.file-library__empty {
  grid-area: files;
  margin: 0;
  color: var(--muted, #64748b);
  font-size: 14px;
  text-align: center;
  padding: 48px 0;
}

.file-library__list {
  grid-area: files;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
}

.file-library__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  padding: 12px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.file-library__item-preview {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-muted, #f8fafc);
}

.file-library__item-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.file-library__item-fallback {
  font-size: 24px;
  font-weight: 700;
  color: var(--muted, #64748b);
}

.file-library__item-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.file-library__item-name {
  overflow-wrap: anywhere;
}

.file-library__item-name {
  font-weight: 600;
  font-size: 15px;
}

.file-library__item-meta {
  color: var(--muted, #64748b);
  font-size: 13px;
}

.file-library__item-actions {
  display: flex;
  flex-direction: row;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.file-library__delete {
  color: #b91c1c;
}

.file-library__delete:hover {
  color: #991b1b;
}

@media (max-width: 900px) {
  .file-library__body {
    display: block;
  }
  .file-library__folders-list {
    display: none;
  }
}

/* Popover minimal styling consistent with app */
.popover-menu {
  background: #fff;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
  padding: 6px;
}
.popover-menu__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  font-size: 14px;
  background: transparent;
  border: 0;
  border-radius: 8px;
}
.popover-menu__item:hover,
.popover-menu__item:focus-visible {
  background: var(--surface-muted, #f8fafc);
}

/* Breadcrumb links look like links, not grey buttons */
.file-library__breadcrumb .link {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.file-library__breadcrumb .link:hover,
.file-library__breadcrumb .link:focus-visible {
  text-decoration: underline;
}

/* Inline overlay for info/confirm */
.file-library__overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 1000;
}
.file-library__dialog {
  background: #fff;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(15,23,42,.35);
  width: min(540px, 95vw);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}
.file-library__dialog header {
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--line, #e2e8f0);
  font-weight: 600;
}
.file-library__dialog .dialog-body {
  padding: 14px 20px 8px;
  overflow: auto;
}
.file-library__dialog .dialog-footer {
  padding: 12px 20px 16px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--line, #e2e8f0);
}
.file-library__dialog ul {
  margin: 6px 0 0 0;
  padding-left: 18px;
}
.file-library__dialog .muted {
  color: var(--muted, #64748b);
}
/* Breadcrumb container padding and layout */
.file-library__nav {
  padding: 0 24px;
}
.file-library__breadcrumb {
  padding: 6px 0 0;
}
.file-library__breadcrumb .file-library__breadcrumb-inner {
  display: flex;
  align-items: center;
  gap: 4px;
}
.file-library__breadcrumb .file-library__breadcrumb-inner span[aria-hidden="true"] {
  color: var(--muted, #64748b);
}

/* === Dialog (sb-dialog-*) === */
.sb-dialog { display: block; font: inherit; color: inherit; }
.sb-dialog-panel { overflow: hidden; }
.sb-dialog-header { padding: 12px 16px 0 16px; }
.sb-dialog-title { margin: 0; font-size: 1.15rem; line-height: 1.35; font-weight: 700; color: #0f172a; }
.sb-dialog-desc { margin: 6px 0 0 0; color: #475569; }
.sb-dialog-body { padding: 16px; }
.sb-dialog-footer { padding: 0 16px 14px 16px; }
.sb-dialog-actions { display: flex; gap: 8px; justify-content: flex-end; }
.sb-dialog-message { color: #0f172a; line-height: 1.6; }

.sb-dialog-form { display: grid; gap: 12px; }
.form-field { display: grid; gap: 6px; font: inherit; }
.form-field > input,
.form-field > select,
.form-field > textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  font: inherit;
  color: #0f172a;
}
.form-field > textarea { min-height: 96px; resize: vertical; }

.form-field.has-error > input,
.form-field.has-error > select,
.form-field.has-error > textarea {
  border-color: #fca5a5; /* red-300 */
  box-shadow: 0 0 0 3px rgba(252, 165, 165, 0.25);
}
.sb-field-error {
  color: #b91c1c; /* red-700 */
  font-size: 12px;
}

/* Animate sb-modal parts for a subtle entrance */
/* Animate only when open; default state remains visible (no base opacity:0) */
sb-modal[open]::part(backdrop) { animation: sb-backdrop-in .16s ease-out forwards; }
sb-modal::part(panel) { transform: translateY(6px) scale(.98); }
sb-modal[open]::part(panel) { animation: sb-panel-in .2s cubic-bezier(0.22, 1, 0.36, 1) forwards; }

/* Anywhere-ok affordance */
.sb-dialog--anywhere-ok .sb-dialog-panel,
.sb-dialog--anywhere-confirm .sb-dialog-panel { cursor: pointer; }

/* Optionally color the modal outer panel for better ambiance */
/* hover feedback is handled inside sb-modal shadow: .panel:hover */

@keyframes sb-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes sb-panel-in {
  from { transform: translateY(6px) scale(.98); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}