/* Job.rocks case study, part 2: the live week planner (signature, case-job-rocks.js)
   and the challenge "shift tickets" below it. Shift blocks sit on a Mon-Sun x role grid;
   as the planner crosses the screen they drop into their slots one by one and the staff
   counter fills. Without the script the week shows filled. */

.jr-plan { background: radial-gradient(50% 40% at 10% 100%, var(--jr-mint), transparent 70%), var(--cs-bg); }
.jr-week { --g: 8px; margin-top: 56px; padding: 26px; border-radius: 28px; background: var(--white); box-shadow: 0 50px 90px -60px rgb(15 70 62 / 45%), inset 0 0 0 1px var(--cs-line); }
.jr-week__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.jr-week__venue { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; font-size: 17px; font-weight: 600; color: var(--cs-ink); }
.jr-week__venue span { width: 14px; height: 14px; border-radius: 50% 50% 50% 0; background: var(--accent); transform: rotate(-45deg); }
.jr-week__venue i { font-size: 14px; font-style: normal; font-weight: 400; color: var(--cs-muted); }
.jr-week__count { display: grid; gap: 8px; width: min(100%, 300px); }
.jr-week__count p { display: flex; justify-content: space-between; gap: 12px; margin: 0; font-size: 13.5px; color: var(--cs-muted); }
.jr-week__count b { font-variant-numeric: tabular-nums; color: var(--cs-ink); }
.jr-week__bar { height: 8px; border-radius: 8px; background: var(--jr-mint-2); overflow: hidden; }
.jr-week__bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), #48c7a8); transform: scaleX(var(--fill, 1)); transform-origin: left; transition: transform .5s var(--ease); }

