/* Free tools on olano.ai/tools and olano.sg/tools.
   One small skin shared by every tool page, loaded after /styles.css and
   built only from its tokens, so the tools follow the light and dark themes
   and the site's radii, type and focus ring without restating them. Each
   tool's own script lives beside this file (/assets/tools/<slug>.js) and
   renders into the markup these classes describe. */

.tool-app {
  max-width: 1040px;
  margin: 0 auto;
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.tool-app + .tool-app {
  margin-top: 18px;
}

/* The tool follows the hero closely: the default 3.2rem gap between subpage
   sections put the tool most of a phone screen below its heading. */
.seo-page main > .seo-hero + .section:has(> .tool-app) {
  margin-top: 1.4rem;
}

.seo-page .seo-hero:has(+ .section > .tool-app) {
  padding-bottom: 28px;
}

/* A group of controls under one legend (radio rows, weekday ticks). */
fieldset.tool-field {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

fieldset.tool-field > legend {
  margin-bottom: 6px;
  padding: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}

/* styles.css sizes and strokes every svg as a 20px line icon; an svg a tool
   draws as output (a QR code, a chart) opts out with .tool-svg-output. */
.tool-app svg.tool-svg-output {
  width: auto;
  height: auto;
  stroke: none;
}

/* Several skin classes set display, which would otherwise beat the hidden
   attribute the scripts use to switch panels. */
.tool-app [hidden] {
  display: none !important;
}

.tool-app .button:disabled,
.tool-app .button[aria-disabled="true"],
.tool-copy:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.tool-app h2,
.tool-app h3 {
  margin: 0 0 12px;
  color: var(--text);
  font-family: var(--font-heading);
  font-weight: 650;
  line-height: 1.3;
}

.tool-app h2 { font-size: 20px; }
.tool-app h3 { font-size: 16px; }

/* Inputs on the left, the answer on the right; stacked on a phone. */
.tool-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.tool-grid.is-wide-output {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}

.tool-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.tool-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.tool-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.tool-field > label,
.tool-label {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}

.tool-field input[type="text"],
.tool-field input[type="number"],
.tool-field input[type="date"],
.tool-field input[type="tel"],
.tool-field input[type="url"],
.tool-field input[type="search"],
.tool-field select,
.tool-field textarea,
.tool-input {
  width: 100%;
  min-width: 0;
  padding: 11px 13px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--bg-elev);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.45;
  outline: none;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.tool-field textarea,
textarea.tool-input {
  min-height: 150px;
  resize: vertical;
}

.tool-field textarea.is-code,
.tool-input.is-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 13.5px;
  line-height: 1.55;
  tab-size: 2;
}

.tool-field input:focus,
.tool-field select:focus,
.tool-field textarea:focus,
.tool-input:focus {
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus);
}

.tool-field input::placeholder,
.tool-field textarea::placeholder {
  color: var(--text-4);
}

.tool-hint {
  margin: 0;
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.5;
}

/* A row of mutually exclusive choices (radio inputs styled as a pill bar). */
.tool-segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-md);
  background: var(--surface-2);
}

