/*
 * Sukud design system - app shell parts
 * Context switcher, account menu, install and update chips, connection
 * banner, phone More sheet, tour strip, immersive pages, page transitions
 * and the entrance of page content.
 */

/* ======================================================================
 * Context switcher (level, child, GCE level)
 * ====================================================================== */
.sk-switcher { position: relative; margin: 0 0 14px; }
.sk-switcher__trigger {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 54px;
  padding: 8px 10px 8px 8px;
  border: 1px solid var(--sk-border-subtle);
  border-radius: 16px;
  background: var(--sk-surface);
  color: var(--sk-fg);
  text-align: start;
  cursor: pointer;
  box-shadow: var(--sk-shadow-xs);
  transition: border-color var(--sk-dur-fast), box-shadow var(--sk-dur-base), transform var(--sk-dur-base) var(--sk-ease-spring);
}
[data-theme="dark"] .sk-switcher__trigger { border-color: var(--sk-border); }
.sk-switcher__trigger:hover { border-color: var(--sk-brand-6); box-shadow: var(--sk-shadow-sm); }
.sk-switcher__trigger:active { transform: scale(0.985); }
.sk-switcher__trigger:focus-visible { outline: none; box-shadow: var(--sk-focus-ring); }
.sk-switcher__icon { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--sk-brand-3); color: var(--sk-brand-11); }
.sk-switcher__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.sk-switcher__title { 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-switcher__current { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-size: var(--sk-text-sm); font-weight: var(--sk-weight-semibold); }
.sk-switcher__current, .sk-switcher__subject { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-switcher__subject { font-weight: var(--sk-weight-medium); color: var(--sk-fg-muted); }
.sk-switcher__subject::before { content: '·'; margin-inline-end: 6px; color: var(--sk-fg-subtle); }
.sk-switcher__chevron { display: inline-flex; flex-shrink: 0; color: var(--sk-fg-subtle); }
.sk-switcher__panel.sk-popover { width: 264px; max-height: min(460px, var(--avail, 460px)); padding: 6px; }
.sk-switcher__form { margin: 0; }
.sk-switcher__option { width: 100%; color: var(--sk-fg); text-decoration: none; }
.sk-switcher__option.is-selected { font-weight: var(--sk-weight-semibold); }
.sk-switcher__option .sk-icon:last-child { margin-inline-start: auto; color: var(--sk-brand-11); }
.sk-switcher__subjects { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 6px 8px; }
.sk-switcher__chip {
  --subject: var(--sk-brand-9);
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px 0 10px;
  border-radius: var(--sk-radius-full);
  background: var(--sk-surface-sunken);
  color: var(--sk-fg);
  font-size: var(--sk-text-xs); font-weight: var(--sk-weight-semibold);
  text-decoration: none;
  transition: background-color var(--sk-dur-fast), transform var(--sk-dur-base) var(--sk-ease-spring);
}
.sk-switcher__chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--subject); }
.sk-switcher__chip:hover { background: var(--sk-surface-active); transform: translateY(-1px); }
.sk-switcher__chip.is-selected { background: color-mix(in oklab, var(--subject) 16%, var(--sk-surface)); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--subject) 60%, transparent); }
.sk-switcher--compact { margin: 0; }

/* In the collapsed rail the switcher keeps only its icon. */
@media (min-width: 768px) {
  .sk-switcher__trigger { transition: padding 380ms var(--sk-ease-glide), border-color var(--sk-dur-fast); }
  .sk-switcher :is(.sk-switcher__text, .sk-switcher__chevron) { transition: opacity 220ms var(--sk-ease-out) 140ms; }
  .sk-app.is-rail .sk-switcher :is(.sk-switcher__text, .sk-switcher__chevron) { opacity: 0; pointer-events: none; transition: opacity 120ms var(--sk-ease-in); }
  .sk-app.is-rail .sk-switcher__trigger { padding: 8px; border-color: transparent; box-shadow: none; background: transparent; }
}

/* ======================================================================
 * Account menu (sidebar foot)
 * ====================================================================== */
.sk-account { width: 100%; }
.sk-account .sk-sidebar__user { justify-content: flex-start; }
.sk-account .sk-person { flex: 1 1 auto; min-width: 0; }
.sk-account__chevron { display: inline-flex; color: var(--sk-fg-subtle); flex-shrink: 0; }
@media (min-width: 768px) {
  .sk-account__chevron { transition: opacity 200ms var(--sk-ease-out) 140ms; }
  .sk-app.is-rail .sk-account__chevron { opacity: 0; }
}

/* ======================================================================
 * Install and update chips
 * ====================================================================== */
