@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600&family=Geist+Mono:wght@400;500&display=swap');

/*
  voitech.lol - Obsidian Publish theme
  Zsynchronizowany z design systemem strony, 2026-05-26

  Dark-first Publish theme. Keep this file small, variable-driven, and
  conservative: Publish loads it for every visitor.
*/

body {
  --font-text-theme: "Geist", sans-serif;
  --font-interface-theme: "Geist", sans-serif;
  --font-monospace-theme: "Geist Mono", monospace;
  --font-text: var(--font-text-theme);
  --font-interface: var(--font-interface-theme);
  --font-monospace: var(--font-monospace-theme);
  --font-text-size: 15px;
  --font-small: 13px;
  --font-smaller: 12px;
  --font-smallest: 11px;
  --font-inputs: 13px;
  --normal-weight: 400;
  --bold-weight: 500;
  --link-weight: inherit;

  --brand-bg:           #1d1a17;
  --brand-bg-2:         #242018;
  --brand-bg-3:         #2a2520;
  --brand-border:       #3a3530;
  --brand-border-hover: #4a4540;
  --brand-border-focus: #5a5550;
  --brand-text:         #efe7d5;
  --brand-text-muted:   #b8a88a;
  --brand-text-faint:   #8c8078;
  --brand-text-disabled: #4a4540;
  --brand-violet:       #9878e0;
  --brand-violet-hover: #b09ae8;
  --brand-orange:       #d97a40;
  --brand-orange-hover: #e8975c;
  --brand-mint:         #5bbfb2;
  --brand-mint-light:   #7dcfc5;
  --brand-brown:        #8b7255;
  --brand-violet-rgb: 152, 120, 224;
  --brand-orange-rgb: 217, 122, 64;
  --brand-mint-rgb:    91, 191, 178;
  --brand-brown-rgb:  139, 114, 85;

  --violet-dim:    rgba(152, 120, 224, 0.12);
  --violet-border: rgba(152, 120, 224, 0.28);
  --orange-dim:    rgba(217, 122,  64, 0.12);
  --orange-border: rgba(217, 122,  64, 0.28);
  --mint-dim:      rgba( 91, 191, 178, 0.12);
  --mint-border:   rgba( 91, 191, 178, 0.28);
  --brown-dim:     rgba(139, 114,  85, 0.12);

  --radius-xs:   5px;
  --radius-s:    8px;
  --radius-m:   13px;
  --radius-l:   21px;
  --radius-xl:  34px;
  --radius-pill: 9999px;
  --border-width: 1px;
  --nested-padding: 28px;
  --list-padding: 2em;
  --list-spacing: 0.075em;

  --h1: clamp(2rem, 5vw, 3rem);
  --h2: 28px;
  --h3: 20px;
  --h4: 17px;
  --h5: 15px;
  --h6: 13px;
  --h1-weight: 400;
  --h2-weight: 400;
  --h3-weight: 500;
  --h4-weight: 500;
  --h5-weight: 500;
  --h6-weight: 400;
  --h1-line-height: 1.2;
  --h2-line-height: 1.35;
  --h3-line-height: 1.35;
  --h4-line-height: 1.4;
  --h5-line-height: 1.45;
  --h6-line-height: 1.45;

  --image-radius: 13px;

  /* Fibonacci spacing */
  --space-1:   3px;
  --space-2:   5px;
  --space-3:   8px;
  --space-4:  13px;
  --space-5:  21px;
  --space-6:  34px;
  --space-7:  55px;
  --space-8:  89px;
  --space-9: 144px;

  /* Shadows */
  --shadow-none: none;
  --shadow-sm:   0 0 0 1px var(--brand-border);
  --shadow-md:   0 4px 16px rgba(0,0,0,.40), 0 1px 3px rgba(0,0,0,.30), 0 0 0 1px var(--brand-border);
  --shadow-lg:   0 16px 48px rgba(0,0,0,.50), 0 4px 12px rgba(0,0,0,.30), 0 0 0 1px var(--brand-border-hover);
  --shadow-focus: 0 0 0 3px var(--violet-dim), 0 0 0 1px var(--violet-border);
  --shadow-emphasis: 0 0 0 3px var(--orange-dim), 0 0 0 1px var(--orange-border);

  /* Glass — zsynchronizowany ze stroną */
  --glass-bg:     rgba(36, 32, 28, 0.58);
  --glass-blur:   blur(28px);
  --glass-border: 1px solid rgba(90, 82, 72, 0.65);
  --glass-shadow: 0 8px 32px rgba(0,0,0,.50), 0 2px 8px rgba(0,0,0,.30);

  /* Motion */
  --ease-out:    cubic-bezier(0.00, 0.00, 0.20, 1.00);
  --ease-in:     cubic-bezier(0.40, 0.00, 1.00, 1.00);
  --ease-inout:  cubic-bezier(0.40, 0.00, 0.20, 1.00);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1.00);
  --dur-fast:   100ms;
  --dur-normal: 200ms;
  --dur-slow:   350ms;

  /* Tracking */
  --tracking-tighter:  0em;
  --tracking-tight:    0em;
  --tracking-snug:     0em;
  --tracking-normal:   0em;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.08em;
  --img-grid-gap: 0.5rem;
  --img-grid-fit: cover;
  --img-zoom-background: rgba(0, 0, 0, 0.85);
  --img-zoom-max-width: 96%;
  --img-zoom-max-height: 90vh;
  --img-zoom-out-cursor: zoom-out;

  --cards-min-width: 180px;
  --cards-mobile-width: 160px;
  --cards-max-width: 1fr;
  --cards-image-height: 280px;
  --cards-padding: 1.2em;
  --cards-image-fit: cover;
  --cards-border-width: 1px;
  --cards-aspect-ratio: auto;
  --cards-columns: repeat(auto-fit, minmax(var(--cards-min-width), var(--cards-max-width)));

  --table-cell-padding: 7px 10px;
  --table-header-size: var(--font-smallest);
  --table-header-weight: 400;
  --table-text-size: 1em;
  --table-white-space: normal;
}

