/* ============================================================================
   site.css — Sentinel v2 sitewide layout, components, and base typography.

   Imports the design tokens from tokens.css (loaded first by header.php).
   Each section is small on purpose; pages add their own page-specific
   classes inside scoped selectors rather than overriding this file.
   ========================================================================== */

/* ---- reset + base --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--ink-0);
    background: var(--surface-0);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--link);
    text-decoration: none;
}
a:hover, a:focus-visible { color: var(--link-hover); text-decoration: underline; }

code, pre, kbd, samp { font-family: var(--font-mono); }
code { background: var(--surface-2); padding: 0 .25em; border-radius: var(--radius-sm); }

h1, h2, h3, h4, h5, h6 { line-height: var(--lh-tight); margin: 0 0 var(--space-3); }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }

p  { margin: 0 0 var(--space-3); }
hr { border: 0; border-top: 1px solid var(--border-0); margin: var(--space-5) 0; }

/* ---- focus ring ----------------------------------------------------------- */
:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ---- utility classes ------------------------------------------------------ */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: -40px; left: 0;
    background: var(--accent);
    color: var(--accent-fg);
    padding: var(--space-2) var(--space-3);
    z-index: var(--z-tooltip);
    border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus { top: 0; }

/* ---- top bar -------------------------------------------------------------- */
.topbar {
    position: sticky;
    top: 0;
    z-index: var(--z-topbar);
    background: var(--surface-1);
    border-bottom: 1px solid var(--border-0);
    box-shadow: var(--shadow-sm);
}
.topbar__inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-3) var(--space-4);
    max-width: 1400px;
    margin-inline: auto;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--ink-0);
    font-weight: 700;
    text-decoration: none;
}
.brand:hover, .brand:focus-visible { text-decoration: none; }
.brand__mark { color: var(--accent); font-size: 1.25em; }
.brand__pill {
    display: inline-block;
    background: var(--warning-bg);
    color: var(--warning-fg);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .1rem .5rem;
    border-radius: var(--radius-pill);
}

.jump {
    display: flex;
    justify-content: center;
}
.jump input[type="search"] {
    width: 100%;
    max-width: 480px;
    padding: var(--space-2) var(--space-3);
    background: var(--surface-0);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-pill);
    font: inherit;
    color: inherit;
}

.topbar__actions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.iconbtn {
    --size: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size); height: var(--size);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--ink-1);
    cursor: pointer;
    position: relative;
    text-decoration: none;
    transition: background var(--motion-fast) var(--easing),
                color      var(--motion-fast) var(--easing),
                border-color var(--motion-fast) var(--easing);
}
.iconbtn:hover, .iconbtn:focus-visible {
    background: var(--surface-2);
    color: var(--ink-0);
    border-color: var(--border-0);
    text-decoration: none;
}
.iconbtn[aria-pressed="true"] { background: var(--surface-3); color: var(--ink-0); }
.iconbtn .badge {
    position: absolute;
    top: 2px; right: 2px;
    background: var(--state-hot-bd);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 700;
    padding: 0 .35em;
    min-width: 1.2em;
    height: 1.2em;
    line-height: 1.2em;
    text-align: center;
    border-radius: var(--radius-pill);
}

