/* Personnel File: link entries and social icons.
   Each entry is: orange index tab (CSS counter), title, category label picked by button type or href.
   Hover swipes a highlighter across the row. */

.button-entrance { counter-increment: entry; }

.button {
  display: grid; grid-template-columns: 40px 1fr auto; align-items: center; column-gap: 14px;
  min-height: 52px; margin: 0; padding: 0;
  border: 0; border-bottom: 1px solid var(--ink); border-radius: 0;
  color: var(--ink); text-decoration: none; text-align: left; text-transform: uppercase;
  font-family: var(--font-mono); font-weight: 500; font-size: 15px; letter-spacing: .08em;
  background: linear-gradient(transparent 24%, var(--hilite) 24% 78%, transparent 78%) no-repeat 0 0 / 0% 100%;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-size .28s steps(6);
}
.button:hover, .button:focus-visible { background-size: 100% 100%; color: var(--ink); }
.button:focus-visible { outline: 2px solid var(--tab); outline-offset: 2px; }

.button::before {
  content: counter(entry, decimal-leading-zero);
  align-self: stretch; display: grid; place-items: center;
  background: var(--tab); color: var(--on-tab);
  font-family: var(--font-cond); font-weight: 800; font-size: 17px; letter-spacing: 0;
}
.button::after { content: "→"; padding-right: 4px; font-size: 14px; color: var(--faint); }
/* SYNC RATE is flagged live only while last.fm reports a track playing (set by extra/custom-body-end) */
.button.pf-live::after { content: "● LIVE"; font-size: 10.5px; letter-spacing: .16em; color: var(--stamp); animation: pfBlink 1.4s steps(1) infinite; }
@keyframes pfBlink { 50% { opacity: 0; } }

/* Two-line entries: title, then where it leads. extra/custom-body-end wraps the link text in .pf-text */
.button { min-height: 60px; }
.pf-text { display: grid; gap: 3px; padding: 9px 0; min-width: 0; }
.pf-title { font-size: 15px; letter-spacing: .08em; }
.pf-addr { font-size: 11px; font-weight: 400; letter-spacing: .03em; text-transform: none; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-addr.pf-np { color: var(--ink); }
.button.pf-live .pf-addr.pf-np::before { content: "▶ "; color: var(--stamp); }

/* Section headings: LinkStack's own Heading blocks, drawn as sub-sections of the file */
.column > .fadein > h2 {
  display: flex; align-items: center; gap: 10px;
  margin: 24px 0 0; padding-bottom: 6px;
  font-family: var(--font-cond); font-weight: 700; font-size: 13px; letter-spacing: .2em; text-align: left;
  color: var(--ink);
}
.column > .fadein > h2::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--tab); }
.column > .fadein > h2::after { content: ""; flex: 1; border-top: 1px dashed var(--faint); }
.social-icon-div + .fadein > h2 { margin-top: 14px; }

/* Brand icons are left out of this look */
.button .icon, .icon { display: none; }

/* Social icon row (button type "icon") */
.social-icon-div a { display: inline-block; margin: 0 2px; }
.social-icon { padding: 4px; font-size: 18px; color: var(--ink); }
.social-icon-div a:hover .social-icon { color: var(--tab); }