/* SUGARFIX: the queue's own filters, and the screen where the writing is read.
 *
 * Its own file because it is its own area, the way console-team.css and
 * console-reports.css are. Everything here is a token: the class guard
 * (npm run check:classes) refuses a class two stylesheets claim, and
 * check:tokens refuses a raw colour, a px past a hairline, or a font stack.
 *
 * ONE SHAPE CARRIES THE WHOLE SCREEN: a stack of blocks, each one a target and
 * the words written for it. It is a list rather than a table on purpose. A
 * table asks somebody to read down a column; this screen asks them to read
 * forty-seven sentences and change the ones that are wrong, which is reading
 * rather than scanning, and a sentence in a cell is a sentence nobody edits.
 */

/* ---- The two menus above the queue ---- */
.cb-fix-filters {
  display: flex;
  gap: var(--cb-space-lg);
  flex-wrap: wrap;
}
.cb-fix-filters .cb-select {
  /* Sized to their own longest label rather than to the row. Two menus
     stretched across a wide screen read as a form somebody has to fill in,
     which is the opposite of what a narrowing control is. */
  width: auto;
  min-width: var(--cb-width-xs);
}

/* ---- What the finding itself is ---- */
.cb-fix-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--cb-space-md) var(--cb-space-2xl);
  align-items: baseline;
  margin: 0;
}
.cb-fix-facts dt {
  color: var(--cbc-ink-muted);
  font-size: var(--cb-type-sm-size);
}
.cb-fix-facts dd {
  margin: 0;
  color: var(--cbc-ink);
}

/* ---- What was not kept, and why ---- */
/* Never behind a disclosure (docs/24): a finding that says forty-seven and
   holds forty-five is only honest if the two missing ones have a sentence, and
   a sentence nobody can see is the same as no sentence. */
.cb-fix-held ul {
  margin: var(--cb-space-md) 0 0;
  padding-inline-start: var(--cb-space-2xl);
  color: var(--cbc-ink-muted);
  font-size: var(--cb-type-sm-size);
  line-height: var(--cb-type-sm-line-height);
}
.cb-fix-held li + li {
  margin-top: var(--cb-space-xs);
}

/* ---- The QBR's chapter about work done (docs/24 section 14) ---- */
/* It lives here rather than beside the rest of the QBR in console-dossier.css
   because the class guard is a per-FILE rule: one class, one file, whichever
   file. Keeping Sugarfix's own rules together is what makes the feature
   removable in one piece. */
.cb-qbr-fixes {
  margin-top: var(--cb-space-4xl);
}
.cb-qbr-fixes h2 {
  font-size: var(--cb-type-lg-size);
  margin: 0 0 var(--cb-space-lg);
}
.cb-qbr-figures {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--cb-space-md) var(--cb-space-2xl);
  margin: 0;
}
.cb-qbr-figures dt {
  color: var(--cbc-ink-muted);
}
.cb-qbr-figures dd {
  margin: 0;
  text-align: end;
  font-variant-numeric: tabular-nums;
  display: flex;
  gap: var(--cb-space-md);
  align-items: center;
  justify-content: flex-end;
}
/* What the work actually WAS, under the totals. Read aloud in a meeting, so it
   is a list of sentences rather than a second table. */
.cb-qbr-fix-kinds {
  margin: var(--cb-space-2xl) 0 0;
  padding-inline-start: var(--cb-space-2xl);
  color: var(--cbc-ink-muted);
  font-size: var(--cb-type-sm-size);
}

/* ---- The same thing on one client's page (docs/24 section 14) ---- */
/* A list rather than a table. A panel inside a chapter is read at a glance and
   seven columns is not: what somebody preparing for a meeting needs is what is
   waiting and how much of it. */
