/* Base stylesheet: shared theme tokens, components, and desktop/default rules. */

:root {
  color-scheme: light;
  --bg: #f3f6f8;
  --bg-top: #f9fbfd;
  --bg-top-2: #f5f7f9;
  --bg-bottom: #e9eef2;
  --surface: #f9fbfd;
  --panel-bg: #f1f4f7;
  --panel-bg-strong: rgba(241, 244, 247, 0.78);
  --panel-bg-mid: rgba(241, 244, 247, 0.86);
  --panel-bg-soft: rgba(246, 249, 252, 0.86);
  --field-bg: #f8fafc;
  --ink: #2a3238;
  --muted: #6b7782;
  --accent: #86a9c8;
  --accent-dark: #6288ab;
  --entry-link: color-mix(in srgb, var(--accent-dark) 72%, var(--ink) 28%);
  --entry-link-visited: color-mix(in srgb, var(--accent-dark) 56%, var(--muted) 44%);
  --entry-link-hover: color-mix(in srgb, var(--entry-link) 82%, var(--ink) 18%);
  --danger: #b86a6a;
  --danger-strong: #9d5353;
  --shadow: 0 18px 42px rgba(80, 90, 100, 0.16);
  --bg-overlay: rgba(240, 244, 247, 0.85);
  --panel-border: #dbe2ea;
  --tab-active-bg: #e7edf4;
  --entry-font: "Space Grotesk", "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  background-color: var(--bg);
}

body {
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  background: radial-gradient(circle at top left, var(--bg-top) 0%, var(--bg) 45%),
    linear-gradient(140deg, var(--bg-top-2) 0%, var(--bg-bottom) 100%);
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.material-icons,
.material-symbols-outlined {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: normal;
  text-transform: none;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.has-user-bg,
body[data-user-bg="true"] {
  background: linear-gradient(var(--bg-overlay), var(--bg-overlay)),
    var(--user-bg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

body.app-webview-layout,
body.app-webview-layout.has-user-bg,
body.app-webview-layout[data-user-bg="true"] {
  min-height: 100dvh;
  background:
    radial-gradient(circle at top left, var(--bg-top) 0%, var(--bg) 45%),
    linear-gradient(140deg, var(--bg-top-2) 0%, var(--bg-bottom) 100%) !important;
  background-attachment: scroll !important;
}

body.app-webview-layout .page {
  max-width: 100%;
  padding: 14px 12px calc(96px + env(safe-area-inset-bottom, 0px));
}

body.app-webview-layout .layout {
  grid-template-columns: 1fr;
  gap: 14px;
}

body.app-webview-layout .content {
  min-height: calc(100dvh - 120px);
}

body.app-webview-layout .feed,
body.app-webview-layout .posts {
  gap: 14px;
}

body.app-webview-layout .post {
  padding: 16px 18px;
}

body.app-webview-layout .post-menu-panel {
  top: auto;
  bottom: calc(100% + 8px);
  right: 0;
}

body.app-webview-layout.workspace-no-sidebar .sidebar {
  contain: none;
}

body.app-webview-layout.workspace-no-sidebar.panels-open .sidebar-backdrop {
  z-index: 210;
}

body.app-webview-layout.workspace-no-sidebar.panels-open .sidebar {
  z-index: 220;
}

body.app-webview-layout.workspace-no-sidebar .mobile-panels-bar {
  z-index: 230;
}

body.app-webview-layout.workspace-no-sidebar .mobile-panels-bar .settings-menu[open] {
  z-index: 240;
}

body.app-webview-layout.workspace-no-sidebar .mobile-panels-bar .settings-menu-floating .settings-panel {
  position: fixed;
  left: 12px;
  right: 12px;
  top: auto;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  width: auto;
  min-width: 0;
  max-width: none;
  max-height: min(72dvh, 560px);
  z-index: 250;
}

body.public-page[data-user-bg="true"] {
  --bg-overlay: rgba(0, 0, 0, 0.18);
}

body[data-font="caveat"] {
  --entry-font: "Caveat", "Comic Sans MS", cursive;
}

body[data-font="kalam"] {
  --entry-font: "Kalam", "Comic Sans MS", cursive;
}

body[data-font="patrick-hand"] {
  --entry-font: "Patrick Hand", "Comic Sans MS", cursive;
}

body[data-font="handlee"] {
  --entry-font: "Handlee", "Comic Sans MS", cursive;
}

body[data-font="shadows-into-light"] {
  --entry-font: "Shadows Into Light", "Comic Sans MS", cursive;
}

body[data-font="roboto"] {
  --entry-font: "Roboto", "Segoe UI", sans-serif;
}

body[data-font="roboto-condensed"] {
  --entry-font: "Roboto Condensed", "Segoe UI", sans-serif;
}

body[data-font="google-sans-code"] {
  --entry-font: "Google Sans Code", "JetBrains Mono", "Consolas", monospace;
}

body[data-font="open-sans"] {
  --entry-font: "Open Sans", "Segoe UI", sans-serif;
}

body[data-font="montserrat"] {
  --entry-font: "Montserrat", "Segoe UI", sans-serif;
}

body[data-font="jura"] {
  --entry-font: "Jura", "Segoe UI", sans-serif;
}

body[data-font="jost"] {
  --entry-font: "Jost", "Segoe UI", sans-serif;
}

body[data-font="quintessential"] {
  --entry-font: "Quintessential", "Times New Roman", serif;
}

body[data-font="condiment"] {
  --entry-font: "Condiment", "Times New Roman", cursive;
}

body[data-font="grape-nuts"] {
  --entry-font: "Grape Nuts", "Comic Sans MS", cursive;
}

body[data-font="vujahday-script"] {
  --entry-font: "Vujahday Script", "Comic Sans MS", cursive;
}

body[data-font="mansalva"] {
  --entry-font: "Mansalva", "Comic Sans MS", cursive;
}

body[data-font="indie-flower"] {
  --entry-font: "Indie Flower", "Comic Sans MS", cursive;
}

body[data-font="orbitron"] {
  --entry-font: "Orbitron", "Segoe UI", sans-serif;
}

body[data-font="geo"] {
  --entry-font: "Geo", "Segoe UI", sans-serif;
}

body[data-font="jim-nightshade"] {
  --entry-font: "Jim Nightshade", "Times New Roman", cursive;
}

body[data-theme="apricot"] {
  --bg: #f6dec2;
  --bg-top: #ffedcf;
  --bg-top-2: #ffe4c0;
  --bg-bottom: #e7b88f;
  --surface: #fff0dc;
  --panel-bg: #f6dfc2;
  --panel-bg-strong: rgba(246, 223, 194, 0.8);
  --panel-bg-mid: rgba(246, 223, 194, 0.9);
  --panel-bg-soft: rgba(252, 238, 220, 0.9);
  --field-bg: #ffecd5;
  --ink: #2f1d10;
  --muted: #806249;
  --accent: #de6f1a;
  --accent-dark: #b2540f;
  --danger: #c85a47;
  --danger-strong: #a74333;
  --shadow: 0 20px 48px rgba(143, 77, 26, 0.24);
  --bg-overlay: rgba(246, 222, 194, 0.86);
  --panel-border: #e5bf95;
  --tab-active-bg: #f9d9b3;
}

body[data-theme="blue-night"] {
  --bg: #0f1b2a;
  --bg-top: #1a2a3d;
  --bg-top-2: #142233;
  --bg-bottom: #0b1420;
  --surface: #162433;
  --panel-bg: #18283a;
  --panel-bg-strong: rgba(22, 36, 51, 0.78);
  --panel-bg-mid: rgba(22, 36, 51, 0.86);
  --panel-bg-soft: rgba(22, 36, 51, 0.86);
  --field-bg: #203246;
  --ink: #f0f5fb;
  --muted: #a9b7c6;
  --accent: #6aa7ff;
  --accent-dark: #3c7edb;
  --danger: #ffb4b4;
  --danger-strong: #ff8e8e;
  --shadow: 0 22px 50px rgba(7, 12, 20, 0.55);
  --bg-overlay: rgba(10, 18, 28, 0.7);
  color-scheme: dark;
}
body[data-theme="soft-sage"] {
  --bg: #dee9df;
  --bg-top: #ecf5ee;
  --bg-top-2: #e5f0e7;
  --bg-bottom: #cddccf;
  --surface: #f2f8f3;
  --panel-bg: #e6f0e7;
  --panel-bg-strong: rgba(230, 240, 231, 0.78);
  --panel-bg-mid: rgba(230, 240, 231, 0.9);
  --panel-bg-soft: rgba(239, 247, 241, 0.9);
  --field-bg: #eff6f0;
  --ink: #1e3028;
  --muted: #597064;
  --accent: #4d8f72;
  --accent-dark: #356e56;
  --danger: #ad5a58;
  --danger-strong: #8e4746;
  --shadow: 0 20px 48px rgba(52, 84, 67, 0.2);
  --bg-overlay: rgba(222, 233, 223, 0.86);
  --panel-border: #c8d9cc;
  --tab-active-bg: #ddeade;
}
body[data-theme="sex-on-the-beach"] {
  --bg: #f0c8d8;
  --bg-top: #f7d8e6;
  --bg-top-2: #f2cfdf;
  --bg-bottom: #dd9fba;
  --surface: #f8e0eb;
  --panel-bg: #f1cedf;
  --panel-bg-strong: rgba(241, 206, 223, 0.82);
  --panel-bg-mid: rgba(241, 206, 223, 0.9);
  --panel-bg-soft: rgba(247, 224, 236, 0.9);
  --field-bg: #f6dbe8;
  --ink: #351a2a;
  --muted: #7f5670;
  --accent: #c34682;
  --accent-dark: #9b2f65;
  --danger: #b63d66;
  --danger-strong: #922f52;
  --shadow: 0 20px 44px rgba(141, 64, 106, 0.25);
  --bg-overlay: rgba(240, 200, 216, 0.86);
  --panel-border: #d9a8c1;
  --tab-active-bg: #e6bbd1;
}
body[data-theme="parchment-ink"] {
  --bg: #f1e4cc;
  --bg-top: #f8eedb;
  --bg-top-2: #f3e7d1;
  --bg-bottom: #e5d3b6;
  --surface: #f9f0de;
  --panel-bg: #f1e4cc;
  --panel-bg-strong: rgba(241, 228, 204, 0.8);
  --panel-bg-mid: rgba(241, 228, 204, 0.9);
  --panel-bg-soft: rgba(247, 238, 220, 0.9);
  --field-bg: #f6ecd9;
  --ink: #221a14;
  --muted: #6a5848;
  --accent: #8b5a2b;
  --accent-dark: #6a421f;
  --danger: #a44d46;
  --danger-strong: #843932;
  --shadow: 0 18px 42px rgba(115, 89, 62, 0.2);
  --bg-overlay: rgba(241, 228, 204, 0.86);
  --panel-border: #d9c2a0;
  --tab-active-bg: #e9d5b6;
}

body[data-theme="fog-overcast"] {
  --bg: #d8dee5;
  --bg-top: #e8edf2;
  --bg-top-2: #dfe5ec;
  --bg-bottom: #c5ced8;
  --surface: #edf1f6;
  --panel-bg: #dde5ed;
  --panel-bg-strong: rgba(221, 229, 237, 0.8);
  --panel-bg-mid: rgba(221, 229, 237, 0.9);
  --panel-bg-soft: rgba(236, 242, 247, 0.9);
  --field-bg: #eaf0f5;
  --ink: #24303d;
  --muted: #5d6b79;
  --accent: #5f7d99;
  --accent-dark: #43607a;
  --danger: #9e5b59;
  --danger-strong: #814443;
  --shadow: 0 18px 42px rgba(66, 82, 98, 0.22);
  --bg-overlay: rgba(216, 222, 229, 0.86);
  --panel-border: #c3ceda;
  --tab-active-bg: #cedae6;
}

body[data-theme="forest-floor"] {
  --bg: #d9dfc9;
  --bg-top: #e8ecd9;
  --bg-top-2: #dfe6d0;
  --bg-bottom: #c8cfb3;
  --surface: #eef1e3;
  --panel-bg: #e0e6cf;
  --panel-bg-strong: rgba(224, 230, 207, 0.8);
  --panel-bg-mid: rgba(224, 230, 207, 0.9);
  --panel-bg-soft: rgba(236, 241, 224, 0.9);
  --field-bg: #e8eed9;
  --ink: #253023;
  --muted: #5e6a52;
  --accent: #6c7f3e;
  --accent-dark: #4e6130;
  --danger: #9a574b;
  --danger-strong: #7a433a;
  --shadow: 0 18px 42px rgba(79, 93, 62, 0.22);
  --bg-overlay: rgba(217, 223, 201, 0.86);
  --panel-border: #c2ccaa;
  --tab-active-bg: #d3ddb9;
}

body[data-theme="ember"] {
  --bg: #15110f;
  --bg-top: #1f1714;
  --bg-top-2: #1a1412;
  --bg-bottom: #0f0b0a;
  --surface: #201815;
  --panel-bg: #241b18;
  --panel-bg-strong: rgba(32, 24, 21, 0.78);
  --panel-bg-mid: rgba(32, 24, 21, 0.86);
  --panel-bg-soft: rgba(36, 27, 24, 0.86);
  --field-bg: #2a201c;
  --ink: #f5e9e1;
  --muted: #bfaea3;
  --accent: #e38b5d;
  --accent-dark: #c76f42;
  --danger: #f1a1a1;
  --danger-strong: #e07f7f;
  --shadow: 0 22px 48px rgba(0, 0, 0, 0.6);
  --bg-overlay: rgba(14, 10, 9, 0.72);
  color-scheme: dark;
}

body[data-theme="morning-paper"] {
  --bg: #f5f6f2;
  --bg-top: #ffffff;
  --bg-top-2: #f9faf6;
  --bg-bottom: #e8ebe2;
  --surface: #fffffc;
  --panel-bg: #f2f4ed;
  --panel-bg-strong: rgba(242, 244, 237, 0.8);
  --panel-bg-mid: rgba(242, 244, 237, 0.9);
  --panel-bg-soft: rgba(250, 251, 247, 0.9);
  --field-bg: #fcfdf9;
  --ink: #22282d;
  --muted: #66717b;
  --accent: #3f6a9a;
  --accent-dark: #2d4e74;
  --danger: #a75959;
  --danger-strong: #864343;
  --shadow: 0 18px 42px rgba(88, 95, 103, 0.16);
  --bg-overlay: rgba(245, 246, 242, 0.86);
  --panel-border: #dce1d6;
  --tab-active-bg: #ebefe4;
}

body[data-theme="sepia-memory"] {
  --bg: #dcc9b3;
  --bg-top: #e7d7c2;
  --bg-top-2: #dfceb9;
  --bg-bottom: #bfa78f;
  --surface: #e9d8c4;
  --panel-bg: #dbc7b0;
  --panel-bg-strong: rgba(219, 199, 176, 0.82);
  --panel-bg-mid: rgba(219, 199, 176, 0.9);
  --panel-bg-soft: rgba(232, 216, 197, 0.9);
  --field-bg: #e6d4bf;
  --ink: #32241a;
  --muted: #705a4a;
  --accent: #7f5639;
  --accent-dark: #5f3f2a;
  --danger: #96554b;
  --danger-strong: #784037;
  --shadow: 0 18px 42px rgba(88, 64, 47, 0.26);
  --bg-overlay: rgba(220, 201, 179, 0.86);
  --panel-border: #bea58d;
  --tab-active-bg: #cfb79d;
}

body[data-theme="dark-slate"] {
  --bg: #111417;
  --bg-top: #1a1f24;
  --bg-top-2: #151a1e;
  --bg-bottom: #0b0e12;
  --surface: #1b2228;
  --panel-bg: #1f2730;
  --panel-bg-strong: rgba(28, 34, 41, 0.8);
  --panel-bg-mid: rgba(28, 34, 41, 0.86);
  --panel-bg-soft: rgba(30, 38, 45, 0.86);
  --field-bg: #24303a;
  --ink: #f1f5f7;
  --muted: #a9b0b6;
  --accent: #8bc0d9;
  --accent-dark: #5ea4c7;
  --danger: #ffb0b0;
  --danger-strong: #e38686;
  --shadow: 0 22px 48px rgba(0, 0, 0, 0.6);
  --bg-overlay: rgba(12, 15, 19, 0.72);
  --panel-border: #2a333c;
  --tab-active-bg: #202934;
  color-scheme: dark;
}

body[data-theme="asphalt-dreams"] {
  --bg: #1f2328;
  --bg-top: #2a2f35;
  --bg-top-2: #252a30;
  --bg-bottom: #16191d;
  --surface: #2a3037;
  --panel-bg: #313841;
  --panel-bg-strong: rgba(49, 56, 65, 0.82);
  --panel-bg-mid: rgba(49, 56, 65, 0.9);
  --panel-bg-soft: rgba(57, 66, 76, 0.9);
  --field-bg: #3a434d;
  --ink: #edf1f4;
  --muted: #b0b7be;
  --accent: #9ba6b2;
  --accent-dark: #c3ccd4;
  --danger: #e8a2a2;
  --danger-strong: #d27c7c;
  --shadow: 0 22px 48px rgba(0, 0, 0, 0.58);
  --bg-overlay: rgba(20, 23, 27, 0.74);
  --panel-border: #46505b;
  --tab-active-bg: #353d47;
  color-scheme: dark;
}

body[data-theme="dark-amaranth"] {
  --bg: #160d13;
  --bg-top: #25131c;
  --bg-top-2: #1e1118;
  --bg-bottom: #0f080d;
  --surface: #2a1520;
  --panel-bg: #311927;
  --panel-bg-strong: rgba(49, 25, 39, 0.8);
  --panel-bg-mid: rgba(49, 25, 39, 0.88);
  --panel-bg-soft: rgba(57, 30, 45, 0.9);
  --field-bg: #3a2130;
  --ink: #f6e9ef;
  --muted: #c8aeb8;
  --accent: #9c528b;
  --accent-dark: #e39774;
  --danger: #f1b2a2;
  --danger-strong: #db8f79;
  --shadow: 0 22px 50px rgba(9, 4, 8, 0.62);
  --bg-overlay: rgba(20, 10, 16, 0.74);
  --panel-border: #7d4e57;
  --tab-active-bg: #4a2637;
  color-scheme: dark;
}

body[data-theme="grape-soda"] {
  --bg: #201326;
  --bg-top: #312036;
  --bg-top-2: #28182e;
  --bg-bottom: #160d1b;
  --surface: #35233a;
  --panel-bg: #3f2a46;
  --panel-bg-strong: rgba(63, 42, 70, 0.82);
  --panel-bg-mid: rgba(63, 42, 70, 0.9);
  --panel-bg-soft: rgba(72, 50, 79, 0.9);
  --field-bg: #4a3352;
  --ink: #f4ebf8;
  --muted: #c9b9d0;
  --accent: #769fb6;
  --accent-dark: #bbbac6;
  --danger: #e8a7b0;
  --danger-strong: #cf7d89;
  --shadow: 0 22px 50px rgba(10, 5, 13, 0.62);
  --bg-overlay: rgba(24, 14, 29, 0.74);
  --panel-border: #7d4e57;
  --tab-active-bg: #4c3454;
  color-scheme: dark;
}

body[data-theme="steel-blue"] {
  --bg: #d8e3ea;
  --bg-top: #e7eff3;
  --bg-top-2: #dde8ee;
  --bg-bottom: #c6d5de;
  --surface: #eef4f7;
  --panel-bg: #dee9ef;
  --panel-bg-strong: rgba(222, 233, 239, 0.82);
  --panel-bg-mid: rgba(222, 233, 239, 0.9);
  --panel-bg-soft: rgba(240, 246, 250, 0.9);
  --field-bg: #ebf2f6;
  --ink: #243845;
  --muted: #5c7484;
  --accent: #7d4e57;
  --accent-dark: #7d1d3f;
  --danger: #9d5763;
  --danger-strong: #7d4250;
  --shadow: 0 18px 42px rgba(70, 98, 116, 0.2);
  --bg-overlay: rgba(216, 227, 234, 0.86);
  --panel-border: #b9ceda;
  --tab-active-bg: #ccdde7;
}

body[data-theme="pale-slate"] {
  --bg: #e5e4eb;
  --bg-top: #f1f0f5;
  --bg-top-2: #eae9ef;
  --bg-bottom: #d4d3de;
  --surface: #f5f4f8;
  --panel-bg: #ebeaf1;
  --panel-bg-strong: rgba(235, 234, 241, 0.82);
  --panel-bg-mid: rgba(235, 234, 241, 0.9);
  --panel-bg-soft: rgba(244, 243, 248, 0.9);
  --field-bg: #f1f0f6;
  --ink: #2f3240;
  --muted: #666979;
  --accent: #769fb6;
  --accent-dark: #5f869d;
  --danger: #9a5f6b;
  --danger-strong: #7f4d57;
  --shadow: 0 18px 42px rgba(88, 88, 103, 0.18);
  --bg-overlay: rgba(229, 228, 235, 0.86);
  --panel-border: #cbc9d5;
  --tab-active-bg: #dddce7;
}

body[data-theme="smoky-rose"] {
  --bg: #d8c8ce;
  --bg-top: #e6d9de;
  --bg-top-2: #ddd0d5;
  --bg-bottom: #c2adb4;
  --surface: #e9dce1;
  --panel-bg: #dcccd2;
  --panel-bg-strong: rgba(220, 204, 210, 0.82);
  --panel-bg-mid: rgba(220, 204, 210, 0.9);
  --panel-bg-soft: rgba(234, 223, 228, 0.9);
  --field-bg: #e5d7dc;
  --ink: #332228;
  --muted: #735b64;
  --accent: #7d1d3f;
  --accent-dark: #5f1731;
  --danger: #a45d69;
  --danger-strong: #844a55;
  --shadow: 0 19px 44px rgba(94, 66, 76, 0.24);
  --bg-overlay: rgba(216, 200, 206, 0.86);
  --panel-border: #c7aeb7;
  --tab-active-bg: #ceb6be;
}

body[data-theme="tangerine-dream"] {
  --bg: #f0d2c3;
  --bg-top: #f6e1d7;
  --bg-top-2: #f2d8cb;
  --bg-bottom: #dfb194;
  --surface: #f7e7de;
  --panel-bg: #f0d6c8;
  --panel-bg-strong: rgba(240, 214, 200, 0.82);
  --panel-bg-mid: rgba(240, 214, 200, 0.9);
  --panel-bg-soft: rgba(247, 229, 219, 0.9);
  --field-bg: #f5e0d5;
  --ink: #3a251d;
  --muted: #815f51;
  --accent: #7d4e57;
  --accent-dark: #7d1d3f;
  --danger: #b76854;
  --danger-strong: #974f3d;
  --shadow: 0 20px 46px rgba(146, 91, 64, 0.24);
  --bg-overlay: rgba(240, 210, 195, 0.86);
  --panel-border: #d9b39e;
  --tab-active-bg: #e8c4af;
}

.page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 24px 64px;
  width: 100%;
  flex: 1;
}

.layout {
  display: grid;
  grid-template-columns: minmax(200px, 300px) minmax(0, 1fr);
  gap: 32px;
}

body.no-sidebar .layout {
  grid-template-columns: 1fr;
}

body.no-sidebar .sidebar {
  display: none;
}

body.workspace-no-sidebar .layout {
  grid-template-columns: 1fr;
}

body.workspace-no-sidebar .sidebar {
  display: flex;
  position: fixed;
  top: 0;
  right: auto;
  bottom: 0;
  left: 0;
  width: min(360px, 88vw);
  height: 100vh;
  max-width: none;
  max-height: none;
  overflow-y: auto;
  padding: 20px 14px 28px;
  border-radius: 0;
  background: var(--panel-bg-strong);
  box-shadow: var(--shadow);
  z-index: 90;
  gap: 16px;
  transform: translateX(-102%);
  transition: transform 0.2s ease;
  pointer-events: none;
  visibility: hidden;
  will-change: transform;
  contain: layout paint;
}

body.workspace-no-sidebar .mobile-panels-bar {
  display: flex;
  position: fixed;
  right: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  margin: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  z-index: 95;
}

body.workspace-no-sidebar .mobile-panels-bar .mobile-panels-trigger {
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

body.workspace-no-sidebar .mobile-panels-bar .settings-menu-floating .settings-panel {
  top: auto;
  bottom: calc(100% + 10px);
  right: 0;
}

body.workspace-no-sidebar .sidebar .card[data-panel="mode"] {
  display: none !important;
}

body.workspace-no-sidebar.panels-open .sidebar-backdrop {
  display: block;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(10, 12, 16, 0.45);
  z-index: 80;
}

body.workspace-no-sidebar.panels-open .sidebar {
  display: flex;
  position: fixed;
  top: 0;
  right: auto;
  bottom: 0;
  left: 0;
  width: min(360px, 88vw);
  height: 100vh;
  max-width: none;
  max-height: none;
  overflow-y: auto;
  padding: 20px 14px 28px;
  border-radius: 0;
  background: var(--panel-bg-strong);
  box-shadow: var(--shadow);
  z-index: 90;
  gap: 16px;
  transform: translateX(0);
  pointer-events: auto;
  visibility: visible;
}

body.workspace-no-sidebar.panels-open .sidebar .card[data-panel] {
  padding: 0;
  background: transparent;
  box-shadow: none;
}

body.workspace-no-sidebar.panels-open .sidebar .card[data-panel] > .collapsible {
  box-shadow: none;
  border: none;
  background: color-mix(in srgb, var(--field-bg) 86%, var(--panel-bg) 14%);
}

body.workspace-no-sidebar.panels-open {
  overflow: hidden;
}
body.workspace-no-sidebar.panels-open .mobile-panels-bar {
  display: flex;
}

.page.info-page .layout {
  grid-template-columns: 1fr;
}

.page.info-page .sidebar {
  display: none;
}

.mobile-panels-bar {
  display: none;
  justify-content: flex-end;
  margin-bottom: 16px;
}

body.workspace-no-sidebar .mobile-panels-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.sidebar-backdrop {
  display: none;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 24px;
  align-self: start;
  --sidebar-pad-x: 14px;
  --sidebar-head-pad-x: 11px;
  --sidebar-collapsible-pad-x: 11px;
  --sidebar-inline-pad-x: 8px;
  --sidebar-login-inline-pad-x: 3px;
  --sidebar-chip-pad-x: 9px;
}

.sidebar-head {
  background: var(--panel-bg);
  border-radius: 22px;
  padding: 20px 22px;
  border: none;
  box-shadow: var(--shadow);
}

.sidebar .sidebar-head {
  padding: var(--sidebar-head-pad-x);
}

.sidebar .card {
  padding: var(--sidebar-pad-x);
}

.sidebar .collapsible {
  padding-left: var(--sidebar-collapsible-pad-x);
  padding-right: var(--sidebar-collapsible-pad-x);
}

.sidebar .inline-collapsible {
  padding: var(--sidebar-inline-pad-x);
}

.sidebar .login-box .inline-collapsible {
  padding: var(--sidebar-login-inline-pad-x);
}

.sidebar .user-chip {
  padding: var(--sidebar-chip-pad-x);
  background: transparent;
}

.sidebar .collapsible summary {
  padding-top: var(--sidebar-collapsible-pad-x);
  padding-bottom: var(--sidebar-collapsible-pad-x);
}

.sidebar .collapsible[open] {
  padding-bottom: var(--sidebar-collapsible-pad-x);
}

.sidebar .inline-collapsible summary {
  padding-top: var(--sidebar-inline-pad-x);
  padding-bottom: var(--sidebar-inline-pad-x);
}

.sidebar .inline-collapsible[open] {
  padding-bottom: var(--sidebar-inline-pad-x);
}

.sidebar .login-box .inline-collapsible summary {
  padding-top: var(--sidebar-login-inline-pad-x);
  padding-bottom: var(--sidebar-login-inline-pad-x);
}

.sidebar .login-box .inline-collapsible[open] {
  padding-bottom: var(--sidebar-login-inline-pad-x);
}

.content {
  min-height: 60vh;
}

body.focus-writing .layout {
  grid-template-columns: 1fr;
}

body.focus-writing .sidebar,
body.focus-writing .feed,
body.focus-writing .mobile-panels-bar,
body.focus-writing .site-footer {
  display: none;
}

body.focus-writing .composer-panel {
  max-width: 100%;
  margin: 0 auto;
}

body:not(.focus-writing) #focus-toggle {
  display: none;
}

body.reading-mode .layout {
  grid-template-columns: 1fr;
}

body.reading-mode .sidebar,
body.reading-mode .composer-panel,
body.reading-mode .mobile-panels-bar,
body.reading-mode .site-footer {
  display: none;
}

body.reading-mode #read-toggle {
  display: none;
}

html.chain-board-open,
body.chain-board-open {
  overflow: hidden;
  overscroll-behavior: none;
}

.mode-toggle {
  display: flex;
  gap: 12px;
}

.mode-toggle .mode-button {
  flex: 1;
}

.mode-card {
  cursor: grab;
  touch-action: none;
}

.mode-card.dragging {
  opacity: 0.6;
}

.floating-nav {
  position: fixed;
  right: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 45;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}

.floating-nav-button {
  min-width: 128px;
  justify-content: center;
  backdrop-filter: blur(10px);
}

.floating-nav .read-exit {
  display: none;
}

body.reading-mode .floating-nav .read-exit,
body.focus-writing .floating-nav .read-exit {
  display: inline-flex;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.75rem;
  color: var(--accent-dark);
  font-weight: 600;
}

h1,
h2 {
  font-family: "Fraunces", "Times New Roman", serif;
}

h1 {
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  margin: 8px 0 12px;
}

.subhead {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.6;
}

.user-chip {
  background: var(--surface);
  border-radius: 18px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: none;
}

.login-campaign-chip {
  margin-top: 0;
  align-items: flex-start;
}

.login-question-chip {
  margin-top: 0;
  align-items: flex-start;
}

.login-question-chip > div {
  width: 100%;
  min-width: 0;
}

.login-question-chip .question-chip-label {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.login-question-chip .question-chip-text {
  margin: 6px 0 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--ink);
}

.question-chip-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.login-question-chip .question-chip-actions {
  margin-top: 20px;
  width: 100%;
}

.login-question-chip .question-chip-actions .ghost-button {
  flex: 1 1 100%;
  width: 100%;
  justify-content: center;
  text-align: center;
}

.login-campaign-chip .campaign-chip-code {
  margin: 0;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.login-campaign-chip .campaign-chip-note,
.login-campaign-chip .campaign-chip-quota {
  margin: 4px 0 0;
  font-size: 0.84rem;
  line-height: 1.35;
  color: var(--muted);
}

.login-campaign-chip .campaign-chip-quota {
  margin-top: 2px;
  color: var(--accent-dark);
  font-weight: 600;
}

.user-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.user-row .user-chip {
  flex: 1 1 0;
  min-width: 0;
}

.user-name,
.user-email {
  word-break: break-word;
}

.user-chip img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
}

.user-name {
  font-weight: 600;
}

.user-email {
  font-size: 0.9rem;
  color: var(--muted);
}

.link-button {
  margin-left: auto;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}

.account-actions {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.settings-menu {
  position: relative;
}

.settings-menu[open] {
  z-index: 60;
}

.settings-menu summary::-webkit-details-marker {
  display: none;
}

.settings-trigger {
  list-style: none;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: none;
  background: var(--field-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-dark);
  transition: transform 0.2s ease;
}

.settings-trigger svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.settings-trigger:hover {
  transform: translateY(-1px);
}

.notification-trigger {
  position: relative;
}

.notification-link-trigger {
  text-decoration: none;
}

.notification-unread {
  position: absolute;
  top: -4px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0 4px;
  line-height: 1;
}

.notification-unread-inline {
  position: static;
  top: auto;
  right: auto;
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: 0.7rem;
  flex: 0 0 auto;
}

.notification-panel {
  width: min(86vw, 360px);
  min-width: 280px;
}

.influence-list {
  display: grid;
  gap: 10px;
  max-height: min(45vh, 360px);
  overflow: auto;
  padding-right: 4px;
}

.influence-list[hidden] {
  display: none !important;
}

.influence-item {
  border: 1px solid color-mix(in srgb, var(--panel-border) 80%, transparent);
  background: color-mix(in srgb, var(--panel-bg-soft) 86%, transparent);
  border-radius: 10px;
  padding: 10px 11px;
  display: grid;
  gap: 7px;
}

.influence-item.is-unread {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--panel-border));
  background: color-mix(in srgb, var(--accent) 11%, var(--panel-bg-soft));
}

.influence-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.influence-text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  flex: 1 1 auto;
}