.theme-light,
.theme-dark {
  color-scheme: dark;

  --color-base-00: #1d1a17;
  --color-base-05: #211d19;
  --color-base-10: #242018;
  --color-base-20: #2a2520;
  --color-base-25: #312c26;
  --color-base-30: #3a3530;
  --color-base-35: #4a4540;
  --color-base-40: #5a5550;
  --color-base-50: #4a4540;
  --color-base-60: #8c8078;
  --color-base-70: #b8a88a;
  --color-base-100: #efe7d5;

  --accent-h: 258;
  --accent-s: 62%;
  --accent-l: 67%;
  --color-accent: var(--brand-violet);
  --color-accent-hsl: 258, 62%, 67%;

  --color-red:    var(--brand-orange);
  --color-orange: var(--brand-orange);
  --color-yellow: var(--brand-orange);
  --color-green:  var(--brand-mint);
  --color-cyan:   var(--brand-mint);
  --color-blue:   var(--brand-violet);
  --color-purple: var(--brand-violet);
  --color-pink:   var(--brand-violet);
  --color-red-rgb:    var(--brand-orange-rgb);
  --color-orange-rgb: var(--brand-orange-rgb);
  --color-yellow-rgb: var(--brand-orange-rgb);
  --color-green-rgb:  var(--brand-mint-rgb);
  --color-cyan-rgb:   var(--brand-mint-rgb);
  --color-blue-rgb:   var(--brand-violet-rgb);
  --color-purple-rgb: var(--brand-violet-rgb);
  --color-pink-rgb:   var(--brand-violet-rgb);

  --background-primary:     var(--brand-bg);
  --background-primary-alt: var(--brand-bg-2);
  --background-secondary:   var(--brand-bg-2);
  --background-secondary-alt: var(--brand-bg);
  --background-tertiary:    var(--brand-bg-3);
  --border-subtle: #2e2924;
  --bg-hover:      #312c26;
  --bg-active:     #382e27;

  --background-modifier-hover:        rgba(var(--brand-violet-rgb), 0.08);
  --background-modifier-active-hover: rgba(var(--brand-orange-rgb), 0.12);
  --background-modifier-border:       var(--brand-border);
  --background-modifier-border-hover: var(--brand-border-hover);
  --background-modifier-border-focus: var(--brand-border-focus);
  --background-modifier-form-field:   var(--brand-bg-2);
  --background-modifier-accent:       rgba(var(--brand-violet-rgb), 0.18);
  --background-modifier-success:      rgba(var(--brand-mint-rgb), 0.15);
  --background-modifier-success-rgb:  var(--brand-mint-rgb);
  --background-modifier-error:        rgba(var(--brand-orange-rgb), 0.15);
  --background-modifier-error-hover:  rgba(var(--brand-orange-rgb), 0.22);
  --background-modifier-error-rgb:    var(--brand-orange-rgb);
  --background-modifier-message:      var(--brand-bg-3);
  --background-divider:               var(--brand-border);

  --interactive-normal:       var(--brand-bg-3);
  --interactive-hover:        #312c26;
  --interactive-accent:       var(--brand-violet);
  --interactive-accent-hsl:   258, 62%, 67%;
  --interactive-accent-hover: var(--brand-violet-hover);
  --interactive-accent-rgb:   var(--brand-violet-rgb);

  --text-normal:      var(--brand-text);
  --text-muted:       var(--brand-text-muted);
  --text-faint:       var(--brand-text-faint);
  --text-on-accent:   var(--brand-bg);
  --text-on-accent-inverted: var(--brand-text);
  --text-accent:      var(--brand-violet);
  --text-accent-hover: var(--brand-orange);
  --text-success:     var(--brand-mint);
  --text-warning:     var(--brand-orange);
  --text-error:       var(--brand-orange);
  --text-blockquote:  var(--brand-text-muted);
  --text-code:        var(--brand-mint);
  --text-selection:   rgba(var(--brand-violet-rgb), 0.3);
  --text-highlight-bg: rgba(var(--brand-violet-rgb), 0.25);
  --caret-color:      var(--brand-violet);

  --text-bold:   var(--brand-text);
  --text-italic: var(--brand-text);
  --h1-color: var(--brand-text);
  --h2-color: var(--brand-text);
  --h3-color: var(--brand-text);
  --h4-color: var(--brand-text);
  --h5-color: var(--brand-text-muted);
  --h6-color: var(--brand-text-faint);

  --link-color:                    var(--brand-violet);
  --link-color-hover:              var(--brand-violet-hover);
  --link-external-color:           var(--brand-violet);
  --link-external-color-hover:     var(--brand-violet-hover);
  --link-decoration:               none;
  --link-decoration-hover:         none;
  --link-decoration-color:         transparent;
  --link-external-decoration:      none;
  --link-external-decoration-color: transparent;
  --link-unresolved-color:          var(--brand-text-faint);
  --link-unresolved-opacity:        1;
  --link-unresolved-decoration-color: var(--brand-border);

  --tag-color:             var(--brand-text-muted);
  --tag-color-hover:       var(--brand-text);
  --tag-background:        rgba(var(--brand-brown-rgb), 0.12);
  --tag-background-hover:  rgba(var(--brand-orange-rgb), 0.12);
  --tag-border-color:      var(--brand-border);
  --tag-border-color-hover: var(--brand-border-hover);
  --tag-border-width: 1px;
  --tag-padding-x: 0.6em;
  --tag-padding-y: 0.2em;
  --tag-radius: var(--radius-s);
  --tag-size: 11px;

  --checkbox-color:        var(--brand-violet);
  --checkbox-border-color: var(--brand-border-hover);
  --checkbox-marker-color: var(--brand-bg);
  --checklist-done-color:  var(--brand-text-faint);
  --checklist-done-decoration: line-through;

  --code-background:  var(--brand-bg-3);
  --code-normal:      var(--brand-mint);
  --code-comment:     var(--brand-text-faint);
  --code-function:    var(--brand-violet);
  --code-important:   var(--brand-orange);
  --code-keyword:     var(--brand-orange);
  --code-operator:    var(--brand-text-muted);
  --code-property:    var(--brand-mint);
  --code-punctuation: var(--brand-text-faint);
  --code-string:      var(--brand-mint);
  --code-tag:         var(--brand-orange);
  --code-value:       var(--brand-mint);

  --table-background:              transparent;
  --table-header-background:       var(--brand-bg-2);
  --table-header-background-hover: var(--brand-bg-3);
  --table-row-background-hover:    rgba(var(--brand-violet-rgb), 0.06);
  --table-border-color:            var(--brand-border);
  --table-header-border-color:     var(--brand-border);
  --table-text-color:              var(--brand-text-muted);
  --table-header-color:            var(--brand-text-faint);

  --blockquote-border-color:     var(--brand-violet);
  --blockquote-background-color: transparent;
  --hr-color:          var(--brand-border);
  --scrollbar-bg:      transparent;
  --scrollbar-thumb-bg: var(--brand-border-hover);
}

