/* ============================================================================
   LiquidGlass — styles for the vanilla port.
   The element carrying [data-liquid] paints its own text; every glass layer is
   injected by liquid.js and sits behind it (z-index: -1), so markup stays flat:
     <button class="lg-button" data-liquid data-liquid-size="sm">按钮</button>
   ========================================================================== */

[data-liquid] {
  /* position is set by JS only when the element is statically positioned:
     panels and the status bar keep their own sticky/fixed positioning. */
  isolation: isolate;
  border: 0;
  background: transparent;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}

/* only controls animate on press; panels never do, and a promoted layer would
   be painted above the fixed status bar */
[data-liquid].lg-press { will-change: translate, scale; }

/* the lens: backdrop refracted through the field map, clipped to the squircle */
[data-liquid] > .lg-lens {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  /* set by JS: url(#filter) blur() saturate() brightness() */
}

/* the rim: specular top stroke + side shade, baked into an alpha image */
[data-liquid] > .lg-overlay {
  position: absolute;
  inset: -2px;
  z-index: -1;
  pointer-events: none;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

/* coloured wash for tinted glass (accent buttons); sits above the lens so the
   refracted backdrop still shows through wherever the wash is translucent */
[data-liquid] > .lg-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
}

/* pointer-tracked specular glow */
[data-liquid] > .lg-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background-image: radial-gradient(
    var(--lg-glow-size, 64px) circle at var(--lg-glow-x, 50%) var(--lg-glow-y, 50%),
    var(--lg-glow-color, rgb(255 255 255 / 0.34)) calc(var(--lg-glow, 0) * 100%),
    transparent 65%
  );
  transition: none;
}

/* ---------------------------------------------------------------- buttons */

.lg-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border-radius: 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 590;
  letter-spacing: -0.005em;
  cursor: pointer;
  box-shadow: 0 2px 8px rgb(10 20 45 / 0.10), 0 10px 26px -8px rgb(10 20 45 / 0.20);
  transition: box-shadow .3s cubic-bezier(.32, .72, 0, 1);
}
.lg-button:hover {
  box-shadow: 0 3px 10px rgb(10 20 45 / 0.13), 0 16px 34px -8px rgb(10 20 45 / 0.26);
}
.lg-button svg { width: 16px; height: 16px; }
.lg-button[data-liquid-size="sm"] {
  height: 34px;
  padding: 0 13px;
  border-radius: 12px;
  font-size: 12.5px;
  gap: 6px;
}
.lg-button[data-liquid-size="icon"] {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 12px;
}
.lg-button[data-liquid-size="icon-sm"] {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 10px;
}
.lg-button[data-liquid-size="icon-sm"] svg { width: 14px; height: 14px; }
body.theme-dark .lg-button {
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.30), 0 14px 34px -10px rgb(0 0 0 / 0.46);
}

/* accent variant: tinted glass, text still on top of the lens */
.lg-button[data-liquid-tint] { color: #fff; }

/* accent glass keeps a light-to-dark wash on top of the tint so it reads as a
   lit surface rather than one flat colour */
[data-liquid].lg-accent-text > .lg-glow {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 52%),
    radial-gradient(
      var(--lg-glow-size, 64px) circle at var(--lg-glow-x, 50%) var(--lg-glow-y, 50%),
      var(--lg-glow-color, rgb(255 255 255 / 0.34)) calc(var(--lg-glow, 0) * 100%),
      transparent 65%
    );
}

/* ---------------------------------------------------------------- surfaces */

.lg-panel {
  border-radius: 22px;
  padding: 19px 20px;
  box-shadow: 0 2px 10px rgb(10 20 45 / 0.10), 0 18px 44px -14px rgb(10 20 45 / 0.26);
}
body.theme-dark .lg-panel {
  box-shadow: 0 2px 12px rgb(0 0 0 / 0.34), 0 22px 52px -16px rgb(0 0 0 / 0.54);
}

