/* ═══════════════════════════════════════════════════════════════════════
   Chatarot Design System — Quiet Console (production tokens)
   ─────────────────────────────────────────────────────────────────────
   ⚠️ 这是 design-system/colors_and_type.css 的「生产 inert 子集」。
   保留 :root 变量 + .icon 工具类 + web font @import。
   故意不含 body/html/h1-h3/p/a/hr 的全局元素样式。

   单一 source of truth：design-system/colors_and_type.css。
   ═══════════════════════════════════════════════════════════════════════ */

/* Quiet Console 字体栈 — 由 Step 4.5 Phase 15 加入 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600&family=IBM+Plex+Mono:wght@300;400;500;600&family=Noto+Sans+SC:wght@300;400;500&family=Noto+Sans+JP:wght@300;400;500&display=swap');

:root {
  /* ───────────────────────── COLOR · BACKGROUNDS ─────────────────────── */
  --bg-cosmic:      #000000;            /* Mode A — pure black, the void */
  --bg-content:     #08090c;            /* Mode B — barely-lifted cool black */
  --bg-surface:     #12141a;            /* panel / card / drawer base */
  --bg-surface-2:   #181b22;            /* nested surface, hover */
  --bg-glass:       rgba(18, 20, 26, 0.72);
  --bg-glass-strong:rgba(8, 9, 12, 0.84);
  --backdrop-blur:  blur(20px) saturate(1.1);

  /* ───────────────────────── COLOR · TEXT ────────────────────────────── */
  --text-primary:   #ECE9E1;            /* cool ivory — DS title-card white */
  --text-secondary: rgba(236, 233, 225, 0.62);
  --text-subtle:    rgba(236, 233, 225, 0.38);
  --text-faint:     rgba(236, 233, 225, 0.22);
  --text-mono:      #B8BAC0;            /* cooler grey for ID / data */

  /* ───────────────────────── COLOR · BORDERS ─────────────────────────── */
  --border-hairline: rgba(236, 233, 225, 0.08);
  --border-subtle:   rgba(236, 233, 225, 0.16);
  --border-active:   rgba(236, 233, 225, 0.40);
  --border-strong:   rgba(236, 233, 225, 0.64);

  /* ───────────────────────── COLOR · ACCENT ──────────────────────────── */
  --accent-ivory:    #ECE9E1;
  --accent-signal:   #C9A66B;           /* warm gold — system ready / done */
  --accent-warning:  #D96B5C;           /* muted brick — danger / error */
  --accent-success:  #8AA67A;           /* moss green — rare */
  --accent-link:     #ECE9E1;

  /* ───────────────────────── COLOR · GLOW ────────────────────────────── */
  --glow-subtle:  0 0 16px rgba(236, 233, 225, 0.06);
  --glow-halo:    0 0 32px rgba(236, 233, 225, 0.10);
  --glow-signal:  0 0 24px rgba(201, 166, 107, 0.18);
  --glow-warning: 0 0 24px rgba(217, 107, 92, 0.22);

  /* ───────────────────────── TYPE · FAMILIES ─────────────────────────── */
  /* 字体 stack 中含 -apple-system / Helvetica Neue 等系统 fallback，
     即使 Inter / Plex Mono 未加载也能 render（Step 4.4+ 才按需 import）。 */
  /* PingFang SC / Hiragino 在 Inter 之后、Noto 之前 — Mac 走系统真细体（200 weight），其他系统 fallback */
  --font-sans: 'Inter', 'PingFang SC', 'Hiragino Sans GB', 'Hiragino Kaku Gothic ProN',
               'Noto Sans SC', 'Noto Sans JP', -apple-system, BlinkMacSystemFont,
               'Helvetica Neue', sans-serif;
  --font-mono: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* ───────────────────────── TYPE · SCALE ────────────────────────────── */
  --t-display-size:  48px;  --t-display-lh:  1.1;  --t-display-w: 200; --t-display-tracking: -0.01em;
  --t-h1-size:       32px;  --t-h1-lh:       1.2;  --t-h1-w:      400; --t-h1-tracking:      -0.005em;
  --t-h2-size:       24px;  --t-h2-lh:       1.3;  --t-h2-w:      400; --t-h2-tracking:       0;
  --t-body-size:     16px;  --t-body-lh:     1.6;  --t-body-w:    400; --t-body-tracking:     0;
  --t-caption-size:  13px;  --t-caption-lh:  1.4;  --t-caption-w: 400; --t-caption-tracking:  0;
  --t-micro-size:    11px;  --t-micro-lh:    1.4;  --t-micro-w:   500; --t-micro-tracking:    0.10em;

  /* ───────────────────────── SPACE / RADIUS ──────────────────────────── */
  --space-0:  0;     --space-1:  4px;   --space-2:  8px;   --space-3:  12px;
  --space-4:  16px;  --space-5:  24px;  --space-6:  32px;  --space-7:  48px;
  --space-8:  64px;  --space-9:  96px;

  --radius-0:    0;
  --radius-1:    2px;
  --radius-2:    4px;
  --radius-pill: 999px;

  --shadow-modal:   0 24px 64px rgba(0, 0, 0, 0.72);
  --shadow-popover: 0 12px 32px rgba(0, 0, 0, 0.56);

  /* ───────────────────────── MOTION ──────────────────────────────────── */
  --ease-cinematic: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-quiet:     cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-exit:      cubic-bezier(0.4, 0.0, 1, 1);
  --dur-instant: 150ms;
  --dur-fast:    300ms;
  --dur-base:    400ms;
  --dur-slow:    700ms;
  --dur-cross:   600ms;

  /* ───────────────────────── LAYOUT ──────────────────────────────────── */
  --measure: 65ch;
  --content-max: 1080px;
  --gutter: 24px;
  --tap-min: 44px;
}

