/*
 * Prices — page layout only (Bullet 3p-g, s157; was 3p-d, s139).
 *
 * s157 turned the results from a list of cards into a TABLE of the whole book,
 * because a person comparing 198 prices is comparing columns, and cards put
 * every number at a different x. The four-case colour vocabulary below did not
 * change — it moved from a card's left border to a row's.
 *
 * theme.css owns the tokens and board.css owns the chrome (topbar, wrap, lede,
 * card, spinner, banner); both are READ-ONLY to a page (ui-contract file map).
 * Everything here is scoped under #s-prices so this screen folds into the
 * quotebench shell as an `s-` section later without a restyle.
 *
 * The state colours are the theme's own status vocabulary, used for the meaning
 * they already carry on the board: --ready = priced and clean, --look = someone
 * has to look at this, --gap-ink = this will block a quote. That is what makes
 * the four cases readable at a glance rather than four grey boxes with
 * different words in them.
 */

#s-prices {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  min-height: 100vh;
}

/* ── the ask ───────────────────────────────────────────────────────── */

#s-prices .ask {
  margin: 0 0 var(--gap);
  max-width: 560px;
}

#s-prices .search {
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  display: flex;
  gap: 10px;
  padding: 0 12px;
}

#s-prices .search svg {
  color: var(--ink-3);
  flex: none;
}

#s-prices .search input {
  background: none;
  border: 0;
  color: var(--ink);
  flex: 1;
  font-family: var(--body);
  font-size: 17px;
  /* 44px of target, from padding rather than a height, so the box grows with
   * the font on a phone instead of clipping it. */
  padding: 13px 0;
}

#s-prices .search input::placeholder {
  color: var(--ink-3);
}

#s-prices .search input:focus {
  outline: none;
}

#s-prices .search:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

#s-prices .search-note {
  color: var(--ink-3);
  font-size: 12px;
  margin: 8px 2px 0;
}

#s-prices kbd {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 11px;
  padding: 1px 5px;
}

/* ── the results header ────────────────────────────────────────────── */

#s-prices .col-hd {
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 8px;
}

#s-prices .col-hd h2 {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 650;
  margin: 0;
}

#s-prices .col-hd .n {
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 12px;
}

#s-prices .col-hd .hint {
  color: var(--ink-3);
  font-size: 12px;
  margin-left: auto;
}

/* ── the book, as a table ──────────────────────────────────────────── */

#s-prices .book {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  border-spacing: 0;
  box-shadow: var(--shadow);
  overflow: hidden;
  width: 100%;
}

#s-prices .book th {
  border-bottom: 1px solid var(--line);
  color: var(--ink-3);
  font-family: var(--body);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.04em;
  padding: 9px 14px;
  text-align: left;
  text-transform: uppercase;
}

#s-prices .book td {
  border-bottom: 1px solid var(--line);
  padding: 9px 14px;
  vertical-align: baseline;
}

#s-prices .book tr:last-child td {
  border-bottom: 0;
}

/* Money columns. Tabular figures and a right edge so two rows of dollars line
 * up on the decimal — this is a number a person compares against another
 * number, which is the whole reason the cards became a table. */
#s-prices .c-cost,
#s-prices .c-sell {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
  width: 8.5em;
}

#s-prices .c-state {
  white-space: nowrap;
  width: 1%;
}

/* The actions live in a DIV inside the cell, never on the cell itself. A <td>
 * with `display: flex` stops being a table cell — it drops out of the column
 * flow and lands on top of the column before it, which on this screen meant the
 * buttons sat over the sell price. Every assertion still passed, because the
 * text was in the DOM; only the screenshot showed it. */
#s-prices .actions {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

#s-prices .pr {
  border-left: 3px solid transparent;
}

#s-prices .pr[data-state="pending"] .c-cost,
#s-prices .pr[data-state="pending"] .c-sell {
  color: var(--ink-3);
}

/* A contested row shows no number at all, so the cell that spans the money
 * columns must not read as a price. Italic, ink-2, and left-aligned: it is a
 * sentence sitting where a number would be, and it should look like one. */
#s-prices .contested {
  color: var(--ink-2);
  font-family: var(--body);
  font-style: italic;
  text-align: left;
  white-space: normal;
}

#s-prices .code {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 650;
}

