/* Shared editor chrome. Document templates and PDF paper use their own styles. */
:root {
  color-scheme: dark;
  --bg-app: #111217;
  --bg-toolbar: #191a1f;
  --bg-panel: #1b1c22;
  --bg-panel-header: #191a1f;
  --bg-elevated: #212228;
  --bg-input: #16171c;
  --bg-segment: #101115;
  --border: #2a2b32;
  --border-strong: #484b56;
  --text: #e7e8ec;
  --text-dim: #9a9da6;
  --text-mute: #858994;
  --blue: #5aa2ef;
  --blue-soft: rgba(90,162,239,.14);
  --primary-bg: #246ec4;
  --success: #5ecb85;
  --pill-active-bg: #eef1f6;
  --pill-active-text: #15161b;
  --hover: rgba(255,255,255,.05);
  --selection: rgba(90,162,239,.24);
  --preview-text: #d8dadf;
  --heading-text: #f4f5f7;
  --bg-inline-code: #26272e;
  --code-text: #ffb27a;
  --bg-code: #16171c;
  --scrollbar: #33343c;
  --scrollbar-hover: #43454e;
  --radius: 8px;
  --mono: ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --sans: "Apple SD Gothic Neo","Malgun Gothic",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
:root[data-ui-theme="light"] {
  color-scheme: light;
  --bg-app: #eef1f5;
  --bg-toolbar: #ffffff;
  --bg-panel: #ffffff;
  --bg-panel-header: #f8f9fc;
  --bg-elevated: #f4f6fa;
  --bg-input: #ffffff;
  --bg-segment: #eef1f5;
  --border: #dce1e8;
  --border-strong: #b7c0ce;
  --text: #252a34;
  --text-dim: #596273;
  --text-mute: #6e7787;
  --blue: #246ec4;
  --blue-soft: rgba(36,110,196,.09);
  --pill-active-bg: #ffffff;
  --pill-active-text: #1e2838;
  --hover: rgba(34,52,78,.05);
  --selection: rgba(36,110,196,.18);
  --preview-text: #343b47;
  --heading-text: #171f2c;
  --bg-inline-code: #edf0f5;
  --code-text: #965014;
  --bg-code: #f6f8fb;
  --scrollbar: #c7ced9;
  --scrollbar-hover: #a4afbf;
  --success: #277747;
}
html, body { height: 100%; }
body { margin: 0; background: var(--bg-app); color: var(--text); font-family: var(--sans); overflow: hidden; }
#app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.toolbar {
  box-sizing: border-box; flex: 0 0 auto; display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap; gap: 12px; min-height: 52px;
  padding: 6px 14px; background: var(--bg-toolbar); border-bottom: 1px solid var(--border);
}
.toolbar-left, .toolbar-center, .toolbar-right { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.toolbar-label { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.tool-title { font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.sub-toolbar {
  flex: 0 0 auto; display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 8px 14px; background: var(--bg-toolbar); border-bottom: 1px solid var(--border);
}
.segmented { display: flex; background: var(--bg-segment); border: 1px solid var(--border); border-radius: 999px; padding: 3px; gap: 2px; }
.seg-btn {
  appearance: none; border: none; background: transparent; color: var(--text-dim);
  font: 13px var(--sans); padding: 5px 14px; border-radius: 999px;
  cursor: pointer; transition: background .15s ease,color .15s ease; white-space: nowrap;
}
.seg-btn:hover { color: var(--text); }
.seg-btn.active { background: var(--pill-active-bg); color: var(--pill-active-text); font-weight: 600; }
.btn-pill, .btn-ghost, .btn-primary {
  appearance: none; box-sizing: border-box; cursor: pointer; border: 1px solid var(--border);
  border-radius: 999px; padding: 6px 14px; color: var(--text); background: transparent;
  font: 600 12.5px var(--sans); line-height: 1.4; white-space: nowrap;
  transition: border-color .15s ease,background .15s ease,color .15s ease;
}
.btn-pill { font-family: var(--mono); display: inline-block; }
.btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 500; color: var(--text-dim); }
.btn-pill:hover, .btn-ghost:hover { border-color: var(--blue); background: var(--blue-soft); color: var(--text); }
.btn-primary { background: var(--primary-bg); border-color: var(--primary-bg); color: #fff; }
.btn-primary:hover { background: var(--primary-bg); filter: brightness(1.08); }
.btn-ghost.active { background: var(--blue-soft); border-color: var(--blue); color: var(--blue); }
.btn-ghost.copied { color: var(--success); border-color: var(--success); }
.btn-accent { color: var(--code-text); border-color: var(--code-text); }
.btn-text { appearance: none; cursor: pointer; background: transparent; border: none; color: var(--text-dim); font: 13px var(--sans); padding: 6px 8px; border-radius: 6px; display: flex; align-items: center; gap: 6px; }
.btn-text:hover { color: var(--text); background: var(--hover); }
:is(.btn-pill,.btn-ghost,.btn-primary):disabled { opacity: .4; cursor: not-allowed; filter: none; }
:is(.btn-pill,.btn-ghost,.btn-primary):disabled:hover { background: transparent; border-color: var(--border); color: var(--text-dim); }
.btn-primary:disabled:hover { background: var(--primary-bg); border-color: var(--primary-bg); color: #fff; }
:is(button,input,select,textarea,summary):focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.theme-toggle { min-width: 80px; }
.theme-toggle [data-theme-icon] { font-size: 16px; line-height: 1; }
.panel { font-size: 13px; flex-shrink: 0; background: var(--bg-panel); }
.panel details { border: 1px solid var(--border); background: transparent; border-radius: var(--radius); padding: 12px; margin-bottom: 12px; }
.panel summary { color: var(--text); font-size: 12.5px; font-weight: 600; }
.panel .setting-group label { color: var(--text-dim); font-size: 12px; }
:is(.panel,dialog) :is(input,select,textarea):not([type="checkbox"]):not([type="range"]):not([type="file"]):not([type="color"]):not(#codeEditInput):not(.block-edit-content *) {
  box-sizing: border-box; min-width: 0; max-width: 100%; background: var(--bg-input); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 6px; padding: 8px; font: inherit;
}
:is(.panel,dialog) input[type="checkbox"], :is(.panel,dialog) input[type="range"] { accent-color: var(--blue); }
.panel hr { border: none; border-top: 1px solid var(--border); }
.preview-item { border-width: 1px; border-radius: var(--radius); }
.preview-item.active { box-shadow: inset 0 0 0 1px var(--blue); }
.help-text, #documentStatus, .setting-hint { color: var(--text-dim); }
:is(#blockEditDialog,#tocEditDialog,#confirmDocumentDialog,#pendingDesignDialog,#imageDialog) {
  background: var(--bg-panel); color: var(--text); border: 1px solid var(--border-strong);
  border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,.3); font-family: var(--sans);
}
.block-edit-heading h2 { color: var(--text); }
.block-edit-heading p { color: var(--text-dim); }
#codeEditInput { background: var(--bg-input); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius); }
/* Document-editing surfaces remain on paper regardless of editor chrome. */
.pdf-page, .tag-style-sample, .block-edit-content { color-scheme: light; }
@media screen {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 6px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); }
}
@media (max-width: 760px) {
  .toolbar, .sub-toolbar { padding: 8px 10px; gap: 8px; }
  .toolbar-label { display: none; }
}