/* ChatShare 拼车 · 薄荷汽水
 *
 * 配色方向是用户 2026-09-23 批准的（UI_DIRECTION.md）：绿色主操作、
 * 暖白表面、浅薄荷背景。这里沿用那套色值，并补上三件上一版丢掉或从没有过的事：
 *
 *   1. 键盘焦点可见（:focus-visible）。上一版完全没有——按钮和链接
 *      用键盘走过去看不出在哪。这是「好用」的底线，不是装饰。
 *   2. 暗色。两版都没有。
 *   3. 动效。上一版是零动效，注释写着「加了只是让人等」——那是对的，
 *      但它把「过渡」和「加载动画」混为一谈了。按下去有回应是反馈，
 *      转圈圈等三秒才是浪费。所以只保留 120ms 以内的状态过渡，
 *      而且尊重 prefers-reduced-motion。
 *
 * 不引入构建步骤，不引入框架。一个文件，手写，服务端直接发。
 */

:root {
  /* 颜色。已批准的那一套。
   *
   * 对比度都量过（`tools/contrast.py`），最低 4.70:1，过 WCAG AA 的 4.5:1。
   *
   * 量完之后改了两处，两处肉眼看都「还行」：
   *   1. 暗色模式主按钮的白字只有 2.45:1——看起来像一个没点亮的按钮。
   *      换成深墨色，7.0:1。
   *   2. 三级文字原来是 #8ea599，2.62:1。而它被用在席位号、时间戳、
   *      订单号上——**只在那里出现一次的信息**，不是装饰。
   *
   * 第 2 条的代价要说清楚：在浅色底上要过 4.5:1，三级文字就只能压到
   * 和次级文字几乎同一个深度。所以**层次靠字号和字重，不靠颜色深浅**
   * （13px vs 15px）。这也是 Anthropic / OpenAI 那种排版的做法。
   */
  --ink: #20372e;          /* 正文 */
  --gray: #587267;         /* 次级文字 */
  --faint: #5a7265;        /* 三级文字。靠字号区分，不靠颜色 */
  --line: #d7e3d7;         /* 边框 */
  --canvas: #f6faf5;       /* 页面底 */
  --paper: #eff5ec;        /* 内嵌区域 */
  --card: #fffffb;         /* 卡片表面，暖白不是纯白 */
  --accent: #0b7b5e;       /* 主操作 */
  --accent-ink: #09684f;   /* 悬停 */
  --accent-soft: #e3f2e5;  /* 淡底 */
  --on-accent: #ffffff;    /* 主按钮上的字。暗色模式下会换掉 */

  /* 档位色。上一版丢了这个，于是两个档位看起来一模一样。 */
  --plus: #e7f4e8;
  --pro: #fff0d9;

  --warn: #8a5a00;
  --warn-soft: #fdf3e3;
  --danger: #a51f1f;
  --danger-soft: #fdeceb;

  /* 间距。4px 节奏，有名字才不会在模板里写 margin:13px。 */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  --r1: 8px; --r2: 12px; --r3: 16px; --r-pill: 999px;

  /* 阴影。两级就够：卡片贴着纸，浮层离开纸。 */
  --lift: 0 1px 2px rgba(32, 55, 46, .06);
  --float: 0 4px 16px rgba(32, 55, 46, .12);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* 过渡。120ms 是「感觉到了但没在等」的上限。 */
  --quick: 120ms cubic-bezier(.4, 0, .2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8f0ea;
    --gray: #a8bdb0;
    --faint: #8da89a;
    --line: #2d4036;
    --canvas: #141b17;
    --paper: #1a241e;
    --card: #1d2822;
    --accent: #4ab896;
    --accent-ink: #6ccbab;
    --accent-soft: #1f3a30;
    /* 白字在这个亮绿上只有 2.45:1，看着像没点亮的按钮。深墨色 7.0:1。 */
    --on-accent: #0c1f18;
    --plus: #1f3a2a;
    --pro: #3a2f1a;
    --warn: #e0b060;
    --warn-soft: #2e2415;
    --danger: #e08080;
    --danger-soft: #2e1a1a;
    --lift: 0 1px 2px rgba(0, 0, 0, .3);
    --float: 0 4px 16px rgba(0, 0, 0, .45);
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--canvas);
  color: var(--ink);
  font: 15px/1.6 var(--sans);
  letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased;
  /* 中文长段落断行好看一点。 */
  text-wrap: pretty;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-ink); text-decoration: underline; }

