body.record-page .record-wrap{max-width:1100px;margin:0 auto;padding:40px 16px;}
body.record-page .record-panel{border:1px solid rgba(255,255,255,.12);border-radius:18px;overflow:hidden;background:rgba(255,255,255,.02);}
body.record-page .record-top{display:grid;grid-template-columns:360px 1fr;gap:18px;padding:18px;}
@media (max-width: 900px){body.record-page .record-top{grid-template-columns:1fr;}}
body.record-page .coverCard{border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(255,255,255,.04);padding:14px;display:grid;gap:12px;}
body.record-page .coverFrame{width:100%;aspect-ratio:1/1;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03);}
body.record-page .coverFrame img{width:100%;height:100%;object-fit:cover;display:block;}
body.record-page .btnRow{display:flex;gap:10px;flex-wrap:wrap;}
body.record-page .btnRow a{display:inline-block;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:rgba(255,255,255,.78);font-weight:600;text-decoration:none;}
body.record-page .btnRow a:hover{text-decoration:none;filter:brightness(1.05);}
body.record-page .details{border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(255,255,255,.04);padding:14px;display:grid;gap:12px;align-content:start;}
body.record-page .titleLine{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;}
body.record-page .albumTitle{font-size:20px;font-weight:750;}
body.record-page .albumSub{color:rgba(255,255,255,.65);font-size:13px;}
body.record-page .meta{display:flex;flex-wrap:wrap;gap:8px;}
body.record-page .pill{border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.22);padding:6px 10px;border-radius:999px;font-size:12px;color:rgba(255,255,255,.65);}
body.record-page .section{margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.10);}
body.record-page .section h3{margin:0 0 8px 0;font-size:14px;font-weight:700;}
body.record-page .section p, body.record-page .section li{font-size:13px;color:rgba(255,255,255,.75);line-height:1.55;}
body.record-page .historyBox{
	border:1px solid rgba(255,255,255,.40);
	background:#DEDEDE;
	border-radius:14px;
	padding:12px;
	min-height:120px;
	color:#000;
	font-size:13px;
	}
body.record-page .tableWrap{border-top:1px solid rgba(255,255,255,.12);padding:14px 18px 18px;overflow:auto;}
body.record-page table{width:100%;border-collapse:collapse;min-width:560px;}
body.record-page th, body.record-page td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left;vertical-align:top;font-size:13px;}
body.record-page th{color:rgba(255,255,255,.65);font-weight:700;width:210px;}
body.record-page td{color:rgba(255,255,255,.85);}
body.record-page .trackline{display:flex;gap:0;line-height:1.45;}
body.record-page .trackline .pos{min-width:34px;color:rgba(255,255,255,.9);}
body.record-page .trackline .sep{opacity:.7;padding:0 6px;}
body.record-page .trackline .dur{opacity:.8;margin-left:8px;}

body.record-page .historyBox{
  border:1px solid rgba(0,0,0,.25);
  background:#DEDEDE;
  border-radius:14px;
  padding:12px;
  min-height:120px;
  color:#000;
  font-size:13px;
}

/* Force text inside the history box to be dark */
body.record-page .historyBox p,
body.record-page .historyBox li,
body.record-page .historyBox em,
body.record-page .historyBox strong{
  color:#000;
}

/* Light table styling for record pages */
body.record-page .tableWrap{
  background:#F0F0F0;
}

/* Force table text to dark */
body.record-page .tableWrap th,
body.record-page .tableWrap td{
  color:#000;
}

/* Optional: soften headers a bit */
body.record-page .tableWrap th{
  color:#222;
  font-weight:700;
}

/* Tracklist text for light background */
body.record-page .trackline .pos,
body.record-page .trackline .sep,
body.record-page .trackline .title,
body.record-page .trackline .dur{
  color:#000;
}

body.record-page .trackline .pos{
  color:#000;
  font-weight:600;
}
body.record-page .trackline .sep{
  color:#444;
}
body.record-page .trackline .dur{
  color:#555;
}

/* FIX: Track position visibility */
.trackline .pos {
  min-width: 34px;
  color: var(--text);
  opacity: 0.85;
}

/* FIX: Album-page links */
.details a,
.album-history a,
.meta a {
  color: var(--text);
  text-decoration: underline;
}

.details a:hover,
.album-history a:hover,
.meta a:hover {
  color: var(--accent);
}

