* { box-sizing: border-box }
[hidden] { display: none !important }
body { margin: 0; background: #fcfcfc; color: #000; font: 16px/1.5 system-ui, sans-serif }
main { width: min(100% - 32px, 1120px); margin: 28px auto 56px }
header { margin-bottom: 24px; max-width: 640px }
p { margin: 8px 0; color: #525252; overflow-wrap: anywhere }
.brand { font-size: .875rem; font-weight: 650; color: #404040 }
h1 { margin: 8px 0; font-size: clamp(28px, 5vw, 36px); line-height: 1.1; letter-spacing: -.045em }
h2 { margin: 0 0 12px; font-size: 1.25rem; letter-spacing: -.02em }
section { background: #fff; border: 1px solid #e4e4e4; border-radius: 14px; padding: clamp(14px, 3vw, 24px); margin-bottom: 16px }
label { display: block; font-size: .875rem; font-weight: 650; margin-bottom: 6px }
input { width: 100%; min-height: 44px; padding: 8px; border: 1px solid #7d7d7d; border-radius: 8px; font: inherit }
input::file-selector-button { font: inherit }
#help, #store, #status, #result-count { font-size: .875rem }
#status { color: #000; font-weight: 600; margin-bottom: 0 }
#status:empty { display: none }
.store-controls { border-top: 1px solid #e4e4e4; margin-top: 16px; padding-top: 8px }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0 }
.spread { justify-content: space-between; margin: 0 0 16px }
.spread h2 { margin: 0 }
button { min-height: 44px; padding: 8px 12px; border: 1px solid #7d7d7d; border-radius: 8px; background: #fff; color: #000; font: inherit; font-size: .875rem; font-weight: 650; cursor: pointer }
button:hover:not(:disabled) { background: #f3f3f3 }
button.primary { color: #fff; background: #000; border-color: #000 }
button.primary:hover:not(:disabled) { background: #353535 }
button:disabled { background: #ededed; color: #525252; border-color: #e4e4e4; cursor: default }
:focus-visible { outline: 2px solid #000; outline-offset: 3px }

.filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px }
.filters button { display: flex; align-items: center; justify-content: space-between; gap: 4px; text-align: left; border-color: #d2d2d2 }
.filters button[aria-pressed="true"] { border-color: #000; box-shadow: inset 0 0 0 1px #000; background: #f5f5f5 }
.count { font-variant-numeric: tabular-nums; color: #454545 }
#result-count { margin: 12px 0 }
.result-table { display: none }
.result-cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px }
.result-cards li { min-width: 0; padding: 12px; border: 1px solid #e4e4e4; border-radius: 8px }
.result-cards h3 { margin: 0; font-size: .95rem; overflow-wrap: anywhere }
.row-number { margin: 3px 0 10px; font-size: .75rem }
.result-cards dl { margin: 0; display: grid; grid-template-columns: 1fr; gap: 2px }
.result-cards dt { color: #525252; font-size: .75rem; font-weight: 650 }
.result-cards dd { margin: 0 0 6px; font-size: .8125rem }
.path { font-family: ui-monospace, monospace; overflow-wrap: anywhere }
.finding { font-weight: 650 }
.finding:is([data-kind="missing"], [data-kind="mismatch"]) { color: #902c25 }
.finding[data-kind="matched"] { color: #235d43 }

@media (min-width: 480px) {
  .filters { grid-template-columns: repeat(3, minmax(0, 1fr)) }
}
@media (min-width: 760px) {
  main { margin-top: 52px }
  .input-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px }
  .store-controls { align-self: center; border-top: 0; border-left: 1px solid #e4e4e4; margin-top: 0; padding: 0 0 0 24px }
  #status { grid-column: 1 / -1 }
  .result-cards { display: none }
  .result-table { display: table; table-layout: fixed; width: 100%; border-collapse: collapse; font-size: .875rem; text-align: left }
  th, td { padding: 10px; border-bottom: 1px solid #e4e4e4; vertical-align: top; overflow-wrap: anywhere }
  thead th { background: #f5f5f5 }
  thead th:first-child, thead th:nth-child(5) { width: 74px }
}
@media (min-width: 1024px) {
  .filters { grid-template-columns: repeat(6, minmax(0, 1fr)) }
}