/* LandingWatchlist UI — row-level × button + header add/reset controls
   + free-user grayed-out banner. Pair with /shared/landing-watchlist.js.

   Selectors are scoped to .lw-* classes so they only apply to landing
   pages that explicitly opt in by adding the markup. Won't leak into
   any other tool. */

/* ── Row-level × button ───────────────────────────────────────────── */

/* Sits to the LEFT of the ticker label on every body row. Hidden by
   default and revealed on row hover (or focus-within for keyboard
   nav). When visible, styled as a prominent tinted red circle so it
   reads as a clear "remove" affordance. The host cell always reserves
   left padding so the layout doesn't shift when the button fades in. */
.lw-row-remove {
  position: absolute;
  left: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(207, 71, 71, 0.12);
  color: #cf4747;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease, transform 0.12s ease;
  flex-shrink: 0;
}
/* Reserve the left-padding regardless of hover state so the label
   sits at the same x-position whether the × is visible or not. */
.lw-row-remove-host {
  position: relative;
  padding-left: 36px !important;
}
/* Reveal the × only when the TICKER CELL (its host) is hovered — not the
   whole row — so hovering data cells elsewhere in the row doesn't surface
   the remove affordance. focus-within on the host keeps keyboard nav
   working (tabbing onto the × reveals it). */
.default-landing-table tbody .lw-row-remove-host:hover .lw-row-remove,
.default-landing-table tbody .lw-row-remove-host:focus-within .lw-row-remove,
.lw-row-remove:focus {
  opacity: 1;
  pointer-events: auto;
}
.lw-row-remove:hover {
  background: rgba(207, 71, 71, 0.24);
  color: #a02b2b;
  transform: translateY(-50%) scale(1.08);
}
.lw-row-remove:focus { outline: 2px solid rgba(207, 71, 71, 0.45); outline-offset: 1px; }
.lw-row-remove[disabled] {
  cursor: not-allowed;
  opacity: 0.4;
  transform: translateY(-50%);
}

/* ── Header bar: Add input + Reset link ──────────────────────────── */

.lw-controls {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.85rem 0;
  padding: 0.55rem 0.7rem;
  background: rgba(0, 0, 0, 0.025);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  font-family: var(--sans);
  flex-wrap: wrap;
}
.lw-controls-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(26, 23, 20, 0.55);
  flex-shrink: 0;
}
/* "Look up" label on the ticker lookup box (it has no real label otherwise,
   just the "e.g. NVDA" placeholder). Shown on every viewport, matching the
   Watchlist label; the mobile block adds a fixed width to align the rows. */
