@import "tailwindcss";
@plugin "@tailwindcss/typography";
@source "../../layouts";
@source "../../../../lib/sayfa/blocks";

/* Self-hosted fonts — Inter (latin-ext + latin) */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-ext-500.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-ext-600.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-ext-700.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Self-hosted fonts — Noto Sans Arabic */
@font-face {
  font-family: "Noto Sans Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: fallback;
  src: url("/assets/fonts/noto-sans-arabic-400.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: "Noto Sans Arabic";
  font-style: normal;
  font-weight: 500;
  font-display: fallback;
  src: url("/assets/fonts/noto-sans-arabic-500.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: "Noto Sans Arabic";
  font-style: normal;
  font-weight: 600;
  font-display: fallback;
  src: url("/assets/fonts/noto-sans-arabic-600.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: "Noto Sans Arabic";
  font-style: normal;
  font-weight: 700;
  font-display: fallback;
  src: url("/assets/fonts/noto-sans-arabic-700.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

/* Self-hosted fonts — JetBrains Mono (latin-ext + latin) */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-latin-ext-500.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/**
 * Catppuccin Theme for Static Sites
 * Light: Catppuccin Latte | Dark: Catppuccin Mocha
 *
 * Complete production-ready theme with:
 * - Semantic color tokens
 * - WCAG AA compliant contrast
 * - Smooth dark mode transitions
 * - Comprehensive component styles
 */

/* ============================================================================
   CATPPUCCIN LATTE (Light Mode)
   ============================================================================ */

/* Color scheme — drives code-block light/dark() switching (Lumis multi-themes).
   :root follows the system preference; the explicit classes let a future
   manual toggle force a scheme, and code colors track it automatically. */
:root {
  color-scheme: light dark;
}
.theme-light {
  color-scheme: light;
}
.dark,
.theme-dark {
  color-scheme: dark;
}

:root,
.theme-light {
  /* Catppuccin Latte Palette */
  --ctp-rosewater: #dc8a78;
  --ctp-flamingo: #dd7878;
  --ctp-pink: #ea76cb;
  --ctp-mauve: #8839ef;
  --ctp-red: #d20f39;
  --ctp-maroon: #e64553;
  --ctp-peach: #fe640b;
  --ctp-yellow: #df8e1d;
  --ctp-green: #40a02b;
  --ctp-teal: #179299;
  --ctp-sky: #04a5e5;
  --ctp-sapphire: #209fb5;
  --ctp-blue: #1e66f5;
  --ctp-lavender: #7287fd;
  --ctp-text: #4c4f69;
  --ctp-subtext1: #5c5f77;
  --ctp-subtext0: #6c6f85;
  --ctp-overlay2: #7c7f93;
  --ctp-overlay1: #8c8fa1;
  --ctp-overlay0: #9ca0b0;
  --ctp-surface2: #acb0be;
  --ctp-surface1: #bcc0cc;
  --ctp-surface0: #ccd0da;
  --ctp-base: #eff1f5;
  --ctp-mantle: #e6e9ef;
  --ctp-crust: #dce0e8;

  /* Semantic Tokens */
  --bg: var(--ctp-base);
  --surface: var(--ctp-mantle);
  --surface-2: var(--ctp-surface0);
  --text: var(--ctp-text);
  --text-heading: var(--ctp-text);
  --muted: var(--ctp-subtext0);
  --border: var(--ctp-surface1);
  --border-subtle: var(--ctp-surface0);

  --accent: var(--ctp-blue);
  --accent-hover: var(--ctp-sapphire);
  --accent-active: var(--ctp-sky);
  --accent-contrast: var(--ctp-base);

  --success: var(--ctp-green);
  --warning: var(--ctp-yellow);
  --danger: var(--ctp-red);

  --code-bg: var(--ctp-mantle);
  --code-surface: var(--ctp-surface0);
  --code-text: var(--ctp-text);
  --code-accent: var(--ctp-mauve);

  /* Component-specific */
  --header-bg: color-mix(in srgb, var(--ctp-base) 95%, transparent);
  --header-border: var(--ctp-surface1);
  --footer-bg: var(--ctp-mantle);
  --footer-text: var(--ctp-subtext1);
  --card-bg: var(--ctp-mantle);
  --card-border: var(--ctp-surface0);
  --chip-bg: var(--ctp-surface0);
  --chip-text: var(--ctp-subtext1);

  /* State overlays */
  --hover-overlay: color-mix(in srgb, var(--ctp-blue) 8%, transparent);
  --active-overlay: color-mix(in srgb, var(--ctp-blue) 12%, transparent);
  --focus-ring: var(--ctp-blue);

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(76 79 105 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(76 79 105 / 0.08), 0 2px 4px -2px rgb(76 79 105 / 0.05);
  --shadow-lg: 0 10px 15px -3px rgb(76 79 105 / 0.1), 0 4px 6px -4px rgb(76 79 105 / 0.05);

  /* Typography */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;

  /* Spacing (8px base) */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --space-8: 4rem;

  /* Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================================
   CATPPUCCIN MOCHA (Dark Mode)
   ============================================================================ */

.dark,
.theme-dark {
  --ctp-rosewater: #f5e0dc;
  --ctp-flamingo: #f2cdcd;
  --ctp-pink: #f5c2e7;
  --ctp-mauve: #cba6f7;
  --ctp-red: #f38ba8;
  --ctp-maroon: #eba0ac;
  --ctp-peach: #fab387;
  --ctp-yellow: #f9e2af;
  --ctp-green: #a6e3a1;
  --ctp-teal: #94e2d5;
  --ctp-sky: #89dceb;
  --ctp-sapphire: #74c7ec;
  --ctp-blue: #89b4fa;
  --ctp-lavender: #b4befe;
  --ctp-text: #cdd6f4;
  --ctp-subtext1: #bac2de;
  --ctp-subtext0: #a6adc8;
  --ctp-overlay2: #9399b2;
  --ctp-overlay1: #7f849c;
  --ctp-overlay0: #6c7086;
  --ctp-surface2: #585b70;
  --ctp-surface1: #45475a;
  --ctp-surface0: #313244;
  --ctp-base: #1e1e2e;
  --ctp-mantle: #181825;
  --ctp-crust: #11111b;

  --bg: var(--ctp-base);
  --surface: var(--ctp-mantle);
  --surface-2: var(--ctp-surface0);
  --text: var(--ctp-text);
  --text-heading: var(--ctp-text);
  --muted: var(--ctp-subtext0);
  --border: var(--ctp-surface1);
  --border-subtle: var(--ctp-surface0);

  --accent: var(--ctp-blue);
  --accent-hover: var(--ctp-sapphire);
  --accent-active: var(--ctp-sky);
  --accent-contrast: var(--ctp-base);

  --success: var(--ctp-green);
  --warning: var(--ctp-yellow);
  --danger: var(--ctp-red);

  --code-bg: var(--ctp-mantle);
  --code-surface: var(--ctp-surface0);
  --code-text: var(--ctp-text);
  --code-accent: var(--ctp-mauve);

  --header-bg: color-mix(in srgb, var(--ctp-base) 95%, transparent);
  --header-border: var(--ctp-surface1);
  --footer-bg: var(--ctp-mantle);
  --footer-text: var(--ctp-subtext1);
  --card-bg: var(--ctp-mantle);
  --card-border: var(--ctp-surface0);
  --chip-bg: var(--ctp-surface0);
  --chip-text: var(--ctp-subtext1);

  --hover-overlay: color-mix(in srgb, var(--ctp-blue) 8%, transparent);
  --active-overlay: color-mix(in srgb, var(--ctp-blue) 12%, transparent);
  --focus-ring: var(--ctp-blue);

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4);
}

@media (prefers-color-scheme: dark) {
  :root:not(.theme-light) {
    --ctp-rosewater: #f5e0dc;
    --ctp-flamingo: #f2cdcd;
    --ctp-pink: #f5c2e7;
    --ctp-mauve: #cba6f7;
    --ctp-red: #f38ba8;
    --ctp-maroon: #eba0ac;
    --ctp-peach: #fab387;
    --ctp-yellow: #f9e2af;
    --ctp-green: #a6e3a1;
    --ctp-teal: #94e2d5;
    --ctp-sky: #89dceb;
    --ctp-sapphire: #74c7ec;
    --ctp-blue: #89b4fa;
    --ctp-lavender: #b4befe;
    --ctp-text: #cdd6f4;
    --ctp-subtext1: #bac2de;
    --ctp-subtext0: #a6adc8;
    --ctp-overlay2: #9399b2;
    --ctp-overlay1: #7f849c;
    --ctp-overlay0: #6c7086;
    --ctp-surface2: #585b70;
    --ctp-surface1: #45475a;
    --ctp-surface0: #313244;
    --ctp-base: #1e1e2e;
    --ctp-mantle: #181825;
    --ctp-crust: #11111b;

    --bg: var(--ctp-base);
    --surface: var(--ctp-mantle);
    --surface-2: var(--ctp-surface0);
    --text: var(--ctp-text);
    --text-heading: var(--ctp-text);
    --muted: var(--ctp-subtext0);
    --border: var(--ctp-surface1);
    --border-subtle: var(--ctp-surface0);

    --accent: var(--ctp-blue);
    --accent-hover: var(--ctp-sapphire);
    --accent-active: var(--ctp-sky);
    --accent-contrast: var(--ctp-base);

    --success: var(--ctp-green);
    --warning: var(--ctp-yellow);
    --danger: var(--ctp-red);

    --code-bg: var(--ctp-mantle);
    --code-surface: var(--ctp-surface0);
    --code-text: var(--ctp-text);
    --code-accent: var(--ctp-mauve);

    --header-bg: color-mix(in srgb, var(--ctp-base) 95%, transparent);
    --header-border: var(--ctp-surface1);
    --footer-bg: var(--ctp-mantle);
    --footer-text: var(--ctp-subtext1);
    --card-bg: var(--ctp-mantle);
    --card-border: var(--ctp-surface0);
    --chip-bg: var(--ctp-surface0);
    --chip-text: var(--ctp-subtext1);

    --hover-overlay: color-mix(in srgb, var(--ctp-blue) 8%, transparent);
    --active-overlay: color-mix(in srgb, var(--ctp-blue) 12%, transparent);
    --focus-ring: var(--ctp-blue);

    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4);
  }
}

/* ============================================================================
   BASE STYLES
   ============================================================================ */

html.site-root {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--bg);
  color: var(--text);
}

body.site-body {
  font-family: "Inter", "Noto Sans Arabic", system-ui, sans-serif;
  line-height: var(--line-height-normal);
  background-color: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

*:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-heading);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

h1 { font-size: 2.25rem; font-weight: var(--font-weight-bold); letter-spacing: -0.025em; }
h2 { font-size: 1.875rem; letter-spacing: -0.025em; }
h3 { font-size: 1.5rem; line-height: var(--line-height-snug); }
h4 { font-size: 1.25rem; line-height: var(--line-height-snug); }
h5 { font-size: 1.125rem; font-weight: var(--font-weight-medium); }
h6 { font-size: 1rem; font-weight: var(--font-weight-medium); }

p { line-height: var(--line-height-relaxed); }

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover { color: var(--accent-hover); }

code {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.875em;
  background-color: var(--code-surface);
  color: var(--code-text);
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-sm);
}

pre {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  background-color: var(--code-bg);
  color: var(--code-text);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  overflow-x: auto;
  line-height: var(--line-height-relaxed);
  border: 1px solid var(--border);
}

pre code {
  background-color: transparent;
  padding: 0;
}

strong { font-weight: var(--font-weight-semibold); }
em { font-style: italic; }

blockquote {
  border-left: 4px solid var(--border);
  padding-left: var(--space-3);
  color: var(--muted);
  font-style: italic;
  margin: var(--space-3) 0;
}

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--space-4) 0;
}

ul, ol {
  padding-left: var(--space-3);
  line-height: var(--line-height-relaxed);
}

li { margin-bottom: var(--space-1); }

/* ============================================================================
   LAYOUT COMPONENTS
   ============================================================================ */

.container-content {
  max-width: 65ch;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}

.container-content-wide {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}

.page-wrapper {
  flex: 1;
  padding-top: var(--space-4);
  padding-bottom: var(--space-8);
}

/* ============================================================================
   HEADER
   ============================================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  backdrop-filter: blur(8px);
}

.header-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  gap: var(--space-4);
}

.nav-link {
  color: var(--text);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  font-weight: var(--font-weight-medium);
}

.nav-link:hover {
  color: var(--accent);
  background-color: var(--hover-overlay);
}

.nav-link.active,
.nav-link[aria-current="page"] {
  color: var(--accent);
  background-color: var(--active-overlay);
}

.mobile-menu-toggle {
  display: none;
  padding: var(--space-1);
  border-radius: var(--radius-md);
  background-color: transparent;
  color: var(--text);
  border: none;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.mobile-menu-toggle:hover {
  background-color: var(--hover-overlay);
}

@media (max-width: 768px) {
  .mobile-menu-toggle { display: flex; }

  .nav-menu {
    display: none;
  }

  .nav-menu.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--header-bg);
    border-bottom: 1px solid var(--header-border);
    padding: var(--space-2);
    box-shadow: var(--shadow-lg);
  }
}

/* ============================================================================
   FOOTER
   ============================================================================ */

.site-footer {
  background-color: var(--footer-bg);
  color: var(--footer-text);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border);
  margin-top: auto;
}

