/* Quo, retrieved from DESIGN_CORE 2026-09-07 and implemented verbatim.
   https://styles.refero.design/style/792089e6-c045-498c-8ba1-48d72c206c66

   Highlighter on newsprint. The accent marks what matters and never fills a
   button. On this screen the thing worth marking is why the person is calling,
   which is the flags. Everything else is black on off white and gets out of
   the way while Ray is listening to someone. */

:root {
  --newsprint: #f7f6f5;
  --paper: #ffffff;
  --press-black: #000000;
  --graphite: #4d4d4d;
  --ash: #808080;
  --silver: #cccccc;
  --highlighter: #edfc47;

  --u: 4px;
  --radius: 10px;
  --text-small: 12px;
  --text-caption: 14px;
  --text-body: 18px;
  --text-subheading: 24px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--newsprint);
  color: var(--press-black);
  font: 400 var(--text-body)/1.5 Inter, system-ui, -apple-system, sans-serif;
  padding-bottom: env(safe-area-inset-bottom);
}

.lock {
  max-width: 22rem;
  margin: 20vh auto 0;
  padding: 0 calc(var(--u) * 6);
  text-align: center;
}
.lock h1 { font-size: var(--text-subheading); margin: 0 0 calc(var(--u) * 6); }
.msg { color: var(--graphite); font-size: var(--text-caption); min-height: 1.4em; }

input[type="search"], input[type="password"] {
  width: 100%;
  font: 500 var(--text-body)/1.4 Inter, system-ui, sans-serif;
  padding: calc(var(--u) * 3) calc(var(--u) * 4);
  border: 1px solid var(--silver);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--press-black);
  margin-bottom: calc(var(--u) * 3);
}
input:focus { outline: 2px solid var(--press-black); outline-offset: 1px; }

.btn {
  font: 600 var(--text-body)/1 Inter, system-ui, sans-serif;
  padding: calc(var(--u) * 4);
  border-radius: var(--radius);
  border: 1px solid var(--silver);
  background: var(--paper);
  color: var(--press-black);
  width: 100%;
  cursor: pointer;
}
.btn-primary {
  background: var(--press-black);
  color: var(--paper);
  border-color: var(--press-black);
}

/* Sticky so the search box is always under the thumb, never scrolled away. */
.bar {
  position: sticky; top: 0; z-index: 2;
  background: var(--newsprint);
  padding: calc(var(--u) * 3) calc(var(--u) * 4) 0;
  border-bottom: 1px solid var(--silver);
}
.bar input { margin-bottom: calc(var(--u) * 3); }

#main { padding: calc(var(--u) * 3) calc(var(--u) * 4) calc(var(--u) * 20); }

.results { list-style: none; margin: 0; padding: 0; }
.results li {
  background: var(--paper);
  border: 1px solid var(--silver);
  border-radius: var(--radius);
  padding: calc(var(--u) * 4);
  margin-bottom: calc(var(--u) * 2);
  cursor: pointer;
}
.results .addr { font-weight: 600; }
.results .who { color: var(--graphite); font-size: var(--text-caption); }

.card {
  background: var(--paper);
  border: 1px solid var(--silver);
  border-radius: var(--radius);
  padding: calc(var(--u) * 6);
}
.card h2 {
  font-size: var(--text-subheading);
  margin: 0 0 calc(var(--u) * 4);
  line-height: 1.2;
}
.card img {
  width: 100%;
  border-radius: var(--radius);
  display: block;
  margin-bottom: calc(var(--u) * 4);
}
.row { margin: 0 0 calc(var(--u) * 3); }
.label {
  font-size: var(--text-small);
  color: var(--ash);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.value { font-size: var(--text-body); }
.muted { color: var(--graphite); font-size: var(--text-caption); }

/* The number. Set large because it is the one thing on this screen Ray has to
   read out loud accurately while someone is waiting on the other end. Black on
   white, not accented: the highlighter marks why the person is calling, and
   giving it to the money as well would leave nothing marked. */
.big {
  font: 600 32px/1.1 Inter, system-ui, sans-serif;
  letter-spacing: -.02em;
  margin: calc(var(--u)) 0;
}

.comps {
  list-style: none;
  margin: calc(var(--u) * 2) 0 0;
  padding: 0;
  border-top: 1px solid var(--silver);
}
.comps li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 2) 0;
  border-bottom: 1px solid var(--silver);
  font-size: var(--text-caption);
}
.comps .num { font-weight: 600; white-space: nowrap; }

input[type="number"] {
  width: 100%;
  font: 500 var(--text-body)/1.4 Inter, system-ui, sans-serif;
  padding: calc(var(--u) * 3) calc(var(--u) * 4);
  border: 1px solid var(--silver);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--press-black);
  margin: calc(var(--u)) 0 calc(var(--u) * 2);
}

/* Four taps instead of a keypad, for a figure typed while somebody is talking. */
.chips { display: flex; gap: calc(var(--u) * 2); }
.chip {
  flex: 1;
  font: 500 var(--text-caption)/1 Inter, system-ui, sans-serif;
  padding: calc(var(--u) * 3) 0;
  border: 1px solid var(--silver);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--press-black);
  cursor: pointer;
}

/* The one place the accent appears. It marks why this person is on the list. */
.flag {
  background: var(--highlighter);
  padding: 1px calc(var(--u));
  border-radius: 2px;
  font-size: var(--text-caption);
  display: inline-block;
  margin: 0 calc(var(--u)) calc(var(--u)) 0;
}

textarea {
  width: 100%;
  min-height: 9rem;
  font: 400 var(--text-body)/1.5 Inter, system-ui, sans-serif;
  padding: calc(var(--u) * 4);
  border: 1px solid var(--silver);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--press-black);
  resize: vertical;
}

.saved { font-size: var(--text-small); color: var(--ash); min-height: 1.2em; }

/* The four exit buttons sit below the notes box, past where a thumb rests
   while scrolling, so a scroll cannot land on the permanent one. */
.exits { margin-top: calc(var(--u) * 8); display: grid; gap: calc(var(--u) * 2); }

.past { margin-top: calc(var(--u) * 6); padding: 0; }
.past li {
  list-style: none;
  border-top: 1px solid var(--silver);
  padding: calc(var(--u) * 3) 0;
}