/* oz-ttmaps.css — the traveler's two maps, opened from its chat head.
   TIME MAP = a warm parchment timeline (unicorn register: illustrated).
   SEARCH MAP = a cool vector web (corp/clinical register: flat SVG).
   Both are full-screen overlays in the MAIN document (no iframe) — WebKit-safe. */

/* the two head buttons (traveler only) — same seat as .ab-add, illustrated glyph */
/* THE TRAVELER'S MAPS — icon-only, riding the context-bar row (Sum 2026-07-21: "time map and
   search map don't need words — same line as the speaker and the hillicinot pill"). No labels.
   .ctx-maps sits at the LEFT of .ctx-mini; margin-right:auto pushes the meter cluster to the right. */
.ctx-maps { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; }
.ab-map, .ab-glob, .ab-nowtrip {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  height: 22px; min-width: 22px; padding: 0 2px;
  border: 0; background: none; cursor: pointer; opacity: .72;
}
.ab-map img, .ab-glob img, .ab-nowtrip img { height: 18px; width: auto; display: block; border-radius: 3px; }
.ab-map:hover, .ab-glob:hover, .ab-nowtrip:hover { opacity: 1; }
.ab-nowtrip[hidden] { display: none; }

/* ── the overlay shell ── */
.ttm-ov {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 6, 16, 0.62); backdrop-filter: blur(6px);
  padding: max(18px, 3vh) max(14px, 3vw);
}
.ttm-card {
  position: relative; width: min(920px, 100%); max-height: 92vh; overflow: hidden;
  display: flex; flex-direction: column;
  border-radius: 20px; border: 1px solid var(--line);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}
