/* Eve WebTools — harmonisation layer for Tether.
   Load it LAST on index.html and auth/index.html, after tether.css (and after the inline <style> of the login page).
   It restyles the selectors Tether already uses (see the brand book, "Harmonisation plan").
   The text ladder itself (16 grid -> 14 grid) is done in tether.css; this file only sets voices, colours and states.
   Data colours are not touched: system statuses, connection colours, security, wormhole effects.
   When /lib/ewt-core.css exists, these rules move there and into tether.css. */

:root {
    --textColor2: #6b6b6b;                 /* quiet text: was #474747 */
    --btnTextColourNormal: #6b6b6b;
    --btnTextColourHover: #9e9e9e;
    --btnTextColourSelected: #d2d2d2;
    --btnMark: inset 0 -2px 0 #d2d2d2;
    --ok: #48f0c0;  --bad: #ff9a9a;  --badFrame: #ff5c5c;
}

/* ============================================================ 1. buttons */
/* -- menu buttons: change a setting, filter or layer of the current view */
.barBtn, .toggleBtn, .miniBtn, .tab {
    background: none; border: 1px solid #313131; color: var(--btnTextColourNormal);
    box-shadow: none; transition: color .15s linear;
}
.barBtn { padding-bottom: 7px; }
.toggleBtn { padding-bottom: 2px; }                      /* fixed 30px box: the label moves up by half the mark */
.miniBtn { padding: 2px 8px 4px; }
.tab { padding: 5px 11px 7px; }
.barBtn:hover, .toggleBtn:hover, .miniBtn:hover, .tab:hover { color: var(--btnTextColourHover); }
.barBtn:disabled, .barBtn:disabled:hover, .miniBtn:disabled, .miniBtn:disabled:hover { color: var(--btnTextColourNormal); }
.miniBtn:disabled { opacity: .45; cursor: not-allowed; }
.barBtn-active, .barBtn-active:hover, .barBtn-active:disabled,
.toggleBtn[aria-pressed="true"], .toggleBtn[aria-pressed="true"]:hover,
.miniBtn-active, .miniBtn-active:hover, .miniBtn-active:disabled, .miniBtn-active:disabled:hover,
.tab-active, .tab-active:hover {
    background: none; color: var(--btnTextColourSelected); box-shadow: var(--btnMark);
}

/* -- tabs: swap what a panel shows. Frameless, on the panel hairline */
#sigTabs { gap: 0; border-bottom: 1px solid #313131; padding-top: 4px; }
#sigTabs .tab { border: 0; margin-bottom: -1px; padding: 6px 12px 8px; }
#sigTabs .tabAction { align-self: center; margin-bottom: 4px; }

