/* tool widget primitives. loaded only by /tools/<slug>.html pages.
   built on top of the site's tokens from style.css (--accent, --text,
   --text-dim, --surface, --border, --font-sans, --font-mono). */

/* ── Page title back-compat ── */
.page-title { font-size: 1.75rem; font-weight: 600; line-height: 1.25; margin: 0 0 0.4rem; color: var(--text); }
.page-desc  { color: var(--text-dim); margin: 0 0 1.5rem; }
.section-label { font-size: 1.25rem; font-weight: 600; color: var(--text); margin: 2.25rem 0 0.75rem; }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 0.85rem;
  font-family: var(--font-sans);
  font-weight: 500;
  border-radius: 3px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 150ms ease, background-color 150ms ease, border-color 150ms ease, color 150ms ease;
  white-space: nowrap;
  line-height: 1.2;
}
.btn:hover { filter: brightness(1.08); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-primary {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.btn-secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn-secondary:hover { filter: none; border-color: var(--text-dim); }
.btn-secondary.active {
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.btn-sm { padding: 5px 10px; font-size: 0.8rem; }

/* ── Inputs ── */
input[type="text"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
textarea,
select {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 8px 12px;
  font-size: 0.9rem;
  font-family: var(--font-sans);
  width: 100%;
  outline: none;
  transition: border-color 150ms ease;
}
input[type="text"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
textarea:focus,
select:focus { border-color: var(--accent); }

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(0.7) sepia(0.3) saturate(0.8) hue-rotate(220deg);
  cursor: pointer;
  opacity: 0.7;
  border-radius: 3px;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

textarea {
  resize: vertical;
  line-height: 1.6;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

select {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a89cc0' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-dim);
  margin-bottom: 6px;
}

/* ── Layout helpers ── */
.field { margin-bottom: 16px; }
.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.input-row { display: flex; gap: 8px; align-items: center; }
.input-row input { flex: 1; }

.checkbox-group { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.checkbox-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--text);
  cursor: pointer;
  margin: 0;
}
.checkbox-item input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* ── Stats ── */
.stats-row {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  padding: 16px 0;
  border-top: 1px solid var(--border);
}
.stat-item { display: flex; flex-direction: column; gap: 3px; }
.stat-label { font-size: 0.8rem; color: var(--text-dim); }
.stat-value {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ── Status / mono ── */
.status { font-size: 0.85rem; color: var(--text-dim); }
.status.ok  { color: var(--success, #4ade80); }
.status.err { color: var(--bad, #e879f9); }
.mono { font-family: var(--font-mono); font-size: 0.85rem; }

/* ── QR output: white pad for canvas/img ── */
#qr-output {
  display: flex;
  justify-content: center;
  padding: 24px;
  background: #ffffff;
  border-radius: 4px;
  min-height: 80px;
}
#qr-output canvas, #qr-output img { display: block; }

/* ── Tool directory list (used on tools.html) ── */
.tool-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.1rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.6rem 1.5rem;
}
.tool-list li { margin: 0; padding: 0.35rem 0; }
.tool-list a.title {
  display: inline;
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
}
.tool-list a.title:hover { color: var(--accent-2); border-color: var(--accent-2); }
.tool-list .dek {
  display: block;
  color: var(--text-dim);
  font-size: 0.9rem;
  margin-top: 0.15rem;
}

#tool-filter {
  width: 100%;
  max-width: 24rem;
  background: transparent;
  color: var(--text);
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 0.4rem 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  margin: 0 0 1.5rem;
}
#tool-filter:focus { border-bottom-color: var(--accent); outline: none; }