/* ============================================================================
 * apollo-parcel-subject-card.css
 *
 * Styles for the vanilla-DOM subject-parcel card rendered by
 * src/js/components/parcel-pivot-impl.js after a successful pivot from
 * the parcel-search submit handler.
 *
 * Layout:
 *   - White card · 8px radius · 1px border · 24px padding · 16px top margin
 *   - 3-column CSS grid for the dl meta block (one row per definition)
 *   - Full-width table for comparables, with 13px font + alternating rows
 *   - Clear button in the top-right corner, ghost style
 *
 * Print path: the clear button is hidden in print so the partner memo
 * (when printed from the dashboard, not the dedicated memo.html) shows
 * a clean subject card without an interactive UI element.
 * ========================================================================== */

.o-parcel-subject-card {
  background: var(--o-surface, #ffffff);
  border: 1px solid var(--o-border, #e2e6ec);
  border-radius: 8px;
  padding: 24px;
  margin-top: 16px;
  position: relative;
  color: var(--o-text, #1a2744);
  font-family: inherit;
}

.o-parcel-subject-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.o-parcel-subject-card h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--o-text, #1a2744);
}

.o-parcel-subject-card h3 code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  background: var(--o-surface-2, #f3f5f9);
  border-radius: 4px;
  padding: 2px 6px;
  margin-left: 4px;
  color: var(--o-text, #1a2744);
}

.o-parcel-subject-card__clear {
  background: transparent;
  border: 1px solid transparent;
  color: var(--o-text-muted, #5a6478);
  width: 28px;
  height: 28px;
  line-height: 1;
  font-size: 20px;
  cursor: pointer;
  border-radius: 4px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.o-parcel-subject-card__clear:hover,
.o-parcel-subject-card__clear:focus-visible {
  background: var(--o-surface-2, #f3f5f9);
  color: var(--o-text, #1a2744);
  border-color: var(--o-border, #e2e6ec);
  outline: none;
}

.o-parcel-subject-card__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 20px;
  padding: 0;
}

.o-parcel-subject-card__meta > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.o-parcel-subject-card__meta dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--o-text-muted, #5a6478);
  font-weight: 500;
}

.o-parcel-subject-card__meta dd {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--o-text, #1a2744);
  word-break: break-word;
}

.o-parcel-subject-card__comps h4 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--o-text, #1a2744);
}

.o-parcel-subject-card__comps-empty {
  margin: 0;
  font-size: 13px;
  color: var(--o-text-muted, #5a6478);
}

.o-parcel-subject-card__comps table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: auto;
}

.o-parcel-subject-card__comps thead th {
  text-align: left;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--o-text-muted, #5a6478);
  border-bottom: 1px solid var(--o-border, #e2e6ec);
  padding: 6px 8px;
  background: var(--o-surface, #ffffff);
}

.o-parcel-subject-card__comps tbody td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--o-border-subtle, #eef1f5);
  color: var(--o-text, #1a2744);
  white-space: nowrap;
}

.o-parcel-subject-card__comps tbody tr:nth-child(odd) td {
  background: var(--o-surface-alt, #fafbfd);
}

.o-parcel-subject-card__comps tbody tr:hover td {
  background: var(--o-surface-2, #f3f5f9);
}

/* Print: keep the card content visible but hide the interactive Clear
 * control so the partner memo (when printed from the dashboard surface)
 * shows a clean subject card. The dedicated /memo.html print surface
 * uses MemoTemplate.render and is unaffected by this rule. */
@media print {
  .o-parcel-subject-card {
    border: 1px solid #cccccc;
    box-shadow: none;
    page-break-inside: avoid;
  }
  .o-parcel-subject-card__clear {
    display: none;
  }
}