/* Documents (#docs): the four cards, the reader below them (contents on the left, the document on the right), the blue
   placeholder chips, search highlights and the API access panel. Vision's own colours throughout, so dark mode follows. */

.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin: 18px 0; }
.doc-grid > .msg { grid-column: 1 / -1; }
.doc-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--ink); text-align: left; font: inherit; cursor: pointer; transition: border-color .15s; }
.doc-card:hover { border-color: var(--pma-blue); }
.doc-card[aria-expanded="true"] { border-color: var(--pma-blue); box-shadow: inset 0 0 0 1px var(--pma-blue); }
.doc-card:focus-visible { outline: 2px solid var(--pma-blue); outline-offset: 2px; }
.doc-card.none { cursor: default; border-style: dashed; box-shadow: none; }
.doc-card.none:hover { border-color: var(--line); }
.doc-card b { font-size: 15px; line-height: 1.3; }
.doc-meta { font-size: 12.5px; color: var(--muted); }
.doc-go { margin-top: auto; padding-top: 6px; font-size: 13px; font-weight: 600; color: var(--pma-blue); }

/* The kind badge: Terms amber, Privacy policy green, Engagement letter blue. */
.doc-kind { display: inline-block; align-self: flex-start; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; background: var(--grey-soft); color: var(--muted); }
.doc-kind.tc { background: var(--amber-soft); color: var(--amber); }
.doc-kind.pp { background: var(--green-soft); color: var(--green); }
.doc-kind.el { background: var(--pma-blue-soft); color: var(--pma-blue-ink); }

/* The reader */
.doc-reader { margin: 0 0 18px; }
.doc-rhead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.doc-rhead h2 { margin: 6px 0 2px; font-size: 22px; }
.doc-rhead p { margin: 0; }
.doc-rtools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.doc-find { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.doc-find input { min-width: 230px; text-transform: none; letter-spacing: 0; font-weight: 400; }
.doc-read { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 24px; align-items: start; }
.doc-toc { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 2px; max-height: 80vh; overflow-y: auto; }
.doc-toc button { font: 500 13px/1.35 var(--font); text-align: left; color: var(--ink); background: none; border: 0; border-left: 2px solid var(--line); padding: 5px 10px; cursor: pointer; }
.doc-toc button:hover { border-left-color: var(--pma-blue); color: var(--pma-blue); }
.doc-toc button:focus-visible { outline: 2px solid var(--pma-blue); outline-offset: -2px; }
.doc-toc button.dim { color: var(--muted); opacity: .55; }
@media (max-width: 900px) {
  .doc-read { grid-template-columns: minmax(0, 1fr); }
  .doc-toc { position: static; max-height: none; }
}

.doc-doc { min-width: 0; }
.doc-pad { padding: 8px 0; }
.doc-sec { padding: 14px 0; border-top: 1px solid var(--line); scroll-margin-top: 16px; }
.doc-sec:first-child { border-top: 0; padding-top: 0; }
.doc-sec h3 { margin: 0 0 8px; font: 600 16px/1.3 var(--font); text-transform: none; letter-spacing: 0; }
.doc-body { max-width: 76ch; font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; }
.doc-body p { margin: 0 0 10px; }
.doc-body ul, .doc-body ol { margin: 0 0 10px; padding-left: 1.4rem; }
.doc-body li p { margin: 0 0 4px; }
.doc-body blockquote { margin: 0 0 10px; padding-left: 12px; border-left: 3px solid var(--line); color: var(--ink-2); }
.doc-body h4 { margin: 14px 0 6px; font: 600 14px var(--font); }
.doc-body table { border-collapse: collapse; margin: 0 0 10px; max-width: 100%; }
.doc-body td, .doc-body th { border: 1px solid var(--line); padding: 5px 9px; text-align: left; vertical-align: top; }
.doc-body th { background: var(--grey-soft); }
.doc-empty { color: var(--muted); font-style: italic; }
.doc-body mark, .doc-sec h3 mark { background: #ffd84d; color: #14181d; border-radius: 2px; padding: 0 1px; }

/* Socket's placeholders ([client_name]) as small blue chips. */
.doc-ph { display: inline-block; font-size: .86em; line-height: 1.4; padding: 0 6px; border-radius: 4px; background: var(--pma-blue-soft); color: var(--pma-blue-ink); white-space: nowrap; font-weight: 600; }
.doc-sec h3 .doc-ph { font-size: .8em; }

/* API access (admins) */
.doc-api { margin-top: 12px; }
.doc-api code, .doc-newtok code { display: block; margin-top: 6px; padding: 8px; background: var(--panel); border-radius: 6px; overflow-wrap: anywhere; user-select: all; color: var(--ink); }
.doc-newform { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.doc-newform input { flex: 1 1 200px; min-width: 0; }