/* UX report 2026-09-26 (PR「移动端布局与文案」). Loaded last by accounts/base.html. */

/* 登录 / 注册 / 找回密码 links were run together as one underlined string. */
.account-links{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center}
.account-links a{white-space:nowrap}

/* History: the works come into view without scrolling past a full-screen hero + intro. */
.account-portfolio .account-hero{min-height:min(64svh,680px)}
.account-portfolio .works-section{min-height:0;padding-top:9vh;padding-bottom:6vh}
.account-portfolio .works-intro{margin-bottom:3vh}
.account-portfolio .works-intro h2{font-size:clamp(30px,3.4vw,52px);margin:14px 0 18px}
.account-portfolio .work-filter{margin-bottom:3vh}
/* With works to show, the hero and the decorative intro shrink so the first work card
   starts on the first screen. */
.account-portfolio .account-hero.has-work{min-height:0;padding-top:max(112px,13vh)}
.account-portfolio .account-hero.has-work .account-hero__content{margin-bottom:88px}
.account-portfolio .account-hero.has-work h1 span:last-child{font-size:clamp(32px,3.6vw,54px)}
.account-portfolio .works-section.has-works .section-index{display:none}
.account-portfolio .works-section.has-works + .projects_sections .projectsSection:first-child .projectsSection_content{margin-top:24px}
.account-portfolio .works-section.has-works{padding-top:5vh;padding-bottom:0}
.account-portfolio .works-section.has-works .works-intro h2,
.account-portfolio .works-section.has-works .works-intro>p:last-child{display:none}
.account-portfolio .works-section.has-works .works-intro{margin-bottom:1.5vh}
.account-portfolio .works-section.has-works .pagination{margin:0}

/* In-page anchors (#points etc.) land below the sticky section tabs. */
.account-portfolio [id]{scroll-margin-top:72px}

/* 「我的积分」 heading must not break between 积 and 分. */
.points-account-panel .section-heading{flex-wrap:wrap}
.points-account-panel .section-heading h2{white-space:nowrap}

@media(max-width:700px){
  /* The fixed top bar was transparent (mix-blend difference) and drew over body text. */
  .account-header{align-items:center;padding:10px 20px;background:rgba(10,9,4,.9);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);mix-blend-mode:normal;
    border-bottom:1px solid rgba(238,233,223,.12)}
  .account-header .brand{flex-direction:row;align-items:baseline;gap:8px}
  .account-header .brand span{width:auto;font-size:20px;line-height:1.2;white-space:nowrap}
  .account-header .brand small{margin-top:0}
  body:not(.account-portfolio) main{margin-top:92px}
  /* Section tabs stick right under the bar; anchor jumps land below both. */
  .account-tabs{top:50px}
  html{scroll-padding-top:66px}
  .account-portfolio{scroll-padding-top:116px}
  .account-section,.account-portfolio [id]{scroll-margin-top:140px}
  .points-shell [id],.legal-shell [id]{scroll-margin-top:72px}
  .account-portfolio .account-hero{min-height:52svh}
  .account-portfolio .account-hero.has-work{padding-top:84px}
  .account-portfolio .account-hero.has-work .account-hero__content{margin-bottom:72px}
  .account-portfolio .account-hero.has-work h1 span:last-child{font-size:30px}
  .account-portfolio .works-section{padding-top:7vh;padding-bottom:4vh}
  .account-portfolio .works-intro h2{font-size:28px}
  .points-account-panel .section-heading{align-items:baseline}
}

/* Remote QA 2026-09-27 (P2) — phones / touch: small links and toggles get a ≥44×44 hit area
   through an invisible ::before, so the layout and look stay exactly the same. */
@media (max-width: 700px), (max-width: 1024px) and (pointer: coarse) {
  .account-header nav a, .account-header .brand, .account-links a, .password-login > summary,
  .account-tabs a, .generation-page__top a, .generation-page__actions a, .account-hero__meta a { position: relative; }
  .account-header nav a::before, .account-header .brand::before, .account-links a::before,
  .password-login > summary::before, .account-tabs a::before,
  .generation-page__top a::before, .generation-page__actions a::before, .account-hero__meta a::before {
    content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: max(100%, 44px); height: max(100%, 44px);
  }
}

/* Remote QA 2026-09-27 (P2) — landscape phones (e.g. 844×390): the fixed, transparent header
   with the vertical 「幻游界 / MIRRISM」 wordmark drew over form labels and headings. Use the
   same opaque horizontal bar as portrait phones. */
@media (max-width: 1024px) and (orientation: landscape) and (max-height: 560px) {
  .account-header{align-items:center;padding:8px 20px;background:rgba(10,9,4,.9);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);mix-blend-mode:normal;
    border-bottom:1px solid rgba(238,233,223,.12)}
  .account-header .brand{flex-direction:row;align-items:baseline;gap:8px}
  .account-header .brand span{width:auto;font-size:20px;line-height:1.2;white-space:nowrap}
  .account-header .brand small{margin-top:0}
  body:not(.account-portfolio) main{margin-top:84px}
  .account-tabs{top:48px}
}