/* Layout only: where things go. Styling comes later. */
/* Flex, not grid rows: browser extensions inject <div>s into <body>, which would take the rows. */
body { max-width: 960px; margin: 0 auto; padding: 0 16px; min-height: 100vh; display: flex; flex-direction: column; font-family: system-ui, sans-serif; }
header, nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
header { justify-content: space-between; padding: 12px 0; }
nav form, td form { display: inline; }
main { flex: 1; padding: 16px 0; }
footer { padding: 12px 0; }
.stack { display: grid; gap: 8px; max-width: 480px; }
.stack label { display: grid; gap: 4px; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 4px 8px; vertical-align: top; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.unread { font-weight: bold; }
.drop { border: 2px dashed; padding: 16px; margin: 8px 0; }
.nowrap { white-space: nowrap; }
.log { max-height: 60vh; overflow: auto; white-space: pre-wrap; }
/* Diffs: one block per line, so a line's color spans the width. */
.diff span { display: block; }
.diff .add { background: #e6ffec; }
.diff .del { background: #ffebe9; }
.diff .hunk { color: #57606a; }
.drop.over { border-style: solid; }
.debug { color: #e0b400; font-size: small; }