.footer-content {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  align-items: center;
}

.footer-link {
  color: var(--footer-text);
  transition: color var(--transition-fast);
}

.footer-link:hover {
  color: var(--accent);
}

/* ============================================================================
   CARDS
   ============================================================================ */

.card,
.content-card,
.note-card,
.project-card {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  transition: all var(--transition-base);
}

.card:hover,
.content-card:hover,
.note-card:hover,
.project-card:hover {
  border-color: var(--border);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.featured-content-card {
  background: linear-gradient(135deg, var(--card-bg) 0%, color-mix(in srgb, var(--accent) 3%, var(--card-bg)) 100%);
  border-color: var(--accent);
  border-width: 2px;
}

.card-title {
  font-size: 1.125rem;
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-1);
  transition: color var(--transition-fast);
}

a:hover .card-title {
  color: var(--accent);
}

.card-meta {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  font-size: 0.875rem;
  color: var(--muted);
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}

.card-excerpt {
  color: var(--text);
  line-height: var(--line-height-relaxed);
}

/* ============================================================================
   BUTTONS
   ============================================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-medium);
  transition: all var(--transition-fast);
  cursor: pointer;
  border: none;
  text-decoration: none;
  font-size: 0.875rem;
}

.btn-primary {
  background-color: var(--accent);
  color: var(--accent-contrast);
}

.btn-primary:hover:not(:disabled) {
  background-color: var(--accent-hover);
}

.btn-subtle {
  background-color: var(--surface-2);
  color: var(--text);
}

.btn-subtle:hover:not(:disabled) {
  background-color: var(--border);
}

.btn-icon {
  padding: var(--space-1);
  background-color: transparent;
  min-width: 2.5rem;
  min-height: 2.5rem;
  justify-content: center;
}

.btn-icon:hover:not(:disabled) {
  background-color: var(--hover-overlay);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn:active:not(:disabled) {
  transform: scale(0.98);
}

/* ============================================================================
   CHIPS / TAGS / CATEGORIES
   ============================================================================ */

