/* Sized in rem throughout (root font = --font-size-base, values are
   px-at-12 ÷ 12), so this panel's own TEXT SIZE slider reflows it live
   along with the rest of the shell. Hairlines stay px. */

.monitor {
    display: contents;
}

/* Slot metrics come from the shared .bar-icon-button /
   .bar-status-button classes in bar.css. */

/* ---- Display panel ----------------------------------------------- */

.monitor-panel {
    position: fixed;
    z-index: 150;
    width: 32.0833rem;
    max-width: calc(var(--viewport-w) - 16px);
    /* Never taller than the space beside the bar — the panel scrolls
       inside instead of running off screen (upstream's
       fittedContentHeight + ScrollView). */
    max-height: calc(var(--viewport-h) - var(--bar-height) - 10px);
    overflow-y: auto;
    padding: 1.6667rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.1667rem;
    background: var(--color-background);
    border: var(--border-width) solid var(--color-accent);
    border-radius: var(--radius);
    color: var(--color-foreground);
}

/* Sections keep their size and overflow into the scroll instead of
   being crushed by the max-height. */
.monitor-panel > * {
    flex: none;
}

html[data-bar-position="left"] .monitor-panel,
html[data-bar-position="right"] .monitor-panel {
    max-height: calc(var(--viewport-h) - 10px);
}

/* Anchored by the bar edge the widget sits on: the right end of a
   horizontal bar, the bottom end of a vertical one. */
html[data-bar-position="top"] .monitor-panel {
    top: calc(var(--bar-height) + 5px);
    right: 5px;
}

html[data-bar-position="bottom"] .monitor-panel {
    bottom: calc(var(--bar-height) + 5px);
    right: 5px;
}

html[data-bar-position="left"] .monitor-panel {
    left: calc(var(--bar-size-vertical) + 5px);
    bottom: 5px;
}

html[data-bar-position="right"] .monitor-panel {
    right: calc(var(--bar-size-vertical) + 5px);
    bottom: 5px;
}

.monitor-hero {
    display: flex;
    align-items: center;
    gap: 1.1667rem;
}

.monitor-hero-glyph {
    font-size: 2.1667rem;
    line-height: 1;
}

.monitor-hero-labels {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1667rem;
}

.monitor-hero-title {
    font-size: 1.25rem;
    font-weight: 700;
}

.monitor-hero-status {
    font-size: 0.8333rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: color-mix(in srgb, var(--color-foreground) 65%, transparent);
}

.monitor-separator {
    height: 1px;
    background: color-mix(in srgb, var(--color-foreground) 10%, transparent);
}

.monitor-section {
    display: flex;
    flex-direction: column;
    gap: 0.8333rem;
}

.monitor-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.monitor-section-title {
    font-size: 0.8333rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: color-mix(in srgb, var(--color-foreground) 65%, transparent);
}

.monitor-section-value {
    font-size: 0.9167rem;
    font-weight: 700;
    color: color-mix(in srgb, var(--color-foreground) 65%, transparent);
}

/* ---- Text size slider: segmented track, gaps on the stops ---------- */

.monitor-slider-row {
    padding: 0.3333rem 0.1667rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
}

.monitor-slider {
    position: relative;
    height: 1.1667rem;
    display: flex;
    align-items: center;
    cursor: pointer;
    touch-action: none;
}

.monitor-slider-track {
    width: 100%;
    display: flex;
    gap: 0.4167rem;
}

.monitor-slider-seg {
    flex: 1;
    height: 0.3333rem;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--color-foreground) 22%, transparent);
}

.monitor-seg-filled {
    background: color-mix(in srgb, var(--color-foreground) 80%, transparent);
}

.monitor-slider-knob {
    position: absolute;
    top: 50%;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--color-foreground);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* ---- Scale pills --------------------------------------------------- */

.monitor-scale-row {
    display: flex;
    gap: 0.5rem;
}

.monitor-pill {
    flex: 1;
    min-width: 0;
    padding: 0.5833rem 0;
    border: 1px solid color-mix(in srgb, var(--color-foreground) 25%, transparent);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--color-foreground) 6%, transparent);
    font-family: var(--font-mono);
    font-size: 0.9167rem;
    color: var(--color-foreground);
    cursor: pointer;
}

.monitor-pill:hover {
    background: color-mix(in srgb, var(--color-foreground) 12%, transparent);
}

.monitor-pill-active {
    background: color-mix(in srgb, var(--color-foreground) 20%, transparent);
    border-color: color-mix(in srgb, var(--color-foreground) 45%, transparent);
}

/* Keyboard cursor — the shared highlight hover and j/k/h/l both move. */
.monitor-cursor {
    border-color: var(--color-accent);
}

.monitor-dim {
    position: fixed;
    inset: 0;
    background: #000;
    opacity: 0;
    pointer-events: none;
    z-index: 9999;
}