/* ===========================
   Tiptap Editor Styles
   =========================== */

/* Kustomer theme colors — centralized so they can be updated in one place
   if Kustomer changes their published theme. Kept separate from DaisyUI's
   theme tokens intentionally (see note above .kustomer-article-body). */
/* daisyui-ignore */
:root {
  --kustomer-bg: #FEF9ED;
  --kustomer-text: #1C1F58;
  --kustomer-link: #19223C;
  --kustomer-link-hover: #475AFA;
  --kustomer-link-active: #545BFE;
  --kustomer-link-pressed: #383CA3;
  --kustomer-blockquote-mark: #6E7A88;
  --kustomer-callout-bg: rgba(117, 131, 255, 0.08);
  --kustomer-callout-success-border: #41D298;
  --kustomer-callout-mint-bg: #aee3da;
  --kustomer-callout-mint-border: #0f9187;
  --kustomer-code-bg: #f9f9f9;
  --kustomer-code-text: #d72b3f;
  --kustomer-code-border: #d8d8d8;
  --kustomer-pre-bg: #efefef;
  --kustomer-table-border: #f1f1f1;
  --kustomer-table-bg: #fefefe;
  --kustomer-table-cell-border: #dddddd;
  --kustomer-tabs-nav-border: rgb(229, 231, 235);

  /* Prism syntax-highlight palette — saturated colors tuned for a light
     code-view background. Overridden below for dark themes. Comment/doctype/
     attr-equals tokens reuse the chrome muted/placeholder grays and aren't
     defined here. */
  --prism-tag: #BE185D;
  --prism-attr-name: #7C3AED;
  --prism-attr-value: #047857;
  --prism-entity: #D97706;
}

/* Dark-theme Prism palette — lighter/pastel tokens so tags and attributes
   stay readable against the dark base-100 background in HTML mode. */
/* daisyui-ignore */
[data-theme="dark"],
[data-theme="dracula"] {
  --prism-tag: #F472B6;       /* pink-400 */
  --prism-attr-name: #C4B5FD; /* violet-300 */
  --prism-attr-value: #6EE7B7;/* emerald-300 */
  --prism-entity: #FCD34D;    /* amber-300 */
}

/* Editor tabs */
.editor-tabs {
  display: flex;
  gap: 0;
  background: var(--color-base-200);
  border-bottom: 1px solid var(--color-base-300);
  margin-bottom: 0;
}

.editor-tab {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: color-mix(in srgb, var(--color-base-content) 60%, transparent);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.1s, border-color 0.1s;
}

.editor-tab:hover {
  color: var(--color-base-content);
}

.editor-tab--active {
  color: var(--kustomer-link-active);
  border-bottom-color: var(--kustomer-link-active);
}

/* Toolbar */
.editor-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  background: var(--color-base-200);
  border-bottom: 1px solid var(--color-base-300);
  flex-wrap: wrap;
}

.editor-toolbar button {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 500;
  color: color-mix(in srgb, var(--color-base-content) 60%, transparent);
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}

.editor-toolbar button svg {
  flex-shrink: 0;
}

.editor-toolbar button:hover {
  background: var(--color-base-300);
  color: var(--color-base-content);
}

.toolbar-separator {
  width: 1px;
  height: 18px;
  background: var(--color-base-300);
  margin: 0 4px;
}

/* Editor content area (Tiptap) — layout only.
   Content styling (fonts, colors, spacing) comes from .kustomer-article-body
   which is applied alongside this class on the editor div. */
/* daisyui-ignore */
.editor-content {
  border: none;
  min-height: 400px;
  padding: 16px;
  outline: none;
}

.editor-content:focus-within {
  box-shadow: none;
}

/* Definition list — editor affordance (not visible in published articles) */
.editor-content dl {
  border: 1px dashed var(--color-base-300);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
}
.editor-content dt {
  min-height: 1.2em;
}
.editor-content dd {
  min-height: 1.2em;
}

/* ProseMirror specific */
.editor-content .ProseMirror {
  outline: none;
  min-height: 380px;
  cursor: text;
}

