/* ============================================================
   csvtools.io — Design v10
   Editorial dev-tool aesthetic. Warm paper, single deep-ink-blue
   accent, divide-y over cards, restrained motion.
   ============================================================ */

:root {
  /* Surfaces */
  --bg:           #fbf9f4;   /* warm paper */
  --bg-2:         #f3f0e6;   /* deeper paper, used for chrome */
  --bg-tint:      #eef2f8;   /* cool wash for accent surfaces */
  --bg-tint-border:#cfd9e8;
  --surface:      #ffffff;

  /* Ink */
  --ink:    #1a1814;          /* warm off-black */
  --ink-2:  #3d3a32;
  --ink-3:  #7a7568;
  --ink-4:  #a8a397;

  /* Rules */
  --rule:      #d8d3c2;
  --rule-soft: #e7e2d2;
  --rule-hard: #2a2520;       /* charcoal, never #000 */

  /* Accent — single deep ink-blue, < 80% saturation */
  --accent:       #15355c;
  --accent-dark:  #0a2342;
  --accent-soft:  #3d6595;
  --accent-wash:  #dfe7f3;
  --focus-ring:   0 0 0 3px rgba(21, 53, 92, 0.30);

  /* Singular spot color for primary CTA */
  --cta:     #e8a217;
  --cta-ink: #221708;

  /* States */
  --err:      #8a2419;
  --err-wash: #f5e1dc;
  --ok:       #2d6322;
  --ok-wash:  #e6f2e0;

  /* Header (dark inverted) */
  --header-bg:    #0f1f33;
  --header-edge:  #050b16;
  --header-ink:   #f6f3ec;
  --header-ink-2: #a4afbf;
  --header-input: #1c2e47;
  --header-input-edge: #2b405d;

  /* Typography */
  --sans: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --serif-display: "Geist", "Cabinet Grotesk", "Inter", sans-serif; /* display falls back to sans */

  --t-xxs: 11px;
  --t-xs:  12px;
  --t-sm:  13.5px;
  --t-base:15px;
  --t-md:  17px;
  --t-lg:  22px;
  --t-xl:  32px;
  --t-display: 48px;

  /* Layout */
  --sidebar:   220px;
  --header-h:  60px;
  --drawer-w:  288px;
  --container: 1200px;
}

/* ============ Reset & base ============ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
  overflow-x: hidden;
}

/* Typography ------------------------------------------------------ */
h1, h2, h3 {
  margin: 0;
  font-family: var(--serif-display);
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--ink);
}
h1 {
  font-size: var(--t-xl);
  line-height: 1.05;
  letter-spacing: -0.028em;
  font-weight: 600;
}
h2 {
  font-size: var(--t-lg);
  line-height: 1.25;
  margin: 44px 0 12px;
  color: var(--ink);
  letter-spacing: -0.018em;
}
h3 {
  font-size: var(--t-md);
  font-weight: 600;
  margin: 26px 0 8px;
  color: var(--ink);
  letter-spacing: -0.012em;
}

p { margin: 0 0 14px; color: var(--ink-2); max-width: 68ch; line-height: 1.65; }
ul, ol { margin: 0 0 16px; padding-left: 22px; }
li { margin-bottom: 4px; color: var(--ink-2); }

a {
  color: var(--accent);
  text-decoration: none;
  text-decoration-color: rgba(21, 53, 92, 0.28);
  text-underline-offset: 2px;
  transition: color 0.14s ease, text-decoration-color 0.14s ease;
}
a:hover {
  color: var(--accent-dark);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: currentColor;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 3px;
}

/* Suppress focus halo inside the framed tool */
.tool__in:focus-visible,
.tool__out:focus-visible { outline: none; box-shadow: none; }
.tool__in:focus, .tool__out:focus { outline: none; }
.tool__pane:focus-within { background: #fbfaf6; }
.tool__pane.tool__pane--out:focus-within,
.tool__out:focus-within { background: var(--bg-2); }

code {
  font-family: var(--mono);
  font-size: 0.9em;
  color: var(--ink);
  background: var(--bg-2);
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: -0.01em;
}
pre {
  margin: 0 0 18px;
  padding: 14px 16px;
  background: var(--bg-2);
  border: 1px solid var(--rule-soft);
  border-radius: 4px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.65;
  -webkit-overflow-scrolling: touch;
}
pre code {
  background: transparent;
  padding: 0;
  color: var(--ink);
  font-size: inherit;
  border-radius: 0;
  white-space: pre;
}

strong { color: var(--ink); font-weight: 600; }

/* ============ Header ============ */
.header {
  position: static;
  background: var(--header-bg);
  color: var(--header-ink);
  height: var(--header-h);
  display: flex;
  align-items: center;
  padding: 0 28px;
  gap: 18px;
  border-bottom: 1px solid var(--header-edge);
}
.header__brand {
  font-family: var(--serif-display);
  font-weight: 600;
  font-size: var(--t-md);
  color: var(--header-ink);
  text-decoration: none;
  letter-spacing: -0.018em;
  display: flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}
.header__brand:hover { text-decoration: none; color: var(--header-ink); }
.header__brand .dot {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--cta);
  border-radius: 50%;
}

.header__search {
  flex: 0 1 380px;
  margin-left: 6px;
  position: relative;
}
.header__search::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a4afbf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.35-4.35'/></svg>");
  background-repeat: no-repeat;
  pointer-events: none;
}
.header__search input {
  width: 100%;
  height: 34px;
  padding: 0 12px 0 34px;
  background: var(--header-input);
  color: var(--header-ink);
  border: 1px solid var(--header-input-edge);
  border-radius: 6px;
  font-family: inherit;
  font-size: var(--t-sm);
  outline: none;
  transition: border-color 0.14s ease;
}
.header__search input::placeholder { color: var(--header-ink-2); }
.header__search input:focus {
  border-color: var(--cta);
  box-shadow: 0 0 0 3px rgba(232, 162, 23, 0.20);
}

.header__tagline {
  font-size: var(--t-sm);
  color: var(--header-ink-2);
  margin-left: auto;
  white-space: nowrap;
  font-feature-settings: "ss01";
}
.header__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  background: var(--cta);
  color: var(--cta-ink);
  border-radius: 6px;
  font-size: var(--t-sm);
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: -0.005em;
  transition: filter 0.14s ease, transform 0.14s ease;
}
.header__cta:hover {
  text-decoration: none;
  filter: brightness(1.05);
  color: var(--cta-ink);
}
.header__cta:active { transform: translateY(1px); }

/* Hamburger */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: -8px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--header-ink);
  cursor: pointer;
  border-radius: 6px;
}
.nav-toggle:hover { background: rgba(255, 255, 255, 0.08); }
.nav-toggle svg { display: block; }

.nav-backdrop {
  display: none;
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: rgba(10, 16, 28, 0.54);
  z-index: 49;
  opacity: 0;
  transition: opacity 0.18s ease;
}
body.nav-open .nav-backdrop { display: block; opacity: 1; }

/* ============ Layout ============ */
.layout {
  display: grid;
  grid-template-columns: var(--sidebar) 1fr;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100dvh - var(--header-h));
}

