/* The published documentation: its layout (tree, search) and its content.
   The SAME sheet styles the preview beside the atelier's editor, which is what
   makes « tel que publié » true. Colours are the layout's roles (layout.html):
   light and dark follow. */
.docs{display:grid;grid-template-columns:minmax(14rem,18rem) minmax(0,1fr);gap:2.5rem;align-items:start}
@media(max-width:800px){.docs{grid-template-columns:1fr;gap:1rem}}
.docs-side{position:sticky;top:1rem;max-height:calc(100vh - 2rem);overflow:auto;font-size:.95rem}
@media(max-width:800px){.docs-side{position:static;max-height:none}}
.docs-tree>summary{font-family:Oswald,"Arial Narrow",sans-serif;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);cursor:pointer;margin:.8rem 0 .4rem}
.docs-tree ul{list-style:none;margin:0;padding:0 0 0 .9rem}
.docs-tree>ul{padding-left:0}
.docs-tree a{display:block;color:var(--text);text-decoration:none;padding:.15rem .3rem;border-radius:4px}
.docs-tree a:hover{background:var(--surface-alt)}
.docs-tree a[aria-current=page]{background:var(--surface-alt);color:var(--heading);font-weight:600}
/* A page with sub-pages: a chevron before its link folds them. Leaves keep the
   chevron's room, so titles line up. */
.docs-tree li>a{margin-left:1.1rem}
.docs-tree li>details>summary{display:flex;align-items:center;list-style:none;cursor:pointer}
.docs-tree li>details>summary::-webkit-details-marker{display:none}
.docs-tree li>details>summary::before{content:"";flex:none;width:.4rem;height:.4rem;margin:0 .45rem 0 .25rem;
  border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(-45deg);
  transition:transform .15s}
.docs-tree li>details[open]>summary::before{transform:rotate(45deg)}
.docs-tree li>details>summary:hover::before{border-color:var(--link)}
.docs-tree li>details>summary>a{flex:1;min-width:0}
.docs-search{position:relative}
.docs-search input{width:100%}
#docs-results{list-style:none;margin:.3rem 0 0;padding:0;border:1px solid var(--line);border-radius:8px;
  background:var(--surface);max-height:60vh;overflow:auto}
#docs-results li a{display:block;padding:.5rem .7rem;text-decoration:none;color:var(--text);border-bottom:1px solid var(--line)}
#docs-results li a:hover,#docs-results li a:focus{background:var(--surface-alt)}
#docs-results strong{color:var(--heading)}
#docs-results small{display:block;color:var(--muted)}
#docs-results .none{padding:.5rem .7rem;color:var(--muted)}
.docs-main h1{font-size:2rem;margin:.2rem 0 1rem}
.docs-trail{font-size:.9rem;color:var(--muted)}
.docs-trail a{color:var(--muted)}
.docs-meta{color:var(--muted);font-size:.9rem;margin-top:2rem;border-top:1px solid var(--line);padding-top:.8rem}
/* The preview of the next publication (web/ready.go): unmistakable on every page. */
.docs-preview{background:var(--watch-bg);border:1px solid var(--watch-line);color:var(--watch);
  border-radius:8px;padding:.7rem 1rem;margin:0 0 1rem}
.docs-preview a{color:var(--watch)}
.docs-toc{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:1.25rem}
.docs-toc section{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:1rem 1.25rem}
.docs-toc h2{font-size:1.2rem;margin:0 0 .4rem}
.docs-toc h2 a{color:var(--heading);text-decoration:none}
.docs-toc ul{margin:0;padding-left:1.1rem}
.docs-toc li{margin:.15rem 0}
.docs-content{line-height:1.65;max-width:52rem}
.docs-content h2{font-size:1.45rem;margin-top:2rem}.docs-content h3{font-size:1.2rem;margin-top:1.5rem}
.docs-content img{max-width:100%;height:auto}
.docs-content blockquote{border-left:3px solid var(--line);margin-left:0;padding-left:1rem;color:var(--muted)}
.docs-content pre{background:var(--surface-alt);padding:.75rem;border-radius:4px;overflow-x:auto}
.docs-content code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em}
.docs-content table{border-collapse:collapse;margin:1rem 0;display:block;overflow-x:auto}
.docs-content th,.docs-content td{border:1px solid var(--line);padding:.35rem .7rem;text-align:left;vertical-align:top}
.docs-content th{background:var(--surface-alt)}
.docs-content li:has(>input[type=checkbox]){list-style:none;margin-left:-1.2rem}
.docs-content details{border:1px solid var(--line);border-radius:6px;padding:.4rem .9rem;margin:.8rem 0;background:var(--surface)}
.docs-content summary{cursor:pointer;font-weight:600;color:var(--heading)}
.docs-content details[open]>summary{margin-bottom:.4rem}
/* :::tableau, drawn by DataTables + ColumnControl (docs-tables.js): their
   colours taken back onto the site's tokens, so that light and dark follow the
   site's theme. :root:root outweighs the vendor sheets' :root, loaded later. */