/* Tiptap wraps list item content in <p> (which adds margin) and preserves
   <br><br> from Kustomer HTML. Zero out the <p> margin inside list items
   so only the <br> tags provide spacing — matching the show page render.
   Also hide the ProseMirror trailing break inside list items — it adds an
   extra line of whitespace that doesn't exist on the show page. */
.editor-content .ProseMirror li p {
  margin-bottom: 0;
}
.editor-content .ProseMirror li p br.ProseMirror-trailingBreak {
  display: none;
}

.editor-content .ProseMirror > p:only-child:has(> br.ProseMirror-trailingBreak:only-child)::before {
  content: "Start writing...";
  color: color-mix(in srgb, var(--kustomer-text) 40%, transparent);
  float: left;
  height: 0;
  pointer-events: none;
}

/* Froala image display classes — matches Kustomer's Froala editor rendering.
   Applied globally so images render consistently in editor, preview, and published output. */
img.fr-dib {
  margin: 5px auto;
  display: block;
  float: none;
  vertical-align: top;
}

img.fr-dib.fr-fil {
  margin-left: 0;
  margin-right: auto;
}

img.fr-dib.fr-fir {
  margin-left: auto;
  margin-right: 0;
}

img.fr-dii {
  display: inline-block;
  float: none;
  vertical-align: bottom;
  margin-left: 5px;
  margin-right: 5px;
  max-width: calc(100% - 10px);
}

img.fr-dii.fr-fil {
  float: left;
  margin: 5px 5px 5px 0;
  max-width: calc(100% - 5px);
}

img.fr-dii.fr-fir {
  float: right;
  margin: 5px 0 5px 5px;
  max-width: calc(100% - 5px);
}

img.fr-dii:not(.fr-fil):not(.fr-fir) {
  display: block;
  margin-left: auto;
  margin-right: auto;
  float: none;
}

/* HTML textarea mode — syntax highlight overlay */
.html-highlight-wrapper {
  position: relative;
  border-top: 1px solid var(--color-base-300);
}

