/* =============================================================
   Editor ala Basecamp (Lexxy) — token & style sesuai spesifikasi
   pemilik produk (nilai hasil ukur langsung dari Basecamp).
   Dimuat SETELAH lexxy.css supaya override-nya menang.
   ============================================================= */

:root{
  --ed-font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, sans-serif;
  --ed-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --ed-text-body: 20px;
  --ed-text-ui: 16px;
  --ed-line: 1.5;
  --ed-tracking: -0.00625em;

  --ed-ink: hsl(202.1 18.8% 19.8%);
  --ed-canvas: #fff;
  --ed-ink-5:  color-mix(in hsl, transparent, hsl(202.1 18.8% 19.8%) 5%);
  --ed-ink-10: color-mix(in hsl, transparent, hsl(202.1 18.8% 19.8%) 10%);
  --ed-ink-15: color-mix(in hsl, transparent, hsl(202.1 18.8% 19.8%) 15%);
  --ed-ink-25: color-mix(in hsl, transparent, hsl(202.1 18.8% 19.8%) 25%);
  --ed-ink-50: color-mix(in hsl, transparent, hsl(202.1 18.8% 19.8%) 50%);
  --ed-selected: hsl(205.9 100% 90%);
  --ed-selected-hover: hsl(208.4 88.6% 79.4%);
  --ed-link: hsl(213.3 67.2% 39.4%);
  --ed-primary: hsl(211.2 71.4% 48%);
  --ed-focus-ring: hsl(213.3 67.2% 39.4%);
  --ed-focus-ring-size: 2px;
  --ed-code-bg: color-mix(in hsl, transparent, hsl(202.1 18.8% 19.8%) 5%);

  --ed-radius: 0.5ch;
  --ed-btn-size: 2lh;
  --ed-gap: 2px;
  --ed-pad: 2px;
  --ed-min-h: 240px;
  --ed-shell-radius: 8px;
  --ed-toolbar-sticky-top: 64px; /* setinggi header sticky app ini */

  --hl-1:hsl(42.2 96.2% 31%);   --hl-bg-1:hsl(48.1 100% 77.3%);
  --hl-2:hsl(29.4 98.9% 36.9%); --hl-bg-2:hsl(36.5 100% 84.5%);
  --hl-3:hsl(7.8 63.6% 49.6%);  --hl-bg-3:hsl(12 100% 91.2%);
  --hl-4:hsl(326.9 54.9% 52.2%);--hl-bg-4:hsl(319.4 81% 91.8%);
  --hl-5:hsl(267.9 84.2% 60.4%);--hl-bg-5:hsl(253.1 100% 93.7%);
  --hl-6:hsl(211.2 71.4% 48%);  --hl-bg-6:hsl(205.9 100% 90%);
  --hl-7:hsl(148.4 68.8% 31.4%);--hl-bg-7:hsl(110.5 54.3% 86.3%);
  --hl-8:hsl(33.8 29.1% 43.1%); --hl-bg-8:hsl(31.4 36.8% 88.8%);
  --hl-9:hsl(201.4 6% 45.5%);   --hl-bg-9:hsl(180 3.7% 89.4%);
}

/* SHELL: satu-satunya elemen yang punya border. */
.editor-shell{
  background: var(--ed-canvas);
  border: 1px solid var(--ed-ink-15);
  border-radius: var(--ed-shell-radius);
  overflow: hidden;
}
.editor-shell:focus-within{
  border-color: var(--ed-focus-ring);
  box-shadow: 0 0 0 1px var(--ed-focus-ring);
}

.editor-shell .lexxy-editor{
  display:block; position:relative; background:var(--ed-canvas);
  font-family:var(--ed-font); font-size:var(--ed-text-body);
  line-height:var(--ed-line); letter-spacing:var(--ed-tracking); color:var(--ed-ink);
  border: 0;
  border-radius: var(--ed-radius);
}

/* TOOLBAR: sticky, garis pemisah tipis, tanpa background abu-abu */
.editor-shell .lexxy-toolbar{
  position: sticky; top: var(--ed-toolbar-sticky-top); z-index: 2;
  display:flex; flex-wrap:nowrap; align-items:center;
  gap: var(--ed-gap); padding: var(--ed-pad);
  background: var(--ed-canvas);
  border-bottom: 1px solid var(--ed-ink-10);
  border-radius: var(--ed-shell-radius) var(--ed-shell-radius) 0 0;
  font-size: var(--ed-text-ui); line-height: 1.3;
}

