/*!
 * ToolNinja — tool pages on the new shell (redesign stage 2). Loaded after tn.css and after each tool's own styles.
 * It maps the old variables and font names to the Bento tokens, keeps the old page CSS away from the new header,
 * dock and footer, and restyles the parts every tool shares. Tool logic and markup stay as they were. See docs/DESIGN.md.
 */

/* ---------- Old font names → the new faces (no edits needed in each tool's CSS) ---------- */
@font-face{font-family:"Space Grotesk";src:url(/assets/fonts/figtree.woff2) format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:"DM Sans";src:url(/assets/fonts/figtree.woff2) format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:"Inter";src:url(/assets/fonts/figtree.woff2) format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:"Noto Sans";src:url(/assets/fonts/figtree.woff2) format("woff2");font-weight:300 900;font-display:swap;unicode-range:U+0000-024F,U+2000-206F,U+20A0-20CF,U+2100-214F}
/* Hindi in tools (letters, biodata, typing, Kruti Dev): downloaded only when Devanagari text is on the page */
@font-face{font-family:"Noto Sans Devanagari";src:url(/assets/fonts/noto-sans-devanagari-400.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+25CC,U+A830-A839,U+A8E0-A8FF}
@font-face{font-family:"Noto Sans Devanagari";src:url(/assets/fonts/noto-sans-devanagari-500.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+25CC,U+A830-A839,U+A8E0-A8FF}
@font-face{font-family:"Noto Sans Devanagari";src:url(/assets/fonts/noto-sans-devanagari-600.woff2) format("woff2");font-weight:600 700;font-display:swap;unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+25CC,U+A830-A839,U+A8E0-A8FF}

/* ---------- Old variables → new tokens (both themes follow automatically) ---------- */
:root{
  --bg-card:var(--surface); --bg-elevated:var(--surface-2);
  --fg-muted:var(--muted); --fg-dim:var(--muted);
  --border:var(--line-2); --border-hover:rgba(240,117,37,.5);
  --primary:var(--accent); --primary-glow:#ff9a55; --primary-subtle:var(--accent-soft); --primary-shadow:rgba(240,117,37,.18);
  --gradient:var(--accent);
  --green:#3fcf8e; --green-subtle:rgba(63,207,142,.13); --on-green:#08180f;
  --warn:#f5a524;
  --red:#ff7a7a; --red-subtle:rgba(255,122,122,.13);
  --blue:#8ab4ff; --blue-subtle:rgba(138,180,255,.13);
  --r:20px;
}
[data-theme="light"]{
  --green:#126e43; --green-subtle:rgba(18,110,67,.10); --on-green:#fff;
  --warn:#9a4a00;
  --red:#c42b2b; --red-subtle:rgba(196,43,43,.08);
  --blue:#2457c5; --blue-subtle:rgba(36,87,197,.08);
}

/* ---------- Base: keep old element rules off the new shell ---------- */
body.tool-page{font-size:15px;background:var(--bg);color:var(--fg)}
.tool-page .top-nav,.tool-page .foot-links{position:static;top:auto;z-index:auto;height:auto;background:none;border:0;padding:0;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.tool-page .dock{top:auto;padding:0;border:1px solid var(--line);-webkit-backdrop-filter:none;backdrop-filter:none}
.tool-page .top{border:0;padding:0;box-shadow:none}
.tool-page footer.foot{padding:0;text-align:left;color:var(--fg);background:var(--surface);border-top:1px solid var(--line);margin-top:56px}
.tool-page .foot-desc{font-size:15px;line-height:1.55}
.tool-page .copy{font-size:13px;line-height:1.5}
.tool-page .cmd-field input{padding:0;width:auto;border:0;background:transparent}
.tool-page .brand b{font-family:var(--font-display)}

/* ---------- Tool head (was the hero) ---------- */
.tool-head{padding:10px 0 4px}
.tool-head .th-in{max-width:var(--tool-w,880px);margin:0 auto;padding:0 var(--gutter);text-align:left}
.tool-head .crumbs{margin-bottom:12px}
.tool-head h1{font:700 clamp(26px,6.6vw,44px)/1.1 var(--font-display)!important;letter-spacing:-.02em!important;color:var(--fg)!important;margin:6px 0 10px!important;text-wrap:balance}
.tool-head p{font-size:16px!important;line-height:1.55!important;color:var(--muted)!important;margin:0 0 12px!important;max-width:680px}
.tool-head p a{color:var(--accent-text)!important}
/* the first small label (category) */
.tool-head .hero-tag,.tool-head .tool-badge,.tool-head .th-in>.badge{display:inline-block;margin:0 0 2px;padding:0;border:0;background:none;color:var(--accent-text);font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
/* trust chips */
.tool-head .badges,.tool-head .th-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start;margin:0 0 12px}
.tool-head .badges .badge,.tool-head .offline-badge,.tool-head .law-badge{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--line-2);background:transparent;color:var(--fg-2);font-size:13px;font-weight:600;margin:0}
.tool-head .badges .badge.green,.tool-head .offline-badge{border-color:color-mix(in srgb,var(--green) 45%,transparent);color:var(--fg)}
.tool-head .badges .badge.green::before,.tool-head .offline-badge::before{content:"";width:14px;height:14px;flex:none;background:var(--green);-webkit-mask:var(--i-check) center/contain no-repeat;mask:var(--i-check) center/contain no-repeat}
.tool-head .th-in>.offline-badge,.tool-head .th-in>.law-badge{margin:0 6px 12px 0}
/* "0 bytes uploaded" (stage 4): on pages scripts/dev/t_nobytes.py checked; links to how we check it */
.tool-head .badges a.badge.nb{text-decoration:none;color:var(--fg);font-weight:700}
.tool-head .badges a.badge.nb:hover{border-color:var(--green);background:var(--green-subtle)}
.tool-head .badges a.badge.nb:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.info-main [id]{scroll-margin-top:24px}
@media (min-width:1024px){.info-main [id]{scroll-margin-top:96px}}
.th-acts{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 6px}
.th-acts .tn-chip .ic{width:17px;height:17px}
.th-acts .tn-pin[aria-pressed="true"] .ic{fill:currentColor}
:root{--i-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --i-upload:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m17 8-5-5-5 5'/%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3C/svg%3E");
  --i-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}

/* guide and exam pages: their topic tags look like the trust chips */
.tool-head .tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.tool-head .tags .tag{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--line-2);background:transparent;color:var(--fg-2);font-size:13px;font-weight:600;margin:0}
.tool-head .th-acts .tn-btn{min-height:42px;border-radius:999px;padding:0 16px 0 12px}

/* ---------- Main area ---------- */
.tool-main{display:block}
.tool-main h2{font-family:var(--font);letter-spacing:-.005em}
/* wide tables scroll inside their card on small phones instead of pushing the page sideways */
.tool-page .bulk-section{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Cards and panels: rounder, quieter borders */
.tool-page .card,.tool-page .tool-card,.tool-page .input-card,.tool-page .settings-card,.tool-page .custom-card,.tool-page .preview-card,
.tool-page .result-card,.tool-page .format-section,.tool-page .preview-section,.tool-page .target-section,.tool-page .preview-panel,
.tool-page .seo-card,.tool-page .info-box,.tool-page .error-card{border-radius:var(--r-lg);border-color:var(--line)}
[data-theme="light"] .tool-page .card,[data-theme="light"] .tool-page .tool-card,[data-theme="light"] .tool-page .input-card,
[data-theme="light"] .tool-page .settings-card,[data-theme="light"] .tool-page .preview-card,[data-theme="light"] .tool-page .result-card{box-shadow:var(--shadow-sm)}

/* Drop zones: dashed, friendly, with one upload icon instead of an emoji */
.tool-page .drop-zone,.tool-page .upload-zone{border-radius:var(--r-lg);border:2px dashed var(--line-2);background:var(--surface)}
.tool-page .drop-zone:hover,.tool-page .upload-zone:hover,.tool-page .drop-zone.drag,.tool-page .drop-zone.over,.tool-page .upload-zone.drag,.tool-page .upload-zone.over{border-color:var(--accent);background:var(--accent-soft)}
.tool-page .drop-icon,.tool-page .dz-icon,.tool-page .up-icon,.tool-page .drop-zone-icon,.tool-page .upload-icon,.tool-page .drop-zone>.icon,.tool-page .uz-icon,
.tool-page .drop>div[style*="font-size:2"]:first-child,.tool-page .drop-zone>div[style*="font-size:2"]:first-child{font-size:0!important;line-height:0}
.tool-page .drop-icon::before,.tool-page .dz-icon::before,.tool-page .up-icon::before,.tool-page .drop-zone-icon::before,.tool-page .upload-icon::before,.tool-page .drop-zone>.icon::before,.tool-page .uz-icon::before,
.tool-page .drop>div[style*="font-size:2"]:first-child::before,.tool-page .drop-zone>div[style*="font-size:2"]:first-child::before{content:"";display:inline-block;width:34px;height:34px;background:var(--accent-text);-webkit-mask:var(--i-upload) center/contain no-repeat;mask:var(--i-upload) center/contain no-repeat;margin:2px auto 6px}

/* Line icons that replaced the tools' emoji (stage 4, scripts/dev/emoji_to_icons.py): as big as the text around them */
.tool-page .ic-em{display:inline-block;width:1em;height:1em;vertical-align:-.125em}
.tool-page .stat-icon,.tool-page .uc-icon,.tool-page .kp-icon,.tool-page .fc-icon{color:var(--accent-text);line-height:1}
.tool-page .use-list li .ic-em{flex:none;color:var(--accent-text)}
.tool-page .tmpl-title .ic-em{color:var(--accent-text);margin-right:6px}
.tool-page .ri-title .ic-em{color:var(--green);margin-right:6px;stroke-width:2.4}
.tool-page .privacy-badge-icon,.tool-page .highlight-icon,.tool-page .success-msg .icon,.tool-page .ic-ok{color:var(--green)}
.tool-page .ic-bad{color:var(--red)}
.tool-page .gstin-status .ic-em{width:1.4em;height:1.4em;stroke-width:2.4}
.tool-page .result-card.eligible .result-icon{color:var(--green)}
.tool-page .result-card.ineligible .result-icon{color:var(--red)}
.tool-page .result-icon .ic-em,.tool-page .success-msg .icon .ic-em,.tool-page .ph-placeholder .ic-em,.tool-page .r-photo-placeholder .ic-em{stroke-width:1.5}
.tool-page .warn-box .warn-ic{flex:none;width:1.3em;height:1.3em;margin-top:1px}
.tool-page .zodiac-icon{font-family:"Segoe UI Symbol","Apple Symbols","Noto Sans Symbols 2","Noto Sans Symbols",var(--font);line-height:1}

/* Form fields */
.tool-page input[type=text],.tool-page input[type=number],.tool-page input[type=date],.tool-page input[type=time],.tool-page input[type=email],
.tool-page input[type=tel],.tool-page input[type=password],.tool-page input:not([type]),.tool-page select,.tool-page textarea{border-radius:12px}
.tool-page input:focus-visible,.tool-page select:focus-visible,.tool-page textarea:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.tool-page input[type=range]{accent-color:var(--accent)}
.tool-page input[type=checkbox],.tool-page input[type=radio]{accent-color:var(--accent)}

/* ---------- FAQ (both old styles) ---------- */
.tool-page .faq-sec,.tool-page .tn-faq{max-width:var(--tool-w,880px)!important;margin:40px auto 0!important;padding:0 var(--gutter)!important}
.tool-page .faq-in{max-width:none}
.tool-page .faq-title,.tool-page .tn-faq>h2{font:700 clamp(20px,5vw,26px)/1.2 var(--font-display)!important;letter-spacing:-.015em;color:var(--fg)!important;margin:0 0 14px!important;text-transform:none}
.tool-page .faq-item{border:0!important;border-radius:18px!important;background:var(--surface)!important;margin-bottom:8px!important}
.tool-page .faq-q{font-size:15.5px!important;font-weight:700!important;padding:16px 18px!important;color:var(--fg)!important;background:none!important;min-height:52px}
.tool-page .faq-q.open{color:var(--accent-text)!important}
.tool-page .faq-a{font-size:15px!important;line-height:1.65!important;color:var(--muted)!important}
.tool-page .faq-q.open+.faq-a,.tool-page .faq-a.open{padding:0 18px 16px!important}
.tool-page .tn-faq details,.tool-page details.tn-qa{border:0!important;border-radius:18px!important;background:var(--surface)!important;padding:0!important;margin:0 0 8px!important}
.tool-page .tn-faq summary,.tool-page .tn-qa>summary{display:flex;align-items:center;justify-content:space-between;gap:14px;list-style:none;cursor:pointer;font-size:15.5px;font-weight:700!important;line-height:1.4;padding:14px 18px;color:var(--fg)!important;min-height:52px;border-radius:18px}
.tool-page .tn-faq summary::-webkit-details-marker,.tool-page .tn-qa>summary::-webkit-details-marker{display:none}
.tool-page .tn-faq summary::after,.tool-page .tn-qa>summary::after{content:"";flex:none;width:18px;height:18px;background:var(--muted);-webkit-mask:var(--i-chev) center/contain no-repeat;mask:var(--i-chev) center/contain no-repeat;transition:transform .2s}
.tool-page .tn-faq details[open]>summary,.tool-page details.tn-qa[open]>summary{color:var(--accent-text)!important}
.tool-page .tn-faq details[open]>summary::after,.tool-page details.tn-qa[open]>summary::after{transform:rotate(180deg);background:var(--accent-text)}
.tool-page .tn-faq summary:hover,.tool-page .tn-qa>summary:hover{background:var(--surface-2)}
.tool-page .tn-faq summary:focus-visible,.tool-page .tn-qa>summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.tool-page .tn-faq details,.tool-page details.tn-qa,.tool-page .tn-how-to>*,.tool-page .tn-cm>*{max-width:780px}
.tool-page .tn-faq details>div,.tool-page details.tn-qa>div{font-size:15px!important;line-height:1.65!important;color:var(--muted)!important;padding:0 18px 16px;margin:0!important}
/* FAQ items inside an explainer card: a light tint instead of the card colour, so each item stays visible */
.tool-page details.tn-qa{background:var(--surface-2)!important;background:color-mix(in srgb,var(--fg) 6%,transparent)!important}

/* guides: on phones the article comes first (the head already has the "Open <tool>" button); the tool card and
   related tools follow it */
@media (max-width:640px){.guide-page .sidebar{order:1}}
/* guides: their FAQ is always open (question + answer in one card) */
.guide-page .content .faq-q{min-height:0;padding:14px 18px 6px!important}
.guide-page .content .faq-a{max-height:none!important;padding:0 18px 14px!important;margin:0}

/* ---------- "How to use" ---------- */
.tool-page .tn-how-to{max-width:var(--tool-w,880px)!important;margin:40px auto 0!important;padding:22px var(--gutter) 0!important;border-top:1px solid var(--line)!important}
.tool-page .tn-how-to h2{font:700 18px/1.3 var(--font)!important;color:var(--fg)!important}
.tool-page .tn-how-to ol{padding-left:22px!important;margin:0 0 18px!important}
.tool-page .tn-how-to li{margin:0 0 6px;line-height:1.6;color:var(--fg-2)}
.tool-page .tn-how-to p{font-size:15px!important;line-height:1.65!important;color:var(--muted)!important}

/* ---------- Related tools (rebuilt as the shared list) ---------- */
.tool-page .rel{max-width:var(--tool-w,1200px);margin:40px auto 0;padding:0 var(--gutter)}
.tool-page .rel .tl{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.tool-page .rel h2{font:700 clamp(20px,5vw,26px)/1.2 var(--font-display);letter-spacing:-.015em;margin:0 0 14px}

/* ---------- Questions and comments ---------- */
.tool-page .tn-cm{max-width:var(--tool-w,880px)!important;margin:40px auto 0!important;padding:0 var(--gutter)!important}
.tool-page .tn-cm>h2{font:700 clamp(20px,5vw,26px)/1.2 var(--font-display)!important;letter-spacing:-.015em;color:var(--fg)!important}
.tool-page .tn-cm>p{font-size:15px!important;color:var(--muted)!important}
.tool-page #kc .kc-c{border:0;border-radius:16px;background:var(--surface)}
.tool-page #kc input,.tool-page #kc textarea{border-radius:14px!important;background:var(--surface)!important;border:1px solid var(--line-2)!important;color:var(--fg)!important;min-height:48px}
.tool-page #kc label{color:var(--fg-2)!important;font-size:14px!important}
.tool-page #kc button{min-height:48px;border-radius:14px!important;background:var(--accent)!important;color:var(--on-accent)!important;padding:0 20px!important}

/* ---------- Links inside text: underlined, so they don't depend on colour alone (WCAG 1.4.1) ---------- */
.tool-page .tool-main a:not([class]){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
.tool-page .tool-main .tl a,.tool-page .tool-main .others a{text-decoration:none}

/* ---------- Notes and small labels in tool markup ---------- */
.tool-page .info-strip{max-width:var(--tool-w,880px);margin:6px auto 0;padding:0 var(--gutter);background:none;border:0}
.tool-page .info-strip-in{max-width:none;margin:0;padding:12px 16px;border-radius:16px;background:var(--surface);border:1px solid var(--line-2);color:var(--fg-2);font-size:14px;line-height:1.55}
.tool-page .info-strip-in strong{color:var(--fg)}
/* option buttons with a second, smaller line ("most forms", "US size", "standard"): full-strength text so it stays readable */
.tool-page button small{opacity:1!important}
/* placeholder text inside the always-white preview "paper" (ID card PDFs) */
.tool-page .preview-placeholder{color:#5f5a68!important}

/* muted notes written as <p style="opacity:.85">: the same look through colour, so links inside keep full contrast */
.tool-page .tool-main p[style*="opacity"]{opacity:1!important;color:var(--muted)}
/* wide data tables scroll inside their card on small phones (they get tabindex="0" from tn_tool.py) */
@media (max-width:480px){.tool-page .items-table,.tool-page .quick-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tp-simple-invoice .wrap{grid-template-columns:minmax(0,1fr)}}

/* ---------- Document previews: always paper (white, dark ink) in both themes, like the file they produce ---------- */
.tool-page .resume{--bg-card:#fff;--bg:#f7f7f7;--fg:#1a1a1a;--fg-muted:#555;--fg-dim:#666;--border:#e0e0e0;background:#fff;color:#1a1a1a}
.tp-resume-builder .preview-scale{color:var(--muted)!important}

/* ---------- Pages without a tool head (about, privacy, support, numbers in words): their own content, the new type ---------- */
.info-page .tool-main h1{font:700 clamp(28px,6.6vw,42px)/1.1 var(--font-display)!important;letter-spacing:-.02em!important;color:var(--fg)!important;text-wrap:balance}
.info-page .tool-main h2,.info-page .tool-main h3{font-family:var(--font)!important;letter-spacing:-.005em}
.info-page .tool-main{padding-top:14px;padding-bottom:8px}
.words-page .tool-main{padding-top:26px}
.info-page .info-main{line-height:1.65}

/* tables in guides and reading pages scroll sideways inside their own box on small phones (tn_tool.wrap_tables) */
.tn-tscroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tn-tscroll:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* tools' own clickable divs/spans, made keyboard-usable by tn.js */
.tool-page [data-tn-kb]{cursor:pointer}
.tool-page [data-tn-kb]:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.guide-page .wrap>*{min-width:0}

/* ---------- Next steps ---------- */
.next{max-width:880px;margin:32px auto 0;padding:0 var(--gutter)}
.next h2{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.next-row{display:flex;flex-wrap:wrap;gap:8px}
.next-row a{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 16px 0 12px;border-radius:16px;background:var(--surface);color:var(--fg);font-weight:600;font-size:15px}
.next-row a:hover{background:var(--surface-2);color:var(--fg)}
.next-row .ic{color:var(--accent-text)}
[data-theme="light"] .next-row a{box-shadow:var(--shadow-sm)}

/* ---------- Next steps (tn.js): after a tool saves a file, the tools that usually come next, with that file ---------- */
.tn-next{position:fixed;z-index:55;left:10px;right:10px;bottom:calc(var(--dock-h) + 20px + env(safe-area-inset-bottom));max-width:520px;margin:0 auto;padding:10px 10px 12px 14px;border-radius:22px;background:var(--surface);color:var(--fg);border:1px solid var(--line);box-shadow:var(--shadow)}
@media (min-width:1024px){.tn-next{left:auto;right:24px;bottom:24px;width:440px;margin:0}}
.tn-next-h{display:flex;align-items:center;gap:8px;font-size:14px;line-height:1.3}
.tn-next-h .ic.ok{flex:none;width:20px;height:20px;color:var(--ok)}
.tn-next-f{flex:1;min-width:0;display:flex;gap:5px;white-space:nowrap;color:var(--muted)}
.tn-next-f b{flex:none;color:var(--fg);font-weight:700}
.tn-next-n{min-width:0;overflow:hidden;text-overflow:ellipsis}
.tn-next-s{flex:none}
.tn-next-x{flex:none;width:40px;height:40px;border:0;border-radius:12px;background:transparent;color:var(--muted);display:grid;place-items:center}
.tn-next-x .ic{width:18px;height:18px}
.tn-next-x:hover{background:var(--surface-2);color:var(--fg)}
.tn-next-t{margin:0 0 8px;font-size:13px;line-height:1.35;color:var(--muted)}
/* the saved file's numbers (result card): pixels, size, DPI, pages, type — and how it compares with what was chosen */
.tn-next-m{list-style:none;margin:0 0 8px 28px;padding:0;display:flex;flex-wrap:wrap;gap:4px 6px;font-size:13px;line-height:1.35;font-variant-numeric:tabular-nums}
.tn-next-m li{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:8px;background:var(--surface-2);color:var(--fg);font-weight:600;white-space:nowrap}
.tn-next-m li.was{background:none;padding-left:2px;color:var(--muted);font-weight:500}
.tn-next-m li.ok .ic{color:var(--ok)}
.tn-next-m li.warn .ic{color:var(--warn)}
.tn-next-m .ic{width:14px;height:14px}
.tn-next-m:last-child{margin-bottom:0}
/* phones: the card stays low over the tool — the "Next, with this file" line is read out but not shown */
@media (max-width:1023px){.tn-next-t{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
/* phones: one row that scrolls sideways (the panel stays low over the tool); wide screens: the chips wrap */
.tn-next-row{list-style:none;margin:-4px -10px -4px -14px;padding:4px 10px 4px 14px;display:flex;gap:8px;overflow-x:auto;scroll-padding:0 10px 0 14px;scrollbar-width:none}
.tn-next-row::-webkit-scrollbar{display:none}
.tn-next-row li{flex:none}
@media (min-width:1024px){.tn-next-row{margin:0;padding:0;flex-wrap:wrap;overflow:visible}}
.tn-next-row a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 10px;border-radius:14px;background:var(--surface-2);color:var(--fg);font-weight:600;font-size:14px;white-space:nowrap;text-decoration:none}
.tn-next-row a:hover{color:var(--fg);box-shadow:inset 0 0 0 1px var(--line)}
.tn-next-row a .ic{flex:none;width:18px;height:18px;color:var(--accent-text)}
.tn-next-row a:focus-visible,.tn-next-x:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ---------- No JavaScript ---------- */
.nojs{max-width:880px;margin:12px auto 0;padding:14px var(--gutter);border-radius:18px;background:var(--surface);color:var(--fg);font-size:15px;line-height:1.5}

/* ---------- One left edge on desktop (keep this block last: it overrides the paddings above) ----------
   The head, explainer, FAQ, how-to, comments and related list take the tool's own width and side padding
   (--tool-w, --tool-pad: set on <main> by scripts/tn_tool.py from the page CSS). */
.tool-page .seo,.tool-page .seo-section{max-width:var(--tool-w,880px)!important}
@media (min-width:700px){
  .tool-head .th-in,.tool-page .tn-faq,.tool-page .faq-sec,.tool-page .tn-how-to,.tool-page .tn-cm,.tool-page .rel,.tool-page .info-strip,
  .tool-page .seo,.tool-page .seo-section{padding-left:var(--tool-pad,var(--gutter))!important;padding-right:var(--tool-pad,var(--gutter))!important}
}