/* ostnoctua.css — increment 1 shell.
   Layout follows Noctua: a full-viewport background with content-sized glass
   panels floating on top. Tokens come from Noctua's themes.css. */

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    overflow: hidden;
    background: var(--bg-primary, #020205);
    color: var(--text-primary, #fff);
    font: 13px/1.4 'Segoe UI', system-ui, sans-serif;
}

/* thin, glass-toned scrollbars everywhere it overflows */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-default, rgba(0, 255, 204, 0.25)) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--border-default, rgba(0, 255, 204, 0.2));
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--accent-dim, rgba(0, 255, 204, 0.45));
    background-clip: padding-box;
}
::-webkit-scrollbar-corner { background: transparent; }

/* full-viewport background; the navigator template mounts a sky-map canvas here */
#on-bg {
    position: fixed; inset: 0; z-index: 0;
    background: var(--bg-secondary, #010103);
    overflow: hidden;
}
#on-bg canvas { display: none; }
#on-bg.sky-active { background: #04060d; }
#on-bg.sky-active canvas { display: block; }
/* templates that show an image as the background (guider, capture, …) */
#on-bg.img-active { background: #05070c; }
#on-bg-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;          /* fill the viewport, letterbox, never stretch */
    image-rendering: pixelated;
    opacity: 0.92;
    cursor: zoom-in;
}

/* floating glass surface — mirrors Noctua's .glass-panel */
.on-glass {
    background: var(--bg-panel, rgba(8, 8, 25, 0.65));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border-default, rgba(0, 255, 204, 0.15));
    border-radius: 12px;
    box-shadow: var(--shadow-panel, 0 8px 32px rgba(0, 0, 0, 0.5));
}

