/* ============================================================
   ob-skin.css —— 给上游 dashboard 套二创的视觉语言
   ------------------------------------------------------------
   只改「设计变量」：字体、配色、圆角。**不碰任何布局、结构、行为。**

   上游 frontend/dashboard.html 在磁盘上一个字节不动 —— 本文件由
   src/web/folio_compat.py 在响应时注入一行 <link>，git pull 依旧干净。

   两件事：
   1) 字体本地化。上游从 fonts.googleapis.com 拉 Cormorant Garamond /
      Noto Serif SC，国内网络拉不到就退回系统字体（症状：衬线体没了）。
      二创把这批字体打包成了本地 woff2，这里指过去。
   2) 配色换成二创默认主题「月光紫」，色值取自
      frontend/v2/theme-system.js 的 PRESETS[moonlight-purple]
      与 v2/cells/index.html 的 :root。
   ============================================================ */

/* ---------- 1. 字体：指向二创打包的本地 woff2 ---------- */
/* 二创原页面有 373 条 @font-face（按 unicode-range 细分到每个语种块）。
   这里只搬「基本拉丁」那一段，正体 + 斜体各三档字重 —— 上游标题用的是
   Cormorant 斜体，第一版我只塞了正体，结果衬线斜体没出来（实测踩过）。
   不搬全部 373 条：那会和二创自己页面的字体表打架。 */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/v2/assets/skin/cormorant-italic-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('/v2/assets/skin/cormorant-italic-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('/v2/assets/skin/cormorant-italic-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/v2/assets/skin/cormorant-normal-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/v2/assets/skin/cormorant-normal-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/v2/assets/skin/cormorant-normal-600.woff2') format('woff2');
}

/* 中文衬线：Noto Serif SC 体量大，交给系统字体兜底更稳
   （macOS 宋体 / Windows 宋体都能接住衬线观感）。 */

/* ---------- 2. 配色：二创「月光紫」映射到上游的 26 个变量 ---------- */
:root {
  /* 底 / 面 —— 上游暖米白 → 二创冷白 */
  --bg:              #f4f3f7;
  --bg-gradient:     #f4f3f7;
  --surface:         #ffffff;
  --surface-solid:   #f8f7fb;

  /* 描边 —— 二创用极淡的墨色透明度，比上游的实色边更轻 */
  --border:          rgba(26, 25, 34, 0.08);
  --border-strong:   rgba(26, 25, 34, 0.16);

  /* 文字 —— 二创的 ink 三档 */
  --text:            #1a1922;
  --text-dim:        color-mix(in oklab, #1a1922 65%, #f4f3f7 35%);
  --text-light:      color-mix(in oklab, #1a1922 48%, #f4f3f7 52%);

  /* 强调色 —— 赭金 → 月光紫 */
  --accent:          #6e4f9a;
  --accent-light:    #8265b3;
  --accent-glow:     rgba(110, 79, 154, 0.22);

  /* 语义色 —— 二创的玫瑰/鼠尾草，比上游的红绿柔和 */
  --positive:        #8a8898;
  --negative:        #b06998;
  --warning:         #d4a85f;

  /* 阴影 —— 冷调，跟着新底色走 */
  --shadow-light:      rgba(255, 255, 255, 0.9);
  --shadow-dark:       rgba(26, 25, 34, 0.14);
  --shadow-dark-subtle:rgba(26, 25, 34, 0.07);

  /* LCD 小屏（上游首页那块状态屏） */
  --lcd:             #e8e6f0;
  --lcd-text:        #2a1755;
  --lcd-dim:         #6e5f8a;
  --lcd-glow:        rgba(42, 23, 85, 0.16);

  /* 圆角 —— 二创的 r-xl / r-lg / r-md */
  --shell-radius:    22px;
  --radius-inner:    16px;
  --radius-control:  10px;
}

/* ============================================================
   第二版 —— 按上游真实类名精确改，不再用 [class*=] 猜
   （第一版用宽选择器，把 .sb-card 这种自带 border-left 的元素又套了
     一圈完整边框 → 她看到「一个框套一个框」。教训：先读类名再写规则。）
   ============================================================ */

/* ---------- ① 语义色：把「警告」从土黄挪进紫玫系 ---------- */
/* 上游 --warning 是 #B89762 土黄，全站的告警条、sb-card 左边线都吃它。
   二创的对应色（--amber）本身就是紫的，跟着走。 */
:root {
  --warning: #8265b3;
  --positive: #8a8898;
  --negative: #b06998;
}

/* ---------- ② 写死的暖色，逐个点名 ---------- */
.star-active {
  background: color-mix(in oklab, var(--accent) 10%, var(--surface) 90%) !important;
  color: var(--accent) !important;
}
#sec-backup {
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--accent) 5%, transparent),
    var(--surface)) !important;
}

