/*!
 * @fileoverview Styles for the World view (js/world-view.js, docs/ledger-design.md
 *   section 9): the SVG basemap, the one-hue choropleth, site dots, asset
 *   marks, the time slider, the legend, the side panel and the table twin.
 *   Colour: the choropleth is the validated sequential blue also used by the
 *   Molecule heat (steps 250 to 650 on light; flipped to 600 to 200 on dark so
 *   the low end recedes into the surface; validate_palette.js --ordinal passes
 *   in both modes). Site status uses categorical slots 2 (orange, recruiting)
 *   and 3 (aqua, active) plus neutral hollow marks (completed, stopped), each
 *   with its own SHAPE so colour never carries the meaning alone; assets use
 *   slot 7 (violet). The three slots validate all-pairs in both modes (aqua on
 *   light is below 3:1: relief is the shape, the surface ring, the legend and
 *   the table view). Marks carry a 1.5 px surface ring; country borders are
 *   surface-coloured hairlines. Text is never coloured with a series colour.
 *   Reuses tokens from css/app.css and css/timeline.css; load after css/views.css.
 * @module css/world
 */

.tt-world {
  --ww-c1: #86b6ef;
  --ww-c2: #5598e7;
  --ww-c3: #2a78d6;
  --ww-c4: #1c5cab;
  --ww-c5: #104281;
  --ww-land: #e6e5df;
  --ww-recruiting: #eb6834;
  --ww-active: #1baf7a;
  --ww-asset: #6250d6;
  --ww-ring: var(--tt-ink-secondary);
  display: grid;
  gap: var(--tt-sp-4);
  min-width: 0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .tt-world {
    --ww-c1: #184f95;
    --ww-c2: #256abf;
    --ww-c3: #3987e5;
    --ww-c4: #6da7ec;
    --ww-c5: #9ec5f4;
    --ww-land: #2c2c2a;
    --ww-recruiting: #d95926;
    --ww-active: #199e70;
    --ww-asset: #9085e9;
  }
}
:root[data-theme='dark'] .tt-world {
  --ww-c1: #184f95;
  --ww-c2: #256abf;
  --ww-c3: #3987e5;
  --ww-c4: #6da7ec;
  --ww-c5: #9ec5f4;
  --ww-land: #2c2c2a;
  --ww-recruiting: #d95926;
  --ww-active: #199e70;
  --ww-asset: #9085e9;
}

.ww-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- header: scope + ask chips ---- */
.tt-world-head { display: grid; gap: var(--tt-sp-3); }
.tt-world-form { display: flex; flex-wrap: wrap; gap: var(--tt-sp-2) var(--tt-sp-3); align-items: flex-end; }
.tt-world-field { display: grid; gap: 2px; min-width: 0; }
.tt-world-label { font-size: var(--tt-fs-12); font-weight: 600; color: var(--tt-ink-secondary); }
.tt-world-scope { width: 240px; max-width: 100%; }
.tt-world-mol { width: 200px; max-width: 100%; }
.tt-world-askrow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.tt-world-askrow .tt-chip,
.ww-group .tt-chip { display: inline-flex; align-items: center; gap: 6px; }

.tt-world-title { display: flex; align-items: baseline; gap: var(--tt-sp-3); flex-wrap: wrap; }
.tt-world-h { margin: 0; font-size: var(--tt-fs-20); font-weight: 650; letter-spacing: -0.01em; }
.tt-world-foot { margin: 0; max-width: 90ch; }

.tt-world-banner {
  display: flex;
  align-items: center;
  gap: var(--tt-sp-3);
  padding: var(--tt-sp-3) var(--tt-sp-4);
  border: 1px solid var(--tt-border-strong);
  border-radius: var(--tt-radius);
  background: var(--tt-surface-2);
  font-size: var(--tt-fs-13);
  color: var(--tt-ink-secondary);
}
.tt-world-banner strong { color: var(--tt-ink); }
.tt-world-banner-text { flex: 1 1 auto; min-width: 0; }
.tt-world-banner .tt-empty-cmd { display: inline-block; margin-left: 6px; }
.tt-world-banner-icon { display: inline-grid; place-items: center; color: var(--tt-ink-secondary); }