.jr-grid { position: relative; display: grid; grid-template-columns: 110px repeat(7, minmax(0, 1fr)); grid-template-rows: 40px repeat(4, 78px); gap: var(--g); margin-top: 24px; }
/* empty slots: one tile per day/role, drawn behind the shifts */
.jr-grid::before {
  content: "";
  grid-row: 2 / 6;
  grid-column: 2 / 9;
  margin: 0 calc(var(--g) * -1) calc(var(--g) * -1) 0;
  background-color: #f1f6f4;
  background-image: linear-gradient(90deg, transparent calc(100% - var(--g)), var(--white) calc(100% - var(--g))), linear-gradient(180deg, transparent calc(100% - var(--g)), var(--white) calc(100% - var(--g)));
  background-size: calc(100% / 7) calc(100% / 4);
}
.jr-grid__corner { grid-row: 1; grid-column: 1; }
.jr-grid__day { grid-row: 1; display: grid; place-items: center; border-radius: 12px; background: var(--jr-mint-2); font-size: 13.5px; font-weight: 600; color: var(--jr-forest); }
.jr-grid__role { grid-row: var(--row); grid-column: 1; display: flex; align-items: center; font-size: 14px; font-weight: 600; color: var(--cs-ink); }
.jr-shift { position: relative; z-index: 1; grid-row: var(--row); grid-column: var(--col); display: flex; flex-direction: column; justify-content: space-between; min-width: 0; padding: 10px 12px; border-radius: 12px; border-left: 4px solid var(--sc); background: var(--sb); font-size: 12px; font-weight: 500; color: var(--cs-ink); box-shadow: 0 10px 18px -14px rgb(15 70 62 / 60%); }
.jr-shift span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--cs-muted); }
.jr-shift i { font-size: 14px; font-style: normal; font-weight: 700; }
.jr-shift i::after { content: " staff"; font-size: 12px; font-weight: 500; color: var(--cs-muted); }
.jr-shift--host { --sc: #1a9e83; --sb: #dcf1ea; }
.jr-shift--wait { --sc: #8b7cf6; --sb: #ebe8fe; }
.jr-shift--cat { --sc: #5b9bf5; --sb: #e2edfd; }
.jr-shift--sec { --sc: #f07a5a; --sb: #fde6df; }
.jr-week__saved { display: flex; align-items: center; gap: 10px; margin: 20px 0 0; font-size: 14px; font-weight: 600; color: var(--jr-forest); transition: opacity .4s, transform .5s var(--ease); }
.jr-week__saved span { width: 22px; height: 22px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }

/* live: blocks wait above their slot until the script drops them in */
.jr-plan.is-live .jr-shift { opacity: 0; transform: translate3d(0, -28px, 0) scale(.94); transition: opacity .3s ease, transform .6s cubic-bezier(.34, 1.5, .64, 1); }
.jr-plan.is-live .jr-shift.is-in { opacity: 1; transform: none; }
.jr-plan.is-live .jr-week__saved { opacity: 0; transform: translate3d(0, 8px, 0); }
.jr-plan.is-live .jr-week.is-done .jr-week__saved { opacity: 1; transform: none; }

/* challenge tickets */
.jr-tickets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 40px 0 0; padding: 0; list-style: none; }
.jr-tickets li { position: relative; display: grid; align-content: start; gap: 10px; padding: 22px 22px 24px; border-radius: 20px; background: var(--white); box-shadow: inset 0 0 0 1px var(--cs-line); }
.jr-tickets li::before, .jr-tickets li::after { content: ""; position: absolute; top: 52px; width: 16px; height: 16px; border-radius: 50%; background: var(--cs-bg); box-shadow: inset 0 0 0 1px var(--cs-line); }
.jr-tickets li::before { left: -8px; clip-path: inset(0 0 0 50%); }
.jr-tickets li::after { right: -8px; clip-path: inset(0 50% 0 0); }
.jr-tickets__t { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding-bottom: 14px; border-bottom: 1px dashed var(--cs-line); font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--cs-faint); }
.jr-tickets__t::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--tc); }
.jr-tickets li:nth-child(1) { --tc: #1a9e83; }
.jr-tickets li:nth-child(2) { --tc: #8b7cf6; }
.jr-tickets li:nth-child(3) { --tc: #5b9bf5; }
.jr-tickets li:nth-child(4) { --tc: #f07a5a; }
.jr-tickets h3 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.jr-tickets p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--cs-muted); }
.jr-tickets p.jr-tickets__fix { margin-top: 4px; padding: 12px 14px; border-radius: 12px; background: var(--jr-mint-2); color: var(--cs-ink); }

@media (max-width: 1100px) {
  .jr-tickets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jr-grid { grid-template-columns: 84px repeat(7, minmax(0, 1fr)); }
  .jr-shift { padding: 8px; }
  .jr-shift span { font-size: 11px; }
}
@media (max-width: 720px) {
  .jr-week { --g: 4px; margin-top: 40px; padding: 14px; border-radius: 20px; }
  .jr-week__venue { font-size: 15px; }
  .jr-week__venue i { width: 100%; padding-left: 24px; font-size: 13px; }
  .jr-week__count { width: 100%; }
  .jr-grid { grid-template-columns: 50px repeat(7, minmax(0, 1fr)); grid-template-rows: 30px repeat(4, 54px); margin-top: 16px; }
  .jr-grid__day { border-radius: 8px; font-size: 10.5px; }
  .jr-grid__role { font-size: 10.5px; }
  .jr-shift { align-items: center; justify-content: center; padding: 2px; border-left-width: 3px; border-radius: 8px; }
  .jr-shift span { display: none; }
  .jr-shift i { font-size: 15px; }
  .jr-shift i::after { content: none; }
  .jr-week__saved { font-size: 13px; }
  .jr-tickets { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .jr-week__bar i, .jr-week__saved { transition: none; }
}

.site-header__bar { border-bottom: 0; }

.jr-sheet { gap: 0 clamp(20px, 3vw, 48px); border-radius: 0; background: none; overflow: visible; }
.jr-sheet li { display: grid; align-content: start; gap: 14px; padding: 28px 0 0; border-left: 0; border-top: 2px solid var(--cs-line); font-size: 16px; position: relative; }
.jr-sheet li::before { content: ""; position: absolute; top: -2px; left: 0; width: 56px; height: 2px; background: var(--jr-green, #12a37f); }
.jr-sheet b { font-size: clamp(56px, 6vw, 96px); letter-spacing: -.05em; }
@media (max-width: 720px) { .jr-sheet { row-gap: 36px; } .jr-sheet li, .jr-sheet li:nth-child(n + 3) { padding: 22px 0 0; border-top: 2px solid var(--cs-line); } }

.jr-sheet li { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 16px; row-gap: 0; }
.jr-sheet__label { grid-column: 1 / -1; margin-top: 14px; }
.jr-sheet li { grid-template-columns: minmax(0, 1fr); justify-items: start; }
.jr-sheet li .jr-ico { margin-bottom: 18px; }
.jr-ico { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; color: var(--jr-forest); background: var(--jr-mint-2); box-shadow: inset 0 0 0 1px rgb(15 70 62 / 12%); transition: background .3s, color .3s; }
.jr-ico svg { width: 24px; height: 24px; display: block; animation: jrFloat 6s ease-in-out infinite; }
.jr-ico::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgb(15 120 100 / 35%); opacity: 0; animation: jrRing 3.2s ease-out infinite 1.2s; }
.jr-sheet li:nth-child(2) .jr-ico svg { animation-delay: -1.5s; } .jr-sheet li:nth-child(3) .jr-ico svg { animation-delay: -3s; } .jr-sheet li:nth-child(4) .jr-ico svg { animation-delay: -4.5s; }
.jr-sheet li:nth-child(2) .jr-ico::after { animation-delay: 2s; } .jr-sheet li:nth-child(3) .jr-ico::after { animation-delay: 2.8s; } .jr-sheet li:nth-child(4) .jr-ico::after { animation-delay: 3.6s; }
.jr-sheet li:hover .jr-ico { background: var(--jr-forest); color: #fff; }
@keyframes jrFloat { 0%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-3px) rotate(-4deg); } 75% { transform: translateY(2px) rotate(3deg); } }
@keyframes jrRing { 0% { opacity: .9; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.35); } }
@media (prefers-reduced-motion: reduce) { .jr-ico svg, .jr-ico::after { animation: none; } }
@media (max-width: 720px) { .jr-ico { width: 44px; height: 44px; } .jr-ico svg { width: 20px; height: 20px; } }

/* stats: glow cards */
.jr-sheet { gap: clamp(14px, 1.6vw, 24px); }
.jr-sheet li, .jr-sheet li:nth-child(n + 3) { isolation: isolate; overflow: hidden; padding: 30px 28px 28px; border: 1px solid rgb(15 120 100 / 14%); border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0%, rgb(18 163 127 / 16%) 0, rgb(18 163 127 / 0%) 46%),
    linear-gradient(180deg, #fff 0%, #f5faf8 100%);
  box-shadow: none;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.jr-sheet li::before { top: 0; left: 28px; width: 48px; height: 3px; border-radius: 0 0 3px 3px; }
.jr-sheet li::after { content: ""; position: absolute; z-index: -1; top: -70px; right: -70px; width: 190px; height: 190px; border-radius: 50%;
  background: repeating-radial-gradient(circle, rgb(15 120 100 / 0%) 0 22px, rgb(15 120 100 / 13%) 22px 23px);
  -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%); mask: radial-gradient(circle, #000 30%, transparent 70%);
  transition: transform .6s ease; }
.jr-sheet li:hover { transform: translateY(-4px); border-color: rgb(15 120 100 / 28%); box-shadow: none; }
.jr-sheet li:hover::after { transform: scale(1.12); }
@media (max-width: 720px) { .jr-sheet { gap: 14px; } .jr-sheet li, .jr-sheet li:nth-child(n + 3) { padding: 24px 20px 22px; border-top: 1px solid rgb(15 120 100 / 14%); } .jr-sheet li::before { left: 20px; } }

/* stats: compact white-to-mint tiles */
.jr-sheet { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: clamp(16px, 2.4vw, 36px); }
.jr-sheet li, .jr-sheet li:nth-child(n + 3) { flex: 1 1 0; min-width: 200px; display: grid; gap: 8px; padding: 40px 32px 32px; border: 0; border-radius: 10px; background: #e3f4ef !important; box-shadow: none; color: #0e2a33; font-size: 20px; line-height: 1.3; }
.jr-sheet li::before, .jr-sheet li::after, .jr-sheet li .jr-ico { display: none; }
.jr-sheet li b { font-family: var(--font); font-size: clamp(48px, 5vw, 72px); font-weight: 500; line-height: 1; letter-spacing: -.03em; color: var(--jr-forest); }
.jr-sheet__label { margin-top: 0; font-family: var(--font); font-size: 16px; color: var(--cs-muted); }
.jr-sheet li:hover { transform: none; box-shadow: none; }
@media (max-width: 720px) { .jr-sheet li, .jr-sheet li:nth-child(n + 3) { min-width: 0; flex: 1 1 calc(50% - 8px); padding: 22px 20px 18px; border-top: 0; } }

/* stats v3: one panel, hairline dividers */
.jr-sheet { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 !important; padding: 0; border: 1px solid rgb(15 120 100 / 16%); border-radius: 20px; background: #fff !important; overflow: hidden; }
.jr-sheet li, .jr-sheet li:nth-child(n + 3) { min-width: 0; display: grid; gap: 10px; padding: clamp(28px, 3vw, 44px) clamp(24px, 2.6vw, 40px); border: 0; border-left: 1px solid rgb(15 120 100 / 12%); border-radius: 0; background: none !important; box-shadow: none; }
.jr-sheet li:first-child { border-left: 0; }
.jr-sheet li b { font-size: clamp(44px, 4.4vw, 64px); font-weight: 500; letter-spacing: -.03em; line-height: 1; color: var(--jr-forest); }
.jr-sheet__label { font-size: 16px; color: var(--cs-muted); }
.jr-sheet li:hover { transform: none; background: #f2faf7 !important; }
@media (max-width: 720px) {
  .jr-sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jr-sheet li, .jr-sheet li:nth-child(n + 3) { padding: 24px 20px; border-left: 1px solid rgb(15 120 100 / 12%); }
  .jr-sheet li:nth-child(odd) { border-left: 0; }
  .jr-sheet li:nth-child(n + 3) { border-top: 1px solid rgb(15 120 100 / 12%); }
}

/* stats v4 (3e): giant numbers, small caps label above */
.jr-sheet { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px !important; padding: 0; border: 0; border-radius: 0; background: none !important; overflow: visible; }
.jr-sheet li, .jr-sheet li:nth-child(n + 3), .jr-sheet li:first-child { display: flex; flex-direction: column; align-items: flex-start; justify-items: start; gap: 4px; padding: 0 0 0 24px; border: 0; border-left: 1px solid rgb(15 120 100 / 20%); border-radius: 0; background: none !important; box-shadow: none; }
.jr-sheet li .jr-ico, .jr-sheet li::before, .jr-sheet li::after { display: none; }
.jr-sheet__label { order: -1; margin: 0; font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #12a37f; }
.jr-sheet li b { font-size: clamp(64px, 8vw, 120px); font-weight: 400; line-height: 1; letter-spacing: -.05em; color: var(--jr-forest); }
.jr-sheet li:hover { transform: none; background: none !important; }
@media (max-width: 720px) {
  .jr-sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px !important; }
  .jr-sheet li, .jr-sheet li:nth-child(n + 3), .jr-sheet li:nth-child(odd) { padding: 0 0 0 18px; border-left: 1px solid rgb(15 120 100 / 20%); border-top: 0; }
}


/* flow art: no box, full width like the screens section */
.jr-flow__art { max-width: none; margin: clamp(40px, 5vw, 72px) calc(-1 * var(--gutter)) 0; border-radius: 0; overflow: visible; background: none; box-shadow: none; }
.jr-flow__art img { display: block; width: 100%; height: auto; }

.jr-flow { background: #fff !important; }

.jr-screens { background: #fff !important; }
.jr-screens__art img { -webkit-mask-image: none; mask-image: none; }

/* Job.rocks Today: copy left, laptop right */
.jr-site--split { padding-bottom: clamp(64px, 7vw, 112px); }
.jr-site__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 80px); align-items: center; }
.jr-site__copy { display: flex; flex-direction: column; gap: 20px; }
.jr-site__copy .cs-h2, .jr-site__copy .cs-lead { margin: 0; }
.jr-site__list { display: grid; margin: 12px 0 0; padding: 0; list-style: none; border-top: 1px solid rgb(15 120 100 / 16%); }
.jr-site__list li { padding: 16px 0; border-bottom: 1px solid rgb(15 120 100 / 16%); font-size: 18px; font-weight: 500; color: var(--jr-forest); }
.jr-site--split .jr-site__art { max-width: none; margin: 0; }
@media (max-width: 900px) { .jr-site__grid { grid-template-columns: 1fr; } }

/* Job.rocks Today (2e): features flanking the laptop */
.jr-site--flank { padding-bottom: clamp(64px, 7vw, 112px); }
.jr-site__wrap { display: flex; flex-direction: column; align-items: center; gap: clamp(28px, 3.5vw, 48px); }
.jr-site__title { margin: 0; text-align: center; }
.jr-site__row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 6fr) minmax(0, 2fr); align-items: center; gap: clamp(20px, 2.5vw, 40px); width: 100%; }
.jr-site__col { display: flex; flex-direction: column; gap: 48px; }
.jr-site__f { display: flex; flex-direction: column; gap: 6px; }
.jr-site__f b { font-size: 19px; font-weight: 600; color: #0e2a33; }
.jr-site__f span { font-size: 14px; color: #5b6b68; }
.jr-site__f--l { text-align: right; padding-right: 20px; border-right: 2px solid rgb(15 120 100 / 20%); }
.jr-site__f--r { padding-left: 20px; border-left: 2px solid rgb(15 120 100 / 20%); }
.jr-site__f--l.is-on { border-right-color: #12a37f; }
.jr-site--flank .jr-site__art { max-width: none; margin: 0; }
.jr-site__lead { max-width: 640px; margin: 0; text-align: center; }
@media (max-width: 900px) {
  .jr-site__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .jr-site--flank .jr-site__art { grid-column: 1 / -1; order: -1; }
  .jr-site__col { gap: 28px; }
  .jr-site__f--l { text-align: left; padding: 0 0 0 16px; border-right: 0; border-left: 2px solid rgb(15 120 100 / 20%); }
  .jr-site__f--l.is-on { border-left-color: #12a37f; }
  .jr-site__f--r { padding-left: 16px; }
}
.jr-site--flank .jr-site__art img { -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(180deg, transparent, #000 8%, #000 74%, transparent 100%); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(180deg, transparent, #000 8%, #000 74%, transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect; }

/* 100px rhythm: coloured sections get 100 inside; adjacent white sections split it 50 + 50 */
main .cs-s { padding-top: 100px !important; padding-bottom: 100px !important; }
main .cs-s.jr-flow { padding-bottom: 50px !important; }
main .cs-s.jr-app { padding-top: 50px !important; padding-bottom: 50px !important; }
main .cs-s.jr-site { padding-top: 50px !important; }
@media (max-width: 720px) {
  main .cs-s { padding-top: 64px !important; padding-bottom: 64px !important; }
  main .cs-s.jr-flow { padding-bottom: 32px !important; }
  main .cs-s.jr-app { padding-top: 32px !important; padding-bottom: 32px !important; }
  main .cs-s.jr-site { padding-top: 32px !important; }
}