/* ==================================================================
   analysis -- area stylesheet, loaded after static/style.css.

   style.css remains the authoritative design system: its tokens, type
   ramp, radii and colour rules govern. Nothing here introduces a new
   colour; confidence is ink weight and border style, never hue, and the
   only two tints are caution-fill #F6F2E9 and calm-fill #EFF1EE.
   Money, grams and durations are Newsreader with tabular-nums, never
   DM Sans. See design/README.md and makecost_restyle_v2/README.md.

   Scope: the report page (/report/{id}) and its comps section. The
   ledger half is already styled in style.css under "Report -- 2A
   Ledger"; what follows is the comps half, which had no design system
   applied to it at all, plus the page furniture that makes the two
   halves read as one document.
   ================================================================== */

/* ------------------------------------------------------------------ */
/* Page furniture                                                      */
/* ------------------------------------------------------------------ */

/* The listing header's meta line. Was a raw "mode: 3mf" field dump; it
   is now the same mono meta vocabulary the Home recent table uses, with
   middots between facts rather than a label-colon-value pair. */
.listing-meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px;
  margin: 2px 0 0;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--muted-3);
}
.listing-meta > span + span::before { content: "·"; margin-right: 8px; }

.notice-list { margin: 4px 0 0; padding-left: 18px; }
.notice-list li { margin-bottom: 3px; }
.notice-list li:last-child { margin-bottom: 0; }

/* The comps half is a section of the report, not an appendix: same
   .page-section rhythm as every other page in the app. */
.report-shell .page-section { margin-top: 26px; }

/* ------------------------------------------------------------------ */
/* The finder -- how comps actually get here                           */
/* ------------------------------------------------------------------ */

/* One card, because it is one job. The head carries the single action
   that matters; everything below it is disclosure the reader opens once
   and then never needs again. */
.finder {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; overflow: hidden;
}
.finder__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 22px; flex-wrap: wrap;
  padding: 20px 24px;
}
.finder__intro .title {
  display: block;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2);
}
.finder__intro p {
  margin: 8px 0 0; max-width: 46ch;
  font-size: 13.5px; line-height: 1.55; color: var(--muted);
}

/* The one-click search. Filled dark, because on a report with no comps
   this is the only thing on the page worth doing next -- and it is a
   link, deliberately: it opens Etsy in the user's own browser. Nothing
   in this app ever fetches that page itself. */
.finder__search {
  flex: none; display: inline-flex; align-items: baseline; gap: 9px;
  max-width: 100%;
  padding: 13px 20px; border-radius: 999px;
  background: var(--ink-strong); color: var(--ink-on-dark);
  text-decoration: none;
}
.finder__search:hover { background: #0F0E0C; color: var(--ink-on-dark); }
.finder__search .verb {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(243, 241, 236, 0.66);
}
.finder__search .query { font-size: 14px; font-weight: 500; }
.finder__search .arrow { font-size: 13px; }

/* No query to build. Stated in ink on paper, at body weight -- not as a
   disabled button, which would read as something being broken. */
.finder__no-query {
  flex: 1 1 280px; max-width: 46ch; margin: 0;
  padding: 12px 16px; border-radius: 14px;
  background: var(--surface-alt); border: 1px solid var(--line-3);
  font-size: 13px; line-height: 1.55; color: var(--muted);
}

/* The widening ladder. Each chip drops a word, so left-to-right is
   narrow-to-broad -- "no results? take the next one" is a rule anyone
   can follow. */
.finder__alts {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 0 24px 20px;
}
.finder__alts .micro-label { margin-right: 4px; }
.query-chip {
  padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-alt);
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-2);
  text-decoration: none;
}
.query-chip:hover { border-color: var(--chip-border); background: var(--selected-fill); color: var(--ink); }

/* Disclosure. No JS -- <details> is the codebase's kind of solution.
   Open by default only on a report with no comps yet, which is the one
   time the round trip needs explaining at all. */
.finder__steps, .finder__more { border-top: 1px solid var(--line-3); }
.finder__steps > summary, .finder__more > summary {
  padding: 14px 24px; cursor: pointer;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2);
  list-style: none;
}
.finder__steps > summary::-webkit-details-marker,
.finder__more > summary::-webkit-details-marker { display: none; }
.finder__steps > summary::before, .finder__more > summary::before {
  content: "+"; display: inline-block; width: 14px; color: var(--muted-3);
}
.finder__steps[open] > summary::before, .finder__more[open] > summary::before { content: "–"; }
.finder__steps > summary:hover, .finder__more > summary:hover { color: var(--ink); }

.finder__steps > .steps { padding: 0 24px 6px; }
.finder__steps .step-title { font-size: 14px; font-weight: 500; color: var(--ink); }
.finder__steps .step-note {
  margin: 4px 0 0; max-width: 62ch;
  font-size: 13px; line-height: 1.55; color: var(--muted);
}
.finder__steps .step-note strong { font-weight: 700; color: var(--ink-2); }
.finder__steps .install-row { margin-top: 12px; }

/* Where the shared bookmarklet is currently pointed. A state, so it is
   stated -- never a colour: "aimed here" is heavier ink on the calm
   fill, "aimed elsewhere" is the same shape in muted ink. */
.armed-line {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-top: 12px; padding: 10px 14px; border-radius: 14px;
  background: var(--surface-alt); border: 1px solid var(--line-3);
  font-size: 13px; color: var(--muted);
}
.armed-line.is-armed {
  background: var(--calm-fill); border-color: var(--calm-line); color: var(--calm-ink);
}
.armed-line.is-armed .micro-label { color: var(--calm-ink-2); }
.armed-line .inline-form { margin: 0; }
.armed-line .btn.small { margin: 0; padding: 5px 12px; font-size: 12px; }

