/* ValleyFill free tools (/tools/). Same-origin, no web fonts. Uses the site variables from /styles.css. */
.tool-panel { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.25rem; margin: 1.5rem 0; max-width: 52rem; }
.tool-panel fieldset { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: .75rem 1rem 1rem; margin: 0 0 1rem; }
.tool-panel legend { font-weight: 700; padding: 0 .35rem; }
.tool-field { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: .35rem 0; }
.tool-field label { font-weight: 600; min-width: 9rem; }
.tool-field input[type="text"] { font: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; width: 9rem; padding: .45rem .55rem; border: 2px solid var(--color-control); border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-text); }
.tool-field input[type="color"] { width: 44px; height: 44px; padding: 2px; border: 2px solid var(--color-control); border-radius: var(--radius-sm); background: var(--color-bg); cursor: pointer; }
.tool-panel textarea { font: inherit; width: 100%; min-height: 14rem; padding: .6rem .7rem; border: 2px solid var(--color-control); border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-text); box-sizing: border-box; }
.tool-panel input:focus-visible, .tool-panel textarea:focus-visible, .tool-panel button:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.tool-field .field-error, .tool-error { color: #a4001d; font-weight: 600; margin: .2rem 0; flex: 1 1 100%; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tool-field .field-error, :root:not([data-theme="light"]) .tool-error, :root:not([data-theme="light"]) .tos-accept .field-error { color: #ff9aa8; } }
:root[data-theme="dark"] .tool-field .field-error, :root[data-theme="dark"] .tool-error, :root[data-theme="dark"] .tos-accept .field-error { color: #ff9aa8; }
.tool-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .5rem; }
.tool-results { margin: 1.25rem 0; max-width: 52rem; }
.tool-results[hidden], .tool-preview[hidden] { display: none; }
.ratio-big { font-size: 2.2rem; font-weight: 800; margin: .25rem 0 .75rem; }
.result-table { border-collapse: collapse; width: 100%; margin: .5rem 0 1rem; }
.result-table th, .result-table td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.result-table th[scope="col"] { background: var(--color-band); color: var(--color-on-dark); }
.verdict { font-weight: 700; }
.tool-preview { border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1rem 1.25rem; margin: 1rem 0; }
.tool-preview .pv-normal { font-size: 1rem; margin: 0 0 .5rem; }
.tool-preview .pv-large { font-size: 1.5rem; margin: 0 0 .75rem; }
.tool-preview .pv-button { display: inline-block; font: inherit; font-weight: 700; padding: .5rem 1rem; border: 2px solid; border-radius: var(--radius-sm); background: transparent; cursor: default; }
.limits { border-left: 4px solid var(--color-primary); padding: .5rem 1rem; background: var(--color-surface); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; max-width: 52rem; }
.long-sentences li { margin: .5rem 0; }
.long-sentences .wc { font-weight: 700; }
.privacy-note { font-size: .95rem; max-width: 52rem; }
/* Reserved space for a possible future display ad. Empty on purpose: no ad script, no publisher ID. */
.ad-slot { display: block; min-height: 0; margin: 2rem auto 0; max-width: var(--max-width); }
.tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; margin: 1rem 0 2rem; padding: 0; list-style: none; }
.tools-grid > li { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1rem 1.25rem; }
.tools-grid h3 { margin-top: 0; font-size: 1.2rem; }
.tools-grid .where { color: var(--color-muted); font-size: .92rem; }
.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; }