/* WS-1 — ProtocolItemCard: the ONE protocol-item card, all surfaces.
   Token-only (no raw hex; the two rgba() washes mirror today.css's ratified
   sage/terracotta opacity washes). Per-surface adjustments key off the
   data-surface attribute the component stamps on the card root. */

/* ── Base card (ported from today.css .today-card) ─────────────────────────── */

.pic-card {
  --pic-tier-accent: var(--color-semantic-action-primary);
  display: grid;
  gap: var(--spacing-3);
  border: 0;
  border-top: var(--stroke-border-default) solid var(--color-semantic-border-subtle);
  border-bottom: var(--stroke-border-default) solid var(--color-semantic-border-subtle);
  border-radius: 0;
  background: transparent;
  padding: var(--spacing-4);
  box-shadow: var(--shadow-none);
}

/* W5 r6: protocol build shows the decided tier; active-cycle routine rows
   remain uniform Core. The Core default is a deliberate fail-safe. */
.pic-card[data-surface="first-protocol"][data-tier="supportive"] {
  --pic-tier-accent: color-mix(
    in srgb,
    var(--color-semantic-action-primary) 50%,
    transparent
  );
}

.pic-card[data-surface="first-protocol"][data-tier="optional"] {
  --pic-tier-accent: color-mix(
    in srgb,
    var(--color-semantic-action-primary) 30%,
    transparent
  );
}

.pic-card:focus-visible,
.pic-card .pic-why:focus-visible,
.pic-card .pic-referral-noted:focus-visible,
.pic-card .pic-check-control input:focus-visible,
.pic-card .pic-session__log:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus-ring);
}

/* ── Interior vocabulary ───────────────────────────────────────────────────── */

.pic-eyebrow {
  margin: 0;
  color: var(--color-semantic-text-label);
  font-family: var(--font-family-body);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--font-letter-spacing-label);
  text-transform: uppercase;
}

.pic-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-3);
}

.pic-title-group {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-2);
}

/* Fraunces title on EVERY surface (contract: fixes D6). */
.pic-card .pic-title {
  margin: 0;
  color: var(--color-semantic-text-on-canvas);
  font-family: var(--font-family-display);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-light);
  letter-spacing: var(--font-letter-spacing-tight);
  line-height: var(--font-line-height-tight);
}

.pic-provenance {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  color: var(--color-semantic-text-secondary);
  white-space: nowrap;
}

.pic-dose-line {
  margin: 0;
  color: var(--color-semantic-text-secondary);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  line-height: var(--font-line-height-normal);
  /* Long free-text doses must wrap on narrow screens (ADR-0043 D-audit). */
  white-space: normal;
  overflow-wrap: anywhere;
}

/* §06b :1156 — decisive value in its own right-aligned mono column. Mirrors
   .current-state-ledger__value (styles.css:473-479), the canon-shaped
   precedent, and adds the tabular-nums that the ledger precedent omits. The
   column must never truncate: it wraps within --pic-value-max-inline and the
   title shrinks first (.pic-title-group below). */
.pic-value {
  flex: 0 0 auto;
  max-inline-size: var(--pic-value-max-inline, 45%);
  color: var(--color-semantic-text-secondary);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
  text-align: right;
  /* Inherited from the .pic-dose-line co-class (:99-100) and relied on here:
     white-space: normal; overflow-wrap: anywhere. NO text-overflow, NO
     ellipsis, NO line-clamp — a capped value wraps inside the column. */
}

/* The title yields before the column does. */
.pic-head > .pic-title-group {
  flex: 1 1 auto;
  min-inline-size: 0;
}

/* Titration context — the muted secondary line under the decisive dose. */
.pic-dose-context {
  margin: 0;
  color: var(--color-semantic-text-secondary);
  font-size: var(--font-size-xs);
  line-height: var(--font-line-height-normal);
  opacity: 0.85;
}

.pic-why-line {
  margin: 0;
  color: var(--color-semantic-text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--font-line-height-normal);
}

.pic-evidence {
  margin: 0;
  color: var(--color-semantic-text-secondary);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--font-letter-spacing-wide);
}

/* ── Evidence door (T3) ───────────────────────────────────────────────────── */

/* NEW-306 — the locked Strong/Moderate/Emerging cue is a caption-scale
 * qualifier, not title chrome. Keep it in the first routine-row track so it
 * cannot compete with the item's title or the right-hand evidence column. */
