/* Narrative phase — extracted from components.css (structural). */

@media (max-width: 768px){
}
@media (max-width: 768px){
}
@media (max-width: 768px){
}
@media (max-width: 768px){
}
@media (max-width: 768px){
}
@media (max-width:600px){
}
@media (max-width: 768px){
}
@media (max-width: 640px){
}
@media (max-width: 480px){
}
.np-grid { display: grid; grid-template-columns: 140px 44px 52px 1fr 48px 36px; column-gap: 10px; align-items: center; }
.np-head { padding: 8px 0 6px; border-bottom: 1px solid var(--gray-100); margin-bottom: 2px; }
.np-head .h { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; }
.np-row { padding: 6px 0; border-bottom: 1px solid var(--gray-50); transition: background 0.15s; animation: rfSlideUp 0.4s cubic-bezier(.16,1,.3,1) both; }
.np-row:nth-child(2) { animation-delay: 0.04s; }
.np-row:nth-child(3) { animation-delay: 0.08s; }
.np-row:nth-child(4) { animation-delay: 0.12s; }
.np-row:nth-child(5) { animation-delay: 0.16s; }
.np-row:nth-child(6) { animation-delay: 0.20s; }
.np-row:nth-child(7) { animation-delay: 0.24s; }
.np-row:nth-child(8) { animation-delay: 0.28s; }
.np-row:hover { background: var(--hover-bg); }
.np-row:last-of-type { border-bottom: none; }
.np-name { font-size: 11px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-match { font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-align: right; letter-spacing: -0.02em; }
.np-phase { font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; text-align: center; min-width: 40px; letter-spacing: 0.06em; line-height: 1.6; }
.np-phase.rot { background: rgba(100,116,139,0.12); }
.np-bars { display: flex; gap: 4px; align-items: center; }
.np-bar { flex: 1; height: 28px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 9px; font-weight: 600; transition: filter 0.15s; position: relative; }
.np-bar:hover { filter: brightness(0.95); }
.np-bar:hover::after { content: attr(data-date); position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%); font-size: 7.5px; white-space: nowrap; font-weight: 500; letter-spacing: 0.02em; }
.np-delta { font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-align: right; letter-spacing: -0.02em; }
.np-tokens { font-family: var(--font-mono); font-size: 10px; text-align: right; font-weight: 500; }
.np-dates { display: flex; gap: 4px; padding: 4px 0 0; }
.np-dates span { flex: 1; text-align: center; font-family: var(--font-mono); font-size: 7.5px; letter-spacing: 0.02em; }
.np-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 8px; }
.np-assess-btn { display: inline-flex; align-items: center; flex-shrink: 0; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.02em; text-decoration: none; background: var(--brand-amber-bg); border: 1px solid rgba(255,180,0,0.28); padding: 5px 11px; border-radius: 8px; transition: background 0.15s ease, border-color 0.15s ease; }
.np-assess-btn::after { content: "\2192"; margin-left: 5px; transform: translateX(0); transition: transform 0.18s cubic-bezier(.16,1,.3,1); }
.np-assess-btn:hover { background: var(--brand-amber-18); }
.np-assess-btn:hover::after { transform: translateX(3px); }
@media (max-width: 900px){
.np-grid { grid-template-columns: 110px 40px 46px 1fr 44px; }
.np-tokens { display: none; }
}
@media (max-width: 900px){
}
@media (max-width:720px){
}
@media (max-width:768px){
}
@media (max-width:640px){
.np-grid { grid-template-columns:1fr; }
}
@media (max-width:480px){
}
@media (max-width: 900px){
}
@media (max-width: 640px){
}
@media (min-width: 901px){
}
@media (max-width:768px){
}
@media (max-width: 900px){
}
@media (max-width:640px){
}
@media (max-width: 640px){
}
@media (max-width: 768px){
}
@media (max-width: 768px){
}
@media (max-width: 1100px){
}
@media (max-width: 768px){
}
@media (max-width: 1024px){
}
@media (max-width: 768px){
}
@media (max-width: 480px){
}
@media (max-width: 768px){
}
@media (max-width: 1024px){
}
@media (max-width: 768px){
}
@media (min-width: 641px) and (max-width: 1024px){
}
html body .np-grid.np-row > div:nth-child(2) > div[style*="border-radius:50%"],
html body .np-grid.np-row > div:nth-child(2) > div[style*="border-radius: 50%"] {
  display: none;
}
html body .np-row > span[style*="border-radius:4px"][style*="var(--brand-amber-08)"],
html body .np-row > span[style*="border-radius:4px"][style*="var(--gray-100)"] {
  background: transparent;
  padding: 0;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
@media (min-width: 769px){
}
@media (max-width: 768px){
}
@media (max-width: 768px){
}
@media (min-width: 901px){
}
@media (max-width: 768px){
}
@media (max-width: 768px){
}
@media (max-width: 1100px){
}
@media (max-width: 768px){
}
.np-phase, .np-conf, span.np-phase, span.np-conf { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 7px; border-radius: 4px; font-weight: 700; display: inline-block; }
.np-phase.emer { background: rgba(22,163,74,0.12); background: rgba(16,185,129,0.10) !important; }
.np-phase.heat { background: var(--brand-amber-bg); background: rgba(244,63,94,0.10) !important; }
.np-phase.peak { background: rgba(139,92,246,0.12); background: rgba(245,158,11,0.10) !important; background: var(--brand-amber-10) !important; }
.np-phase.cool { background: rgba(59,130,246,0.12); background: rgba(99,102,241,0.10) !important; }
.np-conf { background: var(--hover-subtle) !important; }
/* fixed-width, centered, right-aligned in its grid column so the Conf. badges line up */
.np-conf { min-width: 40px; text-align: center; justify-self: end; }
.np-conf.high { background: rgba(16,185,129,0.10) !important; }
.np-conf.low { background: var(--hover-subtle) !important; }
@media (max-width: 1024px){
}
@media (max-width: 768px){
}
@media (max-width: 480px){
}
@media (max-width: 768px){
}
@media (max-width: 1024px){
}
@media (max-width: 768px){
}
@media (min-width: 641px) and (max-width: 1024px){
}
html body .np-grid.np-row > div:nth-child(2) > div[style*="border-radius:50%"],
html body .np-grid.np-row > div:nth-child(2) > div[style*="border-radius: 50%"] {
  display: none;
}
html body .np-row > span[style*="border-radius:4px"][style*="var(--brand-amber-08)"],
html body .np-row > span[style*="border-radius:4px"][style*="var(--gray-100)"] {
  background: transparent;
  padding: 0;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
@media (min-width: 769px){
}
@media (max-width: 768px){
}
html body .np-phase { font-size: 9px; }
html body .np-row > div:first-child { gap: 8px; }
html body .np-row .np-phase { order: -1; width: 90px; min-width: 90px; flex: 0 0 90px; white-space: normal; line-height: 1.2; }
html body.dark .np-row,
html body .np-row { border-bottom: 1px solid var(--border); }
html body.dark .np-row:last-of-type,
html body .np-row:last-of-type { border-bottom: 0; }
html body.dark .np-row,
html body .np-row { border-bottom: 1px solid var(--border); }
html body.dark .np-row:last-of-type,
html body .np-row:last-of-type { border-bottom: 0; }