.editor-html-textarea,
.html-highlight-pre {
  font-family: "SF Mono", "Fira Code", "Fira Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.5;
  tab-size: 2;
  padding: 16px;
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.editor-html-textarea {
  width: 100%;
  min-height: 200px;
  border: none;
  resize: none;
  outline: none;
  overflow: hidden;
  /* Transparent text — the highlighted pre behind shows through */
  color: transparent;
  caret-color: var(--color-base-content);
  background: transparent;
  /* Sit on top of the pre for input */
  position: relative;
  z-index: 1;
}

.editor-html-textarea:focus {
  box-shadow: none;
}

.editor-html-textarea::selection {
  background: color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.html-highlight-pre {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--color-base-100);
  z-index: 0;
  /* Base color for non-token text (article content between tags) */
  color: var(--color-base-content);
}

.html-highlight-pre code {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  tab-size: inherit;
}

/* Prism token colors — light theme tuned for HTML editing.
   Article text is the base color (dark, readable). Tags and syntax
   use saturated colors so structure stands out from content. */
.html-highlight-pre .token.tag { color: var(--prism-tag); }
.html-highlight-pre .token.attr-name { color: var(--prism-attr-name); }
.html-highlight-pre .token.attr-value { color: var(--prism-attr-value); }
.html-highlight-pre .token.punctuation { color: var(--prism-tag); }
.html-highlight-pre .token.comment { color: color-mix(in srgb, var(--color-base-content) 40%, transparent); font-style: italic; }
.html-highlight-pre .token.entity { color: var(--prism-entity); }
.html-highlight-pre .token.doctype { color: color-mix(in srgb, var(--color-base-content) 40%, transparent); }
.html-highlight-pre .token.attr-equals { color: color-mix(in srgb, var(--color-base-content) 60%, transparent); }

/* ==================== Kustomer article body styles (shared) ==================== */
/* Matches support.ynab.com article rendering. Used by .editor-preview and
   [data-article-body] on the show page. Colors reference the --kustomer-*
   custom properties defined at the top of this file — intentionally separate
   from the app's DaisyUI theme so they stay locked to Kustomer's published
   rendering. */
/* daisyui-ignore */

.kustomer-article-body {
  font-family: Figtree, -apple-system, "Helvetica Neue", sans-serif;
  font-size: 16px;
  line-height: 1.618rem;
  color: var(--kustomer-text);
  background-color: var(--kustomer-bg);
}

/* Article title (used on show page and preview header) */
.kustomer-article-title {
  font-family: Figtree, sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 1.2;
  color: var(--kustomer-text);
  padding-bottom: 15px;
}

.editable-title {
  outline: none;
  cursor: text;
}
.editable-title:empty::before {
  content: attr(data-placeholder);
  color: color-mix(in srgb, var(--kustomer-text) 40%, transparent);
  pointer-events: none;
}
.editable-title[contenteditable="false"] {
  cursor: default;
}

/* Headings */
.kustomer-article-body h1 {
  font-family: Figtree, sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--kustomer-text);
  padding-bottom: 16px;
  margin-top: 1.5rem;
}
.kustomer-article-body h2 {
  font-family: Figtree, sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--kustomer-text);
  padding-bottom: 16px;
  margin-top: 1.5rem;
}
.kustomer-article-body h3 {
  font-family: Figtree, -apple-system, "Helvetica Neue", sans-serif;
  font-size: 1.17em;
  font-weight: 700;
  color: var(--kustomer-text);
  margin-bottom: 20px;
}
.kustomer-article-body h4 {
  font-family: Figtree, -apple-system, "Helvetica Neue", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--kustomer-text);
  margin-bottom: 20px;
}
.kustomer-article-body h5,
.kustomer-article-body h6 {
  font-family: Figtree, -apple-system, "Helvetica Neue", sans-serif;
  font-weight: 700;
  color: var(--kustomer-text);
  margin-bottom: 20px;
}

/* Paragraphs */
.kustomer-article-body p {
  margin-bottom: 1rem;
  font-size: 1rem;
  line-height: 1.618rem;
  color: var(--kustomer-text);
}

/* Links */
.kustomer-article-body a {
  color: var(--kustomer-link-hover);
  font-weight: bold;
  text-decoration: underline;
  font-size: 1rem;
  line-height: 1.618rem;
}
.kustomer-article-body a:hover {
  color: var(--kustomer-link-pressed);
}

/* Lists */
.kustomer-article-body ul,
.kustomer-article-body ol {
  margin-bottom: 2rem;
  font-size: 1rem;
  line-height: 1.618rem;
  color: var(--kustomer-text);
  padding-left: 40px;
}
.kustomer-article-body ul { list-style-type: disc; }
.kustomer-article-body ol { list-style-type: decimal; }
.kustomer-article-body ul ul,
.kustomer-article-body ul ol,
.kustomer-article-body ol ul,
.kustomer-article-body ol ol {
  margin-bottom: 0;
}
.kustomer-article-body li {
  line-height: 1.618rem;
  font-size: 1rem;
  color: var(--kustomer-text);
}
.kustomer-article-body li p {
  margin-bottom: 0.5rem;
}
.kustomer-article-body li p:last-child {
  margin-bottom: 0;
}

/* Blockquotes */
.kustomer-article-body blockquote {
  padding-left: 4rem;
  position: relative;
  margin-bottom: 2rem;
  font-style: italic;
  line-height: 1.618rem;
  border: none;
  color: var(--kustomer-text);
}
.kustomer-article-body blockquote::before {
  content: "\201C";
  position: absolute;
  left: 1rem;
  color: var(--kustomer-blockquote-mark);
  font-size: 2.5rem;
  font-style: normal;
  line-height: inherit;
}