/* ============ Sidebar ============ */
.sidebar {
  border-right: 1px solid var(--rule);
  background: var(--bg);
  padding: 28px 16px 40px;
  overflow-y: auto;
}
.sidebar__group { margin-bottom: 28px; }
.sidebar__group:last-of-type { margin-bottom: 0; }
.sidebar__group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-xxs);
  font-weight: 600;
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0 8px 6px;
  margin-bottom: 2px;
}
.sidebar__group-title .i {
  display: inline-flex;
  color: var(--ink-4);
}
.sidebar__list { list-style: none; padding: 0; margin: 0; }
.sidebar__list a {
  display: block;
  padding: 8px 10px;
  color: var(--ink-2);
  text-decoration: none;
  font-size: var(--t-sm);
  border-left: 2px solid transparent;
  border-radius: 0 4px 4px 0;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.sidebar__list a:hover {
  color: var(--accent);
  background: var(--bg-2);
  text-decoration: none;
}
.sidebar__list a.active {
  color: var(--accent-dark);
  background: var(--accent-wash);
  border-left-color: var(--accent);
  font-weight: 600;
}
.sidebar__list li.hidden { display: none; }

/* ============ Main ============ */
.main {
  padding: 36px 48px 56px;
  max-width: var(--container);
  min-width: 0;
}

/* ============ Intro lede (home + tool pages) ============ */
/* Editorial standfirst: no card, rules and breathing room only. */
.intro {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  border-radius: 0;
  padding: 20px 0 16px;
  margin: 0 0 32px;
  max-width: 68ch;
}
.intro h2 {
  margin: 0 0 10px;
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.intro p {
  margin: 0 0 10px;
  color: var(--ink-2);
}
.intro p:last-of-type { margin-bottom: 0; }
.intro__sig {
  margin-top: 12px;
  font-size: var(--t-xs);
  color: var(--ink-4);
  font-family: var(--mono);
  letter-spacing: 0.02em;
}
.intro__sig a { color: var(--ink-3); }
.intro__sig a:hover { color: var(--accent); }

.page-title {
  margin: 4px 0 6px;
  font-size: var(--t-xl);
  letter-spacing: -0.028em;
}
.page-meta {
  margin: 0 0 28px;
  font-size: var(--t-xs);
  color: var(--ink-4);
  font-family: var(--mono);
  letter-spacing: 0.02em;
}

/* ============ Tool ============ */
.tool {
  border: 1px solid var(--rule);
  background: var(--surface);
  margin: 22px 0 32px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(26, 24, 20, 0.02), 0 12px 32px -20px rgba(26, 24, 20, 0.08);
}
.tool__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: var(--t-xs);
}
.tool__bar-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  min-width: 0;
}
.tool__bar-title {
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  margin-right: 6px;
}

/* Inline labels inside toolbars */
.check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: var(--t-xs);
  white-space: nowrap;
}
.check input[type="checkbox"] { margin: 0; accent-color: var(--accent); }
.check input[type="text"],
.check input[type="number"],
.check select {
  height: 28px;
  padding: 0 8px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
  min-width: 0;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.check input[type="text"]:focus,
.check input[type="number"]:focus,
.check select:focus {
  border-color: var(--accent-soft);
}
.check select { padding-right: 22px; }

.tool__panes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-width: 0;
}
.tool__pane { display: flex; flex-direction: column; min-width: 0; }
.tool__pane + .tool__pane { border-left: 1px solid var(--rule); }

.tool__in, .tool__out {
  flex: 1;
  width: 100%;
  padding: 14px 16px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--surface);
  border: 0;
  outline: none;
  resize: none;
  min-height: 280px;
}
.tool__out { overflow: auto; white-space: pre; background: var(--bg-2); }

.tool__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--bg-2);
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--ink-3);
  letter-spacing: 0.01em;
}
.tool__foot.ok  { color: var(--ok);  background: var(--ok-wash); }
.tool__foot.err { color: var(--err); background: var(--err-wash); }

/* ============ Buttons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 12px;
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease, transform 0.10s ease;
}
.btn:hover {
  background: var(--bg-2);
  border-color: var(--ink-3);
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn--primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.btn--primary:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: #fff;
}

/* ============ Tables (Viewer & Diff) ============ */
.table-wrap {
  margin-top: 14px;
  overflow: auto;
  max-height: 560px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}