.published-container {
  --page-width: 860px;
  --page-padding: 34px;
  --page-title-color: var(--brand-text);
  --page-title-font: "Geist", sans-serif;
  --page-title-line-height: 1.2;
  --page-title-size: clamp(2rem, 5vw, 3rem);
  --page-title-style: normal;
  --page-title-variant: normal;
  --page-title-weight: 400;

  --sidebar-left-width: 280px;
  --sidebar-left-background: var(--brand-bg-2);
  --sidebar-left-border-width: 1px;
  --sidebar-left-border-color: var(--brand-border);
  --sidebar-right-width: 260px;
  --sidebar-right-background: var(--brand-bg-2);
  --sidebar-right-border-width: 1px;
  --sidebar-right-border-color: var(--brand-border);

  --nav-collapse-icon-color:       var(--brand-text-faint);
  --nav-collapse-icon-color-hover: var(--brand-orange);
  --nav-parent-item-color:         var(--brand-text-muted);
  --nav-parent-item-color-active:  var(--brand-text);
  --nav-parent-item-weight:        500;
  --nav-item-color:                var(--brand-text-muted);
  --nav-item-color-hover:          var(--brand-text);
  --nav-item-color-active:         var(--brand-text);
  --nav-item-border-color:         transparent;
  --nav-item-border-color-hover:   var(--brand-border-hover);
  --nav-item-border-color-active:  var(--brand-orange);
  --nav-item-weight-active:        500;
  --nav-indentation-guide-color:   var(--brand-border);

  --component-title-color:     var(--brand-text-faint);
  --component-title-font:      "Geist Mono", monospace;
  --component-title-size:      11px;
  --component-title-style:     normal;
  --component-title-transform: uppercase;
  --component-title-variant:   normal;
  --component-title-weight:    400;
  --outline-heading-color:        var(--brand-text-faint);
  --outline-heading-color-hover:  var(--brand-text-muted);
  --outline-heading-color-active: var(--brand-text);
  --outline-heading-weight-active: 500;
  --graph-height: 220px;
}

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