.influence-dismiss {
  border: none;
  background: transparent;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background 0.2s ease, color 0.2s ease;
}

.influence-dismiss:hover {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--ink);
}

.influence-dismiss .material-symbols-outlined {
  font-size: 17px;
  line-height: 1;
}

.influence-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 0.78rem;
}

.influence-link {
  color: var(--accent-dark);
  text-decoration: none;
}

.influence-link:hover {
  text-decoration: underline;
}

.influence-links {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.influence-message-body {
  border: 1px solid color-mix(in srgb, var(--panel-border) 82%, transparent);
  background: color-mix(in srgb, var(--field-bg) 88%, #ffffff 12%);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.86rem;
  line-height: 1.45;
}

.influence-message-body p {
  margin: 0;
}

.influence-link-button {
  border: none;
  background: transparent;
  color: var(--accent-dark);
  font: inherit;
  font-size: 0.78rem;
  padding: 0;
  text-decoration: underline;
  cursor: pointer;
}

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

.influence-link-button-danger {
  color: #a93b3b;
}

.influence-link-button-danger:hover {
  color: #822b2b;
}

.influence-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.influence-actions-secondary {
  margin-bottom: 4px;
}

.influence-actions .settings-link {
  justify-content: center;
  background: var(--field-bg);
  border: 1px solid color-mix(in srgb, var(--panel-border) 90%, transparent);
  width: auto;
}

.settings-link[data-influence-view].is-active {
  background: color-mix(in srgb, var(--accent) 16%, var(--field-bg));
  border-color: color-mix(in srgb, var(--accent) 38%, var(--panel-border));
}

.notifications-center {
  display: grid;
  gap: 14px;
}

.notifications-center-content {
  grid-column: 1 / -1;
}

.notifications-center-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.notifications-center-head h2 {
  margin: 0;
  font-size: clamp(1.2rem, 2vw, 1.45rem);
}

.notifications-center-unread {
  position: static;
  min-width: 24px;
  height: 24px;
  font-size: 0.74rem;
  padding: 0 6px;
}

.notifications-center-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.notifications-center-tabs.tab-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 0;
}

.notifications-center .notifications-tab-btn.tab-button {
  border: none;
  background: transparent;
  padding: 6px 0 10px;
  border-radius: 0;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.notifications-center-tools {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  justify-content: flex-end;
  margin-left: 0;
}

.notifications-center .notifications-tool-btn {
  width: auto;
  white-space: nowrap;
  min-width: 132px;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--panel-border) 90%, transparent);
  background: color-mix(in srgb, var(--panel-bg-soft) 78%, transparent);
}

.notifications-center .notifications-tab-btn.tab-button.active,
.notifications-center .notifications-tab-btn.tab-button.is-active {
  background: transparent;
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.notifications-center-list {
  max-height: none;
  min-height: clamp(260px, 52vh, 620px);
  align-content: start;
}

.notifications-center .influence-item {
  padding: 12px 13px;
  gap: 9px;
}

.ignore-users-panel {
  border: 1px solid color-mix(in srgb, var(--panel-border) 84%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel-bg-soft) 84%, transparent);
  padding: 12px;
  display: grid;
  gap: 10px;
}

.ignore-users-panel[hidden] {
  display: none !important;
}

.ignore-users-panel h3 {
  margin: 0;
  font-size: 1rem;
}

.ignore-users-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.ignore-users-search-results,
.ignore-users-list {
  display: grid;
  gap: 8px;
}

.ignore-user-item {
  border: 1px solid color-mix(in srgb, var(--panel-border) 82%, transparent);
  border-radius: 10px;
  background: var(--field-bg);
  padding: 9px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ignore-user-label {
  font-size: 0.88rem;
  color: var(--ink);
  line-height: 1.35;
}

.thought-tree-content {
  grid-column: 1 / -1;
}

.thought-tree-card {
  display: grid;
  gap: 14px;
}

.thought-tree-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.thought-tree-head h2 {
  margin: 0;
  font-size: clamp(1.25rem, 2.1vw, 1.58rem);
}

.thought-tree-head-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.thought-tree-root-line {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
}

.thought-tree-shell {
  display: grid;
  gap: 12px;
}

.thought-tree-status {
  margin: 0;
}

.thought-tree-levels {
  display: grid;
  gap: 14px;
}

.thought-tree-limit {
  margin: 0;
}

.thought-tree-level {
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--panel-border) 88%, transparent);
  background: color-mix(in srgb, var(--panel-bg-soft) 64%, transparent);
  padding: 13px;
  display: grid;
  gap: 10px;
}

.thought-tree-level-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.thought-tree-level-head h3 {
  margin: 0;
  font-size: 1.02rem;
}

.thought-tree-level-head p {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.thought-tree-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.thought-branch-card {
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--panel-border) 84%, transparent);
  background: var(--field-bg);
  padding: 12px;
  display: grid;
  gap: 8px;
}

.thought-branch-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 0.77rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.thought-branch-title {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.35;
}

.thought-branch-title a {
  color: var(--ink);
  text-decoration: none;
}

.thought-branch-title a:hover {
  text-decoration: underline;
}

.thought-branch-author {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.thought-branch-parents {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.thought-branch-parents a {
  color: var(--accent-dark);
  text-decoration: none;
}

.thought-branch-parents a:hover {
  text-decoration: underline;
}

.thought-branch-missing {
  margin: 0;
  color: var(--accent-dark);
  font-size: 0.8rem;
  font-weight: 600;
}

.thought-branch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.thought-branch-actions .ghost-button {
  min-height: 34px;
  padding: 6px 11px;
  font-size: 0.82rem;
}

.settings-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  background: var(--panel-bg-strong);
  border: none;
  border-radius: 16px;
  padding: 14px;
  display: grid;
  gap: 12px;
  min-width: 260px;
  width: min(78vw, 320px);
  max-height: min(70vh, 520px);
  overflow: auto;
  box-shadow: var(--shadow);
  z-index: 60;
  backdrop-filter: blur(12px);
}

.settings-menu[open] .settings-panel {
  animation: settingsPanelIn 0.16s ease;
}

.settings-panel {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent) 45%, transparent)
    color-mix(in srgb, var(--panel-bg) 70%, transparent);
}

.settings-panel::-webkit-scrollbar {
  width: 10px;
}

.settings-panel::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--panel-bg) 70%, transparent);
  border-radius: 999px;
}

.settings-panel::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--panel-bg) 80%, transparent);
}

.settings-panel::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--accent) 65%, transparent);
}

@keyframes settingsPanelIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.settings-section {
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: 12px;
  background: var(--panel-bg-soft);
  border: none;
}

.settings-section-title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
  font-weight: 600;
}

.settings-section-danger {
  border-color: color-mix(in srgb, var(--danger) 40%, var(--panel-border));
  background: color-mix(in srgb, var(--panel-bg-soft) 85%, var(--danger) 15%);
}

.settings-link {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  padding: 8px 10px;
  border-radius: 10px;
  transition: background 0.2s ease, border-color 0.2s ease;
  border: none;
  background: transparent;
  text-align: left;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  white-space: nowrap;
}

.settings-link-icon {
  font-size: 18px;
  line-height: 1;
  flex: 0 0 auto;
}

.settings-link-icon-image {
  width: 18px;
  height: 18px;
  display: block;
  flex: 0 0 auto;
}

  .settings-link:hover {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border-color: color-mix(in srgb, var(--accent) 22%, transparent);
  }

  .settings-link:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
    outline-offset: 2px;
  }

  .settings-form {
    display: grid;
    gap: 6px;
    margin-top: 4px;
  }

  .settings-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--muted);
    font-weight: 600;
  }

  .settings-input {
    border: none;
    border-radius: 10px;
    padding: 6px 8px;
    background: var(--field-bg);
    color: var(--ink);
    font-size: 0.85rem;
  }

.settings-danger-link {
  color: var(--danger);
}

.settings-link.settings-link-danger {
  color: var(--danger);
}

.settings-link.settings-link-danger .settings-link-icon {
  color: inherit;
}

.settings-divider {
  height: 1px;
  background: #eadfd6;
}

.settings-group {
  display: grid;
  gap: 8px;
}

.settings-toggle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.settings-toggle-grid .settings-option {
  width: 100%;
}

.settings-toggle-grid .settings-option span {
  text-transform: none;
  letter-spacing: 0;
}

.settings-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  font-weight: 600;
}

.settings-option {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--ink);
  cursor: pointer;
  background: var(--field-bg);
  border: none;
  border-radius: 10px;
  padding: 6px 8px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.settings-option input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.settings-option:hover {
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  transform: translateY(-1px);
}

.card.is-hidden {
  display: none;
}
.settings-note {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.4;
}

.settings-note.is-error {
  color: #a93b3b;
}

.settings-danger {
  border: none;
  background: var(--accent);
  color: #0b1b1a;
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
  width: 100%;
}

.settings-danger:hover {
  background: var(--accent-dark);
  transform: translateY(-1px);
}
.empty-actions {
  margin-top: 12px;
  display: flex;
  justify-content: center;
}

.login-box {
  background: transparent;
  border-radius: 18px;
  padding: 0;
  border: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.auth-collapsible {
  background: transparent;
  border: 1px solid var(--panel-border);
  padding: 0 18px;
}

.auth-collapsible summary {
  font-size: 1.05rem;
}

.sidebar .login-box .auth-collapsible summary {
  margin-bottom: 8px;
}

.auth-collapsible .auth-form {
  margin-bottom: 12px;
}

.auth-form {
  display: grid;
  gap: 10px;
}

.auth-form input {
  border: none;
  border-radius: 14px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 0.95rem;
  background: var(--field-bg);
  color: var(--ink);
}

.auth-form input:focus {
  outline: 2px solid rgba(217, 115, 60, 0.3);
  border-color: var(--accent);
}

.auth-link {
  margin: 4px auto 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.auth-divider {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.7rem;
  color: var(--muted);
  text-align: center;
  margin: 10px 0 8px;
}

.auth-error {
  color: #b44b2a;
  font-size: 0.9rem;
}

.account-notice {
  color: #4e7b6f;
  font-size: 0.9rem;
}

.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 12px 22px;
  background: var(--field-bg);
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.primary-button:hover {
  background: color-mix(in srgb, var(--field-bg) 85%, var(--accent) 15%);
  border-color: color-mix(in srgb, var(--ink) 20%, transparent);
  transform: translateY(-1px);
}

.primary-button-google {
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}

.primary-button-google img {
  width: 18px;
  height: 18px;
  display: block;
}

.card {
  background: var(--panel-bg);
  border-radius: 22px;
  padding: 28px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: visible;
}

.card.menu-open {
  z-index: 70;
}

.sidebar-draggable {
  cursor: grab;
}

.sidebar-draggable.dragging {
  cursor: grabbing;
  opacity: 0.7;
}

.sidebar-draggable.drag-over {
  outline: 2px dashed var(--accent);
  outline-offset: 6px;
}

body.has-user-bg .card {
  background: var(--panel-bg-strong);
  backdrop-filter: blur(4px);
}

body.has-user-bg .collapsible {
  background: var(--panel-bg-mid);
}

body.has-user-bg .post {
  background: var(--panel-bg-soft);
}

.composer-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.calendar-workspace {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}

.calendar-workspace[hidden] {
  display: none !important;
}

body.calendar-workspace-active .composer-panel {
  display: none !important;
}

.calendar-workspace-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.calendar-workspace-heading {
  min-width: 0;
}

.calendar-workspace-title {
  margin: 0;
  font-family: "Fraunces", "Times New Roman", serif;
  font-size: 1.3rem;
  color: var(--ink);
}

.calendar-workspace-selected {
  margin: 6px 0 0;
  font-size: 0.92rem;
  color: var(--muted);
}

.calendar-workspace-editor {
  min-height: 36px;
}

.calendar-workspace-surface {
  background: var(--panel-bg-soft);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 22px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  padding: 16px;
}

.calendar-workspace-view {
  min-height: 460px;
}

.calendar-workspace-view .fc {
  color: var(--ink);
  --fc-page-bg-color: var(--panel-bg);
  --fc-neutral-bg-color: var(--field-bg);
  --fc-neutral-text-color: var(--ink);
  --fc-border-color: transparent;
  --fc-list-event-hover-bg-color: var(--field-bg);
  --fc-button-text-color: var(--ink);
  --fc-button-bg-color: transparent;
  --fc-button-border-color: transparent;
  --fc-button-hover-bg-color: transparent;
  --fc-button-hover-border-color: transparent;
  --fc-button-active-bg-color: transparent;
  --fc-button-active-border-color: transparent;
}

.calendar-workspace-view .fc .fc-button {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  color: var(--ink);
  text-transform: none;
  border-radius: 10px;
  box-shadow: none !important;
}

.calendar-workspace-view .fc .fc-prev-button,
.calendar-workspace-view .fc .fc-next-button {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--ink) !important;
}

.calendar-workspace-view .fc .fc-button-primary,
.calendar-workspace-view .fc .fc-button-primary:disabled,
.calendar-workspace-view .fc .fc-button-primary:not(:disabled).fc-button-active,
.calendar-workspace-view .fc .fc-button-primary:not(:disabled):active {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: var(--ink) !important;
}

.calendar-workspace-view .fc .fc-button:hover,
.calendar-workspace-view .fc .fc-button:focus-visible {
  background: transparent !important;
  color: var(--accent-dark);
}

.calendar-workspace-view .fc .fc-button-primary:not(:disabled).fc-button-active,
.calendar-workspace-view .fc .fc-button-primary:not(:disabled):active {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--accent-dark) !important;
}

