/* ===========================================================================
   FlightPlan — header, single column, locked rows.
   Light only. Do not add dark variants (AGENTS.md rule 9).
   Loaded last so it wins over the forked stylesheets.
   =========================================================================== */

:root {
  --fp-surface: #ffffff;
  --fp-surface-2: #f6f7f9;
  --fp-border: #e3e6ea;
  --fp-ink: #1a1d21;
  --fp-ink-soft: #5b6470;
  --fp-accent: #1392ec;
  --fp-locked: #9aa3ae;
  --fp-header-h: 3rem;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
#fpx-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; height: var(--fp-header-h); padding: 0 .85rem;
  flex-shrink: 0; position: relative; z-index: 60;
  background: var(--fp-surface);
  border-bottom: 1px solid var(--fp-border);
}
.fp-brand {
  display: flex; align-items: center; gap: .5rem;
  font-weight: 700; font-size: .98rem; letter-spacing: -0.01em;
  color: var(--fp-ink); text-decoration: none;
}
.fp-brand svg { display: block; flex: 0 0 auto; }
.fp-header-actions { display: flex; align-items: center; gap: .4rem; }
.fp-header-divider {
  width: 1px; height: 1.4rem; background: var(--fp-border); margin: 0 .25rem;
}

.fp-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: 8px;
  border: 1px solid transparent; background: transparent;
  color: var(--fp-ink-soft); cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.fp-icon-btn:hover { background: var(--fp-surface-2); color: var(--fp-ink); }
.fp-icon-btn .material-symbols-outlined { font-size: 20px; }

.fp-btn {
  font: inherit; font-size: .8rem; font-weight: 600;
  padding: .4rem .8rem; border-radius: 8px;
  border: 1px solid var(--fp-border); background: var(--fp-surface);
  color: var(--fp-ink); cursor: pointer; white-space: nowrap;
  transition: background .12s ease, border-color .12s ease;
}
.fp-btn:hover { background: var(--fp-surface-2); }
.fp-btn-primary { background: var(--fp-accent); border-color: var(--fp-accent); color: #fff; }
.fp-btn-primary:hover { background: #0f7fd0; }

.fp-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  border: 1px solid var(--fp-border); background: var(--fp-surface-2);
  color: var(--fp-ink-soft); cursor: pointer;
}

@media (max-width: 640px) {
  #fpx-signin { display: none; }
  .fp-header-divider { display: none; }
}

/* --------------------------------------------------------------------------
   Map surface
   -------------------------------------------------------------------------- */
#map-container-wrap { background: #d4dae5; }
.mapboxgl-ctrl-logo { display: none !important; }
#map-gradient-overlay { background: none; }

.fp-map-btn {
  width: 2.75rem; height: 2.75rem; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.94);
  border: 1px solid var(--fp-border);
  color: var(--fp-ink);
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
  cursor: pointer; transition: background .12s ease;
}
.fp-map-btn:hover { background: #fff; }
.fp-map-btn-accent { color: var(--fp-accent); }

.fp-gps-pill {
  display: flex; align-items: center; gap: .45rem;
  padding: .5rem .8rem; border-radius: 9px;
  background: rgba(255,255,255,.94);
  border: 1px solid var(--fp-border);
  color: var(--fp-ink);
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
}
.fp-gps-pill .material-symbols-outlined { color: #1a9d5a; }

/* --------------------------------------------------------------------------
   The column
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  /* Sits below the header rather than under it — the forked stylesheet
     positions this against the viewport top. */
  #bottom-panel {
    top: calc(var(--fp-header-h) + .75rem) !important;
  }
}

#bottom-panel { background: var(--fp-surface); border: 1px solid var(--fp-border); }
#bottom-panel-content { background: var(--fp-surface); }

.fp-panel-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: .75rem; padding: 1rem 1rem .65rem; flex-shrink: 0;
}
.fp-panel-title { font-size: 1.05rem; font-weight: 700; color: var(--fp-ink); margin: 0; letter-spacing: -0.01em; }
.fp-panel-sub { font-size: .8rem; color: var(--fp-ink-soft); margin: .1rem 0 0; }

