/* Eve WebTools — DEV LOG window (lib/ewt-devlog.js), the brand book's: one tile, the picture of the moment as the band of
   its head, outlined version tag, the FEEDBACK action button, frameless tabs with the bottom mark, text 1em and derived.
   Needs --moment (res/moment/moment.css, imported by every module's stylesheet). */
#dlDim { position: fixed; inset: 0; z-index: 8000; background-color: #00000099; }
#dlDim[hidden], #dlWin[hidden], #dlWin .dlBd[hidden], #dlWin #dlTabs[hidden], #dlWin #dlVer[hidden] { display: none !important; }
#dlWin { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max(50vw, 720px); max-width: calc(100% - 32px); height: 86%; max-height: calc(100% - 32px); z-index: 8001;
    background-color: #0d0d0df7; border: 1px solid #313131; box-shadow: 0 0 60px #000000b0; display: flex; flex-direction: column; color: #999999; font-family: 'Shentox Regular', 'Segoe UI', sans-serif; font-size: 1em; line-height: 1.3; box-sizing: border-box; }
#dlWin * { box-sizing: border-box; }
body.dlOpen { overflow: hidden; }
/* the band */
#dlWin .dlBand { position: relative; height: 128px; display: flex; align-items: flex-end; justify-content: space-between; padding: 14px 22px; overflow: hidden; flex-shrink: 0; border-bottom: 1px solid #313131; }
#dlWin .dlBand::before { content: ''; position: absolute; inset: 0; background: var(--moment) center 30% / cover no-repeat; filter: saturate(.85) brightness(.75); }
#dlWin .dlBand::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #0d0d0df2 0%, #0d0d0da0 45%, #0d0d0d40 100%), linear-gradient(0deg, #0d0d0df7 0, transparent 60%); }
#dlWin .dlBand > * { position: relative; z-index: 1; }
#dlWin .dlMod { display: block; font-family: 'Shentox Medium', 'Segoe UI', sans-serif; font-size: .7143em; letter-spacing: 3px; color: #999999; }
#dlWin h3 { margin: 2px 0 4px; font-family: 'Shentox Medium', 'Segoe UI', sans-serif; font-weight: normal; font-size: 1.4286em; letter-spacing: 4px; color: #d2d2d2; }
#dlWin .dlV2 { font-size: .7857em; color: #6b6b6b; letter-spacing: 1px; }
#dlWin .dlBandR { display: flex; align-items: center; gap: 8px; align-self: flex-start; }
#dlWin .dlVer { font-size: .7857em; letter-spacing: 1px; padding: 2px 7px; border: 1px solid #313131; color: #999999; font-variant-numeric: tabular-nums; background-color: #0d0d0dcc; white-space: nowrap; }
#dlWin .dlFb { font-family: 'Shentox Medium', 'Segoe UI', sans-serif; font-size: .7143em; letter-spacing: 1px; text-transform: uppercase; padding: .55em 1.1em calc(.55em + 2px); line-height: 1.2; background-color: #0d0d0dcc; border: 1px solid #313131; color: #6b6b6b; cursor: pointer; transition: color .15s linear; }
#dlWin .dlFb:hover { color: #9e9e9e; } #dlWin .dlFb:active { color: #d2d2d2; box-shadow: inset 0 -2px 0 #d2d2d2; }
#dlWin .dlX { background-color: #0d0d0dcc; border: 1px solid #313131; color: #6b6b6b; font-size: 1em; cursor: pointer; padding: 3px 9px; font-family: inherit; line-height: 1.2; transition: color .15s linear; }
#dlWin .dlX:hover { color: #9e9e9e; }
/* the tabs: frameless, the bottom mark on the chosen one */
#dlWin .dlTabs { display: flex; gap: 0; margin: 10px 22px 0; border-bottom: 1px solid #313131; flex-shrink: 0; font-size: .9286em; letter-spacing: 1px; text-transform: uppercase; }
#dlWin .dlTab { position: relative; background: none; border: 0; outline: none; margin-bottom: -1px; padding: 7px 14px 9px; font-family: inherit; font-size: inherit; letter-spacing: inherit; text-transform: inherit; color: #6b6b6b; cursor: pointer; transition: color .15s linear; }
#dlWin .dlTab:hover { color: #9e9e9e; } #dlWin .dlTab-active, #dlWin .dlTab-active:hover { color: #d2d2d2; }
#dlWin .dlTab-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background-color: #d2d2d2; }   /* the bottom mark, drawn (an inset shadow left a hairline on some screens) */
#dlWin .dlTab:focus-visible { outline: 1px solid #d2d2d2; outline-offset: -1px; }
#dlWin .dlCnt { margin-left: 6px; font-size: .8571em; color: #6b6b6b; letter-spacing: 0; }
/* the body; its scrollbar the site's own (harmonised.css), carried here for the modules that do not load it */
#dlWin .dlBd { overflow: auto; padding: 16px 22px 22px; flex: 1 1 auto; min-height: 0; }
@supports not selector(::-webkit-scrollbar) { #dlWin .dlBd { scrollbar-width: thin; scrollbar-color: #313131 transparent; } }   /* Firefox; Chromium drops ::-webkit-scrollbar where scrollbar-color is set */
#dlWin .dlBd::-webkit-scrollbar { width: 10px; height: 10px; }
#dlWin .dlBd::-webkit-scrollbar-track, #dlWin .dlBd::-webkit-scrollbar-corner { background: transparent; }
#dlWin .dlBd::-webkit-scrollbar-button { display: none; }
#dlWin .dlBd::-webkit-scrollbar-thumb { background-color: #313131; border: 2px solid transparent; background-clip: padding-box; border-radius: 0; min-height: 24px; }
#dlWin .dlBd::-webkit-scrollbar-thumb:hover { background-color: #6b6b6b; }
#dlWin .dlBd::-webkit-scrollbar-thumb:active { background-color: #9e9e9e; }
#dlWin .dlEmpty { color: #6b6b6b; padding: 12px 0; }
#dlWin .dlPhases { list-style: none; margin: 0; padding: 0 0 0 6px; }
#dlWin .dlPhase { position: relative; padding: 0 0 14px 22px; border-left: 1px solid #313131; }
#dlWin .dlPhase::before { content: ''; position: absolute; left: -5px; top: 4px; width: 9px; height: 9px; border: 1px solid #6b6b6b; background-color: #151515; }
#dlWin .dlPhase.done::before { background-color: #48f0c0; border-color: #48f0c0; }
#dlWin .dlPhase.next::before { border-color: #d2d2d2; }
#dlWin .dlPhase.now::before { border-color: #48f0c0; background: linear-gradient(90deg, #48f0c0 50%, #151515 50%); }
#dlWin .dlPhase.later { opacity: .75; }
#dlWin .dlPh { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
#dlWin .dlPn { font-family: 'Shentox Medium', 'Segoe UI', sans-serif; color: #d2d2d2; letter-spacing: 1px; }
#dlWin .dlPill { font-size: .7857em; letter-spacing: 1px; padding: 1px 6px; border: 1px solid #313131; color: #6b6b6b; text-transform: uppercase; white-space: nowrap; }
#dlWin .dlPill.done { border-color: #48f0c066; color: #48f0c0; }
#dlWin .dlPill.next { border-color: #6b6b6b; color: #d2d2d2; }
#dlWin .dlPill.now { border-color: #48f0c066; color: #48f0c0; }
#dlWin .dlWhen, #dlWin .dlLabel { margin-left: auto; font-size: .7857em; color: #6b6b6b; letter-spacing: 1px; }
#dlWin .dlLabel { margin-left: 0; color: #999999; }
#dlWin .dlItems { list-style: none; margin: 0; padding: 0; }
#dlWin .dlItems li { display: flex; gap: 10px; align-items: flex-start; padding: 5px 0; border-top: 1px solid #d2d2d20a; font-size: .9286em; line-height: 1.4; }
#dlWin .dlItems li em { font-style: normal; flex-shrink: 0; width: 1.2em; text-align: center; color: #6b6b6b; }
#dlWin .dlItems li em.done { color: #48f0c0; } #dlWin .dlItems li em.now { color: #d2d2d2; }
#dlWin .dlItems li span { color: #999999; }
#dlWin .dlDays .dlItems li { flex-wrap: wrap; gap: 0 10px; }
#dlWin .dlDays .dlK { width: 4.6em; text-align: left; font-size: .7857em; letter-spacing: 1px; text-transform: uppercase; padding-top: 2px; }
#dlWin .dlDays .dlK.new { color: #48f0c0; } #dlWin .dlDays .dlK.better { color: #9e9e9e; } #dlWin .dlDays .dlK.fix { color: #ffb648; }
#dlWin .dlDays .dlA { color: #6b6b6b; }
#dlWin .dlDays .dlT { flex-basis: 100%; padding-left: calc(4.6em * .7857 + 10px); color: #999999; }
#dlWin .dlV { font-size: .7857em; letter-spacing: 1px; padding: 1px 6px; border: 1px solid #313131; color: #6b6b6b; font-variant-numeric: tabular-nums; }
#dlWin .dlV.now { border-color: #48f0c066; color: #48f0c0; }
#dlWin .dlSep { list-style: none; display: flex; align-items: center; gap: 12px; padding: 6px 0 14px 22px; color: #6b6b6b; font-size: .7857em; letter-spacing: 2px; text-transform: uppercase; }
#dlWin .dlSep::after { content: ''; flex: 1; border-top: 1px solid #313131; }
#dlWin .dlRelease .dlPn { color: #48f0c0; }
@media (min-width: 1100px) { #dlWin .dlDays .dlItems li { flex-wrap: nowrap; } #dlWin .dlDays .dlA { width: 9em; flex-shrink: 0; } #dlWin .dlDays .dlT { flex-basis: auto; padding-left: 0; } }
@media (max-width: 760px) { #dlWin { width: calc(100% - 16px); height: calc(100% - 16px); } #dlWin .dlBand { height: 110px; padding: 12px 14px; } #dlWin .dlTabs { margin: 8px 14px 0; } #dlWin .dlBd { padding: 12px 14px 16px; } }
@media (prefers-reduced-motion: reduce) { #dlWin .dlFb, #dlWin .dlX, #dlWin .dlTab { transition: none; } }
/* the opener's dot: a change not seen yet on this browser */
[data-devlog] { position: relative; }
[data-devlog].dlNew::after { content: ''; position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background-color: #48f0c0; box-shadow: 0 0 6px #48f0c0; pointer-events: none; }