@media screen and (max-width: 750px) {
  body {
    --cards-min-width: var(--cards-mobile-width);
    --img-grid-gap: 0.25rem;
  }

  .published-container {
    --page-padding: 20px;
    --page-title-size: 1.8em;
  }
}

/* ─── Background gradient (zgodny ze stroną) ───────────────── */

.markdown-preview-view,
.published-container {
  background: var(--brand-bg);
  color: var(--brand-text);
}

body.published-container,
.published-container {
  background-color: var(--brand-bg);
  background-image:
    radial-gradient(circle at 75% 15%, rgba(152, 120, 224, 0.18) 0%, transparent 50%),
    radial-gradient(circle at  8% 80%, rgba(217, 122,  64, 0.12) 0%, transparent 44%),
    radial-gradient(circle at 52% 55%, rgba( 91, 191, 178, 0.07) 0%, transparent 40%);
}

/* ─── Typography ────────────────────────────────────────────── */

.markdown-preview-view {
  color: var(--brand-text-muted);
  line-height: 1.75;
}

.markdown-preview-view p,
.markdown-preview-view li {
  color: var(--brand-text-muted);
}

.markdown-preview-view > * + *,
.markdown-preview-view .markdown-preview-section > * + * {
  margin-block-start: var(--space-4);
}

