/* The recommendation register: a page whose whole job is to make a decision easy to make.
 *
 * ONE COLUMN, LIKE READING. A grid would make the eye choose a path, and there is no useful second
 * dimension across recommendations - they are a queue of decisions, read top to bottom.
 *
 * WHAT THE SOURCE SAID IS VISIBLY QUOTED. The excerpt sits in a bordered block with an attribution
 * line beneath it, so a reader can never mistake a source's sentence for AgentOS speaking. That is
 * the same distinction the work-order handoff enforces on the server side; it would be strange for
 * the surface to blur what the boundary is built to keep apart.
 *
 * Colours come from the app's own tokens (--card, --line, --ink, --muted, --accent) rather than
 * from new ones, so this page belongs to AgentOS. */

.recommendation-card-shell { max-width: 64rem; }
.recommendation-heading h2 { margin: 0 0 4px; }
.recommendation-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.recommendation-heading p { margin: 0 0 18px; color: var(--muted); max-width: 42rem; }
.recommendation-source-summary { display: block; color: var(--ink); }
.recommendation-source-byline { display: inline-block; margin-top: 6px; margin-right: 10px; font-size: 12px; color: var(--muted); }

.recommendation-source-preview {
  display: grid; grid-template-columns: minmax(14rem, 22rem) 1fr; gap: 16px; align-items: stretch;
  margin: 0 0 16px; padding: 14px;
  border: 1px solid var(--line); border-radius: 14px; background: #fff;
}
.recommendation-source-preview-media {
  display: block; min-height: 13rem; border-radius: 10px; overflow: hidden;
  background: rgba(31, 41, 55, .06); border: 1px solid var(--line); text-decoration: none;
}
.recommendation-source-preview-media img {
  display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 9;
}
.recommendation-source-preview-empty {
  display: flex; align-items: center; justify-content: center; min-height: 13rem;
  font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em;
}
.recommendation-source-preview-body { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.recommendation-source-preview-kicker {
  margin-bottom: 4px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em;
}
.recommendation-source-preview h3 { margin: 0; font-size: 20px; line-height: 1.2; overflow-wrap: anywhere; }
.recommendation-source-preview-byline { margin: 6px 0 0; font-size: 12px; font-weight: 700; color: var(--muted); }
.recommendation-source-preview-summary { margin: 12px 0 0; color: var(--ink); line-height: 1.4; overflow-wrap: anywhere; }
.recommendation-source-preview-actions {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px;
}
.recommendation-source-summary-button { margin: 0; }

/* R29's header. A row of stat tiles that wraps rather than scrolls - three numbers must be
   readable on a phone without any horizontal movement. */
.recommendation-counts {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px; margin-bottom: 18px;
  border: 1px solid var(--line); border-radius: 12px; background: #fff;
}
.recommendation-count {
  display: flex; flex-direction: column; gap: 2px;
  padding: 4px 12px; border-left: 1px solid var(--line); min-width: 0;
}
.recommendation-count:first-of-type { border-left: 0; }
.recommendation-count strong { font-size: 20px; line-height: 1.1; }
.recommendation-count span { font-size: 11px; color: var(--muted); }
.recommendation-count--open strong { color: var(--accent, #b45309); }
/* The number this page exists to expose. It is coloured as a warning only when it is non-zero
   through the ordinary tone rules below - a zero here is good news, not an alarm. */
.recommendation-count--outstanding strong { color: #b45309; }
.recommendation-count--completed strong { color: #15803d; }
.recommendation-count-scope { font-size: 12px; color: var(--muted); padding: 0 4px; }
.recommendation-count-line { margin: 0 0 14px; font-size: 12px; color: var(--muted); }

.recommendation-list { display: flex; flex-direction: column; gap: 14px; }
.recommendation-section { margin-top: 26px; }
.recommendation-section h3 { margin: 0 0 4px; font-size: 14px; }
.recommendation-section p { margin: 0 0 12px; font-size: 12px; color: var(--muted); }

.recommendation-card {
  border: 1px solid var(--line); border-radius: 14px;
  background: #fff; padding: 14px 16px;
  box-shadow: 0 1px 2px rgba(31, 41, 55, .04);
}
.recommendation-card--approved { border-left: 3px solid #15803d; }
.recommendation-card--rejected { border-left: 3px solid var(--line); opacity: .8; }
.recommendation-card-header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.recommendation-card-header h3 { margin: 0; font-size: 15px; overflow-wrap: anywhere; max-width: 42rem; }
.recommendation-state { font-size: 11px; color: var(--muted); white-space: nowrap; }
.recommendation-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 10px; font-size: 12px; }
.recommendation-rank { color: var(--muted); }
.recommendation-source-link { font-size: 12px; }

.recommendation-evidence { display: flex; flex-direction: column; gap: 8px; }
.recommendation-evidence-row { display: grid; grid-template-columns: 8.5rem 1fr; gap: 10px; align-items: start; }
.recommendation-evidence-row > span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding-top: 2px; }
.recommendation-source-suggestion {
  margin: 2px 0 4px; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere;
}
.recommendation-source-suggestion span {
  display: block; margin-bottom: 2px; font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}
/* `overflow-wrap: anywhere` on every source-derived string: an excerpt can be one unbroken 400
   character token, and a card that overflows its own container is how a page stops being readable
   on the day it meets real data. */
.recommendation-evidence-row p { margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.recommendation-conditions { margin: 0; padding-left: 18px; font-size: 13px; }
.recommendation-conditions li { overflow-wrap: anywhere; }

.recommendation-technical {
  margin-top: 2px; border: 1px solid var(--line); border-radius: 10px;
  background: rgba(31, 41, 55, .02);
}
.recommendation-technical summary {
  cursor: pointer; padding: 8px 10px; font-size: 12px; color: var(--muted);
}
.recommendation-technical-body { padding: 0 10px 10px; display: flex; flex-direction: column; gap: 8px; }
.recommendation-audit summary { cursor: pointer; font-weight: 700; }

.recommendation-quote {
  margin: 4px 0 0; padding: 10px 12px;
  border-left: 3px solid var(--line); border-radius: 0 8px 8px 0;
  background: rgba(31, 41, 55, .03);
}
.recommendation-quote p { margin: 0; font-size: 13px; font-style: italic; overflow-wrap: anywhere; }
.recommendation-quote cite { display: block; margin-top: 6px; font-size: 11px; font-style: normal; color: var(--muted); }

.recommendation-stale {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; padding: 8px 10px; font-size: 12px;
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
}

.recommendation-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
/* The reject panel takes the full row when it opens, so the reason field is a real text area and
   not a squeezed strip beside two buttons. */
.recommendation-reject { flex: 1 0 100%; margin-top: 8px; }
.recommendation-reject label { display: flex; flex-direction: column; gap: 4px; }
.recommendation-reject label span { font-size: 12px; color: var(--muted); }
.recommendation-reject textarea { width: 100%; box-sizing: border-box; resize: vertical; }
.recommendation-reject-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }

.recommendation-reason { margin: 12px 0 0; font-size: 12px; overflow-wrap: anywhere; }
.recommendation-reason span { color: var(--muted); }

.recommendation-work {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; padding: 8px 10px; font-size: 12px;
  border: 1px solid var(--line); border-radius: 10px;
}
.recommendation-work--completed { border-color: #86c9a0; background: rgba(134, 201, 160, .12); }
.recommendation-work--missing { border-color: #e5a3a3; background: rgba(229, 163, 163, .12); }
.recommendation-work-link { white-space: nowrap; }

/* R26. Collapsed means ONE LINE. The summary is a button so it is reachable by keyboard, and the
   reopen action lives inside the detail block so it does not exist until the reader has expanded
   the row on purpose. */
.recommendation-matched-list { display: flex; flex-direction: column; gap: 6px; }
.recommendation-matched { border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.recommendation-matched-summary {
  display: flex; align-items: baseline; gap: 10px; width: 100%;
  padding: 8px 12px; text-align: left; background: none; border: 0; cursor: pointer;
  font: inherit; color: inherit;
}
.recommendation-matched-summary:hover { background: rgba(31, 41, 55, .03); }
.recommendation-matched-label { font-weight: 600; font-size: 13px; }
.recommendation-matched-verdict { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
/* The prior reason is the row's whole value, so it gets the remaining width and is clipped rather
   than allowed to push the row to two lines. The full text is one expand away. */
.recommendation-matched-reason {
  flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.recommendation-matched-detail { padding: 0 12px 12px; }

.recommendation-examined-list { display: flex; flex-direction: column; gap: 10px; }
.recommendation-examined {
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  background: #fff;
}
/* The promoted few are marked rather than moved: the point of this view is that the promoted and
   the un-promoted sit in ONE list, so the bound is visible as a bound. */
.recommendation-examined.is-promoted { border-left: 3px solid var(--accent, #b45309); }
.recommendation-examined-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.recommendation-examined-verdict { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--accent, #b45309); }
.recommendation-examined-state { font-size: 11px; color: var(--muted); margin-left: auto; }

@media (max-width: 640px) {
  .recommendation-source-preview { grid-template-columns: 1fr; padding: 12px; }
  .recommendation-source-preview-media,
  .recommendation-source-preview-empty { min-height: 10rem; }
  .recommendation-evidence-row { grid-template-columns: 1fr; gap: 2px; }
  .recommendation-count { border-left: 0; padding: 4px 8px; }
  .recommendation-matched-summary { flex-wrap: wrap; }
  .recommendation-matched-reason { white-space: normal; overflow: visible; }
  .recommendation-examined-state { margin-left: 0; }
}