/* Public docs portal (WI-000613-004). Uses the shared token vars (tokens.css)
   so it follows OS light/dark automatically; brand teal on the top bar. */

.docs-portal {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

/* Top bar — brand teal, full-bleed. */
.docs-topbar {
  background: var(--brand);
  color: #fff;
  padding: 14px 24px;
  display: flex;
  align-items: center;
}
.docs-topbar__brand {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  text-decoration: none;
  color: #fff;
}
.docs-topbar__mark { font-weight: 700; font-size: 18px; letter-spacing: .2px; }
.docs-topbar__sub { font-weight: 500; font-size: 14px; opacity: .85; }

/* Global topbar search (WI-000708-004) — present on surface + article pages. */
.docs-topsearch { position: relative; margin-left: auto; display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.14); border-radius: 8px; padding: 6px 10px; min-width: 220px; }
.docs-topsearch > .ti { color: rgba(255,255,255,0.8); font-size: 15px; flex-shrink: 0; }
.docs-topsearch input { flex: 1; min-width: 0; border: none; background: none; color: #fff; font: inherit; font-size: 13.5px; outline: none; }
.docs-topsearch input::placeholder { color: rgba(255,255,255,0.7); }
.docs-topsearch__menu {
  position: absolute; top: calc(100% + 6px); right: 0; left: 0;
  z-index: 50;
  max-height: 60vh; overflow-y: auto;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 8px;
  box-shadow: 0 10px 32px rgba(0,0,0,0.28);
  padding: 4px;
}
.docs-topsearch__msg { padding: 10px 12px; color: var(--text-muted); font-size: 13px; }
.docs-topsearch__hit { display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left; padding: 8px 10px; border: none; background: none; border-radius: 6px; cursor: pointer; font: inherit; color: inherit; }
.docs-topsearch__hit:hover { background: var(--surface-2); }
.docs-topsearch__ctxline { display: flex; align-items: center; gap: 6px; margin-bottom: 1px; }
.docs-topsearch__ctx { font-size: 11.5px; color: var(--text-faint); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docs-topsearch__kind { flex-shrink: 0; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); border-radius: 4px; padding: 1px 5px; }
.docs-topsearch__title { font-size: 14px; font-weight: 500; }

.docs-main {
  flex: 1;
  width: 100%;
  padding: 32px 24px 64px;
  box-sizing: border-box;
}
/* Landing + single-article + status/empty views read in a narrow centered
   column; the surface page (below) breaks out to a wide two-column layout. */
.docs-body, .docs-article, .docs-status, .docs-empty { max-width: 820px; margin: 0 auto; }

.docs-footer {
  border-top: 1px solid var(--border);
  padding: 20px 24px;
  text-align: center;
  color: var(--text-faint);
  font-size: 13px;
}
.docs-footer a { color: var(--accent); text-decoration: none; }

/* Landing */
.docs-eyebrow {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-faint);
  margin: 0 0 4px;
}
.docs-title { font-size: 30px; font-weight: 700; margin: 0 0 20px; line-height: 1.2; }
.docs-lede { font-size: 17px; color: var(--text-muted); margin: 0 0 24px; }

.docs-search { display: flex; gap: 8px; margin: 0 0 32px; }
.docs-search__input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.docs-search__input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.docs-search__btn {
  padding: 10px 18px;
  border: none;
  border-radius: 8px;
  background: var(--brand);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* Surfaces landing — a card per Surface (WI-000708-001). */
.docs-surfaces {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

/* WI-000796-004 — surface-home "Filter areas" box + Global (chrome) group. */
.docs-areafilter {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-faint);
}
.docs-areafilter input {
  flex: 1;
  border: none;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  outline: none;
  min-width: 0;
}
.docs-globalgroup { margin-top: 28px; }
.docs-globalgroup__head {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-faint);
  margin: 0 0 12px;
}
.docs-surfcard {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px;
  height: 220px;               /* WI-000719: uniform cards — content never grows/overflows them */
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: border-color .12s ease, background .12s ease, transform .12s ease;
}
.docs-surfcard:hover { border-color: var(--accent); background: var(--surface-2); transform: translateY(-1px); }
.docs-surfcard__name { font-weight: 700; font-size: 16px; flex: 0 0 auto; }
/* Description renders markdown (inline) clamped to a few lines so every card stays
   the same height no matter how long the source description is (WI-000719). */