/* ---- primary nav ---------------------------------------------------------- */
.primary {
    border-top: 1px solid var(--border-0);
    background: var(--surface-0);
}
.primary__list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0 var(--space-3);
    max-width: 1400px;
    margin-inline: auto;
    gap: var(--space-1);
}
.primary__link {
    display: inline-block;
    padding: var(--space-3) var(--space-3);
    color: var(--ink-1);
    border-bottom: 2px solid transparent;
    text-decoration: none;
    font-weight: 500;
}
.primary__link:hover, .primary__link:focus-visible {
    color: var(--ink-0);
    background: var(--surface-1);
    text-decoration: none;
}
.primary__link.is-active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* ---- filter bar / chips -------------------------------------------------- */
.filterbar {
    background: var(--surface-1);
    border-top: 1px solid var(--border-0);
    padding: var(--space-2) var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    max-width: 1400px;
    margin-inline: auto;
}
.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    background: var(--surface-2);
    color: var(--ink-0);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-pill);
    font-size: var(--fs-sm);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--motion-fast) var(--easing);
}
.chip:hover, .chip:focus-visible {
    background: var(--surface-3);
    text-decoration: none;
}
.chip__label  { color: var(--ink-2); }
.chip__value  { font-weight: 600; }
.chip__edit   { color: var(--ink-2); margin-left: var(--space-1); }
.chip--filter { background: var(--state-cold-bg); border-color: var(--state-cold-bd); color: var(--state-cold-fg); }
.chip--filter:hover, .chip--filter:focus-visible { background: var(--state-cold-bd); color: var(--ink-inv); }
.chip--clear  { padding-inline: var(--space-2); }

/* ---- main content layout -------------------------------------------------- */
.main {
    max-width: 1400px;
    margin-inline: auto;
    padding: var(--space-5) var(--space-4);
}

.page__head { margin-bottom: var(--space-5); }
.page__head h1 { margin-bottom: var(--space-2); }
.lede {
    font-size: var(--fs-md);
    color: var(--ink-1);
    max-width: 70ch;
}
.page__meta { margin-top: var(--space-6); color: var(--ink-2); }
.page__meta dt { font-weight: 600; color: var(--ink-1); }
.page__meta dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-2) var(--space-4);
    margin-top: var(--space-3);
}

/* ---- card grid ----------------------------------------------------------- */
.grid--cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-4);
    margin: var(--space-5) 0;
}
.card {
    display: block;
    padding: var(--space-4);
    background: var(--surface-1);
    border: 1px solid var(--border-0);
    border-radius: var(--radius-lg);
    color: var(--ink-0);
    text-decoration: none;
    transition: transform var(--motion-fast) var(--easing),
                box-shadow var(--motion-fast) var(--easing),
                border-color var(--motion-fast) var(--easing);
}
.card:hover, .card:focus-visible {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-1);
    text-decoration: none;
}
.card h2 { margin-bottom: var(--space-1); font-size: var(--fs-lg); }
.card p  { color: var(--ink-2); margin: 0; }

/* ---- buttons ------------------------------------------------------------- */
.btn {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    background: var(--surface-2);
    color: var(--ink-0);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    font: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--motion-fast) var(--easing),
                border-color var(--motion-fast) var(--easing);
}
.btn:hover, .btn:focus-visible {
    background: var(--surface-3);
    border-color: var(--border-1);
    text-decoration: none;
}
.btn--primary {
    background: var(--accent);
    color: var(--accent-fg);
    border-color: var(--accent);
}
.btn--primary:hover, .btn--primary:focus-visible {
    background: var(--link-hover);
    border-color: var(--link-hover);
    color: var(--accent-fg);
}

/* ---- state partials (includes/states/*.php) ------------------------------ */
.state {
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-block: var(--space-4);
    background: var(--surface-1);
    border: 1px solid var(--border-0);
}
.state__title { font-weight: 600; margin: 0 0 var(--space-2); color: var(--ink-0); }
.state__desc  { color: var(--ink-1); margin: 0 0 var(--space-3); max-width: 60ch; }

.state--empty        { border-style: dashed; text-align: center; }
.state--error        { border-color: var(--state-hot-bd); background: var(--state-hot-bg); color: var(--state-hot-fg); }
.state--error .state__title { color: var(--state-hot-fg); }
.state--unauthorized { border-color: var(--state-warm-bd); background: var(--state-warm-bg); color: var(--state-warm-fg); }
.state--unauthorized .state__title { color: var(--state-warm-fg); }
.state--offline      { text-align: center; }

