/*
 * Sukud design system - illustrations (ui.illustration) and the status and
 * offline pages that use them.
 */

.sk-ill { display: block; width: 100%; max-width: 220px; height: auto; overflow: visible; }
.sk-ill__ground { fill: var(--sk-surface-sunken); }
.sk-ill__halo { fill: var(--sk-brand-2); }
[data-theme="dark"] .sk-ill__halo { fill: var(--sk-brand-3); }
.sk-ill__halo-inner { fill: var(--sk-brand-2); }
.sk-ill__paper, .sk-ill__ring { fill: var(--sk-surface); stroke: var(--sk-brand-12); stroke-width: 2.2; stroke-linejoin: round; }
[data-theme="dark"] .sk-ill__paper, [data-theme="dark"] .sk-ill__ring { fill: var(--sk-surface-raised); stroke: var(--sk-brand-11); }
.sk-ill__line { fill: none; stroke: var(--sk-brand-12); stroke-width: 2.2; }
[data-theme="dark"] .sk-ill__line { stroke: var(--sk-brand-11); }
.sk-ill__thin { stroke-width: 1.8; stroke-linecap: round; opacity: 0.45; }
.sk-ill__thick { stroke-width: 6; }
.sk-ill__dot { fill: var(--sk-brand-7); }
.sk-ill__accent { fill: var(--sk-brand-9); }
.sk-ill__accent-amber { fill: var(--sk-amber-9); }
.sk-ill__accent-teal { fill: var(--sk-teal-9); }
.sk-ill__accent-green { fill: var(--sk-green-9); }
.sk-ill__accent-red { fill: var(--sk-red-9); }
.sk-ill__check { fill: none; stroke: var(--sk-green-9); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: sk-ill-draw 700ms var(--sk-ease-out) 300ms forwards; }
.sk-ill__check-white { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sk-ill__route { fill: none; stroke: var(--sk-amber-9); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 6; }
.sk-ill__tilt-l { transform: rotate(-8deg); transform-origin: 66px 62px; }

.sk-ill__float { animation: sk-ill-float 5s var(--sk-ease-in-out) infinite; transform-origin: center; }
.sk-ill__blink { animation: sk-ill-twinkle 2.6s var(--sk-ease-in-out) infinite; transform-box: fill-box; transform-origin: center; }
.sk-ill__late { animation-delay: -1.3s; }
.sk-ill__sand { animation: sk-ill-sand 3s var(--sk-ease-in-out) infinite; transform-box: fill-box; transform-origin: bottom; }
.sk-ill__drop { animation: sk-ill-drop 1.8s var(--sk-ease-in-out) infinite; }
@keyframes sk-ill-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes sk-ill-twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.7); } }
@keyframes sk-ill-sand { 0%, 100% { transform: scaleY(0.75); } 50% { transform: scaleY(1); } }
@keyframes sk-ill-drop { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(3px); } }
@keyframes sk-ill-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .sk-ill * { animation: none !important; } .sk-ill__check { stroke-dashoffset: 0; } }

/* ======================================================================
 * Status pages (ui/layouts/status.html): offline, errors, maintenance,
 * applications in review
 * ====================================================================== */
