/* ============================================================
   TravelBeot — My places (desktop): Baekja override layer
   ------------------------------------------------------------
   2026-09-26. The desktop My Trip and Saved panels are the pre-Baekja
   modules (public/my-trip.js, js/modules/bookmarks/bookmarkManager.js)
   with their own sheets (my-trip-panel.css, bookmarks-panel.css). This
   layer reskins them in place: tokens instead of Material blue, the
   kit's empty state (celadon disc, serif title, italic voice line), quiet
   inline inputs, celadon chips. Markup and behaviour are untouched; the
   mobile drawer's own My places view (tb-mobile-shell.js) is the model.
   Loaded after the legacy sheets; scoped to the home's left rail.
   ============================================================ */

/* ---- shared: panel padding, headings ---- */
body.tb-page #left-content .trip-container,
body.tb-page #left-content .bookmarks-panel { padding: 14px 16px 18px; }
body.tb-page #left-content .trip-container h3,
body.tb-page #left-content .bookmarks-header h3 {
  font-family: var(--tb-serif); font-weight: 400; font-size: 22px; letter-spacing: -0.01em; color: var(--tb-ink); margin: 0 0 12px; }
body.tb-page #left-content .bookmarks-header { margin-bottom: 12px; }
body.tb-page #left-content .bookmarks-header h3 { margin: 0; }

/* ---- count badge: celadon chip, not a blue pill ---- */
body.tb-page #left-content .bookmark-count {
  background: var(--color-celadon-soft, #DCE4DB); color: var(--color-celadon-deep, #44604F);
  font-family: var(--tb-sans); font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }

/* ---- search + sort: quiet inline inputs ---- */
body.tb-page #left-content .bookmarks-search input,
body.tb-page #left-content .sort-select,
body.tb-page #left-content .bookmarks-sort select {
  font-family: var(--tb-sans); font-size: 13.5px; color: var(--tb-ink);
  background: #fff; border: 1px solid var(--tb-rule-soft); border-radius: 12px; padding: 10px 12px; box-shadow: none; }
body.tb-page #left-content .bookmarks-search input:focus,
body.tb-page #left-content .sort-select:focus { outline: none; border-color: var(--tb-celadon); box-shadow: 0 0 0 3px rgba(123, 158, 137, 0.18); }
body.tb-page #left-content .bookmarks-search input::placeholder { color: var(--tb-ink-4, #9AA09A); }
body.tb-page #left-content .search-clear { background: #fff; border: 1px solid var(--tb-rule-soft); color: var(--tb-ink-3); }

/* ---- filter chips: the celadon chip family ---- */
body.tb-page #left-content .bookmark-category-filter .category-chip {
  font-family: var(--tb-sans); font-size: 13px; color: var(--tb-ink-3); background: #fff;
  border: 1px solid var(--tb-rule-soft); border-radius: 999px; padding: 7px 12px; }
body.tb-page #left-content .bookmark-category-filter .category-chip:hover { border-color: var(--tb-celadon); color: #44604F; }
body.tb-page #left-content .bookmark-category-filter .category-chip.active { background: var(--tb-celadon); border-color: var(--tb-celadon); color: #fff; }

/* ---- empty states: the mobile kit's shape ---- */
body.tb-page #left-content .trip-empty,
body.tb-page #left-content .empty-bookmarks { text-align: center; padding: 34px 20px 26px; color: var(--tb-ink-3); }
body.tb-page #left-content .trip-empty-icon,
body.tb-page #left-content .empty-icon {
  width: 84px; height: 84px; margin: 0 auto 16px; border-radius: 50%;
  background-color: var(--color-celadon-soft, #DCE4DB); background-repeat: no-repeat; background-position: center; background-size: 30px 30px;
  font-size: 0 !important; line-height: 0; color: transparent; overflow: hidden; }
/* MapPin for trips, Bookmark for saved places (Lucide-shaped, celadon-deep stroke) */
body.tb-page #left-content .trip-empty-icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2344604F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/><circle cx='12' cy='10' r='3'/></svg>"); }
body.tb-page #left-content .empty-bookmarks .empty-icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2344604F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z'/></svg>"); }
body.tb-page #left-content .trip-empty-title,
body.tb-page #left-content .empty-title {
  font-family: var(--tb-serif); font-weight: 400; font-size: 22px; letter-spacing: -0.01em; color: var(--tb-ink); margin: 0 0 6px; }
body.tb-page #left-content .trip-empty-desc,
body.tb-page #left-content .empty-desc {
  font-family: var(--tb-serif); font-style: italic; font-size: 15.5px; line-height: 1.5; color: var(--tb-ink-3); margin: 0 auto 6px; max-width: 30ch; }

/* ---- buttons: ghost celadon, no dashed Material box ---- */
body.tb-page #left-content .add-trip-btn,
body.tb-page #left-content .add-place-btn {
  font-family: var(--tb-sans); font-size: 13.5px; font-weight: 600; color: #44604F;
  background: #fff; border: 1px solid var(--tb-celadon); border-radius: 999px; padding: 11px 16px; margin-top: 12px; }
body.tb-page #left-content .add-trip-btn:hover,
body.tb-page #left-content .add-place-btn:hover { background: var(--color-celadon-soft, #DCE4DB); border-color: var(--tb-celadon); color: #44604F; }
body.tb-page #left-content .add-trip-btn span,
body.tb-page #left-content .add-place-btn span { font-size: 1.1em; font-weight: 500; }
body.tb-page #left-content .btn-clear-filters { font-family: var(--tb-sans); background: #fff; color: #44604F; border: 1px solid var(--tb-celadon); border-radius: 999px; }

/* ---- sync hint: a quiet porcelain note ---- */
body.tb-page #left-content .sync-hint {
  background: var(--tb-paper, #F9FBFD); border: 1px solid var(--tb-rule-soft); border-radius: 12px;
  font-family: var(--tb-sans); font-size: 12.5px; color: var(--tb-ink-3); padding: 10px 14px; margin-top: 14px; }
body.tb-page #left-content .sync-hint-icon { font-size: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--tb-celadon); }

/* ---- cards: porcelain, hairline, 12px ---- */
body.tb-page #left-content .trip-box,
body.tb-page #left-content .bookmark-item {
  background: #fff; border: 1px solid var(--tb-rule-soft); border-radius: 12px; box-shadow: none; }
body.tb-page #left-content .trip-box:hover,
body.tb-page #left-content .bookmark-item:hover { border-color: var(--tb-celadon); box-shadow: none; transform: none; }
body.tb-page #left-content .trip-title { font-family: var(--tb-serif); font-weight: 400; font-size: 18px; color: var(--tb-ink); }
body.tb-page #left-content .trip-actions button { color: var(--tb-ink-3); }
body.tb-page #left-content .trip-actions button:hover { color: #44604F; }

/* ---- the bridge to the paid plan (2026-09-26): one quiet line, no gold ---- */
body.tb-page #left-content .trip-plan-link,
body.tb-page #left-content .bookmarks-plan-link {
  display: inline-flex; align-items: center; gap: 6px; margin: 12px 0 0; padding: 0 0 1px;
  font-family: var(--tb-sans); font-size: 13px; color: #44604F; text-decoration: none; border-bottom: 1px solid var(--tb-rule-soft); }
body.tb-page #left-content .trip-plan-link:hover,
body.tb-page #left-content .bookmarks-plan-link:hover { border-bottom-color: var(--tb-celadon); }
body.tb-page #left-content .bookmarks-plan-link { margin: 0 0 12px; }