.calendar-workspace-view .fc .fc-header-toolbar .fc-toolbar-chunk:last-child {
  margin-left: auto;
}

.calendar-workspace-view .fc .fc-toolbar-title {
  font-family: "Fraunces", "Times New Roman", serif;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink) !important;
}

.calendar-workspace-view .fc-theme-standard td,
.calendar-workspace-view .fc-theme-standard th,
.calendar-workspace-view .fc-theme-standard .fc-scrollgrid {
  border-color: transparent !important;
}

.calendar-workspace-view .fc .fc-col-header-cell-cushion,
.calendar-workspace-view .fc .fc-daygrid-day-number,
.calendar-workspace-view .fc .fc-timegrid-axis-cushion,
.calendar-workspace-view .fc .fc-timegrid-slot-label-cushion {
  color: var(--ink);
}

.calendar-workspace-view .fc .fc-col-header,
.calendar-workspace-view .fc .fc-col-header-cell,
.calendar-workspace-view .fc .fc-col-header-cell-cushion,
.calendar-workspace-view .fc .fc-scrollgrid-section-header > * {
  background: var(--field-bg) !important;
  background-color: var(--field-bg) !important;
  color: var(--ink) !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.calendar-workspace-view .fc .fc-col-header-cell-cushion {
  text-decoration: none !important;
  font-weight: 600;
}

.calendar-workspace-view .fc .fc-daygrid-day.fc-day-today,
.calendar-workspace-view .fc .fc-timegrid-col.fc-day-today {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

.calendar-workspace-view .fc .fc-bg-event.calendar-marker-entry {
  background: color-mix(in srgb, var(--accent) 32%, transparent);
  opacity: 0.42;
}

.calendar-workspace-view .fc .fc-bg-event.calendar-marker-blog {
  background: color-mix(in srgb, var(--danger) 30%, transparent);
  opacity: 0.34;
}

.calendar-workspace-view .fc .fc-list {
  border: none;
  border-radius: 12px;
  overflow: hidden;
}

.calendar-workspace-view .fc-theme-standard .fc-list,
.calendar-workspace-view .fc .fc-list-table {
  border: none !important;
  border-color: transparent !important;
  border-width: 0 !important;
  background-color: var(--panel-bg) !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}

.calendar-workspace-view .fc .fc-list-table tr,
.calendar-workspace-view .fc .fc-list-table th,
.calendar-workspace-view .fc .fc-list-table td {
  border: 0 !important;
  border-color: transparent !important;
  border-width: 0 !important;
  box-shadow: none !important;
}

.calendar-workspace-view .fc .fc-list-day > th,
.calendar-workspace-view .fc .fc-list-day > td,
.calendar-workspace-view .fc .fc-list-day-cushion,
.calendar-workspace-view .fc .fc-cell-shaded,
.calendar-workspace-view .fc-theme-standard .fc-list-day-cushion {
  background-color: var(--field-bg) !important;
  color: var(--ink) !important;
  border: none !important;
  border-color: transparent !important;
  border-width: 0 !important;
}

.calendar-workspace-view .fc .fc-list-day-cushion a,
.calendar-workspace-view .fc .fc-list-day-text,
.calendar-workspace-view .fc .fc-list-day-side-text,
.calendar-workspace-view .fc .fc-list-day-text a,
.calendar-workspace-view .fc .fc-list-day-side-text a {
  color: var(--ink) !important;
  text-decoration: none;
}

.calendar-workspace-view .fc .fc-list-day-cushion a:hover {
  color: var(--accent-dark) !important;
}

.calendar-workspace-view .fc .fc-list-event > td,
.calendar-workspace-view .fc .fc-list-empty > td {
  background-color: var(--panel-bg) !important;
  color: var(--ink) !important;
  border: none !important;
  border-color: transparent !important;
  border-width: 0 !important;
}

.calendar-workspace-view .fc .fc-list-event:hover > td,
.calendar-workspace-view .fc .fc-list-event:focus-within > td {
  background-color: var(--field-bg) !important;
}

.calendar-workspace-view .fc .fc-list-event-title,
.calendar-workspace-view .fc .fc-list-event-time {
  color: var(--ink) !important;
}

.calendar-workspace-view .fc .fc-list-event-dot {
  border-color: var(--accent) !important;
}

.calendar-workspace-view .fc .fc-event.calendar-list-blog .fc-list-event-dot {
  border-color: var(--danger) !important;
}

.calendar-workspace-view .fc .fc-list-empty > td {
  color: var(--muted) !important;
}

.composer-panel > .feed {
  display: none;
}

.composer-panel .feed {
  gap: 0;
}

.collapsible {
  background: var(--surface);
  border-radius: 22px;
  padding: 0 22px;
  border: none;
  box-shadow: 0 12px 26px rgba(29, 18, 9, 0.08);
}

.composer-panel .collapsible[data-panel-key="new-entry"] {
  background: var(--panel-bg-soft);
  background-image: none;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.collapsible[open] {
  padding-bottom: 22px;
}

.collapsible[data-panel-key="new-entry"][open] {
  padding-bottom: 12px;
}

.collapsible summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 0;
  font-family: "Fraunces", "Times New Roman", serif;
  font-size: 1.25rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  position: relative;
  padding-right: 32px;
}

.collapsible summary::-webkit-details-marker {
  display: none;
}

.collapsible summary::after {
  content: "+";
  font-size: 1.4rem;
  color: var(--accent-dark);
  font-family: inherit;
  line-height: 1;
  transition: transform 0.2s ease;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.collapsible summary::marker {
  content: "";
}

.collapsible[open] summary::after {
  content: "-";
}
.collapsible-hint {
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 500;
}

.collapsible .composer,
.collapsible .category-form {
  margin-top: 8px;
}

.inline-collapsible {
  border: none;
  border-radius: 16px;
  padding: 0 16px;
  background: var(--field-bg);
}

.login-box .inline-collapsible {
  border: none;
  background: transparent;
  padding: 0 6px;
}

.inline-collapsible[open] {
  padding-bottom: 16px;
}

.inline-collapsible summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: "Fraunces", "Times New Roman", serif;
  font-size: 1.25rem;
  font-weight: 600;
  flex-wrap: wrap;
  position: relative;
  padding-right: 32px;
}

.inline-collapsible summary::-webkit-details-marker {
  display: none;
}

.inline-collapsible summary::after {
  content: "+";
  font-size: 1.2rem;
  color: var(--accent-dark);
  font-family: inherit;
  line-height: 1;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.inline-collapsible summary::marker {
  content: "";
}

.collapsible .editor-more > summary::after {
  content: none !important;
  display: none !important;
}

.collapsible .editor-more > summary {
  padding-right: 0;
}

.inline-collapsible[open] summary::after {
  content: "-";
}

.inline-collapsible:not([open]) summary::after {
  content: "+";
}

.entry-options > :not(summary) + :not(summary) {
  margin-top: 16px;
}

.entry-options {
  background: var(--panel-bg);
}

.entry-options .inline-collapsible {
  margin-top: 16px;
}

.entry-options .inline-collapsible[data-panel-key="entry-media"] {
  background: var(--panel-bg);
}

.entry-options .inline-collapsible .composer-row + .composer-row {
  margin-top: 16px;
}
.composer {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}

.theme-background-form {
  margin-top: 8px;
}

.theme-file-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 14px;
  border: none;
  background: var(--field-bg);
}

.theme-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.theme-file-name {
  flex: 1;
  font-size: 0.9rem;
  color: var(--muted);
  opacity: 0.7;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.theme-file-name.has-file {
  color: var(--ink);
  opacity: 1;
}

.theme-file-button {
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: 999px;
  padding: 6px 12px;
  min-width: 42px;
  min-height: 36px;
  background: var(--field-bg);
  color: var(--ink);
  font-weight: 600;
  font-family: inherit;
  font-size: 1rem;
  text-transform: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.theme-file-button .material-symbols-outlined {
  font-size: 1.1rem;
  line-height: 1;
}

.theme-file-button:hover {
  background: color-mix(in srgb, var(--field-bg) 85%, var(--accent) 15%);
  border-color: color-mix(in srgb, var(--ink) 20%, transparent);
}

.form-hint {
  font-size: 0.72rem;
  color: var(--muted);
  margin: -4px 0 0;
}

.composer-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.composer-row.two-col {
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
}

.composer-row.two-col .field {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mobile-only {
  display: none;
}

.reminder-field {
  display: flex;
}

.category-select {
  width: 100%;
}

.category-select.is-loading {
  cursor: progress;
}

.category-select option {
  background: var(--field-bg);
  color: var(--ink);
}

.category-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.category-selected-chip {
  border: 1px solid #eadfd6;
  background: var(--field-bg);
  border-radius: 999px;
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--ink);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.category-selected-chip:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.category-selected-swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--chip-color, var(--accent-dark));
  display: inline-block;
}

label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-weight: 600;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

textarea {
  border: none;
  border-radius: 16px;
  padding: 16px;
  font-family: inherit;
  font-size: 1rem;
  resize: vertical;
  min-height: 140px;
  background: var(--field-bg);
  color: var(--ink);
}

textarea:focus {
  outline: 2px solid rgba(217, 115, 60, 0.3);
}

body.has-editor #content {
  display: none;
}

.editor-toolbar {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  padding: 6px 8px;
  border: none;
  border-radius: 14px;
  background: var(--field-bg);
  margin-bottom: 8px;
  align-items: center;
  overflow: visible;
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
}

#tiptap-toolbar.editor-toolbar {
  flex-wrap: wrap;
  row-gap: 6px;
  background: transparent;
  padding-left: 0;
  padding-right: 0;
}

#tiptap-toolbar .editor-button {
  border-color: transparent;
}

#tiptap-toolbar .editor-button:hover,
#tiptap-toolbar .editor-button:focus-visible,
#tiptap-toolbar .editor-button.is-active {
  border-color: transparent;
}

#tiptap-toolbar .editor-more > summary.editor-button,
#tiptap-toolbar .editor-more[open] > summary.editor-button {
  background: transparent;
  border-color: transparent;
}

.editor-group {
  display: inline-flex;
  gap: 3px;
  align-items: center;
}

.editor-divider {
  width: 1px;
  height: 22px;
  background: rgba(62, 46, 33, 0.18);
  align-self: center;
}

.editor-more {
  position: relative;
  margin-left: auto;
}

#tiptap-toolbar .editor-more {
  margin-left: 0;
}

.editor-more > summary {
  list-style: none;
  padding: 0;
  position: static;
}

.editor-more > summary::-webkit-details-marker {
  display: none;
}

.editor-more > summary::after {
  content: none;
}

.editor-more-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  display: none;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  border: 1px solid #e1d2c6;
  border-radius: 14px;
  background: var(--field-bg);
  box-shadow: 0 16px 32px rgba(39, 30, 23, 0.12);
  z-index: 20;
  min-width: 230px;
}

.editor-more[open] .editor-more-panel {
  display: flex;
}

.editor-select {
  border: 1px solid #e1d2c6;
  border-radius: 10px;
  padding: 4px 10px;
  background: var(--field-bg);
  color: var(--ink);
  font: inherit;
  font-size: 0.85rem;
  line-height: 1.2;
}

.editor-button {
  border: 1px solid #e1d2c6;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  padding: 4px 8px;
  font: inherit;
  font-size: 0.85rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.editor-button:hover {
  background: var(--panel-bg-soft);
  border-color: var(--accent);
}

.editor-button svg {
  width: 14px;
  height: 14px;
}

.editor-more-panel .editor-button {
  padding: 4px 7px;
}

.editor-more > summary.editor-button {
  padding: 4px 8px;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  border-color: transparent;
  background: var(--panel-bg-soft);
}

.editor-more[open] > summary.editor-button {
  border-color: var(--accent);
  background: var(--panel-bg);
}

.editor-button .underline {
  text-decoration: underline;
}

.editor-button.is-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-dark);
  box-shadow: inset 0 0 0 1px rgba(217, 115, 60, 0.2);
}

.editor-color {
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
}

body[data-theme="blue-night"] .editor-toolbar,
body[data-theme="dark-slate"] .editor-toolbar,
body[data-theme="asphalt-dreams"] .editor-toolbar,
body[data-theme="ember"] .editor-toolbar,
body[data-theme="dark-amaranth"] .editor-toolbar,
body[data-theme="grape-soda"] .editor-toolbar {
  background: var(--panel-bg);
}

body[data-theme="blue-night"] .editor-button,
body[data-theme="dark-slate"] .editor-button,
body[data-theme="asphalt-dreams"] .editor-button,
body[data-theme="ember"] .editor-button,
body[data-theme="dark-amaranth"] .editor-button,
body[data-theme="grape-soda"] .editor-button,
body[data-theme="blue-night"] .editor-select,
body[data-theme="dark-slate"] .editor-select,
body[data-theme="asphalt-dreams"] .editor-select,
body[data-theme="ember"] .editor-select,
body[data-theme="dark-amaranth"] .editor-select,
body[data-theme="grape-soda"] .editor-select {
  background: var(--panel-bg-soft);
  color: #ffffff;
  border: none;
}

body[data-theme="blue-night"] .editor-button svg,
body[data-theme="dark-slate"] .editor-button svg,
body[data-theme="asphalt-dreams"] .editor-button svg,
body[data-theme="ember"] .editor-button svg,
body[data-theme="dark-amaranth"] .editor-button svg,
body[data-theme="grape-soda"] .editor-button svg {
  color: #ffffff;
  fill: #ffffff;
}

body[data-theme="blue-night"] .editor-button svg path,
body[data-theme="dark-slate"] .editor-button svg path,
body[data-theme="asphalt-dreams"] .editor-button svg path,
body[data-theme="ember"] .editor-button svg path,
body[data-theme="dark-amaranth"] .editor-button svg path,
body[data-theme="grape-soda"] .editor-button svg path {
  fill: #ffffff;
}

body[data-theme="blue-night"] .editor-button:hover,
body[data-theme="dark-slate"] .editor-button:hover,
body[data-theme="asphalt-dreams"] .editor-button:hover,
body[data-theme="ember"] .editor-button:hover,
body[data-theme="dark-amaranth"] .editor-button:hover,
body[data-theme="grape-soda"] .editor-button:hover {
  background: var(--field-bg);
}

body[data-theme="blue-night"] .editor-divider,
body[data-theme="dark-slate"] .editor-divider,
body[data-theme="asphalt-dreams"] .editor-divider,
body[data-theme="ember"] .editor-divider,
body[data-theme="dark-amaranth"] .editor-divider,
body[data-theme="grape-soda"] .editor-divider {
  background: rgba(255, 255, 255, 0.2);
}

body[data-theme="blue-night"] .editor-more-panel,
body[data-theme="dark-slate"] .editor-more-panel,
body[data-theme="asphalt-dreams"] .editor-more-panel,
body[data-theme="ember"] .editor-more-panel,
body[data-theme="dark-amaranth"] .editor-more-panel,
body[data-theme="grape-soda"] .editor-more-panel {
  background: var(--panel-bg);
  border: none;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35);
}

body[data-theme="blue-night"] .editor-more > summary.editor-button,
body[data-theme="dark-slate"] .editor-more > summary.editor-button,
body[data-theme="asphalt-dreams"] .editor-more > summary.editor-button,
body[data-theme="ember"] .editor-more > summary.editor-button,
body[data-theme="dark-amaranth"] .editor-more > summary.editor-button,
body[data-theme="grape-soda"] .editor-more > summary.editor-button {
  background: var(--panel-bg-soft);
  border-color: transparent;
}

body[data-theme="blue-night"] .editor-more[open] > summary.editor-button,
body[data-theme="dark-slate"] .editor-more[open] > summary.editor-button,
body[data-theme="asphalt-dreams"] .editor-more[open] > summary.editor-button,
body[data-theme="ember"] .editor-more[open] > summary.editor-button,
body[data-theme="dark-amaranth"] .editor-more[open] > summary.editor-button,
body[data-theme="grape-soda"] .editor-more[open] > summary.editor-button {
  background: var(--field-bg);
}

.editor-field {
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  border-radius: 16px;
  background: var(--field-bg);
  color: var(--ink);
  min-height: 140px;
  resize: vertical;
  overflow: auto;
}

.editor-field::-webkit-scrollbar {
  width: 10px;
}

.editor-field::-webkit-scrollbar-track {
  background: transparent;
}

.editor-field::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 8px;
}

.editor-field::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.28);
}

.editor-field .tiptap-content,
.editor-field .ProseMirror {
  min-height: 140px;
  padding: 18px 16px 16px;
  font-family: var(--entry-font);
  font-size: 1rem;
  color: var(--ink);
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  outline: none;
}

.editor-field .tiptap-content > *:first-child,
.editor-field .ProseMirror > *:first-child {
  margin-top: 0;
}

.editor-field .tiptap-content > *:last-child,
.editor-field .ProseMirror > *:last-child {
  margin-bottom: 0;
}

.editor-field .tiptap-content p,
.editor-field .ProseMirror p {
  margin: 0 0 1rem;
}

.editor-field .tiptap-content ul,
.editor-field .tiptap-content ol,
.editor-field .ProseMirror ul,
.editor-field .ProseMirror ol {
  margin: 0 0 1rem 1.2rem;
  padding-left: 1.2rem;
}

.editor-field .tiptap-content li,
.editor-field .ProseMirror li {
  margin: 0 0 0.35rem;
}

.editor-field .tiptap-content h1,
.editor-field .tiptap-content h2,
.editor-field .tiptap-content h3,
.editor-field .tiptap-content h4,
.editor-field .tiptap-content h5,
.editor-field .ProseMirror h1,
.editor-field .ProseMirror h2,
.editor-field .ProseMirror h3,
.editor-field .ProseMirror h4,
.editor-field .ProseMirror h5 {
  margin: 0 0 0.6rem;
  font-family: var(--entry-font);
}

.editor-field .tiptap-content blockquote,
.editor-field .ProseMirror blockquote {
  margin: 0 0 1rem;
  padding: 6px 12px;
  border-left: 3px solid var(--accent);
  color: var(--muted);
  font-style: italic;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 10px;
}

.editor-field .tiptap-content code,
.editor-field .ProseMirror code {
  font-family: "JetBrains Mono", "Fira Code", "Consolas", monospace;
  font-size: 0.92em;
  background: rgba(0, 0, 0, 0.06);
  padding: 2px 6px;
  border-radius: 8px;
}

.editor-field .tiptap-content pre,
.editor-field .ProseMirror pre {
  font-family: "JetBrains Mono", "Fira Code", "Consolas", monospace;
  font-size: 0.92em;
  background: rgba(0, 0, 0, 0.06);
  padding: 12px;
  border-radius: 12px;
  overflow: auto;
  margin: 0 0 1rem;
}

.editor-field .tiptap-content img,
.editor-field .ProseMirror img {
  display: block;
  max-width: 100% !important;
  max-height: min(72vh, 980px);
  width: auto !important;
  height: auto !important;
  border-radius: 16px;
  margin: 0.9rem auto;
  object-fit: contain;
}

.editor-field .tiptap-content a,
.editor-field .ProseMirror a {
  overflow-wrap: anywhere;
  word-break: break-word;
  color: var(--entry-link);
  text-decoration-color: color-mix(in srgb, var(--entry-link) 68%, transparent);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}

.editor-field .tiptap-content a:visited,
.editor-field .ProseMirror a:visited {
  color: var(--entry-link-visited);
  text-decoration-color: color-mix(in srgb, var(--entry-link-visited) 66%, transparent);
}

.editor-field .tiptap-content a:hover,
.editor-field .ProseMirror a:hover {
  color: var(--entry-link-hover);
  text-decoration-color: currentColor;
}

.editor-field .tiptap-content ul[data-type="taskList"],
.editor-field .ProseMirror ul[data-type="taskList"],
.entry-text ul[data-type="taskList"] {
  list-style: none;
  padding-left: 0;
  margin: 12px 0;
}

.editor-field .tiptap-content li[data-type="taskItem"],
.editor-field .ProseMirror li[data-type="taskItem"],
.editor-field .ProseMirror ul[data-type="taskList"] > li,
.entry-text li[data-type="taskItem"],
.entry-text ul[data-type="taskList"] > li {
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin: 6px 0;
}

.editor-field .tiptap-content li[data-type="taskItem"] > label,
.editor-field .ProseMirror li[data-type="taskItem"] > label,
.editor-field .ProseMirror ul[data-type="taskList"] > li > label,
.entry-text li[data-type="taskItem"] > label {
  display: flex;
  align-items: center;
  margin: 0;
  flex: 0 0 auto;
  line-height: 1;
}

.editor-field .tiptap-content li[data-type="taskItem"] > div,
.editor-field .ProseMirror li[data-type="taskItem"] > div,
.editor-field .ProseMirror ul[data-type="taskList"] > li > div,
.entry-text li[data-type="taskItem"] > div {
  flex: 1 1 auto;
  min-width: 0;
}

.editor-field .tiptap-content li[data-type="taskItem"] input[type="checkbox"],
.editor-field .ProseMirror li[data-type="taskItem"] input[type="checkbox"],
.editor-field .ProseMirror ul[data-type="taskList"] > li input[type="checkbox"],
.entry-text li[data-type="taskItem"] input[type="checkbox"] {
  margin: 0;
  position: relative;
  top: 1px;
}

select,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="datetime-local"] {
  border: none;
  border-radius: 14px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 0.95rem;
  background: var(--field-bg);
  color: var(--ink);
  color-scheme: inherit;
  -webkit-appearance: none;
  appearance: none;
}

select option,
select optgroup {
  background: var(--field-bg);
  color: var(--ink);
}

input[type="file"] {
  border: none;
  border-radius: 14px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 0.9rem;
  background: var(--field-bg);
  color: var(--ink);
}

.composer-row textarea,
.composer-row .editor-field,
.composer-row select,
.composer-row input[type="text"],
.composer-row input[type="search"],
.composer-row input[type="email"],
.composer-row input[type="password"],
.composer-row input[type="date"],
.composer-row input[type="datetime-local"] {
  width: 100%;
}

.composer-row .reminder-field input[type="datetime-local"] {
  width: 100%;
}

.composer-row input[type="date"]::-webkit-calendar-picker-indicator,
.composer-row input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  opacity: 0.92;
  filter: invert(49%) sepia(18%) saturate(608%) hue-rotate(169deg) brightness(90%)
    contrast(87%);
  cursor: pointer;
}

