/**
 * Results View Component - Design System Implementation
 * 
 * Pixel-perfect match to design.html results view
 * Includes: Results card, savings bar, info section, tags, disclaimer
 */

@layer components {
  /* ═══════════════════════════════════════════════════════════
     RESULT CONTAINER - Initial State
     ═══════════════════════════════════════════════════════════ */
  
  #result {
    display: none;
  }
  
  /* ═══════════════════════════════════════════════════════════
     ANIMATIONS - Initial hidden states for dynamic elements
     Elements inside result-card are rendered by JS, need initial states
     ═══════════════════════════════════════════════════════════ */
  
  /* Initial hidden state for savings bar */
  .savings-bar {
    opacity: 0;
    transform: translateY(var(--space-1));
  }
  
  .results-view .savings-bar {
    animation: savingsAppear var(--duration-medium) var(--ease-emphasized-decelerate) forwards;
    animation-delay: 0ms;
  }
  /* ═══════════════════════════════════════════════════════════
     RESULTS CONTENT LAYOUT
     ═══════════════════════════════════════════════════════════ */
  
  .results-content {
    flex-direction: column;
    align-items: center;
    width: var(--content-width);
    margin-top: var(--space-8);
  }
  
  .results-title-section {
    padding: var(--space-8) var(--space-3);
    width: 100%;
  }

  /* Focused by script after submit (ui-handlers.js) so reading starts here; it is not a control,
     so it shows no ring */
  .results-title:focus {
    outline: none;
  }
  
  .results-title {
    font-family: var(--font-sans);
    font-weight: var(--font-medium);
    font-size: var(--text-xl-size);
    line-height: var(--text-xl-leading);
    letter-spacing: var(--text-xl-tracking);
    color: var(--color-text);
    margin-bottom: var(--space-2);
  }
  
  .results-subtitle {
    font-family: var(--font-sans);
    font-weight: var(--font-medium);
    font-size: var(--text-lg-size);
    line-height: var(--text-default-leading);
    letter-spacing: var(--text-lg-tracking);
    color: var(--color-text-secondary);
  }
  
  /* ═══════════════════════════════════════════════════════════
     RESULT CARD CONTAINER
     ═══════════════════════════════════════════════════════════ */
  
  .result-card-container {
    width: 100%;
    background: var(--color-surface-sunken);
    border-radius: var(--radius-xl);
    padding-bottom: var(--space-3);
  }
  
  .result-card-slot {
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-xl);
  }
  
  .result-card {
    background: var(--color-surface-card);
    border: 1px solid var(--color-highlight);
    /* Child radius = parent radius (16px) - parent border (0.5px) ≈ 15.5px */
    border-radius: calc(var(--radius-xl) - 0.5px);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
  }
  
  .result-card::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: var(--shadow-inset-light);
    /* Inherits parent's border-radius */
    border-radius: calc(var(--radius-xl) - 0.5px);
    z-index: 0;
  }
  
  /* ═══════════════════════════════════════════════════════════
     RESULT CARD HEADER
     ═══════════════════════════════════════════════════════════ */
  
  .result-card-header {
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  
  .result-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
  
  .provider-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--control-height-md); /* square, as tall as the md buttons beside it */
    block-size: var(--control-height-md);
    border: 0.5px solid var(--color-highlight); /* Same border as secondary button */
    border-radius: var(--radius-sm); /* 6px - same as buttons */
    background: var(--color-surface-raised); /* More prominent background - oklch(95% 0 0) #F0F0EF */
    box-shadow: var(--shadow-icon); /* Same shadow as icon containers */
    position: relative;
    overflow: hidden;
  }
  
  /* Inset shadow for provider icon - matches Figma design */
  .provider-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-icon-inset);
    pointer-events: none;
  }

  
  .result-card-actions {
    display: flex;
    gap: var(--space-3);
    align-items: center;
  }
  
  .result-card-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }
  
  .provider-name {
    font-family: var(--font-sans);
    font-weight: var(--font-medium);
    font-size: var(--text-lg-size);
    line-height: var(--text-lg-leading);
    letter-spacing: var(--text-lg-tracking);
    color: var(--color-text);
  }
  
  .provider-plan {
    font-family: var(--font-sans);
    font-weight: var(--font-medium);
    font-size: var(--text-lg-size);
    line-height: var(--text-lg-leading);
    letter-spacing: var(--text-lg-tracking);
    color: var(--color-text-secondary);
  }
  
  /* ═══════════════════════════════════════════════════════════
     RESULT DATA ROWS
     ═══════════════════════════════════════════════════════════ */
  
  .result-data {
    padding: 0 var(--space-3) var(--space-3);
  }
  
  .data-row {
    border-bottom: 0.5px solid var(--color-border);
  }
  
  .data-row-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-divider-strong);
  }
  
  .data-row-label {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }
  
  .data-row-label .icon {
    opacity: 0.6;
  }
  
  
  .data-row-label span {
    font-family: var(--font-sans);
    font-weight: var(--font-medium);
    font-size: var(--text-base-size);
    line-height: var(--text-default-leading);
    color: var(--color-text-secondary);
  }
  
  .data-row-label .muted {
    color: var(--color-text-secondary);
  }
  
  /* Prices and quantities line up digit for digit */
  .data-row-value {
    font-variant-numeric: tabular-nums;
    font-family: var(--font-sans);
    font-weight: var(--font-medium);
    font-size: var(--text-base-size);
    line-height: var(--text-default-leading);
    color: var(--color-text);
  }
  
  .data-row-value-group {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }
  
  /* Campaign Badge */
  .badge {
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-sm);
  }
  
  .badge-inner {
    /* Shares same visual structure as buttons/pills */
    padding: var(--space-1) var(--space-2);
    border: 0.5px solid var(--color-highlight);
    border-radius: calc(var(--radius-sm) - 0.5px); /* Child radius = parent radius - border width */
    box-shadow: var(--shadow-xs);
    font-family: var(--font-sans);
    font-weight: var(--font-medium);
    font-size: var(--text-xs-size);
    line-height: var(--text-xs-leading);
    text-transform: uppercase;
    letter-spacing: var(--text-caps-tracking);
    color: var(--color-accent);
  }
  
  /* ═══════════════════════════════════════════════════════════
     SAVINGS BAR - the positive green (--color-positive)
     Shares same visual aspect as secondary buttons, only color differs
     ═══════════════════════════════════════════════════════════ */
  
  /* Estimate mode: where the best offer sits in the market */
  .market-summary {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    margin-top: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 0.5px solid var(--color-border-accent);
    border-radius: var(--radius-sm);
    background: var(--color-savings-bar-bg);
    font-family: var(--font-sans);
    font-size: var(--text-base-size);
    color: var(--color-text);
  }

  .savings-bar {
    border: 0.5px solid var(--color-border-accent); /* Accent border - foreground at 30% opacity */
    border-radius: var(--radius-sm); /* 6px */
    height: 2.75rem; /* 44px - fixed height for savings bar */
    margin-top: var(--space-3);
    position: relative;
  }
  
  .savings-bar-inner {
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1); /* 4px gap */
    position: absolute;
    inset: 0; /* Fill parent completely */
    padding: var(--space-1) var(--space-2); /* 4px vertical, 8px horizontal */
    border: 0.5px solid var(--color-highlight); /* White inner border */
    border-radius: var(--radius-sm); /* 6px - same as parent */
    background: var(--color-savings-bar-bg);
    box-shadow: var(--shadow-savings-bar); /* 0px 4px 8px 0px rgba(113,152,131,0.08) */
  }
  
  .savings-bar-inner::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-sm); /* 6px - matches inner border-radius */
    box-shadow: var(--shadow-inset-dark); /* -1px 1px 4px 0px rgba(113,152,131,0.04) inset */
    pointer-events: none;
  }
    
  
  .savings-bar-inner span {
    font-family: var(--font-sans);
    font-weight: var(--font-medium);
    font-size: var(--text-base-size);
    line-height: var(--text-default-leading);
    color: var(--color-accent);
  }
  
  /* ═══════════════════════════════════════════════════════════
     RESULT INFO SECTION
     ═══════════════════════════════════════════════════════════ */
  
  /* One row layout for every row (audit C-10): a label column as wide as the longest label (at most
     40%, so a narrow screen wraps it) and a value column, both starting on the same lines. The rows
     share the columns through subgrid */
  .result-info {
    display: grid;
    grid-template-columns: fit-content(40%) 1fr;
    padding: 0 var(--space-3);
  }

  .info-row,
  .info-row-inner {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
  }

  .info-row {
    border-bottom: 0.5px solid var(--color-border);
  }

  .info-row-inner {
    align-items: start;
    column-gap: var(--space-3); /* keeps the label clear of wrapping chips */
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-divider);
  }

  .disclaimer-row {
    grid-column: 1 / -1;
  }
  
  .info-row-label {
    font-family: var(--font-sans);
    font-weight: var(--font-medium);
    font-size: var(--text-base-size);
    line-height: var(--text-default-leading);
    color: var(--color-text-secondary);
  }
  
  .info-row-value {
    font-family: var(--font-sans);
    font-weight: var(--font-medium);
    font-size: var(--text-base-size);
    line-height: var(--text-default-leading);
    color: var(--color-text);
  }
  
  /* Tags: facts, not controls, so no edge and no shadow; a tint sets them apart from the buttons
     (audit C-9) */
  .tags-group {
    display: flex;
    flex-wrap: wrap; /* chips wrap instead of scrolling the page sideways at 320 px (WCAG 1.4.10) */
    gap: var(--space-1);
    align-items: center;
  }

  .tag-inner {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-1);
    border-radius: var(--radius-sm);
    background-color: var(--color-hover-tint);
  }

  .tag-inner span {
    font-family: var(--font-sans);
    font-weight: var(--font-medium);
    font-size: var(--text-xs-size);
    line-height: var(--text-xs-leading);
    text-transform: uppercase;
    letter-spacing: var(--text-caps-tracking);
    color: var(--color-text);
  }
  
  /* Disclaimer */
  .disclaimer-row {
    padding: var(--space-4) 0 0 0;
  }
  
  .disclaimer-text {
    font-family: var(--font-sans);
    font-weight: var(--font-medium);
    font-size: var(--text-sm-size);
    line-height: var(--text-sm-leading);
    color: var(--color-text-secondary);
  }
  
  /* ═══════════════════════════════════════════════════════════
     FOOTER
     ═══════════════════════════════════════════════════════════ */
  
  .footer {
    width: var(--content-width);
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: auto; /* CRITICAL: pushes footer to bottom */
    padding-bottom: var(--space-6);
  }
  
  .footer-text {
    font-family: var(--font-sans);
    font-weight: var(--font-medium);
    font-size: var(--text-sm-size);
    line-height: var(--text-sm-leading);
    color: var(--color-text-secondary);
  }
  
  .footer-text a {
    text-decoration: underline;
    color: inherit;
  }
  
  .footer-updated {
    display: flex;
    align-items: center;
    gap: var(--space-1); /* 4px gap between icon and text */
    min-height: var(--text-base-size);
  }
  
  .footer-updated .icon {
    opacity: 0.8;
  }
  
  
  .footer-updated span {
    font-family: var(--font-sans);
    font-weight: var(--font-medium);
    font-size: var(--text-sm-size);
    line-height: var(--text-sm-leading);
    color: var(--color-text);
  }
}