/* Side rails with "other subjects in your class" (partials/subject-rails.blade.php).
   Rails show only when the page area is wide enough (container query), so the
   logged-in dashboard layout with its sidebar automatically uses the stacked block. */
.rs-outer{container-type:inline-size;position:relative;z-index:1}
.rs-grid{display:block}
.rs-rail{display:none}
.rs-main{min-width:0}
@container (min-width:1160px){
  .rs-grid{display:grid;grid-template-columns:minmax(210px,250px) minmax(0,1fr) minmax(210px,250px);gap:26px;max-width:1520px;margin:0 auto;padding:30px 22px 0;align-items:start}
  .rs-rail{display:block;position:sticky;top:96px;max-height:calc(100vh - 116px);overflow-y:auto;overscroll-behavior:contain;padding:4px 6px 18px;margin:0 -6px;scrollbar-width:thin}
  .rs-grid .rs-inline{display:none}
}

/* "You're studying" card */
.rs-now{position:relative;display:block;overflow:hidden;border-radius:18px;padding:18px 18px 16px;color:#fff;text-decoration:none;margin-bottom:18px;
  background:linear-gradient(135deg,var(--c,#2563EB) 0%,color-mix(in srgb,var(--c,#2563EB) 55%,#0F172A) 100%);
  box-shadow:0 14px 30px color-mix(in srgb,var(--c,#2563EB) 30%,transparent);animation:rs-rise .5s ease both}
.rs-now::before{content:"";position:absolute;width:180px;height:180px;right:-60px;top:-70px;border-radius:50%;background:rgba(255,255,255,.14);animation:rs-pulse 6s ease-in-out infinite}
.rs-now::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.18) 48%,transparent 66%);transform:translateX(-100%);animation:rs-shine 5.5s ease-in-out 1.2s infinite}
.rs-now>*{position:relative;z-index:1}
.rs-now-k{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.rs-now-n{display:flex;align-items:center;gap:8px;font-size:19px;font-weight:800;margin:6px 0 10px;line-height:1.25}
.rs-now-s{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.rs-now-s span{font-size:12px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);padding:4px 9px;border-radius:9px}
.rs-now-go{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700}
.rs-now:hover .rs-now-go i{transform:translateX(3px)}
.rs-now-go i{transition:transform .2s}

/* headings + subject cards */
.rs-head{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#64748B);margin:4px 2px 10px}
.rs-head i{font-size:15px;color:var(--blue,#2563EB)}
.rs-list{display:grid;gap:10px;margin-bottom:18px}
.rs-card{min-width:0;display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:14px;background:rgba(255,255,255,.88);backdrop-filter:blur(6px);border:1px solid var(--border,#E2E8F0);text-decoration:none;color:var(--ink,#0F172A);
  box-shadow:0 2px 6px rgba(15,23,42,.04);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;animation:rs-rise .45s ease both;animation-delay:calc(var(--i,0) * 70ms + .1s)}
.rs-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--c) 45%,#fff);box-shadow:0 12px 24px color-mix(in srgb,var(--c) 18%,transparent)}
.rs-ic{width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center;font-size:20px;color:var(--c,#2563EB);background:var(--cb,#EFF4FF);transition:transform .25s ease}
.rs-card:hover .rs-ic{transform:rotate(-8deg) scale(1.08)}
.rs-tx{min-width:0;flex:1}
.rs-tx b{display:block;font-size:14px;font-weight:700;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs-tx small{display:block;font-size:11.5px;color:var(--muted,#64748B);margin-top:2px}
.rs-go{color:#CBD5E1;font-size:16px;transition:transform .2s,color .2s}
.rs-card:hover .rs-go{color:var(--c);transform:translateX(3px)}

/* quick links under the right rail */
.rs-tips{display:grid;gap:8px;padding:12px;border-radius:16px;background:linear-gradient(160deg,#FFFFFF 0%,#F5F3FF 100%);border:1px solid var(--border,#E2E8F0);animation:rs-rise .5s ease .35s both}
.rs-tips a{display:flex;align-items:center;gap:10px;padding:7px;border-radius:11px;text-decoration:none;color:var(--ink,#0F172A);transition:background .15s}
.rs-tips a:hover{background:rgba(255,255,255,.9)}
.rs-tips .rs-ic{width:34px;height:34px;font-size:17px;border-radius:10px}
.rs-tips b{display:block;font-size:13px;font-weight:700}
.rs-tips small{display:block;font-size:11px;color:var(--muted,#64748B)}

/* stacked block on narrow screens */
.rs-inline{margin:34px 0 8px;padding:20px;border-radius:20px;background:rgba(255,255,255,.75);backdrop-filter:blur(6px);border:1px solid var(--border,#E2E8F0)}
.rs-list-grid{grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));margin-bottom:0}
@media(max-width:560px){.rs-inline{padding:16px;margin-top:26px}.rs-list-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.rs-list-grid .rs-tx b{white-space:normal}.rs-list-grid .rs-card{padding:10px;gap:8px}.rs-list-grid .rs-ic{width:34px;height:34px;font-size:17px}.rs-list-grid .rs-go{display:none}.rs-tx b{font-size:13px}}

@keyframes rs-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes rs-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
@keyframes rs-shine{0%{transform:translateX(-100%)}35%,100%{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){.rs-now,.rs-card,.rs-tips{animation:none}.rs-now::before,.rs-now::after{animation:none}.rs-card:hover,.rs-card:hover .rs-ic{transform:none}}