.table-wrap table {
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 13px;
  width: 100%;
}
.table-wrap th,
.table-wrap td {
  border: 1px solid var(--rule-soft);
  padding: 5px 10px;
  text-align: left;
  vertical-align: top;
  white-space: pre;
}
.table-wrap th {
  background: var(--bg-2);
  position: sticky;
  top: 0;
  cursor: pointer;
  user-select: none;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.table-wrap .rownum {
  background: var(--bg-2);
  color: var(--ink-3);
  text-align: right;
  width: 44px;
  font-feature-settings: "tnum";
}

.table-wrap tr.row-added td   { background: #eaf6ea; }
.table-wrap tr.row-removed td { background: #fbe5e5; }
.table-wrap tr.row-changed td { background: #fef4d8; }
.table-wrap td.cell-changed   { background: #ffe6a0; font-weight: 600; }

/* ============ Tool grid (legacy, retained for tool.js search) ============ */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin: 22px 0 30px;
}
.tool-grid a {
  display: block;
  border: 1px solid var(--rule);
  padding: 18px;
  text-decoration: none;
  border-radius: 6px;
  background: var(--surface);
  transition: border-color 0.14s ease, background 0.14s ease;
}
.tool-grid a:hover {
  border-color: var(--ink-3);
  background: var(--bg-2);
  text-decoration: none;
}
.tool-grid a strong {
  display: block;
  margin-bottom: 6px;
  color: var(--accent);
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.tool-grid a span { color: var(--ink-2); font-size: 0.92em; }
.tool-grid a.hidden { display: none; }

.tool-grid__empty {
  grid-column: 1 / -1;
  padding: 24px;
  text-align: center;
  color: var(--ink-3);
  font-size: var(--t-sm);
  border: 1px dashed var(--rule);
  border-radius: 6px;
  display: none;
}
.tool-grid__empty.show { display: block; }

.mono { font-family: var(--mono); }

/* ============ Drop zone + file list ============ */
.drop {
  margin: 0;
  font-size: 0.88em;
  color: var(--ink-3);
  padding: 14px 14px;
  border-top: 1px solid var(--rule-soft);
  border-radius: 0;
  text-align: center;
  background: var(--bg);
  transition: background 0.14s ease, color 0.14s ease;
}
.drop.drag {
  background: var(--accent-wash);
  color: var(--accent-dark);
}
.drop input[type="file"] {
  font-size: 13px;
  max-width: 100%;
}

.file-list {
  margin: 14px 0;
  padding: 12px 0;
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  font-size: 13px;
}
.file-list:empty { display: none; }
.file-list ul { margin: 6px 0 0; padding-left: 0; list-style: none; }
.file-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.file-list li:last-child { border-bottom: 0; }

/* ============ Features + FAQ ============ */
.features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin: 28px 0 36px;
}
.feature h3 { margin-top: 0; }

details {
  border-top: 1px solid var(--rule-soft);
  padding: 16px 4px;
  margin: 0;
  background: transparent;
  border-radius: 0;
}
details + details { margin-top: 0; }
details:last-of-type { border-bottom: 1px solid var(--rule-soft); }
details[open] { background: transparent; }
details summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  position: relative;
  padding-right: 28px;
  color: var(--ink);
  letter-spacing: -0.005em;
  transition: color 0.14s ease;
}
details summary:hover { color: var(--accent); }
details summary::-webkit-details-marker { display: none; }
details summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--ink-3);
  border-bottom: 1.5px solid var(--ink-3);
  transform: translateY(-70%) rotate(-45deg);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
details[open] summary::after { transform: translateY(-30%) rotate(45deg); }
details summary:hover::after { border-color: var(--accent); }
details p { margin: 14px 0 4px; max-width: 68ch; }

/* ============ Footer ============ */
footer.foot {
  margin-top: 64px;
  padding-top: 20px;
  border-top: 1px solid var(--rule-soft);
  font-size: var(--t-xs);
  color: var(--ink-4);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: space-between;
  font-family: var(--mono);
  letter-spacing: 0.02em;
}
.foot__links a { color: var(--ink-3); }
.foot__links a:hover { color: var(--accent); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1040px) {
  .header__tagline { display: none; }
  .main { padding: 32px 36px 48px; }
}

@media (max-width: 820px) {
  .header { padding: 0 16px; gap: 10px; }
  .header__search { display: none; }

  .nav-toggle { display: inline-flex; }

  .layout { grid-template-columns: 1fr; }

  .sidebar {
    position: fixed;
    top: var(--header-h);
    left: 0;
    bottom: 0;
    width: var(--drawer-w);
    max-width: 86vw;
    transform: translateX(-100%);
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 55;
    box-shadow: 8px 0 28px -8px rgba(10, 16, 28, 0.18);
    border-right: 1px solid var(--rule);
    padding: 20px 14px 32px;
  }
  body.nav-open .sidebar { transform: translateX(0); }
  .sidebar__list a { padding: 11px 12px; font-size: var(--t-base); }

  .main {
    padding: 22px 18px 36px;
    max-width: 100%;
  }

  .features { grid-template-columns: 1fr; gap: 16px; margin: 20px 0; }

  .intro { padding: 16px 0 12px; margin-bottom: 22px; }
  h1 { font-size: 26px; }
  h2 { font-size: 19px; margin-top: 32px; }

  /* Toolbar: stack option group above action group */
  .tool__bar {
    flex-direction: column;
    align-items: stretch;
    padding: 10px;
    gap: 10px;
  }
  .tool__bar-group { width: 100%; justify-content: flex-start; }
  .tool__bar-group:last-child {
    justify-content: flex-end;
    border-top: 1px dashed var(--rule);
    padding-top: 10px;
  }
  .tool__bar-group:first-child:last-child { border-top: 0; padding-top: 0; }

  /* Panes stack */
  .tool__panes { grid-template-columns: 1fr !important; }
  .tool__pane + .tool__pane { border-left: 0; border-top: 1px solid var(--rule); }

  .tool__in, .tool__out {
    min-height: 200px;
    /* 16px prevents iOS Safari from zooming on focus */
    font-size: 16px;
  }

  /* Inline inputs in toolbars grow more touch-friendly */
  .check input[type="text"],
  .check input[type="number"],
  .check select {
    height: 38px !important;
    font-size: 16px !important;
    padding: 0 10px !important;
  }
  .check { font-size: 12.5px; }
  .drop input[type="file"] { font-size: 14px; }

  .btn { height: 38px; padding: 0 14px; font-size: var(--t-sm); }

  /* Override inline width hints from per-tool HTML */
  [data-role="join-key"],
  [data-role="table-name"],
  [data-role="batch"],
  [data-role="on"],
  [data-role="by"] { width: auto !important; min-width: 96px; }

  .tool-grid { grid-template-columns: 1fr; gap: 10px; }
  .tool-grid a { padding: 14px; }

  .table-wrap { max-height: 70vh; }

  footer.foot { flex-direction: column; gap: 4px; text-align: left; }
}

@media (max-width: 420px) {
  .header { gap: 6px; padding: 0 12px; }
  .header__cta { padding: 0 10px; font-size: 12px; }
  .header__brand { font-size: var(--t-sm); }

  .main { padding: 16px 14px 28px; }

  .intro { padding: 14px 0 10px; }
  h1 { font-size: 22px; }

  .tool__in, .tool__out { padding: 12px; min-height: 180px; }
  .drop { padding: 14px 8px; }
}

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* ============================================================
   Compat layer: maps legacy per-site markup onto the csvtools
   design language. Appended to every site's style.css so the
   existing tool widgets (textarea/button/.controls/.drop-zone/etc.)
   look right without rewriting the HTML or JS bindings.
   ============================================================ */

/* --- Lead paragraph & inline notes -------------------------- */
.main .lede {
  font-size: var(--t-md);
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0 0 18px;
  max-width: 68ch;
}

.main .privacy-note,
.main .privacy,
.main .privacy-banner,
.main .privacy-strip,
.main .notice,
.main .info {
  display: block;
  background: var(--bg-tint);
  border: 1px solid var(--bg-tint-border);
  border-left: 3px solid var(--accent);
  color: var(--ink-2);
  border-radius: 4px;
  padding: 12px 14px;
  font-size: var(--t-sm);
  line-height: 1.55;
  margin: 0 0 22px;
  max-width: 68ch;
}

/* --- Tool widget framing ------------------------------------ */
.main .tool {
  border: 1px solid var(--rule);
  background: var(--surface);
  margin: 22px 0 32px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(26, 24, 20, 0.02), 0 12px 32px -20px rgba(26, 24, 20, 0.08);
  padding: 0;
}
/* h2 inside the tool becomes the toolbar title bar */
.main .tool > h2:first-child {
  margin: 0;
  padding: 12px 16px;
  font-size: var(--t-sm);
  font-family: var(--mono);
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  background: var(--bg-2);
  border-bottom: 1px solid var(--rule);
}
/* h2/h3 inside the tool (NOT the first-child title) become section divider
   bars, not giant headings. Many tools use them as labels for result panels
   that fill in after the user drops a file — they should render compact. */
.main .tool > h3,
.main .tool > h2:not(:first-child) {
  margin: 0;
  padding: 8px 14px;
  font-size: var(--t-xs);
  font-family: var(--mono);
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  background: var(--bg-2);
  border-top: 1px solid var(--rule);
  line-height: 1.2;
}
/* Hide empty h2 (e.g. <h2 id="sq-preview-title"> populated by JS only after
   action) so an empty bar doesn't appear. */
.main .tool > h2:not(:first-child):empty { display: none; }
/* Result containers that appear after each h3/h2: when empty, show
   placeholder hint via ::before so users see the section is waiting. */
.main .tool > h3 + div:empty::before,
.main .tool > h3 + pre:empty::before,
.main .tool > h2 + div:empty::before,
.main .tool > h2 + pre:empty::before {
  content: 'Drop a file to fill this section…';
  display: block;
  color: var(--ink-4);
  font-style: italic;
  padding: 14px 16px;
  font-family: var(--mono);
  font-size: 13px;
}
.main .tool > h3 + ul:empty,
.main .tool > h2 + ul:empty { display: none; }
.main .tool > h3 + div,
.main .tool > h3 + pre,
.main .tool > h2 + div,
.main .tool > h2 + pre {
  padding: 14px 16px;
  font-family: var(--mono);
  font-size: 13px;
  background: var(--surface);
  margin: 0;
  overflow: auto;
}
/* h3/h2 + p (e.g. schema-inspector has explanatory <p>) — readable spacing */
.main .tool > h3 + p,
.main .tool > h2 + p {
  padding: 12px 16px 0;
  margin: 0 0 12px;
  font-size: var(--t-sm);
  color: var(--ink-3);
  background: var(--bg);
}
/* When two bar-headers are adjacent (because their contents are empty), collapse the
   gap so the bars stack flush. */
.main .tool > h3 + h3,
.main .tool > h2 + h2,
.main .tool > h3 + h2,
.main .tool > h2 + h3 { border-top: 0; }
.main .tool > h3:first-of-type { margin-top: 16px; }
.main .tool > *:not(.tool__bar):not(.tool__panes):not(.tool__foot):not(.tool__pane) {
  padding-left: 14px;
  padding-right: 14px;
}
.main .tool > p,
.main .tool > .controls,
.main .tool > .options,
.main .tool > .actions,
.main .tool > .field,
.main .tool > .stats,
.main .tool > .status,
.main .tool > .pager,
.main .tool > .errors,
.main .tool > .error-list,
.main .tool > .summary,
.main .tool > .result,
.main .tool > .table-wrap,
.main .tool > textarea,
.main .tool > input,
.main .tool > select,
.main .tool > .drop-zone,
.main .tool > .dropzone,
.main .tool > .drop,
.main .tool > pre {
  padding-left: 14px;
  padding-right: 14px;
}

/* --- Top-level textareas inside .tool look like tool__in ---- */
.main .tool > textarea {
  display: block;
  width: 100%;
  padding: 14px 16px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
  outline: none;
  resize: vertical;
  min-height: 240px;
  margin: 14px 0;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.main .tool > textarea:focus {
  border-color: var(--accent-soft);
  box-shadow: 0 0 0 3px rgba(21, 53, 92, 0.12);
}
.main .tool > textarea {
  border: 0;
  border-top: 1px solid var(--rule);
  border-radius: 0;
  margin: 0;
  padding: 14px 16px;
  resize: vertical;
}
.main .tool > textarea:first-child { border-top: 0; }
.main .tool > textarea:focus { box-shadow: none; background: #fbfaf6; }

/* --- Buttons inside main ------------------------------------ */
.main button:not(.btn):not(.header__cta):not(.nav-toggle) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 12px;
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease, transform 0.10s ease;
}
.main button:not(.btn):not(.header__cta):not(.nav-toggle):hover {
  background: var(--bg-2);
  border-color: var(--ink-3);
}
.main button:not(.btn):not(.header__cta):not(.nav-toggle):active { transform: translateY(1px); }
.main button:not(.btn):not(.header__cta):not(.nav-toggle):disabled { opacity: 0.5; cursor: not-allowed; }
/* Promote primary-looking buttons (id contains run/validate/convert/download/copy) */
.main button[id*="run"],
.main button[id*="validate"],
.main button[id*="convert"],
.main button[id*="download"],
.main button[id*="apply"],
.main button[id$="-go"] {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.main button[id*="run"]:hover,
.main button[id*="validate"]:hover,
.main button[id*="convert"]:hover,
.main button[id*="download"]:hover,
.main button[id*="apply"]:hover,
.main button[id$="-go"]:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: #fff;
}

/* --- Form inputs/select ------------------------------------- */
.main input[type="text"]:not(.header__search input),
.main input[type="search"]:not(.header__search input),
.main input[type="number"],
.main input[type="url"],
.main input[type="email"],
.main select {
  height: 30px;
  padding: 0 10px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
  outline: none;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.main input[type="text"]:focus,
.main input[type="search"]:focus,
.main input[type="number"]:focus,
.main input[type="url"]:focus,
.main input[type="email"]:focus,
.main select:focus {
  border-color: var(--accent-soft);
  box-shadow: 0 0 0 3px rgba(21, 53, 92, 0.12);
}
.main input[type="file"] { font-size: 13px; max-width: 100%; }

/* --- Controls / options / actions row ----------------------- */
.main .controls,
.main .options,
.main .actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 14px;
  background: var(--bg-2);
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--ink-2);
}
/* Only top-border between siblings inside .tool — never doubled */
.main .tool > .controls,
.main .tool > .options,
.main .tool > .actions { border-top: 1px solid var(--rule); }
.main .tool > .controls:first-child,
.main .tool > .options:first-child,
.main .tool > .actions:first-child { border-top: 0; }
.main .controls label,
.main .options label,
.main .actions label,
.main .field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: var(--t-xs);
  white-space: nowrap;
}
.main .controls label input[type="text"],
.main .controls label input[type="number"],
.main .controls label select,
.main .options label input[type="text"],
.main .options label input[type="number"],
.main .options label select { height: 26px; font-size: 12px; }

/* --- Drop zones --------------------------------------------- */
.main .drop-zone,
.main .dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0;
  font-size: 0.88em;
  color: var(--ink-3);
  padding: 10px 14px;
  border-radius: 0;
  text-align: center;
  background: var(--bg);
  transition: background 0.14s ease, color 0.14s ease;
}
.main .drop-zone div,
.main .dropzone div { display: inline; }
.main .drop-zone strong,
.main .dropzone strong { font-weight: 600; color: var(--ink-2); }
.main .tool > .drop-zone,
.main .tool > .dropzone { border-top: 1px solid var(--rule); }
.main .tool > .drop-zone:first-child,
.main .tool > .dropzone:first-child { border-top: 0; }
/* Make file inputs sit inline next to drop hint text */
.main .drop input[type="file"],
.main .drop-zone input[type="file"],
.main .dropzone input[type="file"] {
  font-size: 12px;
  max-width: 220px;
}
.main .drop-zone.drag,
.main .dropzone.drag,
.main .drop-zone.dragover,
.main .dropzone.dragover {
  background: var(--accent-wash);
  color: var(--accent-dark);
}

