/* Original GlassSurface and GlassCard scoped styles; source 7ef2837eb0f14d489810f4f10ce0c709b120520e. */

.glass-surface[data-v-di4-original-2ca45cabcb] {
  /* Bare CSS-level defaults for the local hooks the script above writes inline
     (higher-specificity inline style always wins once mounted; these are the
     pre-hydration / SSR fallback so the tokens stay declared in one place).
     Vue's `:style` binding is serialised on SSR too, so in practice these are only
     reached if a consumer explicitly resets the var — they still have to match the
     script's own defaults (primary tier, border='soft', shadow='key') so there is no
     flash of different styling in that edge case.
     NOTE: --glass-surface-bg is deliberately NOT declared here — it is a per-instance
     background override hook consumed as `var(--glass-surface-bg, <tier token>)` by the base,
     tier and tint rules below and must stay unset by default so that fallback actually fires.
     It is classified as runtime-owned in scripts/css-token-runtime-owned.json (see the header
     comment above) precisely because it is never declared anywhere in this file or the tokens
     package — the token-contract scanner needs that explicit entry, not a same-file "definition". */
  --glass-surface-border: var(--glass-border-soft);
  --glass-surface-radius: var(--glass-radius-md);
  --glass-surface-shadow: var(--glass-shadow-ambient), var(--glass-shadow-key), var(--glass-shadow-inset-hi);
  position: relative;
  background: var(--glass-surface-bg, var(--glass-tint-panel));
  border: 1px solid var(--glass-surface-border);
  border-radius: var(--glass-surface-radius);
  box-shadow: var(--glass-surface-shadow);
  contain: layout style paint;
  color: var(--glass-text-primary);
  transition:
    background var(--glass-transition-fast),
    border-color var(--glass-transition-fast),
    box-shadow var(--glass-transition-fast);
}

/* Tier overrides — read --lg-blur / --lg-saturate set by useGlassEffect */
.glass-surface--tier-primary[data-v-di4-original-2ca45cabcb],
.glass-surface--tier-elevated[data-v-di4-original-2ca45cabcb],
[data-tier="primary"][data-v-di4-original-2ca45cabcb],
[data-tier="elevated"][data-v-di4-original-2ca45cabcb] {
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
}
/* data-tier="primary" fallback (when useGlassEffect vars not set) */
[data-tier="primary"][data-v-di4-original-2ca45cabcb] {
  backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate-med));
  -webkit-backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate-med));
  background: var(--glass-surface-bg, var(--glass-tint-panel));
}
.glass-surface--tier-elevated[data-v-di4-original-2ca45cabcb],
[data-tier="elevated"][data-v-di4-original-2ca45cabcb] {
  background: var(--glass-surface-bg, var(--glass-tint-panel-elevated));
  /* border-color / box-shadow now driven by --glass-surface-border / --glass-surface-shadow
     (computed in script to preserve this exact tier's pre-upgrade values by default). */
}
/* data-tier="elevated" fallback */
[data-tier="elevated"][data-v-di4-original-2ca45cabcb] {
  backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-saturate-high));
  -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-saturate-high));
}
.glass-surface--tier-solid[data-v-di4-original-2ca45cabcb],
[data-tier="solid"][data-v-di4-original-2ca45cabcb] {
  background: var(--glass-surface-bg, var(--glass-bg-solid-strong));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  /* box-shadow now driven by --glass-surface-shadow (defaults to ambient-only, unchanged). */
}

/* Budget exceeded fallback — degrade to solid visually */
[data-budget-exceeded][data-v-di4-original-2ca45cabcb] {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: var(--glass-bg-solid-strong) !important;
}

/* Radius scale — the modifiers drive the --glass-surface-radius hook, NOT border-radius directly.
   The base rule renders `border-radius: var(--glass-surface-radius)`; declaring border-radius here
   would come later in the sheet at equal specificity and silently make the hook inert. The script
   writes the same token inline, and a consumer's fallthrough inline `--glass-surface-radius` wins
   because Vue merges parent style after the component's own. Default rendering is identical. */
