/* Matrix PDF web tools — layout on top of Matrix Calm tokens (tokens.css). */
.workbook-dialog { max-width: min(36rem, calc(100vw - 32px)); border: 1px solid var(--matrix-border); border-radius: var(--matrix-radius-panel); padding: 24px; color: var(--matrix-text); background: var(--matrix-surface); overflow-wrap: anywhere; }
.workbook-dialog select { display: block; width: 100%; margin: 8px 0 16px; }
.workbook-dialog::backdrop { background: var(--matrix-overlay); }
.workflow-next { margin-block: 8px 16px; max-width: 100%; font-size: var(--matrix-type-table); }
.workflow-next summary { cursor: pointer; color: var(--matrix-link); }
.workflow-next select { max-width: 100%; min-width: 0; }
.matrix-ui { margin: 0; min-height: 100vh; -webkit-font-smoothing: antialiased; }
.matrix-ui *, .matrix-ui *::before, .matrix-ui *::after { box-sizing: border-box; }
.matrix-ui a { color: var(--matrix-link); }
.matrix-ui a.matrix-primary { color: var(--matrix-on-brand); } /* a link styled as the primary button keeps the button's text colour, not the link colour (the Transfer sign-in label was blue on blue) */
.matrix-ui h1, .matrix-ui h2, .matrix-ui h3 { margin: 0 0 var(--matrix-space-12); font-weight: 600; letter-spacing: -0.01em; }
.matrix-ui h1 { font-size: clamp(1.75rem, 4vw, var(--matrix-type-page-title)); line-height: var(--matrix-leading-page-title); }
.matrix-ui h2 { font-size: var(--matrix-type-section-title); line-height: var(--matrix-leading-section-title); }
.matrix-ui h3 { font-size: var(--matrix-type-item-title); }
.matrix-ui p { margin: 0 0 var(--matrix-space-12); }
.matrix-ui :focus-visible { outline: 2px solid var(--matrix-focus); outline-offset: 2px; }
.matrix-ui button, .matrix-ui input, .matrix-ui select, .matrix-ui textarea { font: inherit; }
.matrix-ui input, .matrix-ui select, .matrix-ui textarea { color: inherit; }
.matrix-ui button:not(.matrix-primary) { color: inherit; }
.matrix-ui button { cursor: pointer; }
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--matrix-surface); padding: 8px 12px; border-radius: var(--matrix-radius-control); z-index: 10; }
.skip-link:focus { left: 8px; }

.wrap { width: min(100% - 2rem, 960px); margin-inline: auto; }
.site-header { border-bottom: 1px solid var(--matrix-border); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--matrix-space-12) var(--matrix-space-24); min-height: 64px; padding-block: var(--matrix-space-8); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; text-decoration: none; color: var(--matrix-text); }
.brand small { color: var(--matrix-muted); font-weight: 400; }
.site-nav { display: flex; flex-wrap: wrap; gap: var(--matrix-space-16); margin-left: auto; }
.site-nav a { text-decoration: none; padding: 6px 0; }
.site-nav a:hover { text-decoration: underline; }
/* targets: 40px with a fine pointer, 48px with a coarse one (platform/02_design.md section 4) */
.brand, .site-nav a, .site-footer nav a { min-height: var(--matrix-control-min-height); display: inline-flex; align-items: center; }
.skip-link:focus { min-height: var(--matrix-control-min-height); display: inline-flex; align-items: center; }
/* the colour theme: the system's by default, light or dark by choice (theme.js; section 1), in the footer, away from the task */
.theme-pick { justify-self: start; display: inline-flex; align-items: center; gap: var(--matrix-space-8); color: var(--matrix-muted); }
.theme-pick select { min-height: var(--matrix-control-min-height); padding: 0 var(--matrix-space-12); font: inherit; color: var(--matrix-text); background: var(--matrix-surface); border: 1px solid var(--matrix-control-border); border-radius: var(--matrix-radius-control); }
/* the language, English or 中文 (public/tools/i18n.js; Jack, 2026-10-12, S4.4), in the header where it is looked for first */
.lang-switch { display: inline-flex; align-items: center; gap: 2px; }
.lang-switch button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--matrix-control-min-height); min-width: var(--matrix-control-min-height); padding: 0 8px; border: 1px solid transparent; border-radius: var(--matrix-radius-control); background: none; color: var(--matrix-link); font: inherit; }
.lang-switch button:hover { text-decoration: underline; }
.lang-switch button[aria-pressed="true"] { background: var(--matrix-selected); color: var(--matrix-selected-text); font-weight: 600; text-decoration: none; }
@media (pointer: coarse) {
  .brand, .site-nav a, .site-footer nav a, .skip-link:focus, .theme-pick select, .lang-switch button { min-height: var(--matrix-touch-min); }
  .lang-switch button { min-width: var(--matrix-touch-min); }
}