/* Loading strip — fixed at the very top of the viewport. */
.state--loading {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    padding: 0; margin: 0;
    background: transparent;
    border: 0;
    z-index: var(--z-toast);
    pointer-events: none;
}
.state--loading .state__bar {
    position: relative;
    overflow: hidden;
    height: 100%;
    background: transparent;
}
.state--loading .state__bar > span {
    position: absolute;
    inset-block: 0;
    width: 30%;
    background: var(--accent);
    animation: state-loading 1.2s var(--easing) infinite;
}
@keyframes state-loading {
    0%   { left: -30%; }
    100% { left: 100%; }
}

/* ---- flash messages ------------------------------------------------------ */
.flash {
    margin: var(--space-3) auto;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    max-width: 1400px;
}
.flash--success {
    background: var(--state-good-bg);
    color: var(--state-good-fg);
    border-color: var(--state-good-bd);
}
.flash--error {
    background: var(--state-hot-bg);
    color: var(--state-hot-fg);
    border-color: var(--state-hot-bd);
}

/* ---- view list / view form ----------------------------------------------- */
.view-list {
    list-style: none;
    margin: 0; padding: 0;
}
.view-list__item {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-0);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
    background: var(--surface-1);
}
.view-list__name {
    display: block;
    font-weight: 600;
    color: var(--ink-0);
    text-decoration: none;
    margin-bottom: var(--space-1);
}
.view-list__name:hover, .view-list__name:focus-visible {
    text-decoration: underline;
}
.view-list__filter {
    display: block;
    color: var(--ink-2);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
}
.badge--soft {
    display: inline-block;
    margin-left: var(--space-2);
    padding: 0 .5em;
    font-size: var(--fs-xs);
    font-weight: 600;
    background: var(--state-cold-bg);
    color: var(--state-cold-fg);
    border-radius: var(--radius-pill);
}

.view-form {
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.view-form__group {
    border: 1px solid var(--border-0);
    border-radius: var(--radius-md);
    padding: var(--space-4);
}
.view-form__group legend { padding: 0 var(--space-2); font-weight: 600; }
.view-form__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-3);
}
.view-form__field span { color: var(--ink-1); font-weight: 500; font-size: var(--fs-sm); }
.view-form__field input,
.view-form__field textarea {
    font: inherit;
    color: inherit;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    background: var(--surface-0);
}
.view-form__field textarea { font-family: var(--font-mono); resize: vertical; }
.view-form__check {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--ink-1);
}
.view-form__actions {
    display: flex;
    gap: var(--space-2);
}
.btn--danger {
    background: var(--state-hot-bg);
    color: var(--state-hot-fg);
    border-color: var(--state-hot-bd);
}
.btn--danger:hover, .btn--danger:focus-visible {
    background: var(--state-hot-bd);
    color: var(--ink-inv);
    border-color: var(--state-hot-bd);
}

.code-block {
    background: var(--surface-2);
    color: var(--ink-0);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    overflow-x: auto;
    border: 1px solid var(--border-0);
}

.btn--small {
    font-size: var(--fs-sm);
    padding: var(--space-1) var(--space-3);
}

.me-views-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--space-3);
}
.me-views-table th,
.me-views-table td {
    padding: var(--space-2) var(--space-3);
    text-align: left;
    border-bottom: 1px solid var(--border-0);
    vertical-align: top;
}
.me-views-table th {
    color: var(--ink-2);
    font-weight: 600;
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.me-views-table code {
    font-size: var(--fs-sm);
    color: var(--ink-1);
    background: transparent;
    padding: 0;
    word-break: break-all;
}

/* ---- filter drawer ------------------------------------------------------- */
.filter-drawer {
    border: 1px solid var(--border-0);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.filter-drawer legend { padding: 0 var(--space-2); font-weight: 600; }
.filter-drawer__group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.filter-drawer__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.filter-drawer__field span,
.filter-drawer__field-label {
    color: var(--ink-1);
    font-weight: 500;
    font-size: var(--fs-sm);
}
.filter-drawer__field input,
.filter-drawer__field textarea {
    font: inherit; color: inherit;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    background: var(--surface-0);
}
.filter-drawer__field textarea { font-family: var(--font-mono); resize: vertical; }
.filter-drawer__field--inline { flex-direction: row; align-items: center; gap: var(--space-2); }
.filter-drawer__field--inline span { white-space: nowrap; }
.filter-drawer__row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}
.filter-drawer__tags {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-2);
    max-height: 16rem;
    overflow-y: auto;
    padding: var(--space-2);
    border: 1px solid var(--border-0);
    border-radius: var(--radius-md);
    background: var(--surface-1);
}