/* Code */
.kustomer-article-body code {
  background-color: var(--kustomer-code-bg);
  color: var(--kustomer-code-text);
  font-size: 0.75rem;
  padding: 2px 3px 1px;
  white-space: normal;
  font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
  border: 1px solid var(--kustomer-code-border);
  border-radius: 0.2rem;
}
.kustomer-article-body pre {
  background-color: var(--kustomer-pre-bg);
  overflow-x: auto;
  font-size: 0.8rem;
  padding: 1.5rem;
  font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
  border: 1px solid var(--kustomer-code-border);
  border-radius: 0.2rem;
  margin-bottom: 1rem;
}
.kustomer-article-body pre code {
  background-color: transparent;
  border: none;
  padding: 0;
  font-size: inherit;
  color: inherit;
}

/* Tables — mirror Kustomer's published styles so the editor, preview, and
   show page render tables identically to support.ynab.com. */
.kustomer-article-body table {
  border-collapse: collapse;
  border-spacing: 0;
  margin-bottom: 1rem;
}
.kustomer-article-body table tbody {
  border: 1px solid var(--kustomer-table-border);
  border-radius: 4px;
  background-color: var(--kustomer-table-bg);
}
.kustomer-article-body table tbody th,
.kustomer-article-body table tbody td {
  padding: 0.5rem 0.625rem 0.625rem;
}
/* Froala (Kustomer's WYSIWYG) adds a 1px cell border on every td/th, which
   creates the visible row/column dividers users see on support.ynab.com.
   Froala's `.fr-thick` opt-in bumps the same border to 2px. */
.kustomer-article-body table td,
.kustomer-article-body table th {
  border: 1px solid var(--kustomer-table-cell-border);
}
.kustomer-article-body table td.fr-thick,
.kustomer-article-body table th.fr-thick {
  border-width: 2px;
}
.kustomer-article-body table tbody tr:nth-child(even) {
  background-color: var(--kustomer-bg) !important;
}

/* Horizontal rules */
.kustomer-article-body hr {
  margin-bottom: 20px;
}

/* Images */
.kustomer-article-body img {
  max-width: 100%;
  height: auto;
}

/* Video embeds — Tiptap editor wraps new iframes in .iframe-wrapper
   with width/height attributes. Legacy Kustomer iframes use inline
   styles (padding-bottom responsive hack) preserved by the sanitizer. */
.kustomer-article-body .iframe-wrapper {
  width: 100%;
  margin-bottom: 1rem;
}

.kustomer-article-body .iframe-wrapper iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  display: block;
  border: 0;
}

/* Callout boxes */
.kustomer-article-body .callout {
  background: var(--kustomer-callout-bg);
  border-bottom: 7px solid var(--kustomer-link-hover);
  border-radius: 18px;
  margin-bottom: 32px;
  padding: 20px 25px 16px 20px;
  font-size: 18px;
}
.kustomer-article-body .fadeback {
  background: #fff;
  border-bottom: 7px solid var(--kustomer-callout-success-border);
  border-radius: 18px;
  margin-bottom: 32px;
  padding: 20px 25px 16px 20px;
  font-size: 18px;
}
.kustomer-article-body .mintcallout {
  background: var(--kustomer-callout-mint-bg);
  border-bottom: 7px solid var(--kustomer-callout-mint-border);
  border-radius: 18px;
  margin-bottom: 32px;
  padding: 20px 25px 16px 20px;
  font-size: 18px;
}
.kustomer-article-body section.ProseMirror-selectednode,
.kustomer-article-body dl.ProseMirror-selectednode {
  outline: 2px solid var(--kustomer-link-hover);
  outline-offset: 2px;
  border-radius: 18px;
}

/* Definition lists */
.kustomer-article-body dl {
  font-size: 1rem;
  line-height: 1.3rem;
  color: var(--kustomer-text);
  margin-bottom: 1rem;
}
.kustomer-article-body dt {
  font-weight: bold;
}
.kustomer-article-body dt + dd + dt {
  margin-top: 1.3rem;
}
.kustomer-article-body dd {
  margin-left: 0;
  margin-bottom: 0;
}
.kustomer-article-body dd p {
  margin-bottom: 0;
}
.kustomer-article-body dd br {
  display: none;
}

