/* Someone · C 端唯一样式表
   版式与 token 平移自 design/proto_someone_web.html 的 const CSS；
   动效层按 spark-output/context/motion-plan.json（Premium · soft-rise · 只动 transform/opacity）。 */

* { box-sizing: border-box }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: #FBFAF8; color: #2A2433; line-height: 1.75; -webkit-font-smoothing: antialiased }
:root {
  --acc: #3D2B5C; --warn: #A63C22; --mut: #6E667A; --line: #E7E3DE; --tint: #F2EEF6;
  --ink: #2A2433;
  /* 动效常量：改调性只改这里 */
  --m-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --m-out: cubic-bezier(0.4, 0, 1, 1);
  --m-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  --m-quick: 160ms; --m-std: 400ms; --m-slow: 600ms; --m-rise: 12px;
  /* 每条动效的时长都是它自己的变量，降级时整体减半 */
  --d-bub: 420ms; --d-bub-u: 200ms; --d-row: 260ms; --d-tile: 360ms; --d-card: 440ms;
  --d-li: 220ms; --d-typ: 240ms; --d-typ-out: 180ms; --d-block: 400ms; --d-gate: 520ms;
  --d-kick: 140ms; --d-press: 200ms;
}

a { color: inherit }

/* ---------- 顶栏：只有 someone + 声音开关 + 我的记录 ---------- */
.top { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 8px; padding: 11px 14px;
  background: rgba(251, 250, 248, .95); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
  font-size: 13px; color: #3D2B5C }
.wm { font-size: 16px; font-weight: 700; letter-spacing: -.2px }
.wm i { font-style: normal; color: var(--acc) }
.top .me { margin-left: auto; color: #52457E; text-decoration: none }

.wrap { max-width: 720px; margin: 0 auto; padding: 16px 16px 24px }
.wrap.hasio { padding-bottom: 78px }

.kick { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--acc); font-weight: 600; margin-bottom: 8px }
h1 { font-size: 27px; line-height: 1.3; letter-spacing: -.5px; margin: 0 0 12px }
.lede { font-size: 15.5px; color: #5F5A68; margin: 0 0 22px }
h2 { font-size: 19px; line-height: 1.45; margin: 0 0 8px }
h3 { font-size: 13px; color: var(--mut); font-weight: 600; margin: 26px 0 8px }
p { margin: 0 0 12px; font-size: 16.5px; line-height: 1.8 }

/* ---------- 气泡 ---------- */
.bub { margin: 0 0 18px }
.bub p:last-child { margin-bottom: 0 }
.bub.u { background: var(--tint); border-radius: 14px 14px 4px 14px; padding: 11px 13px; margin: 0 0 16px auto;
  max-width: 88%; font-size: 15px; color: #33303C; line-height: 1.75; white-space: pre-wrap }

.row { display: flex; gap: 8px; align-items: center; margin: -6px 0 18px; justify-content: flex-end }
.cp { border: 1px solid var(--line); background: #fff; color: var(--acc); border-radius: 999px; padding: 5px 13px;
  font-size: 12.5px; cursor: pointer; font-family: inherit; white-space: nowrap; flex: none }
.cp:active { background: var(--tint) }

.card { border: 1px solid var(--line); border-radius: 14px; padding: 13px 14px; margin-bottom: 12px; background: #fff }
.q { border-left: 2px solid var(--acc); background: #F5F2F8; padding: 11px 14px; border-radius: 0 10px 10px 0;
  font-size: 16px; margin-bottom: 6px }
.note { font-size: 12.5px; color: var(--mut); margin-bottom: 16px }
.defer { font-size: 14.5px; color: #33303C; background: #F5F2F8; border-left: 2px solid #DCD7E2; padding: 7px 12px;
  margin: 0 0 10px; line-height: 1.55 }
.li { font-size: 15px; padding: 8px 0; border-top: 1px solid var(--line); display: flex; gap: 10px }
.li b { color: var(--acc); font-size: 13px; min-width: 3.2em; font-weight: 600 }

/* ---------- 首页场景 ---------- */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 20px }
.tile { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; cursor: pointer; background: #fff }
.tile b { display: block; font-size: 14.5px; margin-bottom: 2px }
.tile span { font-size: 12.5px; color: var(--mut); line-height: 1.5 }
.more { grid-column: 1 / -1; font-size: 14px; color: var(--acc); padding: 6px 2px }
.resume { font-size: 14px; color: #33303C; margin: 0 0 14px }

/* ---------- 输入条 ---------- */
.io { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: 720px;
  background: #fff; border-top: 1px solid var(--line); padding: 10px 14px 14px; display: flex; gap: 9px; align-items: flex-end }
.io textarea { flex: 1; border: 1px solid var(--line); border-radius: 14px; padding: 11px 13px; font-size: 16px;
  font-family: inherit; resize: none; line-height: 1.45; min-height: 46px; max-height: 104px; overflow-y: auto;
  color: var(--ink); background: #fff }
.io textarea:focus { outline: none; border-color: var(--acc) }
.io .go { background: var(--acc); color: #fff; border: 0; border-radius: 14px; padding: 0 18px; height: 46px;
  font-size: 15px; cursor: pointer; font-family: inherit }
.io0 { border: 1px solid var(--acc); border-radius: 16px; padding: 14px; font-size: 16px; color: #9A94A3; background: #fff; cursor: text }

.foot { margin-top: 34px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--mut) }
.foot span { opacity: .85 }
/* 备案号：单独一行、贴页面底部、居中（合规位置，不并进免责句的行流） */
.icp { margin-top: 4px; text-align: center; font-size: 11.5px; color: var(--mut) }
.icp a { color: inherit; text-decoration: none }
.icp a:hover { text-decoration: underline }

.btn { display: block; width: 100%; border: 0; border-radius: 12px; padding: 13px; font-size: 15.5px; cursor: pointer;
  font-family: inherit; background: var(--acc); color: #fff; margin-bottom: 9px; text-align: center; text-decoration: none }
.btn.gh { background: #fff; border: 1px solid var(--line); color: var(--mut) }
.two { display: flex; gap: 9px }
.two .btn { margin: 0 }
.gate { max-width: 520px; margin: 3vh auto 0; padding: 0 16px }

/* ---------- 在场信号 ---------- */
.typ { display: flex; gap: 4px; align-items: center; font-size: 12.5px; color: var(--mut); margin: 0 0 10px }
.typ b { font-weight: 400; margin-left: 3px }
.typ u { text-decoration: none; width: 5px; height: 5px; border-radius: 50%; background: #C9C4CE; display: block;
  animation: bl 1.4s var(--m-sine) infinite }
.typ u:nth-of-type(2) { animation-delay: .2s }
.typ u:nth-of-type(3) { animation-delay: .4s }
@keyframes bl { 0%, 60%, 100% { opacity: .3 } 30% { opacity: 1 } }

/* ---------- 声音开关 ---------- */
.snd { display: inline-flex; width: max-content; align-items: center; gap: 5px; border: 1px solid var(--line);
  border-radius: 999px; padding: 3px 10px; font-size: 12.5px; color: var(--mut); background: #fff; cursor: pointer;
  font-family: inherit; white-space: nowrap; flex: none }
.snd.on { color: var(--acc); border-color: #DCD7E2; background: #F5F2F8 }
.snd i { font-style: normal; width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: block; flex: none }
.snd.blocked { border-color: #E7CFC7; color: #A63C22 }
.snd.blocked i { animation: breathe 2s var(--m-sine) infinite }
@keyframes breathe { 0%, 100% { opacity: .55 } 50% { opacity: 1 } }
.cp.pl { background: var(--acc); border-color: var(--acc); color: #fff }

/* ---------- 记录页 ---------- */
.srow { display: flex; gap: 8px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14.5px }
.srow .del { margin-left: auto; color: var(--mut) }
.danger { color: #A63C22 }
.empty { font-size: 14.5px; color: var(--mut); margin: 0 0 14px }

/* ---------- 危机屏 ---------- */
.cr { --acc: #A63C22; --tint: #FBF1EC; background: #FDF7F5 }
.cr .top { background: rgba(253, 247, 245, .95); border-color: #F0DAD2 }
.cr .kick, .cr .cp, .cr .li b { color: #A63C22 }
.cr .q { border-left-color: #A63C22 }
.cr .defer { background: #fff; border-left-color: #E7CFC7 }
.seg { font-size: 12.5px; color: #A63C22; font-weight: 600; margin: 18px 0 4px }
.call { border: 1px solid #E7CFC7; background: #fff; border-radius: 14px; padding: 14px 16px; margin: 6px 0 14px }
.call b { display: block; font-size: 21px; letter-spacing: -.3px; margin-bottom: 8px; font-family: ui-monospace, Menlo, monospace }
.plain-num { font-size: 15px; padding: 6px 0; color: #A63C22; font-family: ui-monospace, Menlo, monospace }

/* ---------- 动效层（motion-plan.json）----------
   soft-rise：全站唯一入场模式。只动 transform + opacity，位移 ≤14px——
   一屏预算按高度验收，动 margin/height 会让铁律 8 直接失败。 */
@keyframes soft-rise { from { opacity: 0; transform: translateY(var(--m-rise)) } to { opacity: 1; transform: none } }
@keyframes fade-out-down { from { opacity: 1 } to { opacity: 0; transform: translateY(6px) } }
@keyframes fade-only { from { opacity: 0 } to { opacity: 1 } }

.anim-bub { animation: soft-rise var(--d-bub) var(--m-ease) both }          /* 她的气泡：hero */
.anim-bub-u { animation: soft-rise var(--d-bub-u) var(--m-ease) both; --m-rise: 8px }
.anim-row { animation: soft-rise var(--d-row) var(--m-ease) 100ms both; --m-rise: 6px }   /* follow-through：晚一拍 */
.anim-tile { animation: soft-rise var(--d-tile) var(--m-ease) both; --m-rise: 10px;
  animation-delay: calc(var(--i, 0) * 24ms) }
.anim-card { animation: soft-rise var(--d-card) var(--m-ease) both; --m-rise: 14px }
.anim-kick { animation: fade-only var(--d-kick) var(--m-ease) both }          /* anticipation：小标先行 */
.anim-li { animation: soft-rise var(--d-li) var(--m-ease) both; --m-rise: 4px;
  animation-delay: calc(var(--i, 0) * 30ms + 120ms) }
.anim-typ { animation: fade-only var(--d-typ) var(--m-ease) both }
.anim-typ-out { animation: fade-out-down var(--d-typ-out) var(--m-out) both }
.anim-block { animation: soft-rise var(--d-block) var(--m-ease) both; animation-delay: calc(var(--i, 0) * 90ms) }
.anim-view { animation: soft-rise var(--m-std) var(--m-ease) both }
.anim-gate { animation: soft-rise var(--d-gate) var(--m-ease) both; --m-rise: 14px }
.fade-swap { animation: fade-only var(--m-quick) var(--m-ease) both }

.cp, .tile, .btn, .go, .snd { transition: transform 200ms var(--m-ease), background-color var(--m-quick) var(--m-ease),
  border-color var(--m-quick) var(--m-ease), color var(--m-quick) var(--m-ease) }
.cp:active, .go:active { transform: scale(.97) }
.tile:active, .btn:active, .io0:active { transform: scale(.985) }
.cp:active, .go:active { transition-duration: 90ms }
.tile:active, .btn:active { transition-duration: 120ms }
.cp:focus-visible, .btn:focus-visible, .go:focus-visible, .snd:focus-visible, .tile:focus-visible {
  outline: 2px solid var(--acc); outline-offset: 2px }

/* 危机屏：断品牌腔，也断装饰。整屏只允许一次淡入 + 三重色相位，无位移、无级联、无循环。 */
.cr .anim-bub, .cr .anim-row, .cr .anim-card, .cr .anim-li, .cr .anim-tile, .cr .anim-block,
.cr .anim-kick, .cr .anim-view, .cr .anim-gate { animation: fade-only var(--d-gate) var(--m-ease) both}
.cr .typ u, .cr .snd.blocked i { animation: none; opacity: .5 }
.cr-enter { background-color: #FDF7F5; transition: background-color 180ms var(--m-ease) }

@media (min-width: 760px) {
  .wrap { padding: 28px 24px 28px }
  .wrap.hasio { padding-bottom: 78px }
  h1 { font-size: 34px }
  .lede { font-size: 17px }
  .tiles { grid-template-columns: repeat(4, 1fr); margin-top: 16px }   /* 宽屏多了一行法定备案号，收 4px 网格上边距守住 669 */
  .bub.u { max-width: 70% }
  .top { padding: 13px 24px }
}

/* prefers-reduced-motion：去空间、保 opacity、停循环、消级联（motion-plan §reduced_motion_fallback） */
@media (prefers-reduced-motion: reduce) {
  :root {
    --m-quick: 80ms; --m-std: 200ms; --m-slow: 300ms;
    --d-bub: 210ms; --d-bub-u: 100ms; --d-row: 130ms; --d-tile: 180ms; --d-card: 220ms;
    --d-li: 110ms; --d-typ: 120ms; --d-typ-out: 90ms; --d-block: 200ms; --d-gate: 260ms;
    --d-kick: 70ms; --d-press: 100ms;
  }
  @keyframes soft-rise { from { opacity: 0 } to { opacity: 1 } }
  @keyframes fade-out-down { from { opacity: 1 } to { opacity: 0 } }
  * { animation-delay: 0ms !important; transition-duration: 80ms !important }
  .typ u, .snd.blocked i { animation: none; opacity: .5 }
  .cp:active, .go:active, .tile:active, .btn:active, .io0:active { transform: none }
}