.tool-segmented label {
  position: relative;
  margin: 0;
  padding: 7px 13px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.tool-segmented input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.tool-segmented label:has(input:checked) {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.tool-segmented label:has(input:focus-visible) {
  box-shadow: var(--shadow-focus);
}

.tool-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.45;
  cursor: pointer;
}

.tool-check input {
  margin-top: 3px;
  accent-color: var(--accent);
}

.tool-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.tool-actions .button {
  min-height: 42px;
}

/* The answer. */
.tool-output {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  min-width: 0;
  padding: 20px;
  border-radius: var(--r-md);
  background: var(--surface-2);
}

.tool-output[aria-busy="true"] {
  opacity: 0.6;
}

/* .button-secondary shares --surface-2 with the output panel, so inside it
   the button would vanish; lift it onto the card colour with a hairline. */
.tool-output .button-secondary {
  background: var(--surface);
  border: 1px solid var(--border-strong);
}

.tool-output .button-secondary:hover {
  background: var(--surface-3);
}

.tool-result-label {
  margin: 0;
  color: var(--text-3);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tool-result-big {
  margin: 0;
  color: var(--text);
  font-family: var(--font-heading);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.tool-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}

.tool-stat {
  padding: 12px 14px;
  border-radius: var(--r-sm);
  background: var(--surface);
}

.tool-stat dt,
.tool-stat .tool-stat-label {
  margin: 0 0 4px;
  color: var(--text-3);
  font-size: 12.5px;
  font-weight: 600;
}

.tool-stat dd,
.tool-stat .tool-stat-value {
  margin: 0;
  color: var(--text);
  font-size: 19px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* Generated text (a file, a link, a config) with its copy button. */
.tool-code {
  position: relative;
  min-width: 0;
}

.tool-code pre {
  margin: 0;
  max-height: 460px;
  overflow: auto;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-elev);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  line-height: 1.55;
  white-space: pre;
}

.tool-code pre.is-wrapped {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.tool-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font: 600 13px/1 var(--font-sans);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}

.tool-copy:hover {
  background: var(--surface-3);
}

.tool-copy.is-copied {
  border-color: var(--success);
  color: var(--success);
}

/* Result tables (per-crawler verdicts, holiday lists, search results). */
.tool-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}

.tool-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.tool-table th,
.tool-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
  text-align: left;
  vertical-align: top;
}

.tool-table th {
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}

.tool-table tr:last-child td {
  border-bottom: 0;
}

.tool-table td.is-num,
.tool-table th.is-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Status chips: allowed / blocked / warning / error. */
.tool-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 650;
  white-space: nowrap;
}

.tool-badge.is-ok { background: var(--success-soft); color: var(--success); }
.tool-badge.is-warn { background: var(--warn-soft); color: var(--warn); }
.tool-badge.is-error { background: var(--danger-soft); color: var(--danger); }
.tool-badge.is-info { background: var(--accent-soft); color: var(--accent); }

.tool-message {
  margin: 0;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.5;
}

.tool-message.is-error { background: var(--danger-soft); color: var(--danger); }
.tool-message.is-warn { background: var(--warn-soft); color: var(--warn); }
.tool-message.is-ok { background: var(--success-soft); color: var(--success); }

.tool-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tool-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.5;
}

/* A finding can carry a long unbroken URL; let it wrap inside the row. */
.tool-list li > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* A horizontal bar for scores and shares (width set inline by the script). */
.tool-meter {
  height: 8px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--surface-3);
}

.tool-meter > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

/* Privacy line under each tool: what leaves the browser, if anything. */
.tool-privacy {
  max-width: 1040px;
  margin: 12px auto 0;
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

/* Tokens drawn as alternating chips (token counter). */
.tool-tokens {
  max-height: 260px;
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-elev);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  line-height: 1.9;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.tool-tokens span {
  border-radius: 3px;
  padding: 1px 0;
}

.tool-tokens span:nth-child(5n + 1) { background: rgba(255, 106, 61, 0.22); }
.tool-tokens span:nth-child(5n + 2) { background: rgba(96, 165, 250, 0.22); }
.tool-tokens span:nth-child(5n + 3) { background: rgba(61, 220, 151, 0.22); }
.tool-tokens span:nth-child(5n + 4) { background: rgba(226, 179, 65, 0.24); }
.tool-tokens span:nth-child(5n + 5) { background: rgba(167, 139, 250, 0.24); }

/* Question cards (assessments): one fieldset per question. */
.tool-question {
  margin: 0;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-elev);
}

.tool-question legend {
  padding: 0 4px;
  color: var(--text);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.45;
}

.tool-question .tool-check + .tool-check {
  margin-top: 8px;
}

/* The tools hub: sibling-tool cards reuse .usecase-card; this is the grid. */
.tool-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
}

@media (max-width: 760px) {
  .tool-app {
    padding: 18px 16px;
    border-radius: var(--r-md);
  }

  .tool-grid,
  .tool-grid.is-wide-output {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .tool-output {
    padding: 16px;
  }
}

@media print {
  .site-header,
  .site-footer,
  .tool-actions,
  .final-cta,
  .chat-fab {
    display: none !important;
  }

  .tool-app {
    box-shadow: none;
  }
}