.docs-surfcard__desc {
  color: var(--text-muted); font-size: 13.5px; line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.docs-surfcard__desc .md { display: inline; }
.docs-surfcard__desc code { background: var(--surface-2); padding: 1px 4px; border-radius: 4px; font-size: .9em; }
.docs-surfcard__desc strong { color: var(--text); }
.docs-surfcard__meta { display: flex; align-items: center; gap: 8px; color: var(--text-faint); font-size: 12.5px; margin-top: auto; flex: 0 0 auto; }
.docs-surfcard__dot { color: var(--text-faint); }

/* Surface page section dot (WI-000708) — small colored bullet next to a
   component's name, mirroring the in-app component dot. */
.docs-section__dot { display: inline-block; width: 9px; height: 9px; border-radius: 999px; margin-right: 8px; vertical-align: middle; }

/* --- Surface page: two-column layout (WI-000708-002) --- */
.docs-surfacelayout {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: 40px;
  max-width: 1180px;
  margin: 0 auto;
  align-items: start;
}
.docs-surfacemain { min-width: 0; }
.docs-surfacemain .docs-title { margin-top: 4px; }

/* --- On this page rail (WI-000796-006) ---
   A quiet third column on the single-article split view listing the article's
   h2/h3 anchors; the `--toc` modifier widens the grid only when a rail renders
   (≥2 headings), so a heading-light article keeps the plain two-column layout. */
.docs-surfacelayout--toc { grid-template-columns: 264px minmax(0, 1fr) 200px; }
.docs-onthispage {
  position: sticky;
  top: 12px;
  align-self: start;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  border-left: 1px solid var(--border);
  padding-left: 14px;
  font-size: 12.5px;
}
.docs-onthispage__label {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-faint);
  margin-bottom: 8px;
}
.docs-onthispage__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.docs-onthispage__item--h3 { padding-left: 12px; }
.docs-onthispage__link {
  display: block;
  padding: 3px 8px;
  border-left: 2px solid transparent;
  margin-left: -1px;
  border-radius: 0 6px 6px 0;
  color: var(--text-muted);
  text-decoration: none;
  line-height: 1.35;
}
.docs-onthispage__link:hover { color: var(--text); background: var(--surface-2); }
.docs-onthispage__item.is-active > .docs-onthispage__link {
  color: var(--accent);
  font-weight: 600;
  border-left-color: var(--accent);
}

/* Left nav — sticky, scrolls independently of the reading column. */
.docsnav {
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 24px);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
}
.docsnav__filter {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text-faint);
}
.docsnav__filter input {
  flex: 1;
  border: none;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  outline: none;
  min-width: 0;
}
.docsnav__clear { background: none; border: none; color: var(--text-faint); cursor: pointer; padding: 0; display: inline-flex; }
.docsnav__scroll { overflow-y: auto; padding: 6px; }

.docsnav__surface { margin-bottom: 2px; }
.docsnav__shead { display: flex; align-items: center; gap: 2px; }
.docsnav__twist {
  flex-shrink: 0;
  width: 20px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--text-faint); cursor: pointer;
  font-size: 12px; padding: 0;
}
.docsnav__twist--leaf { cursor: default; }
.docsnav__sname {
  flex: 1; min-width: 0;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px; border-radius: 6px;
  font-size: 13px; font-weight: 600; color: var(--text);
  text-decoration: none;
}
.docsnav__sname:hover { background: var(--surface-2); }
.docsnav__sname > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docsnav__surface.is-current > .docsnav__shead .docsnav__sname { color: var(--accent); }

.docsnav__row { display: flex; align-items: center; gap: 2px; border-radius: 6px; }
.docsnav__row.is-active { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.docsnav__comp, .docsnav__result {
  flex: 1; min-width: 0;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px; border-radius: 6px;
  background: none; border: none; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--text); text-align: left;
}
.docsnav__comp:hover { background: var(--surface-2); }
.docsnav__row.is-active .docsnav__comp { color: var(--accent); font-weight: 600; }
.docsnav__dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 999px; }
.docsnav__compname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docsnav__count { flex-shrink: 0; font-size: 11px; font-weight: 600; color: var(--text-faint); background: var(--surface-2); border-radius: 999px; padding: 0 7px; }
.docsnav__empty { padding: 6px 8px; color: var(--text-faint); font-size: 12.5px; }
.docsnav__empty--sub { padding-left: 26px; }
.docsnav__opensurf { display: block; padding: 4px 8px 8px 26px; font-size: 12.5px; color: var(--accent); text-decoration: none; }
.docsnav__opensurf:hover { text-decoration: underline; }
.docsnav__results { display: flex; flex-direction: column; }
.docsnav__result.is-active, .docsnav__result:hover { background: var(--surface-2); }

