/* CFS Tools: shared page layout and tool widgets. Uses theme tokens (main.css) with fallbacks.
   Page: band (breadcrumb, H1, one sentence) > tool card > guide (.measure) > FAQ > related files > more tools. */

/* ---------- Page ---------- */
.cfs-tp { padding: 0 0 var(--section, 4rem); color: var(--ink, #263638); }
.cfs-tp__band { background: var(--ivory, #F7F4EE); border-bottom: 1px solid var(--border, #E5E4DF); padding-block: 1.25rem clamp(1.75rem, 1.2rem + 2vw, 2.75rem); }
.cfs-tp__band .breadcrumb { margin-bottom: 1.25rem; }
.cfs-tp__band h1 { margin: 0 0 0.6rem; font-size: var(--fs-xl, 2rem); max-width: 28ch; }
.cfs-tp__lede { margin: 0; max-width: 60ch; font-size: var(--fs-md, 1.2rem); line-height: 1.5; color: var(--ink-soft, #4A5A5C); }
.cfs-tp__body { padding-top: var(--s-4, 2rem); }
.cfs-tp__noscript { color: var(--coral-dark, #A53E29); }

/* Tool box: white card, hairline border, 24px padding */
.cfs-tp__app { background: var(--paper, #fff); border: 1px solid var(--border, #E5E4DF); border-radius: 12px; padding: 24px; margin: 0 0 var(--s-5, 3rem); }
.cfs-tp__app:has(.cfs-htv) { background: none; border: 0; padding: 0; }
.cfs-tp__app h2 { font-size: var(--fs-md, 1.3rem); margin: 0 0 1rem; }
@media (max-width: 600px) { .cfs-tp__app { padding: 16px; } }

/* Guide: centered measure (theme utilities), H2 sections divided by a rule */
.cfs-tp__guide { margin-block: 0 var(--s-5, 3rem); }
.cfs-tp__guide > * { max-width: var(--measure, 47.5rem); margin-inline: auto; }
.cfs-tp__guide > table { max-width: var(--measure-wide, 960px); }
.cfs-tp__guide h2 { margin: 2.5rem auto 0.9rem; padding-top: 1.75rem; border-top: 1px solid var(--border, #E5E4DF); font-size: var(--fs-lg, 1.5rem); }
.cfs-tp__guide > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.cfs-tp__guide p, .cfs-tp__guide li { color: var(--ink, #263638); }
.cfs-tp__guide table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 0.875rem; margin-block: 1.25rem; -webkit-overflow-scrolling: touch; }
.cfs-tp__guide th { background: var(--sand, #EAE3D8); text-align: left; font: 700 0.875rem / 1.3 var(--font-head, inherit); position: sticky; top: 0; }
.cfs-tp__guide th, .cfs-tp__guide td { padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--border, #E5E4DF); vertical-align: top; }

/* FAQ */
.cfs-tp__faq { margin-block: 0 var(--s-5, 3rem); }
.cfs-tp__faq h2 { font-size: var(--fs-lg, 1.5rem); }
.cfs-tp__faq details { border-top: 1px solid var(--border, #E5E4DF); }
.cfs-tp__faq details:last-of-type { border-bottom: 1px solid var(--border, #E5E4DF); }
.cfs-tp__faq summary { position: relative; cursor: pointer; padding: 0.95rem 2rem 0.95rem 0; font-weight: 600; list-style: none; }
.cfs-tp__faq summary::-webkit-details-marker { display: none; }
.cfs-tp__faq summary::after { content: ""; position: absolute; right: 0.25rem; top: 50%; width: 8px; height: 8px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-70%) rotate(45deg); transition: transform 200ms ease; }
.cfs-tp__faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.cfs-tp__faq details p { margin: 0 0 1rem; color: var(--ink-soft, #4A5A5C); }

/* Related files + more tools */
.cfs-tool__related { margin-block: 0 var(--s-5, 3rem); }
.cfs-tool__related .section-head__title { font-size: var(--fs-lg, 1.5rem); }
.cfs-tool__cats, .cfs-tool__others ul { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 1rem 0 0; }
.cfs-tool__cats a, .cfs-tool__others a { display: inline-flex; align-items: center; min-height: 40px; padding: 0.4rem 1rem; border: 1px solid var(--border, #E5E4DF); border-radius: 999px; font-size: var(--fs-sm, 0.9375rem); text-decoration: none; transition: border-color 160ms ease, background-color 160ms ease; }
.cfs-tool__cats a:hover, .cfs-tool__others a:hover { border-color: var(--ink, #263638); background: var(--ivory, #F7F4EE); }
.cfs-tool__others h2 { font-size: var(--fs-md, 1.3rem); margin: 0; }

/* ---------- Index ---------- */
.cfs-tools-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.cfs-tools-card { position: relative; display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--border, #E5E4DF); border-radius: 12px; background: var(--paper, #fff); transition: border-color 200ms ease, transform 200ms ease; }
.cfs-tools-card:hover, .cfs-tools-card:focus-within { border-color: var(--ink, #263638); }
.cfs-tools-card h2 { font-size: var(--fs-md, 1.3rem); margin: 0 0 0.5rem; }
.cfs-tools-card h2 a { text-decoration: none; }
.cfs-tools-card h2 a::after { content: ""; position: absolute; inset: 0; }
.cfs-tools-card p { margin: 0 0 1.25rem; color: var(--ink-soft, #4A5A5C); font-size: var(--fs-sm, 0.9375rem); line-height: 1.5; }
.cfs-tools-card__go { margin-top: auto; font: 700 var(--fs-sm, 0.9375rem) / 1 var(--font-head, inherit); color: var(--coral-dark, #A53E29); }
.cfs-tools-card__go::after { content: " \2192"; }

/* ---------- Widgets ---------- */
.cfs-t-row { display: grid; gap: 0.9rem 1rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: end; margin-bottom: 1rem; }
.cfs-t-field { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.875rem; min-width: 0; }
.cfs-t-field label, .cfs-t-field > span { font-weight: 600; }
.cfs-t-field input, .cfs-t-field select { font: inherit; font-size: var(--fs-sm, 0.9375rem); padding: 0 0.8rem; border: 1px solid #B9BDB8; background: #fff; color: var(--ink, #263638); height: 44px; min-height: 44px; border-radius: 8px; width: 100%; }
.cfs-t-field select { appearance: none; -webkit-appearance: none; padding-right: 2.25rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23263638' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; }
.cfs-t-field input:focus, .cfs-t-field select:focus { outline: 0; border-color: var(--ink, #263638); box-shadow: 0 0 0 3px rgba(38, 54, 56, 0.16); }
.cfs-t-btn:focus-visible, .cfs-t-seg button:focus-visible { outline: 2px solid var(--coral, #C44F37); outline-offset: 2px; }
.cfs-t-btn { font: inherit; font-weight: 700; font-size: var(--fs-sm, 0.9375rem); padding: 0 1.4rem; min-height: 44px; border: 1px solid var(--coral, #C44F37); background: var(--coral, #C44F37); color: #fff; cursor: pointer; border-radius: 8px; transition: background-color 160ms ease; }
.cfs-t-btn:hover { background: var(--coral-dark, #A53E29); border-color: var(--coral-dark, #A53E29); }
.cfs-t-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.cfs-t-btn--ghost { background: transparent; color: var(--ink, #263638); border-color: var(--ink, #263638); }
.cfs-t-btn--ghost:hover { background: var(--sand, #EAE3D8); color: var(--ink, #263638); border-color: var(--ink, #263638); }
.cfs-t-seg { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid #B9BDB8; border-radius: 10px; background: var(--ivory, #F7F4EE); align-self: flex-start; max-width: 100%; }
.cfs-t-seg button { font: inherit; font-size: 0.875rem; font-weight: 600; padding: 0 0.95rem; min-height: 36px; border: 0; border-radius: 7px; background: transparent; color: var(--ink, #263638); cursor: pointer; white-space: nowrap; }
.cfs-t-seg button:hover { background: var(--sand, #EAE3D8); }
.cfs-t-seg button[aria-pressed="true"] { background: var(--ink, #263638); color: var(--ivory, #F7F4EE); }
.cfs-t-result { background: var(--ivory, #F7F4EE); border: 1px solid var(--border, #E5E4DF); border-left: 4px solid var(--coral, #C44F37); border-radius: 8px; padding: 1rem 1.25rem; margin-block: 1rem; }
.cfs-t-result strong { font: 800 var(--fs-md, 1.3rem) / 1.3 var(--font-head, inherit); }
.cfs-t-result p { margin: 0.25rem 0; }
.cfs-t-hint { border-left: 3px solid var(--sage, #8DA89B); padding: 0.25rem 0.9rem; margin: 1rem 0; color: var(--ink-soft, #4A5A5C); font-size: 0.9375rem; }
.cfs-t-note { font-size: 0.8125rem; color: var(--ink-soft, #4A5A5C); line-height: 1.5; }
.cfs-t-card { background: var(--paper, #fff); border: 1px solid var(--border, #E5E4DF); border-radius: 12px; padding: 24px; margin-bottom: 1.5rem; }
@media (max-width: 600px) { .cfs-t-card { padding: 16px; } }

/* Tables: sand header row, hairlines, no zebra, 14px, scrolls sideways on phones, header sticks */
.cfs-t-tablewrap { overflow: auto; max-height: 72vh; margin-block: 1rem; border: 1px solid var(--border, #E5E4DF); border-radius: 8px; -webkit-overflow-scrolling: touch; }
.cfs-t-table { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; font-size: 0.875rem; line-height: 1.4; }
.cfs-t-table th, .cfs-t-table td { text-align: left; padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--border, #E5E4DF); vertical-align: top; background: #fff; }
.cfs-t-table thead th { background: var(--sand, #EAE3D8); position: sticky; top: 0; z-index: 1; font: 700 0.8125rem / 1.3 var(--font-head, inherit); white-space: nowrap; }
.cfs-t-table tbody tr:last-child > * { border-bottom: 0; }
.cfs-t-table tr.is-hit td { background: rgba(196, 79, 55, 0.08); }

/* Drop zone (native file input stretched over the box, so drag and drop works without script) */
.cfs-t-drop, .cfs-tool__drop { position: relative; border: 1.5px dashed #9AA09B; border-radius: 12px; background: var(--ivory, #F7F4EE); padding: 2rem 1rem; text-align: center; transition: border-color 160ms ease, background-color 160ms ease; }
.cfs-t-drop:hover, .cfs-t-drop:focus-within, .cfs-tool__drop:hover, .cfs-tool__drop:focus-within, .cfs-tool__drop.is-over { border-color: var(--coral, #C44F37); background: #fff; }
.cfs-t-drop label, .cfs-tool__drop-label { display: block; font-size: var(--fs-base, 1.0625rem); margin: 0; }
.cfs-t-drop label span { color: var(--ink-soft, #4A5A5C); }
.cfs-t-drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.cfs-t-drop:focus-within { outline: 2px solid var(--ink, #263638); outline-offset: 2px; }
.cfs-rs .cfs-t-drop { margin-bottom: 1rem; }

@media (max-width: 600px) { .cfs-t-seg { width: 100%; } .cfs-t-seg button { flex: 1; padding-inline: 0.4rem; } }
.site-main.cfs-tp { padding-top: 0; }

/* Illustrations (CFS\Tools\Icons; omitted when no file exists) */
.cfs-tp__bandrow { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.cfs-tp__art { flex: none; width: 180px; height: 180px; color: var(--ink, #263638); }
.cfs-tp__art svg { width: 100%; height: 100%; }
@media (max-width: 720px) { .cfs-tp__art { display: none; } }
.cfs-tools-card__icon { display: block; width: 96px; height: 96px; margin-bottom: 1rem; color: var(--ink, #263638); }
.cfs-tools-card__icon svg { display: block; width: 96px; height: 96px; }
.cfs-tools-card__icon .cfs-icon { stroke-width: 3; }
.cfs-tool__chipicon { display: inline-flex; width: 20px; height: 20px; margin-right: 0.5rem; }
.cfs-tool__chipicon svg { width: 100%; height: 100%; }