/* ==========================================================================
   .tp-priority — P1.F2.T3 (added Wave 1b, orchestrator-assigned)
   ©2026 Vexstorm Studios – All Rights Reserved

   The calculated priority and the reviewed priority, side by side, with the
   arithmetic that produced the calculated one.

   BIZ-006: a reviewed value NEVER replaces the calculated one — not in storage
   and not in presentation. So the two occupy equal, adjacent, equally weighted
   slots. Neither is styled as the "real" value with the other as an annotation,
   because that is exactly the collapse the requirement exists to prevent.

   BIZ-004: when the calculated priority rises above the reviewed one the record
   is flagged for re-review, and the reviewed value stands until a person
   changes it. __flag is that prompt. It is a caution, not an error: nothing is
   wrong, something needs a second look.

   Variants   (none)
   Elements   __pair  __value  __caption  __label  __label--absent  __score
              __explanation  __flag
   Hook       [data-priority] on __value, set by the template to "calculated"
              or "reviewed"

   ON THE PRIORITY COLOUR TOKENS. --tp-color-priority-{low…critical} exist and
   are the right colours for a priority level — but this markup carries the
   level only as TEXT ({{ calculated_label }}), with no per-level class or
   attribute, so CSS cannot select on it. The level colour therefore belongs to
   .tp-badge--{low|moderate|high|urgent|critical}, which already implements all
   five against those tokens. If observations/_priority_explanation.html wraps
   __label in `tp-badge tp-badge--{{ level }}`, the level colour appears with no
   change to this file — reuse rather than a second implementation (LAW 2). The
   slots below are distinguished structurally instead, which is what BIZ-006
   actually asks for.

   Consumed by observations/_priority_explanation.html.
   ========================================================================== */

.tp-priority {
  display: flex;
  flex-direction: column;
  gap: var(--tp-space-4);
  min-width: 0;
}

/* --------------------------------------------------------------------------
   The two slots
   -------------------------------------------------------------------------- */

/* Equal columns, so neither reads as primary. They stack below 30rem rather
   than compressing, because two half-width priority labels at 320px truncate
   and a truncated priority is a wrong priority. */
.tp-priority__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--tp-space-3);
}

@media (max-width: 30rem) {
  .tp-priority__pair {
    grid-template-columns: minmax(0, 1fr);
  }
}

.tp-priority__value {
  display: flex;
  flex-direction: column;
  gap: var(--tp-space-1);
  min-width: 0;
  padding: var(--tp-space-4);
  border: var(--tp-border-width-hairline) solid var(--tp-color-border-subtle);
  border-radius: var(--tp-radius-md);
  background-color: var(--tp-color-surface-sunken);
}

/* Which slot this is. Always rendered — "Calculated" and "Reviewed" are the
   distinction, and they are words, not a layout convention the reader has to
   infer (ACC-004). */
.tp-priority__caption {
  color: var(--tp-color-text-muted);
  font-size: var(--tp-text-xs);
  font-weight: var(--tp-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tp-priority__label {
  color: var(--tp-color-text-primary);
  font-size: var(--tp-text-lg);
  font-weight: var(--tp-weight-bold);
  line-height: var(--tp-leading-tight);
  overflow-wrap: break-word;
}

/* "Not reviewed" is a real state, not a blank. Muted and italic so it reads as
   an absence rather than as a priority named "Not reviewed", and still full
   size so the slot does not visually collapse next to its neighbour. */
.tp-priority__label--absent {
  color: var(--tp-color-text-muted);
  font-weight: var(--tp-weight-regular);
  font-style: italic;
}

.tp-priority__score {
  color: var(--tp-color-text-secondary);
  font-family: var(--tp-font-mono);
  font-size: var(--tp-text-sm);
  font-variant-numeric: tabular-nums;
}

/* The reviewed slot is the human judgement and is marked as such with an accent
   rail. The calculated slot keeps a neutral rail. This distinguishes them
   without ranking them — both captions are still present and equal. */
.tp-priority__value[data-priority="reviewed"] {
  border-inline-start: var(--tp-border-width-thick) solid
    var(--tp-color-accent-default);
}

.tp-priority__value[data-priority="calculated"] {
  border-inline-start: var(--tp-border-width-thick) solid
    var(--tp-color-border-strong);
}

/* --------------------------------------------------------------------------
   The explanation
   -------------------------------------------------------------------------- */

/* A <dl> of unclassed <dt>/<dd> pairs, which is the semantically correct markup
   for term-and-value and is what the template ships. Element selectors are used
   here and nowhere else in this file, scoped inside the block so they cannot
   leak: a bare `dt {}` would be a defect, `.tp-priority__explanation dt` cannot
   match anything outside this component. */
.tp-priority__explanation {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--tp-space-2) var(--tp-space-4);
  margin: 0;
  padding: var(--tp-space-4);
  border: var(--tp-border-width-hairline) solid var(--tp-color-border-subtle);
  border-radius: var(--tp-radius-md);
  font-size: var(--tp-text-sm);
  line-height: var(--tp-leading-normal);
}

@media (max-width: 30rem) {
  .tp-priority__explanation {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--tp-space-1) 0;
  }
}

.tp-priority__explanation dt {
  color: var(--tp-color-text-muted);
  font-weight: var(--tp-weight-medium);
  white-space: nowrap;
}

.tp-priority__explanation dd {
  margin: 0;
  min-width: 0;
  color: var(--tp-color-text-primary);
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   The re-review prompt (BIZ-004)
   -------------------------------------------------------------------------- */

/* role="status" in the template, so it is announced when it appears. A caution
   rather than an alert: the record is not wrong, it needs looking at again. The
   full sentence is in the template — the colour adds emphasis and nothing that
   is not already written (ACC-004). */
.tp-priority__flag {
  padding: var(--tp-space-3) var(--tp-space-4);
  border: var(--tp-border-width-hairline) solid var(--tp-color-state-warning);
  border-inline-start: var(--tp-border-width-thick) solid
    var(--tp-color-state-warning);
  border-radius: var(--tp-radius-md);
  background-color: var(--tp-color-state-warning-subtle);
  color: var(--tp-color-state-warning-text);
  font-size: var(--tp-text-sm);
  font-weight: var(--tp-weight-medium);
  line-height: var(--tp-leading-normal);
}