/* ---------------------------------------------------------- module bar */
/* content-width pill, floating top-left */
.on-modbar {
    position: fixed; top: 12px; left: 12px; z-index: 20;
    display: flex; gap: 6px;
    padding: 8px;
    max-width: calc(100vw - 24px);
    overflow-x: auto; scrollbar-width: thin;
}
.on-mod {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px;
    width: 56px; height: 56px;
    background: var(--accent-faint, rgba(0, 255, 204, 0.08));
    color: var(--text-muted, #888);
    border: 1px solid var(--accent-faint, rgba(0, 255, 204, 0.08));
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.on-mod:hover {
    color: var(--text-secondary, #ccc);
    border-color: var(--accent-dim, rgba(0, 255, 204, 0.4));
}
.on-mod:hover .material-icons { transform: scale(1.15); }
.on-mod.active {
    background: var(--accent-subtle, rgba(0, 255, 204, 0.15));
    color: var(--accent, #00ffcc);
    border-color: var(--accent, #00ffcc);
    box-shadow: 0 0 12px var(--accent-subtle, rgba(0, 255, 204, 0.15));
}
.on-mod .material-icons { font-size: 22px; transition: transform 0.2s; }
.on-mod-label {
    font-size: 9px; letter-spacing: 0.5px;
    max-width: 52px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ------------------------------------------------------ connection pill */
.on-conn-cluster {
    position: fixed; top: 12px; right: 12px; z-index: 20;
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px;
}
.on-brand { font-weight: 700; letter-spacing: 0.5px; white-space: nowrap; }
.on-conn { font-size: 11px; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.on-conn.on  { background: rgba(60, 190, 110, 0.18); color: #6fe0a0; }
.on-conn.off { background: rgba(190, 70, 70, 0.18);  color: #ef9a9a; }
.on-host {
    width: 138px; padding: 4px 8px; border-radius: 6px;
    border: 1px solid var(--border-default, rgba(0, 255, 204, 0.15));
    background: var(--bg-input, rgba(10, 10, 30, 0.8)); color: inherit; font: inherit;
}
.on-lang {
    padding: 4px 6px; border-radius: 6px; cursor: pointer;
    border: 1px solid var(--border-default, rgba(0, 255, 204, 0.15));
    background: var(--bg-input, rgba(10, 10, 30, 0.8)); color: inherit; font: inherit;
    text-transform: uppercase;
}
.btn {
    padding: 4px 10px; border-radius: 6px; cursor: pointer; white-space: nowrap;
    border: 1px solid var(--border-default, rgba(0, 255, 204, 0.15));
    background: var(--accent-faint, rgba(0, 255, 204, 0.08)); color: inherit; font: inherit;
}
.btn:hover { border-color: var(--accent-dim, rgba(0, 255, 204, 0.4)); }

/* ------------------------------------------------- floating panel layer */
#on-layer {
    position: fixed; inset: 0; z-index: 10;
    pointer-events: none;          /* only the panels are interactive */
}
.on-float {
    position: absolute;
    pointer-events: auto;
    min-width: 180px; max-width: 92vw;
    display: flex; flex-direction: column;
}
.on-float-bar {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 6px 5px 8px;
    cursor: grab;
    user-select: none;
    border-bottom: 1px solid var(--border-default, rgba(0, 255, 204, 0.15));
}
.on-float.dragging .on-float-bar { cursor: grabbing; }
.on-float.dragging { opacity: 0.9; }
.on-float-grip { opacity: 0.35; letter-spacing: -3px; font-size: 12px; }
.on-float-title {
    flex: 1;
    font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
    text-transform: uppercase; opacity: 0.7;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.on-float-min {
    border: 0; background: transparent; color: inherit;
    cursor: pointer; font-size: 15px; line-height: 1; opacity: 0.55;
    padding: 0 5px;
}
.on-float-min:hover { opacity: 1; }
.on-float-body {
    padding: 10px 12px;
    overflow: auto;
    max-height: 72vh;
}
.on-float.collapsed .on-float-body { display: none; }
.on-float.collapsed .on-float-bar { border-bottom: 0; }

/* resize grip (bottom-right) */
.on-float-resize {
    position: absolute; right: 2px; bottom: 2px;
    width: 16px; height: 16px; cursor: nwse-resize; pointer-events: auto;
    opacity: 0.4;
    background:
        linear-gradient(135deg, transparent 44%, var(--accent, #00ffcc) 44% 56%, transparent 56%),
        linear-gradient(135deg, transparent 66%, var(--accent, #00ffcc) 66% 80%, transparent 80%);
}
.on-float-resize:hover { opacity: 0.9; }
.on-float.collapsed .on-float-resize { display: none; }
.on-float.resizing { user-select: none; }
/* explicit size: the body (and a log list inside it) fills the panel */
.on-float.resized { max-width: none; }
.on-float.resized .on-float-body {
    flex: 1 1 auto; min-height: 0; max-height: none;
    display: flex; flex-direction: column;
}
.on-float.resized .w-log-list { flex: 1 1 auto; max-height: none; }

.on-hint { opacity: 0.6; }
.on-hint-card { position: absolute; left: 20px; top: 76px; padding: 14px 18px; pointer-events: auto; }
.on-count { font-size: 11px; opacity: 0.5; display: block; margin-bottom: 8px; }

.on-prop {
    border: 1px solid var(--border-default, rgba(0, 255, 204, 0.15));
    border-radius: 8px; padding: 10px 12px; margin-bottom: 10px;
    background: var(--bg-panel-solid, rgba(10, 10, 30, 0.4));
}
.on-prop-title { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.on-prop-label { font-weight: 600; }
.on-prop-state { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.on-prop-state.idle  { background: var(--text-dim, #6b7280); }
.on-prop-state.ok    { background: #3cbe6e; }
.on-prop-state.busy  { background: #e0a63c; }
.on-prop-state.error { background: #ef5350; }

.on-elt { display: flex; justify-content: space-between; gap: 16px; padding: 2px 0; }
.on-elt-label { color: var(--text-secondary, #ccc); opacity: 0.8; }
.on-elt-value { font-variant-numeric: tabular-nums; text-align: right; }

/* ------------------------------------------------------ navigator template */
.nv-search { display: flex; gap: 6px; }
.nv-input {
    flex: 1; min-width: 0;
    padding: 5px 9px; border-radius: 6px;
    border: 1px solid var(--border-default, rgba(0, 255, 204, 0.15));
    background: var(--bg-input, rgba(10, 10, 30, 0.8)); color: inherit; font: inherit;
}
.nv-input[type="number"] { width: 90px; flex: none; }
.btn .material-icons { font-size: 18px; vertical-align: middle; }
.btn > span + span { margin-left: 5px; }

/* results table */
.nv-table { display: flex; flex-direction: column; font-size: 12px; }
.nv-search + .nv-table { margin-top: 8px; }
.nv-tr {
    display: grid;
    grid-template-columns: 80px 1fr 70px 70px 48px 48px 70px;
    gap: 8px; padding: 4px 6px; border-radius: 5px; cursor: pointer;
}
.nv-tr:hover:not(.nv-th) { background: var(--accent-faint, rgba(0, 255, 204, 0.08)); }
.nv-th {
    cursor: default; opacity: 0.5; font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-default, rgba(0, 255, 204, 0.15));
}
.nv-td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nv-empty { padding: 12px 6px; opacity: 0.5; }

/* readout rows */
.nv-ro { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
.nv-ro-label { opacity: 0.65; }
.nv-ro-value { font-variant-numeric: tabular-nums; font-weight: 600; }

/* sky display selector */
.nv-section-label {
    margin: 8px 0 3px; font-size: 10px; opacity: 0.55;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.nv-section-label:first-child { margin-top: 0; }
.nv-cb { display: flex; align-items: center; gap: 7px; padding: 2px 0; font-size: 12px; cursor: pointer; }
.nv-cb input { flex: none; }
.nv-slider { margin: 6px 0 2px; }
.nv-slider-label { display: flex; justify-content: space-between; font-size: 12px; opacity: 0.8; }
.nv-slider-val { font-variant-numeric: tabular-nums; font-weight: 600; opacity: 1; }
.nv-slider input[type="range"] { width: 100%; margin-top: 3px; accent-color: var(--accent, #00ffcc); }

/* -------------------------------------------------------- reusable widgets */
.w-toolbar {
    display: flex; align-items: center; gap: 4px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-default, rgba(0, 255, 204, 0.15));
}
.w-iconbtn {
    border: 0; background: transparent; color: inherit; cursor: pointer;
    padding: 3px; border-radius: 5px; opacity: 0.65; display: flex;
}
.w-iconbtn:hover { opacity: 1; background: var(--accent-faint, rgba(0, 255, 204, 0.08)); }
.w-iconbtn .material-icons { font-size: 18px; }
.w-prof-name { flex: 1; font-size: 12px; opacity: 0.75; }
.w-prof-name.changed { color: var(--accent, #00ffcc); opacity: 1; }

.w-list { display: flex; flex-direction: column; }
.w-empty { opacity: 0.5; font-size: 12px; padding: 6px 2px; }

/* params: level1 tabs */
.w-tabs { display: flex; gap: 2px; margin-bottom: 8px; flex-wrap: wrap; }
.w-tab {
    border: 0; cursor: pointer; font: inherit; font-size: 11px;
    padding: 3px 9px; border-radius: 6px 6px 0 0;
    background: var(--accent-faint, rgba(0, 255, 204, 0.08)); color: inherit; opacity: 0.6;
}
.w-tab:hover { opacity: 0.9; }
.w-tab.active { opacity: 1; background: var(--accent-subtle, rgba(0, 255, 204, 0.15)); color: var(--accent, #00ffcc); }
.w-tab-pane.hidden { display: none; }
.w-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 3px 0; }
.w-field-label { opacity: 0.7; }

/* log */
.w-log-filter {
    padding: 2px 6px; border-radius: 5px; font: inherit; color: inherit;
    border: 1px solid var(--border-default, rgba(0, 255, 204, 0.15));
    background: var(--bg-input, rgba(10, 10, 30, 0.8));
}
.w-log-list {
    display: flex; flex-direction: column;
    font: 11px/1.35 ui-monospace, Menlo, Consolas, monospace;
    max-height: 46vh; overflow-y: auto;
}
.w-log-row { display: flex; gap: 6px; padding: 1px 0; white-space: nowrap; }
.w-log-time { opacity: 0.45; flex-shrink: 0; }
.w-log-src { color: var(--accent, #00ffcc); opacity: 0.7; flex-shrink: 0; }
.w-log-msg { overflow: hidden; text-overflow: ellipsis; }
.w-log-row.lvl-dbg  { opacity: 0.5; }
.w-log-row.lvl-warn .w-log-msg { color: #e0a63c; }
.w-log-row.lvl-err  .w-log-msg { color: #ef5350; }

/* actions */
.w-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.w-act { display: flex; align-items: center; gap: 5px; }
.w-act.active {
    color: var(--accent, #00ffcc);
    border-color: var(--accent, #00ffcc);
    background: var(--accent-subtle, rgba(0, 255, 204, 0.15));
}
.on-float.busy { border-color: var(--accent, #00ffcc); box-shadow: 0 0 12px var(--accent-subtle, rgba(0, 255, 204, 0.15)); }

/* -------------------------------------------------------- guider charts */
.gd-chart { position: relative; width: 100%; height: 280px; }
.gd-chart-square { height: auto; }

/* -------------------------------------------------------- focus template */
.fc-progress {
    height: 8px; margin: 8px 0; border-radius: 4px; overflow: hidden;
    background: var(--bg-input, rgba(10, 10, 30, 0.8));
}
.fc-progress-bar {
    height: 100%; width: 0;
    background: var(--accent-dim, rgba(0, 255, 204, 0.5));
    transition: width 0.25s ease;
}
.fc-progress.busy .fc-progress-bar { background: var(--accent, #00ffcc); }
.fc-results { display: flex; gap: 18px; margin-top: 6px; }
.fc-res { display: flex; flex-direction: column; }
.fc-res-label { font-size: 10px; opacity: 0.55; text-transform: uppercase; letter-spacing: 0.5px; }
.fc-res-value { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* guider "values" — RMS foregrounded, pulses backgrounded */
.gd-val { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 2px 0; }
.gd-val-label { opacity: 0.7; }
.gd-val-value { font-variant-numeric: tabular-nums; font-weight: 600; }
.gd-val-rms .gd-val-value { font-size: 15px; }

/* the four pulses: a compact N/S/E/W grid, kept in the background */
.gd-pulses { margin-top: 6px; opacity: 0.55; }
.gd-pulses-h, .gd-pulses-v {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; text-align: center;
}
.gd-pulses-h span { font-size: 9px; opacity: 0.7; letter-spacing: 0.5px; }
.gd-pulses-v span { font-size: 11px; font-variant-numeric: tabular-nums; }
.gd-val-total { margin-bottom: 4px; padding-bottom: 4px; border-bottom: 1px solid var(--border-default, rgba(0, 255, 204, 0.15)); }
.gd-val-total .gd-val-label { opacity: 0.85; text-transform: uppercase; letter-spacing: 0.5px; font-size: 11px; }
.gd-val-total .gd-val-value { font-size: 22px; font-weight: 700; color: var(--accent, #00ffcc); }

/* -------------------------------------------------- shared image helpers */
/* fullscreen viewer */
.oi-viewer {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(2, 3, 8, 0.93);
    backdrop-filter: blur(3px);
}
.oi-stage {
    position: absolute; inset: 0;
    overflow: hidden;
    cursor: grab;
}
.oi-stage.grabbing { cursor: grabbing; }
.oi-img {
    position: absolute; top: 0; left: 0;
    transform-origin: 0 0;
    image-rendering: pixelated;
    user-select: none; -webkit-user-drag: none;
}
.oi-close {
    position: absolute; top: 14px; right: 18px;
    width: 34px; height: 34px; border-radius: 8px;
    font-size: 22px; line-height: 1; cursor: pointer;
    border: 1px solid var(--border-default, rgba(0, 255, 204, 0.2));
    background: var(--bg-panel, rgba(8, 8, 25, 0.7)); color: inherit;
}
.oi-close:hover { border-color: var(--accent-dim, rgba(0, 255, 204, 0.5)); }

/* stats + histogram panel */
.oi-stats { font-size: 12px; }
.oi-sec {
    margin: 8px 0 3px; font-size: 10px; opacity: 0.55;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.oi-sec:first-child { margin-top: 0; }
.oi-row { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
.oi-k { opacity: 0.7; }
.oi-v { font-variant-numeric: tabular-nums; font-weight: 600; }
.oi-tbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.oi-tbl th, .oi-tbl td { padding: 3px 6px; text-align: right; }
.oi-tbl th:first-child, .oi-tbl td:first-child { text-align: left; opacity: 0.7; font-weight: 500; }
.oi-tbl th { font-size: 10px; opacity: 0.6; border-bottom: 1px solid var(--border-default, rgba(0, 255, 204, 0.15)); }
.oi-histo { position: relative; width: 100%; height: 150px; margin-top: 8px; }
/* alternates / heatmaps grid */
.oi-thumbs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.oi-thumb {
    aspect-ratio: 1; overflow: hidden; border-radius: 6px; cursor: zoom-in;
    border: 1px solid var(--border-default, rgba(0, 255, 204, 0.15));
    background: var(--bg-input, rgba(10, 10, 30, 0.6));
}
.oi-thumb:hover { border-color: var(--accent-dim, rgba(0, 255, 204, 0.45)); }
.oi-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* -------------------------------------------------------------- narrow */
@media (max-width: 760px) {
    .on-mod-label { display: none; }
    .on-mod { width: 44px; height: 44px; }
    .on-brand { display: none; }
}