/* Conch 设计系统 —— 我的世界风格。
 *
 * 硬规则（见 docs/issues/0008-mc-design-system.md）：
 *   1. 无圆角。border-radius: 0 全局。这是第一要素。
 *   2. 所有尺寸是 2px 的整数倍。奇数像素在缩放时出现半像素模糊。
 *   3. 硬阴影，blur 一律 0。Minecraft 没有抗锯齿。
 *   4. 浮雕用 inset box-shadow，不用图片。
 *
 * 不含任何 Mojang 素材 —— 不用原版字体、贴图、logo。这是风格致敬，
 * 不是资源搬运。
 *
 * 颜色全部过 WCAG AA（4.5:1），用 scripts/contrast.py 复算，不手算。
 * 原版的石灰 #8b8b8b 配白字只有 3.41:1，不合格，所以面色比原版深。
 */

:root {
  /* 改这一个值，整套控件等比放大。 */
  --mc-bevel: 2px;

  /* 按钮面色：base 6.69:1，hover 5.33:1，都过 AA。
   * hover 必须单独算 —— 调亮就是降对比度，这是最容易漏的一条。 */
  --mc-btn-face: #5c5c5c;
  --mc-btn-face-hover: #6b6b6b;
  --mc-btn-light: #c6c6c6;
  --mc-btn-dark: #373737;

  /* primary 比原版的经验绿 #5b8731（4.24:1，不合格）深一档。 */
  --mc-primary: #4a7a28;
  --mc-primary-hover: #52822d;
  /* danger 是红石红。 */
  --mc-danger: #a82e2e;
  --mc-danger-hover: #b03535;

  --mc-text: #fff;
  --mc-text-shadow: #3f3f3f;
  --mc-title: #ffaa00; /* 原版标题金 */

  /* 面板是原版物品栏的浅灰。它不承载正文，所以可以用原版色。 */
  --mc-panel: #c6c6c6;
  --mc-panel-light: #fff;
  --mc-panel-dark: #555;
  --mc-panel-text: #3f3f3f;

  --mc-bg: #1d1d21;
  --mc-input-bg: #000;

  --mc-font: "Fusion Pixel", "Zpix", ui-monospace, SFMono-Regular, Menlo, monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  /* 规则 1。写成全局是为了让「不出现非 0 圆角」可被 grep 验证。 */
  border-radius: 0;
}

html {
  /* 像素风格最容易牺牲可读性：正文下限 16px。
   * 像素字体在 12px 下笔画会断，像素中文基本不可读。 */
  font-size: 16px;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--mc-font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--mc-text);
  /* 原版设置界面是平铺泥土贴图压暗。不能用 Mojang 贴图，所以用 CSS
   * 生成：深色底 + 细方格噪点，压到几乎看不见。 */
  background-color: var(--mc-bg);
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.02) 0 2px,
      transparent 2px 4px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.15) 0 2px,
      transparent 2px 4px
    );
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px;
}

img {
  max-width: 100%;
  /* 规则 4：位图不被插值模糊。 */
  image-rendering: pixelated;
}

/* --- 按钮：风格核心 --- */

/* 原版结构：纯黑外框 + 石灰面 + 左上内高光 + 右下内暗边 + 白字带硬投影。
 * 按 2 倍像素比放大。 */
.mc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 触摸目标 ≥ 40px。 */
  min-height: 40px;
  padding: 10px 18px;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1;
  color: var(--mc-text);
  text-shadow: var(--mc-bevel) var(--mc-bevel) 0 var(--mc-text-shadow);
  background: var(--mc-btn-face);
  border: var(--mc-bevel) solid #000;
  cursor: pointer;
  text-decoration: none;
  /* 浮雕：左上亮、右下暗。blur 为 0。 */
  box-shadow:
    inset var(--mc-bevel) var(--mc-bevel) 0 0 var(--mc-btn-light),
    inset calc(var(--mc-bevel) * -1) calc(var(--mc-bevel) * -1) 0 0 var(--mc-btn-dark);
}

/* :not(:disabled) 而非裸 :hover —— 否则禁用按钮也会亮，看起来像能点。 */
.mc-btn:hover:not(:disabled) {
  background: var(--mc-btn-face-hover);
  /* 原版悬停就是描白边。 */
  border-color: #fff;
}