.markdown-preview-view h1,
.markdown-preview-view h2,
.markdown-preview-view h3,
.markdown-preview-view h4,
.page-header .page-title {
  font-family: "Geist", sans-serif;
}

.markdown-preview-view h1,
.page-header .page-title {
  font-weight: 400;
  letter-spacing: 0;
}

.markdown-preview-view h2 {
  font-weight: 400;
  letter-spacing: 0;
}

.markdown-preview-view h3 {
  font-weight: 500;
  letter-spacing: 0;
}

.markdown-preview-view h4 {
  font-weight: 500;
  letter-spacing: 0;
}

.markdown-preview-view h5,
.markdown-preview-view h6,
.markdown-preview-view th,
.markdown-preview-view .tag:not(.token) {
  letter-spacing: 0;
}

.alt-title .page-header,
.hide-title .page-header {
  display: none;
}

/* ─── Links ─────────────────────────────────────────────────── */

.markdown-preview-view a,
.markdown-preview-view a.internal-link,
.markdown-preview-view a.external-link {
  color: var(--link-color);
  text-decoration: var(--link-decoration);
  text-decoration-color: var(--link-decoration-color);
  text-underline-offset: 3px;
  transition: color 150ms ease, text-decoration-color 150ms ease;
}

.markdown-preview-view a:hover,
.markdown-preview-view a.internal-link:hover,
.markdown-preview-view a.external-link:hover {
  color: var(--link-color-hover);
  text-decoration-color: transparent;
}

.markdown-preview-view a.internal-link.is-unresolved {
  color: var(--link-unresolved-color);
  text-decoration-color: var(--link-unresolved-decoration-color);
}

/* ─── Inline elements ───────────────────────────────────────── */

.markdown-preview-view mark,
mark {
  background: rgba(var(--brand-violet-rgb), 0.25) !important;
  color: inherit !important;
  border-radius: 3px;
  padding: 0 0.15em;
}

.markdown-preview-view strong,
.markdown-preview-view b {
  color: var(--brand-text);
  font-weight: 500;
}

.markdown-preview-view em,
.markdown-preview-view i {
  color: var(--brand-text-muted);
}

/* ─── Code ──────────────────────────────────────────────────── */

.markdown-preview-view code {
  font-family: "Geist Mono", monospace;
  font-size: 0.84em;
  color: var(--brand-mint);
  background: var(--brand-bg-3);
  border-radius: var(--radius-xs);
  padding: 0.15em 0.45em;
}

pre,
.markdown-preview-view pre {
  color: var(--brand-mint);
  background: var(--brand-bg-3);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-s);
  font-family: "Geist Mono", monospace;
  font-size: 13px;
  line-height: 1.7;
  overflow-x: auto;
  padding: 1.25rem;
}

.markdown-preview-view pre code {
  background: transparent;
  border-radius: 0;
  padding: 0;
}

/* ─── Tables ────────────────────────────────────────────────── */

.markdown-preview-view table {
  border: 1px solid var(--table-border-color);
  border-collapse: collapse;
  font-size: var(--table-text-size);
  margin-block-start: 1em;
  white-space: var(--table-white-space);
}

.markdown-preview-view th {
  color: var(--table-header-color);
  font-family: "Geist Mono", monospace;
  font-size: var(--table-header-size);
  font-weight: var(--table-header-weight);
  text-transform: uppercase;
}

.markdown-preview-view td,
.markdown-preview-view th {
  border-color: var(--table-border-color);
  padding: var(--table-cell-padding);
}

