/* Route Manager — full-width browse/organize page for saved routes + stages.
   Rendered into #route-manager-panel (overlay tab, positioned by shell.js).
   Uses the global TourKit tokens from style.css (--bg0..--bg3, --amber, --dim,
   --txt, --bdr, --green/--blue/--red). */

#route-manager-panel { color: var(--txt); }

.rm { display: flex; flex-direction: column; height: 100%; min-height: 0; }

/* ── header + tabs ─────────────────────────────────────────────────────────*/
.rm-head { padding: 14px 18px 0; border-bottom: 1px solid var(--bdr); background: var(--bg1); flex: 0 0 auto; }
.rm-titlerow { display: flex; align-items: baseline; gap: 12px; }
.rm-title { margin: 0; font-size: var(--fs-lg); font-weight: 700; }
.rm-sub { color: var(--dim); font-size: var(--fs-base); }
.rm-tabs { display: flex; gap: 2px; margin-top: 12px; }
.rm-tab { background: none; border: none; color: var(--dim); font: inherit; font-size: var(--fs-base); font-weight: 600;
  padding: 9px 16px; cursor: pointer; border-bottom: 2px solid transparent; }
.rm-tab:hover { color: var(--txt); }
.rm-tab.active { color: var(--txt); border-bottom-color: var(--amber-ink); }
.rm-tabn { color: var(--dim2); font-weight: 500; font-size: var(--fs-sm); margin-left: 4px; }

/* ── body layout ───────────────────────────────────────────────────────────*/
/* grid-template-rows: minmax(0,1fr) clamps the single row to the panel height
   (instead of auto = content height) so the side rail and content column scroll
   internally rather than overflowing the fixed panel. */
.rm-body { display: grid; grid-template-columns: 210px 1fr; grid-template-rows: minmax(0, 1fr); flex: 1 1 auto; min-height: 0; }
.rm-body[hidden] { display: none; }

/* ── folder / views rail ───────────────────────────────────────────────────*/
.rm-side { border-right: 1px solid var(--bdr); background: var(--bg1); padding: 12px 10px; overflow-y: auto;
  min-height: 0; display: flex; flex-direction: column; gap: 2px; }
.rm-side-lbl { font-size: var(--fs-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--dim2);
  font-weight: 600; margin: 12px 8px 5px; }
.rm-side-lbl:first-child { margin-top: 0; }
.rm-side-empty { color: var(--dim2); font-size: var(--fs-sm); padding: 4px 9px; }
.rm-lens { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 7px; cursor: pointer;
  color: var(--dim); font-size: var(--fs-base); border: 1px solid transparent; }
.rm-lens:hover { background: var(--bg2); color: var(--txt); }
.rm-lens.active { background: var(--bg2); color: var(--txt); border-color: var(--bdr); }
.rm-lens-ic { width: 15px; text-align: center; flex: 0 0 auto; }
.rm-lens-nm { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The Favorites rail glyph is NOT the table's .rm-star button (TKB-231): that
   class is 24px with 3px of side padding, and 30px of content in this 15px box
   spilled ~7.5px each way — out of the icon column on the left, into the row's
   9px gap on the right, so the star touched its own label. Sized to the rail
   like every other glyph here, and no hover scale: this one is decoration, the
   row is what you click. */
.rm-lens-star { font-size: var(--fs-base); line-height: 1; color: var(--amber); }
.rm-lens-ct { font-size: var(--fs-xs); color: var(--dim2); }
.rm-lens.active .rm-lens-ct { color: var(--amber-ink); }
.rm-folder .rm-folder-menu { opacity: 0; background: none; border: none; color: var(--dim2); cursor: pointer;
  font-size: var(--fs-md); padding: 0 2px; line-height: 1; letter-spacing: 1px; }
.rm-folder:hover .rm-folder-menu, .rm-folder.active .rm-folder-menu { opacity: 1; }
.rm-folder-menu:hover { color: var(--txt); }
.rm-swatch { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; display: inline-block; }
.rm-newfolder { margin-top: 8px; color: var(--amber-ink); background: none; border: 1px dashed var(--bdr2);
  border-radius: 7px; padding: 7px 9px; cursor: pointer; font: inherit; font-size: var(--fs-base); font-weight: 600; }
.rm-newfolder:hover { background: var(--bg2); }

/* ── content ───────────────────────────────────────────────────────────────*/
.rm-content { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg1); }
.rm-toolbar { display: flex; align-items: center; gap: 8px; padding: 11px 16px; border-bottom: 1px solid var(--bdr); flex-wrap: wrap; }
.rm-search { display: flex; align-items: center; gap: 7px; background: var(--bg0); border: 1px solid var(--bdr);
  border-radius: 8px; padding: 6px 10px; min-width: 180px; flex: 1 1 auto; max-width: 340px; }
