/* ==========================================================================
   info.zzxcd.cn · color.css —— 颜色工具（info/color）专属界面层
   --------------------------------------------------------------------------
   共用层：base.css（字体 / 令牌 / 复位）+ shell.css（横梁 / 面板 / 按钮 /
   表单 / 帮助 / 设置抽屉）。这里只放**这一个页面**才有的构件。

   本页的主角是**色块**：2px 墨线、零圆角、平涂。「当前色」用双内描边表达
   （inset 0 0 0 2px 纸面白 / inset 0 0 0 4px 墨）—— 与设置抽屉里的色点
   同一套语言。色块上的文字一律落在**纸面铭牌**上，不靠 JS 猜前景色。

   板内分组不套卡片（禁止嵌套卡片）：用一条 2px 结构缝 + 铭牌分组，见 .sect。

   唯一出现渐变的地方是**工具内容本身**（#gdPreview / .gd-card 的渐变预览、
   色相刻度）：那是要生成与读取的数据，不是装饰。装饰性渐变、玻璃、柔和阴影、
   圆角在本世界里不存在（结构缝网格是 base.css 的 body 底色，不在此列）。
   ========================================================================== */

/* ---------- 1. 面板内节奏 ----------
   .panel 是纸面卡片；内部节奏交给 0.7rem 呼吸，抬头是铭牌（下边距归零）。 */
.panel > * + * {
  margin-top: 0.7rem;
}
.panel > .card-head {
  margin-bottom: 0;
}
.panel > .card-head + .panel-sub {
  margin-top: 0.1rem;
}
.sect > .card-head {
  margin-bottom: 0;
}

/* 板内分组：不套卡片，用 2px 结构缝 + 铭牌 */
.sect {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-top: 0.75rem;
  border-top: var(--nb-rule) solid var(--c-text);
}

/* 行内拉伸的输入（与按钮同排） */
.grow {
  flex: 1 1 0;
  min-width: 0;
}

/* 并排字段：窄屏自动折行（auto-fit），不写死列数 */
.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  gap: 0.55rem;
}

/* 滑杆行：标签 · 滑杆 · 读数 */
.range-line {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.range-line .field-label {
  flex: 0 0 auto;
}
.range-line .input[type='range'] {
  flex: 1 1 0;
  min-width: 0;
}
.range-val {
  flex: 0 0 auto;
  min-width: 3.2rem;
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
  font-weight: 700;
}

/* ---------- 2. 当前色块（本页主角）----------
   2px 墨线 + 零圆角 + 硬位移；「当前色」= 被选中的色块 → 双内描边。
   读数落在纸面铭牌上，因此任何底色都读得清（前景色不交给 JS 猜）。 */
.color-preview {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 4.4rem;
  padding: 0.8rem;
  border: var(--nb-rule) solid var(--c-text);
  background: var(--c-white);
  cursor: pointer;
  box-shadow: var(--nb-shadow-sm), inset 0 0 0 2px var(--c-white), inset 0 0 0 4px var(--c-text);
  transition: transform var(--nb-dur) var(--ease-snap), box-shadow var(--nb-dur) var(--ease-snap);
}
.color-preview.preview-lg {
  min-height: 6rem;
}
.color-preview:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--c-text), inset 0 0 0 2px var(--c-white), inset 0 0 0 4px var(--c-text);
}
.cp-hex {
  padding: 0.22rem 0.5rem;
  border: var(--nb-rule) solid var(--c-text);
  background: var(--c-white);
  color: var(--c-text);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  pointer-events: none;
}

/* ---------- 3. 分段控件 ----------
   格与格之间是 2px 结构缝（gap 露出容器墨底），因此任意换行都成立，
   不需要 nth-child 去外边线。 */
.seg.seg-grid,
.seg.seg-2 {
  display: grid;
  gap: var(--nb-rule);
  background: var(--c-text);
  border: var(--nb-rule) solid var(--c-text);
  overflow: hidden;
}
.seg.seg-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.seg.seg-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.seg.seg-grid .seg-btn,
.seg.seg-2 .seg-btn {
  border: 0;
  background: var(--c-white);
  padding: 0.45rem 0.2rem;
  text-align: center;
}
.seg.seg-grid .seg-btn.on,
.seg.seg-grid .seg-btn.active,
.seg.seg-2 .seg-btn.on,
.seg.seg-2 .seg-btn.active {
  background: var(--c-text);
  color: var(--c-bg);
}
/* ⚠️ 断点只能放在 768px（base.css 在此锁定 16px 根字号）：
   768px 以下根字号跟着视口宽度放大（520px 视口 = 22px 根字号），
   这时再切成 6 列，「分裂互补」这种 4 字标签会顶破格子。 */