#lw-controls .dlt-ticker-row::before {
  content: "Look up";
  align-self: center;
  white-space: nowrap;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(26, 23, 20, 0.55);
}
.lw-add-wrap {
  display: inline-flex;
  align-items: stretch;
  gap: 0.35rem;
}
.lw-add-input {
  width: 110px;
  padding: 0.4rem 0.6rem;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 6px;
  background: #fff;
  color: var(--text, #1a1714);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  outline: none;
  transition: border-color 0.12s;
}
.lw-add-input::placeholder {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(26, 23, 20, 0.35);
}
.lw-add-input:focus {
  border-color: var(--brand, #b85c1e);
}
.lw-add-btn {
  padding: 0.4rem 0.85rem;
  border: 0;
  border-radius: 6px;
  background: var(--brand, #b85c1e);
  color: #fff;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.12s;
}
.lw-add-btn:hover { background: #9a4e18; }
.lw-add-btn[disabled] { opacity: 0.4; cursor: not-allowed; }

.lw-count {
  font-size: 0.72rem;
  color: rgba(26, 23, 20, 0.5);
  margin-left: auto;
}
.lw-count strong { color: var(--text, #1a1714); font-weight: 700; }

.lw-reset {
  font-size: 0.7rem;
  color: var(--brand, #b85c1e);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  font-family: var(--sans);
  text-decoration: underline;
}
.lw-reset:hover { color: #9a4e18; }
.lw-reset[disabled] { color: rgba(26, 23, 20, 0.35); cursor: not-allowed; text-decoration: none; }

/* ── Free / not-logged-in: grey out the controls + show banner ───── */

.lw-controls.is-locked .lw-add-input,
.lw-controls.is-locked .lw-add-btn,
.lw-controls.is-locked .lw-reset {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
}
/* Hide the per-row × for non-members — the watchlist isn't editable for
   them, so the remove affordance shouldn't show at all. is-locked is set on
   .lw-controls; the table lives inside its sibling .default-landing-table-wrap,
   so the × is reached through that wrap. (A bare `~ .default-landing-table`
   never matches: the table is nested in the wrap, not a direct sibling.) */
.lw-controls.is-locked ~ .default-landing-table-wrap .lw-row-remove,
.lw-controls.is-locked ~ .default-landing-table .lw-row-remove,
.default-landing-table.is-locked .lw-row-remove {
  display: none !important;
}
.lw-controls.is-locked .lw-row-remove-host {
  padding-right: inherit !important;
}

.lw-locked-banner {
  display: none;
  margin: 0 0 0.85rem 0;
  padding: 0.55rem 0.8rem;
  background: rgba(212, 120, 46, 0.08);
  border: 1px solid rgba(212, 120, 46, 0.22);
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 0.78rem;
  color: rgba(26, 23, 20, 0.78);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.lw-locked-banner.is-hidden { display: none; }
.lw-locked-banner a {
  color: var(--brand, #b85c1e);
  font-weight: 700;
  text-decoration: underline;
}
.lw-locked-banner a:hover { color: #9a4e18; }

/* ── Toast for undo after a × ───────────────────────────────────── */
.lw-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9000;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: #1a1714;
  color: #fff;
  padding: 0.55rem 0.95rem;
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 0.78rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s, transform 0.18s;
}
.lw-toast.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(-4px);
}
.lw-toast-undo {
  color: var(--brand, #d4782e);
  font-weight: 800;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.7rem;
}
.lw-toast-undo:hover { color: #f0a878; }

/* ── Mobile: reorder controls so the enter-ticker form sits on top
   and the Watchlist row (label + Add input + Add button) stretches to
   fill the row width below it. Without this, the watchlist controls
   render above a half-width ticker form on narrow viewports, which
   reads as a cramped two-row layout. */
@media (max-width: 768px) {
  .lw-controls .dlt-ticker-form {
    order: -1;
    flex: 1 1 100%;
    margin-left: 0 !important;
    max-width: none !important;
  }
  .lw-add-wrap {
    flex: 1 1 auto;
    min-width: 0;
  }
  .lw-add-input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    /* iOS Safari auto-zooms into inputs with font-size < 16px on focus,
       and the zoom + scroll can mask the Add button under the zoomed
       viewport so a follow-up tap on Add looks like nothing happens.
       16px keeps the page steady when the keyboard opens. */
    font-size: 16px;
  }
  /* Stretch the watchlist controls + landing table edge-to-edge on
     mobile so the cards have more room for content. The .default-landing
     parent keeps its 0.5rem side padding (so the date title stays
     comfortably inset), and the cards bleed past it with a matching
     negative margin. Border-radius drops to 0 because a rounded corner
     pressed against the viewport edge looks unfinished. */
  #lw-locked-banner,
  #lw-controls,
  #default-landing-table-wrap {
    margin-left: -0.5rem !important;
    margin-right: -0.5rem !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }
  /* ── Look-up row + Watchlist row aligned on mobile ──
     The lookup box has no visible label (just the "e.g. NVDA"
     placeholder), so label it "Look up" to match the Watchlist label.
     Then give both rows the SAME label width, gaps, input, and button
     width so the two inputs line up exactly and Go/Add match.
     #lw-controls (id) outranks the per-page .dlt-ticker-* rules. */
  #lw-controls { column-gap: 0.4rem; }
  #lw-controls .lw-controls-label,
  #lw-controls .dlt-ticker-row::before { flex: 0 0 4.5rem; width: 4.5rem; }
  #lw-controls .dlt-ticker-row,
  #lw-controls .lw-add-wrap { column-gap: 0.4rem; }
  #lw-controls .dlt-ticker-input,
  #lw-controls .lw-add-input {
    flex: 1 1 auto; width: auto; min-width: 0;
    font-size: 16px;
    padding: 0.45rem 0.6rem;
    box-sizing: border-box;
  }
  #lw-controls .dlt-ticker-go,
  #lw-controls .lw-add-wrap .lw-add-btn {
    flex: 0 0 3.5rem; width: 3.5rem; min-width: 0;
    box-sizing: border-box;
    padding-left: 0.4rem; padding-right: 0.4rem;
  }
}