.rm-search svg { width: 15px; height: 15px; stroke: var(--dim2); fill: none; stroke-width: 2; flex: 0 0 auto; }
.rm-search input { background: none; border: none; color: var(--txt); font: inherit; outline: none; width: 100%; }
.rm-search input::placeholder { color: var(--dim2); }
.rm-spacer { flex: 1 1 auto; }
.rm-btn { background: var(--bg2); border: 1px solid var(--bdr); color: var(--txt); font: inherit; font-size: var(--fs-base);
  padding: 6px 11px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.rm-btn:hover { background: var(--bg3); }
.rm-btn.active { border-color: var(--amber-ink); color: var(--amber-ink); }
.rm-btn-sm { padding: 4px 9px; font-size: var(--fs-sm); }
.rm-primary { background: var(--amber); color: var(--on-amber); border-color: var(--amber); font-weight: 600; }
.rm-primary:hover { background: #ffb31f; }
.rm-seg { display: flex; background: var(--bg0); border: 1px solid var(--bdr); border-radius: 8px; overflow: hidden; }
.rm-segbtn { background: none; border: none; color: var(--dim); font: inherit; font-size: var(--fs-sm); padding: 6px 11px; cursor: pointer; white-space: nowrap; }
.rm-segbtn.active { background: var(--bg3); color: var(--txt); }

/* filter panel */
.rm-filter { display: flex; flex-wrap: wrap; gap: 14px; align-items: end; padding: 12px 16px; border-bottom: 1px solid var(--bdr); background: var(--bg0); }
.rm-filter[hidden] { display: none; }
.rm-frow { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); color: var(--dim); }
.rm-frange { display: flex; gap: 6px; }
.rm-filter select, .rm-filter input { background: var(--bg1); border: 1px solid var(--bdr); color: var(--txt);
  font: inherit; font-size: var(--fs-base); padding: 5px 8px; border-radius: 6px; }
.rm-filter input[type=number] { width: 74px; }

/* bulk bar */
.rm-bulk { display: flex; align-items: center; gap: 6px; padding: 9px 16px; flex-wrap: wrap;
  background: rgba(var(--amber-wash), .09); border-bottom: 1px solid var(--amber-ink); }
.rm-bulk[hidden] { display: none; }
.rm-bulk-n { font-weight: 700; color: var(--amber-ink); margin-right: 6px; }
.rm-bb { background: var(--bg2); border: 1px solid var(--bdr); color: var(--txt); font: inherit; font-size: var(--fs-sm);
  padding: 5px 10px; border-radius: 7px; cursor: pointer; }
.rm-bb:hover { background: var(--bg3); }
.rm-bb.rm-danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 20%, transparent); }
.rm-bb.rm-danger:hover { background: color-mix(in srgb, var(--red) 20%, transparent); }
.rm-bulk-clr { margin-left: auto; background: none; border: none; color: var(--dim); cursor: pointer; font: inherit; font-size: var(--fs-sm); }

/* list container */
.rm-listwrap { flex: 1 1 auto; overflow: auto; min-height: 0; }
.rm-tip { padding: 8px 16px; font-size: var(--fs-sm); color: var(--dim2); border-top: 1px solid var(--bdr); background: var(--bg1); flex: 0 0 auto; }
.rmg-empty { padding: 40px 20px; text-align: center; color: var(--dim); max-width: 60ch; margin: 0 auto; line-height: 1.6; }
.rmg-empty.rm-err { color: var(--red); }
.rm-dim { color: var(--dim2); }

/* ── table ─────────────────────────────────────────────────────────────────*/
.rmg-table { border-collapse: collapse; width: 100%; min-width: 860px; }
.rmg-table thead th { position: sticky; top: 0; z-index: 1; background: var(--bg2); text-align: left;
  font-size: var(--fs-xs); letter-spacing: .04em; text-transform: uppercase; color: var(--dim); font-weight: 600;
  padding: 9px 12px; border-bottom: 1px solid var(--bdr); white-space: nowrap; }
