/* ============================================================================
   top-creators.css
   ----------------------------------------------------------------------------
   Top Creators: the original right column's "Leading Universities" panel, with
   agents ranked by totalRecalls in place of schools ranked by founder count.

   The card and its head are transcribed from _reference/ycglobe-index.html or
   expressed through the token tokens.css transcribed it into, with provenance
   noted per block as (orig CSS Lnn).

   The ROW is respaced to match the activity feed's new breathing room
   (docs/briefs/panels-spacing.md): ~56px tall, a larger rank numeral, a 32px
   avatar, the agent URI in mono at 14px, the count right-aligned and bold, and
   a 6px bar with a clear gap under it. The original's 12px line, 22px avatar
   and 5px bar were a denser table; the frame they sat in is untouched.

   The 56px: 7px + 42.4px of content + 7px, where the content is the 14px line
   (18.9), the bar and its 4px gap (10), and the reserved hover line (13.5).
   The 12px gutter is split 6px on the body and 6px on the row, so the hover
   wash floats inside the panel edge instead of running into it.

   Load order: tokens.css, then this file.

   The root carries `panel tc-panel` for the same reason the activity bar does:
   `.panel` is what the real page already styles, and `.tc-panel` restates the
   identical values so the module also stands up on its own.
   ========================================================================== */

/* -- the card (orig CSS L207-209, .panel) - frame, unchanged --------------- */

.tc-panel{
  position:relative;
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--paper-66);
  -webkit-backdrop-filter:var(--blur-panel); backdrop-filter:var(--blur-panel);
  border:1px solid var(--brand-20);
  border-radius:var(--r-16);
  box-shadow:var(--sh-4-panel);
  color:var(--ink);
  font-family:var(--font-body);
}

/* -- head (orig CSS L210-212) - frame, unchanged --------------------------- */

.tc-panel .panel-head{
  display:flex; align-items:center; gap:var(--gap-row);
  padding:11px 13px 9px;
  user-select:none; flex:0 0 auto; cursor:default;
}
.tc-panel .ph-title{
  font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:var(--fs-lg-p);
}
.tc-panel .ph-sub{ font-size:var(--fs-base); color:var(--graphite); }
.tc-panel .ph-sub b{ color:var(--ink); }

/* -- body + list (orig CSS L229 .panel-body; L266 .uni-list) --------------
   As in the activity bar, the body's side padding moves onto the row so the
   row's hover wash and its gutter are one thing rather than two nested insets.
   The list gap is the "clear gap to the next row" the brief asked for: 6px on
   top of the row's own 7px of padding, which with the reserved hover line
   between them puts ~26px of air under a bar before the next row starts. */

.tc-panel .panel-body{
  flex:1 1 auto; overflow:hidden; padding:0 var(--sp-5) var(--sp-11); min-height:0;
}
.tc-list{
  display:flex; flex-direction:column; gap:var(--sp-5);
  height:100%; overflow-y:auto;
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain;   /* orig L244 */
}
.tc-empty{
  font-size:var(--fs-md-p); color:var(--graphite);
  padding:var(--sp-7);
  line-height:var(--lh-relaxed);
}

/* -- one ranked row (orig CSS L267-272, .uni-row and friends) --------------
   .uni-row is a div with a click handler in the original; this is a <button>
   so it is reachable by keyboard, with the button chrome reset away. */

.tc-row{
  /* flex-start, not center: the row reserves a hover line under the bar, and
     centring on it would drop the rank and the avatar half a line below the
     name they belong to. The rank carries the URI's line-height so the two
     baselines land together, and the 32px avatar closes on the bar. */
  display:flex; align-items:flex-start; gap:var(--sp-9);
  cursor:pointer; padding:var(--sp-6) var(--sp-5); border-radius:var(--r-8);
  border:none; background:none; margin:0;
  font:inherit; color:inherit; text-align:left; width:100%;
  flex:0 0 auto;
}
.tc-row:hover{ background:var(--tc-row-hover); }
.tc-row:focus-visible{ outline:2px solid var(--brand-55); outline-offset:-1px; }

/* The rank is the row's index in a ranking, so it is allowed to read as one:
   14px bold mono in a fixed 20px column, tabular so 1 and 8 sit on the same
   axis. It was 11px, which disappeared next to the URI. */
.tc-rank{
  width:20px; text-align:center;
  font:var(--fw-bold) var(--fs-xl)/1.35 var(--font-mono-short);
  color:var(--graphite); flex:0 0 auto;
  font-variant-numeric:tabular-nums;
}
.tc-av{
  width:32px; height:32px; border-radius:var(--r-9); overflow:hidden;
  flex:0 0 auto; display:block; background:var(--img-placeholder);
  border:1px solid var(--border);
}
.tc-av svg{ display:block; width:100%; height:100%; }

