/*
 * Shared table cell primitives for the console tables (admin.html, profile.html).
 *
 * These rules used to live inline in admin.html only, which is why Profile kept
 * printing whole 100-character image references while Admin showed short names.
 * They are one file now so the two pages cannot drift again.
 *
 * Pair with static/table_cells.js (window.TableCells).
 */

/* No table may widen the page. A table sized by its content (table-layout:auto)
   overflows its container when the columns' minimum widths do not fit, and
   without this the overflow escapes to the document and the right-hand columns
   end up outside the window with nothing to scroll. Confining it here means the
   worst case is a scrollbar on the table itself. Tables that pass antd's
   `scroll` prop already set overflow inline, so this changes nothing for them. */
.ant-table-wrapper { max-width: 100%; }
.ant-table-content { overflow-x: auto; }

/* A column asks for the width its content needs and no more: width:1% plus
   nowrap is the shrink-to-fit idiom, which frees width for the values that
   actually need it. */
.col-tight { white-space: nowrap; }
.cell-chip { white-space: nowrap; }
.table-code { display: block; max-width: 100%; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }

/* .table-code and .cell-ref ask for one line with an ellipsis, but antd puts the
   text in an inner <code>; without these the page's generic <code> wrapping wins
   and a 100-character image ref grows the row to five lines. */
.ant-table-cell .table-code code,
.ant-table-cell .cell-ref code,
.ant-table-cell .cell-ref-face code { white-space: nowrap; word-break: normal; }

/* Last resort when even the reclaimed width is not enough: wrap to a few lines
   rather than clip, because the full value is also in the hover card. */
.cell-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; white-space: normal; overflow-wrap: anywhere; }
.cell-clamp-2 { -webkit-line-clamp: 2; }
.ant-table-cell .cell-clamp code { white-space: normal; overflow-wrap: anywhere; word-break: normal; }

/* A wide value (image ref, repo URL, email) shows only its distinguishing tail;
   the full string stays one click away instead of widening the column. */
.cell-ref { min-width: 0; max-width: 100%; }
/* The reference's short form is never clipped: it is the thing being read. */
.cell-ref-face { white-space: nowrap; }
/* ...unless even the short form does not fit, in which case two lines beat a clip.
   Must come after the nowrap rules above; same specificity, later wins.

   The width has to be definite. Once the text may wrap, the cell's minimum content
   width is a single token, and auto layout happily shrinks the column to that and
   clips the name the column exists to show. Pages override the width per column. */
.cell-ref-face-wrap { display: block; width: 210px; white-space: normal; }
.ant-table-cell .cell-ref-face-wrap code,
.cell-ref-face-wrap .cell-ref-text {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; white-space: normal; word-break: break-all; }
.cell-ref .ant-typography { display: flex; align-items: center; gap: 6px; min-width: 0;
  max-width: 100%; margin-bottom: 0; }
.cell-ref .ant-typography > code,
.cell-ref .cell-ref-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* refSplitCell: the ellipsis belongs in FRONT of the value, because the head is the run
   every row repeats and the tail is what tells rows apart. A box laid out right-to-left
   overflows past its left edge, so that is where the browser paints the ellipsis, and the
   value keeps its own left-to-right order inside an isolated span -- without the isolation
   a trailing slash or colon would be moved to the wrong end of the line.
   The value stays one text node so triple-click still selects all of it; a two-box
   head/tail layout was tried first and broke exactly that. */
.cell-ref-split-line .ant-typography > code { direction: rtl; text-align: left; }
.cell-ref-line { unicode-bidi: isolate; }
.cell-ref .ant-typography-copy { flex: 0 0 auto; opacity: 0; transition: opacity .15s ease; }
.cell-ref:hover .ant-typography-copy,
.cell-ref:focus-within .ant-typography-copy { opacity: 1; }

.ref-card { max-width: 440px; }
.ref-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ref-card-label { color: var(--text-muted); font-size: 12px; }
.ref-card-copy.ant-typography { margin-bottom: 0; line-height: 1; }
.ref-card-code { display: block; white-space: normal; overflow-wrap: anywhere;
  font-size: 12px; line-height: 1.55; }
.ref-card-gap { height: 10px; }

/* Two facts stacked in one cell (title + slug, repo + notebook path). */
.cell-stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cell-stack > * { min-width: 0; }
.cell-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-sub { color: var(--text-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Like .cell-stack but for chips: align-items keeps a Tag at its own width
   instead of stretching it across the column. */
.cell-lines { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.cell-lines > * { max-width: 100%; }
.cell-line-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* Row actions collapse into one ⋯ menu. Four labelled buttons per row turned the
   table into a wall of verbs and, once capped to fit the column, printed their
   labels outside their own borders.

   The trigger is always rendered — not revealed on hover. Hover-only actions are
   invisible on touch, unannounced to a screen reader, and leave the cell looking
   empty; a real button is reachable by Tab and opens on Enter, which is the
   keyboard path the previous opacity-only hiding existed to preserve. */
.col-row-actions { position: relative; }
.row-actions-host { min-width: 0; display: flex; justify-content: flex-end; }
.row-actions-trigger { color: var(--text-subtle); letter-spacing: 0.1em; line-height: 1; }
.row-actions-trigger:hover, .row-actions-trigger:focus-visible { color: var(--text); }