/* CSVUndo — design system (no frameworks, fast, accessible) */
:root{
  --bg:#f7f9fc; --card:#ffffff; --ink:#16233b; --muted:#5b6b85; --line:#dfe6f0;
  --brand:#1a6ef5; --brand-dark:#0f4fc0; --ok:#0b7a43; --warn:#8f5a00; --bad:#c02717; --badge-ink:#0a7a42;
  --code-bg:#eef2f8; --radius:12px; --shadow:0 2px 12px rgba(22,35,59,.07);
  --maxw:1040px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f1523; --card:#171f31; --ink:#e8eef9; --muted:#9db0cc; --line:#2a3a56;
    --brand:#5b96ff; --brand-dark:#7fadff; --code-bg:#101828; --shadow:0 2px 12px rgba(0,0,0,.35); --badge-ink:#4ade80;
    --ok:#34d399; --warn:#fbbf24; --bad:#ff8a80;
  }
  /* --brand is light in dark mode, so white button text drops to 2.9:1 */
  .btn{color:#0f1523}
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.65; font-size:16.5px;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
code,kbd{background:var(--code-bg); padding:2px 7px; border-radius:6px; font-size:.92em;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
pre{background:var(--code-bg); padding:14px; border-radius:10px; overflow-x:auto}
img{max-width:100%}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 18px}

/* header */
header.site{background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50}
header.site .wrap{display:flex; align-items:center; gap:14px; padding:10px 18px}
.logo{display:flex; align-items:center; gap:9px; font-weight:800; font-size:19px; color:var(--ink)}
.logo:hover{text-decoration:none}
.logo svg{width:26px; height:26px}
nav.main{margin-left:auto; display:flex; gap:4px; flex-wrap:wrap}
nav.main a{padding:7px 11px; border-radius:8px; color:var(--muted); font-size:14.5px; font-weight:600}
nav.main a:hover{background:var(--code-bg); color:var(--ink); text-decoration:none}
nav.main a.active{color:var(--brand)}

/* hero */
.hero{padding:44px 0 10px; text-align:center}
.hero h1{font-size:clamp(26px,4.6vw,40px); line-height:1.2; margin:0 0 12px; letter-spacing:-.5px}
.hero p.sub{color:var(--muted); font-size:18px; max-width:680px; margin:0 auto 8px}
.badges{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:16px 0 4px}
.badge{font-size:13px; font-weight:600; color:var(--badge-ink); background:color-mix(in srgb,var(--ok) 14%, transparent);
  border:1px solid color-mix(in srgb,var(--ok) 30%, transparent); padding:4px 12px; border-radius:999px}

/* cards & layout */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:22px; margin:18px 0}
.grid{display:grid; gap:16px}
@media(min-width:760px){ .grid.cols3{grid-template-columns:1fr 1fr 1fr} .grid.cols2{grid-template-columns:1fr 1fr} }
.tool-card h3{margin:4px 0 8px; font-size:18px}
.tool-card p{margin:0; color:var(--muted); font-size:14.5px}
.tool-card .go{display:inline-block; margin-top:12px; font-weight:700; font-size:14.5px}

/* tool UI */
.drop{border:2px dashed var(--line); border-radius:var(--radius); padding:26px; text-align:center;
  color:var(--muted); background:var(--card); transition:border-color .15s, background .15s; cursor:pointer}
.drop.hover{border-color:var(--brand); background:color-mix(in srgb,var(--brand) 6%, var(--card))}
.drop strong{color:var(--ink)}
textarea.csvin{width:100%; min-height:170px; border:1px solid var(--line); border-radius:10px;
  padding:12px; font-family:ui-monospace,Consolas,monospace; font-size:13.5px; background:var(--card);
  color:var(--ink); resize:vertical}
textarea.csvin:focus{outline:2px solid var(--brand); outline-offset:-1px}
.btn{display:inline-flex; align-items:center; gap:8px; background:var(--brand); color:#fff;
  border:none; border-radius:10px; padding:12px 22px; font-size:15.5px; font-weight:700; cursor:pointer}