/* Segmented control */
.seg {
    display: inline-flex;
    background: var(--surface-2);
    border-radius: var(--radius-pill);
    padding: 2px;
    gap: 2px;
}
.seg__item input { position: absolute; opacity: 0; pointer-events: none; }
.seg__item span {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    color: var(--ink-2);
    cursor: pointer;
    font-size: var(--fs-sm);
    font-weight: 500;
}
.seg__item input:checked + span {
    background: var(--surface-0);
    color: var(--ink-0);
    box-shadow: var(--shadow-sm);
}
.seg__item input:focus-visible + span {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

/* Chip-toggle (used for Status / Type lists) */
.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}
.chip-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.chip-toggle span {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-pill);
    background: var(--surface-1);
    color: var(--ink-1);
    cursor: pointer;
    font-size: var(--fs-sm);
}
.chip-toggle input:checked + span {
    background: var(--state-cold-bg);
    color: var(--state-cold-fg);
    border-color: var(--state-cold-bd);
}
.chip-toggle input:focus-visible + span {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

/* Generic .check (used in tags + Errors) */
.check {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--ink-1);
    cursor: pointer;
}
.check small { display: block; color: var(--ink-2); font-size: var(--fs-xs); }

/* ---- sensors page / tile grid ------------------------------------------- */
.page__head--row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.seg--layout {
    display: inline-flex;
    background: var(--surface-1);
    border: 1px solid var(--border-0);
    border-radius: var(--radius-pill);
    padding: 2px;
}
.seg--layout .seg__item {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    color: var(--ink-2);
    font-size: var(--fs-sm);
    font-weight: 500;
    text-decoration: none;
}
.seg--layout .seg__item:hover { color: var(--ink-0); text-decoration: none; }
.seg--layout .seg__item.is-active {
    background: var(--surface-0);
    color: var(--ink-0);
    box-shadow: var(--shadow-sm);
}

.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-4);
}
.tile {
    position: relative;
    display: block;
    background: var(--surface-1);
    border: 1px solid var(--border-0);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-3) var(--space-3);
    text-decoration: none;
    color: var(--ink-0);
    overflow: hidden;
    transition: transform var(--motion-fast) var(--easing),
                box-shadow var(--motion-fast) var(--easing);
}
.tile:hover, .tile:focus-visible {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    text-decoration: none;
}
.tile__strip {
    display: block;
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 4px;
}
.tile[data-state="hot"]   .tile__strip { background: var(--state-hot-bd) !important; }
.tile[data-state="warm"]  .tile__strip { background: var(--state-warm-bd) !important; }
.tile[data-state="cold"]  .tile__strip { background: var(--state-cold-bd) !important; }
.tile[data-state="low"]   .tile__strip { background: var(--state-low-bd)  !important; }
.tile__name {
    margin: var(--space-2) 0 0;
    font-size: var(--fs-md);
}
.tile__meta {
    display: block;
    color: var(--ink-2);
    font-size: var(--fs-xs);
    margin-bottom: var(--space-2);
}
.tile__body {
    font-size: var(--fs-sm);
    color: var(--ink-1);
    line-height: 1.4;
}
.tile__body span { display: inline; }
.tile__banner {
    margin-top: var(--space-2);
    padding: var(--space-1) var(--space-2);
    background: var(--surface-2);
    color: var(--marker-stale);
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
    font-weight: 600;
}
.tile.is-stale {
    border-style: dashed;
}