.pic-evidence-strength {
  grid-column: 1;
  inline-size: fit-content;
  max-inline-size: 100%;
  margin: 0;
  color: var(--color-semantic-text-secondary);
  font-family: var(--font-family-body);
  font-size: var(--font-size-xs);
  line-height: var(--font-line-height-normal);
}

.fp-evidence {
  margin-top: var(--spacing-2);
}

.fp-evidence-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2);
  width: 100%;
  min-height: 44px;
  padding: var(--spacing-1) 0;
  border: 0;
  background: transparent;
  color: var(--color-semantic-text-secondary);
  cursor: pointer;
  text-align: left;
}

.fp-evidence-summary {
  display: inline-flex;
  align-items: baseline;
  gap: var(--spacing-2);
}

.fp-evidence-chevron {
  position: relative;
  display: inline-block;
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  font-size: 0;
  line-height: 1;
}

.fp-evidence-chevron::before,
.fp-evidence-chevron::after {
  content: "";
  position: absolute;
  top: 5px;
  width: 7px;
  height: 1.5px;
  border-radius: var(--radius-pill);
  background: var(--color-semantic-text-secondary);
}

.fp-evidence-chevron::before {
  left: 0;
  transform: rotate(45deg);
}

.fp-evidence-chevron::after {
  right: 0;
  transform: rotate(-45deg);
}

.fp-evidence-toggle[aria-expanded="true"] .fp-evidence-chevron {
  transform: rotate(180deg);
}

.fp-evidence-panel {
  display: none;
  padding-top: var(--spacing-2);
}

.fp-evidence-panel.open {
  display: block;
}

.fp-evidence-caveat,
.fp-evidence-applicability,
.fp-evidence-source,
.fp-evidence-source-count {
  margin: 0;
}

.fp-evidence-caveat {
  color: var(--color-semantic-text-on-canvas);
  font-size: var(--font-size-sm);
  line-height: var(--font-line-height-normal);
}

.fp-evidence-applicability {
  margin-top: var(--spacing-2);
  color: var(--color-semantic-text-secondary);
  font-size: var(--font-size-xs);
  line-height: var(--font-line-height-normal);
}

.fp-evidence-sources {
  display: grid;
  gap: var(--spacing-1);
  margin-top: var(--spacing-3);
}

.fp-evidence-source {
  color: var(--color-semantic-text-secondary);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  line-height: var(--font-line-height-normal);
}

.fp-evidence-source-count {
  color: var(--color-semantic-text-secondary);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  line-height: var(--font-line-height-normal);
}

.fp-evidence-source[data-disconfirming="true"] {
  color: var(--color-semantic-text-secondary);
}

.fp-evidence-all-sources {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--spacing-2);
  border-top: var(--stroke-border-default) solid var(--color-semantic-border-subtle);
  color: var(--color-semantic-text-secondary);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  line-height: var(--font-line-height-normal);
}

.pic-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-3);
}

