/* ============================================================
   Bytext — core.css  v2.0.0

   Sections:
     1. Design Tokens
     2. Reset & Base
     3. Layout
     4. Article Typography  (read + edit, shared)
     5. Editor Overrides    (contenteditable specifics)
     6. Controls            (fixed buttons panel)
     7. Status Panel        (publish success, errors)
     8. Toolbars            (text toolbar, block toolbar, link prompt)
     9. Media Figures       (images, videos)
    10. Diagrams            (read-only render; editor UI removed in 1.1.x)
    11. Responsive
   ============================================================ */

/* ── 1. Design Tokens ──────────────────────────────────────── */

:root {
  /* Colours */
  --bt-bg: #fff;
  --bt-text: #2f3033;
  --bt-muted: #7f8994;
  --bt-soft: #aaa49c;
  --bt-line: #dedbd4;
  --bt-line-strong: #343434;

  /* Toolbar */
  --bt-toolbar-bg: #2b2a27;
  --bt-toolbar-fg: #fffaf4;
  --bt-toolbar-hover: rgba(255, 255, 255, 0.16);
  --bt-toolbar-active: rgba(255, 255, 255, 0.28);

  /* Typography */
  --bt-font-ui:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --bt-font-text: Georgia, "Times New Roman", serif;
  --bt-font-mono: "SFMono-Regular", Menlo, Consolas, monospace;

  /* Spacing */
  --bt-block-gap: 26px;
  --bt-figure-gap: 32px;

  /* Shadows */
  --bt-shadow: 0 16px 42px rgba(34, 34, 34, 0.1);
  --bt-shadow-toolbar: 0 14px 44px rgba(0, 0, 0, 0.24);
}

/* ── 2. Reset & Base ───────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--bt-bg);
  color: var(--bt-text);
}

body {
  font-family: var(--bt-font-text);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.12em;
}

/* ── 3. Layout ─────────────────────────────────────────────── */

.bt_page_wrap {
  width: 100%;
}

.bt_page {
  max-width: 760px;
  margin: 0 auto;
  padding: 52px 24px 84px;
  position: relative; /* containing block for absolute toolbars */
}

.bt_text {
  width: 100%;
}

/* min-height only in editor mode so the click target exists */
.bt_text_host {
}
.bt_text_host--editor {
  min-height: 18rem;
}

/* ── 4. Article Typography ─────────────────────────────────── */

/* Title */
.bt_text_header h1,
.bt_editor h1[data-role="title"] {
  margin: 0;
  font-family: var(--bt-font-ui);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 750;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--bt-text);
}

/* Byline / signature */
.bt_text_header address,
.bt_editor address[data-role="signature"] {
  margin: 16px 0 38px;
  font-style: normal;
  font-family: var(--bt-font-ui);
  font-size: clamp(1rem, 2vw, 1.22rem);
  font-weight: 650;
  color: var(--bt-muted);
}

