/* ==========================================================================
   skin-bauhaus.css — 皮肤 L「包豪斯·魏玛练习册」（specs/028，概念展板 L 落地）
   --------------------------------------------------------------------------
   一句话：只准圆、方、三角，只准红黄蓝黑 —— 与售票亭的厚黑粗野正相反，
   这里全部是 1px 精确细线，而且**不许用阴影假装立体**（--shadow-* 一律退化成发丝环）。

   本档三条自己的账：
     1. "零投影"不等于"零层级"：分层全靠 1px 精确细线 + 反相底色，
        所以选中/未选中必须真的换底色（026 红线），不能只改字色。
     2. 动效是机械的：linear 与 steps(4)，周期全部 ≤14s（027 守闸 M3b 钉振幅/周期）。
     3. 亮档金底深字进暗档会反噬（024 与 027 各踩过一次）：暗档每条选中态都重写。
   ========================================================================== */

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../../assets/fonts/jost-latin.woff2") format("woff2");
}

/* ---------- 1. 亮档 token：画布白 × 三原色 × 墨黑 ---------- */
html[data-skin="bauhaus"] {
  --paper: #F2F0EA;
  --paper-2: #FFFFFF;
  --paper-3: #E7E4DB;
  --ink: #16181C;
  --ink-soft: #3E434B;
  --ink-faint: #505660;              /* paper-3 上实算 5.04（027 首版 4.46 不过线） */

  --vermillion: #C8102E;             /* 包豪斯红：#FFF 字 5.88 ✓ */
  --pine: #0B4EA2;                   /* 包豪斯蓝：#FFF 字 8.00 ✓ */
  --pine-deep: #073A7C;
  --gold: #EAB308;                   /* 包豪斯黄：只配深字 */

  --line: rgba(22, 24, 28, 0.42);
  --line-soft: rgba(22, 24, 28, 0.22);

  --dot: rgba(22, 24, 28, 0.045);
  --tape: rgba(234, 179, 8, 0.55);
  --scrim: rgba(22, 24, 28, 0.55);
  --on-accent: #FFFFFF;
  --on-tag: #FFFFFF;
  --vermillion-soft: rgba(200, 16, 46, 0.34);
  --flow-night: #0B4EA2;
  --check-idle: #505660;
  --thumb-paper: #FFFFFF;

  /* 佛拉德：不许用阴影假装立体 —— 全部退化成 1px 发丝环 */
  --shadow-paper: 0 0 0 1px rgba(22, 24, 28, 0.34);
  --shadow-lift: 0 0 0 1px rgba(22, 24, 28, 0.5);
  --shadow-tag: 0 0 0 1px rgba(22, 24, 28, 0.4);
  --shadow-thumb: 0 0 0 1px rgba(22, 24, 28, 0.4);

  --font-display: "Jost", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;

  /* 形：方是方、圆是圆，禁止"介于两者之间"的四不像 */
  --r-sm: 0px;
  --r-md: 0px;
  --r-card: 0px;
  --r-btn: 999px;
}

/* ---------- 2. 背景：混凝土几何实拍 + 一个大圆一条准线 ---------- */
html[data-skin="bauhaus"] .flow-canvas { display: none; }
html[data-skin="bauhaus"] body::after {
  background-image:
    radial-gradient(circle at 78% 16%, rgba(200, 16, 46, 0.13) 0 15%, transparent 15.4%),
    linear-gradient(48deg, transparent 0 46.6%, rgba(11, 78, 162, 0.14) 46.6% 47.4%, transparent 47.4%),
    linear-gradient(rgba(242, 240, 234, 0.90), rgba(231, 228, 219, 0.94)),
    url("../../assets/skins/bauhaus-bg.jpg");
  background-size: auto, auto, auto, cover;
  background-repeat: no-repeat;
  background-position: 0 0, center, center, center 30%;
}