.composer-row input[type="date"]::-webkit-calendar-picker-indicator:hover,
.composer-row input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
  filter: invert(39%) sepia(25%) saturate(830%) hue-rotate(172deg) brightness(92%)
    contrast(88%);
}

select:focus,
input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="date"]:focus {
  outline: 2px solid rgba(217, 115, 60, 0.3);
}

.referral-input {
  width: 100%;
}

.composer-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.composer-actions #focus-toggle {
  margin-right: auto;
  order: 1;
}

.composer-actions #status {
  flex: 1 0 100%;
  text-align: center;
  order: 3;
  margin-top: 6px;
}

.composer-actions-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
  order: 2;
}

#post-form .composer-actions-right {
  width: 100%;
}

#post-form .composer-actions-right #date-prev {
  margin-right: auto;
}

.composer-actions-right > button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-family: inherit;
  font-size: 0.9rem;
}

.inspire-button {
  font-size: 0.9rem;
  padding: 10px 20px;
}

#post-form.is-reflection-mode .entry-options,
#post-form.is-reflection-mode .inspire-button,
#post-form.is-reflection-mode .entry-admin-controls {
  display: none !important;
}

#post-form .reflection-submit-inline {
  display: none;
}

#post-form.is-reflection-mode .reflection-submit-inline {
  display: inline-flex;
  align-items: center;
  margin-right: auto;
}

#post-form .reflection-submit-inline {
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 0.92rem;
  font-weight: 600;
}

#post-form.is-reflection-mode .composer-actions-right {
  width: 100%;
  margin-left: 0;
}

.theme-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: center;
  justify-content: stretch;
  margin-top: 6px;
}

.theme-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  min-width: 0;
  width: 100%;
  white-space: nowrap;
  text-align: center;
  min-height: 0;
}

.card[data-panel="theme"] label {
  letter-spacing: 0.08em;
}

.entry-blog-only {
  display: none;
}

#post-form.is-blog .entry-blog-only {
  display: block;
}

#post-form.is-blog .entry-journal-only {
  display: none;
}

.entry-journal-only {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.category-inline {
  display: flex;
  align-items: center;
  gap: 10px;
}

.category-inline select {
  flex: 1;
}

.icon-button {
  padding: 0;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  line-height: 1;
}

.icon-button .material-symbols-outlined {
  font-size: 1.2rem;
}

.button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.inline-form {
  margin-top: 10px;
  border: none;
  border-radius: 14px;
  padding: 10px;
  background: var(--panel-bg);
}

.inline-form-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.inline-form-row.inline-form-row-secondary {
  margin-top: 8px;
}

.inline-form-row input[type="text"] {
  flex: 1;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: var(--field-bg);
  color: var(--ink);
}

.inline-form-row input[type="color"] {
  width: 40px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: var(--field-bg);
}

.inline-form-row button {
  padding: 10px 16px;
}

button {
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: 999px;
  padding: 12px 22px;
  background: var(--field-bg);
  color: var(--ink);
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

button:hover {
  background: color-mix(in srgb, var(--field-bg) 85%, var(--accent) 15%);
  border-color: color-mix(in srgb, var(--ink) 20%, transparent);
  transform: translateY(-1px);
}

#status {
  font-size: 0.8rem;
  color: var(--muted);
  opacity: 0.8;
}

.draft-toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1200;
  max-width: min(360px, calc(100vw - 28px));
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  background: color-mix(in srgb, var(--panel-bg) 88%, var(--accent) 12%);
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.24);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.draft-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.account-goodwill-toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1220;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: min(420px, calc(100vw - 28px));
  padding: 11px 12px;
  border-radius: 13px;
  border: 1px solid color-mix(in srgb, var(--ink) 15%, transparent);
  background: color-mix(in srgb, var(--panel-bg) 82%, var(--accent) 18%);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.22);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.account-goodwill-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.account-goodwill-toast-icon {
  font-size: 1.08rem;
  color: color-mix(in srgb, var(--accent) 78%, var(--ink) 22%);
  margin-top: 1px;
}

.account-goodwill-toast-content {
  flex: 1 1 auto;
  min-width: 0;
}

.account-goodwill-toast-title {
  display: block;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.account-goodwill-toast-body {
  margin: 3px 0 0;
  font-size: 0.88rem;
  line-height: 1.4;
}

.account-goodwill-toast-close {
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: color-mix(in srgb, var(--ink) 74%, transparent);
  padding: 2px;
  min-width: 0;
  min-height: 0;
  line-height: 1;
  transform: none;
}

.account-goodwill-toast-close:hover {
  background: color-mix(in srgb, var(--field-bg) 84%, var(--accent) 16%);
  color: var(--ink);
  transform: none;
}

.account-goodwill-toast-close .material-symbols-outlined {
  font-size: 18px;
  line-height: 1;
}

.feed {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.feed-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.feed-tools {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.feed-tools a {
  text-decoration: none;
}

.filter {
  display: flex;
  align-items: center;
  gap: 10px;
}

.filter label {
  font-size: 0.75rem;
}

.filter input[type="date"],
.date-filter input[type="date"] {
  border: 1px solid #e1d2c6;
  border-radius: 999px;
  padding: 8px 12px;
  background: var(--field-bg);
  color: var(--ink);
}

.date-filter {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.toggle-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-weight: 600;
}

.toggle-row input {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
}

.entry-toggle-row {
  flex-direction: row;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.encrypt-note {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.85rem;
}

.date-nav-inline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.date-nav-inline input[type="date"] {
  width: 100%;
}

.date-nav-inline .ghost-button {
  padding: 8px 16px;
  min-width: 42px;
}

.date-nav-inline #date-prev,
.date-nav-inline #date-next {
  padding-left: 8px;
  padding-right: 8px;
  min-width: 28px;
}

.ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 10px 20px;
  background: var(--field-bg);
  color: var(--ink);
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.ghost-button:visited {
  color: var(--ink);
}

.ghost-button:hover {
  background: color-mix(in srgb, var(--field-bg) 85%, var(--accent) 15%);
  border-color: color-mix(in srgb, var(--ink) 20%, transparent);
  transform: translateY(-1px);
}

.ghost-button.danger {
  background: color-mix(in srgb, var(--danger) 18%, var(--field-bg));
  color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent);
}

.ghost-button.danger:hover {
  background: color-mix(in srgb, var(--danger) 25%, var(--field-bg));
  color: var(--danger);
}

.composer.is-editing textarea {
  border-color: var(--accent);
  background: var(--field-bg);
}

.category-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px auto;
  gap: 12px;
  align-items: center;
}

.category-form input[type="text"] {
  min-width: 0;
}

.category-form input[type="color"] {
  border: none;
  background: transparent;
  width: 36px;
  height: 36px;
  padding: 0;
  cursor: pointer;
}

.category-form button {
  white-space: nowrap;
}

.category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.followed-blogs-list {
  display: grid;
  gap: 8px;
}

.followed-blog-link {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  text-decoration: none;
  color: var(--accent);
  font-weight: 600;
  line-height: 1.4;
}

.followed-blog-link:hover {
  color: var(--accent-dark);
}

.followed-blog-link.has-updates {
  color: #2f8a42;
}

.followed-blog-link.has-updates:hover {
  color: #236a31;
}

.followed-blogs-empty {
  margin-top: 8px;
}

.followed-blogs-actions {
  display: block;
  margin: 14px 0 10px;
}

.followed-blogs-actions .settings-link {
  width: 100%;
}

.modal-card.discover-blogs-modal-card {
  width: min(92vw, 560px);
  max-height: min(82vh, 700px);
  overflow: auto;
  padding: 16px 18px;
  gap: 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel-bg) 88%, #ffffff 12%);
  border: 1px solid color-mix(in srgb, var(--panel-border) 86%, transparent);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(14px) saturate(125%);
}

.discover-blogs-modal-head {
  display: grid;
  gap: 6px;
}

.modal-card.discover-blogs-modal-card h3 {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.15;
}

.discover-blogs-modal-subhead {
  margin: 0;
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.35;
}

.discover-blogs-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.modal-card.discover-blogs-modal-card .discover-archetype-input {
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  background: color-mix(in srgb, var(--field-bg) 90%, #ffffff 10%);
}

.discover-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  background: color-mix(in srgb, var(--field-bg) 92%, #ffffff 8%);
  color: var(--ink);
  font-size: 0.94rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.discover-btn:hover {
  background: color-mix(in srgb, var(--field-bg) 80%, var(--accent) 20%);
  border-color: color-mix(in srgb, var(--ink) 28%, transparent);
}

.discover-btn:active {
  transform: translateY(1px);
}

.discover-btn.discover-btn-primary {
  background: color-mix(in srgb, var(--accent) 70%, #ffffff 30%);
  border-color: color-mix(in srgb, var(--accent-dark) 40%, transparent);
  color: #1f1a16;
}

.discover-btn.discover-btn-primary:hover {
  background: color-mix(in srgb, var(--accent) 78%, #ffffff 22%);
}

.discover-btn.discover-btn-secondary {
  background: color-mix(in srgb, var(--panel-bg-soft) 86%, #ffffff 14%);
}

.discover-btn.discover-btn-ghost {
  background: transparent;
}

.discover-archetype-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

.discover-archetype-chip {
  margin: 0;
  border-radius: 999px;
  padding: 4px 5px 4px 10px;
  font-size: 0.84rem;
  line-height: 1.15;
  background: color-mix(in srgb, var(--chip-color, var(--accent)) 16%, #f5fbff);
  border: 1px solid color-mix(in srgb, var(--chip-color, var(--accent)) 36%, #d6e4ef);
}

.discover-archetype-chip .category-chip-remove {
  border: 1px solid #d9dee4;
  background: #fff;
  color: #4a3a33;
  width: 20px;
  height: 20px;
  min-width: 20px;
  padding: 0;
  margin: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
}

.discover-archetype-chip .category-chip-remove:hover {
  background: #f6f0e8;
}

.discover-blogs-status {
  margin: 0;
  min-height: 1em;
  font-size: 0.9rem;
  color: var(--muted);
}

.discover-blogs-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  align-items: center;
}

.discover-blog-results {
  display: grid;
  gap: 8px;
}

.discover-blog-item {
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--panel-border) 84%, transparent);
  background: color-mix(in srgb, var(--panel-bg-soft) 86%, #ffffff 14%);
  padding: 10px 12px;
  display: grid;
  gap: 6px;
}

.discover-blog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.discover-blog-head .share-link.share-follow {
  min-height: 32px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.82rem;
}

.discover-blog-link {
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
}

.discover-blog-link:hover {
  color: var(--accent-dark);
}

.discover-blog-meta,
.discover-blog-archetypes {
  margin: 0;
  font-size: 0.87rem;
  color: var(--muted);
}

.modal-card.message-modal-card {
  width: min(92vw, 640px);
  max-height: min(86vh, 760px);
  overflow: auto;
  padding: 16px 18px;
  display: grid;
  gap: 12px;
}

.message-modal-subhead {
  margin: 0;
}

.message-editor-toolbar {
  margin-top: 0;
}

.message-editor-field {
  min-height: 160px;
}

.message-modal-status {
  margin: 0;
  min-height: 1.1em;
  color: var(--muted);
  font-size: 0.9rem;
}

.message-modal-status.is-error {
  color: var(--danger);
}

.modal[data-mode="chain-group"] [data-category-modal-archetype-row],
.modal[data-mode="cloud-group"] [data-category-modal-archetype-row] {
  display: none !important;
}

.modal[data-mode="category"] [data-category-modal-color-row] {
  display: none !important;
}

.card h2 {
  font-family: "Fraunces", "Times New Roman", serif;
  font-size: 1.25rem;
  font-weight: 600;
}

.category-chip {
  border-radius: 999px;
  padding: 6px 8px 6px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  background: color-mix(in srgb, var(--chip-color, var(--accent-dark)) 18%, #fff6ee);
  color: var(--chip-color, var(--accent-dark));
  border: 1px solid color-mix(in srgb, var(--chip-color, var(--accent-dark)) 45%, #f0e3d7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.category-chip-button {
  cursor: pointer;
  font: inherit;
}

.category-list {
  list-style: disc;
  padding-left: 18px;
  margin: 0;
  display: grid;
  gap: 6px;
}

.category-link {
  color: var(--chip-color, var(--accent-dark));
  text-decoration: none;
  font-weight: 600;
}

.category-link:hover {
  color: var(--chip-color, var(--accent-dark));
  text-decoration: underline;
}

.category-chip .chip-delete {
  border: none;
  background: transparent;
  color: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.category-chip .chip-edit {
  border: none;
  background: transparent;
  color: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.category-chip .chip-edit svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.category-chip .chip-delete:hover {
  color: #e08b8b;
}

.category-chip .chip-edit:hover {
  color: var(--accent-dark);
}

.count {
  color: var(--muted);
  font-size: 0.9rem;
}

.feed-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: 0 0 8px;
}

.feed-pagination[hidden] {
  display: none !important;
}

.feed-page-btn {
  min-width: 92px;
}

.feed-page-status {
  color: var(--muted);
  font-size: 0.84rem;
  min-width: 138px;
  text-align: center;
}

.posts {
  display: grid;
  gap: 20px;
}

.admin-blog-posts:empty {
  display: none;
}

.post {
  background: var(--panel-bg);
  background-image: none;
  border-radius: 18px;
  padding: 20px 24px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  z-index: auto;
}

.post.menu-open {
  z-index: 120;
}

.post.blog-post {
  border-style: dashed;
}

.post time {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent-dark);
}

.post-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.post-meta[data-entry-toggle-row] {
  cursor: pointer;
}

.post-meta[data-entry-toggle-row]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
  outline-offset: 2px;
  border-radius: 10px;
}

.post-meta-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.post-meta-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.post-meta-topline {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: nowrap;
}

.entry-collapse-toggle {
  width: auto;
  min-width: 1ch;
  height: auto;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--accent-dark);
  font-family: "Fraunces", "Times New Roman", serif;
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: none;
  box-shadow: none;
}

.entry-collapse-toggle:hover {
  background: transparent;
  border: none;
  color: var(--accent);
  transform: none;
}

.entry-collapse-toggle:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 2px;
  border-radius: 6px;
}

.post.is-collapsed .entry-text,
.post.is-collapsed .encrypted-entry,
.post.is-collapsed .music-chip-stack,
.post.is-collapsed .post-images,
.post.is-collapsed .post-actions {
  display: none;
}

.mood-badge {
  border-radius: 999px;
  padding: 0;
  font-size: 1rem;
  font-weight: 400;
  color: inherit;
  background: transparent;
  border: none;
}

.category-badges,
.tag-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.category-badge {
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--badge-color, var(--accent-dark));
  border: 1px solid var(--badge-color, var(--accent));
  background: var(--field-bg);
}

.tag-badge {
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: var(--field-bg);
}

.blog-badge {
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-dark);
  background: var(--field-bg);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.blog-post-title {
  margin: 0;
  font-family: "Fraunces", "Times New Roman", serif;
  font-size: 1.2rem;
  color: var(--ink);
}

.post p {
  line-height: 1.7;
  color: var(--ink);
  font-family: var(--entry-font);
}

.entry-text {
  font-family: var(--entry-font);
  line-height: 1.7;
  color: var(--ink);
  overflow: hidden;
}

.entry-map-embed {
  margin: 0.85rem 0 1rem;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 14px;
  overflow: hidden;
  background: color-mix(in srgb, var(--surface-soft) 78%, white 22%);
}

.entry-map-embed iframe {
  display: block;
  width: 100%;
  height: clamp(220px, 38vw, 340px) !important;
  border: 0;
}

.entry-text a {
  color: var(--entry-link);
  overflow-wrap: anywhere;
  word-break: break-word;
  text-decoration-color: color-mix(in srgb, var(--entry-link) 70%, transparent);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}

.entry-text a:visited {
  color: var(--entry-link-visited);
  text-decoration-color: color-mix(in srgb, var(--entry-link-visited) 68%, transparent);
}

.entry-text a:hover {
  color: var(--entry-link-hover);
  text-decoration-color: currentColor;
}

.entry-text a:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--entry-link) 58%, var(--ink) 42%);
  outline-offset: 2px;
  border-radius: 2px;
}

.entry-text img {
  display: block;
  max-width: 100%;
  max-height: min(72vh, 980px);
  width: auto;
  height: auto;
  border-radius: 16px;
  margin: 1rem auto;
  object-fit: contain;
}

.entry-text img.ql-img,
.chain-entry-body img.ql-img,
.editor-field .tiptap-content img.ql-img,
.editor-field .ProseMirror img.ql-img {
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain;
}

.entry-text img.ql-img.ql-img-full,
.chain-entry-body img.ql-img.ql-img-full,
.editor-field .tiptap-content img.ql-img.ql-img-full,
.editor-field .ProseMirror img.ql-img.ql-img-full {
  width: auto !important;
}

.entry-text img.ql-img.ql-img-left.ql-img-full,
.chain-entry-body img.ql-img.ql-img-left.ql-img-full,
.editor-field .tiptap-content img.ql-img.ql-img-left.ql-img-full,
.editor-field .ProseMirror img.ql-img.ql-img-left.ql-img-full {
  margin-left: 0 !important;
  margin-right: auto !important;
}

.entry-text img.ql-img.ql-img-center.ql-img-full,
.chain-entry-body img.ql-img.ql-img-center.ql-img-full,
.editor-field .tiptap-content img.ql-img.ql-img-center.ql-img-full,
.editor-field .ProseMirror img.ql-img.ql-img-center.ql-img-full {
  margin-left: auto !important;
  margin-right: auto !important;
}

.entry-text img.ql-img.ql-img-right.ql-img-full,
.chain-entry-body img.ql-img.ql-img-right.ql-img-full,
.editor-field .tiptap-content img.ql-img.ql-img-right.ql-img-full,
.editor-field .ProseMirror img.ql-img.ql-img-right.ql-img-full {
  margin-left: auto !important;
  margin-right: 0 !important;
}

.entry-text img.ql-img.ql-img-half,
.chain-entry-body img.ql-img.ql-img-half,
.editor-field .tiptap-content img.ql-img.ql-img-half,
.editor-field .ProseMirror img.ql-img.ql-img-half {
  width: min(48%, 420px) !important;
  max-width: min(48%, 420px) !important;
}

.entry-text img.ql-img.ql-img-left.ql-img-half,
.chain-entry-body img.ql-img.ql-img-left.ql-img-half,
.editor-field .tiptap-content img.ql-img.ql-img-left.ql-img-half,
.editor-field .ProseMirror img.ql-img.ql-img-left.ql-img-half {
  float: left;
  clear: none;
  margin: 0.8rem 1rem 0.8rem 0 !important;
}

.entry-text img.ql-img.ql-img-right.ql-img-half,
.chain-entry-body img.ql-img.ql-img-right.ql-img-half,
.editor-field .tiptap-content img.ql-img.ql-img-right.ql-img-half,
.editor-field .ProseMirror img.ql-img.ql-img-right.ql-img-half {
  float: right;
  clear: none;
  margin: 0.8rem 0 0.8rem 1rem !important;
}

.entry-text img.ql-img.ql-img-center.ql-img-half,
.chain-entry-body img.ql-img.ql-img-center.ql-img-half,
.editor-field .tiptap-content img.ql-img.ql-img-center.ql-img-half,
.editor-field .ProseMirror img.ql-img.ql-img-center.ql-img-half {
  float: none;
  clear: both;
  margin: 0.8rem auto !important;
}

.ql-font-default {
  font-family: var(--entry-font) !important;
}

.ql-font-caveat {
  font-family: "Caveat", "Comic Sans MS", cursive !important;
}

.ql-font-kalam {
  font-family: "Kalam", "Comic Sans MS", cursive !important;
}

.ql-font-space-grotesk {
  font-family: "Space Grotesk", "Segoe UI", sans-serif !important;
}

.ql-font-patrick-hand {
  font-family: "Patrick Hand", "Comic Sans MS", cursive !important;
}

.ql-font-handlee {
  font-family: "Handlee", "Comic Sans MS", cursive !important;
}

.ql-font-shadows-into-light {
  font-family: "Shadows Into Light", "Comic Sans MS", cursive !important;
}

.ql-font-aref-ruqaa {
  font-family: "Aref Ruqaa", "Times New Roman", serif !important;
}

.ql-font-imperial-script {
  font-family: "Imperial Script", "Times New Roman", serif !important;
}

.ql-font-eagle-lake {
  font-family: "Eagle Lake", "Times New Roman", serif !important;
}

.ql-font-lavishly-yours {
  font-family: "Lavishly Yours", "Times New Roman", serif !important;
}

.ql-font-roboto {
  font-family: "Roboto", "Segoe UI", sans-serif !important;
}

.ql-font-roboto-condensed {
  font-family: "Roboto Condensed", "Segoe UI", sans-serif !important;
}

.ql-font-google-sans-code {
  font-family: "Google Sans Code", "JetBrains Mono", "Consolas", monospace !important;
}

.ql-font-open-sans {
  font-family: "Open Sans", "Segoe UI", sans-serif !important;
}

.ql-font-montserrat {
  font-family: "Montserrat", "Segoe UI", sans-serif !important;
}

.ql-font-jura {
  font-family: "Jura", "Segoe UI", sans-serif !important;
}

.ql-font-jost {
  font-family: "Jost", "Segoe UI", sans-serif !important;
}

.ql-font-quintessential {
  font-family: "Quintessential", "Times New Roman", serif !important;
}

.ql-font-condiment {
  font-family: "Condiment", "Times New Roman", cursive !important;
}

.ql-font-grape-nuts {
  font-family: "Grape Nuts", "Comic Sans MS", cursive !important;
}

.ql-font-vujahday-script {
  font-family: "Vujahday Script", "Comic Sans MS", cursive !important;
}

.ql-font-mansalva {
  font-family: "Mansalva", "Comic Sans MS", cursive !important;
}

.ql-font-indie-flower {
  font-family: "Indie Flower", "Comic Sans MS", cursive !important;
}

.ql-font-orbitron {
  font-family: "Orbitron", "Segoe UI", sans-serif !important;
}

.ql-font-geo {
  font-family: "Geo", "Segoe UI", sans-serif !important;
}

.ql-font-jim-nightshade {
  font-family: "Jim Nightshade", "Times New Roman", cursive !important;
}

.blog-home-page .entry-text,
.blog-list .entry-text,
.blog-page .entry-text,
.blog-space-page .entry-text,
.blog-post-page .entry-text {
  font-family: "Kalam", "Comic Sans MS", cursive;
}

.ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: "Default";
}

.ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label,
.ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item {
  font-family: var(--entry-font);
}

.ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="caveat"]::before,
.ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="caveat"]::before {
  content: "Caveat";
}

.ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="caveat"],
.ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="caveat"] {
  font-family: "Caveat", "Comic Sans MS", cursive;
}

.ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="kalam"]::before,
.ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="kalam"]::before {
  content: "Kalam";
}

.ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="kalam"],
.ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="kalam"] {
  font-family: "Kalam", "Comic Sans MS", cursive;
}

.ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="space-grotesk"]::before,
.ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="space-grotesk"]::before {
  content: "Space Grotesk";
}

.ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="space-grotesk"],
.ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="space-grotesk"] {
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
}

.ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="patrick-hand"]::before,
.ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="patrick-hand"]::before {
  content: "Patrick Hand";
}

.ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="patrick-hand"],
.ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="patrick-hand"] {
  font-family: "Patrick Hand", "Comic Sans MS", cursive;
}

.ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="handlee"]::before,
.ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="handlee"]::before {
  content: "Handlee";
}

.ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="handlee"],
.ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="handlee"] {
  font-family: "Handlee", "Comic Sans MS", cursive;
}

.ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="shadows-into-light"]::before,
.ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="shadows-into-light"]::before {
  content: "Shadows Into Light";
}

.ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="shadows-into-light"],
.ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="shadows-into-light"] {
  font-family: "Shadows Into Light", "Comic Sans MS", cursive;
}

.ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="aref-ruqaa"]::before,
.ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="aref-ruqaa"]::before {
  content: "Aref Ruqaa";
}

.ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="aref-ruqaa"],
.ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="aref-ruqaa"] {
  font-family: "Aref Ruqaa", "Times New Roman", serif;
}

.ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="imperial-script"]::before,
.ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="imperial-script"]::before {
  content: "Imperial Script";
}

.ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="imperial-script"],
.ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="imperial-script"] {
  font-family: "Imperial Script", "Times New Roman", serif;
}

.ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="eagle-lake"]::before,
.ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="eagle-lake"]::before {
  content: "Eagle Lake";
}

.ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="eagle-lake"],
.ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="eagle-lake"] {
  font-family: "Eagle Lake", "Times New Roman", serif;
}

.ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="lavishly-yours"]::before,
.ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="lavishly-yours"]::before {
  content: "Lavishly Yours";
}

.ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="lavishly-yours"],
.ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="lavishly-yours"] {
  font-family: "Lavishly Yours", "Times New Roman", serif;
}

.entry-text p {
  margin: 0 0 1rem;
}

.entry-text p:last-child {
  margin-bottom: 0;
}

.entry-text ul,
.entry-text ol {
  margin: 0 0 1rem 1.2rem;
  padding-left: 1.2rem;
}

.entry-text li {
  margin: 0 0 0.35rem;
}

.entry-text blockquote {
  margin: 0 0 1rem;
  padding: 6px 12px;
  border-left: 3px solid var(--accent);
  color: var(--muted);
  font-style: italic;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 10px;
}

.entry-text code {
  font-family: "JetBrains Mono", "Fira Code", "Consolas", monospace;
  font-size: 0.92em;
  background: rgba(0, 0, 0, 0.06);
  padding: 2px 6px;
  border-radius: 8px;
}

.entry-text pre {
  font-family: "JetBrains Mono", "Fira Code", "Consolas", monospace;
  font-size: 0.92em;
  background: rgba(0, 0, 0, 0.06);
  padding: 12px;
  border-radius: 12px;
  overflow: auto;
  white-space: pre-wrap;
  margin: 0 0 1rem;
}

.entry-text pre code {
  background: transparent;
  padding: 0;
}

.entry-text h1,
.entry-text h2,
.entry-text h3,
.entry-text h4,
.entry-text h5 {
  margin: 0 0 0.6rem;
  font-family: var(--entry-font);
}

.entry-title {
  font-family: var(--entry-font) !important;
  margin: 0 0 14px;
}

.blog-post-page .entry-title {
  font-family: "Kalam", "Comic Sans MS", cursive !important;
}

.entry-title + .entry-text {
  margin-top: 0;
}

.encrypted-entry {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--panel-bg-soft);
  color: var(--muted);
  font-family: var(--entry-font);
}

#content {
  font-family: var(--entry-font);
}

.post-images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.music-chip-stack {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.music-chip-panel .music-chip-stack {
  margin-top: 0;
}

.chain-entry .music-chip-stack {
  margin-top: 0;
}

.music-chip {
  --music-art-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel-bg-soft) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  color: var(--ink);
  font-family: var(--entry-font);
  position: relative;
}

.sidebar .music-chip {
  --music-art-ratio: 1 / 1;
  padding: 10px 12px;
  gap: 10px;
}

.music-chip--board {
  --music-art-ratio: 16 / 9;
  height: 100%;
}

.music-chip--node {
  --music-art-ratio: 1 / 1;
  padding: 8px 10px;
  gap: 10px;
}

.music-chip--node .music-chip-body {
  align-items: flex-start;
}

.music-chip--node .music-chip-controls {
  gap: 6px;
  justify-content: flex-start;
}

.music-chip--node .music-chip-info {
  font-size: 0.78rem;
  flex-basis: 55%;
}

.music-chip--node .music-chip-buttons {
  gap: 4px;
}

.music-chip--node .music-chip-control {
  padding: 4px 8px;
  font-size: 0.65rem;
}

.music-chip-art {
  width: 100%;
  aspect-ratio: var(--music-art-ratio);
  height: auto;
  border-radius: 12px;
  overflow: hidden;
  background: color-mix(in srgb, var(--panel-bg) 70%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  position: relative;
}

.music-chip.has-video .music-chip-art {
  cursor: pointer;
}

.music-chip-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
}

.music-chip-art .music-chip-placeholder {
  position: relative;
  z-index: 1;
}

.music-chip-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  align-self: stretch;
  align-items: flex-start;
  justify-content: center;
}

.music-chip-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-start;
  width: 100%;
}

.music-chip-info {
  margin-left: auto;
  flex: 0 1 60%;
  min-width: 0;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 1.2em;
}

.music-chip-info.is-empty {
  opacity: 0;
}

.music-chip-buttons {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.music-chip-control {
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  background: var(--panel-bg);
  color: var(--ink);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  line-height: 1;
}

.music-chip-control:hover {
  background: color-mix(in srgb, var(--accent) 18%, var(--panel-bg));
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
}

.music-chip-control:focus {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.music-chip-control .material-icons {
  font-size: 18px;
  line-height: 1;
}

.music-chip-control:disabled,
.music-chip-control[aria-disabled="true"] {
  opacity: 0.45;
  cursor: default;
}

.music-chip-player {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.music-chip.is-inline .music-chip-player {
  opacity: 1;
  pointer-events: auto;
}

.music-chip.is-inline .music-chip-art img,
.music-chip.is-inline .music-chip-art .music-chip-placeholder {
  opacity: 0;
  pointer-events: none;
}

.music-chip-player iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.music-chip.is-unavailable {
  opacity: 0.6;
}

.post-images .thumb {
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: var(--field-bg);
  border-radius: 14px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 240px;
  overflow: hidden;
}

.post-images .thumb-open {
  border: none;
  background: none;
  padding: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: pointer;
}

.post-images img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.post-images .thumb.thumb-youtube {
  height: auto;
  aspect-ratio: 16 / 9;
  background: #000000;
}

.post-images .thumb.thumb-youtube img {
  object-fit: contain;
  object-position: center;
}

.post-images .thumb.thumb-youtube .thumb-open {
  position: relative;
}

.post-images .thumb.thumb-youtube .thumb-open::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 66px;
  height: 46px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.52);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32);
}

.post-images .thumb.thumb-youtube .thumb-open::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-37%, -50%);
  width: 0;
  height: 0;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 18px solid #ffffff;
}

.post-images .thumb.thumb-youtube.is-inline-playing .thumb-open img,
.post-images .thumb.thumb-youtube.is-inline-playing .thumb-open::before,
.post-images .thumb.thumb-youtube.is-inline-playing .thumb-open::after {
  opacity: 0;
}

.post-images .thumb .thumb-inline-player {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 12px;
  overflow: hidden;
}

.post-images .thumb .thumb-inline-player iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.entry-text img[data-lightbox] {
  cursor: zoom-in;
}

.video-thumb {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.08);
  color: var(--muted);
  font-weight: 600;
}

.post-images .thumb-delete {
  position: absolute;
  top: 8px;
  right: 8px;
  border: none;
  background: var(--accent);
  color: #0b1b1a;
  border-radius: 999px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: 700;
}

.post-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  position: relative;
  z-index: 2;
  overflow: visible;
}

.post-menu {
  position: relative;
}

.post-menu[open] {
  z-index: 1600;
}

.post-menu-trigger {
  min-width: 40px;
  width: 40px;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.post-menu-panel {
  min-width: 220px;
  width: min(78vw, 260px);
  padding: 8px;
  gap: 8px;
  z-index: 1650;
}

.post-menu.settings-menu-up .post-menu-panel {
  top: auto;
  bottom: calc(100% + 8px);
}

.post-menu-panel .ghost-button,
.post-menu-panel a {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
}

.lightbox {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1800;
}

.lightbox.open {
  display: flex;
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 12, 16, 0.75);
}

.lightbox-content {
  position: relative;
  z-index: 1;
  max-width: min(90vw, 1100px);
  max-height: 85vh;
  background: var(--panel-bg);
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 12px;
}

.lightbox-content #lightbox-media {
  display: grid;
  place-items: center;
}

.lightbox-content #lightbox-media img,
.lightbox-content #lightbox-media video,
.lightbox-content #lightbox-media iframe {
  max-width: 100%;
  max-height: 70vh;
  width: min(80vw, 960px);
  aspect-ratio: 16 / 9;
  object-fit: contain;
  border-radius: 12px;
  border: none;
}

.lightbox-content #lightbox-media img {
  aspect-ratio: auto;
  height: auto;
}

.lightbox-content #lightbox-media video {
  background: #111;
}

.lightbox-close {
  justify-self: end;
  border-radius: 999px;
  padding: 8px 16px;
  background: var(--accent);
  color: #0b1b1a;
  border: none;
  cursor: pointer;
}

.lightbox-prev,
.lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 248, 242, 0.95);
  color: var(--accent-dark);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 18px rgba(120, 70, 35, 0.18);
  transition: background 0.2s ease, color 0.2s ease;
}

.lightbox-prev {
  left: -12px;
}

.lightbox-next {
  right: -12px;
}

.lightbox-prev:disabled,
.lightbox-next:disabled {
  opacity: 0.4;
  cursor: default;
}

.lightbox-prev:hover,
.lightbox-next:hover {
  transform: translateY(-50%);
}

.modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1200;
  padding: 18px;
}

#confirm-modal {
  z-index: 1700;
}

#category-modal {
  z-index: 1700;
}

#chain-board-entry-modal {
  z-index: 1700;
}

#chain-board-media-modal {
  z-index: 1700;
}

#chain-board-compose-modal {
  z-index: 1700;
}

#chain-board-archived-modal {
  z-index: 1700;
}

.modal.open {
  display: flex;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 8, 12, 0.3);
}

.modal-card {
  position: relative;
  z-index: 1;
  background: color-mix(in srgb, var(--panel-bg) 88%, #ffffff 12%);
  border-radius: 12px;
  padding: 16px 18px;
  width: min(92vw, 500px);
  max-height: min(82vh, 700px);
  overflow: auto;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.32);
  display: grid;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--panel-border) 84%, transparent);
  backdrop-filter: blur(14px) saturate(125%);
}

#export-modal .modal-card {
  width: min(92vw, 540px);
}

.modal-card h3 {
  margin: 0;
  font-family: "Fraunces", "Times New Roman", serif;
  font-size: 1.45rem;
  line-height: 1.15;
}

.modal-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.modal-subtitle {
  margin: 0;
  color: var(--accent-dark);
  font-weight: 600;
}

.modal-body {
  white-space: pre-wrap;
  font-family: var(--entry-font);
  color: var(--ink);
  line-height: 1.6;
  max-height: 50vh;
  overflow: auto;
}

.modal-body.modal-body-rich {
  white-space: normal;
}

.modal-body.modal-body-rich .poem-line {
  margin: 0 0 6px;
}

.modal-body.modal-body-rich .poem-section {
  margin: 12px 0 6px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.modal-body.modal-body-rich .poem-break {
  height: 14px;
}

.modal-body.modal-body-rich .quote-block {
  margin: 0;
  padding: 0;
}

.modal-body.modal-body-rich .quote-block p {
  margin: 0 0 10px;
  font-style: italic;
}

.modal-body.modal-body-rich .quote-block footer {
  color: var(--muted);
  font-weight: 600;
}

#chain-modal .modal-card {
  width: min(92vw, 700px);
}

.chain-empty {
  margin: 0;
  color: var(--muted);
}

.chain-entry {
  padding: 12px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel-bg) 84%, #0f172a 16%);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}

.chain-entry + .chain-entry {
  margin-top: 12px;
}

.chain-entry.is-focus {
  border-color: color-mix(in srgb, var(--accent) 64%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
}

.chain-entry-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 0.9rem;
}

.chain-focus-badge {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-dark);
}

.chain-entry-body > *:first-child {
  margin-top: 0;
}

.chain-entry-body > *:last-child {
  margin-bottom: 0;
}

.chain-encrypted {
  margin: 0;
  color: var(--muted);
}

.chain-view-header {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.chain-view {
  min-width: 0;
}

.chain-entry,
.chain-entry-body {
  min-width: 0;
  overflow-wrap: anywhere;
}

.chain-entry-body img {
  display: block;
  max-width: 100% !important;
  max-height: min(72vh, 980px);
  width: auto !important;
  height: auto !important;
  border-radius: 12px;
  margin: 0.8rem auto;
  object-fit: contain;
}

.chain-entry-body video,
.chain-entry-body iframe {
  display: block;
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 12px;
  margin: 0.8rem 0;
}

.chain-entry-body {
  overflow: hidden;
  font-family: var(--entry-font);
  line-height: 1.7;
}

.chain-entry.chain-entry-media .post-images {
  margin-top: 0;
}

.chain-entry.chain-entry-media .post-images img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

.chain-view-header h3 {
  margin: 0;
}

.chain-view-header p {
  margin: 0;
  color: var(--muted);
}

.chain-board-modal {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: none;
  background: rgba(8, 12, 18, 0.32);
  touch-action: none;
  overscroll-behavior: contain;
}

.chain-board-modal.open {
  display: block;
}

.chain-board-shell {
  position: absolute;
  inset: 12px;
  border-radius: 16px;
  overflow: hidden;
  background: color-mix(in srgb, var(--panel-bg) 84%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  backdrop-filter: blur(10px) saturate(120%);
  display: grid;
  grid-template-rows: auto 1fr;
  touch-action: none;
}

.chain-board-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}

.chain-board-heading {
  display: grid;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.chain-board-title,
.chain-board-description {
  color: var(--ink);
  width: 100%;
}

select.chain-board-title {
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: 12px;
  background-color: color-mix(in srgb, var(--field-bg) 88%, transparent);
  padding: 8px 34px 8px 12px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 1px),
    calc(100% - 13px) calc(50% - 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.chain-board-title {
  font-size: 1.2rem;
  font-weight: 700;
}

.chain-board-description {
  color: var(--muted);
  background: transparent;
  border: none;
}

.chain-board-title:focus,
.chain-board-description:focus {
  outline: none;
}

.chain-board-title:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 1px;
}

select.chain-board-title option,
select.chain-board-title optgroup {
  background-color: color-mix(in srgb, var(--panel-bg) 92%, #10151b 8%);
  color: var(--ink);
}

.chain-board-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.chain-board-action-btn {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
  background: var(--field-bg);
  color: var(--accent-dark);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  flex: 0 0 auto;
  line-height: 1;
}

.chain-board-action-btn.chain-board-action-text {
  width: auto;
  min-width: 92px;
  padding: 0 14px;
  font-size: 0.88rem;
  font-weight: 700;
}

.chain-board-action-btn .material-icons,
.chain-board-action-btn .material-symbols-outlined {
  font-size: 20px;
}

.chain-board-action-btn:hover {
  background: var(--field-bg);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(10, 20, 30, 0.18);
}

.chain-board-action-btn.is-active {
  background: color-mix(in srgb, var(--accent) 20%, var(--field-bg));
  color: var(--accent-dark);
  box-shadow: 0 6px 16px rgba(10, 20, 30, 0.2);
}

.chain-board-action-btn.danger {
  background: color-mix(in srgb, var(--danger) 18%, var(--field-bg));
  color: var(--danger);
}

.chain-board-action-btn.danger:hover {
  background: color-mix(in srgb, var(--danger) 22%, var(--field-bg));
}

.chain-board-body {
  position: relative;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
}

.chain-board-canvas {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: default;
  background: color-mix(in srgb, var(--panel-bg-soft) 60%, transparent);
  z-index: 1;
  touch-action: none;
  overscroll-behavior: contain;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.chain-board-canvas.is-panning {
  cursor: grabbing;
}

.public-tree-panel {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--panel-border) 86%, transparent);
  display: grid;
  gap: 10px;
}

.public-tree-page-panel {
  margin-top: 0;
  padding-top: 28px;
  border-top: none;
}

.public-tree-inline-panel {
  margin: 14px 0;
  padding-top: 0;
  border-top: none;
}

.public-tree-page-panel .public-tree-head {
  margin-bottom: 2px;
}

.public-tree-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.public-tree-head h3 {
  margin: 0;
}

.public-tree-head .subhead {
  margin: 4px 0 0;
}

.public-tree-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.public-tree-action-btn {
  text-decoration: none;
}

.public-tree-actions a.public-tree-action-btn,
.public-tree-actions a.public-tree-action-btn:visited,
.public-tree-actions a.public-tree-action-btn:hover,
.public-tree-actions a.public-tree-action-btn:active,
.public-tree-actions a.public-tree-action-btn:focus,
.public-tree-actions a.public-tree-action-btn:focus-visible {
  color: var(--accent-dark);
  text-decoration: none;
}

.public-tree-actions a.public-tree-action-btn.danger,
.public-tree-actions a.public-tree-action-btn.danger:visited,
.public-tree-actions a.public-tree-action-btn.danger:hover,
.public-tree-actions a.public-tree-action-btn.danger:active,
.public-tree-actions a.public-tree-action-btn.danger:focus,
.public-tree-actions a.public-tree-action-btn.danger:focus-visible {
  color: var(--danger);
}

.public-tree-action-btn[aria-disabled="true"] {
  opacity: 0.48;
  pointer-events: none;
}

.public-tree-lock-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 4px 0 6px;
}

.public-tree-overflow-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.public-tree-overflow-menu {
  position: relative;
}

.public-tree-menu-trigger {
  list-style: none;
}

.public-tree-menu-trigger::marker {
  content: "";
}

.public-tree-overflow-menu[open] .public-tree-menu-trigger {
  background: color-mix(in srgb, var(--accent) 16%, var(--field-bg));
  color: var(--accent-dark);
}

.public-tree-overflow-panel {
  min-width: 250px;
  width: min(76vw, 300px);
  padding: 10px;
  gap: 8px;
}

.public-tree-overflow-grid {
  display: grid;
  gap: 8px;
}

.public-tree-menu-item {
  width: 100%;
  min-height: 38px;
  border: none;
  border-radius: 10px;
  background: var(--field-bg);
  color: var(--ink);
  padding: 7px 9px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  text-align: left;
  font-size: 0.84rem;
  font-weight: 600;
}

.public-tree-menu-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(10, 20, 30, 0.16);
}

