/* ============================================================
   FreeTools design tokens - the single source of truth.
   Loaded on every page BEFORE the page-specific stylesheet so
   colour, spacing and typography stay identical site-wide.
   ============================================================ */
:root {
  color-scheme: light;
  /* surfaces */
  --bg: #f6f8fa;
  --card: #ffffff;
  --card-alt: #f6f8fa;
  --input-bg: #ffffff;

  /* text */
  --text: #1f2328;
  --muted: #59636e;
  --link: #0969da;

  /* brand + lines */
  --accent: #0969da;
  --accent-hover: #0860ca;
  --accent-soft: #ddf4ff;
  --input-border: #d0d7de;
  --divider: #d8dee4;

  /* status */
  --success: #1a7f37;
  --danger: #cf222e;
  --warn: #9a6700;

  /* language palette (GitHub linguist) */
  --lang-rust: #dea584;
  --lang-go: #00add8;
  --lang-js: #f1e05a;
  --lang-ts: #3178c6;
  --lang-py: #3572a5;
  --lang-c: #555555;
  --lang-cpp: #f34b7d;

  /* metrics */
  --radius: 8px;
  --radius-sm: 6px;
  --maxw: 960px;
  --gap: 12px;

  /* theme colours used by the SVG charts (read from JS) */
  --chart-grid: #e5e7eb;
  --chart-tick: #57606a;
  --chart-track: #eaeef2;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1117;
  --card: #161b22;
  --card-alt: #11161d;
  --input-bg: #0d1117;

  --text: #e6edf3;
  --muted: #8b949e;
  --link: #4493f8;

  --accent: #4493f8;
  --accent-hover: #388bfd;
  --accent-soft: #0c2d6b;
  --input-border: #30363d;
  --divider: #21262d;

  --success: #3fb950;
  --danger: #f85149;
  --warn: #d29922;

  --lang-rust: #e6a781;
  --lang-go: #56d4dd;
  --lang-js: #f1e05a;
  --lang-ts: #79b8ff;
  --lang-py: #4b8bbe;
  --lang-c: #8b949e;
  --lang-cpp: #f34b7d;

  --chart-grid: #30363d;
  --chart-tick: #8b949e;
  --chart-track: #21262d;
}

/* ---------- shared base (was duplicated in every file) ---------- */
html {
  background-color: var(--bg);
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.9em;
  line-height: 1.5em;
  background-color: var(--bg);
  color: var(--text);
  margin: 0 auto;
  padding: 0 10px;
  max-width: var(--maxw);
  /* never allow content to escape the viewport */
  max-width: 100%;
  overflow-x: hidden;
}
h1, h2, h3 { color: var(--text); }
h1 { font-family: arial, sans-serif; font-weight: 600; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg, canvas, table { max-width: 100%; }
.centerText { text-align: center; }
.leftText { text-align: left; }
.muted, .mutedText { color: var(--muted); }
.verticalImage { vertical-align: middle; }
.red { color: var(--danger); }

/* forms */
input[type="text"], input:not([type]), select, textarea {
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text);
  font: inherit;
}
input:focus-visible, select:focus-visible, button:focus-visible,
a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
button.action, span.action {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--input-border);
  color: var(--text);
  background: var(--card);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
}
button.action:hover, span.action:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* cards */
.description, .endpoint, .docs, .agentBox, .panel {
  background: var(--card);
  border: 1px solid var(--input-border);
  border-radius: var(--radius);
  box-sizing: border-box;
  max-width: 100%;
}
.description, .endpoint { margin: 12px auto; padding: 12px 14px; }

/* code */
code, pre {
  max-width: 100%;
  overflow-x: auto;
  overflow-wrap: anywhere;
  word-break: break-word;
  box-sizing: border-box;
}
code {
  background: var(--card-alt);
  border-radius: 4px;
  padding: 1px 4px;
  font-size: 0.85em;
}
pre { font-size: 0.82em; line-height: 1.45em; margin: 0; }
pre code { background: none; padding: 0; }

hr {
  margin: 12px 0;
  border: 0;
  height: 1px;
  background: var(--divider);
}

/* dark-mode toggle injected by templates.js */
.topbar { display: flex; gap: 8px; justify-content: flex-end; margin: 8px 0 0; }
.topbar button {
  border: 1px solid var(--input-border);
  background: var(--card-alt);
  color: var(--text);
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.8em;
}
.topbar button:hover { border-color: var(--accent); color: var(--accent); }

@media only screen and (max-width: 681px) {
  body { padding: 0 8px; }
}

/* ---------- compact tool pages: tool first, documentation in one place ---------- */
.toolHint {
  max-width: 760px;
  margin: 0 auto 12px;
  padding: 8px 12px;
  border: 1px solid var(--input-border);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--muted);
  text-align: center;
  font-size: .86em;
  line-height: 1.45em;
}

/* Legacy description/API panels duplicate the reference below. Keep them in
   the DOM for SEO and no-JS readers, but do not make the tool page a wall of text. */
