/* HacoL developers（/dev/）。tokens.css、hacol.css、site.css のあとに読み込みます */
body.dev{background:var(--hc-color-bg)}
.dev-brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.dev-label{font-family:var(--hc-font-mono);font-size:var(--hc-fontSize-xs);font-weight:700;letter-spacing:.06em;color:var(--hc-primary-text);background:var(--hc-tint);border-radius:999px;padding:3px 10px}
.dev-header nav{margin-left:auto}
.docs{display:grid;grid-template-columns:220px minmax(0,1fr) 200px;gap:var(--hc-space-10);padding-top:var(--hc-space-8);padding-bottom:var(--hc-space-12);align-items:start}
.docs-side,.docs-toc{position:sticky;top:88px;max-height:calc(100vh - 110px);overflow:auto;font-size:var(--hc-fontSize-sm)}
.side-title,.toc-title{font-size:var(--hc-fontSize-xs);font-weight:700;letter-spacing:.08em;color:var(--hc-text-sub);margin:0 0 var(--hc-space-3)}
.side-list,.side-sub,.docs-toc ol{list-style:none;margin:0;padding:0}
.side-list>li>a{display:block;padding:7px 10px;border-radius:8px;font-weight:700;color:var(--hc-text);text-decoration:none}
.side-list>li>a:hover{background:var(--hc-color-neutral-100)}
.side-list>li>a[aria-current]{background:var(--hc-tint);color:var(--hc-primary-text)}
.side-sub{margin:4px 0 8px 10px;border-left:2px solid var(--hc-border)}
.side-sub a,.docs-toc a{display:block;padding:4px 10px;color:var(--hc-text-sub);text-decoration:none;line-height:1.5}
.side-sub a:hover,.docs-toc a:hover{color:var(--hc-text)}
.docs-toc a.is-active{color:var(--hc-primary-text);font-weight:700;box-shadow:inset 2px 0 0 var(--hc-primary)}
.docs-toc ol{border-left:2px solid var(--hc-border)}
.side-ext{margin-top:var(--hc-space-6);padding-top:var(--hc-space-4);border-top:1px solid var(--hc-border)}
.docs-main{min-width:0}
.docs-main>h1{font-size:var(--hc-fontSize-3xl);margin-bottom:var(--hc-space-4)}
.docs-main .lead{font-size:var(--hc-fontSize-lg);color:var(--hc-color-neutral-700)}
.toc-m{display:none;background:var(--hc-surface);border:1px solid var(--hc-border);border-radius:var(--hc-radius-md);padding:0 var(--hc-space-4);margin:var(--hc-space-5) 0}
.toc-m summary{cursor:pointer;font-weight:700;padding:12px 0}
.toc-m ol{margin:0 0 12px;padding-left:1.3em}
.toc-m li{margin:4px 0}
.doc-sec{padding:0;margin-top:var(--hc-space-12)}
.doc-sec>h2{font-size:var(--hc-fontSize-2xl);padding-bottom:var(--hc-space-3);border-bottom:1px solid var(--hc-border);margin-bottom:var(--hc-space-5)}
.doc-sec h3{font-size:var(--hc-fontSize-lg);margin-top:var(--hc-space-6)}
.anchored{scroll-margin-top:88px;position:relative}
.hanchor{margin-left:8px;color:var(--hc-color-neutral-400);text-decoration:none;opacity:0;font-weight:700}
.anchored:hover .hanchor,.hanchor:focus{opacity:1}
.docs-main code{font-family:var(--hc-font-mono);font-size:.88em;background:var(--hc-color-neutral-100);border:1px solid var(--hc-border);border-radius:6px;padding:1px 5px;overflow-wrap:anywhere}
.dlist{padding-left:1.25em;margin:var(--hc-space-4) 0}
.dlist li{margin-bottom:8px}
.dlist.num{padding-left:1.5em}
.hc-alert{margin:var(--hc-space-4) 0}
/* コード */
.codeblock{margin:var(--hc-space-4) 0;border-radius:var(--hc-radius-md);overflow:hidden;background:#1E1E24;border:1px solid #2C2B2E}
.cb-head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 8px 6px 14px;background:#2C2B2E;color:#CFCAC0;font-size:var(--hc-fontSize-xs);font-family:var(--hc-font-mono)}
.cb-copy{appearance:none;border:1px solid #5C5952;background:transparent;color:#FAF8F3;font:inherit;font-weight:700;border-radius:6px;padding:4px 10px;cursor:pointer;min-height:28px}
.cb-copy:hover{border-color:var(--hc-primary);color:#A6E9C3}
.cb-scroll{position:relative}
.cb-scroll.is-more::after{content:"";position:absolute;top:0;right:0;bottom:0;width:36px;background:linear-gradient(90deg,transparent,#1E1E24);pointer-events:none}
.codeblock pre{margin:0;padding:14px 16px;overflow-x:auto;color:#FAF8F3;font-size:13.5px;line-height:1.65}
.docs-main .codeblock code{background:none;border:none;padding:0;color:inherit;font-size:inherit;overflow-wrap:normal}
/* 表 */
.tbl{overflow-x:auto;margin:var(--hc-space-4) 0;border:1px solid var(--hc-border);border-radius:var(--hc-radius-md);background:var(--hc-surface)}
.tbl table{border-collapse:collapse;width:100%;font-size:var(--hc-fontSize-sm)}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:10px 14px;border-bottom:1px solid var(--hc-border)}
.tbl th{background:var(--hc-color-neutral-100);font-weight:700;white-space:nowrap}
.tbl tr:last-child td{border-bottom:none}
.tbl.tools td:first-child{white-space:nowrap}
.tbl.wide table{min-width:720px}
/* カード */
.dcards{list-style:none;margin:var(--hc-space-5) 0;padding:0;display:grid;gap:var(--hc-space-4)}
.dcards.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.dcard{background:var(--hc-surface);border:1px solid var(--hc-border);border-radius:var(--hc-radius-lg);padding:var(--hc-space-5);min-width:0}
.dcard h3{font-size:var(--hc-fontSize-md);margin:0 0 6px}
.dcard p{margin:0;color:var(--hc-color-neutral-700);font-size:var(--hc-fontSize-sm)}
.dcard-ico{width:40px;height:40px;border-radius:12px;background:var(--hc-tint);color:var(--hc-primary-text);display:grid;place-items:center;margin-bottom:var(--hc-space-3)}
.dcard-ico svg{width:22px;height:22px}
.dcard.is-link{padding:0}
.dcard.is-link a{display:block;padding:var(--hc-space-5);text-decoration:none;color:inherit;border-radius:inherit;height:100%}
.dcard.is-link a:hover{background:var(--hc-color-brand-green-50)}
.dcard .card-h{display:flex;align-items:center;font-weight:800;font-family:var(--hc-font-heading);color:var(--hc-primary-text);font-size:var(--hc-fontSize-lg);margin-bottom:4px}
.dcard .lc-text{display:block;color:var(--hc-text-sub);font-size:var(--hc-fontSize-sm)}
@media (max-width:700px){.dcards.g2{grid-template-columns:1fr}}
/* 構成の図 */
.arch{margin:var(--hc-space-5) 0;padding:var(--hc-space-5);background:var(--hc-surface);border:1px solid var(--hc-border);border-radius:var(--hc-radius-lg);display:flex;flex-direction:column;align-items:center;gap:0}
.arch-row{display:flex;gap:var(--hc-space-3);justify-content:center;width:100%;flex-wrap:wrap}
.abox{flex:1 1 200px;max-width:280px;text-align:center;padding:10px 14px;border-radius:var(--hc-radius-md);border:1.5px solid var(--hc-border);background:var(--hc-color-neutral-50);font-weight:700;font-size:var(--hc-fontSize-sm)}
.abox small{display:block;font-weight:400;color:var(--hc-text-sub);font-size:var(--hc-fontSize-xs);margin-top:2px}
.abox.is-wide{max-width:560px;flex-basis:100%}
.abox.is-sub{background:var(--hc-surface)}
.abox.is-core{border-color:var(--hc-primary);background:var(--hc-color-brand-green-50)}
.abox.is-mcp{border-color:var(--hc-color-ink);background:var(--hc-color-ink);color:#fff}
.abox.is-mcp small{color:var(--hc-color-neutral-300)}
.abox.is-mcp code{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff}
.arch-down{width:2px;height:18px;background:var(--hc-color-neutral-300);position:relative;margin:2px 0 6px}
.arch-down::after{content:"";position:absolute;left:-4px;bottom:-6px;border:5px solid transparent;border-top-color:var(--hc-color-neutral-300)}
/* その他 */
.apps{list-style:none;margin:var(--hc-space-4) 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--hc-space-3)}
.apps li{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--hc-surface);border:1px solid var(--hc-border);border-radius:var(--hc-radius-md);padding:12px 16px;flex-wrap:wrap}
@media (max-width:600px){.apps{grid-template-columns:1fr}}
.svc{display:grid;grid-template-columns:max-content 1fr;gap:8px 18px;margin:var(--hc-space-4) 0;background:var(--hc-surface);border:1px solid var(--hc-border);border-radius:var(--hc-radius-md);padding:var(--hc-space-4) var(--hc-space-5)}
.svc dt{font-weight:700}.svc dd{margin:0;color:var(--hc-color-neutral-700)}
@media (max-width:600px){.svc{grid-template-columns:1fr}.svc dd{margin-bottom:8px}}
.pre-req{background:var(--hc-color-semantic-info-bg);border:1px solid var(--hc-color-semantic-info-border);border-radius:var(--hc-radius-md);padding:var(--hc-space-3) var(--hc-space-5);margin-bottom:var(--hc-space-4)}
.pre-req .pr-h{font-weight:700;margin:var(--hc-space-2) 0 0;color:var(--hc-color-semantic-info-fg)}
.pre-req .dlist{margin:var(--hc-space-2) 0}
.checks{list-style:none;margin:var(--hc-space-4) 0;padding:0;display:flex;flex-direction:column;gap:8px}
.checks li{display:flex;gap:10px;align-items:flex-start;background:var(--hc-surface);border:1px solid var(--hc-border);border-radius:var(--hc-radius-md);padding:12px 14px}
.checks svg{width:20px;height:20px;color:var(--hc-primary-text);flex:none;margin-top:2px}
.qa{border-bottom:1px solid var(--hc-border);padding:var(--hc-space-2) 0 var(--hc-space-4)}
.qa h3{font-size:var(--hc-fontSize-md);margin-top:var(--hc-space-4)}
.qa p{margin:0;color:var(--hc-color-neutral-700)}
.updated{margin-top:var(--hc-space-12);font-size:var(--hc-fontSize-sm);color:var(--hc-text-sub)}
.pager{display:flex;justify-content:space-between;gap:var(--hc-space-4);margin-top:var(--hc-space-4);padding-top:var(--hc-space-6);border-top:1px solid var(--hc-border)}
.pager a{display:flex;flex-direction:column;gap:2px;padding:14px 18px;border:1px solid var(--hc-border);border-radius:var(--hc-radius-md);background:var(--hc-surface);text-decoration:none;font-weight:700;min-width:0;max-width:48%}
.pager a:hover{border-color:var(--hc-primary)}
.pager small{color:var(--hc-text-sub);font-weight:400}
.pg-next{margin-left:auto;text-align:right}
.tabs .hc-tabpanel{padding-top:var(--hc-space-2)}
.tabs:not(.is-ready) .hc-tabpanel[hidden]{display:block}
@media (max-width:1180px){.docs{grid-template-columns:200px minmax(0,1fr)}.docs-toc{display:none}.toc-m{display:block}}
@media (max-width:860px){.docs{grid-template-columns:minmax(0,1fr);padding-top:var(--hc-space-5)}.docs-side{display:none}.docs-main>h1{font-size:var(--hc-fontSize-2xl)}}
@media (max-width:1000px){.dev-header .in>nav{display:none}.dev-header .mnav{display:block}.dev-header .cta{margin-left:auto}}
.docs-main>h1{text-wrap:balance}
.tbl code{overflow-wrap:normal}
@media (max-width:760px){.tbl table{min-width:560px}.tbl.tools table{min-width:720px}.tbl th,.tbl td{padding:9px 12px}}