.public-tree-menu-item:disabled,
.public-tree-menu-item[aria-disabled="true"] {
  opacity: 0.46;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.public-tree-menu-item:disabled:hover,
.public-tree-menu-item[aria-disabled="true"]:hover {
  transform: none;
  box-shadow: none;
}

.public-tree-menu-item .material-symbols-outlined {
  font-size: 18px;
  color: var(--accent-dark);
}

.public-tree-menu-item.is-active {
  background: color-mix(in srgb, var(--accent) 18%, var(--field-bg));
}

.public-tree-menu-item.danger {
  background: color-mix(in srgb, var(--danger) 14%, var(--field-bg));
  color: var(--danger);
}

.public-tree-menu-item.danger .material-symbols-outlined {
  color: var(--danger);
}

.public-tree-thread-controls {
  position: relative;
}

.public-tree-info-note {
  margin: 0;
  color: var(--muted);
  flex: 1 1 340px;
}

.public-tree-share {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.public-tree-share-bottom {
  margin-top: 12px;
  padding-top: 10px;
}

.public-tree-share-caption {
  color: var(--muted);
  font-size: 0.92rem;
  white-space: nowrap;
}

.public-tree-share .share-actions {
  margin-top: 0;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  width: 100%;
  min-width: max-content;
}

.public-tree-share [data-public-tree-share-actions] {
  flex: 1 1 auto;
  min-width: 0;
}

.public-tree-status {
  margin: 0;
}

.public-tree-canvas {
  position: relative;
  height: clamp(320px, 58vh, 560px);
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  background: color-mix(in srgb, var(--panel-bg-soft) 58%, transparent);
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.public-tree-page-panel .public-tree-canvas {
  height: clamp(460px, 74vh, 860px);
}

.public-tree-inline-panel .public-tree-canvas {
  height: clamp(280px, 52vh, 520px);
}

.inline-youtube-embed {
  width: min(100%, 980px);
  margin: 14px auto;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  background: color-mix(in srgb, var(--panel-bg-soft) 58%, transparent);
}

.inline-youtube-embed iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

.public-tree-canvas.is-panning {
  cursor: grabbing;
}

.public-tree-canvas .chain-board-links,
.public-tree-canvas .chain-board-nodes {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--tree-world-w, 1200px);
  height: var(--tree-world-h, 900px);
}

.public-tree-canvas .chain-board-links {
  z-index: 1;
  pointer-events: none;
}

.public-tree-canvas .chain-board-nodes {
  z-index: 2;
  pointer-events: auto;
}

.public-tree-canvas .chain-board-link {
  stroke: color-mix(in srgb, #b45a5e 80%, #ffffff);
  opacity: 0.78;
}

.public-tree-canvas.is-thread-mode .chain-board-link {
  opacity: 0.2;
}

.public-tree-canvas .chain-board-link.is-thread-muted {
  opacity: 0.12;
}

.public-tree-canvas .chain-board-link.is-thread-downstream {
  opacity: 0.55;
}

.public-tree-canvas .chain-board-link.is-thread-upstream {
  stroke: color-mix(in srgb, #b33f44 72%, #ffffff);
  opacity: 0.44;
}

.public-tree-canvas .chain-board-link.is-thread-current {
  stroke: color-mix(in srgb, #b33f44 86%, #ffffff);
  opacity: 0.9;
}

.public-tree-node {
  cursor: default;
  min-height: 168px;
  padding: 12px 12px 12px;
  gap: 8px;
  justify-content: flex-start;
}

.public-tree-node:hover {
  transform: none;
}

.public-tree-canvas.is-thread-mode .public-tree-node {
  transition: opacity 0.2s ease, filter 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.public-tree-node.is-thread-muted {
  opacity: 0.22;
  filter: saturate(0.35);
}

.public-tree-node.is-thread-downstream {
  opacity: 1;
}

.public-tree-node.is-thread-upstream {
  opacity: 0.72;
  border-color: color-mix(in srgb, #b33f44 48%, var(--line));
  background: color-mix(in srgb, var(--panel) 92%, #f4d8d9);
}

.public-tree-node.is-thread-current {
  opacity: 1;
  border-color: color-mix(in srgb, #b33f44 70%, var(--line));
  box-shadow: 0 8px 22px rgba(179, 63, 68, 0.2);
}

.public-tree-node.is-missing {
  border-style: dashed;
  opacity: 0.8;
}

.public-tree-node.is-withdrawn {
  border-color: color-mix(in srgb, var(--line) 70%, #b45a5e);
  background: color-mix(in srgb, var(--panel) 88%, #122030);
}

.public-tree-node.is-withdrawn .public-tree-node-title {
  color: var(--muted);
  font-style: italic;
}

.public-tree-node-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.public-tree-node-title {
  margin: 0;
  font-size: 1.04rem;
  line-height: 1.28;
}

.public-tree-node-title a {
  color: var(--ink);
  text-decoration: none;
}

.public-tree-node-title a:hover {
  text-decoration: underline;
}

.public-tree-node-author {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.35;
}

.public-tree-node-actions {
  margin-top: auto;
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 6px;
}

.public-tree-node-actions .ghost-button {
  min-height: 32px;
  padding: 5px 11px;
  font-size: 0.84rem;
  flex: 0 0 auto;
}

.chain-board-groups,
.chain-board-links,
.chain-board-notes,
.chain-board-media-layer,
.chain-board-nodes {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
}

.chain-board-groups {
  z-index: 0;
  pointer-events: none;
}

.chain-board-links {
  z-index: 1;
  overflow: visible;
  pointer-events: none;
}

.chain-board-notes {
  z-index: 2;
  pointer-events: none;
}

.chain-board-media-layer {
  z-index: 2;
  pointer-events: none;
}

.chain-board-nodes {
  z-index: 3;
  pointer-events: none;
}

.chain-board-link {
  fill: none;
  stroke: #b45a5e;
  stroke-width: 2;
  opacity: 0.85;
  pointer-events: none;
}

.chain-board-link.is-selected {
  stroke-width: 3;
  opacity: 1;
}

.chain-board-link-preview {
  fill: none;
  stroke: color-mix(in srgb, #b45a5e 70%, #ffffff);
  stroke-width: 2;
  opacity: 0.6;
  stroke-linecap: round;
  stroke-dasharray: 6 6;
  pointer-events: none;
}

.chain-board-link-preview.is-target {
  opacity: 0.9;
  stroke-dasharray: 8 5;
}

.chain-board-link-hit {
  fill: none;
  stroke: rgba(255, 255, 255, 0.001);
  stroke-width: 40;
  stroke-linecap: round;
  pointer-events: stroke;
  cursor: pointer;
}

@media (pointer: coarse) {
  .chain-board-link-hit {
    stroke-width: 56;
  }
}

.chain-board-link-handle {
  fill: color-mix(in srgb, #b45a5e 55%, transparent);
  pointer-events: none;
}

.chain-board-link-handle-hit {
  fill: transparent;
  pointer-events: all;
  cursor: pointer;
}

.chain-board-node {
  position: absolute;
  width: 250px;
  min-width: 210px;
  min-height: 110px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: 14px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--panel-bg) 92%, #f5f2eb 8%);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.2);
  cursor: grab;
  overflow: visible;
  pointer-events: auto;
}

.chain-board-note {
  position: absolute;
  width: 260px;
  min-width: 180px;
  min-height: 120px;
  border-radius: 12px;
  padding: 10px 12px 18px;
  background: color-mix(in srgb, var(--note-color, #f6df6d) 90%, #fff6b5 10%);
  border: 1px solid color-mix(in srgb, var(--note-color, #f6df6d) 70%, #7b6611 30%);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
  cursor: default;
  overflow: visible;
  pointer-events: auto;
}

.chain-board-note:active {
  cursor: grabbing;
}

.chain-board-note.is-selected {
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent) 38%, transparent),
    0 8px 20px rgba(0, 0, 0, 0.22);
}

.chain-board-note-body {
  height: calc(100% - 14px);
  overflow: auto;
  white-space: pre-wrap;
  color: #111111;
  font-family: var(--entry-font);
  line-height: 1.5;
  font-size: 0.95rem;
  outline: none;
  cursor: text;
  -webkit-user-select: text;
  user-select: text;
}

.chain-board-note-resizer {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 14px;
  height: 14px;
  border: none;
  background: linear-gradient(135deg, transparent 45%, color-mix(in srgb, var(--ink) 30%, transparent) 45%);
  cursor: nwse-resize;
  padding: 0;
}

.chain-board-note-handle {
  height: 12px;
  margin-bottom: 6px;
  border-radius: 8px;
  background:
    radial-gradient(circle, rgba(0, 0, 0, 0.28) 1.5px, transparent 1.5px) center / 14px 6px repeat-x;
  cursor: grab;
}

.chain-board-note-handle:active {
  cursor: grabbing;
}

.chain-board-media {
  position: absolute;
  width: 240px;
  min-width: 180px;
  min-height: 140px;
  border-radius: 12px;
  padding: 10px 12px 18px;
  background: color-mix(in srgb, var(--panel-bg) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
  cursor: default;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: visible;
  pointer-events: auto;
}

.chain-board-media:active {
  cursor: grabbing;
}

.chain-board-media.is-selected {
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent) 38%, transparent),
    0 8px 20px rgba(0, 0, 0, 0.22);
}

.chain-board-media-preview {
  flex: 1;
  border-radius: 10px;
  overflow: hidden;
  background: color-mix(in srgb, var(--panel-bg-soft) 84%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  width: 100%;
  appearance: none;
}

.chain-board-media-preview[data-media-type="youtube_music"] {
  background: transparent;
  border: none;
  cursor: default;
}

.chain-board-media-preview[data-media-type="youtube_music"] .music-chip {
  height: 100%;
}

.chain-board-media-preview img,
.chain-board-media-preview video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chain-board-media-placeholder {
  font-size: 0.9rem;
  color: var(--muted);
}

.chain-board-media-play {
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: color-mix(in srgb, #000000 50%, transparent);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  pointer-events: none;
}

.chain-board-media-resizer {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 14px;
  height: 14px;
  border: none;
  background: linear-gradient(135deg, transparent 45%, color-mix(in srgb, var(--ink) 30%, transparent) 45%);
  cursor: nwse-resize;
  padding: 0;
}

.chain-board-media-handle {
  height: 12px;
  border-radius: 8px;
  background:
    radial-gradient(circle, rgba(0, 0, 0, 0.28) 1.5px, transparent 1.5px) center / 14px 6px repeat-x;
  cursor: grab;
}

.chain-board-media-handle:active {
  cursor: grabbing;
}

.chain-board-group {
  position: absolute;
  border-radius: 16px;
  border: 2px solid var(--group-color, color-mix(in srgb, var(--accent) 38%, transparent));
  background: color-mix(in srgb, var(--group-color, #355d86) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffffff 6%, transparent);
  cursor: grab;
  overflow: visible;
  pointer-events: auto;
  user-select: none;
}

.chain-board-group:active {
  cursor: grabbing;
}

.chain-board-group.is-selected {
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent) 44%, transparent),
    inset 0 0 0 1px color-mix(in srgb, #ffffff 10%, transparent);
}

.chain-board-group-label {
  position: absolute;
  left: 12px;
  top: 10px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 72%, #ffffff 14%);
  pointer-events: none;
  user-select: none;
}

.chain-board-group-resizer {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 16px;
  height: 16px;
  border: none;
  background: linear-gradient(135deg, transparent 45%, color-mix(in srgb, var(--ink) 28%, transparent) 45%);
  cursor: nwse-resize;
  padding: 0;
}

.chain-board-node:hover {
  transform: translateY(-1px);
}

.chain-board-node:active {
  cursor: grabbing;
}

.chain-board-node.is-selected {
  border-color: color-mix(in srgb, var(--accent) 72%, transparent);
  border-width: 2px;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent),
    0 10px 26px rgba(0, 0, 0, 0.2);
}

.chain-board-node.is-connecting {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 48%, transparent);
}

.chain-board-media.is-connecting {
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent) 48%, transparent),
    0 8px 20px rgba(0, 0, 0, 0.22);
}

.chain-board-node-date {
  color: var(--muted);
  font-size: 0.86rem;
}

.chain-board-node-image {
  border-radius: 10px;
  overflow: hidden;
  background: color-mix(in srgb, var(--panel-bg-soft) 84%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}

.chain-board-node-image img {
  display: block;
  width: 100%;
  max-height: 120px;
  object-fit: cover;
}

.chain-board-node-excerpt {
  color: var(--muted);
  font-size: 0.95rem;
  font-family: var(--entry-font);
  line-height: 1.6;
  white-space: normal;
  overflow: auto;
  flex: 1;
  min-height: 0;
}

.chain-board-node-excerpt.entry-text {
  color: var(--ink);
}

.chain-board-node-excerpt.entry-text img,
.chain-board-node-excerpt.entry-text video,
.chain-board-node-excerpt.entry-text iframe {
  display: none !important;
}

.chain-board-node-excerpt.entry-text p {
  margin: 0 0 0.45rem;
}

.chain-board-node-excerpt.entry-text p:last-child {
  margin-bottom: 0;
}

.chain-board-node-pin {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #b45a5e;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  pointer-events: auto;
  cursor: crosshair;
}

.chain-board-media-pin {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 62%, #b45a5e);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  pointer-events: auto;
  cursor: crosshair;
}

.chain-board-node-pin,
.chain-board-media-pin {
  transition: box-shadow 0.18s ease, background 0.18s ease;
}

.chain-board-node-pin.is-target {
  background: color-mix(in srgb, #b45a5e 82%, #ffffff);
  box-shadow: 0 0 0 5px color-mix(in srgb, #b45a5e 35%, transparent),
    0 2px 6px rgba(0, 0, 0, 0.35);
}

.chain-board-media-pin.is-target {
  background: color-mix(in srgb, var(--accent) 70%, #ffffff);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 35%, transparent),
    0 2px 6px rgba(0, 0, 0, 0.35);
}

.chain-board-node-resizer {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 14px;
  height: 14px;
  border: none;
  background: linear-gradient(135deg, transparent 45%, color-mix(in srgb, var(--ink) 26%, transparent) 45%);
  cursor: nwse-resize;
  padding: 0;
}

.chain-board-node.unattached {
  opacity: 0.74;
}

.chain-board-drawer {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 12;
  width: min(86vw, 360px);
  background: color-mix(in srgb, var(--panel-bg) 90%, transparent);
  border-left: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  transform: translateX(102%);
  transition: transform 0.2s ease;
  pointer-events: none;
  visibility: hidden;
  padding: 14px;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 10px;
  will-change: transform;
  contain: layout paint;
}

.chain-board-drawer.open {
  transform: translateX(0);
  pointer-events: auto;
  visibility: visible;
}

#chain-board-drawer {
  left: 0;
  right: auto;
  border-left: none;
  border-right: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  transform: translateX(-102%);
}

#chain-board-drawer.open {
  transform: translateX(0);
}

.chain-board-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.chain-board-results {
  overflow: auto;
  display: grid;
  gap: 10px;
}

.chain-board-result {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--panel-bg-soft);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}

.chain-board-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.chain-board-result-title {
  font-weight: 700;
}

.chain-board-result-date {
  color: var(--muted);
  font-size: 0.82rem;
}

.chain-board-result-source {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}

.chain-board-result-excerpt {
  color: var(--muted);
  font-size: 0.9rem;
  font-family: var(--entry-font);
  line-height: 1.55;
}

.chain-board-result-excerpt.entry-text {
  color: var(--ink);
}

.modal-input {
  width: 100%;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  background: color-mix(in srgb, var(--field-bg) 90%, #ffffff 10%);
  color: var(--ink);
  font: inherit;
}

.modal-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-row.modal-row-stack {
  flex-direction: column;
  align-items: stretch;
}

.modal-row .modal-input {
  flex: 1;
}

.modal-row .modal-input.modal-color {
  flex: 0 0 auto;
  width: 42px;
  height: 38px;
}

.modal-color {
  padding: 0;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  background: color-mix(in srgb, var(--field-bg) 88%, #ffffff 12%);
}

.modal-textarea {
  min-height: 130px;
  resize: vertical;
}

#chain-board-compose-modal .modal-card {
  width: min(92vw, 560px);
}

#chain-board-compose-content {
  min-height: 210px;
}

#chain-board-archived-modal .modal-card {
  width: min(92vw, 600px);
}

.chain-board-archived-results {
  display: grid;
  gap: 8px;
  max-height: 42vh;
  overflow: auto;
  padding-right: 2px;
}

.chain-board-archived-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.chain-board-archived-item {
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  background: color-mix(in srgb, var(--field-bg) 90%, #ffffff 10%);
  border-radius: 10px;
  padding: 10px 12px;
  display: grid;
  gap: 4px;
  text-align: left;
  color: inherit;
  cursor: pointer;
}

.chain-board-archived-item:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--ink) 12%);
  background: color-mix(in srgb, var(--field-bg) 84%, var(--accent-soft) 16%);
}

.chain-board-archived-item.is-selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--field-bg) 78%, var(--accent-soft) 22%);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
}

.chain-board-archived-item-title {
  font-weight: 600;
  color: var(--ink);
}

.chain-board-archived-item-meta {
  font-size: 0.82rem;
  color: var(--muted);
}

.modal-hint {
  font-size: 0.84rem;
  color: var(--muted);
  margin: 2px 0 0;
}

.spotify-embed {
  margin-top: 14px;
}

.spotify-embed iframe {
  border: none;
  border-radius: 12px;
}

.modal-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.modal-form {
  display: grid;
  gap: 12px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.modal-actions.modal-actions-equal > * {
  flex: 1 1 120px;
}

.modal-actions > * {
  order: 1;
}

.modal-actions [data-confirm-action="cancel"],
.modal-actions [data-export-close],
.modal-actions [data-suggest-cancel],
.modal-actions [data-category-modal-cancel] {
  order: 2;
}

.modal .ghost-button,
.modal .modal-actions a.ghost-button {
  width: auto;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  background: color-mix(in srgb, var(--field-bg) 92%, #ffffff 8%);
  color: var(--ink);
  font-size: 0.94rem;
  font-weight: 600;
  text-decoration: none;
}

.modal .ghost-button:hover,
.modal .modal-actions a.ghost-button:hover {
  background: color-mix(in srgb, var(--field-bg) 80%, var(--accent) 20%);
  border-color: color-mix(in srgb, var(--ink) 28%, transparent);
  transform: none;
}

.modal .ghost-button:active,
.modal .modal-actions a.ghost-button:active {
  transform: translateY(1px);
}

.modal .ghost-button.danger {
  background: color-mix(in srgb, var(--danger) 16%, var(--field-bg));
  border-color: color-mix(in srgb, var(--danger) 35%, transparent);
  color: var(--danger);
}

.modal .ghost-button.danger:hover {
  background: color-mix(in srgb, var(--danger) 24%, var(--field-bg));
}

#suggest-form {
  display: grid;
  gap: 16px;
}

.export-actions {
  justify-content: flex-end;
}

.export-format-row {
  gap: 6px;
}

.export-format-row label {
  font-size: 0.86rem;
  color: var(--muted);
  font-weight: 600;
}

#export-modal [data-export-submit] {
  background: color-mix(in srgb, var(--accent) 70%, #ffffff 30%);
  border-color: color-mix(in srgb, var(--accent-dark) 40%, transparent);
  color: #1f1a16;
}

#export-modal [data-export-submit]:hover {
  background: color-mix(in srgb, var(--accent) 78%, #ffffff 22%);
}

.admin-open-user-modal-card {
  width: min(92vw, 640px);
}

.admin-open-user-results {
  display: grid;
  gap: 6px;
  max-height: min(44vh, 330px);
  overflow: auto;
  padding-right: 2px;
}

.admin-open-user-result {
  border: 1px solid color-mix(in srgb, var(--panel-border) 82%, transparent);
  background: color-mix(in srgb, var(--panel-bg-soft) 86%, transparent);
  border-radius: 8px;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  text-align: left;
  width: 100%;
}

.admin-open-user-result:hover {
  border-color: color-mix(in srgb, var(--accent) 38%, transparent);
}

.admin-open-user-result.is-selected {
  border-color: color-mix(in srgb, var(--accent) 48%, transparent);
  background: color-mix(in srgb, var(--accent) 11%, var(--panel-bg-soft));
}

.admin-open-user-result-select {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 2px;
  text-align: left;
  width: 100%;
  cursor: pointer;
}

.admin-open-user-result-select:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 48%, transparent);
  outline-offset: 2px;
  border-radius: 6px;
}

.admin-open-user-grandfather-btn {
  font-size: 0.76rem;
  padding: 5px 10px;
  line-height: 1.2;
  white-space: nowrap;
}

.admin-open-user-grandfather-btn.is-active {
  border-color: color-mix(in srgb, #1f7a39 45%, transparent);
  background: color-mix(in srgb, #1f7a39 15%, var(--field-bg));
  color: #1f7a39;
}

.admin-open-user-result-name {
  font-weight: 700;
  color: var(--ink);
}

.admin-open-user-result-meta {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.admin-open-user-activity.is-active {
  color: #1f7a39;
}

.admin-open-user-activity.is-inactive {
  color: #8a4a2c;
}

.admin-user-entries-modal-card {
  width: min(94vw, 920px);
}

.admin-user-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 6px;
}

.admin-user-tab {
  border: 1px solid color-mix(in srgb, var(--panel-border) 82%, transparent);
  background: color-mix(in srgb, var(--panel-bg-soft) 90%, transparent);
  color: var(--ink);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
}

.admin-user-tab:hover {
  border-color: color-mix(in srgb, var(--accent) 48%, transparent);
}

.admin-user-tab.is-active {
  border-color: color-mix(in srgb, var(--accent) 56%, transparent);
  background: color-mix(in srgb, var(--accent) 16%, var(--panel-bg-soft));
}

.admin-user-tab-panel {
  display: grid;
  gap: 8px;
}

.admin-user-tab-panel[hidden] {
  display: none;
}

.admin-user-moderation-panel {
  border: 1px solid color-mix(in srgb, var(--panel-border) 82%, transparent);
  background: color-mix(in srgb, var(--panel-bg-soft) 86%, transparent);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-user-moderation-copy {
  display: grid;
  gap: 2px;
}

.admin-user-moderation-title {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ink);
}

.admin-user-moderation-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-user-entries-surface {
  display: grid;
  gap: 8px;
  max-height: min(60vh, 560px);
  overflow: auto;
  padding-right: 2px;
}

.admin-user-interactions-surface {
  display: grid;
  gap: 8px;
  max-height: min(48vh, 440px);
  overflow: auto;
  padding-right: 2px;
}

.admin-user-entry {
  border: 1px solid color-mix(in srgb, var(--panel-border) 84%, transparent);
  background: color-mix(in srgb, var(--panel-bg-soft) 88%, transparent);
  border-radius: 10px;
  padding: 10px 12px;
  display: grid;
  gap: 6px;
}

.admin-user-entry-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-user-entry-id {
  font-size: 0.8rem;
  color: var(--accent-dark);
  font-weight: 700;
  letter-spacing: 0.03em;
}

.admin-user-entry-date {
  color: var(--muted);
  font-size: 0.82rem;
}

.admin-user-entry-published {
  margin: 0;
  font-size: 0.84rem;
}

.admin-user-entry-content {
  margin: 0;
  font-family: var(--entry-font);
  line-height: 1.5;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.admin-user-entry-content.is-encrypted {
  color: var(--muted);
  font-style: italic;
}

.admin-user-interaction {
  border: 1px solid color-mix(in srgb, var(--panel-border) 84%, transparent);
  background: color-mix(in srgb, var(--panel-bg-soft) 88%, transparent);
  border-radius: 10px;
  padding: 10px 12px;
  display: grid;
  gap: 6px;
}

.admin-user-interaction-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-user-interaction-direction {
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.admin-user-interaction-direction.is-incoming {
  color: #1f7a39;
  background: color-mix(in srgb, #1f7a39 14%, #ffffff);
}

.admin-user-interaction-direction.is-outgoing {
  color: #20539a;
  background: color-mix(in srgb, #20539a 14%, #ffffff);
}

.admin-user-interaction-date {
  color: var(--muted);
  font-size: 0.82rem;
}

.admin-user-interaction-meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.admin-user-interaction-body {
  margin: 0;
  color: var(--ink);
}

.empty {
  padding: 20px;
  border-radius: 16px;
  background: var(--field-bg);
  color: var(--muted);
  text-align: center;
}

.subscription-card {
  display: grid;
  gap: 12px;
}

.subscription-card p {
  color: var(--muted);
  line-height: 1.6;
}

.guest-intro {
  background: var(--panel-bg);
  border: none;
  border-radius: 22px;
  padding: 26px;
  box-shadow: none;
  display: grid;
  gap: 24px;
}

.guest-intro img {
  width: 100%;
  border-radius: 18px;
  height: 240px;
  object-fit: cover;
  transition: opacity 0.8s ease;
}

.guide-image {
  width: 100%;
  border-radius: 16px;
  height: clamp(180px, 32vw, 320px);
  object-fit: cover;
  margin-top: 16px;
}

.info-content h2 {
  margin: 18px 0 6px;
}

.info-content h2:first-child {
  margin-top: 0;
}

.info-content h2 + p,
.info-content h2 + ul,
.info-content h2 + ol {
  margin-top: 6px;
}

.info-content p + h2,
.info-content ul + h2,
.info-content ol + h2 {
  margin-top: 18px;
}

.info-content p,
.info-content li {
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.6;
}

.guest-copy {
  display: grid;
  gap: 14px;
}

.guest-copy h2 {
  font-family: "Fraunces", "Times New Roman", serif;
  font-size: 1.6rem;
  margin-bottom: 6px;
}

.guest-copy p {
  color: var(--muted);
  line-height: 1.6;
  font-size: 0.98rem;
  margin: 0 0 10px;
}

.guest-copy ul {
  display: grid;
  gap: 8px;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.5;
  margin: 6px 0 12px;
  font-size: 0.98rem;
}

.guest-copy li {
  padding-left: 2px;
}

.guest-copy li + li {
  margin-top: 2px;
}

.guest-copy-spacer {
  height: 10px;
}

.guest-copy .link-button {
  margin: 6px auto 0;
  justify-self: center;
  width: fit-content;
}

.inline-collapsible.tips-hero-widget {
  margin: 0 0 18px;
  padding: 0 18px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  background: var(--panel-bg-soft);
  background-image: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.inline-collapsible.tips-hero-widget.tab-content-widget {
  margin-bottom: 0;
}

.inline-collapsible.tips-hero-widget[open] {
  padding-bottom: 14px;
}

.inline-collapsible.tips-hero-widget summary {
  padding-top: 14px;
  padding-bottom: 12px;
}

.tips-hero-eyebrow {
  margin: 0;
  color: color-mix(in srgb, var(--accent) 68%, var(--ink) 32%);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  font-weight: 700;
}

.tips-hero-body {
  margin-top: 2px;
}

.tips-hero-track {
  position: relative;
}

.tips-hero-item {
  display: none;
}

.tips-hero-item.is-active {
  display: block;
  animation: tipsHeroFadeIn 0.24s ease;
}

@keyframes tipsHeroFadeIn {
  from {
    opacity: 0.15;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tips-hero-content {
  color: var(--ink);
  overflow: visible;
}

.mission-statement-widget .tips-hero-content {
  font-family: "Aref Ruqaa", "Times New Roman", serif;
}

.tab-widget-content > *:first-child {
  margin-top: 0;
}

.tab-widget-content > *:last-child {
  margin-bottom: 0;
}

.tips-hero-content.entry-text p:first-child,
.tips-hero-content.entry-text h1:first-child,
.tips-hero-content.entry-text h2:first-child,
.tips-hero-content.entry-text h3:first-child,
.tips-hero-content.entry-text h4:first-child,
.tips-hero-content.entry-text h5:first-child,
.tips-hero-content.entry-text ul:first-child,
.tips-hero-content.entry-text ol:first-child,
.tips-hero-content.entry-text blockquote:first-child,
.tips-hero-content.entry-text pre:first-child {
  margin-top: 0;
}

.tips-hero-meta {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--muted);
}

.tips-hero-meta a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

.tips-hero-meta a:hover {
  text-decoration: underline;
}

.tips-hero-dots {
  margin-top: 8px;
  display: flex;
  width: 100%;
  justify-content: center;
  gap: 7px;
}

.tips-hero-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  padding: 0;
  border: 0;
  background: color-mix(in srgb, var(--muted) 62%, transparent);
  min-width: 0;
  min-height: 0;
  transform: none;
}

.tips-hero-dot:hover {
  transform: none;
}

.tips-hero-dot.is-active {
  background: var(--accent);
}

.driver-popover.app-onboarding-popover {
  max-width: min(380px, 88vw);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  background: var(--panel-bg-soft);
  background-image: none;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.2);
  color: var(--ink);
}

.driver-popover.app-onboarding-popover .driver-popover-title {
  color: var(--ink);
  font-family: "Fraunces", "Times New Roman", serif;
  font-size: 1.02rem;
}

.driver-popover.app-onboarding-popover .driver-popover-description {
  color: color-mix(in srgb, var(--ink) 82%, var(--muted) 18%);
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  line-height: 1.5;
}

.driver-popover.app-onboarding-popover .driver-popover-close-btn {
  color: var(--muted);
}

.driver-popover.app-onboarding-popover .driver-popover-progress-text {
  color: var(--muted);
  font-size: 0.78rem;
}

.driver-popover.app-onboarding-popover .driver-popover-navigation-btns {
  gap: 8px;
}

.driver-popover.app-onboarding-popover .driver-popover-prev-btn,
.driver-popover.app-onboarding-popover .driver-popover-next-btn {
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  background: color-mix(in srgb, var(--field-bg) 92%, transparent);
  color: var(--ink);
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 6px 12px;
}

.driver-popover.app-onboarding-popover .driver-popover-prev-btn:hover,
.driver-popover.app-onboarding-popover .driver-popover-next-btn:hover {
  border-color: color-mix(in srgb, var(--accent) 44%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, var(--field-bg) 88%);
}

.tab-panel .link-button {
  display: block;
}

.tab-header {
  display: inline-flex;
  gap: 18px;
  padding: 0;
  border-radius: 0;
  border: none;
  background: transparent;
  margin-bottom: 12px;
  border-bottom: none;
}

.tab-button {
  border: none;
  background: transparent;
  padding: 6px 0 10px;
  border-radius: 0;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}

.tab-button.active {
  background: transparent;
  color: var(--ink);
  border-bottom: 2px solid var(--accent);
}

.tab-button[data-tab="features"] {
  display: none;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

.tab-panel h2 {
  margin-bottom: 8px;
}

.community-reflection-thread-list {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.community-reflection-thread {
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--field-bg) 88%, transparent);
  padding: 0 14px;
}

.community-reflection-thread summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 22px 12px 0;
}

.community-reflection-thread summary::-webkit-details-marker {
  display: none;
}

.community-reflection-thread-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.community-reflection-thread-question {
  font-weight: 600;
  line-height: 1.35;
}

.community-reflection-thread-count {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.community-reflection-thread-body {
  padding: 0 0 12px;
}

.community-reflection-preview-list {
  margin: 8px 0 12px;
  padding-left: 18px;
}

.community-reflection-preview-list li + li {
  margin-top: 6px;
}

.community-reflection-page-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.community-reflection-question-flat {
  margin: 4px 0 10px;
  padding: 0;
}

.community-reflection-question-flat .question-chip-label {
  margin: 0 0 8px;
}

.community-reflection-question-header {
  margin: 0;
  line-height: 1.35;
}

.community-reflection-feed-section {
  margin-top: 4px;
}

.community-reflection-feed-title {
  margin: 0 0 12px;
}

.community-reflection-feed {
  margin-top: 0;
}

.community-reflection-feed-item .entry-text {
  margin: 0;
}

.community-reflection-meta {
  margin: 0 0 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.86rem;
}

.feature-carousel {
  margin-top: 16px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  background: color-mix(in srgb, var(--panel-bg-soft) 78%, transparent);
  overflow: hidden;
  position: relative;
}

.feature-slide {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  transition: opacity 0.25s ease;
}

.feature-slide.is-fading {
  opacity: 0.35;
}

.feature-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(16, 22, 32, 0.45);
  backdrop-filter: blur(6px);
}

.feature-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45);
}

.feature-dot.active {
  background: #fff;
}

.blog-list {
  display: grid;
  gap: 16px;
}

.blog-more {
  margin-top: 16px;
  display: flex;
  justify-content: center;
}

.blog-nav {
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.blog-nav-button {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: none;
  background: var(--field-bg);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}

.blog-nav-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  display: block;
  fill: currentColor;
}

.blog-nav-icon path {
  fill: currentColor;
}

.blog-nav-button:hover {
  background: var(--panel-bg-soft);
  transform: translateY(-1px);
}

  .blog-nav-button:disabled {
    opacity: 0.4;
    cursor: default;
    transform: none;
  }

  .blog-tree {
    display: grid;
    gap: 16px;
    margin-top: 16px;
  }

  .blog-tree-node {
    background: var(--panel-bg);
    border-radius: 18px;
    padding: 16px 18px;
  }

  .blog-tree-node summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
  }

  .blog-tree-node summary::-webkit-details-marker {
    display: none;
  }

  .blog-tree-node summary::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tree-color, var(--accent));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--tree-color, var(--accent)) 20%, transparent);
  }

  .blog-tree-node .tree-count {
    color: var(--text-muted);
    font-weight: 500;
  }

  .tab-panel[data-tab-panel="archive"] .blog-tree,
  [data-main-blog-panel="archive"] .blog-tree {
    margin-top: 0;
    gap: 10px;
  }

  .tab-panel[data-tab-panel="archive"] .blog-tree-node,
  [data-main-blog-panel="archive"] .blog-tree-node {
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
  }

  .tab-panel[data-tab-panel="archive"] .blog-tree-node summary,
  [data-main-blog-panel="archive"] .blog-tree-node summary {
    justify-content: flex-start;
    flex-wrap: nowrap;
    padding: 8px 26px 8px 10px;
    font-family: inherit;
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.45;
    text-align: left;
  }

  .tab-panel[data-tab-panel="archive"] .blog-tree-node summary::after,
  [data-main-blog-panel="archive"] .blog-tree-node summary::after {
    content: none !important;
    display: none !important;
  }

  .tab-panel[data-tab-panel="archive"] .blog-tree-node summary::before,
  [data-main-blog-panel="archive"] .blog-tree-node summary::before {
    flex: 0 0 auto;
  }

  .tab-panel[data-tab-panel="archive"] .blog-tree-node .tree-label,
  [data-main-blog-panel="archive"] .blog-tree-node .tree-label {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    text-align: left;
  }

  .tab-panel[data-tab-panel="archive"] .blog-tree-node .tree-count,
  [data-main-blog-panel="archive"] .blog-tree-node .tree-count {
    margin-left: auto;
    font-size: 0.98rem;
  }

  .blog-tree-node ul {
    margin: 12px 0 0 18px;
    padding: 0;
  }

  .tab-panel[data-tab-panel="archive"] .blog-tree-node ul,
  [data-main-blog-panel="archive"] .blog-tree-node ul {
    margin: 6px 0 0 28px;
    padding-left: 14px;
    list-style: disc;
  }

  .tab-panel[data-tab-panel="archive"] .blog-tree-node li,
  [data-main-blog-panel="archive"] .blog-tree-node li {
    font-size: 0.98rem;
    line-height: 1.5;
  }

  .tab-panel[data-tab-panel="archive"] .blog-tree-node li::marker,
  [data-main-blog-panel="archive"] .blog-tree-node li::marker {
    color: var(--accent);
  }

  .blog-tree-node li + li {
    margin-top: 6px;
  }

  .blog-tree-node a,
  .blog-tree-node a:visited,
  .blog-tree-node a:hover,
  .blog-tree-node a:active,
  .blog-tree-node a:focus,
  .tree-seed-link,
  .tree-seed-link:visited,
  .tree-seed-link:hover,
  .tree-seed-link:active,
  .tree-seed-link:focus {
    color: var(--accent);
    text-decoration: none;
  }

  .tree-seed-list {
    margin: 16px 0 0 18px;
    padding: 0;
    list-style: disc;
  }

  .tab-panel[data-tab-panel="trees"] .tab-widget-content .tree-seed-list {
    margin-top: 0;
  }

  .tree-seed-list-item + .tree-seed-list-item {
    margin-top: 6px;
  }

  .tree-seed-list-item::marker {
    color: var(--accent);
  }

  .blog-item {
    border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
    background: var(--panel-bg-soft);
    background-image: none;
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.blog-item-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.blog-item-body {
  flex: 1;
  min-width: 0;
}

.blog-intro {
  margin: 0 0 22px;
  color: var(--text-muted);
  line-height: 1.6;
}

.blog-filter {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 28px 0 16px;
}

.blog-filter label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-dark);
  font-weight: 600;
}

.blog-filter select {
  width: 100%;
}

.blog-filter.is-hidden {
  display: none;
}

.blog-item h3 {
  margin: 0 0 10px;
  font-family: "Kalam", "Comic Sans MS", cursive;
  font-size: 1.1rem;
}

.blog-item h3 a,
.blog-item h3 a:visited {
  color: var(--ink);
  text-decoration: none;
}

.blog-item h3 a:hover {
  text-decoration: none;
  color: var(--accent-dark);
}

.blog-thumb {
  flex: 0 0 180px;
  width: 180px;
  height: 120px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: var(--field-bg);
}

.blog-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.blog-item p {
  font-family: "Kalam", "Comic Sans MS", cursive;
  color: var(--muted);
  line-height: 1.6;
}

.tab-panel[data-tab-panel="blog"] h2 {
  margin: 22px 0 14px;
}

.blog-item .post-meta {
  margin-bottom: 10px;
}

.blog-item .entry-text {
  margin-top: 8px;
}

.blog-item .entry-text p + p {
  margin-top: 10px;
}

.blog-meta {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-dark);
}

.share-actions {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.share-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-dark);
  font-weight: 600;
}

.share-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: var(--field-bg);
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}

