/* Nova Rules - page styles from the Claude Design "Nova Rules" file.
 *
 * Layout and colours live inline in templates/pages/rules.html, exactly as in
 * the design. This sheet carries what inline styles cannot: keyframes and the
 * design's style-hover states (which must beat the inline base style, hence
 * !important). Motion runs as in the design even when the OS asks for reduced
 * motion - the design does not opt out.
 */
body { background: var(--nv-f6f6fa); -webkit-font-smoothing: antialiased; }

.nrl { line-height: normal; }
.nrl * { box-sizing: border-box; }
.nrl a { color: #DD3D4F; text-decoration: none; }
.nrl a:hover { color: var(--nv-b4202f); }
.nrl ::-webkit-scrollbar { height: 6px; width: 6px; }
.nrl ::-webkit-scrollbar-thumb { background: var(--nv-dcdce6); border-radius: 9px; }

@keyframes novaRise { from { opacity: 0; transform: translateY(18px) } to { opacity: 1; transform: translateY(0) } }

.nrl .nrl-h-row:hover { background: var(--nv-fbfafd) !important; }
.nrl .nrl-h-white:hover { transform: translateY(-2px) !important; color: var(--nv-b4202f) !important; }
.nrl .nrl-h-chip:hover { border-color: var(--nv-f3c4ca) !important; color: var(--nv-b4202f) !important; }
.nrl .nrl-h-bad:hover { transform: translateY(-3px) !important; box-shadow: 0 18px 32px -22px rgba(221,61,79,.35) !important; }
.nrl .nrl-h-good:hover { transform: translateY(-3px) !important; box-shadow: 0 18px 32px -22px rgba(22,163,106,.35) !important; }
.nrl .nrl-h-fee:hover { transform: translateY(-3px) !important; border-color: var(--nv-f3c4ca) !important; background: var(--nv-fff-bg) !important; box-shadow: 0 18px 32px -22px rgba(24,20,80,.3) !important; }
.nrl .nrl-h-cta:hover { background: #DD3D4F !important; transform: translateY(-2px) !important; color: #fff !important; }
.nrl button:focus-visible, .nrl a:focus-visible { outline: 2px solid #DD3D4F; outline-offset: 2px; }

/* The public header (Log in / Get started) is the shared one: partials/_app_header.html + app-shell.css. */

@media (max-width: 480px) {
  .nrl .nrl-main { padding: 24px 16px 56px !important; }
}
/* Rules by program: a table on wide screens, one card per program on phones. */
@media (max-width: 767px) {
  .nrl .nrl-prog-table { display: none !important; }
  .nrl .nrl-prog-cards { display: flex !important; }
}
@media (max-width: 767px) {
  .nrl .nrl-fee-link { min-height: 44px !important; }
  /* "Jump to a rule" chips: finger-sized on phones. */
  .nrl .nrl-h-chip { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 360px) {
  .nrl .nrl-rule-text { padding-left: 22px !important; }
  .nrl .nrl-param { flex-wrap: wrap; row-gap: 4px !important; }
  .nrl .nrl-param [data-param] { white-space: normal !important; margin-left: auto; text-align: right; }
}