/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
  --pointer-platform: #90caf9;
  --pointer-platform-dark: #64b5f6;
  --pointer-platform-tint: rgba(144, 202, 249, 0.15);
  --pointer-user: #ce93d8;
  --pointer-user-dark: #ba68c8;
  --pointer-user-tint: rgba(206, 147, 216, 0.15);
  --pointer-list: #a5d6a7;
  --pointer-list-dark: #81c784;
  --pointer-list-tint: rgba(165, 214, 167, 0.15);
  --pointer-link: #ffcc80;
  --pointer-link-dark: #ffb74d;
  --pointer-link-tint: rgba(255, 204, 128, 0.15);
  --pointer-tag: #ef9a9a;
  --pointer-tag-dark: #e57373;
  --pointer-tag-tint: rgba(239, 154, 154, 0.15);
}

/* Feed density: compact (default) shows the inline domain/date; regular shows a
   detail subline beneath the title instead. Toggled by data-density on an ancestor. */
.cell-subline { display: none; }
[data-density="regular"] .cell-subline { display: block; }
[data-density="regular"] .cell-inline-meta { display: none; }
/* Phones always use the subline: the node button and ⋯ leave no room for inline meta.
   Compact keeps the tools beside the title; regular gives the title the whole first
   line and moves the tools down beside the subline. */
@media (max-width: 767px) {
  .cell-subline { display: block; }
  .cell-inline-meta { display: none; }

  [data-density="regular"] .cell-main {
    display: grid;
    grid-template-columns: auto 1rem minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 0;
  }
  [data-density="regular"] .cell-main .cell-organize { grid-column: 1; grid-row: 1 / span 2; margin-right: 0.5rem; }
  [data-density="regular"] .cell-main .cell-icon { grid-column: 2; grid-row: 1; }
  [data-density="regular"] .cell-main .cell-body { display: contents; }
  [data-density="regular"] .cell-main .cell-title { grid-column: 3 / span 2; grid-row: 1; padding: 7px 0 2px 0.5rem; }
  [data-density="regular"] .cell-main .cell-subline { grid-column: 3; grid-row: 2; padding: 0 0 7px 0.5rem; }
  [data-density="regular"] .cell-main .cell-tools { grid-column: 4; grid-row: 2; padding-bottom: 5px; }
}

/* Hero chain: when the highlight reaches the center mark, an avatar hops once. The keyframes
   follow the gaze style's own hop (vendor/dicebear/gaze.json), hooked on its dbga-hop group. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes hero-chain-hop {
    0%, 100% { transform: translateY(0) scale(1, 1); }
    18% { transform: translateY(0) scale(1.06, 0.94); }
    45% { transform: translateY(-4px) scale(0.96, 1.05); }
    72% { transform: translateY(0) scale(1.05, 0.95); }
    88% { transform: translateY(0) scale(0.99, 1.01); }
  }
  [data-controller~="hero-chain"] [data-kind="center"][data-hot] .dbga-hop {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: hero-chain-hop 0.7s ease-out 1;
  }
}

/* ViewComponent debug overlay (development only). data-vc is emitted solely when
   the ?vc_debug=1 toggle is on, so these rules never match in production. Outline
   avoids layout shift; the component name label appears on hover. */
[data-vc] {
  outline: 1px solid rgba(236, 72, 153, 0.35);
  outline-offset: -1px;
  /* Each component gets a translucent background tinted by --vc-hue (derived
     from its class name), so nesting shows as layered colors. */
  background-color: hsl(var(--vc-hue, 330) 85% 55% / 0.08);
}
[data-vc]:hover {
  outline-color: rgba(236, 72, 153, 0.9);
  position: relative;
}
[data-vc]:hover::before {
  content: attr(data-vc);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  padding: 1px 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  line-height: 1.4;
  color: #fff;
  background: rgba(236, 72, 153, 0.95);
  pointer-events: none;
  white-space: nowrap;
}