/* Reading and editing an article: one large rounded page lifted off the desk,
   with its own sticky bar. The page is paper in both modes — ivory by day,
   black at night; the bar and the toolbar band carry the editing mode. */

.doc {
  max-width: 980px;
  margin: 0 auto;
  border-radius: var(--radius-sheet);
  background: var(--card);
  color: var(--ink);
}

.doc__bar {
  position: sticky;
  top: var(--header-height);
  z-index: 5;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--hairline);
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  background: color-mix(in srgb, var(--card) 94%, transparent);
  backdrop-filter: blur(10px);
}

.doc__bar-spacer {
  flex: 1;
}

.doc__status {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font: 500 15px/1 var(--font-display);
  color: var(--ink-muted);

  &::before {
    width: 9px;
    height: 9px;
    border-radius: var(--radius-pill);
    background: var(--ink-faint);
    content: "";
  }
}

/* ─── Bar buttons ────────────────────────────────────────────────────────── */

.doc-btn {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  height: 50px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--chip);
  color: var(--ink);
  font: 600 16px/1 var(--font-display);
  cursor: pointer;
  transition: background var(--transition-fast);

  &:hover {
    background: var(--chip-hover);
    color: var(--ink);
  }

}

.doc-btn--back {
  min-width: 0;
  padding-left: 16px;
}

.doc-btn--back > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doc-btn--accent {
  padding: 0 26px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;

  &:hover {
    background: var(--accent-hover);
    color: var(--on-accent);
  }
}

.doc-btn--icon {
  justify-content: center;
  width: 50px;
  padding: 0;
}

.doc-btn--danger {
  color: var(--color-danger);

  &:hover {
    color: var(--color-danger);
  }
}

.doc-btn--full {
  justify-content: center;
  width: 100%;
}

.doc-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

/* ─── Article head ───────────────────────────────────────────────────────── */

.doc__article {
  padding: 64px clamp(28px, 6vw, 72px);

  .doc--editing & {
    padding: 56px clamp(28px, 6vw, 72px) 96px;
  }
}

.doc__eyebrow {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 22px;
}

.doc__chip {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  height: 38px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--card);
  font: 600 14px/1 var(--font-display);

  &::before {
    width: 9px;
    height: 9px;
    border-radius: var(--radius-pill);
    background: var(--accent);
    content: "";
  }

}

.doc__chip--draft::before {
  background: var(--ink-faint);
}

.doc__collection {
  font: 500 16px/1 var(--font-display);
  color: var(--ink-muted);
}

.doc__title {
  max-width: 900px;
  margin-bottom: 24px;
  font: 700 clamp(44px, 6vw, 76px)/1 var(--font-display);
  letter-spacing: -0.045em;
  color: var(--ink);
  text-wrap: pretty;
}

.doc__description {
  max-width: 700px;
  margin-bottom: 34px;
  font: 400 26px/1.45 var(--font-display);
  color: var(--ink-lede);
  text-wrap: pretty;
}

.doc__byline {
  display: flex;
  gap: 14px;
  align-items: center;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--hairline);
  font: 500 16px/1 var(--font-display);
  color: var(--ink-muted);
}

.doc__byline-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--on-accent);
  font: 700 15px/1 var(--font-display);

  & img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* ─── Prose ──────────────────────────────────────────────────────────────── */