/* ---- sensors table layout ------------------------------------------------ */
.sensors-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-3) 0 var(--space-2);
}
.cols-menu summary { list-style: none; cursor: pointer; }
.cols-menu summary::-webkit-details-marker { display: none; }
.cols-menu__panel {
    position: absolute;
    margin-top: var(--space-1);
    padding: var(--space-3);
    background: var(--surface-0);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    z-index: var(--z-dropdown);
    max-width: 360px;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.sensors-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border-0);
    border-radius: var(--radius-md);
    background: var(--surface-0);
}
.sensors-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}
.sensors-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface-1);
    border-bottom: 1px solid var(--border-0);
    padding: var(--space-2) var(--space-3);
    text-align: left;
    font-weight: 600;
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: var(--fs-xs);
}
.sensors-table th[aria-sort="ascending"],
.sensors-table th[aria-sort="descending"] {
    color: var(--ink-0);
}
.sensors-table .th-sort {
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
    padding: 0;
}
.sensors-table tbody td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-0);
    vertical-align: top;
}
.sensors-table tbody tr {
    cursor: pointer;
    transition: background var(--motion-fast) var(--easing);
}
.sensors-table tbody tr:hover { background: var(--surface-1); }
.sensors-table tbody tr[data-state="hot"]   td:first-child { box-shadow: inset 3px 0 0 var(--state-hot-bd); }
.sensors-table tbody tr[data-state="warm"]  td:first-child { box-shadow: inset 3px 0 0 var(--state-warm-bd); }
.sensors-table tbody tr[data-state="cold"]  td:first-child { box-shadow: inset 3px 0 0 var(--state-cold-bd); }
.sensors-table tbody tr[data-state="low"]   td:first-child { box-shadow: inset 3px 0 0 var(--state-low-bd); }

.sensors-table[data-density="compact"] tbody td,
.sensors-table[data-density="compact"] thead th {
    padding-block: var(--space-1);
}

.status {
    display: inline-block;
    padding: 0 .5em;
    font-size: var(--fs-xs);
    font-weight: 600;
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    color: var(--ink-1);
    text-transform: lowercase;
}
.status--enabled  { background: var(--state-good-bg); color: var(--state-good-fg); }
.status--disabled { background: var(--surface-2);     color: var(--ink-2); }
.status--damaged  { background: var(--state-hot-bg);  color: var(--state-hot-fg); }

/* ---- sensors map layout -------------------------------------------------- */
.map-toolbar {
    display: flex;
    gap: var(--space-2);
    margin: var(--space-3) 0 var(--space-2);
}
.map-toolbar .iconbtn {
    width: auto;
    padding: 0 var(--space-3);
    gap: var(--space-1);
}
.iconbtn__label {
    font-size: var(--fs-sm);
    font-weight: 500;
}
.map-wrap {
    position: relative;
    border: 1px solid var(--border-0);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.sensors-map {
    width: 100%;
    height: 70vh;
    min-height: 480px;
    background: var(--surface-2);
}
.map-legend {
    position: absolute;
    bottom: var(--space-3);
    left: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--surface-0);
    color: var(--ink-1);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-0);
    box-shadow: var(--shadow-sm);
    font-size: var(--fs-xs);
}
.map-legend__bar {
    display: inline-block;
    width: 96px;
    height: 8px;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, #1d4ed8, #15803d, #b45309, #b91c1c);
}

