/* Why Won't My VLOOKUP Match? - dark portfolio theme. No external fonts or assets. */
:root {
  --bg: #0e1116;
  --panel: #161b22;
  --panel-2: #1c2330;
  --border: #2a3140;
  --text: #e6edf3;
  --muted: #9aa7b4;
  --accent: #4f9cf9;
  --accent-2: #3b82f6;
  --good: #3fb950;
  --good-bg: #12261a;
  --bad: #f85149;
  --bad-bg: #2a1416;
  --warn: #d29922;
  --warn-bg: #241d0c;
  --purple: #a780e8;
  --purple-bg: #221a33;
  --radius: 10px;
}

* { box-sizing: border-box; }

/* The hidden attribute only carries display:none from the browser's own
   stylesheet, so any author rule that sets display (a grid, a flex row) beats
   it and the element stays on screen. Everything using [hidden] here would
   otherwise keep showing stale formulas beside an error message. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.55;
}

.wrap { width: 100%; max-width: 980px; margin: 0 auto; padding: 0 20px; }

code {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 6px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9em;
}

/* Header */
.site-header {
  border-bottom: 1px solid var(--border);
  background: rgba(13, 17, 23, 0.85);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(6px);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  padding-bottom: 14px;
  flex-wrap: wrap;
}
.brand { font-weight: 700; font-size: 1.05rem; letter-spacing: 0.2px; }
.privacy-pill {
  font-size: 0.8rem;
  color: var(--good);
  border: 1px solid #21402c;
  background: var(--good-bg);
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Intro */
.intro { padding-top: 34px; }
h1 { font-size: 1.8rem; margin: 0 0 12px; line-height: 1.2; }
.lede { color: var(--muted); font-size: 1.05rem; max-width: 720px; }
h2 { font-size: 1.25rem; margin: 0 0 8px; }
h3 { font-size: 1.05rem; margin: 22px 0 10px; }

/* Panels */
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 22px;
}
.note { color: var(--muted); font-size: 0.92rem; margin: 6px 0 0; }

/* Input grid */
.input-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.field label { display: block; font-weight: 600; margin-bottom: 6px; }
.field textarea {
  width: 100%;
  min-height: 220px;
  resize: vertical;
  font: 0.88rem/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
}
.field textarea:focus { outline: none; border-color: var(--accent); }