/* ─────────────────────────────────────────────────────────────────────
   ICONS — currentColor utility（class-only，不影响未使用此类的元素）
   使用方法：
     <span class="icon" style="--mask:url(path/to/foo.svg);
                                width:24px;height:24px"></span>
   父容器的 color token 决定 icon 颜色。
   绝不用 `filter: invert() sepia()`——会渗 sepia 进禁 sepia 调色板。
   ───────────────────────────────────────────────────────────────────── */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  flex-shrink: 0;
  vertical-align: middle;
  /* mask-image 由 caller 通过 inline style 设置，
     避免 CSS var() → url() 在部分浏览器解析失败 */
}

/* ─────────────────────────────────────────────────────────────────────
   Brand pill (Phase 2a) — 左上品牌身份标识
   logomark + CHATAROT.AI mono + ready dot
   ───────────────────────────────────────────────────────────────────── */
.brand-pill {
  /* A1 — 删 pill 边框/底色，brand mark 裸放（icon + 字 + dot），尺寸放大 */
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 4999;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
  transition: opacity var(--dur-fast) var(--ease-quiet);
  isolation: isolate;
}
.brand-pill:hover {
  opacity: 0.85;
}
/* O4 — radial scrim halo + text-shadow 防 3D 卡牌穿过遮挡 */
.brand-pill::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 130%;
  height: 280%;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.4) 40%,
    rgba(0, 0, 0, 0.15) 65%,
    transparent 80%
  );
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
}
.brand-logomark {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  /* logomark.svg stroke is hardcoded #ECE9E1 ivory + gold star — no recolor */
}
.brand-wordmark {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--text-primary);
  text-transform: uppercase;
  /* O1 — 字母边缘暗色发光防漏光 */
  text-shadow:
    0 0 20px rgba(0, 0, 0, 0.85),
    0 0 6px rgba(0, 0, 0, 0.7);
}
.brand-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-signal);
  box-shadow: var(--glow-signal);
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .brand-pill {
    height: 44px;
    gap: 10px;
  }
  .brand-logomark { width: 26px; height: 26px; }
  .brand-wordmark { font-size: 13px; letter-spacing: 0.16em; }
  .brand-status-dot { width: 7px; height: 7px; }
}
@media (max-width: 480px) {
  .brand-pill {
    height: 40px;
  }
  .brand-logomark { width: 24px; height: 24px; }
  .brand-wordmark { font-size: 11px; letter-spacing: 0.12em; }
}

/* ─────────────────────────────────────────────────────────────────────
   Top-right chips wrapper — Phase 2d revised
   两个 chip 通过 wrapper flex 横排，gap 10px 固定，不依赖 JS 算宽
   ───────────────────────────────────────────────────────────────────── */
.top-chips-wrapper {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  z-index: 1002;
  pointer-events: none;     /* 容器不拦截，让 chip 自己 receive */
  align-items: center;
  /* max-width：brand pill 实际占位 (left:20 + brand-pill 宽 + 安全间距 20) */
  /* desktop: brand-pill ≈ 205px (logo32 + gap12 + word16px×11chars≈140 + gap12 + dot8) → 总占位 ~245 */
  max-width: calc(100vw - 260px);
  overflow: hidden;
}
@media (max-width: 768px) {
  .top-chips-wrapper {
    /* 768 brand-pill ≈ 175px → 总占位 ~215 */
    max-width: calc(100vw - 230px);
  }
}
@media (max-width: 480px) {
  .top-chips-wrapper {
    right: 12px;
    gap: 6px;
    /* 480 brand-pill ≈ 186px (logo24+gap10+wordmark11×11×1.12+gap10+dot7) + left:20 → 总占位 ~210
       chip 瘦身后单 chip ~80px，双 chip + gap 6 = 166px，留 4px 安全余量 */
    max-width: calc(100vw - 200px);
  }
}
/* 在 wrapper 内的 chip 不再用自己的 fixed 定位 — 让 flex 接管。
   不用 !important，mini-mode/expanded-mode 后加载，能 override 脱离 wrapper */
.top-chips-wrapper > .tarot-master-selector,
.top-chips-wrapper > .spread-selector {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  bottom: auto;
  transform: none;
  pointer-events: auto;
  flex: 0 1 auto;       /* 允许 shrink，不要 grow */
  min-width: 0;         /* 让内部文字 ellipsis 触发链生效 */
}
/* chip box 严格 overflow:hidden，避免内容溢出视觉撑大 */
.top-chips-wrapper > .tarot-master-selector .current-master-display,
.top-chips-wrapper > .spread-selector .current-spread-display {
  overflow: hidden;
}
/* info block 也允许 shrink，name 自动 ellipsis */
.top-chips-wrapper > .tarot-master-selector .current-master-info,
.top-chips-wrapper > .spread-selector .current-spread-info {
  min-width: 0;
  flex: 1 1 auto;
}

/* ─────────────────────────────────────────────────────────────────────
   Toast 移动端覆盖（toast 用 inline style，需 !important 才能 override）
   保持 TR 位置，只收紧宽度，避免底部 full-width 拉伸难看
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .ds-toast {
    top: 80px !important;          /* chip 下方 (chip 占 top 20-64) */
    bottom: auto !important;
    right: 12px !important;
    left: auto !important;
    min-width: 0 !important;
    max-width: calc(100vw - 24px) !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
  }
  .ds-toast .ds-toast-label {
    font-size: 10px !important;
  }
}