.glass-surface--radius-xs[data-v-di4-original-2ca45cabcb]   { --glass-surface-radius: var(--glass-radius-xs);
}
.glass-surface--radius-sm[data-v-di4-original-2ca45cabcb]   { --glass-surface-radius: var(--glass-radius-sm);
}
.glass-surface--radius-md[data-v-di4-original-2ca45cabcb]   { --glass-surface-radius: var(--glass-radius-md);
}
.glass-surface--radius-lg[data-v-di4-original-2ca45cabcb]   { --glass-surface-radius: var(--glass-radius-lg);
}
.glass-surface--radius-xl[data-v-di4-original-2ca45cabcb]   { --glass-surface-radius: var(--glass-radius-xl);
}
.glass-surface--radius-2xl[data-v-di4-original-2ca45cabcb]  { --glass-surface-radius: var(--glass-radius-2xl);
}
.glass-surface--radius-pill[data-v-di4-original-2ca45cabcb] { --glass-surface-radius: var(--glass-radius-pill);
}

/* Padding scale */
.glass-surface--padding-none[data-v-di4-original-2ca45cabcb] { padding: 0;
}
.glass-surface--padding-xs[data-v-di4-original-2ca45cabcb]   { padding: var(--glass-space-2);
}
.glass-surface--padding-sm[data-v-di4-original-2ca45cabcb]   { padding: var(--glass-space-3);
}
.glass-surface--padding-md[data-v-di4-original-2ca45cabcb]   { padding: var(--glass-space-4);
}
.glass-surface--padding-lg[data-v-di4-original-2ca45cabcb]   { padding: var(--glass-space-5);
}
.glass-surface--padding-xl[data-v-di4-original-2ca45cabcb]   { padding: var(--glass-space-6);
}

/* Tints — additive gradient overlay on top of the base layer.
   The base layer under the gradient is `var(--glass-surface-bg, var(--glass-tint-panel))` — the
   same per-instance background hook the tier rules consume — genuinely unset by default (not
   declared anywhere on .glass-surface), so the fallback always fires unless a consumer sets it.
   The gradient colour is a design token — no hardcoded rgba() literals.
   Tint colours reference --tint-warm/--tint-cool/--tint-accent/--tint-neutral (semantic tint tokens
   from tokens/tints.css, covering every theme incl. light-warm/oled-black/high-contrast/
   forced-colors) rather than the PRP-sketched --glass-tint-panel-warm/--glass-accent-soft/
   --glass-tint-secondary: those three names are pre-existing tokens with unrelated semantics
   (warning background, selection tint, secondary panel translucency respectively) and using
   them here would both collide two tints onto one colour (cool and neutral both resolve to
   --glass-tint-secondary) and change the rendered hue of every tint variant vs. the pre-upgrade
   default (see git show 44cafdf — the old rgba() literals were already dead code, since
   --tint-warm etc. are unconditionally defined at :root; the *actual* pre-upgrade rendering was
   already driven by these --tint-* tokens). --tint-accent is already used the same way, directly,
   by GlassBackgroundPicker.vue — this is established precedent, not a new pattern.
   Each --tint-* carries a `var(--glass-tint-hover)` fallback (a --glass-* token defined in every
   theme block) so a consumer that loads only generated/tokens.css and not tints.css still gets a
   valid, visible gradient instead of an invalid (dropped) declaration. */
.glass-surface--tint-warm[data-v-di4-original-2ca45cabcb],
[data-tint="warm"][data-v-di4-original-2ca45cabcb]    { background: linear-gradient(135deg, var(--tint-warm, var(--glass-tint-hover)) 0%, transparent 60%), var(--glass-surface-bg, var(--glass-tint-panel));
}
.glass-surface--tint-cool[data-v-di4-original-2ca45cabcb],
[data-tint="cool"][data-v-di4-original-2ca45cabcb]    { background: linear-gradient(135deg, var(--tint-cool, var(--glass-tint-hover)) 0%, transparent 60%), var(--glass-surface-bg, var(--glass-tint-panel));
}
.glass-surface--tint-accent[data-v-di4-original-2ca45cabcb],
[data-tint="accent"][data-v-di4-original-2ca45cabcb]  { background: linear-gradient(135deg, var(--tint-accent, var(--glass-tint-hover)) 0%, transparent 60%), var(--glass-surface-bg, var(--glass-tint-panel));
}
.glass-surface--tint-neutral[data-v-di4-original-2ca45cabcb],
[data-tint="neutral"][data-v-di4-original-2ca45cabcb] { background: linear-gradient(135deg, var(--tint-neutral, var(--glass-tint-hover)) 0%, transparent 60%), var(--glass-surface-bg, var(--glass-tint-panel));
}

