/**
 * Phase 8 Real Grid Mode & Diagnostic Layout Overlay Styles
 * Visualizes canonical Candidate D shell geometry, safe-areas, tracks, reading measure, and baseline.
 *
 * Single Geometry Source: Shares --ds-layout-* variables with production shell.
 */

@layer ds.components {
  /* Grid Overlay Container */
  .ds-grid-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 50;
    display: none;
    overflow: hidden;
    aria-hidden: true;
  }

  /* Active Grid State */
  [data-ds-grid="on"] .ds-grid-overlay {
    display: block;
  }

  /* Page Frame & Outer Margin Diagnostic */
  .ds-grid-overlay__frame {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    padding-inline-start: max(var(--ds-layout-page-margin-inline), env(safe-area-inset-left));
    padding-inline-end: max(var(--ds-layout-page-margin-inline), env(safe-area-inset-right));
    padding-block-start: var(--ds-density-page-start, var(--ds-space-10));
    padding-block-end: var(--ds-density-page-end, var(--ds-space-20));
    pointer-events: none;
  }

  /* Overlay-only shell behavior. Geometry is shared with .ds-portfolio-shell
     in foundations.css so the diagnostic cannot drift from production. */
  .ds-grid-overlay__shell {
    position: relative;
    height: 100%;
  }

  .ds-grid-overlay__shell::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 47px,
      color-mix(in oklch, var(--ds-semantic-color-text-muted) 12%, transparent) 47px,
      color-mix(in oklch, var(--ds-semantic-color-text-muted) 12%, transparent) 48px
    );
  }

  /* Track Diagnostics */
  .ds-grid-overlay__track {
    position: relative;
    z-index: 1;
    height: 100%;
    border-inline: 1px dashed color-mix(in oklch, var(--ds-semantic-color-text-muted) 24%, transparent);
    background: transparent;
    box-sizing: border-box;
  }

  .ds-grid-overlay__track--start {
    display: none;
  }

  .ds-grid-overlay__track--end {
    display: none;
  }

  /* Reading Measure Diagnostic Keyline (37.5rem cap) */
  .ds-grid-overlay__reading-guide {
    display: none;
  }

  /* Diagnostic Dimension Labels (Positioned in Shell Margins to prevent Content Collisions) */
  .ds-grid-overlay__label {
    display: none;
  }

  .ds-grid-overlay__label--reading {
    top: auto !important;
    bottom: -26px !important;
    left: 0;
  }

  /* Responsive track visibility; shell sizing comes from foundations.css. */
  @media (min-width: 900px) {
    .ds-grid-overlay__track--start {
      display: block;
    }
  }

  @media (min-width: 1200px) {
    .ds-grid-overlay__track--end {
      display: block;
    }
  }

  /* ─── Baseline Grid Layer (4px unit / 8px macro rhythm) ─── */
  .ds-grid-overlay__baseline {
    position: absolute;
    inset: var(--ds-space-48) 0;
    pointer-events: none;
    display: none;
    background-image:
      linear-gradient(to bottom, color-mix(in oklch, var(--ds-semantic-color-text-primary) 1.8%, transparent) 1px, transparent 1px),
      linear-gradient(to bottom, color-mix(in oklch, var(--ds-semantic-color-text-primary) 3.6%, transparent) 1px, transparent 1px);
    background-size: 100% 4px, 100% 8px;
    background-repeat: repeat-y;
  }

  [data-ds-grid="on"][data-ds-grid-baseline="on"] .ds-grid-overlay__baseline {
    display: block;
  }

  @media (max-width: 720px) {
    .ds-grid-overlay__label {
      display: none;
    }
  }
}

/* Print Disablement */
@media print {
  .ds-grid-overlay,
  [data-ds-grid="on"] .ds-grid-overlay {
    display: none !important;
  }
}