/* The free tools (src/layouts/Tool.astro). Loaded after the template CSS and shell.css.
   1. A zero-specificity reset inside the tool, standing in for the Tailwind preflight the tools were built on (the site does not load it).
   2. The tools' own theme tokens (every tool stylesheet in src/styles/*-tool.css draws its colors from these) re-pointed at the new palette.
   3. The shared tool vocabulary (search bar, buttons, chips, fields, panes) restyled to the site's buttons and cards.
   No hover scale anywhere; hover feedback is color, border, background or shadow. */

/* ---- 1. reset (zero specificity, so every tool rule still wins) ---- */
:where(.la-tool *, .la-tool ::before, .la-tool ::after) { box-sizing: border-box; border-width: 0; border-style: solid; border-color: #e4e9f5; }
:where(.la-tool) h1, :where(.la-tool) h2, :where(.la-tool) h3, :where(.la-tool) h4, :where(.la-tool) h5, :where(.la-tool) h6 { font-size: inherit; font-weight: inherit; margin: 0; line-height: inherit; letter-spacing: inherit; }
:where(.la-tool) blockquote, :where(.la-tool) dl, :where(.la-tool) dd, :where(.la-tool) hr, :where(.la-tool) figure, :where(.la-tool) p, :where(.la-tool) pre { margin: 0; }
:where(.la-tool) ol, :where(.la-tool) ul, :where(.la-tool) menu { list-style: none; margin: 0; padding: 0; }
:where(.la-tool button, .la-tool input, .la-tool optgroup, .la-tool select, .la-tool textarea) { font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; }
:where(.la-tool button, .la-tool [type="button"], .la-tool [type="reset"], .la-tool [type="submit"]) { -webkit-appearance: button; background-color: transparent; background-image: none; }
:where(.la-tool button, .la-tool [role="button"]) { cursor: pointer; }
:where(.la-tool img, .la-tool svg, .la-tool video, .la-tool canvas, .la-tool audio, .la-tool iframe, .la-tool embed, .la-tool object) { display: block; vertical-align: middle; }
:where(.la-tool) img, :where(.la-tool) video { display: block; vertical-align: middle; max-width: 100%; height: auto; }
:where(.la-tool) a { color: inherit; text-decoration: inherit; }
:where(.la-tool table) { border-collapse: collapse; text-indent: 0; border-color: inherit; }
:where(.la-tool textarea) { resize: vertical; }
:where(.la-tool input::placeholder, .la-tool textarea::placeholder) { color: #8a93a8; opacity: 1; }
:where(.la-tool) label { display: inline; margin-bottom: 0; font-weight: inherit; }
:where(.la-tool [hidden]) { display: none; }
:where(.la-tool code, .la-tool kbd, .la-tool samp, .la-tool pre) { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: 1em; }
.la-tool :is(code, pre, kbd, samp, textarea, [class*="code"], [class*="mono"]) { letter-spacing: 0 !important; }

/* ---- 2. tokens ---- */
.la-tool {
  --bg: #f6f8fc; --panel: #ffffff; --card: #ffffff; --ink: #232323; --text: #232323; --muted: #5b6477; --faint: #8a93a8; --line: #e4e9f5; --field: #f8fafd;
  --accent: #536ee5; --accent-ink: #ffffff; --accent-soft: #eef1fd; --brand: #536ee5; --hover: #eef1fd;
  --ok: #1b8055; --warn: #b45309; --err: #d93636; --fail: #d93636;
  --radius: 16px; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --sys-font: Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --sys: var(--sys-font);
  --ui-bg: #f6f8fc; --ui-panel: #ffffff; --ui-ink: #232323; --ui-muted: #5b6477; --ui-line: #e4e9f5; --ui-field: #f8fafd; --ui-accent: #536ee5; --ui-accent-ink: #ffffff; --ui-radius: 16px;
  /* the Tailwind-built tools (src/styles/tailwind.css) read these palette variables */
  --color-primary: #536ee5; --color-primary-dark: #1b44c8; --color-primary-hover: #7d92ec; --color-secondary: #1b8055; --color-body: #585858; --color-body-secondary: #8a93a8; --color-dark: #232323; --color-white: #ffffff; --color-stroke: #e4e9f5; --color-gray-1: #f8fafd; --color-gray-2: #eef1f7;
  font-family: var(--sys-font); color: var(--ink); font-size: 15px; line-height: 1.5; text-align: left;
}

/* ---- 3. the stage the tool sits on ---- */
.la-tool-sec > .w-container { padding-top: 8px; }
.la-tool-stage { width: 100%; max-width: var(--la-tool-w, 1024px); margin: 0 auto; padding: 28px; background: #fff; border: 1px solid #e4e9f5; border-radius: 28px; box-shadow: 0 40px 80px -56px rgba(35, 42, 80, .45); }
.la-tool-stage.is-bare { padding: 0; background: none; border: 0; box-shadow: none; }
.la-tool-foot { max-width: var(--la-tool-w, 1024px); margin: 16px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; font-size: 14px; color: #5b6477; }
.la-tool-foot a { color: #5b6477; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: color .2s; }
.la-tool-foot a:hover { color: #536ee5; }
.la-tool-foot svg { width: 16px; height: 16px; }

/* buttons: the site's dark button, and the outlined one for secondary actions */
.la-tool .btn, .la-tool .btn--primary, .la-tool .export-btn, .la-tool .cal-btn--solid { background: #2c2c2c; border: 1px solid #2c2c2c; color: #fff; border-radius: 12px; font-weight: 500; transition: background-color .25s, border-color .25s, color .25s; }
.la-tool .btn:hover:not(:disabled), .la-tool .btn--primary:hover:not(:disabled), .la-tool .export-btn:hover:not(:disabled), .la-tool .cal-btn--solid:hover { background: #536ee5; border-color: #536ee5; color: #fff; filter: none; }
.la-tool .btn--ghost, .la-tool .btn-sm--ghost, .la-tool .cal-btn:not(.cal-btn--solid) { background: #fff; border: 1px solid #d9d9d9; color: #232323; }
.la-tool .btn--ghost:hover:not(:disabled), .la-tool .btn-sm--ghost:hover, .la-tool .cal-btn:not(.cal-btn--solid):hover { background: #fff; border-color: #536ee5; color: #536ee5; }
.la-tool .btn--done, .la-tool .btn--done:hover { background: #1b8055 !important; border-color: #1b8055 !important; color: #fff !important; }
.la-tool .btn:disabled { opacity: .55; cursor: not-allowed; }

/* the scan tools' address bar */
.la-tool .search { border-radius: 16px; border-color: #d5dbea; background: #fff; box-shadow: 0 16px 32px -24px rgba(35, 42, 80, .35); padding: 8px 8px 8px 16px; }
.la-tool .search:focus-within { border-color: #536ee5; box-shadow: 0 0 0 4px rgba(83, 110, 229, .14); }
.la-tool .search input { font-size: 16px; }
.la-tool .search .btn { min-height: 44px; padding-left: 20px; padding-right: 20px; font-size: 15px; }
.la-tool .examples { margin-top: 14px; }
.la-tool .ex { background: #fff; border: 1px solid #e4e9f5; border-radius: 999px; color: #2c3444; transition: border-color .2s, color .2s; }
.la-tool .ex:hover { border-color: #536ee5; color: #536ee5; }
.la-tool .empty { border-radius: 16px; border-color: #d5dbea; background: #f8fafd; color: #5b6477; }

/* segmented controls and chips */
.la-tool .seg { border-radius: 12px; background: #f1f4fa; border-color: #e4e9f5; }
.la-tool .seg__btn { border-radius: 9px; }
.la-tool .seg__btn.is-active { color: #232323; box-shadow: 0 1px 3px rgba(35, 42, 80, .14); }

/* panes */
.la-tool .form-pane, .la-tool .out-pane, .la-tool .out-bar { border-radius: 18px; }
.la-tool .field__label { font-size: 13px; font-weight: 600; color: #232323; }
.la-tool .fields input[type="text"], .la-tool .fields input[type="url"], .la-tool .fields input[type="email"], .la-tool .fields input[type="number"], .la-tool .fields input[type="date"], .la-tool .fields input[type="time"], .la-tool .fields input[type="datetime-local"], .la-tool .fields textarea, .la-tool .fields select { border-radius: 10px; font-size: 15px; }

/* the Tailwind-built tools: form controls and buttons in the site style */
.la-tw input[type="text"], .la-tw input[type="url"], .la-tw input[type="email"], .la-tw input[type="tel"], .la-tw input[type="number"], .la-tw textarea, .la-tw select { background-color: #fff; border: 1px solid #d5dbea; border-radius: 10px; color: #232323; }
.la-tw input:focus, .la-tw textarea:focus, .la-tw select:focus { outline: none; border-color: #536ee5; box-shadow: 0 0 0 4px rgba(83, 110, 229, .14); }
.la-tw .bg-primary:is(button, a, input[type="submit"]) { background-color: #2c2c2c !important; border-radius: 12px; }
.la-tw .bg-primary:is(button, a, input[type="submit"]):hover:not(:disabled) { background-color: #536ee5 !important; }
.la-tw .rounded-2xl, .la-tw .rounded-xl { border-radius: 18px; }

/* distraction-free views hide the site chrome (lilTomato full screen, lilCountdown's shared view) */
html.tomato-fullscreen .navbar, html.tomato-fullscreen .la-hero, html.tomato-fullscreen .la-after, html.tomato-fullscreen .la-tool-foot,
body.cd-viewing .navbar, body.cd-viewing .la-hero, body.cd-viewing .la-after, body.cd-viewing .la-tool-foot { display: none !important; }
body.cd-viewing .la-tool-stage { border: 0; box-shadow: none; padding: 0; background: none; }

/* ---- after the tool: next check and more tools ---- */
.la-next { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; }
.la-next .la-card { padding: 32px; }
.la-next.is-single { grid-template-columns: 1fr; }
.la-next.is-single .la-card { align-items: center; text-align: center; padding: 48px 32px; }
.la-next.is-single .la-card-p { max-width: 640px; }
.la-more-t { display: flex; align-items: center; gap: 12px; }
.la-more-t .la-card-t { font-size: 19px; }

@media (max-width: 991px) {
  .la-next { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .la-tool-stage { padding: 14px; border-radius: 20px; }
  .la-tool-stage.is-flush-mobile { padding: 0; border: 0; box-shadow: none; background: none; }
  .la-tool .app { grid-template-columns: minmax(0, 1fr) !important; }
}
.la-after > .w-container { padding-top: 48px; }
.la-next.is-single .la-card-t { font-size: 30px; }
/* inline Phosphor and brand icons inside Tailwind-built buttons and links size with the text */
.la-tw :is(button, a) > svg { width: 1.15em; height: 1.15em; flex: none; display: inline-block; }
.la-audit .la-h1 { text-align: center; }