/* p3.19 B:iOS App Store 风评分与评论——独立 CSS 文件,只在
   $appstore_reviews_visible 为真时才被 post.php 引入(和播放器/i18n 两
   个总开关同一种"关了完全不加载"做法)。半屏弹窗(.ask-sheet-*)的动画
   手法(mask 淡入 + 面板 translateY(100%)→0)是复用 GateKit 那套弹窗动
   画的同一种做法,没有跨插件直接依赖 GateKit 的 CSS 文件——评论是
   AppStoreKit+主题自己的功能,不该让它在 GateKit 没装的站上失效。 */

html.ask-reviews-no-scroll { overflow: hidden; }

/* p3.20④ 结构性修复:评论区原来完全没有横向宽度约束,直接撑到
   <article class="post"> 容器的全宽(比正文宽很多——正文靠 .post-body
   自己的 padding-inline+max-width 收着)。改成和 .post-body 共用同一个
   宽度公式:同一个 --post-pad 变量(定义在 .post 上,任何深度的后代都
   能读到,不需要重新传一份),同一个 680px 阅读宽度上限,和
   expand.css 里 .post-body 的两条规则逐字对应,不是两处各自维护一份数
   字。 */
.post-reviews {
  padding-inline: var(--post-pad);
  max-width: calc(680px + var(--post-pad) * 2);
}
.expand-overlay .post-reviews {
  max-width: none;
}

/* ==================== 星级(只读展示,半星用 ::before 裁一半宽度叠色实现) ==================== */
.ask-stars { display: inline-flex; gap: 2px; }
.ask-star {
  position: relative; display: inline-block;
  font-size: 15px; line-height: 1; color: rgb(120 120 128 / .3);
}
.ask-star.is-full { color: #FF9500; }
.ask-star.is-half { color: rgb(120 120 128 / .3); }
.ask-star.is-half::before {
  content: '★'; position: absolute; left: 0; top: 0;
  width: 50%; overflow: hidden; color: #FF9500;
}
.ask-stars--sm .ask-star { font-size: 12px; }
.ask-stars--lg .ask-star { font-size: 20px; }

/* 可点选的星级(评分入口/两个弹窗内的星级选择器)——比只读展示大一
   圈,方便手指点按,悬停/点击态由 reviews.js 现算 class,这里只给尺寸
   和光标。 */
.ask-reviews__tap-stars, .ask-sheet__stars-picker {
  display: flex; gap: 6px; cursor: pointer;
}
.ask-reviews__tap-stars .ask-star, .ask-sheet__stars-picker .ask-star { font-size: 26px; }

/* ==================== 评分区头部 ==================== */
.ask-reviews {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--separator);
}
.ask-reviews__header {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 10px; padding-bottom: 24px; margin-bottom: 20px; border-bottom: 1px solid var(--separator);
}
.ask-reviews__title { font-size: var(--fs-headline); font-weight: 700; color: var(--text-primary); align-self: flex-start; }
.ask-reviews__score-row { display: flex; align-items: center; gap: 16px; }
.ask-reviews__score { font-size: 56px; font-weight: 700; color: var(--text-primary); line-height: 1; font-variant-numeric: tabular-nums; }
.ask-reviews__score-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.ask-reviews__count { font-size: 12px; color: var(--text-tertiary); }
.ask-reviews__tap-stars { margin-top: 4px; }

/* ==================== 精选评论 + 评论卡(横向:星+日期+昵称在上,正文
   在中间,UA+国家在右——窄屏降级成纵向堆叠,见下面 @media)。 ==================== */
.ask-reviews__featured { margin-bottom: 16px; }
/* p3.20⑦按 App Store 评论区细则打磨:卡片圆角 12-16px(--radius-row 本
   身就是 14px,在范围内)、内边距 16-20px(原来 14px 16px 偏紧,收进这个
   区间的下限 16px/18px)、顶行(星/日期/昵称)和正文之间的呼吸间距从
   6px 拉到 10px——总指挥原话"充足留白+清晰字重层级+克制分隔",不是塞
   得满满当当的毛坯感。 */
