/* Cleanrow tool: built from statements/web/static/cleanrow.css. Everything is scoped under .cr (the tool) or
   body.cr-ext (the extension's page around it). On whitehatharbor.com the page chrome comes from style.css and this
   file only styles the tool, in the site's dark palette. The extension page follows the system's light or dark
   setting (html.cr-auto). No inline styles anywhere: the Content-Security-Policy forbids them. */

.cr {
  --cr-bg: var(--night, #081216);
  --cr-surface: var(--deep, #0d1c22);
  --cr-line: var(--hull, #1f3740);
  --cr-text: var(--foam, #e6f0f1);
  --cr-muted: var(--fog, #8fa6ad);
  --cr-accent: var(--signal, #38e1d4);
  --cr-on-accent: #081216;
  --cr-warn: var(--caution, #f2c14e);
  --cr-bad: var(--alert, #ff5a4f);
  --cr-ok-bg: rgb(56 225 212 / .08);
  --cr-warn-bg: rgb(242 193 78 / .08);
  --cr-bad-bg: rgb(255 90 79 / .09);
  --cr-dup-bg: rgb(242 193 78 / .10);
  --cr-flag-bg: rgb(56 225 212 / .05);
  --cr-display: var(--display, system-ui, sans-serif);
  --cr-mono: var(--mono, ui-monospace, Menlo, monospace);
  color: var(--cr-text);
  margin: 1.5rem 0 3rem;
}
@media (prefers-color-scheme: light) {
  .cr-auto .cr, .cr-auto body.cr-ext {
    --cr-bg: #ffffff;
    --cr-surface: #f2f6f7;
    --cr-line: #c5d3d7;
    --cr-text: #0b1a1f;
    --cr-muted: #4a5f66;
    --cr-accent: #0a7069;
    --cr-on-accent: #ffffff;
    --cr-warn: #7a4f00;
    --cr-bad: #b3261e;
    --cr-ok-bg: rgb(10 112 105 / .08);
    --cr-warn-bg: rgb(122 79 0 / .07);
    --cr-bad-bg: rgb(179 38 30 / .07);
    --cr-dup-bg: rgb(242 193 78 / .22);
    --cr-flag-bg: rgb(10 112 105 / .05);
  }
}

.cr *, .cr *::before, .cr *::after { box-sizing: border-box; }
.cr p { margin: 0 0 .75rem; }
.cr-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.cr-fine { color: var(--cr-muted); font-size: .9rem; line-height: 1.45; }
.cr-block { display: block; }
.cr-msg { color: var(--cr-warn); font-weight: 600; }
.cr-ok-text { color: var(--cr-accent); font-weight: 600; }
.cr-h, .cr-h3, .cr-title { font-family: var(--cr-display); font-weight: 600; color: var(--cr-text); }
.cr-h { font-size: 1.3rem; margin: 2rem 0 .6rem; }
.cr-title { font-size: 1.6rem; margin: 2rem 0 .8rem; overflow-wrap: anywhere; }
.cr-h3 { font-size: 1.2rem; margin: 0; }
.cr-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: 0 0 .75rem; }
.cr-spread { justify-content: space-between; margin-top: 1.5rem; }
.cr-spread .cr-fine { margin: 0; flex: 1 1 16rem; }
.cr :focus-visible { outline: 2px solid var(--cr-accent); outline-offset: 2px; }

/* Buttons and inputs */
.cr-button {
  display: inline-flex; align-items: center; min-height: 2.5rem; padding: .35rem 1rem;
  border: 1px solid var(--cr-accent); border-radius: 3px; background: transparent; color: var(--cr-accent);
  font: 600 1rem/1.2 var(--cr-display); letter-spacing: .02em; text-decoration: none; cursor: pointer;
}
.cr-button:hover { background: var(--cr-ok-bg); }
.cr-primary { background: var(--cr-accent); color: var(--cr-on-accent); }
.cr-primary:hover { background: var(--cr-accent); filter: brightness(1.08); }
.cr-button:disabled { border-color: var(--cr-line); color: var(--cr-muted); background: transparent; cursor: not-allowed; filter: none; }
.cr-link {
  padding: 0; border: 0; background: none; color: var(--cr-accent); font: inherit; text-decoration: underline;
  text-underline-offset: .18em; cursor: pointer;
}
.cr-input {
  min-height: 2.4rem; max-width: 100%; padding: .3rem .55rem; border: 1px solid var(--cr-line); border-radius: 3px;
  background: var(--cr-surface); color: var(--cr-text); font: inherit; font-size: .95rem;
}
.cr-input[aria-invalid="true"] { border-color: var(--cr-bad); }
.cr-wide { flex: 1 1 14rem; min-width: 0; }
.cr-amt-in { width: 9rem; font-family: var(--cr-mono); }
.cr-x {
  min-width: 2.2rem; min-height: 2.2rem; border: 1px solid var(--cr-line); border-radius: 3px; background: none;
  color: var(--cr-muted); font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.cr-x:hover { color: var(--cr-text); border-color: var(--cr-muted); }

/* Price and limits, shown before any file */
.cr-offer { display: grid; gap: 1rem; margin: 0 0 1.25rem; }
@media (min-width: 46rem) { .cr-offer { grid-template-columns: 1fr 1fr; } }
.cr-tier { padding: 1rem 1.1rem .25rem; border: 1px solid var(--cr-line); border-radius: 3px; }
.cr-tier-name { font: 600 1.15rem/1.3 var(--cr-display); margin-bottom: .35rem !important; }
.cr-key { margin: 0 0 .75rem; }
.cr-key summary { cursor: pointer; color: var(--cr-accent); margin-bottom: .5rem; }
.cr-key .cr-input { flex: 1 1 12rem; min-width: 0; font-family: var(--cr-mono); }

/* Drop zone */
.cr-drop {
  padding: 1.5rem 1.25rem 1rem; border: 2px dashed var(--cr-line); border-radius: 4px; background: var(--cr-surface);
}
.cr-drop.cr-over { border-color: var(--cr-accent); background: var(--cr-ok-bg); }
.cr-drop-title { font: 600 1.35rem/1.25 var(--cr-display); }
.cr-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.cr-drop:focus-within .cr-button { outline: 2px solid var(--cr-accent); outline-offset: 3px; }
.cr-drop .cr-fine { margin: .75rem 0 0; }
.cr-drop-compact { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; padding: .6rem 1rem; }
.cr-drop-compact p { margin: 0; }
.cr-drop-compact .cr-drop-title { font-size: 1.05rem; }
.cr-drop-compact > p:nth-of-type(2) { display: none; }
.cr-drop-compact .cr-fine { margin: 0; flex-basis: 100%; }

/* File list */
.cr-tabs { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.cr-tabs li { display: flex; gap: .4rem; margin: 0; }
.cr-tabs li::marker { content: none; }
.cr-tab {
  flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem;
  padding: .45rem .7rem; border: 1px solid var(--cr-line); border-radius: 3px; background: none; color: var(--cr-text);
  font: inherit; text-align: left; cursor: pointer;
}
.cr-tab:hover { border-color: var(--cr-muted); }
.cr-tab[aria-current="true"] { border-color: var(--cr-accent); background: var(--cr-ok-bg); }
.cr-tab-name { flex: 1 1 10rem; min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.cr-badge {
  display: inline-block; padding: .05rem .45rem; border: 1px solid var(--cr-line); border-radius: 3px;
  font: 600 .8rem/1.5 var(--cr-display); letter-spacing: .02em; color: var(--cr-muted); white-space: nowrap;
}
.cr-badge.cr-ok { color: var(--cr-accent); border-color: var(--cr-accent); }
.cr-badge.cr-warn { color: var(--cr-warn); border-color: var(--cr-warn); }
.cr-badge.cr-bad { color: var(--cr-bad); border-color: var(--cr-bad); }
.cr-checks { padding-left: 1.2rem; }

/* Summary and the balance-check banner */
.cr-summary { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .2rem 1rem; margin: 0 0 1rem; }
.cr-summary dt { color: var(--cr-muted); font-family: var(--cr-display); }
.cr-summary dd { margin: 0; overflow-wrap: anywhere; }
.cr-kind-wrap { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .15rem .6rem; }
.cr-summary .cr-kind { padding-top: .1rem; padding-bottom: .1rem; }
@media (min-width: 46rem) { .cr-summary { grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); } }
.cr-banner { margin: 1rem 0; padding: 1rem 1.15rem .35rem; border-left: 6px solid var(--cr-muted); background: var(--cr-surface); }
.cr-banner:focus { outline: 2px solid var(--cr-accent); outline-offset: 2px; }
.cr-banner-title { font: 600 1.3rem/1.3 var(--cr-display); margin-bottom: .4rem !important; overflow-wrap: anywhere; }
.cr-banner-ok { border-color: var(--cr-accent); background: var(--cr-ok-bg); }
.cr-banner-ok .cr-banner-title { color: var(--cr-accent); }
.cr-banner-bad { border-color: var(--cr-bad); background: var(--cr-bad-bg); }
.cr-banner-bad .cr-banner-title { color: var(--cr-bad); }
.cr-banner-none { border-color: var(--cr-warn); background: var(--cr-warn-bg); }
.cr-banner-none .cr-banner-title { color: var(--cr-warn); }
.cr-callout { margin: 1rem 0; padding: .75rem 1rem; border: 1px solid var(--cr-line); border-radius: 3px; }
.cr-callout ul { margin: 0; padding-left: 1.2rem; }
.cr-callout-title { font-weight: 600; margin-bottom: .3rem !important; }
.cr-callout.cr-warn { border-color: var(--cr-warn); background: var(--cr-warn-bg); }
.cr-callout.cr-dup { border-color: var(--cr-warn); background: var(--cr-dup-bg); }
.cr-gate { border-color: var(--cr-accent); }
.cr-notes { margin: .75rem 0; }
.cr-notes summary, .cr-profiles summary { cursor: pointer; color: var(--cr-muted); }
.cr-notes ul { margin: .5rem 0; padding-left: 1.2rem; font-size: .95rem; }

/* Tables: they scroll inside themselves so the page never scrolls sideways */
.cr-scroll { overflow-x: auto; max-width: 100%; margin: .5rem 0 1rem; border: 1px solid var(--cr-line); border-radius: 3px; }
.cr-table, .cr-raw {
  display: table; width: 100%; border-collapse: collapse; margin: 0; font-size: .93rem; line-height: 1.4;
}
.cr-table th, .cr-table td, .cr-raw th, .cr-raw td {
  padding: .4rem .6rem; border-bottom: 1px solid var(--cr-line); text-align: left; vertical-align: top;
}
.cr-table th, .cr-raw th {
  position: sticky; top: 0; background: var(--cr-surface); color: var(--cr-muted); font: 600 .88rem/1.3 var(--cr-display);
  white-space: nowrap;
}
.cr-table td:first-child, .cr-raw td:first-child { color: inherit; }
.cr-raw td { white-space: nowrap; font-family: var(--cr-mono); font-size: .82rem; }
.cr-num { color: var(--cr-muted) !important; font-variant-numeric: tabular-nums; }
.cr-nowrap { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cr-desc { min-width: 12rem; overflow-wrap: anywhere; }
.cr-amt { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cr-neg { color: var(--cr-text); }
.cr-flagged { background: var(--cr-flag-bg); }
.cr-break { background: var(--cr-bad-bg); }
.cr-break td:first-child { box-shadow: inset 4px 0 var(--cr-bad); }
.cr-dup { background: var(--cr-dup-bg); }
.cr-dup td:first-child { box-shadow: inset 4px 0 var(--cr-warn); }
.cr-table tr:target { outline: 2px solid var(--cr-accent); outline-offset: -2px; }
.cr-notes-cell { min-width: 9rem; }
.cr-flag {
  display: inline-block; margin: 0 .3rem .2rem 0; padding: 0 .4rem; border: 1px solid var(--cr-line); border-radius: 3px;
  font-size: .8rem; line-height: 1.5; white-space: nowrap; color: var(--cr-muted);
}
.cr-flag-bad { color: var(--cr-bad); border-color: var(--cr-bad); }
.cr-flag-dup { color: var(--cr-warn); border-color: var(--cr-warn); }
.cr-flag-edit { color: var(--cr-accent); border-color: var(--cr-accent); }
.cr-editing { background: var(--cr-ok-bg); }
.cr-edit { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }

/* CSV column mapping */
.cr-mapping { margin: 0 0 1rem; padding: .75rem 1rem .25rem; border: 1px solid var(--cr-line); border-radius: 3px; }
.cr-mapping > summary { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; cursor: pointer; margin-bottom: .5rem; }
.cr-grid { display: grid; gap: .25rem 1rem; }
@media (min-width: 40rem) { .cr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cr-field { margin: 0 0 .85rem; padding: 0; border: 0; min-width: 0; }
.cr-field > label:first-child, .cr-field legend { display: block; margin-bottom: .25rem; font: 600 .95rem/1.3 var(--cr-display); color: var(--cr-text); padding: 0; }
.cr-field select { width: 100%; }
.cr-inline { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.cr-inline select { width: auto; }
.cr-needs label { color: var(--cr-warn); }
.cr-choice { display: flex; align-items: flex-start; gap: .5rem; margin: .2rem 0; cursor: pointer; font-weight: 400 !important; font-family: inherit !important; }
.cr-choice input { margin-top: .3rem; accent-color: var(--cr-accent); flex: none; }
.cr-sign select { flex: 1 1 14rem; min-width: 0; }
.cr-profiles ul { padding-left: 1.2rem; }

/* Download */
.cr-export { margin: 1.5rem 0 0; padding: 1rem 1.1rem .5rem; border: 1px solid var(--cr-line); border-radius: 3px; }
.cr-export .cr-h3 { margin-bottom: .75rem; }
.cr-formats .cr-choice { margin: .35rem 0; }
.cr-export select { width: auto; }

/* ---- The extension's page around the tool ---- */
body.cr-ext {
  --cr-bg: #081216; --cr-text: #e6f0f1; --cr-muted: #8fa6ad; --cr-line: #1f3740; --cr-accent: #38e1d4;
  margin: 0; background: var(--cr-bg); color: var(--cr-text);
  font: 400 1rem/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.cr-ext-header, .cr-ext-main, .cr-ext-footer { max-width: 70rem; margin: 0 auto; padding: 0 16px; }
@media (min-width: 40rem) { .cr-ext-header, .cr-ext-main, .cr-ext-footer { padding: 0 24px; } }
.cr-ext-header { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; padding-top: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--cr-line); }
.cr-ext-brand { display: flex; align-items: center; gap: .6rem; margin-right: auto; font-weight: 600; font-size: 1.15rem; }
.cr-ext-brand img { width: 28px; height: 28px; }
.cr-ext-header nav { display: flex; gap: 1rem; flex-wrap: wrap; }
body.cr-ext a { color: var(--cr-accent); }
.cr-ext-main h1 { font-size: 1.7rem; line-height: 1.2; margin: 1.5rem 0 .4rem; }
.cr-ext-lede { color: var(--cr-muted); margin: 0 0 1rem; }
.cr-ext-footer { margin-top: 3rem; padding-top: 1rem; padding-bottom: 2rem; border-top: 1px solid var(--cr-line); color: var(--cr-muted); font-size: .88rem; }
body.cr-ext :focus-visible { outline: 2px solid var(--cr-accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .cr *, .cr *::before, .cr *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media print {
  .cr-offer, .cr-drop, .cr-files, .cr-export, .cr-mapping, .cr-x { display: none !important; }
  .cr { color: #000; }
  .cr-scroll { overflow: visible; border: 0; }
}