/* ---------- 3. 组件：精确细线 + 反相选中（容器一律无外框，026 红线） ---------- */
html[data-skin="bauhaus"] .card {
  background: #FFFFFF;
  border: 1px solid rgba(22, 24, 28, 0.34);
  box-shadow: none;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
}
html[data-skin="bauhaus"] .chip {
  background: #FFFFFF;
  color: var(--ink);
  border: 1px solid rgba(22, 24, 28, 0.34);
  border-radius: 0;
}
html[data-skin="bauhaus"] .chip[aria-pressed="true"] {
  background: #16181C;
  color: #FFFFFF;
  border-color: #16181C;
}
html[data-skin="bauhaus"] .seg { background: transparent; border: none; }
html[data-skin="bauhaus"] .seg-item { border: none; border-radius: 0; }
html[data-skin="bauhaus"] .seg-item[aria-pressed="true"] { background: #C8102E; color: #FFFFFF; box-shadow: inset 0 -4px 0 #16181C; }
html[data-skin="bauhaus"] .seg-item[aria-selected="true"] { background: #C8102E; color: #FFFFFF; box-shadow: inset 0 -4px 0 #16181C; }
html[data-skin="bauhaus"] .seg-item[aria-pressed="true"] .k { color: #FFFFFF; }
html[data-skin="bauhaus"] .seg-item[aria-selected="true"] .k { color: #FFFFFF; }

html[data-skin="bauhaus"] .tile {
  background: #FFFFFF;
  border: 2px solid #16181C;
  border-radius: 50%;
}
html[data-skin="bauhaus"] .tile[aria-pressed="true"] {
  background: #0B4EA2;
  color: #FFFFFF;
  border-color: #073A7C;
}
html[data-skin="bauhaus"] .tile[aria-pressed="true"] .mark { color: #FFFFFF; }
html[data-skin="bauhaus"] .tile[aria-pressed="true"] .label,
html[data-skin="bauhaus"] .tile[aria-pressed="true"] .tiny,
html[data-skin="bauhaus"] .tile[aria-pressed="true"] .faint { color: #FFFFFF; opacity: 1; }

html[data-skin="bauhaus"] .btn { border: none; font-weight: 500; letter-spacing: 0.04em; border-radius: 999px; }
html[data-skin="bauhaus"] .btn-primary { background: var(--pine); color: #FFFFFF; }
html[data-skin="bauhaus"] .btn-accent { background: var(--vermillion); color: var(--on-accent); }
html[data-skin="bauhaus"] .btn-ghost { background: #FFFFFF; color: var(--ink); box-shadow: inset 0 0 0 1px #16181C; }
html[data-skin="bauhaus"] .btn-quiet { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }

html[data-skin="bauhaus"] .tier-cell { background: #FFFFFF; border: 1px solid rgba(22, 24, 28, 0.34); border-radius: 0; }
html[data-skin="bauhaus"] .tier-cell[aria-pressed="true"] {
  background: #EAB308;
  color: #16181C;
  border-color: #16181C;
  box-shadow: inset 0 0 0 2px #16181C;
}
html[data-skin="bauhaus"] .tier-cell[aria-pressed="true"] .v { color: #16181C; }
html[data-skin="bauhaus"] .tier-cell[aria-pressed="true"] .k { color: #3D3413; }

/* 几何无衬线：这是练习册，不是标语 */
html[data-skin="bauhaus"] .head h1,
html[data-skin="bauhaus"] .q-title,
html[data-skin="bauhaus"] .ticket-title,
html[data-skin="bauhaus"] .persona-title {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.02em;
}
html[data-skin="bauhaus"] .q-num { font-family: var(--font-display); font-size: 30px; font-weight: 600; color: var(--ink); }
html[data-skin="bauhaus"] .eyebrow { letter-spacing: 0.18em; text-transform: uppercase; }

/* 票根 = 模数卡：齿孔是正圆，章是正方形，都不歪 */
html[data-skin="bauhaus"] .ticket {
  border: 1px solid rgba(22, 24, 28, 0.34);
  border-radius: 0;
  background: #FFFFFF;
  box-shadow: none;
}
html[data-skin="bauhaus"] .ticket-stamp {
  border: 2px solid #16181C;
  border-radius: 0;
  color: #FFFFFF;
  background: var(--vermillion);
  font-weight: 600;
}
html[data-skin="bauhaus"] .ticket-blessing {
  background: #DCE7F5;
  border: 1px solid rgba(11, 78, 162, 0.5);
  border-radius: 0;
  color: var(--ink);
  font-style: normal;
}
html[data-skin="bauhaus"] .family-tag {
  background: #16181C;
  color: #FFFFFF;
  border-radius: 0;
  box-shadow: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

html[data-skin="bauhaus"] .progress { height: 6px; background: repeating-linear-gradient(90deg, #D9D5C9 0 10px, #E7E4DB 10px 20px); border-radius: 0; }
html[data-skin="bauhaus"] .progress > i { background: var(--pine); border-radius: 0; }
html[data-skin="bauhaus"] .lib-bar { background: linear-gradient(180deg, #C8102E 0 33%, #EAB308 33% 66%, #0B4EA2 66%); }
html[data-skin="bauhaus"] .badge { border-radius: 50%; border: 2px solid #16181C; background: #FFFFFF; }
html[data-skin="bauhaus"] .badge.is-owned { background: var(--gold); color: #16181C; box-shadow: 0 0 0 4px rgba(22, 24, 28, 0.14); }
html[data-skin="bauhaus"] .toast { background: #16181C; color: #FFFFFF; border-radius: 0; letter-spacing: 0.04em; }
html[data-skin="bauhaus"] .level-num { color: var(--pine); font-family: var(--font-display); }
html[data-skin="bauhaus"] .radar__ring-stroke { stroke: rgba(22, 24, 28, 0.4); stroke-width: 1; }
html[data-skin="bauhaus"] .radar__dot, html[data-skin="bauhaus"] .radar__me-dot { stroke: #FFFFFF; stroke-width: 1.5; }

/* ---------- 4. tabbar = 墨黑底板 + 浅色升起半圆 ---------- */
/* 027 实测过一版反例：选中胶囊用 #16181C 压在 #16181C 的栏上，只靠字色变白区分
   —— 违反 026「选中/未选中底色必须不同」。这里选中改成**浅色升起**，与栏体必然不同色。 */
html[data-skin="bauhaus"] .dock { border-top: 0; background: #FFFFFF; }
html[data-skin="bauhaus"] .tabbar { background: #16181C; border-top: 0; }
html[data-skin="bauhaus"] .tab { color: #8A9099; }
html[data-skin="bauhaus"] .tab[aria-current="page"] { color: #16181C; background: #F2F0EA; border-radius: 50% 50% 0 0; }
html[data-skin="bauhaus"] .tab .i { font-size: 0; }
html[data-skin="bauhaus"] .tab .i::before {
  font-family: "Segoe UI Symbol", ui-monospace, monospace;
  font-size: 1.1rem;
  line-height: 1;
}
html[data-skin="bauhaus"] .tab[data-tab="home"] .i::before    { content: "\25CF"; }  /* ● */
html[data-skin="bauhaus"] .tab[data-tab="quest"] .i::before   { content: "\25B2"; }  /* ▲ */
html[data-skin="bauhaus"] .tab[data-tab="library"] .i::before { content: "\25A0"; }  /* ■ */
html[data-skin="bauhaus"] .tab[data-tab="profile"] .i::before { content: "\25C6"; }  /* ◆ */
/* 031：第五枚「广场」——倒三角（▽ 几何语系，同档不重） */
html[data-skin="bauhaus"] .tab[data-tab="plaza"] .i::before  { content: "\25BD"; }

/* ---------- 5. 暗色变体：夜间的包豪斯展馆（逐条重写选中态） ---------- */
@media (prefers-color-scheme: dark) {
  html[data-skin="bauhaus"] {
    --paper: #14161A;
    --paper-2: #1C1F24;
    --paper-3: #262A31;
    --ink: #F2F0EA;
    --ink-soft: #B6BCC5;
    --ink-faint: #969DA7;

    --vermillion: #EE4A62;           /* 暗档配深字：#14161A 字实算 4.99 ✓ */
    --pine: #5B9BE0;
    --pine-deep: #8FBAEA;
    --gold: #EAB308;

    --line: rgba(242, 240, 234, 0.42);
    --line-soft: rgba(242, 240, 234, 0.22);

    --dot: rgba(242, 240, 234, 0.05);
    --tape: rgba(234, 179, 8, 0.34);
    --scrim: rgba(0, 0, 0, 0.66);
    --on-accent: #14161A;
    --on-tag: #14161A;
    --vermillion-soft: rgba(238, 74, 98, 0.4);
    --flow-night: #5B9BE0;
    --check-idle: #969DA7;
    --thumb-paper: #1C1F24;

    --shadow-paper: 0 0 0 1px rgba(242, 240, 234, 0.34);
    --shadow-lift: 0 0 0 1px rgba(242, 240, 234, 0.5);
    --shadow-tag: 0 0 0 1px rgba(242, 240, 234, 0.4);
    --shadow-thumb: 0 0 0 1px rgba(242, 240, 234, 0.4);
  }
  html[data-skin="bauhaus"] body::after {
    background-image:
      radial-gradient(circle at 78% 16%, rgba(238, 74, 98, 0.14) 0 15%, transparent 15.4%),
      linear-gradient(48deg, transparent 0 46.6%, rgba(234, 179, 8, 0.12) 46.6% 47.4%, transparent 47.4%),
      linear-gradient(rgba(20, 22, 26, 0.92), rgba(28, 31, 36, 0.95)),
      url("../../assets/skins/bauhaus-bg.jpg");
    background-size: auto, auto, auto, cover;
  }
  html[data-skin="bauhaus"] .card,
  html[data-skin="bauhaus"] .ticket,
  html[data-skin="bauhaus"] .chip,
  html[data-skin="bauhaus"] .tile,
  html[data-skin="bauhaus"] .tier-cell { background: #1C1F24; border-color: rgba(242, 240, 234, 0.34); }
  html[data-skin="bauhaus"] .chip[aria-pressed="true"] { background: #F2F0EA; color: #14161A; border-color: #F2F0EA; }
  html[data-skin="bauhaus"] .seg { background: transparent; border: none; }
  html[data-skin="bauhaus"] .seg-item { border: none; }
  html[data-skin="bauhaus"] .seg-item[aria-pressed="true"] { background: #EE4A62; color: #14161A; box-shadow: inset 0 -4px 0 #F2F0EA; }
  html[data-skin="bauhaus"] .seg-item[aria-selected="true"] { background: #EE4A62; color: #14161A; box-shadow: inset 0 -4px 0 #F2F0EA; }
  html[data-skin="bauhaus"] .seg-item[aria-pressed="true"] .k { color: #14161A; }
  html[data-skin="bauhaus"] .seg-item[aria-selected="true"] .k { color: #14161A; }
  html[data-skin="bauhaus"] .tile[aria-pressed="true"] { background: #5B9BE0; color: #14161A; border-color: #8FBAEA; }
  html[data-skin="bauhaus"] .tile[aria-pressed="true"] .mark { color: #14161A; }
  html[data-skin="bauhaus"] .tile[aria-pressed="true"] .label,
  html[data-skin="bauhaus"] .tile[aria-pressed="true"] .tiny,
  html[data-skin="bauhaus"] .tile[aria-pressed="true"] .faint { color: #14161A; }
  html[data-skin="bauhaus"] .btn-primary { background: #5B9BE0; color: #14161A; }
  html[data-skin="bauhaus"] .btn-accent { background: #EE4A62; color: #14161A; }
  html[data-skin="bauhaus"] .btn-ghost { background: #1C1F24; color: #F2F0EA; box-shadow: inset 0 0 0 1px #F2F0EA; }
  html[data-skin="bauhaus"] .tier-cell[aria-pressed="true"] { background: #EAB308; color: #161005; border-color: #F2F0EA; box-shadow: inset 0 0 0 2px #F2F0EA; }
  html[data-skin="bauhaus"] .tier-cell[aria-pressed="true"] .v { color: #161005; }
  html[data-skin="bauhaus"] .tier-cell[aria-pressed="true"] .k { color: #3D3413; }
  html[data-skin="bauhaus"] .tab { color: #8C949E; }
  html[data-skin="bauhaus"] .tab[aria-current="page"] { background: #F2F0EA; color: #14161A; }
  html[data-skin="bauhaus"] .q-num { color: #F2F0EA; }
  html[data-skin="bauhaus"] .family-tag { background: #F2F0EA; color: #14161A; }
  html[data-skin="bauhaus"] .badge.is-owned { background: #EAB308; color: #161005; border-color: #F2F0EA; }
}

/* ---------- 6. specs/025 支线页特色装饰 + 本档动效 ----------
   记忆点：页面上下缘各有一条三原色模数带，右上角一个圆在做 90° 步进旋转
   （机械感来自 steps()，不是弹性）。纪律：只挂 .quest-body、z-index:-1、pointer-events:none。 */
html[data-skin="bauhaus"] .quest-body::before,
html[data-skin="bauhaus"] .quest-body::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  left: -12px;
  right: -12px;
}
html[data-skin="bauhaus"] .quest-body::before {
  top: 0;
  height: 96px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--vermillion) 78%, transparent) 0 33.3%,
      color-mix(in srgb, var(--gold) 84%, transparent) 33.3% 66.6%,
      color-mix(in srgb, var(--pine) 78%, transparent) 66.6%);
  -webkit-mask: linear-gradient(#000 0 62%, transparent);
  mask: linear-gradient(#000 0 62%, transparent);
  animation: bauhaus-slide 6s linear infinite;
}
@keyframes bauhaus-slide {
  from { transform: translateX(-120px); }
  to   { transform: translateX(0); }
}
html[data-skin="bauhaus"] .quest-body::after {
  bottom: 0;
  height: 40%;
  background:
    linear-gradient(rgba(22, 24, 28, 0.16) 1px, transparent 1px) 0 0/100% 16px,
    linear-gradient(90deg, rgba(22, 24, 28, 0.16) 1px, transparent 1px) 0 0/16px 100%;
  -webkit-mask: linear-gradient(transparent, #000 60%);
  mask: linear-gradient(transparent, #000 60%);
  animation: bauhaus-tick 3.2s steps(2, end) infinite;
}
@keyframes bauhaus-tick {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-22px); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-skin="bauhaus"] .quest-body::before,
  html[data-skin="bauhaus"] .quest-body::after { animation: none; opacity: .6; transform: none; }
}