/* Fitlab — Fitting Library page (builds on ../styles.css for the shared chrome; same vocabulary as the roadmap page). */

[hidden] { display: none !important; }
#mainWrapper { overflow-y: auto; }

/* ---- title bar */
/* the theme picture with the title bar standing on it, low, just above the Fits / Doctrines tabs */
#lbTop { position: relative; flex-shrink: 0; }
#lbBar { position: absolute; left: 0; right: 0; bottom: 84px; z-index: 1; display: flex; align-items: center; gap: 18px; padding: 0 clamp(12px, 2.5vw, 48px); }
#lbTitle { font-family: 'Shentox Medium', 'Segoe UI', sans-serif; font-size: 1.6em; color: var(--themeColor); letter-spacing: 4px; white-space: nowrap; text-shadow: 0 2px 12px #000, 0 0 3px #000; }
#lbNote { font-size: 0.8214em; color: #b0b0b0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 6px #000, 0 0 2px #000; } #lbNote b { font-weight: normal; color: var(--themeColor); }
.barBtn { display: inline-flex; align-items: center; gap: 7px; background: none; border: 1px solid var(--borderColor31); padding: 6px 13px; font-family: inherit; font-size: 0.8929em; color: var(--textColor2); cursor: pointer; text-decoration: none; }
.barBtn:hover { color: var(--textColor); }
#lbPublish { margin-left: auto; display: flex; align-items: center; gap: 9px; font-family: 'Shentox Medium', 'Segoe UI', sans-serif; font-size: .8571em; letter-spacing: 1px; line-height: 1.2; text-transform: uppercase; padding: .6em 1.6em calc(.6em + 2px); background: #0d0d0dd9 !important; border: 1px solid #313131; color: var(--btnTextColourSelected); box-shadow: none; white-space: nowrap; text-decoration: none; transition: color .15s linear; }   /* a dark ground: it stands on the picture (!important over harmonised.css .barBtn) */
#lbPublish:hover { border-color: #313131; color: #ffffff; }
.barBtn svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; }

#lbWrap { padding: 0 clamp(12px, 2.5vw, 48px) 30px; margin: 0; width: 100%; box-sizing: border-box; }   /* the whole width of the window */
#lbTop + #lbWrap { margin-top: -70px; position: relative; }

