/* ai-summary.css - the widened AI summary cell and the popover that
 * shows its detail on hover (09/08, section 4 of the interaction rework).
 *
 * WHY A SEPARATE FILE rather than edits inside style.css, where
 * .ai-summary-cell is declared. Same precedent as congress.css,
 * lifecycle.css, hover-chart.css and signal.css, and one added reason
 * that is specific to this change: the popover is the half of this
 * feature that touches paid content, and "revert the AI hover" needs to
 * be one deletion, not a hunt through the shared stylesheet for which
 * declarations belonged to it. Folding the two overrides at the top back
 * into style.css is a two-minute job for whoever decides the feature is
 * permanent.
 *
 * IT MUST LOAD AFTER style.css. base.html links it after, and the two
 * overrides below are single-class rules of the same specificity as the
 * ones they replace - so source order is what settles it, and reordering
 * the links silently restores the one-line clamp. That pairing is
 * asserted in tests/test_ai_summary_popover.py rather than left to
 * memory.
 */

/* THREE LINES AND 26rem SINCE 09/08 (was two and 22rem, itself up from
 * one and 16rem in style.css).
 *
 * The earlier note here said 22rem was "a ceiling, not a target", and it
 * was right at the time: past it the summary column started pushing the
 * figures - the reason the table exists - off a laptop's visible width.
 *
 * WHAT CHANGED IS NOT THE APPETITE, IT IS THE BUDGET. stacked-names.css
 * puts each insider on its own line, so the insiders column now sizes to
 * its LONGEST name rather than to the sum of all of them. On the rows
 * that carry three or four names - the ones that were widest - that is a
 * large amount of horizontal space handed back, and this is where it
 * goes. The ceiling moved because the room did, not because the rule was
 * wrong.
 *
 * The third clamped line is close to free for the same reason: a row
 * with three stacked names is already three lines tall, so the summary
 * grows into height the row had already taken rather than adding any.
 * The clamp stays - `ai.why` is a keyword line and the real detail
 * arrives from the server on hover, see the popover rules below.
 *
 * THE CLAMP MOVED OFF THE CELL ON 16/08, AND ONLY THE CLAMP MOVED. The
 * numbers are the same; what changed is which element carries them.
 * -webkit-line-clamp needs display:-webkit-box, and on a <td> that
 * REPLACES display:table-cell - the cell stops being a cell, loses
 * vertical-align:middle and stacks its content from the top. On a row
 * three or four stacked insider names tall that is plainly visible: the
 * "Plus" padlock, which is a single small element in an otherwise empty
 * cell, floats at the top of the row instead of sitting on its line. So
 * the clamp now lives on .ai-summary-text, an inner span that wraps the
 * summary and nothing else, and the cell keeps only the width and the
 * type. See partials/table_rows.html for why the padlock and the "Not
 * scored yet" note are deliberately NOT wrapped in it. */
.ai-summary-cell, .ai-summary-header {
  max-width: 26rem;
}
.ai-summary-text {
  -webkit-line-clamp: 3;
}

/* THE POPOVER.
 *
 * Deliberately built like .tv-hover-card, down to pointer-events:none,
 * because the failure it prevents is the same one: a panel that opens
 * under the cursor fires mouseout on the cell that opened it, which
 * closes the panel, which returns the cursor to the cell, which opens it
 * again. That flicker loop is miserable to debug and trivial to avoid.
 *
 * The cost here is real and accepted: the "See plans" link inside a
 * sub-Plus excerpt is not clickable in the popover. The same invitation
 * is one padlock away in the same cell, and on /pricing, and the row
 * click leads to a company page that carries it too. A flickering
 * sales pitch converts nobody. */
.ai-pop {
  position: fixed;
  z-index: 9998;
  width: 380px;
  max-height: 420px;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0.85rem 1rem;
  background: var(--bg-elevated, #141412);
  border: 1px solid var(--border, #232220);
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

.ai-pop[hidden] {
  display: none;
}

/* The popover is not the company page and must not pretend to be one.
 * The analysis is set smaller and with a tighter measure than
 * .ai-analysis-text, and the block is clipped at max-height above rather
 * than scrolled - a scrollbar in a pointer-events:none panel is a
 * control nobody can reach. */
.ai-pop-symbol {
  display: block;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted, #8c8a82);
  margin-bottom: 0.4rem;
}

.ai-pop-summary {
  margin: 0 0 0.5rem;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--fg, #f2f0ea);
}

.ai-pop-text {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--fg, #f2f0ea);
  white-space: pre-line;
}

/* The sub-Plus branch reuses .signal-excerpt from signal.css unchanged -
 * the same block the company page shows, so the sample a visitor meets
 * on hover and the sample they meet on the page are literally the same
 * component. These two only fit it into a narrower box. */
.ai-pop .signal-excerpt {
  margin: 0;
  max-width: none;
}

.ai-pop .chart-note {
  margin-top: 0.5rem;
}

/* No hover on a touch device, exactly as the hover chart decided on
 * 08/08 and for the same reasons: a finger has no hover state, and the
 * destination one tap away (the company page, via the row click) carries
 * the whole analysis rather than a preview of it. ai-summary.js also
 * refuses to show the panel there; this makes a stale panel unrenderable
 * if the device mode changes mid-session. */
@media (hover: none), (pointer: coarse) {
  .ai-pop {
    display: none !important;
  }
}