/* 按下：浮雕反转，不做位移。位移会引起布局抖动，原版也不位移。 */
.mc-btn:active:not(:disabled) {
  box-shadow:
    inset calc(var(--mc-bevel) * -1) calc(var(--mc-bevel) * -1) 0 0 var(--mc-btn-light),
    inset var(--mc-bevel) var(--mc-bevel) 0 0 var(--mc-btn-dark);
}

/* 原版的键盘导航也是描白边，正好就是可访问的焦点指示。 */
.mc-btn:focus-visible {
  outline: var(--mc-bevel) solid #fff;
  outline-offset: var(--mc-bevel);
}

.mc-btn:disabled {
  /* 2.87:1，刻意不合格：WCAG 1.4.3 豁免禁用控件，而「禁用看起来就该是
   * 灰的」本身是有用信息。登记在 scripts/contrast.py 的豁免项里。 */
  background: #474747;
  color: #8f8f8f;
  text-shadow: none;
  box-shadow: none;
  cursor: not-allowed;
}

/* 变体只换面色，沿用同一套浮雕。 */
.mc-btn--primary {
  background: var(--mc-primary);
}
.mc-btn--primary:hover:not(:disabled) {
  background: var(--mc-primary-hover);
}

.mc-btn--danger {
  background: var(--mc-danger);
}
.mc-btn--danger:hover:not(:disabled) {
  background: var(--mc-danger-hover);
}

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

.mc-btn--small {
  min-height: 40px; /* 触摸目标下限不因「小」而降低 */
  padding: 8px 12px;
  font-size: 0.875rem;
}

/* --- 面板：原版物品栏 --- */

.mc-panel {
  width: 100%;
  max-width: 480px;
  padding: 24px;
  color: var(--mc-panel-text);
  background: var(--mc-panel);
  border: var(--mc-bevel) solid #000;
  box-shadow:
    inset var(--mc-bevel) var(--mc-bevel) 0 0 var(--mc-panel-light),
    inset calc(var(--mc-bevel) * -1) calc(var(--mc-bevel) * -1) 0 0 var(--mc-panel-dark);
}

.mc-panel--wide {
  max-width: 720px;
}

/* --- 标题 --- */

.mc-title {
  margin: 0 0 8px;
  font-size: 2rem;
  line-height: 1.2;
  color: var(--mc-title);
  text-shadow: var(--mc-bevel) var(--mc-bevel) 0 var(--mc-text-shadow);
  text-align: center;
}

.mc-subtitle {
  margin: 0 0 24px;
  font-size: 0.875rem;
  color: #a0a0a0;
  text-align: center;
}

.mc-panel h2 {
  margin: 0 0 16px;
  font-size: 1.25rem;
  color: var(--mc-panel-text);
}

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

.mc-field {
  margin-bottom: 16px;
}

.mc-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--mc-panel-text);
}

/* 输入框：黑面 + 内凹浮雕（高光暗边与按钮反向）+ 白字。 */
.mc-input {
  display: block;
  width: 100%;
  min-height: 40px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--mc-text);
  background: var(--mc-input-bg);
  border: var(--mc-bevel) solid #000;
  box-shadow:
    inset var(--mc-bevel) var(--mc-bevel) 0 0 #373737,
    inset calc(var(--mc-bevel) * -1) calc(var(--mc-bevel) * -1) 0 0 #6b6b6b;
}

.mc-input:focus {
  outline: var(--mc-bevel) solid #fff;
  outline-offset: 0;
}

.mc-input::placeholder {
  color: #8f8f8f;
}

/* 行内小输入框：设备改名这类嵌在列表行里的场景。
 * 尺寸是 2px 的整数倍，与整套像素风格一致。 */
.mc-input--inline {
  display: inline-block;
  width: 12em;
  min-height: 32px;
  padding: 4px 8px;
  font-size: 0.875rem;
  vertical-align: middle;
}

/* TOTP：一个 input 加 letter-spacing，不是六个独立 input。
 * 六个 input 的粘贴、退格、读屏体验都很差。格子感用背景渐变画。 */
.mc-otp {
  font-size: 1.5rem;
  letter-spacing: 0.5em;
  text-align: center;
  padding-left: 0.5em; /* 抵消末位字符后面那个 letter-spacing */
}

/* --- TOTP 种子展示（enroll 页） --- */

/* 二维码按像素渲染：缩放时不插值模糊，与整套风格一致。
 * 底色白：二维码模块要求亮底，别让面板色透进来。 */
.mc-qr {
  display: block;
  box-sizing: content-box;
  width: 256px;
  height: 256px;
  margin: 0 auto 16px;
  image-rendering: pixelated;
  background: #fff;
  border: var(--mc-bevel) solid #000;
}

