/* KB_UX2: "one job per page" – the tool comes first, reference text is collapsed (still in the HTML), secondary tools become links.
   Kept in its own file so it does not collide with other work on style.css. Logical properties only (RTL-safe). */

/* small "Related tools" link row right under the tool */
.related-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:14px 0 0;font-size:.88rem}
.related-row .rr-h{color:var(--muted);font-weight:600}
.related-row .rr-a{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:4px 10px;min-height:32px;color:var(--ink);text-decoration:none;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.related-row .rr-a:hover{border-color:var(--brand);color:var(--brand-ink,var(--brand))}

/* collapsed reference sections (how-to / about / FAQ) */
.kb-more{padding-top:24px}
.acc{border:1px solid var(--line);border-radius:12px;background:#fff;margin:0 0 10px;padding:0 16px}
.acc>summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:8px 0}
.acc>summary::-webkit-details-marker{display:none}
.acc>summary h2,.acc>summary .h3{font-size:1.08rem;margin:0;line-height:1.3}
.acc>summary::after{content:"+";flex:none;font-weight:700;font-size:1.3rem;line-height:1;color:var(--muted)}
.acc[open]>summary::after{content:"\2212"}
.acc>summary:focus-visible{outline:2px solid #2563eb;outline-offset:2px;border-radius:8px}
.acc-in{padding:0 0 14px}
.acc-in>:first-child{margin-top:0}
.acc-in-app{margin-top:12px}
.rel-h{font-size:1.08rem;margin:18px 0 8px}
.rel-list{list-style:none;padding:0;margin:0 0 12px;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.92rem}
.rel-list a{display:inline-block;padding:4px 0}

/* currency converter: converter first, compact rate line, pair chips */
.fxapp .fx-conv{margin-top:0}
.fxapp .fx-top{margin-top:4px;padding-top:10px;border-top:1px solid var(--line)}
.fxapp .fx-rate{font-size:clamp(1.5rem,6vw,2rem)}
.fx-chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 2px}
.fx-chips .fx-pc{margin:0;min-height:36px;font-variant-numeric:tabular-nums}


/* invoice & other document generators: shorter design step */
details.doc-opts{margin:12px 0}
details.doc-opts>summary{font-weight:600;font-size:.92rem}

@media (max-width:860px){
  /* doc generators: form first, preview right after it (was above the form and pushed the inputs below the fold) */
  .doc-grid .doc-preview{order:0;max-width:300px}
}
@media (max-width:600px){
  .hero-tool{padding:10px 0 16px}
  .hero-tool .crumbs{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;font-size:.8rem}
  .hero-tool h1{font-size:clamp(1.35rem,6.4vw,1.7rem);margin-bottom:6px}
  .hero-tool .lead{font-size:.95rem;line-height:1.45;margin-bottom:12px} /* KB_VT3: full text, no 2-line clamp */
  .kb-more{padding-top:16px}
  .acc{padding:0 12px}
  /* footer on phones: category headings only (every link is still in the HTML and on the category pages) */
  .foot{padding-top:22px;margin-top:24px}
  .foot-areas{gap:14px;margin-top:16px}
  .foot-a{font-size:1rem;margin-bottom:8px}
  .foot-cols{gap:4px 14px}
  .foot-cols ul{display:none}
  .foot-h{margin:0;font-size:.92rem;font-weight:500}.foot-h a{display:block;padding:6px 0}
}
/* KB_MERGE: tabs for tools merged into one page (?mode=). Wraps on phones, never cut off. */
.mode-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px}
.mode-tabs .mode-tab{display:inline-flex;align-items:center;min-height:40px;padding:6px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);text-decoration:none;font-weight:600;font-size:.9rem;line-height:1.25;white-space:normal;text-align:center}
.mode-tabs .mode-tab.on{background:var(--ink);border-color:var(--ink);color:#fff}
.mode-tabs .mode-tab:focus-visible{outline:3px solid #2563eb;outline-offset:2px}