/* publish.css — LinkedIn brand for Obsidian Publish
   Place in vault root. See https://help.obsidian.md/Obsidian+Publish/Customize+your+site
*/

:root {
  /* LinkedIn palette */
  --li-blue: #0077b5;
  --li-accent: #00a0dc;
  --li-dark: #313335;
  --li-light: #f3f6f8;
  --li-gray: #86888a;

  /* Light-mode pane unification token (also matches dark-mode fg mix) */
  --pane-bg-light: color-mix(in srgb, var(--li-light) 88%, var(--li-gray));

  /* Bright highlight (intentionally non-link) */
  --highlight-bg: #c7f000;
  --highlight-fg: #1a1a1a;

  /* LinkedIn-ish system font stack */
  --brand-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;

  /* Semantic defaults (light) */
  --bg: var(--pane-bg-light);
  --fg: var(--li-dark);
  --muted: var(--li-gray);
  --heading: var(--li-blue);
  --link: var(--li-blue);
  --link-hover: var(--li-accent);

  /* Surfaces */
  --surface-bg: var(--pane-bg-light);
  --surface-fg: var(--li-dark);
  --side-bg: var(--pane-bg-light);
  --side-fg: var(--fg);
  --side-border: var(--li-gray);

  /* Secondary surfaces (inputs, scrollbars, graph surface) */
  --surface-bg-secondary: color-mix(in srgb, var(--li-light) 92%, var(--li-gray));
  --surface-bg-tertiary: color-mix(in srgb, var(--li-light) 86%, var(--li-gray));

  /* EXPERIMENT (reversible): Accent-blue UI surfaces
    - Search input background
    - Scrollbar thumb
    - Graph pane background
    Revert by setting these back to the secondary surface tokens. */
  --search-bg: var(--li-accent);
  /* Brighter icon/placeholder on the accent background */
  --search-fg: var(--li-light);
  /* REQUIREMENT: placeholder + icon must match the input text color */
  --search-placeholder: var(--search-fg);
  --search-icon: var(--search-fg);
  --graph-bg: var(--li-accent);

  /* Scrollbars */
  --scrollbar-track: var(--surface-bg-secondary);
  --scrollbar-thumb: var(--li-accent);

  /* Pane dividers: faint hairline (NOT accent blue) */
  --pane-divider: color-mix(in srgb, var(--li-gray) 55%, white);

  /* Back-compat (older rules) */
  --panel-bg: var(--side-bg);
  --panel-fg: var(--side-fg);
  --panel-border: var(--side-border);
}

/* Mode-specific styling */
.theme-light {
  /* Unify page + panes to one background in light mode */
  /* Bonus: matches the dark-mode foreground mix (off-white) */
  --pane-bg-light: color-mix(in srgb, var(--li-light) 88%, var(--li-gray));
  --bg: var(--pane-bg-light);
  --fg: var(--li-dark);
  --muted: var(--li-gray);
  --heading: var(--li-blue);
  --link: var(--li-blue);
  --link-hover: var(--li-accent);

  --surface-bg: var(--pane-bg-light);
  --surface-fg: var(--li-dark);
  --side-bg: var(--pane-bg-light);
  --side-fg: var(--fg);
  --side-border: var(--li-gray);

  --surface-bg-secondary: color-mix(in srgb, var(--pane-bg-light) 92%, var(--li-gray));
  --surface-bg-tertiary: color-mix(in srgb, var(--pane-bg-light) 86%, var(--li-gray));

  --panel-bg: var(--side-bg);
  --panel-fg: var(--side-fg);
  --panel-border: var(--side-border);
}

