/* ---------------------------------------------------------------------------
   League → Records and Hall of Fame (src/records_view.js), in the room:
   gala night.

   A window to choose the book (Record book · Your club · Hall of Fame), then
   the book as windows: Club records and Player records hold one board tile
   per category (an ink strip with the category in gold — red when the mark
   was set this season — then five rows, the holder's face on the first).
   The Hall of Fame is a gold window with the count, then a window per class.

   House rules: solid colour only, 3px ink frames, Jersey 15 for the numbers
   and the names on the wall, Rubik 700+ for everything read, no emoji, no
   stripes down a side.
--------------------------------------------------------------------------- */

/* --- the bar -------------------------------------------------------------- */
.rc-top .rm-tabs, .rc-win .rc-seg { margin: 0; }
.rc-win .rc-seg { margin-bottom: 10px; }

/* --- a board tile ------------------------------------------------------------ */
.rc-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 12px;
}
.rc-card { min-width: 0; margin: 3px; background: var(--card); box-shadow: var(--frame); color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.rc-h {
  display: flex; align-items: center; gap: 8px; min-height: 34px;
  padding: 5px 10px 4px; background: var(--ink); border-bottom: 3px solid var(--ink);
}
.rc-h h4 {
  flex: 1; min-width: 0; margin: 0; color: var(--gold);
  font: 400 22px/1 var(--disp); letter-spacing: .6px; text-transform: uppercase;
  overflow-wrap: break-word;
}
.rc-card.hot .rc-h { background: var(--red); }
.rc-card.hot .rc-h h4 { color: #fff; text-shadow: 2px 2px 0 var(--ink); }

.rc-list { margin: 0; padding: 0; list-style: none; }
.rc-list li {
  display: grid; grid-template-columns: 20px auto minmax(0, 1fr) 36px 72px;
  align-items: center; gap: 4px 8px; padding: 6px 10px;
  border-top: 2px solid var(--card-line); font-family: var(--sans);
}
.rc-list li:first-child { border-top: 0; }
.rc-list li:nth-child(even) { background: var(--card); color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.rc-list li:not(.top) { grid-template-columns: 20px minmax(0, 1fr) 36px 72px; }
.rc-list.team li, .rc-list.team li.top { grid-template-columns: 20px 36px minmax(0, 1fr) 72px; }
.rc-list li.top { padding: 8px 10px; background: var(--card-hov); color: var(--card-ink); }
.rc-list li.mine { background: var(--tm); color: var(--on-tm); }
.rc-list li.mine .plink, .rc-list li.mine small, .rc-list li.mine .yr, .rc-list li.mine .rc-who b { color: var(--on-tm); }
.rc-list .rc-rk { text-align: center; font: 400 21px/1 var(--disp); color: var(--soft); }
.rc-list li.top .rc-rk { color: var(--card-ink); font-size: 25px; }
.rc-list li.mine .rc-rk { color: var(--on-tm); }
.rc-list .rm-fc { margin: 1px 2px; }
.rc-list .rc-who { min-width: 0; overflow: hidden; display: flex; flex-direction: column; gap: 2px; }
.rc-list .rc-who b, .rc-list .rc-who .plink {
  font: 800 13.5px/1.2 var(--sans); text-decoration: none; color: inherit;
  overflow-wrap: break-word;
}
.rc-list .rc-who .plink:hover { color: inherit; text-decoration: underline; }
.rc-list .rc-who small { font: 900 10px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.rc-list .v { text-align: right; font-size: 28px; line-height: 1; }
.rc-list li.top .v { font-size: 36px; color: var(--card-ink); }
.rc-list li.top.mine .v { color: var(--on-tm); }
.rc-list .yr {
  grid-column: 1 / -1; text-align: right; margin-top: -2px;
  font: 900 10px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--soft);
}
/* a crest on white, 32px */
.rc-crest { display: grid; place-items: center; width: 34px; height: 34px; margin: 1px; background: #fff; box-shadow: var(--frame-2); flex: none; }
.rc-logo { width: 32px; height: 32px; object-fit: contain; display: block; }
.rc-none { margin: 3px; padding: 14px 12px; font: 800 12.5px var(--sans); color: var(--soft); }
.rc-none.big { padding: 18px 14px; font-size: 14px; }
.rc-foot {
  padding: 6px 10px 5px; background: var(--gold); color: var(--ink); border-top: 3px solid var(--ink);
  font: 900 10.5px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase;
}

/* --- your club: closing in ---------------------------------------------------- */
.rc-chase-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px; }
.rc-chase-c {
  display: flex; gap: 12px; align-items: center; margin: 3px; padding: 10px 12px;
  background: var(--card); box-shadow: var(--frame); color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink);
}
.rc-chase-c > div { min-width: 0; flex: 1; }
.rc-chase-c b, .rc-chase-c .plink { display: block; font: 400 24px/1 var(--disp); letter-spacing: .5px; text-transform: uppercase; color: var(--card-ink); text-decoration: none; }
.rc-chase-c span:not(.rm-bar) { display: block; margin: 4px 0 8px; font: 800 12px/1.35 var(--sans); color: inherit; }
.rc-prog { flex: none; }

/* --- the hall -------------------------------------------------------------------- */
.rc-hof-head { display: flex; align-items: center; gap: 16px; }
.rc-hof-big {
  display: grid; place-items: center; min-width: 84px; height: 84px; padding: 0 10px;
  background: var(--ink); color: var(--gold); box-shadow: var(--frame); margin: 3px;
  font-size: 64px; line-height: 1;
}
.rc-hof-head b { display: block; font: 400 28px/1 var(--disp); letter-spacing: .5px; text-transform: uppercase; }
.rc-hof-head span { display: block; margin-top: 5px; font: 800 13px/1.4 var(--sans); color: var(--soft); }
.rc-hof-head + .rc-none { margin-top: 14px; }

.rc-hof-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 12px; }
.rc-hof { margin: 3px; background: var(--card); box-shadow: var(--frame); overflow: hidden; color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.rc-hof-top { display: flex; gap: 12px; align-items: center; padding: 10px 12px; background: var(--ink); border-bottom: 3px solid var(--gold); }
.rc-hof-id { min-width: 0; }
.rc-hof-nm { font-size: 34px; color: var(--gold); text-transform: uppercase; word-break: break-word; }
.rc-hof-meta {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px;
  font: 900 11px var(--sans); letter-spacing: .04em; text-transform: uppercase; color: #fff;
}
.rc-hof-line { padding: 11px 13px 8px; font: 800 13px/1.45 var(--sans); color: inherit; }
.rc-hof-tags { display: flex; gap: 4px; flex-wrap: wrap; padding: 0 10px 12px; }

/* --- the ballot ------------------------------------------------------------------- */
.rc-in, .rc-out { margin: 3px; background: var(--card); box-shadow: var(--frame); color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.rc-in { margin-bottom: 12px; }
.rc-in-r, .rc-out-r {
  display: flex; align-items: center; gap: 6px 12px; padding: 8px 12px;
  border-top: 2px solid var(--card-line); flex-wrap: wrap;
}
.rc-in-r:first-child, .rc-out-r:first-child { border-top: 0; }
.rc-out-r:nth-child(even), .rc-in-r:nth-child(even) { background: var(--card); color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.rc-in-r b, .rc-out-r b, .rc-in-r .plink, .rc-out-r .plink {
  font: 800 14px var(--sans); color: inherit; text-decoration: none;
}
.rc-in-r .plink:hover, .rc-out-r .plink:hover { color: inherit; text-decoration: underline; }
.rc-in-r span, .rc-out-r span { font: 800 11.5px var(--sans); color: var(--soft); }
.rc-verd {
  margin: 2px 2px 2px auto; padding: 4px 8px 3px; background: var(--violet); box-shadow: var(--frame-2);
  font: 900 10.5px/1 var(--sans) !important; letter-spacing: .08em; text-transform: uppercase; color: #fff !important;
}
.rc-verd.in { background: var(--green); }

/* --- retired numbers ---------------------------------------------------------------- */
.rc-nums { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 10px; }
.rc-num {
  display: flex; align-items: center; gap: 12px; margin: 3px; padding: 8px 12px;
  background: var(--card); box-shadow: var(--frame); color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink);
}
.rc-num .n {
  min-width: 56px; padding: 6px 8px 3px; text-align: center;
  background: var(--ink); color: var(--gold); box-shadow: var(--frame-2); font-size: 36px;
}
.rc-num .w { min-width: 0; }
.rc-num b { display: block; font: 800 14px var(--sans); color: inherit; }
.rc-num small { display: block; margin-top: 2px; font: 900 10px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }

/* --- a phone ------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .rc-list li, .rc-list li.top { grid-template-columns: 20px auto minmax(0, 1fr) 36px 64px; gap: 4px 6px; padding: 6px 8px; }
  .rc-list li:not(.top) { grid-template-columns: 20px minmax(0, 1fr) 36px 64px; }
  .rc-list.team li, .rc-list.team li.top { grid-template-columns: 20px 36px minmax(0, 1fr) 64px; }
  .rc-list li.top .v { font-size: 30px; }
  .rc-list .v { font-size: 24px; }
  .rc-hof-nm { font-size: 28px; }
  .rc-hof-big { min-width: 64px; height: 64px; font-size: 46px; }
  .rc-hof-head b { font-size: 22px; }
  /* a hall face on a phone: halved exactly, 96 to 48 */
  .rc-hof-top .rm-fc.s96 { width: 48px; height: 48px; }
  .rc-verd { margin-left: 0; }
}

/* --- the Database pages (db_ref.js injects its own sheet; these win over it
   with the #app id and only change colour): the entries' effect rows and the
   reference notes are white cards with ink words ------------------------------ */
#app .dbr-fx, #app .cdb-base { background: var(--card); color: var(--card-ink); --soft: var(--card-ink); }
#app .cdb-base b { color: var(--card-ink); }
#app .dbr-list td.nm a { color: inherit; }
#app .dbr-list td.nm a:hover { color: inherit; text-decoration: underline; }
#app .db-tt tbody tr.hov:hover .db-nm b { color: var(--card-ink); }