/* The assistant. The site's palette and its contrast rules, carried over:
   charcoal for text, a darkened olive for anything small, olive behind white
   only on buttons (4.61). See site/style.css for the measurements. */
:root {
  --olive: #6B7A59; --sand: #E6D6B8; --clay: #C97A62;
  --charcoal: #2F322E; --offwhite: #FAF7F2;
  --muted: #5F6C50; --warn: #7A4A2E; --warn-bg: #F6EADF;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; padding: 0 16px 64px; background: var(--offwhite); color: var(--charcoal);
  font: 17px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.wrap { max-width: 36rem; margin: 0 auto; }
header.top { display: flex; align-items: center; gap: 10px; padding: 14px 0;
  border-bottom: 2px solid var(--sand); margin-bottom: 20px; }
header.top img { width: 32px; height: 32px; }
header.top .name { font-weight: 800; flex: 1; }
header.top form { margin: 0; }
h1 { font-size: 1.6rem; line-height: 1.2; margin: .4em 0 .5em; }
h2 { font-size: 1.15rem; margin: 1.6em 0 .4em; }
a { color: var(--muted); font-weight: 700; }
.muted { color: var(--muted); }
button, .btn {
  display: inline-block; background: var(--olive); color: #fff; border: 0; border-radius: 10px;
  padding: 12px 20px; font: inherit; font-weight: 800; min-height: 48px; cursor: pointer;
  text-decoration: none;
}
button.quiet { background: none; color: var(--muted); border: 2px solid var(--sand);
  padding: 6px 12px; min-height: 40px; font-size: .9rem; }
label { font-weight: 700; display: block; margin: 12px 0 4px; }
input[type=text], input[type=password], textarea {
  width: 100%; font: inherit; padding: 10px; border: 2px solid var(--sand); border-radius: 8px;
  background: #fff;
}
.errors, .errorlist { background: var(--warn-bg); color: var(--warn); border-radius: 8px;
  padding: 10px 14px; list-style: none; margin: 8px 0; font-weight: 700; }
ol.scale { padding-left: 1.4em; }
ol.scale li { margin: 0 0 18px; }
ol.scale .q { margin: 0 0 6px; font-weight: 700; }
/* The scale's two ends sit under the 1 and the 5, the same width as the
   buttons, so "agree" never wraps onto a line of its own on a phone. */
ol.scale .row { max-width: 20rem; }
ol.scale .btns { display: flex; gap: 6px; }
ol.scale .btns label { flex: 1; }
ol.scale .ends { display: flex; justify-content: space-between; padding: 2px 2px 0; }
ol.scale .row label { margin: 0; font-weight: 700; display: flex; align-items: center;
  justify-content: center; min-width: 44px; min-height: 44px; border: 2px solid var(--sand);
  border-radius: 8px; background: #fff; }
ol.scale .row input { position: absolute; opacity: 0; }
ol.scale .row label:has(input:checked) { background: var(--olive); color: #fff;
  border-color: var(--olive); }
ol.scale .row label:has(input:focus-visible) { outline: 3px solid var(--clay); }
ol.scale .hint { font-size: .8rem; color: var(--muted); }
.tools { list-style: none; padding: 0; }
.tools li { border: 2px solid var(--sand); border-radius: 10px; padding: 12px 14px; background: #fff; }