/**
 * Imported tender package workspace.
 *
 * The custom UI has to supply, in real markup, the controls Streamlit provides
 * as widgets: st.caption, st.code, st.radio, st.checkbox, st.multiselect,
 * st.divider and the column layouts used by the decision navigator and the
 * conflict comparison. Metrics reuse .product-metric-card, tabs reuse
 * .product-tabs, and a bordered container reuses .product-container-bordered.
 */

/* st.caption */
.product-caption {
  color: var(--product-muted);
  font-size: var(--product-type-caption);
  line-height: 1.5;
  margin: 0.25rem 0 0.55rem;
}

/* st.write body text. Streamlit paints prose in the text colour, whereas the
   base `p` rule is muted for supporting copy - an explanation the buyer has to
   act on is not supporting copy. */
.product-prose {
  color: var(--product-ink);
  font-size: var(--product-type-body);
  line-height: 1.6;
  margin: 0 0 0.6rem;
}

/* st.code / st.json - a fingerprint or typed payload, never prose. */
.product-code {
  display: block;
  overflow-x: auto;
  padding: 0.7rem 0.9rem;
  margin: 0 0 0.75rem;
  border: 1px solid var(--product-border);
  border-radius: 0.55rem;
  background: var(--product-soft);
  color: var(--product-ink);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.55;
  white-space: pre;
  word-break: normal;
}

.product-code--wrap {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 22rem;
  overflow-y: auto;
}

/* st.divider */
.product-divider {
  height: 1px;
  border: 0;
  margin: 0.85rem 0;
  background: color-mix(in srgb, var(--product-border) 80%, transparent);
}

/* st.radio - one exclusive choice, stacked. */
.product-radio-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0.15rem 0 0.35rem;
}

.product-radio {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--product-border);
  border-radius: 0.6rem;
  background: var(--product-surface);
  color: var(--product-ink);
  font-size: 0.85rem;
  line-height: 1.4;
  cursor: pointer;
  transition:
    border-color var(--motion-micro) var(--ease-micro),
    background var(--motion-micro) var(--ease-micro),
    box-shadow var(--motion-micro) var(--ease-micro);
}

.product-radio:hover {
  border-color: color-mix(in srgb, var(--product-accent) 45%, var(--product-border));
  background: var(--product-control-hover);
}

.product-radio input {
  margin: 0.15rem 0 0;
  accent-color: var(--product-accent);
  flex-shrink: 0;
}

.product-radio--selected {
  border-color: color-mix(in srgb, var(--product-accent) 55%, var(--product-border));
  background: color-mix(in srgb, var(--product-accent) 8%, var(--product-surface));
  box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--product-accent) 12%, transparent);
  font-weight: 650;
}

/* st.checkbox */
.product-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0.35rem 0 0.75rem;
  color: var(--product-ink);
  font-size: 0.85rem;
  line-height: 1.45;
  cursor: pointer;
}

.product-checkbox input {
  margin: 0.15rem 0 0;
  accent-color: var(--product-accent);
  flex-shrink: 0;
}

/* st.multiselect, shown as toggleable pills rather than a combobox. */
.product-chip-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.15rem 0 0.85rem;
}

.product-chip {
  padding: 0.24rem 0.68rem;
  border: 1px solid var(--product-border);
  border-radius: 999px;
  background: var(--product-surface);
  color: var(--product-muted);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 650;
  cursor: pointer;
  transition:
    border-color var(--motion-micro) var(--ease-micro),
    background var(--motion-micro) var(--ease-micro),
    color var(--motion-micro) var(--ease-micro);
}

.product-chip:hover {
  border-color: color-mix(in srgb, var(--product-accent) 45%, var(--product-border));
  color: var(--product-ink);
}

.product-chip.active {
  border-color: transparent;
  background: linear-gradient(
    135deg,
    var(--product-btn-primary-start) 0%,
    var(--product-btn-primary-end) 100%
  );
  color: #ffffff;
  box-shadow: 0 0.25rem 0.7rem var(--product-accent-glow);
}

/* A three-metric row; the base grid is four across. */
.product-metric-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

/* ==========================================================================
   Decision navigator: previous / position / next, as st.columns((1, 2, 1))
   ========================================================================== */
.package-issue-nav {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.package-issue-nav__position {
  text-align: center;
  padding: 0.55rem 0;
  color: var(--product-ink);
  font-size: 0.85rem;
}

.package-issue-nav__position span {
  display: block;
  color: var(--product-muted);
  font-size: var(--product-type-caption);
  font-weight: 400;
}

/* One row of the "See all N decisions" list: summary left, action right. */
.package-issue-row {
  display: grid;
  grid-template-columns: 5fr 1fr;
  align-items: start;
  gap: 0.75rem;
}

.package-issue-row__title {
  color: var(--product-ink);
  font-size: 0.86rem;
  font-weight: 700;
  margin-bottom: 0.15rem;
}

/* ==========================================================================
   Cited evidence and the conflict comparison
   ========================================================================== */

/* Two cited statements sit side by side; three or more stack. */
.package-conflict-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 0.35rem;
}

.package-conflict-grid--stacked {
  grid-template-columns: minmax(0, 1fr);
}

/* One cited source, quoted verbatim. */
.package-source-card {
  border: 1px solid var(--product-border);
  border-radius: 0.65rem;
  background: var(--product-surface);
  padding: 0.75rem 0.95rem;
  margin-bottom: 0.6rem;
  box-shadow: 0 0.12rem 0.4rem rgba(15, 23, 42, 0.025);
}

/* Document text is untrusted data: it is rendered literally, never as markup,
   and never as prose that could borrow the page's own emphasis. */
.package-source-quote {
  margin: 0.15rem 0 0.6rem;
  color: var(--product-ink);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.package-field-label {
  display: block;
  color: var(--product-ink);
  font-size: 0.84rem;
  font-weight: 700;
  margin: 0.65rem 0 0.3rem;
}

/* The decision card's inline validation message. */
.package-inline-error {
  margin: 0.5rem 0 0;
  padding: 0.6rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--product-danger) 34%, var(--product-border));
  border-left-width: 3px;
  border-radius: 0.55rem;
  background: color-mix(in srgb, var(--product-danger) 8%, var(--product-surface));
  color: color-mix(in srgb, var(--product-danger) 82%, var(--product-ink));
  font-size: 0.82rem;
}

@media (max-width: 900px) {
  .package-issue-nav,
  .package-conflict-grid,
  .package-issue-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .product-metric-grid,
  .product-metric-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* The scoring a buyer states when the package's own wording could not be
   compiled. One line per scored envelope: name, points, optional pass mark,
   and which passage of the package states it. */
.package-scoring-head,
.package-scoring-row {
  display: grid;
  grid-template-columns: 1.4fr 0.7fr 0.8fr 2.2fr auto;
  gap: 8px;
  align-items: center;
}

.package-scoring-head {
  margin: 4px 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--product-muted, #6b7280);
}

.package-scoring-row {
  margin-bottom: 8px;
}

.package-scoring-row .form-input {
  margin: 0;
}

@media (max-width: 720px) {
  .package-scoring-head {
    display: none;
  }

  .package-scoring-row {
    grid-template-columns: 1fr;
  }
}