/* SDProjects plugin documentation pages.
   Load after style.css: this file only adds what documentation needs (contents
   sidebar, tables, code, figures) and reuses the site's palette and type. */

/* Hero: copy on the left, the plugin's cover art on the right, so the
   contents list is reachable without scrolling. */
.docs-hero{padding:52px 5.5% 48px;background:#090a0b;border-bottom:1px solid #2b2e30;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,430px);gap:58px;align-items:center}
.docs-hero-copy{min-width:0}
.docs-hero .eyebrow{margin-bottom:16px}
.docs-hero h1{font-size:clamp(38px,4.4vw,58px);letter-spacing:-2.5px;margin:0 0 14px}
.docs-hero .intro{max-width:620px;font-size:18px;margin:0 0 24px}
.docs-facts{display:flex;flex-wrap:wrap;max-width:620px;margin:0 0 26px;padding:0;list-style:none;border-top:1px solid #2b2e30;border-bottom:1px solid #2b2e30}
.docs-facts li{flex:1 1 170px;padding:11px 20px 11px 0;font-size:15px;color:#d9dcde}
.docs-facts span{display:block;font-size:11px;letter-spacing:2px;font-weight:600;color:#73777a;margin-bottom:2px}
.docs-actions{display:flex;flex-wrap:wrap;gap:14px}
/* Brand mark sits tight against its label; the arrow keeps its own gap. */
.docs-actions .button{gap:11px}
.docs-actions .button>span{margin-left:16px}
.btn-icon{width:17px;height:17px;flex:none;fill:currentColor}
/* Cover art, with a glow sampled from the artwork's own pink. */
.docs-cover{margin:0}
.docs-cover img{display:block;width:100%;height:auto;border:1px solid #33363a;box-shadow:0 24px 64px -26px rgba(251,176,254,.55)}
.secondary{border:1px solid #45484a;color:#f5f5f3}
.secondary:hover{background:#17191b;color:#f5f5f3}

.docs-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:72px;padding:64px 5.5% 110px}
.docs-toc{position:sticky;top:24px;align-self:start;max-height:calc(100vh - 48px);overflow:auto;font-size:14px}
.docs-toc summary{display:none}
.docs-toc p{font-size:11px;letter-spacing:2px;font-weight:600;color:#73777a;margin:0 0 10px}
.docs-toc ol{list-style:none;margin:0 0 28px;padding:0}
.docs-toc a{display:block;padding:4px 0 4px 14px;border-left:1px solid #2b2e30;color:#969da2;line-height:1.45}
.docs-toc a:hover{color:#f5f5f3;border-left-color:#8b9196}

.docs-content{max-width:780px;min-width:0}
.docs-part+.docs-part{margin-top:96px;padding-top:72px;border-top:1px solid #2b2e30}
.docs-part>.eyebrow{margin-bottom:18px}
.docs-content h2{font-size:clamp(30px,2.8vw,40px);margin:0 0 16px}
.docs-content h3{font-size:24px;font-weight:500;letter-spacing:-.6px;line-height:1.3;margin:64px 0 14px;scroll-margin-top:24px}
.docs-content h4{font-size:16px;font-weight:600;line-height:1.45;margin:0 0 6px;color:#f5f5f3}
.docs-content p,.docs-content li{color:#b9bec2}
.docs-content p{margin:0 0 16px}
.docs-content strong{color:#f5f5f3;font-weight:600}
.docs-content ul,.docs-content ol{padding-left:22px;margin:0 0 18px}
.docs-content li+li{margin-top:6px}
.docs-content a{border-bottom:1px solid #63686b}
.docs-content a:hover{border-bottom-color:#b8bec4}
.docs-lead{font-size:19px;line-height:1.6}

.docs-content code{font-family:Consolas,Menlo,"Courier New",monospace;font-size:.86em;color:#e6e8e9;background:#16181a;border:1px solid #2b2e30;border-radius:3px;padding:1px 6px;overflow-wrap:anywhere}
.docs-content pre{background:#121416;border:1px solid #2b2e30;padding:16px 18px;overflow-x:auto;margin:0 0 18px}
.docs-content pre code{background:none;border:0;padding:0;font-size:14px}

.table-wrap{overflow-x:auto;margin:22px 0 26px;border-top:1px solid #3a3d40}
.docs-content table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.docs-content th{text-align:left;font-size:11px;letter-spacing:1.5px;font-weight:600;color:#8b9196;padding:12px 18px 10px 0;border-bottom:1px solid #3a3d40;white-space:nowrap}
.docs-content td{padding:12px 18px 12px 0;border-bottom:1px solid #232628;vertical-align:top;color:#b9bec2}
.docs-content td:first-child{color:#f5f5f3;min-width:150px}

.fit{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin:26px 0}
.fit>div{border-top:1px solid #3a3d40;padding-top:16px}
.fit ul{margin:0}

.note{border-left:2px solid #8b9196;background:#111314;padding:16px 22px;margin:26px 0}
.note p:last-child{margin-bottom:0}

.issue{border-top:1px solid #232628;padding:22px 0 6px}
.issue p:last-child,.issue ul:last-child{margin-bottom:12px}

.docs-content figure{margin:30px 0 36px}
.docs-content figure img{display:block;width:100%;height:auto;border:1px solid #2b2e30}
.docs-content figure.narrow img{width:auto;max-width:100%}
.docs-content figcaption{font-size:13px;line-height:1.5;color:#82898f;margin-top:10px}

@media(max-width:900px){
  .docs-hero{grid-template-columns:1fr;gap:34px}
  .docs-cover{max-width:560px}
  .docs-layout{grid-template-columns:1fr;gap:36px;padding-top:40px}
  .docs-toc{position:static;max-height:none;border:1px solid #2b2e30;padding:14px 18px}
  .docs-toc summary{display:list-item;cursor:pointer;font-size:14px;color:#d9dcde}
  .docs-toc[open] summary{margin-bottom:16px}
  .fit{grid-template-columns:1fr;gap:20px}
}
@media(max-width:600px){
  .docs-hero{padding-top:40px;padding-bottom:38px;gap:24px}
  .docs-hero h1{letter-spacing:-2px}
  .docs-hero .intro{font-size:17px;margin-bottom:20px}
  /* Two facts side by side rather than stacked, to pay for the cover art. */
  .docs-facts{margin-bottom:22px}
  .docs-facts li{flex:1 1 130px;padding-right:12px}
  .docs-cover{max-width:320px}
  .docs-content h3{font-size:21px;margin-top:52px}
  .docs-content table{font-size:14px}
  .docs-content td:first-child{min-width:120px}
  .docs-lead{font-size:17px}
}