.iw {
    max-width: 280px;
    font: 14px/1.4 var(--font-sans);
    color: #0f172a;     /* InfoWindow renders inside Google's iframe;
                           the page's tokens may not apply, so hard-code
                           a readable text color here. */
}
.iw__name { margin: 0 0 4px; font-size: 15px; }
.iw__meta { color: #64748b; font-size: 12px; margin-bottom: 6px; }
.iw__photo { display: block; max-width: 100%; border-radius: 6px; margin-bottom: 6px; }
.iw__readings { font-size: 13px; line-height: 1.4; margin-bottom: 6px; }
.iw__actions { font-size: 12px; }
.iw__actions a { color: #1d4ed8; }

/* ---- multi-select bar ---------------------------------------------------- */
.multi-select {
    position: sticky;
    bottom: var(--space-3);
    margin: var(--space-4) auto 0;
    max-width: 1100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    background: var(--surface-0);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-md);
    z-index: var(--z-toast);
}
.multi-select__count strong { color: var(--accent); }
.multi-select__actions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* Selected-state cue on tiles + rows. */
.tile.is-selected {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}
.sensors-table tbody tr.is-selected {
    background: var(--state-cold-bg);
}

/* ---- sign-in ------------------------------------------------------------- */
.page--sign-in {
    display: flex;
    justify-content: center;
    padding-top: var(--space-7);
}
.signin-card {
    width: 100%;
    max-width: 440px;
    background: var(--surface-1);
    border: 1px solid var(--border-0);
    border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-5);
    box-shadow: var(--shadow-sm);
}
.signin-card__title {
    margin-top: 0;
    margin-bottom: var(--space-2);
}
.signin-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-4);
}
.signin-form__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.signin-form__field span {
    color: var(--ink-1);
    font-weight: 500;
    font-size: var(--fs-sm);
}
.signin-form__field input {
    font: inherit;
    color: inherit;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    background: var(--surface-0);
}
.signin-form__field input:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    border-color: var(--focus);
}
.signin-form__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-2);
}
.btn--ghost {
    background: transparent;
    border: 1px solid var(--border-1);
    color: var(--ink-1);
}
.btn--ghost:hover, .btn--ghost:focus-visible {
    background: var(--surface-2);
    color: var(--ink-0);
    text-decoration: none;
}

/* ---- sensor detail (Phase 5.1) ------------------------------------------ */
.action-bar {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}
.seg--rows {
    background: var(--surface-1);
    border: 1px solid var(--border-0);
    border-radius: var(--radius-pill);
    padding: 2px;
    display: inline-flex;
}
.seg--rows .seg__item {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    color: var(--ink-2);
    font-size: var(--fs-sm);
    font-weight: 500;
    text-decoration: none;
}
.seg--rows .seg__item:hover { color: var(--ink-0); text-decoration: none; }
.seg--rows .seg__item.is-active {
    background: var(--surface-0); color: var(--ink-0);
    box-shadow: var(--shadow-sm);
}

.sensor-detail__panes {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--space-5);
    margin-top: var(--space-4);
}
@media (max-width: 1023px) {
    .sensor-detail__panes { grid-template-columns: minmax(0, 1fr); }
}

.sensor-detail__main {
    min-width: 0;
}
.sd-chart {
    height: 360px;
    background: var(--surface-1);
    border: 1px solid var(--border-0);
    border-radius: var(--radius-md);
    padding: var(--space-2);
    margin-bottom: var(--space-3);
}
.sd-chart .dygraph-legend {
    background: var(--surface-1) !important;
    color: var(--ink-1) !important;
    border-radius: var(--radius-sm);
}

.sd-tablewrap {
    overflow-x: auto;
    border: 1px solid var(--border-0);
    border-radius: var(--radius-md);
    background: var(--surface-0);
}
.sd-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
}
.sd-table thead th {
    position: sticky; top: 0; z-index: 1;
    background: var(--surface-1);
    border-bottom: 1px solid var(--border-0);
    padding: var(--space-2) var(--space-3);
    text-align: left;
    font-weight: 600;
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: var(--fs-xs);
}
.sd-table tbody td {
    padding: var(--space-1) var(--space-3);
    border-bottom: 1px solid var(--border-0);
}
.sd-table tbody tr.is-flash {
    background: var(--state-cold-bg);
    transition: background 10s linear;
}

