/* =========================================================
   GlobeWarn — health-tuck.css

   Scope: the Data health table only. Every rule below is under .gw-health,
   which the script adds to that one table, so nothing else on the page can
   be reached by any of this.

   One line per row. The agency always shows; the description takes the room
   that is left and ends in an ellipsis when there is not enough of it.
   ========================================================= */

/* The row is one line: the cell is never allowed to grow past it. */
.gw-health tbody tr { white-space: nowrap; }

/* A table cell, and it has to stay one. This was display:flex, which takes
   the cell out of the table's column model — so its row no longer shared
   geometry with the header, and every label sat off its own column. The
   tucking works just as well with inline parts and an ellipsis on the cell. */
.gw-health tbody td:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  hyphens: none;
}

/* The identifier: never cut, never wrapped. It is how the row is recognised.
   The margin carries the space between the two parts, so it survives even if
   something else changes the cell's display. */
.gw-health .gw-keep {
  font-weight: 600;
  margin-inline-end: 0.45ch;
}

/* The description: takes what is left, and no more. */
.gw-health .gw-rest {
  font-weight: 400;
  color: var(--text-dim, #55606d);
}

/* Only a cut description says there is more to read. */
.gw-health td.gw-cut { cursor: help; }

.gw-health td.gw-cut:focus-visible {
  outline: 2px solid var(--accent, #D9480F);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Data health never becomes a stack of cards. One source, one horizontal
   line, at every width — that is the whole reason the table exists, and the
   tucked description is what pays for the room. These rules undo the general
   fitting pass if it ever reaches this table. */
.gw-health.gw-stacked,
.gw-health.gw-stacked tbody { display: table; width: 100%; }

.gw-health.gw-stacked tr {
  display: table-row;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.gw-health.gw-stacked td {
  display: table-cell;
  grid-template-columns: none;
  padding: 0.5rem 0.75rem 0.5rem 0;
  border-bottom: 1px solid var(--line, #c9d2dc);
  white-space: nowrap;
}

.gw-health.gw-stacked td::before { content: none; }

.gw-health.gw-stacked thead {
  position: static;
  width: auto;
  height: auto;
  clip-path: none;
  display: table-header-group;
}


/* --- the whole name, floating -------------------------------------------- */

/* Fixed, so it is measured against the window: it cannot widen a column or
   add a line to a row. It only ever reports, so it takes no clicks. */
#gw-health-tip {
  position: fixed;
  z-index: 880;
  max-width: min(30rem, calc(100vw - 1rem));
  padding: 0.45rem 0.7rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: inherit;
  background: var(--panel, #fff);
  border: 1px solid var(--line-strong, #8c99a8);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(12, 18, 26, 0.2);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  #gw-health-tip { animation: gw-health-tip-in 0.1s ease-out; }
}

@keyframes gw-health-tip-in { from { opacity: 0; } to { opacity: 1; } }