/*
 * Tool widget (.tool-widget--v2) — rendered by class-tool-renderer.php,
 * hydrated by tools-runtime.js, extended by pwa.js (star, embed).
 *
 * THE SCREENSHOT SURFACE: capture-widget.js screenshots `.tool-widget`, so a
 * change here changes every tool image. After editing, recapture:
 *   python scripts/capture_tool_screenshots.py --all --force
 *   node scripts/verify_tools_live.js --all
 *
 * Colors: --td-* tokens only (theme palette, or td-fallback.css).
 * CLS: every result slot is server-rendered with a reserved height; the star
 * that pwa.js adds is absolutely positioned, so nothing moves after load.
 */
.tool-widget{position:relative;margin:0 0 var(--wp--preset--spacing--50,1.5rem);padding:20px;background:var(--td-surface-1);border:1px solid var(--td-outline-variant);border-radius:var(--td-radius-l,16px);color:var(--td-text)}
@media (min-width:640px){.tool-widget{padding:24px}}

/* Form: short controls flow into columns; long ones span the row. The
   wrapper only matters in the split layout (a column for the sticky form). */
.tool-widget__inputs{display:contents}
.tool-widget__form{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px;margin:0;padding-right:44px}
.tool-widget__input{display:flex;flex-direction:column;gap:6px;min-width:0}
.tool-widget__input[hidden],.tool-widget__error[hidden]{display:none}
.tool-widget__input--textarea,.tool-widget__input--toggle,.tool-widget .tool-list{grid-column:1/-1}
.tool-widget--long .tool-widget__form{padding-right:0}
.tool-widget__label{font-size:.875rem;font-weight:500;line-height:1.4;color:var(--td-text);padding:0}
.tool-widget__unit{font-weight:400;color:var(--td-text-muted);margin-left:4px}
.tool-widget .tool-widget__field{width:100%;min-height:var(--td-control-h,44px);margin:0;padding:.5rem .75rem;font:inherit;font-size:1rem;color:var(--td-text);background:var(--td-surface);border:1px solid var(--td-outline);border-radius:var(--td-radius-s,8px);box-shadow:none}
.tool-widget textarea.tool-widget__field{min-height:9rem;resize:vertical;line-height:1.5}
.tool-widget .tool-widget__field:focus{outline:0;border-color:var(--td-focus);box-shadow:0 0 0 1px var(--td-focus)}
.tool-widget .tool-widget__field[aria-invalid=true]{border-color:var(--td-error);box-shadow:0 0 0 1px var(--td-error)}
.tool-widget__help{margin:0;font-size:.8125rem;line-height:1.45;color:var(--td-text-muted)}
.tool-widget__error{margin:0;font-size:.8125rem;font-weight:500;color:var(--td-error)}

/* Local file reader (accept_file) */
.td-file{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:4px}
.td-file__input{position:absolute;inset:0;width:1px;height:1px;opacity:0;overflow:hidden}
.td-file__btn{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border:1px solid var(--td-outline);border-radius:var(--td-radius-pill,999px);font-size:.8125rem;font-weight:500;color:var(--td-text);background:var(--td-surface);cursor:pointer}
.td-file__btn svg{width:16px;height:16px}
.td-file:hover .td-file__btn{background:var(--td-surface-2)}
.td-file__input:focus-visible+.td-file__btn{outline:2px solid var(--td-focus);outline-offset:2px}
.td-file__name{font-size:.8125rem;color:var(--td-text-muted);overflow-wrap:anywhere}

/* Repeating rows */
.tool-widget .tool-list{border:0;margin:0;padding:0;min-width:0}
.tool-list legend{margin-bottom:6px}
.tool-list__scroll,.tool-result__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tool-list__table{width:100%;border-collapse:collapse;margin:0}
.tool-list__table th{padding:0 4px 4px;border:0;background:none;text-align:left;font-size:.8125rem;font-weight:500;color:var(--td-text-muted)}
.tool-list__table td{padding:4px;border:0;vertical-align:top}
.tool-list__table .tool-widget__field{min-width:6rem}
.tool-widget .tool-list__remove{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:var(--td-radius-pill,999px);background:transparent;color:var(--td-text-muted);font-size:1.25rem;line-height:1;cursor:pointer}
.tool-widget .tool-list__remove:hover{background:var(--td-surface-2);color:var(--td-text)}
.tool-widget .tool-list__add{margin-top:8px;min-height:40px;padding:0 16px;border:1px dashed var(--td-outline);border-radius:var(--td-radius-pill,999px);background:transparent;color:var(--td-text);font:inherit;font-size:.875rem;font-weight:500;cursor:pointer}
.tool-widget .tool-list__add:hover{background:var(--td-surface-2)}
@media (max-width:480px){.tool-list__table td{padding:4px 2px}.tool-list__table .tool-widget__field{min-width:4.5rem}.tool-widget .tool-list__remove{width:36px}}