.chip,
.tag-chip,
.category-chip,
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  background-color: var(--chip-bg);
  color: var(--chip-text);
  border-radius: var(--radius-xl);
  font-size: 0.875rem;
  font-weight: var(--font-weight-medium);
  transition: all var(--transition-fast);
  text-decoration: none;
}

.chip:hover,
.tag-chip:hover,
.category-chip:hover {
  background-color: var(--border);
  color: var(--accent);
}

.tag-chip::before,
.chip.tag::before {
  content: "#";
  opacity: 0.7;
}

.category-chip::before,
.chip.category::before {
  content: "📁";
  font-size: 0.875em;
}

.status-chip {
  background-color: color-mix(in srgb, var(--success) 20%, var(--chip-bg));
  color: var(--success);
}

.status-chip.ongoing {
  background-color: color-mix(in srgb, var(--warning) 20%, var(--chip-bg));
  color: var(--warning);
}

/* ============================================================================
   BREADCRUMB
   ============================================================================ */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 0.875rem;
  color: var(--muted);
  margin-bottom: var(--space-3);
}

.breadcrumb-link {
  color: var(--muted);
  transition: color var(--transition-fast);
}

.breadcrumb-link:hover {
  color: var(--accent);
}

.breadcrumb-separator {
  opacity: 0.5;
}

/* ============================================================================
   TABLE OF CONTENTS
   ============================================================================ */

.toc {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
}

.toc-title {
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-2);
  color: var(--text-heading);
}

.toc-list {
  list-style: none;
  padding: 0;
}

.toc-item {
  margin-bottom: 0;
}

.toc-link {
  display: block;
  padding: var(--space-1);
  color: var(--text);
  border-inline-start: 2px solid transparent;
  padding-inline-start: var(--space-2);
  transition: all var(--transition-fast);
}

.toc-link:hover {
  color: var(--accent);
  background-color: var(--hover-overlay);
}

.toc-link.active {
  color: var(--accent);
  border-inline-start-color: var(--accent);
  background-color: var(--active-overlay);
}

.toc-mobile {
  margin-bottom: var(--space-3);
}

.toc-mobile summary {
  cursor: pointer;
  padding: var(--space-2);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-medium);
  user-select: none;
  transition: background-color var(--transition-fast);
}