/* Refraction edge — chromatic light rim on the element's border */
.glass-surface--refraction-edge[data-v-di4-original-2ca45cabcb] {
  overflow: hidden; /* contain the ::before pseudo-element */
}
.glass-surface--refraction-edge[data-v-di4-original-2ca45cabcb]::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: var(--glass-refraction-edge, linear-gradient(135deg, var(--glass-tint-hover) 0%, transparent 30%, transparent 70%, var(--glass-tint-hover) 100%));
  opacity: 0.6;
  z-index: 0;
}

/* Interactive */
.glass-surface--interactive[data-v-di4-original-2ca45cabcb] {
  cursor: pointer;
  user-select: none;
}
.glass-surface--interactive[data-v-di4-original-2ca45cabcb]:hover  { background: var(--glass-tint-hover);
}
.glass-surface--interactive[data-v-di4-original-2ca45cabcb]:active { background: var(--glass-tint-active); transform: scale(0.998);
}
.glass-surface--interactive[data-v-di4-original-2ca45cabcb]:focus-visible {
  outline: none;
  /* Composes the focus ring on top of the current shadow axis value (--glass-surface-shadow)
     instead of hardcoding the 'key' stack — a shadow="none"/"ambient" surface keeps its own
     elevation and just gains a ring, rather than jumping to a full key shadow on focus.
     SHADOW_TOKENS.none is a zero-length shadow (not the `none` keyword) precisely so it can be
     combined with the ring shadow in this list. */
  box-shadow: var(--glass-surface-shadow), 0 0 0 var(--glass-focus-ring-width) var(--glass-border-focus);
}

/* Disabled */
.glass-surface--disabled[data-v-di4-original-2ca45cabcb] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Loading overlay */
.glass-surface--loading[data-v-di4-original-2ca45cabcb] > :not(.glass-surface__loading-overlay) {
  filter: blur(2px);
  pointer-events: none;
}
.glass-surface__loading-overlay[data-v-di4-original-2ca45cabcb] {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--glass-tint-inverse);
  border-radius: inherit;
  z-index: 1;
}
.glass-surface__spinner[data-v-di4-original-2ca45cabcb] {
  width: 24px;
  height: 24px;
  border: 2px solid var(--glass-border-soft);
  border-top-color: var(--glass-accent);
  border-radius: 50%;
  animation: glass-surface-spin-di4-original-2ca45cabcb var(--glass-duration-crawl) linear infinite;
}
@keyframes glass-surface-spin-di4-original-2ca45cabcb {
to { transform: rotate(360deg);
}
}

/* Touch-targets — coarse pointers (mobile/tablet) get min 44px hit area */
@media (pointer: coarse) {
.glass-surface--interactive[data-v-di4-original-2ca45cabcb] { min-block-size: 44px;
}
}

/* Reduced-motion fallbacks (token-level fallback also exists, this is belt+braces) */
@media (prefers-reduced-motion: reduce) {
.glass-surface[data-v-di4-original-2ca45cabcb] { transition: none;
}
.glass-surface__spinner[data-v-di4-original-2ca45cabcb] { animation-duration: 1.5s;
}
.glass-surface--interactive[data-v-di4-original-2ca45cabcb]:active { transform: none;
}
}

/* Forced-colors mode (Windows HCM) — replace with system color keywords */
@media (forced-colors: active) {
.glass-surface[data-v-di4-original-2ca45cabcb] {
    background: Canvas;
    color: CanvasText;
    border-color: CanvasText;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.glass-surface--interactive[data-v-di4-original-2ca45cabcb]:focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
}
}

/* Fade transition (slot:loading) */
.lg-fade-enter-active[data-v-di4-original-2ca45cabcb],
.lg-fade-leave-active[data-v-di4-original-2ca45cabcb] { transition: opacity var(--glass-transition-fast);
}
.lg-fade-enter-from[data-v-di4-original-2ca45cabcb],
.lg-fade-leave-to[data-v-di4-original-2ca45cabcb]     { opacity: 0;
}