/* --- Status / errors / pager / stats ------------------------ */
.main .status,
.main .summary,
.main .stats,
.main .pager,
.main .error-list,
.main .errors {
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--ink-3);
  padding: 8px 14px;
  background: var(--bg-2);
  letter-spacing: 0.01em;
}
.main .tool > .status,
.main .tool > .summary,
.main .tool > .stats,
.main .tool > .pager,
.main .tool > .error-list,
.main .tool > .errors { border-top: 1px solid var(--rule); }
.main .tool > .status:first-child,
.main .tool > .summary:first-child,
.main .tool > .stats:first-child,
.main .tool > .pager:first-child,
.main .tool > .error-list:first-child,
.main .tool > .errors:first-child { border-top: 0; }
.main .status.ok,
.main .status.success { color: var(--ok); background: var(--ok-wash); }
.main .status.err,
.main .status.error,
.main .status.fail { color: var(--err); background: var(--err-wash); }
.main .errors,
.main .error-list {
  color: var(--err);
  background: var(--err-wash);
}
.main .error-list:empty,
.main .errors:empty { display: none; }
.main .error-list ul,
.main .errors ul { margin: 0; padding-left: 20px; }
.main .pager {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* --- Stat blocks -------------------------------------------- */
.main .stat {
  display: inline-flex;
  flex-direction: column;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
  margin: 0 8px 8px 0;
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--ink-3);
}
.main .stat strong { color: var(--ink); font-size: var(--t-md); font-weight: 600; }

/* --- Result panes (when not using .tool__panes) ------------- */
.main .result,
.main .url-output,
.main .output-host,
.main .sql-results,
.main .tree-host {
  background: var(--bg-2);
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink);
  padding: 14px 16px;
  white-space: pre;
  overflow: auto;
  max-height: 560px;
}
.main .url-output { white-space: normal; }

/* --- Two-pane layouts --------------------------------------- */
.main .panes,
.main .split,
.main .two-pane,
.main .sql-pane {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-width: 0;
}
.main .panes { grid-template-columns: 1fr 1fr; }
/* When .panes is the first child of .tool, it sits flush below the title bar.
   When stacked with siblings (.controls/.status), top/bottom rules separate them. */