.sk-app-chip {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 8px 10px 8px 8px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--sk-brand-3), var(--sk-violet-3));
  color: var(--sk-fg);
  text-align: start;
  cursor: pointer;
  animation: sk-rise var(--sk-dur-slow) var(--sk-ease-out);
  transition: transform var(--sk-dur-base) var(--sk-ease-spring), filter var(--sk-dur-fast);
}
.sk-app-chip[hidden] { display: none; }
.sk-app-chip:hover { filter: saturate(1.15); transform: translateY(-1px); }
.sk-app-chip:active { transform: scale(0.98); }
.sk-app-chip:focus-visible { outline: none; box-shadow: var(--sk-focus-ring); }
.sk-app-chip__icon { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--sk-brand-9); color: #fff; box-shadow: 0 4px 10px -4px rgb(var(--sk-brand-rgb) / 0.8); }
.sk-app-chip__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.sk-app-chip__text b { font-size: var(--sk-text-sm); font-weight: var(--sk-weight-semibold); }
.sk-app-chip__text small { font-size: var(--sk-text-2xs); color: var(--sk-fg-muted); }
.sk-update.sk-app-chip { background: linear-gradient(135deg, var(--sk-green-3), var(--sk-teal-3)); }
.sk-update .sk-app-chip__icon { background: var(--sk-green-9); box-shadow: 0 4px 10px -4px rgb(var(--sk-green-rgb) / 0.8); }
@media (min-width: 768px) {
  .sk-app.is-rail .sk-app-chip { padding: 8px; background: transparent; }
  .sk-app.is-rail .sk-app-chip__text { opacity: 0; pointer-events: none; }
}

/* ======================================================================
 * Connection banner
 * ====================================================================== */
.sk-net {
  position: sticky;
  top: calc(var(--sk-topbar-h) + 4px);
  z-index: calc(var(--sk-z-header) - 1);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: fit-content; max-width: calc(100% - var(--sk-gutter) * 2);
  margin: 4px auto 6px;
  padding: 7px 8px 7px 12px;
  border-radius: var(--sk-radius-full);
  background: var(--sk-surface-inverse);
  color: var(--sk-fg-inverse);
  font-size: var(--sk-text-xs); font-weight: var(--sk-weight-medium);
  line-height: 1.35;
  box-shadow: var(--sk-shadow-lg);
  animation: sk-drop var(--sk-dur-slow) var(--sk-ease-spring);
}
.sk-net[hidden] { display: none; }
.sk-net--static { position: static; margin: 0; animation: none; }
.sk-net__icon { display: inline-flex; flex-shrink: 0; }
.sk-net__icon--online { display: none; color: var(--sk-green-7); }
.sk-net__icon--offline { color: var(--sk-amber-7); }
.sk-net[data-state="online"] .sk-net__icon--online { display: inline-flex; }
.sk-net[data-state="online"] .sk-net__icon--offline { display: none; }
.sk-net__text { padding-inline-end: 4px; }
.sk-net__action {
  height: 26px; padding: 0 12px;
  border: 0; border-radius: var(--sk-radius-full);
  background: rgb(255 255 255 / 0.16); color: inherit;
  font: inherit; font-weight: var(--sk-weight-semibold);
  cursor: pointer;
}
.sk-net__action:hover { background: rgb(255 255 255 / 0.26); }
[data-theme="dark"] .sk-net__action { background: rgb(0 0 0 / 0.08); }
@media (max-width: 767.98px) { .sk-net { top: calc(var(--sk-topbar-h) + 2px); } }

/* Things that need the network say so when it is gone. */
[data-net="offline"] [data-sk-needs-net] { opacity: 0.55; pointer-events: none; }

/* ======================================================================
 * App action rows (install, update) for lists
 * ====================================================================== */
.sk-more__row {
  display: flex; align-items: center; gap: 12px;
  min-height: 50px; width: 100%;
  padding: 0 14px;
  border: 0;
  background: transparent;
  color: var(--sk-fg);
  font: inherit; font-size: var(--sk-text-md); font-weight: var(--sk-weight-medium);
  text-align: start; text-decoration: none;
  cursor: pointer;
}
.sk-more__row[hidden] { display: none; }
.sk-more__row + .sk-more__row { box-shadow: inset 0 1px 0 var(--sk-border-subtle); }
.sk-more__row > span { flex: 1 1 auto; }
.sk-more__row > .sk-icon:first-child { color: var(--sk-fg-muted); }
.sk-more__row > .sk-icon:last-child { color: var(--sk-fg-subtle); }
.sk-more__row small { font-size: var(--sk-text-xs); color: var(--sk-fg-subtle); }
.sk-more__row:active { background: var(--sk-surface-active); }
.sk-more__row.is-danger, .sk-more__row.is-danger > .sk-icon:first-child { color: var(--sk-red-11); }
.sk-more__row.sk-install > .sk-icon:first-child { color: var(--sk-brand-11); }
.sk-more__row.sk-update > .sk-icon:first-child { color: var(--sk-green-11); }