.markdown-preview-view td {
  color: var(--table-text-color);
}

/* ─── Blockquote ────────────────────────────────────────────── */

.markdown-preview-view blockquote {
  border-left: 3px solid var(--brand-violet);
  color: var(--brand-text-muted);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  padding: 0.75em 1.25em;
  margin-inline: 0;
}

/* ─── Tags ──────────────────────────────────────────────────── */

.markdown-preview-view .tag:not(.token) {
  background: var(--tag-background);
  border: var(--tag-border-width) solid var(--tag-border-color);
  border-radius: var(--tag-radius);
  color: var(--tag-color);
  font-family: "Geist Mono", monospace;
  font-size: var(--tag-size);
  padding: var(--tag-padding-y) var(--tag-padding-x);
  text-decoration: none;
  transition: background var(--dur-normal) var(--ease-out),
              border-color var(--dur-normal) var(--ease-out),
              color var(--dur-normal) var(--ease-out);
}

.markdown-preview-view .tag:not(.token):hover {
  background: var(--tag-background-hover);
  border-color: var(--tag-border-color-hover);
  color: var(--tag-color-hover);
}

/* ─── Callouts ──────────────────────────────────────────────── */

.callout {
  --callout-color: var(--brand-violet-rgb);
  border-radius: var(--radius-m);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(var(--callout-color), 0.28);
  box-shadow: 0 0 0 1px rgba(var(--callout-color), 0.08);
}

.callout[data-callout="note"],
.callout[data-callout="abstract"],
.callout[data-callout="summary"],
.callout[data-callout="info"],
.callout[data-callout="question"],
.callout[data-callout="help"],
.callout[data-callout="faq"] {
  --callout-color: var(--brand-violet-rgb);
}

.callout[data-callout="warning"],
.callout[data-callout="caution"],
.callout[data-callout="attention"],
.callout[data-callout="todo"],
.callout[data-callout="failure"],
.callout[data-callout="bug"],
.callout[data-callout="danger"],
.callout[data-callout="error"] {
  --callout-color: var(--brand-orange-rgb);
}

.callout[data-callout="tip"],
.callout[data-callout="hint"],
.callout[data-callout="success"],
.callout[data-callout="check"],
.callout[data-callout="done"],
.callout[data-callout="tldr"],
.callout[data-callout="example"] {
  --callout-color: var(--brand-mint-rgb);
}

.callout[data-callout="quote"],
.callout[data-callout="cite"] {
  --callout-color: var(--brand-brown-rgb);
}

/* ─── Images ────────────────────────────────────────────────── */

iframe,
img {
  border-radius: var(--image-radius);
}

img[src$="#circle"],
span[src$="#circle"] img {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
}

img[src$="#outline"],
span[src$="#outline"] img,
img[src$="#interface"],
span[src$="#interface"] img {
  border: 1px solid var(--brand-border);
}

img[src$="#interface"],
span[src$="#interface"] img {
  margin-block: 10px 15px;
}

.theme-dark img[src$="#invert"],
.theme-dark span[src$="#invert"] img {
  filter: invert(1) hue-rotate(180deg);
  mix-blend-mode: screen;
}

/* ─── Form inputs ───────────────────────────────────────────── */

input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="text"] {
  background: var(--brand-bg-2);
  border-color: var(--brand-border);
  border-radius: var(--radius-s);
  color: var(--brand-text);
  transition: border-color var(--dur-normal) var(--ease-out);
}

input[type="email"]:hover,
input[type="number"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
input[type="text"]:hover {
  border-color: var(--brand-border-hover);
}

input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="text"]:focus {
  border-color: var(--brand-violet);
  box-shadow: 0 0 0 2px rgba(var(--brand-violet-rgb), 0.2);
}

/* ─── Selection & scrollbar ─────────────────────────────────── */

::selection {
  background: var(--text-selection);
  color: var(--brand-text);
}

::-moz-selection {
  background: var(--text-selection);
  color: var(--brand-text);
}