.toc-mobile[open] summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.toc-mobile summary:hover {
  background-color: var(--surface-2);
}

/* ============================================================================
   CODE BLOCKS
   ============================================================================ */

.code-block-wrapper {
  position: relative;
  margin: var(--space-3) 0;
}

.code-block-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--code-bg);
  border: 1px solid var(--border);
  border-bottom: none;
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
  padding: var(--space-1) var(--space-2);
}

.code-language {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.75rem;
  color: var(--code-accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--font-weight-semibold);
}

.code-copy-btn {
  padding: 0.25rem 0.5rem;
  background-color: var(--surface-2);
  color: var(--text);
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.code-copy-btn:hover {
  background-color: var(--border);
}

.code-copy-btn.copied {
  background-color: color-mix(in srgb, var(--success) 20%, var(--surface-2));
  color: var(--success);
}

.code-block-wrapper pre {
  margin: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* ============================================================================
   PAGINATION
   ============================================================================ */

.pagination {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  align-items: center;
  margin-top: var(--space-6);
  flex-wrap: wrap;
}

.pagination-btn {
  padding: var(--space-1) var(--space-2);
  background-color: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all var(--transition-fast);
  min-width: 2.5rem;
  text-align: center;
}

.pagination-btn:hover:not(:disabled):not(.current) {
  background-color: var(--border);
  border-color: var(--accent);
}

.pagination-btn.current {
  background-color: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
}

.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================================================
   LIST ENTRIES
   ============================================================================ */

.list-entry,
.entry-link-row {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.list-entry:last-child,
.entry-link-row:last-child {
  border-bottom: none;
}

.list-entry-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.list-entry-title {
  font-size: 1.25rem;
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-1);
  transition: color var(--transition-fast);
}

.list-entry-link:hover .list-entry-title {
  color: var(--accent);
}

.list-entry-meta {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
  font-size: 0.875rem;
  color: var(--muted);
  margin-bottom: var(--space-2);
}

.list-entry-excerpt {
  color: var(--text);
  line-height: var(--line-height-relaxed);
}

/* ============================================================================
   CLOUDS (Tag/Category)
   ============================================================================ */

.tag-cloud,
.category-cloud,
.cloud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.cloud-item {
  font-size: calc(0.875rem + var(--weight, 0) * 0.5rem);
  opacity: calc(0.6 + var(--weight, 0) * 0.4);
}

/* ============================================================================
   LANGUAGE SWITCHER
   ============================================================================ */

.language-switcher {
  position: relative;
}

.language-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background-color: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-weight: var(--font-weight-medium);
  color: var(--text);
}

.language-toggle:hover {
  background-color: var(--border);
}

.language-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-width: 10rem;
  z-index: 100;
  overflow: hidden;
}

.language-option {
  display: block;
  padding: var(--space-2);
  color: var(--text);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.language-option:hover {
  background-color: var(--hover-overlay);
}

.language-option.current {
  background-color: var(--active-overlay);
  color: var(--accent);
}

/* ============================================================================
   COPY LINK
   ============================================================================ */

.copy-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.5rem;
  background-color: transparent;
  color: var(--muted);
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.copy-link:hover {
  background-color: var(--hover-overlay);
  color: var(--accent);
}

.copy-link.copied {
  color: var(--success);
}

/* ============================================================================
   SOCIAL LINKS
   ============================================================================ */

.social-links {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--surface-2);
  border-radius: var(--radius-md);
  color: var(--text);
  transition: all var(--transition-fast);
}

.social-link:hover {
  background-color: var(--accent);
  color: var(--accent-contrast);
  transform: translateY(-2px);
}

/* ============================================================================
   FEED LINKS
   ============================================================================ */

.feed-links {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.feed-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  background-color: var(--surface-2);
  color: var(--text);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.feed-link:hover {
  background-color: var(--accent);
  color: var(--accent-contrast);
}

/* ============================================================================
   ARTICLE LAYOUT
   ============================================================================ */

.article-header {
  margin-bottom: var(--space-6);
}

.article-title {
  font-size: 2.5rem;
  margin-bottom: var(--space-2);
}

.article-meta-row,
.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  color: var(--muted);
  font-size: 0.875rem;
  margin-bottom: var(--space-3);
}

.article-hero {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
}

.article-content {
  max-width: 65ch;
}

.article-content > * + * {
  margin-top: var(--space-3);
}

.article-content h2 {
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

.article-content h3 {
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
}

/* ============================================================================
   RELATED CONTENT
   ============================================================================ */

.related-content {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}

.related-title {
  font-size: 1.5rem;
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-4);
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-3);
}

/* ============================================================================
   ERROR PAGES
   ============================================================================ */

.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
  padding: var(--space-4);
}

.error-code {
  font-size: 6rem;
  font-weight: var(--font-weight-bold);
  color: var(--accent);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.error-title {
  font-size: 1.5rem;
  margin-bottom: var(--space-3);
}

.error-description {
  color: var(--muted);
  margin-bottom: var(--space-4);
  max-width: 40ch;
}

/* ============================================================================
   READING PROGRESS
   ============================================================================ */

.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-color: var(--accent);
  transform-origin: left;
  z-index: 999;
}

/* ============================================================================
   UTILITIES
   ============================================================================ */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ============================================================================
   SAYFA STATIC THEME ADAPTERS
   ============================================================================ */

@theme inline {
  --font-sans: "Inter", "Noto Sans Arabic", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --color-background: var(--bg);
  --color-foreground: var(--text);
  --color-card: var(--card-bg);
  --color-card-foreground: var(--text);
  --color-popover: var(--surface);
  --color-popover-foreground: var(--text);
  --color-primary: var(--accent);
  --color-primary-foreground: var(--accent-contrast);
  --color-secondary: var(--surface-2);
  --color-secondary-foreground: var(--text);
  --color-muted: var(--surface-2);
  --color-muted-foreground: var(--muted);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-contrast);
  --color-destructive: var(--danger);
  --color-destructive-foreground: var(--bg);
  --color-border: var(--border);
  --color-input: var(--border);
  --color-ring: var(--focus-ring);
}