/* 键盘焦点。**放在最前面且用 :focus-visible**：鼠标点击不显示，
 * Tab 走到才显示——这样它既不碍事，又在需要时一定在。 */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r1);
}

h1, h2, h3 { margin: 0; line-height: 1.25; letter-spacing: -.02em; }
h1 { font-size: 28px; }
h2 { font-size: 19px; }
h3 { font-size: 16px; }

p { margin: 0; }

code, .mono { font-family: var(--mono); font-size: .92em; }

/* ------------------------------------------------------------------ 布局 */

.page { max-width: 1040px; margin: 0 auto; padding: var(--s5) var(--s5) var(--s8); }
.page--narrow { max-width: 460px; }
/* 概览页。一张卡 + 一个主行动，窄一点才像「一件事」——
 * 1040px 宽的时候那个「进入聊天」会变成一条 1180px 的横杠，很难看，
 * 也不像一个按钮了。 */
.page--focus { max-width: 680px; }

.stack > * + * { margin-top: var(--s4); }
.stack-tight > * + * { margin-top: var(--s2); }

.faint { color: var(--faint); font-size: 13px; }
.muted { color: var(--gray); }
.num { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ 导航 */

.top {
  border-bottom: 1px solid var(--line);
  background: var(--card);
}

.top-in {
  max-width: 1040px; margin: 0 auto;
  padding: 0 var(--s5);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s5);
  min-height: 56px;
}

.brand {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-weight: 650; font-size: 17px; letter-spacing: -.03em;
  color: var(--ink);
}
.brand:hover { color: var(--ink); text-decoration: none; }
.brand i {
  width: 10px; height: 10px; border-radius: 3px;
  background: var(--accent); display: block;
}

.top-nav { display: flex; align-items: center; gap: var(--s5); font-size: 14px; }
.top-nav a { color: var(--gray); }
.top-nav a:hover { color: var(--accent); text-decoration: none; }
.top-nav a[aria-current] { color: var(--accent); font-weight: 600; }

/* ------------------------------------------------------------------ 卡片 */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r3);
  padding: var(--s5);
  box-shadow: var(--lift);
}

.card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s3); margin-bottom: var(--s4);
}

.grid {
  display: grid; gap: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* 权益卡。档位色只给一道顶边——比整块染色克制，而且不影响文字对比度。 */
.ent { border-top: 3px solid var(--accent); }
.ent--plus { border-top-color: #4a9d5f; background: linear-gradient(var(--plus), var(--card) 56px); }
.ent--pro  { border-top-color: #c08a2e; background: linear-gradient(var(--pro), var(--card) 56px); }
.ent--off  { border-top-color: var(--line); opacity: .72; }

.ent-when { font-size: 24px; font-weight: 650; letter-spacing: -.02em; }

/* ------------------------------------------------------------------ 按钮 */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s2);
  min-height: 42px; padding: 0 var(--s5);
  border: 1px solid transparent; border-radius: var(--r-pill);
  background: var(--accent); color: var(--on-accent);
  font: inherit; font-weight: 600; font-size: 15px;
  cursor: pointer;
  /* 悬停轻抬、按下回落。已批准的那条规则。 */
  transition: background var(--quick), transform var(--quick), box-shadow var(--quick);
}
.btn:hover { background: var(--accent-ink); color: var(--on-accent); text-decoration: none;
             transform: translateY(-1px); box-shadow: var(--lift); }
.btn:active { transform: translateY(0); box-shadow: none; }

.btn--ghost { background: transparent; color: var(--accent); border-color: var(--line); }
.btn--ghost:hover { background: var(--accent-soft); color: var(--accent-ink); }

.btn--quiet { background: transparent; color: var(--gray); border-color: transparent;
              min-height: 34px; padding: 0 var(--s3); font-weight: 500; font-size: 14px; }
.btn--quiet:hover { background: var(--paper); color: var(--ink); }

.btn--block { width: 100%; }

/* 主行动按钮。只用在一页里**唯一最重要**的那一个上。 */
.btn--big { min-height: 48px; padding: 0 var(--s6); font-size: 16px; }

/* 禁用的东西**不隐藏**，灰着并在旁边解释。
 * 用户要能看到「这里有个功能，只是现在不能用」。 */
.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--paper); color: var(--faint);
  border-color: var(--line); cursor: not-allowed;
  transform: none; box-shadow: none;
}

.btn-row { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; }

/* ------------------------------------------------------------------ 提示条 */