::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--brand-border-hover);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--brand-border-focus);
}

/* ─── Lists & HR ────────────────────────────────────────────── */

ol > li::marker,
ul > li::marker {
  color: var(--brand-violet);
}

.markdown-preview-view ul,
.markdown-preview-view ol {
  list-style: revert;
  padding-inline-start: 1.4rem;
}

.markdown-preview-view li + li {
  margin-block-start: var(--space-2);
}

hr {
  border: none;
  border-top: 1px solid var(--brand-border);
}

/* ─── Focus ─────────────────────────────────────────────────── */

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-s);
}

/* ─── Footer ────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--brand-border);
  color: var(--brand-text-faint);
}

.site-footer a,
.site-footer a:link,
.site-footer a:visited {
  color: var(--brand-text-faint);
  text-decoration: none;
  transition: color var(--dur-normal) var(--ease-out);
}

.site-footer a:hover {
  color: var(--brand-text-muted);
}

.site-footer-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 14px 0;
}

.site-footer-social a {
  color: var(--brand-text-faint);
  display: flex;
  text-decoration: none;
  transition: color var(--dur-normal) var(--ease-out);
}

/* ─── Tooltip ───────────────────────────────────────────────── */

.tooltip {
  display: none;
}

/* ─── Glass utility ─────────────────────────────────────────── */

.glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
}

/* ─── Motion utilities ──────────────────────────────────────── */

.hover-lift {
  transition: background var(--dur-normal) var(--ease-out),
              border-color var(--dur-normal) var(--ease-out),
              box-shadow var(--dur-normal) var(--ease-out);
}

.hover-lift:hover {
  background: var(--bg-hover);
  border-color: var(--brand-border-hover);
  box-shadow: var(--shadow-md);
}

.hover-fade {
  transition: opacity var(--dur-normal) var(--ease-out);
}

.hover-fade:hover {
  opacity: 0.72;
}

.press-scale {
  transition: transform var(--dur-fast) var(--ease-out);
}

.press-scale:active {
  transform: scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}

/* ─── Table layout utilities ────────────────────────────────── */

.table-col-1-150.markdown-preview-view td:first-child { width: 150px; }
.table-col-1-200.markdown-preview-view td:first-child { width: 200px; }

.table-100 table,
.table-full table { width: 100%; }

.table-small table  { --table-text-size: 85%; }
.table-tiny table   { --table-text-size: 75%; }
.table-nowrap       { --table-white-space: nowrap; }
.table-tabular table { font-variant-numeric: tabular-nums; }

/* ─── Cards (table) ─────────────────────────────────────────── */

.cards table {
  --table-cell-padding: calc(var(--cards-padding) / 3) calc(var(--cards-padding) / 2);
  line-height: 1.3;
  width: 100%;
}

.cards table thead { display: none; }

.cards table tbody {
  clear: both;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: var(--cards-columns);
  padding: 0.5rem 0;
}

