/* Wine Notes — wine list + wine detail view styles (M2; M11.2 adds
   vintage-grouping styles; M11.3 adds read-only/editing toggle styles;
   M11.3.5 adds header icon styles; M11.4 adds icon-only action buttons,
   empty state styling, and narrow-screen padding pass)
   Consumes the tokens defined in styles.css (see docs/design-tokens.md) —
   no new colors, radii, or shadows introduced here. */

/* ---------------------------------------------------------------------
   Shared states
   --------------------------------------------------------------------- */

.empty-state {
  color: var(--color-text-muted);
  font-style: italic;
  padding: var(--space-6) var(--space-4);
  text-align: center;
}

.empty-state::before {
  content: '🍷';
  display: block;
  font-size: 2rem;
  font-style: normal;
  opacity: 0.5;
  margin-bottom: var(--space-2);
}

.loading-state {
  color: var(--color-text-muted);
  font-size: var(--text-caption-size);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 44px;
  min-width: 44px;
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-1);
  margin-left: calc(var(--space-1) * -1);
  font-weight: 600;
  font-size: var(--text-caption-size);
  color: var(--color-text-muted);
  text-decoration: none;
  margin-bottom: var(--space-4);
}

.back-link .icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.back-link:hover {
  color: var(--color-primary);
}

/* ---------------------------------------------------------------------
   Buttons (shared)
   --------------------------------------------------------------------- */

.btn-new-wine,
.btn-import {
  font-family: var(--font-sans);
  font-size: var(--text-caption-size);
  font-weight: 600;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-primary);
  background: var(--color-primary);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  min-height: 44px;
}

.btn-new-wine:hover,
.btn-import:hover {
  opacity: 0.9;
}

.btn-new-wine {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
}

.btn-new-wine .icon {
  width: 20px;
  height: 20px;
}

.btn-new-wine .icon--sm {
  width: 14px;
  height: 14px;
}

.icon-btn--recent:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-import {
  background: transparent;
  color: var(--color-primary);
  display: inline-flex;
}

.btn-delete-wine:disabled {
  color: var(--color-text-muted);
  border-color: var(--color-border);
  cursor: not-allowed;
  background: transparent;
}

.session-card__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  justify-content: space-between;
}

/* ---------------------------------------------------------------------
   Autosave indicator (M3, Section 5.3) — small and persistent, never an
   explicit "Save" button that could be forgotten.
   --------------------------------------------------------------------- */

.autosave-indicator {
  font-family: var(--font-sans);
  font-size: var(--text-caption-size);
  font-weight: var(--text-caption-weight);
  letter-spacing: var(--text-caption-tracking);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.autosave-indicator[data-state='saving'] {
  color: var(--color-secondary);
}

.autosave-indicator[data-state='error'] {
  color: var(--color-primary);
}

/* ---------------------------------------------------------------------
   Wine list
   --------------------------------------------------------------------- */

.list-view__toolbar {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.list-view__search-input {
  flex: 1;
  min-width: 160px;
  font-family: var(--font-sans);
  font-size: var(--text-body-size);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
}

.list-view__search-input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.import-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-secondary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.import-panel__preview {
  border-bottom: 1px dashed var(--color-border);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-2);
}

.import-panel__meta {
  font-size: var(--text-caption-size);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-1);
}

.import-panel__snippet {
  font-size: var(--text-body-size);
  color: var(--color-text);
  margin: 0;
}

.import-panel__match {
  font-size: var(--text-caption-size);
  color: var(--color-text);
  margin: 0 0 var(--space-2);
}

.import-panel__new-wine {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}

.import-panel__new-wine input {
  flex: 1;
  min-width: 140px;
  font-family: var(--font-sans);
  font-size: var(--text-body-size);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
}

.import-panel__actions {
  display: flex;
  gap: var(--space-2);
}

.wine-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.wine-card {
  background: var(--color-surface);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
  /* Mobile-first tap target, per spec Section 11 */
  min-height: 44px;
}

.wine-card:hover,
.wine-card:focus-visible {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  border-color: var(--color-border);
}

.wine-card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.wine-card__title {
  font-family: var(--font-serif);
  font-size: var(--text-heading-size);
  font-weight: var(--text-heading-weight);
  letter-spacing: var(--text-heading-tracking);
  line-height: var(--text-heading-line);
  color: var(--color-text);
  margin: 0;
}

