/* FPDoc Online: the wiki's page and type, with a column of packages and
   units on the left, member tables, and the search's results under its box. */

.docs-tag { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.docs-layout {
  display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 0 36px;
  max-width: 1240px; margin: 0 auto; padding: 0 20px;
}
.docs-side {
  position: sticky; top: 0; align-self: start; max-height: 100vh; overflow-y: auto;
  padding: 28px 4px 40px 0; font-size: 13.5px; border-right: 1px solid var(--line);
}
.docs-side-head { margin: 0 0 10px; font-weight: 700; }
.docs-side-head a { color: var(--dim); text-decoration: none; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; }
.docs-packages, .docs-units { list-style: none; margin: 0 0 14px; padding: 0; }
.docs-packages a, .docs-units a {
  display: block; padding: 3px 10px; border-radius: 6px; color: var(--ink); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.docs-packages a { font-weight: 600; }
.docs-packages a:hover, .docs-units a:hover { background: var(--bg-soft); }
.docs-packages a[aria-current], .docs-units a[aria-current] { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-weight: 600; }
.docs-units { border-top: 1px solid var(--line); padding-top: 8px; }
.docs-units-box > summary { list-style: none; cursor: default; font-weight: 700; color: var(--dim); text-transform: uppercase; letter-spacing: .08em; font-size: 12px; margin: 4px 0 6px; }
.docs-units-box > summary::-webkit-details-marker { display: none; }
/* the place first, then the name and its tools */
.docs-page:has(> .pagetools) > .docs-crumbs { grid-row: 1; }
.docs-page:has(> .pagetools) > h1 { grid-row: 2; }
.docs-page:has(> .pagetools) > .pagetools { grid-row: 3; }
.docs-unit-filter { width: calc(100% - 8px); margin: 4px 0 6px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg); color: var(--ink); font: inherit; }

.docs-main { min-width: 0; }
.docs-main .wikipage { max-width: none; padding-left: 0; padding-right: 0; }
.docs-crumbs { font-size: 13px; color: var(--dim); margin: 26px 0 6px; overflow-wrap: anywhere; }
.docs-crumbs a { color: var(--dim); text-decoration: none; }
.docs-crumbs a:hover { color: var(--accent); text-decoration: underline; }
.docs-crumbs span { margin: 0 3px; opacity: .6; }
.docs-crumbs b { color: var(--ink); font-weight: 600; }
.doc-kind { font-size: 14px; font-weight: 600; color: var(--dim); letter-spacing: 0; vertical-align: middle; margin-left: 6px;
  padding: 2px 9px; border: 1px solid var(--line); border-radius: 999px; }
.doc-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin: -8px 0 22px; font-size: 13.5px; color: var(--dim); }
.doc-lead { font-size: 17px; color: var(--ink); margin: 0 0 20px; }
.doc-lead p { margin: 0 0 8px; }
.doc-missing { color: var(--dim); font-style: italic; }
.doc-credit { margin-top: 32px; font-size: 13px; color: var(--dim); }

.doc-vis { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.6;
  border: 1px solid var(--line); color: var(--dim); }
.doc-vis-published { color: var(--teal); border-color: color-mix(in srgb, var(--teal) 50%, transparent); }
.doc-vis-public { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.doc-vis-protected { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 45%, transparent); }

.wikibody table.docs-list { width: 100%; max-width: none; border-collapse: collapse; display: table; font-size: 14.5px; margin: 0 0 22px; }
.wikibody .docs-list td, .wikibody .docs-list th { padding: 7px 12px 7px 0; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; }
.docs-list th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); font-weight: 700; }
.docs-list td:first-child { white-space: nowrap; }
.wikibody .docs-list td.kind, .wikibody .docs-list td.vis { white-space: nowrap; color: var(--dim); font-size: 13px; text-transform: none; letter-spacing: 0; font-weight: 400; }
.docs-list td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--dim); }
.docs-list a { text-decoration: none; }
.docs-list a:hover code { text-decoration: underline; }
.wikibody .docs-list code, .wikibody .doc-chain code, .wikibody .doc-descendants code, .wikibody .doc-inherited code { background: none; border: 0; padding: 0; font-size: 13.5px; }
.docs-list td.doc-borrowed { color: var(--dim); font-style: italic; }
.doc-borrowed-note { color: var(--dim); font-size: 14px; }
.doc-where { font-size: 12px; color: var(--dim); margin-top: 2px; }

