/* League Files (src/league_files_view.js): the front door's framed windows (.lj, src/boot.css) and these */
.lf .lj-card { width: min(860px, 100%); }
.lf.lf-small .lj-card { width: min(600px, 100%); }
.lf.lf-wide .lj-card { width: min(1000px, 100%); height: 100%; }
.lf .lj-btn.sm { min-height: 34px; min-width: 0; padding: 0 12px; font-size: 13px; }
.lf .lj-ft { flex-wrap: wrap; }
.lf-h { margin: 12px 0 6px; font: 800 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.lf-item { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 6px; padding: 8px 10px; text-align: left;
  background: rgba(255, 255, 255, .06); border: 2px solid rgba(255, 255, 255, .12); border-radius: 6px; color: #fff; font: inherit; }
.lf-opt { cursor: pointer; }
.lf-opt:hover, .lf-opt:focus-visible { border-color: var(--gold); }
.lf-it { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lf-it b { font: 800 15px/1.2 var(--sans); }
.lf-it span { font: 500 12px/1.3 var(--sans); opacity: .75; }
.lf-ib { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.lf-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.lf-file { position: relative; }
.lf-paste { width: 100%; min-height: 90px; font: 12px/1.3 ui-monospace, monospace; resize: vertical; }
.lf-found { margin-top: 10px; padding: 10px; border: 2px solid var(--gold); border-radius: 6px; display: flex; flex-direction: column; gap: 6px; }
.lf-found > span { opacity: .8; font-size: 13px; }
.lf-logos { display: flex; flex-wrap: wrap; gap: 4px; }
.lf-logos img { width: 28px; height: 28px; object-fit: contain; }
.lf-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 12px; min-height: 0; }
@media (max-width: 640px) { .lf-split { grid-template-columns: 1fr; } }
.lf-clubs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; align-content: start; }
.lf-div i { display: block; margin: 2px 0 3px; font: 700 10px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.lf-div { display: flex; flex-wrap: wrap; gap: 4px; }
.lf-div i { flex: 0 0 100%; }
.lf-club { display: flex; flex-direction: column; align-items: center; gap: 1px; width: 52px; padding: 3px 0 2px; cursor: pointer;
  background: rgba(255, 255, 255, .06); border: 2px solid transparent; border-radius: 6px; color: #fff; font: 700 10px/1 var(--sans); }
.lf-club img { width: 34px; height: 34px; object-fit: contain; }
.lf-club.on { border-color: var(--gold); background: color-mix(in srgb, var(--c) 45%, transparent); }
.lf-form { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lf-form .lj-lab { display: flex; flex-direction: column; gap: 3px; margin: 0; }
.lf-two { display: flex; flex-wrap: wrap; gap: 8px; }
.lf-two > label { flex: 1 1 90px; }
.lf-col { width: 100%; height: 40px; padding: 0; border: 2px solid var(--ink); border-radius: 4px; background: none; }
.lf-prev { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 6px;
  background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 60%, #000)); border: 2px solid var(--a); }
.lf-prev img { width: 76px; height: 76px; object-fit: contain; }
.lf-prev b { display: block; font: 400 24px/1 var(--disp); text-transform: uppercase; color: #fff; text-shadow: 0 2px 0 #000; }
.lf-prev span { font: 700 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #fff; opacity: .8; }
.lf-men { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.lf-list { display: flex; flex-direction: column; gap: 3px; max-height: 52vh; overflow-y: auto; }
.lf-man { display: grid; grid-template-columns: 34px 34px minmax(0, 1fr); align-items: center; gap: 6px; padding: 4px 6px; cursor: pointer; text-align: left;
  background: rgba(255, 255, 255, .05); border: 2px solid transparent; border-radius: 5px; color: #fff; font: 600 13px/1.1 var(--sans); }
.lf-man.on { border-color: var(--gold); }
.lf-man b { font: 800 14px/1 var(--sans); color: var(--gold); }
.lf-man i { font-style: normal; font-size: 11px; opacity: .75; }
.lf-man span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lf-ovr { display: flex; align-items: center; gap: 8px; }
.lf-ovr span { font: 700 12px/1 var(--sans); text-transform: uppercase; letter-spacing: .08em; opacity: .8; }
.lf-ovr b { font: 400 30px/1 var(--disp); color: var(--gold); min-width: 44px; }
.lf-attrs { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 4px; }
.lf-attrs label { display: flex; flex-direction: column; gap: 1px; }
.lf-attrs i { font: 700 10px/1 var(--sans); font-style: normal; letter-spacing: .06em; opacity: .7; }
.lf-attrs input { width: 100%; min-height: 32px; padding: 2px 4px; border: 2px solid var(--ink); border-radius: 4px; font: 700 14px/1 var(--sans); }
.lf-pick { display: flex; flex-direction: column; }
/* the editors' own fields: compact, plain letters (the league-code box's .lj-in is big and spaced) */
.lf-in { width: 100%; min-height: 36px; padding: 0 8px; box-sizing: border-box; background: #0b1220; color: #fff;
  border: 2px solid rgba(255, 255, 255, .22); border-radius: 4px; font: 600 14px/1.2 var(--sans); letter-spacing: normal; text-transform: none; }
.lf-in:focus { outline: none; border-color: var(--gold); }
select.lf-in { padding-right: 4px; }
.lf-paste.lf-in { min-height: 90px; padding: 6px 8px; font: 12px/1.3 ui-monospace, monospace; }
.lf-form .lj-lab { font-size: 11px; }