.theme-dark {
  /* Unify page + panes to one background (matches the darker shared pane surface) */
  --pane-bg: var(--sidebar-right-background, color-mix(in srgb, var(--li-dark) 92%, black));
  --bg: var(--pane-bg);
  /* Slightly off-white to avoid stark white */
  --fg: color-mix(in srgb, var(--li-light) 88%, var(--li-gray));
  --muted: var(--li-gray);
  --heading: var(--li-accent);
  --link: var(--li-accent);
  --link-hover: var(--li-blue);

  /* EXPERIMENT: unify ALL panes to the same gray in dark mode.
    This prefers Obsidian Publish's built-in right-sidebar background when present.
    Revert by restoring separate --surface-bg and --side-bg values. */
  --pane-bg-dark: var(--pane-bg);
  --pane-bg-secondary-dark: color-mix(in srgb, var(--pane-bg-dark) 92%, black);
  --pane-bg-tertiary-dark: color-mix(in srgb, var(--pane-bg-dark) 86%, black);
  --surface-bg: var(--pane-bg-dark);
  --surface-fg: var(--li-light);
  --side-bg: var(--pane-bg-dark);
  --side-fg: var(--fg);
  --side-border: color-mix(in srgb, var(--pane-bg-dark) 80%, var(--li-gray));

  --surface-bg-secondary: var(--pane-bg-secondary-dark);
  --surface-bg-tertiary: var(--pane-bg-tertiary-dark);

  --scrollbar-track: var(--surface-bg-secondary);
  --scrollbar-thumb: var(--li-accent);
  --pane-divider: color-mix(in srgb, var(--li-gray) 45%, var(--pane-bg-dark));

  --panel-bg: var(--side-bg);
  --panel-fg: var(--side-fg);
  --panel-border: var(--side-border);
}

/* Dark mode: preview shell panel styling (avoid affecting Publish prod DOM) */
body.publish-preview.theme-dark .right-panel,
body.publish-preview .theme-dark .right-panel {
  background: var(--side-bg) !important;
  color: var(--side-fg) !important;
}

body.publish-preview.theme-dark .right-panel a,
body.publish-preview .theme-dark .right-panel a {
  color: var(--side-fg) !important;
  text-decoration: none;
}