.pic-why {
  min-height: 44px;
  padding: var(--spacing-2) var(--spacing-3);
  border: var(--stroke-border-default) solid var(--color-semantic-border-subtle);
  border-radius: var(--radius-cta);
  background: var(--color-semantic-surface-raised);
  color: var(--color-semantic-action-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.pic-referral-controls {
  justify-content: flex-start;
}

.pic-referral-noted {
  min-height: 44px;
  padding: var(--spacing-2) var(--spacing-3);
  border: var(--stroke-border-default) solid var(--color-semantic-border-subtle);
  border-radius: var(--radius-cta);
  background: var(--color-semantic-surface-raised);
  color: var(--color-semantic-action-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.pic-referral-noted:disabled {
  color: var(--color-semantic-text-secondary);
  cursor: progress;
}

.pic-check-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  min-height: 44px;
  min-width: 44px;
  color: var(--color-semantic-text-on-canvas);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.pic-check-control input {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--color-semantic-action-primary);
}

/* ── Referral — quiet card (contract: fixes D9/D11) ────────────────────────── */

.pic-card--referral {
  border-color: var(--color-semantic-border-default);
  background: transparent;
}

.pic-referral-reason {
  margin: 0;
  padding-block: var(--spacing-3);
  color: var(--color-semantic-text-on-canvas);
  font-size: var(--font-size-sm);
  line-height: var(--font-line-height-normal);
}

.pic-referral-details {
  margin: 0;
  color: var(--color-semantic-text-secondary);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  line-height: var(--font-line-height-normal);
}

/* ── Weekly session tracker (ported from today.css .today-session__*) ──────── */

.pic-card--behavior-weekly {
  display: block;
  border-left: 3px solid var(--pic-tier-accent);
  border-radius: 0;
  box-shadow: var(--shadow-none);
}

.pic-card--behavior-weekly .pic-eyebrow {
  margin-bottom: var(--spacing-3);
}

.pic-card--behavior-weekly .pic-head {
  margin-bottom: var(--spacing-2);
}

.pic-card--behavior-weekly .pic-title {
  font-size: var(--font-size-xl);
}

.pic-card--resolved {
  background: transparent;
}

.pic-card--resolved .pic-title {
  color: var(--color-semantic-text-secondary); /* muted on resolve */
}

.pic-session__target {
  margin: 0;
  color: var(--color-semantic-text-secondary);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  line-height: var(--font-line-height-normal);
}

.pic-session__target-value {
  color: var(--color-semantic-text-on-canvas);
  font-weight: var(--font-weight-medium);
}

.pic-session__context {
  margin: var(--spacing-1) 0 0;
  color: var(--color-semantic-text-secondary);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  line-height: var(--font-line-height-normal);
  opacity: 0.85;
}

.pic-session__progress {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  margin-top: var(--spacing-4);
  padding-top: var(--spacing-4);
  border-top: var(--stroke-border-default) solid var(--color-semantic-border-subtle);
}

.pic-session__pips {
  display: flex;
  align-items: center;
  gap: 7px;
}

.pic-session__pip {
  width: 11px;
  height: 11px;
  border-radius: var(--radius-circle);
  border: 1.5px solid var(--color-semantic-border-default);
  background: transparent;
  box-sizing: border-box;
}

.pic-session__pip.is-filled {
  border-color: var(--color-semantic-action-primary);
  background: var(--color-semantic-action-primary);
}

.pic-card--resolved .pic-session__pip.is-filled {
  border-color: var(--color-semantic-status-on-track);
  background: var(--color-semantic-status-on-track);
}

.pic-session__count {
  color: var(--color-semantic-text-on-canvas);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--font-letter-spacing-wide);
}

.pic-card--resolved .pic-session__count {
  color: var(--color-semantic-text-secondary);
}

.pic-session__controls {
  margin-top: var(--spacing-4);
}

.pic-session__log {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  min-height: 44px;
  padding: 0 var(--spacing-4);
  border: 1.5px solid var(--color-semantic-action-primary);
  border-radius: var(--radius-cta);
  background: rgba(194, 112, 78, 0.06); /* terracotta @ 6% */
  color: var(--color-semantic-action-primary);
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
}

.pic-session__log:hover {
  background: rgba(194, 112, 78, 0.13); /* terracotta @ 13% */
}

.pic-session__log.is-logged {
  background: var(--color-semantic-action-primary);
  color: var(--color-semantic-action-primary-on);
}

/* "+" glyph drawn with CSS (1.5px geometric bars); morphs to a check when logged. */
.pic-session__log-glyph {
  position: relative;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.pic-session__log-glyph::before,
.pic-session__log-glyph::after {
  content: "";
  position: absolute;
  background: currentColor;
}

.pic-session__log-glyph::before {
  left: 50%;
  top: 1px;
  width: 1.5px;
  height: 12px;
  transform: translateX(-50%);
}

.pic-session__log-glyph::after {
  top: 50%;
  left: 1px;
  height: 1.5px;
  width: 12px;
  transform: translateY(-50%);
}

.pic-session__log.is-logged .pic-session__log-glyph::before,
.pic-session__log.is-logged .pic-session__log-glyph::after {
  content: none;
}

.pic-session__log.is-logged .pic-session__log-glyph {
  width: 10px;
  height: 6px;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(-45deg);
}

/* Resolved: sage circle + warm-stone check, top-right of the title row. */
.pic-session__check {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-circle);
  background: var(--color-semantic-status-on-track);
  flex-shrink: 0;
}

.pic-session__check::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--color-semantic-surface-canvas);
  border-bottom: 2px solid var(--color-semantic-surface-canvas);
  transform: translate(-50%, -65%) rotate(-45deg);
}

/* ── Surface: Protocol routine row (ported from protocol.css .protocol-row) ── */