.hero { padding-block: var(--matrix-space-40) var(--matrix-space-24); }
.hero .lead { font-size: 1.125rem; max-width: 760px; color: var(--matrix-muted); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--matrix-space-12); padding: 0; margin: var(--matrix-space-20) 0 0; list-style: none; }
.facts li { padding: var(--matrix-space-12) var(--matrix-space-16); border-radius: var(--matrix-radius-control); background: var(--matrix-surface); border: 1px solid var(--matrix-border); font-size: var(--matrix-type-caption); line-height: 1.45; }
.facts strong { display: block; font-size: var(--matrix-type-control); margin-bottom: 2px; }

.tool-panel { padding: var(--matrix-space-24); margin-block: var(--matrix-space-16) var(--matrix-space-40); box-shadow: var(--matrix-shadow-card); }
/* Tool pages (body[data-tool]; the platform pages share these classes and keep their layout): the tool is on the first
   screen and the explanation cards follow it (Jack, 2026-10-12, S4.1; tests/tools/first-screen.spec.js). The bar with the
   main button stays at the bottom of the screen while the tool panel is in view, so it is never 1300 to 2500 px down;
   it does so only where the page shows the shell's main button. */
body[data-tool] { --tool-pad: var(--matrix-space-24); }
body[data-tool] .hero--tool { padding-block: var(--matrix-space-24) 0; }
body[data-tool] .hero--tool .lead { margin-bottom: 0; }
body[data-tool] .tool-panel { margin-block: var(--matrix-space-16) var(--matrix-space-24); }
body[data-tool] .facts--tool { margin: 0 0 var(--matrix-space-24); }
body[data-tool] #tool > .actions:has(> #run:not([hidden])) {
  position: sticky; bottom: 0; z-index: 5;
  margin-inline: calc(-1 * var(--tool-pad)); padding: var(--matrix-space-12) var(--tool-pad);
  background: var(--matrix-surface); border-top: 1px solid var(--matrix-border);
  border-radius: 0 0 var(--matrix-radius-panel) var(--matrix-radius-panel);
}
body[data-tool] #tool > .actions #status:empty { display: none; } /* no empty row in the bar */
/* what keyboard focus or a link scrolls to stops above that bar, so it never covers the focused control (WCAG 2.4.11) */
html:has(body[data-tool] #tool > .actions > #run:not([hidden])) { scroll-padding-bottom: 8rem; }
/* a long lead: three lines on a phone, the rest behind More (public/tools/page-head.js); without scripts it shows whole */
.lead-more { display: none; }
.dropzone { position: relative; display: grid; place-items: center; gap: var(--matrix-space-8); padding: var(--matrix-space-32) var(--matrix-space-16); border: 2px dashed var(--matrix-control-border); border-radius: var(--matrix-radius-panel); text-align: center; background: var(--matrix-surface-subtle); transition: border-color var(--matrix-motion-fast) var(--matrix-ease), background var(--matrix-motion-fast) var(--matrix-ease); }
.dropzone.is-over { border-color: var(--matrix-brand); background: var(--matrix-selected); }
.dropzone p { margin: 0; }
.dropzone input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.dropzone .file-button { display: inline-flex; align-items: center; min-height: var(--matrix-control-min-height); cursor: pointer; }
.dropzone input:focus-visible + .file-button { outline: 2px solid var(--matrix-focus); outline-offset: 2px; }
html:not([data-js="ready"]) .needs-js { display: none; }
.no-js { padding: var(--matrix-space-12) var(--matrix-space-16); border-radius: var(--matrix-radius-control); background: var(--matrix-warning-background); color: var(--matrix-warning); }

.file-list { list-style: none; margin: var(--matrix-space-16) 0 0; padding: 0; display: grid; gap: var(--matrix-space-8); }
/* the name keeps a readable share of the row beside a long description (Remove EXIF's metadata list, SVG optimiser's reason),
   which wraps instead of squeezing the name to nothing (fb_8d3da819, queue row 123; the night fixer's 41b756fa) */
.file-list li { display: grid; grid-template-columns: minmax(min(12ch, 40%), 1fr) minmax(0, auto) auto; align-items: center; gap: var(--matrix-space-12); padding: var(--matrix-space-8) var(--matrix-space-12); border: 1px solid var(--matrix-border); border-radius: var(--matrix-radius-control); background: var(--matrix-surface); font-size: var(--matrix-type-control); }
.file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-list li > .matrix-muted, .file-list li > .matrix-error { min-width: 0; overflow-wrap: anywhere; }
.file-list li .file-help { grid-column: 1 / -1; font-size: var(--matrix-type-caption); } /* a line of its own under the file: PDF password for a locked PDF */
.file-controls { display: flex; gap: 4px; }
.matrix-icon-button { min-width: var(--matrix-control-min-height); min-height: var(--matrix-control-min-height); border: 1px solid var(--matrix-border); background: var(--matrix-surface); border-radius: var(--matrix-radius-control); }
.matrix-icon-button:hover:not(:disabled) { background: var(--matrix-hover); }
.matrix-icon-button:disabled { color: var(--matrix-disabled-text); cursor: not-allowed; }
.matrix-secondary { min-height: var(--matrix-control-min-height); padding: 8px 16px; border: 1px solid var(--matrix-control-border); background: var(--matrix-surface); border-radius: var(--matrix-radius-control); font-weight: 500; }
.matrix-secondary:hover { background: var(--matrix-hover); }

.options { display: grid; gap: var(--matrix-space-16); margin-top: var(--matrix-space-20); }
.option-group { border: 1px solid var(--matrix-border); border-radius: var(--matrix-radius-control); padding: var(--matrix-space-12) var(--matrix-space-16); margin: 0; display: grid; gap: var(--matrix-space-8); }
.option-group legend { font-weight: 600; padding-inline: 4px; }
.option-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--matrix-space-8) var(--matrix-space-12); min-height: 32px; }
.option-row input[type="radio"], .option-row input[type="checkbox"] { width: 20px; height: 20px; margin: 0; accent-color: var(--matrix-brand); }
/* a radio or a checkbox with only its words: the words wrap beside the dot, never under it on a phone (Lucy's round 1, 19 Oct);
   the dot keeps the size its tool gives it and only the words make room (Mock Data's 32 px boxes were squeezed to 13 px) */