/* -- action buttons: do something */
.btn {
    font-family: 'Shentox Medium', 'Segoe UI', sans-serif; font-size: 0.8571em; letter-spacing: 1px; text-transform: uppercase;
    padding: 0.6em 1.6em calc(0.6em + 2px); line-height: 1.2;
    background: none; border: 1px solid #313131; color: var(--btnTextColourNormal);
    box-shadow: none; transition: color .15s linear;
}
.btn-sm { font-size: 0.7143em; padding: 0.55em 1.1em calc(0.55em + 2px); }
.panelFoot .btn-sm { font-size: 0.8333em; }                /* inside the 0.8571em footer: back to 0.7143em */
.intelHead .btn-sm { font-size: 0.9091em; }                /* inside the 0.7857em head */
#sigFoot .btn-sm { padding: 0.35em 1.1em calc(0.35em + 2px); }
.btn:hover { color: var(--btnTextColourHover); }
.btn:active { color: var(--btnTextColourSelected); box-shadow: var(--btnMark); }
/* primary: one per view, bright at rest, no fill, same frame */
.btn-primary { background: none; border-color: #313131; color: var(--btnTextColourSelected); }
.btn-primary:hover { color: #ffffff; }
.btn-primary:active { box-shadow: none; }
/* danger: quiet at rest; as the confirming action of a dialog it rests bright like a primary */
.btn-danger { color: var(--btnTextColourNormal); }
.btn-danger:hover { border-color: #313131; color: #ff9a9a; }
.btn-danger:active { color: #ff9a9a; box-shadow: inset 0 -2px 0 #ff5c5c; }
.dlgFoot .btn-danger { color: var(--btnTextColourSelected); }
.dlgFoot .btn-danger:hover { color: #ff9a9a; }
.btn:disabled, .btn:disabled:hover { opacity: .45; box-shadow: none; }
.btn:disabled:hover { color: var(--btnTextColourNormal); }
.btn-primary:disabled:hover { color: var(--btnTextColourSelected); }
.dlgFile::file-selector-button { border: 1px solid #313131; color: var(--btnTextColourNormal); transition: color .15s linear; }
.dlgFile::file-selector-button:hover { border-color: #313131; color: var(--btnTextColourHover); }
.tileBtns, .detBtns, .ovActions .tabRow { gap: 3px; }
.ovActions { gap: 10px; }

/* ============================================================ 2. icon buttons */
.menuIcon svg { stroke: var(--btnTextColourNormal); transition: stroke .15s linear; }
.menuIcon:hover svg { stroke: var(--btnTextColourHover); }
.menuIcon-active svg, .menuIcon-active:hover svg, .menuIcon[aria-expanded="true"] svg { stroke: var(--btnTextColourSelected); }
.menuIcon-active, .menuIcon[aria-expanded="true"] { box-shadow: var(--btnMark); }
/* the sheet on screen marks its icon (the overlays are appended to #mapArea; no class is set on the button) */
body:has(.ovBackdrop:not([hidden]) .tileGrid) #btnMaps,
body:has(.ovBackdrop:not([hidden]) .split) #btnAccess,
body:has(.ovBackdrop:not([hidden]) .helpBody) #btnHelp { box-shadow: var(--btnMark); }
body:has(.ovBackdrop:not([hidden]) .tileGrid) #btnMaps svg,
body:has(.ovBackdrop:not([hidden]) .split) #btnAccess svg,
body:has(.ovBackdrop:not([hidden]) .helpBody) #btnHelp svg { stroke: var(--btnTextColourSelected); }

.iconLink svg { stroke: var(--btnTextColourNormal); transition: stroke .15s linear; }
.iconLink:hover svg { stroke: var(--btnTextColourHover); }
.sysHead .links a, .sysHead .links a:hover { border-color: #313131; }
.sysHead .links svg { stroke: var(--btnTextColourNormal); transition: stroke .15s linear; }
.sysHead .links a:hover svg { stroke: var(--btnTextColourHover); }

.panelBtn, .ovClose, #zoomBox button, .pilotAdd, .mapChip button, .sigRow .del, .intelRow .del, .entryRow .eDel {
    color: var(--btnTextColourNormal); transition: color .15s linear;
}
.panelBtn:hover, .ovClose:hover, #zoomBox button:hover, .pilotAdd:hover, .mapChip button:hover { color: var(--btnTextColourHover); }
.panelBtn:active, .ovClose:active, #zoomBox button:active, .pilotAdd:active { color: var(--btnTextColourSelected); }
.pilotAdd, .pilotAdd:hover { border-color: #313131; }
/* framed close on dialogs and sheets */
.ovClose { border: 1px solid #313131; font-size: 1em; line-height: 1.2; padding: 3px 9px; font-family: inherit; }
/* delete icons turn red on hover; their frame, if any, does not change */
.sigRow .del:hover, .intelRow .del:hover { border-color: transparent; color: #ff9a9a; }
.entryRow .eDel:hover { border-color: #313131; color: #ff9a9a; }
/* icon-only action buttons (map tiles) */
.btn.iconBtn { padding: 0; }
.btn.iconBtn.act-delete:hover { color: #ff9a9a; }

/* ============================================================ 3. rows, lists, menus (near-opaque surfaces) */
.row.click:hover, .killRow:hover, .listItem:hover, .dlgCheck:hover, .popMenu .pmItem:hover, .srItem:hover, .srItem.sel,
.cmItem:hover, .cmItem:focus-visible { background-color: #d2d2d214; }
.row.click:hover, .cmItem:hover, .cmItem:focus-visible { color: #d2d2d2; }
.listItem.sel, .listItem.sel:hover { background-color: #d2d2d214; box-shadow: inset 3px 0 0 #d2d2d2; }   /* rows keep the left tick */
.cmItem:disabled:hover { background: none; color: var(--textColor); }
/* context menu: a destructive entry is quiet until pointed at */
.cmItem.cmDanger { color: var(--textColor); }
.cmItem.cmDanger:hover, .cmItem.cmDanger:focus-visible { color: #ff9a9a; }
.cmTitle { letter-spacing: 1.5px; }
.cmSub .cmItem { font-size: 1em; }                        /* sub-menu entries: same size as their parent entry, not a fraction of it */
.popMenu .pmSep { background: #313131; }
.dlgCheckField:hover { background: none; }

/* ============================================================ 4. picker: the map name keeps a bright frame on hover and while its list is open */
#mapName { transition: border-color .15s linear; }
#mapName:hover, body:has(.ovBackdrop:not([hidden]) .tileGrid) #mapName { border-color: #d2d2d2; }
body:has(.ovBackdrop:not([hidden]) .tileGrid) #mapName .caret { border-top-color: #d2d2d2; }

/* ============================================================ 5. fields */
#mapSearch, .paneSearch { height: 34px; background-color: #00000060; border: 1px solid #313131; }
.dlgInput, .notesArea { background-color: #00000060; border: 1px solid #313131; color: #d2d2d2; }
.dlgInput { min-height: 34px; }
#mapSearch:focus-within, .paneSearch:focus-within, .dlgInput:focus, .notesArea:focus { border-color: #d2d2d2; }
#mapSearchInput::placeholder, .paneSearch input::placeholder, .dlgInput::placeholder, .notesArea::placeholder, .sigEdit::placeholder { color: #6b6b6b; }
.sigRow .ed:empty::before { color: #6b6b6b; }
/* invalid: the required field left empty takes the error frame while the error line is shown */
.dlg:has(.dlgError:not([hidden])) .dlgInput:required:invalid { border-color: #ff5c5c; }
.dlgError { color: #ff9a9a; }
/* labels: above the field */
.dlgLabel { font-size: 0.7857em; letter-spacing: 1px; text-transform: uppercase; color: #6b6b6b; }
.dlgOpt { text-transform: none; letter-spacing: 0; }
/* dark checkbox: no system blue */
.dlgCheck input[type="checkbox"] {
    appearance: none; -webkit-appearance: none; width: 14px; height: 14px; margin: 0; flex-shrink: 0;
    border: 1px solid #313131; background-color: #00000060; cursor: pointer;
}
.dlgCheck input[type="checkbox"]:checked { background-color: #d2d2d2; box-shadow: inset 0 0 0 3px #101010; }
.dlgCheck input[type="checkbox"]:focus-visible { outline: 1px solid #d2d2d2; outline-offset: 2px; }
select { color-scheme: dark; background-color: #00000060; border: 1px solid #313131; color: #d2d2d2; }
select:focus { border-color: #d2d2d2; }

/* ============================================================ 6. dialogs, sheets, toasts */
.dlgBackdrop, .ovBackdrop { background: #00000080; }
.dlg, .ovSheet { background-color: #0d0d0df7; border: 1px solid #313131; border-radius: 0; box-shadow: none; text-align: left; }
.dlgHead { padding: 8px 8px 8px 14px; }
.ovHead { padding: 8px 8px 8px 18px; }
.dlgFoot { border-top: 1px solid #313131; justify-content: flex-end; gap: 6px; }
/* toast: pop-over surface, the status tone on its frame; no coloured left edge */
.notice { border: 1px solid #313131; }
.notice-error { border-color: #ff5c5c80; }
.notice-warn { border-color: #ffb64866; }
#loginError { border: 1px solid #ff5c5c80; background-color: #ff5c5c0d; color: #ff9a9a; }
#mapTooltip { border-color: #313131; }

/* ============================================================ 7. titles */
/* panel title: floating panels, dialogs, sheets */
.panelTitle, .dlgTitle, .ovTitle {
    font-family: 'Shentox Medium', 'Segoe UI', sans-serif; font-size: 0.8571em; letter-spacing: 2px; text-transform: uppercase; color: #d2d2d2;
}
.panelTitle .panelMeta { font-family: 'Shentox Regular', 'Segoe UI', sans-serif; letter-spacing: 1px; color: #6b6b6b; }
/* section label: captions under figures, group heads */
.stat .statL, .secHead .secLabel, .intelHead {
    font-size: 0.7857em; letter-spacing: 1.5px; text-transform: uppercase; color: #6b6b6b;
}
.intelHead .k { color: #6b6b6b; }
/* table heads; their columns are the row's columns restated at the head's own font size, so head and cells line up */
.sigRow.hd, .entryRow.hd { letter-spacing: 1.5px; color: #6b6b6b; }
/* the "new" dot sits inside the 8px column gap, clear of the group icon */
.sigRow.isNew .id::before { margin: 0 0.15em 0.1667em -0.5667em; }
.sigRow.hd { grid-template-columns: 1.6em 5.8em minmax(0, 1fr) minmax(0, 1fr) 3.6em 5.8em 5.8em 2.6em; }
.entryRow.hd { grid-template-columns: 3.2em minmax(0, 1fr) 11em 9.6em 3.2em; }

/* ============================================================ 8. chips and tags */
/* outlined tag: information, never reacts */
.chip { font-size: 0.7143em; letter-spacing: 1px; text-transform: uppercase; padding: 1px 6px; border: 1px solid #313131; color: #999999; }
/* value chip: removable, framed, still; its x stays neutral */
.mapChip { font-size: 0.8571em; padding: 3px 4px 3px 9px; gap: 6px; border: 1px solid #313131; color: #d2d2d2; }
.mapChip button:hover { color: var(--btnTextColourHover); }
/* filled tag: dark text on the kind colour, the blocked level included */
.badge { font-size: 0.7143em; letter-spacing: 1px; text-transform: uppercase; padding: 1px 6px; color: #151515; }
.badge-viewer, .badge-default { background: #d2d2d2a0; }
.badge-blocked { background: #ff5c5c; color: #151515; }

/* ============================================================ 9. quiet text and status tones */
#mapMeta .dim, .row .nm-off, .sigRow .id-dim, .sigRow .dim, .sigRow .upd, .tileDesc.empty, .cmHint, .logWhen { color: #6b6b6b; }
#mapBar.readOnly #editGroup .barLabel::after { color: #6b6b6b; }
.sys text.sub, .sys text.sub2 { fill: #6b6b6b; }
.stat.st-hot .statV { color: #ff7a5c; }                    /* heat figure */

/* ============================================================ 10. motion */
.row, .listItem, .srItem, .cmItem, .pmItem, .killRow, .dlgCheck, .tileName, .extLink { transition: color .15s linear, background-color .15s linear; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ============================================================ 11. keyboard focus */
a:focus-visible, button:focus-visible, [role="tab"]:focus-visible, [tabindex]:focus-visible { outline: 1px solid #d2d2d2; outline-offset: 2px; }
.listItem:focus-visible, .srItem:focus-visible, .pmItem:focus-visible, .cmItem:focus-visible, .killRow:focus-visible, .tile-new:focus-visible { outline: 1px solid #d2d2d2; outline-offset: -1px; }
#map:focus-visible, .ovSheet:focus-visible { outline: none; }
input:focus-visible, textarea:focus-visible { outline: none; }      /* fields show focus on their frame */

/* ============================================================ scrollbars: one dark bar, 10px, thumb #313131 -> #6b6b6b -> #9e9e9e */
*::-webkit-scrollbar { width: 10px !important; height: 10px !important; }
*::-webkit-scrollbar-track, *::-webkit-scrollbar-corner { background: transparent !important; }
*::-webkit-scrollbar-button { display: none !important; }
*::-webkit-scrollbar-thumb { background-color: #313131 !important; border: 2px solid transparent !important; background-clip: padding-box !important; border-radius: 0 !important; min-height: 28px; }
*::-webkit-scrollbar-thumb:hover { background-color: #6b6b6b !important; }
*::-webkit-scrollbar-thumb:active { background-color: #9e9e9e !important; }
textarea::-webkit-scrollbar { width: 6px !important; height: 6px !important; }
textarea::-webkit-scrollbar-thumb { border-width: 1px !important; }
/* Chromium ignores the rules above on any element that sets scrollbar-color, so clear it there; Firefox has no ::-webkit-scrollbar and takes the standard properties */
@supports selector(::-webkit-scrollbar) { * { scrollbar-color: auto !important; } }
@supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: #313131 transparent !important; } }