/* products
   The product form: section nav, options, answers.

   Loaded by `stylesheet_link_tag :app`, which includes every .css under
   app/assets sorted by filename — so the NUMBER PREFIX IS THE CASCADE ORDER.
   Renaming a file moves it in the cascade. */

/* ---------------- product form: less scrolling ---------------- */
.section-nav {
  position: sticky;
  top: 58px;
  z-index: 9;
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  padding: 10px 0 12px;
  margin-bottom: 4px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.section-nav a {
  font-size: 13px;
  padding: 5px 11px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--ink-2);
}
.section-nav a:hover { background: var(--surface); color: var(--ink); }

/* Anchors clear the sticky header and nav. */
.section[id] { scroll-margin-top: 118px; }

/* Options collapse to a summary line. */
.option {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--sunken);
  margin-bottom: 10px;
}
.option[open] { background: var(--surface); }
.option-summary {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 15px;
  cursor: pointer;
  list-style: none;
  font-size: 14px;
}
.option-summary::-webkit-details-marker { display: none; }
.option-summary::before {
  content: "›";
  color: var(--ink-3);
  font-size: 16px;
  transition: transform .12s ease;
  display: inline-block;
}
.option[open] > .option-summary::before { transform: rotate(90deg); }
.option-summary:hover { background: var(--paper); border-radius: var(--r); }
.option-name { font-weight: 500; }
.option-count { margin-left: auto; color: var(--ink-3); font-size: 12.5px; }
.option-body { padding: 4px 15px 16px; border-top: 1px solid var(--line); }

/* Answers: compact, with the less-used fields tucked away. */
.answer {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  padding: 12px;
  margin-bottom: 9px;
}
.answer-more { margin-top: 4px; }
.answer-more > summary {
  cursor: pointer;
  font-size: 12.5px;
  color: var(--ink-3);
  padding: 4px 0;
  list-style: none;
}
.answer-more > summary::-webkit-details-marker { display: none; }
.answer-more > summary::before { content: "+ "; }
.answer-more[open] > summary::before { content: "− "; }
.answer-more > summary:hover { color: var(--ink); }

/* Wiring a fabric line onto an option. One row under the answers table: a
   line to offer and the button that offers it. Its own form on purpose — the
   option editor is a nested form, and a form inside a form has its inputs
   hoisted into the outer one. */
.offer-line {
  display: flex; align-items: end; gap: 10px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line);
}
/* The select is width:100% everywhere else in the app, so it has to be given
   a basis here or it takes the row on its own and the button drops beneath
   it — measured at 120px tall for one line and a button. */
.offer-line .field { flex: 0 1 260px; margin: 0; }
.offer-line label { margin: 0 0 5px; }

/* ---------------- what an answer costs ---------------- */
/* A charge is a row now, and an answer has a small table of them. Closed by
   default with one line per charge: the product form is already very long, and
   a table per answer opened by default is four screens of grid on a product
   that asks forty questions. */