/* Center-aligned text (Froala/Kustomer class) */
.kustomer-article-body .ql-align-center {
  text-align: center;
}

/* Comment-based tabs (<!-- tabs:start/next/end -->) */
.kustomer-article-body .article-tabs {
  margin: 1.5rem 0;
}
.kustomer-article-body .article-tabs-nav {
  border-bottom: solid 1px var(--kustomer-tabs-nav-border);
  margin-bottom: 1rem;
}
.kustomer-article-body .article-tabs-nav ul {
  display: flex;
  list-style-type: none;
  margin-bottom: -1px;
  padding: 0;
}
.kustomer-article-body .article-tabs-nav-item {
  color: var(--kustomer-link);
  cursor: pointer;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  padding: 0 4px 16px;
  border-bottom: 1.5px solid transparent;
  white-space: nowrap;
  margin: 0 0 0 2rem;
}
.kustomer-article-body .article-tabs-nav-item:first-child {
  margin-left: 0;
}
.kustomer-article-body .article-tabs-nav-item:hover {
  text-decoration: underline;
}
.kustomer-article-body .article-tabs-nav-item.js-current {
  border-bottom: 1.5px solid var(--kustomer-link);
}
.kustomer-article-body .article-tabs-tab {
  display: none;
}
.kustomer-article-body .article-tabs-tab.js-current {
  display: block;
}

/* daisyui-ignore */
.article-tabs.ProseMirror-selectednode {
  outline: 2px solid var(--kustomer-link-hover);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Faint structural border around tab groups in the editor so authors can see
   where the tab container starts and ends. Dashed = "structural, not content." */
.editor-content .article-tabs {
  border: 1px dashed var(--color-base-300);
  border-radius: 8px;
  padding: 4px;
}

/* Comment tabs — editor mode: reuses .article-tabs-* classes from Kustomer styles above.
   Custom elements default to display:inline — override to block so height rules work.
   (The active panel is further overridden to display:flow-root by the CommentTabs
   NodeView's scoped <style> tag so floated images stay contained.) */
.editor-content comment-tab {
  display: block;
}

/* Tab nav becomes a flex row so the expand/collapse toggle button sits at
   the right end while the nav UL fills the remaining space. */
.editor-content .article-tabs-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.editor-content .article-tabs-nav ul {
  flex: 1 1 auto;
  margin-bottom: 0;
}
.article-tabs-toggle {
  flex: 0 0 auto;
  margin-bottom: 16px; /* match the nav-item bottom padding so it aligns vertically */
}

/* ===== Expanded (compare) mode ===== */
/* Anchor for absolutely-positioned divider overlay. */
.editor-content .article-tabs.article-tabs-expanded {
  position: relative;
}

/* Sticky tab nav in expanded mode: keeps the toggle + TOC reachable while
   the user scrolls through long stacked panels.
   z-index 5 sits above the editor content (no z-index) but below the
   editor's other floating chrome — DaisyUI dropdowns render at z-50
   (`.dropdown-content` in _form.html.erb) and the find-bar overlay uses
   z-index 10 (editor_controller.js). Don't bump above 9 without auditing
   those peers. */
.editor-content .article-tabs.article-tabs-expanded .article-tabs-nav {
  position: sticky;
  top: 0;
  z-index: 5;
  /* Match the editor's cream surface so the sticky nav blends in instead
     of looking like a white slab pasted on top. */
  background: var(--kustomer-bg);
  border-bottom: 1px solid var(--color-base-300);
  box-shadow: 0 2px 4px -2px color-mix(in srgb, var(--color-base-content) 8%, transparent);
}

/* In expanded (TOC) mode the active-tab indicator fades out — there's no
   single "active" panel when everything is visible. */
.editor-content .article-tabs.article-tabs-expanded .article-tabs-nav-item.js-current {
  border-bottom-color: transparent;
}

/* Leave room above each panel for the divider (which floats absolutely
   into that gap). 2rem = ~32px, enough for the divider's translateY(-1.5rem)
   plus visual breathing. Same value for first child so the iOS divider
   clears the sticky nav above it instead of overlapping it. */
.editor-content .article-tabs.article-tabs-expanded .article-tabs-tabs > comment-tab {
  margin-top: 2rem;
}

/* Divider overlay: holds one positioned <div role="heading"> per panel.
   pointer-events:none so clicks pass through to the panel content; each
   divider re-enables them locally so the heading text is selectable. */
.article-tabs-dividers {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  pointer-events: none;
}
.editor-content .article-tabs:not(.article-tabs-expanded) .article-tabs-dividers {
  display: none;
}
.article-tabs-divider {
  position: absolute;
  left: 0;
  right: 0;
  /* Slight negative offset so the rule + label sit visually above the panel,
     not on top of its first line. */
  transform: translateY(-1.5rem);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  pointer-events: auto;
  font-size: 0.75rem;        /* text-xs */
  line-height: 1rem;
  letter-spacing: 0.05em;    /* tracking-wide */
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-base-content) 60%, transparent);
}
/* The horizontal rule extending past the label on both sides. */
.article-tabs-divider::before,
.article-tabs-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 0;
  border-top: 1px solid var(--color-base-300);
}

