/*
 * YAL shell — Apple website clone theme
 * Design language from iamreiyn/apple-website-clone (MIT)
 * https://github.com/iamreiyn/apple-website-clone
 */

html[data-yal-template="apple-clone"]:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

html[data-yal-template="apple-clone"]:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) body.yal-has-shell,
html[data-yal-template="apple-clone"]:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) body:has(.x-shell) {
  background: var(--yal-skin-bg, #000);
  color: var(--yal-skin-text, #f5f5f7);
}

/* Frosted top bar — clone nav */
html[data-yal-template="apple-clone"]:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) body.yal-has-shell .x-center-head {
  background: var(--yal-skin-nav-bg, rgba(22, 22, 22, 0.8)) !important;
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  backdrop-filter: blur(10px) saturate(180%);
  border-bottom: 1px solid var(--yal-skin-border) !important;
}

html[data-yal-template="apple-clone"]:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) body.yal-has-shell .x-center-head > h3,
html[data-yal-template="apple-clone"]:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) body.yal-has-shell .x-home-tab {
  color: var(--yal-skin-muted, #d3d3d3) !important;
  -webkit-text-fill-color: unset !important;
  background: none !important;
  animation: none !important;
  filter: none !important;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
}

html[data-yal-template="apple-clone"]:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) body.yal-has-shell .x-home-tab.active {
  color: var(--yal-skin-text, #f5f5f7) !important;
}

html[data-yal-template="apple-clone"]:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) body.yal-has-shell .x-home-tab::after {
  background: var(--yal-skin-accent, #3485e2) !important;
  animation: none !important;
}

/* Sidebar — clone nav links */
html[data-yal-template="apple-clone"]:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) body.yal-has-shell .x-left {
  background: var(--yal-skin-nav-bg, rgba(22, 22, 22, 0.8)) !important;
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  backdrop-filter: blur(10px) saturate(180%);
  border-right: 1px solid var(--yal-skin-border) !important;
}

html[data-yal-template="apple-clone"]:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) body.yal-has-shell .x-left .x-nav-btn {
  color: var(--yal-skin-muted, #d3d3d3) !important;
  font-size: 0.82rem;
  font-weight: 400;
  border-radius: 8px;
  background: transparent !important;
  box-shadow: none !important;
  animation: none !important;
}

html[data-yal-template="apple-clone"]:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) body.yal-has-shell .x-left .x-nav-btn:hover {
  background: var(--yal-skin-nav-hover) !important;
  color: var(--yal-skin-text) !important;
  transform: none !important;
}

html[data-yal-template="apple-clone"]:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) body.yal-has-shell .x-left .x-nav-btn.active {
  background: var(--yal-skin-nav-active) !important;
  color: var(--yal-skin-text) !important;
}

html[data-yal-template="apple-clone"]:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) body.yal-has-shell .x-left::after {
  display: none !important;
}

/* Feed column */
html[data-yal-template="apple-clone"]:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) body.yal-has-shell .x-center {
  background: var(--yal-skin-bg) !important;
  border-color: var(--yal-skin-border) !important;
}

html[data-yal-template="apple-clone"]:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) body.yal-has-shell .x-center::before,
html[data-yal-template="apple-clone"]:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) body.yal-has-shell .x-center::after {
  display: none !important;
}

html[data-yal-template="apple-clone"]:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) body.yal-has-shell .x-post {
  background: var(--yal-skin-panel-solid, var(--yal-skin-panel)) !important;
  border-color: var(--yal-skin-border) !important;
  box-shadow: none !important;
}

html[data-yal-template="apple-clone"]:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) body.yal-has-shell form.x-compose {
  background: var(--yal-skin-panel) !important;
  border-color: var(--yal-skin-border) !important;
  border-radius: 12px;
}

/* Links & buttons — clone blue */
html[data-yal-template="apple-clone"]:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-shell a:not(.x-user-link-btn) {
  color: var(--yal-skin-accent, #3485e2);
}

html[data-yal-template="apple-clone"]:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-post-btn,
html[data-yal-template="apple-clone"]:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-center form.x-compose .x-compose-actions-icons > button[type="submit"],
html[data-yal-template="apple-clone"]:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) body.yal-has-shell #yal-fab {
  background: var(--yal-skin-accent, #3485e2) !important;
  background-image: none !important;
  color: var(--yal-skin-accent-fg, #fff) !important;
  -webkit-text-fill-color: var(--yal-skin-accent-fg, #fff) !important;
  border: 0 !important;
  box-shadow: var(--yal-skin-btn-shadow) !important;
  animation: none !important;
  text-shadow: none !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html[data-yal-template="apple-clone"]:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-post-btn::before,
html[data-yal-template="apple-clone"]:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-post-btn::after,
html[data-yal-template="apple-clone"]:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-center form.x-compose .x-compose-actions-icons > button[type="submit"]::before,
html[data-yal-template="apple-clone"]:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-center form.x-compose .x-compose-actions-icons > button[type="submit"]::after {
  display: none !important;
}

html[data-yal-template="apple-clone"]:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-shell input,
html[data-yal-template="apple-clone"]:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-shell textarea {
  background: var(--yal-skin-input-bg) !important;
  border-color: var(--yal-skin-border) !important;
  color: var(--yal-skin-text) !important;
  border-radius: 10px;
}

html[data-yal-template="apple-clone"]:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-shell input:focus,
html[data-yal-template="apple-clone"]:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-shell textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--yal-skin-focus-ring) !important;
}

/* Info-bar strip (promo) on home */
html[data-yal-template="apple-clone"]:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .yal-show-posts-bar {
  background: var(--yal-skin-surface) !important;
  color: var(--yal-skin-text) !important;
  text-shadow: none !important;
  font-size: 0.88rem;
  font-weight: 400;
}

/* Mobile bottom nav */
html[data-yal-template="apple-clone"]:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) body.yal-has-shell #yal-mnav {
  background: var(--yal-skin-nav-bg, rgba(22, 22, 22, 0.8)) !important;
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  backdrop-filter: blur(10px) saturate(180%);
  border-top: 1px solid var(--yal-skin-border) !important;
}

html[data-yal-template="apple-clone"]:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .yal-mnav-btn {
  color: var(--yal-skin-muted) !important;
}

html[data-yal-template="apple-clone"]:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .yal-mnav-btn.active {
  color: var(--yal-skin-accent) !important;
}

/* Right panel / footer tone */
html[data-yal-template="apple-clone"]:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) body.yal-has-shell .x-right > .x-panel {
  background: var(--yal-skin-panel) !important;
  border-color: var(--yal-skin-border) !important;
}

html[data-yal-template="apple-clone"][data-yal-theme="light"]:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .yal-pref-panel {
  background: var(--yal-skin-bg);
}

@media (prefers-reduced-motion: reduce) {
  html[data-yal-template="apple-clone"] * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}