/* ---- stats ---- */
.ww-summary-wrap { display: grid; gap: var(--tt-sp-2); }
.ww-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--tt-sp-3); }
.ww-stat {
  background: var(--tt-surface);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius);
  padding: var(--tt-sp-3) var(--tt-sp-4);
  min-width: 0;
}
.ww-stat-value { font-size: var(--tt-fs-28); font-weight: 650; letter-spacing: -0.02em; line-height: 1.1; }
.ww-stat-label { font-size: var(--tt-fs-12); color: var(--tt-ink-secondary); margin-top: 2px; }
.ww-summary { margin: 0; }

/* ---- layout ---- */
.ww-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--tt-sp-4); align-items: start; }
.ww-layout > * { min-width: 0; }
.ww-card { display: grid; gap: var(--tt-sp-3); }
.ww-card > * { min-width: 0; }

.ww-filters { display: flex; flex-wrap: wrap; gap: var(--tt-sp-2) var(--tt-sp-4); align-items: center; }
.ww-group { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ww-metric { width: auto; min-width: 160px; max-width: 100%; }
.ww-toolbar { display: flex; flex-wrap: wrap; gap: var(--tt-sp-2) var(--tt-sp-4); align-items: center; justify-content: space-between; }
.ww-zoom { gap: 6px; }
.ww-zoom .tt-btn { min-width: 32px; justify-content: center; }
.ww-zoom-label { min-width: 36px; font-variant-numeric: tabular-nums; }

/* ---- time slider ---- */
.ww-time {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tt-sp-2) var(--tt-sp-3);
  padding: var(--tt-sp-2) var(--tt-sp-3);
  background: var(--tt-surface-2);
  border-radius: var(--tt-radius-sm);
}
.ww-time-label { display: inline-flex; align-items: center; gap: 8px; font-size: var(--tt-fs-13); font-weight: 600; cursor: pointer; }
.ww-time-check { width: 16px; height: 16px; margin: 0; accent-color: var(--tt-accent); }
.ww-time-out { min-width: 74px; font-size: var(--tt-fs-13); font-weight: 650; font-variant-numeric: tabular-nums; }
.ww-time-track { display: flex; align-items: center; gap: 8px; flex: 1 1 220px; min-width: 0; }
.ww-time-range { flex: 1 1 auto; min-width: 0; width: 100%; accent-color: var(--tt-accent); }
.ww-time-bound { font-size: 11px; color: var(--tt-ink-muted); font-variant-numeric: tabular-nums; }
.ww-time-note { flex: 1 1 100%; margin: 0; }

