/* Unified noderail.io chrome — header (with search), footer, home filter.
   Loaded by every tool: <link rel="stylesheet" href="/shared/site.css">.
   nd- prefixed so it never clashes with a tool's own styles. Brand palette. */
:root{
  --nd-primary:#0D9488;--nd-accent:#EA580C;--nd-fg:#134E4A;
  --nd-bg:#F0FDFA;--nd-card:#fff;--nd-border:#99F6E4;--nd-muted:#5B8A85;
}
.nd-header,.nd-footer,.nd-filter{font-family:Inter,"Segoe UI",system-ui,-apple-system,sans-serif;box-sizing:border-box}
.nd-header *,.nd-footer *,.nd-filter *{box-sizing:border-box}
/* hide each tool's bespoke header/footer so only the unified shell shows (no flash) */
body>header:not(.nd-header),body>footer:not(.nd-footer){display:none!important}
/* the [hidden] attribute must always beat a tool's own display rule (e.g. .filebar/.sizes{display:flex}) —
   else empty bars show on load and clear-buttons that set hidden=true can't hide them */
[hidden]{display:none!important}

/* header — display/width pinned so a page's generic header{}/footer{} element rules
   (legacy bespoke chrome) can never warp the shared shell */
.nd-header{display:block;position:sticky;top:0;z-index:9999;background:rgba(255,255,255,.95);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--nd-border);padding:0;margin:0}
.nd-header .nd-wrap{max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:10px 24px}
.nd-brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:1.18rem;
  color:var(--nd-fg);text-decoration:none;flex:none;min-height:42px}
