/* ============================================================================
   GRAPEVINE: the honesty line, the queue, and one site's line.

   Its own sheet because the screen has one shape nothing else in this console
   has: a TRACK of readings, one dot per period, four tracks per question. A
   table would be the obvious drawing and it is the wrong one, because what
   somebody reads here is a SHAPE over time rather than a set of values, and a
   table makes the newest column look like every other column.

   THREE STATES PER DOT AND NEVER TWO. `named`, `not named`, and `not asked`,
   and the third is drawn as its own thing rather than as an absence. A chart
   that drew a failed provider the same as an assistant declining to name
   somebody would be the one place rule 4 broke where nobody would look for it,
   and it would sit there for years looking exactly like a real reading.

   THE COLOURS ARE TEXT COLOURS WHERE THEY CARRY WORDS AND MARK COLOURS WHERE
   THEY CARRY DOTS. Rule 19: as a dot a tone is a graphical object and WCAG asks
   3:1; as a sentence it is text and the bar is 4.5:1. The kind chip and the
   honesty line are sentences, so they take the `-text` siblings on every ground,
   print included. The dots are marks and take the plain tokens.
   ========================================================================= */

/* ---- The line at the top ----
   Not a card, for console-sitesaver.css's reason exactly: it QUALIFIES the page
   rather than sitting beside it, and a card would put it in a row with the
   counts, which is the one reading it must not have.

   The mark aligns to the first line rather than centring on the block, because
   the sentence wraps and a centred glyph beside a two-line paragraph drifts
   into the gap between them. */
.cb-vine-line {
  display: flex;
  align-items: flex-start;
  gap: var(--cb-space-lg);
  margin: 0;
  padding: var(--cb-space-xl) var(--cb-space-2xl);
  border: 1px solid var(--cbc-line);
  border-radius: var(--cb-radius-lg);
  background: var(--cbc-sunken);
  color: var(--cbc-ink-muted);
}
.cb-vine-line .cb-icon {
  flex: none;
  inline-size: var(--cb-space-2xl);
  block-size: var(--cb-space-2xl);
  color: var(--cbc-ink-faint);
}
.cb-vine-said {
  display: grid;
  gap: var(--cb-space-xxs);
  min-inline-size: 0;
}
.cb-vine-said strong {
  color: var(--cbc-ink);
  font-weight: var(--cb-font-weight-semibold);
}
.cb-vine-said span {
  font-size: var(--cb-type-sm-size);
}
/* A round that ran and covered the estate is quiet: the default above and
   nothing else. A permanent green panel is furniture, and furniture is what
   people stop seeing. */
.cb-vine-line[data-tone="warn"] {
  border-color: var(--cbc-warn);
  background: var(--cbc-surface);
}
.cb-vine-line[data-tone="warn"] .cb-icon,
.cb-vine-line[data-tone="warn"] strong {
  color: var(--cbc-warn-text);
}

/* The qualifications. A list for the semantics and no marker for the look: one
   note with a disc beside it reads as a stray dot, and NOT a rule down the left
   edge, which docs/10 rules out. */
.cb-vine-notes {
  margin: 0;
  padding-inline: var(--cb-space-2xl);
  padding-inline-start: var(--cb-space-2xl);
  list-style: none;
  display: grid;
  gap: var(--cb-space-xs);
  font-size: var(--cb-type-sm-size);
  color: var(--cbc-ink-muted);
}

/* ---- The queue ----
   A LIST, NOT A GRID. These are ordered by how much they matter, and equal
   cards rank nothing. */
.cb-vine-queue {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--cb-space-xs);
}
.cb-vine-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: start;
  gap: var(--cb-space-lg);
  padding: var(--cb-space-lg) var(--cb-space-md);
  border-radius: var(--cb-radius-md);
}
.cb-vine-row + .cb-vine-row {
  border-block-start: 1px solid var(--cbc-line);
}
/* Hover answers immediately and moves no layout (rule 14). */
.cb-vine-row:hover {
  background: var(--cbc-sunken);
}

/* The verdict, as a word rather than a colour alone: a colour is not a label,
   and somebody printing this page has one ink. */
.cb-vine-kind {
  font-size: var(--cb-type-xs-size);
  font-weight: var(--cb-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--cb-tracking-xxs);
  white-space: nowrap;
  align-self: center;
}
.cb-vine-row[data-kind="lost"] .cb-vine-kind,
.cb-vine-row[data-kind="displaced"] .cb-vine-kind {
  color: var(--cbc-poor-text);
}
.cb-vine-row[data-kind="drifted"] .cb-vine-kind {
  color: var(--cbc-warn-text);
}
.cb-vine-row[data-kind="gained"] .cb-vine-kind {
  color: var(--cbc-good-text);
}

