/* ==========================================================================
   People overview — Self-service devices showing the employee portal.
   people/overview.html only. Loaded after record-self-service.css.

   Everything inside the devices is sized in em, and 1em = 1% of the device
   area's width (container query units), so the laptop and the phone scale as
   pictures at any browser width or zoom. The phone has a fixed aspect ratio
   and clips its content, so it can never grow taller than the scene.
   ========================================================================== */
.sp-devices { container-type: inline-size; aspect-ratio: 1.42; min-height: 0; height: auto; padding-top: 0; }
.sp-devices * { box-sizing: border-box; }
.sp-devices svg { display: block; }

/* --- Laptop -------------------------------------------------------------- */
.sp-devices .self-laptop { width: 84%; left: 0; top: 3%; }
.sp-screen { display: grid; grid-template-columns: 9.5% 1fr; aspect-ratio: 1.6; border-width: 1.1em 1.1em 1.4em; border-radius: 2em 2em .8em .8em; background: #f4f6fb; font-size: 1em; }
.sp-screen .sp-rail { display: flex; flex-direction: column; align-items: center; gap: 1.6em; padding: 1.6em 0; background: #0f1a33; border: 0; }
.sp-rail img { width: 3.2em; height: 3.2em; margin-bottom: .4em; }
.sp-rail-i { display: grid; justify-items: center; gap: .45em; font-size: .78em; font-weight: 600; color: #a9b6d6; }
.sp-rail-i svg { width: 2.1em; height: 2.1em; color: #6f9bff; }
.sp-rail-i.is-on { color: #fff; }
.sp-rail-i.is-on svg { color: #fff; }
.sp-main { min-width: 0; padding: 1.2em 1.8em 1.6em; display: flex; flex-direction: column; gap: 1.1em; overflow: hidden; }
.sp-top { display: flex; align-items: center; gap: 1em; padding-bottom: .9em; border-bottom: 1px solid #e6eaf3; }
.sp-crumb { font-size: 1.15em; color: #66708a; }
.sp-crumb i { font-style: normal; margin: 0 .3em; }
.sp-crumb b { color: #0b1533; }
.sp-plan { margin-left: auto; padding: .35em .9em; border-radius: 99em; font-size: .9em; font-weight: 700; color: #15803d; background: #dcfce7; }
.sp-tool svg { width: 1.7em; height: 1.7em; color: #4b5874; }
.sp-me { display: flex; align-items: center; gap: .6em; }
.sp-me > b, .sp-av { display: grid; place-items: center; width: 2.8em; height: 2.8em; border-radius: 50%; font-size: .9em; color: #c0264d; background: #ffe4ea; border: 2px solid #ffb8c7; }
.sp-me strong { display: block; font-size: 1.05em; color: #0b1533; }
.sp-me small { display: block; font-size: .78em; letter-spacing: .08em; color: #66708a; }
.sp-tabs { display: flex; align-items: center; gap: 1.6em; font-size: 1.05em; color: #56617c; }
.sp-tabs > span { display: inline-flex; align-items: center; gap: .45em; padding: .45em .7em; border-radius: .7em; white-space: nowrap; }
.sp-tabs svg { width: 1.3em; height: 1.3em; }
.sp-tabs .is-on { color: #0b1533; font-weight: 700; background: #e9f0ff; }
.sp-apply { margin-left: auto; color: #fff; font-weight: 600; background: #2f6bed; }

.sp-greet { display: grid; grid-template-columns: 1fr auto; gap: 1.6em; padding: 1.6em 1.8em; border-radius: 1.2em; border: 1px solid #e4e9f4;
  background: radial-gradient(60% 120% at 90% 50%, #ece6ff, transparent 70%), #fff; }
.sp-cap { display: inline-flex; align-items: center; gap: .5em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #3d4766; }
.sp-cap svg { width: 1.3em; height: 1.3em; }
.sp-greet h4 { margin: .5em 0 0; font-size: 2.2em; font-weight: 750; letter-spacing: -.02em; color: #0b1533; line-height: 1.15; }
.sp-wave { display: inline-block; transform-origin: 70% 80%; animation: sp-wave 2.6s ease-in-out 1s infinite; }
@keyframes sp-wave { 0%, 60%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(16deg); } 20%, 40% { transform: rotate(-8deg); } }
.sp-date { display: flex; align-items: center; gap: .5em; margin: .6em 0 0; font-size: 1.05em; color: #56617c; }
.sp-date svg { width: 1.3em; height: 1.3em; color: #2f6bed; }
.sp-greet-l > p:last-child { margin: .9em 0 0; font-size: 1.1em; color: #2b3450; }
.sp-today { padding-left: 1.6em; border-left: 1px solid #e4e9f4; }
.sp-today ul { display: grid; gap: .8em; margin: .9em 0 0; padding: 0; list-style: none; }
.sp-today li { display: flex; align-items: center; gap: .6em; font-size: 1.05em; color: #1f2945; white-space: nowrap; }
.sp-dot { width: .7em; height: .7em; border-radius: 50%; flex-shrink: 0; background: #9aa3b8; }
.sp-dot--green { background: #22c55e; } .sp-dot--violet { background: #8b5cf6; }

.sp-stats { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1em; }
.sp-stats::after {
  content: '';
  position: absolute;
  top: calc(100% + 1.1em);
  left: 0;
  width: 100%;
  height: 40em;
  border-radius: 1.1em;
  background: url('/assets/laptop.jpg') center top / 100% auto no-repeat;
  pointer-events: none;
}
.sp-stat { padding: 1.2em 1.2em 1em; border-radius: 1.1em; background: #fff; border: 1px solid #e4e9f4; }
.sp-stat-h { display: flex; align-items: center; gap: .6em; font-size: 1em; color: #2b3450; white-space: nowrap; }
.sp-ico { display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: .7em; flex-shrink: 0; }
.sp-ico svg { width: 1.4em; height: 1.4em; }
.sp-ico--green { color: #16a34a; background: #e3f8ec; } .sp-ico--violet { color: #7c3aed; background: #efe7ff; } .sp-ico--grey { color: #4b5874; background: #eef1f7; }
.sp-stat-b { display: flex; align-items: center; justify-content: space-between; gap: .6em; margin-top: .9em; }
.sp-stat-b strong { display: block; font-size: 2.6em; font-weight: 800; line-height: 1; color: #0b1533; }
.sp-stat-b small { display: block; margin-top: .4em; font-size: .82em; color: #66708a; }
.sp-ring { position: relative; width: 4.4em; height: 4.4em; flex-shrink: 0; }
.sp-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sp-ring circle { fill: none; stroke-width: 3.4; stroke: #e9edf5; }
.sp-ring circle + circle { stroke-linecap: round; stroke-dasharray: var(--v) 100; }
.sp-ring.is-green circle + circle { stroke: #16a34a; } .sp-ring.is-violet circle + circle { stroke: #8b5cf6; }
.sp-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: .9em; color: #0b1533; }
.sp-stat-f { display: flex; align-items: center; gap: .5em; margin-top: .9em; padding-top: .7em; border-top: 1px solid #eef1f7; font-size: .85em; color: #4b5874; white-space: nowrap; }

/* --- Phone ---------------------------------------------------------------- */
.sp-devices .self-phone.sp-phone { right: 0; top: 13%; width: 25%; aspect-ratio: 9 / 19; padding: 0; overflow: hidden; display: flex; flex-direction: column;
  border-width: .9em; border-radius: 3.6em; background: #f4f6fb; font-size: 1cqi; }
.sp-phone .self-phone-camera { z-index: 3; }
.sp-ph { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 1em; padding: 1.4em 1.3em 1.2em; overflow: hidden; font-size: .74em; }
.sp-phone .sp-ph {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: #f4f6fb url('/assets/phone.jpg') center top / cover no-repeat;
  font-size: 0;
}
.sp-phone .sp-ph > * { display: none !important; }
.sp-status { display: flex; justify-content: space-between; font-size: 1.1em; color: #0b1533; }
.sp-ph-bar { display: flex; align-items: center; gap: .9em; }
.sp-burger { display: grid; gap: .32em; padding: .55em; border-radius: .6em; background: #fff; border: 1px solid #e4e9f4; }
.sp-burger i { display: block; width: 1.6em; height: .22em; border-radius: 1em; background: #0b1533; }
.sp-ph-bar img { height: 2.2em; width: auto; }
.sp-ph-bar .sp-av { margin-left: auto; font-size: 1em; }
.sp-ph-crumb { font-size: 1.1em; color: #66708a; }
.sp-ph-crumb i { font-style: normal; margin: 0 .3em; }
.sp-ph-crumb b { color: #0b1533; }
.sp-phone .sp-greet { grid-template-columns: 1fr; padding: 1.3em 1.3em; }
.sp-phone .sp-greet h4 { font-size: 1.8em; }
.sp-phone .sp-greet-l > p:last-child { font-size: 1em; }
.sp-ph-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .8em; }
.sp-phone .sp-stat { padding: 1em; }
.sp-phone .sp-stat-h { font-size: .9em; white-space: normal; line-height: 1.2; }
.sp-phone .sp-ico { width: 2.2em; height: 2.2em; }
.sp-phone .sp-stat-b strong { font-size: 2.3em; }
.sp-phone .sp-stat-b small, .sp-phone .sp-stat-f, .sp-phone .sp-ring { display: none; }
.sp-phone .sp-today { padding: 1.1em 1.3em; border: 1px solid #e4e9f4; border-radius: 1.1em; background: #fff; }
.sp-phone .sp-today li { font-size: 1em; white-space: normal; }
.sp-ph-cta { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: .5em; padding: 1em; border-radius: 1em; font-size: 1.15em; font-weight: 600; color: #fff; background: #2f6bed; }
.sp-ph-cta svg { width: 1.3em; height: 1.3em; }
.sp-phone .self-phone-home { flex-shrink: 0; width: 34%; height: .45em; margin: 0 auto .8em; border-radius: 1em; background: #0b1533; }

/* Small screens: phone alone, centred and larger. */
@media (max-width: 599px) {
  .sp-devices { aspect-ratio: auto; height: auto; }
  .sp-devices .self-laptop { display: none; }
  .sp-devices .self-phone.sp-phone { position: relative; right: auto; top: auto; width: 62%; margin: 0 auto; font-size: 2.4cqi; }
}
@media (prefers-reduced-motion: reduce) { .sp-wave { animation: none; } }

/* cqi in the container's own font-size would resolve against an ancestor, so set the unit on its children. */
.sp-devices > .self-laptop, .sp-devices > .self-phone { font-size: 1cqi; }
@media (max-width: 599px) { .sp-devices > .self-phone.sp-phone { font-size: 2.4cqi; } }