/* ---------- ③ 压平拟物阴影（只压阴影，不加边框） ---------- */
/* 上游全站 86 处 inset/outset 阴影。二创是纯平 + 一根细线。
   这里只把阴影归零，边框交给下面按类名单独给 —— 避免重复套框。 */
.header, .tabs, .tab, .config-section, .bucket-row, .sb-card, .tool-card,
.sub-card, .self-entry, .detail-panel, .detail-panel-header, .danger-modal,
.filter-btn, .btn-primary, .btn-secondary, .btn-danger, .pager-btn,
.settings-subtab, .flow-step, .breath-flow, .breath-info, .progress-track,
.icon-btn, .hw-switch, .model-list-dropdown, .chick-tip, .self-fab,
input, textarea, select, button {
  box-shadow: none !important;
}

/* ---------- ④ 卡片：白面 + 一根细线（二创的做法） ---------- */
.config-section, .bucket-row, .tool-card, .sub-card, .self-entry,
.breath-info, .breath-flow, .danger-modal, .detail-panel {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-inner) !important;
}

/* sb-card 保留它自己的左边线（那是状态色指示），只补右边三面的淡线 */
.sb-card {
  background: var(--surface) !important;
  border-top: 1px solid var(--border) !important;
  border-right: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 var(--radius-control) var(--radius-control) 0 !important;
}

/* ---------- ⑤ 按钮/控件 ---------- */
.filter-btn, .btn-secondary, .pager-btn, .settings-subtab, .icon-btn, .tab {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-control) !important;
}
.filter-btn.active, .tab.active, .settings-subtab.active, .self-filter-btn.active {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}
.btn-primary {
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-control) !important;
}
input, textarea, select, .pager-input {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-control) !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-glow) !important;
}

/* ---------- ⑥ 标题换衬线斜体 ---------- */
/* 上游 h2 写死 'Share Tech Mono'（Google Fonts，国内拉不到）。
   二创的标题是 Cormorant 斜体 —— 她要的就是那个味道。 */
h1, h2, h3 {
  font-family: 'Cormorant Garamond', 'Noto Serif SC', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 600 !important;
}
/* 品牌名保持等宽（那是标识），只换成本地拿得到的等宽 */
.header h1, .ob-brand {
  font-family: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, monospace !important;
  font-style: normal !important;
}

/* ---------- ⑦ logo 调色 ---------- */
/* 不改上游的 icon.svg，显示时把暖橙旋成月光紫 */
.ob-logo, img[src*="icon.svg"] {
  /* 图标文件本身已换成紫色版（见 folio_compat 的 /static/*.svg 接管），
     不再叠 hue-rotate，否则会转两次。 */
}

/* ============================================================
   第三版 —— 按 id / 真实类名收尾
   ============================================================ */

/* ① 两条顶栏：背景是写死的 rgba，变量盖不到，按 id 点名 */
#embed-warn-banner {
  background: color-mix(in oklab, var(--accent) 7%, var(--surface) 93%) !important;
  border-bottom: 1px solid var(--border) !important;
}
#status-banner {
  background: color-mix(in oklab, var(--accent) 4%, var(--surface) 96%) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* ② 修我自己弄坏的：选中态里的英文副标题看不见了
   .en/.tab-en/.sec-en 用 --text-light（浅灰），压在紫底上等于隐形。
   选中态下改成半透明白。 */
.tab.active .en, .tab.active .tab-en, .tab.active .sec-en,
.filter-btn.active .en, .settings-subtab.active .en,
.settings-subtab.active .tab-en, .self-filter-btn.active .en {
  color: rgba(255, 255, 255, 0.72) !important;
  opacity: 1 !important;
}

/* ③ 阴影兜底：前一版按类名列，漏了设置/日志/信/模拟那几页。
   这里全局归零 —— 只动阴影，**不加边框**（加边框会套出双框，踩过）。 */
*, *::before, *::after {
  box-shadow: none !important;
}
/* 聚焦光晕是必要的可用性反馈，单独放行 */
input:focus, textarea:focus, select:focus, button:focus-visible {
  box-shadow: 0 0 0 3px var(--accent-glow) !important;
}

/* ④ 记忆网络画布：网格底色 */
#network-canvas, .network-canvas, canvas {
  background-color: var(--bg) !important;
}