.sensor-detail__aside {
    position: sticky;
    top: calc(var(--space-7) + 60px);
    align-self: start;
    background: var(--surface-1);
    border: 1px solid var(--border-0);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    max-height: calc(100vh - 140px);
    overflow-y: auto;
}
.sd-meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: var(--space-3);
    row-gap: var(--space-1);
    margin: 0 0 var(--space-3);
}
.sd-meta dt { color: var(--ink-2); font-size: var(--fs-sm); }
.sd-meta dd { margin: 0; color: var(--ink-0); }

.sd-photo {
    display: block;
    width: 100%;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
}
.sd-section {
    font-size: var(--fs-sm);
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: var(--space-3) 0 var(--space-1);
}
.sd-tags { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-3); }
.chip--tag {
    background: var(--surface-2);
    color: var(--ink-1);
    padding: 0 .6em;
    font-size: var(--fs-xs);
    border-radius: var(--radius-pill);
}

.sd-limit {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: var(--space-2);
    font-size: var(--fs-xs);
}
.sd-limit__band { display: flex; gap: var(--space-2); flex-wrap: wrap; color: var(--ink-2); }
.sd-limit__c { color: var(--state-cold-fg); }
.sd-limit__l { color: var(--state-low-fg); }
.sd-limit__w { color: var(--state-warm-fg); }
.sd-limit__h { color: var(--state-hot-fg); }

.sd-quick-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); }

/* ---- charts page (Phase 5.4) -------------------------------------------- */
.charts__layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-3);
}
@media (max-width: 900px) {
    .charts__layout { grid-template-columns: 1fr; }
}
.charts__rail {
    background: var(--surface-1);
    border: 1px solid var(--border-0);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    align-self: start;
    position: sticky;
    top: 80px;
    max-height: 80vh;
    overflow-y: auto;
}
.charts__rail-filter {
    width: 100%;
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
    background: var(--surface-0);
    font: inherit;
}
.charts__bookmark-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: var(--space-1);
}
.charts__bookmark-list li a {
    display: block;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    color: var(--ink-1);
}
.charts__bookmark-list li a:hover { background: var(--surface-2); text-decoration: none; }

.charts__main { min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.charts__panel { display: flex; flex-direction: column; gap: var(--space-3); }
.charts__out { min-height: 240px; }

.charts__criteria {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--space-2);
    align-items: stretch;
}
.charts__criteria textarea {
    width: 100%;
    min-height: 96px;
    padding: var(--space-2);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    background: var(--surface-0);
    font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
    resize: vertical;
}
.charts__criteria input[type="text"] {
    padding: var(--space-2);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    background: var(--surface-0);
    font: inherit;
}
@media (max-width: 700px) {
    .charts__criteria { grid-template-columns: 1fr; }
}

.charts__picker { background: var(--surface-1); border: 1px solid var(--border-0); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); }
.charts__picker > summary { cursor: pointer; font-weight: 600; }
.charts__picker-body { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }

.charts__toggles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    border-bottom: 1px solid var(--border-0);
    padding-bottom: var(--space-2);
}
.charts__toggles:empty { display: none; }
.charts__toggle {
    appearance: none;
    background: var(--surface-1);
    color: var(--ink-1);
    border: 1px solid var(--border-1);
    border-left-width: 4px;
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
    font: inherit;
    cursor: pointer;
}
.charts__toggle.is-off { background: rgba(224, 124, 124, 0.25); color: var(--ink-2); text-decoration: line-through; }

.charts__graphs { display: flex; flex-direction: column; gap: var(--space-3); }
.charts__graph {
    width: 100%;
    height: 280px;
    background: var(--surface-1);
    border: 1px solid var(--border-0);
    border-radius: var(--radius-md);
    padding: var(--space-2);
    box-sizing: border-box;
}
.charts__graph.is-hidden { display: none; }
#charts-fse:fullscreen { background: var(--surface-0); padding: var(--space-3); overflow: auto; }
#charts-fse:fullscreen .charts__graph { height: calc((100vh - 220px) / 3); }

