/* The Trendline (football) — share-card UI. Dark theme only (the sites are dark-only).
   Pairs with share.js (window.TLShare). Uses the custom properties from site.css;
   the fallbacks let players.html (hand-written, own :root) use it unchanged. */

/* the "Share ↗" ghost pill at the right of a .sec-head — same recipe as trendline.hockey */
.shr-btn { margin-left: auto; align-self: center; flex: none; background: none; color: var(--gold, #d8b365); border: 1px solid var(--line, #232a52);
  border-radius: 999px; padding: .3rem .85rem; cursor: pointer; font-family: var(--font-ui, 'Barlow Condensed', sans-serif); letter-spacing: .06em;
  text-transform: uppercase; font-size: .74rem; line-height: 1.2; white-space: nowrap; transition: border-color .15s, color .15s; }
.shr-btn:hover, .shr-btn:focus-visible { border-color: var(--gold, #d8b365); color: var(--ice, #f2efe6); text-decoration: none; outline: none; }
.sec-head .asof + .shr-btn { margin-left: .8rem; }   /* the as-of stamp already carries margin-left:auto */
@media (max-width: 560px) { .shr-btn { font-size: .68rem; padding: .25rem .65rem; } }

/* ----- modal ----- */
body.shr-open { overflow: hidden; }
.shr-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem;
  font-family: var(--font-ui, 'Barlow Condensed', sans-serif); }
.shr-modal[hidden] { display: none; }
.shr-backdrop { position: absolute; inset: 0; background: rgba(4,6,14,.78); backdrop-filter: blur(6px); }
.shr-dialog { position: relative; width: min(760px, 100%); max-height: calc(100vh - 2rem); overflow: auto;
  background: linear-gradient(165deg, var(--panel-2, #141936), var(--panel, #10142a)); border: 1px solid var(--line, #232a52);
  border-radius: var(--radius, 14px); box-shadow: 0 30px 80px rgba(0,0,0,.6); padding: 1.1rem 1.3rem 1.2rem; color: var(--ice, #f2efe6); }
.shr-head { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: .9rem; }
.shr-kicker { display: block; font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold, #d8b365); font-weight: 600; }
.shr-head h3 { font-family: var(--font-display, 'Anton', sans-serif); font-weight: 400; text-transform: uppercase; letter-spacing: .03em;
  font-size: clamp(1.2rem, 3vw, 1.7rem); line-height: 1.1; margin-top: .15rem; }
.shr-close { margin-left: auto; flex: none; background: transparent; color: var(--muted, #7b81a0); border: 1px solid var(--line, #232a52);
  border-radius: 999px; width: 2.1rem; height: 2.1rem; cursor: pointer; font-size: 1rem; line-height: 1; }
.shr-close:hover { color: var(--ice, #f2efe6); border-color: var(--gold, #d8b365); }

/* preview: the card scaled to the dialog width, letterboxed on the ink */
.shr-preview { position: relative; background: var(--ink, #0a0d18); border: 1px solid var(--line, #232a52); border-radius: 10px; overflow: hidden; min-height: 160px; }
.shr-preview img { display: block; width: 100%; height: auto; max-height: 62vh; object-fit: contain; }
.shr-preview img:not([src]) { display: none; }
.shr-busy { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted, #7b81a0);
  font-family: var(--font-mono, 'IBM Plex Mono', monospace); font-size: .8rem; letter-spacing: .05em; background: rgba(10,13,24,.6); }
.shr-busy[hidden] { display: none; }

/* size toggle — same look as .toggle-row */
.shr-row { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: .9rem; }
.shr-sizes { display: flex; gap: .5rem; flex-wrap: wrap; }
.shr-sizes button { letter-spacing: .1em; text-transform: uppercase; font-size: .78rem; background: transparent; color: var(--ice-dim, #b9bdce);
  border: 1px solid var(--line, #232a52); border-radius: 999px; padding: .32rem .8rem; cursor: pointer; font-family: inherit; }
.shr-sizes button:hover { border-color: var(--rouge, #af1e2d); color: var(--ice, #f2efe6); }
.shr-sizes button.on { background: var(--rouge, #af1e2d); border-color: var(--rouge, #af1e2d); color: #fff; }

/* actions */
.shr-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .9rem; }
.shr-actions button { font-family: inherit; text-transform: uppercase; letter-spacing: .12em; font-size: .88rem; border: 1px solid var(--line, #232a52);
  border-radius: 8px; padding: .65rem 1.2rem; cursor: pointer; background: transparent; color: var(--ice, #f2efe6); transition: transform .15s; }
.shr-actions button:hover:not(:disabled) { transform: translateY(-2px); }
.shr-actions button:disabled { opacity: .8; cursor: default; }
.shr-actions .shr-primary { background: var(--rouge, #af1e2d); border-color: var(--rouge, #af1e2d); color: #fff; box-shadow: 0 8px 26px rgba(175,30,45,.4); }
.shr-actions button[hidden] { display: none; }

/* share-the-link line */
.shr-link { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line, #232a52); }
.shr-lbl { font-size: .72rem; letter-spacing: .25em; text-transform: uppercase; color: var(--gold, #d8b365); font-weight: 600; flex: none; }
.shr-link code { flex: 1 1 12rem; min-width: 0; font-family: var(--font-mono, 'IBM Plex Mono', monospace); font-size: .76rem; color: var(--ice-dim, #b9bdce);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shr-link button { font-family: inherit; text-transform: uppercase; letter-spacing: .1em; font-size: .74rem; background: transparent; color: var(--gold, #d8b365);
  border: 1px solid var(--line, #232a52); border-radius: 999px; padding: .3rem .8rem; cursor: pointer; flex: none; }
.shr-link button:hover:not(:disabled) { border-color: var(--gold, #d8b365); color: var(--ice, #f2efe6); }
.shr-note { margin-top: .8rem; font-family: var(--font-mono, 'IBM Plex Mono', monospace); font-size: .7rem; color: var(--muted, #7b81a0); letter-spacing: .02em; }

@media (max-width: 560px) {
  .shr-modal { padding: .5rem; align-items: flex-end; }
  .shr-dialog { padding: .9rem 1rem 1rem; max-height: calc(100vh - 1rem); }
  .shr-actions button { flex: 1 1 auto; text-align: center; }
}