/* Threadfall map.
 *
 * The map box's border/background use the site's REAL theme tokens
 * (--np-border, --np-bg - see web/static/website/css/theme.css). Those
 * tokens are defined ONLY under html[data-theme="dark"] (light mode is
 * deliberately left as Evennia ships it, per theme.css's own header
 * comment), so in light mode the var() falls through to its fallback -
 * that fallback IS this file's light-mode design, not a placeholder.
 * Never invent a token name theme.css doesn't define (--border-color and
 * --body-bg do not exist anywhere in this project and always fell
 * through to their fallbacks in both themes, which is a bug this file
 * used to have).
 *
 * The severity colours (.tf-strength-*) have no site-wide token to
 * borrow, so they follow the same shape theme.css itself uses -
 * light-appropriate values by default, redefined under
 * html[data-theme="dark"] - the same local-custom-property pattern
 * world/gridmap/templates/gridmap/area.html uses for its own map
 * colours (--map-room et al). Each set was chosen to read on its own
 * background: the light set is darkened for contrast against a light
 * page, the dark set is the original bright palette this file shipped
 * with, which already reads well against the dark surface tokens.
 */

.threadfall {
  max-width: 1100px; margin: 0 auto; padding: 1rem;
  --tf-light: #2f7d32; --tf-heavy: #9a6100;
  --tf-erratic: #7c4dab; --tf-catastrophic: #c0392b;
}
html[data-theme="dark"] .threadfall {
  --tf-light: #5cb85c; --tf-heavy: #d9a441;
  --tf-erratic: #b07fd0; --tf-catastrophic: #e06a66;
}

.threadfall-intro { opacity: 0.85; margin-bottom: 1rem; }

.threadfall-controls {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
  align-items: flex-end; margin-bottom: 1rem;
}
.threadfall-controls label { display: flex; flex-direction: column; font-size: 0.9rem; }
.threadfall-controls input, .threadfall-controls select { min-width: 6rem; }

#threadfall-map {
  height: 520px; width: 100%;
  border: 1px solid var(--np-border, #dee2e6);
  border-radius: 4px; background: var(--np-bg, #fff);
}

.threadfall-empty { margin-top: 1rem; font-style: italic; opacity: 0.8; }

.threadfall-table { width: 100%; margin-top: 1.5rem; border-collapse: collapse; }
.threadfall-table th, .threadfall-table td {
  padding: 0.4rem 0.6rem; text-align: left;
  border-bottom: 1px solid var(--np-border, #dee2e6);
}
.threadfall-table th { cursor: pointer; user-select: none; }
.threadfall-table th:hover { text-decoration: underline; }

.tf-strength-light { color: var(--tf-light); }
.tf-strength-normal { color: inherit; }
.tf-strength-heavy { color: var(--tf-heavy); }
.tf-strength-erratic { color: var(--tf-erratic); }
.tf-strength-catastrophic { color: var(--tf-catastrophic); font-weight: bold; }
.tf-surprise { font-style: italic; }