/* --- Screen page: tab bar as table of contents (WI-000796-005) ---
   When a `kind='screen'` component is opened, its `kind='tab'` children are
   assembled into one page and this horizontal tab bar REPLACES the left tree
   rail as the table of contents. Sticky so it stays reachable while scrolling
   the stacked tab sections; scrollspy toggles `.is-active`. */
.docs-screenwrap { max-width: 900px; margin: 0 auto; }
.docs-screenmain { min-width: 0; }
.docs-tabbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 24px;
  padding: 6px 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.docs-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 6px 6px 0 0;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.docs-tab:hover { background: var(--surface-2); color: var(--text); }
.docs-tab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.docs-tab__dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 999px; }
.docs-tab__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* --- Windowed reading stream (WI-000708-003) --- */
.docs-stream { display: block; }
.docs-streambody { display: block; }
.docs-streambody--pending { display: block; }
.docs-streamart { padding: 4px 0 26px; }
.docs-streamart + .docs-streamart { border-top: 1px solid var(--border); padding-top: 22px; }
.docs-streamart__title { font-size: 22px; font-weight: 700; line-height: 1.25; margin: 6px 0 2px; letter-spacing: -0.01em; }
.docs-streamart__lede { font-size: 16px; line-height: 1.55; color: var(--text-muted); margin: 6px 0 14px; max-width: 62ch; }
/* Nested component sections indent slightly and get a left rule to signal depth. */
.docs-section--nested { border-left: 2px solid var(--border); padding-left: 16px; }

.docs-section { margin: 0 0 28px; scroll-margin-top: 16px; }
.docs-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
  margin-bottom: 10px;
}
.docs-section__head h2 { font-size: 15px; font-weight: 700; margin: 0; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }

.docs-list { list-style: none; margin: 0; padding: 0; }
.docs-list__item {
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 8px;
  text-decoration: none;
  color: inherit;
  background: var(--surface);
  transition: border-color .12s ease, background .12s ease;
}
.docs-list__item:hover { border-color: var(--accent); background: var(--surface-2); }
.docs-list__item--btn { width: 100%; text-align: left; font: inherit; cursor: pointer; color: inherit; }
.docs-list__ctxline { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; }
.docs-list__ctx { font-size: 11.5px; color: var(--text-faint); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.docs-list__kind { flex-shrink: 0; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); border-radius: 4px; padding: 1px 6px; }
.docs-list__title { display: block; font-weight: 600; font-size: 15px; }
.docs-list__excerpt { display: block; color: var(--text-muted); font-size: 13.5px; margin-top: 3px; }

.docs-linkbtn {
  background: none; border: none; color: var(--accent);
  font: inherit; cursor: pointer; padding: 0;
}
.docs-muted { color: var(--text-muted); }
.docs-status { padding: 40px 0; color: var(--text-muted); }
.docs-empty { padding: 48px 0; }
.docs-empty h1 { font-size: 24px; margin: 0 0 12px; }
.docs-empty a { color: var(--accent); }

/* Article */
.docs-crumbs { font-size: 13px; color: var(--text-muted); margin: 0 0 12px; display: flex; gap: 8px; align-items: center; }
.docs-crumbs a { color: var(--accent); text-decoration: none; }
.docs-crumbs__sep { color: var(--text-faint); }

/* Hero — the single home for the article's title + one-line intro. Keeping the
   intro here (and stripping a duplicate leading H1 from the body) avoids the
   title/excerpt/H1 triple-restatement the old layout produced. */
.docs-hero { margin: 0 0 28px; padding: 0 0 20px; border-bottom: 1px solid var(--border); }
.docs-hero__title { font-size: 32px; font-weight: 800; line-height: 1.15; margin: 4px 0 0; letter-spacing: -0.01em; }
.docs-hero__lede { font-size: 18px; line-height: 1.55; color: var(--text-muted); margin: 12px 0 0; max-width: 68ch; }
/* WI-000719: the hero description renders markdown — keep the lede look and reset
   the block margins so it reads as one lede paragraph, not article prose. */
.docs-hero__lede .md > :first-child { margin-top: 0; }
.docs-hero__lede .md > :last-child { margin-bottom: 0; }
.docs-hero__lede .md p { margin: 0 0 12px; }
.docs-hero__lede .md ul, .docs-hero__lede .md ol { margin: 0 0 12px; padding-left: 20px; }
.docs-hero__lede .md code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; font-size: .9em; }
.docs-hero__lede .md strong { color: var(--text); }
.docs-hero__lede .md a { color: var(--accent); }

