/* The free tools in the new design (src/layouts/NnTool.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 old layout loaded it; the new pages do not).
   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/nn-tw.css) read the old site 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; }