.main .tool > .panes,
.main .tool > .split,
.main .tool > .two-pane,
.main .tool > .sql-pane { border-top: 1px solid var(--rule); }
.main .tool > .panes:first-child,
.main .tool > .split:first-child,
.main .tool > .two-pane:first-child,
.main .tool > .sql-pane:first-child { border-top: 0; }
.main .sql-pane > div + div { border-left: 1px solid var(--rule); }
.main .sql-pane > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 280px;
}
.main .sql-pane > div > label {
  display: block;
  padding: 8px 14px;
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--ink-3);
  background: var(--bg-2);
  border-bottom: 1px solid var(--rule);
  margin: 0;
}
.main .sql-pane textarea {
  flex: 1;
  border: 0;
  padding: 14px 16px;
  font-family: var(--mono);
  font-size: 13px;
  resize: none;
  outline: none;
  min-height: 240px;
}
.main .sql-results {
  background: var(--bg-2);
  padding: 14px 16px;
  font-family: var(--mono);
  font-size: 13px;
  overflow: auto;
  flex: 1;
  min-height: 280px;
}
.main .panes > .pane + .pane,
.main .split > .pane + .pane,
.main .two-pane > .pane + .pane { border-left: 1px solid var(--rule); }
.main .pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface);
}
.main .pane.preview,
.main .pane.full,
.main .pane:nth-child(2) { background: var(--bg-2); }
.main .pane-label,
.main .pane > label {
  display: block;
  padding: 8px 14px;
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--ink-3);
  background: var(--bg-2);
  border-bottom: 1px solid var(--rule);
  text-transform: lowercase;
  letter-spacing: 0.04em;
  margin: 0;
}
.main .pane textarea,
.main .pane > pre,
.main .pane > .output-host,
.main .pane > .errors,
.main .pane > .error-list,
.main .pane > .result,
.main .pane > [data-role="errors"],
.main .pane > [data-role="output"] {
  flex: 1;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 14px 16px;
  min-height: 360px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink);
  resize: none;
  outline: none;
  background: var(--surface);
}
.main .pane > .errors,
.main .pane > .error-list,
.main .pane > [data-role="errors"] { color: var(--err); }
.main .pane:nth-child(2),
.main .pane.preview,
.main .pane.full { background: var(--bg-2); }
.main .pane:nth-child(2) textarea[readonly],
.main .pane:nth-child(2) > .errors,
.main .pane:nth-child(2) > .result,
.main .pane.preview textarea,
.main .pane.full textarea { background: var(--bg-2); }
/* Ensure both panes inside .panes have the same height (grid does this only
   if the row has explicit height; force it via min-height on the pane). */
.main .panes > .pane,
.main .split > .pane,
.main .two-pane > .pane { min-height: 400px; }

/* Output panes have no .drop file picker, so they would render shorter than
   input panes — phantom spacer matches the .drop height so both panes balance. */
.main .panes > .pane:not(:has(.drop))::after,
.main .split > .pane:not(:has(.drop))::after,
.main .two-pane > .pane:not(:has(.drop))::after {
  content: "";
  display: block;
  height: 41px;
  flex-shrink: 0;
  border-top: 1px solid var(--rule);
}


/* --- Tables (legacy .viewer-table) -------------------------- */
.main .viewer-table {
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 13px;
  width: 100%;
}
.main .viewer-table th,
.main .viewer-table td {
  border: 1px solid var(--rule-soft);
  padding: 5px 10px;
  text-align: left;
  vertical-align: top;
  white-space: pre;
}
.main .viewer-table th {
  background: var(--bg-2);
  position: sticky;
  top: 0;
  cursor: pointer;
  user-select: none;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}

/* --- Features lists (legacy .features as <ul>) -------------- */
.main ul.features {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin: 22px 0 30px;
}
.main ul.features li {
  border: 1px solid var(--rule);
  padding: 18px;
  border-radius: 6px;
  background: var(--surface);
  margin: 0;
  color: var(--ink-2);
}
.main ul.features li strong { color: var(--ink); display: block; margin-bottom: 4px; }

/* --- Related tool grids ------------------------------------- */
.main ul.related,
.main nav.related,
.main .related-grid {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin: 22px 0 30px;
}
.main ul.related li,
.main nav.related a,
.main .related-grid a {
  display: block;
  border: 1px solid var(--rule);
  padding: 16px;
  border-radius: 6px;
  background: var(--surface);
  margin: 0;
  text-decoration: none;
  color: var(--ink-2);
  transition: border-color 0.14s ease, background 0.14s ease;
}
.main ul.related li:hover,
.main nav.related a:hover,
.main .related-grid a:hover {
  border-color: var(--ink-3);
  background: var(--bg-2);
  text-decoration: none;
}
.main ul.related li a,
.main nav.related a strong,
.main .related-grid a strong {
  display: block;
  margin-bottom: 4px;
  color: var(--accent);
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
}
.main ul.related li span,
.main nav.related a span,
.main .related-grid a span {
  display: block;
  color: var(--ink-3);
  font-size: var(--t-sm);
  margin-top: 2px;
}

/* --- Misc widgets ------------------------------------------- */
.main .badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--bg-2);
  color: var(--ink-3);
  border: 1px solid var(--rule);
}
/* Spinners are inappropriate for in-browser tools — hide them entirely.
   The DOM nodes stay so tool.js's showSpinner() calls don't throw. */
.main .spinner,
.main [id$="-spinner"],
.main .loader,
.main .loading { display: none !important; }
.main .map {
  width: 100%;
  flex: 1;
  min-height: 320px;
  background: var(--bg-2);
}
/* When .map-wrap appears as a pane in .panes (geojson-viewer), behave as a pane. */
.main .panes > .map-wrap,
.main .split > .map-wrap,
.main .two-pane > .map-wrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 320px;
  border-left: 1px solid var(--rule);
  background: var(--bg-2);
}
.main .map-wrap > label {
  display: block;
  padding: 8px 14px;
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--ink-3);
  background: var(--bg-2);
  border-bottom: 1px solid var(--rule);
}
.main .map-wrap .info {
  padding: 6px 14px;
  background: var(--bg-2);
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--ink-3);
}
.main .sheet-tabs {
  display: flex;
  gap: 2px;
  padding: 8px 14px 0;
  background: var(--bg-2);
  border-bottom: 1px solid var(--rule);
  overflow-x: auto;
}
.main .sheet-tabs button {
  height: 28px;
  border-radius: 4px 4px 0 0;
}
.main .tables-list {
  list-style: none;
  padding: 0;
  margin: 14px 0;
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
}
.main .tables-list li {
  padding: 8px 12px;
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: var(--t-sm);
}
.main .tables-list li:last-child { border-bottom: 0; }
.main .tables-list li:hover { background: var(--bg-2); cursor: pointer; }

/* --- param-rows / form layouts ------------------------------ */
.main .param-rows {
  display: grid;
  grid-template-columns: minmax(120px, max-content) 1fr;
  gap: 8px 12px;
  padding: 14px;
  margin: 0;
}
.main .param-rows > * { align-self: center; }
.main .param-rows:empty { padding: 0; }
/* Field rows used in form-style tools (url-builder, url-parser) */
.main .tool > .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-top: 1px solid var(--rule-soft);
}
.main .tool > .field:first-of-type { border-top: 1px solid var(--rule); }
.main .tool > .field > label {
  font-size: var(--t-xs);
  font-family: var(--mono);
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.main .tool > .field > input,
.main .tool > .field > textarea {
  width: 100%;
  font-family: var(--mono);
}
/* Floating pane-label outside a .pane (e.g. xpath-tester) */
.main .tool > label.pane-label {
  display: block;
  padding: 8px 14px;
  margin: 0;
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--ink-3);
  background: var(--bg-2);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  text-transform: lowercase;
  letter-spacing: 0.04em;
}

/* --- Hidden helper ------------------------------------------ */
.main .hidden { display: none !important; }
.main .persist.hidden { display: none !important; }