/* 种子明文：等宽字体 + 逐字换行，手抄进验证器时不串行。 */
.mc-seed {
  margin: 0;
  padding: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875rem;
  color: var(--mc-text);
  word-break: break-all;
  background: var(--mc-input-bg);
  border: var(--mc-bevel) solid #000;
  box-shadow:
    inset var(--mc-bevel) var(--mc-bevel) 0 0 #373737,
    inset calc(var(--mc-bevel) * -1) calc(var(--mc-bevel) * -1) 0 0 #6b6b6b;
}

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

.mc-alert {
  margin-bottom: 16px;
  padding: 12px;
  font-size: 0.875rem;
  color: var(--mc-text);
  background: var(--mc-danger);
  border: var(--mc-bevel) solid #000;
}

.mc-notice {
  margin-bottom: 16px;
  padding: 12px;
  font-size: 0.875rem;
  color: var(--mc-text);
  background: var(--mc-primary);
  border: var(--mc-bevel) solid #000;
}

.mc-hint {
  margin: 8px 0 0;
  font-size: 0.8125rem;
  color: #555;
}

/* --- 设备列表 --- */

.mc-device {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  margin-bottom: 12px;
  background: #b0b0b0;
  border: var(--mc-bevel) solid #000;
  box-shadow:
    inset var(--mc-bevel) var(--mc-bevel) 0 0 #d8d8d8,
    inset calc(var(--mc-bevel) * -1) calc(var(--mc-bevel) * -1) 0 0 var(--mc-panel-dark);
}

.mc-device__meta {
  flex: 1 1 200px;
  min-width: 0;
}

.mc-device__label {
  font-weight: 700;
  color: var(--mc-panel-text);
}

.mc-device__detail {
  font-size: 0.8125rem;
  color: #4a4a4a;
  word-break: break-all;
}

/* 状态不只靠颜色：当前设备除了样式差别还要有文字标记。 */
.mc-tag {
  display: inline-block;
  padding: 2px 6px;
  margin-left: 6px;
  font-size: 0.75rem;
  color: #fff;
  background: var(--mc-primary);
  border: var(--mc-bevel) solid #000;
}

.mc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.mc-divider {
  margin: 24px 0;
  border: 0;
  border-top: var(--mc-bevel) solid var(--mc-panel-dark);
}

/* 折叠区：接了 SSO 之后 99% 的登录走 SSO，本地账号是应急通道，
 * 不该占主视觉。但也不能藏到找不着 —— SSO 挂了的时候正需要它。 */
.mc-details > summary {
  padding: 8px 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--mc-panel-text);
  cursor: pointer;
}

.mc-details > summary:focus-visible {
  outline: var(--mc-bevel) solid #000;
  outline-offset: var(--mc-bevel);
}

.mc-footer {
  margin-top: 24px;
  font-size: 0.75rem;
  color: #6b6b6b;
  text-align: center;
}

.mc-footer a {
  color: #8f8f8f;
}

/* --- LOGO：自绘像素海螺（装饰，非 Mojang 素材） ---
 *
 * 16×16 网格，64px 渲染 = 整 4 倍缩放，crispEdges 保证不插值。
 * 无文字，不进对比度 PAIRS 的正文判定（见 scripts/contrast.py 豁免项）。
 */
.mc-logo {
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto 8px;
}

/* --- 控制台工作台：底部分页（纯 CSS 的 radio 标签页） --- */

/* 不用 JS（CSP 里没有 script-src，面板也不需要脚本）：四个 radio
 * 藏在舞台前面，:checked + 兄弟选择器控制面板显隐和物品栏高亮。
 * 键盘可达是白送的 —— radio 组原生支持方向键。 */
.mc-wbench__radio {
  position: absolute;
  /* 不用 display:none / visibility:hidden —— 那会拿走焦点。
   * 2×2 不透明度 0：不可见但仍在 tab 序列里。 */
  width: 2px;
  height: 2px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

/* 面板区留个最小高度：换页时物品栏不跳。 */
.mc-wbench__panels {
  min-height: 320px;
}

.mc-wbench__panel {
  display: none;
}

.mc-wbench__panel h2 {
  margin-top: 0;
}

#wtab-account:checked ~ .mc-wbench__stage #panel-account,
#wtab-password:checked ~ .mc-wbench__stage #panel-password,
#wtab-totp:checked ~ .mc-wbench__stage #panel-totp,
#wtab-devices:checked ~ .mc-wbench__stage #panel-devices {
  display: block;
}