.nd-brand svg{width:26px;height:26px;flex:none}
.nd-brand b{color:var(--nd-primary)}
.nd-nav{display:flex;margin-left:14px}
.nd-navbtn{display:flex;align-items:center;gap:6px;height:42px;padding:0 14px;border:2px solid var(--nd-border);
  border-radius:10px;background:#fff;color:var(--nd-fg);text-decoration:none;font-family:inherit;font-weight:700;font-size:.92rem;cursor:pointer;white-space:nowrap}
.nd-navbtn svg{transition:transform .16s}
.nd-navbtn:hover,.nd-navbtn.open{border-color:var(--nd-primary);color:var(--nd-primary)}
.nd-navbtn.open svg{transform:rotate(180deg)}
@media(prefers-reduced-motion:reduce){.nd-navbtn svg{transition:none}}
/* reset any page's FAQ <details>/<summary> styling that would box the switcher */
.nd-lang{position:relative;flex:none;margin:0 0 0 10px;padding:0;border:0;background:none;box-shadow:none}
.nd-lang>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:5px;height:42px;padding:0 10px;border:2px solid var(--nd-border);border-radius:10px;font-weight:700;font-size:.82rem;color:var(--nd-fg);background:#fff}
.nd-lang>summary::-webkit-details-marker{display:none}
.nd-lang>summary::after{content:none;display:none}
.nd-lang>summary:hover,.nd-lang[open]>summary{border-color:var(--nd-primary)}
.nd-lang-menu{position:absolute;top:48px;right:0;background:#fff;border:1px solid var(--nd-border);border-radius:12px;box-shadow:0 16px 40px rgba(19,78,74,.18);min-width:160px;overflow:hidden;z-index:10000}
.nd-lang-menu a{display:block;padding:10px 16px;text-decoration:none;color:var(--nd-fg);font-size:.92rem;font-weight:500}
.nd-lang-menu a:hover{background:#ECFDF8}
.nd-lang-menu a.on{color:var(--nd-primary);font-weight:700}
@media(max-width:560px){.nd-search{max-width:none}}
.nd-search{position:relative;margin-left:auto;flex:1;max-width:460px}
.nd-search input{width:100%;height:42px;border:2px solid var(--nd-border);border-radius:10px;
  padding:0 14px 0 40px;font-size:.98rem;font-family:inherit;color:var(--nd-fg);background:var(--nd-card)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230D9488' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 13px center}
.nd-search input:focus{outline:none;border-color:var(--nd-primary);box-shadow:0 0 0 3px rgba(13,148,136,.18)}
.nd-results{position:absolute;top:48px;left:0;right:0;background:#fff;border:1px solid var(--nd-border);
  border-radius:12px;box-shadow:0 16px 44px rgba(19,78,74,.20);overflow:hidden;display:none;max-height:70vh;overflow-y:auto}
.nd-results.open{display:block}
.nd-res{display:block;padding:10px 14px;text-decoration:none;color:var(--nd-fg);border-bottom:1px solid #ECFDF8}
.nd-res:last-child{border-bottom:0}
.nd-res:hover,.nd-res.active{background:#ECFDF8}
.nd-res .n{font-weight:700;font-size:.95rem}
.nd-res .c{font-size:.7rem;color:#fff;background:var(--nd-primary);border-radius:999px;padding:2px 8px;margin-left:6px;vertical-align:middle}
.nd-res .d{display:block;font-size:.82rem;color:var(--nd-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nd-empty{padding:14px;color:var(--nd-muted);font-size:.9rem}

/* related tools (internal linking on tool pages) */
/* no top margin — the border-top + inner padding separate it; a margin would show the tool's body bg as a band */
.nd-related{background:#ECFDF8;border-top:1px solid var(--nd-border);margin-top:0}
.nd-related .nd-wrap{max-width:1240px;margin:0 auto;padding:34px 24px}
.nd-related h2{font-size:1.3rem;color:#0c3d3a;margin:0 0 16px}
.nd-rel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:14px}
.nd-rel{background:#fff;border:1px solid var(--nd-border);border-radius:12px;padding:16px;text-decoration:none;color:var(--nd-fg);display:block;transition:transform .2s,border-color .2s}
.nd-rel:hover{border-color:var(--nd-primary);transform:translateY(-2px)}
.nd-rel b{display:block;font-size:.98rem;margin-bottom:4px}
.nd-rel span{font-size:.85rem;color:var(--nd-muted);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* footer — same hardening as the header */
.nd-footer{display:block;background:#fff;border-top:1px solid var(--nd-border);margin-top:0;padding:0;
  font-size:1rem;color:var(--nd-fg);text-align:left}
.nd-footer .nd-wrap{width:100%;max-width:1240px;margin:0 auto;padding:36px 24px}
.nd-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:24px}
.nd-col h4{font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--nd-accent);margin:0 0 10px}
.nd-col a{display:block;color:var(--nd-fg);text-decoration:none;font-size:.92rem;padding:5px 0;min-height:30px}
.nd-col a:hover{color:var(--nd-primary)}
.nd-bottom{margin-top:26px;padding-top:16px;border-top:1px solid #ECFDF8;font-size:.85rem;color:var(--nd-muted);
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between}
.nd-bottom a{color:var(--nd-primary)}
.nd-ph{display:flex;justify-content:flex-start;padding:8px 0 4px}
.nd-ph img{width:250px;height:54px;max-width:100%}

/* shared file-processing progress — fixed top bar + status pill (window.ndProgress) */
.nd-prog{position:fixed;top:0;left:0;right:0;height:3px;overflow:hidden;z-index:10001;opacity:0;transition:opacity .25s;pointer-events:none}
.nd-prog.on{opacity:1}
.nd-prog-fill{height:100%;width:0;background:var(--nd-primary);transition:width .2s ease;box-shadow:0 0 8px rgba(13,148,136,.55)}
.nd-prog.indet .nd-prog-fill{width:30%;animation:nd-indet 1.1s ease-in-out infinite}
@keyframes nd-indet{0%{margin-left:-30%}100%{margin-left:100%}}
.nd-prog.err .nd-prog-fill{background:#dc2626;box-shadow:0 0 8px rgba(220,38,38,.5);animation:none;width:100%}
.nd-prog-pill{position:fixed;bottom:24px;left:50%;z-index:10001;background:#fff;border:1px solid var(--nd-border);border-radius:999px;
  padding:8px 16px;font:600 .9rem Inter,"Segoe UI",system-ui,sans-serif;color:var(--nd-fg);box-shadow:0 8px 28px rgba(19,78,74,.16);
  white-space:nowrap;max-width:90vw;overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translate(-50%,8px);
  transition:opacity .25s,transform .25s;pointer-events:none}
.nd-prog-pill.on{opacity:1;transform:translateX(-50%)}
.nd-prog-pill.err{border-color:#fecaca;color:#b91c1c}
@media(prefers-reduced-motion:reduce){.nd-prog-fill,.nd-prog-pill{transition:none}.nd-prog.indet .nd-prog-fill{animation:none;width:40%}}

/* normalize tool-form checkboxes & radios — brand accent + vertical centering (tool forms vary, scoped to main so chrome is untouched) */
main input[type="checkbox"],main input[type="radio"]{accent-color:var(--nd-primary);width:16px;height:16px;margin:0;cursor:pointer;vertical-align:-2px;flex:none}
main label:has(>input[type="checkbox"]),main label:has(>input[type="radio"]){display:inline-flex;align-items:center;gap:8px;cursor:pointer}

/* home filter chips */
.nd-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}
.nd-chip{border:2px solid var(--nd-border);background:#fff;color:var(--nd-fg);border-radius:999px;
  padding:7px 16px;font-size:.9rem;font-weight:600;font-family:inherit;cursor:pointer;min-height:38px}
.nd-chip:hover{border-color:var(--nd-primary)}
.nd-chip.active{background:var(--nd-primary);color:#fff;border-color:var(--nd-primary)}

@media(max-width:640px){.nd-search{max-width:none}.nd-brand span{display:none}}

/* ---- megamenu (desktop) ---- */
.nd-mega{position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--nd-border);
  box-shadow:0 24px 48px rgba(19,78,74,.16);opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;max-height:calc(100vh - 70px);overflow-y:auto}
.nd-mega.open{opacity:1;visibility:visible;transform:none}
@media(prefers-reduced-motion:reduce){.nd-mega{transition:none}}
.nd-mega .nd-wrap{display:block;padding:22px 24px 14px}
.nd-mega-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.nd-mcol{padding:8px;border-radius:12px}
.nd-mcat{display:block;font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--nd-accent);text-decoration:none;margin:0 0 6px;padding:2px 4px}
.nd-mcat:hover{color:var(--nd-primary)}
.nd-mtool{display:block;color:var(--nd-fg);text-decoration:none;font-size:.92rem;padding:7px 6px;border-radius:8px;min-height:34px}
.nd-mtool:hover{background:#ECFDF8;color:var(--nd-primary)}
.nd-mega-foot{display:flex;justify-content:flex-end;border-top:1px solid #ECFDF8;margin-top:12px;padding:12px 4px 2px}
.nd-mega-foot a{color:var(--nd-primary);font-weight:700;text-decoration:none;font-size:.94rem}
.nd-mega-foot a:hover{text-decoration:underline}
.nd-mcol:hover{background:#ECFDF8}
@media(max-width:640px){.nd-mega .nd-wrap{padding:14px 16px 10px}.nd-mega-grid{gap:8px}.nd-mcol{padding:6px}}