/* WI-000720: pronounced full-width page hero. The band breaks out of .docs-main's
   padding to span the full width — a subtle elevated strip + bottom border sitting
   directly under the topbar — while its content re-centers at the page width. On
   the component page this also lifts the hero ABOVE the two-column grid, so the
   sticky left nav now begins BELOW the hero instead of beside it. */
.docs-herowrap {
  margin: -32px -24px 32px;
  padding: 30px 24px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.docs-herowrap .docs-hero {
  margin: 0 auto;
  padding: 0;
  border-bottom: none;
}
.docs-hero--wide { max-width: 1180px; }
.docs-hero--narrow { max-width: 820px; }

.docs-content { font-size: 16px; line-height: 1.7; }
.docs-content .md > :first-child { margin-top: 0; }
.docs-content h2 { font-size: 22px; margin: 32px 0 12px; }
.docs-content h3 { font-size: 18px; margin: 24px 0 8px; }
/* WI-000796-006: keep an anchored heading clear of the sticky chrome when it
   scrolls to the top from an on-this-page / deep-link jump. */
.docs-content h2, .docs-content h3 { scroll-margin-top: 88px; }
.docs-content p { margin: 0 0 16px; }
.docs-content a { color: var(--accent); }
.docs-content code {
  background: var(--surface-2);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: .9em;
}
.docs-content pre {
  background: var(--surface-2);
  padding: 14px 16px;
  border-radius: 8px;
  overflow-x: auto;
}
.docs-content pre code { background: none; padding: 0; }
/* Images sit centered, capped so a tall screenshot can't dominate the page or
   force a horizontal scroll; click to zoom (handled by the Lightbox). */
.docs-content img {
  display: block;
  max-width: 100%;
  max-height: 70vh;
  width: auto;
  height: auto;
  margin: 20px auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: zoom-in;
}
.docs-content ul, .docs-content ol { padding-left: 22px; margin: 0 0 16px; }
.docs-content blockquote {
  border-left: 3px solid var(--border-strong);
  margin: 0 0 16px;
  padding: 2px 0 2px 14px;
  color: var(--text-muted);
}

/* Trailing gallery — only for screenshots not already shown inline. Capped +
   click-to-zoom, same as inline images. */
.docs-shots { margin-top: 32px; display: flex; flex-direction: column; gap: 16px; }
.docs-shot { margin: 0; }
.docs-shot img {
  display: block;
  max-width: 100%;
  max-height: 70vh;
  width: auto;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: zoom-in;
}

/* Click-to-zoom overlay (shared Lightbox). */
.docs-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: rgba(0, 0, 0, 0.82);
  cursor: zoom-out;
}
.docs-lightbox__img {
  max-width: 96vw;
  max-height: 92vh;
  border-radius: 8px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
  cursor: default;
}
.docs-lightbox__close {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.docs-lightbox__close:hover { background: rgba(255, 255, 255, 0.26); }

/* Below the two-column breakpoint the surface page stacks: nav on top (static,
   not sticky), reading column beneath. */
@media (max-width: 860px) {
  .docs-surfacelayout, .docs-surfacelayout--toc { grid-template-columns: 1fr; gap: 20px; }
  .docsnav { position: static; max-height: 320px; }
  /* The on-this-page rail folds away on the stacked layout (the sections are
     already a short scroll). */
  .docs-onthispage { display: none; }
}

@media (max-width: 640px) {
  .docs-main { padding: 24px 16px 48px; }
  .docs-title { font-size: 25px; }
  .docs-hero__title { font-size: 26px; }
  .docs-hero__lede { font-size: 16px; }
  /* Keep the full-width hero band aligned to the smaller mobile page padding. */
  .docs-herowrap { margin: -24px -16px 24px; padding: 24px 16px 18px; }
}

/* --- In-app Documentation manager (WI-000613-006, redesigned WI-000626) --- */
.doc-manage__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.doc-manage__head-main { min-width: 0; }
.doc-manage__head-main h3 { margin: 0; font-size: 16px; font-weight: 700; }
.doc-manage__summary { margin: 3px 0 0; font-size: 12.5px; color: var(--text-muted); }
.doc-manage__head-actions { display: inline-flex; align-items: center; gap: 14px; flex-shrink: 0; }
.doc-manage__portal { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); text-decoration: none; font-size: 13px; font-weight: 500; white-space: nowrap; }
.doc-manage__portal:hover { text-decoration: underline; }

