/* OSIRIS Skyline: the day grid that morphs into a 3D city (see skyline.js).
   Boxes, spacing, type sizes and timings follow the original "Contribution Skyline" (Kedhareswer Naidu, MIT);
   colours, radii and the font come from the Osiris tokens in osiris.css. Dark only. */

.sk{
  --sk-bg:var(--night);--sk-fg:var(--bone);--sk-mute:var(--mist);--sk-line:var(--line);
  --sk-accent:var(--up);--sk-ease:cubic-bezier(.65,0,.35,1);--sk-num:52px;
  position:relative;width:100%;padding:16px;border-radius:var(--r-card);border:1px solid var(--sk-line);
  background:var(--sk-bg);color:var(--sk-fg);font-family:var(--font);font-size:16px;line-height:1.5;
}
@media (min-width:640px){.sk{padding:20px}}

/* ---------- header: title and the 2D / 3D switch ---------- */
.sk__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin-bottom:12px}
.sk__title{margin:0;font-size:15px;font-weight:400;line-height:1.375;min-height:20.6px}
.sk__title b{font-weight:700;font-variant-numeric:tabular-nums}
.sk__ph{display:inline-block;width:15em;max-width:60vw;height:.8em;border-radius:var(--r-pill);background:rgba(238,241,244,.09);vertical-align:-.05em;animation:skPulse 1.6s ease-in-out infinite}

.sk__seg{position:relative;display:inline-flex;padding:2px;border:1px solid var(--sk-line);border-radius:var(--r-pill)}
.sk__thumb{position:absolute;top:2px;bottom:2px;left:2px;width:32px;border-radius:var(--r-pill);background:var(--sk-fg);transition:transform .5s var(--sk-ease)}
.sk__seg[data-view="3d"] .sk__thumb{transform:translateX(100%)}
.sk__seg button{position:relative;z-index:10;display:grid;place-items:center;width:32px;height:28px;padding:0;border:0;border-radius:var(--r-pill);background:transparent;color:var(--sk-mute);cursor:pointer;transition:color .5s}
.sk__seg button[aria-pressed="true"]{color:var(--sk-bg)}
.sk__seg button:disabled{cursor:default;opacity:.5}
.sk__seg svg{width:14px;height:14px;max-width:none}

/* ---------- bot tabs ---------- */
.sk__tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.sk__tab{height:32px;padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--line-strong);font-size:13px;font-weight:700;line-height:1;letter-spacing:-.005em;color:var(--sk-mute);white-space:nowrap;
  transition:background-color var(--d-fast),color var(--d-fast),border-color var(--d-fast);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.sk__tab:hover{color:var(--sk-fg);border-color:rgba(238,241,244,.34)}
.sk__tab[aria-selected="true"]{background:var(--sk-fg);border-color:var(--sk-fg);color:var(--sk-bg)}
.sk__tab--ph{width:96px;border-color:transparent;background:rgba(238,241,244,.07);animation:skPulse 1.6s ease-in-out infinite;pointer-events:none}

/* ---------- card, plot, tooltip ---------- */
.sk__card{position:relative;border:1px solid var(--sk-line);border-radius:16px}
.sk__pad{position:relative;padding:12px 12px 0}
@media (min-width:640px){.sk__pad{padding:16px 16px 0}}
.sk__plot{position:relative;width:100%;height:150px;overflow:hidden;border-radius:10px;outline-offset:4px}
.sk__plot.is-focus{outline:2px solid var(--nile-strong)}
.sk__plot canvas{position:absolute;top:0;left:0;display:block;max-width:none;outline:none;-webkit-tap-highlight-color:transparent}

.sk__tip{pointer-events:none;position:absolute;top:12px;left:12px;z-index:20;white-space:nowrap;padding:6px 10px;border-radius:8px;font-size:12px;line-height:1;
  background:var(--sk-fg);color:var(--sk-bg);box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);opacity:0;transition:opacity .15s}