.doc__body {
  --lexxy-color-ink: var(--ink-body);
  --lexxy-color-ink-medium: var(--ink-lede);
  --lexxy-color-ink-light: var(--ink-muted);
  --lexxy-color-ink-lighter: var(--hairline);
  --lexxy-color-ink-lightest: var(--row);
  --lexxy-color-text: var(--ink-body);
  --lexxy-color-text-subtle: var(--ink-lede);
  --lexxy-color-code-token-att: #FF7B72;
  --lexxy-color-code-token-operator: #FF7B72;
  --lexxy-color-code-token-comment: #8B949E;
  --lexxy-color-code-token-function: #D2A8FF;
  --lexxy-color-code-token-property: #79C0FF;
  --lexxy-color-code-token-punctuation: #C9D1D9;
  --lexxy-color-code-token-selector: #7EE787;
  --lexxy-color-code-token-variable: #FFA657;

  max-width: 700px;
  padding-top: 44px;
  font: 400 21px/1.7 var(--font-display);
  color: var(--ink-body);
  text-wrap: pretty;

  & > * + * {
    margin-top: 26px;
  }

  & h1,
  & h2 {
    margin-top: 48px;
    font: 700 34px/1.15 var(--font-display);
    letter-spacing: -0.035em;
    color: var(--ink);
  }

  & h3 {
    margin-top: 40px;
    font: 700 26px/1.2 var(--font-display);
    letter-spacing: -0.02em;
    color: var(--ink);
  }

  & ul,
  & ol {
    padding-left: 28px;
  }

  & li + li {
    margin-top: 14px;
  }

  & a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-decoration-color: var(--accent);
    text-underline-offset: 3px;

    &:hover {
      text-decoration-color: var(--ink);
    }
  }

  & pre {
    padding: 28px 30px;
    overflow-x: auto;
    border-radius: 22px;
    background: var(--code-bg);
    color: var(--code-fg);
    font: 400 16px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace;
  }

  & blockquote {
    padding-left: 24px;
    border-left: 3px solid var(--accent);
    color: var(--ink-lede);
  }

  & img {
    border-radius: 22px;
  }
}

/* ─── Prev / next ────────────────────────────────────────────────────────── */

.doc__nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 72px;
}

.doc__nav-link {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 28px;
  border-radius: 24px;
  background: var(--row);
  color: var(--ink);
  transition: background var(--transition-fast);

  &:hover {
    background: var(--row-hover);
    color: var(--ink);
  }

}

.doc__nav-link--next {
  align-items: flex-end;
  grid-column: 2;
  text-align: right;
}

