/*
 * Editorial refinement layer
 * Scope: typography, spacing hierarchy, and animation rhythm only.
 */
:root{
  --font-editorial:"Songti SC","STSong","Noto Serif SC","Source Han Serif SC",serif;
  --font-interface:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;

  --text-display:clamp(42px,7vw,52px);
  --text-page-title:clamp(30px,4.8vw,40px);
  --text-section-title:clamp(24px,4vw,32px);
  --text-body:15px;
  --text-meta:13px;
  --text-caption:13px;
  --text-button:17px;

  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:40px;
  --space-8:48px;
  --space-9:64px;

  --ink-heading:rgba(18,43,61,.88);
  --ink-body:rgba(27,58,76,.72);
  --ink-meta:rgba(35,70,88,.62);
  --ink-placeholder:rgba(42,82,103,.42);

  --ease-standard:cubic-bezier(.22,1,.36,1);
  --ease-gentle:cubic-bezier(.33,1,.68,1);
  --ease-exit:cubic-bezier(.4,0,1,1);
  --duration-press:140ms;
  --duration-hover:220ms;
  --duration-modal:420ms;
}

body,button,input,textarea{
  font-family:var(--font-interface);
  font-weight:400;
}
body{
  font-size:var(--text-body);
  line-height:1.7;
}
h1,.page-head span,form h2,#celebrate h2,#empty{
  font-family:var(--font-editorial);
  font-weight:400;
}
h1{
  margin:var(--space-1) 0 0;
  font-size:var(--text-display);
  line-height:1.05;
  letter-spacing:-.04em;
  color:var(--ink-heading);
}
header small{
  font-family:var(--font-interface);
  font-size:var(--text-meta);
  line-height:1.5;
  letter-spacing:.12em;
  color:var(--ink-meta);
  opacity:1;
}
.page-head span{
  font-size:var(--text-section-title);
  line-height:1.35;
  letter-spacing:.02em;
  color:var(--ink-heading);
}
.page-head strong{
  font:400 var(--text-meta)/1.5 var(--font-interface);
  letter-spacing:.12em;
  color:var(--ink-meta);
}
.page-head i,
footer{
  font:400 var(--text-caption)/1.6 var(--font-interface);
  letter-spacing:0;
  color:var(--ink-meta);
  opacity:1;
}
.pill{
  font:500 16px/1 var(--font-interface);
  letter-spacing:-.01em;
}
.day-number{
  font-family:"SF Pro Display","Helvetica Neue","PingFang SC",sans-serif;
  font-size:16px;
  font-weight:400;
  font-variant-numeric:tabular-nums;
}
.day-cell.done .day-number{
  font-size:22px;
  font-weight:600;
}
.primary{
  font:500 var(--text-button)/1.25 var(--font-interface);
  letter-spacing:.01em;
}
input,textarea{
  font:400 16px/1.75 var(--font-interface);
}
input::placeholder,textarea::placeholder{color:var(--ink-placeholder)}

.app{
  padding:28px var(--space-5) var(--space-4);
  gap:var(--space-4);
}
header{
  padding:var(--space-1) var(--space-1) var(--space-2);
}
header::before{
  inset:calc(var(--space-3) * -1) calc(var(--space-4) * -1);
  opacity:.72;
}
nav{
  gap:var(--space-3);
  padding:14px 18px;
  min-height:72px;
}
#habits{
  gap:var(--space-3);
  padding:var(--space-1) var(--space-2);
}
.pill{
  flex:0 0 auto;
  height:44px;
  padding:0 20px;
}
.plus{
  flex:0 0 auto;
  margin-left:var(--space-1);
}
#sky{
  padding:var(--space-5) var(--space-4) var(--space-4);
}
.page-head{
  height:104px;
}
.page-head strong{
  margin:var(--space-2) 0;
}
.page-head i{
  display:block;
  margin-top:var(--space-2);
}
.calendar{
  height:calc(100% - 106px);
  min-height:0;
  grid-template-columns:repeat(7,minmax(0,1fr));
  grid-template-rows:repeat(6,minmax(0,1fr));
}
.day-cell{
  width:100%;
  height:100%;
  min-height:0;
}
footer{padding:0 var(--space-1)}

