/* HOTMA September 2026 income-collection trigger — status card + countdown chips.
   Ported from pha-vision's RegWatch "graduated countdown vocabulary" (css/app.css
   .clk / .clk-dot / .clk-* band classes), adapted to this repo's --pha-* variables
   so it sits visually inside the existing demo shell rather than importing a second
   design language. */

.ht-trig-card{
  border:1.5px solid var(--pha-hairline-strong);
  border-radius:14px;
  padding:16px 18px;
  margin:0 0 16px;
  background:var(--pha-surface,#fff);
}
.ht-trig-card.ht-trig-in{ border-color:#c5221f; background:#fcf1f0; }
.ht-trig-card.ht-trig-before{ border-color:var(--pha-hairline-strong); }
.ht-trig-card.ht-trig-after{ border-color:#b05a00; background:#fdf7ef; }
.ht-trig-card.ht-trig-err{ border-color:#c5221f; }

.ht-trig-head{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  margin:0 0 10px;
}

.ht-trig-badge{
  font:800 12px/1.4 Inter,sans-serif;
  letter-spacing:.03em;
  text-transform:uppercase;
  padding:5px 10px;
  border-radius:8px;
  color:#fff;
}
.ht-trig-badge-in{ background:#c5221f; }
.ht-trig-badge-before{ background:#3b4652; }
.ht-trig-badge-after{ background:#b05a00; }

.ht-trig-copy,.ht-trig-scope,.ht-trig-change,.ht-trig-cite{
  font-size:13.5px;
  line-height:1.55;
  color:var(--pha-text,#1a1a1a);
  margin:0 0 8px;
}
.ht-trig-cite{ color:var(--pha-text-muted); font-size:12.5px; margin-top:10px; }
.ht-trig-cite a{ color:var(--pha-blue,#10407f); }

/* ---------- countdown chips (RegWatch pattern) ---------- */
.clk{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:12px;
  font-weight:700;
  padding:3px 9px;
  border-radius:999px;
  border:1px solid var(--pha-hairline-strong);
  background:#eef1f4;
  color:var(--pha-text-muted);
  white-space:nowrap;
  font-family:"IBM Plex Mono",monospace;
}
.clk-dot{
  width:7px;
  height:7px;
  border-radius:999px;
  background:currentColor;
  flex:none;
}
.clk-gray{ }
.clk-amber{ background:#fef3e2; border-color:#e8b978; color:#9a5b00; }
.clk-orange{ background:#fde8d2; border-color:#e08b2c; color:#a1580a; }
.clk-red{ background:#fcecea; border-color:#e5a09c; color:#a11d18; }
.clk-missed{ background:#c5221f; border-color:#c5221f; color:#fff; }
.clk-missed .clk-dot{ background:#fff; }

@media(max-width:560px){
  .ht-trig-head{ gap:6px; }
  .ht-trig-card{ padding:13px 14px; }
}