/* ---- query page (Phase 5.5) --------------------------------------------- */
.query__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-3);
    margin: var(--space-3) 0;
}
.query__card { display: flex; flex-direction: column; gap: var(--space-2); }
.query__results { margin-top: var(--space-5); }
.query__results h2 { margin-bottom: var(--space-3); }
.query__results h3 { margin: var(--space-3) 0 var(--space-1); color: var(--ink-1); }

/* ---- briefs (Phase 5.6) ------------------------------------------------- */
.brief-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(3, 1fr);
    margin-top: var(--space-4);
}
.brief-cell {
    background: var(--surface-1);
    border: 1px solid var(--border-0);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--motion-base) var(--easing);
}
.brief-cell[data-state="hot"]   { background: var(--state-hot-bg);  border-color: var(--state-hot-bd); }
.brief-cell[data-state="warm"]  { background: var(--state-warm-bg); border-color: var(--state-warm-bd); }
.brief-cell[data-state="cold"]  { background: var(--state-cold-bg); border-color: var(--state-cold-bd); }
.brief-cell[data-state="low"]   { background: var(--state-low-bg);  border-color: var(--state-low-bd); }
.brief-cell__label  { font-size: var(--fs-md); color: var(--ink-1); }
.brief-cell__metric { font-size: var(--fs-sm); color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; }
.brief-cell__value  { font-size: var(--fs-2xl); color: var(--ink-0); font-variant-numeric: tabular-nums; }

/* ---- translog (Phase 6.2) ----------------------------------------------- */
.retransmit-bars { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.retransmit-bar  { display: grid; grid-template-columns: 140px 1fr 60px; align-items: center; gap: var(--space-3); }
.retransmit-bar__label { color: var(--ink-1); font-size: var(--fs-sm); }
.retransmit-bar__track { background: var(--surface-2); border-radius: var(--radius-pill); height: 8px; overflow: hidden; }
.retransmit-bar__fill  { display: block; height: 100%; background: var(--accent); transition: width var(--motion-base); }
.retransmit-bar__count { font-variant-numeric: tabular-nums; color: var(--ink-2); text-align: right; }

/* ---- impersonation banner (UI_UPGRADE_PLAN §4.14) ---------------------- */
.impersonate-banner {
    background: var(--state-warm-bg);
    color: var(--state-warm-fg);
    border-bottom: 2px solid var(--state-warm-bd);
    padding: var(--space-2) var(--space-4);
    text-align: center;
    font-size: var(--fs-sm);
}
.impersonate-banner a { color: inherit; text-decoration: underline; font-weight: 600; }

/* ---- alert card variant + power-tests manage grid ---------------------- */
.card--alert {
    border-color: var(--state-warm-bd);
    background: var(--state-warm-bg);
    color: var(--state-warm-fg);
}
.card--alert h2 { color: inherit; }

.pt-manage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-3);
}

/* ---- footer -------------------------------------------------------------- */
.sitefoot {
    border-top: 1px solid var(--border-0);
    background: var(--surface-1);
    color: var(--ink-2);
    font-size: var(--fs-sm);
    padding: var(--space-4);
    margin-top: var(--space-7);
}
.sitefoot__inner {
    max-width: 1400px;
    margin-inline: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}
.sitefoot__brand { font-weight: 600; color: var(--ink-1); }
.sitefoot__sep   { color: var(--ink-2); }
.sitefoot__link  { color: var(--ink-1); }

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 720px) {
    .topbar__inner {
        grid-template-columns: auto auto;
        grid-template-areas:
            "brand actions"
            "jump jump";
        row-gap: var(--space-2);
    }
    .brand          { grid-area: brand; }
    .topbar__actions{ grid-area: actions; justify-self: end; }
    .jump           { grid-area: jump; }
    .primary__list  { padding: 0 var(--space-2); }
    .primary__link  { padding-inline: var(--space-2); }
}