.rmg-table thead th[data-rm-sort] { cursor: pointer; user-select: none; }
.rmg-table thead th[data-rm-sort]:hover { color: var(--txt); }
.rmg-table thead th.sorted { color: var(--amber-ink); }
.rmg-table td { padding: 8px 12px; border-bottom: 1px solid var(--bg2); white-space: nowrap; vertical-align: middle; }
.rmg-table tbody tr:hover { background: var(--bg2); }
.rmg-table tbody tr.sel { background: rgba(var(--amber-wash), .08); }
.rmg-table .num { text-align: right; font-family: var(--font-data); font-variant-numeric: tabular-nums; }
.rm-cb-col { width: 34px; }
.rm-star-col { width: 36px; }
.rm-menu-col { width: 34px; }
.rm-cb { width: 15px; height: 15px; accent-color: var(--amber); cursor: pointer; vertical-align: middle; }
.rm-open { cursor: pointer; }
.rm-rt-title { font-weight: 600; color: var(--txt); }
.rm-tags { display: inline-flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.rm-chip { font-size: var(--fs-xs); color: var(--dim); background: var(--bg3); border-radius: 4px; padding: 1px 6px; cursor: pointer; }
.rm-chip:hover { color: var(--amber-ink); background: var(--bg2); }
.rm-tag .rm-lens-ic { color: var(--dim2); font-weight: 700; }
.rm-fld { color: var(--dim); }
/* Tags column: chips wrap (table cells are nowrap by default) within a capped width. */
.rm-tagcell { white-space: normal; max-width: 220px; }
.rm-tagcell .rm-tags { margin-top: 0; }
.rm-star { background: none; border: none; cursor: pointer; color: var(--dim); font-size: var(--fs-xl); line-height: 1;
  padding: 1px 3px; border-radius: 5px; transition: color .12s, transform .08s; }
/* Gold, not ink. --amber-ink is the writing value and drops to #935f06 on
   paper, which turned every favourited star brown in the light theme. A filled
   ★ is a fill, not text — so it takes --amber, which is #f59e0b in both
   themes, and a favourite looks the same colour whichever ground it sits on.
   Hover shows the colour it is about to become, so it takes the same value. */
.rm-star:hover { color: var(--amber); transform: scale(1.18); }
.rm-star.on { color: var(--amber); }
.rm-rowmenu { background: none; border: none; color: var(--dim2); cursor: pointer; font-size: var(--fs-md); line-height: 1; letter-spacing: 1px; padding: 0 4px; }
.rm-rowmenu:hover { color: var(--txt); }

/* Chips — two shapes, one mechanism. Each variant sets --tint and the base
   derives BOTH halves from it, so a chip follows the theme instead of pinning a
   value to one ground. The tint backgrounds were tokenised already; the labels
   were not, and #5fe3ad / #7fb4ff / #ffa666 / #f5b940 are all dark-theme
   literals — which is why Public read as pale mint on pale sage once the paper
   arrived, legible at 1.9:1 and not really a colour. (TKF-226)

   The label is the token mixed 20% toward --txt, and the mix is what buys the
   contrast rather than being decoration. The semantic tokens are already the
   per-theme ink — --green is #5c9c67 on the dark ground and #45663d on paper —
   but a 10px label sitting on its OWN 16% tint lands at 4.02:1 in the dark,
   just under the line. 20% of the body ink lifts every variant clear in both
   themes: pub measures 4.98:1 dark, 5.6:1 light.

   Amber is the exception tokens.css already documents, so it is the exception
   here too. It takes --amber-ink, because raw amber cannot write on paper
   (1.82:1), and Saved keeps --amber-wash for its tint, because raw amber at
   16% composites to brown. */
.rm-pill, .rm-badge { --tint: var(--dim); font-weight: 600;
  background: color-mix(in srgb, var(--tint) 16%, transparent);
  color: color-mix(in srgb, var(--tint) 80%, var(--txt)); }
.rm-pill { font-size: var(--fs-xs); padding: 2px 8px; border-radius: 20px; white-space: nowrap; }
.rm-pill.loop { --tint: var(--blue); }
.rm-pill.oab  { --tint: var(--green); }
.rm-badge { font-size: var(--fs-xs); padding: 1px 6px; border-radius: 4px; }
.rm-badge.pub { --tint: var(--green); }
.rm-badge.str { --tint: var(--orange); }
.rm-badge.saved { --tint: var(--amber-ink); background: rgba(var(--amber-wash), .16); }

/* ── grid ──────────────────────────────────────────────────────────────────*/
/* Grid tile size — S/M/L control scales the column min-width + thumbnail height
   (M is the default; data-size overrides win on specificity). */
.rm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; padding: 16px; }
.rm-grid[data-size="s"] { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.rm-grid[data-size="l"] { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.rm-grid[data-size="s"] .rm-thumb { height: 82px; }
.rm-grid[data-size="l"] .rm-thumb { height: 156px; }
.rm-card { background: var(--bg2); border: 1px solid var(--bdr); border-radius: 10px; overflow: hidden; position: relative; }
.rm-card:hover { border-color: var(--bdr2); }
.rm-card.sel { border-color: var(--amber-ink); box-shadow: 0 0 0 1px var(--amber) inset; }
.rm-card-top { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; align-items: center; gap: 6px; z-index: 2; }
.rm-card-top .rm-rowmenu { margin-left: auto; background: color-mix(in srgb, var(--bg0) 60%, transparent); border-radius: 5px; }
.rm-card-top .rm-star { background: color-mix(in srgb, var(--bg0) 60%, transparent); border-radius: 5px; padding: 0 3px; }
.rm-card-open { display: block; width: 100%; text-align: left; background: none; border: none; color: inherit; font: inherit; cursor: pointer; padding: 0; }
/* Thumbnail: real map <img> layered over a squiggle SVG fallback. If the image
   404s/errors, onerror removes it and the SVG shows through. */
.rm-thumb { position: relative; overflow: hidden; background: var(--bg0); }
.rm-thumb .rm-thumb-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rm-thumb .rm-thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.rm-card .rm-thumb { height: 104px; border-bottom: 1px solid var(--bdr); }
.rm-card-body { padding: 10px 11px; }
.rm-card-meta { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.rm-card-stats { display: flex; gap: 12px; margin-top: 8px; color: var(--dim); font-size: var(--fs-sm); font-family: var(--font-data); font-variant-numeric: tabular-nums; }
.rm-card-stats b { color: var(--txt); font-weight: 600; }
.rm-card .rm-tags { display: flex; flex-wrap: wrap; margin-top: 8px; }

/* ── stages tab ────────────────────────────────────────────────────────────*/
.rm-stages { display: block; overflow-y: auto; }
.rm-stages-inner { padding: 18px; }
.rm-stages-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.rm-stage { background: var(--bg2); border: 1px solid var(--bdr); border-radius: 11px; padding: 15px 16px; }
.rm-stage:hover { border-color: var(--bdr2); }
.rm-stage h3 { margin: 0; font-size: var(--fs-md); display: flex; align-items: center; gap: 8px; }
.rm-stage-meta { color: var(--dim); font-size: var(--fs-sm); margin-top: 5px; font-family: var(--font-data); font-variant-numeric: tabular-nums; }
.rm-stage-desc { color: var(--dim); font-size: var(--fs-sm); margin: 8px 0 0; }
.rm-stage-open { margin-top: 12px; }
.rm-stage-new { display: flex; align-items: center; justify-content: center; color: var(--amber-ink);
  border-style: dashed; cursor: pointer; font: inherit; font-weight: 600; min-height: 130px; }
.rm-stage-new:hover { background: var(--bg2); }

/* ── floating menu ─────────────────────────────────────────────────────────*/
.rm-menu { position: fixed; z-index: 300; min-width: 180px; background: var(--bg2); border: 1px solid var(--bdr2);
  border-radius: 9px; box-shadow: 0 14px 40px -12px #000; padding: 5px; }
.rm-menu[hidden] { display: none; }
.rm-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none;
  border: none; color: var(--txt); font: inherit; font-size: var(--fs-base); padding: 7px 10px; border-radius: 6px; cursor: pointer; }
.rm-menu-item:hover { background: var(--bg3); }
.rm-menu-item.danger { color: var(--red); }
.rm-menu-item.danger:hover { background: color-mix(in srgb, var(--red) 20%, transparent); }
.rm-menu-sep { height: 1px; background: var(--bdr); margin: 4px 6px; }
.rm-colorrow { display: flex; gap: 6px; }
.rm-color-sw { width: 16px; height: 16px; border-radius: 5px; cursor: pointer; border: 1px solid color-mix(in srgb, var(--txt) 15%, transparent); }
.rm-color-sw:hover { transform: scale(1.15); }

/* Toast styles moved to core/toast.css — one shared toast for the whole app
   (TKB-028). */

/* ── responsive ────────────────────────────────────────────────────────────*/
@media (max-width: 820px) {
  .rm-body { grid-template-columns: 1fr; }
  .rm-side { display: none; }
}