/* --- 物品栏（hotbar） --- */

/* 深色凹槽条 + 一排物品槽。选中槽描白边 —— 与按钮 hover 的
 * 「原版悬停就是描白边」同一套语汇。 */
.mc-hotbar {
  --slot-face: #c6c6c6;
  --slot-face-selected: #d8d8d8;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  padding: 6px;
  margin-top: 24px;
  background: var(--mc-panel-dark);
  border: var(--mc-bevel) solid #000;
  box-shadow:
    inset var(--mc-bevel) var(--mc-bevel) 0 0 #373737,
    inset calc(var(--mc-bevel) * -1) calc(var(--mc-bevel) * -1) 0 0 #6b6b6b;
}

.mc-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 72px;
  min-height: 64px;
  padding: 6px 4px;
  cursor: pointer;
  user-select: none;
  color: var(--mc-panel-text);
  background: var(--slot-face);
  border: var(--mc-bevel) solid #000;
  box-shadow:
    inset var(--mc-bevel) var(--mc-bevel) 0 0 var(--mc-panel-light),
    inset calc(var(--mc-bevel) * -1) calc(var(--mc-bevel) * -1) 0 0 var(--mc-panel-dark);
}

.mc-slot:hover {
  background: var(--slot-face-selected);
}

/* 槽内镂空（手机屏、显示器屏）跟着面色走，选中/hover 时不露馅。 */
.mc-slot__hole {
  fill: var(--slot-face);
}

.mc-slot:hover .mc-slot__hole {
  fill: var(--slot-face-selected);
}

.mc-slot__icon {
  width: 32px;
  height: 32px;
}

.mc-slot__label {
  font-size: 0.8125rem;
  color: var(--mc-panel-text);
}

/* 选中的槽：白描边 + 亮一档的面，就是「手里拿着的这个」。
 * focus-visible 必须逐 id 写 —— 合写成一条会把四个槽同时点亮。 */
#wtab-account:checked ~ .mc-wbench__stage label[for="wtab-account"],
#wtab-password:checked ~ .mc-wbench__stage label[for="wtab-password"],
#wtab-totp:checked ~ .mc-wbench__stage label[for="wtab-totp"],
#wtab-devices:checked ~ .mc-wbench__stage label[for="wtab-devices"] {
  background: var(--slot-face-selected);
  outline: var(--mc-bevel) solid #fff;
  outline-offset: var(--mc-bevel);
}

/* 键盘焦点落在哪个 radio，白边就描在它对应的槽上。 */
#wtab-account:focus-visible ~ .mc-wbench__stage label[for="wtab-account"],
#wtab-password:focus-visible ~ .mc-wbench__stage label[for="wtab-password"],
#wtab-totp:focus-visible ~ .mc-wbench__stage label[for="wtab-totp"],
#wtab-devices:focus-visible ~ .mc-wbench__stage label[for="wtab-devices"] {
  outline: var(--mc-bevel) solid #fff;
  outline-offset: var(--mc-bevel);
}

#wtab-account:checked ~ .mc-wbench__stage label[for="wtab-account"] .mc-slot__hole,
#wtab-password:checked ~ .mc-wbench__stage label[for="wtab-password"] .mc-slot__hole,
#wtab-totp:checked ~ .mc-wbench__stage label[for="wtab-totp"] .mc-slot__hole,
#wtab-devices:checked ~ .mc-wbench__stage label[for="wtab-devices"] .mc-slot__hole {
  fill: var(--slot-face-selected);
}

/* --- 响应式：手机上吊销设备是真实场景 --- */

@media (max-width: 420px) {
  .mc-panel {
    padding: 16px;
  }
  .mc-title {
    font-size: 1.5rem;
  }
  .mc-device {
    flex-direction: column;
    align-items: stretch;
  }
  .mc-actions .mc-btn {
    width: 100%;
  }
  .mc-wbench__panels {
    min-height: 240px;
  }
  .mc-slot {
    width: 64px;
  }
}

/* 这个风格本来就是暗的，所以不做暗色模式切换。 */

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

/* 高对比度偏好下把浮雕换成实边 —— 浮雕靠微妙的明暗差，
 * 在高对比模式里反而是噪声。 */
@media (prefers-contrast: more) {
  .mc-btn,
  .mc-panel,
  .mc-input {
    box-shadow: none;
    border-width: var(--mc-bevel);
  }
}