/* ---- head plate: search, filters, sort tabs */
#lbHead { background-color: var(--backgroundColor); border: 1px solid var(--borderColor31); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.lbSearch { display: flex; align-items: center; gap: 8px; border: 1px solid var(--borderColor31); background: #151515; padding: 5px 10px; max-width: 34em; }
.lbSearch svg { width: 15px; height: 15px; fill: none; stroke: var(--textColor2); stroke-width: 1.8; flex: none; }
.lbSearch input { flex: 1; min-width: 0; background: none; border: 0; color: var(--themeColor); font-family: inherit; font-size: 0.95em; outline: none; }
#lbFilters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lbDd { position: relative; }
/* pickers (open a list): a hover frame, as the brand book's pickers; set = bright text */
.lbDdBtn { display: inline-flex; align-items: center; gap: 8px; background: none; border: 1px solid #313131; padding: 5px 11px 7px; color: #999999; font-family: inherit; font-size: 0.8929em; cursor: pointer; transition: color .15s linear, border-color .15s linear; }
.lbDdBtn:hover, .lbDd.open .lbDdBtn { color: #d2d2d2; border-color: #d2d2d2; } .lbDdBtn.on { color: #d2d2d2; }
.lbDdBtn i { font-style: normal; opacity: .6; font-size: .85em; }
.lbDdPanel { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; min-width: 220px; max-height: 60vh; overflow: auto; background: #0d0d0df7; border: 1px solid var(--borderColor31); box-shadow: 0 10px 30px #000a; padding: 4px 0; }
.lbDdPanel button { display: flex; width: 100%; align-items: center; gap: 10px; background: none; border: 0; padding: 6px 12px; color: var(--textColor); font-family: inherit; font-size: 0.9em; cursor: pointer; text-align: left; white-space: nowrap; }
.lbDdPanel button:hover { background: #d2d2d20a; } .lbDdPanel button.on { color: var(--themeColor); box-shadow: inset 3px 0 0 #d2d2d2; }
.lbDdPanel button small { margin-left: auto; color: var(--textColor2); font-size: .85em; } .lbDdPanel button em { font-style: normal; color: var(--textColor2); font-size: .85em; }
.lbDdPanel .lbDdEmpty { padding: 6px 12px; color: var(--textColor2); font-size: .85em; }
/* toggles and sort tabs: the brand book's buttons (hover = brighter text only, selected = the 2px bottom mark) */
.lbTog { background: none; border: 1px solid #313131; padding: 5px 11px 7px; color: var(--btnTextColourNormal); font-family: inherit; font-size: 0.8929em; cursor: pointer; transition: color .15s linear; }
.lbTog:hover { color: var(--btnTextColourHover); } .lbTog.on, .lbTog.on:hover { color: var(--btnTextColourSelected); box-shadow: var(--btnMark); }
#lbSort { display: flex; gap: 3px; font-size: 0.8929em; }
.lbSortTab { background: none; border: 1px solid #313131; padding: 6px 13px 8px; font-family: inherit; font-size: 1em; color: var(--btnTextColourNormal); cursor: pointer; transition: color .15s linear; }
.lbSortTab:hover { color: var(--btnTextColourHover); } .lbSortTab.on, .lbSortTab.on:hover { background: none; color: var(--btnTextColourSelected); box-shadow: var(--btnMark); }

/* ---- the panels behind the lists (the Planetary Template Library's board): the fit cards, the doctrines */
#lbBoard, #lbDocs { background-color: var(--backgroundColor); border: 1px solid var(--borderColor31); padding: 16px; box-sizing: border-box; }
#lbBoard { display: flex; flex-direction: column; gap: 14px; }
#lbBoard #lbMoreWrap { margin-top: 0; } #lbBoard #lbMoreWrap:has(#lbMore[hidden]) { display: none; }

/* ---- the cards: the Planetary Template Library's (head with the vote at the top right, badges, figures, a row of actions) */
#lbGrid, #docFits { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(430px, 100%), 1fr)); gap: 14px; }
.lbCard { border: 1px solid #313131; background: var(--backgroundColor); display: flex; flex-direction: column; min-width: 0; transition: border-color .18s linear, background-color .18s linear; }
.lbCard:hover { border-color: #626262; background: var(--backgroundColor63); }
.lbCard.hi { border-color: var(--themeColor); }
.lbCardHead { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px 10px; }
.lbCard .render { width: 76px; height: 76px; flex: none; background: #101010; border: 1px solid #242424; object-fit: cover; }
.lbId { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.lbCard .nm { font-family: 'Shentox Light', 'Segoe UI', sans-serif; font-size: 1em; letter-spacing: 1.8px; text-transform: uppercase; color: var(--themeColor); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lbCard .nm a { color: inherit; text-decoration: none; } .lbCard .nm a:hover { text-decoration: underline; }
.lbCard .hull { font-size: .857em; color: var(--textColor); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lbCard .hull b { font-weight: normal; color: var(--themeColor); }
.lbCard .desc { font-size: .8571em; color: #8a8a8a; line-height: 1.45; max-height: 2.9em; overflow: hidden; }
.lbVote { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; border: 1px solid #313131; background: none; color: var(--btnTextColourNormal); padding: 6px 10px 8px; cursor: pointer; font-family: inherit; transition: color .15s linear; }
.lbVote:hover { border-color: #313131; color: var(--btnTextColourHover); }
.lbVote.on, .lbVote.on:hover { color: var(--btnTextColourSelected); box-shadow: var(--btnMark); }
.lbVote svg { width: 11px; height: 7px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.lbVote .n { font-size: .9286em; font-variant-numeric: tabular-nums; }
.lbBadges { display: flex; gap: 5px; flex-wrap: wrap; padding: 0 16px 10px; }
.lbBadges:empty { display: none; }
.lbBadges .chip, .lbBadges .comm, .lbBadges .lock { font-size: .7143em; letter-spacing: 1px; padding: 1px 6px; text-transform: uppercase; line-height: 1.4; }
.lbBadges .chip { background: none; color: #999999; border: 1px solid #313131; font-family: inherit; cursor: pointer; } .lbBadges .chip:hover { color: var(--themeColor); }
.lbBadges .chip.tech { cursor: default; }
.lbBadges .chip.doc { color: var(--themeColor); background: none; border: 1px solid #3e3e3e; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lbCard .comm { display: inline-flex; align-items: center; color: #48f0c0; background: none; border: 1px solid #48f0c066; }
.lbCard .lock { display: inline-flex; align-items: center; gap: 5px; color: var(--themeColor); border: 1px solid #3e3e3e; }
.lbCard .lock svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2; }
/* who can fly it (logged in): one chip per pilot */
.lbCard .fly { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 0 16px 10px; } .lbCard .fly:empty { display: none; }
.flyLbl { font-size: .7em; letter-spacing: 1.5px; color: #8a8a8a; margin-right: 2px; }
.flyChip { font: inherit; font-size: .82em; padding: 1px 7px; border: 1px solid var(--borderColor31); background: none; color: var(--textColor2); white-space: nowrap; } .flyChip small { color: #8a8a8a; font-size: .92em; }
.flyChip.ok { color: #48f0c0; border-color: #48f0c055; } .flyChip.some { color: #ffb648; border-color: #ffb64855; } .flyChip.no { color: #c7c7c7; } button.flyChip.no { cursor: pointer; } button.flyChip.no:hover { border-color: #c7c7c7; }
.docFly { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-right: 8px; } .docFly:empty { display: none; }
.flyTbl { border-collapse: collapse; width: 100%; margin: 6px 0 10px; font-size: .95em; } .flyTbl th { text-align: left; font-weight: normal; text-transform: uppercase; font-size: .75em; letter-spacing: 1.5px; color: #8a8a8a; padding: 4px 8px 4px 0; border-bottom: 1px solid var(--borderColor31); }
.flyTbl td { padding: 4px 8px 4px 0; border-bottom: 1px solid var(--borderColor31); } .flyTbl td:not(:first-child), .flyTbl th:not(:first-child) { text-align: right; white-space: nowrap; }
.chip { font-size: .72em; letter-spacing: .8px; text-transform: uppercase; padding: 2px 7px 3px; border: 1px solid var(--borderColor31); color: var(--textColor2); background: none; font-family: inherit; cursor: pointer; }
.chip:hover { color: var(--textColor); } .chip.doc { color: var(--themeColor); border-color: #3e3e3e; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chip.tech { cursor: default; }
.lbStats { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; padding: 9px 16px; border-top: 1px solid #313131; font-size: .8571em; margin-top: auto; }
.lbStat { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.lbStat .k { color: var(--btnTextColourNormal); letter-spacing: 1px; text-transform: uppercase; font-size: .8333em; }
.lbStat .v { color: var(--textColor); font-variant-numeric: tabular-nums; } .lbStat .v.hi { color: #48f0c0; } .lbStat .v.ok { color: #48f0c0; } .lbStat .v.bad { color: #ff9a9a; }
.lbBy { margin-left: auto; display: flex; align-items: center; gap: 10px; min-width: 0; color: #8a8a8a; }
.lbBy .who { display: flex; align-items: center; gap: 6px; min-width: 0; } .lbBy .who span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 14em; }
.lbBy img { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--borderColor31); background: #000; flex: none; }
.lbBy .uses { color: var(--btnTextColourNormal); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lbActions { display: flex; border-top: 1px solid #313131; }
.lbAction { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 4px 10px; cursor: pointer; color: var(--btnTextColourNormal); background: none; font-family: inherit; font-size: .7143em; letter-spacing: 1.5px; text-transform: uppercase; border: none; border-right: 1px solid #313131; text-decoration: none; white-space: nowrap; transition: color .15s linear; }
.lbAction:last-child { border-right: none; }
.lbAction:hover { color: var(--btnTextColourHover); background: none; } .lbAction.pri { color: var(--btnTextColourSelected); } .lbAction.pri:hover { color: #ffffff; } .lbAction.bad:hover { color: #ff9a9a; }
.lbAction svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; flex: none; }
#lbEmpty { position: relative; padding: 40px 14px; text-align: center; color: var(--textColor2); border: 1px dashed var(--borderColor31); line-height: 1.5; background: url('../img/w/fitlab_theme_new_05.jpg') center 40% / cover no-repeat; }
#lbEmpty::before { content: ''; position: absolute; inset: 0; background: #0d0d0dd0; } #lbEmpty > * { position: relative; }
#lbMoreWrap { display: flex; justify-content: center; margin-top: 16px; }

/* ---- dialog (report) and toast */
.lbDlg { position: fixed; inset: 0; z-index: 60; background: #000000a8; display: flex; align-items: center; justify-content: center; padding: 16px; }
.lbDlg .box { background: #0d0d0d; border: 1px solid var(--borderColor31); box-shadow: 0 10px 40px #000c; width: min(30em, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; }
.lbDlg .bd { overflow: auto; }
.lbDlg .hd { display: flex; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--borderColor31); font-family: 'Shentox Medium', 'Segoe UI', sans-serif; letter-spacing: 2px; color: var(--themeColor); font-size: .9em; }
.lbDlg .hd button { margin-left: auto; background: none; border: 1px solid transparent; color: var(--textColor2); cursor: pointer; font-family: inherit; padding: 2px 7px; } .lbDlg .hd button:hover { color: var(--themeColor); border-color: var(--borderColor31); }
.lbDlg .bd { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.lbDlg textarea { width: 100%; box-sizing: border-box; min-height: 5em; background: #151515; border: 1px solid var(--borderColor31); color: var(--themeColor); font-family: inherit; font-size: .95em; padding: 6px 10px; outline: none; resize: vertical; }
.lbDlg textarea:focus { border-color: var(--themeColor); }
.lbDlg .note { font-size: .85em; color: var(--textColor2); line-height: 1.4; }
.lbDlg .ft { display: flex; justify-content: flex-end; gap: 4px; }
.lbToast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 70; background: #0d0d0df7; border: 1px solid var(--borderColor31); color: var(--textColor); padding: 8px 16px 10px; font-size: .92em; box-shadow: 0 10px 30px #000a; max-width: min(40em, 90vw); }

@media (max-width: 760px) {
    #lbBoard, #lbDocs { padding: 10px; }
    #lbNote { display: none; }
    #lbBar { bottom: 78px; }
    .lbSearch { max-width: none; }
    .rmArt.page { height: 160px; }
}
@media (max-width: 480px) {
    .lbCardHead { padding: 12px 12px 8px; gap: 10px; } .lbCard .render { width: 56px; height: 56px; } .lbBadges, .lbCard .fly { padding-left: 12px; padding-right: 12px; } .lbStats { padding: 8px 12px; }
    .lbAction { flex-direction: column; gap: 3px; padding: 8px 2px; letter-spacing: 1px; }
    #lbBar { gap: 10px; } #lbTitle { font-size: 1.15em; letter-spacing: 2px; } #lbPublish { padding: .5em 1em calc(.5em + 2px); }
}

/* corporation / alliance scopes and the doctrines dialog */
#lbHint { font-size: .82em; color: var(--textColor2); } #lbHint a { color: var(--themeColor); }
.lbTog.scope.on { color: var(--themeColor); }
.lbDdPanel .grp { padding: 6px 12px 2px; font-size: .72em; letter-spacing: 1px; color: var(--textColor2); text-transform: uppercase; }
.lbDlg .box.wide { width: min(44em, 100%); max-height: 90vh; display: flex; flex-direction: column; } .lbDlg .box.wide .bd { overflow: auto; }
.docRow { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid #d2d2d20a; }
.docRow .dw { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .docRow b { font-weight: normal; color: var(--themeColor); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.docRow small { color: var(--textColor2); font-size: .82em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.docRow .acts { display: flex; gap: 3px; flex: none; }
.docRow .acts a, .docRow .acts button { display: inline-flex; align-items: center; background: none; border: 1px solid var(--borderColor31); padding: 3px 8px 4px; color: var(--textColor2); font-family: 'Shentox Medium', 'Segoe UI', sans-serif; font-size: .7em; letter-spacing: .8px; text-transform: uppercase; cursor: pointer; text-decoration: none; }
.docRow .acts a:hover, .docRow .acts button:hover { color: var(--textColor); } .docRow .acts .bad:hover { color: #e06060; }
.docGrp { font-size: .74em; letter-spacing: 1px; color: var(--textColor2); text-transform: uppercase; margin: 10px 0 2px; }
.docNew { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--borderColor31); padding: 10px; margin-top: 10px; }
.docNew .row { display: flex; gap: 6px; } .docNew .row input { flex: 1; min-width: 0; }
.docNew input, .docNew select { background: #151515; border: 1px solid var(--borderColor31); color: var(--themeColor); font-family: inherit; font-size: .95em; padding: 6px 10px; outline: none; }
.docNew input:focus { border-color: var(--themeColor); }
.docNew .ttl { font-size: .74em; letter-spacing: 1px; color: var(--themeColor); text-transform: uppercase; }

/* ---------------- views: Fits / Doctrines, the doctrine page */
#lbViews { display: flex; gap: 0; border-bottom: 1px solid var(--borderColor31); margin-bottom: 14px; }
.lbView { background: none; border: 0; padding: 9px 18px 10px; color: #8a8a8a; font: inherit; letter-spacing: 1px; text-transform: uppercase; font-size: .85em; cursor: pointer; }
.lbView:hover { color: var(--themeColor); } .lbView.on { color: var(--themeColor); box-shadow: inset 0 -2px 0 #d2d2d2; }
.docNote { color: #8a8a8a; margin: 4px 0 16px; line-height: 1.5; max-width: 80ch; } .docNote.bad { color: #ff5c5c; }
.docGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.docCard { display: grid; gap: 6px; padding: 12px 14px; background: #00000052; border: 1px solid var(--borderColor31); color: var(--textColor); text-decoration: none; }
.docCard:hover { border-color: #3e3e3e; background: #d2d2d20a; }
.docCard .dhd { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; } .docCard .dhd b { color: var(--themeColor); font-weight: normal; font-size: 1.1em; }
.mng { font-size: .7em; letter-spacing: 1.5px; color: #48f0c0; } .docHead .mng { font-size: .85em; letter-spacing: .5px; }
.docCard .own, .docHead .own { display: flex; align-items: center; gap: 5px; color: #8a8a8a; font-size: .9em; } .own svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; }
.docCard .desc { color: #8a8a8a; font-size: .9em; line-height: 1.4; }
.docCard .ships { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; } .docCard .ships img { width: 28px; height: 28px; background: #1a1a1a; } .docCard .ships span { color: #6b6b6b; font-size: .85em; margin-left: 4px; }
.docCard .cnt { color: #6b6b6b; font-size: .85em; }
.docBack { display: inline-block; color: #8a8a8a; text-decoration: none; margin: 0 0 10px; } .docBack:hover { color: var(--themeColor); }
.docHead { display: flex; flex-wrap: wrap; gap: 14px 24px; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--borderColor31); }
.docHead h2 { margin: 0 0 4px; font-weight: normal; color: var(--themeColor); letter-spacing: 1px; font-size: 1.4em; } .docHead p { margin: 8px 0 0; color: #8a8a8a; max-width: 70ch; line-height: 1.5; }
.docActs { display: flex; flex-wrap: wrap; gap: 6px; } .docActs [hidden] { display: none; }