/* Result */
.tool-result{margin-top:20px;padding:16px;background:var(--td-surface);border:1px solid var(--td-outline-variant);border-radius:var(--td-radius-m,12px)}
.tool-result__label{display:block;font-size:.8125rem;font-weight:500;color:var(--td-text-muted)}
.tool-result__line{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;min-height:2.75rem}
.tool-result__value{font-size:clamp(1.625rem,1.3rem + 1.4vw,2.25rem);font-weight:600;letter-spacing:-.02em;line-height:1.2;color:var(--td-text);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.tool-result[data-has-result="0"] .tool-result__value{color:var(--td-text-muted)}
.tool-result__unit{font-size:1rem;font-weight:500;color:var(--td-text-muted)}
.tool-result__stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,7.5rem),1fr));gap:8px;margin:14px 0 0}
.tool-result__stat{display:flex;flex-direction:column;justify-content:space-between;gap:2px;padding:10px 12px;background:var(--td-surface-1);border-radius:var(--td-radius-s,8px)}
.tool-result__stat dt{font-size:.75rem;font-weight:500;color:var(--td-text-muted)}
.tool-result__stat dd{margin:0;font-size:1.0625rem;font-weight:600;color:var(--td-text);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.tool-result__table,.tool-result__steps,.tool-result__warnings{margin-top:14px}
.tool-result__table[hidden],.tool-result__steps[hidden],.tool-result__warnings[hidden]{display:none}
.tool-result__table table,.tool-conversion-table table{width:100%;border-collapse:collapse;margin:0;font-size:.875rem;font-variant-numeric:tabular-nums}
.tool-result__table :is(th,td),.tool-conversion-table :is(th,td){padding:8px 10px;border:0;border-bottom:1px solid var(--td-outline-variant);text-align:right}
.tool-result__table :is(th,td):first-child,.tool-conversion-table :is(th,td):first-child{text-align:left}
.tool-result__table th,.tool-conversion-table th{font-weight:500;color:var(--td-text-muted);background:none}
.tool-result__steps summary{display:inline-flex;align-items:center;min-height:36px;font-size:.875rem;font-weight:500;color:var(--td-link);cursor:pointer}
.tool-result__steps ol{margin:6px 0 0;padding-left:1.25rem;font-size:.9375rem;color:var(--td-text);font-variant-numeric:tabular-nums}
.tool-result__warnings{margin-bottom:0;padding:10px 12px 10px 2rem;border-radius:var(--td-radius-s,8px);background:var(--td-warning-container);color:var(--td-text);font-size:.875rem}

/* Actions: tonal primary, quiet secondaries. Hidden until there is a result
   (visibility, not display — the row keeps its height, so no shift). */
.tool-result__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.tool-result[data-has-result="0"] .tool-result__actions{visibility:hidden}
.tool-widget .tool-result__action{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 16px;border:1px solid var(--td-outline-variant);border-radius:var(--td-radius-pill,999px);background:var(--td-surface);color:var(--td-text);font:inherit;font-size:.875rem;font-weight:500;line-height:1;cursor:pointer;transition:background-color var(--td-dur,.15s) var(--td-ease,ease)}
.tool-widget .tool-result__action:hover{background:var(--td-surface-2)}
.tool-widget .tool-result__action[data-action=copy]{border-color:transparent;background:var(--td-primary-container);color:var(--td-on-primary-container)}
.tool-widget .tool-result__action[data-action=copy]:hover{background:color-mix(in oklch,var(--td-primary-container) 80%,var(--td-primary))}
.tool-widget .tool-result__action--primary,.tool-widget .tool-result__action--primary:hover{border-color:transparent;background:var(--td-primary);color:var(--td-on-primary)}
.tool-widget .tool-result__action--primary:hover{background:var(--td-primary-hover)}
.tool-widget .tool-result__action--quiet{border-color:transparent;background:transparent;color:var(--td-text-muted)}
.tool-widget .tool-result__action:focus-visible{outline:2px solid var(--td-focus);outline-offset:2px}

/* Report a problem / embed (script-injected) */
.tool-report{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;margin-top:12px;font-size:.8125rem;color:var(--td-text-muted)}
.tool-widget .tool-report__link{min-height:32px;padding:0;border:0;background:none;color:var(--td-text-muted);font:inherit;font-size:.8125rem;text-decoration:underline;text-underline-offset:.18em;cursor:pointer}
.tool-widget .tool-report__link:hover{color:var(--td-text)}
.tool-report__form{flex-basis:100%;margin-top:6px;padding:14px;border-radius:var(--td-radius-m,12px);background:var(--td-surface);border:1px solid var(--td-outline-variant);color:var(--td-text)}
.tool-report__form fieldset{display:flex;flex-wrap:wrap;gap:8px 16px;margin:0 0 10px;padding:0;border:0}
.tool-report__form legend{margin-bottom:6px;font-weight:500}
.tool-report__form label{display:inline-flex;align-items:center;gap:6px;min-height:32px}
.tool-report__note{display:block}
.tool-report__note textarea{display:block;width:100%;min-height:4.5rem;margin-top:4px}
.tool-report__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.tool-report__actions{display:flex;gap:8px;margin-top:10px}
.tool-widget :is(.tool-report__send,.tool-report__cancel){min-height:36px;padding:0 16px;border-radius:var(--td-radius-pill,999px);font:inherit;font-size:.8125rem;font-weight:500;cursor:pointer}
.tool-widget .tool-report__send{border:0;background:var(--td-primary);color:var(--td-on-primary)}
.tool-widget .tool-report__cancel{border:1px solid var(--td-outline-variant);background:transparent;color:var(--td-text)}
.td-embed-code{flex-basis:100%}
.td-embed-code__text{width:100%;min-height:0;font-family:var(--td-font-mono,monospace);font-size:.75rem}

/* Save-to-my-tools star (pwa.js) — absolutely placed: no layout shift */
.tool-widget .td-fav{position:absolute;top:12px;right:12px;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:0;border-radius:var(--td-radius-pill,999px);background:transparent;color:var(--td-text-muted);cursor:pointer}
.tool-widget .td-fav svg{width:20px;height:20px;fill:none}
.tool-widget .td-fav:hover{background:var(--td-surface-2);color:var(--td-text)}
.tool-widget .td-fav[aria-pressed=true]{color:var(--td-primary)}
.tool-widget .td-fav[aria-pressed=true] svg{fill:currentColor}
.tool-widget .td-fav:focus-visible{outline:2px solid var(--td-focus);outline-offset:2px}

/* Toast (runtime + pwa.js) */
.tool-toast{position:fixed;left:50%;bottom:24px;z-index:1000;transform:translate(-50%,8px);max-width:calc(100% - 32px);padding:10px 16px;border-radius:var(--td-radius-s,8px);background:var(--td-text);color:var(--td-surface);font-size:.875rem;font-weight:500;box-shadow:var(--td-shadow);opacity:0;transition:opacity .2s,transform .2s;pointer-events:none}
.tool-toast-visible{opacity:1;transform:translate(-50%,0)}

/* Install suggestion (pwa.js) — shown only after tool use, so it lives with the widget */

/* ── Contract 2.1 controls (Material 3 shapes, theme tokens) ──────────── */

/* Field groups: a titled section of the form. */
.tool-widget__group{grid-column:1/-1;min-width:0;margin:0;padding:0;border:0}
.tool-widget__group+.tool-widget__group{padding-top:16px;border-top:1px solid var(--td-outline-variant)}
/* A floated legend leaves the fieldset border, so the divider above a group stays a plain line. */
.tool-widget__group-title{float:left;width:100%;padding:0;margin:0 0 12px;font-size:.9375rem;font-weight:600;color:var(--td-text)}
.tool-widget__group-body{clear:both}
.tool-widget__group-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px}
fieldset.tool-widget__input{min-width:0;margin:0;padding:0;border:0}
fieldset.tool-widget__input>legend{float:left;width:100%;margin-bottom:6px}
fieldset.tool-widget__input>legend+*{clear:both}
.tool-widget__input--radio,.tool-widget__input--chips,.tool-widget__input--slider,.tool-widget__input--checkbox{grid-column:1/-1}

