/* ToolHub shared chrome: top bar, guide article and footer used on every tool page.
   All selectors are namespaced (.th-*) so they never collide with a tool's own styles.
   The article inherits the page's text color, so it reads correctly on light and dark tools. */

.th-topbar{background:#0b1020;color:#e8ecf8;font:14px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;position:relative;z-index:60}
.th-topbar-in{max-width:1120px;margin:0 auto;padding:9px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px}
.th-topbar a{color:#e8ecf8;text-decoration:none}
.th-topbar a:hover{color:#fff;text-decoration:underline}
.th-brand{font-weight:700;font-size:15px;letter-spacing:.01em;white-space:nowrap}
.th-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;color:#a9b2cc;min-width:0;flex:1}
.th-crumbs a{color:#c7cee3}
.th-crumbs span[aria-current]{color:#e8ecf8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60vw}
.th-toplinks{display:flex;gap:14px;margin-left:auto}
.th-toplinks a{color:#c7cee3}

.th-article{box-sizing:border-box;max-width:860px;margin:40px auto 48px;padding:0 16px;color:inherit;font-size:16px;line-height:1.7;text-align:left}
.th-article *{box-sizing:border-box}
.th-article h2{font-size:1.4rem;line-height:1.3;font-weight:700;margin:36px 0 12px;padding:0;color:inherit;display:block;border:0;background:none;text-align:left}
.th-article h2:first-child{margin-top:0}
.th-article h3{font-size:1.1rem;line-height:1.35;font-weight:650;margin:22px 0 8px;padding:0;color:inherit;display:block;text-align:left}
.th-article p{margin:0 0 14px;padding:0;color:inherit;opacity:.92}
.th-article ul,.th-article ol{margin:0 0 16px;padding:0 0 0 24px}
.th-article ul{list-style:disc}
.th-article ol{list-style:decimal}
.th-article li{margin:0 0 6px;padding:0;display:list-item;opacity:.92}
.th-article a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.th-article a:hover{opacity:.8}
.th-article code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em;padding:1px 5px;border-radius:4px;background:rgba(127,127,127,.16)}
.th-article table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:.95em}
.th-article th,.th-article td{border:1px solid rgba(127,127,127,.3);padding:7px 10px;text-align:left;vertical-align:top}
.th-article th{font-weight:650;background:rgba(127,127,127,.08)}
.th-article .th-note{border-left:3px solid rgba(127,127,127,.5);padding:10px 14px;margin:0 0 16px;background:rgba(127,127,127,.08);border-radius:0 6px 6px 0}
.th-article details{border:1px solid rgba(127,127,127,.28);border-radius:8px;margin:0 0 10px;padding:0;background:transparent}
.th-article summary{cursor:pointer;font-weight:650;padding:12px 16px;list-style:revert;display:list-item;color:inherit}
.th-article details>*:not(summary){margin:0;padding:0 16px 14px}
.th-article .th-related{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0 0 8px}
.th-article .th-related li{margin:0;opacity:1}
.th-article .th-related a{display:inline-block;padding:7px 12px;border:1px solid rgba(127,127,127,.35);border-radius:999px;text-decoration:none;font-size:.93em}
.th-article .th-related a:hover{border-color:currentColor;opacity:1}

.th-footer{background:#0b1020;color:#a9b2cc;font:14px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;margin-top:auto;text-align:center}
.th-footer-in{max-width:1120px;margin:0 auto;padding:26px 16px 30px}
.th-footer-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin:0 0 10px;padding:0}
.th-footer a{color:#dfe4f3;text-decoration:none}
.th-footer a:hover{color:#fff;text-decoration:underline}
.th-footer p{margin:0;padding:0;font-size:13px;color:#8f98b3}

@media (max-width:640px){
  .th-toplinks{margin-left:0}
  .th-article{margin:28px auto 36px;font-size:15.5px}
  .th-article h2{font-size:1.25rem}
}