/* Data Anonymizer - 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;
  --radius: 10px;
}

* { box-sizing: border-box; }

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: 920px; 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;
}
.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; }

/* Steps */
.steps {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 26px 0 18px;
  counter-reset: step;
}
.steps li {
  counter-increment: step;
  font-size: 0.85rem;
  color: var(--muted);
  padding: 6px 12px 6px 34px;
  border: 1px solid var(--border);
  border-radius: 999px;
  position: relative;
  background: var(--panel);
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 6px; top: 50%;
  transform: translateY(-50%);
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--panel-2);
  color: var(--muted);
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  border: 1px solid var(--border);
}
.steps li.active { color: var(--text); border-color: var(--accent); }
.steps li.active::before { background: var(--accent); color: #06101f; border-color: var(--accent); }
.steps li.done { color: var(--good); border-color: #21402c; }
.steps li.done::before { content: "\2713"; background: var(--good-bg); color: var(--good); border-color: #21402c; }

/* 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; }
.note a { color: var(--accent); text-decoration: underline; }
.note a:hover { color: var(--accent-2); }

/* Dropzone */
.dropzone {
  display: block;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 42px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.dropzone:hover, .dropzone.drag { border-color: var(--accent); background: var(--panel-2); }
.dz-title { font-size: 1.1rem; font-weight: 600; }
.dz-sub { color: var(--muted); font-size: 0.9rem; margin-top: 6px; }

/* 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 :not(:disabled) everywhere. A control that lights up and
   then refuses the click reads as broken rather than unavailable. */
.btn:not(:disabled):hover { border-color: var(--accent); }
.btn-primary { background: var(--accent-2); border-color: var(--accent-2); color: #fff; font-weight: 600; }
.btn-primary:not(:disabled):hover { background: #2f74e0; border-color: #2f74e0; }
.btn-ghost { background: transparent; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; border-color: var(--border); }
.actions { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }

/* Segmented control (sheet picker) */
.segmented { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.segmented .seg {
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  padding: 9px 16px;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
}
.segmented .seg:hover { border-color: var(--accent); }
.segmented .seg.selected { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }

/* Suggestions bar, above the mapping grid */
.suggest-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--panel-2);
  border: 1px solid #2f4c73;
  border-radius: 8px;
}
/* The sentence takes the slack and the button keeps its width, so nothing on
   the row moves when the wording changes. */
.suggest-text { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 0.92rem; }
.btn-accept-all { flex: 0 0 auto; border-color: var(--accent); color: var(--accent); }
.btn-accept-all:not(:disabled):hover { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }

/* Mapping grid */
.map-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 16px; }
.map-row {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 190px;
  gap: 14px;
  align-items: center;
  padding: 10px 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.map-label { display: flex; align-items: center; gap: 8px; }
.req-badge {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--warn);
  border: 1px solid #4a3a12;
  background: #241d0c;
  padding: 1px 6px;
  border-radius: 4px;
}
.map-row select {
  font: inherit;
  width: 100%;
  padding: 8px 10px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 7px;
}
.map-row select:focus { outline: none; border-color: var(--accent); }
.map-row.satisfied { border-color: #21402c; }

/* Per-row suggestion. The cell is a fixed width so the dropdown next to it does
   not resize when the button changes from an offer to a confirmation. */
.map-suggest { display: flex; }
.btn-suggest {
  width: 100%;
  display: block;
  font-size: 0.85rem;
  padding: 8px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.btn-suggest:not(:disabled) { border-color: #2f4c73; color: var(--accent); }
.map-suggest-none {
  width: 100%;
  text-align: center;
  color: var(--muted);
  font-size: 0.82rem;
}

/* Error alert */
.error-alert {
  border: 1px solid #4a1d1f;
  background: var(--bad-bg);
  color: #ffb4ae;
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 18px;
}
.error-alert ul { margin: 8px 0 0; padding-left: 20px; }

/* Progress */
.progress { display: flex; align-items: center; gap: 14px; padding: 10px 0; }
.spinner {
  width: 22px; height: 22px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.progress-text { color: var(--muted); }

/* Verdict */
.verdict { border-radius: var(--radius); padding: 16px 18px; margin-bottom: 18px; font-weight: 600; }
.verdict.pass { background: var(--good-bg); border: 1px solid #21402c; color: var(--good); }
.verdict.fail { background: var(--bad-bg); border: 1px solid #4a1d1f; color: var(--bad); }
.verdict small { display: block; font-weight: 400; color: var(--muted); margin-top: 6px; }

/* 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: 130px;
}
.stat .num { font-size: 1.5rem; font-weight: 700; }
.stat .lbl { color: var(--muted); font-size: 0.82rem; }
.stat.warn .num { color: var(--warn); }

/* Preview table */
.table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; }
table.preview { border-collapse: collapse; width: 100%; font-size: 0.85rem; }
table.preview th, table.preview td {
  border-bottom: 1px solid var(--border);
  padding: 7px 10px;
  text-align: left;
  white-space: nowrap;
}
table.preview thead th { background: var(--panel-2); position: sticky; top: 0; }
table.preview td.changed { color: var(--accent); }
table.preview .rowlabel { color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.4px; }

/* Downloads */
.downloads { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 4px; }
.dl-card {
  flex: 1 1 260px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  border-radius: 8px;
  padding: 16px;
}
.dl-card .fname { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.85rem; word-break: break-all; }
.dl-card .desc { color: var(--muted); font-size: 0.85rem; margin: 6px 0 12px; }

/* 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; }

@media (max-width: 760px) {
  .map-row { grid-template-columns: minmax(0, 1fr) 170px; }
  .map-label { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .map-row { grid-template-columns: 1fr; }
  .map-label { grid-column: auto; }
  .suggest-bar { flex-direction: column; align-items: stretch; }
  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;
}