/* ====================================== */
/* Publish Variable Bridge For Widgets    */
/* Maps desktop-style Obsidian vars used  */
/* in inline HTML snippets to Publish vars*/
/* ====================================== */

:root {
  --color-text-primary: var(--text-normal, #222222);
  --color-text-secondary: var(--text-muted, #666666);
  --color-text-tertiary: var(--text-faint, #8a8a8a);
  --color-text-success: #0f6e56;
  --color-text-warning: #854f0b;
  --color-text-danger: #a32d2d;
  --color-text-info: #3753b6;

  --color-background-primary: var(--background-primary, #ffffff);
  --color-background-secondary: var(--background-secondary, #f5f5f5);
  --color-background-tertiary: var(--background-modifier-hover, rgba(127, 127, 127, 0.08));
  --color-background-success: rgba(29, 158, 117, 0.12);
  --color-background-warning: rgba(186, 117, 23, 0.12);
  --color-background-danger: rgba(216, 90, 48, 0.12);
  --color-background-info: rgba(55, 138, 221, 0.12);

  --color-border-secondary: var(--background-modifier-border, rgba(127, 127, 127, 0.25));
  --color-border-tertiary: var(--background-modifier-border, rgba(127, 127, 127, 0.16));
  --color-border-success: #1d9e75;
  --color-border-info: rgba(55, 138, 221, 0.32);

  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --font-mono: var(--font-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace);
  --console-shell-border: rgba(15, 23, 42, 0.08);
  --console-shell-bg: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(241, 245, 249, 0.98));
  --console-shell-shadow: 0 18px 42px rgba(15, 23, 42, 0.12);
  --console-header-border: rgba(15, 23, 42, 0.08);
  --console-header-bg: rgba(255, 255, 255, 0.58);
  --console-title: #0f172a;
  --console-status: #0f6e56;
  --console-screen-text: #334155;
  --console-log-text: #1e293b;
  --console-command-text: #166534;
  --console-output-text: #475569;
  --console-prompt: #0369a1;
  --console-tag: #0f766e;
  --console-cursor: #0f6e56;
  --console-cursor-glow: rgba(15, 110, 86, 0.35);
  --console-scrollbar: rgba(100, 116, 139, 0.24);
  --console-validated-text: #a32d2d;
  --console-validated-bg: rgba(216, 90, 48, 0.1);
  --console-validated-border: rgba(216, 90, 48, 0.28);
  --console-particle-1: #1d9e75;
  --console-particle-2: #f2c57a;
  --console-particle-3: #8bbcff;
}

body.theme-light {
  --color-text-primary: var(--text-normal, #1f1f1f);
  --color-text-secondary: var(--text-muted, #5f5f5f);
  --color-text-tertiary: var(--text-faint, #7a7a7a);
  --color-text-success: #0f6e56;
  --color-text-warning: #854f0b;
  --color-text-danger: #a32d2d;
  --color-text-info: #3753b6;
  --color-background-primary: var(--background-primary, #ffffff);
  --color-background-secondary: var(--background-secondary, #f5f5f5);
  --color-background-tertiary: var(--background-modifier-hover, rgba(0, 0, 0, 0.06));
  --color-background-success: rgba(29, 158, 117, 0.12);
  --color-background-warning: rgba(186, 117, 23, 0.12);
  --color-background-danger: rgba(216, 90, 48, 0.12);
  --color-background-info: rgba(55, 138, 221, 0.12);
  --color-border-secondary: var(--background-modifier-border, rgba(0, 0, 0, 0.12));
  --color-border-tertiary: var(--background-modifier-border, rgba(0, 0, 0, 0.08));
  --color-border-info: rgba(55, 138, 221, 0.28);
  --console-shell-border: rgba(15, 23, 42, 0.08);
  --console-shell-bg: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(241, 245, 249, 0.98));
  --console-shell-shadow: 0 18px 42px rgba(15, 23, 42, 0.12);
  --console-header-border: rgba(15, 23, 42, 0.08);
  --console-header-bg: rgba(255, 255, 255, 0.58);
  --console-title: #0f172a;
  --console-status: #0f6e56;
  --console-screen-text: #334155;
  --console-log-text: #1e293b;
  --console-command-text: #166534;
  --console-output-text: #475569;
  --console-prompt: #0369a1;
  --console-tag: #0f766e;
  --console-cursor: #0f6e56;
  --console-cursor-glow: rgba(15, 110, 86, 0.35);
  --console-scrollbar: rgba(100, 116, 139, 0.24);
  --console-validated-text: #a32d2d;
  --console-validated-bg: rgba(216, 90, 48, 0.1);
  --console-validated-border: rgba(216, 90, 48, 0.28);
  --console-particle-1: #1d9e75;
  --console-particle-2: #ba7517;
  --console-particle-3: #3753b6;
}

body.theme-dark {
  --color-text-primary: var(--text-normal, #f3f3f3);
  --color-text-secondary: var(--text-muted, #c8c8c8);
  --color-text-tertiary: var(--text-faint, #9a9a9a);
  --color-text-success: #7fe1bf;
  --color-text-warning: #f2c57a;
  --color-text-danger: #f29a8a;
  --color-text-info: #8bbcff;
  --color-background-primary: var(--background-primary, #1e1e1e);
  --color-background-secondary: var(--background-secondary, #252525);
  --color-background-tertiary: var(--background-modifier-hover, rgba(255, 255, 255, 0.08));
  --color-background-success: rgba(29, 158, 117, 0.18);
  --color-background-warning: rgba(186, 117, 23, 0.18);
  --color-background-danger: rgba(216, 90, 48, 0.18);
  --color-background-info: rgba(55, 138, 221, 0.18);
  --color-border-secondary: var(--background-modifier-border, rgba(255, 255, 255, 0.14));
  --color-border-tertiary: var(--background-modifier-border, rgba(255, 255, 255, 0.09));
  --color-border-info: rgba(139, 188, 255, 0.34);
  --console-shell-border: rgba(148, 163, 184, 0.18);
  --console-shell-bg: linear-gradient(180deg, rgba(18, 24, 39, 0.98), rgba(8, 12, 22, 0.98));
  --console-shell-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
  --console-header-border: rgba(148, 163, 184, 0.14);
  --console-header-bg: rgba(255, 255, 255, 0.04);
  --console-title: #f8fafc;
  --console-status: #86efac;
  --console-screen-text: #d8e1ee;
  --console-log-text: #e2e8f0;
  --console-command-text: #c4f1be;
  --console-output-text: #cbd5e1;
  --console-prompt: #7dd3fc;
  --console-tag: #67e8f9;
  --console-cursor: #86efac;
  --console-cursor-glow: rgba(134, 239, 172, 0.45);
  --console-scrollbar: rgba(148, 163, 184, 0.22);
  --console-validated-text: #f29a8a;
  --console-validated-bg: rgba(216, 90, 48, 0.16);
  --console-validated-border: rgba(242, 154, 138, 0.3);
  --console-particle-1: #7fe1bf;
  --console-particle-2: #f2c57a;
  --console-particle-3: #8bbcff;
}

/* ===================== */
/* Wider Publish pages   */
/* ===================== */
.published-container {
  --page-width: 980px;
  --page-padding: 28px;
}

@media screen and (max-width: 1000px) {
  .published-container {
    --page-width: 95%;
    --page-padding: 32px;
  }
}

@media screen and (max-width: 750px) {
  .published-container {
    --page-width: 100%;
    --page-padding: 20px;
  }
}

.publish-html-source,
.publish-html-source-shell,
.entropy-heatmap-root {
  color: var(--color-text-primary);
}

.publish-console-flow-root {
  margin: 1.25rem 0;
}

.publish-console-flow-shell {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--console-shell-border);
  background: var(--console-shell-bg);
  box-shadow: var(--console-shell-shadow);
}

.publish-console-flow-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--console-header-border);
  background: var(--console-header-bg);
}

.publish-console-flow-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.publish-console-flow-dots {
  display: inline-flex;
  gap: 0.35rem;
  flex-shrink: 0;
}

.publish-console-flow-dots span {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 999px;
  opacity: 0.9;
}

.publish-console-flow-dots span:nth-child(1) {
  background: #ff5f57;
}

.publish-console-flow-dots span:nth-child(2) {
  background: #febc2e;
}

.publish-console-flow-dots span:nth-child(3) {
  background: #28c840;
}

.publish-console-flow-title {
  color: var(--console-title);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.publish-console-flow-status {
  color: var(--console-status);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.publish-console-flow-screen {
  height: 18rem;
  max-height: 18rem;
  overflow: auto;
  padding: 1rem 1rem 1.2rem;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--console-screen-text);
  scrollbar-width: thin;
}

.publish-console-flow-screen::-webkit-scrollbar {
  width: 10px;
}

.publish-console-flow-screen::-webkit-scrollbar-thumb {
  background: var(--console-scrollbar);
  border-radius: 999px;
}

.publish-console-flow-line {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  white-space: pre-wrap;
  word-break: break-word;
  position: relative;
}

.publish-console-flow-line + .publish-console-flow-line {
  margin-top: 0.18rem;
}

.publish-console-flow-line.is-blank {
  min-height: 0.8rem;
}

.publish-console-flow-prompt {
  color: var(--console-prompt);
  font-weight: 700;
  flex: 0 0 auto;
}

.publish-console-flow-text {
  min-width: 0;
  flex: 1 1 auto;
}

.publish-console-flow-line.is-log .publish-console-flow-text {
  color: var(--console-log-text);
}

.publish-console-flow-line.is-command .publish-console-flow-text {
  color: var(--console-command-text);
}

.publish-console-flow-line.is-output .publish-console-flow-text {
  color: var(--console-output-text);
}

.publish-console-flow-line.is-validated {
  margin-top: 0.45rem;
  padding: 0.36rem 0.6rem;
  border-left: 3px solid var(--console-validated-border);
  border-radius: 10px;
  background: var(--console-validated-bg);
}

.publish-console-flow-line.is-validated .publish-console-flow-text {
  color: var(--console-validated-text);
  font-weight: 700;
  padding-right: 2.8rem;
}

.publish-console-flow-tag {
  color: var(--console-tag);
  font-weight: 600;
}

.publish-console-flow-particles {
  position: absolute;
  right: 0.25rem;
  top: 50%;
  width: 2.4rem;
  height: 2rem;
  transform: translateY(-50%);
  pointer-events: none;
  overflow: visible;
}

.publish-console-flow-particles span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--size);
  height: var(--size);
  margin-left: calc(var(--size) / -2);
  margin-top: calc(var(--size) / -2);
  border-radius: 999px;
  opacity: 0;
  transform: translate(0, 0) scale(0.4);
  animation: publish-console-particle-burst 1.8s ease-out infinite;
  animation-delay: var(--delay);
}

.publish-console-flow-particles span:nth-child(3n + 1) {
  background: var(--console-particle-1);
  box-shadow: 0 0 10px color-mix(in srgb, var(--console-particle-1) 55%, transparent);
}

.publish-console-flow-particles span:nth-child(3n + 2) {
  background: var(--console-particle-2);
  box-shadow: 0 0 10px color-mix(in srgb, var(--console-particle-2) 55%, transparent);
}

.publish-console-flow-particles span:nth-child(3n) {
  background: var(--console-particle-3);
  box-shadow: 0 0 10px color-mix(in srgb, var(--console-particle-3) 55%, transparent);
}

.publish-console-flow-cursor {
  display: inline-block;
  width: 0.62ch;
  height: 1.1em;
  margin-left: 0.22rem;
  vertical-align: text-bottom;
  background: var(--console-cursor);
  box-shadow: 0 0 10px var(--console-cursor-glow);
  animation: publish-console-flow-blink 1s steps(2, start) infinite;
}

.publish-console-flow-source {
  display: none;
}

@keyframes publish-console-flow-blink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

@keyframes publish-console-particle-burst {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.35);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(1);
  }
}

/* ===================== */
/* Center tables         */
/* ===================== */
.markdown-preview-view table,
.markdown-preview-view .table-wrapper {
  margin-inline: auto;
}

/* ===================== */
/* Center images         */
/* ===================== */
.markdown-preview-view img {
  display: block;
  margin-inline: auto;
}

/* ===================== */
/* Center videos         */
/* ===================== */
.markdown-preview-view video,
.markdown-preview-view .internal-embed[src*=".mp4"],
.markdown-preview-view .internal-embed[src*=".webm"],
.markdown-preview-view .internal-embed[src*=".mov"] {
  display: block;
  margin-inline: auto;
}

.markdown-preview-view video,
.markdown-preview-view .internal-embed video {
  display: block;
  margin-inline: auto;
  max-width: 100%;
}

/* ===================== */
/* Center iframes/embeds */
/* ===================== */
.markdown-preview-view iframe {
  display: block;
  margin-inline: auto;
}


/* ============================= */
/* Utility: center text blocks   */
/* Use with: > [!center]         */
/* or add cssclass: center-text  */
/* ============================= */

/* Frontmatter cssclass approach: add `cssclass: center-text` to any note */
.center-text .markdown-preview-view p,
.center-text .markdown-preview-view h1,
.center-text .markdown-preview-view h2,
.center-text .markdown-preview-view h3,
.center-text .markdown-preview-view h4,
.center-text .markdown-preview-view h5,
.center-text .markdown-preview-view h6,
.center-text .markdown-preview-view li {
  text-align: center;
}

/* Inline centering via HTML: <div class="center"> ... </div> */
.center {
  text-align: center;
}