.ttm-head {
  flex-shrink: 0; display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border-bottom: 1px solid var(--line);
}
.ttm-hero { width: 46px; height: 46px; border-radius: 12px; object-fit: cover; flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); }
.ttm-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ttm-title { font-size: var(--fs-ui); font-weight: 700; letter-spacing: 0.01em; }
.ttm-sub { font-size: var(--fs-chrome); color: var(--muted, #998877); }
.ttm-x {
  margin-left: auto; flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px;
  background: var(--btn); border: 1px solid var(--line); color: var(--text);
  font-size: 20px; line-height: 1; cursor: pointer;
}
.ttm-x:hover { border-color: var(--accent); color: var(--accent); }
.ttm-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 22px 20px 40px; }
.ttm-empty { text-align: center; color: var(--muted, #998877); font-size: var(--fs-ui);
  line-height: 1.7; padding: 48px 24px; }

/* ── TIME MAP — parchment ── */
.ttm-card.time { background:
  radial-gradient(120% 90% at 50% -10%, #fbf3df 0%, #f4e7c9 42%, #e9d6ac 100%); color: #3a2c17; }
.ttm-card.time .ttm-head { border-bottom-color: rgba(90, 64, 24, 0.22); background: rgba(255, 250, 238, 0.5); }
.ttm-card.time .ttm-title { color: #4a3818; }
.ttm-card.time .ttm-sub { color: #8a7448; }
.ttm-card.time .ttm-x { background: rgba(255, 251, 240, 0.7); border-color: rgba(90, 64, 24, 0.28); color: #6a5324; }
.ttm-card.time .ttm-empty { color: #8a7448; }

.ttm-time { position: relative; }
.ttm-time::before {   /* the spine, dead center */
  content: ''; position: absolute; left: 50%; top: 6px; bottom: 6px; width: 3px; transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(120, 86, 34, 0.15), rgba(120, 86, 34, 0.5) 12%, rgba(120, 86, 34, 0.5) 88%, rgba(120, 86, 34, 0.12));
  border-radius: 2px;
}
.ttm-stop { position: relative; display: grid; grid-template-columns: 1fr 46px 1fr; align-items: start; }
.ttm-node {   /* the dot on the spine */
  grid-column: 2; justify-self: center; margin-top: 8px; z-index: 2;
  width: 15px; height: 15px; border-radius: 50%;
  background: #b8863a; border: 3px solid #fbf3df; box-shadow: 0 0 0 1px rgba(120, 86, 34, 0.4);
}
.ttm-stop.future .ttm-node { background: #9a86c8; }
.ttm-era { grid-column: 1 / -1; text-align: center; margin: 6px 0 2px; font-size: var(--fs-chrome);
  letter-spacing: 0.12em; text-transform: uppercase; color: #a8895a; font-weight: 700; }
.ttm-card-box {
  background: rgba(255, 252, 244, 0.82); border: 1px solid rgba(120, 86, 34, 0.28);
  border-radius: 14px; padding: 11px 13px; max-width: 340px; box-shadow: 0 3px 12px rgba(90, 64, 24, 0.14);
}
.ttm-stop.left  .ttm-card-box { grid-column: 1; justify-self: end;   margin-right: 4px; }
.ttm-stop.right .ttm-card-box { grid-column: 3; justify-self: start; margin-left: 4px; }
.ttm-year { font-size: 22px; font-weight: 800; line-height: 1; color: #7a5a24; margin-bottom: 3px;
  font-variant-numeric: tabular-nums; }
.ttm-stop.future .ttm-year { color: #6d5a9c; }
.ttm-fut-tag { font-size: 13px; font-weight: 700; color: #6d5a9c; letter-spacing: 0.08em; }
.ttm-concept { font-size: var(--fs-ui); font-weight: 600; color: #40311a; line-height: 1.3; margin-bottom: 5px; }
.ttm-thumbs { display: flex; gap: 5px; flex-wrap: wrap; margin: 6px 0; }
.ttm-thumb { width: 54px; height: 40px; object-fit: cover; border-radius: 6px; cursor: pointer;
  border: 1.5px solid rgba(120, 86, 34, 0.35); box-shadow: 0 1px 4px rgba(90, 64, 24, 0.2); transition: transform .12s; }
.ttm-thumb:hover { transform: scale(1.08); border-color: #b8863a; }
.ttm-thumb.empty { background: rgba(120, 86, 34, 0.1); display: grid; place-items: center;
  font-size: 16px; cursor: default; }
.ttm-story { font-size: var(--fs-chrome); color: #5c4a2e; line-height: 1.5; margin-top: 4px;
  max-height: 4.5em; overflow: hidden; position: relative; }
.ttm-story.open { max-height: none; }
.ttm-more { font-size: 13px; color: #a06a1a; cursor: pointer; font-weight: 700; margin-top: 3px; display: inline-block; }
.ttm-bits { font-size: 13px; color: #a8895a; margin-top: 5px; }
.ttm-revisit { margin-top: 7px; font-size: 13px; font-weight: 700; color: #fff; background: #b8863a;
  border: none; border-radius: 8px; padding: 4px 10px; cursor: pointer; }
.ttm-revisit:hover { background: #9a6f2c; }

/* ── SEARCH MAP — the vector web ── */
.ttm-card.search { background: linear-gradient(160deg, #14131f 0%, #1b1830 100%); color: #e8e6f2; }
.ttm-card.search .ttm-head { border-bottom-color: rgba(255, 255, 255, 0.08); }
.ttm-card.search .ttm-title { color: #f0eefb; }
.ttm-card.search .ttm-sub { color: #9a95c0; }
.ttm-card.search .ttm-x { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); color: #cfc8ef; }
.ttm-card.search .ttm-body { padding: 8px 8px 16px; }
.ttm-svg { width: 100%; height: auto; display: block; }
.ttm-svg .edge { stroke: rgba(150, 140, 210, 0.28); stroke-width: 1.4; fill: none; }
.ttm-svg .edge.leaf { stroke: rgba(150, 140, 210, 0.16); stroke-width: 1; }
.ttm-svg .subj { cursor: pointer; }
.ttm-svg .subj circle { fill: #6d5ac8; stroke: rgba(255, 255, 255, 0.25); stroke-width: 1.5; transition: fill .12s; }
.ttm-svg .subj:hover circle { fill: #8b78e8; }
.ttm-svg .subj text { fill: #ece9fb; font-weight: 600; text-anchor: middle; pointer-events: none; }
.ttm-svg .leaf-node circle { fill: #3a3560; stroke: rgba(150, 140, 210, 0.3); stroke-width: 1; }
.ttm-svg .leaf-node text { fill: #b9b2e0; text-anchor: middle; pointer-events: none; }
.ttm-svg .hub circle { fill: #241f3d; stroke: #6d5ac8; stroke-width: 2; }
.ttm-svg .hub text { fill: #cfc8ef; font-weight: 700; text-anchor: middle; }
.ttm-card.search .ttm-empty { color: #9a95c0; }


/* ── the interest kinds — a colour code you can read at a glance ──
   pack = the scroll colours (blue/red/green…) · feed = a named outlet · lane = the house pours ·
   asked = something you actually brought to the traveler. */
.ttm-svg .subj circle { fill: var(--btn); stroke: var(--line); stroke-width: 2; }
.ttm-svg .subj text   { fill: var(--fg); font-weight: 700; text-anchor: middle; pointer-events: none; }
.ttm-svg .subj { cursor: pointer; }
.ttm-svg .subj:hover circle { stroke: var(--accent); stroke-width: 3; }
.ttm-svg .subj.kind-pack  circle { stroke: #8b7bd8; }
.ttm-svg .subj.kind-feed  circle { stroke: #d88b7b; }
.ttm-svg .subj.kind-lane  circle { stroke: #7bd8a0; }
.ttm-svg .subj.kind-asked circle { stroke: var(--accent); }
.ttm-svg .leaf-node { cursor: pointer; }
.ttm-svg .leaf-node circle { fill: var(--line); }
.ttm-svg .leaf-node text { fill: var(--fg); opacity: .8; text-anchor: middle; pointer-events: none; }
.ttm-svg .leaf-node:hover circle { fill: var(--accent); }
.ttm-svg .leaf-node:hover text  { opacity: 1; }
.ttm-svg.grabbing { cursor: grabbing; }
.ttm-svg { cursor: grab; touch-action: none; }

/* zoom controls — an explicit way in, since a wheel is not the only pointer */
.ttm-zoom { display: flex; gap: 8px; justify-content: center; margin: 10px 0 0; }
.ttm-zbtn {
  min-width: 52px; padding: 9px 16px;
  font: inherit; font-size: var(--fs-ui, 16px); font-weight: 700;
  background: var(--btn); color: var(--fg);
  border: 2px solid var(--line); border-radius: var(--r-sm); cursor: pointer;
}
.ttm-zbtn:hover { border-color: var(--accent); }