dialog form{padding:var(--space-7)}
form small{
  display:block;
  font:400 var(--text-meta)/1.5 var(--font-interface);
  letter-spacing:.12em;
  opacity:1;
}
form h2{
  font:400 var(--text-page-title)/1.3 var(--font-editorial);
  letter-spacing:-.025em;
}
#noteModal form{padding:var(--space-7)}
#noteModal small{margin-bottom:var(--space-3)}
#noteModal h2{margin:0 0 26px}
#noteModal label{
  margin:0 0 28px;
  font:400 var(--text-caption)/1.6 var(--font-interface);
  color:color-mix(in srgb,var(--bubble-dark) 58%,var(--ink-body));
}
#noteModal textarea{
  margin-top:14px;
  min-height:152px;
  padding:20px;
  font-size:16px;
  line-height:1.75;
}

button,.pill,.round,.plus,.primary,.dot{
  transition:
    transform var(--duration-hover) var(--ease-standard),
    opacity var(--duration-hover) var(--ease-standard),
    background-color var(--duration-hover) var(--ease-standard),
    border-color var(--duration-hover) var(--ease-standard);
}
button:active,.pill:active,.round:active,.plus:active,.primary:active{
  transform:scale(.985);
  transition-duration:var(--duration-press);
}
.bubble-visual{
  will-change:transform,border-radius;
  animation-duration:8.3s;
  animation-timing-function:var(--ease-gentle);
}
.light-soft{animation-duration:9.7s}
.light-bright{animation-duration:7.9s}
.light-edge{animation-duration:11.3s}

dialog[open]{
  animation:diaryModalIn var(--duration-modal) var(--ease-standard) both;
}
dialog[open]::backdrop{
  animation:diaryBackdropIn 300ms var(--ease-gentle) both;
}
dialog[open] form{
  animation:diaryContentIn 380ms 40ms var(--ease-standard) both;
}
@keyframes diaryModalIn{
  from{opacity:0;transform:translateY(12px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes diaryBackdropIn{
  from{opacity:0}
  to{opacity:1}
}
@keyframes diaryContentIn{
  from{opacity:.2;transform:translateY(4px)}
  to{opacity:1;transform:translateY(0)}
}

@media(max-width:520px){
  .app{
    padding:
      clamp(var(--space-5),4vh,var(--space-6))
      var(--space-5)
      var(--space-4);
    gap:var(--space-4);
  }
  nav{padding:var(--space-3) var(--space-4)}
  #sky{padding:var(--space-6) var(--space-3) var(--space-4)}
  dialog form,#noteModal form{padding:28px}
}
@media(max-height:680px){
  .app{padding-top:var(--space-4);gap:var(--space-3)}
  header{padding-bottom:var(--space-2)}
  h1{font-size:40px}
  nav{padding:10px var(--space-4)}
  #sky{padding-top:var(--space-5)}
  .page-head{height:88px}
  .calendar{height:calc(100% - 90px);min-height:0}
}
@media(prefers-reduced-motion:reduce){
  .photo-depth,.photo-mid,.photo-front,.paint-wash,
  .anime-paint-sky,.milky-way,.glow,.star,
  .bubble-visual,.bubble-light{
    animation:none!important;
  }
  dialog[open],dialog[open]::backdrop,dialog[open] form{
    animation:diaryFadeIn 140ms ease-out both!important;
  }
  button,.pill,.round,.plus,.primary,.dot{
    transition-duration:100ms!important;
  }
  @keyframes diaryFadeIn{
    from{opacity:0}
    to{opacity:1}
  }
}