/* glass applied to an existing element: keep its padding/radius, drop its bg */
[data-liquid].icon-btn,
[data-liquid].btn-primary {
  border: 0;
  background: transparent;
}
[data-liquid].btn-primary { color: #fff; }

/* --------------------------------------------- reduced transparency / motion */

@media (prefers-reduced-transparency: reduce) {
  [data-liquid] > .lg-lens { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}


/* ============================================================================
   Applied to the prototype's own controls
   ----------------------------------------------------------------------------
   liquid.js marks every discovered control with [data-liquid]. These rules drop
   the old painted background so the lens is the only thing behind the label,
   and keep the geometry each control already had.
   ========================================================================== */

[data-liquid].icon-btn,
[data-liquid].btn-primary,
[data-liquid].pill,
[data-liquid].seg button,
[data-liquid].mtab,
[data-liquid].mini,
[data-liquid].fab,
[data-liquid].cp,
[data-liquid].chip,
.acts > [data-liquid],
[data-liquid].tag,

/* The track is a grouping surface, not glass: a nested backdrop-filter would
   sample the track instead of the wallpaper, which flattens both. It stays a
   quiet translucent well so the segment still reads as one control. */
.seg:has(> [data-liquid]) {
  background: var(--track-bg, rgba(120, 140, 170, 0.16));
  border: 1px solid var(--hair);
  box-shadow: inset 0 1px 2px rgba(20, 35, 60, 0.06);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.theme-dark .seg:has(> [data-liquid]) {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* accent text stays white on a tinted lens */
.lg-accent-text,
.lg-accent-text:hover { color: #fff; }

/* the primary button keeps its icon/text spacing but loses height overrides */
[data-liquid].btn-primary { padding-left: 13px; padding-right: 16px; }

/* span-based controls need to become flex containers to centre their icons */
[data-liquid].cp,
.acts > [data-liquid],
[data-liquid].chip,
[data-liquid].tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* cards keep their own shadow; the glass only supplies the rim */
[data-liquid].card { box-shadow: none; }

/* A small control is too thin for the lens to show its own edge, so it gets a
   hairline of its own — without it a 24px copy button on a white panel reads as
   empty space. On photos the ring goes light; on a light panel it goes dark. */
[data-liquid].icon-btn::after,
.acts > [data-liquid]::after,
.acts > a[data-liquid]::after,
[data-liquid].cp::after,
[data-liquid].mini::after,
[data-liquid].lg-button[data-liquid-size="icon"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(25, 40, 70, 0.16);
}
body.theme-dark [data-liquid].icon-btn::after,
body.theme-dark .acts > [data-liquid]::after,
.acts > a[data-liquid]::after,
body.theme-dark [data-liquid].cp::after,
body.theme-dark [data-liquid].mini::after {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
/* over a photo the controls are already scrimmed: keep the ring bright */
.card-clip [data-liquid].acts > [data-liquid]::after,
.acts > a[data-liquid]::after,
.acts > [data-liquid]::after {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26);
}


/* The card actions carry their own painted chip in common.css
   (`.card .acts span`, specificity 0,2,1). Matching that specificity here —
   and loading later — lets the lens replace the chip instead of stacking on it. */
.card .acts > [data-liquid],
.mgrid .card .acts > [data-liquid] {
  background: transparent;
  border-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

/* Same problem for the header's counter chip and the table's copy buttons. */
.counter { background: transparent; border-color: transparent; }




/* Wide surfaces: no lens (the baked rim stretches into blobs). A quiet panel
   with the same geometry and a hairline edge instead. */
[data-liquid].lg-plain {
  background: var(--glass-2);
  border: 1px solid var(--hair);
  box-shadow: var(--shadow-sm);
}
[data-liquid].lg-plain > .lg-lens,
[data-liquid].lg-plain > .lg-overlay,
[data-liquid].lg-plain > .lg-veil,
[data-liquid].lg-plain > .lg-glow { display: none; }

/* The drop well is a dashed target, not a panel: keep its outline shape. */
[data-liquid].lg-plain.drop {
  border: 1.5px dashed rgba(120, 140, 180, 0.42);
  background: var(--glass-2);
  box-shadow: none;
}
body.theme-dark [data-liquid].lg-plain.drop { background: rgba(255, 255, 255, 0.035); }


/* Surfaces carried their own painted fill before they became glass. Keeping
   both means the lens refracts a flat colour and the veil darkens it twice —
   which is why audit rows showed a grey smear across their middle. Hand the
   fill over to the lens; .lg-plain below restores a solid panel where we bail. */
[data-liquid][data-liquid-surface]:not(.lg-plain) {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}