/*
 * Craigslist chrome. The joke only works if the shell is boring and correct, so
 * this is imitation rather than design: 13px sans, #00e links that go purple on
 * visit, hairline rules, and almost no colour anywhere else.
 */

:root {
  --link: #00e;
  --visited: #551a8b;
  --ink: #000;
  --muted: #666;
  --faint: #999;
  --rule: #ccc;
  --bg: #fff;
  --accent: #00a;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
}

body {
  font: 13px/1.45 "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

a {
  color: var(--link);
  text-decoration: none;
}
a:visited {
  color: var(--visited);
}
a:hover {
  text-decoration: underline;
}

.wrap {
  max-width: 1060px;
  margin: 0 auto;
  padding: 10px 14px 50px;
}

/* ---------------------------------------------------------------- header */

header.site {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 6px;
}

.wordmark {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--ink);
}
.wordmark a {
  color: inherit;
}

.dateline {
  font-size: 13px;
  color: var(--muted);
}
.dateline strong {
  color: var(--ink);
}

/* Sits at the far right of the header like craigslist's own tiny utility links. */
.sndtoggle {
  margin-left: auto;
  font-size: 12px;
  color: var(--link);
  white-space: nowrap;
}

.crumbs {
  font-size: 12px;
  color: var(--muted);
  padding: 3px 0 8px;
}
.crumbs a {
  color: var(--link);
}
.crumbs .sep {
  color: var(--faint);
  padding: 0 4px;
}

/* --------------------------------------------------------------- landing */

.lede {
  font-size: 13px;
  color: var(--muted);
  max-width: 640px;
  margin: 2px 0 16px;
}

.pickbar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 18px;
  padding: 10px;
  border: 1px solid var(--rule);
  background: #fafafa;
}
.pickbar input[type="date"],
.pickbar input[type="text"] {
  font: inherit;
  padding: 3px 5px;
  border: 1px solid #aaa;
}
button {
  font: inherit;
  padding: 3px 10px;
  border: 1px solid #888;
  background: #eee;
  cursor: pointer;
  color: var(--ink);
}
button:hover {
  background: #e0e0e0;
}

.decades {
  /* Capping the width to an exact multiple of (column + gap) stops CSS columns
     from stretching to fill: 6 x 150 + 5 x 20. Without it they sprawl. */
  column-width: 150px;
  column-gap: 20px;
  max-width: 1000px;
}
.decade {
  break-inside: avoid;
  margin: 0 0 12px;
}
.decade h3 {
  font-size: 13px;
  margin: 0 0 3px;
  font-weight: 700;
}
.decade .thin {
  color: var(--faint);
  font-weight: 400;
  font-size: 11px;
}
.decade ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.decade li {
  line-height: 1.42;
}
/* Weight the years the archive actually covers well, the way craigslist bolds
   its big cities. */
.decade li.rich a {
  font-weight: 700;
}
.decade li.sparse a {
  color: #6a6ab5;
}

/* ----------------------------------------------------------------- board */