html.site-root {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

.site-body > main,
.site-body > .page-wrapper {
  flex: 1;
}

/* Small icon utilities emitted by Elixir blocks/templates. */
.icon-2_5 { width: 0.625rem; height: 0.625rem; }
.icon-3 { width: 0.75rem; height: 0.75rem; }
.icon-3_5 { width: 0.875rem; height: 0.875rem; }
.icon-4 { width: 1rem; height: 1rem; }
.icon-5 { width: 1.25rem; height: 1.25rem; }
.icon-menu { width: 1.25rem; height: 1.25rem; }
.icon-chevron { width: 0.75rem; height: 0.75rem; transition: transform var(--transition-fast); }
.hidden { display: none !important; }

/* Reference shell aliases used by Sayfa blocks. */
.header-shell,
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  backdrop-filter: blur(8px);
}

.header-container { max-width: 80rem; margin: 0 auto; padding: 0 var(--space-3); }
.header-row,
.header-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-2); padding-bottom: var(--space-2); }
.header-brand-text { color: var(--text-heading); font-size: 1.125rem; font-weight: var(--font-weight-semibold); }
.header-brand-text:hover { color: var(--accent); }
.header-brand-logo { display: inline-flex; align-items: center; }
.header-logo,
.header-logo-light,
.header-logo-dark { max-height: 2rem; width: auto; }
.header-logo-dark { display: none; }
.dark .header-logo-light { display: none; }
.dark .header-logo-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not(.theme-light) .header-logo-light { display: none; }
  :root:not(.theme-light) .header-logo-dark { display: block; }
}
.header-nav-left { display: flex; align-items: center; gap: var(--space-3); }
.header-nav-right { display: flex; align-items: center; gap: var(--space-2); }
.header-desktop-nav { display: flex; align-items: center; gap: var(--space-1); }
.header-nav-link,
.header-nav-link-active,
.nav-link { color: var(--text); padding: var(--space-1) var(--space-2); border-radius: var(--radius-md); transition: all var(--transition-fast); font-weight: var(--font-weight-medium); font-size: 0.9375rem; }
.header-nav-link:hover,
.header-nav-link-active,
.nav-link:hover,
.nav-link[aria-current="page"],
.nav-link.active { color: var(--accent); background-color: var(--hover-overlay); }
.header-nav-link-active,
.nav-link[aria-current="page"],
.nav-link.active { background-color: var(--active-overlay); }
.header-menu-toggle,
.mobile-menu-toggle { display: none; padding: var(--space-1); border: 0; background: transparent; color: var(--text); border-radius: var(--radius-md); }
.header-menu-toggle:hover,
.mobile-menu-toggle:hover { background-color: var(--hover-overlay); }
.header-mobile-menu { display: none; width: 100%; max-width: 80rem; margin: 0 auto; padding: 0 var(--space-3) var(--space-2); }
.header-mobile-list { display: flex; flex-direction: column; gap: 0.25rem; padding-top: var(--space-2); border-top: 1px solid var(--header-border); }
.header-mobile-link,
.header-mobile-link-active { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2); border-radius: var(--radius-md); color: var(--text); font-weight: var(--font-weight-medium); }
.header-mobile-link:hover,
.header-mobile-link-active { color: var(--accent); background-color: var(--hover-overlay); }

@media (max-width: 768px) {
  .header-desktop-nav { display: none; }
  .header-menu-toggle,
  .mobile-menu-toggle { display: inline-flex; }
}

/* Footer and feed links. */
.footer-shell,
.site-footer { background-color: var(--footer-bg); color: var(--footer-text); border-top: 1px solid var(--border); margin-top: auto; }
.footer-container { max-width: 80rem; margin: 0 auto; padding: var(--space-4) var(--space-3); }
.footer-content { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; align-items: center; }
.footer-main { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.footer-copy { color: var(--footer-text); font-size: 0.875rem; }
.footer-social { display: flex; align-items: center; gap: var(--space-2); }
.footer-social .social-link { width: 2.5rem; height: 2.5rem; padding: 0; color: var(--text); }
.footer-social .social-link svg { width: 1.25rem; height: 1.25rem; }
.footer-feed-links { justify-content: center; }
.footer-link { color: var(--footer-text); transition: color var(--transition-fast); }
.footer-link:hover { color: var(--accent); }
@media (max-width: 48rem) {
  .site-footer { padding: var(--space-3) 0; }
  .footer-content { flex-direction: column; justify-content: center; gap: var(--space-3); text-align: center; }
  .footer-copy { order: 1; }
  .footer-feed-links { order: 2; }
  .footer-social { order: 3; justify-content: center; }
}
.feed-links-row,
.feed-links-inline,
.feed-links { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; color: var(--muted); font-size: 0.875rem; }
.feed-icon { width: 1rem; height: 1rem; flex-shrink: 0; }
.feed-link { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; background-color: var(--surface-2); color: var(--text); border-radius: var(--radius-md); font-size: 0.875rem; text-decoration: none; transition: all var(--transition-fast); }
.feed-link:hover { background-color: var(--accent); color: var(--accent-contrast); }
.feed-tooltip-wrap { position: relative; }
.feed-tooltip { pointer-events: none; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 0.375rem; border-radius: var(--radius-sm); padding: 0.125rem 0.5rem; white-space: nowrap; opacity: 0; transition: opacity var(--transition-fast); background: var(--text); color: var(--bg); font-size: 0.75rem; }
.feed-tooltip-wrap:hover .feed-tooltip { opacity: 1; }
.feed-separator { opacity: 0.6; }

/* Language switcher: keep legacy IDs, use reference classes. */
.lang-switcher,
.language-switcher { position: relative; }
.lang-toggle,
.language-toggle { display: flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); background-color: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-fast); font-weight: var(--font-weight-medium); color: var(--text); }
.lang-toggle:hover,
.language-toggle:hover { background-color: var(--border); }
.lang-current-code { font-size: 0.75rem; font-weight: var(--font-weight-semibold); }
.lang-menu,
.language-dropdown { position: absolute; top: calc(100% + 0.5rem); right: 0; background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); min-width: 10rem; z-index: 100; overflow: hidden; }
[dir="rtl"] .lang-menu,
[dir="rtl"] .language-dropdown { right: auto; left: 0; }
.lang-item-current,
.lang-item-link,
.language-option { display: block; padding: var(--space-2); color: var(--text); text-decoration: none; transition: all var(--transition-fast); font-size: 0.875rem; }
.lang-item-link:hover,
.language-option:hover { background-color: var(--hover-overlay); }
.lang-item-current,
.language-option.current { background-color: var(--active-overlay); color: var(--accent); font-weight: var(--font-weight-medium); }
[id^="lang-toggle"][aria-expanded="true"] svg:last-child { transform: rotate(180deg); }