.glass-card[data-v-di4-original-24dfeb8fc2] {
  /* Local, overridable sizing for the horizontal-orientation media aside (token fallback,
     consumers may override these custom properties per-instance). */
  --glass-card-media-inline: 40%;
  --glass-card-media-max: 220px;
  --glass-card-media-min-coarse: 88px;
  /* Fallback only — GlassSurface always sets --glass-surface-shadow via an inline style on this
     same element at runtime (higher specificity than this rule), so this definition exists purely
     so the token contract can see --glass-surface-shadow defined in this file too; see
     GlassSurface.vue's own --glass-surface-shadow declaration for the authoritative value. */
  --glass-surface-shadow: var(--glass-shadow-ambient), var(--glass-shadow-key), var(--glass-shadow-inset-hi);
  display: flex;
  flex-direction: column;
}
.glass-card__content[data-v-di4-original-24dfeb8fc2] {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-inline-size: 0;
  min-block-size: 0;
  /* Keep the density gap (density.css sets gap on the card root) between header/subtitle/body/footer
     now that they are grandchildren of the root rather than its direct flex children. */
  gap: inherit;
}

/* Density themes put padding on the root itself, which would inset the media; media cards keep
   their own edge-to-edge layout (sections carry the padding). */
[data-density] .glass-card.glass-card--has-media[data-v-di4-original-24dfeb8fc2] {
  padding: 0;
}

/* Media — clipped to the card's radius; edge-to-edge (no padding). */
.glass-card--has-media[data-v-di4-original-24dfeb8fc2] {
  overflow: hidden;
}
.glass-card__media[data-v-di4-original-24dfeb8fc2] {
  flex: 0 0 auto;
  display: block;
  overflow: hidden;
}
.glass-card__media[data-v-di4-original-24dfeb8fc2] img,
.glass-card__media[data-v-di4-original-24dfeb8fc2] video {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Horizontal orientation — media becomes an aside beside the content column. */
.glass-card[data-orientation='horizontal'][data-v-di4-original-24dfeb8fc2] {
  flex-direction: row;
}
.glass-card[data-orientation='horizontal'] .glass-card__media[data-v-di4-original-24dfeb8fc2] {
  flex: 0 0 auto;
  inline-size: var(--glass-card-media-inline);
  max-inline-size: var(--glass-card-media-max);
}

/* Header/footer with hairline dividers — colors come from tokens */
.glass-card__header[data-v-di4-original-24dfeb8fc2],
.glass-card__footer[data-v-di4-original-24dfeb8fc2] {
  position: relative;
}
.glass-card__header[data-v-di4-original-24dfeb8fc2] { border-bottom: 1px solid var(--glass-border-hairline);
}
.glass-card__footer[data-v-di4-original-24dfeb8fc2] { border-top:    1px solid var(--glass-border-hairline);
}

/* Synthesized header (legacy `title`/`headerActions` prop adapter) */
.glass-card__header--synthesized[data-v-di4-original-24dfeb8fc2] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--glass-space-3);
}
.glass-card__title[data-v-di4-original-24dfeb8fc2] {
  margin: 0;
  font-size: var(--glass-text-label-size);
  font-weight: var(--glass-font-weight-semibold);
}
.glass-card__header-actions[data-v-di4-original-24dfeb8fc2] {
  display: flex;
  align-items: center;
  gap: var(--glass-space-1);
}

/* Subtitle — secondary line under the header */
.glass-card__subtitle[data-v-di4-original-24dfeb8fc2] {
  margin: 0;
  color: var(--glass-text-secondary);
  font-size: var(--glass-text-label-size);
  line-height: var(--glass-text-label-line);
}

/* Subtitle directly follows the header: tuck it under the title (no hairline between them) and
   put the divider under the subtitle instead. Specificity beats the per-padding rules below. */
.glass-card:not(.glass-card--padding-none) .glass-card__header[data-v-di4-original-24dfeb8fc2]:has(+ .glass-card__subtitle) {
  border-bottom: 0;
  padding-block-end: 0;
}
.glass-card:not(.glass-card--padding-none) .glass-card__header + .glass-card__subtitle[data-v-di4-original-24dfeb8fc2] {
  padding-block-start: var(--glass-space-1);
  border-bottom: 1px solid var(--glass-border-hairline);
}
.glass-card--padding-none .glass-card__header[data-v-di4-original-24dfeb8fc2]:has(+ .glass-card__subtitle) {
  border-bottom: 0;
}
.glass-card--padding-none .glass-card__header + .glass-card__subtitle[data-v-di4-original-24dfeb8fc2] {
  border-bottom: 1px solid var(--glass-border-hairline);
}

/* Footer actions — trailing action cluster, additive to any #footer content. With actions the
   footer is a wrapping row: #footer content leads, the cluster sits at the inline end on the same
   line when it fits and wraps under it otherwise. Footers without actions keep block layout. */