/* ============================================================
   Final pass: cover patterns from a full audit of every tool block
   ============================================================ */

/* Some sites use <div class="tool tool-ui"> — same intent as .tool */
/* (no extra rule needed; .main .tool already targets the class) */

/* mdtools: <div id="drop"> wraps label + textarea + file input.
   Treat it as an input-pane stack. */
.main .tool > div[id="drop"] {
  display: flex;
  flex-direction: column;
}
.main .tool > div[id="drop"] > label {
  display: block;
  padding: 8px 14px;
  margin: 0;
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--ink-3);
  background: var(--bg-2);
  border-bottom: 1px solid var(--rule);
  text-transform: lowercase;
  letter-spacing: 0.04em;
}
.main .tool > div[id="drop"] > textarea {
  border: 0;
  padding: 14px 16px;
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.65;
  resize: vertical;
  outline: none;
  min-height: 260px;
  background: var(--surface);
}
.main .tool > div[id="drop"] > input[type="file"] {
  padding: 10px 14px;
  border-top: 1px solid var(--rule-soft);
  background: var(--bg);
  font-size: 12px;
  margin: 0;
}

/* .split / .two-pane direct child <div> (no class) — same shape as .pane */
.main .split > div,
.main .two-pane > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 280px;
  background: var(--surface);
}
.main .split > div + div,
.main .two-pane > div + div { border-left: 1px solid var(--rule); }
.main .split > div:nth-child(2),
.main .two-pane > div:nth-child(2) { background: var(--bg-2); }
.main .split > div > label,
.main .two-pane > div > label {
  display: block;
  padding: 8px 14px;
  margin: 0;
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--ink-3);
  background: var(--bg-2);
  border-bottom: 1px solid var(--rule);
  text-transform: lowercase;
  letter-spacing: 0.04em;
}
.main .split > div > label strong,
.main .two-pane > div > label strong {
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: 0.04em;
}
.main .split > div > textarea,
.main .two-pane > div > textarea,
.main .split > div > pre,
.main .two-pane > div > pre {
  flex: 1;
  border: 0;
  padding: 14px 16px;
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.65;
  resize: none;
  outline: none;
  background: inherit;
  min-height: 240px;
  overflow: auto;
}
.main .split > div > .pane,
.main .split > div > .preview,
.main .two-pane > div > .pane,
.main .two-pane > div > .preview {
  flex: 1;
  margin: 0;
  padding: 14px 16px;
  background: var(--bg-2);
  overflow: auto;
  font-family: var(--sans);
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--ink);
}

/* .pane.preview / .pane.full — used as a rendered HTML preview area */
.main .pane.preview {
  font-family: var(--sans);
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--ink);
  padding: 14px 16px;
  overflow: auto;
}
.main .pane.preview h1,
.main .pane.preview h2,
.main .pane.preview h3 { font-family: var(--sans); margin: 0 0 8px; }
.main .pane.preview p { margin: 0 0 8px; }
.main .pane.preview ul,
.main .pane.preview ol { margin: 0 0 8px; padding-left: 22px; }
.main .pane.preview pre,
.main .pane.preview code {
  font-family: var(--mono);
  background: var(--bg);
  border-radius: 3px;
}

/* Bare output container <div id="..."> (no class) inside .tool — when filled
   by JS, style as a mono result pane. When empty, show placeholder via ::before
   so the area looks intentional rather than mysteriously blank. */
.main .tool > div[id]:not([class]),
.main .tool > pre[id]:not([class]) {
  margin: 0;
  padding: 14px 16px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  background: var(--surface);
  border-top: 1px solid var(--rule);
  overflow: auto;
  max-height: 640px;
}
.main .tool > pre[id]:not([class]) { white-space: pre; }
.main .tool > div[id]:not([class]):empty::before,
.main .tool > pre[id]:not([class]):empty::before {
  content: 'Drop a file to see this section…';
  color: var(--ink-4);
  font-style: italic;
}

/* Status span sitting inline INSIDE .controls (mdtools pattern) */
.main .controls > .status,
.main .controls > span.status {
  flex: 0 0 auto;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--ink-3);
  margin-left: auto;
}
/* Inline checkbox-label inside .controls should not look like a button row */
.main .controls > label[for] { font-weight: normal; }

/* status.ok / status.success backgrounds — already covered, but verify the
   first-child rule is correct under flex-order-less layout: just style by class */
.main .status.ok,
.main .status.success { color: var(--ok); background: var(--ok-wash); }
.main .status.err,
.main .status.error,
.main .status.fail { color: var(--err); background: var(--err-wash); }

/* .summary right after .status — keep them visually attached, no extra border */
.main .tool > .status + .summary { border-top: 0; }

/* xlsxtools: .sheet-tabs is a horizontal scroll of sheet name buttons */
.main .sheet-tabs { padding: 8px 14px; gap: 4px; }
.main .sheet-tabs:empty { display: none; }
.main .sheet-tabs button {
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 4px 4px 0 0;
  border-bottom: 0;
  color: var(--ink-2);
  font-family: var(--mono);
}
.main .sheet-tabs button.active,
.main .sheet-tabs button[aria-selected="true"] {
  background: var(--surface);
  color: var(--accent);
  font-weight: 600;
}

/* Output containers that previously had no styling (but have a class):
   tables-list / tree-host / output-host / sql-results — already covered. */
/* Bare HTML tables produced by tools — keep them readable */
.main .tool table:not(.viewer-table) {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 13px;
}
.main .tool table:not(.viewer-table) th,
.main .tool table:not(.viewer-table) td {
  border: 1px solid var(--rule-soft);
  padding: 4px 8px;
  text-align: left;
  vertical-align: top;
}
.main .tool table:not(.viewer-table) th {
  background: var(--bg-2);
  font-weight: 600;
  color: var(--ink);
}

/* ============================================================
   Tool-layout fixes (sweep round 4)
   ============================================================ */

/* Empty <span class="badge"> next to pane labels (set by JS) — hide */
.main .pane > label .badge:empty,
.main label .badge:empty,
.main .badge:empty { display: none; }

/* .field inside .two-pane > div / .split > div / .pane: simple block.
   The url-decoder uses <div class="field"><label>…</label><textarea/></div>
   inside its panes; without this rule, .field's flex layout from earlier
   floats the label beside the textarea and ruins the column. */
.main .two-pane > div > .field,
.main .split > div > .field,
.main .pane > .field {
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.main .two-pane > div > .field > label,
.main .split > div > .field > label,
.main .pane > .field > label {
  display: block;
  padding: 8px 14px;
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--ink-3);
  background: var(--bg-2);
  border-bottom: 1px solid var(--rule);
  text-transform: lowercase;
  letter-spacing: 0.04em;
  margin: 0;
  line-height: 1.3;
}
.main .two-pane > div > .field > textarea,
.main .two-pane > div > .field > input,
.main .split > div > .field > textarea,
.main .split > div > .field > input,
.main .pane > .field > textarea,
.main .pane > .field > input {
  flex: 1;
  width: 100%;
  border: 0;
  border-radius: 0;
  padding: 14px 16px;
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.65;
  resize: none;
  outline: none;
  min-height: 320px;
  background: inherit;
}

/* Output textareas show their placeholder cleanly */
.main .pane textarea[readonly]::placeholder,
.main .two-pane textarea[readonly]::placeholder,
.main .split textarea[readonly]::placeholder,
.main .tool textarea[readonly]::placeholder {
  color: var(--ink-4);
  font-style: italic;
}
/* Empty result containers (errors / summary / preview / output divs and
   <pre> result blocks) show placeholder hint text so empty panes don't
   look dead. Hint vanishes the moment JS fills in content. */