/* Buttons */
.btn {
  font: inherit;
  font-size: 0.95rem;
  border-radius: 8px;
  padding: 9px 18px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
/* Hover is guarded on :enabled: a disabled button that lights up under the
   cursor and then refuses the click reads as broken rather than unavailable. */
.btn:enabled:hover { border-color: var(--accent); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--accent-2); border-color: var(--accent-2); color: #fff; font-weight: 600; }
.btn-primary:enabled:hover { background: #2f74e0; border-color: #2f74e0; }
.btn-ghost { background: transparent; }
.btn-small { padding: 5px 12px; font-size: 0.82rem; }
.actions { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }

/* Summary banner */
.summary-banner {
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 18px;
  font-weight: 600;
  font-size: 1.05rem;
}
.summary-banner.clean { background: var(--good-bg); border: 1px solid #21402c; color: var(--good); }
.summary-banner.issues { background: var(--warn-bg); border: 1px solid #4a3a12; color: var(--warn); }
.summary-banner.empty { background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); font-weight: 400; }

/* Stats */
.stats { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.stat {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  min-width: 120px;
}
.stat .num { font-size: 1.5rem; font-weight: 700; }
.stat .lbl { color: var(--muted); font-size: 0.82rem; }
.stat.warn .num { color: var(--warn); }
.stat.good .num { color: var(--good); }

/* Group breakdown chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.chip {
  font-size: 0.82rem;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--muted);
}

/* Results table */
.table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; }
table.results { border-collapse: collapse; width: 100%; font-size: 0.88rem; }
table.results th, table.results td {
  border-bottom: 1px solid var(--border);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}
table.results thead th { background: var(--panel-2); position: sticky; top: 0; white-space: nowrap; }
table.results tbody tr:last-child td { border-bottom: none; }
.col-value { font-family: ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-word; }
.col-why { color: var(--muted); min-width: 220px; }
.col-fix { min-width: 160px; }

/* Visible whitespace marker: this is the tool's teaching mechanic. */
.ws-mark {
  background: var(--bad-bg);
  color: var(--bad);
  border-radius: 3px;
  padding: 0 1px;
}
.ws-empty { color: var(--muted); font-style: italic; }

/* Result pills */
.pill {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.pill-match { background: var(--good-bg); color: var(--good); border: 1px solid #21402c; }
.pill-space { background: var(--warn-bg); color: var(--warn); border: 1px solid #4a3a12; }
.pill-case { background: var(--purple-bg); color: var(--purple); border: 1px solid #3a2d55; }
.pill-text-number { background: #241a0c; color: #e0994f; border: 1px solid #4a3512; }
.pill-near-dup { background: var(--warn-bg); color: var(--warn); border: 1px solid #4a3a12; }
.pill-no-match { background: var(--bad-bg); color: var(--bad); border: 1px solid #4a1d1f; }

.fix-suggestion { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fix-suggestion code { max-width: 220px; overflow-wrap: anywhere; }
.fix-uncertain { color: var(--muted); font-size: 0.78rem; display: block; margin-top: 2px; }
.fix-none { color: var(--muted); }

/* Formula builder */
.formula-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px;
  margin-top: 16px;
}
.formula-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.field-label { display: block; font-weight: 600; margin-bottom: 6px; }
.field input[type="text"] {
  width: 100%;
  font: 0.9rem/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
}
.field input[type="text"]:focus { outline: none; border-color: var(--accent); }

/* Segmented control: one of N, so it reads as one control rather than as
   loose buttons. The radios stay in the DOM for keyboard and screen readers
   and the labels carry the appearance. */
.segmented {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--panel-2);
}
.segmented input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.segmented label {
  padding: 8px 16px;
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--muted);
  border-right: 1px solid var(--border);
  transition: background 0.15s, color 0.15s;
}
.segmented label:last-of-type { border-right: none; }
.segmented label:hover { color: var(--text); }
.segmented input[type="radio"]:checked + label {
  background: var(--accent-2);
  border-color: var(--accent-2);
  color: #fff;
  font-weight: 600;
}
.segmented input[type="radio"]:focus-visible + label { outline: 2px solid var(--accent); outline-offset: -2px; }

.check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  margin-bottom: 8px;
  cursor: pointer;
}
.check input[type="checkbox"] { accent-color: var(--accent-2); width: 16px; height: 16px; cursor: pointer; }

/* Collect every problem into one block rather than reporting them one at a
   time. */
.error-alert {
  margin-top: 20px;
  background: var(--bad-bg);
  border: 1px solid #4a1d1f;
  border-radius: var(--radius);
  padding: 14px 18px;
  color: var(--text);
  font-size: 0.92rem;
}
.error-alert p { margin: 0 0 6px; font-weight: 600; color: var(--bad); }
.error-alert ul { margin: 0; padding-left: 20px; }
.error-alert li { margin-bottom: 4px; }
.error-alert li:last-child { margin-bottom: 0; }

.dialects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
  margin-top: 20px;
}
.dialect {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.dialect h3 { margin: 0 0 12px; font-size: 1rem; }
.formula-row { margin-bottom: 14px; }
.formula-row:last-child { margin-bottom: 0; }
.formula-label { color: var(--muted); font-size: 0.82rem; margin-bottom: 5px; }
/* The formula text takes the slack and the copy button refuses to shrink, so
   a longer formula never moves the button. */
.formula-line { display: flex; align-items: flex-start; gap: 10px; }
.formula-line code {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 7px 10px;
  background: var(--bg);
  font-size: 0.84rem;
  line-height: 1.5;
}
.formula-line .btn { flex: 0 0 auto; }
.formula-why { margin-top: 20px; max-width: 720px; }

/* Rules panel */
.rules-list { margin: 0; padding-left: 20px; color: var(--muted); font-size: 0.92rem; }
.rules-list li { margin-bottom: 8px; }

/* Footer */
.site-footer { border-top: 1px solid var(--border); margin: 30px 0 40px; padding-top: 18px; }
.site-footer p { color: var(--muted); font-size: 0.85rem; }
.site-footer a { color: var(--accent); }

@media (max-width: 700px) {
  .input-grid { grid-template-columns: 1fr; }
  h1 { font-size: 1.5rem; }
}

/* Shared tool footer, identical on every tool in the tree so the set reads as
   one. Two sections on purpose: the first is a promise and has to be true of
   THIS page, the second is boilerplate and has to be the same everywhere.
   Merging them is how a wrong promise gets copied around.
   The colours are the design-token-standard values, scoped to this component
   so that whatever a given tool calls its own colours cannot distort it. */
.tool-footer {
  --tf-border: #475569;
  --tf-border-strong: #64748b;
  --tf-surface-2: #334155;
  --tf-text: #e2e8f0;
  --tf-muted: #94a3b8;
  --tf-accent: #38bdf8;
  border-top: 1px solid var(--tf-border);
  margin-top: 48px;
  padding-top: 24px;
  padding-bottom: 40px;
  color: var(--tf-muted);
  font-size: 14px;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
/* Selectors below are deliberately doubled up. Several tools already carry
   rules like ".site-footer p { color: ... }", which outrank a single class and
   would recolour the promise line on some tools and not others. */
.tool-footer p { margin: 0; max-width: 70ch; }
.tool-footer .tool-footer-privacy { color: var(--tf-text); }
.tool-footer .tool-footer-meta { color: var(--tf-muted); }
.tool-footer .tool-footer-meta a { color: var(--tf-accent); text-decoration: underline; }
.tool-footer .tool-footer-sep { color: var(--tf-border-strong); padding: 0 4px; }
.tool-footer .tool-footer-button {
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  color: var(--tf-text);
  background: transparent;
  border: 1px solid var(--tf-border-strong);
  border-radius: 8px;
  padding: 9px 16px;
}
.tool-footer .tool-footer-button:hover { background: var(--tf-surface-2); border-color: var(--tf-accent); }
.tool-footer-button:focus-visible { outline: 2px solid var(--tf-accent); outline-offset: 2px; }

/* Shared header promise line, identical on every tool in the tree. The selector is
   deliberately SELF-DOUBLED, exactly like the footer block below: several tools carry
   rules such as "header.site p" or ".site-header p" whose specificity (0,1,2) outranks
   a single class (0,1,0), which was rendering this promise at the tagline size on some
   tools and leaving it completely unstyled on the four with separate stylesheets. The
   words only change when the FACTS change, and neither does the styling. */
.tool-promise.tool-promise {
  --tp-border: #475569;
  --tp-accent: #4ade80;
  display: inline-block;
  margin: 10px 0 0;
  padding: 6px 12px;
  border: 1px solid var(--tp-border);
  border-left: 3px solid var(--tp-accent);
  border-radius: 6px;
  color: #94a3b8;
  font-size: 13.5px;
  line-height: 1.5;
  font-weight: 400;
  max-width: 70ch;
}