/* Markdown Reader page — tool-first layout */

/* [hidden] must always win over display rules on this page — several
   flex/grid containers are toggled via the hidden attribute. */
.reader-main [hidden],
.reader-gate[hidden],
.reader-workspace[hidden],
.reader-entry[hidden] {
  display: none !important;
}

.reader-main {
  max-width: 1080px;
  margin: 0 auto;
}

/* Entry state — one unified tool surface */
.reader-entry {
  /* The page reserves a viewport-sized surface for every reader state; on
     the entry view the paste panel stretches to fill it so the reserved
     height reads as content, not a blank band. */
  display: flex;
  flex-direction: column;
  max-width: 1080px;
  margin: 0 auto;
  padding: 28px 24px 8px;
}

.reader-entry-kicker {
  margin: 0 0 16px;
  font-size: var(--fs-xs);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--muted, #6b6353);
}

.reader-entry-kicker strong {
  color: inherit;
  font-weight: 650;
}

.reader-drop-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 216px;
  padding: 32px 24px;
  border: 1.5px dashed color-mix(in oklab, currentColor 22%, transparent);
  border-radius: 18px;
  background: color-mix(in oklab, var(--paper, #fff) 45%, transparent);
  text-align: center;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.reader-drop-icon {
  color: var(--accent, #b6542e);
  margin-bottom: 4px;
}

.reader-drop-panel strong {
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.reader-drop-formats {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-label);
  color: var(--muted, #6b6353);
}

.reader-drop-actions {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.reader-drop-panel .primary-action {
  padding: 9px 20px;
}

.reader-drop-panel:hover,
.reader-drop-panel.is-active,
.reader-drop-panel:focus-visible {
  border-color: var(--accent, #b6542e);
  background: color-mix(in oklab, var(--paper, #fff) 72%, transparent);
}

.reader-drop-panel.is-active {
  transform: scale(1.005);
}

.reader-paste-panel {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  margin-top: 14px;
  border: 1px solid color-mix(in oklab, currentColor 12%, transparent);
  border-radius: 14px;
  background: var(--paper, #fff);
  overflow: hidden;
}

#reader-paste {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  resize: vertical;
  min-height: 96px;
  border: 0;
  padding: 14px 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-xs);
  line-height: 1.6;
  background: transparent;
  color: inherit;
}

#reader-paste:focus:not(:focus-visible) {
  outline: none;
}

#reader-paste:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

.reader-paste-panel:focus-within {
  border-color: color-mix(in oklab, currentColor 30%, transparent);
}

.reader-paste-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 8px 12px;
  border-top: 1px solid color-mix(in oklab, currentColor 8%, transparent);
}

/* Sign-in gate */
.reader-gate {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 24px;
}

.reader-gate-card {
  border: 1px solid color-mix(in oklab, currentColor 12%, transparent);
  border-radius: var(--r-xl);
  padding: 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.reader-gate-card h2 {
  margin: 0;
  font-size: 22px;
}

.reader-gate-card p {
  margin: 0;
  color: var(--muted, #555);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

/* Workspace */
.reader-workspace {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px 40px;
}

/* Entry, gate, and workspace swap in place on this page. Holding all three
   to the same minimum height keeps the status line, SEO details, and footer
   still across the entry→loading→result transitions (docCLS). */
.reader-entry,
.reader-gate,
.reader-workspace {
  min-height: 600px;
  min-height: max(600px, 78svh);
}

/* One toolbar row: doc identity left, view switch centered, actions right. */
.reader-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 14px 0 12px;
  border-bottom: 1px solid color-mix(in oklab, currentColor 10%, transparent);
}

.reader-doc-id {
  display: flex;
  flex-direction: column;
  /* basis 0 + min-width 0: flex-wrap breaks lines on base sizes, so a long
     meta line would still push the action row to a new line under auto.
     Zero basis lets the block shrink and truncate instead. */
  min-width: 0;
  flex: 1 1 0;
}

.reader-doc-id strong {
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.reader-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 11.5px;
  color: var(--muted, #555);
}

#reader-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reader-meta-details {
  position: relative;
  flex: none;
}

#reader-meta-toggle {
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 50%;
  color: var(--muted, #555);
  background: transparent;
  vertical-align: -3px;
}

#reader-meta-toggle:hover {
  color: inherit;
}

#reader-meta-toggle[aria-expanded="true"] {
  color: var(--accent, #b6542e);
}

.reader-meta-detail-card {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid color-mix(in oklab, currentColor 16%, transparent);
  background: var(--paper, #fff);
  box-shadow: 0 8px 28px rgba(23, 19, 15, 0.14);
  font-size: var(--fs-label);
  line-height: 1.5;
  white-space: normal;
  text-transform: none;
  letter-spacing: 0;
}

.reader-meta-detail-card[hidden] {
  display: none;
}

.reader-tabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  justify-self: center;
  padding: 3px 4px 3px 12px;
  border-radius: var(--r-pill);
  background: color-mix(in oklab, currentColor 6%, transparent);
  border: 1px solid color-mix(in oklab, currentColor 10%, transparent);
}

.reader-tabs-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted, #555);
  margin-right: 6px;
}

.reader-tab-hint {
  font-size: 10px;
  font-weight: 500;
  opacity: 0.72;
  margin-left: 4px;
  font-style: italic;
}

.reader-tabs [role="tab"] {
  border: 0;
  border-radius: var(--r-pill);
  padding: 6px 14px;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  background: transparent;
  color: var(--muted, #555);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}

.reader-tabs [role="tab"]:hover {
  color: inherit;
  background: color-mix(in oklab, currentColor 8%, transparent);
}

.reader-tabs [role="tab"][aria-selected="true"] {
  background: var(--ink, #1a1a1a);
  color: var(--paper, #fff);
}

.reader-tabs [role="tab"]:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 0;
  box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 4px var(--signal);
}

.reader-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex: none;
  justify-self: end;
  align-items: center;
}

/* Export: one control, format choice inside the menu */
.reader-export {
  position: relative;
}

.reader-export > button svg:last-child {
  opacity: 0.7;
}

.reader-export-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  border-radius: var(--r-lg);
  border: 1px solid color-mix(in oklab, currentColor 14%, transparent);
  background: var(--paper, #fff);
  box-shadow: 0 12px 36px rgba(23, 19, 15, 0.16);
}

.reader-export-menu[hidden] {
  display: none;
}

.reader-export-menu [role="menuitem"] {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 550;
  text-align: left;
  cursor: pointer;
}

.reader-export-menu [role="menuitem"]:hover {
  background: color-mix(in oklab, currentColor 6%, transparent);
}

.reader-export-menu [role="menuitem"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.reader-export-menu [role="menuitem"] svg {
  flex: none;
  opacity: 0.75;
}

/* Post-conversion handoff — a small floating chip, no banner copy */
.reader-handoff {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 9px 12px;
  border-radius: var(--r-pill);
  border: 1px solid color-mix(in oklab, currentColor 14%, transparent);
  background: var(--paper, #fff);
  box-shadow: 0 10px 30px rgba(23, 19, 15, 0.16);
  font-size: 12.5px;
  line-height: 1.2;
  animation: reader-handoff-in 0.35s ease-out;
}

@keyframes reader-handoff-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.reader-handoff-check {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #3d7a4a;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

.reader-handoff a {
  font-weight: 600;
  color: var(--accent, #b6542e);
  text-decoration: none;
}

.reader-handoff a:hover {
  text-decoration: underline;
}

.reader-handoff-close {
  cursor: pointer;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--muted, #555);
  font-size: var(--fs-sm);
  line-height: 1;
}

.reader-handoff-close:hover {
  color: inherit;
}

/* Lives outside <main> — the page-entry animation leaves a residual transform
   on main that would anchor position:fixed to the document, not the viewport. */
.reader-handoff[hidden] {
  display: none !important;
}

.reader-actions button {
  font-size: 12.5px;
  padding: 7px 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.reader-actions button svg {
  flex: 0 0 auto;
  opacity: 0.85;
}

/* Fixed one-line status: a wrapping message would grow the box and push the
   SEO details below it; the full text is already shown in .reader-notice. */
#reader-status {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.reader-notice {
  margin: 12px 16px 0;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid color-mix(in oklab, #b45309 35%, transparent);
  background: color-mix(in oklab, #b45309 8%, transparent);
  font-size: var(--fs-xs);
  line-height: 1.5;
}

/* Panes */
.reader-panes {
  /* flow-root keeps the notice/progress top margins inside the box —
     border-top is 0, so without a BFC the first child's margin collapses
     through and pushes the whole pane down when a strip appears. */
  display: flow-root;
  border: 1px solid color-mix(in oklab, currentColor 10%, transparent);
  border-radius: 0 0 16px 16px;
  border-top: 0;
  min-height: 320px;
  background: color-mix(in oklab, var(--paper, #fff) 55%, transparent);
}

.reader-pane {
  padding: 20px 24px 28px;
}

.reader-pane-status {
  margin: 0 0 10px;
  font-size: var(--fs-label);
  color: var(--muted, #555);
}

.reader-pane-status:empty {
  display: none;
}

.reader-rendered {
  max-width: 760px;
  margin: 0 auto;
  font-size: var(--fs-body);
  line-height: 1.72;
  /* 长标识符/URL 无空格也能断行，绝不溢出内容框 */
  overflow-wrap: break-word;
}

/* pre 默认 white-space:pre 不换行——必须显式给横向滚动，否则长行溢出边框 */
.reader-rendered pre {
  max-width: 100%;
  overflow-x: auto;
}
.reader-rendered pre code {
  overflow-wrap: normal;
}

.reader-rendered :where(ul, ol) :where(ul, ol) {
  margin: 0.25rem 0;
}

.reader-rendered blockquote {
  margin: 0 0 1rem;
  padding: 2px 14px;
  border-left: 3px solid var(--line, #ddd0bd);
  color: var(--muted, #74695f);
}

.reader-rendered blockquote p {
  margin: 0;
}

/* KaTeX typesets into .math-display after load; before (or if) that happens
   the raw TeX stays readable in the same boxed style it always had. */
.reader-rendered .math-display {
  margin: 0 0 1rem;
}
.reader-rendered .math-display:not(:has(.katex)) {
  padding: 10px 14px;
  border: 1px solid var(--line, #ddd0bd);
  border-radius: var(--r-md);
  background: var(--paper-deep, #ece1cf);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  overflow-x: auto;
  white-space: pre-wrap;
}
/* Images the verified resolvers cannot produce keep their alt text as a
   visible placeholder instead of leaking literal Markdown. */
.reader-rendered .reader-image-placeholder {
  display: inline-block;
  padding: 2px 8px;
  border: 1px dashed var(--line, #ddd0bd);
  border-radius: var(--r-sm);
  color: var(--muted, #74695f);
  font-size: 0.85em;
}

.reader-editor {
  width: 100%;
  min-height: 480px;
  border: 0;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13.5px;
  line-height: 1.65;
  padding: 4px 0;
  background: transparent;
  color: inherit;
}

.reader-editor:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

.reader-editor.is-readonly {
  color: color-mix(in oklab, currentColor 80%, transparent);
}

.reader-pane-note {
  color: var(--muted, #555);
  font-size: var(--fs-sm);
  padding: 24px;
  text-align: center;
}

/* Compare split */
.reader-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 0;
}

.reader-compare-col {
  padding: 18px 20px 24px;
  min-width: 0;
}

.reader-compare-col + .reader-compare-col {
  border-left: 1px solid color-mix(in oklab, currentColor 10%, transparent);
}

.reader-compare-col h3 {
  margin: 0 0 12px;
  font-size: var(--fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted, #555);
}

.reader-compare-col .reader-rendered {
  font-size: 14.5px;
}

/* PDF canvas inside reader panes */
.reader-original-content .review-pdf-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.reader-original-content .review-pdf-toolbar strong {
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

.reader-original-content .review-pdf-toolbar button {
  border: 1px solid color-mix(in oklab, currentColor 16%, transparent);
  border-radius: var(--r-md);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12.5px;
  padding: 5px 12px;
  cursor: pointer;
}

.reader-original-content .review-pdf-toolbar button:disabled {
  opacity: 0.4;
  cursor: default;
}

.reader-original-content .review-pdf-viewport {
  overflow: auto;
}

/* Reading panes scroll with the page, not inside themselves — the shared
   review styles set overscroll-behavior:contain which trapped the wheel
   inside the pane and made the page feel unscrollable. */
.reader-rendered.review-rendered-content,
.reader-original-content.review-source-content {
  overflow: visible;
  overscroll-behavior: auto;
}

/* scrollIntoView lands a page flush under the sticky site header — keep a
   visual offset so the target page isn't hidden behind chrome. */
.review-pdf-page {
  scroll-margin-top: 96px;
}

.reader-original-content .review-pdf-canvas {
  display: block;
  margin: 0 auto;
  border-radius: var(--r-sm);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.12);
}

/* Non-PDF retained sources get the same compare/original treatment —
   images, audio, video, sandboxed HTML, and plain text all render inline. */
.reader-source-media {
  display: block;
  max-width: 100%;
  margin: 0 auto;
  border-radius: var(--r-sm);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.12);
}

video.reader-source-media {
  width: 100%;
}

audio.reader-source-media {
  width: 100%;
  min-width: 260px;
}

.reader-source-frame {
  display: block;
  width: 100%;
  min-height: 480px;
  border: 1px solid color-mix(in oklab, currentColor 12%, transparent);
  border-radius: var(--r-sm);
  background: #fff;
}

.reader-source-text {
  margin: 0;
  padding: 14px 16px;
  max-height: 70vh;
  overflow: auto;
  border-radius: var(--r-sm);
  border: 1px solid color-mix(in oklab, currentColor 12%, transparent);
  background: color-mix(in oklab, currentColor 4%, transparent);
  font-size: 0.85rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 860px) {
  .reader-compare {
    grid-template-columns: 1fr;
  }

  .reader-compare-col + .reader-compare-col {
    border-left: 0;
    border-top: 1px solid color-mix(in oklab, currentColor 10%, transparent);
  }

  /* Narrow: stack the toolbar — tabs keep center stage on their own row. */
  .reader-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "doc actions"
      "tabs tabs";
    /* All four tabs render while a job loads; syncToolbar hides the
       source-dependent ones once artifacts land, unwrapping the tab row and
       shrinking the toolbar ~17px — floor the loading height so the panes
       never move. */
    min-height: 134px;
    align-content: start;
  }

  .reader-toolbar .reader-doc-id {
    grid-area: doc;
  }

  .reader-toolbar .reader-tabs {
    grid-area: tabs;
    justify-self: start;
  }

  .reader-toolbar .reader-actions {
    grid-area: actions;
  }
}

/* Reading layout — Typora-style outline rail */
.reader-reading-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

.reader-reading-layout:has(.reader-outline:not([hidden])) {
  grid-template-columns: 220px minmax(0, 1fr);
}

.reader-outline {
  align-self: stretch;
  border-right: 1px solid color-mix(in oklab, currentColor 10%, transparent);
}

/* Pin below the 70px sticky header — top:24 let the rail slide underneath it
   and clip its first entries. The label stays fixed while the nav scrolls. */
.reader-outline-inner {
  position: sticky;
  top: calc(86px + var(--preview-bar-height, 0px));
  max-height: calc(100vh - 104px - var(--preview-bar-height, 0px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-right: 14px;
}

.reader-outline-inner > strong {
  display: block;
  flex: none;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted, #555);
  margin-bottom: 8px;
}

.reader-outline nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}

.reader-outline a {
  display: block;
  font-size: 12.5px;
  line-height: 1.45;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  color: var(--muted, #555);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-left: 2px solid transparent;
}

.reader-outline a[data-level="2"] {
  padding-left: 18px;
}

.reader-outline a[data-level="3"] {
  padding-left: 30px;
  font-size: var(--fs-label);
}

.reader-outline a:hover {
  color: inherit;
  background: color-mix(in oklab, currentColor 5%, transparent);
}

.reader-outline a.is-active {
  color: inherit;
  font-weight: 600;
  border-left-color: var(--accent, #4f46e5);
  background: color-mix(in oklab, var(--accent, #4f46e5) 7%, transparent);
}

/* Compare — click-to-sync */
.reader-sync-hint {
  float: right;
  font-size: 11px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted, #555);
}

.reader-sync-status {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--accent, #4f46e5);
  background: color-mix(in oklab, var(--accent, #4f46e5) 10%, transparent);
}

.reader-compare .reader-rendered :is(h1,h2,h3,h4,h5,h6,p,li,pre,blockquote,table,figure) {
  border-left: 2px solid transparent;
  padding-left: 8px;
  margin-left: -10px;
  border-radius: 4px;
  transition: background 140ms ease, border-color 140ms ease;
}

.reader-compare .reader-rendered :is(h1,h2,h3,h4,h5,h6,p,li,pre,blockquote,table,figure):hover {
  cursor: pointer;
  background: color-mix(in oklab, var(--accent, #4f46e5) 5%, transparent);
}

.reader-compare .reader-rendered .is-synced {
  border-left-color: var(--accent, #4f46e5);
  background: color-mix(in oklab, var(--accent, #4f46e5) 8%, transparent);
}

@media (max-width: 1080px) {
  .reader-reading-layout:has(.reader-outline:not([hidden])) {
    grid-template-columns: 1fr;
  }

  .reader-outline {
    border-right: 0;
    border-bottom: 1px solid color-mix(in oklab, currentColor 10%, transparent);
  }

  .reader-outline-inner {
    position: static;
    max-height: 160px;
    padding: 0 0 12px;
  }
}

/* Conversion queue rail — multi-file results stay in one reader */
.reader-queue[hidden],
.reader-progress[hidden] {
  display: none;
}

/* The rail appears after the workspace is already on screen (the opened job
   upserts into it once the fetch lands). Holding one row of space keeps the
   toolbar and panes still; the rail is always single-line (chips scroll
   horizontally), so the slot is exact. The card's top margin moves onto the
   slot as padding so it cannot collapse out of the reservation. */
.reader-queue-slot {
  min-height: 62px;
  padding-top: 10px;
}

.reader-queue-slot > .reader-queue {
  margin-top: 0;
}

/* Tasks reads as one self-contained panel rather than a loose rail —
   bordered card, label pinned left, chips scroll inside it. */
.reader-queue {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0 0;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid color-mix(in oklab, currentColor 10%, transparent);
  border-radius: var(--r-lg);
  background: color-mix(in oklab, var(--paper, #fff) 72%, var(--accent-soft, #f3e7d9));
}

.reader-queue-label {
  flex: none;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted, #6b6353);
}

.reader-queue-items {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px;
  scrollbar-width: thin;
}

.reader-queue-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  max-width: 260px;
  padding: 5px 11px;
  border: 1px solid color-mix(in oklab, currentColor 14%, transparent);
  border-radius: var(--r-pill);
  background: var(--paper, #fff);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
}

.reader-queue-item:hover {
  border-color: currentColor;
}

.reader-queue-item[aria-current="true"] {
  border-color: var(--accent, #b6542e);
  background: color-mix(in oklab, var(--accent, #b6542e) 8%, var(--paper, #fff));
}

.reader-queue-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reader-queue-icon {
  flex: none;
  width: 12px;
  height: 12px;
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='3' fill='%236b6353'/%3E%3C/svg%3E");
}

@keyframes reader-queue-spin {
  to {
    transform: rotate(360deg);
  }
}

.reader-queue-item[data-status="queued"] .reader-queue-icon,
.reader-queue-item[data-status="running"] .reader-queue-icon,
.reader-queue-item[data-status="processing"] .reader-queue-icon,
.reader-queue-item[data-status="staged"] .reader-queue-icon {
  border: 1.5px solid color-mix(in oklab, currentColor 25%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: reader-queue-spin 0.8s linear infinite;
}

.reader-queue-item[data-status="succeeded"] .reader-queue-icon {
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.6 4.8 9.2 10 3.2' fill='none' stroke='%233d7a4a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.reader-queue-item[data-status="failed"] .reader-queue-icon {
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 3l6 6M9 3l-6 6' fill='none' stroke='%23a3402c' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.reader-queue-item[data-status="timed_out"] .reader-queue-icon {
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='4.5' fill='none' stroke='%23a9772c' stroke-width='1.6'/%3E%3Cpath d='M6 3.6v2.6l1.7 1.2' fill='none' stroke='%23a9772c' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

.reader-queue-item[data-status="cancelled"] .reader-queue-icon {
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6h6' fill='none' stroke='%236b6353' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.reader-queue-item[data-status="deleted"] .reader-queue-icon {
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 3.5h7M4.8 3.5V2.4h2.4v1.1M3.6 3.5l.45 5.7a1 1 0 0 0 1 .9h1.9a1 1 0 0 0 1-.9l.45-5.7' fill='none' stroke='%236b6353' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.reader-queue-item[data-status="deleted"] {
  opacity: 0.62;
}

.reader-queue-item[data-status="deleted"] .reader-queue-name {
  text-decoration: line-through;
}

/* Locally opened files — an upload glyph, not a job status */
.reader-queue-item[data-status="local"] .reader-queue-icon {
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 8.2V2.6M3.9 4.7 6 2.5l2.1 2.2' fill='none' stroke='%23b6542e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2.4 8.4v1a.9.9 0 0 0 .9.9h5.4a.9.9 0 0 0 .9-.9v-1' fill='none' stroke='%23b6542e' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Inline conversion offer — dropped a PDF/DOCX into the reader */
.reader-convert-card {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 14px;
  padding: 14px 40px 14px 16px;
  border: 1px solid color-mix(in oklab, currentColor 14%, transparent);
  border-radius: var(--r-lg);
  background: var(--paper, #fff);
  font-size: 13.5px;
}

.reader-convert-dismiss {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted, #6b6353);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.reader-convert-dismiss:hover {
  background: color-mix(in oklab, currentColor 10%, transparent);
  color: inherit;
}

.reader-convert-card .primary-action {
  padding: 7px 16px;
  font-size: var(--fs-xs);
}

.reader-convert-card a {
  font-size: 12.5px;
}

.reader-convert-detail {
  flex: 1 1 100%;
  font-size: 12.5px;
  color: var(--muted, #6b6353);
}

/* In-flight conversion inside the reader — lives inside .reader-panes so
   showing/hiding it reflows only the pane interior (empty while loading),
   never the pane box, status line, or SEO details below. */
.reader-progress {
  margin: 14px 16px 0;
  padding: 18px 20px;
  border: 1px solid color-mix(in oklab, currentColor 12%, transparent);
  border-radius: 14px;
  background: var(--paper, #fff);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.reader-progress strong {
  font-size: 15px;
}

.reader-progress span {
  font-size: var(--fs-xs);
  color: var(--muted, #6b6353);
}

.reader-progress-track {
  margin-top: 8px;
  height: 4px;
  border-radius: var(--r-pill);
  background: color-mix(in oklab, currentColor 10%, transparent);
  overflow: hidden;
}

.reader-progress-track i {
  display: block;
  height: 100%;
  width: 38%;
  border-radius: var(--r-pill);
  background: var(--accent, #b6542e);
  animation: reader-progress-slide 1.4s ease-in-out infinite;
}

@keyframes reader-progress-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(360%); }
}

/* Workspace drop target */
.reader-workspace.is-droptarget .reader-panes {
  outline: 2px dashed var(--accent, #4f46e5);
  outline-offset: -2px;
}

/* Print — reading view only */
@media print {
   .site-header,
  .site-footer,
  .reader-entry,
  .reader-gate,
  .reader-toolbar,
  .reader-notice,
  .reader-progress,
  .reader-outline,
  .status-line,
  .brand-seo,
  .faq-section,
  .brand-related,
  #reader-pane-source,
  #reader-pane-original,
  #reader-pane-compare {
    display: none !important;
  }

  .reader-workspace:not([hidden]),
  .reader-pane:not([hidden]),
  .reader-panes {
    display: block !important;
    border: 0;
    padding: 0;
    margin: 0;
    max-width: none;
  }

  .reader-rendered {
    max-width: none;
    font-size: 11pt;
  }

  .reader-rendered pre,
  .reader-rendered table,
  .reader-rendered figure {
    break-inside: avoid;
  }

  .reader-rendered h1,
  .reader-rendered h2,
  .reader-rendered h3 {
    break-after: avoid;
  }
}

/* Buttons — match site secondary/ghost treatment */
.reader-paste-bar .secondary,
.reader-gate-card .secondary,
.reader-actions .secondary {
  border: 1px solid color-mix(in oklab, currentColor 16%, transparent);
  border-radius: var(--r-md);
  background: var(--paper, #fff);
  color: inherit;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 8px 16px;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
}

.reader-paste-bar .secondary:hover,
.reader-gate-card .secondary:hover,
.reader-actions .secondary:hover {
  border-color: currentColor;
}

.reader-actions .ghost-action {
  border: 0;
  background: transparent;
  color: var(--muted, #555);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 7px 10px;
  cursor: pointer;
  border-radius: var(--r-md);
}

.reader-actions .ghost-action:hover {
  color: inherit;
  background: color-mix(in oklab, currentColor 6%, transparent);
}

.reader-actions .primary-action {
  min-width: 0;
  padding: 8px 16px;
  font-size: var(--fs-xs);
}

.reader-actions button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 720px) {
  .reader-paste-bar {
    flex-direction: column;
    align-items: stretch;
  }
}

/* SEO disclosures sit far below the tool surface */
.reader-main > details.brand-seo {
  margin-top: 20px;
}

.reader-main > details.brand-seo:first-of-type {
  margin-top: 64px;
}