/* nickel-free.
 *
 * Away from every surface this portfolio has already used: four apps landed on
 * a warm ivory, one went dark neutral, one cool slate, one plain white. This is
 * a pale yellow-green, and the layout is unlike the others too -- full-width
 * rows with a thick verdict rail down the left and THE SELLER'S OWN WORDS in
 * monospace as the largest thing after the title, with the deciding word marked.
 *
 * That is the argument, not decoration: the app is reading free text somebody
 * typed, and a page that hid the text behind a confident badge would be claiming
 * more than it knows.
 *
 * No style="" attributes anywhere -- `style-src 'self'` blocks them while the
 * page still returns 200, so the failure is invisible to curl.
 */

:root {
  --bg: #f3f6ea;
  --card: #fdfefa;
  --ink: #1d2418;
  --soft: #5d6553;
  --rule: #d3dbc4;
  --safe: #2f6b3f;
  --caution: #8a6212;
  --unsure: #6c7263;
  --avoid: #a3281f;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15.5px/1.6 system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

main, .bar, .ends, .say { max-width: 48rem; margin-inline: auto; padding-inline: 1.25rem; }

a { color: #2c5c3a; }
a:hover { color: var(--avoid); }

/* ------------------------------------------------------------------ chrome */

.bar {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  align-items: baseline; justify-content: space-between;
  padding-block: 1.75rem .75rem;
}
.wordmark {
  font-family: var(--mono); font-size: 1.1rem; font-weight: 700;
  letter-spacing: -.02em; color: var(--ink); text-decoration: none;
}
.bar nav { display: flex; gap: 1.25rem; font-size: .85rem; }
.bar nav a { color: var(--soft); }

.say { padding: .55rem 1.25rem; margin: .5rem auto 1rem; border-left: 4px solid var(--safe); background: var(--card); font-size: .92rem; }
.say.no { border-left-color: var(--avoid); }

.ends {
  margin-top: 3.5rem; padding-block: 1.25rem 3rem;
  border-top: 1px solid var(--rule);
  font-size: .82rem; color: var(--soft);
  display: flex; flex-wrap: wrap; gap: .35rem 1.15rem;
}
.ends a { color: var(--soft); }
.ends p { flex-basis: 100%; margin: .7rem 0 0; max-width: 44rem; }
.warn { color: var(--avoid); font-weight: 600; }

/* -------------------------------------------------------------- typography */

h1 { font-size: 1.7rem; line-height: 1.25; margin: 1rem 0 .75rem; max-width: 26ch; letter-spacing: -.015em; }
h2 { font-size: 1.05rem; margin: 2.25rem 0 .5rem; }
.lede { max-width: 60ch; }
.aside { max-width: 60ch; font-size: .88rem; color: var(--soft); }
.crumb { margin-top: 2.5rem; font-size: .88rem; }
.empty { color: var(--soft); font-style: italic; }

/* -------------------------------------------------------------------- rows */

.rows { list-style: none; margin: 1.25rem 0; padding: 0; }

.row {
  display: flex; gap: 0;
  background: var(--card); border: 1px solid var(--rule); border-left: 0;
  margin-bottom: .6rem;
}
.rail { flex: 0 0 7px; background: var(--unsure); }
.v-safe    .rail { background: var(--safe); }
.v-caution .rail { background: var(--caution); }
.v-unsure  .rail { background: var(--unsure); }
.v-avoid   .rail { background: var(--avoid); }
.row.dead { opacity: .62; }

.body { flex: 1 1 auto; min-width: 0; padding: .8rem 1rem; }

.head { display: flex; gap: .75rem; align-items: baseline; margin: 0 0 .35rem; }
.what { flex: 1 1 auto; font-weight: 600; color: var(--ink); text-decoration: none; }
a.what:hover { text-decoration: underline; color: var(--avoid); }
.cost { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* The seller's words. The point of the page. */
.says {
  margin: .1rem 0 .45rem;
  font-family: var(--mono); font-size: .92rem;
  color: #33402c; word-break: break-word;
}
.says .none { color: var(--soft); font-style: italic; }
.says mark {
  background: #fff2c9; color: inherit;
  padding: 0 .15em; border-bottom: 2px solid var(--caution); font-weight: 700;
}
.v-avoid .says mark { background: #ffe0dc; border-bottom-color: var(--avoid); }
.v-safe  .says mark { background: #dff0e2; border-bottom-color: var(--safe); }

.call { margin: 0 0 .5rem; display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: baseline; font-size: .85rem; }
.badge {
  font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700;
  border: 1px solid currentColor; padding: .08rem .35rem; white-space: nowrap;
}
.v-safe    .badge { color: var(--safe); }
.v-caution .badge { color: var(--caution); }
.v-unsure  .badge { color: var(--unsure); }
.v-avoid   .badge { color: var(--avoid); }
.badge.alarm, .badge.out { color: var(--avoid); background: #ffecea; }
.why { color: var(--soft); }
.when { margin: 0; font-size: .78rem; color: var(--soft); font-style: italic; }

/* ----------------------------------------------------------------- watches */

.watches { list-style: none; margin: 1rem 0; padding: 0; }
.watches li {
  display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline;
  padding: .55rem 0; border-bottom: 1px solid var(--rule);
}
.terms { font-family: var(--mono); font-weight: 700; }
.shape { flex: 1 1 auto; font-size: .82rem; color: var(--soft); }

/* ------------------------------------------------------------------- forms */

.enter { margin: 2rem 0; }
.go {
  display: inline-block; background: var(--ink); color: var(--bg); border: 0;
  padding: .65rem 1.3rem; text-decoration: none; font: inherit; font-weight: 600; cursor: pointer;
}
.go:hover { background: var(--safe); }
.go.small { padding: .4rem .9rem; font-size: .9rem; }

.inline { display: inline; }
.plain {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: .85rem; color: #2c5c3a; text-decoration: underline;
}
.plain:hover { color: var(--avoid); }
.plain.dim { color: var(--soft); }

.ask { display: block; margin: 1.5rem 0; padding: 1rem 0; border-top: 1px solid var(--rule); max-width: 32rem; }
.ask label { display: block; font-size: .85rem; color: var(--soft); margin-bottom: .6rem; }
.ask input, select {
  display: block; width: 100%; margin-top: .2rem; padding: .45rem .55rem;
  border: 1px solid var(--rule); background: #fff; font: inherit; color: var(--ink);
}
select { width: auto; display: inline-block; margin-right: .5rem; }
.tiny { font-size: .78rem; color: var(--soft); margin: .7rem 0 0; }

/* -------------------------------------------------------------- legal text */

.doc { max-width: 58ch; }
.doc h1 { font-size: 1.45rem; }
.doc h2 { font-size: 1.02rem; }
.doc dt { font-weight: 600; margin-top: 1rem; }
.doc dd { margin: .15rem 0 0; }
.doc table { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: .88rem; }
.doc th, .doc td { border: 1px solid var(--rule); padding: .4rem .55rem; text-align: left; vertical-align: top; }
.doc th { background: var(--card); }
.doc code { font-family: var(--mono); font-size: .88em; background: var(--card); padding: .1em .3em; }
.doc .callout { border-left: 4px solid var(--avoid); background: #fff3f1; padding: .8rem 1rem; }

@media (max-width: 34rem) {
  h1 { font-size: 1.4rem; }
  .head { flex-wrap: wrap; }
}

/* "When you kept it, the seller said: ..." -- only rendered when the wording
   has actually changed, so it is never noise. */
.was { margin: 0 0 .5rem; font-size: .82rem; color: var(--soft); }
.oldsays { font-family: var(--mono); }
.oldsays mark { background: #e7e7e7; border-bottom: 2px solid var(--soft); font-weight: 700; padding: 0 .15em; }