.bt_text_header address {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.bt_meta_separator {
  margin: 0 2px;
  color: #a4abb3;
}

/* Body text */
.bt_text_content,
.bt_editor {
  font-family: var(--bt-font-text);
  font-size: clamp(1.35rem, 2vw, 1.72rem);
  line-height: 1.58;
}

/* Block margins — all content blocks share the same bottom gap */
.bt_text_content p,
.bt_editor p,
.bt_text_content h2,
.bt_editor h2,
.bt_text_content h3,
.bt_editor h3,
.bt_text_content blockquote,
.bt_editor blockquote,
.bt_text_content ul,
.bt_editor ul,
.bt_text_content ol,
.bt_editor ol,
.bt_text_content pre,
.bt_editor pre {
  margin: 0 0 var(--bt-block-gap);
}

/* Headings */
.bt_text_content h2,
.bt_editor h2 {
  font-size: 1.55em;
  line-height: 1.2;
  font-weight: 700;
}
.bt_text_content h3,
.bt_editor h3 {
  font-size: 1.22em;
  line-height: 1.25;
  font-weight: 700;
}

/* Blockquote */
.bt_text_content blockquote,
.bt_editor blockquote {
  padding-left: 18px;
  border-left: 3px solid #d7d1c5;
  color: #5e574e;
}

/* Code block */
.bt_text_content pre,
.bt_editor pre {
  padding: 16px 18px;
  border-radius: 12px;
  background: #f6f6f6;
  font-size: 0.95rem;
  line-height: 1.6;
  overflow-x: auto;
}

.bt_text_content code,
.bt_editor code {
  font-family: var(--bt-font-mono);
  font-size: 0.9em;
}

/* Lists */
.bt_text_content ul,
.bt_text_content ol,
.bt_editor ul,
.bt_editor ol {
  padding-left: 30px;
}

/* Divider */
.bt_text hr,
.bt_editor hr {
  border: 0;
  border-top: 1px solid var(--bt-line);
  margin: 30px 0;
}

/* ── 5. Editor Overrides ───────────────────────────────────── */

.bt_editor {
  outline: none;
  caret-color: #222;
}

/* Non-editable islands inside the editor (figure wrappers, etc.) */
.bt_editor [contenteditable="false"] {
  cursor: default;
}

/* Kill default outlines on editable elements */
.bt_editor h1,
.bt_editor address,
.bt_editor p,
.bt_editor h2,
.bt_editor h3,
.bt_editor blockquote,
.bt_editor figcaption {
  outline: none;
}

/* Placeholder pseudo-elements */
.bt_editor [data-placeholder],
.bt_editor figcaption[data-placeholder] {
  position: relative;
}

.bt_editor .empty::before {
  content: attr(data-placeholder);
  color: var(--bt-soft);
  pointer-events: none;
  position: absolute;
  left: 0;
  font-weight: inherit;
  white-space: pre;
}

/* Title and signature placeholders are inline (not absolute) */
.bt_editor h1.empty::before,
.bt_editor address.empty::before {
  position: static;
}

/* Media-prompt paragraph has a slightly dimmer placeholder */
.bt_editor p[data-media-prompt="true"]::before {
  color: #9f9991;
}

/* Промежуточные пустые параграфы не показывают плейсхолдер —
   он нужен только на последнем блоке. Медиа-промпт исключён. */
.bt_editor p.empty:not(:last-child):not([data-media-prompt])::before {
  content: none;
}

/* ── 6. Controls ───────────────────────────────────────────── */

/* Fixed panel in the top-right corner */
.bt_text_buttons {
  position: fixed;
  top: 42px;
  right: max(24px, calc(50vw - 760px));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  z-index: 20;
  max-width: 300px;
  padding-top: 1rem;
}

/* Base pill button */
.button {
  border: 2px solid var(--bt-line-strong);
  border-radius: 999px;
  background: var(--bt-bg);
  color: #111;
  padding: 9px 19px;
  font-family: var(--bt-font-ui);
  font-size: 0.9rem;
  font-weight: 750;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.1s;
}
.button:hover {
  transform: translateY(-1px);
}
.button[hidden] {
  display: none;
}

/* Save button gets a filled black treatment to stand out */
.save_button {
  background: var(--bt-line-strong);
  color: #fff;
}
.save_button:hover {
  background: #1a1a1a;
}

/* ── 7. Status Panel ───────────────────────────────────────── */

.bt_status_panel,
.error_msg {
  width: min(300px, 86vw);
  padding: 13px 15px;
  border-radius: 14px;
  background: var(--bt-bg);
  border: 1px solid #f0efeb;
  box-shadow: var(--bt-shadow);
  font-family: var(--bt-font-ui);
  font-size: 0.9rem;
  line-height: 1.45;
}
.bt_status_panel[hidden],
.error_msg[hidden] {
  display: none;
}
.bt_status_panel p {
  margin: 7px 0 0;
}

.bt_status_title {
  display: block;
  font-weight: 750;
  margin-bottom: 2px;
}
.bt_status_hint {
  color: var(--bt-muted);
  font-size: 0.84rem;
}
.bt_status_hint--accent {
  color: #7a4200;
  font-weight: 600;
}

.error_msg {
  color: #8c1d28;
}

.bt_clipboard_hint {
  color: #8c1d28;
  font-size: 0.82rem;
  margin-top: 6px;
}
.bt_clipboard_hint[hidden] {
  display: none;
}

/* URL rows inside publish-success panel */
.bt_url_row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 5px 0 0;
}
.bt_url_row .bt_status_url {
  margin: 0;
  flex: 1;
  min-width: 0;
}

.bt_status_url {
  display: block;
  width: 100%;
  margin: 5px 0 0;
  padding: 7px 10px;
  border: 1px solid var(--bt-line);
  border-radius: 8px;
  font-size: 0.78rem;
  font-family: var(--bt-font-mono);
  color: var(--bt-text);
  background: #fafaf8;
  cursor: text;
}

/* Copy-to-clipboard icon button inside url rows */
.bt_copy_url_btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--bt-line);
  border-radius: 7px;
  background: var(--bt-bg);
  color: var(--bt-muted);
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}
.bt_copy_url_btn:hover {
  background: #f5f5f3;
  color: var(--bt-text);
  border-color: #bbb;
}
.bt_copy_url_btn--done {
  background: #e8f5e9;
  color: #2e7d32;
  border-color: #a5d6a7;
}
.bt_copy_url_btn svg {
  display: block;
}

/* ── 8. Toolbars ───────────────────────────────────────────── */

/* Shared positioning context */
.bt_tooltip,
.bt_blocks,
.bt_link_tooltip {
  position: absolute;
  z-index: 40;
}