@media (min-width: 768px) {
  .seg.seg-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* ---------- 4. 取色器 ---------- */
.pk-sv-wrap {
  position: relative;
  width: 100%;
  max-width: 20rem;
  margin: 0 auto;
  border: var(--nb-rule) solid var(--c-text);
}
.pk-sv {
  display: block;
  width: 100%;
  cursor: crosshair;
  touch-action: none;
}
/* 取色指示：墨框 + 一圈纸面白，压在任何色上都能看见 */
.pk-dot {
  position: absolute;
  width: 0.85rem;
  height: 0.85rem;
  margin: -0.425rem 0 0 -0.425rem;
  box-shadow: 0 0 0 2px var(--c-white), 0 0 0 4px var(--c-text);
  pointer-events: none;
}
.pk-huebar-line {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.pk-huebar-wrap {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 1.5rem;
}
/* 色相刻度：36 段平涂色带（工具数据本身；本世界不用渐变做界面） */
.pk-huebar {
  position: absolute;
  inset: 0;
  display: flex;
  border: var(--nb-rule) solid var(--c-text);
  overflow: hidden;
  cursor: pointer;
  touch-action: none;
}
.pk-huebar i {
  display: block;
  flex: 1 1 0;
  min-width: 0;
}
.pk-huebar-dot {
  position: absolute;
  top: 50%;
  width: 0.5rem;
  height: 1.5rem;
  transform: translate(-50%, -50%);
  border: var(--nb-rule) solid var(--c-text);
  box-shadow: 0 0 0 2px var(--c-white);
  pointer-events: none;
}
.pkWheel-hint {
  font-size: 0.75rem;
  color: var(--c-text-sub);
}
.pk-img-wrap {
  position: relative;
  width: 100%;
  max-height: 40vh;
  overflow: hidden;
  border: var(--nb-rule) solid var(--c-text);
}
.pk-img {
  display: block;
  width: 100%;
  cursor: crosshair;
}
/* 上传入口：2px 虚线墨框，零圆角、无玻璃 */
.upload-btn {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.8rem 0.6rem;
  border: var(--nb-rule) dashed var(--c-text);
  background: var(--c-white);
  color: var(--c-text-sub);
  font-family: var(--font);
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--nb-dur) var(--ease-snap), color var(--nb-dur) var(--ease-snap),
    transform var(--nb-dur) var(--ease-snap);
}
.upload-btn svg {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: square;
}
.upload-btn:hover {
  background: color-mix(in srgb, var(--c-text) 8%, var(--c-white));
  color: var(--c-text);
}
.upload-btn:active {
  transform: translate(2px, 2px);
}

/* ---------- 5. 色卡（配色 / 精选方案）----------
   一格一色，格间 2px 墨缝；底色是数据，因此格上文字用固定的纸白 / 墨，
   不跟主题翻转（暗色主题下色值不变，文字颜色当然也不该变）。 */
.swatch-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--nb-rule);
  background: var(--c-text);
  border: var(--nb-rule) solid var(--c-text);
  overflow: hidden;
}
.swatch {
  appearance: none;
  border: 0;
  min-height: 3.4rem;
  padding: 0.4rem 0.15rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--nb-dur) var(--ease-snap);
}
.sw-hex {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #ffffff;
}
.swatch.dark-txt .sw-hex {
  color: #0a0a0a;
}

.pl-presets-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: var(--nb-rule) solid var(--c-text);
}
.preset {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.7rem 0;
  border-bottom: var(--nb-rule) solid var(--c-text);
  min-width: 0;
}
.preset-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.preset-name {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.preset-head .btn {
  margin-left: auto;
}
@media (min-width: 768px) {
  .pl-presets-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.2rem;
  }
}

/* 点击色块的手感：内描边（与「当前色」同一套语言） */
@media (hover: hover) {
  .swatch:hover,
  .gd-card:hover {
    box-shadow: inset 0 0 0 2px var(--c-white), inset 0 0 0 4px var(--c-text);
  }
}
.swatch:active,
.gd-card:active,
.cl-cell:active {
  transform: translate(1px, 1px);
}