.cb-fix-panel {
  display: block;
}
.cb-fix-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.cb-fix-line {
  display: flex;
  align-items: center;
  gap: var(--cb-space-lg);
  padding: var(--cb-space-lg) var(--cb-space-md);
  border-radius: var(--cb-radius-md);
  color: var(--cbc-ink);
  text-decoration: none;
  transition: background var(--cb-motion-fast) var(--cbc-spring);
}
.cb-fix-line:hover {
  background: var(--cbc-hover);
}
.cb-fix-line:focus-visible {
  outline: var(--cbc-focus);
  outline-offset: var(--cbc-focus-inset);
}
.cb-fix-line-what {
  font-weight: var(--cb-font-weight-medium);
}
.cb-fix-line-count {
  color: var(--cbc-ink-muted);
}
/* Pushed to the far end, because it is the least of the four things on the row
   and the eye should reach it last. */
.cb-fix-line-when {
  margin-inline-start: auto;
  color: var(--cbc-ink-faint);
  font-size: var(--cb-type-sm-size);
}

/* ---- The writing ---- */
/* The one sentence somebody has to read before they take anything: this is a
   handoff and not an application. Quiet, above the list, never a banner: a
   promise the product keeps by construction does not need to shout. */
.cb-fix-note {
  margin: 0 0 var(--cb-space-2xl);
  color: var(--cbc-ink-muted);
  font-size: var(--cb-type-sm-size);
}

.cb-fix-items {
  display: flex;
  flex-direction: column;
  gap: var(--cb-space-2xl);
}
.cb-fix-item {
  display: flex;
  flex-direction: column;
  gap: var(--cb-space-md);
}
.cb-fix-item + .cb-fix-item {
  padding-top: var(--cb-space-2xl);
  border-top: 1px solid var(--cbc-line);
}
.cb-fix-item-head {
  display: flex;
  align-items: center;
  gap: var(--cb-space-md);
  flex-wrap: wrap;
}
.cb-fix-target {
  font-family: var(--cb-font-mono);
  font-size: var(--cb-type-sm-size);
  color: var(--cbc-ink-muted);
  /* The address of a picture on somebody else's site, which can be very long.
     It wraps rather than pushing the row wide, because the sentence beside it
     is the thing being read. */
  overflow-wrap: anywhere;
}

/* The words themselves. A textarea rather than a div, because this is a thing
   somebody changes, and an editable div is a contenteditable with all of that
   surface for nothing this screen needs (rule 21). */
.cb-fix-text {
  width: 100%;
  padding: var(--cb-space-lg);
  border: 1px solid var(--cbc-line);
  border-radius: var(--cb-radius-md);
  background: var(--cbc-sunken);
  color: var(--cbc-ink);
  font-family: var(--cb-font-body);
  font-size: var(--cb-type-base-size);
  line-height: var(--cb-type-base-line-height);
  resize: vertical;
  transition: border-color var(--cb-motion-fast) var(--cb-motion-ease);
}
/* A block whose text is a file rather than a sentence reads as code, because
   that is what it is: an llms.txt and a JSON-LD block are both pasted whole
   into a file, and proportional type in a file is a file nobody trusts. */
.cb-fix-item[data-shape="file"] .cb-fix-text {
  font-family: var(--cb-font-mono);
  font-size: var(--cb-type-sm-size);
  white-space: pre;
}
.cb-fix-text:hover {
  border-color: var(--cbc-line-strong);
}
.cb-fix-text:focus-visible {
  outline: var(--cbc-focus);
  outline-offset: var(--cbc-focus-inset);
  border-color: var(--cbc-accent);
}
.cb-fix-text[readonly] {
  /* Nothing to change here, so the field says so by not offering the
     affordances: no hover, no grabber. It is still selectable and still
     copyable, which is the whole of what a viewer needs (docs/24 §7). */
  resize: none;
  color: var(--cbc-ink-muted);
}
.cb-fix-text[readonly]:hover {
  border-color: var(--cbc-line);
}

.cb-fix-item-acts {
  display: flex;
  gap: var(--cb-space-md);
  align-items: center;
}

/* Below the medium breakpoint the facts stop being two columns: a label and a
   value squeezed side by side on a narrow window is two clipped strings.
   768px mirrors --cb-breakpoint-md, which CSS cannot read in a query prelude
   (rule 13). */
@media (max-width: 768px) {
  .cb-fix-facts {
    grid-template-columns: 1fr;
    gap: var(--cb-space-xs);
  }
  .cb-fix-facts dd {
    margin-bottom: var(--cb-space-md);
  }
}