/* OBSERVATORY LIBRARY // STELLAR CARTOGRAPHY (static/js/games/skylib.js).
   Holo amber + cyan, chamfered panels, class colours per object type. Hover/one-shot transitions
   only — no looping animations on big surfaces. */
#obs-lib { --k: #9ad8ff; }
.lib-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 10px; }
.lib-title b { font: 800 14px/1 var(--mono); letter-spacing: .32em; color: var(--amber); text-shadow: 0 0 14px var(--glow); }
.lib-title span { font: 700 11px var(--mono); letter-spacing: .24em; color: var(--holo); margin-left: 8px; }
.lib-stats { display: flex; gap: 14px; margin-left: auto; font: 700 9px var(--mono); letter-spacing: .22em; color: #6c8494; }
.lib-stats i { font-style: normal; font-size: 16px; color: #eaf4fa; margin-right: 6px; letter-spacing: 0; }
.lib-up { font: 800 10px var(--mono) !important; letter-spacing: .2em; color: #04060b !important; background: var(--amber) !important;
  border: 0 !important; padding: 8px 14px !important; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.lib-bar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 6px 0; }
.lib-q { flex: 1 1 260px; font: 12px var(--mono) !important; letter-spacing: .08em; padding: 9px 12px !important; background: rgba(3, 6, 13, .8) !important;
  border: 1px solid rgba(79, 227, 255, .3) !important; color: #eaf4fa !important; border-radius: 0 !important;
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px); }
.lib-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.lib-chips button { font: 700 9px var(--mono) !important; letter-spacing: .16em; padding: 5px 9px !important; min-width: 0; border-radius: 0 !important;
  color: #8fa6b6 !important; background: rgba(3, 6, 13, .7) !important; border: 1px solid rgba(79, 227, 255, .18) !important; }
.lib-chips button:hover { color: #eaf4fa !important; border-color: rgba(79, 227, 255, .5) !important; }
.lib-chips button.on { color: #04060b !important; background: var(--holo) !important; border-color: var(--holo) !important; }
.lib-empty { padding: 40px 10px; text-align: center; font: 700 11px var(--mono); letter-spacing: .24em; color: #6c8494;
  border: 1px dashed rgba(79, 227, 255, .2); margin-top: 10px; }

/* target tiles */
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin-top: 12px; }
.lib-tile { --c: 14px; position: relative; display: block; aspect-ratio: 4 / 5; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
  background: #000 !important; overflow: hidden; cursor: pointer; text-align: left;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.lib-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease, filter .45s ease; filter: saturate(1.05); }
.lib-tile::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(2, 4, 9, .55) 0%, transparent 26%, transparent 52%, rgba(2, 4, 9, .94) 100%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px); }
.lib-tile:hover img { transform: scale(1.06); filter: saturate(1.25) brightness(1.08); }
.lib-corner { position: absolute; inset: 6px; z-index: 2; pointer-events: none; opacity: 0; transform: scale(1.06); transition: opacity .25s, transform .25s;
  background:
    linear-gradient(var(--amber), var(--amber)) top left / 16px 2px no-repeat, linear-gradient(var(--amber), var(--amber)) top left / 2px 16px no-repeat,
    linear-gradient(var(--amber), var(--amber)) top right / 16px 2px no-repeat, linear-gradient(var(--amber), var(--amber)) top right / 2px 16px no-repeat,
    linear-gradient(var(--amber), var(--amber)) bottom left / 16px 2px no-repeat, linear-gradient(var(--amber), var(--amber)) bottom left / 2px 16px no-repeat,
    linear-gradient(var(--amber), var(--amber)) bottom right / 16px 2px no-repeat, linear-gradient(var(--amber), var(--amber)) bottom right / 2px 16px no-repeat; }
.lib-tile:hover .lib-corner, .lib-tile:focus-visible .lib-corner { opacity: 1; transform: scale(1); }
.lib-id, .lib-code, .lib-meta { position: absolute; z-index: 3; font-family: var(--mono); }
.lib-id { top: 10px; left: 16px; font-weight: 800; font-size: 12px; letter-spacing: .14em; color: var(--amber); text-shadow: 0 0 8px rgba(0, 0, 0, .9); }
.lib-code { top: 10px; right: 10px; font-weight: 800; font-size: 9px; letter-spacing: .2em; color: #04060b; background: var(--k); padding: 2px 6px; }
.lib-meta { left: 12px; right: 12px; bottom: 10px; display: flex; flex-direction: column; gap: 3px; }
.lib-meta b { font-size: 14px; line-height: 1.2; color: #fff; letter-spacing: .03em; text-shadow: 0 1px 6px rgba(0, 0, 0, .9); }
.lib-meta em { font-style: normal; font-size: 9px; letter-spacing: .16em; color: #b8d0de; }
.lib-pips { display: flex; gap: 4px; margin-top: 3px; }
.lib-pips i, .lib-d-strip button::before { width: 18px; height: 3px; background: #8fa6b6; }
.s-seestar { --s: var(--holo); } .s-lab { --s: #b48cff; } .s-ai { --s: var(--amber); } .s-deep { --s: #ff7ad9; } .s-edit { --s: #7fe0a0; } .s-other, .s-survey { --s: #8fa6b6; }
.lib-pips i { background: var(--s); box-shadow: 0 0 6px var(--s); }
.k-em { --k: #ff8f7f; } .k-pn { --k: #7fe0c8; } .k-snr { --k: #ff9ad0; } .k-rn { --k: #8fb8ff; } .k-gal { --k: #ffd27a; }
.k-gc { --k: #d8ecff; } .k-oc { --k: #9ad8ff; } .k-wide { --k: #c7b8ff; } .k-sun { --k: #ffb347; } .k-moon { --k: #e8e2cf; } .k-other { --k: #8fa6b6; }

/* dossier (full-screen) */
.lib-dossier { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 18px;
  background:
    radial-gradient(1px 1px at 12% 22%, #fff8, transparent), radial-gradient(1px 1px at 72% 12%, #fff6, transparent),
    radial-gradient(1px 1px at 38% 78%, #fff5, transparent), radial-gradient(1.5px 1.5px at 88% 64%, #fff7, transparent),
    radial-gradient(1px 1px at 55% 44%, #fff4, transparent), radial-gradient(1px 1px at 22% 92%, #fff5, transparent),
    radial-gradient(ellipse 70% 50% at 20% 0%, rgba(255, 150, 20, .10), transparent 70%),
    radial-gradient(ellipse 60% 50% at 90% 100%, rgba(79, 227, 255, .10), transparent 70%), rgba(2, 3, 8, .97); }
.lib-d-frame { position: relative; width: min(1320px, 100%); max-height: 100%; display: flex; flex-direction: column; background: rgba(5, 8, 15, .96);
  border: 1px solid rgba(79, 227, 255, .28); box-shadow: 0 0 60px rgba(79, 227, 255, .08), 0 30px 80px rgba(0, 0, 0, .7);
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); }
.lib-d-frame header { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid rgba(79, 227, 255, .18);
  background: linear-gradient(90deg, rgba(255, 176, 32, .10), transparent 50%); font-family: var(--mono); }
.lib-d-frame header b { font-weight: 800; font-size: 13px; letter-spacing: .3em; color: var(--amber); text-shadow: 0 0 12px var(--glow); }
.lib-d-frame header span { font-weight: 700; letter-spacing: .2em; color: var(--holo); font-size: 12px; }
.lib-d-frame header em { font-style: normal; color: #eaf4fa; font-size: 14px; flex: 1; }
.lib-d-frame header button { font-size: 14px !important; padding: 4px 10px !important; }
.lib-d-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 0; min-height: 0; overflow: auto; }
.lib-d-stage { padding: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.lib-view, .lib-cmp { position: relative; background: #000; border: 1px solid rgba(79, 227, 255, .2); height: min(62vh, 640px); overflow: hidden; }
.lib-view img, .lib-cmp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.lib-view-l, .lib-cmp-l, .lib-cmp-r { position: absolute; top: 10px; z-index: 3; font: 800 10px var(--mono); letter-spacing: .18em; padding: 4px 8px;
  background: rgba(3, 6, 13, .85); border: 1px solid rgba(79, 227, 255, .3); color: #eaf4fa; }
.lib-view-l, .lib-cmp-l { left: 10px; }
.lib-cmp-r { right: 10px; }
.lib-cmp-a { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); z-index: 1; }
.lib-cmp-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; z-index: 2; background: var(--amber); box-shadow: 0 0 12px var(--amber); }
.lib-cmp input { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.lib-d-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.lib-d-strip button { position: relative; flex: 0 0 150px; padding: 0 !important; border-radius: 0 !important; background: #000 !important;
  border: 1px solid rgba(79, 227, 255, .2) !important; text-align: left; overflow: hidden; }
.lib-d-strip button.on { border-color: var(--amber) !important; box-shadow: 0 0 14px rgba(255, 176, 32, .35); }
.lib-d-strip button::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; width: auto; background: var(--s); z-index: 2; }
.lib-d-strip img { display: block; width: 100%; height: 84px; object-fit: cover; }
.lib-d-strip span { display: block; padding: 5px 7px; font: 700 9px var(--mono); letter-spacing: .12em; color: #b8d0de; background: rgba(3, 6, 13, .95); }
.lib-d-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font: 10px var(--mono); color: #8fa6b6; }
.lib-d-tools button { font: 700 10px var(--mono) !important; letter-spacing: .14em; }
.lib-d-tools button.on { color: var(--amber) !important; border-color: var(--amber) !important; }
.lib-d-tools select { font: 11px var(--mono); max-width: 220px; }
.lib-d-data { padding: 14px 16px; border-left: 1px solid rgba(79, 227, 255, .14); background: rgba(3, 6, 13, .5); font: 12px/1.5 var(--mono); color: #c7dbe6; }
.lib-d-h { margin: 14px 0 6px; font: 800 9px var(--mono); letter-spacing: .28em; color: var(--amber); }
.lib-d-h:first-child { margin-top: 0; }
.lib-d-h::before { content: "▸ "; color: var(--holo); }
.lib-d-data dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0; }
.lib-d-data dt { font-size: 9px; letter-spacing: .16em; color: #6c8494; padding-top: 2px; }
.lib-d-data dd { margin: 0; color: #eaf4fa; }
.lib-log { padding: 6px 8px; margin: 4px 0; border-left: 2px solid var(--amber); background: rgba(79, 227, 255, .04); }
.lib-log.s-east { border-color: var(--holo); }
.lib-log b { display: block; color: #eaf4fa; font-size: 11px; }
.lib-log span { font-size: 10px; color: #8fa6b6; }
.lib-note { margin: 0; font-size: 11px; color: #b8d0de; }

/* transmit */
.lib-up-frame { width: min(560px, 100%); }
.lib-drop { display: flex; align-items: center; justify-content: center; margin: 14px; min-height: 180px; cursor: pointer; text-align: center;
  border: 1px dashed rgba(255, 176, 32, .5); background: rgba(255, 176, 32, .04); font: 800 11px/1.6 var(--mono); letter-spacing: .2em; color: var(--amber); }
.lib-drop small { font-weight: 400; letter-spacing: .06em; color: #8fa6b6; }
.lib-drop img { max-width: 100%; max-height: 260px; }
.lib-form { display: grid; gap: 10px; padding: 0 14px 16px; }
.lib-form label { display: grid; gap: 4px; font: 800 9px var(--mono); letter-spacing: .22em; color: #8fa6b6; }
.lib-form input, .lib-form select { font: 12px var(--mono) !important; letter-spacing: .02em; }
.lib-form button[type=submit] { font: 800 11px var(--mono) !important; letter-spacing: .26em; padding: 10px !important; color: #04060b !important; background: var(--amber) !important; border: 0 !important; }
.lib-form button[disabled] { opacity: .5; }
.lib-status { font: 10px var(--mono); letter-spacing: .12em; color: var(--holo); min-height: 14px; }
@media (max-width: 900px) {
  .lib-d-body { grid-template-columns: 1fr; }
  .lib-d-data { border-left: 0; border-top: 1px solid rgba(79, 227, 255, .14); }
  .lib-view, .lib-cmp { height: 48vh; }
  .lib-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .lib-stats { margin-left: 0; }
}

/* ENHANCE (hosts) */
.lib-enh { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 12px; margin-top: 2px;
  border: 1px solid rgba(255, 176, 32, .3); background: linear-gradient(90deg, rgba(255, 176, 32, .08), transparent 70%); font: 10px var(--mono); }
.lib-enh b { font-weight: 800; letter-spacing: .26em; color: var(--amber); text-shadow: 0 0 10px var(--glow); }
.lib-enh select { font: 11px var(--mono); max-width: 240px; }
.lib-enh-go { font: 800 10px var(--mono) !important; letter-spacing: .22em; color: #04060b !important; background: var(--amber) !important; border: 0 !important;
  padding: 6px 14px !important; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.lib-enh-note { color: #8fa6b6; }
.lib-enh-jobs { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; }
.lib-enh-jobs span { padding: 3px 8px; border: 1px solid rgba(79, 227, 255, .25); color: #b8d0de; letter-spacing: .08em; }
.lib-enh-jobs .j-sent, .lib-enh-jobs .j-queued { color: var(--amber); border-color: rgba(255, 176, 32, .45); }
.lib-enh-jobs .j-done { color: #7fe0a0; border-color: rgba(127, 224, 160, .45); }

/* the dossier's celestial sphere (hologlobe.js) */
.lib-globe { width: 100%; max-width: 300px; aspect-ratio: 1; display: block; margin: 6px auto 2px; cursor: grab; touch-action: none; }
.lib-globe:active { cursor: grabbing; }

/* the dossier picture opens the full-screen viewer */
.lib-view { position: relative; } .lib-view img { cursor: zoom-in; }
.lib-view-full { position: absolute; right: 10px; bottom: 10px; font: 700 10px var(--mono) !important; letter-spacing: .14em; padding: 6px 10px !important; border-radius: 3px !important;
  color: #cfe9ff !important; background: rgba(3, 6, 13, .85) !important; border: 1px solid rgba(79, 227, 255, .45) !important; cursor: pointer; }

/* REQUEST LINE */
.lib-req { display: grid; gap: 6px; margin: 4px 0 10px; padding: 10px 12px; background: rgba(255, 176, 32, .05); border-left: 2px solid var(--amber); }
.lib-req-h b { font: 700 11px var(--mono); letter-spacing: .2em; color: var(--amber); margin-right: 10px; } .lib-req-h span { font: 10px var(--mono); letter-spacing: .06em; color: #6f899b; }
.lib-req-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lib-req-row > button { display: flex; gap: 8px; align-items: center; padding: 6px 10px !important; border-radius: 0 !important; font: 600 11px var(--mono) !important; color: #a9c0cf !important;
  background: rgba(6, 14, 26, .7) !important; border: 1px solid rgba(255, 176, 32, .35) !important; }
.lib-req-row > button i { font-style: normal; color: var(--amber); } .lib-req-row > button.on { color: #04060b !important; background: var(--amber) !important; } .lib-req-row > button.on i { color: #04060b; }
#lib-req-f { display: flex; gap: 4px; margin-left: auto; } #lib-req-in { width: 230px; max-width: 60vw; padding: 6px 8px; font: 11px var(--mono); }
#lib-req-f button { padding: 6px 10px !important; font: 700 9px var(--mono) !important; letter-spacing: .16em; border-radius: 0 !important; }
.lib-req-done span { margin-right: 14px; font: 10px var(--mono); color: #7fe0a0; }
@media (max-width: 700px) { #lib-req-f { margin-left: 0; width: 100%; } #lib-req-in { flex: 1; width: auto; } }