/* Field with adornments: the wrapper carries the border, the box inside is bare. */
.tool-widget .tw-field{display:flex;align-items:stretch;min-height:var(--td-control-h,44px);background:var(--td-surface);border:1px solid var(--td-outline);border-radius:var(--td-radius-s,8px);overflow:hidden}
.tool-widget .tw-field:focus-within{border-color:var(--td-focus);box-shadow:0 0 0 1px var(--td-focus)}
.tool-widget .tw-field:has([aria-invalid=true]){border-color:var(--td-error);box-shadow:0 0 0 1px var(--td-error)}
.tool-widget .tw-field .tool-widget__field{flex:1;min-width:0;min-height:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.tool-widget .tw-field .tool-widget__field:focus{box-shadow:none}
.tw-field__affix{display:flex;align-items:center;padding:0 0 0 .75rem;color:var(--td-text-muted);font-size:.9375rem;white-space:nowrap}
.tw-field__affix+.tool-widget__field{padding-left:.375rem}
.tool-widget__field+.tw-field__affix{padding:0 .75rem 0 0}
.tool-widget .tw-field .tw-field__unit{flex:none;width:auto;min-width:4.5rem;min-height:0;margin:0;padding:0 2rem 0 .75rem;border:0;border-left:1px solid var(--td-outline-variant);border-radius:0;background-color:var(--td-surface-1);font-size:.9375rem;font-weight:500;box-shadow:none}

/* Stepper: − box + */
.tool-widget .tw-stepper .tool-widget__field{text-align:center}
.tool-widget .tw-stepper__btn{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;padding:0;border:0;background:transparent;color:var(--td-text);cursor:pointer}
.tool-widget .tw-stepper__btn:hover{background:var(--td-surface-2)}
.tool-widget .tw-stepper__btn:focus-visible{outline:2px solid var(--td-focus);outline-offset:-2px}

/* Slider: M3 track + handle, with the exact value in a box beside it. */
.tw-slider{display:flex;align-items:center;gap:16px}
.tw-slider__box{flex:none;width:8.5rem}
.tool-widget .tw-slider__range{flex:1;min-width:0;height:44px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer;--p:50%}
.tw-slider__range::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(to right,var(--td-primary) var(--p),var(--td-primary-container) var(--p))}
.tw-slider__range::-moz-range-track{height:6px;border-radius:3px;background:linear-gradient(to right,var(--td-primary) var(--p),var(--td-primary-container) var(--p))}
.tw-slider__range::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-7px;border:0;border-radius:50%;background:var(--td-primary);box-shadow:0 0 0 0 color-mix(in srgb,var(--td-primary) 18%,transparent);transition:box-shadow var(--td-dur,.15s) var(--td-ease,ease)}
.tw-slider__range::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;background:var(--td-primary)}
.tw-slider__range:hover::-webkit-slider-thumb,.tw-slider__range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 10px color-mix(in srgb,var(--td-primary) 14%,transparent)}
.tool-widget .tw-slider__range:focus-visible{outline:0}
.tw-slider__range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 10px color-mix(in srgb,var(--td-primary) 14%,transparent)}
@media (max-width:479px){.tw-slider{flex-wrap:wrap;gap:4px 12px}.tw-slider__range{flex-basis:100%}.tw-slider__box{width:100%}}

