/* HempRoster components. Values come from tokens.css; class names mirror site/src/styles/global.css and PlayerCard.astro.
   Button and badge colors are !important, as on the site, so page link colors never override them. */

/* Base */
.hr-base { background: var(--color-chalk); color: var(--color-ink); font-family: var(--font-sans); font-size: 16px; line-height: 1.5; }
.hr-base a { color: var(--color-field-ink); text-underline-offset: 2px; }
.hr-base a:hover { color: var(--color-turf); }
.hr-base :focus-visible { outline: var(--stroke-rule) solid var(--color-scoreboard); outline-offset: 2px; }
.hr-dark { background: var(--color-turf); color: var(--color-chalk); }
.hr-dark a { color: var(--color-chalk); }
.hr-dark a:hover { color: var(--color-scoreboard); }
.hr-eyebrow { font-family: var(--font-mono); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; }
.hr-display { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; line-height: .92; margin: 0; }

/* Wordmark */
.hr-wordmark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.hr-wordmark img { display: block; width: 40px; height: auto; }
.hr-wordmark-name { display: block; font-family: var(--font-display); font-weight: 900; font-size: 28px; letter-spacing: .02em; line-height: 1; }
.hr-wordmark-by { display: block; margin-top: 4px; font-family: var(--font-sans); font-size: 13px; font-weight: 600; line-height: 1; }
.hr-wordmark-by b { font-weight: 800; }
.hr-wordmark--turf .hr-wordmark-name { color: var(--color-chalk); }
.hr-wordmark--turf .hr-roster { color: var(--color-scoreboard); }
.hr-wordmark--turf .hr-wordmark-by { color: var(--color-mist); }
.hr-wordmark--turf .hr-wordmark-by b { color: var(--color-leaf); }
.hr-wordmark--turf .hr-wordmark-by .hr-aware { color: var(--color-sky); }
.hr-wordmark--light .hr-wordmark-name { color: var(--color-ink); }
.hr-wordmark--light .hr-roster { color: var(--color-field); }
.hr-wordmark--light .hr-wordmark-by { color: var(--color-bench); }
.hr-wordmark--light .hr-wordmark-by b { color: var(--color-field); }
.hr-wordmark--light .hr-wordmark-by .hr-aware { color: var(--color-aware-blue); }
.hr-wordmark--mono .hr-wordmark-name, .hr-wordmark--mono .hr-roster { color: var(--color-ink); }

/* Buttons */
.hr-btn { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; text-decoration: none; font-family: var(--font-display); font-weight: 800; font-size: 19px; line-height: 1; letter-spacing: .06em; text-transform: uppercase; padding: var(--space-btn-y) var(--space-btn-x); border-radius: var(--radius-button); border: 0; cursor: pointer; }
.hr-btn--yellow { background: var(--color-scoreboard); color: var(--color-ink) !important; box-shadow: var(--shadow-button); }
.hr-btn--yellow:hover { filter: brightness(1.05); }
.hr-btn--green { background: var(--color-field); color: var(--color-paper) !important; }
.hr-btn--line { background: transparent; color: var(--color-ink) !important; border: var(--stroke-heavy) solid var(--color-ink); padding: 10px 18px; }

/* Position tab */
.hr-tab { display: inline-flex; align-items: center; box-sizing: border-box; height: var(--size-tab-h); padding: 0 var(--space-tab-x); border: var(--stroke-outline) solid var(--color-ink); border-bottom: none; border-radius: var(--radius-tab) var(--radius-tab) 0 0; font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; }
.hr-pos-grower { background: var(--position-grower); color: var(--color-paper); }
.hr-pos-processor { background: var(--position-processor); color: var(--color-ink); }
.hr-pos-manufacturer { background: var(--position-manufacturer); color: var(--color-paper); }
.hr-pos-brand { background: var(--position-brand); color: var(--color-paper); }
.hr-pos-retailer { background: var(--position-retailer); color: var(--color-ink); }
.hr-pos-lab { background: var(--position-lab); color: var(--color-paper); }
.hr-pos-distributor { background: var(--position-distributor); color: var(--color-paper); }
.hr-pos-service { background: var(--position-service); color: var(--color-paper); }
.hr-pos-pill { display: inline-block; border-radius: var(--radius-chip); padding: 2px 8px; font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }

