/* Reuse the site's cards, controls, typography, and action buttons. */
.practical-tool-page .utility-form-grid { align-items: start; }
.practical-tool-page .field-control { min-width: 0; }
.practical-tool-page .field-control input,
.practical-tool-page .field-control select,
.practical-tool-page .field-control textarea { width: 100%; min-height: 44px; box-sizing: border-box; }
.practical-tool-page input[type="color"] { padding: 4px; }
.practical-tool-page .pt-wide { grid-column: 1 / -1; }
.pt-output { display: block; width: 100%; box-sizing: border-box; margin-top: 8px; font-family: monospace; line-height: 1.6; resize: vertical; white-space: pre-wrap; overflow-wrap: anywhere; }
.pt-preview { padding: 28px 16px; margin-bottom: 20px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--ui-radius-control); }
.pt-preview[hidden] { display: none; }
.pt-sample { max-width: 100%; box-sizing: border-box; overflow-wrap: anywhere; }
.pt-gradient { height: 120px; }
.pt-shadow { padding: 24px; margin: 30px; background: var(--surface); text-align: center; }
.pt-button { display: inline-block; border: 1px solid currentColor; min-height: 44px; }
.pt-swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 12px; }
.pt-color-chip { height: 88px; margin-bottom: 8px; border: 1px solid var(--border); border-radius: var(--ui-radius-control); }
.pt-example-output { padding: 16px; background: var(--surface-muted); border: 1px solid var(--border); border-radius: var(--ui-radius-control); white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; font-size: 0.875rem; }
.practical-tool-page .tool-info-section li { margin-bottom: 8px; overflow-wrap: anywhere; }
.practical-tool-page [data-practical-example] li { white-space: pre-wrap; }