csv.css

:root {
  --paper:#f4f0e8;
  --light:#fffaf0;
  --ink:#111317;
  --muted:#686963;
  --line:#c9c5bc;
  --blue:#1346e8;
  --red:#c43c20;
  --green:#137052;
  --yellow:#f3c64d
}
* { box-sizing:border-box }
html { scroll-behavior:smooth }
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:16px/1.5 Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}
button,textarea,input { font:inherit }
button { cursor:pointer }
button:disabled { cursor:not-allowed; opacity:.48 }
a { color:inherit }
:focus-visible { outline:3px solid var(--blue); outline-offset:3px }
.skip {
  position:absolute;
  top:-100px;
  left:12px;
  z-index:20;
  padding:10px;
  background:var(--ink);
  color:#fff
}
.skip:focus { top:12px }
.site-header {
  min-height:72px;
  padding:14px clamp(18px,4vw,64px);
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px
}
.brand { font-size:20px; font-weight:900; letter-spacing:-.05em; text-decoration:none }
.site-header nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px 20px; font-size:12px; font-weight:750 }
.site-header nav a[aria-current="page"] { color:var(--blue) }
main { max-width:1540px; margin:auto }
.hero {
  padding:clamp(48px,7vw,100px) clamp(18px,5vw,76px) 64px;
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(260px,.65fr);
  gap:clamp(35px,8vw,120px);
  align-items:end
}
.eyebrow { margin:0 0 12px; color:var(--blue); font-size:11px; font-weight:900; letter-spacing:.14em }
.hero h1 {
  max-width:980px;
  margin:0 0 26px;
  font-size:clamp(49px,7vw,102px);
  line-height:.92;
  letter-spacing:-.07em
}
.hero h1 em { color:var(--blue); font-family:Georgia,serif; font-weight:400 }
.hero-copy { max-width:790px; font-size:clamp(17px,2vw,22px) }
.hero-actions,.input-actions,.parse-row { display:flex; align-items:center; flex-wrap:wrap; gap:12px }
.hero-actions { margin:26px 0 15px }
.primary,.secondary,.input-actions button,.file-button,.copy-cards button,.delivery-grid a {
  min-height:46px;
  padding:11px 16px;
  border:1px solid var(--ink);
  border-radius:0;
  font-weight:850;
  text-decoration:none
}
.primary { background:var(--blue); border-color:var(--blue); color:#fff }
.secondary,.input-actions button,.file-button,.copy-cards button { background:var(--light); color:var(--ink) }
.local-note,.limits { color:var(--muted); font-size:12px }
.flow { margin:0; padding:0; list-style:none; border-top:1px solid var(--ink) }
.flow li { display:flex; gap:16px; padding:13px 0; border-bottom:1px solid var(--line); font-weight:800 }
.flow span { min-width:28px; color:var(--blue); font:11px ui-monospace,monospace }
.workspace,.results,.request-copy { padding:60px clamp(18px,5vw,76px) }
.section-heading { display:flex; align-items:start; justify-content:space-between; gap:20px }
.section-heading h2,.deliverables h2,.request-copy h2 { margin:0 0 28px; font-size:clamp(34px,4vw,58px); letter-spacing:-.055em; line-height:1 }
.section-heading.compact h2 { font-size:clamp(29px,3.2vw,46px) }
.state { padding:7px 10px; border:1px solid currentColor; font:800 10px ui-monospace,monospace; letter-spacing:.1em }
.state.pending { color:var(--muted) }
.state.ready { color:var(--green) }
.state.invalid { color:var(--red) }
.input-actions { margin-bottom:18px }
.file-button { display:inline-flex; align-items:center; cursor:pointer }
#csv-file { position:absolute; width:1px; height:1px; opacity:0 }
#file-name { max-width:100%; color:var(--muted); font-size:12px; overflow-wrap:anywhere }
.editor-label { display:flex; justify-content:space-between; gap:12px; font-size:14px; font-weight:850 }
.editor-label span { color:var(--muted); font-size:11px; font-weight:500 }
#csv-input {
  display:block;
  width:100%;
  min-height:290px;
  margin-top:8px;
  padding:15px;
  resize:vertical;
  border:1px solid var(--ink);
  border-radius:0;
  background:var(--light);
  color:var(--ink);
  font:12px/1.55 ui-monospace,monospace;
  white-space:pre
}
.limits { max-width:1100px }
.parse-row { justify-content:space-between; margin:20px 0 52px }
#parse-summary { color:var(--muted); font-size:12px }
.policy { padding-top:34px; border-top:1px solid var(--line) }
.policy fieldset { min-width:0; margin:0; padding:18px; border:1px solid var(--ink) }
.policy legend { padding:0 7px; font-weight:900 }
.policy legend span { color:var(--muted); font-size:11px; font-weight:500 }
.key-options { display:flex; flex-wrap:wrap; gap:10px }
.key-options p { margin:0; color:var(--muted); font-size:13px }
.key-options label { display:inline-flex; align-items:center; gap:7px; padding:8px 10px; background:var(--light); border:1px solid var(--line); font:700 13px ui-monospace,monospace }
input[type="checkbox"],input[type="radio"] { accent-color:var(--blue) }
.policy-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px }
.option { display:flex; gap:10px; padding:18px; border:1px solid var(--ink); background:var(--light) }
.option span { display:grid; gap:4px }
.option small,.duplicate-policy label { font-size:12px }
.duplicate-policy { display:grid; gap:7px; background:var(--light) }
.duplicate-policy label { display:flex; gap:7px; align-items:center }
.review-button { display:block; margin:18px 0 0 auto }
.status { min-height:44px; margin:22px 0 0; padding:11px 14px; border-left:4px solid var(--blue); background:#e8e4da; font-size:13px }
.status.error { color:#8c2815; border-color:var(--red) }
.status.success { border-color:var(--green) }
.results { border-top:1px solid var(--line) }
.result-summary { max-width:970px; font-size:19px; font-weight:800 }
.counts { display:grid; grid-template-columns:repeat(4,1fr); margin:25px 0 35px; border:1px solid var(--ink); background:var(--light) }
.counts article { min-width:0; padding:18px; border-right:1px solid var(--line) }
.counts article:last-child { border-right:0 }
.counts span,.counts small { display:block; color:var(--muted); font-size:10px; font-weight:850; letter-spacing:.08em }
.counts strong { display:block; margin:6px 0; font-size:38px; line-height:1; font-variant-numeric:tabular-nums }
.conservation { padding:13px 16px; border-left:4px solid var(--green); background:#e5eee8; font:700 13px ui-monospace,monospace }
.summary-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:18px 0 48px }
.summary-grid article { padding:15px; border:1px solid var(--line) }
.summary-grid h3 { margin:0 0 7px; font-size:14px }
.summary-grid p { margin:0; color:var(--muted); font-size:12px }
.preview-section { margin:44px 0 }
.preview-section h3 { margin:0; font-size:clamp(23px,3vw,36px); letter-spacing:-.035em }
.preview-section>p { margin:7px 0 13px; color:var(--muted); font-size:12px }
.table-scroll { max-width:100%; overflow-x:auto; border:1px solid var(--ink); background:var(--light) }
table { width:100%; border-collapse:collapse; white-space:nowrap; font-size:12px }
th,td { padding:10px 12px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); text-align:left; vertical-align:top }
th { background:#e8e4da; font-size:11px }
tr:last-child td { border-bottom:0 }
th:last-child,td:last-child { border-right:0 }
td { max-width:320px; overflow:hidden; text-overflow:ellipsis }
.reason-conflict { color:#8c2815; font-weight:800 }
.reason-missing { color:#7b5700; font-weight:800 }
.audit-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:48px 0 }
.audit-grid section { min-width:0; padding:22px; border:1px solid var(--ink); background:var(--light) }
.audit-grid h3 { margin:0 0 12px }
.audit-grid ul { margin:0; padding-left:19px }
.audit-grid li,.audit-grid p { margin-bottom:8px; font-size:12px; overflow-wrap:anywhere }
.deliverables { padding-top:48px; border-top:1px solid var(--line) }
.delivery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px }
.delivery-grid article { display:flex; flex-direction:column; min-width:0; padding:22px; border:1px solid var(--ink); background:var(--light) }
.delivery-grid article>span { color:var(--blue); font:11px ui-monospace,monospace }
.delivery-grid h3 { margin:8px 0; font-size:22px }
.delivery-grid p { flex:1; font-size:12px }
.delivery-grid a { display:block; text-align:center; background:var(--blue); border-color:var(--blue); color:#fff }
.delivery-grid a[aria-disabled="true"] { pointer-events:none; opacity:.42 }
.approval { display:flex; gap:10px; align-items:flex-start; margin:22px 0 0; padding:16px; border:1px solid var(--ink); font-weight:800 }
.approval input { margin-top:4px }
.sensitive-note { padding:12px 15px; border-left:4px solid var(--yellow); background:#fff3cd; font-size:12px }
.request-copy { border-top:1px solid var(--line); display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:50px }
.request-copy>div>p:not(.eyebrow) { max-width:620px }
.x-link { display:inline-block; margin-top:14px; font-weight:850 }
.copy-cards { display:grid; grid-template-columns:1fr 1fr; gap:14px }
.copy-cards article { display:flex; flex-direction:column; min-width:0; padding:20px; border:1px solid var(--ink); background:var(--light) }
.copy-cards h3 { margin:0 0 10px }
.copy-cards p { flex:1; font-size:13px }
.copy-cards button { width:100% }
footer { padding:30px clamp(18px,5vw,76px); background:var(--ink); color:#fff; display:flex; justify-content:space-between; gap:20px; font-size:12px }

@media (max-width:900px) {
  .hero,.request-copy { grid-template-columns:1fr }
  .policy-grid,.audit-grid { grid-template-columns:1fr }
  .summary-grid { grid-template-columns:1fr 1fr }
  .delivery-grid { grid-template-columns:1fr }
}
@media (max-width:620px) {
  .site-header { align-items:flex-start; flex-direction:column }
  .site-header nav { justify-content:flex-start }
  .workspace,.results,.request-copy { padding-top:44px; padding-bottom:44px }
  .section-heading { align-items:flex-start }
  .counts { grid-template-columns:1fr 1fr }
  .counts article:nth-child(2) { border-right:0 }
  .counts article:nth-child(-n+2) { border-bottom:1px solid var(--line) }
  .summary-grid,.copy-cards { grid-template-columns:1fr }
}
@media (max-width:390px) {
  .hero { padding-left:14px; padding-right:14px }
  .workspace,.results,.request-copy { padding-left:14px; padding-right:14px }
  .hero h1 { font-size:43px }
  .hero-actions>* ,.input-actions>*:not(#file-name),.parse-row .primary,.review-button { width:100%; text-align:center }
  .parse-row { align-items:stretch }
  .editor-label { display:block }
  .editor-label span { display:block }
  .policy fieldset,.option { padding:13px }
  .key-options label { max-width:100%; overflow-wrap:anywhere }
  .delivery-grid article { padding:17px }
  footer { flex-direction:column }
}