.sk-bottomnav__dot:not([hidden]) {
  position: absolute; top: -3px; right: -5px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 99px;
  background: var(--sk-amber-9); color: #2b1a00;
  font-size: 9.5px; font-weight: var(--sk-weight-bold); line-height: 16px; text-align: center;
  box-shadow: 0 0 0 2px var(--sk-surface);
}
.sk-bottomnav button.sk-bottomnav__item { border: 0; background: transparent; font-family: inherit; line-height: inherit; cursor: pointer; }

/* ======================================================================
 * Install steps (iOS)
 * ====================================================================== */
.sk-install-steps { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 0; padding: 0; list-style: none; counter-reset: step; }
.sk-install-steps li { display: flex; align-items: center; gap: 12px; font-size: var(--sk-text-md); }
.sk-install-steps__icon { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--sk-brand-3); color: var(--sk-brand-11); }

/* ======================================================================
 * Tour strip
 * ====================================================================== */
.sk-tour {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 34px; padding: 4px var(--sk-gutter);
  background: var(--sk-surface-inverse); color: var(--sk-fg-inverse);
  font-size: var(--sk-text-xs);
}
.sk-tour__text { display: inline-flex; align-items: center; gap: 7px; }
.sk-tour__text b { font-weight: var(--sk-weight-bold); }
.sk-tour__exit { padding: 3px 12px; border-radius: var(--sk-radius-full); background: rgb(255 255 255 / 0.16); color: inherit; font-weight: var(--sk-weight-semibold); text-decoration: none; }
.sk-tour__exit:hover { background: rgb(255 255 255 / 0.26); }

/* ======================================================================
 * Top bar on phones and immersive pages
 * ====================================================================== */
.sk-topbar__back { display: none; }
@media (max-width: 767.98px) {
  .sk-topbar__back { display: inline-flex; margin-inline-start: -6px; }
  .sk-app.has-bottomnav .sk-app__menu-btn { display: none; }
  .sk-topbar__search.sk-search-trigger { margin-inline-start: auto; }
  /* Sukud AI, Messages, quizzes and the reader take the whole phone screen;
     the page draws its own header with a way back. */
  .sk-app.is-immersive .sk-topbar, .sk-app.is-immersive .sk-bottomnav, .sk-app.is-immersive .sk-tour { display: none; }
  .sk-app.is-immersive .sk-content { padding: 0; max-width: none; }
  /* Below the page's own header, so its title and back button stay visible. */
  .sk-app.is-immersive .sk-net { position: fixed; top: calc(max(8px, env(safe-area-inset-top)) + 52px); left: 50%; transform: translateX(-50%); margin: 0; z-index: var(--sk-z-toast); }
}

/* ======================================================================
 * Page transitions and entrance
 *
 * Navigation between Sukud pages cross-fades through the browser's view
 * transitions; the sidebar, top bar and bottom bar stay put. The new
 * page's first blocks then rise in, a few milliseconds apart. All of it is
 * off under reduced motion, and none of it delays a click.
 * ====================================================================== */
@view-transition { navigation: auto; }
.sk-sidebar { view-transition-name: sk-sidebar; }
.sk-topbar { view-transition-name: sk-topbar; }
.sk-bottomnav { view-transition-name: sk-bottomnav; }
::view-transition-old(root) { animation: sk-vt-out 120ms var(--sk-ease-in) both; }
::view-transition-new(root) { animation: sk-vt-in 220ms var(--sk-ease-out) both; }
::view-transition-group(sk-sidebar), ::view-transition-group(sk-topbar), ::view-transition-group(sk-bottomnav) { animation-duration: 0s; }
@keyframes sk-vt-out { to { opacity: 0; } }
@keyframes sk-vt-in { from { opacity: 0; } }

.sk-content > :is(.sk-page-header, .sk-section, .sk-bento, .sk-card, .sk-stack, .sk-split, .sk-grid, .sk-stats, .sk-tabs, .sk-filters, form, section, article) {
  animation: sk-enter 340ms var(--sk-ease-out) backwards;
}
.sk-content > :nth-child(2) { animation-delay: 40ms; }
.sk-content > :nth-child(3) { animation-delay: 80ms; }
.sk-content > :nth-child(4) { animation-delay: 120ms; }
.sk-content > :nth-child(n+5) { animation-delay: 160ms; }
@keyframes sk-enter { from { opacity: 0; transform: translateY(10px); } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .sk-content > * { animation: none !important; }
}

/* Save offline (ui.offline_button) */
.sk-save-offline { display: inline-flex; }
.sk-save-offline .sk-btn.is-saved { --t-text: var(--sk-green-11); background: var(--sk-green-3); color: var(--sk-green-11); }

/* Filters fetching new results: the page dims a little, the filters stay lively. */
#main[aria-busy="true"] > * { transition: opacity var(--sk-dur-base) var(--sk-ease-out); }
#main[aria-busy="true"] :is(.sk-stats, .sk-list, .sk-papers, .sk-grid, .sk-tabs, .sk-section, .sk-card, .sk-empty, .sk-ai-models) { opacity: 0.55; transition: opacity var(--sk-dur-base) var(--sk-ease-out); }