/* Buttons/links: readable on light backgrounds */
body.record-page .btnRow a{
  background:#E6E6E6;
  border:1px solid rgba(0,0,0,.25);
  color:#000;
}

body.record-page .btnRow a:hover{
  filter:none;
  background:#DCDCDC;
}

/* Make title/artist readable on light background */
body.record-page .details{
  color:#000;
}

body.record-page .albumTitle,
body.record-page .albumSub{
  color:#000 !important;
}

/* Improve spacing for lists inside history / trivia boxes */
body.record-page .historyBox ul{
  padding-left: 18px;   /* space from left border */
  margin: 8px 0 0 0;    /* space from text above */
}

body.record-page .historyBox li{
  margin-bottom: 6px;   /* vertical breathing room */
}

/* ===============================
   Trivia box – light paper style
   =============================== */

body.record-page .triviaBox{
  margin-top:10px;
  padding:12px 14px;
  border-radius:14px;
  background:#EFEFEF;
  border:1px solid rgba(0,0,0,.25);
  color:#000;
  font-size:13px;
  line-height:1.55;
}

/* Force text color inside */
body.record-page .triviaBox,
body.record-page .triviaBox p,
body.record-page .triviaBox li,
body.record-page .triviaBox strong,
body.record-page .triviaBox em{
  color:#000;
}

/* Headings inside trivia */
body.record-page .triviaBox h4,
body.record-page .triviaBox h3{
  margin:0 0 6px 0;
  font-size:13px;
  font-weight:750;
  color:#000;
}

/* Lists */
body.record-page .triviaBox ul{
  margin:6px 0 0 0;
  padding-left:18px;
}
body.record-page .triviaBox li{
  margin-bottom:6px;
}

/* Bullet color */
body.record-page .triviaBox li::marker{
  color:#444;
}

/* Links inside trivia */
body.record-page .triviaBox a{
  color:#000;
  text-decoration:underline;
}
body.record-page .triviaBox a:hover{
  text-decoration:none;
}

/* ---- Album release table: force light style ---- */
body.record-page .tableWrap{
  background:#DEDEDE;
}

body.record-page table{
  background:#DEDEDE;
}

body.record-page th{
  color:#000;
  background:#E6E6E6;
  border-bottom:1px solid rgba(0,0,0,.15);
}

body.record-page td{
  color:#000;
  border-bottom:1px solid rgba(0,0,0,.10);
}

body.record-page tbody tr:nth-child(even){
  background:rgba(0,0,0,.03);
}

body.record-page td a{
  color:#000;
}
body.record-page td a:hover{
  text-decoration:underline;
}

/* ---- iPhone / small screens fixes ---- */
@media (max-width: 600px){

  /* Reduce page padding a bit */
  body.record-page .record-wrap{
    padding: 18px 12px;
  }

  /* Make sure the grid collapses (usually already does, but safe) */
  body.record-page .record-top{
    grid-template-columns: 1fr;
  }

  /* Table: allow it to fit the screen */
  body.record-page table{
    min-width: 0 !important;   /* IMPORTANT: overrides your min-width:560px */
    width: 100%;
  }

  /* Table: allow long content to wrap */
  body.record-page th,
  body.record-page td{
    white-space: normal;
    word-break: break-word;
  }

  /* Narrower label column */
  body.record-page th{
    width: 140px;
  }
}

/* Vinyl ownership indicator */
table tr.owned td:first-child{
  position:relative;
  padding-left:32px;
}

table tr.owned td:first-child::before{
  content:"";
  position:absolute;
  left:8px;
  top:50%;
  transform:translateY(-50%);
  width:18px;
  height:18px;
  background:url("/img/record.png") no-repeat center / contain;
}

/* Smaller icon buttons (Spotify / Pick a Record / Open Discogs) */
body.record-page .btnRow a.icon-link {
  padding: 6px 8px;      /* smaller padding */
  width: 28px;           /* fixed width */
  height: 28px;          /* fixed height */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;       /* smaller text/icon size */
  border-radius: 8px;    /* adapt rounded corners */
}

/* Optional: smaller hover effect */
body.record-page .btnRow a.icon-link:hover {
  filter: brightness(1.1);
}

/* If you’re using actual <img> inside links */
body.record-page .btnRow a.icon-link img {
  width: 18px;
  height: 18px;
}