.wine-card__winemaker {
  font-family: var(--font-sans);
  font-size: var(--text-caption-size);
  font-weight: var(--text-caption-weight);
  letter-spacing: var(--text-caption-tracking);
  color: var(--color-text-muted);
  margin: var(--space-1) 0 0;
}

/* ---------------------------------------------------------------------
   Wine detail — editable form (M3)
   --------------------------------------------------------------------- */

.wine-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}

.wine-form__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  justify-content: space-between;
}

.wine-form__title {
  flex: 1;
  min-width: 0;
  font-family: var(--font-serif);
  font-size: var(--text-display-size);
  font-weight: var(--text-display-weight);
  letter-spacing: var(--text-display-tracking);
  color: var(--color-primary);
  border: none;
  border-bottom: 1px solid transparent;
  background: transparent;
  padding: var(--space-1) 0;
}

.wine-form__title:hover,
.wine-form__title:focus-visible {
  border-bottom-color: var(--color-border);
  outline: none;
}

.wine-form__winemaker {
  display: block;
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-caption-size);
  color: var(--color-text-muted);
  border: none;
  border-bottom: 1px solid transparent;
  background: transparent;
  padding: var(--space-1) 0;
  margin-bottom: var(--space-3);
}

.wine-form__winemaker:hover,
.wine-form__winemaker:focus-visible {
  border-bottom-color: var(--color-border);
  outline: none;
}

.wine-form__info {
  display: block;
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-body-size);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  padding: var(--space-2) var(--space-3);
  resize: vertical;
  margin-bottom: var(--space-3);
}

.wine-form__info:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.detail-view__sessions {
  margin-top: var(--space-6);
}

.detail-view__sessions-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.detail-view__sessions-header h3 {
  font-family: var(--font-serif);
  font-size: var(--text-heading-size);
  color: var(--color-text);
  margin: 0;
}

.session-group {
  margin-bottom: var(--space-5);
}

.session-group__date {
  font-family: var(--font-serif);
  font-size: var(--text-heading-size);
  font-weight: 500;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-2);
  margin: 0 0 var(--space-3);
}

.session-group__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.session-card {
  background: var(--color-surface);
  position: relative;
  border: none;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.session-card::before {
  content: '';
  position: absolute;
  top: var(--space-2);
  bottom: var(--space-2);
  left: 0;
  width: 4px;
  border-radius: var(--radius-full);
  background: linear-gradient(var(--color-secondary), var(--color-primary));
  opacity: 0.5;
  transition: opacity 0.15s ease;
}

.session-card--editable {
  background: color-mix(in srgb, var(--color-primary) 1%, var(--color-surface));
  box-shadow: var(--shadow-md);
}

.session-card--editable::before {
  opacity: 1;
}


/* ---------------------------------------------------------------------
   Highlight pulse (M11.8) — arriving at a session from the Recent view
   scrolls to it and briefly pulses this ring so it's obvious which card
   is the one you tapped, without entering edit mode.
   --------------------------------------------------------------------- */

.session-card--highlight {
  animation: session-highlight-pulse 2s ease;
}

@keyframes session-highlight-pulse {
  0% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 55%, transparent); }
  100% { box-shadow: none; }
}

.session-card--editable .session-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}

.session-card__date,
.session-card__author,
.session-card__vintage {
  font-family: var(--font-sans);
  font-size: var(--text-caption-size);
  color: var(--color-text);
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  background: transparent;
  padding: var(--space-1) var(--space-1);
  transition: border-color 0.15s ease;
}

.session-card__date:focus-visible,
.session-card__author:focus-visible,
.session-card__vintage:focus-visible {
  outline: none;
  border-bottom-color: var(--color-primary);
}

.session-card__author {
  flex: 1;
  min-width: 100px;
}

.session-card__meta .autosave-indicator {
  margin-left: auto;
}

.session-card__text {
  display: block;
  width: 100%;
  font-size: var(--text-body-size);
  line-height: 1.6;
  color: var(--color-text);
  border: none;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-bg) 55%, transparent);
  padding: var(--space-2) var(--space-3);
  resize: vertical;
  margin: var(--space-1) 0 var(--space-2);
}

.session-card__text:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.session-card__empty {
  color: var(--color-text-muted);
  font-style: italic;
}

