/* ==================================================================
   Free tools (/tools/ pages only). Loaded after styles.css by src/build.py.
   ================================================================== */

/* ---------- Free tools ---------- */
.tool-explainer-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 14px; text-underline-offset: 4px; }
.tool-explainer-link:focus-visible { outline: 3px solid var(--volt); outline-offset: 4px; }
.tool-explainer-link + .tool-explainer-link { margin-left: 20px; }
.tool-finder { margin-bottom: 48px; }
.tool-finder h2 { margin-bottom: 10px; }
.tool-finder > p { color: var(--muted); }
.tool-finder ul { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tool-finder a { display: block; height: 100%; padding: 16px 20px; background: var(--white); border: 1px solid var(--rule); border-radius: 10px; color: var(--ink); text-decoration: none; }
.tool-finder a:hover { border-color: var(--teal-ink); background: #E3FBF6; }
.tool-finder a:focus-visible, .wn-plot:focus-visible { outline: 3px solid var(--teal-ink); outline-offset: 3px; }
.tool-finder strong { display: block; font-size: 1rem; line-height: 1.4; }
.tool-finder span { display: block; margin-top: 5px; color: var(--muted); font-size: 0.875rem; line-height: 1.4; }
@media (max-width: 600px) { .tool-finder ul { grid-template-columns: 1fr; } }

.tool-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.tool-card { min-width: 0; }
.tool-card a { overflow-wrap: anywhere; display: flex; flex-direction: column; height: 100%; padding: 30px 28px 26px; background: var(--white); border: 1px solid var(--rule); border-radius: 14px; color: var(--ink); text-decoration: none; transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; }
.tool-card a:hover { border-color: var(--teal-ink); transform: translateY(-2px); box-shadow: 0 20px 40px -28px rgba(15, 34, 54, 0.45); color: var(--ink); }
.tool-card h2 { font-size: 1.6rem; margin: 14px 0 8px; }
.tool-card p { color: var(--muted); font-size: 0.97rem; flex: 1; }
.tool-card .text-link { margin-top: 8px; }
.tool-tag { align-self: flex-start; font: 600 0.875rem var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); background: var(--paper); padding: 5px 9px; border-radius: 4px; }
.tool-card--main a { background: var(--night); border-color: rgba(34, 229, 200, 0.45); color: var(--on-dark); box-shadow: 0 0 0 6px rgba(34, 229, 200, 0.06); }
.tool-card--main a:hover { color: var(--on-dark); border-color: var(--volt); }
.tool-card--main h2 { color: var(--white); font-size: 2rem; }
.tool-card--main p { color: var(--muted-dark); }
.tool-card--main .tool-tag { background: var(--volt); color: var(--night); }
.tool-card--main .text-link { color: var(--volt); }

/* AI skills: reusable assistant workflows within the Tools section. */
.ais-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.ais-card-head .tool-tag { min-width: 0; max-width: 100%; align-self: center; line-height: 1.5; }
.ais-skill-icon { --skill-icon-bg: #E3FBF6; display: inline-grid; place-items: center; width: 48px; height: 48px; flex: 0 0 48px; border: 1px solid rgba(10, 90, 80, 0.16); border-radius: 12px; background: var(--skill-icon-bg); color: var(--teal-ink); }
.ais-skill-icon svg { display: block; width: 28px; height: 28px; max-width: 28px; flex: none; }
.ais-deliverables > .ais-skill-icon { margin-bottom: 20px; }
.ais-hub-jump { margin-top: 24px; font-size: 0.96rem; }
.ais-hub-jump a { display: inline-block; padding: 6px 0; }
.ais-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 30px; font-size: 0.9rem; color: var(--muted-dark); }
.ais-breadcrumb a { display: inline-block; padding: 6px 0; }
.ais-feature { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr); gap: 48px; align-items: start; }
.ais-feature > * { min-width: 0; }
.ais-skill-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.ais-skill-grid > * { min-width: 0; scroll-margin-top: 100px; }
.ais-title { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 20px; }
.ais-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 24px 0; }
.ais-tags li { border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); color: var(--teal-ink); padding: 7px 11px; font-size: 0.875rem; font-weight: 600; }
.ais-checks { list-style: none; padding: 0; margin: 28px 0; display: grid; gap: 18px; }
.ais-checks li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; color: var(--muted); }
.ais-checks li > span { color: var(--teal-ink); padding-top: 3px; }
.ais-checks svg { width: 22px; height: 22px; }
.ais-checks strong { color: var(--ink); }
.ais-deliverables { padding: 30px; border: 1px solid var(--rule); border-radius: 14px; background: var(--paper); }
.ais-delivery-icon { --skill-icon-bg: var(--night); display: grid; place-items: center; width: 48px; height: 48px; border-radius: 10px; background: var(--night); color: var(--volt); margin-bottom: 24px; }
.ais-delivery-icon svg { width: 28px; height: 28px; }
.ais-deliverables h3 { font-size: 1.8rem; line-height: 1.15; }
.ais-deliverables dl { margin: 24px 0 0; }
.ais-deliverables dl > div { padding: 16px 0; border-top: 1px solid var(--rule); }
.ais-deliverables dt { color: var(--ink); font-weight: 600; }
.ais-deliverables dd { margin: 5px 0 0; color: var(--muted); font-size: 0.96rem; }
.ais-release-note { margin: 16px 0 0; padding-top: 18px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 0.875rem; }
.ais-boundary { margin-top: 48px; padding: 24px 28px; border-left: 3px solid var(--teal-ink); background: var(--paper); border-radius: 0 10px 10px 0; }
.ais-boundary h3 { font-size: 1.25rem; margin-bottom: 8px; }
.ais-boundary p { color: var(--muted); margin: 0; max-width: 80ch; }
.ais-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ais-prompt { background: var(--white); border: 1px solid var(--rule); border-radius: 14px; padding: 30px; margin-top: 44px; }
.ais-prompt h3 { font-size: 1.4rem; }
.ais-prompt > p:not(.kicker) { max-width: 78ch; }
#ai-skill-request { font-size: 1.05rem; line-height: 1.7; color: var(--ink); overflow-wrap: anywhere; }
.ais-prompt-hint { color: var(--muted); font-size: 0.9rem; }
.ais-copy-status { min-height: 1.5em; margin: 12px 0 0; color: var(--teal-ink); font-size: 0.9rem; }
[data-ai-skill-copy][hidden] { display: none; }
.ais-install { padding: 24px 0; border-bottom: 1px solid var(--rule); }
.ais-install summary { cursor: pointer; font-weight: 600; padding: 8px 0; color: var(--ink); }
.ais-install > p { color: var(--muted); margin-top: 18px; max-width: 82ch; }
.ais-install-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 24px 0; }
.ais-install-grid > div { min-width: 0; border: 1px solid var(--rule); border-radius: 10px; background: var(--white); padding: 22px; }
.ais-install-grid h3 { font-size: 1.2rem; }
.ais-install code { font: 400 0.875rem/1.6 var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.ais-install-grid > div > code { display: block; background: var(--paper); border-radius: 6px; padding: 10px; }
.ais-faq { max-width: 860px; }
.ais-back-link { margin: 34px 0 0; }
#ai-skills .home-tool-cards h3 { margin-top: 0; }
@media (max-width: 900px) { .ais-feature, .ais-skill-grid { grid-template-columns: 1fr; gap: 36px; } }
@media (max-width: 760px) { .ais-steps { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .ais-steps, .ais-install-grid { grid-template-columns: 1fr; }
  .ais-deliverables, .ais-prompt { padding: 24px; }
  .ais-boundary { padding: 22px; }
  .ais-breadcrumb { margin-bottom: 20px; }
}

/* Skill output examples: rendered summaries of real synthetic script runs. */
.ais-example-nav { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: -8px 0 32px; }
.ais-example-nav a { padding: 8px 0; font-weight: 600; color: var(--teal-ink); }
.ais-example { margin: 28px 0; padding-top: 24px; border-top: 1px solid var(--rule); }
.ais-example, .ais-video-example { scroll-margin-top: 110px; }
.ais-example-label { margin: 0 0 12px; font-size: 0.875rem; font-weight: 600; color: var(--teal-ink); }
.ais-example h4 { font-family: var(--display); font-size: 1.45rem; line-height: 1.25; margin: 0 0 16px; color: var(--ink); }
.ais-example-input { color: var(--muted); font-size: 1rem; }
.ais-example-status { padding: 14px 16px; border-left: 3px solid var(--teal-ink); background: var(--white); font-size: 0.9375rem; color: var(--ink); }
.ais-example-status strong { display: block; margin-bottom: 4px; overflow-wrap: anywhere; }
.ais-example-table { width: 100%; border-collapse: collapse; table-layout: fixed; margin: 24px 0; color: var(--ink); font-size: 0.9375rem; line-height: 1.5; }
.ais-example-table caption { text-align: left; font-size: 0.875rem; font-weight: 600; padding-bottom: 10px; color: var(--muted); }
.ais-example-table th, .ais-example-table td { padding: 12px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); overflow-wrap: anywhere; }
.ais-example-table thead { background: var(--night); color: var(--on-dark); }
.ais-example-table thead th { font-weight: 600; }
.ais-example-table th:first-child { width: 43%; }
.ais-example-table tbody th { font-weight: 600; }
.ais-example-details { border-bottom: 1px solid var(--rule); margin: 16px 0; }
.ais-example-details summary { padding: 12px 0; cursor: pointer; font-weight: 600; color: var(--ink); font-size: 0.9375rem; }
.ais-example-details p { color: var(--muted); font-size: 0.9375rem; }
.ais-example-details code { font: 0.875rem var(--mono); overflow-wrap: anywhere; color: var(--ink); }
.ais-example-next { font-size: 0.9375rem; color: var(--ink); margin: 20px 0; }
.ais-example a, .ais-video-example > a { font-size: 0.9375rem; }
.ais-example-nav a:focus-visible, .ais-example-details summary:focus-visible { outline: 3px solid var(--teal-ink); outline-offset: 4px; }
@media (max-width: 600px) { .ais-example-nav { display: grid; gap: 4px; } .ais-example-table th, .ais-example-table td { padding: 12px 8px; } }

/* Compact downloads with native disclosures for setup, practice and evidence. */
.ais-compact-head { margin-bottom: 32px; }
.ais-compact-head > p { max-width: 70ch; color: var(--muted); }
.ais-download-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
.ais-download-card { min-width: 0; padding: 28px; background: var(--paper); border: 1px solid var(--rule); border-radius: 14px; scroll-margin-top: 110px; }
.ais-download-card > .ais-skill-icon { margin-bottom: 22px; }
.ais-download-card > h3 { font-size: 1.65rem; line-height: 1.15; margin-bottom: 14px; min-height: 2.3em; }
.ais-card-job { font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.ais-card-description { font-size: 1rem; color: var(--muted); min-height: 7.5em; }
.ais-download { display: flex; justify-content: center; width: 100%; margin-top: 24px; }
.ais-download-meta { font-size: 0.875rem; line-height: 1.6; color: var(--muted); margin: 12px 0 24px; }
.ais-download-meta a { white-space: nowrap; }
.ais-guide { border-top: 1px solid var(--rule); scroll-margin-top: 110px; }
.ais-guide > summary, .ais-host > summary { cursor: pointer; padding: 18px 0; font-weight: 600; font-size: 0.9375rem; color: var(--ink); }
.ais-guide[open] > summary { color: var(--teal-ink); }
.ais-guide-body { padding-bottom: 16px; font-size: 0.9375rem; color: var(--muted); }
.ais-guide .ais-example { padding-top: 0; border-top: 0; margin: 0; }
.ais-guide .ais-prompt { margin: 16px 0; padding: 18px; background: var(--white); border-radius: 8px; }
.ais-guide .ais-prompt > p { font-size: 0.9375rem; overflow-wrap: anywhere; }
.ais-guide .ais-copy-status { margin-top: 10px; min-height: 0; }
.ais-guide .ais-copy-status:empty { display: none; }
.ais-guide code, .ais-host code { font: 0.875rem var(--mono); overflow-wrap: anywhere; color: var(--ink); }
.ais-page-note { margin: 28px 0 0; max-width: 95ch; font-size: 0.9375rem; color: var(--muted); }
.ais-setup-wrap { max-width: 920px; }
.ais-host { border-top: 1px solid var(--rule); scroll-margin-top: 110px; }
.ais-host:last-child { border-bottom: 1px solid var(--rule); }
.ais-host > summary { font-size: 1.125rem; padding: 24px 0; }
.ais-host-hint { display: inline-block; margin-left: 16px; font-size: 0.9375rem; font-weight: 400; color: var(--muted); }
.ais-host-body { padding: 0 0 20px 22px; color: var(--muted); max-width: 78ch; }
.ais-host-body li { margin-bottom: 14px; padding-left: 4px; }
.ais-practice-links { display: flex; flex-wrap: wrap; gap: 12px 24px; padding: 28px 0; font-size: 0.9375rem; }
.ais-practice-links span { color: var(--muted); }
.ais-guide > summary:focus-visible, .ais-host > summary:focus-visible { outline: 3px solid var(--teal-ink); outline-offset: 3px; }
@media (max-width: 1050px) { .ais-download-grid { grid-template-columns: 1fr; } .ais-card-description, .ais-download-card > h3 { min-height: 0; } }
@media (max-width: 600px) { .ais-download-card { padding: 24px; } .ais-host-hint { display: block; margin: 6px 0 0 20px; } .ais-host-body { padding-left: 0; } .ais-practice-links { gap: 12px 20px; } }

/* Catalog Profit Check */
.pc-step.section { padding: 72px 0; }
.pc-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 20px; }
.pc-head h2 { margin-bottom: 0.25em; }
.pc-intro { color: var(--muted); margin: 0; }
.pc-setting { flex: none; display: flex; align-items: center; gap: 14px; background: var(--paper); border: 1px solid var(--rule); border-radius: 12px; padding: 12px 16px; }
.pc-setting label { font-weight: 600; font-size: 0.95rem; line-height: 1.3; }
.pc-setting small { display: block; font-weight: 400; font-size: 0.875rem; color: var(--muted); }
.pc-setting-input { display: flex; align-items: center; gap: 4px; font: 600 1rem var(--mono); color: var(--muted); }
.pc-setting-input input { width: 5.5ch; text-align: right; font: 600 1.05rem var(--mono); color: var(--ink); padding: 8px; border: 1px solid #B6C4CF; border-radius: 6px; background: var(--white); }
.pc-setting-input input:focus { outline: none; border-color: var(--teal-ink); box-shadow: 0 0 0 3px rgba(34, 229, 200, 0.28); }

.pc-note { max-width: none; margin: 0 0 14px; padding: 10px 14px; border-radius: 8px; background: #E3FBF6; font-size: 0.93rem; }
.pc-note[hidden] { display: none; }
.pc-link { all: unset; cursor: pointer; font-weight: 600; color: var(--teal-ink); text-decoration: underline; text-underline-offset: 3px; }
.pc-link:hover { color: var(--ink); }
.pc-link:focus-visible { outline: 3px solid var(--volt); outline-offset: 2px; }

.pc-help { margin: 0 0 16px; font-size: 0.93rem; }
.pc-help summary { cursor: pointer; font-weight: 600; color: var(--teal-ink); }
.pc-help dl { margin: 12px 0 0; padding: 6px 20px; background: var(--paper); border: 1px solid var(--rule); border-radius: 12px; }
.pc-help dl div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 10px 0; border-top: 1px dashed var(--rule); }
.pc-help dl div:first-child { border-top: 0; }
.pc-help dt { font: 600 0.875rem/1.6 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.pc-help dd { margin: 0; color: var(--muted); }

.pc-grid-wrap, .pc-results-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: 12px; background: var(--white); }
.pc-grid, .pc-results { width: 100%; border-collapse: collapse; }
.pc-grid { min-width: 900px; }
.pc-results { min-width: 1000px; }
.pc-grid th, .pc-results th[scope="col"] { text-align: right; vertical-align: bottom; font: 600 0.875rem/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); padding: 12px 10px; background: var(--paper); border-bottom: 1px solid var(--rule); }
.pc-grid th small { display: block; margin-top: 3px; font: 400 0.875rem var(--sans); letter-spacing: 0; text-transform: none; color: var(--muted); }
.pc-grid th.pc-opt { color: var(--muted); }
.pc-grid th.pc-name, .pc-results th.pc-name { text-align: left; }
.pc-grid td { padding: 4px 3px; border-bottom: 1px solid var(--rule); }
.pc-grid td.pc-name { width: 26%; padding-left: 6px; }
.pc-grid tr:last-child td { border-bottom: 0; }
.pc-grid input { width: 100%; min-width: 0; font: 500 0.95rem var(--mono); color: var(--ink); text-align: right; padding: 9px 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; }
.pc-grid td.pc-name input { text-align: left; font: 500 0.97rem var(--sans); }
.pc-grid td.pc-opt input { background: #F7F9FA; }
.pc-grid input::placeholder { color: var(--muted); opacity: 1; }
.pc-grid input:hover { border-color: var(--rule); }
.pc-grid input:focus { outline: none; border-color: var(--teal-ink); background: var(--white); box-shadow: 0 0 0 3px rgba(34, 229, 200, 0.28); }
.pc-grid input.is-missing { border: 1px dashed var(--loss-ink); background: #FFF4F2; }
.pc-rm { width: 44px; text-align: center; }
.pc-remove { width: 32px; height: 32px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font: 400 1.3rem/1 var(--sans); cursor: pointer; }
.pc-remove:hover { background: #FFF0EE; color: var(--loss-ink); }

.pc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 16px; }
.pc-btn { font: 600 0.92rem var(--sans); color: var(--ink); background: var(--white); border: 1.5px solid var(--ink); border-radius: 8px; padding: 10px 16px; cursor: pointer; transition: background 0.15s, color 0.15s; }
.pc-btn:hover { background: var(--ink); color: var(--white); }
.pc-btn--quiet { border-color: var(--rule); color: var(--muted); }
.pc-btn--quiet:hover { background: var(--paper); color: var(--ink); }
.pc-status { font: 400 0.875rem var(--mono); color: var(--muted); }
.pc-tip { font-size: 0.88rem; color: var(--muted); margin: 14px 0 0; max-width: none; }

.pc-paste { margin-top: 16px; padding: 20px; background: var(--paper); border: 1px solid var(--rule); border-radius: 12px; }
.pc-paste[hidden] { display: none; }
.pc-paste label { display: block; font-weight: 600; }
.pc-paste p { font-size: 0.9rem; color: var(--muted); margin: 4px 0 12px; max-width: none; }
.pc-paste textarea { width: 100%; font: 400 0.9rem var(--mono); color: var(--ink); padding: 12px; border: 1px solid #B6C4CF; border-radius: 8px; background: var(--white); resize: vertical; tab-size: 12; }
.pc-paste textarea:focus { outline: none; border-color: var(--teal-ink); box-shadow: 0 0 0 3px rgba(34, 229, 200, 0.28); }
.pc-paste .pc-actions { margin-top: 12px; }

/* Summary: dark, like the homepage ledger */
.pc-summary { margin: 8px 0 28px; padding: 32px 34px; border-radius: 16px; background: linear-gradient(180deg, var(--night-3), var(--night)); border: 1px solid rgba(34, 229, 200, 0.4); box-shadow: 0 0 0 6px rgba(34, 229, 200, 0.06); color: var(--on-dark); }
.pc-headline { font: 800 clamp(1.7rem, 3.2vw, 2.6rem)/1.1 var(--display); letter-spacing: -0.03em; color: var(--white); margin: 0 0 8px; max-width: 30ch; }
.pc-headline em { font-style: normal; color: var(--volt); }
.pc-headline em.neg { color: var(--loss); }
.pc-sub { color: #B9CADA; font-size: 1.05rem; margin: 0; }
.pc-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin: 24px 0 0; border-top: 1px solid var(--line-dark); }
.pc-stats:empty { display: none; }
.pc-stats div { padding: 16px 16px 0 0; }
.pc-stats dt { font: 600 0.875rem/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-dark); }
.pc-stats dd { margin: 6px 0 0; font: 700 1.5rem/1.1 var(--display); letter-spacing: -0.02em; color: var(--white); white-space: nowrap; }
.pc-stats dd .neg { color: var(--loss); }
.pc-insight { margin: 22px 0 0; padding: 12px 14px; border-radius: 8px; background: rgba(255, 107, 90, 0.12); border-left: 3px solid var(--loss); color: var(--on-dark); font-size: 0.97rem; max-width: 80ch; }
.pc-insight[hidden] { display: none; }
.pc-insight b { color: var(--white); }
.pc-summary-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line-dark); }
.pc-summary-cta p { margin: 0; color: var(--muted-dark); font-size: 0.95rem; max-width: 62ch; }
.pc-summary-cta .btn { flex: none; }

/* Results table */
.pc-results th, .pc-results td { padding: 12px 10px; border-bottom: 1px solid var(--rule); text-align: right; font: 400 0.92rem var(--mono); color: var(--ink); white-space: nowrap; }
.pc-results th[scope="row"] { text-align: left; font: 600 0.95rem var(--sans); white-space: normal; min-width: 150px; }
.pc-results tr:last-child > * { border-bottom: 0; }
.pc-results .pc-key { font-weight: 600; color: var(--teal-ink); }
.pc-neg { color: var(--loss-ink) !important; font-weight: 600; }
.pc-pos { color: var(--teal-ink); font-weight: 600; }
.pc-muted { color: var(--muted); font-family: var(--sans); font-size: 0.875rem; }
.pc-incomplete td { text-align: left !important; color: var(--muted) !important; font-family: var(--sans) !important; white-space: normal !important; }
.pc-bar-col { width: 22%; }
.pc-bar-cell { display: flex; align-items: center; gap: 10px; }
.pc-bar { position: relative; flex: 1; min-width: 110px; height: 10px; background: #E6ECF0; border-radius: 0 4px 4px 0; }
.pc-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0 4px 4px 0; background: var(--teal-ink); }
.pc-bar-fill[data-tone="loss"] { background: var(--loss); }
.pc-bar-fill[data-tone="thin"] { background: #7F93A7; }
.pc-bar-be { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; background: var(--ink); border-radius: 1px; }
.pc-bar-val { min-width: 5ch; }
.pc-read { display: inline-flex; align-items: center; gap: 6px; font: 600 0.875rem var(--sans); }
.pc-read b { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font: 700 0.875rem/1 var(--mono); color: var(--white); background: var(--muted); }
.pc-read[data-tone="loss"] { color: var(--loss-ink); }
.pc-read[data-tone="loss"] b { background: var(--loss-ink); }
.pc-read[data-tone="good"] { color: var(--teal-ink); }
.pc-read[data-tone="good"] b { background: var(--teal-ink); }
.pc-legend[hidden], .pc-order[hidden] { display: none; }
.pc-legend-line { width: 2px !important; height: 14px !important; border-radius: 1px !important; background: var(--ink); }
.pc-order { font-size: 0.875rem; color: var(--muted); margin: 8px 0 0; max-width: none; }

@media (max-width: 1000px) {
  .tool-cards { grid-template-columns: 1fr; }
  .pc-head { flex-direction: column; align-items: stretch; }
  .pc-stats { grid-template-columns: 1fr 1fr; }
  .pc-summary-cta { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 760px) {
  .pc-step.section { padding: 52px 0; }
  .pc-setting { justify-content: space-between; }
  .pc-help dl { padding: 4px 14px; }
  .pc-help dl div { grid-template-columns: 1fr; gap: 2px; }
  .pc-summary { padding: 24px 18px; }
  .pc-stats dd { font-size: 1.25rem; }

  /* Tables become one card per product */
  .pc-grid-wrap, .pc-results-wrap { overflow: visible; border: 0; background: none; }
  .pc-grid, .pc-results { min-width: 0; }
  .pc-grid thead, .pc-results thead { display: none; }
  .pc-grid tbody, .pc-results tbody { display: grid; gap: 12px; }
  .pc-grid tr, .pc-results tr { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; padding: 14px; background: var(--white); border: 1px solid var(--rule); border-radius: 12px; }
  .pc-grid tr { align-items: end; } /* inputs line up even when a label wraps */
  .pc-grid td, .pc-results td, .pc-results th[scope="row"] { display: block; padding: 0; border: 0 !important; text-align: left; }
  .pc-grid td::before, .pc-results td::before { content: attr(data-label); display: block; margin-bottom: 3px; font: 600 0.875rem/1.2 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
  .pc-grid td.pc-name { grid-column: 1 / -1; width: auto; padding: 0 40px 0 0; }
  .pc-grid td.pc-rm { position: absolute; top: 10px; right: 8px; width: auto; }
  .pc-grid td.pc-rm::before { content: none; }
  .pc-grid input, .pc-grid td.pc-name input { text-align: left; border-color: #C9D4DD; background: var(--white); font-size: 16px; }
  .pc-grid td.pc-opt input { background: #F7F9FA; }
  .pc-results tr { grid-template-columns: 1fr 1fr; }
  .pc-results th[scope="row"] { grid-column: 1 / -1; font-size: 1.02rem; }
  .pc-results td { white-space: normal; }
  .pc-results .pc-bar-col { grid-column: 1 / -1; width: auto; }
  .pc-incomplete td { grid-column: 1 / -1; }
  .pc-incomplete td::before { content: none !important; }
}

.pc-next { margin: 18px 0 0; font-size: 0.95rem; max-width: none; }

/* When to Negate */
.wn-layout { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; align-items: start; }
.wn-layout > * { min-width: 0; }
@media (min-width: 1200px) { .wn-layout { grid-template-columns: minmax(0, 1fr) minmax(686px, 1.6fr); } }
.wn-form fieldset { border: 0; margin: 0 0 26px; padding: 0 0 22px; border-bottom: 1px solid var(--rule); min-width: 0; }
.wn-form fieldset:last-of-type { border-bottom: 0; }
.wn-form legend { font: 700 1.2rem var(--display); letter-spacing: -0.015em; color: var(--ink); margin-bottom: 14px; padding: 0; }
.wn-form .field { margin-bottom: 14px; }
.wn-form .field[hidden] { display: none; }
.wn-form .field input { font-family: var(--mono); }
.wn-form #wn-term { font-family: var(--sans); }
.wn-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 12px; align-items: end; }
.wn-hint { font-size: 0.875rem; color: var(--muted); margin: 0; max-width: none; }
.wn-hint[hidden] { display: none; }
.wn-toggle { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin: 0 0 14px; background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; }
.wn-toggle button { font: 600 0.9rem var(--sans); color: var(--muted); background: transparent; border: 0; border-radius: 7px; padding: 9px 14px; cursor: pointer; }
.wn-toggle button:hover { color: var(--ink); }
.wn-toggle button[aria-checked="true"] { background: var(--night); color: var(--volt); }

.wn-out { position: sticky; top: 96px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.wn-verdict { padding: 28px 30px; border-radius: 16px; background: linear-gradient(180deg, var(--night-3), var(--night)); border: 1px solid rgba(34, 229, 200, 0.4); box-shadow: 0 0 0 6px rgba(34, 229, 200, 0.06); color: var(--on-dark); }
.wn-verdict[data-tone="loss"] { border-color: rgba(255, 107, 90, 0.6); box-shadow: 0 0 0 6px rgba(255, 107, 90, 0.08); }
.wn-tag { display: inline-block; font: 600 0.875rem var(--mono); letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 10px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); color: var(--white); }
.wn-verdict[data-tone="loss"] .wn-tag { background: var(--loss); color: var(--night); }
.wn-verdict[data-tone="good"] .wn-tag { background: var(--volt); color: var(--night); }
.wn-verdict[data-tone="thin"] .wn-tag { background: #E8A93A; color: var(--night); }
.wn-tag::before { font-family: var(--mono); margin-right: 6px; }
.wn-verdict[data-tone="loss"] .wn-tag::before { content: "✕"; }
.wn-verdict[data-tone="good"] .wn-tag::before { content: "✓"; }
.wn-verdict[data-tone="thin"] .wn-tag::before { content: "!"; }
.wn-verdict[data-tone="neutral"] .wn-tag::before { content: "…"; }
.wn-headline { font: 800 clamp(1.5rem, 2.6vw, 2.1rem)/1.12 var(--display); letter-spacing: -0.025em; color: var(--white); margin: 14px 0 8px; }
.wn-why { color: #B9CADA; margin: 0; }
.wn-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin: 20px 0 0; border-top: 1px solid var(--line-dark); }
.wn-stats:empty { display: none; }
.wn-stats div { min-width: 0; padding: 14px 12px 0 0; }
.wn-stats dt { overflow-wrap: anywhere; font: 600 0.875rem/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-dark); }
.wn-stats dd { overflow-wrap: anywhere; margin: 6px 0 0; font: 700 1.3rem/1.1 var(--display); letter-spacing: -0.02em; color: var(--white); white-space: normal; }
.wn-next { margin: 18px 0 0; padding: 12px 14px; border-radius: 8px; background: rgba(255, 255, 255, 0.06); border-left: 3px solid var(--volt); color: var(--on-dark); font-size: 0.95rem; max-width: none; }
.wn-verdict[data-tone="loss"] .wn-next { border-left-color: var(--loss); }
.wn-next b { color: var(--white); }
.wn-next[hidden] { display: none; }

.wn-chart { margin: 0; padding: 20px 22px 14px; background: var(--white); border: 1px solid var(--rule); border-radius: 14px; }
.wn-chart[hidden] { display: none; }
.wn-chart figcaption b { display: block; font: 700 1.05rem var(--display); color: var(--ink); }
.wn-chart figcaption span { display: block; font-size: 0.875rem; color: var(--muted); margin-top: 2px; }
.wn-plot { position: relative; margin-top: 10px; max-width: 100%; overflow-x: auto; }
.wn-plot svg { display: block; width: 100%; min-width: 640px; height: auto; overflow: visible; touch-action: pan-x pan-y; }
.wn-plot text { font: 400 14px var(--mono); fill: var(--muted); }
.wn-plot .wn-axis-title { font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 14px; }
.wn-grid { stroke: #E6ECF0; stroke-width: 1; }
.wn-line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.wn-threshold { stroke: var(--loss); stroke-width: 1.5; stroke-dasharray: 5 4; }
.wn-plot .wn-threshold-label { fill: var(--loss-ink); font-weight: 600; }
.wn-decide { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 3; }
.wn-plot .wn-decide-label { fill: var(--ink); font-weight: 600; }
.wn-dot { stroke: var(--white); stroke-width: 2; fill: var(--ink); }
.wn-dot[data-tone="loss"] { fill: var(--loss-ink); }
.wn-dot[data-tone="good"] { fill: var(--teal-ink); }
.wn-plot .wn-dot-label { fill: var(--ink); font-weight: 600; font-size: 14px; }
.wn-hover[hidden] { display: none; } /* SVG ignores the hidden attribute by default */
.wn-hover line { stroke: var(--muted); stroke-width: 1; }
.wn-hover circle { fill: var(--white); stroke: var(--ink); stroke-width: 2; }
.wn-tip { position: absolute; transform: translate(-50%, calc(-100% - 12px)); pointer-events: none; background: var(--night); color: var(--on-dark); font: 400 0.875rem var(--mono); padding: 6px 9px; border-radius: 6px; white-space: nowrap; }
.wn-tip b { color: var(--white); margin-right: 4px; }
.wn-tip[hidden] { display: none; }

.wn-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--rule); border-radius: 12px; background: var(--white); }
.wn-table { width: 100%; border-collapse: collapse; }
.wn-table th, .wn-table td { padding: 11px 14px; border-bottom: 1px solid var(--rule); text-align: right; font: 400 0.95rem var(--mono); color: var(--ink); white-space: nowrap; }
.wn-table thead th { font: 600 0.875rem/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; background: var(--paper); vertical-align: bottom; }
.wn-table th:first-child { text-align: left; }
.wn-table tbody th { font-weight: 600; }
.wn-table tr:last-child > * { border-bottom: 0; }
.wn-table .is-on { background: #E3FBF6; color: var(--ink); font-weight: 600; }
.wn-table tr.is-yours > * { background: var(--night); color: var(--white); }
.wn-table tr.is-yours .is-on { background: var(--night-3); color: var(--volt); }
.wn-table tr.is-yours th span { font: 600 0.875rem var(--mono); letter-spacing: 0.06em; text-transform: uppercase; background: var(--volt); color: var(--night); padding: 2px 6px; border-radius: 3px; margin-left: 6px; vertical-align: 1px; }

@media (max-width: 1000px) {
  .wn-layout { grid-template-columns: 1fr; gap: 32px; }
  .wn-out { position: static; }
}
@media (max-width: 760px) {
  .tool-cards { grid-template-columns: 1fr; }
  .wn-verdict { padding: 22px 18px; }
  .wn-stats { grid-template-columns: 1fr 1fr; }
  .wn-chart { padding: 16px 12px 10px; }
  .wn-table th, .wn-table td { padding: 10px 8px; font-size: 0.875rem; }
  .wn-table thead th { font-size: 0.875rem; white-space: normal; }
}

/* Placement Bid Calculator */
.pb-setup { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
.pb-setup fieldset { border-bottom: 0; margin-bottom: 8px; }
.wn-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; align-items: end; }
.pb-label { font-weight: 600; color: var(--ink); margin: 4px 0 6px; }
.pb-data { padding-top: 26px; border-top: 1px solid var(--rule); }
.pb-h { font-size: 1.45rem; margin-bottom: 4px; }
.pb-data > .wn-hint { margin-bottom: 14px; }
.pb-grid { min-width: 720px; }
.pc-grid.pb-grid tbody th[scope="row"] { text-align: left; font: 600 0.95rem var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); background: none; padding: 8px 12px; border-bottom: 1px solid var(--rule); white-space: nowrap; vertical-align: middle; }
.pb-grid tr:last-child th { border-bottom: 0; }
.pb-example { margin-top: 12px; }

.pb-options { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px; }
.pb-options:empty { display: none; }
.pb-option { padding: 20px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line-dark); display: flex; flex-direction: column; }
.pb-option:first-child { border-color: rgba(34, 229, 200, 0.5); }
.pb-option-title { font: 700 1.1rem var(--display); color: var(--white) !important; margin: 0 0 4px; }
.pb-option-note { font-size: 0.9rem; color: var(--muted-dark); margin: 0 0 12px; }
.pb-option dl { margin: 0 0 14px; flex: 1; }
.pb-option dl div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px dashed rgba(255, 255, 255, 0.14); }
.pb-option dt { color: var(--on-dark); font-size: 0.92rem; }
.pb-option dd { margin: 0; font: 700 1.05rem var(--mono); color: var(--volt); }
.pb-option dl div:first-child dd { color: var(--white); }
.pb-na { font: 400 0.875rem var(--sans); color: var(--muted-dark); }
.pb-option-warn { font-size: 0.88rem; color: var(--on-dark) !important; margin: 0 0 14px; padding: 8px 10px; border-left: 3px solid var(--loss); background: rgba(255, 107, 90, 0.1); border-radius: 6px; }
.pb-copy { align-self: flex-start; background: transparent; color: var(--white); border-color: rgba(255, 255, 255, 0.35); }
.pb-copy:hover { background: var(--volt); border-color: var(--volt); color: var(--night); }
.pb-warnings { margin: 16px 0 0; padding: 0; list-style: none; }
.pb-warnings:empty { display: none; }
.pb-warnings li { font-size: 0.92rem; color: var(--on-dark); padding: 8px 0 8px 26px; position: relative; border-top: 1px dashed rgba(255, 255, 255, 0.12); }
.pb-warnings li::before { content: "!"; position: absolute; left: 0; top: 9px; width: 17px; height: 17px; border-radius: 50%; background: #E8A93A; color: var(--night); font: 700 0.875rem/17px var(--mono); text-align: center; }

.pb-chart { margin: 0 0 24px; }
.pb-bars { margin-top: 18px; display: grid; gap: 16px; }
.pb-bar-row { display: grid; grid-template-columns: 150px 1fr 70px; align-items: center; gap: 14px; }
.pb-bar-name { font-weight: 600; font-size: 0.95rem; }
.pb-bar-name small { display: block; font: 400 0.875rem var(--mono); color: var(--muted); }
.pb-bar-track { position: relative; height: 22px; background: #E6ECF0; border-radius: 0 4px 4px 0; margin-top: 16px; }
.pb-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0 4px 4px 0; background: var(--teal-ink); }
.pb-bar-fill[data-tone="loss"] { background: var(--loss); }
.pb-bar-worth { position: absolute; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; background: var(--ink); }
.pb-bar-worth b { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); font: 600 0.875rem var(--mono); color: var(--ink); white-space: nowrap; padding-bottom: 2px; }
.pb-bar-val { font: 600 0.9rem var(--mono); text-align: right; }
.pb-results { min-width: 1040px; }

@media (max-width: 1000px) {
  .pb-setup, .pb-options { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .wn-pair { grid-template-columns: 1fr; }
  .pb-grid { min-width: 0; }
  .pc-grid.pb-grid tbody th[scope="row"] { grid-column: 1 / -1; padding: 0; border: 0; font-size: 1.02rem; }
  .pb-grid tr { align-items: end; }
  .pb-bar-row { grid-template-columns: 1fr 64px; }
  .pb-bar-name { grid-column: 1 / -1; }
  .pb-results { min-width: 0; }
}

/* Harvest Readiness */
.hr .wn-main { padding-top: 56px; }
.hr-answer { max-width: 880px; margin: 0 0 44px; padding: 16px 20px; background: var(--paper); border: 1px solid var(--rule); border-left: 3px solid var(--teal-ink); border-radius: 10px; color: var(--ink); }
.hr-adv { margin: 4px 0 0; }
.hr-adv .field { margin: 12px 0 0; }
.hr-goal { stroke: var(--teal-ink); stroke-width: 1.5; stroke-dasharray: 5 4; }
.wn-plot .hr-goal-label { fill: var(--teal-ink); font-weight: 600; }
.hr-paste { margin-top: 0; background: var(--white); }
.hr-results { margin-top: 20px; }
.hr-table th, .hr-table td { text-align: left; }
.hr-table tbody th { font-family: var(--sans); white-space: normal; min-width: 180px; }
.hr-table .pc-read { white-space: nowrap; }
.hr-err { color: var(--muted); white-space: normal !important; font-size: 0.875rem !important; }
.hr-scroll { overflow-x: auto; border: 1px solid var(--rule); border-radius: 12px; background: var(--white); }
.hr-examples td:last-child { text-align: left; }
.hr-api > * { max-width: 880px; }
.hr-code code { font: inherit; }
.hr-api .section-head { margin-bottom: 28px; }
.hr-code { margin: 0 0 18px; padding: 16px 18px; background: var(--night); color: var(--on-dark); border-radius: 10px; overflow-x: auto; font: 400 0.875rem/1.6 var(--mono); }
.hr-api p code, .api-note code { font: 400 0.88em var(--mono); background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; padding: 1px 5px; overflow-wrap: anywhere; }
.api-note { margin-top: 28px; font-size: 0.95rem; color: var(--muted); }

@media (max-width: 760px) {
  .hr .wn-main { padding-top: 40px; }
  .hr-answer { margin-bottom: 32px; }
  .hr-results { border: 0; background: none; overflow: visible; }
  .hr-table thead { display: none; }
  .hr-table, .hr-table tbody { display: block; }
  .hr-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 14px 16px; margin-bottom: 10px; background: var(--white); border: 1px solid var(--rule); border-radius: 12px; }
  .hr-table tr > * { border: 0 !important; padding: 0 !important; text-align: left; white-space: normal; }
  .hr-table tbody th { grid-column: 1 / -1; min-width: 0; font-size: 1rem; }
  .hr-table td::before { content: attr(data-label); display: block; font: 600 0.875rem/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
  .hr-table td.hr-err { grid-column: 1 / -1; }
  .hr-examples th, .hr-examples td { white-space: normal; }
}

/* Search Term Report Checker */
.str [hidden] { display: none !important; }
.str .wrap { min-width: 0; }
.str h2 { font-size: clamp(1.8rem, 3.5vw, 2.65rem); }
.str h3 { font-size: 1.35rem; }
.str p { max-width: 75ch; }
.str-intro { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 0 0 24px; }
.str-intro h2, .str-intro h3 { margin-bottom: 8px; }
.str-intro p { margin-bottom: 0; color: var(--muted); }
.str .btn { white-space: normal; text-align: center; }
.str-upload { background: var(--paper); border: 2px dashed #91A7B5; border-radius: 16px; padding: 32px; transition: border-color .15s, background .15s; }
.str-upload label { display: block; cursor: pointer; margin-bottom: 20px; }
.str-upload strong { display: block; font-size: 1.3rem; margin-bottom: 8px; }
.str-upload span { display: block; color: var(--muted); }
.str input[type=file] { max-width: 100%; font: 400 .95rem var(--sans); }
.str input[type=file]::file-selector-button { padding: 10px 16px; background: var(--night); color: var(--white); border: 0; border-radius: 6px; margin-right: 12px; cursor: pointer; font: 600 .95rem var(--sans); }
.str-drag { background: #E3FBF6; border-color: var(--teal-ink); }
.str-status { min-height: 1.5em; margin: 16px 0; font-size: .93rem; color: var(--muted); }
.str-error, .str-issues { padding: 16px 20px; border: 1px solid #F4B4A9; background: #FFF4F2; border-radius: 10px; color: var(--loss-ink); }
.str-issues { margin-top: 20px; }
.str-panel { padding: 32px; margin-top: 32px; border: 1px solid var(--rule); border-radius: 16px; background: var(--white); scroll-margin-top: 100px; }
.str-controls, .str-mapping { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; margin: 22px 0; }
.str-mapping { padding: 22px; border-radius: 10px; background: var(--paper); }
.str .field { min-width: 0; }
.str .field label { display: block; font-size: .91rem; font-weight: 600; margin: 0 0 7px; }
.str .hint { display: block; color: var(--muted); font-weight: 400; font-size: 0.875rem; }
.str .field input, .str select, .str-context-table input { width: 100%; min-width: 0; font: 400 .95rem var(--sans); color: var(--ink); background: var(--white); padding: 11px 12px; border: 1px solid #91A7B5; border-radius: 7px; }
.str input:focus-visible, .str select:focus-visible, .str summary:focus-visible, .str-scroll:focus-visible { outline: 3px solid var(--volt); outline-offset: 3px; }
.str-check { display: flex; align-items: flex-start; gap: 9px; font-size: .95rem; line-height: 1.45; margin: 12px 0; }
.str-check input { flex: none; accent-color: var(--teal-ink); width: 18px; height: 18px; margin-top: 3px; }
.str-note { font-size: .88rem; color: var(--muted); margin: 16px 0; }
.str-help { margin: 20px 0; border-top: 1px solid var(--rule); padding: 18px 0 0; }
.str-help summary { cursor: pointer; font-weight: 600; color: var(--teal-ink); }
.str-help p { font-size: .95rem; margin-top: 16px; }
.str-help li { font-size: .93rem; margin: 10px 0; }
.str-file-label { display: block; margin: 20px 0 10px; font-weight: 600; }
.str-scroll { overflow-x: auto; max-width: 100%; border: 1px solid var(--rule); border-radius: 12px; background: var(--white); margin: 18px 0; }
.str table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.str th { background: var(--paper); padding: 14px; border-bottom: 1px solid var(--rule); text-align: left; font: 600 0.875rem/1.5 var(--mono); text-transform: uppercase; letter-spacing: .035em; }
.str td { vertical-align: top; padding: 16px 14px; border-bottom: 1px solid var(--rule); }
.str tr:last-child td { border-bottom: 0; }
.str td strong, .str td span, .str td small { display: block; }
.str td span, .str td small { margin-top: 5px; }
.str td small { font-size: .875rem; color: var(--muted); line-height: 1.5; }
.str td strong, .str td span, .str td small { overflow-wrap: anywhere; }
.str-context-table { min-width: 650px; }
.str-context-table td:first-child { width: 44%; }
.str-review-table { min-width: 1150px; table-layout: fixed; }
.str-review-table th:nth-child(1) { width: 21%; }
.str-review-table th:nth-child(2) { width: 8%; }
.str-review-table th:nth-child(3) { width: 8%; }
.str-review-table th:nth-child(4) { width: 6%; }
.str-review-table th:nth-child(5) { width: 29%; }
.str-review-table th:nth-child(6) { width: 16%; }
.str-review-table th:nth-child(7) { width: 12%; }
.str-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin: 28px 0; }
.str-metrics > div { padding: 24px 20px; background: var(--night); color: var(--white); border-radius: 12px; }
.str-metrics span { display: block; font-size: .9rem; color: var(--muted-dark); }
.str-metrics strong { display: block; font: 700 clamp(1.5rem,2.4vw,2rem)/1.3 var(--sans); color: var(--volt); margin: 12px 0; overflow-wrap: anywhere; }
.str-metrics p { margin: 0; color: var(--muted-dark); font-size: 0.875rem; }
.str-findings { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.str-findings article { padding: 24px; background: var(--white); border: 1px solid var(--rule); border-radius: 12px; }
.str-findings article > span { display: block; font: 600 0.875rem var(--mono); color: var(--teal-ink); margin-bottom: 14px; }
.str-findings h3 { font-size: 1.25rem; }
.str-findings p { color: var(--muted); font-size: .92rem; margin-bottom: 0; }
.str-cta { display: flex; justify-content: space-between; align-items: center; gap: 28px; padding: 28px; margin: 30px 0 44px; background: #E3FBF6; border-radius: 12px; }
.str-cta h3 { margin-bottom: 8px; }
.str-cta p { margin: 0; font-size: .94rem; }
.str-export { display: flex; flex-wrap: wrap; gap: 10px; }
.str-tag { font-size: 0.875rem; font-weight: 600; color: var(--teal-ink); }
.str-tag--zero_order_review, .str-tag--efficiency_review { color: var(--loss-ink); }
.str-tag--protected { color: var(--muted); }
.str-pagination { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.str-pagination p { color: var(--muted); font-size: .9rem; margin: 0; }
.str-pagination > div { display: flex; gap: 10px; }
.str button:disabled { cursor: default; opacity: .45; }
.str-faq { max-width: 850px; }
.str-faq details { border-top: 1px solid var(--rule); padding: 18px 0; }
.str-faq summary { cursor: pointer; font-weight: 600; }
.str-faq p { color: var(--muted); margin: 16px 0 0; }
@media (max-width: 900px) {
  .str-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .str-controls, .str-mapping { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .str-intro, .str-cta { align-items: flex-start; flex-direction: column; }
  .str-findings { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .str-panel, .str-upload { padding: 22px 16px; }
  .str-mapping { padding: 16px; }
  .str-controls, .str-mapping { grid-template-columns: 1fr; }
  .str-metrics { gap: 10px; }
  .str-metrics > div { padding: 18px 14px; }
  .str-metrics strong { font-size: 1.55rem; }
  .str-cta { padding: 22px 18px; }
  .str-export { width: 100%; }
  .str-export .btn { width: 100%; }
  .str-pagination { align-items: flex-start; flex-direction: column; }
}

/* Private report comparisons */
.compare-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);gap:40px;align-items:start}
.import-guide { margin: 18px 0; padding: 14px 16px; background: var(--paper); border-radius: 8px; color: var(--muted); font-size: 0.875rem; line-height: 1.6; }
.import-guide p { margin: 0 0 8px; }
.import-guide ul { margin: 0; padding-left: 20px; }
.import-guide li + li { margin-top: 8px; }
.import-guide strong { color: var(--ink); }
.chart-scroll-hint { font-size: 0.875rem; color: var(--muted); margin: 8px 0 0; }
.compare-form{min-width:0}.compare-form fieldset{border:1px solid var(--rule);border-radius:14px;padding:24px;margin:0 0 24px}.compare-form legend{font-weight:700;padding:0 8px}.compare-pair,.compare-mapping{display:grid;grid-template-columns:1fr 1fr;gap:16px}.compare-form .field{margin-bottom:16px}.compare-form input:not([type=checkbox]),.compare-form select{width:100%;min-width:0;padding:12px;border:1px solid #9EAFBD;border-radius:7px;background:var(--white);color:var(--ink);font:inherit}.compare-form input:focus,.compare-form select:focus{outline:3px solid var(--volt);outline-offset:2px}.compare-form input[type=file]{font-size:.88rem}.compare-form small,.compare-hint{display:block;color:var(--muted);font-size:0.875rem;margin-top:6px}.compare-check{display:flex;gap:10px;font-size:.92rem;align-items:flex-start;margin:14px 0}.compare-check input{flex:none;width:18px;height:18px;margin-top:4px}.compare-guide{background:var(--paper);border:1px solid var(--rule);border-radius:14px;padding:28px}.compare-guide li{margin-bottom:12px}.compare-import{border-top:1px solid var(--rule);padding-top:16px}.compare-import summary{cursor:pointer;font-weight:600;color:var(--teal-ink)}.compare-import p{font-size:.88rem;overflow-wrap:anywhere}.compare-mapping label{font-size:.9rem}.compare-message{font-weight:600;overflow-wrap:anywhere}.compare-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:24px 0}.compare-metric{padding:22px;background:var(--night);color:var(--on-dark);border-radius:12px;overflow-wrap:anywhere}.compare-metric strong{display:block;font-size:1.8rem;color:var(--white);margin:6px 0}.compare-metric small{color:var(--muted-dark)}.compare-table-wrap{overflow:auto;margin:20px 0;border:1px solid var(--rule);border-radius:12px}.compare-table{width:100%;border-collapse:collapse;min-width:540px}.compare-table th,.compare-table td{padding:15px;text-align:left;border-bottom:1px solid var(--rule)}.compare-table th{background:var(--paper)}.compare-findings{display:grid;grid-template-columns:1fr 1fr;gap:16px}.compare-finding{padding:22px;border:1px solid var(--rule);border-radius:12px;background:var(--white)}.compare-finding h3{font-size:1.2rem}.compare-finding small{text-transform:uppercase;color:var(--teal-ink);font-weight:600}.compare-method{max-width:900px}.compare-output[hidden]{display:none}
@media(max-width:760px){.compare-layout{grid-template-columns:1fr;gap:24px}.compare-metrics,.compare-findings{grid-template-columns:1fr 1fr}.compare-form fieldset{padding:18px}.compare-mapping{grid-template-columns:1fr}.compare-metric{padding:16px}.compare-metric strong{font-size:1.35rem}}
@media(max-width:420px){.compare-pair,.compare-findings{grid-template-columns:1fr}.compare-form .pc-actions>*{width:100%}}

/* Result ending: what you found, what you can do now, what this can't tell you */
.result-ending { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 28px; margin: 30px 0 24px; background: #E3FBF6; border-radius: 12px; }
.result-ending .kicker { margin-bottom: 8px; }
.result-ending p { margin: 0 0 10px; font-size: .94rem; }
.result-ending .ending-found { font-size: 1.08rem; font-weight: 600; color: var(--ink, inherit); }
.result-ending ul { margin: 0 0 12px; padding-left: 18px; font-size: .94rem; }
.result-ending li + li { margin-top: 6px; }
.result-ending .btn { margin: 4px 0 8px; }
.result-ending--healthy, .result-ending--early { background: #F3F6F5; }
.ending-ask .btn-row { margin-top: 16px; gap: 12px 20px; }
.ending-ask .text-link { display: inline-block; min-height: 44px; max-width: 100%; padding: 10px 0; }
.ending-plan { max-width: 320px; }
.result-ending .ending-ask { grid-column: 1 / -1; padding-top: 20px; border-top: 1px solid rgba(10, 122, 110, .18); }
.team-summary { margin: 0 0 44px; }
.team-options { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 10px 0; }
.team-text { width: 100%; box-sizing: border-box; font: 400 1rem/1.6 var(--sans); color: var(--ink); background: var(--white); padding: 14px; border: 1px solid #cfd8d5; border-radius: 8px; resize: vertical; margin-bottom: 12px; }
.print-sheet { display: none; }
@media print {
  body.print-summary > *:not(.print-sheet) { display: none !important; }
  body.print-summary .print-sheet { display: block; }
  .print-sheet pre { white-space: pre-wrap; font: 11pt/1.5 Georgia, serif; }
}
@media (max-width: 900px) { .result-ending { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .result-ending { padding: 22px 18px; } }

/* Embeddable tools (/embed/<tool>/) and the "Embed this tool" box */
.embed { background: #fff; }
.embed main { padding: 18px 0 0; }
.embed .embed-title { font-size: 1.35rem; margin: 0 16px 6px; padding: 0 0 0 0; }
.embed .section { padding: 18px 0; }
.embed .wrap { padding-left: 16px; padding-right: 16px; }
.embed .pc-summary-cta, .embed [data-catalog], .embed .api-note { display: none !important; }
.embed-credit { margin: 0; padding: 12px 16px 16px; font-size: 0.875rem; color: var(--muted); border-top: 1px solid #e3e8e6; }
.be-embed { padding: 8px 16px 0; display: grid; gap: 18px; }
.be-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0 16px; }
.be-out .wn-stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.be-formula { margin: 0; }
.embed-offer { padding: 72px 0; }
.embed-offer .section-head { margin-bottom: 20px; }
.embed-details > summary { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 18px; border: 1px solid var(--teal-ink); border-radius: 8px; color: var(--teal-ink); font-weight: 650; cursor: pointer; list-style: none; }
.embed-details > summary::-webkit-details-marker { display: none; }
.embed-details > summary::after { content: "+"; font: 600 1.1rem var(--mono); }
.embed-details[open] > summary { margin-bottom: 24px; }
.embed-details[open] > summary::after { content: "−"; }
.embed-details > summary:focus-visible { outline: 3px solid var(--volt); outline-offset: 3px; }
.embed-snippets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.embed-snippets label { display: block; font-weight: 600; margin-bottom: 8px; }
.embed-snippets textarea { width: 100%; box-sizing: border-box; font: 400 0.875rem/1.6 var(--mono); color: var(--ink); background: var(--white); padding: 12px; border: 1px solid #cfd8d5; border-radius: 8px; resize: vertical; margin-bottom: 12px; }
@media (max-width: 760px) { .embed-snippets { grid-template-columns: 1fr; } .embed-offer { padding: 56px 0; } }

/* ---------- When to Negate: animated explainer ("When should you stop paying for a search term?") ----------
   A dark card above the tool. Click squares fill in while a curve shows the chance that a term that pays for
   its clicks would look this bad; it crosses a "proof line", then sliders take over. Labels are HTML (not SVG
   text) so they stay at least 14px on phones. */
.wnx-section { padding: 56px 0 56px; }
.wnx-section[hidden] { display: none; }
.wnx { border-radius: 18px; padding: 44px 44px 40px; position: relative; overflow: hidden; }
.wnx-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); grid-template-areas: "head plot" "copy plot"; grid-template-rows: auto 1fr; column-gap: 48px; align-items: start; }
.wnx-head { grid-area: head; }
.wnx-plot { grid-area: plot; margin: 0; min-width: 0; }
.wnx-copy { grid-area: copy; min-width: 0; }
.wnx .wnx-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); max-width: 14ch; }
.wnx .wnx-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wnx .wnx-caption { min-height: 6.2em; margin: 0 0 18px; font: 700 clamp(1.2rem, 2vw, 1.55rem)/1.25 var(--display); letter-spacing: -0.015em; color: var(--white); }
.wnx .wnx-caption.swap { animation: wnx-swap 0.45s ease-out both; }
.wnx .wnx-caption mark { background: none; color: var(--volt); }
.wnx .wnx-caption mark.loss { color: var(--loss); }
.wnx .wnx-btn { min-height: 44px; }
.wnx.is-live .wnx-caption { min-height: 0; }

.wnx-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wnx .wnx-stat { padding: 10px 14px; border: 1px solid var(--line-dark); border-radius: 10px; background: rgba(255, 255, 255, 0.04); }
.wnx-stat span { display: block; font: 600 0.875rem/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-dark); }
.wnx-stat b { display: block; font: 800 1.7rem/1.15 var(--display); letter-spacing: -0.02em; color: var(--white); font-variant-numeric: tabular-nums; }

.wnx-chart { margin-top: 18px; padding: 0 0 4px 52px; }
.wnx-chart-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 0 0 12px -52px; }
.wnx .wnx-title { margin: 0; max-width: 28ch; font-size: 0.875rem; line-height: 1.4; color: var(--muted-dark); }
.wnx-status { flex: none; min-height: 34px; padding: 8px 14px; border-radius: 999px; font: 700 0.95rem/1 var(--sans); white-space: nowrap; border: 1.5px solid transparent; }
.wnx-status[data-tone="none"] { visibility: hidden; }
.wnx-status[data-tone="early"] { border-color: rgba(232, 240, 246, 0.45); color: var(--white); }
.wnx-status[data-tone="watch"] { border-color: var(--volt); color: var(--volt); }
.wnx-status[data-tone="negate"] { background: var(--loss); border-color: var(--loss); color: var(--night); animation: wnx-pop 0.5s both; }
.wnx-area { position: relative; aspect-ratio: 16 / 9; border-left: 1px solid rgba(232, 240, 246, 0.3); border-bottom: 1px solid rgba(232, 240, 246, 0.3); }
.wnx-area svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wnx-curve { fill: none; stroke: var(--volt); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.wnx-thr { stroke: rgba(255, 107, 90, 0.85); stroke-width: 1.5; stroke-dasharray: 5 6; vector-effect: non-scaling-stroke; }
.wnx-zone { fill: rgba(255, 107, 90, 0.12); }
.wnx-y { position: absolute; left: -52px; width: 44px; text-align: right; font: 400 0.875rem/1 var(--mono); color: var(--muted-dark); transform: translateY(-50%); }
.wnx-xs { position: absolute; left: 0; right: 0; top: 100%; height: 28px; }
.wnx-xs span { position: absolute; top: 8px; transform: translateX(-50%); font: 400 0.875rem/1 var(--mono); color: var(--muted-dark); }
.wnx-xs span:first-child { transform: none; }
.wnx-xs span:last-child { transform: translateX(-100%); }
.wnx-thr-label { position: absolute; left: 8px; transform: translateY(-125%); font: 600 0.875rem/1 var(--mono); color: var(--loss); }
.wnx-dot { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--volt); box-shadow: 0 0 0 5px rgba(34, 229, 200, 0.25); transition: left 0.12s linear, top 0.12s linear; z-index: 2; }
.wnx-dot[data-tone="none"] { opacity: 0; }
.wnx-dot[data-tone="negate"] { background: var(--loss); box-shadow: 0 0 0 5px rgba(255, 107, 90, 0.3); }
.wnx-dot-label { position: absolute; transform: translate(14px, -135%); font: 800 1.4rem/1 var(--display); letter-spacing: -0.02em; color: var(--white); transition: left 0.12s linear, top 0.12s linear; white-space: nowrap; z-index: 2; }
.wnx-dot-label.flip { transform: translate(calc(-100% - 14px), -135%); }
.wnx .wnx-axis { margin: 36px 0 0; max-width: none; text-align: center; font-size: 0.875rem; color: var(--muted-dark); }

.wnx-clicks { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 4px; margin-top: 20px; }
.wnx-clicks i { aspect-ratio: 1; border-radius: 4px; border: 1.5px solid rgba(232, 240, 246, 0.2); }
.wnx-clicks i.on { background: #4B6680; border-color: #4B6680; animation: wnx-tick 0.25s ease-out; }
.wnx-clicks.bad i.on { background: var(--loss); border-color: var(--loss); }
.wnx .wnx-note { margin: 12px 0 0; max-width: none; font-size: 0.875rem; line-height: 1.5; color: var(--muted-dark); }

.wnx .wnx-controls { margin: 0 0 16px; padding: 20px 22px 22px; border: 1px solid var(--line-dark); border-radius: 14px; background: rgba(255, 255, 255, 0.04); animation: wnx-swap 0.5s ease-out both; }
.wnx .wnx-controls[hidden] { display: none; }
.wnx .wnx-controls label { display: flex; justify-content: space-between; gap: 12px; font: 600 1rem var(--sans); color: var(--white); }
.wnx .wnx-controls output { font: 600 1rem var(--mono); color: var(--volt); }
.wnx .wnx-controls input[type="range"] { display: block; width: 100%; min-height: 44px; margin: 0 0 4px; accent-color: var(--volt); }
.wnx-conf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 4px; }
.wnx-conf span { font: 600 1rem var(--sans); color: var(--white); margin-right: 4px; }
.wnx-conf button { min-height: 44px; min-width: 56px; padding: 8px 14px; border-radius: 8px; border: 1.5px solid rgba(232, 240, 246, 0.35); background: transparent; color: var(--white); font: 600 0.95rem var(--sans); cursor: pointer; }
.wnx-conf button[aria-pressed="true"] { background: var(--volt); border-color: var(--volt); color: var(--night); }
.wnx .wnx-readout { margin: 14px 0 16px; max-width: none; font: 600 1.05rem/1.45 var(--sans); color: var(--white); }
.wnx .wnx-readout b { color: var(--volt); }
.wnx .wnx-readout[data-tone="loss"] { color: var(--loss); }
.wnx .wnx-controls .btn { width: 100%; justify-content: center; }

@keyframes wnx-swap { from { opacity: 0; transform: translateY(8px); } }
@keyframes wnx-pop { 0% { opacity: 0; transform: scale(0.4); } 60% { opacity: 1; transform: scale(1.18); } 100% { opacity: 1; transform: scale(1); } }
@keyframes wnx-tick { from { transform: scale(0.4); opacity: 0.2; } }
@media (prefers-reduced-motion: reduce) {
  .wnx *, .wnx *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important; }
}
@media (max-width: 1000px) {
  .wnx { padding: 32px 22px 28px; }
  .wnx-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "plot" "copy"; grid-template-rows: none; }
  .wnx-plot { margin-bottom: 26px; }
  .wnx .wnx-head h2 { max-width: none; }
  .wnx .wnx-caption { min-height: 5em; }
}
@media (max-width: 520px) {
  .wnx-section { padding: 36px 0; }
  .wnx { padding: 26px 16px 24px; border-radius: 14px; }
  .wnx-chart { padding-left: 46px; }
  .wnx-chart-top { margin-left: -46px; flex-wrap: wrap; }
  .wnx-y { left: -46px; width: 40px; }
  .wnx-stat b { font-size: 1.35rem; }
  .wnx-area { aspect-ratio: 4 / 3; }
  .wnx-clicks { gap: 3px; }
  .wnx .wnx-controls { padding: 16px; }
}

/* Harvest Readiness explainer: reuses the .wnx card; these are the parts that differ */
.hrx .wnx-chart { padding-left: 0; }
.hrx .wnx-chart-top { margin-left: 0; }
.hrx .wnx-curve { stroke-width: 3; }
.hrx-gain { fill: rgba(34, 229, 200, 0.24); }
.hrx-loss { fill: rgba(255, 107, 90, 0.2); }
.hrx-prior { fill: none; stroke: rgba(232, 240, 246, 0.45); stroke-width: 1.5; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; transition: opacity 0.3s; }
.hrx-be { stroke: rgba(232, 240, 246, 0.75); stroke-width: 1.5; stroke-dasharray: 5 6; vector-effect: non-scaling-stroke; }
.hrx .wnx-xs span.be { transform: translateX(-50%); color: var(--white); font-weight: 600; white-space: nowrap; }
.hrx .wnx-axis { margin-top: 36px; }
.hrx .wnx-status[data-tone="go"] { background: var(--volt); border-color: var(--volt); color: var(--night); animation: wnx-pop 0.5s both; }
.hrx .wnx-status[data-tone="stop"] { background: var(--loss); border-color: var(--loss); color: var(--night); animation: wnx-pop 0.5s both; }
.hrx-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; font: 400 0.875rem/1.3 var(--sans); color: var(--muted-dark); }
.hrx-key span::before { content: ""; display: inline-block; width: 18px; height: 0; margin-right: 8px; vertical-align: middle; border-top: 3px solid var(--volt); }
.hrx-key .hrx-key-prior::before { border-top: 2px dashed rgba(232, 240, 246, 0.6); }
.hrx-key .hrx-key-gain::before, .hrx-key .hrx-key-loss::before { width: 12px; height: 12px; border: 0; border-radius: 3px; vertical-align: -1px; background: rgba(34, 229, 200, 0.5); }
.hrx-key .hrx-key-loss::before { background: rgba(255, 107, 90, 0.5); }
.hrx-meter { margin-top: 18px; }
.hrx-meter-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 8px; font: 600 1rem var(--sans); color: var(--white); }
.hrx-meter-top b { font: 800 1.7rem/1 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.hrx-track { position: relative; height: 14px; margin-bottom: 30px; border-radius: 999px; background: rgba(232, 240, 246, 0.14); }
.hrx-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px; background: #4B6680; transition: width 0.18s linear, background 0.3s; }
.hrx-track[data-tone="go"] .hrx-fill { background: var(--volt); }
.hrx-track[data-tone="stop"] .hrx-fill { background: var(--loss); }
.hrx-line { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; background: var(--white); }
.hrx-line-label { position: absolute; top: calc(100% + 8px); transform: translateX(-100%); white-space: nowrap; font: 600 0.875rem/1 var(--mono); color: var(--white); }
.hrx.is-live .hrx-cells { display: none; }
.hrx .wnx-readout a { color: var(--volt); text-decoration: underline; text-underline-offset: 3px; }
.hrx .wnx-clicks i.ord { background: var(--volt); border-color: var(--volt); }
@media (max-width: 520px) {
  .hrx .wnx-chart { padding-left: 0; }
  .hrx .wnx-chart-top { margin-left: 0; }
  .hrx .wnx-title { max-width: none; }
}
.hrx-meter-top b { color: var(--white); }
.hrx-meter-top b[data-tone="go"] { color: var(--volt); }
.hrx-meter-top b[data-tone="stop"] { color: var(--loss); }

/* Blended ACoS lesson explainer: reuses the .wnx card; these are the parts that differ */
.bax-rows { display: grid; gap: 26px; }
.bax-row { display: grid; gap: 10px; transition: opacity 0.5s ease-out, transform 0.5s ease-out; }
.bax-row.pending { opacity: 0; transform: translateY(12px); }
.bax-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bax .bax-name { margin: 0; font: 700 1.25rem/1.2 var(--display); letter-spacing: -0.01em; color: var(--white); }
.bax .bax-name small { display: block; margin-top: 2px; font: 400 0.875rem/1.3 var(--sans); letter-spacing: 0; color: var(--muted-dark); }
.bax .wnx-status[data-tone="go"] { background: transparent; border-color: var(--volt); color: var(--volt); animation: wnx-pop 0.5s both; }
.bax .wnx-status[data-tone="stop"] { background: var(--loss); border-color: var(--loss); color: var(--night); animation: wnx-pop 0.5s both; }
.bax-track { position: relative; height: 16px; border-radius: 999px; background: rgba(232, 240, 246, 0.14); }
.bax-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px; background: var(--volt); transition: width 1.1s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.3s; }
.bax-row[data-tone="over"] .bax-fill { background: var(--loss); }
.bax-line { position: absolute; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; background: var(--white); transition: left 0.3s; }
.bax .bax-bottom { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; margin: 0; max-width: none; font: 400 0.95rem/1.35 var(--sans); color: var(--muted-dark); }
.bax .bax-result { font: 800 1.4rem/1 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--white); visibility: hidden; }
.bax.show-results .bax-result, .bax .bax-row[data-row="account"] .bax-result { visibility: visible; }
.bax .bax-result[data-tone="gain"] { color: var(--volt); }
.bax .bax-result[data-tone="loss"] { color: var(--loss); }
.bax .wnx-readout[data-tone] { color: var(--white); }
.bax .wnx-readout[data-tone="loss"] b { color: var(--loss); }

/* Reserve each explainer's space while its script starts (the CLS fix): about 95% of the measured height. */
html.js .wnx-section[hidden] { display: block; visibility: hidden; }
#how-it-decides { min-height: 820px; }
#how-it-works { min-height: 920px; }
#blended-view { min-height: 610px; }
@media (max-width: 1000px) {
  #how-it-decides { min-height: 1130px; }
  #how-it-works { min-height: 1260px; }
  #blended-view { min-height: 850px; }
}
@media (max-width: 520px) {
  #how-it-decides { min-height: 950px; }
  #how-it-works { min-height: 1140px; }
  #blended-view { min-height: 940px; }
}

/* Placement explainer: reserve space like the others */
#placement-view { min-height: 600px; }
@media (max-width: 1000px) { #placement-view { min-height: 840px; } }
@media (max-width: 520px) { #placement-view { min-height: 910px; } }
.bax .wnx-readout .bad { color: var(--loss); font-weight: 700; }

/* Lesson 6 ACoS change explainer: factor bars grow left or right from a zero tick in the middle */
.acx .acx-track .bax-fill { transition: width 1.1s cubic-bezier(0.2, 0.8, 0.2, 1), left 1.1s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.3s; }
.acx .acx-zero { left: 50%; }
.acx.is-live .bax-fill { transition-duration: 0.25s; }

/* Lesson 7 report gap explainer: one purchase placed in two months */
.rgx-months { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rgx .rgx-month { margin: 0; max-width: none; padding: 10px 14px; border: 1px solid var(--line-dark); border-radius: 10px; background: rgba(255, 255, 255, 0.04); }
.rgx-month span { display: block; font: 600 0.875rem/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-dark); }
.rgx-month b { display: block; min-height: 1.35em; font: 700 1rem/1.35 var(--sans); color: var(--volt); }
.rgx.is-live .bax-fill { transition-duration: 0.25s; }

/* Reserve space for the lesson 6 and 7 explainers (about 95% of the measured height) */
#acos-change-view { min-height: 745px; }
#report-gap-view { min-height: 755px; }
@media (max-width: 1000px) { #acos-change-view { min-height: 1110px; } #report-gap-view { min-height: 980px; } }
@media (max-width: 520px) { #acos-change-view { min-height: 1305px; } #report-gap-view { min-height: 1170px; } }


/* Placement paste review; embeds retain typed inputs only. */
html[data-embed] .placement-import { display:none; }
.placement-import { margin:20px 0; }
.placement-import-panel { margin-top:16px; padding:24px; border:1px solid var(--muted); border-radius:12px; background:var(--paper); overflow-wrap:anywhere; }
.placement-import-panel label { display:block; font-size:16px; margin-bottom:8px; }
.placement-import-panel textarea { width:100%; max-width:100%; min-height:150px; font:16px/1.5 var(--font-body, sans-serif); padding:12px; color:var(--ink); background:white; border:1px solid var(--muted); border-radius:6px; }
.placement-import-panel select { max-width:100%; }
.placement-import-panel [data-import-review] { margin:16px 0; }
.placement-import-panel [data-import-error] { color:var(--ink); }
@media(max-width:600px) { .placement-import-panel { padding:16px; } }

/* Price Change Calculator only. Tables stay inside their own scroll regions. */
.price-change-layout { display:grid; grid-template-columns:minmax(0, .85fr) minmax(0,1.15fr); gap:48px; align-items:start; }
.price-change-inputs, .price-change-results { min-width:0; }
.price-change-inputs .field { margin-bottom:18px; }
.price-change-inputs input, .price-change-inputs select { width:100%; min-width:0; max-width:100%; }
.price-change-inputs details { margin:24px 0; }
.price-change-inputs details[open] summary { margin-bottom:18px; }
.price-change-inputs label { font-size:16px; color:var(--ink); }
.price-change-inputs input { font-size:17px; }
.price-change-table-wrap { max-width:100%; overflow-x:auto; border:1px solid var(--rule); border-radius:12px; background:white; }
.price-change-table { width:100%; border-collapse:collapse; min-width:440px; font-size:16px; color:var(--ink); }
.price-change-table caption { text-align:left; font-size:14px; padding:16px; color:var(--muted); }
.price-change-table th, .price-change-table td { padding:14px 16px; border-top:1px solid var(--rule); text-align:right; font-variant-numeric:tabular-nums; }
.price-change-table th:first-child { text-align:left; width:48%; }
.price-change-table thead { background:var(--paper); }
.price-change-table td { white-space:nowrap; }
.price-change-volume { margin:24px 0; padding:24px; border-radius:12px; background:var(--teal-wash, #e3fbf6); color:var(--ink); }
.price-change-volume [data-price-volume] { font:800 clamp(22px,2.2vw,30px)/1.25 var(--display); overflow-wrap:anywhere; }
.price-change-results [data-price-warnings] { padding-left:22px; }
.price-change-results [data-price-warnings] li { margin:12px 0; }
.price-change-results [data-price-scenarios] { margin-top:28px; }
@media(max-width:960px) { .price-change-layout { grid-template-columns:minmax(0,1fr); gap:32px; } }
@media(max-width:600px) {
  .price-change-table { min-width:340px; }
  .price-change-table th, .price-change-table td { padding:12px 8px; }
  .price-change-table th:first-child { width:40%; }
}

/* "In one line": the takeaway a visitor can repeat or paste. */
.result-ending .ending-line { grid-column: 1 / -1; padding-bottom: 18px; border-bottom: 1px solid rgba(10, 122, 110, .18); }
.result-ending .ending-line-text { font-size: 1.2rem; font-weight: 700; line-height: 1.35; color: var(--ink, inherit); margin-bottom: 6px; }
.result-ending .ending-line .pc-link { font-size: .94rem; }
.result-ending .ending-line-status { font-size: .94rem; }

/* When to Negate practice round */
.wn-practice[hidden], .wn-practice [hidden] { display: none !important; }
.practice-list { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.practice-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 10px; background: #fff; }
.practice-term b { display: block; font-size: 1rem; }
.practice-term span { font-size: .875rem; color: var(--muted); }
.practice-pick { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; font-size: .94rem; cursor: pointer; }
.practice-pick input { width: 20px; height: 20px; accent-color: var(--teal-ink); }
.practice-result { grid-column: 1 / -1; margin: 4px 0 0; font-size: .94rem; }
.practice-item[data-result="right"] { border-color: var(--teal-ink); background: #E3FBF6; }
.practice-item[data-result="wrong"] { border-color: #98271D; background: #FDECEA; }
.practice-item[data-result="wrong"] .practice-result strong { color: #98271D; }
.practice-score { font-size: 1.08rem; font-weight: 600; margin: 12px 0 0; }
@media (max-width: 760px) { .practice-list { grid-template-columns: 1fr; } }