.glass-card__footer--with-actions[data-v-di4-original-24dfeb8fc2] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--glass-space-2);
}
.glass-card__actions[data-v-di4-original-24dfeb8fc2] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--glass-space-2);
  margin-inline-start: auto;
}

/* Per-padding-size offsets — must match Surface's padding scale */
.glass-card--padding-none .glass-card__header[data-v-di4-original-24dfeb8fc2],
.glass-card--padding-none .glass-card__footer[data-v-di4-original-24dfeb8fc2],
.glass-card--padding-none .glass-card__subtitle[data-v-di4-original-24dfeb8fc2],
.glass-card--padding-none .glass-card__body[data-v-di4-original-24dfeb8fc2] { padding: 0;
}
.glass-card--padding-xs .glass-card__header[data-v-di4-original-24dfeb8fc2],
.glass-card--padding-xs .glass-card__footer[data-v-di4-original-24dfeb8fc2],
.glass-card--padding-xs .glass-card__subtitle[data-v-di4-original-24dfeb8fc2] { padding: var(--glass-space-2) var(--glass-space-3);
}
.glass-card--padding-xs .glass-card__body[data-v-di4-original-24dfeb8fc2] { padding: var(--glass-space-2) var(--glass-space-3);
}
.glass-card--padding-sm .glass-card__header[data-v-di4-original-24dfeb8fc2],
.glass-card--padding-sm .glass-card__footer[data-v-di4-original-24dfeb8fc2],
.glass-card--padding-sm .glass-card__subtitle[data-v-di4-original-24dfeb8fc2] { padding: var(--glass-space-3) var(--glass-space-4);
}
.glass-card--padding-sm .glass-card__body[data-v-di4-original-24dfeb8fc2] { padding: var(--glass-space-3) var(--glass-space-4);
}
.glass-card--padding-md .glass-card__header[data-v-di4-original-24dfeb8fc2],
.glass-card--padding-md .glass-card__footer[data-v-di4-original-24dfeb8fc2],
.glass-card--padding-md .glass-card__subtitle[data-v-di4-original-24dfeb8fc2] { padding: var(--glass-space-3) var(--glass-space-4);
}
.glass-card--padding-md .glass-card__body[data-v-di4-original-24dfeb8fc2] { padding: var(--glass-space-4);
}
.glass-card--padding-lg .glass-card__header[data-v-di4-original-24dfeb8fc2],
.glass-card--padding-lg .glass-card__footer[data-v-di4-original-24dfeb8fc2],
.glass-card--padding-lg .glass-card__subtitle[data-v-di4-original-24dfeb8fc2] { padding: var(--glass-space-4) var(--glass-space-5);
}
.glass-card--padding-lg .glass-card__body[data-v-di4-original-24dfeb8fc2] { padding: var(--glass-space-5);
}
.glass-card--padding-xl .glass-card__header[data-v-di4-original-24dfeb8fc2],
.glass-card--padding-xl .glass-card__footer[data-v-di4-original-24dfeb8fc2],
.glass-card--padding-xl .glass-card__subtitle[data-v-di4-original-24dfeb8fc2] { padding: var(--glass-space-5) var(--glass-space-6);
}
.glass-card--padding-xl .glass-card__body[data-v-di4-original-24dfeb8fc2] { padding: var(--glass-space-6);
}

/* Body grows to fill space if header/footer have intrinsic height */
.glass-card__body[data-v-di4-original-24dfeb8fc2] { flex: 1 1 auto; min-height: 0;
}
/* When no sections, padding lives on Surface; body has no extra padding */
.glass-card__body--no-sections[data-v-di4-original-24dfeb8fc2] { padding: 0 !important;
}

/* Selected — accent border for pickable cards (higher specificity so it beats
   GlassSurface's own border-color rule regardless of stylesheet order). Weight also changes
   (inset ring, not just hue) so the state does not rely on colour alone; consumers picking a
   stronger signal still (e.g. a check glyph) can key off the `[data-selected]` attribute. */
.glass-card.glass-card--selected[data-v-di4-original-24dfeb8fc2] {
  border-color: var(--glass-accent);
  box-shadow: var(--glass-surface-shadow), inset 0 0 0 1px var(--glass-accent);
}
/* Selected + keyboard focus — the rule above shares `box-shadow` with GlassSurface's
   `.glass-surface--interactive:focus-visible` ring at equal specificity and is emitted later,
   so it would otherwise erase the focus ring on exactly the selected interactive card
   (WCAG 2.4.7). Re-compose shadow stack + selected inset ring + focus ring here at higher
   specificity; forced-colors is handled by Surface's outline rule below. */