.session-card__vintage {
  width: 64px;
}

.detail-view__sessions-header-actions {
  display: flex;
  gap: var(--space-3);
}

.detail-view__grouping {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.detail-view__grouping-label {
  font-family: var(--font-sans);
  font-size: var(--text-caption-size);
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.grouping-switch {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.grouping-switch__track {
  position: relative;
  width: 40px;
  height: 22px;
  border-radius: var(--radius-full);
  background: var(--color-border);
  transition: background-color 0.15s ease;
}

.grouping-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease;
}

.grouping-switch[aria-checked='true'] .grouping-switch__track {
  background: var(--color-primary);
}

.grouping-switch[aria-checked='true'] .grouping-switch__thumb {
  transform: translateX(18px);
}

.vintage-group {
  margin-bottom: var(--space-6);
}

.vintage-group__label {
  font-family: var(--font-serif);
  font-size: var(--text-display-size);
  font-weight: var(--text-heading-weight);
  color: var(--color-primary);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-2);
  margin: 0 0 var(--space-4);
}

/*
.vintage-group__label::before {
  content: '';
  display: inline-block;
  width: var(--space-5);
  height: 2px;
  background: var(--color-secondary);
}
*/

.vintage-group .session-group__date {
  font-size: var(--text-body-size);
}

/* ---------------------------------------------------------------------
   Recent tastings (M11.8)
   --------------------------------------------------------------------- */

.recent-view__title {
  font-family: var(--font-serif);
  font-size: var(--text-display-size);
  font-weight: var(--text-display-weight);
  color: var(--color-primary);
  margin: 0 0 var(--space-5);
}

.recent-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.recent-row {
  background: var(--color-surface);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  min-height: 44px;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.recent-row:hover,
.recent-row:focus-visible {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  border-color: var(--color-border);
}

.recent-row:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.recent-row__main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.recent-row__wine {
  font-family: var(--font-serif);
  font-size: var(--text-heading-size);
  font-weight: var(--text-heading-weight);
  color: var(--color-text);
}

.recent-row__date {
  font-family: var(--font-sans);
  font-size: var(--text-caption-size);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.recent-row__snippet {
  font-size: var(--text-caption-size);
  color: var(--color-text-muted);
  margin: var(--space-1) 0 0;
}

/* ---------------------------------------------------------------------
   Settings
   --------------------------------------------------------------------- */

.settings-view__title {
  font-family: var(--font-serif);
  font-size: var(--text-display-size);
  font-weight: var(--text-display-weight);
  color: var(--color-primary);
  margin: 0 0 var(--space-5);
}

.settings-field {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-3);
}

.settings-field__label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-caption-size);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.settings-field__input {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-body-size);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.settings-field__input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.settings-field__hint {
  font-size: var(--text-caption-size);
  color: var(--color-text-muted);
  margin: var(--space-1) 0 0;
}

.settings-field--placeholder {
  opacity: 0.7;
}

/* ---------------------------------------------------------------------
   Sync status indicator (M10, Section 8.4-8.5) — data-role="sync-status"
   is shared between the header pill (.status-pill, styles.css) and the
   Settings screen's .settings-field__hint line, so one set of state
   colors covers both displays. As of M11.3.5 the header pill no longer
   shows text (see the icon block below) but these color rules still
   apply to it (they color the icon/border via currentColor) and continue
   to drive the Settings screen's text-based status line unchanged.
   --------------------------------------------------------------------- */

[data-role='sync-status'] {
  cursor: pointer;
  font-weight: 600;
}

[data-role='sync-status'][data-state='idle'],
[data-role='sync-status'][data-state='offline'] {
  color: var(--color-text-muted);
}

[data-role='sync-status'][data-state='syncing'],
[data-role='sync-status'][data-state='pending'] {
  color: var(--color-secondary);
}

[data-role='sync-status'][data-state='ready'] {
  color: var(--color-primary);
}

[data-role='sync-status'][data-state='error'] {
  color: var(--color-primary);
  font-weight: 700;
}

/* ---------------------------------------------------------------------
   Read-only / editing toggle (M11.3) — wine form and session cards open
   read-only by default; "Edit" swaps in the input markup, "Done editing"
   swaps back after flushing any pending autosave.
   --------------------------------------------------------------------- */

.wine-form__title-display {
  font-family: var(--font-serif);
  font-size: var(--text-display-size);
  font-weight: var(--text-display-weight);
  letter-spacing: var(--text-display-tracking);
  color: var(--color-primary);
  margin: 0;
}

.wine-form__winemaker-display {
  font-family: var(--font-sans);
  font-size: var(--text-caption-size);
  color: var(--color-text-muted);
  margin: var(--space-1) 0 var(--space-3);
}

.wine-form__info-display {
  font-size: var(--text-body-size);
  color: var(--color-text);
  white-space: pre-wrap;
  margin: 0 0 var(--space-3);
}

.wine-form__edit-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  justify-content: space-between;
}