.finder__more-body { padding: 0 24px 20px; }
.finder__more-body p { font-size: 13px; line-height: 1.55; color: var(--muted); margin: 0 0 12px; }
.finder__more-body label { display: block; }
.finder__more-body textarea { width: 100%; }

/* ------------------------------------------------------------------ */
/* The band -- the comps section's answer                              */
/* ------------------------------------------------------------------ */

.band-card .band-figures,
.band-card .low-confidence-banner,
.band-card > .hint { padding: 18px 24px; margin: 0; }
.band-card .low-confidence-banner + .band-figures { padding-top: 0; }
.band-card .band-figures { align-items: flex-end; }
.band-card--thin { border-color: var(--caution-line); }
.band-card--thin .data-card__head { background: var(--caution-fill); border-bottom-color: var(--caution-line); }

/* The sentence under the three figures. The percentiles are the data;
   this is the reading of them, and it says in words that the spread is
   the answer -- never the midpoint. */
.band-read {
  flex-basis: 100%; margin: 6px 0 0; max-width: 56ch;
  font-size: 13px; line-height: 1.55; color: var(--muted);
}
.band-read strong {
  font-family: var(--font-serif); font-size: 15px; font-weight: 400;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.band-figures.muted .band-read { font-style: normal; }

/* Filament cost + break-even, as the band card's own footer: they are
   read against the band, so they belong to it. Etsy's fees appear here
   and nowhere else in the app (HANDOFF.md decision 5). */
.data-card__foot.cost-lines {
  display: flex; flex-direction: column; gap: 7px; margin: 0;
}
.data-card__foot .cost-line { padding: 0; font-size: 13px; color: var(--calm-ink); }
.data-card__foot .cost-line .hint { color: var(--calm-ink-2); }
.data-card__foot .cost-line strong { color: var(--ink); }

.breakeven-alarm { margin: 14px 0; }

/* ------------------------------------------------------------------ */
/* Controls -- stated in words, not as a row of bare counts            */
/* ------------------------------------------------------------------ */

/* Overrides style.css's original flat grey strip: the controls are a
   data card now, so the page has one card vocabulary rather than two. */
.comps-controls {
  display: block; flex-wrap: initial; gap: 0;
  margin: 14px 0; padding: 0;
  background: var(--surface); border: 1px solid var(--line);
}
/* display:block is load-bearing, not incidental: style.css's original
   .size-filter and .cost-controls were flex rows of bare chips, and this
   block is a paragraph of explanation followed by the control. */
.control-block { display: block; padding: 18px 24px; }
.control-block + .control-block { border-top: 1px solid var(--line-4); }
.control-lead {
  margin: 0 0 12px; max-width: 68ch;
  font-size: 13.5px; line-height: 1.55; color: var(--ink-2);
}
.control-lead strong { font-weight: 700; }
.bucket-counts { display: flex; flex-wrap: wrap; gap: 8px; }
.include-unknown { margin: 14px 0 0; font-size: 13.5px; color: var(--ink-2); }
.control-why {
  margin: 10px 0 0; max-width: 68ch;
  font-size: 13px; line-height: 1.6; color: var(--muted);
}
.control-why strong { font-weight: 700; color: var(--ink-2); }
.control-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 26px; }
.control-fields label { display: block; margin: 0; }
.control-fields input[type="number"] { display: block; width: 8rem; margin-top: 5px; }
.control-fields label.checkbox-inline {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 400; color: var(--ink-2);
}
.control-fields label.checkbox-inline input { width: auto; margin: 0; }
.control-fields label.checkbox-inline .hint { font-size: 12px; font-weight: 400; }

/* ------------------------------------------------------------------ */
/* The evidence grid                                                   */
/* ------------------------------------------------------------------ */

.comps-evidence .comp-cards { padding: 18px 24px; margin: 0; }
.comps-evidence .comp-card { border-radius: 16px; }
.comps-evidence .comp-card:hover { border-color: var(--chip-border); }

/* ------------------------------------------------------------------ */
/* Narrow viewports                                                    */
/* ------------------------------------------------------------------ */

@media (max-width: 760px) {
  .finder__head { flex-direction: column; align-items: stretch; }
  .finder__search { justify-content: center; }
}

/* --- the comps search: an editable query, not a fixed link ------------
   The query is generated from the model's own name, which is right most
   of the time and wrong often enough that it has to be editable. Field
   and button read as one control. --- */
.finder__form { display: block; }
.finder__form .micro-label { display: block; margin-bottom: 7px; }
.finder__row { display: flex; align-items: stretch; gap: 8px; }
.finder__row input {
  flex: 1 1 auto; min-width: 0; margin: 0;
  border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; background: var(--surface);
  font-family: var(--font-sans); font-size: 15px; color: var(--ink);
}
.finder__row input:focus { outline: 2px solid var(--ink); outline-offset: 2px; border-color: var(--ink); }
.finder__go {
  flex: none; border: none; border-radius: 12px; cursor: pointer;
  padding: 12px 20px; background: var(--ink-strong, #17161A); color: var(--ink-on-dark, #F3F1EC);
  font-family: var(--font-sans); font-size: 14px; font-weight: 600;
}
.finder__go:hover { background: #000; }
.finder__go:disabled { opacity: .55; cursor: default; }
.finder__go .arrow { margin-left: 4px; }
.finder__hint { margin: 9px 0 0; font-size: 12.5px; color: var(--muted-2); }

/* "Start over" -- without it the first run's comps stay on file for ever
   and every later search only adds to the pile. */
.finder__startover {
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  margin-bottom: 14px;
}
.finder__startover .aux {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted-3);
}