/* Tools pages (/tools/, PDF Merge, CSV → JSON). Loaded after v3-system.css and public-pages.css,
   and only by the tools pages. Built from the existing tokens (--ink*, --flow, --edge*, --s-*, --r-*,
   --srf-*) so the workspace reads like the rest of the site. No inline styles (CSP style-src 'self'). */

/* v3-system centres <main> vertically in a full-height grid; tool pages flow from the top instead. */
.tool-main { display: block; min-height: 0; align-content: normal; padding-block: clamp(2.5rem, 6vw, 5rem) var(--section-y); }
.tool-main .shell { display: block; max-width: 64rem; }
.tool-main h1 { max-width: 18ch; margin-top: var(--s-3); }
.tool-main .lede { margin-top: var(--s-4); max-width: 60ch; }
.tool-crumbs { display: flex; flex-wrap: wrap; gap: var(--s-2); color: var(--ink-3); font: 400 .74rem/1.5 Mono, monospace; letter-spacing: .08em; text-transform: uppercase; }
.tool-crumbs a { color: var(--ink-2); text-decoration: none; }
.tool-crumbs a:hover { color: var(--ink); }
.tool-privacy { margin-top: var(--s-4); max-width: 60ch; color: var(--ink-2); }
.tool-privacy strong { color: var(--ink); font-weight: 500; }

/* Button classes from v3-system set display, which would override the hidden attribute (e.g. Cancel while idle). */
.tool-main [hidden] { display: none !important; }

/* Directory cards */
.tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--s-4); margin-top: var(--s-6); padding: 0; list-style: none; }
.tool-card { display: grid; gap: var(--s-3); height: 100%; padding: var(--s-5); border: 1px solid var(--edge-mid); border-radius: var(--r-lg); background: var(--srf-2); color: var(--ink-2); text-decoration: none; transition: border-color var(--t-fast) var(--ease); }
.tool-card:hover, .tool-card:focus-visible { border-color: var(--flow); }
.tool-card h2 { color: var(--ink); font-size: clamp(1.25rem, 1vw + 1rem, 1.6rem); line-height: 1.15; }
.tool-card .note { color: var(--flow); }

/* Workspace */
.tool-workspace { margin-top: var(--s-6); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
.tool-workspace > * { min-width: 0; } /* a wide preview table must scroll inside its box, not widen the page */
.tool-panel { padding: var(--s-5); border: 1px solid var(--edge-mid); border-radius: var(--r-lg); background: var(--srf-2); }
.tool-panel h2 { color: var(--ink); font-size: 1.1rem; line-height: 1.3; margin-bottom: var(--s-3); }
.dropzone { display: grid; justify-items: start; gap: var(--s-3); padding: var(--s-5); border: 1px dashed var(--edge-strong); border-radius: var(--r-md); background: var(--srf-1); transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.dropzone.is-dragover { border-color: var(--flow); background: rgb(169 232 234 / .08); }
.dropzone p { color: var(--ink-2); }
.tool-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tool-limits { color: var(--ink-3); font: 400 .74rem/1.5 Mono, monospace; letter-spacing: .04em; }
.tool-chosen { color: var(--ink); overflow-wrap: anywhere; }

.file-list { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.file-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-3); padding: var(--s-3); border: 1px solid var(--edge); border-radius: var(--r-md); background: var(--srf-3); }
.file-pos { min-width: 1.75rem; color: var(--flow); font: 400 .8rem/1 Mono, monospace; text-align: right; }
.file-meta { display: grid; gap: 2px; min-width: 0; }
.file-name { color: var(--ink); overflow-wrap: anywhere; }
.file-size { color: var(--ink-3); font: 400 .74rem/1.4 Mono, monospace; }
.file-actions { display: flex; flex-wrap: wrap; gap: var(--s-1); justify-content: flex-end; }
.tool-btn-small { min-height: 44px; min-width: 44px; padding: 0 var(--s-3); font-size: .8rem; }
.btn-quiet:disabled, .action:disabled { opacity: .45; cursor: not-allowed; }
.tool-summary { color: var(--ink-2); margin-top: var(--s-3); }
.tool-empty { color: var(--ink-3); }

.tool-options { display: grid; gap: var(--s-4); border: 0; margin: 0; padding: 0; }
.tool-options legend { color: var(--ink); font-size: 1.1rem; margin-bottom: var(--s-3); padding: 0; }
.tool-field { display: grid; gap: var(--s-2); max-width: 22rem; }
.tool-field label, .tool-check label { color: var(--ink-2); }
.tool-field select { min-height: 44px; padding: 0 var(--s-3); border: 1px solid var(--edge-strong); border-radius: var(--r-md); background: var(--srf-solid); color: var(--ink); font: inherit; }
.tool-check { display: flex; align-items: center; gap: var(--s-3); min-height: 44px; }
.tool-check input { width: 1.25rem; height: 1.25rem; accent-color: var(--flow); }
.tool-hint { color: var(--ink-3); font-size: .9rem; }

.tool-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.tool-progress { width: 100%; height: 6px; margin-top: var(--s-3); accent-color: var(--flow); }
.tool-status { min-height: 1.5em; color: var(--ink-2); }
.tool-error { padding: var(--s-4); border: 1px solid var(--limit-hot); border-radius: var(--r-md); background: rgb(255 123 114 / .08); color: var(--ink); }
.tool-error ul { margin: var(--s-2) 0 0; padding-left: 1.2em; color: var(--ink-2); }
.tool-download[hidden] { display: none; }

.tool-facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-1) var(--s-4); margin: 0; }
.tool-facts dt { color: var(--ink-3); font: 400 .78rem/1.6 Mono, monospace; }
.tool-facts dd { margin: 0; color: var(--ink); }
.tool-notices { margin: var(--s-4) 0 0; padding-left: 1.2em; color: var(--ink-2); display: grid; gap: var(--s-2); }
.tool-notices ul { margin-top: var(--s-1); padding-left: 1.2em; color: var(--ink-3); }
.preview-wrap { margin-top: var(--s-4); max-height: 28rem; overflow: auto; border: 1px solid var(--edge); border-radius: var(--r-md); }
.preview-wrap:focus-visible { outline: 2px solid var(--flow); outline-offset: 2px; }
.preview-table { border-collapse: collapse; width: max-content; min-width: 100%; font: 400 .8rem/1.4 Mono, monospace; }
.preview-table caption { padding: var(--s-2) var(--s-3); color: var(--ink-3); text-align: left; caption-side: top; font-family: inherit; }
.preview-table th, .preview-table td { padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--edge); text-align: left; vertical-align: top; max-width: 24rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.preview-table th { position: sticky; top: 0; background: var(--srf-solid); color: var(--ink); }
.preview-table td { color: var(--ink-2); }
.cell-null, .cell-missing { color: var(--ink-3); font-style: italic; }
.cell-empty::after { content: '""'; color: var(--ink-3); }

