@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════════
   牌照信任条 r19 · 2026-09-23
   委托人原话:「監管牌照這個的展示能不能變成滾動式的,用戶鼠標放上就放大,
   每個監管牌讓美術師設計一下,有質感一點的盾牌形式」。她随后在三个选项里点了 A。

   ⚠️ 与今早 r18 的关系(必须写明,否则下一个人会以为我在翻案):
   r18 把横滚**拆掉**是有理由的 ——「有资格的机构不会把自己的牌照藏在一个 › 箭头后面」。
   那条理由针对的是**要用户去操作的分页器**,不是滚动本身。
   r19 做的是**自己走的信任条**:六块牌自动流过,用户什么都不用点;
   鼠标放上去才停、才放大。⇒ 不复活任何翻页钮、段控、计数器。

   ⚠️ 盾面为什么不是纯深色(我原本答应她「取消白底,改深色盾面」,量完发现做不到):
   六枚标识全是**透明底深墨稿**,实测不透明像素平均亮度 FSCA 0(纯黑)/ASIC 66/
   FSC 78/FSA 103/CMA 123/CySEC 130。本站卡面 #1B2A33 亮度约 40 ——
   把它们压在深盾面上,FSCA 直接消失。而**改标识的颜色 = 篡改他人官方标识**,不做。
   ⇒ 盾牌是「深色金属外框 + 浅色盾芯」:外框、底座、描边、光晕全是深金属,
     官方标识住在盾芯那块浅版上、一个像素未改。
     白底方块**确实取消了** —— 它不再是一个孤立的白方块,而是嵌在盾里的盾芯。

   ⚠️ 两档必须一眼分开(六个里四个是申请中,这是合规口径不是美术):
   三道互相独立的信号,任一道失效语义仍成立 ——
     ① 描边:已持牌 = 2px 金属渐变;申请中 = 1px 虚线,无金属。
     ② 盾芯:已持牌 = 亮白版;申请中 = 压暗的冷灰版(**标识本身不动**,动的是它下面那块版)。
     ③ 字:盾上直接印「已持牌」/「申请中」+ 6px 实心小方(继承 r18)。

   纪律:不新造颜色(全部由 tokens 兑出)、间距只用 --s-*、字号只用 --fs-*。
   只在 JS 给 .lic 挂上 data-lic19 之后生效 ⇒ 无 JS / 关动效时原样落回 r18 静态网格。
   ══════════════════════════════════════════════════════════════════ */

.lic[data-lic19] {
  --lic19-w: 248px;
  --lic19-gap: var(--s-5);
  --lic19-plate: 104px;
  --lic19-dur: 46s;
}

/* ── §1 视口:两端羽化 ────────────────────────────────────────────
   不画边界、不画箭头。羽化是在说「它还在往下走」,而不是「这里被截断了」。 */
.lic[data-lic19] .lic19__vp {
  overflow: hidden;
  padding-block: var(--s-3) var(--s-5);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent);
}

/* ── §2 轨道 ──────────────────────────────────────────────────────
   ⚠️ 间距用 margin-inline-end,**不能用 gap**:
   轨道里是两份同样的六块,靠 translateX(-50%) 无缝循环。
   用 gap 的话总宽 = 12 块 + 11 条缝,-50% 落在「6 块 + 5.5 条缝」处,
   每圈会跳掉半条缝。改成每块自带右外边距,12 个单元完全等长,-50% 才正好是一圈。 */
.lic[data-lic19] .licgrid {
  display: flex;
  inline-size: max-content;
  border: 0;
  gap: 0;
  animation: lic19-drift var(--lic19-dur) linear infinite;
  will-change: transform;
}
@keyframes lic19-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--lic19-shift, -50%)); }
}

/* 鼠标进到条上 —— 整条停。停的是整条不是那一块,
   否则被 hover 的那块会被后面的挤上来撞掉。 */
.lic[data-lic19] .lic19__vp:hover .licgrid,
.lic[data-lic19] .lic19__vp:focus-within .licgrid { animation-play-state: paused; }