.ask-review-card {
  padding: 18px 18px 16px; border-radius: var(--radius-row);
  background: rgb(127 127 127 / .06);
  margin-bottom: 12px;
  position: relative;
}
.ask-review-card--featured {
  background: rgb(255 149 0 / .08);
  border: 1px solid rgb(255 149 0 / .25);
}
.ask-review-card__badge {
  display: inline-block; font-size: 11px; font-weight: 700; color: #FF9500;
  text-transform: uppercase; letter-spacing: .03em; margin-bottom: 10px;
}
.ask-review-card__top {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap;
}
.ask-review-card__date { font-size: 12px; color: var(--text-tertiary); }
.ask-review-card__author { font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-left: auto; }
.ask-review-card__body { margin-bottom: 10px; }
.ask-review-card__title { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 3px; }
.ask-review-card__text { font-size: 14px; line-height: 1.6; color: var(--text-primary); white-space: pre-wrap; word-break: break-word; }
.ask-review-card__meta { display: flex; gap: 10px; font-size: 11px; color: var(--text-tertiary); }
.ask-review-card.is-new { animation: ask-review-card-in 320ms cubic-bezier(.2,.9,.2,1) both; }
@keyframes ask-review-card-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* 桌面/平板宽屏下 top 行右对齐 author 已经足够"横向"的观感(星+日期+昵
   称一行),正文和 meta 各占自己的块——这是总指挥说的"横向卡片"在这个
   信息量下最实际的布局:硬把正文和 UA/国家挤进同一行只会挤爆一张小
   卡,真正需要专门处理的是下面的窄屏降级。 */

/* p3.22③:这颗按钮是 .post-reviews(进而是整篇文章内容)实际意义上的最
   后一个元素——两个半屏弹窗/成功浮窗已经在 reviews.js 里被挪到
   document.body 下(见模块⑤),不再是它后面的可视兄弟。原来只有
   margin-top,按钮下方直接贴到文章卡片底边,没有任何呼吸空间。补一段
   margin-bottom,让文章页整体收得住气,不是硬生生截在按钮下沿。 */
.ask-reviews__compose-btn {
  display: block; width: 100%; text-align: center; margin: 8px 0 28px;
  padding: 12px 16px; font-size: 15px;
}

/* p3.37⑤:评论分页——超过一页(PAGE_SIZE,reviews.js 里定义)的卡片先
   隐藏,点"显示更多"按钮才逐批放出来,不是一次性把几十条评论全铺在页
   面上逼着访客一路往下拉才能摸到"撰写评论"入口。 */
.ask-review-card--paged-hidden { display: none; }
.ask-reviews__more-btn {
  display: block; width: 100%; text-align: center; margin: 4px 0 8px;
  padding: 10px 16px; font-size: 13px;
  background: var(--bg-elevated); color: var(--text-secondary);
}
.ask-reviews__closed { text-align: center; color: var(--text-tertiary); font-size: 14px; margin: 8px 0 28px; }

/* p3.19 A3 flagged 决策点①:窄屏(≤480px)评论卡横向布局降级——top 行
   (星+日期+昵称)保留横向(本来就够窄),meta 行(UA+国家)从"跟在正文
   右边"变成正文下方单独一行、字号进一步收小,而不是继续挤压正文的可
   用宽度导致正文变成又窄又高的一条。这是本轮唯一一处没有现成参照图
   可依据、按工程判断定的默认值。 */
@media (max-width: 480px) {
  .ask-review-card__meta { font-size: 10px; opacity: .8; }
  .ask-reviews__score { font-size: 44px; }
}

/* ==================== 半屏弹窗 ==================== */
.ask-sheet-overlay {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 220ms ease;
}
.ask-sheet-overlay.is-open { opacity: 1; pointer-events: auto; }
.ask-sheet-mask { position: absolute; inset: 0; background: rgb(0 0 0 / .45); }
.ask-sheet {
  position: relative; width: 100%; max-width: 480px; max-height: 88vh;
  overflow-y: auto; border-radius: 24px 24px 0 0;
  padding: 8px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  background: var(--bg-elevated);
  transform: translateY(100%);
  transition: transform 320ms cubic-bezier(.2,.85,.3,1);
  display: flex; flex-direction: column; gap: 12px;
}
.ask-sheet-overlay.is-open .ask-sheet { transform: translateY(0); }
.ask-sheet__grabber {
  width: 36px; height: 5px; border-radius: 999px;
  background: rgb(120 120 128 / .36); margin: 6px auto 4px; flex: none;
}
.ask-sheet__close {
  position: absolute; top: 12px; right: 14px; width: 28px; height: 28px; border-radius: 50%;
  background: rgb(127 127 127 / .14); color: var(--text-primary); font-size: 13px; z-index: 1;
}
.ask-sheet__title { flex: none; font-size: var(--fs-headline); font-weight: 700; text-align: center; color: var(--text-primary); }
.ask-sheet--compose .ask-sheet__stars-picker { justify-content: center; }
.ask-sheet .ask-sheet__stars-picker { justify-content: center; margin: 4px 0; }