.cb-vine-what {
  display: grid;
  gap: var(--cb-space-xxs);
  min-inline-size: 0;
}
.cb-vine-who {
  color: var(--cbc-ink);
  font-weight: var(--cb-font-weight-medium);
  text-decoration: none;
}
.cb-vine-who:hover {
  text-decoration: underline;
}
.cb-vine-q {
  font-size: var(--cb-type-sm-size);
  color: var(--cbc-ink-muted);
}
.cb-vine-because {
  font-size: var(--cb-type-sm-size);
  color: var(--cbc-ink-faint);
}
.cb-vine-engine,
.cb-vine-when {
  font-size: var(--cb-type-sm-size);
  color: var(--cbc-ink-muted);
  white-space: nowrap;
  align-self: center;
}

/* ---- The blocked list ---- */
.cb-vine-blocked {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--cb-space-sm);
}
.cb-vine-blocked li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cb-space-lg);
}

/* ---- One site's line ---- */
.cb-vine-head {
  display: grid;
  gap: var(--cb-space-lg);
}
.cb-vine-acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cb-space-sm);
}

.cb-vine-series {
  display: grid;
  gap: var(--cb-space-2xl);
}
.cb-vine-question h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--cb-space-sm);
  margin: 0 0 var(--cb-space-lg);
  font-size: var(--cb-type-md-size);
}
.cb-vine-place,
.cb-vine-lang,
.cb-vine-derived {
  font-size: var(--cb-type-xs-size);
  font-weight: var(--cb-font-weight-regular);
  color: var(--cbc-ink-muted);
  padding: var(--cb-space-xxs) var(--cb-space-sm);
  border: 1px solid var(--cbc-line);
  border-radius: var(--cb-radius-full);
}
/* "derived" says nobody chose these words, which is a thing to defend on a
   call. It reads quieter than the town, not louder: it is a caveat rather than
   a warning, and a warning tone here would make every untouched site look
   broken. */
.cb-vine-derived {
  color: var(--cbc-ink-faint);
  border-style: dashed;
}

/* ONE GRID FOR EVERY TRACK, not a grid per row, and the difference is whether
   the dots line up. A row that is its own grid sizes its own name column, so
   "Gemini" and "Perplexity" push their dots to different places and four
   parallel series stop being comparable, which is the whole of what this
   drawing is for. `display: contents` puts every name and every strip of dots
   into ONE grid, so `max-content` is measured across all of them at once. The
   rows are plain divs rather than list items precisely so this is safe.

   IT WAS A 384px COLUMN BEFORE, which is `--cb-width-xs`: a content-width token
   holding a label. It IS a token, so no guard could see it, and it left the
   word "Gemini" a third of a card away from its own readings. */
.cb-vine-tracks {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: center;
  gap: var(--cb-space-sm) var(--cb-space-lg);
}
.cb-vine-track {
  display: contents;
}
.cb-vine-track-name {
  font-size: var(--cb-type-sm-size);
  color: var(--cbc-ink-muted);
  white-space: nowrap;
}
.cb-vine-dots {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cb-space-xs);
}

/* THE DOT. Three states, three drawings, and the third is not an absence.
   `unasked` is an OUTLINE with nothing in it, which reads as a gap in the
   record rather than as a bad reading, and it is the one that must never be
   confused with `no`. */
.cb-vine-dot {
  inline-size: var(--cb-space-lg);
  block-size: var(--cb-space-lg);
  border-radius: var(--cb-radius-full);
  border: 1px solid var(--cbc-line-strong);
  background: var(--cbc-line);
}
.cb-vine-dot[data-named="yes"] {
  background: var(--cbc-good);
  border-color: var(--cbc-good);
}
.cb-vine-dot[data-named="no"] {
  background: var(--cbc-poor);
  border-color: var(--cbc-poor);
}
/* MEASURED, NOT CHOSEN. This ring is a graphical object carrying meaning, so
   WCAG 1.4.11 asks 3:1 against the ground it is drawn on, and `--cbc-line-strong`
   gave 2.35:1 on the dark card and 1.66:1 on the light one. It IS a token, and a
   perfectly good one for a table rule, which is the whole of rule 13's warning:
   a hairline colour holding a mark passes every guard the product has. The two
   filled states were already fine (3.60 and 3.65 dark, 3.41 and 4.79 light);
   the one that failed is the one this feature exists to keep separate from the
   other two. `--cbc-ink-faint` is 5.01:1 dark and 5.92:1 light, so it clears the
   bar with margin on both, and it is still the quietest step on the ladder, so
   an empty ring goes on reading as an absence rather than as a reading. */