/* Content structure shared by EEx templates. */
.section-spacing { padding-bottom: var(--space-6); }
.section-spacing-lg { padding-bottom: var(--space-8); }
.section-title,
.home-connect-title { font-size: 1.5rem; font-weight: var(--font-weight-semibold); margin-bottom: var(--space-3); color: var(--text-heading); }
.home-connect-section { margin-bottom: var(--space-8); text-align: center; }
.home-connect-section .social-links { justify-content: center; }
.home-connect-section .social-link { width: 2.75rem; height: 2.75rem; padding: 0; }
.home-connect-section .social-link svg { width: 1.35rem; height: 1.35rem; }
.list-page-header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.list-page-header .page-list-title { margin-bottom: 0; }
@media (max-width: 48rem) { .list-page-header { align-items: flex-start; flex-direction: column; } }
.page-list-title,
.page-title-xl,
.page-title-lg { color: var(--text-heading); font-weight: var(--font-weight-bold); letter-spacing: -0.025em; }
.page-list-title { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: var(--space-4); }
.page-title-xl,
.article-title { font-size: clamp(2.25rem, 6vw, 3.5rem); margin-bottom: var(--space-2); }
.page-title-lg { font-size: clamp(1.875rem, 4vw, 2.5rem); margin-bottom: var(--space-2); }
.content-layout { display: grid; gap: var(--space-6); }
.content-main { min-width: 0; }
@media (min-width: 64rem) { .content-layout { grid-template-columns: minmax(0, 1fr) 250px; gap: var(--space-4); } }
.content-header,
.content-header-sm,
.article-header { margin-bottom: var(--space-6); }
.content-type-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.content-type-badge,
.content-status-badge,
.status-chip { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.75rem; border-radius: var(--radius-xl); background-color: var(--chip-bg); color: var(--chip-text); font-size: 0.875rem; font-weight: var(--font-weight-medium); }
.content-status-badge,
.status-chip { background-color: color-mix(in srgb, var(--success) 20%, var(--chip-bg)); color: var(--success); }
.content-meta-row,
.content-meta-row-tight,
.article-meta-row,
.meta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; color: var(--muted); font-size: 0.875rem; margin-bottom: var(--space-3); }
.content-meta-row-tight { gap: var(--space-2); }
.content-meta-item { display: inline-flex; align-items: center; gap: 0.375rem; }
.content-meta-separator { opacity: 0.6; }
.content-actions-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.content-chip-row,
.content-chip-row-tight { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-3); }
.content-figure { margin: 0 0 var(--space-4); }
.content-image,
.article-hero { width: 100%; height: auto; border-radius: var(--radius-lg); margin-bottom: var(--space-4); box-shadow: var(--shadow-md); }
.article-hero { max-height: 30rem; aspect-ratio: 16 / 9; object-fit: cover; }
.note-container { border-top: 2px solid var(--accent); padding-top: var(--space-4); }
.empty-state-text { color: var(--muted); padding: var(--space-4) 0; }

