/* Общие стили сайта Nanagi Sleep. Цвета — системная палитра Apple (HIG). */
:root {
  --bg: #FFFFFF;
  --card: #F2F2F7;
  --ink: #000000;
  --muted: #6C6C70;
  --line: #C6C6C8;
  --line-soft: #E5E5EA;
  --accent: #5E5CE6;        /* systemIndigo — цвет сна */
  --sun: #FF9500;           /* systemOrange */
  --sun-core: #FFCC00;      /* systemYellow */
  --accent-soft: #E9E8FC;
  --berry: #FF2D55;
  --berry-text: #D30F45;
  --leaf: #34C759;
  --focus: #007AFF;
  --material: rgba(255, 255, 255, 0.72);
  --seg-thumb: #FFFFFF;
  --seg-shadow: 0 3px 8px rgba(0,0,0,.12), 0 3px 1px rgba(0,0,0,.04);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000;
    --card: #1C1C1E;
    --ink: #FFFFFF;
    --muted: #AEAEB2;
    --line: #38383A;
    --line-soft: #2C2C2E;
    --accent: #7D7AFF;
    --accent-soft: #23224A;
    --sun: #FF9F0A;
    --sun-core: #FFD60A;
    --berry: #FF375F;
    --berry-text: #FF6482;
    --leaf: #30D158;
    --focus: #0A84FF;
    --material: rgba(22, 22, 23, 0.72);
    --seg-thumb: #636366;
    --seg-shadow: none;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #000000;
  --card: #1C1C1E;
  --ink: #FFFFFF;
  --muted: #AEAEB2;
  --line: #38383A;
  --line-soft: #2C2C2E;
  --accent: #7D7AFF;
  --accent-soft: #23224A;
  --sun: #FF9F0A;
  --sun-core: #FFD60A;
  --berry: #FF375F;
  --berry-text: #FF6482;
  --leaf: #30D158;
  --focus: #0A84FF;
  --material: rgba(22, 22, 23, 0.72);
  --seg-thumb: #636366;
  --seg-shadow: none;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem; line-height: 1.47; letter-spacing: -0.022em;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 8px; }
main { flex: 1; }

.wrap { max-width: 1024px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 600px) { .wrap { padding: 0 16px; } }

/* Панель навигации */
.bar {
  position: sticky; top: 0; z-index: 10;
  background: var(--material);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 0.5px solid var(--line);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .bar { background: var(--bg); } }
.top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 52px; gap: 12px; }
.site-name { justify-self: start; display: flex; align-items: center; gap: 8px; text-decoration: none; min-height: 44px; font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.02em; }
.site-name .sky { width: 22px; height: 22px; }
.site-name .sky svg { width: 22px; height: 22px; }

/* Солнце в светлой теме, луна в тёмной */
.sky { display: inline-grid; position: relative; }
.sky > * { grid-area: 1 / 1; transition: transform .8s cubic-bezier(.34,1.25,.5,1), opacity .5s ease; }
.sky .is-sun  { opacity: 1; transform: none; }
.sky .is-moon { opacity: 0; transform: translateY(35%) rotate(-50deg) scale(.6); }
:root[data-theme="dark"] .sky .is-sun  { opacity: 0; transform: translateY(35%) rotate(90deg) scale(.6); }
:root[data-theme="dark"] .sky .is-moon { opacity: 1; transform: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sky .is-sun  { opacity: 0; transform: translateY(35%) rotate(90deg) scale(.6); }
  :root:not([data-theme="light"]) .sky .is-moon { opacity: 1; transform: none; }
}

.tabs { display: flex; gap: 4px; }
.tabs a {
  text-decoration: none; font-size: 0.9375rem; color: var(--muted);
  min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 980px;
  transition: color .2s ease;
  position: relative;
}
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.tabs a[aria-current="page"]::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; border-radius: 1px; background: var(--ink);
}

/* Сегментированный переключатель темы (тот же, что на странице Berry) */
.seg {
  justify-self: end; display: inline-grid; grid-auto-flow: column; gap: 2px;
  padding: 2px; border-radius: 9px; background: var(--line-soft); position: relative;
  transition: background-color .45s ease;
}
.seg-thumb {
  position: absolute; top: 2px; left: 0; height: calc(100% - 4px); width: 0; border-radius: 7px;
  background: var(--seg-thumb); box-shadow: var(--seg-shadow); pointer-events: none;
  transition: transform .42s cubic-bezier(.34,1.32,.5,1), width .42s cubic-bezier(.34,1.32,.5,1), background-color .45s ease;
}
.seg button {
  font: inherit; font-size: 0.8125rem; font-weight: 500; letter-spacing: -0.01em; color: var(--ink);
  background: transparent; border: 0; border-radius: 7px; cursor: pointer; z-index: 1;
  min-height: 28px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; position: relative;
}
.seg button::after { content: ""; position: absolute; inset: -8px 0; }
.seg svg { width: 14px; height: 14px; flex: none; transition: transform .42s cubic-bezier(.34,1.5,.5,1); }
.seg button[aria-checked="true"] svg { transform: rotate(-20deg) scale(1.12); }
.seg .txt { white-space: nowrap; }
@media (max-width: 760px) {
  .seg .txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .seg button { padding: 0 10px; }
}
@media (max-width: 520px) {
  .top { grid-template-columns: 1fr auto; }
  .tabs { grid-column: 1 / -1; grid-row: 2; justify-content: center; margin-top: -6px; }
  .site-name > span:not(.sky) { display: none; }
}

.theme-fade, .theme-fade *, .theme-fade *::before, .theme-fade *::after {
  transition: background-color .45s ease, color .45s ease, border-color .45s ease, fill .45s ease, stroke .45s ease, box-shadow .45s ease !important;
}
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .5s; animation-timing-function: cubic-bezier(.4,0,.2,1); }

footer { border-top: 0.5px solid var(--line); padding: 20px 0 32px; color: var(--muted); font-size: 0.75rem; }
footer p { margin: 0; }

@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .8s cubic-bezier(.2,.8,.2,1) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Логотип в шапке: чёрный диск днём, светящееся кольцо ночью */
.site-name .logo, .site-name .logo svg { width: 24px; height: 24px; }

footer .wrap { display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between; }
footer a { color: var(--muted); }
footer a:hover { color: var(--ink); }

html { -webkit-tap-highlight-color: transparent; }