.pic-card[data-surface="protocol-routine"] {
  gap: var(--spacing-1);
  padding: 12px 16px;
  border-top: var(--stroke-border-default) solid var(--color-semantic-border-subtle);
  border-bottom: var(--stroke-border-default) solid var(--color-semantic-border-subtle);
  border-left: 3px solid var(--pic-tier-accent);
  border-radius: 0;
  margin-bottom: 8px;
  box-shadow: var(--shadow-none);
  cursor: pointer;
}

.pic-card[data-surface="protocol-routine"] .pic-title {
  font-size: var(--font-size-base);
}

/* NEW-145 / brand-rules v9.7.0 §Priority Tier Accent: a tracked-only
   member-reported item has no priority tier (stackAssembly emits
   item_role: null and no `tier`; memberFacingTier's "core" default is a
   hydration fail-safe for Revora-authored items, not a tier assignment).
   Terracotta is Revora's action axis — it must not sign a member-authored
   card. Omitted, not neutralised: a neutral bar would narrate the absence
   of a Revora action, which the v9.6.0 silence boundary forbids.
   Padding compensates the removed 3px so the ledger's left text edge stays
   true against accented sibling rows (§06b editorial-ledger).

   The compound class selector is item-scoped specificity only: the base
   routine and latent first-protocol selectors each carry two components, so
   this guard must win without coupling the exception to a surface. The
   important flags keep the item-scoped exception ahead of the app-shell's
   higher-specificity legacy routine declarations. */
.pic-card--tracked_only,
.pic-card.pic-card--tracked_only {
  border-left: 0 !important;
}

.pic-card--tracked_only::before,
.pic-card.pic-card--tracked_only::before {
  content: none !important; /* forward guard: the first-protocol ledger bar */
}

.pic-card--tracked_only[data-surface="protocol-routine"] {
  padding-left: 19px;       /* 16px row padding + the 3px the border vacated */
}

/* ── Surface: first-protocol stack row (ported from first-protocol.css) ────── */

.pic-card[data-surface="first-protocol"] {
  position: relative;
  gap: var(--spacing-1);
  padding: 14px 0 14px 14px;
  border: 0;
  border-top: 1px solid var(--color-semantic-border-subtle);
  border-radius: 0;
  background: none;
  box-shadow: var(--shadow-none);
}

/* The panel owns the outer top/bottom rules; rows contribute one interior rule. */
.pic-card[data-surface="first-protocol"]:first-child {
  border-top: 0;
}

/* A prepended reconfirmation prompt is part of the panel, not a ledger row.
   The panel supplies its outer rules and the following stack row supplies their
   single shared interior rule, so the prompt must not duplicate either edge. */
#screen-first-protocol .fp-panel > .pregnancy-reconfirm-card {
  border-top: 0;
  border-bottom: 0;
}

/* Today's UNGROUPED direct-child rows are a zero-gap ledger (styles.css:1271).
   Where the reconfirmation prompt is immediately followed by one of them
   (referral / read-only-context / tracked-only — all still direct children of
   #today-actions per B2 §4.4), the prompt owns their shared boundary and the row
   contributes no top rule. Where the prompt is followed instead by a .time-slot
   group, the two are separated by --today-section-gap and each draws its own
   edge — nothing is suppressed; see today.css §--today-section-gap. The first
   row INSIDE a section shares its boundary with the group contour, handled at
   styles.css (.slot-wrap > .time-slot > .pic-card:first-child). */
body #screen-dashboard #today-actions > .pregnancy-reconfirm-card + .pic-card[data-surface="today"] {
  border-top: 0;
}

/* Terracotta left bar on every tiered non-referral row. Build-surface data-tier
   overrides the Core default above; the routine carries no tier attribute. */
.pic-card[data-surface="first-protocol"]::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 0;
  width: 3px;
  border-radius: 0;
  background: var(--pic-tier-accent);
}

.pic-card[data-surface="first-protocol"] .pic-title {
  font-size: var(--font-size-base);
}

/* ── Surface: item_detail wrapper (interior styled by protocol.css) ────────── */

.pic-card--detail {
  display: block;
  gap: 0;
  border: none;
  border-radius: 0;
  background: none;
  padding: 0;
  box-shadow: var(--shadow-none);
}

.pic-card--detail .pic-session-block {
  margin-top: var(--spacing-3);
}