/* p3.21③:点击评分弹窗内容很少(标题+星级+提交),不该被外层 88vh 的
   上限逻辑套用——这里单独收窄成"内容多高就多高,最多 50vh"，
   min-height:fit-content 保证内容优先决定高度，星星/提交这两样从来不
   会需要 overflow 才能看到，同时保留 overflow-y:auto 兜底(万一以后哪
   天加了别的字段进这个弹窗，不会因为忘了改这条规则又截断一次)。 */
.ask-rating-sheet-overlay .ask-sheet {
  max-height: 50vh;
  min-height: fit-content;
}

/* p3.21④:撰写评论弹窗内容明显更多(星级+标题+正文+昵称/邮箱+验证
   码),抬高上限到 85vh；整体不再自己滚动(overflow:hidden)，"要不要
   滚"完全下放给中间的 .ask-sheet__scroll(见 post.php 的结构注释)——
   和模块①播放器弹窗"外层固定高度、flex:1 中段自己滚"是同一套结构，
   不是又发明一套。头部(抓手/关闭/标题)和底部(错误提示/提交按钮)固定
   在 flex 列的两端，永远不会被滚动出可视区。 */
.ask-sheet--compose {
  max-height: 85vh;
  overflow: hidden;
}
.ask-sheet--compose .ask-sheet__scroll {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
}
.ask-sheet--compose .ask-sheet__error,
.ask-sheet--compose .ask-sheet__submit {
  flex: none;
}
/* position:sticky 是双保险(万一将来 .ask-sheet__scroll 之外又多了别的
   兄弟元素挤占空间，flex:none 仍然不够时，提交按钮至少不会被顶出视
   口)——不依赖它也已经靠上面的 flex 结构成立，这里只是多一层兜底。 */
.ask-sheet--compose .ask-sheet__submit {
  position: sticky; bottom: 0;
  background: var(--bg-elevated);
}

.ask-sheet__input, .ask-sheet__textarea {
  width: 100%; padding: 10px 12px; border-radius: var(--radius-row);
  border: 1px solid var(--separator); background: var(--bg-page);
  color: var(--text-primary); font: inherit; font-size: 14px; box-sizing: border-box;
}
.ask-sheet__textarea { resize: vertical; min-height: 88px; }
.ask-sheet__logged-in { font-size: 13px; color: var(--text-secondary); text-align: center; }

/* p3.19 B5 flagged 决策点②:验证码放在提交按钮正上方(表单的最后一
   步)——用户填完标题/正文/昵称等主要信息之后,最后核对一次验证码再
   点发布,符合"提交前最后一步确认"的心智模型,不会在表单最上面先挡
   一道验证码打断填写正文的连贯性。 */
.ask-sheet__captcha-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ask-sheet__captcha-img { height: 40px; border-radius: 8px; flex: none; background: var(--bg-page); }
.ask-sheet__captcha-input { flex: 1 1 100px; min-width: 100px; }
.ask-sheet__captcha-refresh { font-size: 12px; color: var(--tint); background: none; border: none; flex: none; white-space: nowrap; }

.ask-sheet__error { color: #FF3B30; font-size: 13px; text-align: center; min-height: 16px; margin: 0; }
.ask-sheet__submit {
  width: 100%; text-align: center; padding: 12px 16px; font-size: 15px; margin-bottom: 4px;
}
.ask-sheet__submit:disabled { opacity: .5; }

/* ==================== 提交成功小浮窗 ==================== */
/* p3.21⑤:width 本来就是 auto(fixed 定位元素默认收缩到内容大小,不需要
   显式 width:fit-content),这里补的是 max-width:80vw——防止某些语言翻
   译后的文案变长时在窄视口把浮窗撑到贴视口边缘甚至溢出。z-index 提到
   10000,确保比站内任何其它弹层(半屏弹窗 400、播放器弹窗遮罩 250 等)
   都高,不会被压在下面。 */
.ask-review-toast {
  position: fixed; top: 50%; left: 50%; z-index: 10000;
  transform: translate(-50%, -50%) scale(.85);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  max-width: 80vw; padding: 28px 34px; border-radius: 20px;
  background: rgb(0 0 0 / .78); backdrop-filter: blur(6px); color: #fff;
  opacity: 0; pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
}
.ask-review-toast.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.ask-review-toast__star { font-size: 40px; color: #FF9500; }
.ask-review-toast__text { font-size: 14px; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .ask-review-card.is-new { animation: none; }
  .ask-sheet, .ask-sheet-overlay, .ask-review-toast { transition-duration: 1ms; }
}