/* Bargaon free tools — hub, tool page shell and shared tool UI parts. Template pre-build 5, 29 Oct 2026.
 * Plain CSS (no Tailwind build needed). Same palette as library.css / resources.css. Mobile-first.
 * Tool UIs (template-parts/tools/<slug>.php) use only the .tool-* classes below.
 */
:root{--t-ink:#111111;--t-muted:#4B4B4B;--t-sec:#5D5F5F;--t-line:#D4D4D4;--t-soft:#F7F7F5;--t-high:#EAE9E7;--t-accent:#F97316;--t-accent-ink:#C2410C;--t-ok:#15803D;--t-bad:#B91C1C;--t-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;--t-head:"Space Grotesk","Inter",system-ui,sans-serif}
[x-cloak]{display:none!important}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Hub hero stats */
.tool-stats{display:flex;flex-wrap:wrap;gap:8px 20px;font:500 .8125rem/1.4 var(--t-mono);color:var(--t-sec)}
.tool-stats strong{color:var(--t-ink);font-weight:700}

/* Search + area chips */
.tool-filters{display:flex;flex-direction:column;gap:14px;margin:0 0 32px}
.tool-search{display:block;max-width:560px}
.tool-search input{width:100%;border:1px solid var(--t-line);padding:12px 14px;font-size:1rem;background:#fff;color:var(--t-ink)}
.tool-search input:focus{outline:2px solid var(--t-accent);outline-offset:0;border-color:#000}
.tool-chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
@media(min-width:768px){.tool-chips{flex-wrap:wrap;overflow:visible}}
.tool-chip{flex:0 0 auto;border:1px solid var(--t-line);background:#fff;padding:9px 12px;font:600 .6875rem/1 "Inter",system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--t-ink);cursor:pointer;white-space:nowrap}
.tool-chip:hover{border-color:#000}
.tool-chip.is-active{background:#000;border-color:#000;color:#fff}
.tool-chip:focus-visible,.tool-card:focus-visible{outline:2px solid var(--t-accent);outline-offset:2px}

/* Areas + cards */
.tool-area{margin:0 0 40px;scroll-margin-top:6rem}
.tool-area:last-of-type{margin-bottom:0}
.tool-area__title{display:flex;align-items:baseline;gap:10px;font:600 1.25rem/1.3 var(--t-head);letter-spacing:-.01em;color:#000;margin:0 0 16px;padding-bottom:10px;border-bottom:1px solid var(--t-line)}
.tool-area__title span{font:500 .75rem/1 var(--t-mono);color:var(--t-sec)}
.tool-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media(min-width:640px){.tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.tool-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tool-card{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--t-line);border-top:3px solid #000;padding:20px;color:var(--t-ink);text-decoration:none;min-width:0}
a.tool-card:hover{border-color:#000;border-top-color:var(--t-accent)}
a.tool-card:hover .tool-card__title{color:var(--t-accent-ink)}
.tool-card.is-soon{border-top-color:var(--t-line);background:var(--t-soft)}
.tool-card.is-soon .tool-card__title{color:var(--t-muted)}
.tool-card--service{border-top-color:var(--t-accent)}
.tool-card__top{display:flex;justify-content:space-between;gap:12px;font:500 .6875rem/1.4 var(--t-mono);color:var(--t-sec);text-transform:uppercase}
.tool-card.is-soon .tool-card__top span:last-child{color:var(--t-accent-ink)}
.tool-card__title{font:600 1.0625rem/1.35 var(--t-head);color:#000}
.tool-card__text{font-size:.875rem;line-height:1.55;color:var(--t-muted)}
.tool-card__btn{margin-top:auto;padding-top:12px;border-top:1px solid var(--t-line);font:600 .6875rem/1 "Inter",system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#000}
.tool-none{border:1px dashed var(--t-line);background:#fff;padding:20px;max-width:720px;font-size:.9375rem;color:var(--t-muted)}
.tool-none a{color:#000;text-decoration:underline;text-underline-offset:3px}

/* How the tools work */
.tool-principles{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;background:var(--t-line);border:1px solid var(--t-line)}
@media(min-width:768px){.tool-principles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.tool-principles{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tool-principles>div{background:#fff;padding:22px}
.tool-principles strong{display:block;font:600 1rem/1.35 var(--t-head);color:#000;margin-bottom:8px}
.tool-principles p{font-size:.875rem;line-height:1.55;color:var(--t-muted);margin:0}

/* Tool page: app area */
.tool-app{background:#fff;border:1px solid var(--t-line);padding:20px;min-height:180px}
@media(min-width:768px){.tool-app{padding:32px}}
.tool-app__pending{border:1px dashed var(--t-line);background:var(--t-soft);padding:24px;max-width:640px}
.tool-app__pending strong{display:block;font:600 1.0625rem/1.35 var(--t-head);margin-bottom:6px}
.tool-app__pending p,.tool-app__note{font-size:.9375rem;line-height:1.6;color:var(--t-muted);margin:0}
.tool-app__pending a{color:#000;text-decoration:underline;text-underline-offset:3px}
.tool-privacy{margin:12px 0 0;font:500 .75rem/1.5 var(--t-mono);color:var(--t-sec)}

/* Shared UI parts for tool apps */
.tool-form{display:grid;gap:16px}
@media(min-width:768px){.tool-form--2{grid-template-columns:repeat(2,minmax(0,1fr))}.tool-form--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tool-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.tool-field label,.tool-label{font:600 .6875rem/1.2 "Inter",system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--t-ink)}
.tool-field input,.tool-field select,.tool-field textarea{width:100%;border:1px solid var(--t-line);background:#fff;padding:11px 12px;font-size:1rem;line-height:1.4;color:var(--t-ink);border-radius:0}
.tool-field textarea{min-height:140px;font-family:var(--t-mono);font-size:.875rem}
.tool-field input:focus,.tool-field select:focus,.tool-field textarea:focus{outline:2px solid var(--t-accent);outline-offset:0;border-color:#000}
.tool-hint{font-size:.8125rem;line-height:1.45;color:var(--t-sec)}
.tool-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.tool-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid #000;background:#000;color:#fff;padding:12px 18px;font:600 .75rem/1 "Inter",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.tool-btn:hover{background:var(--t-accent);border-color:var(--t-accent);color:#000}
.tool-btn--ghost{background:#fff;color:#000}
.tool-btn--ghost:hover{background:var(--t-soft);color:#000;border-color:#000}
.tool-btn[disabled]{opacity:.5;cursor:wait}
.tool-btn:focus-visible{outline:2px solid var(--t-accent);outline-offset:2px}
.tool-result{margin-top:24px;border-top:1px solid var(--t-line);padding-top:24px}
.tool-error{border-left:3px solid var(--t-bad);background:#FEF2F2;padding:12px 14px;font-size:.9375rem;color:#7F1D1D}
.tool-loading{font:500 .8125rem/1.4 var(--t-mono);color:var(--t-sec)}
.tool-score{display:flex;align-items:baseline;gap:8px;font:700 2.5rem/1 var(--t-head);color:#000}
.tool-score small{font:500 .875rem/1 var(--t-mono);color:var(--t-sec)}
.tool-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--t-line);border:1px solid var(--t-line)}
@media(min-width:768px){.tool-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tool-kpi{background:#fff;padding:16px}
.tool-kpi__value{display:block;font:700 1.375rem/1.2 var(--t-head);color:#000}
.tool-kpi__label{display:block;margin-top:4px;font-size:.8125rem;color:var(--t-sec)}
.tool-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--t-line)}
.tool-list li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;padding:12px 0;border-bottom:1px solid var(--t-line);font-size:.9375rem;line-height:1.5}
.tool-badge{display:inline-block;padding:3px 7px;font:600 .625rem/1.2 "Inter",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;border:1px solid currentColor;white-space:nowrap;align-self:start}
.tool-badge--pass{color:var(--t-ok)}
.tool-badge--warn{color:var(--t-accent-ink)}
.tool-badge--fail{color:var(--t-bad)}
.tool-badge--info{color:var(--t-sec)}
.tool-code{position:relative;background:var(--t-soft);border:1px solid var(--t-line);padding:14px;font:500 .8125rem/1.55 var(--t-mono);white-space:pre-wrap;word-break:break-word;max-height:420px;overflow:auto}
.tool-table{width:100%;border-collapse:collapse;font-size:.875rem}
.tool-table th,.tool-table td{border-bottom:1px solid var(--t-line);padding:10px 8px;text-align:left;vertical-align:top}
.tool-table th{font:600 .6875rem/1.2 "Inter",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--t-sec)}
.tool-table .num{text-align:right;font-family:var(--t-mono)}
.tool-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Tool page: explainer, steps, checks */
.tool-about{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:start}
@media(min-width:1024px){.tool-about{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px}.tool-about--single{grid-template-columns:minmax(0,1fr)}}
.tool-about__main{min-width:0}
.tool-about__side{display:grid;gap:40px;min-width:0}
.tool-explainer{max-width:68ch}
.tool-steps{list-style:none;counter-reset:s;margin:0;padding:0;border-top:1px solid var(--t-line)}
.tool-steps li{counter-increment:s;display:grid;grid-template-columns:36px minmax(0,1fr);gap:8px;padding:12px 0;border-bottom:1px solid var(--t-line);font-size:.9375rem;line-height:1.55;color:var(--t-muted)}
.tool-steps li::before{content:counter(s,decimal-leading-zero);font:600 .75rem/1.9 var(--t-mono);color:var(--t-accent-ink)}
.tool-checks{margin:0;border-top:1px solid var(--t-line)}
.tool-checks>div{padding:12px 0;border-bottom:1px solid var(--t-line)}
.tool-checks dt{font:600 .9375rem/1.4 var(--t-head);color:#000}
.tool-checks dd{margin:4px 0 0;font-size:.875rem;line-height:1.55;color:var(--t-muted)}
.tool-formula{margin:16px 0 0;background:var(--t-soft);border-left:3px solid #000;padding:12px 14px;font-size:.875rem;line-height:1.55;color:var(--t-muted)}
.tool-formula span{display:block;font:600 .6875rem/1.2 "Inter",system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#000;margin-bottom:6px}