.fp-section { border-top: 1px solid var(--fp-border); }
.fp-section:first-of-type { border-top: none; }

.fp-section-head {
  width: 100%; display: flex; align-items: center; gap: .55rem;
  padding: .7rem .15rem; background: none; border: none;
  font: inherit; color: var(--fp-ink); cursor: pointer; text-align: left;
}
.fp-section-head .material-symbols-outlined { font-size: 19px; color: var(--fp-ink-soft); flex: 0 0 auto; }
.fp-section-title { flex: 1; font-size: .84rem; font-weight: 650; letter-spacing: .01em; }
.fp-chevron { transition: transform .15s ease; }
.fp-section-head[aria-expanded="false"] .fp-chevron { transform: rotate(-90deg); }
.fp-section-body { padding: 0 0 .7rem; }

/* --------------------------------------------------------------------------
   Rows — the locked state is the important one.

   Locked rows stay visible and legible. A greyed-out row nobody can read is
   not a sales pitch, it is noise; the point is that the value is obvious and
   the lock is the only thing in the way.
   -------------------------------------------------------------------------- */
.fp-row {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .6rem; border-radius: 9px;
  border: 1px solid var(--fp-border); background: var(--fp-surface);
  font-size: .85rem; color: var(--fp-ink);
}
.fp-row + .fp-row { margin-top: .35rem; }
.fp-row .material-symbols-outlined { font-size: 19px; color: var(--fp-ink-soft); flex: 0 0 auto; }
.fp-row-label { flex: 1; min-width: 0; }
.fp-row-note { display: block; font-size: .72rem; color: var(--fp-ink-soft); margin-top: .1rem; }

.fp-row--locked { cursor: pointer; }
.fp-row--locked:hover { border-color: var(--fp-accent); }
.fp-row--locked .fp-row-label { color: var(--fp-ink-soft); }

.fp-lock {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .66rem; font-weight: 650; text-transform: uppercase; letter-spacing: .05em;
  padding: .16rem .4rem; border-radius: 5px;
  background: var(--fp-surface-2); color: var(--fp-ink-soft);
  border: 1px solid var(--fp-border); white-space: nowrap;
}
.fp-lock--account { color: #0f7fd0; border-color: #bfdff8; background: #eaf5fd; }
.fp-lock--premium { color: #8a5a00; border-color: #f0dcb0; background: #fdf5e6; }
.fp-lock--soon    { color: var(--fp-ink-soft); }

.fp-empty {
  font-size: .78rem; color: var(--fp-ink-soft);
  padding: .5rem .1rem; line-height: 1.45;
}
.fp-legal { font-size: .74rem; color: var(--fp-ink-soft); line-height: 1.5; }
.fp-legal strong { color: var(--fp-ink); font-weight: 650; }
.fp-legal a { color: var(--fp-accent); }
.fp-legal ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.fp-legal li { margin-bottom: .2rem; }

/* --------------------------------------------------------------------------
   Token overlay
   -------------------------------------------------------------------------- */
.fp-token-card {
  background: var(--fp-surface); border: 1px solid var(--fp-border);
  border-radius: 12px; padding: 1.6rem; max-width: 26rem; width: 100%;
}
.fp-token-card h3 { margin: 0 0 .4rem; font-size: 1.1rem; font-weight: 700; }
.fp-token-card p { margin: 0 0 1rem; font-size: .85rem; color: var(--fp-ink-soft); }
.fp-token-card input {
  width: 100%; padding: .6rem .75rem; margin-bottom: .75rem;
  border: 1px solid var(--fp-border); border-radius: 8px; font: inherit;
}
.fp-token-card button {
  width: 100%; padding: .6rem; border-radius: 8px; border: none;
  background: var(--fp-accent); color: #fff; font-weight: 650; cursor: pointer;
}