/* ---- map ---- */
.ww-map-host { min-width: 0; }
.ww-frame {
  position: relative;
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius);
  background: var(--tt-surface);
  overflow: hidden;
  min-width: 0;
}
.ww-frame:focus-visible { outline: 2px solid var(--tt-accent); outline-offset: 2px; }
.ww-svg { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.ww-svg.is-zoomed { cursor: grab; touch-action: none; }
.ww-svg.is-dragging { cursor: grabbing; }

.ww-country { fill: var(--ww-land); stroke: var(--tt-surface); stroke-width: 0.7; vector-effect: non-scaling-stroke; outline: none; }
.ww-country.ww-c1 { fill: var(--ww-c1); }
.ww-country.ww-c2 { fill: var(--ww-c2); }
.ww-country.ww-c3 { fill: var(--ww-c3); }
.ww-country.ww-c4 { fill: var(--ww-c4); }
.ww-country.ww-c5 { fill: var(--ww-c5); }
.ww-country.has-data { cursor: pointer; }
.ww-country.has-data:hover { stroke: var(--tt-ink); stroke-width: 1.4; }
.ww-country:focus-visible,
.ww-country.is-selected { stroke: var(--tt-ink); stroke-width: 2; }

.ww-mark { stroke: var(--tt-surface); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.ww-hit { fill: transparent; stroke: none; pointer-events: all; }
.ww-dot, .ww-asset { cursor: default; }
.ww-dot.is-recruiting .ww-mark { fill: var(--ww-recruiting); }
.ww-dot.is-active .ww-mark { fill: var(--ww-active); }
.ww-dot.is-completed .ww-mark,
.ww-dot.is-stopped .ww-mark { fill: var(--tt-surface); fill-opacity: 0.55; stroke: var(--tt-ink); stroke-width: 1.6; }
.ww-dot.is-stopped .ww-mark { stroke: var(--tt-ink-secondary); }
.ww-dot:hover .ww-mark { stroke-width: 2.4; }
.ww-asset .ww-mark { fill: var(--ww-asset); stroke-width: 1.8; }
.ww-asset.is-active .ww-mark,
.ww-asset:hover .ww-mark { stroke: var(--tt-ink); stroke-width: 2.2; }
.ww-label {
  font-size: 11px;
  font-weight: 600;
  fill: var(--tt-ink);
  paint-order: stroke;
  stroke: var(--tt-surface);
  stroke-width: 3px;
  stroke-linejoin: round;
  pointer-events: none;
}
.ww-spoke { stroke: var(--ww-asset); stroke-width: 1; stroke-opacity: 0.7; pointer-events: none; }
.ww-spoke-dot { fill: var(--ww-asset); stroke: var(--tt-surface); stroke-width: 1.2; pointer-events: none; }

.ww-tip {
  position: absolute;
  z-index: 3;
  max-width: 280px;
  padding: 8px 10px;
  background: var(--tt-surface);
  color: var(--tt-ink);
  border: 1px solid var(--tt-border-strong);
  border-radius: var(--tt-radius-sm);
  box-shadow: var(--tt-shadow);
  font-size: var(--tt-fs-12);
  line-height: 1.4;
  pointer-events: none;
}
.ww-tip[hidden] { display: none; }
.ww-tip-title { font-weight: 650; font-size: var(--tt-fs-13); margin-bottom: 2px; }
.ww-tip-line { color: var(--tt-ink-secondary); }
.ww-hint {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--tt-ink);
  color: var(--tt-surface);
  font-size: var(--tt-fs-12);
  pointer-events: none;
  white-space: nowrap;
}
.ww-hint[hidden] { display: none; }

/* ---- legend ---- */
.ww-legend { display: flex; flex-wrap: wrap; gap: var(--tt-sp-2) var(--tt-sp-6); font-size: var(--tt-fs-12); color: var(--tt-ink-secondary); }
.ww-legend-group { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.ww-legend-title { font-weight: 600; color: var(--tt-ink); }
.ww-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.ww-legend-note { flex: 1 1 100%; color: var(--tt-ink-muted); }
.ww-swatch { display: inline-block; width: 18px; height: 12px; border-radius: 2px; background: var(--ww-land); }
.ww-swatch.ww-c1 { background: var(--ww-c1); }
.ww-swatch.ww-c2 { background: var(--ww-c2); }
.ww-swatch.ww-c3 { background: var(--ww-c3); }
.ww-swatch.ww-c4 { background: var(--ww-c4); }
.ww-swatch.ww-c5 { background: var(--ww-c5); }
.ww-legend-shape { flex: none; overflow: visible; }

/* ---- side panel ---- */
.ww-side { display: grid; gap: var(--tt-sp-3); align-content: start; min-width: 0; }
.ww-panel-tabs { margin-bottom: 2px; }
.ww-panel-body { display: grid; gap: var(--tt-sp-2); min-width: 0; }
.ww-panel-title { margin: 0; font-size: var(--tt-fs-14); font-weight: 650; }
.ww-bars { display: grid; gap: 2px; }
.ww-bar {
  display: grid;
  grid-template-columns: minmax(80px, 1.1fr) minmax(40px, 1fr) 40px;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 4px 6px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--tt-ink);
  font: inherit;
  font-size: var(--tt-fs-13);
  text-align: left;
}
button.ww-bar { cursor: pointer; }
button.ww-bar:hover, .ww-bar.is-active { background: var(--tt-surface-2); }
.ww-bar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ww-bar-track { height: 6px; border-radius: 3px; background: var(--tt-grid); overflow: hidden; }
.ww-bar-fill { display: block; height: 100%; border-radius: 3px; background: var(--ww-c3); }
.ww-bar-val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.ww-more { justify-self: start; }
.ww-back { justify-self: start; }

.ww-trials { list-style: none; margin: 0; padding: 0; display: grid; max-height: 520px; overflow-y: auto; }
.ww-trial { display: flex; gap: var(--tt-sp-2); align-items: flex-start; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--tt-border); }
.ww-trial:first-child { border-top: 0; }
.ww-trial-main { min-width: 0; display: grid; gap: 2px; }
.ww-trial-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.ww-trial-id { font-weight: 650; font-size: var(--tt-fs-13); }
.ww-trial-status { display: inline-flex; align-items: center; gap: 5px; font-size: var(--tt-fs-12); color: var(--tt-ink-secondary); }
.ww-trial-title { font-size: var(--tt-fs-13); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.ww-asset-wrap, .ww-table-wrap { overflow-x: auto; border: 1px solid var(--tt-border); border-radius: var(--tt-radius-sm); max-width: 100%; }
.ww-asset-table, .ww-table { width: 100%; border-collapse: collapse; font-size: var(--tt-fs-12); }
.ww-asset-table th, .ww-asset-table td,
.ww-table th, .ww-table td { padding: 5px 8px; text-align: right; border-bottom: 1px solid var(--tt-border); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ww-asset-table th:first-child, .ww-asset-table td:nth-child(2),
.ww-table th:first-child, .ww-table td:last-child { text-align: left; }
.ww-asset-table thead th, .ww-table thead th { position: sticky; top: 0; background: var(--tt-surface); color: var(--tt-ink-secondary); font-weight: 600; }
.ww-asset-table tbody th { white-space: normal; min-width: 90px; font-weight: 600; }
.ww-asset-row { cursor: default; }
.ww-asset-row:hover, .ww-asset-row.is-active, .ww-asset-row:focus-visible { background: var(--tt-surface-2); outline: none; }
.ww-asset-row.is-hidden { color: var(--tt-ink-muted); }
.ww-table td:last-child { max-width: 340px; overflow: hidden; text-overflow: ellipsis; }
.ww-table.is-sites td, .ww-table.is-sites th { text-align: left; }
.ww-tables { display: grid; gap: var(--tt-sp-3); min-width: 0; }

/* ---- mini map (Molecule view, company cards) ---- */
.tt-world-mini { gap: var(--tt-sp-2); }
.ww-frame-mini { border-radius: var(--tt-radius-sm); }
.ww-svg-mini { touch-action: auto; }
.ww-mini-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tt-sp-2); }