.sk-status { min-height: 100dvh; display: grid; place-items: center; padding: 24px var(--sk-gutter, 16px) calc(24px + var(--sk-safe-bottom, 0px)); background: var(--sk-canvas); }
.sk-status__card { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; max-width: 460px; text-align: center; animation: sk-rise var(--sk-dur-slower) var(--sk-ease-out); }
.sk-status__brand { margin-bottom: 4px; }
.sk-status__art { max-width: 190px; }
.sk-status__copy h1 { font-family: var(--sk-font-display); font-size: var(--sk-display-sm); font-weight: var(--sk-weight-bold); letter-spacing: var(--sk-tracking-display); line-height: 1.15; text-wrap: balance; }
.sk-status__copy p { margin-top: 8px; color: var(--sk-fg-muted); text-wrap: pretty; }
.sk-status__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.sk-status__panel { width: 100%; margin-top: 4px; text-align: start; }
.sk-status__panel h2 { padding: 0 4px 8px; font-size: var(--sk-text-2xs); font-weight: var(--sk-weight-bold); letter-spacing: var(--sk-tracking-caps); text-transform: uppercase; color: var(--sk-fg-subtle); }
.sk-status__list { margin: 0; padding: 0; list-style: none; border-radius: 18px; background: var(--sk-surface); border: 1px solid var(--sk-border-subtle); overflow: hidden; }
.sk-status__list li + li { box-shadow: inset 0 1px 0 var(--sk-border-subtle); }
.sk-status__list a, .sk-status__list .sk-status__row { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; color: var(--sk-fg); text-decoration: none; }
.sk-status__list a:hover { background: var(--sk-surface-hover); }
.sk-status__kind { flex-shrink: 0; min-width: 44px; padding: 2px 8px; border-radius: var(--sk-radius-full); background: var(--sk-brand-3); color: var(--sk-brand-11); font-size: 10px; font-weight: var(--sk-weight-bold); text-align: center; }
.sk-status__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--sk-text-sm); font-weight: var(--sk-weight-medium); }
.sk-status__list a > .sk-icon { color: var(--sk-fg-subtle); }
.sk-status__row-label { flex: 1 1 auto; font-size: var(--sk-text-sm); color: var(--sk-fg-muted); }
.sk-status__row-value { font-size: var(--sk-text-sm); font-weight: var(--sk-weight-semibold); text-align: end; overflow-wrap: anywhere; }
.sk-status__steps { margin: 0; padding: 14px 16px 14px 34px; list-style: decimal; border-radius: 18px; background: var(--sk-surface-sunken); font-size: var(--sk-text-sm); color: var(--sk-fg-muted); line-height: 1.55; }
.sk-status__steps li + li { margin-top: 6px; }
.sk-status__all { display: inline-block; margin: 10px 4px 0; font-size: var(--sk-text-sm); font-weight: var(--sk-weight-semibold); color: var(--sk-brand-11); }
.sk-status__note { font-size: var(--sk-text-sm); color: var(--sk-fg-muted); }
.sk-status__code { font-family: var(--sk-font-mono); font-size: var(--sk-text-xs); padding: 2px 6px; border-radius: 6px; background: var(--sk-surface-sunken); }

/* ======================================================================
 * Offline and storage page
 * ====================================================================== */
.sk-storage__meter { display: flex; height: 14px; border-radius: 99px; background: var(--sk-surface-sunken); overflow: hidden; }
.sk-storage__meter i { display: block; height: 100%; transition: width 600ms var(--sk-ease-glide); }
.sk-storage__meter i + i { box-shadow: inset 2px 0 0 var(--sk-surface); }
.sk-storage__legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; font-size: var(--sk-text-xs); color: var(--sk-fg-muted); }
.sk-storage__legend span { display: inline-flex; align-items: center; gap: 6px; }
.sk-storage__legend i { width: 9px; height: 9px; border-radius: 50%; }
.sk-storage__legend b { color: var(--sk-fg); font-variant-numeric: tabular-nums; }
.sk-storage__big { font-family: var(--sk-font-display); font-size: var(--sk-text-2xl); font-weight: var(--sk-weight-black); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.sk-storage__big small { font-size: var(--sk-text-sm); font-weight: var(--sk-weight-semibold); color: var(--sk-fg-muted); letter-spacing: 0; }
.sk-storage__row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 4px; }
.sk-storage__row + .sk-storage__row { box-shadow: inset 0 1px 0 var(--sk-border-subtle); }
.sk-storage__row-icon { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--t-soft); color: var(--t-text); }
.sk-storage__row-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.sk-storage__row-title { font-size: var(--sk-text-sm); font-weight: var(--sk-weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-storage__row-meta { font-size: var(--sk-text-xs); color: var(--sk-fg-subtle); }
.sk-storage__app { display: flex; align-items: center; gap: 16px; }
.sk-storage__app .sk-ill { max-width: 110px; flex-shrink: 0; }