#s-prices .badge {
  border-radius: 999px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.02em;
  padding: 2px 9px;
  text-transform: lowercase;
  white-space: nowrap;
}

#s-prices .pr-d {
  color: var(--ink-2);
  display: block;
  font-size: 12px;
  margin-top: 2px;
}

/* ── buttons in a row ──────────────────────────────────────────────── */

#s-prices .rowbtn {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink-2);
  cursor: pointer;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  /* 30px of target from padding, so it grows with the font rather than clipping. */
  padding: 7px 11px;
}

#s-prices .rowbtn:hover {
  border-color: var(--brand);
  color: var(--ink);
}

#s-prices .rowbtn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

#s-prices .rowbtn.primary {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--panel);
}

#s-prices .rowbtn[disabled] {
  cursor: default;
  opacity: 0.55;
}

/* ── the choice, opened up ─────────────────────────────────────────── */

#s-prices .optrow > td,
#s-prices .editrow > td {
  background: var(--paper-2);
}

#s-prices .opts-lede,
#s-prices .editor-lede {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.5;
  margin: 0 0 8px;
  max-width: 68ch;
}

#s-prices .opts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

#s-prices .opt {
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  display: flex;
  gap: 12px;
  padding: 7px 11px;
}

#s-prices .opt .who {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
}

#s-prices .opt .amt {
  font-family: var(--mono);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* ── the editor ────────────────────────────────────────────────────── */

#s-prices .editor {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#s-prices .field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

#s-prices .field span {
  color: var(--ink-3);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#s-prices .money {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  padding: 7px 9px;
  text-align: right;
  width: 8em;
}

#s-prices .money:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
  outline: none;
}

/* ── adding an item that is not in the book ────────────────────────── */

#s-prices #add-item {
  margin: 0 0 12px;
}

/* The same panel as a row's editor, standing on its own above the table. */
#s-prices .additem {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px 14px;
}

#s-prices .textin {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  padding: 7px 9px;
  width: 16em;
}

#s-prices .textin.wide {
  width: 22em;
}

#s-prices .textin:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
  outline: none;
}

#s-prices .add-done {
  color: var(--ready);
  font-size: 13px;
  margin: 0;
}

#s-prices .editor-err {
  color: var(--gap-ink);
  font-size: 12px;
  line-height: 1.5;
  margin: 8px 0 0;
  max-width: 68ch;
}

/* ── the four cases, told apart by colour as well as by words ──────── */

#s-prices .pr[data-status="priced"] {
  border-left-color: var(--ready);
}
#s-prices .pr[data-status="priced"] .badge {
  background: var(--ready-bg);
  color: var(--ready);
}

#s-prices .pr[data-status="choice_required"] {
  border-left-color: var(--look);
}
#s-prices .pr[data-status="choice_required"] .badge {
  background: var(--look-bg);
  color: var(--look);
}
#s-prices .optrow[data-status="choice_required"] > td {
  border-left: 3px solid var(--look);
}

#s-prices .pr[data-status="no_live_price"] {
  border-left-color: var(--gap-ink);
}
#s-prices .pr[data-status="no_live_price"] .badge {
  background: var(--gap-bg);
  color: var(--gap-ink);
}

#s-prices .pr[data-status="unknown_item"] .badge {
  background: var(--paper-2);
  color: var(--neutral);
}

/* ── the three things that are not a price ─────────────────────────── */

#s-prices .notice {
  color: var(--ink-2);
}

#s-prices .notice h3 {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 650;
  margin: 0 0 6px;
  color: var(--ink);
}

#s-prices .notice p {
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
  max-width: 62ch;
}

/* Same shape as #s-work-items .sr-only (work-items.css:499). Duplicated rather
 * than lifted into board.css, which is read-only to a page. */
#s-prices .sr-only {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* Narrow screens: the sell column is the first thing worth losing — a phone is
 * where someone checks a cost, and the two money columns side by side push the
 * item code down to two lines. */
@media (max-width: 560px) {
  #s-prices .c-sell {
    display: none;
  }
  /* The add form keeps every field on a phone — there is no row to fall back on —
   * so the text boxes take the width instead of a fixed measure. */
  #s-prices .textin,
  #s-prices .textin.wide {
    width: 100%;
  }
  #s-prices .additem .field {
    flex: 1 1 100%;
  }
  #s-prices .book th,
  #s-prices .book td {
    padding: 8px 10px;
  }
}