.main .pane > .errors:empty::before,
.main .pane > .error-list:empty::before,
.main .pane > [data-role="errors"]:empty::before {
  content: 'Validation errors will appear here…';
  display: block; color: var(--ink-4); font-style: italic;
  padding: 14px 16px; font-family: var(--mono); font-size: 13px;
}
.main .pane > .result:empty::before,
.main .pane > [data-role="output"]:empty::before {
  content: 'Output appears here…';
  display: block; color: var(--ink-4); font-style: italic;
  padding: 14px 16px; font-family: var(--mono); font-size: 13px;
}
.main .pane > .preview:empty::before,
.main .pane.preview:empty::before {
  content: 'Preview appears here…';
  display: block; color: var(--ink-4); font-style: italic;
  padding: 14px 16px; font-family: var(--sans); font-size: var(--t-sm);
}
/* Empty <pre id="..."> output blocks inside .tool — placeholder hint */
.main .tool > pre[id]:empty::before,
.main .pane > pre:empty::before,
.main .two-pane pre:empty::before,
.main .split pre:empty::before {
  content: 'Output appears here…';
  display: block; color: var(--ink-4); font-style: italic;
  font-family: var(--mono); font-size: 13px;
}

/* GeoJSON map: ensure the leaflet container has explicit pixel height —
   leaflet doesn't size correctly inside flex/grid items without it. */
.main .map-wrap {
  position: relative;
}
.main .map-wrap > .map,
.main .map-wrap > [data-role="map"],
.main #map {
  width: 100% !important;
  height: 480px !important;
  min-height: 480px !important;
  flex: none !important;
  background: #dbe7d8;
}
.main .panes > .map-wrap,
.main .split > .map-wrap,
.main .two-pane > .map-wrap { min-height: 540px; }

/* When map is inside .pane sibling, also target it */
.main .pane > .map,
.main .pane > [data-role="map"] {
  width: 100% !important;
  flex: 1 !important;
  min-height: 380px !important;
}

/* h3 inside a pane (proto-to-go pattern: <h3>.proto schema</h3>) — same
   look as a pane-label, not a free-floating heading. */
.main .pane > h3,
.main .two-pane > div > h3,
.main .split > div > h3 {
  display: block;
  padding: 8px 14px;
  margin: 0;
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--ink-3);
  background: var(--bg-2);
  border-bottom: 1px solid var(--rule);
  text-transform: lowercase;
  letter-spacing: 0.04em;
  line-height: 1.3;
}

/* Privacy/lede notice tighten — don't let it eat half the page */
.main .privacy-note,
.main .privacy,
.main .privacy-banner,
.main .privacy-strip { max-width: 68ch; }

/* --- Dataset gallery (datasets.php) ------------------------- */
.main .dataset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin: 22px 0 28px;
}
.main .dataset-card {
  display: block;
  border: 1px solid var(--rule);
  background: var(--surface);
  border-radius: 6px;
  padding: 16px;
  text-decoration: none;
  color: var(--ink-2);
  transition: border-color 0.14s ease, background 0.14s ease, transform 0.10s ease;
}
.main .dataset-card:hover {
  border-color: var(--ink-3);
  background: var(--bg-2);
  text-decoration: none;
}
.main .dataset-card:active { transform: translateY(1px); }
.main .dataset-card__name {
  font-family: var(--mono);
  font-size: var(--t-sm);
  color: var(--accent);
  margin-bottom: 6px;
  word-break: break-all;
}
.main .dataset-card__desc {
  color: var(--ink-2);
  font-size: var(--t-sm);
  line-height: 1.5;
  margin-bottom: 10px;
}
.main .dataset-card__meta {
  font-family: var(--mono);
  font-size: var(--t-xxs);
  color: var(--ink-4);
  letter-spacing: 0.02em;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* --- Mobile tweaks ------------------------------------------ */
@media (max-width: 820px) {
  .main .panes,
  .main .split,
  .main .two-pane { grid-template-columns: 1fr; }
  .main .panes > .pane + .pane,
  .main .split > .pane + .pane,
  .main .two-pane > .pane + .pane {
    border-left: 0;
    border-top: 1px solid var(--rule);
  }
  .main .tool textarea { font-size: 16px; min-height: 200px; }
  .main button:not(.btn):not(.header__cta):not(.nav-toggle) { height: 38px; padding: 0 14px; font-size: var(--t-sm); }
  .main input[type="text"],
  .main input[type="search"],
  .main input[type="number"],
  .main input[type="url"],
  .main input[type="email"],
  .main select { height: 38px; font-size: 16px; padding: 0 10px; }
}

/* ============================================================
   v11 polish — visual hierarchy fixes (sweep round 5)
   - Promote primary actions by data-role (existing rule was id-based;
     half the tools use data-role and had no primary CTA).
   - Balance the right pane vs. the left pane that owns the .drop footer.
   - Subtle accent rail on the input pane so the eye knows where to start.
   ============================================================ */

/* Primary action promotion by data-role (parallel to the id-based rule above) */
.main button[data-role="run"],
.main button[data-role="format"],
.main button[data-role="convert"],
.main button[data-role="validate"],
.main button[data-role="diff"],
.main button[data-role="encode"],
.main button[data-role="decode"],
.main button[data-role="apply"],
.main button[data-role="generate"],
.main button[data-role="parse"],
.main button[data-role="build"],
.main button[data-role="compile"] {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.main button[data-role="run"]:hover,
.main button[data-role="format"]:hover,
.main button[data-role="convert"]:hover,
.main button[data-role="validate"]:hover,
.main button[data-role="diff"]:hover,
.main button[data-role="encode"]:hover,
.main button[data-role="decode"]:hover,
.main button[data-role="apply"]:hover,
.main button[data-role="generate"]:hover,
.main button[data-role="parse"]:hover,
.main button[data-role="build"]:hover,
.main button[data-role="compile"]:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: #fff;
}

/* Destructive-ish actions stay neutral but slightly muted to push the eye
   toward the primary action. Targets the literal 'Clear' button. */
.main button[data-role="clear"],
.main button[data-role="reset"] {
  color: var(--ink-3);
  border-color: var(--rule);
  background: transparent;
}
.main button[data-role="clear"]:hover,
.main button[data-role="reset"]:hover {
  color: var(--err);
  border-color: var(--err);
  background: transparent;
}

/* --- Pane balance ------------------------------------------------
   The input pane usually carries a .drop footer; the output pane has
   none, so the right column ends ~50px shorter and looks hollow.
   Mirror the foot height on the output pane via a flex spacer. */
.main .panes > .pane:not(:has(.drop)),
.main .panes > .pane:not(:has(input[type="file"])) {
  position: relative;
}
.main .panes > .pane > textarea[readonly] {
  background: var(--bg-2);
}
.main .panes > .pane > textarea[readonly]:placeholder-shown {
  /* keep the placeholder readable on the tinted output bg */
  color: transparent;
}
/* Phantom footer on the output pane to match the .drop footer height
   on the input pane — purely visual symmetry. */
.main .panes > .pane:nth-child(2):not(:has(.drop))::after {
  content: "";
  display: block;
  border-top: 1px solid var(--rule-soft);
  background: var(--bg-2);
  min-height: 44px;
}

/* --- Output pane: a clearer "result" affordance ----------------- */
.main .panes > .pane:nth-child(2) > label,
.main .panes > .pane.preview > label,
.main .panes > .pane.full > label {
  border-left: 2px solid var(--accent-soft);
  padding-left: 12px;
}
.main .panes > .pane:nth-child(1) > label {
  border-left: 2px solid var(--accent);
  padding-left: 12px;
}

/* --- Drop zone polish: a touch more visual weight, a touch less
       horizontal padding so the file picker fits without wrapping --- */
.main .drop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  font-size: var(--t-xs);
}
.main .drop input[type="file"] {
  font-size: 12px;
  max-width: 220px;
}