/* Shared dark-pill shell */
.bt_tooltip,
.bt_blocks {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 10px;
  border-radius: 12px;
  background: var(--bt-toolbar-bg);
  color: var(--bt-toolbar-fg);
  box-shadow: var(--bt-shadow-toolbar);
}

/* Text toolbar is horizontally centered on the selection */
.bt_tooltip {
  transform: translateX(-50%);
}

.bt_tooltip[hidden],
.bt_blocks[hidden],
.bt_link_tooltip[hidden] {
  display: none;
}

/* Individual tool button */
.bt_tool_button {
  border: 0;
  background: transparent;
  color: inherit;
  font-family: var(--bt-font-ui);
  font-size: 0.86rem;
  font-weight: 750;
  cursor: pointer;
  padding: 5px 7px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  min-height: 30px;
  line-height: 1;
  transition: background 0.1s;
}
.bt_tool_button:hover,
.bt_tool_button:focus {
  background: var(--bt-toolbar-hover);
  outline: none;
}
.bt_tool_button.bt_tool_active {
  background: var(--bt-toolbar-active);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.5);
}
/* Mixed state: part of selection has this format, part doesn't */
.bt_tool_button.bt_tool_mixed {
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  opacity: 0.8;
}

.bt_tool_button svg {
  display: block;
  flex-shrink: 0;
}
.bt_button_label {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Visual separator between groups within a toolbar */
.bt_toolbar_sep {
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.2);
  margin: 0 2px;
  align-self: center;
}

/* Block-toolbar buttons are slightly larger than text-toolbar buttons */
.bt_block_btn {
  min-width: 34px;
  min-height: 34px;
  padding: 6px 8px;
}

/* Link prompt — inline URL input that appears below the text toolbar */
.bt_link_prompt {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(420px, calc(100vw - 24px));
  padding: 11px 12px;
  border-radius: 12px;
  background: var(--bt-toolbar-bg);
  color: var(--bt-toolbar-fg);
  box-shadow: var(--bt-shadow-toolbar);
}
.bt_link_prompt input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: #fff;
  font-family: var(--bt-font-ui);
  font-size: 1rem;
}
.bt_link_prompt input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}
.bt_link_prompt button {
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}

/* ── 9. Media Figures ──────────────────────────────────────── */

.bt_text figure,
.bt_editor figure {
  margin: 0 0 var(--bt-figure-gap);
  max-width: 100%;
}

.figure_wrapper {
  border-radius: 14px;
  overflow: hidden;
  background: #f3f3f3;
}
.figure_wrapper img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* 16:9 video iframe */
.iframe_wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: #111;
}
.iframe_helper {
  position: absolute;
  inset: 0;
}
.iframe_helper iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* Figure caption */
.bt_text figcaption,
.bt_editor figcaption {
  margin-top: 10px;
  color: var(--bt-muted);
  font-family: var(--bt-font-ui);
  font-size: 0.95rem;
  line-height: 1.45;
}

/* ── 10. Diagrams — removed in v1.3.0 ─────────────────────── */

/* ── 11. Responsive ────────────────────────────────────────── */

@media (max-width: 1180px) {
  .bt_text_buttons {
    right: 22px;
  }
}

@media (max-width: 980px) {
  .bt_page {
    padding-top: 88px;
  }
  .bt_text_buttons {
    top: 18px;
    right: 18px;
    max-width: calc(100vw - 36px);
  }
  .bt_status_panel,
  .error_msg {
    width: min(300px, calc(100vw - 36px));
  }
}

@media (max-width: 720px) {
  .bt_page {
    padding: 84px 18px 56px;
  }

  .bt_text_buttons {
    left: 18px;
    right: 18px;
    top: 14px;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
  }

  .button {
    padding: 8px 14px;
    font-size: 0.82rem;
  }
  .bt_status_panel,
  .error_msg {
    order: 10;
    width: 100%;
  }

  .bt_text_content,
  .bt_editor {
    font-size: 1.25rem;
    line-height: 1.62;
  }

  .bt_text_header h1,
  .bt_text_header h1,
  .bt_editor h1[data-role="title"] {
    font-size: clamp(1.85rem, 9vw, 2.4rem);
    line-height: 1.1;
  }

  .bt_text_header address,
  .bt_editor address[data-role="signature"] {
    margin: 12px 0 30px;
  }

  /* Text toolbar scrolls horizontally rather than clipping */
  .bt_tooltip {
    max-width: calc(100vw - 24px);
    overflow-x: auto;
  }

  /* Block toolbar is slightly more compact on mobile */
  .bt_blocks {
    padding: 7px 8px;
    opacity: 0.96;
  }

  .bt_link_prompt {
    width: calc(100vw - 24px);
  }
}

@media (max-width: 420px) {
  .bt_page {
    padding-left: 14px;
    padding-right: 14px;
  }
  .bt_text_content,
  .bt_editor {
    font-size: 1.16rem;
  }
  .button {
    font-size: 0.78rem;
  }
}