.share-link img {
  width: 16px;
  height: 16px;
  display: block;
  object-fit: contain;
  flex: 0 0 auto;
}

.share-link .material-icons {
  font-size: 16px;
  line-height: 1;
  flex: 0 0 auto;
  width: 16px;
  min-width: 16px;
  max-width: 16px;
  overflow: hidden;
}

.share-link.share-copy {
  cursor: pointer;
}

.share-link.share-usage {
  cursor: default;
  border-style: dashed;
  color: var(--accent-dark);
  background: color-mix(in srgb, var(--accent) 9%, var(--field-bg));
}

.share-link.share-usage:hover {
  background: color-mix(in srgb, var(--accent) 9%, var(--field-bg));
}

.share-link.share-support {
  margin-left: auto;
}

.share-link.share-follow {
  border: none;
}

.share-link.share-message {
  border: none;
}

.share-link.share-delete {
  border: none;
  background: #fbe3e3;
  color: #7d1f1f;
}

.share-link.share-delete .material-icons {
  color: #9e2727;
}

.share-link.share-delete:hover,
.share-link.share-delete:focus-visible {
  background: #f6cfcf;
  color: #6e1b1b;
}

.share-link.share-follow.is-following {
  background: #dff3e4;
  color: #1f5b2c;
}

.share-link.share-follow.is-following .material-icons {
  color: #2d7040;
}

.share-actions .share-link.share-tree.has-tree {
  border: none !important;
  background: color-mix(in srgb, var(--accent) 18%, var(--field-bg)) !important;
  color: var(--accent-dark) !important;
  box-shadow: none !important;
}

.share-actions .share-link.share-tree.has-tree .material-icons {
  color: var(--accent-dark);
}

.share-actions .share-link.share-tree.has-tree:hover,
.share-actions .share-link.share-tree.has-tree:focus-visible {
  background: color-mix(in srgb, var(--accent) 26%, var(--field-bg)) !important;
  outline: none;
  box-shadow: none !important;
}

.share-link:hover {
  background: var(--surface);
}

.feature-list {
  display: grid;
  gap: 16px;
  margin-top: 12px;
}

.feature-item {
  border: 1px solid #eadfd6;
  background: var(--field-bg);
  border-radius: 16px;
  padding: 14px 16px;
  display: grid;
  gap: 10px;
}

.feature-item h3 {
  margin: 0;
  font-size: 1.05rem;
}

.feature-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--muted);
  font-size: 0.85rem;
}

.health-checks {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.health-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
}

.health-status {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.health-status.ok {
  background: rgba(46, 160, 67, 0.15);
  color: #2ea043;
}

.health-status.fail {
  background: rgba(201, 55, 55, 0.15);
  color: #c93737;
}

.health-detail {
  margin: 0;
  color: var(--muted);
}

.guest-copy li {
  line-height: 1.55;
}

.site-footer {
  margin-top: 48px;
  padding: 24px 0 40px;
  border-top: none;
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--muted);
  text-align: center;
  align-items: center;
}

.footer-copy {
  font-size: 0.9rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

.footer-links a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}

.footer-links a:hover {
  color: var(--accent-dark);
}

.guide-cta {
  margin-top: 12px;
  width: fit-content;
}

.guide-content ul,
.guide-content ol {
  margin: 12px 0 0;
  padding-left: 18px;
}

.guide-content li {
  margin: 6px 0;
  line-height: 1.6;
}

/* Desktop workspace sidebar is docked/integrated; Panels button toggles visibility */
@media (min-width: 641px) {
  body.workspace-no-sidebar .sidebar-backdrop {
    display: none !important;
  }

  body.workspace-no-sidebar .page {
    max-width: none;
    width: 100%;
    margin: 0;
    padding-left: 24px;
    padding-right: 24px;
  }

  body.workspace-no-sidebar.panels-open .page {
    padding-left: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  body.workspace-no-sidebar .layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }

  body.workspace-no-sidebar.panels-open .layout {
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
    gap: 16px;
    min-height: 100vh;
    align-items: stretch;
  }

  body.workspace-no-sidebar.panels-open .content {
    padding-top: 32px;
    padding-bottom: 64px;
    min-width: 0;
  }

  body.workspace-no-sidebar .sidebar {
    display: none;
    position: sticky;
    inset: auto;
    top: 24px;
    right: auto;
    bottom: auto;
    left: auto;
    width: auto;
    min-width: 0;
    height: auto;
    max-height: calc(100vh - 48px);
    max-width: none;
    overflow-y: auto;
    padding: 16px 12px 20px;
    border-radius: 18px;
    background: transparent;
    box-shadow: none;
    transform: none;
    pointer-events: auto;
    visibility: visible;
    contain: none;
  }

  body.workspace-no-sidebar.panels-open .sidebar {
    display: flex;
    position: relative;
    inset: auto;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: auto;
    min-width: 0;
    height: auto;
    max-width: none;
    max-height: none;
    overflow-y: visible;
    transform: none;
    z-index: 1;
    align-self: stretch;
  }

  body.workspace-no-sidebar.panels-open {
    overflow: auto;
  }
}

/* Main workspace side-panel redesign (theme-aware, behavior-preserving) */
body.is-authenticated .sidebar-main-nav {
  --sidebar-shell-bg: color-mix(in srgb, var(--bg-bottom) 82%, var(--bg) 18%);
  --sidebar-shell-surface: var(--sidebar-shell-bg);
  --sidebar-shell-border: color-mix(in srgb, var(--panel-border) 72%, transparent);
  --sidebar-shell-text: var(--ink);
  --sidebar-shell-muted: color-mix(in srgb, var(--muted) 92%, var(--ink) 8%);
  --sidebar-shell-accent: var(--accent-dark);
  background: var(--sidebar-shell-bg);
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 10px 8px 12px;
  gap: 8px;
}

body.is-authenticated .sidebar-main-nav .card {
  background: transparent;
  box-shadow: none;
  border: none;
  border-radius: 0;
  padding: 0;
}

body.is-authenticated .sidebar-main-nav .card[data-panel="trial"],
body.is-authenticated .sidebar-main-nav .card.info-content:not([data-panel]),
body.is-authenticated .sidebar-main-nav .card[data-panel="mode"],
body.is-authenticated .sidebar-main-nav .card[data-panel] > .collapsible {
  background: var(--sidebar-shell-surface);
  border: none;
  border-radius: 10px;
}

body.is-authenticated .sidebar-main-nav .card[data-panel="trial"],
body.is-authenticated .sidebar-main-nav .card.info-content:not([data-panel]) {
  padding: 12px;
}

body.is-authenticated .sidebar-main-nav .card[data-panel="mode"] {
  padding: 8px;
}

body.is-authenticated .sidebar-main-nav .mode-toggle .mode-button {
  border-radius: 8px;
  border: none;
  background: var(--sidebar-shell-surface);
  color: var(--sidebar-shell-text);
}

body.is-authenticated .sidebar-main-nav .card[data-panel] > .collapsible {
  box-shadow: none;
  padding: 0 10px;
}

body.is-authenticated .sidebar-main-nav .card[data-panel] > .collapsible[open] {
  background: var(--sidebar-shell-surface);
  padding-bottom: 12px;
}

body.is-authenticated .sidebar-main-nav .collapsible summary {
  color: var(--sidebar-shell-text);
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.25;
  min-height: 44px;
  padding: 12px 0;
}

body.is-authenticated .sidebar-main-nav .collapsible summary::after {
  content: "chevron_right";
  font-family: "Material Symbols Outlined", "Material Icons", sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: var(--sidebar-shell-muted);
  right: 0;
  transform: translateY(-50%);
}

body.is-authenticated .sidebar-main-nav .collapsible[open] summary::after {
  content: "expand_more";
}

body.is-authenticated .sidebar-main-nav .sidebar-panel-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

body.is-authenticated .sidebar-main-nav .sidebar-panel-icon {
  font-size: 18px;
  color: var(--sidebar-shell-muted);
}

body.is-authenticated .sidebar-main-nav .collapsible[open] .sidebar-panel-icon {
  color: var(--sidebar-shell-muted);
}

body.is-authenticated .sidebar-main-nav .collapsible-hint {
  color: var(--sidebar-shell-muted);
  font-size: 0.76rem;
}

body.is-authenticated .sidebar-main-nav .subscription-card h2,
body.is-authenticated .sidebar-main-nav .subscription-card p,
body.is-authenticated .sidebar-main-nav .subhead,
body.is-authenticated .sidebar-main-nav label,
body.is-authenticated .sidebar-main-nav .auth-error,
body.is-authenticated .sidebar-main-nav .followed-blogs-empty {
  color: var(--sidebar-shell-muted);
}

body.is-authenticated .sidebar-main-nav input,
body.is-authenticated .sidebar-main-nav select,
body.is-authenticated .sidebar-main-nav textarea {
  background: var(--sidebar-shell-surface);
  border: none;
  color: var(--sidebar-shell-text);
}

body.is-authenticated .sidebar-main-nav input::placeholder,
body.is-authenticated .sidebar-main-nav textarea::placeholder {
  color: var(--sidebar-shell-muted);
}

body.is-authenticated .sidebar-main-nav .theme-file-name {
  color: var(--sidebar-shell-muted);
}

body.is-authenticated .sidebar-main-nav .ghost-button,
body.is-authenticated .sidebar-main-nav button[type="submit"] {
  background: var(--sidebar-shell-surface);
  color: var(--sidebar-shell-text);
  border: none;
}

body.is-authenticated .sidebar-main-nav .ghost-button:hover,
body.is-authenticated .sidebar-main-nav button[type="submit"]:hover {
  background: var(--sidebar-shell-surface);
  border-color: transparent;
}

body.is-authenticated .sidebar-main-nav .followed-blog-link {
  width: 100%;
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--sidebar-shell-surface);
  color: var(--sidebar-shell-text);
  border: none;
}

body.is-authenticated .sidebar-main-nav .followed-blog-link:hover {
  color: var(--sidebar-shell-text);
}

body.is-authenticated .sidebar-main-nav .followed-blog-link.has-updates {
  color: var(--sidebar-shell-text);
}

body.is-authenticated .sidebar-main-nav .theme-file-row,
body.is-authenticated .sidebar-main-nav .theme-file-button,
body.is-authenticated .sidebar-main-nav .date-filter input[type="date"],
body.is-authenticated .sidebar-main-nav .date-nav-inline .ghost-button,
body.is-authenticated .sidebar-main-nav .date-nav-inline #date-prev,
body.is-authenticated .sidebar-main-nav .date-nav-inline #date-next {
  background: var(--sidebar-shell-surface);
  border-color: transparent;
  color: var(--sidebar-shell-text);
}

body.is-authenticated .sidebar-main-nav #category-chips .category-chip {
  --chip-color: var(--sidebar-shell-text);
  background: var(--sidebar-shell-surface);
  border-color: transparent;
  color: var(--sidebar-shell-text);
}

body.is-authenticated .sidebar-main-nav .category-link {
  color: var(--chip-color, var(--sidebar-shell-text)) !important;
}

body.is-authenticated .sidebar-main-nav .category-chip .chip-edit,
body.is-authenticated .sidebar-main-nav .category-chip .chip-delete {
  color: var(--sidebar-shell-muted);
}