.option-row:has(> input:is([type="radio"], [type="checkbox"]):first-child + label:last-child) { flex-wrap: nowrap; }
.option-row > input:is([type="radio"], [type="checkbox"]) { flex-shrink: 0; }
.option-row > input:is([type="radio"], [type="checkbox"]):first-child + label:last-child { min-width: 0; }
.option-row--input { padding-left: 32px; }
.option-inline { display: inline-flex; margin-left: var(--matrix-space-8); }
.option-inline input { width: 6em; }
.option-inline--wide input { width: min(100%, 18em); }
.matrix-input { min-height: var(--matrix-control-min-height); font-size: 16px; max-width: 100%; }
select.matrix-input { padding-right: 32px; }
textarea.matrix-input { min-height: 88px; width: 100%; }
input[type="range"] { width: min(100%, 320px); accent-color: var(--matrix-brand); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--matrix-space-12); margin-top: var(--matrix-space-20); }
.matrix-primary { min-height: 44px; font-size: var(--matrix-type-control); }
.status { color: var(--matrix-muted); font-size: var(--matrix-type-caption); }
/* why the main button is off, beside it (ui.js sayWhy; Jack, 2026-10-12, S4.3) */
.run-reason { margin: 0; color: var(--matrix-warning); font-size: var(--matrix-type-caption); }
.run-reason:empty { display: none; }
/* a visitor's file name, however long and unbroken, wraps inside the alert and never widens the page (hub review R6613be0c V1,
   Ica287ed9: a 204-character name skipped for its type made a 390 px page 2128 px wide) */