.doc__nav-label {
  font: 600 13px/1 var(--font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.doc__nav-title {
  font: 600 24px/1.2 var(--font-display);
  letter-spacing: -0.025em;
}

/* ─── Editor ─────────────────────────────────────────────────────────────── */

.doc__title-input,
.doc__description-input {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-display);
  resize: none;

  &:focus {
    outline: none;
  }

  &::placeholder {
    color: var(--ink-faint);
  }
}

.doc__title-input {
  margin-bottom: 24px;
  font: 700 clamp(44px, 6vw, 76px)/1 var(--font-display);
  letter-spacing: -0.045em;
}

.doc__description-input {
  margin-bottom: 34px;
  font: 400 26px/1.45 var(--font-display);
  color: var(--ink-lede);
}

.doc__editor-body {
  font: 400 21px/1.7 var(--font-display);
  color: var(--ink-body);
}

@media (width <= 640px) {
  .doc {
    margin-inline: calc(-1 * var(--tiles-gutter));
    border-radius: 0;
  }

  .doc__bar {
    gap: 8px;
    padding: 14px 16px;
    border-radius: 0;
  }

  .doc--editing .doc__bar {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .doc__publish {
    flex-basis: 100%;
  }

  .doc__publish .split-btn {
    display: flex;
  }

  .doc__publish .split-btn__main {
    flex: 1;
  }

  .doc__publish > .doc-btn--accent {
    width: 100%;
    justify-content: center;
  }

  .doc-btn {
    height: 44px;
    padding: 0 16px;
    font-size: 15px;
  }

  .doc-btn--icon {
    width: 44px;
  }

  .doc__article {
    padding-top: 36px;
  }

  .doc__article,
  .doc--editing .doc__article {
    padding-inline: 16px;
  }

  .doc--editing .doc__editor-body lexxy-toolbar {
    margin-inline: -16px;
    padding-inline: 16px;
  }

  .doc__nav {
    grid-template-columns: 1fr;
    margin-top: 48px;
  }

  .doc__nav-link--next {
    grid-column: 1;
  }
}

/* ─── Lexxy inside the editor card ───────────────────────────────────────── */

/* The card is already the writing surface, so the editor drops its own frame
   and the toolbar spans the page as a band. Lexxy's own palette is remapped
   onto the page tokens so the editor follows the theme. */
.doc__editor-body {
  --lexxy-color-code-token-att: light-dark(#D73A49, #FF7B72);
  --lexxy-color-code-token-operator: light-dark(#D73A49, #FF7B72);
  --lexxy-color-code-token-comment: light-dark(#6A737D, #8B949E);
  --lexxy-color-code-token-function: light-dark(#6F42C1, #D2A8FF);
  --lexxy-color-code-token-property: light-dark(#005CC5, #79C0FF);
  --lexxy-color-code-token-punctuation: light-dark(#24292E, #C9D1D9);
  --lexxy-color-code-token-selector: light-dark(#22863A, #7EE787);
  --lexxy-color-code-token-variable: light-dark(#E36209, #FFA657);

  & lexxy-editor {
    --lexxy-radius: 12px;
    --lexxy-editor-padding: 0;
    --lexxy-color-canvas: var(--card);
    --lexxy-color-ink-inverted: var(--card);
    --lexxy-color-ink: var(--ink);
    --lexxy-color-ink-medium: var(--ink-lede);
    --lexxy-color-ink-light: var(--ink-muted);
    --lexxy-color-ink-lighter: var(--hairline);
    --lexxy-color-ink-lightest: var(--row);
    --lexxy-color-text: var(--ink-body);
    --lexxy-color-text-subtle: var(--ink-lede);
    --lexxy-color-link: var(--ink);
    --lexxy-color-accent-dark: var(--ink);
    --lexxy-color-selected: var(--chip);
    --lexxy-color-selected-hover: var(--chip-hover);
    --lexxy-focus-ring-color: var(--ink);

    border: 0;
    background: transparent;
  }

  & lexxy-toolbar {
    position: sticky;
    top: calc(var(--header-height) + 91px);
    z-index: 4;
    width: auto;
    max-width: none;
    margin-inline: calc(-1 * clamp(28px, 6vw, 72px));
    margin-bottom: 34px;
    padding: 8px clamp(28px, 6vw, 72px);
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    border-radius: 0;
    background: var(--row);
  }

  & .lexxy-editor__toolbar-button {
    --lexxy-toolbar-button-size: 46px;

    border-radius: var(--radius-pill);
    background: transparent;

    &:hover:not([aria-disabled="true"]) {
      background: var(--input-focus);
    }
  }

  /* The formatting dropdowns are menus, so they take the cover — and their rows
     read as cover ink, not page ink (Lexxy colours them --lexxy-color-text, which
     is only light at night; the popover is black in both modes). Icons sit at the
     SVG default fill (black), fine on Lexxy's white canvas but invisible on ours,
     so tie them to the row's own ink. */
  & .lexxy-editor__toolbar-dropdown-list {
    background: var(--cover);
    color: var(--on-cover);
    box-shadow: var(--cover-shadow);

    button {
      color: var(--on-cover-dim);
    }

    svg {
      fill: currentColor;
    }
  }

  & .lexxy-editor__content {
    max-width: 700px;
    padding: 0;
  }

  & [contenteditable]:focus-visible {
    outline: none;
  }
}

/* ─── Publish control ────────────────────────────────────────────────────── */

.split-btn {
  display: inline-flex;
  overflow: hidden;
  border-radius: var(--radius-pill);
}

.split-btn__main,
.split-btn__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  border: 0;
  background: var(--accent);
  color: var(--on-accent);
  font: 700 16px/1 var(--font-display);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transition-fast);

  &:hover {
    background: var(--accent-hover);
    color: var(--on-accent);
  }
}

.split-btn__main {
  padding: 0 22px;

  &:disabled {
    background: var(--chip);
    color: var(--ink-faint);
    cursor: default;
  }
}

.split-btn__chevron {
  padding: 0 16px;
  border-left: 1px solid rgb(0 0 0 / 0.12);
}

.split-btn:has(.split-btn__main:disabled) .split-btn__chevron {
  background: var(--chip);
  color: var(--ink-muted);

  &:hover {
    background: var(--chip-hover);
    color: var(--ink);
  }
}

/* Autosave state rides the status dot rather than a colour change on the text. */
.doc__status[data-state="saving"]::before,
.doc__status[data-state="unsaved"]::before {
  background: var(--accent);
}

.doc__status[data-state="error"] {
  color: var(--color-danger);

  &::before {
    background: var(--color-danger);
  }
}