/* Hallmark · component: workbench controls · genre: modern-minimal · theme: Readyo house system (design.md)
 * states: default · hover · focus · active · disabled · loading (aria-busy) · error (tool-note--warn) · success (result reveal)
 *
 * Readyo · free web tools (/tools/, /fr/outils/): the workbench card, its controls and the result call to action.
 * Loaded after tokens, base, chrome, legal and pages. Same class names the tool scripts use (release/tools/*.py,
 * assets/js/tools/*.js); only the look changed (14 Oct 2026: dark workbench, no white sheet). Motion: pages.js. */

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Workbench card ---------- */
.tool.pg-card { padding: clamp(1.25rem, 4.5vw, 3.5rem) var(--card-pad); color-scheme: dark; }
.tool__inner { max-width: 56rem; display: grid; gap: var(--space-lg); }
.tool a { color: var(--color-link-dark); }
.tool h2 { font-size: var(--text-lg); font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; color: var(--color-text); }
.tool h3 { font-size: var(--text-md); font-weight: 700; color: var(--color-text); }
.tool p { line-height: 1.6; }
.tool .small, .tool-muted { color: var(--color-text-muted); }

.tool-form { display: grid; gap: var(--space-md); }
.tool-form--tight, .tool-stack { display: grid; gap: var(--space-sm); }
.tool-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm) var(--space-md); border: 0; padding: 0; margin: 0; }
.tool-fields--stack { grid-template-columns: minmax(0, 1fr) !important; gap: var(--space-sm); }
.tool-fields + .tool-fields, .tool-fields + .tool-note { margin-top: var(--space-md); }
#sim-setup > * + * { margin-top: var(--space-md); }
.tool-fields legend { padding: 0; margin-bottom: var(--space-xs); font-weight: 700; color: var(--color-text); }
.tool-field { display: grid; gap: 0.4rem; }
.tool-field > label, .tool-field > span { font-size: var(--text-sm); font-weight: 700; color: var(--color-text); }

.tool select, .tool input[type="text"], .tool input[type="number"], .tool input[type="email"], .tool textarea {
  width: 100%; min-height: 48px; padding: 0.65rem 0.95rem;
  font: inherit; color: var(--color-text); background: var(--color-field);
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm);
}
.tool textarea { line-height: 1.55; resize: vertical; }
.tool ::placeholder { color: var(--color-text-muted); opacity: 0.85; }
.tool select { appearance: none; -webkit-appearance: none; padding-right: 2.5rem;
  background: var(--color-field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23c9f05e' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 0.95rem center / 12px 8px; }
.tool select:hover, .tool input:hover, .tool textarea:hover { border-color: var(--color-text-muted); }
.tool select:focus-visible, .tool input:focus-visible, .tool textarea:focus-visible { border-color: var(--color-lime); outline: 2px solid var(--color-lime); outline-offset: 1px; }
.tool [aria-invalid="true"] { border-color: var(--color-warn); }
.tool :disabled { opacity: 0.5; cursor: not-allowed; }

.tool-check { display: flex; align-items: flex-start; gap: 0.75rem; min-height: 44px; padding: 0.55rem 0; cursor: pointer; line-height: 1.45; }
.tool-check input { flex: none; width: 22px; height: 22px; margin: 0.05rem 0 0; accent-color: var(--color-lime); }

/* Buttons on the workbench: lime is the one primary action, ghost for the rest */
.tool-actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.tool .btn { min-height: 48px; white-space: normal; text-align: center; line-height: 1.2; padding-block: 0.6rem; }
.btn--ink { background: var(--color-lime); color: var(--color-ink); }
a.btn--ink { color: var(--color-ink); }
.btn--ghost { border-color: var(--color-line-strong); color: var(--color-text); background: transparent; }
.btn--ghost:hover { border-color: var(--color-lime); }
.btn--ghost[aria-pressed="true"] { background: var(--color-text); color: var(--color-ink); border-color: var(--color-text); }
.tool .btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.tool .btn[aria-busy="true"] { cursor: progress; opacity: 0.8; }
.btn__icon { width: 18px; height: 18px; flex: none; fill: currentColor; }

/* The question / the result */
.tool-stage {
  display: grid; gap: var(--space-md);
  padding: clamp(1.1rem, 3.5vw, 2rem);
  border-radius: var(--radius-lg);
  background: var(--color-card-2); border: 1px solid var(--color-line-strong);
}
.tool-q { font-size: clamp(1.3rem, 2.6vw + 0.6rem, 2rem); font-weight: 500; line-height: 1.22; letter-spacing: -0.025em; color: var(--color-text); }
.tool-q:focus { outline: none; }
.tool-q.is-hidden-text { filter: blur(7px); user-select: none; }
.tool-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tool-chip {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 0.7rem;
  border-radius: var(--radius-pill); background: var(--color-veil); color: var(--color-text-muted);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.02em;
}
.tool-chip--lime { background: var(--color-lime); color: var(--color-ink); }
.tool-tip { padding: var(--space-sm) var(--space-md); border-left: 3px solid var(--color-lime); background: var(--color-lime-wash); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: var(--text-sm); line-height: 1.55; color: var(--color-text-soft); }
.tool-tip strong { color: var(--color-text); }

/* Timer (the tools set the bar width every 250 ms) */
.tool-timer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); }
.tool-timer__time { font-size: var(--text-lg); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--color-text); min-width: 4ch; }
.tool-bar { flex: 1 1 10rem; height: 8px; border-radius: var(--radius-pill); background: var(--color-veil-2); overflow: hidden; }
.tool-bar > span { display: block; height: 100%; width: 0; background: var(--color-lime); border-radius: inherit; transition: width 250ms linear; }
.tool-bar.is-over > span { background: var(--color-warn); }
@media (prefers-reduced-motion: reduce) { .tool-bar > span { transition: none; } }

