/* 登录页：月相罗盘。2026-10-02 从 index.html 拆出来；加载顺序见 index.html 的 <link>，前后顺序就是层叠顺序，别乱调 */
  /* ── Login ──────────────────────────────────────────────────
     "这一页不是登录表单，是一件仪器"：月相罗盘是唯一的图，铭牌+密钥栏
     合成一条跟罗盘等宽的刻线，没有卡片/材质/实心色。颜色全部走
     --accent/--text-soft/--text-faint，两套主题（pearl/harbor）不用另外适配。
     罗盘指针跟着她的周期走：登录前过不了鉴权读不到数据，也不为这个开无鉴权接口，
     所以用上次登录时记在本机的阶段(period.js 写 localStorage + #login[data-phase])，
     没有记录时默认排卵期。五个阶段的角度是设计稿里标定好的那组 */
  .login{
    --pointer-deg:135.93deg; --minute-deg:-46.69deg;
    position: fixed; inset:0; z-index: 50;
    overflow: hidden;
    display:flex; justify-content:center;
    background:#DDE3EC;
  }
  .login-page{
    position:relative; width:min(100vw, 452px); height:100%;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding: calc(env(safe-area-inset-top) + 16px) clamp(16px,4vw,28px) 0;
    overflow:hidden;
    background:
      radial-gradient(74% 38% at 50% 33%, rgba(255,255,255,.70), transparent 72%),
      radial-gradient(96% 52% at 50% -4%,  rgba(146,176,226,.44), transparent 74%),
      radial-gradient(88% 46% at 50% 105%, rgba(245,197,199,.44), transparent 72%),
      linear-gradient(176deg, #E9F0FA 0%, #EFEDF7 46%, #F6EFF3 76%, #FCF2EF 100%);
  }
  @media (min-width:520px){ .login-page{ box-shadow:0 0 60px 10px rgba(50,60,90,.14); } }

  .login-dial{
    position:relative; flex:none;
    width:min(306px, calc(100vw - 88px)); height:min(306px, calc(100vw - 88px));
    margin-bottom:52px;
  }
  .login-dial::before{
    content:""; position:absolute; inset:-17%; border-radius:50%;
    background:radial-gradient(circle, rgba(255,255,255,.88) 0%, rgba(255,255,255,.52) 44%, rgba(255,255,255,0) 72%);
    animation: loginBreathe 15s ease-in-out infinite;
  }
  .login-dial::after{
    content:""; position:absolute; inset:-5.5%; border-radius:50%;
    border:1px solid color-mix(in srgb, var(--accent) 15%, transparent);
  }
  @keyframes loginBreathe{ 0%,100%{ opacity:.78; transform:scale(1); } 50%{ opacity:1; transform:scale(1.035); } }
  .login-dial img{ position:absolute; inset:0; width:100%; height:100%; transform-origin:50% 50%; }
  .login[data-phase="menstrual"] { --pointer-deg:-44.07deg; --minute-deg:-200.99deg; }
  .login[data-phase="follicular"]{ --pointer-deg:45.93deg;  --minute-deg:-110.99deg; }
  .login[data-phase="ovulation"] { --pointer-deg:135.93deg; --minute-deg:-46.69deg; }
  .login[data-phase="luteal"]    { --pointer-deg:225.93deg; --minute-deg:43.31deg; }
  .login[data-phase="late"]      { --pointer-deg:270.93deg; --minute-deg:107.61deg; }
  .login-dial .fine{ transform:rotate(var(--minute-deg)) scale(.54); opacity:.72; }
  .login-dial .pointer{ transform:rotate(var(--pointer-deg)) scale(.74); }
  /* 每次打开登录页，指针像真罗盘一样从偏开一点的地方摆过来、过头一点再落定；细刻度盘慢一拍反着转一点。
     以前有时转有时不转：阶段是 period.js(页面最后才加载)设的，赶上先画出来就会从默认位置"跳"过去，
     赶不上就直接在原位——现在阶段在登录页一出现就设好(紧跟在罗盘后面的内联脚本)，摆动每次都有 */
  @keyframes needleSettle{
    0%  { transform:rotate(calc(var(--pointer-deg) - 48deg)) scale(.74); }
    52% { transform:rotate(calc(var(--pointer-deg) + 7deg))  scale(.74); }
    76% { transform:rotate(calc(var(--pointer-deg) - 2.5deg)) scale(.74); }
    100%{ transform:rotate(var(--pointer-deg)) scale(.74); }
  }
  @keyframes fineSettle{
    0%  { transform:rotate(calc(var(--minute-deg) + 22deg)) scale(.54); }
    100%{ transform:rotate(var(--minute-deg)) scale(.54); }
  }
  .login-dial .pointer{ animation:needleSettle 1.9s cubic-bezier(.33,.66,.36,1) .25s both; }
  .login-dial .fine{ animation:fineSettle 2.4s cubic-bezier(.22,.8,.3,1) .25s both; }
  @media (prefers-reduced-motion:reduce){ .login-dial::before, .login-dial .pointer, .login-dial .fine{ animation:none; } }

  .login-lower{ width:100%; display:flex; flex-direction:column; align-items:center; }
  .login-plaque{ width:min(306px, calc(100vw - 88px)); }
  .login-row{ position:relative; display:flex; align-items:center; height:46px; }
  .login-row .name{
    flex:none; font-family:var(--font-en); font-weight:500; font-size:16px; line-height:1;
    text-transform:uppercase; letter-spacing:.34em;
    color:color-mix(in srgb, var(--accent) 86%, var(--text));
    text-shadow:0 1px 0 rgba(255,255,255,.72);
  }
  .login-row .sep{
    flex:none; width:1px; height:16px; margin:0 15px 0 17px;
    background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 32%, transparent) 50%, transparent);
  }
  .login input{
    flex:1 1 auto; min-width:0; width:auto;
    border:0; outline:0; background:none; padding:0; box-shadow:none;
    font-family:var(--font-cn); font-size:15px; line-height:1; letter-spacing:.42em;
    color:var(--text); caret-color:var(--accent);
  }
  .login input::placeholder{ color:color-mix(in srgb, var(--accent) 24%, transparent); }
  .login-groove{
    position:absolute; left:0; right:0; bottom:0; height:1px;
    background:color-mix(in srgb, var(--accent) 21%, transparent);
    transition:background .3s var(--ease-soft), box-shadow .3s var(--ease-soft);
  }
  .login-row:focus-within .login-groove{
    background:color-mix(in srgb, var(--accent) 40%, transparent);
    box-shadow:0 -8px 16px -8px color-mix(in srgb, var(--accent) 50%, transparent);
  }
  .login-groove::before,.login-groove::after{
    content:""; position:absolute; top:0; width:1px; height:6px;
    background:color-mix(in srgb, var(--accent) 27%, transparent);
  }
  .login-groove::before{ left:0; } .login-groove::after{ right:0; }
  .login-groove i{
    position:absolute; left:50%; top:0; width:1px; height:9px; margin-left:-.5px;
    background:color-mix(in srgb, var(--accent) 27%, transparent);
  }
  .login button{
    flex:none; width:34px; height:34px; margin-right:-7px; padding:0;
    border:0; background:none; cursor:pointer;
    display:grid; place-items:center;
    color:var(--accent); opacity:.28;
    transition:opacity .3s var(--ease-soft), transform .3s var(--ease-soft);
  }
  .login button svg{ width:18px; height:18px; }
  .login-row.ready button{ opacity:.92; }
  .login-row.ready button:hover{ transform:translateX(2px); }
  .login button:active{ transform:translateX(3px); }
  .login button:disabled{ opacity:.28 !important; cursor:default; }
  .login .err{ color:#A9604F; font-size:12.5px; min-height:18px; text-align:center; margin:15px 0 0; font-family:var(--font-cn); }
  .login-foot{
    position:absolute; left:0; right:0; z-index:2;
    bottom:calc(env(safe-area-inset-bottom) + 28px);
    text-align:center; margin:0; padding:0 clamp(16px,4vw,28px);
    font-family:var(--font-en); font-weight:500; font-style:italic;
    font-size:15px; letter-spacing:.05em;
    color:color-mix(in srgb, var(--accent) 52%, transparent);
  }
  @media (max-height:720px){
    .login-dial{ width:min(272px, calc(100vw - 88px)); height:min(272px, calc(100vw - 88px)); margin-bottom:40px; }
  }
  @media (max-height:600px){ .login-foot{ display:none; } }
  .sr-only{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
  }
  .hidden{ display:none !important; }
  .app.kb .composer{ padding-bottom: 8px; }