/* Final flattening: one surface tone, no outlines inside sidebar. */
body.is-authenticated .sidebar-main-nav .card[data-panel],
body.is-authenticated .sidebar-main-nav .card[data-panel] > .collapsible,
body.is-authenticated .sidebar-main-nav .theme-file-row,
body.is-authenticated .sidebar-main-nav .theme-file-button,
body.is-authenticated .sidebar-main-nav input,
body.is-authenticated .sidebar-main-nav select,
body.is-authenticated .sidebar-main-nav textarea,
body.is-authenticated .sidebar-main-nav .ghost-button,
body.is-authenticated .sidebar-main-nav button[type="submit"],
body.is-authenticated .sidebar-main-nav .followed-blog-link,
body.is-authenticated .sidebar-main-nav #category-chips .category-chip {
  background: var(--sidebar-shell-bg) !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Absolute flattening pass: sidebar should read as the same surface as page background. */
body.is-authenticated .sidebar-main-nav,
body.is-authenticated .sidebar-main-nav .card,
body.is-authenticated .sidebar-main-nav .card[data-panel],
body.is-authenticated .sidebar-main-nav .card[data-panel] > .collapsible,
body.is-authenticated .sidebar-main-nav .card[data-panel] > .collapsible[open],
body.is-authenticated .sidebar-main-nav .settings-section,
body.is-authenticated .sidebar-main-nav .mode-toggle .mode-button,
body.is-authenticated .sidebar-main-nav .theme-file-row,
body.is-authenticated .sidebar-main-nav .theme-file-button,
body.is-authenticated .sidebar-main-nav input,
body.is-authenticated .sidebar-main-nav select,
body.is-authenticated .sidebar-main-nav textarea,
body.is-authenticated .sidebar-main-nav .ghost-button,
body.is-authenticated .sidebar-main-nav button[type="submit"],
body.is-authenticated .sidebar-main-nav .followed-blog-link,
body.is-authenticated .sidebar-main-nav #category-chips .category-chip {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

body.is-authenticated .sidebar-main-nav .card[data-panel="trial"],
body.is-authenticated .sidebar-main-nav .card.info-content:not([data-panel]),
body.is-authenticated .sidebar-main-nav .card[data-panel="mode"] {
  padding-left: 0;
  padding-right: 0;
}

body.is-authenticated .sidebar-main-nav .settings-section {
  padding: 0 !important;
  gap: 8px !important;
}

body.is-authenticated .sidebar-main-nav .card[data-panel="journal-menu"] .settings-link,
body.is-authenticated .sidebar-main-nav .card[data-panel="calendar-menu"] .settings-link,
body.is-authenticated .sidebar-main-nav .card[data-panel="account-menu"] .settings-link,
body.is-authenticated .sidebar-main-nav .card[data-panel="community-menu"] .settings-link,
body.is-authenticated .sidebar-main-nav .card[data-panel="admin-menu"] .settings-link {
  padding-left: 22px !important;
}

body.is-authenticated .sidebar-main-nav .card[data-panel="followed-blogs"] .followed-blogs-actions {
  padding-left: 6px !important;
}

body.is-authenticated .sidebar-main-nav .card[data-panel="followed-blogs"] .followed-blogs-list {
  padding-left: 6px !important;
}

body.is-authenticated .sidebar-main-nav .card[data-panel="followed-blogs"] .followed-blogs-actions .settings-link {
  padding-left: 22px !important;
}

body.is-authenticated .sidebar-main-nav .card[data-panel="followed-blogs"] .followed-blog-link {
  padding-left: 22px !important;
  font-weight: 500 !important;
  font-size: 0.9rem !important;
  font-style: normal !important;
  text-decoration: none !important;
  display: flex;
  align-items: center;
  min-height: 40px;
}

body.is-authenticated .sidebar-main-nav .card[data-panel="categories"] .category-list {
  list-style: none !important;
  margin: 0 !important;
  padding-left: 6px !important;
  width: 100%;
}

body.is-authenticated .sidebar-main-nav .card[data-panel="categories"] .category-list > li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
}

body.is-authenticated .sidebar-main-nav .card[data-panel="categories"] #category-chips {
  display: block;
}

body.is-authenticated .sidebar-main-nav .card[data-panel="categories"] .category-link {
  padding-left: 22px !important;
  font-weight: 500 !important;
  font-size: 0.9rem !important;
  font-style: normal !important;
  text-decoration: none !important;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 40px;
  box-sizing: border-box;
}

body.is-authenticated .sidebar-main-nav .card[data-panel="journal-menu"] .settings-section,
body.is-authenticated .sidebar-main-nav .card[data-panel="calendar-menu"] .settings-section,
body.is-authenticated .sidebar-main-nav .card[data-panel="account-menu"] .settings-section,
body.is-authenticated .sidebar-main-nav .card[data-panel="community-menu"] .settings-section,
body.is-authenticated .sidebar-main-nav .card[data-panel="admin-menu"] .settings-section {
  padding-left: 6px !important;
}

body.is-authenticated .sidebar-main-nav .settings-link {
  padding: 8px 0 !important;
  min-height: 40px;
  border-radius: 0 !important;
}

body.is-authenticated .sidebar-main-nav .settings-link.settings-link-notifications {
  padding-right: 10px !important;
}

body.is-authenticated .sidebar-main-nav .settings-link.settings-link-notifications .notification-unread-inline {
  margin-right: 8px;
}

body.is-authenticated .sidebar-main-nav .settings-link:hover,
body.is-authenticated .sidebar-main-nav .settings-link:focus-visible {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: var(--sidebar-shell-text) !important;
}

/* Sidebar section order */
body.is-authenticated .sidebar-main-nav .card[data-panel="journal-menu"] {
  order: 10;
}

body.is-authenticated .sidebar-main-nav .card[data-panel="calendar-menu"] {
  order: 15;
}

body.is-authenticated .sidebar-main-nav .card[data-panel="filters"] {
  order: 20;
}

body.is-authenticated .sidebar-main-nav .card[data-panel="categories"] {
  order: 30;
}

body.is-authenticated .sidebar-main-nav .card[data-panel="theme"] {
  order: 40;
}

body.is-authenticated .sidebar-main-nav .card[data-panel="community-menu"] {
  order: 50;
}

body.is-authenticated .sidebar-main-nav .card[data-panel="admin-menu"] {
  order: 55;
}

body.is-authenticated .sidebar-main-nav .card[data-panel="followed-blogs"] {
  order: 60;
}

body.is-authenticated .sidebar-main-nav .card[data-panel="admin-add"] {
  order: 65;
}

body.is-authenticated .sidebar-main-nav .card[data-panel="account-menu"] {
  order: 70;
}

/* Terminal flatten override: enforce single-tone sidebar surface with no internal variants. */
body.is-authenticated .sidebar-main-nav {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

body.is-authenticated .sidebar-main-nav * {
  box-shadow: none !important;
}

body.is-authenticated .sidebar-main-nav .card,
body.is-authenticated .sidebar-main-nav .card[data-panel],
body.is-authenticated .sidebar-main-nav .card[data-panel] > .collapsible,
body.is-authenticated .sidebar-main-nav .card[data-panel] > .collapsible[open],
body.is-authenticated .sidebar-main-nav .mode-toggle .mode-button,
body.is-authenticated .sidebar-main-nav .theme-file-row,
body.is-authenticated .sidebar-main-nav .theme-file-button,
body.is-authenticated .sidebar-main-nav input,
body.is-authenticated .sidebar-main-nav select,
body.is-authenticated .sidebar-main-nav textarea,
body.is-authenticated .sidebar-main-nav .ghost-button,
body.is-authenticated .sidebar-main-nav button[type="submit"],
body.is-authenticated .sidebar-main-nav .followed-blog-link,
body.is-authenticated .sidebar-main-nav #category-chips .category-chip {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}

/* Slight unflattening for sidebar controls: color separation without edges. */
body.is-authenticated .sidebar-main-nav {
  --sidebar-control-bg: color-mix(in srgb, var(--panel-bg) 72%, var(--field-bg) 28%);
  --sidebar-control-bg-hover: color-mix(in srgb, var(--panel-bg) 62%, var(--field-bg) 38%);
}

body.is-authenticated .sidebar-main-nav input,
body.is-authenticated .sidebar-main-nav select,
body.is-authenticated .sidebar-main-nav textarea,
body.is-authenticated .sidebar-main-nav .ghost-button,
body.is-authenticated .sidebar-main-nav button[type="submit"],
body.is-authenticated .sidebar-main-nav .settings-link,
body.is-authenticated .sidebar-main-nav .followed-blog-link,
body.is-authenticated .sidebar-main-nav .card[data-panel="categories"] .category-link,
body.is-authenticated .sidebar-main-nav .mode-toggle .mode-button,
body.is-authenticated .sidebar-main-nav #category-chips .category-chip {
  background: var(--sidebar-control-bg) !important;
  border: none !important;
  outline: none !important;
}

body.is-authenticated .sidebar-main-nav .settings-link,
body.is-authenticated .sidebar-main-nav .followed-blog-link,
body.is-authenticated .sidebar-main-nav .card[data-panel="categories"] .category-link {
  transition: background-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

body.is-authenticated .sidebar-main-nav input:hover,
body.is-authenticated .sidebar-main-nav select:hover,
body.is-authenticated .sidebar-main-nav textarea:hover,
body.is-authenticated .sidebar-main-nav .ghost-button:hover,
body.is-authenticated .sidebar-main-nav button[type="submit"]:hover,
body.is-authenticated .sidebar-main-nav .settings-link:hover,
body.is-authenticated .sidebar-main-nav .followed-blog-link:hover,
body.is-authenticated .sidebar-main-nav .card[data-panel="categories"] .category-link:hover,
body.is-authenticated .sidebar-main-nav .mode-toggle .mode-button:hover {
  background: var(--sidebar-control-bg-hover) !important;
}

body.is-authenticated .sidebar-main-nav .settings-link:hover,
body.is-authenticated .sidebar-main-nav .followed-blog-link:hover,
body.is-authenticated .sidebar-main-nav .card[data-panel="categories"] .category-link:hover,
body.is-authenticated .sidebar-main-nav .settings-link:focus-visible,
body.is-authenticated .sidebar-main-nav .followed-blog-link:focus-visible,
body.is-authenticated .sidebar-main-nav .card[data-panel="categories"] .category-link:focus-visible {
  background: color-mix(in srgb, var(--sidebar-control-bg-hover) 68%, var(--accent) 32%) !important;
  color: var(--sidebar-shell-text) !important;
  transform: translateX(2px);
}

body.is-authenticated .sidebar-main-nav .settings-link.settings-link-danger,
body.is-authenticated .sidebar-main-nav .settings-link.settings-link-danger .settings-link-icon {
  color: var(--danger) !important;
}

body.is-authenticated .sidebar-main-nav .settings-link.settings-link-danger:hover,
body.is-authenticated .sidebar-main-nav .settings-link.settings-link-danger:focus-visible {
  background: color-mix(in srgb, var(--danger) 18%, var(--sidebar-control-bg-hover) 82%) !important;
  color: var(--danger-strong) !important;
}

body.is-authenticated .sidebar-main-nav .settings-link.settings-link-danger:hover .settings-link-icon,
body.is-authenticated .sidebar-main-nav .settings-link.settings-link-danger:focus-visible .settings-link-icon {
  color: var(--danger-strong) !important;
}

body.is-authenticated .sidebar-main-nav .card[data-panel="categories"] .category-link:hover,
body.is-authenticated .sidebar-main-nav .card[data-panel="categories"] .category-link:focus-visible {
  color: var(--chip-color, var(--sidebar-shell-text)) !important;
}

body.is-authenticated .sidebar-main-nav .settings-link .settings-link-icon {
  transition: color 0.16s ease;
}

body.is-authenticated .sidebar-main-nav .settings-link:hover .settings-link-icon,
body.is-authenticated .sidebar-main-nav .settings-link:focus-visible .settings-link-icon {
  color: var(--accent-dark);
}

body.is-authenticated .sidebar-main-nav .card[data-panel="calendar-menu"] .settings-link.is-active {
  background: color-mix(in srgb, var(--sidebar-control-bg-hover) 68%, var(--accent) 32%) !important;
  color: var(--sidebar-shell-text, var(--ink)) !important;
  transform: translateX(2px);
}

body.is-authenticated .sidebar-main-nav .card[data-panel="calendar-menu"] .settings-link.is-active .settings-link-icon {
  color: var(--accent-dark) !important;
}

body.is-authenticated .sidebar-main-nav input:focus-visible,
body.is-authenticated .sidebar-main-nav select:focus-visible,
body.is-authenticated .sidebar-main-nav textarea:focus-visible,
body.is-authenticated .sidebar-main-nav .ghost-button:focus-visible,
body.is-authenticated .sidebar-main-nav button[type="submit"]:focus-visible,
body.is-authenticated .sidebar-main-nav .mode-toggle .mode-button:focus-visible {
  background: var(--sidebar-control-bg-hover) !important;
  border: none !important;
  outline: none !important;
}

/* Permanent editor sidebar (main workspace only): no floating Panels toggle */
body.workspace-no-sidebar .mobile-panels-bar {
  display: none !important;
}

body.workspace-no-sidebar .sidebar-backdrop {
  display: none !important;
}

body.workspace-no-sidebar {
  overflow: auto !important;
}

.editor-rail {
  display: none;
}

@media (min-width: 641px) {
  body.workspace-no-sidebar .page {
    max-width: none;
    width: 100%;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  body.workspace-no-sidebar .layout {
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr) minmax(240px, 320px);
    gap: 16px;
    min-height: 100vh;
    align-items: stretch;
  }

  body.workspace-no-sidebar .sidebar {
    grid-column: 1;
  }

  body.workspace-no-sidebar .content {
    grid-column: 2;
    padding-top: 32px;
    padding-bottom: 64px;
    min-width: 0;
  }

  body.workspace-no-sidebar .editor-rail {
    grid-column: 3;
    display: flex;
    flex-direction: column;
    align-self: stretch;
    min-width: 0;
    padding: 32px 32px 64px 12px;
    gap: 10px;
  }

  body.workspace-no-sidebar .editor-rail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 4px 6px;
  }

  body.workspace-no-sidebar .editor-rail-title {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
  }

  body.workspace-no-sidebar .editor-rail-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid color-mix(in srgb, var(--panel-border) 70%, transparent);
    border-radius: 10px;
    background: var(--field-bg);
    color: var(--ink);
    cursor: pointer;
  }

  body.workspace-no-sidebar .editor-rail-add:disabled {
    opacity: 0.55;
    cursor: default;
  }

  body.workspace-no-sidebar .editor-rail-list {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  body.workspace-no-sidebar .editor-rail-empty {
    margin: 0;
    padding: 4px;
  }

  body.workspace-no-sidebar .editor-rail-reflection {
    background: color-mix(in srgb, var(--panel-bg) 82%, var(--field-bg) 18%);
    border-radius: 12px;
    padding: 12px 14px;
    display: grid;
    gap: 10px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
  }

  body.workspace-no-sidebar .editor-rail-reflection .question-chip-label {
    margin: 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--muted);
  }

  body.workspace-no-sidebar .editor-rail-reflection .question-chip-text {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--ink);
  }

  body.workspace-no-sidebar .editor-rail-reflection-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  body.workspace-no-sidebar .editor-rail-reflection-actions .ghost-button {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  body.workspace-no-sidebar .editor-rail-reflection-actions [data-reflection-submit][aria-pressed="true"] {
    background: color-mix(in srgb, var(--accent) 28%, var(--field-bg));
    border-color: color-mix(in srgb, var(--accent) 46%, transparent);
    color: var(--accent-dark);
    font-weight: 700;
  }

  body.workspace-no-sidebar .editor-rail-reflection-actions [data-reflection-submit][aria-pressed="true"]:hover {
    background: color-mix(in srgb, var(--accent) 34%, var(--field-bg));
    border-color: color-mix(in srgb, var(--accent) 58%, transparent);
    transform: none;
  }

  body.workspace-no-sidebar .editor-rail-reflection.is-reflection-mode {
    background: color-mix(in srgb, var(--accent) 14%, var(--panel-bg) 86%);
  }

  body.workspace-no-sidebar .editor-rail-note {
    --editor-rail-note-surface: var(--panel-bg);
    --editor-rail-note-border: var(--panel-border);
    background: var(--editor-rail-note-surface);
    background: color-mix(in srgb, var(--panel-bg) 78%, var(--field-bg) 22%);
    border: none;
    border-radius: 12px;
    padding: 6px 8px 10px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
  }

  body.workspace-no-sidebar .editor-rail-note-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 2px;
  }

  body.workspace-no-sidebar .editor-rail-note-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--ink) !important;
    cursor: pointer;
    opacity: 1;
  }

  body.workspace-no-sidebar .editor-rail-note-remove:hover,
  body.workspace-no-sidebar .editor-rail-note-remove:focus-visible {
    color: var(--ink) !important;
  }

  body.workspace-no-sidebar .editor-rail-note-input {
    width: 100%;
    min-height: 104px;
    border: none;
    outline: none;
    resize: vertical;
    background: transparent;
    color: var(--ink) !important;
    caret-color: var(--ink);
    font-family: "Patrick Hand", "Kalam", "Segoe UI", sans-serif;
    font-size: 1rem;
    line-height: 1.35;
    padding: 2px 4px;
  }

  body.workspace-no-sidebar .editor-rail-note-input::placeholder {
    color: var(--muted) !important;
  }

  body.workspace-no-sidebar .sidebar {
    display: flex !important;
    position: relative;
    inset: auto;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: auto;
    min-width: 0;
    height: auto;
    max-width: none;
    max-height: none;
    overflow-y: visible;
    padding: 16px 12px 20px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
    pointer-events: auto;
    visibility: visible;
    contain: none;
    z-index: 1;
    align-self: stretch;
  }
}

/* Touch landscape mobile fallback: keep compact sidebar + no right rail + compact editor toolbar. */
@media (min-width: 641px) and (orientation: landscape) and (max-height: 560px),
  (min-width: 641px) and (max-height: 700px) and (any-pointer: coarse) {
  body.workspace-no-sidebar .editor-rail {
    display: none !important;
  }

  body.workspace-no-sidebar .layout {
    grid-template-columns: minmax(148px, 192px) minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  body.workspace-no-sidebar .sidebar {
    padding: 12px 8px 16px !important;
  }

  body.workspace-no-sidebar .content {
    grid-column: 2;
    min-width: 0;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  #tiptap-toolbar.editor-toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  #tiptap-toolbar .editor-group-mobile-extra,
  #tiptap-toolbar .editor-divider-mobile-extra {
    display: none !important;
  }

  #tiptap-toolbar .editor-mobile-tools-drawer {
    margin-left: auto;
  }

  #tiptap-toolbar .editor-mobile-tools-drawer .editor-more-panel {
    right: 0;
    min-width: min(92vw, 330px);
    max-width: min(92vw, 330px);
  }

  #tiptap-toolbar .editor-mobile-tools-group {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 4px;
  }

  #tiptap-toolbar .editor-mobile-tools-group .editor-button {
    min-width: 34px;
    min-height: 30px;
    padding: 4px 6px;
  }

  #tiptap-toolbar .editor-mobile-tools-group .material-icons {
    font-size: 16px;
    line-height: 1;
  }

  body.is-authenticated .sidebar-main-nav .card[data-panel="journal-menu"] .settings-link,
  body.is-authenticated .sidebar-main-nav .card[data-panel="calendar-menu"] .settings-link,
  body.is-authenticated .sidebar-main-nav .card[data-panel="account-menu"] .settings-link,
  body.is-authenticated .sidebar-main-nav .card[data-panel="community-menu"] .settings-link,
  body.is-authenticated .sidebar-main-nav .card[data-panel="admin-menu"] .settings-link,
  body.is-authenticated .sidebar-main-nav .card[data-panel="followed-blogs"] .followed-blogs-actions .settings-link,
  body.is-authenticated .sidebar-main-nav .card[data-panel="followed-blogs"] .followed-blog-link,
  body.is-authenticated .sidebar-main-nav .card[data-panel="categories"] .category-link {
    padding-left: 10px !important;
  }

  body.is-authenticated .sidebar-main-nav .card[data-panel="journal-menu"] .settings-section,
  body.is-authenticated .sidebar-main-nav .card[data-panel="calendar-menu"] .settings-section,
  body.is-authenticated .sidebar-main-nav .card[data-panel="account-menu"] .settings-section,
  body.is-authenticated .sidebar-main-nav .card[data-panel="community-menu"] .settings-section,
  body.is-authenticated .sidebar-main-nav .card[data-panel="admin-menu"] .settings-section,
  body.is-authenticated .sidebar-main-nav .card[data-panel="followed-blogs"] .followed-blogs-actions,
  body.is-authenticated .sidebar-main-nav .card[data-panel="followed-blogs"] .followed-blogs-list,
  body.is-authenticated .sidebar-main-nav .card[data-panel="categories"] .category-list {
    padding-left: 0 !important;
  }

  body.is-authenticated .sidebar-main-nav .settings-link-icon,
  body.is-authenticated .sidebar-main-nav .settings-link-icon-image {
    display: none !important;
  }

  body.is-authenticated .sidebar-main-nav .settings-link,
  body.is-authenticated .sidebar-main-nav .followed-blog-link,
  body.is-authenticated .sidebar-main-nav .card[data-panel="categories"] .category-link {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
    gap: 0 !important;
    transform: none !important;
  }

  body.is-authenticated .sidebar-main-nav .settings-link > span:not(.notification-unread-inline),
  body.is-authenticated .sidebar-main-nav .followed-blog-link > span,
  body.is-authenticated .sidebar-main-nav .card[data-panel="categories"] .category-link > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Touch portrait mobile fallback: place editor/content before sidebar stack. */
@media (orientation: portrait) and (max-height: 1200px) and (any-pointer: coarse) {
  body.public-page.blog-home-page:not(.is-authenticated) .tab-header {
    display: flex;
    width: 100%;
    max-width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
  }

  body.public-page.blog-home-page:not(.is-authenticated) .tab-header::-webkit-scrollbar {
    display: none;
  }

  body.public-page.blog-home-page:not(.is-authenticated) .tab-button {
    width: auto !important;
    flex: 0 0 auto;
    min-height: 34px;
    padding: 6px 12px 8px;
    white-space: nowrap;
    text-align: center;
    scroll-snap-align: start;
  }

  body.is-authenticated.workspace-no-sidebar .layout {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  body.is-authenticated.workspace-no-sidebar .content {
    order: 1;
    grid-column: 1;
    min-width: 0;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  body.is-authenticated.workspace-no-sidebar .sidebar {
    order: 2;
    grid-column: 1;
    min-width: 0;
  }

  body.is-authenticated.workspace-no-sidebar .editor-rail {
    display: none !important;
  }
}