/* Styles for the tips and pool-intent panels (js/tips.js, js/intent.js),
   plus the signalling panel's concentration
   slot (js/signalling.js: renderConcentration()). Tokens only, no hex, the
   same explainer node idiom as ledger.css and panels.css: dark fills, bright
   strokes, Courier throughout. Reuses base.css's .pending-instrument /
   .pending-chip and panels.css's .subhead / .signalling-table / .frost /
   .signalling-history-empty where a panel's markup is deliberately built
   from those already-loaded, already-correct utility classes rather than
   duplicating their rules here. */

/* ---------------------------------------------------------------------- */
/* Chain tips (#tips-mount, js/tips.js)                                    */
/* ---------------------------------------------------------------------- */

.tips-panel {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.tips-table-wrap {
  overflow-x: auto;
}
.tips-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.tips-table th,
.tips-table td {
  text-align: left;
  padding: 0.4rem 0.65rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.tips-table th {
  font-family: var(--body);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--faint);
  border-bottom: 1px solid var(--line-strong);
}
.tips-name { color: var(--text); }
.tips-client { color: var(--muted); }
.tips-height { color: var(--text); }

/* Same rule as the intent and ledger tables: no display:flex on a td (it
   breaks the shared row border). The dot is spaced with a margin. */
.tips-reach-cell { vertical-align: middle; }
.tips-dot { font-size: 0.6rem; line-height: 1; margin-right: 0.4rem; }
/* Reachability is health, so it takes the same green the freshness beads use.
   The signal dot below keeps the fork's violet, because there it means the
   BIP-110 side rather than "this node answered". */
.tips-dot-up { color: var(--live); }
.tips-dot-down { color: var(--faint); opacity: 0.5; }
/* Not reported is not the same fact as unreachable, so it reads quieter than
   both (js/tips.js: reachState). */
.tips-dot-unknown { color: var(--faint); opacity: 0.25; }
.tips-reach-text { color: var(--muted); font-size: 0.74rem; }
.tips-reach-unknown { color: var(--faint); font-style: italic; }

/* ---------------------------------------------------------------------- */
/* Pool intent (#stratum-mount, js/intent.js)                              */
/* ---------------------------------------------------------------------- */

.intent-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.intent-headline {
  margin: 0;
  font-family: var(--mono);
  font-size: 1.05rem;
  color: var(--text);
}
.intent-headline-num { font-weight: 600; }
.intent-headline-signalling { color: var(--frost); }

.intent-empty {
  margin: 0;
  color: var(--faint);
  font-size: 0.85rem;
}

.intent-table-wrap {
  overflow-x: auto;
}
.intent-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.intent-table th,
.intent-table td {
  text-align: left;
  padding: 0.4rem 0.65rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.intent-table th {
  font-family: var(--body);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--faint);
  border-bottom: 1px solid var(--line-strong);
}
.intent-source { color: var(--text); }
.intent-mask { color: var(--muted); }
.intent-notify-cell { color: var(--text); }
.intent-flip-cell { color: var(--muted); }

/* NOTE: never display:flex on a td: it leaves the table-cell layout model and
   its border stops sitting on the shared row edge (staggered rules). Space the
   dot with a margin instead. */
.intent-signal-cell { vertical-align: middle; }
.intent-dot { font-size: 0.6rem; line-height: 1; margin-right: 0.4rem; }
.intent-dot-on { color: var(--frost); }
.intent-dot-off { color: var(--faint); opacity: 0.5; }
/* No verdict is not the same fact as "not signalling", so it reads quieter
   than both (js/intent.js: signalState). */
.intent-dot-unknown { color: var(--faint); opacity: 0.25; }
.intent-signal-text { color: var(--muted); font-size: 0.74rem; }
.intent-signal-unknown { color: var(--faint); font-style: italic; }

/* "Awaiting jobs": version:null, never seen. Muted, collapsed to one cell. */
.intent-row-awaiting { opacity: 0.55; }
.intent-awaiting-cell {
  font-family: var(--body);
  font-style: italic;
  color: var(--faint);
  white-space: normal;
}

/* ---------------------------------------------------------------------- */
/* Signalling concentration slot (js/signalling.js: renderConcentration())  */
/* ---------------------------------------------------------------------- */

.concentration {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}
.concentration-line {
  margin: 0;
  font-size: 0.92rem;
  color: var(--muted);
}
.concentration-name {
  font-family: var(--mono);
  font-weight: 600;
  color: var(--frost);
}
.concentration-pct {
  font-family: var(--mono);
  color: var(--frost);
}
.concentration-caption {
  margin: 0;
  font-family: var(--body);
  font-style: italic;
  font-size: 0.82rem;
  color: var(--faint);
}
/* .concentration-table rides on panels.css's .signalling-table for its base
   cell/border rules; this only adds the small gap above it. */
.concentration-table-wrap .concentration-table {
  margin-top: 0.15rem;
}
.concentration-table-scroll {
  overflow-x: auto;
}

@media (max-width: 720px) {
  .intent-headline {
    font-size: 0.95rem;
  }
}

/* Concentration breakdown refinements: the three-denominator layout */
.concentration-subline {
  margin: 0.15rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}
.concentration-subline .mono { color: var(--text); }
.concentration-zero { color: var(--faint); }

/* Expandable others-combined row in the concentration table */
.concentration-toggle {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--blue);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.concentration-toggle::after { content: " \25B8"; text-decoration: none; }
.concentration-toggle[aria-expanded="true"]::after { content: " \25BE"; }
.concentration-rest-row td:first-child { padding-left: 1.6rem; color: var(--muted); }