@charset "utf-8";
/* ============================================================
   投诉与举报（complaint.php）
   ------------------------------------------------------------
   对照物：/tmp/ref_complaint.html（原项目 src/app/complaint/page.tsx 的渲染结果，
   InfoLayout → max-w-[1280px] px-6 lg:px-12 py-6）。逐节点取自那份 HTML 的类名，
   数值按 .next 里编译出来的 Tailwind v4 刻度现算（--spacing:.25rem、--radius:.75rem）。

   用到的 Tailwind 档位：gap-3=12 · mb-8=32 · mt-0.5=2 · w-14=56 · rounded-2xl=16 ·
   text-2xl=24/32 · text-sm=14/20 · space-y-5=20 · space-y-1.5=6 · h-9=36 · h-11=44 ·
   rounded-md=10 · px-3=12 · px-4=16 · py-1=4 · py-2=8 · min-h-16=64 · max-w-2xl=672 ·
   pb-6=24 · space-y-2=8 · text-[11px] 不带行高→继承 1.5（→16.5）。

   ★ 本页不复用 display:flex / gap / var(--) / :focus-visible —— 这些在 360 兼容模式
     （Trident 11）里整条声明会被丢掉或永不匹配，写了等于没写。
     表单控件几乎全部复用 style.css 里已经量过的公共件（.ui-head / .ui-card / .ui-label /
     .ui-input / .ui-textarea / .ui-sel / .ui-selwrap / .ui-selarrow / .ui-fld-sm），
     它们和原版这几处是逐项对上的（见各自注释）；只补三样原版有、公共层没有的：
     ① 焦点环（原版是 focus-visible:ring-*，IE 只能用 :focus 退而求其次）；
     ② h-11 那颗提交按钮（.ui-btn 只有 36 / 32 / 40 三档）；
     ③ 必填星号和标题文字的间距。
   ============================================================ */

/* ---- 收窄容器：max-w-2xl(42rem = 672) mx-auto pb-6 ---- */
.cmp-narrow { max-width: 672px; margin: 0 auto; padding-bottom: 24px; }

/* ---- 表单主体：原版 <form class="space-y-5">（相邻子块之间 20）----
   ★ 和 .ui-stack（space-y-6 = 24，页面根用的那个）不是一档，别混。 */
.cmp-form > * + * { margin-top: 20px; }

/* ---- 下拉：原版是 Radix 触发器（w-fit = 贴合内容宽），我们这里是原生 select。
   宽度**实测 148**（不是算出来的 146 —— 按 12+98+8+16+12 算会差 2，动过就别再算）。
   ★ 原生 select 的固有宽度两个引擎算法不同（IE 还会给箭头留位置，::-ms-expand 只藏箭头
     不还位置），width:auto 落不到 148，所以写死。
   ★ 外壳（.ui-selwrap）**也要定宽**：它是 display:block 的定位容器，不给宽就撑满整行，
     里面那颗绝对定位的箭头（right:13）会跑到整行的右端 —— 量出来箭头 x=997，原版是 473。
     外壳跟着 148 之后：354 + 148 − 13 − 16 = 473 ✅ 两个引擎都一致。
   ★ 原版选中某一项后触发器会缩到那一项的宽（「违法」≈ 84），原生 select 做不到
     「选完变窄」，只能一直保持默认态的 148 —— 这是本页唯一还在的形态差异。 */
.cmp-selwrap { width: 148px; }
.cmp-sel { width: 148px; }

/* ---- 必填星号：<span class="text-destructive">*</span> ----
   原版的 Label 是 flex + gap-2(8)，所以「举报类型」和星号之间是 8。
   我们这边是行内上下文，标签文字后面那个空格只有约 3.5px，凑不出 8 ——
   所以页面里把那个空格去掉（渲染上不可见），改成这里的 8 左边距，结果与原版一致。
   ★ 别在这个 span 上写 line-height：它跟着 .ui-label 的 leading-none(14) 走，
     改了就比原版高。 */