.cards table tbody > tr {
  background: var(--brand-bg-2);
  border: var(--cards-border-width) solid var(--brand-border);
  border-radius: var(--radius-m);
  display: flex;
  flex-direction: column;
  margin: 0;
  max-width: var(--cards-max-width);
  overflow: hidden;
  padding: 0 0 calc(var(--cards-padding) / 3);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.cards table tbody > tr:hover {
  border-color: var(--brand-orange);
  box-shadow: var(--shadow-md);
}

.cards table tbody > tr > td { border: 0; }

.cards table tbody > tr > td:first-child {
  color: var(--brand-text);
  font-weight: var(--bold-weight);
}

.cards table tbody > tr > td:not(:first-child) {
  color: var(--brand-text-muted);
  font-size: 0.9em;
}

.cards table tbody > tr > td:not(:last-child):not(:first-child) {
  border-bottom: 1px solid var(--brand-border);
  margin: 0 calc(var(--cards-padding) / 2);
  padding: 4px 0;
  width: calc(100% - var(--cards-padding));
}

.cards table tbody > tr > td > * {
  padding: calc(var(--cards-padding) / 3) 0;
}

.cards table tbody > tr > td a,
.list-cards.markdown-preview-view div > ul > li > a {
  text-decoration: none;
}

.cards table tbody > tr > td img {
  aspect-ratio: var(--cards-aspect-ratio);
  background: var(--brand-bg-3);
  display: block;
  max-height: var(--cards-image-height);
  object-fit: var(--cards-image-fit);
  width: 100%;
}

/* ─── Cards (list) ──────────────────────────────────────────── */

.list-cards.markdown-preview-view .list-bullet,
.list-cards.markdown-preview-view .list-collapse-indicator { display: none; }

.list-cards.markdown-preview-view div > ul {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: var(--cards-columns);
  line-height: 1.4;
  padding: 0;
}

.list-cards.markdown-preview-view div > ul > li {
  background: var(--brand-bg-2);
  border: var(--cards-border-width) solid var(--brand-border);
  border-radius: var(--radius-m);
  list-style: none;
  overflow: hidden;
  padding: calc(var(--cards-padding) / 2);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.list-cards.markdown-preview-view div > ul > li:hover {
  border-color: var(--brand-orange);
  box-shadow: var(--shadow-md);
}

.list-cards.markdown-preview-view div > ul > li > a {
  font-weight: var(--bold-weight);
}

.list-cards.markdown-preview-view div ul ul {
  color: var(--brand-text-muted);
  display: block;
  font-size: var(--font-smallest);
  padding: calc(var(--cards-padding) / 2) 0;
  width: 100%;
}

.list-cards.markdown-preview-view div ul ul > li {
  display: block;
  margin-inline-start: 0;
}

/* ─── Cards aspect ratio / columns ─────────────────────────── */

.cards.cards-16-9,
.list-cards.cards-16-9   { --cards-aspect-ratio: 16 / 9; }

.cards.cards-1-1,
.list-cards.cards-1-1    { --cards-aspect-ratio: 1 / 1; }

.cards.cards-2-1,
.list-cards.cards-2-1    { --cards-aspect-ratio: 2 / 1; }

.cards.cards-2-3,
.list-cards.cards-2-3    { --cards-aspect-ratio: 2 / 3; }

.cards.cards-cover,
.list-cards.cards-cover  { --cards-image-fit: cover; }

.cards.cards-cols-1,
.list-cards.cards-cols-1 { --cards-columns: repeat(1, minmax(0, 1fr)); }

.cards.cards-cols-2,
.list-cards.cards-cols-2 { --cards-columns: repeat(2, minmax(0, 1fr)); }

@media screen and (min-width: 750px) {
  .cards-cols-3,
  .list-cards.cards-cols-3 { --cards-columns: repeat(3, minmax(0, 1fr)); }

  .cards-cols-4,
  .list-cards.cards-cols-4 { --cards-columns: repeat(4, minmax(0, 1fr)); }

  .cards-cols-5,
  .list-cards.cards-cols-5 { --cards-columns: repeat(5, minmax(0, 1fr)); }
}

@media screen and (max-width: 750px) {
  .list-cards-mobile-full {
    --cards-columns: repeat(1, minmax(0, 1fr));
  }
}

/* ─── Image grid ────────────────────────────────────────────── */

.img-grid .markdown-preview-section p,
.img-grid .markdown-preview-section div {
  gap: var(--img-grid-gap);
}

.img-grid .markdown-preview-section img {
  object-fit: var(--img-grid-fit);
}

/* ─── Image zoom / lightbox ─────────────────────────────────── */

.img-zoom .image-embed { cursor: zoom-in; }

.lightbox {
  align-items: center;
  background: var(--img-zoom-background);
  display: flex;
  inset: 0;
  justify-content: center;
  position: fixed;
  z-index: 99999;
}

.lightbox img {
  cursor: var(--img-zoom-out-cursor);
  max-height: var(--img-zoom-max-height);
  max-width: var(--img-zoom-max-width);
  object-fit: contain;
}