/* =========================================================================
   Watch my connection (F1). Token-driven so it works in light + dark.
   ========================================================================= */
.wm-watch {
    margin-top: 28px;
    padding: 22px clamp(16px, 3vw, 26px);
    border: 1px solid var(--wm-border);
    border-radius: var(--wm-r-card);
    background: var(--wm-surface);
}
.wm-watch__head { margin-bottom: 16px; }
.wm-watch__title { margin: 0 0 4px; font-size: 1.25rem; font-weight: 700; color: var(--wm-text); }
.wm-watch__sub { margin: 0; color: var(--wm-text-muted); font-size: 0.92rem; line-height: 1.5; max-width: 62ch; }

.wm-watch__controls {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
    margin-bottom: 18px;
}
.wm-watch__field { display: inline-flex; align-items: center; gap: 8px; color: var(--wm-text-muted); font-size: 0.9rem; }
.wm-watch__select {
    font: inherit; font-size: 0.9rem; color: var(--wm-text);
    background: var(--wm-surface-alt); border: 1px solid var(--wm-border);
    border-radius: 8px; padding: 7px 10px; cursor: pointer;
}
.wm-watch__select:disabled { opacity: 0.6; cursor: default; }
.wm-watch__btn {
    font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer;
    border-radius: var(--wm-r-pill); padding: 9px 20px;
    border: 1px solid var(--wm-border); background: transparent; color: var(--wm-text);
    transition: background-color var(--wm-t-fast), color var(--wm-t-fast), border-color var(--wm-t-fast);
    min-height: 40px;
}
.wm-watch__btn--primary { background: var(--wm-accent); color: var(--wm-bg); border-color: var(--wm-accent); }
.wm-watch__btn--primary:hover { filter: brightness(1.06); }
.wm-watch__btn--primary.is-running { background: var(--wm-leak); border-color: var(--wm-leak); color: #fff; }
.wm-watch__btn--ghost:hover { border-color: var(--wm-accent); color: var(--wm-accent); }
.wm-watch__status { font-size: 0.86rem; color: var(--wm-text-muted); font-variant-numeric: tabular-nums; }

.wm-watch__input {
    font: inherit; font-size: 0.9rem; color: var(--wm-text);
    background: var(--wm-surface-alt); border: 1px solid var(--wm-border);
    border-radius: 8px; padding: 7px 10px; width: 150px; max-width: 46vw;
}
.wm-watch__input::placeholder { color: var(--wm-text-faint); }
.wm-watch__input:focus { outline: none; border-color: var(--wm-accent); }

.wm-watch__chartwrap { position: relative; }
.wm-watch__empty {
    margin: 0; padding: 36px 16px; text-align: center;
    color: var(--wm-text-muted); font-size: 0.9rem; line-height: 1.5;
    border: 1px dashed var(--wm-border); border-radius: 12px; background: var(--wm-surface-alt);
}
.wm-watch__chart { width: 100%; }
.wm-watch__svg { width: 100%; height: 240px; display: block; overflow: visible; }

/* Chart marks */
.wm-watch__grid  { stroke: var(--wm-border); stroke-width: 1; stroke-dasharray: 3 4; }
.wm-watch__ylab,
.wm-watch__xlab  { fill: var(--wm-text-muted); font-size: 11px; font-family: var(--wm-font-mono, monospace); }
.wm-watch__ylab--unit { fill: var(--wm-text-faint); font-size: 10px; letter-spacing: .04em; }
.wm-watch__area  { fill: var(--wm-accent); opacity: 0.12; }
.wm-watch__line  { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.wm-watch__line--down { stroke: var(--wm-accent); }
.wm-watch__line--up   { stroke: var(--wm-info); stroke-width: 1.6; opacity: 0.85; stroke-dasharray: 5 4; }
.wm-watch__dot   { fill: var(--wm-accent); stroke: var(--wm-surface); stroke-width: 1; }
.wm-watch__dot--low { fill: var(--wm-leak); stroke: var(--wm-surface); stroke-width: 1.5; }

/* Stats */
.wm-watch__stats {
    display: flex; flex-wrap: wrap; gap: 10px 28px;
    margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--wm-border);
}
.wm-watch__stat { display: flex; flex-direction: column; gap: 2px; }
.wm-watch__stat-k { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--wm-text-faint); }
.wm-watch__stat-v { font-size: 1rem; font-weight: 600; color: var(--wm-text); }
.wm-watch__stat-sub { font-size: 0.72rem; font-weight: 400; color: var(--wm-text-muted); margin-left: 4px; }
.wm-watch__stat--low .wm-watch__stat-v { color: var(--wm-leak); }

/* By-location (room) comparison panel */
.wm-watch__rooms { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--wm-border); }
.wm-watch__rooms-title { margin: 0 0 4px; font-size: 1rem; font-weight: 700; color: var(--wm-text); }
.wm-watch__rooms-sub { margin: 0 0 12px; font-size: 0.84rem; color: var(--wm-text-muted); line-height: 1.5; }
.wm-watch__rooms-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.wm-watch__room { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px;
    border: 1px solid var(--wm-border); border-radius: 10px; background: var(--wm-surface-alt); }
.wm-watch__room.is-weak { border-color: var(--wm-leak); background: var(--wm-leak-bg); }
.wm-watch__room-name { font-size: 0.92rem; font-weight: 600; color: var(--wm-text); }
.wm-watch__room-tag { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--wm-leak); border: 1px solid var(--wm-leak); border-radius: var(--wm-r-pill); padding: 1px 7px; }
.wm-watch__room-down { font-size: 1.15rem; font-weight: 700; color: var(--wm-accent); }
.wm-watch__room.is-weak .wm-watch__room-down { color: var(--wm-leak); }
.wm-watch__room-meta { font-size: 0.76rem; color: var(--wm-text-muted); }

.wm-watch__note { margin: 14px 0 0; font-size: 0.8rem; color: var(--wm-text-faint); line-height: 1.5; }

@media (max-width: 560px) {
    .wm-watch__btn { flex: 1 1 auto; }
    .wm-watch__svg { height: 200px; }
}