.cb-vine-dot[data-named="unasked"] {
  background: var(--cbc-surface);
  border-color: var(--cbc-ink-faint);
  border-style: dashed;
}
/* A round somebody asked for, and the seeded one from the original audit. Both
   are drawn DIFFERENTLY rather than hidden, because both are real readings and
   neither is a ladder point: somebody looking at the line has to be able to see
   why the shape has an extra dot in it. */
.cb-vine-dot[data-manual] {
  border-radius: var(--cb-radius-xs);
}
.cb-vine-dot[data-origin] {
  opacity: 0.55;
  border-style: dotted;
}

/* ---- The answers ---- */
.cb-vine-answers {
  display: grid;
  gap: var(--cb-space-xl);
}
.cb-vine-answer {
  margin: 0;
  display: grid;
  gap: var(--cb-space-xs);
}
.cb-vine-answer cite {
  font-size: var(--cb-type-xs-size);
  font-style: normal;
  font-weight: var(--cb-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--cb-tracking-xxs);
  color: var(--cbc-ink-muted);
}
.cb-vine-answer p {
  margin: 0;
  max-inline-size: var(--cb-layout-paragraph-max-width);
  color: var(--cbc-ink);
}

/* ---- The claims ---- */
/* SUBGRID, so five rows share three columns rather than each sizing its own.
   Per-row grids gave "NOT MENTIONED" and "AGREES" different widths, so the
   held value started at four different places down one card and the eye had
   nothing to run along. `display: contents` cannot do it here the way it does
   for the tracks above: a claim is several rows deep, since `said` and `from`
   sit under `held` in the same column, and contents would scatter them.

   The first column was `--cb-width-xs` too, 384px of content width holding
   five short field names. */
.cb-vine-claims {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: max-content max-content 1fr;
  gap: var(--cb-space-sm);
}
.cb-vine-claim {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  align-items: baseline;
  column-gap: var(--cb-space-lg);
  row-gap: var(--cb-space-xs);
  padding-block: var(--cb-space-xs);
}
.cb-vine-claim + .cb-vine-claim {
  border-block-start: 1px solid var(--cbc-line);
}
.cb-vine-claim-what {
  font-weight: var(--cb-font-weight-medium);
}
.cb-vine-claim-verdict {
  font-size: var(--cb-type-xs-size);
  font-weight: var(--cb-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--cb-tracking-xxs);
  white-space: nowrap;
  color: var(--cbc-ink-muted);
}
.cb-vine-claim[data-verdict="contradicts"] .cb-vine-claim-verdict {
  color: var(--cbc-poor-text);
}
.cb-vine-claim[data-verdict="agrees"] .cb-vine-claim-verdict {
  color: var(--cbc-good-text);
}
.cb-vine-claim-held,
.cb-vine-claim-said,
.cb-vine-claim-from {
  grid-column: 3;
  font-size: var(--cb-type-sm-size);
  color: var(--cbc-ink-muted);
}
.cb-vine-claim-from {
  color: var(--cbc-ink-faint);
}

/* ---- The rivals ---- */
.cb-vine-rivals {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--cb-space-sm);
}
.cb-vine-rival {
  display: flex;
  align-items: baseline;
  gap: var(--cb-space-sm);
  padding: var(--cb-space-xs) var(--cb-space-lg);
  border: 1px solid var(--cbc-line);
  border-radius: var(--cb-radius-full);
}
.cb-vine-rival-mark {
  font-size: var(--cb-type-xs-size);
  color: var(--cbc-ink-faint);
}
/* THE UNKNOWN ONE IS THE NEWS. A rival somebody already named is expected and
   reads quietly; one nobody had heard of being recommended instead of a client
   is the finding, so it is the one that takes an accent. */
.cb-vine-rival[data-known="no"] {
  border-color: var(--cbc-accent);
}
.cb-vine-rival[data-known="no"] .cb-vine-rival-mark {
  color: var(--cbc-accent-text);
}

/* ---- Readiness ---- */
.cb-vine-ready {
  display: grid;
  grid-template-columns: var(--cb-width-sm) 1fr;
  gap: var(--cb-space-xs) var(--cb-space-lg);
  margin: 0;
}
.cb-vine-ready dt {
  color: var(--cbc-ink-muted);
  font-size: var(--cb-type-sm-size);
}
.cb-vine-ready dd {
  margin: 0;
}