/* Status marks */
.hr-chip { display: inline-block; font-family: var(--font-mono); font-size: 10.5px; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; border: var(--stroke-hair) solid var(--color-chip-line); border-radius: var(--radius-chip); padding: 3px 6px; white-space: nowrap; color: var(--color-ink); }
.hr-chip--unclaimed { color: var(--color-unclaimed); border: var(--stroke-hair) dashed var(--color-unclaimed); }
.hr-seal { display: inline-flex; align-items: center; gap: 4px; background: var(--color-scoreboard); color: var(--color-ink); border: var(--stroke-outline) solid var(--color-ink); border-radius: var(--radius-pill); padding: 2px 9px 2px 5px; font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.hr-seal img { width: 14px; height: 14px; display: block; }
.hr-rookie { display: inline-block; background: var(--color-ink); color: var(--color-scoreboard); border-radius: var(--radius-stamp); padding: 3px 8px; font-family: var(--font-display); font-weight: 900; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; transform: rotate(-4deg); white-space: nowrap; }
.hr-lineup { display: inline-block; background: var(--color-scoreboard); color: var(--color-ink); border: var(--stroke-outline) solid var(--color-ink); border-radius: var(--radius-chip); padding: 2px 8px; font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }

/* Player Card */
.hr-card { position: relative; width: min(var(--size-card-w), 100%); height: var(--size-card-h); display: flex; flex-direction: column; color: var(--color-ink); text-align: left; }
.hr-card-tabrow { height: var(--size-tab-h); display: flex; align-items: flex-end; gap: 8px; padding: 0 var(--space-card-x); }
.hr-card-tabrow--end { justify-content: flex-end; }
.hr-card-tabrow .hr-tab { position: relative; z-index: 2; margin-bottom: -1.5px; }
.hr-card-tabrow .hr-lineup { margin-bottom: 6px; }
.hr-card-body { flex: 1; position: relative; box-sizing: border-box; background: var(--color-paper); border: var(--stroke-outline) solid var(--color-ink); border-radius: var(--radius-card); padding: var(--space-card-top) var(--space-card-x) var(--space-card-bottom); display: flex; flex-direction: column; gap: var(--space-card-gap); box-shadow: var(--shadow-card); }
.hr-card--unclaimed .hr-card-body { border-style: dashed; background: var(--color-paper-unclaimed); }
.hr-card--lineup .hr-card-body { box-shadow: var(--shadow-lineup); }
.hr-card-back .hr-card-body { background: var(--color-manila); padding: 12px 16px 22px; gap: 8px; }
.hr-card-head { display: flex; align-items: flex-start; gap: 12px; }
.hr-card-ring { width: var(--size-logo-ring); height: var(--size-logo-ring); flex: none; box-sizing: border-box; border-radius: var(--radius-round); border: var(--stroke-ring) solid var(--tab, var(--color-ink)); background: var(--color-chalk); display: grid; place-items: center; font-family: var(--font-display); font-weight: 900; font-size: 21px; }
.hr-card--unclaimed .hr-card-ring { border-style: dashed; }
.hr-card-id { flex: 1; min-width: 0; }
.hr-card-name { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 24px; line-height: .95; text-transform: uppercase; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hr-card-meta { margin-top: 6px; font-size: 13px; line-height: 1.4; color: var(--color-bench); }
.hr-card-no { flex: none; text-align: right; }
.hr-card-no-label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; color: var(--color-bench); }
.hr-card-no-value { font-family: var(--font-display); font-weight: 900; font-size: 38px; line-height: .85; }
.hr-card-tagline { margin: 0; font-size: 14px; line-height: 1.4; color: var(--color-bench); min-height: 39px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hr-card-foot { margin-top: auto; display: flex; align-items: center; gap: 6px; }
.hr-flip { margin-left: auto; width: var(--size-flip); height: var(--size-flip); flex: none; border-radius: var(--radius-round); border: var(--stroke-outline) solid var(--color-ink); background: var(--color-paper); display: grid; place-items: center; cursor: pointer; padding: 0; }
.hr-flip img { width: 17px; height: 17px; display: block; }
.hr-notch { position: absolute; bottom: -1.5px; width: 22px; height: 11px; box-sizing: border-box; background: var(--color-chalk); border: var(--stroke-outline) solid var(--color-ink); border-bottom: none; border-radius: 11px 11px 0 0; }
.hr-notch--l { left: 24%; }
.hr-notch--r { right: 24%; }
.hr-card-backhead { display: flex; align-items: baseline; gap: 8px; border-bottom: var(--stroke-outline) solid var(--color-ink); padding-bottom: 6px; }
.hr-card-backhead b { font-family: var(--font-display); font-weight: 900; font-size: 22px; line-height: 1; }
.hr-card-backhead span { flex: 1; min-width: 0; font-family: var(--font-display); font-weight: 800; font-size: 17px; line-height: 1; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-stats { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 3px 10px; font-size: 12px; line-height: 1.3; margin: 0; }
.hr-stats dt { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; color: var(--color-stat-label); padding-top: 1px; }
.hr-stats dd { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-claim { margin: 0; font-size: 12px; line-height: 1.35; background: var(--color-paper); border: var(--stroke-hair) dashed var(--color-ink); border-radius: var(--radius-button); padding: 6px 8px; }
.hr-claim a { font-weight: 700; color: var(--color-field-ink); }
.hr-source { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 9.5px; line-height: 1.25; letter-spacing: .04em; color: var(--color-stat-label); }

/* Form field */
.hr-field label { display: block; font-weight: 700; font-size: 14px; line-height: 1.3; margin-bottom: 6px; }
.hr-field input, .hr-field textarea, .hr-field select { width: 100%; box-sizing: border-box; border: var(--stroke-outline) solid var(--color-ink); border-radius: var(--radius-button); padding: var(--space-field-y) var(--space-field-x); font: 16px var(--font-sans); background: var(--color-paper); color: var(--color-ink); }
.hr-field textarea { min-height: 110px; }
.hr-field-help { margin-top: 6px; font-size: 14px; line-height: 1.4; color: var(--color-bench); }

/* Roster table */
.hr-table-wrap { position: relative; overflow-x: auto; border: var(--stroke-outline) solid var(--color-ink); border-radius: var(--radius-table); background: var(--color-paper); }
.hr-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.hr-table thead { background: var(--color-manila); text-align: left; font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; }
.hr-table th, .hr-table td { padding: var(--space-field-y) var(--space-field-x); vertical-align: top; }
.hr-table tbody tr { border-top: var(--stroke-hair) solid var(--color-chalkline); }
.hr-table tbody th { text-align: left; font-weight: 600; }
.hr-table .hr-num { font-family: var(--font-mono); font-size: 13px; }
.hr-table .hr-muted { color: var(--color-bench); }

/* Breadcrumbs */
.hr-crumbs { font-size: 14px; color: var(--color-bench); }
.hr-crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hr-crumbs li { display: flex; gap: 8px; }

/* Member badge */
.hr-badge { display: flex; align-items: stretch; width: 240px; height: 88px; box-sizing: border-box; border: var(--stroke-heavy) solid var(--color-ink); border-radius: var(--radius-card); overflow: hidden; background: var(--color-paper); color: var(--color-ink) !important; text-decoration: none; }
.hr-badge-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 0 8px; }
.hr-badge-main img { width: 30px; height: auto; display: block; }
.hr-badge-kicker { font-family: var(--font-mono); font-size: 7.5px; letter-spacing: .14em; }
.hr-badge-name { font-family: var(--font-display); font-weight: 900; font-size: 23px; line-height: .9; }
.hr-badge-name .hr-roster { color: var(--color-field); }
.hr-badge-no { flex: none; background: var(--color-scoreboard); color: var(--color-ink); border-left: var(--stroke-heavy) solid var(--color-ink); display: grid; place-items: center; padding: 0 6px; font-family: var(--font-display); font-weight: 900; font-size: 24px; }
.hr-badge--dark { background: var(--color-turf); color: var(--color-chalk) !important; border-color: var(--color-chalk); }
.hr-badge--dark .hr-badge-name .hr-roster { color: var(--color-scoreboard); }
.hr-badge--dark .hr-badge-no { border-left-color: var(--color-chalk); }