.tc-i{ flex:1; min-width:0; }

.tc-r1{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-7);
  font-size:var(--fs-xl); line-height:1.35;
}
.tc-nm{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  /* The original's .nm carries school names in the body face. This slot holds
     an agent URI, and every id on this page is monospace - .ct, .influ-f and
     .influ-rank all are - so the URI is too. The only type change in the file. */
  font-family:var(--font-mono-short);
}
.tc-ct{
  font:var(--fw-bold) var(--fs-lg)/1.35 var(--font-mono);
  color:var(--ink); flex:0 0 auto;
  font-variant-numeric:tabular-nums;
}
.tc-bar{
  display:block;   /* the original's .uni-bar is a div; this one is a span, and
                      an inline box would drop both the width and the height */
  height:6px; border-radius:var(--r-3); background:var(--brand);
  margin-top:var(--sp-3); opacity:var(--tc-bar-opacity);
}

/* -- the hover detail -----------------------------------------------------
   memoriesCreated - successRate. The original reveals its hover detail by
   animating max-height (.est-x, orig CSS L114-115), which is fine on a floating
   tile because nothing sits beneath it. In a ranked list it would shove every
   row below it down, so the line's space is reserved and only its opacity
   moves: nothing reflows, the ranking never jumps, and the transition duration
   and easing are the ones .est-x already used. */

.tc-meta{
  display:block; margin-top:var(--sp-1);
  font-size:var(--fs-sm); line-height:1.15; color:var(--graphite);
  font-family:var(--font-mono-short);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  opacity:0; transition:opacity var(--dur-320) var(--ease);
}
.tc-row:hover .tc-meta,
.tc-row:focus-visible .tc-meta{ opacity:1; }

@media (prefers-reduced-motion:reduce){
  .tc-meta{ transition:none; }
}

/* -- dark ─────────────────────────────────────────────────────────────────
   tokens-dark.css re-points every colour token above, so the panel, the rank,
   the URI and the count all theme themselves. Two declarations in this file are
   not colours, and those are the two that do not survive the swap:

     .tc-row:hover  a 12%-of-brand wash over TRANSPARENT. Over paper that is a
                    warm tint; over charcoal it is very nearly the ground it
                    sits on, so the row stops answering the pointer. Dark takes
                    the opaque --brand-08 instead of a transparency.
     .tc-bar        opacity .85 on a light ground reads as "brand, softened".
                    On dark, dimming pushes the bar toward the panel it sits on
                    and the ranking loses its strongest non-text cue, so the bar
                    goes fully opaque and carries its length alone.

   Both are custom properties whose defaults are the light values, so light is
   byte-identical with or without tokens-dark.css loaded. */

.tc-panel{
  --tc-row-hover:color-mix(in srgb, var(--brand) 12%, transparent);
  --tc-bar-opacity:0.85;
}
[data-theme="dark"] .tc-panel{
  --tc-row-hover:var(--brand-08);
  --tc-bar-opacity:1;
}

/* The page carries this for its own panels; the module carries it for itself so
   the demo and any other host get it too. */
@media (prefers-reduced-transparency: reduce){
  [data-theme="dark"] .tc-panel{
    background:var(--surface); -webkit-backdrop-filter:none; backdrop-filter:none; }
}

/* -- phone (orig CSS L665, the .uni-row mobile block) ----------------------
   The same row at a smaller scale: 5px padding, a 28px avatar, a 12px URI, the
   bar still 6px because a thinner one stops reading as a bar. 50px. */

@media (max-width:768px){
  .tc-panel{
    -webkit-backdrop-filter:var(--blur-md); backdrop-filter:var(--blur-md);   /* orig L688 */
  }
  .tc-panel .panel-head{ padding:8px 9px 4px; }
  .tc-panel .ph-title{ font-size:var(--fs-md-p); }
  .tc-panel .panel-body{ padding:0 var(--sp-3) var(--sp-8); }
  .tc-list{ gap:var(--sp-4); }
  .tc-row{ padding:var(--sp-4) var(--sp-4); gap:var(--sp-7); }
  .tc-rank{ width:16px; font-size:var(--fs-md-p); }
  .tc-av{ width:28px; height:28px; border-radius:var(--r-8); }
  .tc-r1{ font-size:var(--fs-base); }
  .tc-ct{ font-size:var(--fs-md-p); }
  .tc-bar{ margin-top:var(--sp-3); }
  .tc-meta{ font-size:var(--fs-sm); }
}