.charges { margin-top: 6px; }
.charges-summary {
  display: flex;
  align-items: baseline;
  gap: 9px;
  cursor: pointer;
  list-style: none;
  padding: 3px 0;
  font-size: 12.5px;
}
.charges-summary::-webkit-details-marker { display: none; }
.charges-summary::before { content: "+ "; color: var(--ink-3); }
.charges[open] > .charges-summary::before { content: "− "; }
.charges-label {
  font: 500 11px var(--ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  flex-shrink: 0;
}
.charges-none { color: var(--ink-3); }
.charges-lines { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.charge-line { color: var(--ink-2); }
.charge-line.is-off { color: var(--ink-3); text-decoration: line-through; }

.charges-body {
  margin-top: 9px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.rows-head.charge {
  display: grid;
  gap: 8px;
  align-items: center;
  grid-template-columns: 1.1fr 2fr 56px 1.2fr 42px 32px;
}
.charge-row {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--sunken);
  padding: 9px 10px;
  margin-bottom: 8px;
}
.charge-main {
  display: grid;
  gap: 8px;
  align-items: center;
  grid-template-columns: 1.1fr 2fr 56px 1.2fr 42px 32px;
}
/* The fields a basis does not use are hidden with the `hidden` attribute, and
   a `display:` rule beats it — which this codebase has been caught by three
   times. Said explicitly here because everything in these rows is grid or
   flex, including .checkbox-inline and .combo. */
.charge-row [hidden], .condition-row [hidden] { display: none !important; }
.charge-money { display: flex; gap: 8px; align-items: center; min-width: 0; }
.charge-money > span { flex: 1; min-width: 0; }
.charge-money .combo { min-width: 0; }
.charge-main select, .charge-main input[type=text], .charge-main input[type=number] {
  padding: 6px 8px;
  font-size: 13px;
}
.charge-main .checkbox-inline { justify-content: center; font-size: 11.5px; color: var(--ink-3); }
.charge-main .checkbox-inline span { display: none; }

.charge-error { margin: 7px 0 0; font-size: 12.5px; color: var(--danger); }
.charge-provenance { margin: 6px 0 0; font-size: 11.5px; color: var(--ink-3); cursor: help; }

/* "only when…" — a charge's conditions, all of which must hold. */
.charge-conditions { margin-top: 8px; }
.charge-conditions .button-ghost { padding: 5px; font-size: 12px; }
.condition-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  padding: 8px;
  margin-bottom: 7px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r);
  background: var(--surface);
}
.condition-only { font-size: 12px; color: var(--ink-3); }
.condition-row select, .condition-row input[type=text], .condition-row input[type=number] {
  width: auto;
  min-width: 130px;
  padding: 5px 8px;
  font-size: 13px;
}
.condition-row .combo { min-width: 190px; }
.condition-answers { flex-basis: 100%; }
.condition-answers-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 14px;
  max-height: 190px;
  overflow-y: auto;
  padding: 6px 2px;
}
.condition-answers-list .checkbox-inline { font-size: 12.5px; }
.condition-answers .hint { margin: 0; font-size: 12px; }
.condition-warning { flex-basis: 100%; margin: 0; font-size: 12.5px; color: var(--danger); }

/* --- a pricing change waiting on somebody ---------------------------------

   One card, drawn on four screens: the product's own page, the product
   editor, the list of everything waiting, and the assistant's panel. It is
   marked the way every other AI draft here is marked — .badge-proposed, the
   signal colour — because the whole point of the mark is that a person
   recognises it wherever they meet it.

   Buttons inside it are .button-small and .link-button, which already undo
   the global `button` rule; nothing here re-styles a bare `button`, so
   `button:hover`'s black fill has nothing to land on. */
.charge-proposals { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.charge-proposals-inline { margin-top: 8px; }

.charge-proposal {
  border: 1px solid var(--signal-line);
  border-left: 3px solid var(--signal);
  border-radius: var(--r);
  background: var(--signal-bg);
  padding: 11px 13px;
}
/* Decided, and still shown: what became of what was asked for is worth more
   than the row quietly disappearing. Muted, because it is no longer a job. */
.charge-proposal.is-decided {
  background: none;
  border-color: var(--line);
  border-left-color: var(--line);
}
.charge-proposal-head {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}
.charge-proposal-kind {
  font: 600 11px var(--ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.charge-proposal-about { margin: 7px 0 0; font-size: 12.5px; color: var(--ink-2); }
.charge-proposal-says { margin: 3px 0 0; font-weight: 500; }
.charge-proposal-from { margin: 6px 0 0; font-size: 12px; color: var(--ink-3); }
.charge-proposal-from q { font-style: italic; }
.charge-proposal-worked { margin: 7px 0 0; font-size: 12.5px; color: var(--ink-2); }
.charge-proposal-refuses { color: var(--danger); }
.charge-proposal-note { margin: 9px 0 0; font-size: 12.5px; color: var(--ink-3); }
.charge-proposal-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
/* button_to renders a form of its own, so the buttons need it not to break
   the row they sit in. */
.charge-proposal-actions form { display: inline; margin: 0; }

/* On the answer's own row in the table: it says so, and the card below is
   where it is read and decided. */
.charge-waiting-mark { margin-top: 4px; font-size: 12px; color: var(--signal); }