/* Skeleton placeholders (see /skeleton.js): grey shapes of the real content with a
   soft shimmer while it loads. Still (no shimmer) for people who ask for less motion. */
:root{--skel-base:#e6e9ee;--skel-hi:#f5f7f9}
.skel{display:block;background-color:var(--skel-base);background-image:linear-gradient(90deg,var(--skel-base) 0,var(--skel-hi) 40%,var(--skel-base) 80%);
  background-size:300% 100%;background-repeat:no-repeat;animation:skel-shimmer 1.4s ease-in-out infinite;border-radius:6px;color:transparent!important;pointer-events:none;user-select:none}
@keyframes skel-shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.skel,.skel-wait select,.skel-wait input,.skel-wait .pickq{animation:none!important;background-image:none!important}}

.skel-line{height:12px;margin:6px 0;border-radius:6px;max-width:100%}
.skel-lines{flex:1;min-width:0;display:block}
.skel-lines .skel-line:first-child{height:15px;margin-top:2px}
.skel-circle{flex:none;width:40px;height:40px;border-radius:50%}
.skel-circle.skel-lg{width:52px;height:52px}
.skel-pill{display:inline-block;width:64px;height:20px;border-radius:999px;vertical-align:middle}
.skel-end{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:0}
.skel-end .skel-line{margin:5px 0}
.skel-title{height:30px;border-radius:8px;margin:4px 0;display:inline-block;vertical-align:middle;max-width:80%}
.skel-text{display:block;width:100%}
.skel-text .skel-line:first-child{height:12px}

/* list rows (dashboard, users, calls) */
.skel-row{display:flex;gap:12px;align-items:center;padding:10px 2px;list-style:none}
.skel-row+.skel-row{border-top:1px solid var(--line,#d9dee4)}
.skel-call{padding:12px 14px}
.clist .skel-row{background:#fff}

/* Scheduled page */
.skel-dayhead{height:12px;margin:0 4px 10px}
.skel-srow{align-items:center}
.skel-srow .stime{display:flex;flex-direction:column;align-items:flex-end}
.skel-chips{display:flex;gap:8px;margin-top:6px}

/* weather chips */
.wday.skel-chip{height:76px;border:none;border-radius:10px;padding:0}

/* company cards */
.skel-card{list-style:none;background:#fff;border:1px solid var(--line,#d9dee4);border-radius:18px;padding:16px}
.skel-card>.skel-line:first-child{height:20px;margin-top:2px}
.skel-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.skel-stat{height:58px;border-radius:12px}

/* jobs */
.jrow.skel-job{pointer-events:none}
.skel-job .jid{display:flex;align-items:center;gap:8px}
.skel-job .jid .skel-line{margin:0}

/* call detail */
.skel-detail{display:block}
.skel-dhead{display:flex;gap:14px;align-items:center;margin:8px 0 16px}
.skel-block{background:#fff;border:1px solid var(--line,#d9dee4);border-radius:16px;padding:14px;margin:0 0 12px}
.skel-block>.skel-line:first-child{height:12px;margin:0 0 12px}
.skel-box{height:44px;border-radius:12px}
.skel-bubble{height:44px;width:72%;border-radius:14px;margin:8px 0}
.skel-bubble.them{margin-left:auto;width:60%}

/* picker options and simple items */
.skel-opt{padding:8px 12px}
.skel-item{display:flex;gap:12px;align-items:center;padding:12px 2px;list-style:none}
.skel-item+.skel-item{border-top:1px solid var(--line,#d9dee4)}
.skel-head{display:block;width:100%}

/* the header bar before the account check answers */
.skel-appbar .appnav{display:flex;gap:8px;align-items:center}
.skel-appbar{--skel-base:rgba(255,255,255,.14);--skel-hi:rgba(255,255,255,.30)}
.skel-appbar .appnav{padding:9px 0}
.skel-appbar .skel-nav{flex:none;width:66px;height:18px;border-radius:999px}
.skel-appbar .skel-user{flex:none;width:36px;height:36px;border-radius:50%}

/* a form control waiting for its options */
.skel-wait select,.skel-wait input,.skel-wait .pickq{color:transparent!important;background-color:var(--skel-base)!important;
  background-image:linear-gradient(90deg,var(--skel-base) 0,var(--skel-hi) 40%,var(--skel-base) 80%)!important;background-size:300% 100%!important;
  background-repeat:no-repeat!important;animation:skel-shimmer 1.4s ease-in-out infinite;border-color:transparent!important;pointer-events:none}
.skel-wait select::placeholder,.skel-wait input::placeholder{color:transparent}

/* Calls: calendar card and agenda */
.skel-cal .calhead{display:flex;align-items:center;gap:10px}
.skel-circle.skel-sm{width:30px;height:30px}
.skel-month{height:18px;margin:0 auto}
.skel-cal .calday{display:grid;place-items:center;height:44px}
.skel-circle.skel-daynum{width:30px;height:30px}
.skel-aday .clist{margin-top:2px}
.skel-dot{width:16px;height:5px;border-radius:3px;margin:0 auto}