.glass-card.glass-card--selected.glass-surface--interactive[data-v-di4-original-24dfeb8fc2]:focus-visible {
  box-shadow:
    var(--glass-surface-shadow),
    inset 0 0 0 1px var(--glass-accent),
    0 0 0 var(--glass-focus-ring-width) var(--glass-border-focus);
}

/* Hover lift — transform-only, opt-in. The press compose (`translateY(-1px) scale(0.998)`)
   is scoped to `.glass-surface--interactive`, i.e. only where GlassSurface itself applies its
   `:active { transform: scale(0.998) }` press feedback; at (0,3,0) it beats both Surface's
   rule and the plain hover rule, so on press both transforms compose instead of one silently
   winning by stylesheet order. A non-interactive hoverLift card only ever lifts. */
.glass-card--hover-lift[data-v-di4-original-24dfeb8fc2] {
  transition: transform var(--glass-transition-fast), background var(--glass-transition-fast),
    border-color var(--glass-transition-fast), box-shadow var(--glass-transition-fast);
}
.glass-card--hover-lift[data-v-di4-original-24dfeb8fc2]:hover {
  transform: translateY(-1px);
}
.glass-card--hover-lift.glass-surface--interactive[data-v-di4-original-24dfeb8fc2]:active {
  transform: translateY(-1px) scale(0.998);
}

/* Reduced motion — the `.glass-card--hover-lift` transition rule above is emitted after
   GlassSurface's `@media (prefers-reduced-motion: reduce) .glass-surface { transition: none }`
   at equal specificity, so it must be switched off again here (matching every other surface);
   the transform is neutralised on every selector that sets it. */
@media (prefers-reduced-motion: reduce) {
.glass-card--hover-lift[data-v-di4-original-24dfeb8fc2] {
    transition: none;
}
.glass-card--hover-lift[data-v-di4-original-24dfeb8fc2],
  .glass-card--hover-lift[data-v-di4-original-24dfeb8fc2]:hover,
  .glass-card--hover-lift.glass-surface--interactive[data-v-di4-original-24dfeb8fc2]:active {
    transform: none;
}
}

/* Narrow viewports — a 40% aside is too cramped on phones, so horizontal cards stack their
   media above the content column (data-orientation stays 'horizontal'). */
@media (max-width: 480px) {
.glass-card[data-orientation='horizontal'][data-v-di4-original-24dfeb8fc2] {
    flex-direction: column;
}
.glass-card[data-orientation='horizontal'] .glass-card__media[data-v-di4-original-24dfeb8fc2] {
    inline-size: auto;
    max-inline-size: none;
}
}

/* Coarse pointers — media aside keeps a usable minimum width */
@media (pointer: coarse) {
.glass-card[data-orientation='horizontal'] .glass-card__media[data-v-di4-original-24dfeb8fc2] {
    min-inline-size: var(--glass-card-media-min-coarse);
}
}

/* Forced-colors fallback — system divider/border colors */
@media (forced-colors: active) {
.glass-card__header[data-v-di4-original-24dfeb8fc2] { border-bottom-color: CanvasText;
}
.glass-card__footer[data-v-di4-original-24dfeb8fc2] { border-top-color: CanvasText;
}
.glass-card__header + .glass-card__subtitle[data-v-di4-original-24dfeb8fc2] { border-bottom-color: CanvasText;
}
  /* Selected keeps a non-colour cue here: the shadow ring is dropped in forced-colors, so an inset
     outline carries it; Surface's focus outline (offset 2px, outside) stays distinct from it. */
.glass-card.glass-card--selected[data-v-di4-original-24dfeb8fc2] {
    outline: 2px solid Highlight;
    outline-offset: -2px;
}
.glass-card.glass-card--selected.glass-surface--interactive[data-v-di4-original-24dfeb8fc2]:focus-visible {
    outline-offset: 2px;
}
.glass-card.glass-card--selected[data-v-di4-original-24dfeb8fc2],
  .glass-card.glass-card--selected.glass-surface--interactive[data-v-di4-original-24dfeb8fc2]:focus-visible {
    border-color: Highlight;
    box-shadow: none; /* focus is Surface's `outline: 2px solid Highlight` here */
}
}