.toolPage > .description,
.toolPage > .endpoint:not(.interactive),
.toolPage > .guideLinks,
.toolPage > .related-tools,
.toolPage > br { display: none; }

.toolPage > .endpoint.interactive {
  margin-top: 12px;
}

.docsWrap {
  max-width: 960px;
  margin: 16px auto 0;
  padding: 0 8px;
  box-sizing: border-box;
  scroll-margin-top: 12px;
}
.docsToggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 9px 14px;
  cursor: pointer;
  list-style: none;
  border: 1px solid var(--input-border);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--text);
  font-weight: 600;
  font-size: .92em;
  text-align: center;
}
.docsToggle::-webkit-details-marker { display: none; }
.docsToggle::before {
  content: "▸";
  color: var(--accent);
  font-size: 1.1em;
  transition: transform .15s ease;
  display: inline-block;
}
.docsWrap[open] > .docsToggle::before { transform: rotate(90deg); }
.docsToggle:hover { border-color: var(--accent); color: var(--accent); }
.docsWrap > .docs { margin-top: 10px; animation: docs-fade .14s ease; }
.docsWrap > .docs > h2 { display: none; }
.docs h2 { font-size: 1.15em; margin: 14px 0 6px; color: var(--accent); text-align: center; }
.docs h3 { font-size: .98em; margin: 14px 0 6px; color: var(--text); text-align: left; }
.docs > p { font-size: .9em; line-height: 1.5em; margin: 0 0 4px; }
.docs .tblScroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.docs .apiTable { width: 100%; min-width: 460px; margin: 6px auto; border-collapse: collapse; font-size: .84em; }
.docs .apiTable th, .docs .apiTable td { padding: 5px 8px; border-bottom: 1px solid var(--input-border); text-align: left; vertical-align: top; }
.docs .apiTable th { font-weight: 600; font-size: .95em; opacity: .75; text-transform: uppercase; letter-spacing: .03em; }
.docs .apiTable td code { white-space: nowrap; }
.docs pre.code { background: var(--card); border: 1px solid var(--input-border); border-radius: 6px; padding: 10px 12px; margin: 6px 0 0; overflow-x: auto; font-size: .78em; line-height: 1.45em; white-space: pre; max-width: 100%; box-sizing: border-box; text-align: left; }
.docs pre.code code { background: none; border: 0; padding: 0; display: inline; white-space: pre; }
.docs .faqList { max-width: 820px; margin: 0 auto; }
.docs .faqItem { border: 1px solid var(--input-border); border-radius: 8px; background: var(--card); margin: 6px 0; overflow: hidden; }
.docs .faqItem summary { cursor: pointer; padding: 8px 12px; font-weight: 600; font-size: .9em; list-style: none; }
.docs .faqItem summary::-webkit-details-marker { display: none; }
.docs .faqItem summary::before { content: "+ "; color: var(--accent); font-weight: 700; }
.docs .faqItem[open] summary::before { content: "− "; }
.docs .faqItem p { margin: 0; padding: 0 12px 10px 12px; font-size: .88em; line-height: 1.5em; opacity: .9; }
@keyframes docs-fade { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@media only screen and (max-width: 681px) {
  .toolHint { margin-left: 0; margin-right: 0; font-size: .82em; }
  .docsToggle { font-size: .86em; padding: 8px 10px; }
  .docs .apiTable { font-size: .78em; min-width: 380px; }
  .docs .faqItem summary { font-size: .85em; }
}

/* ---------- consistent controls (no browser-default white buttons) ---------- */
button {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  background: var(--card-alt);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease, transform .08s ease;
}
button:hover {
  background: var(--card-alt);
  border-color: var(--accent);
  color: var(--accent);
}
button:active { transform: translateY(1px); }
button:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* Primary actions get the accent colour; secondary controls stay subtle. */
body button.action,
body span.action,
body .addRepo button.action,
body .upload button.action,
body #toggle.action {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
body button.action:hover,
body span.action:hover,
body .addRepo button.action:hover,
body .upload button.action:hover,
body #toggle.action:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #fff;
}
body button#clearAll,
body button#clearAll2 {
  background: transparent;
  border-color: var(--danger);
  color: var(--danger);
}
body button#clearAll:hover,
body button#clearAll2:hover {
  background: var(--card-alt);
  border-color: var(--danger);
  color: var(--danger);
}

/* Code-example tabs are used on every tool page, including pages that do not
   load apis.css. */
.docs .tabs.codeTabs {
  display: flex;
  gap: 4px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 520px;
  margin: 8px auto 0;
  padding-bottom: 0;
  border-bottom: 1px solid var(--input-border);
}
.docs .codeTabs .tab {
  margin-bottom: -1px;
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}
.docs .codeTabs .tab:hover {
  background: var(--card-alt);
  border-color: var(--input-border);
  color: var(--accent);
}
.docs .codeTabs .tab.active {
  background: var(--card);
  border-color: var(--input-border);
  color: var(--accent);
}
.docs .codePane { display: none; }
.docs .codePane.active { display: block; }