.cmp-ast { margin-left: 8px; color: #E40016; }             /* text-destructive */

/* ---- 自绘箭头的尺寸：.ui-selarrow 只在外层 span 上写了 16×16，而 icon() 吐的
   svg 带 width/height="24" —— 不补这条，箭头会比原版大 4px 并溢出格（同 p-musician.css
   205 行那条，公共层没管，各页自己补）。 */
.cmp-form .ui-selarrow svg { display: block; width: 16px; height: 16px; }

/* ---- 举报内容的多行框：高度钉死 64（原版 min-h-16）。----
   ★ 原版靠 field-sizing-content 自适应（空的时候也撑住 4rem）。两个引擎都没有它时
     按 rows 算高度，而 rows 的行盒一边用 line-height(20)、另一边用自己的字体度量
     （4 行就差出 6px，本页原来整块比原版矮 6 就是这么来的）。定死高度两边就一致了，
     「打字自己长高」由页面脚本补（原版的行为），所以这里只写初始高度、不写 max-height。 */
.cmp-textarea { height: 64px; }

/* ---- 字数计数：text-right text-[11px] text-muted-foreground ----
   ★ text-[11px] 是「只给字号不给行高」的写法，行高继承上游的 1.5 ⇒ 11 × 1.5 = 16.5。
     别改成整数值：原版那一行就是 16.5，改了字段组会差 0.5（多行框下面那 6 的间距之外
     全靠它撑着高度）。 */
.cmp-count { text-align: right; font-size: 11px; line-height: 16.5px; color: #616B70; }

/* ---- 焦点态：原版 focus-visible:border-ring + ring-[3px] + ring-ring/50 ----
   ring 的两种颜色取自原版令牌（border-ring = primary #608DA4；ring-ring/50 =
   rgba(96,141,164,.5)），和 style.css 里 .rp-select:focus / .cpl-in:focus 用的是同一组值。
   ★ IE 全系没有 :focus-visible（那条是后来的规范），:focus 是它认的 —— 代价是鼠标点
     也会亮圈，比「在兼容模式里完全没有反馈」强。这条退化取舍同 3752 行那段的记法。
   ★ 原版的 box-shadow 顺序是「先 ring 后 shadow」（后写的画在下面），这里照排，
     免得把控件自带的 shadow-xs 盖没。 */
.cmp-form .ui-input:focus,
.cmp-form .ui-textarea:focus,
.cmp-form .ui-sel:focus {
  border-color: #608DA4;
  box-shadow: 0 0 0 3px rgba(96, 141, 164, 0.5), 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* ---- 提交按钮：w-full h-11（44）+ px-4，原版是 Button 的默认变体（bg-primary）----
   高度 44 是公共层没有的一档（.ui-btn 36 / .ui-btn-sm 32 / .ui-btn-lg 40），所以在这里补。
   原版那颗按钮**没有 py**（h-11 是写死的），行高就等于盒高（同 .ui-btn-lg 的记法）。
   ★ 原版按钮里**没有图标**（它那条 has-[>svg]:px-3 因此不生效，走默认的 px-4 = 16），
     所以 markup 里不带 ui-btn-with-ic，.ui-btn 自己的 8px 16px 正好就是原版的 px-4，
     这里只压掉上下内边距。我们原来多放了一颗 flag 图标，已按原版去掉。 */
.cmp-submit {
  height: 44px;
  line-height: 44px;
  padding-top: 0;
  padding-bottom: 0;
  width: 100%;                          /* 原版 w-full（.ui-btn 是行内块，不铺满） */
}
/* 按钮的焦点环：原版 Button 基类也带 focus-visible:ring-*。同样退化成 :focus。 */
.cmp-submit:focus {
  box-shadow: 0 0 0 3px rgba(96, 141, 164, 0.5), 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* ---- 提交成功那一屏：原版是 submitted ? 成功块 : 表单，**整块替换**（不是清空重填）----
   外圈 text-center py-16；再往下是「80 圆底 bg-emerald-500/10 里一颗 40 的
   emerald-600 对勾（mx-auto mb-4）」+ h2 20/28 700 mb-2 + p 14/20 灰 mb-6 + 默认按钮。
   页面里靠给表单加 .hidden、给这块摘掉 .hidden 来换（.hidden 是 !important，
   没法用后来的 display 盖掉它，只能摘类）。 */
/* ★ 这两个 emerald 色**不能凭记忆写**（2026-09-23 查出来的）：
     bg-emerald-500/10 → bg.bg-emerald-500\/10 编译成 `background-color:#00bb7f1a`
     （原版 .next/static/css/3a69b6a727df9455.css，斜杠那个类名带一堆 :not(#\#) 提权）
     原文是 8 位 hex，**IE 不认**（CSS Color 4 才有），所以拆成 rgba：
     0x1a = 26，26/255 = 0.102。
     我们原来写的是 rgba(16,185,129,.1) —— 那是 Tailwind **v3** 的 emerald-500。
     本项目是 v4，色标换过：绿通道 187 对 185、而**红通道 0 对 16**，
     在 80px 的大圆上那点偏灰是看得出来的。
   text-emerald-600 编译成 `color:var(--color-emerald-600)`，主题里那个变量有 sRGB 回退
     `--color-emerald-600:rgb(0,150,105)`（oklch 那版关在 @supports (color:oklab(0% 0 0%)) 里）
     → #009669。我们原来写 #059669，同样是 v3 的值（红通道 5 对 0）。 */
.cmp-done { text-align: center; padding: 64px 0; }
.cmp-done-ic {
  width: 80px; height: 80px; margin: 0 auto 16px;
  border-radius: 9999px;                                   /* rounded-full */
  background-color: rgba(0, 187, 127, 0.102);              /* bg-emerald-500/10 = #00bb7f1a */
  font-size: 0; line-height: 80px;                         /* 杀掉行盒 strut，图标靠行高居中 */
}
.cmp-done-ic svg {
  display: inline-block; vertical-align: middle;
  width: 40px; height: 40px;                               /* w-10 h-10 */
  color: #009669;                                          /* text-emerald-600 = rgb(0,150,105) */
}
.cmp-done-h { margin-bottom: 8px; font-size: 20px; line-height: 28px; font-weight: 700; color: #111C22; }
.cmp-done-p { margin-bottom: 24px; font-size: 14px; line-height: 20px; color: #616B70; }

/* ---- 表单尾部那块联系方式：mt-8 pt-6 border-t border-border space-y-2 ----
   两块之间 32、分隔线上面 24，行是 14/20 #616B70、行间距 8（space-y-2）。
   ★ 每行是「16 的 primary 色图标 + 8 + 文字」的 flex 行（items-center），
     所以图标走 vertical-align:middle 那一套，不用 top 偏移。
     原来这里写着「原版只有一格 span」并据此省掉了图标 —— 是错的：
     2026-09-23 抓原版渲染结果看到的是 <svg class="lucide lucide-mail w-4 h-4 text-primary">。 */
.cmp-contact {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #D9DFE2;                            /* border-border */
  font-size: 14px; line-height: 20px; color: #616B70;
}
.cmp-contact > * + * { margin-top: 8px; }
/* ---- 联系方式块的小标题：「电话/邮箱举报渠道」是本版新增（2026-10-09，用户要求），
   原版这块没有标题。按站内小标题的惯例给 16/24 + 600 + 前景色（#111C22，暗色由
   dark.css 换成 #E8ECEE）。标题与第一行的 8px 间距由上面那条 .cmp-contact > * + * 出。 */
.cmp-contact-t {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: #111C22;                                          /* text-foreground */
}
.cmp-ci {
  display: inline-block; width: 16px; height: 16px;        /* w-4 h-4 */
  margin-right: 8px;                                       /* gap-2 */
  vertical-align: middle;
  /* ★ 这一颗 -1px 是量出来的，别当成随手加的偏移（2026-09-23）：
     原版那行是 flex + items-center，16 的图标在 20 的行盒里**正好**居中
     （对原版实测 mail.y−row.y = 2，(20−16)/2 = 2，图标中线与行中线完全重合）。
     我们这边 flex 不可用，退化成 vertical-align:middle —— 它的基准是
     「基线 + 半个 x-height」，不是行盒中线，实测下来图标落在 +3（Chrome），
     比原版低 1px。position:relative 只挪绘制和上报的盒子、不动行盒，
     所以不会让这一行重排。补完 Chrome 报 midDelta 0（与原版一致）；
     IE 报 1 —— 那 1 是 IE 报行内元素矩形本身偏低约 1px 的老毛病（记在探针笔记里），
     不是又差了一层。 */
  position: relative; top: -1px;
  color: #608DA4;                                          /* text-primary */
}