/* Notices */
.tool-note { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); background: var(--color-veil); font-size: var(--text-sm); line-height: 1.55; color: var(--color-text-soft); }
.tool-note--warn { background: var(--color-warn-wash); border-left: 4px solid var(--color-warn); color: var(--color-text); }
.tool-note[hidden], .tool [hidden] { display: none !important; }
.js .tool-nojs { display: none; }

/* History / lists */
.tool-list { margin: 0; padding-left: 1.4rem; display: grid; gap: 0.45rem; line-height: 1.5; color: var(--color-text-soft); }
ol.tool-list { list-style: decimal; }   /* base.css strips list-style from lists with a class */
ul.tool-list { list-style: disc; }
.tool-list li::marker { color: var(--color-lime); font-weight: 700; }
.tool-summary { display: grid; gap: var(--space-md); }
.tool-summary--list { list-style: none; margin: 0; padding: 0; }
.tool-summary__item { padding: var(--space-md); border-radius: var(--radius-md); background: var(--color-card-2); border: 1px solid var(--color-line); display: grid; gap: 0.5rem; }
.tool-summary__item h3 { font-size: var(--text-base); line-height: 1.4; }
.tool-summary__item audio { width: 100%; max-width: 28rem; height: 44px; }
.tool-history summary, .tool details summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; color: var(--color-text); }
#sim-run { display: grid; gap: var(--space-md); }
#sim-run[hidden] { display: none; }
.tool-progress { font-size: var(--text-sm); font-weight: 700; color: var(--color-text-muted); letter-spacing: 0.02em; }
.tool-rec { display: inline-flex; align-items: center; gap: 0.45rem; font-size: var(--text-sm); font-weight: 700; color: var(--color-rec); }
.tool-rec::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }   /* pages.js pulses it */

/* ---------- Result call to action (shown by the tool once there is a result) ---------- */
.tool-cta {
  display: grid; gap: var(--space-sm); justify-items: start;
  padding: clamp(1.25rem, 3.5vw, 2rem);
  border-radius: var(--radius-lg);
  background: var(--color-lime); color: var(--color-ink);
}
.tool-cta h2, .tool-cta h3 { color: var(--color-ink); font-size: var(--text-lg); }
.tool-cta p { color: var(--color-ink-soft); max-width: 52ch; }
.tool-cta .small { color: var(--color-ink-soft); }
.tool-cta a:not(.btn) { color: var(--color-ink); font-weight: 700; text-decoration-color: var(--color-purple); text-decoration-thickness: 2px; }
.tool-cta .btn--lime { background: var(--color-ink); color: var(--color-lime); }
.tool-cta :focus-visible { outline-color: var(--color-ink); }
.tool-cta .tool-actions { margin-top: var(--space-xs); gap: var(--space-sm) var(--space-lg); }

@media (min-width: 40rem) {
  .tool-fields { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
}
@media (max-width: 22rem) {
  .tool-actions .btn { flex: 1 1 100%; }
}