@media (min-width:640px){.sk__tip{top:16px;left:16px}}
.sk__tip strong{font-weight:700}
.sk__tip .sk__tip-m{opacity:.75}
.sk__tip .sk__tip-2{display:block;margin-top:5px;opacity:.75}
.sk__tip .sk__up{color:#0b7a4b}
.sk__tip .sk__dn{color:#c2243b}
.sk__tip::after{content:"";position:absolute;top:100%;left:var(--arrow,50%);margin-left:-5px;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid var(--sk-fg)}

/* ---------- statistics: corner overlays (3D, wide) and the row below the plot ---------- */
.sk__ov{position:absolute;display:flex;flex-direction:column;gap:20px;pointer-events:none;opacity:0;transition-property:opacity,transform;transition-timing-function:var(--sk-ease)}
.sk__ov--tr{top:4px;right:4px;align-items:flex-end;transform:translateY(-10px)}
.sk__ov--bl{bottom:4px;left:4px;align-items:flex-start;transform:translateY(10px)}
.sk:not(.is-wide) .sk__ov{display:none}

.sk__lab{font-size:13px;line-height:1.25;color:var(--sk-mute)}
.sk__val{font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--sk-fg);transition:color .5s}
.sk__val.is-accent{color:var(--sk-accent)}
.sk__sub{font-size:13px;color:var(--sk-mute)}

.sk__st--end,.sk__st--start{display:grid;grid-template-columns:auto auto;align-items:end;column-gap:8px}
.sk__st--end{justify-content:end}
.sk__st--start{justify-content:start}
.sk__st--end .sk__lab{text-align:right}
.sk__st--start .sk__lab{grid-column:1 / span 2}
.sk__st--end .sk__val,.sk__st--start .sk__val{text-align:right;font-size:var(--sk-num);line-height:.95}
.sk__side{padding-bottom:.15em;line-height:1.25}
.sk__side .sk__unit{font-size:15px}
.sk__side .sk__sub{white-space:nowrap}

.sk__rows{display:grid;grid-template-rows:1fr;opacity:1;transition-property:grid-template-rows,opacity;transition-timing-function:var(--sk-ease)}
.sk__rows-in{min-height:0;overflow:hidden}
.sk__stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:16px 12px 4px}
@media (min-width:640px){.sk__stats{padding-inline:16px}}
@media (min-width:768px){.sk__stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.sk__st--row{min-width:0}
.sk__st--row .sk__line{display:flex;align-items:baseline;gap:6px;margin-top:4px}
.sk__st--row .sk__val{font-size:28px;line-height:1}
.sk__st--row .sk__unit{font-size:14px}
.sk__st--row .sk__sub{margin-top:2px;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- footer: hint and legend ---------- */
.sk__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:12px 12px 12px;font-size:12px;color:var(--sk-mute)}
@media (min-width:640px){.sk__foot{padding-inline:16px}}
.sk__hint{position:relative;display:grid;flex:1 1 11rem}
.sk__hint span{grid-area:1 / 1;transition:opacity .5s}
.sk__legend{display:flex;align-items:center;gap:6px;margin-left:auto}
.sk__legend>span:first-child{margin-right:2px}
.sk__legend>span:last-child{margin-left:2px}
.sk__sw{width:11px;height:11px;padding:0;border:0;border-radius:2px;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(127,127,127,.12);transition:background-color .5s,transform .5s}
.sk__sw:hover{transform:scale(1.25)}
.sk__sw:focus-visible{outline-offset:1px;border-radius:2px}
.sk.is-idle .sk__foot{visibility:hidden}

/* ---------- loading skeleton, empty and error panels ---------- */
.sk__skel{position:relative;width:100%;padding-top:24px}
.sk__skel-grid{display:grid;grid-template-columns:repeat(53,minmax(0,1fr));grid-template-rows:repeat(7,auto);grid-auto-flow:column;gap:3px;aspect-ratio:53 / 7;margin-left:0}
@media (min-width:520px){.sk__skel-grid{margin-left:30px}}
.sk__skel-grid i{display:block;border-radius:3px;background:rgba(238,241,244,.1);animation:skPulse 1.6s ease-in-out infinite;animation-delay:calc(var(--c) * 28ms)}
@keyframes skPulse{0%,100%{opacity:.35}50%{opacity:1}}

.sk__msg{display:grid;justify-items:center;align-content:center;gap:6px;min-height:150px;padding:12px 12px 16px;text-align:center}
.sk__msg-ico{display:grid;place-items:center;width:44px;height:44px;margin-bottom:6px;border-radius:50%;background:rgba(238,241,244,.06);color:var(--sk-mute);font-size:20px}
.sk__msg--error .sk__msg-ico{background:rgba(255,84,102,.12);color:var(--down)}
.sk__msg b{font-size:15px;font-weight:700}
.sk__msg p{max-width:26em;font-size:13px;line-height:1.45;color:var(--sk-mute)}
.sk__msg .btn{margin-top:8px}
.sk__msg[hidden],.sk__skel[hidden],.sk__plot[hidden]{display:none}