/* Notes page (notes-only/show): decorated header, notes cards in the side rails.
   The rails and the animated background come from subject-rails.css and edu-bg.css. */
/* The animated background is confined to this page area (position:absolute, not fixed), so it
   can never be painted over the logged-in dashboard sidebar. */
.np-shell{display:block;position:relative;isolation:isolate;min-height:calc(100vh - 140px)}
.np-shell > .edu-bg{position:absolute;z-index:-1}
.np-head{position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--cb,#EFF4FF) 0%,#fff 62%,color-mix(in srgb,var(--cb,#EFF4FF) 70%,#fff) 100%) !important;
  border:1px solid color-mix(in srgb,var(--c,#2563EB) 22%,#fff) !important;
  box-shadow:0 18px 40px -26px color-mix(in srgb,var(--c,#2563EB) 60%,transparent);
  animation:np-rise .55s ease both}
.np-head::before{content:"";position:absolute;width:260px;height:260px;right:-80px;top:-110px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--c,#2563EB) 22%,transparent) 0%,transparent 70%);animation:np-float 9s ease-in-out infinite alternate;pointer-events:none}
.np-head h1{position:relative;z-index:1}
.np-head-art{position:absolute;right:18px;bottom:6px;width:170px;height:auto;color:var(--c,#2563EB);opacity:.9;pointer-events:none}
.np-head-art .np-book{animation:np-bob 5s ease-in-out infinite;transform-origin:110px 90px}
.np-head-art .np-spark{animation:np-twinkle 3.2s ease-in-out infinite}
.np-head-art .np-pencil{animation:np-write 4s ease-in-out infinite;transform-origin:177px 109px}
.np-head .meta-row span{background:rgba(255,255,255,.85) !important;border:1px solid color-mix(in srgb,var(--c,#2563EB) 15%,#fff)}
.np-head .meta-row .free-chip{background:#DCFCE7 !important}
/* keep the title and buttons clear of the drawing */
.np-head > div:first-of-type{padding-right:150px}

/* notes cards: chapter names may need two lines */
.np-card .rs-tx b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:13.5px}
.np-card .rs-go{color:#94A3B8;flex:none}
.np-now .rs-now-s span{white-space:normal;line-height:1.35}

/* the notes text sits on a soft card so the animated background never hurts reading */
.rs-main .reader-wrap > .content-block{background:rgba(255,255,255,.92);border-radius:16px}

@keyframes np-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes np-float{from{transform:translate(0,0)}to{transform:translate(-20px,16px)}}
@keyframes np-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes np-twinkle{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes np-write{0%,100%{transform:rotate(0)}50%{transform:rotate(-8deg) translateX(-4px)}}

@media(max-width:760px){
  .np-head-art{width:110px;right:8px;bottom:4px;opacity:.35}
  .np-head > div:first-of-type{padding-right:0}
}
@media (prefers-reduced-motion: reduce){
  .np-head,.np-head::before,.np-head-art *{animation:none !important}
}