.editor-shell .lexxy-editor__toolbar-button{
  display:grid; place-items:center;
  inline-size: var(--ed-btn-size); block-size: var(--ed-btn-size);
  padding:0; margin:0; border:0; background:transparent; color:var(--ed-ink);
  border-radius: var(--ed-radius); cursor:pointer;
  transition: background-color 75ms ease, color 75ms ease;
}
.editor-shell .lexxy-editor__toolbar-button svg{ width:18px; height:18px; fill:currentColor; }
.editor-shell .lexxy-editor__toolbar-button:hover{ background: var(--ed-ink-5); }
.editor-shell .lexxy-editor__toolbar-button[aria-pressed="true"],
.editor-shell .lexxy-editor__toolbar-button[aria-expanded="true"]{ background: var(--ed-selected); }
.editor-shell .lexxy-editor__toolbar-button:focus-visible{
  outline: var(--ed-focus-ring-size) solid var(--ed-focus-ring); outline-offset: 0;
}
.editor-shell .lexxy-editor__toolbar-button[disabled],
.editor-shell .lexxy-editor__toolbar-button[aria-disabled="true"]{
  color: var(--ed-ink-25); cursor:default; background:transparent;
}
/* pemisah grup = spasi, BUKAN garis vertikal */
.editor-shell .lexxy-editor__toolbar-group-end{ margin-right: calc(var(--ed-radius) + 1px); }
.editor-shell .lexxy-editor__toolbar-button--push-right{ margin-left:auto; }
.editor-shell .lexxy-editor__toolbar-button--chevron{ inline-size:auto; padding-inline: 4px; gap:2px;
  grid-auto-flow: column; }

/* AREA MENULIS */
.editor-shell .lexxy-editor__content{
  min-height: var(--ed-min-h);
  padding: 10px;
  outline: none; border:0; background:transparent;
  white-space: pre-wrap; overflow-wrap:break-word;
  caret-color: var(--ed-ink); color: var(--ed-ink);
  font-size: var(--ed-text-body); line-height: var(--ed-line);
}
/* PLACEHOLDER: pseudo-element absolut, opacity 0.66 */
.editor-shell .lexxy-editor--empty .lexxy-editor__content::before{
  content: attr(placeholder);
  position:absolute; pointer-events:none; opacity:.66; color:var(--ed-ink);
  font-style: normal;
}

/* TIPOGRAFI ISI */
.formatted_content h2{ font-size:24px; line-height:1.15; font-weight:600; margin:1em 0 .3em; }
.formatted_content h3{ font-size:20px; line-height:1.2;  font-weight:600; margin:1em 0 .3em; }
.formatted_content h4{ font-size:18px; line-height:1.25; font-weight:600; margin:1em 0 .3em; }
.formatted_content p{ margin: 0 0 .75em; }
.formatted_content a{ color:var(--ed-link); text-decoration: underline; text-underline-offset:2px; }
.formatted_content ul, .formatted_content ol{ padding-left:1.4em; margin:0 0 .75em; }
.formatted_content blockquote{
  margin:.75em 0; padding-left:.8em; border-left:2px solid var(--ed-ink-25); color:var(--ed-ink);
}
.formatted_content pre, .formatted_content code{
  font-family:var(--ed-font-mono); font-size:.85em; background:var(--ed-code-bg);
  border-radius:var(--ed-radius);
}
.formatted_content pre{ padding:.6em .8em; overflow-x:auto; }
.formatted_content hr{ border:0; border-top:1px solid var(--ed-ink-15); margin:1.2em 0; }
.formatted_content table{ border-collapse:collapse; width:100%; }
.formatted_content th, .formatted_content td{ border:1px solid var(--ed-ink-10); padding:.4em .6em; }
.formatted_content th{ background:var(--ed-code-bg); font-weight:600; text-align:left; }

/* TOMBOL AKSI */
.editor-actions{ display:flex; gap:8px; margin-top:12px; }
.editor-actions .btn{
  height:40px; padding:0 13.6px; border-radius:8px; font-size:16px; font-family:var(--ed-font);
  background:#fff; color:var(--ed-ink); border:1px solid var(--ed-ink-25); cursor:pointer;
}
.editor-actions .btn--primary.btn--solid{
  background:var(--ed-primary); border-color:var(--ed-primary); color:#fff;
}

/* COMPOSER collapsed → expanded (perilaku kotak komentar Basecamp) */
.composer{ display:flex; align-items:flex-start; gap:16px; }
.composer__body{ flex:1; min-width:0; }
.composer__collapsed{
  display:block; width:100%; text-align:left; cursor:text;
  background:var(--ed-canvas);
  border:1px solid var(--ed-ink-15); border-radius:var(--ed-shell-radius);
  padding:12px 14px; font-family:var(--ed-font); font-size:16px;
  color: var(--ed-ink); opacity:.66;
}
.composer__collapsed:hover{ border-color: var(--ed-ink-25); }

/* Varian kompak untuk form balasan */
.editor-shell--compact{ --ed-min-h: 110px; --ed-text-body: 16px; }

/* indent/outdent hanya tampil di mobile */
@media (min-width: 768px){
  .editor-shell .hidden\@desktop{ display:none; }
}