.doc-chain { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.doc-chain li { display: flex; align-items: center; gap: 6px; }
.doc-chain li + li::before { content: "←"; color: var(--dim); }
.doc-chain b { font-family: var(--mono, ui-monospace, monospace); font-size: 14px; }
.doc-descendants { font-size: 14px; line-height: 1.9; }
.doc-descendants a, .doc-inherited a { margin-right: 10px; }
.doc-inherited { margin: 0 0 8px; border: 1px solid var(--line); border-radius: 10px; padding: 6px 14px; background: var(--bg-soft); }
.doc-inherited summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.doc-inherited p { margin: 6px 0 8px; line-height: 1.9; }
.doc-seealso { columns: 2 240px; }
.doc-uses { columns: 4 140px; list-style: none; padding: 0; }
.doc-remark, .doc-note { margin: 0 0 18px; padding: 10px 14px; border-left: 3px solid var(--amber); background: var(--bg-soft); border-radius: 0 8px 8px 0; }
.wikibody code.file { color: var(--teal); }

/* the search: a big box on the home and result pages, results under every box */
.docs-search-big { display: flex; gap: 8px; margin: 0 0 26px; max-width: 640px; }
.docs-search-big input { flex: 1; padding: 11px 14px; font: inherit; font-size: 16px; border-radius: 10px;
  border: 1.5px solid color-mix(in srgb, var(--ink) 28%, transparent); background: var(--bg); color: var(--ink); }
.docs-search-big input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.docs-search-big button { padding: 0 18px; border-radius: 10px; }
form.docs-has-results { position: relative; }
.docs-results {
  position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; width: min(560px, 92vw); max-height: 70vh; overflow-y: auto;
  list-style: none; margin: 0; padding: 6px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
}
.docs-results li a { display: block; padding: 7px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.docs-results li.on a, .docs-results li a:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.docs-result-head { display: flex; gap: 8px; align-items: baseline; }
.docs-result-head code { background: none; border: 0; padding: 0; font-weight: 700; font-size: 14px; }
.docs-result-head small { color: var(--dim); font-size: 12px; }
.docs-result-where { display: block; font-size: 12px; color: var(--dim); }
.docs-result-short { display: block; font-size: 13px; color: var(--dim); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docs-none { padding: 8px 10px; color: var(--dim); }

.docs-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin: 0 0 10px; }
.docs-card { display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 16px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--bg-soft); color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s; }
.docs-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.docs-card b { font-size: 20px; }
.docs-card span { font-size: 14px; color: var(--dim); line-height: 1.5; }
.docs-card small { margin-top: auto; font-size: 12.5px; color: var(--accent); font-weight: 600; }

@media (max-width: 900px) {
  .docs-layout { grid-template-columns: minmax(0, 1fr); padding: 0 16px; }
  .docs-side { position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--line); padding: 14px 0 10px; }
  .docs-units { max-height: 260px; overflow-y: auto; }
  .docs-units-box > summary { cursor: pointer; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-soft); }
  .docs-units-box > summary::after { content: " ▾"; }
  .docs-units-box[open] > summary::after { content: " ▴"; }
  .docs-packages { display: flex; flex-wrap: wrap; gap: 4px; }
  /* a row a block: the name on its own line, whole, the words under it */
  .wikibody table.docs-list, .wikibody .docs-list tbody, .wikibody .docs-list tr { display: block; width: 100%; }
  .wikibody .docs-list tr:first-child:has(th) { display: none; }
  .wikibody .docs-list tr { padding: 9px 0; border-bottom: 1px solid var(--line); background: none !important; }
  .wikibody .docs-list td { display: block; border: 0; padding: 0; max-width: none; width: auto; background: none !important; }
  .wikibody .docs-list td:first-child { white-space: normal; overflow-wrap: anywhere; word-break: normal; margin-bottom: 2px; }
  .wikibody .docs-list td.kind, .wikibody .docs-list td.vis { display: inline-block; margin: 0 8px 4px 0; }
  .wikibody .docs-list td.num { display: inline-block; margin-right: 12px; }
}
@media print {
  .docs-side, .docsbar, .docs-results { display: none !important; }
  .docs-layout { display: block; padding: 0; }
}
/* the wiki's tables let a link break anywhere and cap cells on small
   screens; a name in the reference stays whole unless it cannot fit */
.wikibody .docs-list td a { overflow-wrap: break-word; word-break: normal; }
.wikibody .docs-list td, .wikibody .docs-list th { min-width: 0; max-width: none; }

/* what this is: an experiment, said plainly on the home page and in a line under every page */
.docs-experiment { margin: 0 0 24px; padding: 14px 18px; border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent);
  border-left: 4px solid var(--amber); border-radius: 10px; background: color-mix(in srgb, var(--amber) 8%, var(--bg)); }
.docs-experiment b { display: block; margin: 0 0 4px; }
.docs-experiment p { margin: 0 0 6px; font-size: 15px; }
.docs-experiment p:last-child { margin: 0; }
.docs-note { margin: 34px 0 30px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--dim); }
.docs-tag { background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--amber); }