/* Chips/buttons/actions. */
.chip-category-link,
.chip-tag-link,
.chip-category,
.chip-tag,
.chip-status,
.chip { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.75rem; background-color: var(--chip-bg); color: var(--chip-text); border-radius: var(--radius-xl); font-size: 0.875rem; font-weight: var(--font-weight-medium); transition: all var(--transition-fast); text-decoration: none; }
.chip-category-link:hover,
.chip-tag-link:hover,
.chip-category:hover,
.chip-tag:hover,
.chip:hover { background-color: var(--border); color: var(--accent); }
.chip-tag::before,
.chip.tag::before { content: "#"; opacity: 0.7; }
.chip-category::before,
.chip.category::before { content: "📁"; font-size: 0.875em; }
.chip-category svg,
.chip-tag svg { display: none; }
.btn-primary-sm,
.talk-action-link,
.error-home-link { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); border-radius: var(--radius-md); font-weight: var(--font-weight-medium); transition: all var(--transition-fast); border: 0; text-decoration: none; font-size: 0.875rem; background-color: var(--accent); color: var(--accent-contrast); }
.btn-primary-sm:hover,
.talk-action-link:hover,
.error-home-link:hover { background-color: var(--accent-hover); color: var(--accent-contrast); }
.btn-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* Cards and lists. */
.notes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-3); }
.cards-stack { display: grid; gap: var(--space-3); }
.list-stack { background-color: var(--surface); border-radius: var(--radius-lg); padding: var(--space-3); }
.content-card,
.card { display: block; color: var(--text); text-decoration: none; }
.content-card-note,
.content-card-project { height: 100%; }
.content-card-title,
.content-card-title-clamp,
.card-title { font-size: 1.125rem; font-weight: var(--font-weight-semibold); margin-bottom: var(--space-1); color: var(--text-heading); transition: color var(--transition-fast); }
.content-card-title-clamp,
.card-title-clamp { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.content-card:hover .content-card-title,
.content-card:hover .content-card-title-clamp,
.card:hover .card-title-clamp { color: var(--accent); }
.content-card-date,
.card-date,
.entry-link-date { color: var(--muted); font-size: 0.875rem; }
.content-card-date-wrap,
.card-date-wrap { margin-top: var(--space-2); }
.content-card-header,
.card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); }
.card-note,
.card-project { height: 100%; display: flex; flex-direction: column; }
.card-note .card-date-wrap,
.card-project .card-meta { margin-top: auto; }
.content-card-excerpt,
.content-card-excerpt-clamp,
.card-excerpt,
.card-excerpt-clamp { color: var(--text); line-height: var(--line-height-relaxed); }
.content-card-excerpt-clamp,
.card-excerpt-clamp { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.content-card-meta,
.card-meta,
.list-entry-meta { display: flex; gap: var(--space-2); align-items: center; color: var(--muted); font-size: 0.875rem; margin-top: var(--space-2); flex-wrap: wrap; }
.list-chip-group { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.list-entry { display: block; color: inherit; text-decoration: none; }
.list-entry-title { font-size: 1.25rem; font-weight: var(--font-weight-semibold); margin-bottom: var(--space-1); color: var(--text-heading); transition: color var(--transition-fast); }
.list-entry:hover .list-entry-title { color: var(--accent); }
.recent-section-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.section-link { color: var(--accent); font-weight: var(--font-weight-medium); display: inline-flex; align-items: center; gap: 0.25rem; }
.recent-article-list { background-color: var(--surface); border-radius: var(--radius-lg); padding: var(--space-2) var(--space-3); }
.featured-link { display: block; color: inherit; text-decoration: none; }
.featured-title { font-size: 1.5rem; font-weight: var(--font-weight-bold); color: var(--text-heading); }
.featured-label { color: var(--accent); font-size: 0.75rem; font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.05em; display: inline-flex; align-items: center; gap: 0.375rem; margin-bottom: var(--space-1); }
.featured-description { color: var(--text); margin-top: var(--space-1); }
.featured-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); color: var(--muted); margin-top: var(--space-2); font-size: 0.875rem; }
.featured-meta-item { display: inline-flex; align-items: center; gap: 0.375rem; }
.featured-accent { padding: var(--space-3); border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--card-bg) 0%, color-mix(in srgb, var(--accent) 3%, var(--card-bg)) 100%); border: 2px solid var(--accent); }
.entry-link-row { display: flex; align-items: baseline; gap: var(--space-3); color: inherit; text-decoration: none; }
.entry-link-title { color: var(--text-heading); font-weight: var(--font-weight-medium); }
.entry-link-row:hover .entry-link-title { color: var(--accent); }
.related-section,
.related-content { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--border); }
.related-title { font-size: 1.5rem; font-weight: var(--font-weight-semibold); margin-bottom: var(--space-4); color: var(--text-heading); }
.related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--space-3); }

/* Breadcrumb / back link. */
.back-link,
.breadcrumb { display: flex; align-items: center; gap: var(--space-1); font-size: 0.875rem; color: var(--muted); margin-bottom: var(--space-3); }
.back-link:hover,
.breadcrumb-link:hover { color: var(--accent); }
.breadcrumb-link { color: var(--muted); }
.breadcrumb-separator { opacity: 0.5; }
.back-link-icon { flex-shrink: 0; transition: transform var(--transition-fast); }
.back-link:hover .back-link-icon { transform: translateX(-3px); }
[dir="rtl"] .back-link-icon { transform: scaleX(-1); }
[dir="rtl"] .back-link:hover .back-link-icon { transform: scaleX(-1) translateX(-3px); }