.cols {
  /* 5 x 185 + 4 x 20. Pinning to an exact multiple keeps the columns at their
     stated width instead of stretching across whatever space is going, which is
     what made the board read as three columns adrift in a wide page. */
  column-width: 185px;
  column-gap: 20px;
  max-width: 1005px;
}
.group {
  break-inside: avoid;
  margin: 0 0 13px;
}
.group h2 {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 1px;
  text-transform: lowercase;
}
.group ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.group li {
  line-height: 1.42;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.count {
  color: var(--faint);
  font-size: 11px;
}
.group li.empty {
  color: var(--faint);
}

/* ------------------------------------------------------------------ list */

.listwrap {
  display: flex;
  gap: 22px;
  align-items: flex-start;
}
.sidebar {
  width: 180px;
  flex: 0 0 180px;
  font-size: 12px;
}
.sidebar h4 {
  font-size: 12px;
  margin: 0 0 4px;
  font-weight: 700;
}
.sidebar ul {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  max-height: 320px;
  overflow: auto;
}
.sidebar li {
  line-height: 1.6;
  cursor: pointer;
  color: var(--link);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar li:hover {
  text-decoration: underline;
}
.sidebar li.on {
  font-weight: 700;
  color: var(--ink);
}
.results {
  flex: 1 1 auto;
  min-width: 0;
  /* Rows read as a column of text, not a table stretched to the window. */
  max-width: 800px;
}

.rowcount {
  color: var(--muted);
  font-size: 12px;
  padding: 0 0 8px;
}

ul.rows {
  list-style: none;
  margin: 0;
  padding: 0;
}
li.row {
  padding: 2px 0;
  line-height: 1.45;
  display: flex;
  gap: 8px;
  align-items: baseline;
}
li.row .when {
  color: var(--faint);
  font-size: 11px;
  flex: 0 0 40px;
}
li.row .price {
  color: var(--ink);
  font-weight: 700;
  flex: 0 0 auto;
}
li.row .title {
  /* Shrinks when long, never grows — craigslist sets the neighbourhood directly
     after the title rather than flushing it to the far edge. */
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
li.row .hood {
  color: var(--muted);
  flex: 0 0 auto;
  font-size: 12px;
}
li.row .pic {
  color: var(--faint);
  font-size: 11px;
  border: 1px solid var(--rule);
  padding: 0 3px;
  flex: 0 0 auto;
}

/* --------------------------------------------------------------- posting */

.posting {
  max-width: 720px;
}
.posting h1 {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 2px;
  line-height: 1.3;
}
.posting .meta {
  color: var(--muted);
  font-size: 12px;
  margin: 0 0 12px;
}
.clip {
  border: 1px solid var(--rule);
  padding: 6px;
  background: #f7f5f0;
  display: inline-block;
  max-width: 100%;
  margin: 0 0 12px;
}
.clip img {
  display: block;
  max-width: 100%;
  /* Museum photographs are tall enough to push the whole posting off screen;
     newsprint clippings are wide and short and are unaffected. */
  max-height: 400px;
  width: auto;
  height: auto;
}
.clip .cap {
  font-size: 11px;
  color: var(--muted);
  padding-top: 4px;
}
.body {
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 16px;
  white-space: pre-wrap;
}
.replybtn {
  margin: 0 0 14px;
}
.reply {
  border: 1px solid var(--rule);
  padding: 12px;
  margin: 0 0 16px;
  background: #fafafa;
  max-width: 460px;
}
.reply .field {
  font-size: 12px;
  color: var(--muted);
  padding: 2px 0;
}
.reply .field b {
  color: var(--ink);
  font-weight: 400;
}
.reply .note {
  font-size: 12px;
  color: var(--muted);
  border-top: 1px solid var(--rule);
  margin-top: 8px;
  padding-top: 8px;
}
.orig {
  font-size: 12px;
}

/* ---------------------------------------------------------------- states */

.status {
  color: var(--muted);
  font-size: 13px;
  padding: 4px 0 10px;
}
.status .bar {
  display: inline-block;
  width: 90px;
  height: 3px;
  background: var(--rule);
  vertical-align: middle;
  margin-left: 8px;
  overflow: hidden;
}
.status .bar i {
  display: block;
  height: 100%;
  width: 36%;
  background: var(--accent);
  animation: press 1.1s ease-in-out infinite;
}
@keyframes press {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(280%);
  }
}

.empty-state {
  border: 1px solid var(--rule);
  padding: 12px 14px;
  margin: 4px 0 16px;
  max-width: 540px;
  color: var(--muted);
}
.empty-state b {
  color: var(--ink);
}

footer.site {
  margin-top: 26px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
  font-size: 11px;
  color: var(--faint);
}
footer.site a {
  color: var(--muted);
}

@media (max-width: 700px) {
  .listwrap {
    display: block;
  }
  .sidebar {
    width: auto;
    margin-bottom: 16px;
  }
  li.row {
    flex-wrap: wrap;
  }
}