:root:root{
  --dt-html_background:var(--bg);
  --dt-header_border:1px solid var(--line);--dt-body_border:1px solid var(--line);--dt-footer_border:1px solid var(--line);
  --dt-order-arrow_color:var(--text);--dt-order-arrow_color-current:var(--link);
  --dtcc-button-icon_color:var(--text);--dtcc-button_hover-background:var(--surface-alt);
  --dtcc-dropdown_background:var(--surface);--dtcc-dropdown_border:1px solid var(--line);
  --dtcc-dropdown_box-shadow:0 6px 18px rgba(8,16,26,.22);
  --dtcc-dropdown-button_color:var(--text);--dtcc-dropdown-button_hover-background:var(--surface-alt);
  --dtcc-spacer_border:1px solid var(--line);--dtcc-list-buttons_background:var(--surface-alt);
  --dtcc-search-icon_color:var(--text);--dtcc-search-icon_hover-background:var(--surface-alt);
  --dtcc-popover_background:var(--surface);
}
.docs-content .dt-container{margin:1rem 0;font-size:.95rem;width:fit-content;max-width:100%}
.docs-content .dt-container table.dataTable{display:table;width:auto;margin:0!important;border-collapse:collapse}
.docs-content .dt-layout-table>.dt-layout-cell{overflow-x:auto}
.docs-content .dt-layout-row:not(.dt-layout-table){margin:.4rem 0;gap:.5rem}
.docs-content table.dataTable th{background:var(--surface-alt)}
.docs-content table.dataTable>tbody>tr:hover>*{background:var(--surface-alt)}
.dt-container .dt-search{display:flex;align-items:center;gap:.5rem}
.dt-container .dt-search label{font-weight:600;color:var(--heading)}
.dt-container .dt-search input,.dt-container .dt-length select,.dtcc-dropdown input,.dtcc-dropdown select{
  font:inherit;font-size:.92rem;color:var(--text);background:var(--surface);border:1px solid var(--field-line);border-radius:4px;padding:.3rem .5rem}
.dt-container .dt-search input{width:16rem;max-width:60vw;margin:0}
.dt-container .dt-info{font-size:.85rem;color:var(--muted)}
.dt-container .dt-paging .dt-paging-button{color:var(--text)!important;border-radius:4px}
.dt-container .dt-paging .dt-paging-button.current{background:var(--surface-alt)!important;border:1px solid var(--line)!important}
.dtcc-dropdown{font-family:inherit;color:var(--text)}
.dtcc-dropdown .dtcc-list-buttons button{color:var(--link)}
.dtcc-dropdown .dtcc-button-text{font-weight:400}

/* [[_TOC_]]: the page's headings */
.docs-pagetoc{border:1px solid var(--line);border-radius:6px;background:var(--surface);padding:.6rem 1.1rem;margin:1rem 0;width:fit-content;max-width:100%}
.docs-pagetoc>p{margin:0 0 .3rem;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.docs-pagetoc ul{margin:0;padding-left:1.1rem}
.docs-pagetoc>ul{padding-left:0;list-style:none}
.docs-pagetoc li{margin:.15rem 0}
/* [[_TOSP_]] and empty sections: one card per sub-page */
.docs-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:1rem;margin:1rem 0}
.docs-card{display:flex;flex-direction:column;gap:.35rem;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:.9rem 1.1rem;color:var(--text);text-decoration:none;line-height:1.45}
.docs-card:hover{border-color:var(--link);text-decoration:none}
.docs-card strong{color:var(--heading);font-size:1.05rem}
.docs-card:hover strong{color:var(--link)}
.docs-card span{font-size:.92rem;color:var(--muted)}
.docs-card small{margin-top:auto;font-size:.82rem;color:var(--muted)}