/* TOC. */
.toc-sidebar { display: none; }
@media (min-width: 64rem) { .toc-sidebar { display: block; } .toc-mobile, .toc-mobile-wrap { display: none; } }
.toc-nav,
.toc-sidebar .toc { position: sticky; top: 5rem; background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-3); }
.toc-heading,
.toc-title { font-weight: var(--font-weight-semibold); margin-bottom: var(--space-2); color: var(--text-heading); font-size: 1rem; }
.toc-list { list-style: none; padding: 0; margin: 0; }
.toc-list li { margin: 0; }
.toc-link,
.toc-link-l2,
.toc-link-l3 { display: block; padding: var(--space-1); color: var(--text); border-left: 2px solid transparent; padding-left: var(--space-2); transition: all var(--transition-fast); }
.toc-link-l3 { padding-left: var(--space-3); font-size: 0.875rem; }
.toc-link:hover,
.toc-link-l2:hover,
.toc-link-l3:hover { color: var(--accent); background-color: var(--hover-overlay); }
.toc-active,
.toc-link.active { color: var(--accent); border-left-color: var(--accent); background-color: var(--active-overlay); }
.toc-mobile-wrap { margin-bottom: var(--space-3); }
.toc-mobile { margin-bottom: var(--space-3); }
.toc-mobile > summary { cursor: pointer; padding: var(--space-2); background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); font-weight: var(--font-weight-medium); user-select: none; transition: background-color var(--transition-fast); color: var(--text-heading); }
.toc-mobile[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.toc-mobile > summary:hover { background-color: var(--surface-2); }
.toc-mobile > .toc-list { margin-top: var(--space-3); }

/* Markdown/prose. */
.prose-content,
.prose-page,
.prose-article,
.article-content { max-width: 65ch; }
.prose-content,
.prose-page,
.prose-article { color: var(--text); }
.prose-content > * + *,
.prose-page > * + *,
.prose-article > * + *,
.article-content > * + * { margin-top: var(--space-3); }
.prose-content h2,
.prose-page h2,
.prose-article h2,
.article-content h2 { margin-top: var(--space-6); margin-bottom: var(--space-3); }
.prose-content h3,
.prose-page h3,
.prose-article h3,
.article-content h3 { margin-top: var(--space-4); margin-bottom: var(--space-2); }
.prose-content img,
.prose-page img,
.prose-article img,
.article-content img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.prose-content table,
.prose-page table,
.prose-article table,
.article-content table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.prose-content th,
.prose-content td,
.prose-page th,
.prose-page td,
.prose-article th,
.prose-article td,
.article-content th,
.article-content td { border: 1px solid var(--border); padding: var(--space-1) var(--space-2); }
.prose-content th,
.prose-page th,
.prose-article th,
.article-content th { background: var(--surface); text-align: left; }
.prose-content a,
.prose-page a,
.prose-article a,
.article-content a { text-decoration: underline; text-underline-offset: 0.2em; }
.prose-content :not(pre) > code,
.prose-page :not(pre) > code,
.prose-article :not(pre) > code,
.article-content :not(pre) > code { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.875em; background-color: var(--code-surface); color: var(--code-text); padding: 0.125rem 0.375rem; border-radius: var(--radius-sm); }

/* Code copy wrappers generated by enhancements.js. */
.code-block-wrap,
.code-block-wrapper { position: relative; margin: var(--space-3) 0; }
.code-block-header { display: flex; justify-content: space-between; align-items: center; background-color: var(--code-bg); border: 1px solid var(--border); border-bottom: none; border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); padding: var(--space-1) var(--space-2); }
.code-block-lang,
.code-language { font-family: "JetBrains Mono", monospace; font-size: 0.75rem; color: var(--code-accent); text-transform: uppercase; letter-spacing: 0.05em; font-weight: var(--font-weight-semibold); }
.code-copy-btn { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.5rem; background-color: var(--surface-2); color: var(--text); border: 0; border-radius: var(--radius-sm); font-size: 0.75rem; cursor: pointer; transition: all var(--transition-fast); }
.code-copy-btn:hover { background-color: var(--border); }
.code-copy-btn.copied { background-color: color-mix(in srgb, var(--success) 20%, var(--surface-2)); color: var(--success); }
.code-copy-icon { width: 0.875rem; height: 0.875rem; }
.copy-btn .icon-check { display: none; }
.copy-btn.copied .icon-copy { display: none; }
.copy-btn.copied .icon-check { display: block; }
.code-block-pre,
.code-block-wrapper pre,
.code-block-wrap pre { margin: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
.not-prose { max-width: none; }

.copy-link,
.copy-link-btn { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.5rem; background-color: transparent; color: var(--muted); border: 0; border-radius: var(--radius-sm); font-size: 0.875rem; cursor: pointer; transition: all var(--transition-fast); }
.copy-link:hover,
.copy-link-btn:hover { background-color: var(--hover-overlay); color: var(--accent); }
.copy-link.copied,
.copy-link-btn.copied { color: var(--success); }

/* Social and clouds. */
.social-links-wrap,
.social-links { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.social-link-btn,
.social-link { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-width: 2.5rem; min-height: 2.5rem; padding: 0 var(--space-2); background-color: var(--surface-2); border-radius: var(--radius-md); color: var(--text); transition: all var(--transition-fast); }
.social-link-btn:hover,
.social-link:hover { background-color: var(--accent); color: var(--accent-contrast); transform: translateY(-2px); }
.tag-cloud-wrap,
.category-cloud-wrap,
.tag-cloud,
.category-cloud,
.cloud { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.cloud-count { margin-left: 0.125rem; font-size: 0.75rem; opacity: 0.65; }
.cloud-category-lg,
.cloud-category-sm,
.cloud-tag-lg,
.cloud-tag-sm { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.75rem; border-radius: var(--radius-xl); background: var(--chip-bg); color: var(--chip-text); transition: all var(--transition-fast); }
.cloud-category-lg:hover,
.cloud-category-sm:hover,
.cloud-tag-lg:hover,
.cloud-tag-sm:hover { background: var(--border); color: var(--accent); }

/* Pagination and errors. */
.pagination { display: flex; gap: var(--space-2); justify-content: center; align-items: center; margin-top: var(--space-6); flex-wrap: wrap; }
.pagination-btn { padding: var(--space-1) var(--space-2); background-color: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-md); text-decoration: none; transition: all var(--transition-fast); min-width: 2.5rem; text-align: center; }
.pagination-btn:hover:not(:disabled):not(.current) { background-color: var(--border); border-color: var(--accent); }
.pagination-btn.current { background-color: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
.error-page { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; text-align: center; padding: var(--space-4); }
.error-visual { display: contents; }
.error-code { font-size: clamp(5rem, 16vw, 8rem); font-weight: var(--font-weight-bold); color: var(--accent); line-height: 1; margin-bottom: var(--space-2); }
.error-title { font-size: 1.5rem; margin-bottom: var(--space-3); color: var(--text-heading); }
.error-description { color: var(--muted); margin-bottom: var(--space-4); max-width: 40ch; }

/* Reading progress bar. */
#reading-progress,
.reading-progress { position: fixed; top: 0; left: 0; height: 3px; background-color: var(--accent); transform-origin: left; z-index: 999; }
#reading-progress { width: 0%; transition: width 0.1s linear; }
.reading-progress { right: 0; }

/* Accessibility and output modes. */
.skip-link { position: absolute; left: -9999px; z-index: 1000; }
.skip-link:focus { left: 0.5rem; top: 0.5rem; padding: 0.5rem 1rem; background: var(--accent); color: var(--accent-contrast); border-radius: var(--radius-md); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
::-webkit-scrollbar { width: 0.5rem; height: 0.5rem; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-md); }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }
html { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  #reading-progress, .reading-progress { display: none !important; }
}
@media print {
  header, footer, nav, aside, #reading-progress, .reading-progress, .toc-sidebar, [data-noprint] { display: none !important; }
  body { background: white !important; color: black !important; font-size: 12pt; }
  a { color: black !important; text-decoration: underline; }
  pre, blockquote { page-break-inside: avoid; border: 1px solid #ddd; }
  h1, h2, h3 { page-break-after: avoid; }
  img { max-width: 100% !important; }
  .container-content, .container-content-wide { max-width: 100% !important; padding: 0 !important; }
}