/* Shared theme selector. The site defaults to the user's system preference. */
.theme-control{display:flex;align-items:center;gap:8px;margin-left:auto;font-size:13px;font-weight:700;color:#17543e}
.theme-control select{width:auto;min-height:36px;padding:6px 30px 6px 10px;border-radius:7px;border:1px solid #b9cdbb;font-size:13px;background:#fff;color:#172b29}
@media(max-width:700px){.theme-control{margin-left:0}}
html[data-theme="dark"]{color-scheme:dark;--ink:#e5f1e6;--muted:#b5c9ba;--paper:#122019;--surface:#1c3025;--line:#476153;--green:#ace5b5;--lime:#bce786;--amber:#ffd097;--error:#ffb4a8;--shadow:0 16px 46px rgba(0,0,0,.22)}
html[data-theme="dark"] body{background:#122019;color:#e5f1e6}
html[data-theme="dark"] .site-header,html[data-theme="dark"] .site-nav{background:#18291f;border-color:#476153}
html[data-theme="dark"] .site-nav a,html[data-theme="dark"] .site-footer a,html[data-theme="dark"] .back,html[data-theme="dark"] .backlink,html[data-theme="dark"] .info-back,html[data-theme="dark"] .info-footer-links a,html[data-theme="dark"] .hero-actions a:not(.button),html[data-theme="dark"] .tool-card a,html[data-theme="dark"] .text-button,html[data-theme="dark"] .info-panel a{color:#b9efc1}
html[data-theme="dark"] .site-nav-label,html[data-theme="dark"] .brand-note,html[data-theme="dark"] .file-label,html[data-theme="dark"] .tool-index{color:#b9cdbd}
html[data-theme="dark"] .theme-control{color:#d9eee0}
html[data-theme="dark"] .theme-control select{background:#263d30;color:#eef8ef;border-color:#678675}
html[data-theme="dark"] .site-footer,html[data-theme="dark"] footer{background:#18291f;border-color:#476153}
html[data-theme="dark"] .site-footer p,html[data-theme="dark"] .info-footer p{color:#bdcfc1}
html[data-theme="dark"] .workbench,html[data-theme="dark"] .settings,html[data-theme="dark"] .tool-card,html[data-theme="dark"] .prep-card,html[data-theme="dark"] .panel,html[data-theme="dark"] .info-panel{background:#1c3025;border-color:#476153;color:#e5f1e6}
html[data-theme="dark"] .workbench-head,html[data-theme="dark"] .upload-column,html[data-theme="dark"] .result,html[data-theme="dark"] .output,html[data-theme="dark"] dl div,html[data-theme="dark"] .faq details{border-color:#476153}
html[data-theme="dark"] .upload-column{background:#17291f}
html[data-theme="dark"] .dropzone,html[data-theme="dark"] .prep-upload,html[data-theme="dark"] .upload{background:#21392b;border-color:#6d8c78}
html[data-theme="dark"] .dropzone.dragging{background:#2c5138}
html[data-theme="dark"] .home-note,html[data-theme="dark"] .how-section,html[data-theme="dark"] .privacy-stamp,html[data-theme="dark"] .security-note,html[data-theme="dark"] .note,html[data-theme="dark"] .info-callout,html[data-theme="dark"] .examples,html[data-theme="dark"] .out{background:#294235;color:#e4f2e5}
html[data-theme="dark"] .note,html[data-theme="dark"] .info-callout p,html[data-theme="dark"] .placeholder,html[data-theme="dark"] .illustration-note{color:#d6efdc!important}
html[data-theme="dark"] .examples>p,html[data-theme="dark"] .examples figcaption,html[data-theme="dark"] .how-tool li,html[data-theme="dark"] .home-note p,html[data-theme="dark"] .how-steps p{color:#c3d5c6}
html[data-theme="dark"] .eyebrow,html[data-theme="dark"] .how-number{color:#b3e8bd}
html[data-theme="dark"] h1 span{color:#b2cbb6}
html[data-theme="dark"] .brand-mark{background:#245b40;color:#fff}
html[data-theme="dark"] .tool-icon,html[data-theme="dark"] .upload-glyph,html[data-theme="dark"] .pill{background:#335740;color:#ddf4df}
html[data-theme="dark"] .step{background:#bce786;color:#173a26}
html[data-theme="dark"] .input-unit,html[data-theme="dark"] select{background:#263d30;color:#edf6ee;border-color:#6b8a75}
html[data-theme="dark"] .input-unit input{color:#edf6ee}
html[data-theme="dark"] input::placeholder{color:#bdcebf;opacity:1}
html[data-theme="dark"] .input-unit span,html[data-theme="dark"] small,html[data-theme="dark"] .small-note,html[data-theme="dark"] .field label span{color:#c3d5c6}
html[data-theme="dark"] .quick-sizes button,html[data-theme="dark"] .button-secondary,html[data-theme="dark"] input[type="file"]::file-selector-button{background:#263d30;border-color:#6b8a75;color:#e5f1e6}
html[data-theme="dark"] .button-primary{background:#bce786;border-color:#bce786;color:#163521}
html[data-theme="dark"] .button-primary:hover{background:#d2f2a6}
html[data-theme="dark"] .out-status,html[data-theme="dark"] .result-status{background:#355c39;color:#dbf5d8}
html[data-theme="dark"] .out-status.warning,html[data-theme="dark"] .result-status.warning{background:#60441e;color:#ffe0ac}
html[data-theme="dark"] .message,html[data-theme="dark"] .notice,html[data-theme="dark"] .prep-error{color:#ffb4a8}
/* Example SVGs retain their deliberately light backgrounds for legibility. */
html[data-theme="dark"] .page-preview{background:#263d30;border-color:#6b8a75}

/* Subtle boundaries for headers, work areas, guides and supporting sections. */
:root{--section-outline:#cbd9cd;--section-fill:#f9fbf6}
html[data-theme="dark"]{--section-outline:#607e6b;--section-fill:#1b2d22}
.site-header{border-bottom:1px solid var(--section-outline)}
.site-nav{border-bottom:1px solid var(--section-outline)}
.workbench,.prep-card,.panel,.info-panel,.tool-card{border:1px solid var(--section-outline)}
.home-note,.privacy-stamp,.security-note,.note,.info-callout,.how-section{border:1px solid var(--section-outline)}
.guide,.prep-guide,.tips{border:1px solid var(--section-outline);border-radius:18px;background:var(--section-fill);padding:32px;margin:34px 0 60px}
.examples{border:1px solid var(--section-outline)}
.faq{border-top:1px solid var(--section-outline);padding-top:22px;margin-top:28px}
.guide-steps{margin-bottom:40px}
.site-footer{border-top:1px solid var(--section-outline)}
@media(max-width:700px){.guide,.prep-guide,.tips{padding:20px;margin:24px 0 45px}.faq{padding-top:16px}}

/* Clearer section borders in both light and dark modes. */
:root{--section-outline:#72977d}
html[data-theme="dark"]{--section-outline:#92bfa0}
.site-header,.site-nav,.site-footer{border-color:var(--section-outline)}
.workbench,.prep-card,.panel,.info-panel,.tool-card,.home-note,.privacy-stamp,.security-note,.note,.info-callout,.how-section,.guide,.prep-guide,.tips,.examples{border:2px solid var(--section-outline)}
html[data-theme="dark"] .site-header,html[data-theme="dark"] .site-nav,html[data-theme="dark"] .site-footer{border-color:var(--section-outline)}

/* Shared, grouped navigation. Existing HTML links remain as a no-script fallback. */
.site-nav-inner{position:relative;display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap}
.site-nav-inner .category-home,.site-nav-inner .category-menu>summary{display:inline-flex;align-items:center;min-height:40px;padding:8px 12px;border-radius:8px;font-size:14px;font-weight:700;color:#17543e;text-decoration:none;cursor:pointer;list-style:none}
.site-nav-inner .category-menu>summary::-webkit-details-marker{display:none}
.site-nav-inner .category-menu>summary::after{content:'⌄';font-size:17px;margin-left:8px;line-height:1}
.site-nav-inner .category-home:hover,.site-nav-inner .category-menu>summary:hover,.site-nav-inner .category-menu[open]>summary{background:#e5f1e3}
.site-nav-inner .category-menu{position:relative}
.site-nav-inner .category-links{position:absolute;left:0;top:calc(100% + 4px);z-index:100;min-width:245px;padding:6px;background:#fff;border:1px solid #a8c0ad;border-radius:10px;box-shadow:0 10px 25px rgba(20,50,30,.15)}
.site-nav-inner .category-links a{display:block;padding:10px 12px;color:#17543e;font-size:14px;font-weight:600;line-height:1.3;border-radius:6px;text-decoration:none}
.site-nav-inner .category-links a:hover,.site-nav-inner .category-links a[aria-current=page]{background:#e5f1e3;text-decoration:none}
.site-nav-inner .category-menu>summary:focus-visible,.site-nav-inner .category-links a:focus-visible,.site-nav-inner .category-home:focus-visible{outline:3px solid #77b45b;outline-offset:2px}
html[data-theme=dark] .site-nav-inner .category-home,html[data-theme=dark] .site-nav-inner .category-menu>summary{color:#d9eee0}
html[data-theme=dark] .site-nav-inner .category-home:hover,html[data-theme=dark] .site-nav-inner .category-menu>summary:hover,html[data-theme=dark] .site-nav-inner .category-menu[open]>summary{background:#335740}
html[data-theme=dark] .site-nav-inner .category-links{background:#20372a;border-color:#769783;box-shadow:0 10px 25px rgba(0,0,0,.3)}
html[data-theme=dark] .site-nav-inner .category-links a{color:#e3f4e6}
html[data-theme=dark] .site-nav-inner .category-links a:hover,html[data-theme=dark] .site-nav-inner .category-links a[aria-current=page]{background:#335740}
@media(max-width:700px){.site-nav-inner{gap:4px 8px}.site-nav-inner .category-home,.site-nav-inner .category-menu>summary{padding:8px}.site-nav-inner .category-menu[open]{flex-basis:100%}.site-nav-inner .category-links{position:static;min-width:0;box-shadow:none;margin:2px 0 8px}.site-nav-inner .theme-control{margin-left:auto}}

/* Compact homepage cards: responsive, readable and motion-sensitive. */
.tool-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.tool-card{min-height:0;padding:18px;border-radius:14px;transition:border-color 180ms ease,box-shadow 180ms ease,transform 180ms ease}
.tool-card-header{margin-bottom:13px}
.tool-icon{width:38px;height:38px;border-radius:10px}
.tool-icon svg{width:21px;height:21px}
.tool-index{background:#eaf3e3;color:#315d40;border:1px solid #c2d7bf;border-radius:99px;padding:4px 8px;font-size:11px;line-height:1.2}
.tool-card h3{font-size:19px;line-height:1.25;margin:0 0 7px}
.tool-card p{font-size:14px;line-height:1.45;margin:0 0 14px}
.tool-card a{font-size:14px;line-height:1.35;min-height:24px}
.tool-card:focus-within{border-color:#356c49;box-shadow:0 7px 20px rgba(25,80,46,.14)}
@media(hover:hover) and (pointer:fine){.tool-card:hover{border-color:#356c49;box-shadow:0 7px 20px rgba(25,80,46,.14);transform:translateY(-3px)}}
html[data-theme=dark] .tool-index{background:#31513a;color:#e1f3df;border-color:#729a77}
html[data-theme=dark] .tool-card:focus-within{border-color:#bce786;box-shadow:0 7px 20px rgba(0,0,0,.25)}
@media(hover:hover) and (pointer:fine){html[data-theme=dark] .tool-card:hover{border-color:#bce786;box-shadow:0 7px 20px rgba(0,0,0,.25)}}
@media(min-width:1280px){.tool-cards{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:899px){.tool-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:479px){.tool-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.tool-card{padding:14px}.tool-card-header{margin-bottom:10px}.tool-card h3{font-size:17px}}
@media(max-width:359px){.tool-cards{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.tool-card{transition:none!important}.tool-card:hover{transform:none!important}}

/* Hover-capable desktop pointers can move directly from the label into the menu. */
@media(hover:hover) and (pointer:fine) and (min-width:701px){.site-nav-inner .category-links{top:100%}}

/* Mobile refinements: preserve the existing menu and desktop layout. */
.card-copy-mobile{display:none}
@media(max-width:700px){
  .site-nav-inner{gap:2px 6px;padding-top:6px;padding-bottom:6px}
  .site-nav-inner .category-home,.site-nav-inner .category-menu>summary{min-height:44px;padding:6px 8px}
  .site-nav-inner .category-links a{min-height:44px;padding:10px 12px}
  .home-hero{padding:30px 0 26px;gap:18px}
  .home-hero h1{font-size:clamp(32px,9vw,38px);margin-bottom:14px}
  .home-hero .intro-copy{font-size:16px;line-height:1.5}
  .hero-actions{margin-top:18px;gap:12px}
  .home-note{padding:16px;gap:12px}
  .tool-section{padding-bottom:48px}
  .section-top{margin-bottom:16px}
  .section-top h2{font-size:30px}
  .section-top p:last-child{margin-top:8px}
  .card-copy-full{display:none}
  .card-copy-mobile{display:inline}
  .tool-card a{display:inline-block;min-height:44px;padding:9px 0}
}
@media(max-width:479px){
  .tool-card{padding:12px}
  .tool-card-header{margin-bottom:8px}
  .tool-card h3{font-size:17px;line-height:1.2}
  .tool-card p{font-size:14px;line-height:1.4;margin-bottom:6px}
}

/* Compact mobile navigation. Desktop and no-script fallback stay unchanged. */
.mobile-menu-button,.mobile-menu-info{display:none}
@media(max-width:700px){
  html.has-mobile-menu .site-header .header-link{display:none}
  .site-header .mobile-menu-button{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;min-width:46px;margin-left:auto;padding:0;border:1px solid var(--section-outline);border-radius:10px;background:var(--surface);color:var(--green)}
  .mobile-menu-button:focus-visible{outline:3px solid #81bd61;outline-offset:3px}
  .mobile-menu-icon{display:flex;flex-direction:column;gap:5px;width:21px}
  .mobile-menu-icon span{display:block;height:2px;width:100%;border-radius:5px;background:currentColor}
  html.has-mobile-menu .site-nav{display:none}
  html.has-mobile-menu .site-nav.mobile-menu-open{display:block;max-height:calc(100dvh - 66px);overflow-y:auto;overscroll-behavior:contain;box-shadow:0 12px 25px rgba(20,50,30,.08)}
  html.has-mobile-menu .site-nav-inner{display:flex;flex-direction:column;align-items:stretch;gap:2px;padding-top:10px;padding-bottom:14px}
  html.has-mobile-menu .site-nav-inner .category-home,html.has-mobile-menu .site-nav-inner .category-menu>summary{display:flex;width:100%;min-height:44px;padding:10px 12px;font-size:15px}
  html.has-mobile-menu .site-nav-inner .category-menu>summary::after{margin-left:auto}
  html.has-mobile-menu .site-nav-inner .category-menu[open]{flex-basis:auto}
  html.has-mobile-menu .site-nav-inner .category-links{margin:0 0 6px;padding:4px;min-width:0}
  html.has-mobile-menu .site-nav-inner .category-links a{min-height:44px;padding:10px 12px;font-size:14px}
  .mobile-menu-info{display:flex;flex-wrap:wrap;gap:4px 16px;border-top:1px solid var(--line);margin-top:8px;padding:10px 12px 2px}
  .mobile-menu-info a{display:inline-flex;align-items:center;min-height:40px;color:var(--green);font-size:14px;font-weight:700}
  html.has-mobile-menu .site-nav-inner .theme-control{margin:8px 12px 2px 12px;align-self:flex-start}
  html[data-theme=dark] .mobile-menu-button{background:#20372a;color:#e3f4e6;border-color:#769783}
  html[data-theme=dark] .mobile-menu-info a{color:#b9efc1}
}

/* Compact, fully tappable homepage cards on mobile; desktop stays the same. */
.tool-link-mobile{display:none}
@media(max-width:700px){
  .tool-card{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);grid-template-rows:auto 1fr auto;gap:0 8px;align-items:start;padding:10px;min-width:0}
  .tool-card-header{grid-column:1;grid-row:1;margin:0}
  .tool-icon{width:32px;height:32px;border-radius:9px;flex:none}
  .tool-icon svg{width:18px;height:18px}
  .tool-index{display:none}
  .tool-card h3{grid-column:2;grid-row:1;display:flex;align-items:center;min-height:32px;font-size:16px;line-height:1.2;margin:0;overflow-wrap:anywhere}
  .tool-card p{grid-column:1/-1;grid-row:2;font-size:14px;line-height:1.35;margin:8px 0 2px}
  .tool-card a{grid-column:1/-1;grid-row:3;align-self:stretch;min-height:44px;padding:10px 0;line-height:1.4;font-size:14px}
  .tool-card a::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1}
  .tool-link-full{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .tool-link-mobile{display:inline}
}

/* Fine-tune mobile card spacing without changing type or desktop layout. */
@media(max-width:700px){
  .tool-cards{gap:10px}
  .tool-card{padding:8px}
  .tool-card p{margin-top:6px;margin-bottom:0}
  /* The link's existing ::after overlay keeps the whole card tappable. */
  .tool-card a{min-height:0;padding:2px 0}
  .tool-card:focus-within{outline:3px solid #81bd61;outline-offset:2px}
}
@media(max-width:479px){.tool-cards{gap:8px}}