.doc-manage__empty { text-align: center; padding: 40px 16px; color: var(--text-muted); }
.doc-manage__empty i { font-size: 30px; color: var(--text-faint); }
.doc-manage__empty p { margin: 8px 0 0; }

.doc-manage__section { margin-bottom: 22px; }
.doc-manage__section-head { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; margin-bottom: 9px; border-bottom: 1px solid var(--border); }
.doc-manage__dot { width: 9px; height: 9px; border-radius: 999px; flex-shrink: 0; }
.doc-manage__section-name { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.doc-manage__count { font-size: 11px; font-weight: 600; color: var(--text-faint); background: var(--surface-2); border-radius: 999px; padding: 1px 8px; }

.doc-manage__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 11px 13px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); margin-bottom: 8px; text-align: left; font: inherit; color: inherit; cursor: pointer; transition: border-color .12s ease, background .12s ease; }
.doc-manage__row:hover { border-color: var(--accent); background: var(--surface-2); }
.doc-manage__rowmain { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.doc-manage__title { font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-manage__excerpt { font-size: 12.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-manage__meta { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.doc-manage__time { font-size: 12px; color: var(--text-faint); white-space: nowrap; }
.doc-manage__view { display: inline-flex; align-items: center; color: var(--text-faint); text-decoration: none; }
.doc-manage__view:hover { color: var(--accent); }

.doc-manage__section--missing .doc-manage__missing-icon { color: var(--warning); font-size: 14px; }
.doc-manage__row--missing { border-style: dashed; background: transparent; }
.doc-manage__row--missing .doc-manage__title { color: var(--text-muted); font-weight: 500; }
.doc-manage__write { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 600; color: var(--accent); }

.doc-badge { display: inline-flex; align-items: center; font-size: 12px; font-weight: 500; padding: 2px 9px; border-radius: 999px; text-transform: capitalize; }
.doc-badge--draft { color: var(--warning); background: color-mix(in srgb, var(--warning) 18%, transparent); }
.doc-badge--published { color: var(--success); background: color-mix(in srgb, var(--success) 16%, transparent); }
.doc-badge--archived { color: var(--text-faint); background: var(--surface-2); }
.doc-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 500; }
.doc-chip--in-sync { color: var(--success); }
.doc-chip--drifted { color: var(--danger); }

.doc-editor { display: flex; flex-direction: column; gap: 12px; }
.doc-editor__row { display: flex; gap: 12px; }
.doc-editor__row > * { flex: 1; }
.doc-editor .input, .doc-editor select.input { width: 100%; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; }
.doc-editor__shots { display: flex; flex-wrap: wrap; gap: 10px; }
.doc-editor__shot { position: relative; margin: 0; }
.doc-editor__shot img { width: 96px; height: 72px; object-fit: cover; border: 1px solid var(--border); border-radius: 6px; }
.doc-editor__shot-rm { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 999px; border: none; background: var(--danger); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.doc-editor__shot-add { display: inline-flex; align-items: center; gap: 4px; width: 96px; height: 72px; justify-content: center; border: 1px dashed var(--border-strong); border-radius: 6px; color: var(--text-muted); cursor: pointer; font-size: 13px; }
.doc-editor__sync { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); }
.doc-editor__versions summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.doc-editor__actions { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.doc-editor__actions-right { display: inline-flex; gap: 8px; }

/* --- Article slide-in panel read view (WI-000626) --- */
.doc-arti__edithead h3 { margin: 0 0 14px; font-size: 16px; font-weight: 700; }
.doc-arti__hero { padding: 4px 0 20px; margin-bottom: 22px; border-bottom: 1px solid var(--border); }
.doc-arti__crumbs { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.doc-arti__crumb { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.doc-arti__title { font-size: 26px; font-weight: 800; line-height: 1.2; margin: 0; letter-spacing: -0.01em; }
.doc-arti__lede { font-size: 16px; line-height: 1.55; color: var(--text-muted); margin: 10px 0 0; max-width: 60ch; }
.doc-arti__actions { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.doc-arti__public { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); text-decoration: none; font-size: 13px; font-weight: 500; }
.doc-arti__public:hover { text-decoration: underline; }
/* The read body reuses .docs-content typography (capped, zoomable images). */
.doc-arti__body { margin-bottom: 8px; }