.note {
  border: 1px solid var(--line); border-left: 3px solid var(--gray);
  border-radius: var(--r1);
  background: var(--paper); color: var(--ink);
  padding: var(--s3) var(--s4); font-size: 14px;
}
.note--good { border-left-color: var(--accent); background: var(--accent-soft); }
.note--warn { border-left-color: var(--warn); background: var(--warn-soft); color: var(--warn); }
.note--bad  { border-left-color: var(--danger); background: var(--danger-soft); color: var(--danger); }

.tag {
  display: inline-flex; align-items: center; gap: var(--s1);
  padding: 2px var(--s2); border-radius: var(--r-pill);
  background: var(--paper); color: var(--gray);
  font-size: 12px; font-weight: 600;
}
.tag--good { background: var(--accent-soft); color: var(--accent-ink); }
.tag--warn { background: var(--warn-soft); color: var(--warn); }
.tag--bad  { background: var(--danger-soft); color: var(--danger); }

/* ------------------------------------------------------------------ 表单 */

.field { display: block; }
.field > span { display: block; margin-bottom: var(--s2); font-size: 14px; font-weight: 600; }

input[type=text], input[type=email], input[type=password] {
  width: 100%; min-height: 42px; padding: 0 var(--s3);
  border: 1px solid var(--line); border-radius: var(--r1);
  background: var(--card); color: var(--ink);
  font: inherit;
  transition: border-color var(--quick), box-shadow var(--quick);
}
input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
input::placeholder { color: var(--faint); }

.hint { margin-top: var(--s2); font-size: 13px; color: var(--gray); }

/* ------------------------------------------------------------------ 表格 */

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; font-size: 13px; font-weight: 600; color: var(--gray);
  padding: 0 0 var(--s2); border-bottom: 1px solid var(--line);
}
td { padding: var(--s3) 0; border-bottom: 1px solid var(--line); vertical-align: baseline; }
tr:last-child td { border-bottom: none; }

/* ------------------------------------------------------------------ 折叠 */

/* 下拉和折叠全部用原生 <details>——不写 JS。 */
details > summary {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: var(--s1);
  color: var(--gray); font-size: 14px;
}
details > summary::-webkit-details-marker { display: none; }
details > summary::after { content: "⌄"; font-size: 15px; line-height: 1; }
details[open] > summary::after { content: "⌃"; }
details > summary:hover { color: var(--accent); }
details > .body { margin-top: var(--s3); }

/* 头像菜单。<details> 做下拉：没有 JS，点外面不会自动关——
 * 这是原生能力的代价，换来的是零脚本。移动端上它就地展开，更好用。 */
.menu { position: relative; }
.menu > summary { color: var(--ink); font-weight: 500; }
.menu-panel {
  position: absolute; right: 0; top: calc(100% + var(--s2)); z-index: 10;
  min-width: 160px; padding: var(--s2);
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r2); box-shadow: var(--float);
}
.menu-panel a {
  display: block; padding: var(--s2) var(--s3); border-radius: var(--r1);
  color: var(--ink); font-size: 14px;
}
.menu-panel a:hover { background: var(--paper); text-decoration: none; }
.menu-panel .btn { width: 100%; justify-content: flex-start; }

/* ------------------------------------------------------------------ 落地页 */

.hero { padding: var(--s7) 0 var(--s5); }
.hero h1 {
  font-size: 40px; letter-spacing: -.03em; line-height: 1.15;
  margin-bottom: var(--s4);
}
.hero .lead {
  font-size: 17px; color: var(--gray); max-width: 46ch;
  margin-bottom: var(--s6);
}

/* ------------------------------------------------------------------ 响应式 */

/* 验收宽度沿用 1440 / 390 / 320。 */
@media (max-width: 767px) {
  .page { padding: var(--s4) var(--s4) var(--s7); }
  .top-in { padding: 0 var(--s4); gap: var(--s3); }
  .top-nav { gap: var(--s3); font-size: 13px; }
  h1 { font-size: 23px; }
  .hero { padding: var(--s5) 0 var(--s4); }
  .hero h1 { font-size: 28px; }
  .hero .lead { font-size: 15px; margin-bottom: var(--s5); }
  .grid { grid-template-columns: 1fr; }
  /* 「进入聊天」在手机上全宽并且在首屏——PRD 03 的硬要求。 */
  .ent .btn { width: 100%; }
  /* 手机上下拉菜单就地展开：绝对定位的浮层在小屏上容易出屏幕外。 */
  .menu-panel { position: static; box-shadow: none; min-width: 0; }
}

@media (max-width: 360px) {
  .page { padding: var(--s3) var(--s3) var(--s6); }
}