.alert { margin-top: var(--matrix-space-12); padding: var(--matrix-space-12) var(--matrix-space-16); border-radius: var(--matrix-radius-control); background: var(--matrix-danger-background); color: var(--matrix-danger); overflow-wrap: anywhere; }
.notice { padding: var(--matrix-space-12) var(--matrix-space-16); border-radius: var(--matrix-radius-control); background: var(--matrix-surface-subtle); border: 1px solid var(--matrix-border); }
.notice--warning { background: var(--matrix-warning-background); color: var(--matrix-warning); border-color: transparent; }

.result { margin-top: var(--matrix-space-24); padding: var(--matrix-space-20); border-radius: var(--matrix-radius-panel); background: var(--matrix-success-background); border: 1px solid transparent; }
.result h2 { color: var(--matrix-success); }
.downloads { list-style: none; padding: 0; margin: 0 0 var(--matrix-space-12); display: grid; gap: var(--matrix-space-8); }
.download { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: var(--matrix-control-min-height); padding: 8px 14px; border-radius: var(--matrix-radius-control); background: var(--matrix-surface); border: 1px solid var(--matrix-border); text-decoration: none; font-weight: 500; }
.downloads li:first-child .download { background: var(--matrix-brand); color: var(--matrix-on-brand); border-color: transparent; }
/* the result names the file too, in its sentences and its downloads: a long unbroken name wraps there as in the alert */
#result, .download { overflow-wrap: anywhere; }
.download { max-width: 100%; }
.downloads li:first-child .download .matrix-muted { color: inherit; } /* full opacity: at 0.85 white on the brand blue is 4.46:1 and fails AA */
.next-step { margin-top: var(--matrix-space-16); padding: var(--matrix-space-12) var(--matrix-space-16); border-radius: var(--matrix-radius-control); background: var(--matrix-surface); border: 1px solid var(--matrix-border); font-size: var(--matrix-type-control); }
.next-step p { margin: 0; }
.next-step .next-step-note { margin-top: var(--matrix-space-4); color: var(--matrix-muted); font-size: var(--matrix-type-caption); }
.next-step .next-step-carry { margin-top: var(--matrix-space-8); }

.section { padding-block: var(--matrix-space-24); border-top: 1px solid var(--matrix-border); }
.steps { padding-left: 1.25em; display: grid; gap: var(--matrix-space-8); margin: 0; }
.faq details { border: 1px solid var(--matrix-border); border-radius: var(--matrix-radius-control); padding: var(--matrix-space-8) var(--matrix-space-16); margin-bottom: var(--matrix-space-8); background: var(--matrix-surface); }
.faq summary { cursor: pointer; font-weight: 500; min-height: 32px; display: flex; align-items: center; }
.faq details p { margin: var(--matrix-space-8) 0 4px; color: var(--matrix-muted); }

.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--matrix-space-12); list-style: none; padding: 0; margin: 0; }
.tool-card { display: grid; gap: 6px; padding: var(--matrix-space-16); border: 1px solid var(--matrix-border); border-radius: var(--matrix-radius-panel); background: var(--matrix-surface); text-decoration: none; color: inherit; box-shadow: var(--matrix-shadow-card); transition: border-color var(--matrix-motion-fast) var(--matrix-ease); }
.tool-card:hover { border-color: var(--matrix-brand); }
.tool-card h3 { margin: 0; color: var(--matrix-link); }
.tool-card p { margin: 0; color: var(--matrix-muted); font-size: var(--matrix-type-control); }
.tag { display: inline-block; font-size: var(--matrix-type-caption); padding: 2px 8px; border-radius: var(--matrix-radius-pill); background: var(--matrix-selected); color: var(--matrix-selected-text); }
.tag--muted { background: var(--matrix-surface-subtle); color: var(--matrix-muted); }