body.publish-preview.theme-dark .right-panel a:hover,
body.publish-preview .theme-dark .right-panel a:hover {
  color: var(--link-hover) !important;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

body {
  font-family: var(--brand-font);
  background: var(--bg);
  color: var(--fg);
  font-size: 14px;
}

/* Obsidian Publish: use official sidebar variables (prod-safe)
   Docs: https://docs.obsidian.md/Reference/CSS+variables/Publish/Site+sidebars */
.published-container {
  /* Match left sidebar surface to whatever the right sidebar uses (esp. dark mode) */
  /* Explicitly control both sidebars so we can align backgrounds + divider treatment */
  --sidebar-left-background: var(--side-bg);
  --sidebar-right-background: var(--side-bg);

  /* Divider line: use explicit DOM borders below to avoid double borders */
  --sidebar-left-border-width: 1px;
  --sidebar-left-border-color: var(--pane-divider);
  --sidebar-right-border-width: 0px;
  --sidebar-right-border-color: var(--pane-divider);
}

/* Production safeguard: remove any sidebar shadow and force hairline borders.
   This targets Publish's real DOM (not the local preview shell). */
.published-container .sidebar-left,
.published-container .sidebar-right {
  box-shadow: none !important;
}

.published-container .sidebar-left {
  border-right: 1px solid var(--pane-divider) !important;
}

.published-container .sidebar-right {
  border-left: 1px solid var(--pane-divider) !important;
}

/* Light mode: keep all base surfaces light */
.theme-light .published-container,
.published-container.theme-light {
  --background-primary: var(--pane-bg-light);
  --background-primary-alt: var(--pane-bg-light);
  --background-secondary: var(--pane-bg-light);
  --background-secondary-alt: var(--pane-bg-light);
  --background-modifier-border: var(--pane-divider);
}

/* Obsidian Publish: dark mode pane unification (prod-safe)
   Many core Obsidian background variables are respected in Publish as well.
   This helps cover split/empty panes beyond the left/right sidebars. */
.theme-dark .published-container,
.published-container.theme-dark {
  --background-primary: var(--pane-bg-dark);
  --background-primary-alt: var(--pane-bg-dark);
  /* Keep panes unified (search/graph still override their own surfaces) */
  --background-secondary: var(--pane-bg-dark);
  --background-secondary-alt: var(--pane-bg-dark);
  --background-modifier-border: var(--pane-divider);
}

/* Content surface */
.site-body,
.markdown-preview-view {
  color: var(--fg);
}

/* Publish prod: ensure body copy uses the same foreground token as sidebars */
.published-container .site-body,
.published-container .site-body p,
.published-container .site-body .el-p,
.published-container .markdown-preview-view,
.published-container .markdown-preview-view p,
.published-container .markdown-preview-view .el-p {
  color: var(--fg) !important;
}

/* Ensure non-heading typography is consistent across panels + content */
.site-body,
.markdown-preview-view,
.left-panel,
.right-panel,
.graph-panel,
.toc-panel {
  font-family: var(--brand-font);
  font-size: 14px;
}

/* In Publish prod, the reading surface is typically white on a light page bg */
.site-body {
  background: var(--surface-bg);
  color: var(--fg);
}

/* Guardrail: ensure light mode content surface stays white */
.theme-light .site-body,
body.theme-light .site-body {
  background: var(--surface-bg) !important;
}

/* Subtle separators between panes (preview shell only) */
body.publish-preview .left-panel {
  border-right: 1px solid var(--pane-divider);
}

body.publish-preview .right-panel,
body.publish-preview .graph-panel,
body.publish-preview .toc-panel {
  border-left: 1px solid var(--pane-divider);
}

/* Headings */
.site-body h1,
.site-body h2,
.site-body h3,
.site-body h4,
.site-body h5,
.site-body h6,
.markdown-preview-view h1,
.markdown-preview-view h2,
.markdown-preview-view h3,
.markdown-preview-view h4,
.markdown-preview-view h5,
.markdown-preview-view h6 {
  color: var(--heading) !important;
  font-family: var(--brand-font);
}

/* Links */
.site-body a,
.markdown-preview-view a {
  color: var(--link) !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  font-weight: 600;
}
.site-body a:hover,
.markdown-preview-view a:hover {
  color: var(--link-hover) !important;
  text-decoration-thickness: 2px;
}

/* Bold text: add a subtle brand tint without mimicking link styling */
.site-body strong,
.site-body b,
.markdown-preview-view strong,
.markdown-preview-view b {
  color: color-mix(in srgb, var(--fg) 88%, var(--li-accent));
}

.site-body a strong,
.site-body a b,
.markdown-preview-view a strong,
.markdown-preview-view a b {
  /* Make bolded link text perceptibly different from non-bolded link text */
  color: color-mix(in srgb, var(--link) 65%, var(--link-hover));
  font-weight: 800;
}

/* Navigation / header */
.nav-bar,
.site-header {
  background: var(--side-bg);
  color: var(--side-fg);
  border-bottom: 1px solid var(--side-border);
}

/* Panels (preview shell) */
body.publish-preview .right-panel,
body.publish-preview .graph-panel,
body.publish-preview .toc-panel {
  background: var(--side-bg) !important;
  color: var(--side-fg) !important;
  font-family: var(--brand-font);
}

body.publish-preview .left-panel {
  background: var(--side-bg) !important;
  color: var(--side-fg) !important;
  font-family: var(--brand-font);
}

body.publish-preview .left-panel a,
body.publish-preview .right-panel a,
body.publish-preview .graph-panel a,
body.publish-preview .toc-panel a {
  /* In panes (esp. on-page navigation), keep text color aligned with body;
     rely on hover underline + color shift for affordance. */
  color: var(--side-fg) !important;
  text-decoration: none;
  font-weight: 600;
}
body.publish-preview .left-panel a:hover,
body.publish-preview .right-panel a:hover,
body.publish-preview .graph-panel a:hover,
body.publish-preview .toc-panel a:hover {
  color: var(--link-hover) !important;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

/* Highlight (==text== in Obsidian) should NOT look like a link */
mark,
.markdown-preview-view mark {
  background: var(--highlight-bg);
  color: var(--highlight-fg);
  padding: 0 0.15em;
  border-radius: 4px;
}

::selection {
  background: color-mix(in srgb, var(--highlight-bg) 70%, white);
  color: var(--highlight-fg);
}

/* Inputs: give search fields a distinct secondary surface */
.published-container input[type="search"],
.published-container .search-input input,
.published-container input[placeholder*="Search" i] {
  background: var(--search-bg) !important;
  color: var(--search-fg) !important;
  border: 1px solid var(--side-border);
  border-radius: 10px;
}

/* Publish prod: actual search DOM (from DevTools) */
.published-container .search-view-container {
  color: var(--search-fg) !important;
}

.published-container .search-view-container input.search-bar {
  background: var(--search-bg) !important;
  color: var(--search-fg) !important;
  border: 1px solid var(--side-border);
  border-radius: 10px;
}

.published-container input[type="search"]::placeholder,
.published-container .search-input input::placeholder {
  color: var(--search-fg) !important;
  opacity: 1;
}

.published-container .search-view-container input.search-bar::placeholder {
  color: var(--search-fg) !important;
  opacity: 1;
}

/* Search icons (best-effort across Publish DOM variants) */
.published-container .search-input,
.published-container .search-input button,
.published-container button[aria-label*="Search" i] {
  color: var(--search-fg) !important;
}

.published-container .search-input svg,
.published-container .search-input button svg,
.published-container button[aria-label*="Search" i] svg {
  color: var(--search-fg) !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Publish prod: actual search icon DOM (from DevTools) */
.published-container .published-search-icon {
  color: var(--search-fg) !important;
}

.published-container .published-search-icon svg {
  color: var(--search-fg) !important;
  fill: none !important;
  stroke: currentColor !important;
}

/* Graph surface: darker secondary background inside the graph pane */
.graph-panel,
.right-panel .graph-view,
.right-panel .graph-view-container,
.right-panel [class*="graph"],
.published-container .graph-view-container {
  background: var(--graph-bg) !important;
}

/* Right pane typography: force body-aligned foreground in common Publish containers */
.published-container .sidebar-right,
.published-container .site-sidebar.right,
.published-container .site-sidebar--right {
  color: var(--fg) !important;
}

/* Publish prod: right column container */
.published-container .site-body-right-column,
.published-container .site-body-right-column-inner,
.published-container .outline-view-outer,
.published-container .outline-view {
  color: var(--fg) !important;
}

/* Right pane “On this page” list items (DevTools: .outline-view-outer .tree-item-inner)
   Keep casing normal; match body foreground (fix: nav too gray). */
.published-container .outline-view-outer .tree-item,
.published-container .outline-view-outer .tree-item-self,
.published-container .outline-view-outer .tree-item-inner {
  color: var(--fg) !important;
  text-transform: none;
  letter-spacing: normal;
}

/* Light mode: ensure “On this page” links stay body-aligned (Publish DOM varies) */
.theme-light .published-container .outline-view-outer a,
.published-container.theme-light .outline-view-outer a {
  color: var(--fg) !important;
  text-decoration: none;
}

.theme-light .published-container .outline-view-outer a:hover,
.published-container.theme-light .outline-view-outer a:hover {
  color: var(--link-hover) !important;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

.published-container .sidebar-right .sidebar-section-content,
.published-container .sidebar-right .sidebar-section-content *,
.published-container .sidebar-right .toc,
.published-container .sidebar-right .toc li,
.published-container .sidebar-right .toc a,
.published-container .sidebar-right .backlinks,
.published-container .sidebar-right .backlinks a {
  color: var(--fg) !important;
}

/* Right pane links should look like body text, not link-blue */
.published-container .sidebar-right a {
  color: var(--fg) !important;
  text-decoration: none;
}

.published-container .sidebar-right a:hover {
  color: var(--link-hover) !important;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

/* Right pane headings: keep caps, make them brand blue */
.published-container .sidebar-right h1,
.published-container .sidebar-right h2,
.published-container .sidebar-right h3,
.published-container .sidebar-right h4,
.published-container .sidebar-right h5,
.published-container .sidebar-right h6 {
  color: var(--heading) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Right pane section headings (graph + on this page): force blue even when not h-tags */
.published-container .sidebar-right .pane-title,
.published-container .sidebar-right .pane-title *,
.published-container .sidebar-right .view-header-title,
.published-container .sidebar-right .view-header-title *,
.published-container .sidebar-right .sidebar-section-header,
.published-container .sidebar-right .sidebar-section-header *,
.published-container .sidebar-right .sidebar-section-title,
.published-container .sidebar-right .sidebar-section-title *,
.published-container .sidebar-right .graph-title,
.published-container .sidebar-right .graph-title *,
.published-container .sidebar-right .toc-title,
.published-container .sidebar-right .toc-title *,
.published-container .sidebar-right .outline-title,
.published-container .sidebar-right .outline-title *,
.published-container .sidebar-right .backlinks-title,
.published-container .sidebar-right .backlinks-title *,
/* Also target these titles even if Publish doesn't nest them under .sidebar-right */
.published-container .pane-title,
.published-container .pane-title *,
.published-container .view-header-title,
.published-container .view-header-title *,
.published-container .sidebar-section-header,
.published-container .sidebar-section-header *,
.published-container .toc-title,
.published-container .toc-title *,
.published-container .outline-title,
.published-container .outline-title * {
  color: var(--heading) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Publish prod: actual section header DOM (from DevTools) */
.published-container .published-section-header,
.published-container .published-section-header *,
.published-container .list-item.published-section-header,
.published-container .list-item.published-section-header * {
  color: var(--heading) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.published-container .published-section-header-icon {
  color: var(--heading) !important;
}

.published-container .published-section-header-icon svg {
  fill: none !important;
  stroke: currentColor !important;
}

/* Left navigation: make folder label + caret blue (e.g., “Portfolio”) */
.published-container .nav-folder-title,
.published-container .nav-folder-title-content,
.published-container .nav-folder-collapse-indicator,
.published-container .nav-folder-collapse-indicator svg {
  color: var(--heading) !important;
  fill: var(--heading) !important;
  stroke: var(--heading) !important;
}

/* Folder names: match right-pane caps style */
.published-container .nav-folder-title-content {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Publish prod: actual nav tree DOM (from DevTools) */
.published-container .nav-view-outer,
.published-container .nav-view-outer .tree-item,
.published-container .nav-view-outer .tree-item-self {
  color: var(--fg) !important;
}

.published-container .nav-view-outer .tree-item-self.is-clickable {
  color: var(--fg) !important;
}

/* Folder-ish rows: force blue + caps (best-effort) */
.published-container .nav-view-outer .tree-item-self.mod-collapsible.is-clickable,
.published-container .nav-view-outer .tree-item-self.mod-collapsible.is-clickable .tree-item-inner {
  color: var(--heading) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Leaf rows: restore mixed/title case and body-aligned foreground */
.published-container .nav-view-outer .tree-item-self.is-clickable:not(.mod-collapsible),
.published-container .nav-view-outer .tree-item-self.is-clickable:not(.mod-collapsible) .tree-item-inner {
  color: var(--fg) !important;
  text-transform: none;
  letter-spacing: normal;
}

/* Caret / icons: only folders get the brand blue treatment */
.published-container .nav-view-outer .tree-item-self.mod-collapsible.is-clickable .tree-item-icon,
.published-container .nav-view-outer .tree-item-self.mod-collapsible.is-clickable .tree-item-icon svg {
  color: var(--heading) !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Hide left sidebar site title (“Daniel B. Patton”) */
.published-container .sidebar-left .site-title,
.published-container .sidebar-left .site-title a,
.published-container .sidebar-left .site-header-title,
.published-container .sidebar-left .site-header-title a,
.published-container .sidebar-left .site-name,
.published-container .sidebar-left .site-name a {
  display: none !important;
}

/* Publish prod: vertical page title text — brand blue */
.published-container .extra-title-text {
  color: var(--li-blue) !important;
  -webkit-text-fill-color: var(--li-blue) !important;
}

/* Publish prod: vertical site name on the left edge — brand blue */
.published-container .site-body-left-column-site-name,
.published-container .site-body-left-column-site-name *,
.published-container .site-body-left-column-site-name a,
.published-container .site-body-left-column-site-name a * {
  color: var(--li-blue) !important;
  -webkit-text-fill-color: var(--li-blue) !important;
}

/* Graph colors: ensure good contrast when graph pane is accent-blue */
.published-container {
  --graph-text: var(--li-light);
  --graph-line: color-mix(in srgb, var(--li-light) 55%, var(--li-blue));
  --graph-node: var(--li-light);
  --graph-node-unresolved: color-mix(in srgb, var(--li-light) 62%, var(--li-gray));
  --graph-node-focused: var(--li-blue);
  --graph-node-tag: color-mix(in srgb, var(--li-light) 75%, var(--li-accent));
  --graph-node-attachment: color-mix(in srgb, var(--li-light) 75%, var(--li-gray));
}

/* Hide “Powered by Obsidian Publish” (no documented site option found) */
.site-footer {
  display: none !important;
}

.published-container a[href="https://publish.obsidian.md/"] {
  display: none !important;
}

.published-container a[href^="https://publish.obsidian.md/"] {
  display: none !important;
}

/* Scrollbars: make track use the secondary surface */
.published-container {
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  scrollbar-width: thin;
}

.published-container ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.published-container ::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

.published-container ::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 999px;
  border: 3px solid var(--scrollbar-track);
}

.published-container ::-webkit-scrollbar-corner {
  background: var(--scrollbar-track);
}

/* Callouts */
.callout {
  border-left: 4px solid var(--li-accent);
  background: var(--li-light);
}
.theme-dark .callout {
  background: var(--li-dark);
}

/* Cards (if present) */
.card {
  border: 1px solid var(--side-border);
  border-radius: 8px;
  background: var(--surface-bg);
}

/* Responsive tweaks intentionally minimal — keep font-size consistent */

/* Local-only preview shell (publish-preview.html) */
body.publish-preview {
  margin: 0;
}

body.publish-preview .theme-toggle-row {
  margin: 12px 0 10px;
}

body.publish-preview .theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

body.publish-preview .theme-toggle:focus-visible {
  outline: 2px solid var(--li-accent);
  outline-offset: 3px;
  border-radius: 10px;
}

body.publish-preview .theme-toggle-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--side-border);
  background: color-mix(in srgb, var(--side-bg) 85%, black);
  color: var(--side-fg);
  font-size: 14px;
  line-height: 1;
}

body.publish-preview.theme-light .theme-toggle-icon,
body.publish-preview .theme-light .theme-toggle-icon {
  background: var(--surface-bg-secondary);
}

body.publish-preview .theme-toggle-track {
  width: 46px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid var(--side-border);
  background: color-mix(in srgb, var(--side-bg) 70%, var(--li-gray));
  position: relative;
}

body.publish-preview.theme-light .theme-toggle-track,
body.publish-preview .theme-light .theme-toggle-track {
  background: var(--surface-bg-secondary);
}

body.publish-preview .theme-toggle-thumb {
  position: absolute;
  top: 50%;
  left: 2px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid var(--side-border);
  background: #fff;
}

body.publish-preview.theme-dark .theme-toggle-thumb,
body.publish-preview .theme-dark .theme-toggle-thumb {
  left: 24px;
}

body.publish-preview .publish-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 320px;
  min-height: 100vh;
}

body.publish-preview .left-panel,
body.publish-preview .right-panel {
  padding: 16px;
  overflow: auto;
}

body.publish-preview .site-body {
  padding: 24px;
  overflow: auto;
}

@media (max-width: 900px) {
  body.publish-preview .publish-shell {
    grid-template-columns: 1fr;
  }

  body.publish-preview .left-panel,
  body.publish-preview .right-panel {
    display: none;
  }
}