/* ── §3 盾牌本体 ──────────────────────────────────────────────────
   轮廓用 border-radius 而不是 clip-path:clip-path 会把描边和投影一起裁掉,
   而「金属描边 + 内发光 + 微立体」正是她要的那三样,一样都不能被裁。
   下缘的大圆角 = 盾底;上缘小圆角 = 盾肩。 */
.lic[data-lic19] .licgrid__cell {
  flex: none;
  inline-size: var(--lic19-w);
  margin-inline-end: var(--lic19-gap);
  grid-template-rows: auto 1fr;
  padding: var(--s-2) var(--s-2) var(--s-8);
  border: 0;
  border-radius: 12px 12px 48% 48% / 12px 12px 30% 30%;
  background: var(--c-surface);
  transition: transform .34s cubic-bezier(.22,.61,.36,1), box-shadow .34s ease;
}

/* 已持牌:2px 金属渐变描边。
   做法是双 background —— 面画在 padding-box、金属画在 border-box,
   描边本身设为 transparent。这样圆角、投影、内发光全部照常。 */
.lic[data-lic19] .licgrid__cell--held {
  border: 2px solid transparent;
  background:
    linear-gradient(176deg,
      color-mix(in srgb, var(--c-surface) 88%, #FFFFFF),
      var(--c-surface) 46%,
      var(--c-canvas)) padding-box,
    linear-gradient(152deg,
      var(--c-primary-700),
      color-mix(in srgb, #FFFFFF 78%, var(--c-primary-500)) 26%,
      var(--c-primary-500) 54%,
      var(--c-primary-100)) border-box;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #FFFFFF 16%, transparent),
    inset 0 -56px 64px -48px var(--c-primary-500),
    0 22px 42px -28px #000;
}

/* 申请中:没有金属。虚线 + 更平的面 —— 「还没到那一档」在轮廓上就看得出来。 */
.lic[data-lic19] .licgrid__cell--pending {
  border: 1px dashed color-mix(in srgb, var(--c-border-strong) 48%, transparent);
  background: linear-gradient(176deg, var(--c-surface), var(--c-canvas));
  box-shadow: 0 16px 32px -30px #000;
}

/* 鼠标放上就放大 —— 她原话里的那一句。
   ⚠️ 放大的是**被指的那一块**,整条已经由 §2 停住。 */
.lic[data-lic19] .licgrid__cell:hover {
  transform: translateY(-8px) scale(1.06);
  z-index: 2;
}
.lic[data-lic19] .licgrid__cell--held:hover {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #FFFFFF 22%, transparent),
    inset 0 -56px 64px -44px var(--c-primary-500),
    0 30px 56px -24px #000;
}
.lic[data-lic19] .licgrid__cell--pending:hover {
  box-shadow: 0 26px 46px -26px #000;
}

/* ── §4 盾芯:官方标识住的那块浅版 ────────────────────────────────
   它是**盾的一部分**(嵌在外框里、跟着盾肩的圆角走),不是压在页面上的白方块。
   ⚠️ 标识本体一个像素不改 —— 见文件头。两档的差别做在这块版上,不在标识上。 */
.lic[data-lic19] .licgrid__mark {
  block-size: var(--lic19-plate);
  padding: var(--s-3) var(--s-4);
  border-radius: 8px 8px 4px 4px;
  border-block-end: 0;
  /* ⚠️ minmax(0,1fr) 不是装饰,是这条夹不夹得住的**前提**。
     盾芯虽然自己是定高 84px,但里面那一行默认按内容撑 —— 标识 78px 高时
     行就是 78px,于是「max-block-size:100%」解出来也是 78px,等于没夹。
     实测 375 档 FSA(长宽比 1.42、--logo-h:78px)由此顶穿盾芯 6px。
     把行钉成 1fr,它才等于盾芯的可用高,百分比才有东西可参照。 */
  grid-template-rows: minmax(0, 1fr);
}
.lic[data-lic19] .licgrid__cell--held .licgrid__mark {
  background: linear-gradient(180deg, #FFFFFF, #E7EDEF);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--c-primary-500) 26%, transparent),
    0 2px 10px -4px #000;
}
.lic[data-lic19] .licgrid__cell--pending .licgrid__mark {
  background: linear-gradient(180deg, #DFE6E8, #C9D3D6);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-border-strong) 40%, transparent);
}

/* 逐枚定高的 --logo-h 是照 r18 那块 128px 大版面定的,盾芯比它矮。
   实测 375 档:FSA 长宽比 1.42,78px 高顶穿 60px 的可用高。
   这里只加一道上限 —— 不改 --logo-h(那是六枚标识之间的相对大小,
   改它等于重调六枚的视觉权重),让盾芯自己把最高的那枚夹住。 */
.lic[data-lic19] .licgrid__logo { max-block-size: 100%; }

/* ── §5 盾面上的字 ────────────────────────────────────────────────
   居中 —— 盾是对称的,左对齐会让它看起来像被塞进盾里的一张卡。 */
.lic[data-lic19] .licgrid__text {
  gap: var(--s-2);
  padding: var(--s-5) var(--s-4) 0;
  text-align: center;
  justify-items: center;
}
.lic[data-lic19] .licgrid__status { letter-spacing: .18em; }
.lic[data-lic19] .licgrid__auth { justify-content: center; }
.lic[data-lic19] .licgrid__body {
  font-size: 13px;
  line-height: 1.7;
  max-width: none;
  color: var(--c-text-3);
}

/* ── §6 手机 ──────────────────────────────────────────────────────
   条本身在手机上照常自己走 —— 这正是滚动条相对静态网格的好处:
   六块牌在 375 上不必挤成一列长表。 */
@media (max-width: 719px) {
  .lic[data-lic19] {
    --lic19-w: 196px;
    --lic19-gap: var(--s-4);
    --lic19-plate: 84px;
  }
  .lic[data-lic19] .lic19__vp {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  }
  .lic[data-lic19] .licgrid__cell { padding-block-end: var(--s-7); }
  .lic[data-lic19] .licgrid__place { font-size: var(--fs-h4); }
}

/* ── §7 关掉动效时 ────────────────────────────────────────────────
   不是删行为,是换成静止 + 可手推(站上 main.js 头几行立的规矩)。
   六块牌仍然全部可达,只是不再自己走。 */
@media (prefers-reduced-motion: reduce) {
  .lic[data-lic19] .licgrid { animation: none; }
  .lic[data-lic19] .lic19__vp { overflow-x: auto; scrollbar-width: thin; }
  .lic[data-lic19] .licgrid__cell:hover { transform: none; }
}

/* 不具名的「申请中」牌:盾芯里只放三点,不出现任何法域或机构标识。 */
.lic[data-lic19] .licgrid__unnamed {
  inline-size: 60px;
  block-size: auto;
  fill: var(--c-canvas);
  opacity: .5;
  align-self: center;
  justify-self: center;
}
[data-theme="light"] .lic[data-lic19] .licgrid__unnamed { fill: var(--c-text-2); }

/* ── 静态版(2026-10-13):不滚动、不复制,四块牌一排 ─────────────── */
.lic[data-lic19] .licgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-5);
  inline-size: auto;
  animation: none;
  will-change: auto;
  padding-block: var(--s-3) var(--s-5);
}
.lic[data-lic19] .licgrid__cell { inline-size: auto; margin-inline-end: 0; }
@media (max-width: 1023px) {
  .lic[data-lic19] .licgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 559px) {
  .lic[data-lic19] .licgrid { grid-template-columns: minmax(0, 1fr); }
}

/* 不具名那张:没有标识版,整张是一块纯文字的虚线盾,文字在盾里垂直居中 */
.lic[data-lic19] .licgrid__cell--unnamed { grid-template-rows: minmax(0, 1fr); }
.lic[data-lic19] .licgrid__cell--unnamed .licgrid__text {
  align-content: center;
  padding-block-start: var(--s-6);
}
.lic[data-lic19] .licgrid__cell--unnamed .licgrid__place { font-size: var(--fs-h3, 1.5rem); }