.site-footer { border-top: 1px solid var(--matrix-border); padding-block: var(--matrix-space-24) var(--matrix-space-40); color: var(--matrix-muted); font-size: var(--matrix-type-caption); }
.site-footer .wrap { display: grid; gap: var(--matrix-space-8); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--matrix-space-16); }

@media (max-width: 580px) {
  .tool-panel { padding: var(--matrix-space-16); }
  body[data-tool] { --tool-pad: var(--matrix-space-16); }
  body[data-tool] .hero--tool { padding-top: var(--matrix-space-16); }
  body[data-tool] .hero--tool h1 { font-size: 1.5rem; line-height: 1.25; margin-bottom: var(--matrix-space-8); }
  body[data-tool] .hero--tool .lead { font-size: 1rem; line-height: 1.5; }
  body[data-tool] .tool-panel { margin-top: var(--matrix-space-12); }
  /* the panel's heading repeats the page title just above it: kept for screen readers, not drawn */
  body[data-tool] .tool-panel > h2 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  html.js-on body[data-tool] .hero--tool .lead[data-long]:not(.is-open) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
  html.js-on body[data-tool] .lead-more:not([data-fits]) { display: inline-flex; align-items: center; min-height: var(--matrix-control-min-height); padding: 0; border: 0; background: none; color: var(--matrix-link); font: inherit; text-decoration: underline; }
  body[data-tool] #tool > .actions { gap: var(--matrix-space-8); }
  body[data-tool] #tool > .actions :is(#status, .run-reason) { flex-basis: 100%; } /* their own line under the buttons */
  body[data-tool] #tool > .actions .matrix-primary, body[data-tool] #tool > .actions .matrix-secondary { padding-inline: var(--matrix-space-12); }
  .file-list li { grid-template-columns: minmax(0, 1fr) auto; }
  .file-list li .matrix-muted, .file-list li .matrix-error { grid-column: 1 / -1; font-size: var(--matrix-type-caption); }
}
@media (max-width: 400px) {
  /* the main button and Start again on one row where their words allow: the bar then takes less of a small screen */
  body[data-tool] #tool > .actions:has(> #run:not([hidden])) { column-gap: 6px; padding-block: var(--matrix-space-8); }
  body[data-tool] #tool > .actions .matrix-primary, body[data-tool] #tool > .actions .matrix-secondary { padding-inline: 10px; }
}
/* Start again: below 360 px its words give way to its icon (the words stay its name for screen readers) */
.reset { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.reset-icon { display: none; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 359px) {
  body[data-tool] .reset { min-width: var(--matrix-control-min-height); padding-inline: 10px; }
  body[data-tool] .reset .reset-icon { display: block; }
  body[data-tool] .reset .reset-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
@media (max-width: 480px) {
  /* one header row on a phone, on the tool pages and the tools index alike: the brand, All tools and the language;
     MatrixAI Group stays in the footer (the index's first screen keeps Matrix PDF's first tool whole: hub.spec.js) */
  body:is([data-tool], .hub) .site-header .brand small, body:is([data-tool], .hub) .site-nav a[href="/"] { display: none; }
  body:is([data-tool], .hub) .site-header .wrap { min-height: 0; column-gap: var(--matrix-space-12); }
}

/* Narrow screens: intrinsic widths (file inputs, range sliders, canvases) must not stretch the grid. */
.options, .options > *, .option-group, .option-row, .sign-source, .sign-placement, .form-field { min-width: 0; max-width: 100%; }
.options input[type="file"], .options select, .options input[type="text"], .options input[type="number"] { max-width: 100%; }
.options select { contain: paint; } /* WebKit counts a narrowed select's longest option as overflow of its row and widens the page (fb_9f7c8d76) */
.matrix-ui [hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* text for screen readers only */
.options input[type="file"]:not(.visually-hidden) { width: 100%; } /* a file input hidden behind its own label keeps the 1 px of .visually-hidden */