/* BenchDock Wiki. Builds on ../styles.css (tokens, type, tags, footer, viewer, back to top). */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wiki-wrap{width:min(1180px,100% - 112px);margin-inline:auto}

/* Top row: the wordmark, the wiki name and the language choice. No bar, no background. */
.wiki-top{padding:34px 0 0}
.wiki-top-row{width:min(1344px,100% - 80px);margin:auto;display:flex;align-items:center;gap:14px}
.wiki-logo{display:block;width:150px}
.wiki-logo img{width:100%}
.wiki-name{font-size:15px;font-weight:550;letter-spacing:-.01em;color:var(--muted);text-decoration:none;padding-left:14px;border-left:1px solid var(--line);line-height:1.2}
.wiki-name:hover{color:var(--ink)}
.wiki-actions{margin-left:auto;display:flex;align-items:center;gap:24px}
.wiki-actions>a{font-size:12px;color:var(--muted);text-decoration:none}
.wiki-actions>a:hover{color:var(--ink)}
.wiki-lang{display:flex;gap:4px}
.wiki-lang a{font-size:11px;letter-spacing:.04em;color:var(--muted);font-weight:550;padding:10px 7px;text-decoration:none}
.wiki-lang a[aria-current]{color:var(--ink);text-decoration:underline;text-underline-offset:5px}
.wiki-lang a:not([aria-current]):hover{color:var(--ink)}