/* ---------- 6. 渐变工具 ---------- */
/* 渐变条：只放渐变，不给里面塞任何文字（描述改到条下面，见 .gd-css） */
.gd-preview {
  min-height: 7.5rem;
  padding: 0.5rem;
  border: var(--nb-rule) solid var(--c-text);
  background: var(--c-white);
  box-shadow: var(--nb-shadow-sm);
}
/* CSS 描述：在渐变**下方**单独一行（原来压在渐变上，值一长就盖住渐变） */
.gd-css {
  margin-top: 0.45rem;
  padding: 0.35rem 0.5rem;
  border: var(--nb-rule) solid var(--c-text);
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.5;
  word-break: break-all;
}
.swatch-row :focus-visible,
.gd-grid :focus-visible {
  outline-offset: -4px;
}
.gd-grid:empty {
  display: none;
}
.gd-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--nb-rule);
  background: var(--c-text);
  border: var(--nb-rule) solid var(--c-text);
  overflow: hidden;
}
@media (min-width: 768px) {
  .swatch-row :focus-visible,
.gd-grid :focus-visible {
  outline-offset: -4px;
}
.gd-grid:empty {
  display: none;
}
.gd-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.gd-card {
  appearance: none;
  border: 0;
  min-height: 4.2rem;
  padding: 0.45rem 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 0.15rem;
  text-align: left;
  cursor: pointer;
  transition: transform var(--nb-dur) var(--ease-snap);
}
.gd-name {
  padding: 0.1rem 0.35rem;
  border: var(--nb-rule) solid var(--c-text);
  background: var(--c-white);
  color: var(--c-text);
  font-size: 0.7rem;
  font-weight: 800;
}
.gd-hexs {
  padding: 0.05rem 0.3rem;
  border: var(--nb-rule) solid var(--c-text);
  border-top: 0;
  background: var(--c-white);
  color: var(--c-text-sub);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.7rem;
}

/* ---------- 7. 颜色大全 ---------- */
.cl-groups {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.cl-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.cl-group.closed .cl-grid {
  display: none;
}
.cl-group-head {
  appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.6rem;
  border: var(--nb-rule) solid var(--c-text);
  background: var(--c-white);
  color: var(--c-text);
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
  box-shadow: var(--nb-shadow-sm);
  transition: transform var(--nb-dur) var(--ease-snap), box-shadow var(--nb-dur) var(--ease-snap);
}
.cl-group-head:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--c-text);
}
/* 分组的标识色也是一块色卡：2px 墨线 + 零圆角（本世界没有圆点列表） */
.cl-group-head .dot {
  flex: 0 0 auto;
  width: 0.7rem;
  height: 0.7rem;
  border: var(--nb-rule) solid var(--c-text);
}
.cl-group-head .count {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.7rem;
  color: var(--c-text-sub);
}
.cl-group-head .chev {
  margin-left: auto;
  font-size: 0.7rem;
  color: var(--c-text-sub);
  transition: transform var(--nb-dur) var(--ease-snap);
}
.cl-group.closed .chev {
  transform: rotate(-90deg);
}
/* 色卡网格：每格自带 2px 墨环，环正好落在 2px 缝里 → 缝是均匀的墨线，
   网格不需要底色。⚠️ 不能用「容器墨底 + gap」那招：各色系颜色数不是列数的整数倍，
   最后一行的空格会露出一大块墨黑（实测过，像坏图）。 */
.cl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.4rem, 1fr));
  gap: var(--nb-rule);
}
.cl-cell {
  appearance: none;
  border: 0;
  min-height: 3.6rem;
  padding: 0.35rem 0.3rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.05rem;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 0 0 var(--nb-rule) var(--c-text);
  transition: transform var(--nb-dur) var(--ease-snap);
}
.cl-name {
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.25;
  color: #ffffff;
  overflow-wrap: anywhere;
}
.cl-hex {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.7rem;
  color: #ffffff;
}
.cl-cell.dark-txt .cl-name,
.cl-cell.dark-txt .cl-hex {
  color: #0a0a0a;
}
@media (hover: hover) {
  .cl-cell:hover {
    /* 双内描边：纸白内环 + 墨外环 —— 只画纸白环时，浅色色卡上根本看不见 */
  box-shadow: inset 0 0 0 2px var(--c-white), inset 0 0 0 4px var(--c-text);
    outline-offset: -5px;
  }
}