/* chatOAME Resource Recommender - card styling.
 *
 * Cavalry Brown is the recommendation accent, and the card geometry is the one
 * chatOAME CSS already uses for pedagogical content boxes: 1px border, 6px
 * accent rule on the left, 18px radius, soft tint, small shadow, and a 5px
 * gradient band across the top. A recommendation should read as one of the
 * assistant's own content boxes, not as an advertisement bolted on afterwards.
 *
 * Every value falls back to a literal, so the card still looks right if it is
 * ever rendered on a page that has not loaded the chatOAME token sheet.
 */

.oame-reco {
  --reco-50:   var(--co-cavalry-brown-50, #f3f1ef);
  --reco-100:  var(--co-cavalry-brown-100, #eae6e3);
  --reco-200:  var(--co-cavalry-brown-200, #d6d0ca);
  --reco-500:  var(--co-cavalry-brown-500, #655649);
  --reco-600:  var(--co-cavalry-brown-600, #56483b);
  --reco-700:  var(--co-cavalry-brown-700, #46382d);
  --reco-900:  var(--co-cavalry-brown-900, #271c13);
  --reco-grad: var(--co-grad-cavalry-brown, linear-gradient(135deg, #56483b, #362a1f));
  --reco-ink:  var(--co-ink, #24333d);
  --reco-radius: var(--co-radius-lg, 18px);
  --reco-radius-sm: var(--co-radius, 12px);
  --reco-shadow: var(--co-shadow-sm, 0 1px 2px rgba(36, 51, 61, 0.06));
  --reco-focus: var(--co-tanzanite-500, #3c4b7e);

  position: relative;
  margin: 1.05rem 0 1.2rem;
  border: 1px solid var(--reco-200);
  border-left: 6px solid var(--reco-600);
  border-radius: var(--reco-radius);
  background-color: var(--reco-50);
  box-shadow: var(--reco-shadow);
  color: var(--reco-ink);
  overflow: hidden;
  clear: both;
  box-sizing: border-box;
  font-family: var(--co-font-sans, inherit);
}

.oame-reco__band {
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background-color: var(--reco-700);
  background-image: var(--reco-grad);
  pointer-events: none;
}

.oame-reco__body {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.15rem 1rem 0.95rem;
}

.oame-reco__body--plain { display: block; }

/* Artwork sits in a fixed square so a wide logo, a tall book cover and a square
   podcast tile all line up down the left edge. */
.oame-reco__art {
  flex: 0 0 84px;
  width: 84px;
  height: 84px;
  border-radius: var(--reco-radius-sm);
  background: #fff;
  border: 1px solid var(--reco-200);
  overflow: hidden;
  display: grid;
  place-items: center;
}

.oame-reco__art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* A cover is artwork in its own right, so let it fill the square. */
.oame-reco--book .oame-reco__art img,
.oame-reco--article .oame-reco__art img[alt*="Cover"] {
  object-fit: cover;
}

.oame-reco__text { flex: 1 1 auto; min-width: 0; }

.oame-reco__eyebrow {
  margin: 0 0 0.25rem;
  font-family: var(--co-font-mono, ui-monospace, monospace);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--reco-700);
}

.oame-reco__title {
  margin: 0 0 0.2rem;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--reco-900);
}

.oame-reco__byline {
  margin: 0 0 0.15rem;
  font-size: 0.92rem;
  font-style: italic;
  color: var(--reco-700);
}

.oame-reco__context {
  margin: 0 0 0.4rem;
  font-size: 0.87rem;
  color: var(--reco-600);
}

.oame-reco__summary {
  margin: 0;
  font-size: 0.94rem;
  color: var(--reco-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.oame-reco__summary.is-open {
  -webkit-line-clamp: unset;
  overflow: visible;
}

/* The toggle is an anchor so the sanitiser's allow-list accepts it, but it has
   to read as plain text rather than inherit the theme's button styling. */
.oame-reco__toggle,
.oame-reco-toggle {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0.3rem 0 0 !important;
  font: inherit !important;
  font-size: 0.9rem !important;
  color: var(--reco-700) !important;
  text-decoration: underline !important;
  cursor: pointer !important;
  display: inline-block !important;
}

.oame-reco__toggle:focus-visible,
.oame-reco-toggle:focus-visible {
  outline: 3px solid var(--reco-focus) !important;
  outline-offset: 2px !important;
}

.oame-reco__action { margin: 0.55rem 0 0; }

/* Kept deliberately small. The label carries the instruction ("Log in to the
   OCT and see the catalogue record"), so the control does not also need to
   shout - and a recommendation should never outweigh the reply above it. */
.oame-reco__action a {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background-image: var(--reco-grad);
  background-color: var(--reco-700);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.005em;
  text-decoration: none;
}

.oame-reco__action a:hover,
.oame-reco__action a:focus-visible { color: #fff; text-decoration: underline; }
.oame-reco__action a:focus-visible { outline: 3px solid var(--reco-focus); outline-offset: 2px; }

.oame-reco__note {
  margin: 0.6rem 0 0;
  font-size: 0.83rem;
  line-height: 1.35;
  color: var(--reco-600);
}

/* The portal the card is inserted into. Static positioning is deliberate: an
   earlier version used absolute positioning and covered generated diagrams. */
.oame-reco-portal {
  display: block;
  position: static;
  pointer-events: auto;
  margin: 10px 0 14px;
}

/* Only the standalone portal fallback needs its own breathing room; in the
   conversation the flex gap already provides it. */
.oame-reco-portal > .oame-reco-card {
  max-width: 100%;
}

/* Mirrors an AI reply in the same conversation column: .mwai-reply.mwai-ai is
   max-width 94% pushed left by margin-right auto. A fixed 680px card sat narrow
   beside a much wider reply and read as a foreign element dropped into the
   thread rather than part of it. Vertical spacing is left to the conversation's
   own gap, exactly as it is between two replies - setting a margin here as well
   double-spaced the card away from the reply it belongs to. */
.oame-reco-card {
  display: block;
  pointer-events: auto;
  box-sizing: border-box;
  width: 100%;
  max-width: 94%;
  margin: 0 auto 0 0;
  clear: both;
}

.oame-reco-card > .oame-reco {
  margin: 0;
}

.oame-reco-card .oame-reco-loading {
  margin: 0;
  padding: 12px;
  border-radius: var(--co-radius-lg, 18px);
  background: rgba(0, 0, 0, .03);
  font-size: .95em;
}

@media (max-width: 620px) {
  .oame-reco__body { flex-direction: column; }
  .oame-reco__art { flex-basis: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .oame-reco, .oame-reco * { transition: none !important; animation: none !important; }
}