.btn:hover{background:var(--brand-dark)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn.secondary{background:transparent; color:var(--brand); border:1.5px solid var(--brand)}
.btn.secondary:hover{background:color-mix(in srgb,var(--brand) 8%, transparent)}
.btnrow{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}

/* issue panel */
.issues{margin-top:16px}
.issue{display:flex; gap:12px; align-items:flex-start; padding:13px 14px; border:1px solid var(--line);
  border-radius:10px; margin-bottom:10px; background:var(--card)}
.issue input[type=checkbox]{width:19px; height:19px; margin-top:3px; accent-color:var(--brand)}
.issue .t{font-weight:700}
.issue .d{color:var(--muted); font-size:14px}
.issue.found{border-color:color-mix(in srgb,var(--warn) 45%, var(--line))}
.count{display:inline-block; min-width:26px; text-align:center; background:color-mix(in srgb,var(--warn) 15%, transparent);
  color:var(--warn); font-weight:800; border-radius:7px; padding:1px 8px; font-size:13.5px}
.count.zero{background:var(--code-bg); color:var(--muted)}

/* column picker */
table.cols{width:100%; border-collapse:collapse; font-size:14px; margin-top:8px}
table.cols th, table.cols td{border:1px solid var(--line); padding:7px 9px; text-align:left}
table.cols th{background:var(--code-bg)}
table.cols input[type=number]{width:64px; padding:4px 6px; border:1px solid var(--line); border-radius:6px;
  background:var(--card); color:var(--ink)}
table.cols input[type=checkbox]{accent-color:var(--brand); width:16px; height:16px}
.scrollx{overflow-x:auto}

/* preview */
table.preview{border-collapse:collapse; font-size:13px; font-family:ui-monospace,Consolas,monospace; white-space:nowrap}
table.preview th, table.preview td{border:1px solid var(--line); padding:5px 9px}
/* not sticky: .scrollx only scrolls horizontally, so a sticky top did nothing except
   slide the header row underneath the sticky site header on the way down the page */
table.preview th{background:var(--code-bg)}
td.fixed{background:color-mix(in srgb,var(--ok) 13%, transparent)}
td.flag{background:color-mix(in srgb,var(--warn) 14%, transparent)}

.note{font-size:14px; color:var(--muted); background:var(--code-bg); border-radius:10px; padding:12px 14px; margin-top:14px}
.note.ok{color:var(--ok)}
.privacy-line{text-align:center; color:var(--muted); font-size:13.5px; margin-top:10px}

/* article/content pages */
article.content{max-width:760px; margin:0 auto; padding:14px 0 40px}
article.content h1{font-size:clamp(24px,4vw,34px); line-height:1.25; letter-spacing:-.4px}
article.content h2{margin-top:34px; font-size:23px}
article.content h3{margin-top:24px; font-size:18.5px}
article.content .meta{color:var(--muted); font-size:14px; margin-bottom:20px}
.tocbox{background:var(--code-bg); border-radius:10px; padding:14px 18px; font-size:14.5px}
.tocbox a{display:block; padding:3px 0}
.cta-tool{background:linear-gradient(100deg, color-mix(in srgb,var(--brand) 14%, var(--card)), var(--card));
  border:1.5px solid var(--brand); border-radius:var(--radius); padding:20px 22px; margin:26px 0}
.cta-tool .btn{margin-top:10px}
blockquote{border-left:4px solid var(--brand); margin:18px 0; padding:6px 18px; color:var(--muted)}

/* faq */
details.faq{border:1px solid var(--line); border-radius:10px; padding:13px 16px; margin-bottom:10px; background:var(--card)}
details.faq summary{font-weight:700; cursor:pointer}
details.faq p{margin:10px 0 2px; color:var(--muted)}

/* ad slots (empty until AdSense approved) */
.adslot{min-height:90px; display:flex; align-items:center; justify-content:center;
  border:1px dashed var(--line); border-radius:10px; color:transparent; margin:22px 0}

/* footer */
footer.site{border-top:1px solid var(--line); margin-top:48px; padding:28px 0 36px; background:var(--card)}
footer.site .cols{display:grid; gap:20px; grid-template-columns:1fr}
@media(min-width:700px){ footer.site .cols{grid-template-columns:2fr 1fr 1fr} }
footer.site h4{margin:0 0 10px; font-size:15px}
footer.site a{display:block; color:var(--muted); font-size:14px; padding:2.5px 0}
footer.site .fine{color:var(--muted); font-size:13px; margin-top:18px}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

/* skip link (keyboard/screen-reader users jump straight to content) */
.skip-link{position:absolute; left:-999px; top:0; z-index:100; background:var(--brand); color:#fff;
  padding:10px 16px; border-radius:0 0 8px 0; font-weight:700}
.skip-link:focus{left:0; text-decoration:none}

/* visible keyboard focus for every interactive element (accessibility) */
a:focus-visible, button:focus-visible, select:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:3px solid var(--brand); outline-offset:2px; border-radius:6px}
.drop:focus-visible{outline:3px solid var(--brand); outline-offset:2px}
/* The real focus target is the file input inside .drop, and .sr-only clips it to
   1x1px — so its outline was an invisible dot. Show the focus on the zone instead. */
.drop:focus-within{outline:3px solid var(--brand); outline-offset:2px; border-color:var(--brand)}

/* iOS Safari zooms the page in on any input under 16px and leaves it zoomed, which
   is punishing on a paste-first tool. Desktop keeps the tighter sizes. */
@media (max-width:760px){
  textarea.csvin, select, input[type=number], input[type=text], input[type=search]{font-size:16px}
}

/* reduce motion for users who ask for it */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition:none !important}
}

/* print: drop the chrome, keep the readable content, expand external URLs */
@media print{
  header.site, footer.site, .adslot, .cta-tool, #tool, .badges, .privacy-line, .skip-link{display:none !important}
  body{background:#fff; color:#000; font-size:12pt}
  a{color:#000}
  .card{box-shadow:none; border:1px solid #ccc}
  main.wrap, article.content{max-width:none}
  article.content a[href^="http"]::after{content:" (" attr(href) ")"; font-size:.82em; color:#555; word-break:break-all}
  table.cols, table.preview{page-break-inside:auto}
  h2, h3{page-break-after:avoid}
}