/* Fade-in for newly revealed panels in expanded mode. The previously-
   active panel keeps its previous opacity (no animation) — only panels
   that were hidden when the toggle fired get this class. */
@keyframes article-tabs-panel-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.article-tabs-fade-in {
  animation: article-tabs-panel-fade-in 150ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .article-tabs-fade-in {
    animation: none;
  }
}

/* Ensure empty paragraphs inside list items have clickable height.
   ProseMirror's trailing <br> can render at 0px in some contexts.
   Applies globally — callouts, tab panels, index sections, etc. */
.editor-content li p {
  min-height: 1.5em;
}

/* ==================== Editor preview — layout-specific overrides ==================== */

.editor-preview {
  min-height: 400px;
  padding: 16px;
  border: none;
}

/* Preview header — mimics Kustomer article page header */
.preview-header {
  margin-bottom: 0;
}
.kustomer-article-body .preview-header-title {
  font-size: 36px;
  line-height: 1.2;
  margin: 0;
}
.preview-header-meta {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  color: var(--kustomer-text);
  font-family: Figtree, -apple-system, "Helvetica Neue", sans-serif;
}

/* Right panel type system */
.panel-heading {
  font-size: 1rem;         /* text-base (16px) */
  line-height: 1.5rem;
  font-weight: 600;        /* font-semibold */
  color: color-mix(in srgb, var(--color-base-content) 70%, transparent);
  margin-bottom: 0.75rem;
}

.panel-subheading {
  font-size: 0.875rem;     /* text-sm (14px) */
  line-height: 1.25rem;
  font-weight: 600;        /* font-semibold */
  color: color-mix(in srgb, var(--color-base-content) 70%, transparent);
  margin-bottom: 0.375rem;
}

.panel-body {
  font-size: 0.875rem;     /* text-sm (14px) */
  line-height: 1.25rem;
  color: color-mix(in srgb, var(--color-base-content) 70%, transparent);
}

.panel-caption {
  font-size: 0.75rem;      /* text-xs (12px) */
  line-height: 1rem;
  color: color-mix(in srgb, var(--color-base-content) 50%, transparent);
}

/* Collapsible panel sections — macOS disclosure chevrons */
.panel-section summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.panel-section summary::-webkit-details-marker { display: none; }

summary.panel-heading { margin-bottom: 0; }

/* Sidebar input text matches panel-body color */
.panel-section input[type="text"],
.panel-section input[type="url"],
.panel-section textarea {
  color: color-mix(in srgb, var(--color-base-content) 70%, transparent);
}

.panel-section summary .chevron-right { display: inline; }
.panel-section summary .chevron-down { display: none; }
.panel-section[open] summary .chevron-right { display: none; }
.panel-section[open] summary .chevron-down { display: inline; }