/* --- Indent input (and similar small numeric inputs in toolbars) — give
       it a labeled slot rather than a floating "2" ----------------- */
.main .controls label:has(input[type="number"]) {
  padding: 0 8px 0 10px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--surface);
  height: 30px;
  gap: 8px;
}
.main .controls label:has(input[type="number"]) input[type="number"] {
  height: 26px;
  border: 0;
  padding: 0;
  width: 3em;
  background: transparent;
  text-align: center;
  font-feature-settings: "tnum";
}
.main .controls label:has(input[type="number"]):focus-within {
  border-color: var(--accent-soft);
  box-shadow: 0 0 0 3px rgba(21, 53, 92, 0.10);
}

/* --- Page title region: tighten meta line so it doesn't compete --- */
.main .page-title {
  margin: 8px 0 4px;
}
.main .page-meta {
  margin-bottom: 24px;
  opacity: 0.85;
}

/* --- Status bar: when empty, show a subtle "ready" cue so the row
       isn't an unexplained blank stripe under the tool. ------------- */
.main .tool > .status:empty::before,
.main .tool > [data-role="status"]:empty::before {
  content: "ready.";
  color: var(--ink-4);
  font-style: italic;
  letter-spacing: 0.02em;
}



/* ============ Boxed centered page (2026-04-29) ============ */
html { background: var(--bg-2); }
body {
  max-width: 1280px;
  margin: 0 auto;
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
}
@media (max-width: 1280px) {
  body { border-left: 0; border-right: 0; }
}

/* ============ Theme toggle button ============ */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--header-input-edge);
  border-radius: 6px;
  color: var(--header-ink);
  cursor: pointer;
  margin-right: 6px;
  transition: background 0.14s ease, border-color 0.14s ease;
}
.theme-toggle:hover { background: var(--header-input); }
.theme-toggle__sun, .theme-toggle__moon { display: none; }
[data-theme="light"] .theme-toggle__moon { display: block; }
[data-theme="dark"]  .theme-toggle__sun  { display: block; }

/* ============ Rich error rendering (validator/fixer/stats) ============ */
.main .err-list { list-style: none; padding-left: 0; margin: 8px 0 0; }
.main .err-list > li {
  padding: 10px 12px;
  margin: 0;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--err-wash);
  color: var(--ink-2);
}
.main .err-list > li + li { margin-top: 8px; }
.main .err-list .err-loc {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--err);
  margin-right: 6px;
}
.main .err-list pre.err-src {
  margin: 8px 0 0;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow-x: auto;
  font-size: 12.5px;
  line-height: 1.4;
}
.main .err-list pre.err-src code {
  display: block;
  padding: 0;
  background: transparent;
  font-family: var(--mono);
  white-space: pre;
  color: var(--ink);
}
.main .err-list pre.err-src code.err-caret {
  color: var(--err);
  font-weight: 700;
  white-space: pre;
}
.main .err-list .err-hint {
  margin-top: 6px;
  padding: 6px 10px;
  background: var(--bg-tint);
  border-left: 3px solid var(--accent);
  border-radius: 3px;
  font-size: var(--t-sm);
  color: var(--ink-2);
}
.main .err-list .err-hint strong { color: var(--accent); }

/* ============ Stats fields table ============ */
.main .st-fields {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
}
.main .st-fields th, .main .st-fields td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
}
.main .st-fields th {
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  background: var(--bg-2);
  border-bottom: 1px solid var(--rule);
}
.main .st-fields tbody tr:hover { background: var(--bg-2); }
.main .st-fields code {
  background: var(--bg-tint);
  border: 0;
  padding: 1px 5px;
}

/* ============ Dark theme overrides ============
 * Keep the same accent/CTA colors so tone stays consistent;
 * invert only surfaces/ink/rules. */
[data-theme="dark"] {
  --bg:           #161412;
  --bg-2:         #1f1d1a;
  --bg-tint:      #1c2735;
  --bg-tint-border:#2a3a52;
  --surface:      #1a1816;

  --ink:    #ece8df;
  --ink-2:  #c4bfb3;
  --ink-3:  #8e8a7f;
  --ink-4:  #5d5a52;

  --rule:      #2c2925;
  --rule-soft: #221f1c;
  --rule-hard: #f0ebdf;

  --accent:       #6f9ad1;
  --accent-dark:  #95b7e0;
  --accent-soft:  #4d7aae;
  --accent-wash:  #1e2a3d;
  --focus-ring:   0 0 0 3px rgba(149, 183, 224, 0.35);

  --err:      #e0837a;
  --err-wash: #2a1815;
  --ok:       #8ec07c;
  --ok-wash:  #1a2117;

  --header-bg:    #0b1320;
  --header-edge:  #050913;
  --header-ink:   #f6f3ec;
  --header-ink-2: #8896a8;
  --header-input: #131e30;
  --header-input-edge: #1f2c43;
}
[data-theme="dark"] html { background: var(--bg-2); }
[data-theme="dark"] body { background: var(--bg); color: var(--ink); }
[data-theme="dark"] pre,
[data-theme="dark"] code { color: var(--ink); }
[data-theme="dark"] .main .tool { background: var(--surface); }
[data-theme="dark"] .main .tool > textarea {
  color: var(--ink);
  background: var(--bg);
}
[data-theme="dark"] .main .tool > textarea:focus { background: #211f1c; }
[data-theme="dark"] .main button:not(.btn):not(.header__cta):not(.nav-toggle):not(.theme-toggle) {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--rule);
}
[data-theme="dark"] .main button.primary-action,
[data-theme="dark"] .main button:not(.btn):not(.header__cta):not(.nav-toggle):not(.theme-toggle):hover {
  background: var(--accent);
  color: #0e1a2c;
  border-color: var(--accent);
}
[data-theme="dark"] .err-list > li { background: var(--err-wash); border-color: #3a201c; }
[data-theme="dark"] .err-list pre.err-src { background: #100e0c; border-color: #2c2925; }
[data-theme="dark"] .err-list pre.err-src code { color: var(--ink); }
[data-theme="dark"] .err-list .err-hint { background: var(--bg-tint); border-left-color: var(--accent); }
[data-theme="dark"] .st-fields th { background: var(--bg-2); color: var(--ink-3); }
[data-theme="dark"] .st-fields tbody tr:hover { background: #221f1c; }
[data-theme="dark"] .privacy-note,
[data-theme="dark"] .main .privacy,
[data-theme="dark"] .main .notice,
[data-theme="dark"] .main .info { background: var(--bg-tint); border-color: var(--bg-tint-border); }
[data-theme="dark"] .dataset-card { background: var(--surface); border-color: var(--rule); }
[data-theme="dark"] details { border-color: var(--rule); }
[data-theme="dark"] summary { color: var(--ink); }
[data-theme="dark"] .sidebar { background: var(--bg-2); border-color: var(--rule); }
[data-theme="dark"] .sidebar a { color: var(--ink-2); }
[data-theme="dark"] .sidebar a.active,
[data-theme="dark"] .sidebar a:hover { color: var(--ink); background: var(--surface); }
[data-theme="dark"] .foot { background: var(--bg-2); color: var(--ink-3); border-color: var(--rule); }