.session-card--readonly .session-card__meta--readonly {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
  font-size: var(--text-caption-size);
  color: var(--color-text-muted);
}

.session-card__date-display {
  font-family: var(--font-serif);
  font-size: var(--text-heading-size);
  font-weight: var(--text-heading-weight);
  color: var(--color-text);
}

.session-card__vintage-display {
  border: 1px solid color-mix(in srgb, var(--color-secondary) 45%, transparent);
  background: color-mix(in srgb, var(--color-secondary) 12%, transparent);
  color: var(--color-text);
  font-weight: 600;
  border-radius: var(--radius-full);
  padding: 0 var(--space-3);
}

.session-card__meta--readonly .btn-edit {
  margin-left: auto;
}

.session-card__text-display {
  font-size: var(--text-body-size);
  color: var(--color-text);
  line-height: 1.6;
  white-space: pre-wrap;
  margin: 0 0 var(--space-2);
}

/* ---------------------------------------------------------------------
   Header icons (M11.3.5) — settings gear + 6-state sync icon. Sync
   collapses its detailed data-state (idle/offline/syncing/pending/ready/
   error) down to data-icon-state (synced/changes/error/syncing/offline/
   not-connected) for display; the detailed text still lives in
   title/aria-label.
   --------------------------------------------------------------------- */

.app-header__nav-link--icon {
  display: inline-flex;
  align-items: center;
  color: var(--color-text-muted);
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

.app-header__nav-link--icon:hover {
  color: var(--color-primary);
}

.icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.status-pill--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1) var(--space-2);
}

.status-pill--icon .icon {
  width: 16px;
  height: 16px;
  display: none;
}

.status-pill--icon[data-icon-state='synced'] .icon--synced,
.status-pill--icon[data-icon-state='changes'] .icon--changes,
.status-pill--icon[data-icon-state='error'] .icon--error,
.status-pill--icon[data-icon-state='syncing'] .icon--syncing,
.status-pill--icon[data-icon-state='offline'] .icon--offline,
.status-pill--icon[data-icon-state='not-connected'] .icon--not-connected {
  display: block;
}

.status-pill--icon[data-icon-state='syncing'] .icon--syncing {
  animation: sync-spin 1s linear infinite;
}

@keyframes sync-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.status-pill--icon[data-icon-state='offline'] .icon--offline,
.status-pill--icon[data-icon-state='not-connected'] .icon--not-connected {
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------------------
   Icon-only action buttons (M11.4) — edit/delete/done/export share one
   sizing/tap-target rule; color coding communicates intent instead of
   text: edit = neutral→primary, done = filled primary (confirm), delete
   = primary outline that fills solid on hover (destructive, isolated to
   the right of its action row), export = neutral→secondary (gold).
   --------------------------------------------------------------------- */

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.icon-btn .icon {
  width: 20px;
  height: 20px;
}

.icon-btn--edit:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.icon-btn--export:hover {
  color: var(--color-secondary);
  border-color: var(--color-secondary);
}

.icon-btn--delete {
  color: var(--color-primary);
}

.icon-btn--delete:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.icon-btn--done {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.icon-btn--done:hover {
  opacity: 0.9;
}

.icon-btn--add {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.icon-btn--add:hover {
  opacity: 0.9;
}
/* ---------------------------------------------------------------------
   Narrow-screen padding pass (M11.4)
   --------------------------------------------------------------------- */

@media (max-width: 420px) {
  .app-main {
    padding: var(--space-4) var(--space-3);
  }

  .wine-card,
  .wine-form,
  .scaffold-card {
    padding: var(--space-3) var(--space-4);
  }

  .session-card {
    padding: var(--space-3);
  }
}