/* ---- Editing the questions ----
   The dialog is wider than the console's default, because a question row holds
   four controls and a narrow one stacks them into a column that reads as four
   separate settings rather than as one question. */
/* THE WIDTH COMES FROM `cb-dialog-wide`, WHICH IS ALREADY IN THE CONSOLE.
   `.cb-vine-edit` used to declare `max-inline-size: var(--cb-width-4xl)` and it
   drew nothing at all: `.cb-dialog` sets `width`, and a max only caps a width
   somebody else has already chosen. It read as a deliberate 1440px and rendered
   at 560. The lesson is the one rule 19 makes about invalid declarations, in
   its quieter form: a declaration can be perfectly valid, perfectly ignored,
   and look in the source exactly like the thing doing the work. */

/* The rivals are a second subject in one dialog, so the heading needs air on
   both sides. Without it the heading sat against the cost line above and its
   own note below, and all three read as one paragraph. */
.cb-vine-edit h3 {
  margin-block: var(--cb-space-xl) var(--cb-space-xs);
}
.cb-vine-edit-list,
.cb-vine-edit-rivals {
  display: grid;
  gap: var(--cb-space-lg);
}
.cb-vine-edit-row {
  display: grid;
  gap: var(--cb-space-md);
  padding: var(--cb-space-lg);
  border: 1px solid var(--cbc-line);
  border-radius: var(--cb-radius-md);
  background: var(--cbc-sunken);
}
.cb-vine-edit-rival {
  display: flex;
  align-items: center;
  gap: var(--cb-space-sm);
}
.cb-vine-edit-rival .cb-input {
  flex: 1 1 auto;
  min-inline-size: 0;
}

/* Two questions side by side once there is room for them. The prelude mirrors
   --cb-breakpoint-md, which CSS cannot read inside a query. */
@media (min-width: 768px) {
  .cb-vine-edit-row {
    grid-template-columns: 1fr 1fr;
    /* START, NOT END. The two fields carry help text of different lengths, so
       bottom-aligning them put "The question" and "Town" on different lines and
       their two inputs 20px apart, which reads as a broken row rather than as a
       pair. Aligned at the top, the labels and the inputs line up and only the
       help hangs unevenly, which is what uneven help should do. */
    align-items: start;
  }
}

/* ---- How much a finding is worth ----
   At the foot of the board, quieter than the queue above it: it is evidence
   about the findings rather than a finding, and a block that shouted would
   compete with the thing somebody opened the page for. */
/* The slot the block arrives into. Empty until then, and it takes no space:
   an empty card reserving height at the foot of the page would read as
   something that failed to load rather than something still coming. */
.cb-vine-cal-slot {
  display: contents;
}
.cb-vine-cal {
  color: var(--cbc-ink-muted);
}
.cb-vine-cal-body {
  display: grid;
  gap: var(--cb-space-sm);
}
.cb-vine-cal-rates {
  display: grid;
  grid-template-columns: var(--cb-width-xs) 1fr;
  gap: var(--cb-space-xs) var(--cb-space-lg);
  margin: 0;
  font-size: var(--cb-type-sm-size);
}
.cb-vine-cal-rates dt {
  color: var(--cbc-ink);
}
.cb-vine-cal-rates dd {
  margin: 0;
}

/* ---- The chapter on a client's own page ----
   A list of four rows rather than a table, for sugarfix-panel.ts's reason: a
   panel inside a chapter is read at a glance, and what somebody preparing for a
   meeting needs is where each assistant stands. The shape over time is one
   click away on the line itself. */
.cb-vine-panel {
  display: grid;
  gap: var(--cb-space-lg);
}
.cb-vine-panel-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--cb-space-sm);
}
.cb-vine-panel-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cb-space-lg);
}
.cb-vine-panel-who {
  color: var(--cbc-ink-muted);
}

/* ---- The QBR's chapter (docs/23 section 11) ----
   It lives here rather than beside the rest of the QBR in console-dossier.css
   for the reason Sugarfix's chapter lives in its own sheet: the class guard is
   a per-FILE rule, one class one file whichever file, and keeping a feature's
   own rules together is what makes it removable in one piece.

   It borrows `.cb-qbr-figures` from console-sugarfix.css deliberately rather
   than defining a second grid of the same shape. Two chapters on one page
   drawn to two grids would read as two different documents, and the guard's
   own rule is that one class has one owner: this sheet loads after that one
   and adds nothing to it. */
.cb-qbr-vine {
  margin-top: var(--cb-space-4xl);
}
.cb-qbr-vine h2 {
  font-size: var(--cb-type-lg-size);
  margin: 0 0 var(--cb-space-lg);
}