/*
  UtilityWizard browser-tool system.
  This is the production source of truth for every tool card and preview.
  A generated tool may add only genuinely tool-specific layout rules.
*/
.uw-tool-card,
.uw-file-imports,
.uw-tool {
  --uw-color-text: var(--text, #30232d);
  --uw-color-muted: var(--muted, #695b65);
  --uw-color-border: var(--line, #e4d7df);
  --uw-color-surface: #ffffff;
  --uw-color-soft: var(--accent-soft, #f8eaf1);
  --uw-color-accent: var(--accent, #a32258);
  --uw-color-accent-strong: var(--accent-2, #7e1944);
  --uw-color-success: var(--uw-color-accent);
  --uw-color-warning: #9a6700;
  --uw-color-danger: #b42318;
  --uw-color-error: #b42318;
  --uw-radius-sm: 4px;
  --uw-radius-md: 6px;
  --uw-fw-regular: var(--fw-regular, 400);
  --uw-fw-medium: var(--fw-medium, 500);
  --uw-fw-semibold: var(--fw-semibold, 600);
  color: var(--uw-color-text);
  font-family: inherit;
}

.uw-tool,
.uw-tool * { box-sizing: border-box; min-width: 0; }
.uw-tool { display: grid; gap: 20px; align-content: start; overflow-wrap: anywhere; }
.uw-tool section,.uw-tool form,.uw-tool fieldset,.uw-tool dl,.uw-tool p { margin: 0; }
.uw-tool fieldset { display: grid; gap: 12px; min-width: 0; padding: 0; border: 0; }
.uw-tool legend,.uw-tool h2,.uw-tool h3 { color: var(--uw-color-text); }
.uw-tool legend { margin: 0 0 8px; font-size: var(--type-small, 13px); font-weight: var(--uw-fw-medium); line-height: 1.5; }
.uw-tool h2 { margin: 0; font-size: var(--type-title, 20px); line-height: 1.25; letter-spacing: 0; }
.uw-tool h3 { margin: 0; font-size: var(--type-title, 20px); font-weight: var(--uw-fw-medium); line-height: 1.35; }
.uw-tool p,.uw-tool small,.uw-tool .uw-hint,.uw-tool .uw-note,.uw-tool .uw-example,.uw-tool .uw-status { color: var(--uw-color-muted); font-size: var(--type-body, 16px); line-height: 1.55; }
.uw-tool .uw-hint,.uw-tool .uw-note,.uw-tool .uw-example,.uw-tool .uw-status { font-size: var(--type-small, 13px); line-height: 1.6; }

.uw-tool .uw-form,.uw-tool .uw-fields,.uw-tool .uw-field,.uw-tool .uw-settings { display: grid; gap: 12px; }
.uw-tool .uw-field { align-content: start; }
.uw-tool .uw-form,.uw-tool .uw-fields,.uw-tool .uw-settings { gap: 16px; }
.uw-tool label.uw-field { display: grid; gap: 8px; }
.uw-tool label.uw-field > input,.uw-tool label.uw-field > select,.uw-tool label.uw-field > textarea { margin-top: 0; }
.uw-tool .uw-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.uw-tool .uw-options,.uw-tool .uw-rows { display: grid; gap: 10px; }
.uw-tool .uw-color-field,.uw-tool .uw-preview-wrap { display: grid; gap: 8px; }
.uw-tool .uw-color-input,.uw-tool .uw-speed-input { display: flex; align-items: center; gap: 10px; }
.uw-tool .uw-color-input input[type="text"] { flex: 1 1 auto; }
.uw-tool .uw-speed-input input { width: min(150px, 100%); }
.uw-tool .uw-speed-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.uw-tool .uw-speed-choices button { min-height: 38px; }
.uw-tool .uw-check { display: flex; align-items: center; gap: 8px; color: var(--uw-color-text); font-size: var(--type-body, 16px); font-weight: var(--uw-fw-regular); line-height: 1.5; }
.uw-tool .uw-check label { margin: 0; }
.uw-tool .uw-check:has(> label) { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; }
.uw-tool .uw-check > .uw-help { grid-column: 2; margin: 0; }
.uw-tool .uw-hidden { display: none !important; }
.uw-tool .uw-notice:empty,.uw-tool .uw-field-error:empty { display: none; }
.uw-tool label { display: block; margin: 0; color: var(--uw-color-text); font-size: var(--type-small, 13px); font-weight: var(--uw-fw-medium); line-height: 1.5; }
.uw-tool label > input,.uw-tool label > select,.uw-tool label > textarea { margin-top: 8px; }

.uw-tool input,.uw-tool select,.uw-tool textarea,.uw-tool button {
  min-height: 44px;
  border: 1px solid var(--uw-color-border);
  border-radius: 5px;
  font: inherit;
}
.uw-tool input,.uw-tool select,.uw-tool textarea { width: 100%; padding: 0 14px; background: var(--uw-color-surface); color: var(--uw-color-text); font-size: var(--type-body, 16px); font-weight: var(--uw-fw-regular); line-height: 1.4; }
/* Safari's native date/time controls must not impose their intrinsic width on a grid field. */
.uw-tool input[type="time"],.uw-tool input[type="date"],.uw-tool input[type="datetime-local"] {
  display: block;
  -webkit-appearance: none;
  appearance: none;
  min-inline-size: 0;
  max-inline-size: 100%;
  inline-size: 100%;
}
.uw-tool input::-webkit-date-and-time-value { min-width: 0; min-height: 1.4em; text-align: left; }
.uw-tool input::placeholder,.uw-tool textarea::placeholder { color: #737982; font-size: var(--type-body, 16px); font-weight: 400; opacity: 1; }
.uw-tool input[type="checkbox"],.uw-tool input[type="radio"] { width: 18px; min-width: 18px; min-height: 18px; flex: 0 0 18px; margin: 0; accent-color: var(--uw-color-accent); }
.uw-tool input[type="color"] { width: 48px; min-width: 48px; padding: 4px; cursor: pointer; }
.uw-tool input[type="file"] { padding: 8px; cursor: pointer; }
.uw-tool input[type="range"] { min-height: 28px; padding: 0; border: 0; accent-color: var(--uw-color-accent); cursor: pointer; }
.uw-tool output { color: var(--uw-color-text); font-weight: var(--uw-fw-medium); }
.uw-tool textarea { min-height: 128px; padding: 12px 14px; resize: vertical; }

.uw-tool button { display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; background: var(--uw-color-surface); color: var(--uw-color-text); font-weight: var(--uw-fw-medium); line-height: 1.2; cursor: pointer; transition: border-color .16s ease, background-color .16s ease, color .16s ease; }
.uw-tool button:hover { border-color: #b9c4d3; }
.uw-tool .uw-button-primary { border-color: var(--uw-color-accent); background: var(--uw-color-accent); color: #fff; }
.uw-tool .uw-button-primary:hover { border-color: var(--uw-color-accent-strong); background: var(--uw-color-accent-strong); }
.uw-tool .uw-button-secondary,.uw-tool .uw-button-tertiary { min-height: 44px; padding: 0 14px; border-color: var(--uw-color-border); background: var(--uw-color-surface); color: var(--uw-color-text); }
.uw-tool .uw-button-tertiary:hover { border-color: var(--uw-color-border); background: var(--uw-color-soft); }
.uw-tool button:disabled { cursor: not-allowed; opacity: .55; }
.uw-tool .uw-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0; }

.uw-tool .uw-result,.uw-tool #uw-result,[data-uw-result] { display: grid; align-content: start; gap: 14px; padding: 18px; border: 0; border-radius: 4px; background: var(--uw-color-soft); font-size: var(--type-body, 16px); line-height: 1.5; }
.uw-tool [hidden],.uw-tool .uw-result[hidden],.uw-tool #uw-result[hidden],[data-uw-result][hidden] { display: none !important; }
.uw-tool .uw-result dl,.uw-tool .uw-stats { display: grid; gap: 10px; }
.uw-tool .uw-result dl div,.uw-tool .uw-stats div { display: flex; justify-content: space-between; gap: 16px; padding-top: 10px; border-top: 1px solid var(--uw-color-border); }
.uw-tool .uw-stats > div:has(> span):not(:has(> :not(span, strong, small))) { display: block; }
.uw-tool .uw-stats > .uw-field { display: grid; justify-content: normal; gap: 4px; }
.uw-tool .uw-stats > div:not(.uw-field) > span:first-child + strong,
.uw-tool .uw-stats > div:not(.uw-field) > strong:first-child + span { margin-inline-start: .35em; }
.uw-tool .uw-result dt,.uw-tool .uw-result dd,.uw-tool .uw-stats dt,.uw-tool .uw-stats dd { margin: 0; }
.uw-tool .uw-result dt,.uw-tool .uw-stats dt { color: var(--uw-color-muted); font-size: var(--type-small, 13px); }
.uw-tool .uw-result dd,.uw-tool .uw-stats dd { color: var(--uw-color-text); font-size: var(--type-body, 16px); font-weight: var(--uw-fw-medium); font-variant-numeric: tabular-nums; text-align: right; }
.uw-tool .uw-result dl > div:first-child dd { color: var(--uw-color-accent-strong); font-size: var(--type-title, 20px); line-height: 1.3; }
.uw-tool .uw-result[data-result-state="empty"] dl dd,
.uw-tool .uw-result[data-result-state="empty"] dl > div:first-child dd { color: var(--uw-color-muted); font-size: var(--type-body, 16px); font-weight: var(--uw-fw-regular); line-height: 1.5; }
.uw-tool .uw-result dl > div { min-height: 38px; align-items: baseline; }
.uw-tool output.uw-status { color: var(--uw-color-muted); font-weight: 500; }
.uw-tool .uw-result-head { display: grid; gap: 4px; }
.uw-tool .uw-result-head h3 { font-size: var(--type-body, 16px); font-weight: var(--uw-fw-medium); line-height: 1.4; }
.uw-tool .uw-result-head output { font-size: var(--type-small, 13px); font-weight: var(--uw-fw-regular); line-height: 1.5; }
.uw-tool .uw-preview { display: block; min-height: 72px; padding: 16px; border: 1px solid var(--uw-color-border); border-radius: var(--uw-radius-sm); color: var(--uw-preview-text, var(--uw-color-text)); background: var(--uw-preview-bg, var(--uw-color-surface)); }
.uw-tool output.uw-preview { white-space: pre-wrap; overflow-wrap: anywhere; }
.uw-tool .uw-preview > p + p { margin-top: 1em; }
.uw-file-imports { display: grid; gap: 12px; margin-bottom: 20px; color: var(--uw-color-text); font: inherit; }
.uw-file-imports .uw-field { display: grid; gap: 6px; min-width: 0; }
.uw-file-imports p { margin: 0; color: var(--uw-color-muted); font-size: var(--type-small, 13px); line-height: 1.55; }
.uw-file-imports label { color: var(--uw-color-muted); font-size: var(--type-small, 13px); }
.uw-file-imports input[type="file"] { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; padding: 8px; border: 1px solid var(--uw-color-border); border-radius: var(--uw-radius-sm); background: var(--uw-color-surface); color: var(--uw-color-text); font: inherit; }
.uw-file-imports input::file-selector-button { margin-right: 8px; padding: 6px 10px; border: 1px solid var(--uw-color-border); border-radius: var(--uw-radius-sm); background: var(--uw-color-surface); color: var(--uw-color-text); font: inherit; cursor: pointer; }
.uw-tool ol.uw-preview,.uw-tool ul.uw-preview { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; list-style: none; }
.uw-tool ol.uw-preview > li,.uw-tool ul.uw-preview > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; min-width: 0; }
.uw-tool .uw-preview > li > code { min-width: 0; overflow-wrap: anywhere; }
.uw-tool .uw-preview > li > button { white-space: nowrap; }
.uw-tool .uw-preview table { width: 100%; border-collapse: collapse; }
.uw-tool .uw-preview { overflow-x: auto; }
.uw-tool .uw-preview caption { padding-bottom: 8px; text-align: left; font-size: var(--type-small, 13px); color: var(--uw-color-muted); }
.uw-tool .uw-preview th,.uw-tool .uw-preview td { padding: 6px 8px; text-align: left; vertical-align: top; }
.uw-tool .uw-preview thead { border-bottom: 1px solid var(--uw-color-border); }
.uw-tool .uw-formula,.uw-tool .uw-help { padding: 12px 0 0; border: 0; border-top: 1px solid var(--uw-color-border); background: transparent; border-radius: 0; font-size: var(--type-small, 13px); line-height: 1.6; }
.uw-tool .uw-notice { padding: 12px; border: 1px solid var(--uw-color-border); border-radius: var(--uw-radius-sm); background: var(--uw-color-surface); }
.uw-tool .uw-pass { color: var(--uw-color-success); }
.uw-tool .uw-fail,.uw-tool .uw-error { color: var(--uw-color-danger); }
.uw-tool .uw-warning { color: var(--uw-color-warning); }

.uw-tool [role="alert"],.uw-tool .uw-error,.uw-tool .uw-field-error { color: var(--uw-color-danger); font-size: var(--type-body, 16px); line-height: 1.45; }
.uw-tool [aria-invalid="true"] { border-color: var(--uw-color-danger); }
.uw-tool :focus-visible { outline: 2px solid var(--uw-color-accent); outline-offset: 3px; }

.uw-directory-card > div {
  display: grid;
  gap: 5px;
}
.uw-directory-card h2,
.uw-directory-card h3,
.uw-directory-card strong {
  margin: 0;
  color: var(--text, #111827);
  font-size: var(--type-body, 16px);
  font-weight: var(--fw-semibold, 600);
  line-height: 1.25;
  letter-spacing: 0;
}
.uw-directory-card p,
.uw-directory-card small,
.uw-directory-card span:not(.uw-icon) {
  margin: 0;
  color: var(--muted, #667085);
  font-size: var(--type-small, 13px);
  font-weight: var(--fw-regular, 400);
  line-height: 1.5;
}
.uw-directory-card small {
  color: var(--muted-2, #8a95a6);
}
.uw-directory-card .uw-card-description {
  margin-top: 3px;
  color: var(--muted, #667085);
}

@media (max-width: 620px) {
  .uw-tool .uw-grid,.uw-tool [class*="grid"],.uw-tool [class*="row"] { grid-template-columns: minmax(0, 1fr); }
  .uw-tool .uw-actions { align-items: stretch; }
  .uw-tool .uw-actions .uw-button-primary { width: 100%; }
  .uw-tool .uw-result dl div,.uw-tool .uw-stats div { display: grid; gap: 4px; }
  .uw-tool .uw-result dd,.uw-tool .uw-stats dd { text-align: left; }
}