.tool-limitations { margin-top: var(--s-6); color: var(--ink-2); }
.tool-limitations h2 { color: var(--ink); font-size: 1.1rem; margin-bottom: var(--s-3); }
.tool-limitations ul { padding-left: 1.2em; display: grid; gap: var(--s-2); }
.tool-noscript { margin-top: var(--s-5); padding: var(--s-4); border: 1px solid var(--limit); border-radius: var(--r-md); color: var(--ink); }

@media (max-width: 520px) {
  .tool-panel { padding: var(--s-4); }
  .file-item { grid-template-columns: auto 1fr; }
  .file-actions { grid-column: 1 / -1; justify-content: stretch; }
  .file-actions .tool-btn-small { flex: 1 1 0; }
  .tool-actions .action { flex: 1 1 100%; justify-content: center; }
  .tool-facts { grid-template-columns: 1fr; }
  .tool-facts dd { margin-bottom: var(--s-2); }
}
@media (prefers-reduced-motion: reduce) { .tool-card, .dropzone { transition: none; } }
/* Unsupported-browser notice (shown above the disabled workspace when a required feature is missing). */
.tool-unsupported { margin-top: var(--s-5); max-width: 60ch; }

/* TOOLS-002 (2026-10-18): quieter panels, card details, touch-aware hints, inline status, Tools nav state. */
/* Panels and cards use the most opaque surface token so stars and the Earth stay quiet behind text. */
.tool-panel, .tool-card { background: var(--srf-3); }
.tool-card-spec { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-1) var(--s-3); margin: 0; padding-top: var(--s-3); border-top: 1px solid var(--edge); font: 400 .74rem/1.6 Mono, monospace; letter-spacing: .02em; }
.tool-card-spec dt { color: var(--ink-3); }
.tool-card-spec dd { margin: 0; color: var(--ink-2); }
.tool-dir-note { margin-top: var(--s-5); max-width: 60ch; color: var(--ink-3); font-size: .9rem; }
.tool-howto { margin-top: var(--s-4); color: var(--ink-2); font-size: .92rem; }
.tool-sample { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; margin-top: var(--s-2); color: var(--flow); font: 400 .8rem/1.4 Mono, monospace; }
.tool-sample .icon { width: 1rem; height: 1rem; flex: none; }
/* Drag wording only where a fine pointer can drag; touch screens get a plain "choose" line. */
.drop-hint-drag { display: none; }
@media (hover: hover) and (pointer: fine) { .drop-hint-drag { display: inline; } .drop-hint-touch { display: none; } }
.tool-status-inline { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--edge); display: grid; gap: var(--s-3); }
.tool-status-inline .tool-progress { margin-top: 0; }
/* Tools section marker in the header: the directory is the page; a tool page is a location inside it. */
.site-nav a[aria-current="location"] { color: var(--ink); box-shadow: inset 0 -1px 0 var(--flow); }
@media (max-width: 520px) { .tool-card-spec { font-size: .72rem; } }