/* ─────────────────────────────────────────
   CELLR — Component Styles
   app/assets/stylesheets/components.css
───────────────────────────────────────── */

@layer components {
  /* ── Layout ─────────────────────────── */

  .app-shell {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    max-width: 42rem; /* 672px — comfortable mobile+tablet */
    margin-inline: auto;
    position: relative;
    z-index: 1;
  }

  .page-content {
    flex: 1;
    padding: 1rem 1.25rem 8rem;
    overflow-y: auto;
  }

  /* ── Masthead ────────────────────────── */

  .masthead {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: var(--color-ink);
    color: var(--color-parchment);
  }

  .masthead-rule {
    height: 2px;
    background: linear-gradient(
      90deg,
      var(--color-terracotta),
      var(--color-gold),
      var(--color-sage)
    );
  }

  /* ── Stat pill ───────────────────────── */

  .stat-pill {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.35rem 1rem;
    border-radius: 999px;
    background-color: var(--color-parchment-2);
    border: 1px solid var(--color-ink-faint);
    white-space: nowrap;
  }

  .stat-pill__number {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-ink);
  }

  .stat-pill__label {
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-ink-light);
  }

  /* ── Search bar ──────────────────────── */

  .search-bar {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.875rem;
    border-radius: 12px;
    background: white;
    border: 1.5px solid var(--color-parchment-2);
    box-shadow: 0 1px 3px rgba(28, 21, 16, 0.06);
    transition:
      border-color 0.15s ease,
      box-shadow 0.15s ease;
  }

  .search-bar:focus-within {
    border-color: var(--color-terracotta);
    box-shadow: 0 0 0 3px rgba(184, 92, 58, 0.1);
  }

  .search-bar input {
    flex: 1;
    background: transparent;
    outline: none;
    font-size: 0.875rem;
    font-family: var(--font-body);
    color: var(--color-ink);
  }

  .search-bar input::placeholder {
    color: var(--color-ink-faint);
  }

  /* ── Tag chip ────────────────────────── */

  .chip {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    border: 1.5px solid var(--color-parchment-2);
    background: white;
    color: var(--color-ink-light);
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
  }

  .chip:active {
    transform: scale(0.96);
  }

  .chip--active,
  .chip[aria-selected="true"] {
    background: var(--color-ink);
    color: var(--color-parchment);
    border-color: var(--color-ink);
  }

  /* ── Wine card ───────────────────────── */

  .wine-card {
    position: relative;
    background: white;
    border-radius: 16px;
    border: 1.5px solid var(--color-parchment-2);
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(28, 21, 16, 0.05);
    transition:
      box-shadow 0.2s ease,
      transform 0.2s ease;
  }

  .wine-card:active {
    transform: scale(0.99);
    box-shadow: 0 1px 2px rgba(28, 21, 16, 0.04);
  }

  .details-toggle__minus {
    display: none;
  }

  .details-toggle__indicator {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--color-ink-light);
    user-select: none;
  }

  .details-toggle[open] .details-toggle__plus {
    display: none;
  }

  .details-toggle[open] .details-toggle__minus {
    display: inline;
  }

  /* Giant ghost vintage behind card content */
  .wine-card__vintage-watermark {
    font-family: var(--font-display);
    font-size: 5.5rem;
    font-weight: 900;
    font-style: italic;
    line-height: 1;
    letter-spacing: -0.03em;
    position: absolute;
    right: -0.5rem;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.055;
    color: var(--color-ink);
    pointer-events: none;
    user-select: none;
  }

  .wine-card__body {
    padding: 1rem;
    position: relative;
    z-index: 10;
  }

  .wine-card__divider {
    height: 1px;
    background: var(--color-parchment-2);
    margin-block: 0.75rem;
  }

  .wine-card__quantity {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding-inline: 0.4rem;
    border-radius: 999px;
    background: var(--color-parchment-2);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-ink-light);
    flex-shrink: 0;
  }

  /* ── Wine type pill ──────────────────── */

  .type-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .type-pill__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  /* Per-type colour variants */
  .type-pill--red {
    background: #e8d4cc;
    color: #8b3a1f;
  }
  .type-pill--white {
    background: var(--color-gold-light);
    color: #8b6914;
  }
  .type-pill--rose {
    background: #fbf0f2;
    color: #a05070;
  }
  .type-pill--sparkling {
    background: #eaf4fb;
    color: #3a7fa0;
  }
  .type-pill--dessert {
    background: #fdf5e6;
    color: #8b5e14;
  }
  .type-pill--fortified {
    background: #f5ebf5;
    color: #6b3a6b;
  }

  .type-pill__dot--red {
    background: var(--color-wine-red);
  }
  .type-pill__dot--white {
    background: var(--color-wine-white);
  }
  .type-pill__dot--rose {
    background: var(--color-wine-rose);
  }
  .type-pill__dot--sparkling {
    background: var(--color-wine-bubble);
  }
  .type-pill__dot--dessert {
    background: #d4a83c;
  }
  .type-pill__dot--fortified {
    background: #9b5c9b;
  }

  /* ── Drink window bar ────────────────── */

  .drink-window {
    height: 3px;
    border-radius: 999px;
    background: var(--color-parchment-2);
    overflow: hidden;
    margin-top: 0.5rem;
  }

  .drink-window__fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--color-sage), var(--color-gold));
  }

  /* Aging — not ready yet */
  .drink-window__fill--aging {
    background: linear-gradient(90deg, var(--color-gold), #e8c96a);
  }

  /* ── Drink status indicator ──────────── */

  .drink-status {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
  }

  .drink-status__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .drink-status--ready {
    color: var(--color-sage);
  }
  .drink-status--ready .drink-status__dot {
    background: var(--color-sage);
  }

  .drink-status--aging {
    color: #8b6914;
  }
  .drink-status--aging .drink-status__dot {
    background: var(--color-gold);
  }

  .drink-status--hold {
    color: var(--color-terracotta);
  }
  .drink-status--hold .drink-status__dot {
    background: var(--color-terracotta);
  }

  /* ── Happy hour ─────────────────────── */

  .happy-hour-banner {
    position: relative;
    border: 1.5px solid var(--color-parchment-2);
    border-radius: 16px;
    background: linear-gradient(
      135deg,
      var(--color-terra-light),
      var(--color-gold-light)
    );
    padding: 0.9rem 1rem;
    overflow: hidden;
  }

  .happy-hour-banner::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(
      90deg,
      var(--color-terracotta),
      var(--color-gold),
      var(--color-sage)
    );
  }

  .happy-hour-banner__kicker {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-ink-light);
  }

  .happy-hour-card {
    border-color: var(--color-gold-light);
  }

  .happy-hour-card::before {
    content: "";
    display: block;
    height: 3px;
    background: linear-gradient(
      90deg,
      var(--color-gold),
      var(--color-terracotta)
    );
  }

  .happy-hour-card--join::before {
    background: linear-gradient(90deg, var(--color-sage), var(--color-gold));
  }

  .happy-hour-list {
    margin-top: 0.5rem;
  }

  .happy-hour-list__item {
    position: relative;
  }

  .happy-hour-list__item::before {
    content: none;
  }

  .happy-hour-records {
    margin-top: 0.25rem;
  }

  .happy-hour-records__summary-row {
    padding: 0.35rem 0;
  }

  .happy-hour-records__label {
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--color-ink-faint);
  }

  .happy-hour-records__headline {
    margin-top: 0.15rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-ink);
    overflow-wrap: anywhere;
  }

  .happy-hour-pour {
    border: 1px solid var(--color-parchment-2);
    border-radius: 10px;
    background: var(--color-parchment);
    padding: 0.55rem 0.65rem;
  }

  .happy-hour-pour__winery {
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--color-ink-light);
    overflow-wrap: anywhere;
  }

  .happy-hour-pour__wine {
    margin-top: 0.1rem;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--color-ink);
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  .happy-hour-pour__vintage {
    font-weight: 600;
    color: var(--color-ink-light);
  }

  .happy-hour-pour__meta {
    margin-top: 0.35rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    flex-wrap: wrap;
    font-size: 0.75rem;
    color: var(--color-ink-light);
  }

  /* ── Scan FAB ────────────────────────── */

  .scan-fab {
    position: fixed;
    bottom: calc(5.5rem + env(safe-area-inset-bottom));
    right: 1.25rem;
    width: 54px;
    height: 54px;
    border-radius: 999px;
    background: var(--color-terracotta);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(184, 92, 58, 0.35);
    border: none;
    cursor: pointer;
    z-index: 50;
    transition:
      transform 0.15s ease,
      box-shadow 0.15s ease;
  }

  .scan-fab:active {
    transform: scale(0.93);
    box-shadow: 0 2px 8px rgba(184, 92, 58, 0.25);
  }

  /* ── Bottom navigation ───────────────── */

  .bottom-nav {
    position: fixed;
    bottom: 0;
    inset-inline: 0;
    z-index: 50;
    max-width: 42rem;
    margin-inline: auto;
    background: white;
    border-top: 1.5px solid var(--color-parchment-2);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .bottom-nav__items {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 0.125rem;
    padding: 0.5rem 0.5rem;
  }

  .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 0;
    gap: 3px;
    padding: 0.5rem 0.4rem;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s ease;
  }

  .nav-item span {
    font-size: 0.56rem;
    letter-spacing: 0.06em;
    line-height: 1.1;
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
  }

  @media (max-width: 420px) {
    .bottom-nav__items {
      padding-inline: 0.25rem;
    }

    .nav-item {
      padding: 0.45rem 0.2rem;
    }

    .nav-item span {
      font-size: 0.52rem;
      letter-spacing: 0.04em;
    }
  }

  .nav-item svg {
    width: 1.2rem;
    height: 1.2rem;
  }

  .nav-item--active {
    background: var(--color-terra-light);
  }

  .nav-item--active svg,
  .nav-item--active span {
    color: var(--color-terracotta);
  }

  .nav-item:not(.nav-item--active) svg,
  .nav-item:not(.nav-item--active) span {
    color: var(--color-ink-faint);
  }

  /* ── Animations ──────────────────────── */

  .reveal {
    animation: revealUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  @keyframes revealUp {
    from {
      opacity: 0;
      transform: translateY(14px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .reveal-d1 {
    animation-delay: 0.05s;
  }
  .reveal-d2 {
    animation-delay: 0.12s;
  }
  .reveal-d3 {
    animation-delay: 0.19s;
  }
  .reveal-d4 {
    animation-delay: 0.26s;
  }
  .reveal-d5 {
    animation-delay: 0.33s;
  }

  /* ── Info card (wine show detail cards) ── */

  .info-card {
    background: white;
    border-radius: 16px;
    border: 1.5px solid var(--color-parchment-2);
    box-shadow: 0 1px 4px rgba(28, 21, 16, 0.05);
    overflow: hidden;
  }

  .info-card__header {
    padding: 0.875rem 1.125rem 0.5rem;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-ink-faint);
  }

  .info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 1.125rem;
    border-top: 1px solid var(--color-parchment-2);
  }

  .info-row__label {
    font-size: 0.78rem;
    color: var(--color-ink-light);
  }

  .info-row__value {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-ink);
    text-align: right;
  }

  /* ── Wine show action buttons ──────────── */

  .btn-drink-wine {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem;
    border-radius: 14px;
    background: var(--color-ink);
    color: var(--color-parchment);
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    border: none;
    cursor: pointer;
    transition: opacity 0.15s;
    text-decoration: none;
  }

  .btn-drink-wine:hover {
    opacity: 0.9;
    color: var(--color-parchment);
  }

  .btn-drink-wine:active {
    opacity: 0.85;
  }

  .btn-drink-wine--sm {
    flex: none;
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    font-size: 0.75rem;
    gap: 0.3rem;
  }

  .btn-wine-edit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.875rem 1.25rem;
    border-radius: 14px;
    background: white;
    color: var(--color-ink);
    font-weight: 500;
    font-size: 0.875rem;
    border: 1.5px solid var(--color-parchment-3, #ddd5c8);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s;
  }

  .btn-wine-edit:hover {
    background: var(--color-parchment-2);
    color: var(--color-ink);
  }

  .btn-wine-edit--sm {
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    font-size: 0.75rem;
    gap: 0.3rem;
  }

  .btn-wine-delete {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem;
    border-radius: 14px;
    background: var(--color-terra-light);
    color: var(--color-terracotta);
    border: 1.5px solid rgba(184, 92, 58, 0.2);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s;
  }

  .btn-wine-delete:hover {
    background: #edd5cc;
    color: var(--color-terracotta);
  }

  .btn-wine-delete--sm {
    padding: 0.4rem;
    border-radius: 8px;
  }

  /* ── Wine show page ───────────────────── */

  .wine-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    color: var(--color-ink-light);
    text-decoration: none;
  }

  .wine-show-hero {
    position: relative;
    overflow: hidden;
  }

  .wine-show-subtitle {
    font-size: 0.875rem;
    margin-top: 0.25rem;
    color: var(--color-ink-light);
  }

  .wine-show-details {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-ink-light);
  }

  .wine-show-details__sep {
    color: var(--color-ink-faint);
  }

  .wine-show-vintage-ghost {
    font-family: var(--font-display);
    font-size: 9rem;
    font-weight: 900;
    font-style: italic;
    line-height: 1;
    position: absolute;
    right: -1rem;
    bottom: -1.5rem;
    opacity: 0.05;
    color: var(--color-ink);
    pointer-events: none;
    user-select: none;
    letter-spacing: -0.04em;
  }

  .info-card__body-text {
    padding: 0.75rem 1.125rem;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--color-ink-light);
  }

  /* ── Status badge ────────────────────── */

  .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    background: var(--color-sage-light);
    color: var(--color-sage);
  }

  .status-badge__dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-sage);
  }

  .status-badge--drunk {
    background: var(--color-terra-light);
    color: var(--color-terracotta);
  }

  .status-badge--drunk .status-badge__dot {
    background: var(--color-terracotta);
  }

  /* ── Drink track (show page) ─────────── */

  .drink-track {
    height: 6px;
    border-radius: 999px;
    background: var(--color-parchment-2);
    overflow: hidden;
  }

  .drink-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--color-sage), var(--color-gold));
  }
}