/* ---- narrow viewports ---- */
@media (max-width: 1099px) {
  .ww-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .ww-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ww-stat-value { font-size: var(--tt-fs-20); }
  .tt-world-scope, .tt-world-mol { width: 100%; }
  .tt-world-field { flex: 1 1 100%; }
  .tt-world-banner { align-items: flex-start; flex-wrap: wrap; }
  .ww-zoomhint { display: none; }
  .ww-metric { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .tt-world * { transition: none !important; }
}

/* ---- assets mode: a wider side panel for the table; filter disclosure ---- */
.ww-layout.has-assets { grid-template-columns: minmax(0, 1fr) 500px; }
.ww-asset-wrap { max-height: 560px; overflow: auto; }
.ww-more-filters { flex: 1 1 100%; min-width: 0; }
.ww-more-summary { cursor: pointer; font-size: var(--tt-fs-12); font-weight: 600; color: var(--tt-ink-secondary); padding: 2px 0; width: max-content; }
.ww-more-filters[open] > .ww-more-summary { margin-bottom: var(--tt-sp-2); }
.ww-filters-inner { gap: var(--tt-sp-2) var(--tt-sp-4); }
@media (max-width: 1299px) {
  .ww-layout.has-assets { grid-template-columns: minmax(0, 1fr); }
}
.ww-asset-co { max-width: 96px; overflow: hidden; text-overflow: ellipsis; }
.ww-asset-table th:nth-child(2), .ww-asset-table td:nth-child(2) { text-align: left; }
.ww-table th:last-child { text-align: left; }
.ww-unmapped { margin-top: var(--tt-sp-2); }
.ww-unmapped-list { margin: 0; padding-left: 18px; display: grid; gap: 2px; overflow-wrap: anywhere; }