/* Switch (toggle) */
.tw-switch{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;font-size:.9375rem;font-weight:500;cursor:pointer}
.tw-switch__input,.tw-checkbox__input,.tw-seg__input,.tw-cards__input,.tw-chips__input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.tw-switch__track{position:relative;flex:none;width:52px;height:32px;border:2px solid var(--td-outline);border-radius:16px;background:var(--td-surface-2);transition:background-color var(--td-dur,.15s) var(--td-ease,ease),border-color var(--td-dur,.15s)}
.tw-switch__thumb{position:absolute;top:50%;left:6px;width:16px;height:16px;border-radius:50%;background:var(--td-outline);transform:translateY(-50%);transition:all var(--td-dur,.15s) var(--td-ease,ease)}
.tw-switch__input:checked+.tw-switch__track{border-color:var(--td-primary);background:var(--td-primary)}
.tw-switch__input:checked+.tw-switch__track .tw-switch__thumb{left:22px;width:24px;height:24px;background:var(--td-on-primary)}
.tw-switch__input:focus-visible+.tw-switch__track{outline:2px solid var(--td-focus);outline-offset:2px}

/* Checkbox */
.tw-checkbox{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-size:.9375rem;font-weight:500;cursor:pointer}
.tw-checkbox__box{flex:none;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border:2px solid var(--td-text-muted);border-radius:2px;transition:background-color var(--td-dur,.15s)}
.tw-checkbox__box svg,.tw-check{width:14px;height:14px;fill:none;stroke:var(--td-on-primary);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.tw-checkbox__input:checked+.tw-checkbox__box{border-color:var(--td-primary);background:var(--td-primary)}
.tw-checkbox__input:checked+.tw-checkbox__box svg{opacity:1}
.tw-checkbox__input:focus-visible+.tw-checkbox__box{outline:2px solid var(--td-focus);outline-offset:4px}

/* Radio as a segmented button (≤ 4 short options) */
.tw-seg{display:flex;flex-wrap:wrap}
.tw-seg__opt{display:flex;flex:1 1 0;min-width:max-content;position:relative}
/* flex:1 on the box + flex on the option: every segment takes the row's height, so a wrapped label never leaves its neighbour short. */
.tw-seg__box{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:6px 14px;line-height:1.3;text-align:center;border:1px solid var(--td-outline);margin-left:-1px;font-size:.875rem;font-weight:500;color:var(--td-text);cursor:pointer;transition:background-color var(--td-dur,.15s)}
.tw-seg__opt:first-child .tw-seg__box{margin-left:0;border-radius:20px 0 0 20px}
.tw-seg__opt:last-child .tw-seg__box{border-radius:0 20px 20px 0}
.tw-seg__opt:only-child .tw-seg__box{border-radius:20px}
.tw-seg__box:hover{background:var(--td-surface-2)}
.tw-seg .tw-check{width:16px;height:0;stroke:var(--td-on-primary-container);transition:width var(--td-dur,.15s)}
.tw-seg__input:checked+.tw-seg__box{background:var(--td-primary-container);color:var(--td-on-primary-container)}
.tw-seg__input:checked+.tw-seg__box .tw-check{height:16px;opacity:1}
.tw-seg__input:focus-visible+.tw-seg__box{outline:2px solid var(--td-focus);outline-offset:-3px}
/* Phones: four labels do not fit one row, so the segments become a 2-column grid of rounded buttons. */
@media (max-width:479px){.tw-seg:has(.tw-seg__opt:nth-child(3)){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.tw-seg:has(.tw-seg__opt:nth-child(3)) .tw-seg__box{margin:0;border-radius:10px!important}.tw-seg__opt{min-width:0}}

/* Radio as cards (options with a description) */
.tw-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:8px}
.tw-cards__box{display:flex;align-items:flex-start;gap:12px;height:100%;padding:12px 14px;border:1px solid var(--td-outline-variant);border-radius:var(--td-radius-m,12px);background:var(--td-surface);cursor:pointer;transition:border-color var(--td-dur,.15s),background-color var(--td-dur,.15s)}
.tw-cards__box:hover{background:var(--td-surface-2)}
.tw-cards__dot{flex:none;width:20px;height:20px;margin-top:1px;border:2px solid var(--td-text-muted);border-radius:50%}
.tw-cards__text{display:flex;flex-direction:column;gap:2px}
.tw-cards__label{font-size:.9375rem;font-weight:500}
.tw-cards__note{font-size:.8125rem;color:var(--td-text-muted);line-height:1.4}
.tw-cards__input:checked+.tw-cards__box{border-color:var(--td-primary);background:color-mix(in srgb,var(--td-primary-container) 55%,var(--td-surface))}
.tw-cards__input:checked+.tw-cards__box .tw-cards__dot{border-color:var(--td-primary);box-shadow:inset 0 0 0 3px var(--td-surface),inset 0 0 0 10px var(--td-primary)}
.tw-cards__input:focus-visible+.tw-cards__box{outline:2px solid var(--td-focus);outline-offset:2px}

/* Chips (multi-select, M3 filter chips) */
.tw-chips{display:flex;flex-wrap:wrap;gap:8px}
.tw-chips__opt{position:relative}
.tw-chips__box{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border:1px solid var(--td-outline);border-radius:var(--td-radius-s,8px);font-size:.875rem;font-weight:500;color:var(--td-text);cursor:pointer;transition:background-color var(--td-dur,.15s)}
.tw-chips__box:hover{background:var(--td-surface-2)}
.tw-chips .tw-check{width:0;height:16px;stroke:var(--td-on-primary-container);transition:width var(--td-dur,.15s)}
.tw-chips__input:checked+.tw-chips__box{padding-left:10px;border-color:transparent;background:var(--td-primary-container);color:var(--td-on-primary-container)}
.tw-chips__input:checked+.tw-chips__box .tw-check{width:16px;opacity:1}
.tw-chips__input:focus-visible+.tw-chips__box{outline:2px solid var(--td-focus);outline-offset:2px}

/* ── Charts (tools-viz.js draws into the reserved box) ─────────────────── */
.tool-result__viz{display:grid;gap:12px;margin-top:14px;--td-viz-1:var(--td-primary)}
@media (min-width:900px){.tool-widget:not(.tool-widget--split) .tool-result__viz:has(.tool-viz+.tool-viz){grid-template-columns:1fr 1fr}}
.tool-viz{min-width:0;margin:0;padding:12px 14px 10px;background:var(--td-surface-1);border-radius:var(--td-radius-m,12px)}
.tool-viz__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 8px;min-height:32px;margin-bottom:6px}
.tool-viz__title{flex:1 1 14rem;font-size:.8125rem;font-weight:600;color:var(--td-text)}
.tool-viz__tools{display:inline-flex;align-items:center;gap:2px;color:var(--td-text-muted)}
.tool-viz__dl{margin-right:2px}
.tool-widget .tool-viz__btn{min-height:28px;padding:0 8px;border:0;border-radius:var(--td-radius-pill,999px);background:transparent;color:var(--td-text-muted);font:inherit;font-size:.75rem;font-weight:600;cursor:pointer}
.tool-widget .tool-viz__btn:hover{background:var(--td-surface-3,var(--td-surface-2));color:var(--td-text)}
.tool-widget .tool-viz__btn:focus-visible{outline:2px solid var(--td-focus);outline-offset:1px}
.tool-viz[data-empty="1"] .tool-viz__tools{visibility:hidden}
/* Reserved heights per type: the chart lands in place (CLS 0). */
.tool-viz__canvas{position:relative;min-height:var(--viz-h,240px)}
.tool-viz--scale{--viz-h:88px}.tool-viz--gauge{--viz-h:210px}.tool-viz--progress{--viz-h:152px}.tool-viz--progress-bar{--viz-h:44px}
.tool-viz--donut{--viz-h:180px}.tool-viz--bar{--viz-h:180px}.tool-viz--line,.tool-viz--stacked{--viz-h:250px}
.tool-viz__ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:1px dashed var(--td-outline-variant);border-radius:var(--td-radius-s,8px);color:var(--td-text-muted);font-size:.8125rem;text-align:center}
.tool-viz[data-empty="0"] .tool-viz__ph,.tool-viz[data-empty="1"] .tool-viz__svg,.tool-viz[data-empty="1"] .tool-viz__data{display:none}
.tool-viz--progress-bar .tool-viz__ph,.tool-viz--scale .tool-viz__ph{flex-direction:row}
.tool-viz__svg{display:block;width:100%;height:auto;overflow:visible;touch-action:pan-y}
.tool-viz__tip{position:absolute;top:8px;left:0;z-index:2;max-width:16rem;padding:8px 10px;border-radius:var(--td-radius-s,8px);background:var(--td-surface);box-shadow:var(--td-shadow);color:var(--td-text);font-size:.75rem;line-height:1.5;font-variant-numeric:tabular-nums;opacity:0;pointer-events:none;transition:opacity .1s}
.tool-viz__tip i{display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:2px}
.tool-viz__data{margin-top:6px;font-size:.8125rem}
.tool-viz__data summary{display:inline-flex;align-items:center;min-height:32px;color:var(--td-link);font-weight:500;cursor:pointer}
.tool-viz__data table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.tool-viz__data :is(th,td){padding:6px 8px;border:0;border-bottom:1px solid var(--td-outline-variant);text-align:right}
.tool-viz__data :is(th,td):first-child{text-align:left}
.tool-viz__data th{font-weight:500;color:var(--td-text-muted)}

/* ── Split widget: inputs beside results (layout "split" / "band") ────── */
@media (min-width:900px){
	.tool-widget--split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:28px;align-items:start}
	/* The column stretches to the result card's height and the form sticks inside it,
	   so it stops where the result ends and never slides over the report row. */
	.tool-widget--split>.tool-widget__inputs{display:block;align-self:stretch;min-width:0}
	.tool-widget--split .tool-widget__form{grid-template-columns:1fr;padding-right:0;position:sticky;top:16px}
	.tool-widget--split .tool-widget__group-body{grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr))}
	.tool-widget--split>.tool-result{margin-top:0;padding-right:52px}
	.tool-widget--split>.tool-report{grid-column:1/-1;margin-top:0}
}