/* ==========================================================================
   WalkTheDock Trip Fit — Stylesheet
   Version: 1.0.0
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Custom Properties
   -------------------------------------------------------------------------- */
:root {
  --wtd-navy:       #1B3A4B;
  --wtd-navy-light: #264f67;
  --wtd-slate:      #64748b;
  --wtd-muted:      #94a3b8;
  --wtd-bg-card:    #f8fafc;
  --wtd-border:     #e2e8f0;
  --wtd-active-bg:  #eef5fb;
  --wtd-active-bdr: #c5dae8;
  --wtd-radius:     10px;
  --wtd-font-serif: Lora, Georgia, "Times New Roman", serif;
  --wtd-font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* --------------------------------------------------------------------------
   Full Panel Wrapper
   -------------------------------------------------------------------------- */
.wtd-trip-fit-panel {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background:  transparent;
  border:      none;
  border-radius: 0;
  padding:     0;
  max-width:   520px;
  box-sizing:  border-box;
}

/* --------------------------------------------------------------------------
   Header  ("Trip Fit for [Boat Name]")
   -------------------------------------------------------------------------- */
.wtd-tf-header {
  font-size:      13px;
  font-weight:    700;
  color:          #2d3748;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin:         0 0 16px;
  padding-bottom: 10px;
  border-bottom:  1px solid #e2e8f0;
}

.wtd-tf-boat-name {
  color:          #4a5568;
  text-transform: none;
}

/* --------------------------------------------------------------------------
   Score Row  (matches .vwr-summary-score)
   -------------------------------------------------------------------------- */
.wtd-tf-score-row {
  display:         flex;
  align-items:     baseline;
  gap:             6px;
  padding:         10px 12px 14px;
  margin-bottom:   12px;
  border-bottom:   1px solid #e2e8f0;
  border-radius:   4px;
  /* outline color is applied inline from the active tier color */
}

.wtd-tf-score-num {
  font-size:   36px;
  font-weight: 700;
  line-height: 1;
  color:       #2d3748;
}

.wtd-tf-score-denom {
  font-size:   13px;
  color:       #718096;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   Section Label  ("TRIP FIT RATING")  — matches .vwr-legend-title
   -------------------------------------------------------------------------- */
.wtd-tf-label {
  font-size:      10px;
  font-weight:    700;
  color:          #718096;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin:         0 0 10px;
}

/* --------------------------------------------------------------------------
   Tier List  — matches .vwr-legend-grid / .vwr-legend-row pattern
   -------------------------------------------------------------------------- */
.wtd-tf-tiers {
  list-style:     none;
  margin:         0 0 20px 0;
  padding:        0;
  display:        flex;
  flex-direction: column;
  overflow:       visible;
}

/* 4-col grid: swatch | number | label | description */
.wtd-tf-tier {
  display:       grid;
  grid-template-columns: 14px 22px 80px 1fr;
  align-items:   center;
  gap:           6px;
  padding:       6px 6px;
  border-bottom: 1px solid #f0f4f8;
  cursor:        default;
}

.wtd-tf-tier:last-child {
  border-bottom: none;
}

/* Active row: magnify in-flow, outline applied via inline style */
.wtd-tf-tier--active {
  border-radius:  4px;
  background:     rgba(45, 55, 72, 0.05);
  padding-top:    9px;
  padding-bottom: 9px;
}

/* Color swatch  — matches .vwr-swatch */
.wtd-tf-tier-swatch {
  display:       block;
  width:         14px;
  height:        14px;
  border-radius: 3px;
  flex-shrink:   0;
}

.wtd-tf-tier--active .wtd-tf-tier-swatch {
  width:  18px;
  height: 18px;
}

/* Tier number  — matches .vwr-legend-num */
.wtd-tf-tier-num {
  font-size:   13px;
  font-weight: 700;
  color:       #2d3748;
  text-align:  center;
}

.wtd-tf-tier--active .wtd-tf-tier-num {
  font-size: 17px;
}

/* Tier label  — matches .vwr-legend-label */
.wtd-tf-tier-label {
  display:     block;
  font-size:   12px;
  font-weight: 600;
  color:       #4a5568;
}

.wtd-tf-tier--active .wtd-tf-tier-label {
  font-size:   14px;
  font-weight: 700;
}

/* Tier description  — matches .vwr-legend-desc */
.wtd-tf-tier-desc {
  display:     block;
  font-size:   11px;
  color:       #718096;
  line-height: 1.4;
}

.wtd-tf-tier--active .wtd-tf-tier-desc {
  font-size: 12px;
}

/* --------------------------------------------------------------------------
   Footer Math Summary
   -------------------------------------------------------------------------- */
.wtd-tf-footer {
  font-size:   0.8rem;
  color:       #718096;
  border-top:  1px solid #e2e8f0;
  padding-top: 14px;
  line-height: 1.5;
}

.wtd-tf-footer strong {
  color: #2d3748;
}

/* --------------------------------------------------------------------------
   No-Boat Fallback Panel
   -------------------------------------------------------------------------- */
.wtd-trip-fit-no-boat .wtd-tf-no-boat-body {
  display:         flex;
  flex-direction:  column;
  align-items:     flex-start;
  gap:             12px;
}

.wtd-tf-no-boat-message {
  margin:    0;
  color:     var(--wtd-slate);
  font-size: 0.95rem;
  line-height: 1.5;
}

.wtd-tf-no-boat-cta {
  display:          inline-block;
  padding:          10px 18px;
  background:       var(--wtd-navy);
  color:            #fff;
  border-radius:    6px;
  text-decoration:  none;
  font-size:        0.875rem;
  font-weight:      600;
  transition:       background 0.15s ease;
}

.wtd-tf-no-boat-cta:hover,
.wtd-tf-no-boat-cta:focus {
  background: var(--wtd-navy-light);
  color:      #fff;
}

/* --------------------------------------------------------------------------
   Compact Panel (5 colored squares)
   -------------------------------------------------------------------------- */
.wtd-tf-compact {
  display:        inline-flex;
  flex-direction: column;
  align-items:    center;
  gap:            6px;
}

.wtd-tf-compact-squares {
  display: flex;
  gap:     4px;
}

.wtd-tf-compact-sq {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           26px;
  height:          26px;
  border-radius:   4px;
  color:           #fff;
  font-size:       0.75rem;
  font-weight:     700;
  opacity:         0.45;
  transition:      opacity 0.15s ease, box-shadow 0.15s ease;
  cursor:          default;
}

.wtd-tf-compact-sq--active {
  opacity:    1;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px currentColor;
}

.wtd-tf-compact-label {
  font-size:      0.6rem;
  font-weight:    700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--wtd-slate);
}

.wtd-tf-compact--start {
  display:        inline-flex;
  flex-direction: row;
  align-items:    center;
  gap:            8px;
}

.wtd-tf-compact-start-icon {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  line-height:     1;
}

.wtd-tf-compact-start-icon svg {
  display: block;
}

/* --------------------------------------------------------------------------
   Boat Switcher
   -------------------------------------------------------------------------- */
.wtd-boat-switcher {
  display:     inline-flex;
  align-items: center;
  gap:         10px;
  flex-wrap:   wrap;
  font-family: var(--wtd-font-sans);
}

.wtd-boat-switcher-label {
  font-size:   0.875rem;
  font-weight: 600;
  color:       var(--wtd-navy);
  white-space: nowrap;
}

.wtd-boat-switcher-select {
  padding:       7px 12px;
  border:        1px solid var(--wtd-border);
  border-radius: 6px;
  font-size:     0.875rem;
  color:         var(--wtd-navy);
  background:    #fff;
  cursor:        pointer;
  appearance:    none;
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 10px center;
  background-size:     12px;
  padding-right:       32px;
  transition:   border-color 0.15s ease;
}

.wtd-boat-switcher-select:hover,
.wtd-boat-switcher-select:focus {
  border-color: var(--wtd-navy);
  outline:      none;
}

.wtd-boat-switcher-cta,
.wtd-boat-switcher-add {
  display:         inline-block;
  padding:         7px 14px;
  background:      var(--wtd-navy);
  color:           #fff;
  border-radius:   6px;
  text-decoration: none;
  font-size:       0.8rem;
  font-weight:     600;
  white-space:     nowrap;
  transition:      background 0.15s ease;
}

.wtd-boat-switcher-cta:hover,
.wtd-boat-switcher-cta:focus,
.wtd-boat-switcher-add:hover,
.wtd-boat-switcher-add:focus {
  background: var(--wtd-navy-light);
  color:      #fff;
}

.wtd-boat-switcher-add {
  background: transparent;
  color:      var(--wtd-navy);
  border:     1px solid var(--wtd-navy);
}

.wtd-boat-switcher-add:hover,
.wtd-boat-switcher-add:focus {
  background: var(--wtd-navy);
  color:      #fff;
}

.wtd-boat-switcher-single {
  font-size:   0.875rem;
  font-weight: 600;
  color:       var(--wtd-navy);
}

/* --------------------------------------------------------------------------
   Loading state (set by JS during AJAX)
   -------------------------------------------------------------------------- */
.wtd-boat-switcher--loading .wtd-boat-switcher-select {
  opacity: 0.5;
  pointer-events: none;
}

/* ── Debug panel ───────────────────────────────────────────────────────────── */

.wtd-tf-debug {
    margin-top: 16px;
    font-size: 12px;
    font-family: monospace;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
}

.wtd-tf-debug summary {
    background: #f1f5f9;
    padding: 6px 12px;
    cursor: pointer;
    font-weight: 600;
    font-family: sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
}

.wtd-tf-debug-table {
    width: 100%;
    border-collapse: collapse;
}

.wtd-tf-debug-table th {
    background: #e2e8f0;
    text-align: left;
    padding: 4px 10px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #475569;
    font-family: sans-serif;
}

.wtd-tf-debug-table td {
    padding: 3px 10px;
    border-bottom: 1px solid #f1f5f9;
    color: #1e293b;
}

.wtd-tf-debug-table td:first-child {
    color: #64748b;
    width: 50%;
}