/* Hub: title, search, categories, guides. */
.hub-head{text-align:center;padding:88px 0 20px;max-width:760px;margin:auto}
.hub-head .eyebrow{justify-content:center;margin-bottom:18px}
.hub-head h1{font-size:clamp(44px,5vw,70px)}
.hub-head .lead{margin-top:22px;font-size:19px}
.hub-search{margin:36px auto 0;max-width:520px}
.hub-search input{width:100%;height:50px;padding:0 22px 0 48px;border:1px solid var(--line);border-radius:999px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3C/svg%3E") no-repeat 18px 50%/18px;font:inherit;font-size:15px;color:var(--ink);transition:border-color .15s}
.hub-search input::placeholder{color:var(--faint)}
.hub-search input:focus{outline:none;border-color:var(--teal)}
.hub-search input:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.hub-filters{display:flex;justify-content:center;gap:26px;max-width:100%;width:max-content;margin:34px auto 0;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.hub-filters::-webkit-scrollbar{display:none}
.hub-filters button{padding:10px 0 13px;border:0;border-bottom:2px solid transparent;background:none;white-space:nowrap;font-size:12px;color:var(--muted);font-weight:500;cursor:pointer}
.hub-filters button:hover{color:var(--ink)}
.hub-filters button[aria-pressed=true]{color:var(--ink);border-bottom-color:var(--ink)}
.hub-filters button:focus-visible{outline-offset:-3px}
.hub-section{padding:64px 0 8px;scroll-margin-top:24px}
.hub-section-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:12px 60px;align-items:end;margin-bottom:30px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.hub-section-head h2{font-size:clamp(28px,2.6vw,36px);letter-spacing:-.035em}
.hub-section-head p{font-size:14px;color:var(--muted);line-height:1.6}
.hub-empty{text-align:center;color:var(--muted);font-size:15px;padding:40px 0}
.hub-section+.hub-empty{padding-top:0}

/* A guide: screenshot on a quiet tinted plate, then the text. */
.guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 32px;margin:0;padding:0;list-style:none}
.guide a{display:flex;flex-direction:column;height:100%;text-decoration:none}
.guide-shot{display:block;background:var(--tint);border-radius:10px;padding:16px 16px 0;overflow:hidden}
.guide-shot img{width:100%;aspect-ratio:640/420;object-fit:cover;object-position:top left;border:1px solid #e0e0e4;border-bottom:0;border-radius:6px 6px 0 0;background:#fff}
.guide-cat{display:block;margin-top:18px;font-size:12px;color:var(--faint);font-weight:500}
.guide-title{margin-top:6px;font-size:18px;font-weight:550;letter-spacing:-.022em;line-height:1.35;text-wrap:balance}
.guide-text{display:block;margin-top:8px;font-size:14px;line-height:1.6;color:var(--muted);text-wrap:pretty}
.guide .tag{margin-top:12px;font-size:10px}
.guide a:hover .guide-title{color:var(--teal)}
.guide a:hover .guide-shot{background:#ececef}

/* Article: breadcrumb, contents on the left, text in a readable column. */
.crumbs{display:flex;flex-wrap:wrap;gap:8px;padding:56px 0 0;font-size:12px;color:var(--faint)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
/* Desktop: the title above the text column, the contents beside the text. Phones: title, contents, text. */
.article-layout{display:grid;grid-template-columns:220px minmax(0,780px);grid-template-areas:". head" "toc body" ". related";column-gap:72px;padding:40px 0 110px}
.article-head{grid-area:head}
.toc{grid-area:toc;position:sticky;top:32px;align-self:start;max-height:calc(100vh - 64px);overflow:auto;margin-top:46px;padding-top:4px}
.prose{grid-area:body}
.related{grid-area:related}
.toc-label{font-size:12px;font-weight:550;color:var(--ink);margin-bottom:12px}
.toc ol{margin:0;padding:0;list-style:none;border-left:1px solid var(--line)}
.toc li a{display:block;padding:6px 0 6px 16px;margin-left:-1px;border-left:1px solid transparent;font-size:13px;line-height:1.45;color:var(--muted);text-decoration:none}
.toc li a:hover{color:var(--ink)}
.toc li a.active{color:var(--ink);border-left-color:var(--ink)}
.article-head .eyebrow{margin-bottom:18px}
.article-head .eyebrow .tag{margin-left:2px;border:1px solid var(--line);padding:3px 7px;border-radius:5px;font-size:10px}
.article-head h1{font-size:clamp(36px,3.7vw,54px);line-height:1.08;letter-spacing:-.045em}
.article-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;font-size:13px;color:var(--faint)}

/* Running text. */
.prose{margin-top:40px;font-size:17px;line-height:1.75;color:var(--ink-2)}
.prose>*+*{margin-top:22px}
.prose>p:first-child{font-size:20px;line-height:1.6;letter-spacing:-.018em;color:var(--muted);text-wrap:pretty}
.prose h2{margin-top:68px;font-size:clamp(26px,2.3vw,32px);line-height:1.2;letter-spacing:-.035em;color:var(--ink);scroll-margin-top:28px;text-wrap:balance}
.prose h3{margin-top:40px;font-size:19px;line-height:1.35;color:var(--ink);scroll-margin-top:28px}
.prose h2+*,.prose h3+*{margin-top:14px}
.prose p,.prose li{text-wrap:pretty}
.prose strong{font-weight:600;color:var(--ink)}
.prose a{color:var(--teal);text-decoration:underline;text-decoration-color:#147b7255}
.prose a:hover{text-decoration-color:currentColor}
.prose code{font:14px/1.5 "IBM Plex Mono",ui-monospace,Consolas,monospace;background:var(--tint);border:1px solid #e8e8ec;border-radius:5px;padding:1px 6px;color:var(--ink);word-break:break-word}
.prose ul{padding-left:0}
.prose ul>li{position:relative;padding-left:22px}
.prose ul>li+li{margin-top:8px}
.prose ul>li::before{content:'';position:absolute;left:4px;top:.74em;width:5px;height:5px;border-radius:50%;background:var(--faint)}
.prose ol.steps{counter-reset:step;padding:0;list-style:none}
.prose ol.steps>li{position:relative;counter-increment:step;padding:0 0 0 46px;min-height:30px}
.prose ol.steps>li+li{margin-top:16px}
.prose ol.steps>li::before{content:counter(step);position:absolute;left:0;top:1px;width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;font-size:13px;font-weight:550;color:var(--ink);background:#fff;font-feature-settings:"tnum"}

/* Screenshots, zoomable like on the home page. */
.shot-figure{margin-top:32px;margin-bottom:10px}
.prose>.shot-figure+*{margin-top:30px}
.shot-figure .zoom{border:1px solid #e2e2e6;border-radius:10px;overflow:hidden;background:var(--tint);box-shadow:var(--shadow)}
.shot-figure.narrow{max-width:560px}
.shot-figure figcaption{margin-top:12px;font-size:13px;line-height:1.6;color:var(--muted)}

/* Notes and warnings. */
.callout{padding:18px 22px;border-radius:8px;background:var(--tint);border-left:3px solid var(--faint);font-size:15px;line-height:1.7}
.callout.note{border-left-color:var(--teal);background:var(--teal-50)}
.callout.warning{border-left-color:#c07a1c;background:#fbf4e8}
.callout.tip{border-left-color:var(--ink-2)}
.callout-label{font-size:12px;font-weight:600;color:var(--ink);margin-bottom:4px}
.callout p+p{margin-top:10px}

/* Tables for options, codes and requirements. */
.table-wrap{overflow-x:auto;border-top:1px solid var(--ink)}
.prose table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.6}
.prose th,.prose td{text-align:left;vertical-align:top;padding:12px 16px 12px 0;border-bottom:1px solid var(--line)}
.prose thead th{font-size:12px;font-weight:600;color:var(--ink);padding-top:10px}
.prose tbody th{font-weight:550;color:var(--ink);min-width:140px}
.prose td{color:var(--ink-2)}

/* Related guides under an article. */
.related{margin-top:88px;padding-top:32px;border-top:1px solid var(--line)}
.related h2{font-size:24px;letter-spacing:-.03em;margin-bottom:28px}
.related .guide-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 28px}
.related .guide-title{font-size:16px}

@media(max-width:1100px){
  .wiki-wrap{width:calc(100% - 80px)}
  .guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .article-layout{grid-template-columns:180px minmax(0,1fr);column-gap:44px}
}
@media(max-width:860px){
  .article-layout{display:block;padding-top:28px}
  .toc{position:static;max-height:none;margin:32px 0 8px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .toc ol{border:0;columns:2;column-gap:28px}
  .toc li a{padding:5px 0;border:0;margin:0}
  .toc li{break-inside:avoid}
}
@media(max-width:780px){
  .wiki-wrap{width:calc(100% - 48px)}
  .wiki-top{padding-top:26px}
  .wiki-top-row{width:calc(100% - 40px);gap:12px}
  .wiki-logo{width:128px}
  .wiki-name{font-size:14px;padding-left:12px}
  .wiki-actions{gap:14px}
  .hub-head{padding-top:64px}
  .hub-head .lead{font-size:17px}
  .hub-filters{justify-content:flex-start;gap:22px;max-width:100%}
  .hub-section{padding-top:52px}
  .hub-section-head{grid-template-columns:1fr;gap:8px}
  .crumbs{padding-top:40px}
  .prose{font-size:16px}
  .prose>p:first-child{font-size:18px}
  .prose h2{margin-top:56px}
}
@media(max-width:560px){
  .wiki-wrap{width:calc(100% - 40px)}
  .wiki-top-row{width:calc(100% - 32px)}
  .wiki-logo{width:112px}
  .wiki-actions>a{display:none}
  .guide-grid,.related .guide-grid{grid-template-columns:1fr;gap:36px}
  .toc ol{columns:1}
  .article-head h1{font-size:34px}
  .prose ol.steps>li{padding-left:40px}
  .prose ol.steps>li::before{width:26px;height:26px;font-size:12px}
  .callout{padding:16px 18px}
  .prose tbody th{min-width:110px}
}