/* ===========================================================================
   Crop Schedule UI
   /Asserts/Main/cs-ui.css

   One stylesheet for the redesigned pages. Reference it once in Site.Master:

       <link href="~/Asserts/Main/cs-ui.css" rel="stylesheet" runat="server" />

   New pages should use the cs- class names. The pd- and pref- names are kept
   as aliases so ProbeDash.aspx, Preferences.aspx and the card markup built in
   ProbeDash.aspx.cs keep working without edits.
   =========================================================================== */

:root {
    /* Neutrals */
    --cs-ink: #4B515D;
    --cs-ink-strong: #1C2331;
    --cs-ink-muted: #9AA0AA;
    --cs-ink-faint: #A5ABB4;
    --cs-label: #6B7280;
    --cs-line: #E6E8EC;
    --cs-line-soft: #EEF0F3;
    --cs-surface: #FFFFFF;
    --cs-surface-alt: #F7F8FA;
    --cs-surface-sunk: #F1F3F6;
    --cs-field-border: #D9DDE3;
    --cs-link: #2C367E;
    /* State colours. Same bands as myColor in the code-behind. */
    --cs-state-above: #5B8DEF; /* above field capacity */
    --cs-state-good: #57B77C; /* optimal */
    --cs-state-warn: #E8A33D; /* refill soon */
    --cs-state-bad: #DC5B4B; /* stress */
    --cs-state-stale: #9AA0AA; /* no data 24h+ */
    /* Wash backgrounds for the states that need attention */
    --cs-wash-warn: #FEFBF6;
    --cs-wash-bad: #FEF8F7;
    --cs-wash-stale: #FAFAFB;
    /* Shape */
    --cs-radius: 12px;
    --cs-radius-sm: 6px;
    --cs-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    --cs-shadow-raised: 0 4px 12px rgba(16, 24, 40, 0.08);
    --cs-focus: 0 0 0 3px rgba(134, 139, 148, 0.15);
}

/* ---------------------------------------------------------------------------
   Page shell
   --------------------------------------------------------------------------- */

.cs-page,
.pd-page,
.pref-wrap {
    max-width: 1600px;
    margin: 0 auto;
    padding: 22px 22px 48px;
    color: var(--cs-ink);
    font-family: 'Roboto', sans-serif;
}

.pref-wrap {
    max-width: 1180px;
    padding: 28px 20px 56px;
}

.cs-title,
.pd-title,
.pref-title {
    font-size: 28px;
    font-weight: 600;
    margin: 0 0 4px;
    letter-spacing: -0.01em;
}

.cs-intro,
.pref-intro {
    font-size: 13px;
    color: var(--cs-ink-muted);
    max-width: 760px;
    margin: 0 0 22px;
}

.cs-toolbar,
.pd-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
}

.cs-subbar,
.pd-subbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 0;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--cs-line);
}

.cs-view-actions,
.pd-view-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.cs-footnote,
.pd-footnote {
    display: inline-block;
    font-size: 12px;
    color: var(--cs-ink-muted);
    margin-top: 10px;
}

/* ---------------------------------------------------------------------------
   Tabs and views
   --------------------------------------------------------------------------- */

.cs-tabs,
.pd-tabs {
    display: flex;
    gap: 4px;
    background: var(--cs-surface-sunk);
    border-radius: 8px;
    padding: 3px;
}

.cs-tab,
.pd-tab {
    border: none;
    background: transparent;
    color: var(--cs-label);
    font-size: 13px;
    font-weight: 500;
    padding: 7px 14px;
    border-radius: var(--cs-radius-sm);
    cursor: pointer;
}

    .cs-tab i,
    .pd-tab i {
        margin-right: 7px;
    }

    .cs-tab:hover,
    .pd-tab:hover {
        color: var(--cs-ink);
    }

    .cs-tab.is-active,
    .pd-tab.is-active {
        background: var(--cs-surface);
        color: var(--cs-ink);
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
    }

.cs-view,
.pd-view {
    display: none;
}

    .cs-view.is-active,
    .pd-view.is-active {
        display: block;
    }

/* ---------------------------------------------------------------------------
   Cards
   --------------------------------------------------------------------------- */

.cs-card,
.pd-card,
.pref-card {
    background: var(--cs-surface);
    border: 1px solid var(--cs-line);
    border-radius: var(--cs-radius);
    box-shadow: var(--cs-shadow);
}

.pref-card {
    border-radius: 10px;
    height: 100%;
}

.cs-card-head,
.pref-card-head {
    padding: 15px 20px;
    border-bottom: 1px solid var(--cs-line-soft);
}

    .cs-card-head h6,
    .pref-card-head h6 {
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        margin: 0;
        color: var(--cs-ink);
    }

    .cs-card-head span,
    .pref-card-head span {
        display: block;
        font-size: 12px;
        color: var(--cs-ink-muted);
        margin-top: 3px;
    }

.cs-card-body,
.pref-card-body {
    padding: 18px 20px 20px;
}

/* Grid of cards. Four across on a wide screen, one on a phone. */
.cs-grid,
.pd-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
    align-items: start;
}

/* ---------------------------------------------------------------------------
   Status: chips, dots, legend, card states
   --------------------------------------------------------------------------- */

.cs-chip,
.pd-chip {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 4px 9px;
    border-radius: 999px;
    white-space: nowrap;
}

.cs-legend,
.pd-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 12px;
    color: #7D838D;
}

    .cs-legend span,
    .pd-legend span {
        display: flex;
        align-items: center;
    }

.cs-dot,
.pd-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 6px;
    display: inline-block;
}

/* Only the states that need attention carry colour. Optimal and above field
   capacity stay plain white so a healthy farm reads as calm. */
.cs-card.is-refill,
.pd-card.is-refill {
    box-shadow: inset 3px 0 0 0 var(--cs-state-warn), var(--cs-shadow);
    background: var(--cs-wash-warn);
}

.cs-card.is-stress,
.pd-card.is-stress {
    box-shadow: inset 3px 0 0 0 var(--cs-state-bad), var(--cs-shadow);
    background: var(--cs-wash-bad);
}

.cs-card.is-offline,
.pd-card.is-offline {
    box-shadow: inset 3px 0 0 0 var(--cs-state-stale), var(--cs-shadow);
    background: var(--cs-wash-stale);
}

/* ---------------------------------------------------------------------------
   Probe card internals
   --------------------------------------------------------------------------- */

.pd-card {
    padding: 16px 18px 14px;
    transition: box-shadow 0.2s, border-color 0.2s;
}

    .pd-card:hover {
        border-color: #D5D9DF;
        box-shadow: var(--cs-shadow-raised);
    }

.pd-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.pd-block {
    display: block;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
}

.pd-probe {
    display: block;
    font-size: 12px;
    color: var(--cs-ink-muted);
    margin-top: 2px;
}

.pd-reading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 14px 0 8px;
}

.pd-fc-num {
    font-size: 40px;
    font-weight: 300;
    line-height: 1;
    color: var(--cs-ink-strong);
    letter-spacing: -0.02em;
}

.pd-fc-unit {
    font-size: 14px;
    color: var(--cs-ink-muted);
    margin-left: 5px;
}

.pd-age {
    font-size: 11.5px;
    color: var(--cs-ink-muted);
}

.pd-bar {
    position: relative;
    height: 12px;
    border-radius: var(--cs-radius-sm);
    background: var(--cs-line-soft);
    overflow: hidden;
    display: flex;
}

.pd-bar-seg {
    height: 100%;
    flex: 0 0 auto; /* never let the fill be squeezed by a sibling */
}

.pd-mark {
    position: absolute;
    top: 0;
    height: 100%;
    width: 2px;
}

.pd-mark-refill {
    background: var(--cs-state-warn);
}

.pd-mark-stress {
    background: var(--cs-state-bad);
}

    /* A stress line of 0 sits on the left edge and reads as a stray pixel */
    .pd-mark-stress[style*="left: 0%"] {
        display: none;
    }

.pd-scale {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    font-size: 11px;
    color: var(--cs-ink-muted);
    margin-top: 6px;
}

.pd-depths {
    display: flex;
    gap: 3px;
    margin: 14px 0 4px;
}

.pd-depth {
    flex: 1 1 0;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    padding: 5px 0;
    border-radius: 5px;
    white-space: nowrap;
}

    /* Root zone boundary, drawn in the gap so it clears the chip colour */
    .pd-depth.is-root {
        position: relative;
        margin-right: 9px;
    }

        .pd-depth.is-root::after {
            content: "";
            position: absolute;
            top: -3px;
            bottom: -3px;
            right: -6px;
            width: 2px;
            border-radius: 1px;
            background: var(--cs-ink);
        }

.pd-depths-label {
    font-size: 10.5px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--cs-ink-faint);
}

.cs-stats,
.pd-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--cs-line-soft);
}

.cs-stat-label,
.pd-stat-label {
    display: block;
    font-size: 10.5px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--cs-ink-faint);
    margin-bottom: 2px;
}

.cs-stat-value,
.pd-stat-value {
    display: block;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--cs-ink);
}

    /* A unit is not part of the figure, so it does not carry the figure's
       weight. Same relationship as .pd-fc-num to .pd-fc-unit, one tier down. */
    .cs-stat-value em,
    .pd-stat-value em {
        font-style: normal;
        font-size: 11.5px;
        font-weight: 400;
        color: var(--cs-ink-muted);
        margin-left: 2px;
    }

.cs-card-foot,
.pd-card-foot {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--cs-line-soft);
}

    .cs-card-foot a,
    .pd-card-foot a {
        font-size: 12.5px;
        font-weight: 500;
        color: var(--cs-link);
        text-decoration: none;
    }

        .cs-card-foot a:hover,
        .pd-card-foot a:hover {
            text-decoration: underline;
        }

/* ---------------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------------- */

.cs-group,
.pref-group {
    margin-bottom: 18px;
}

.cs-group-title,
.pref-group-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #7D838D;
    border-left: 3px solid #B9BEC6;
    padding-left: 8px;
    margin-bottom: 10px;
}

.cs-field,
.pref-field {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

    .cs-field label,
    .pref-field label {
        flex: 0 0 90px;
        font-size: 13px;
        margin: 0;
    }

    .cs-field input,
    .pref-field input {
        width: 96px;
        height: 32px;
        font-size: 13px;
        padding: 3px 8px;
        border: 1px solid var(--cs-field-border);
        border-radius: var(--cs-radius-sm);
        background: var(--cs-surface);
        color: var(--cs-ink);
    }

        .cs-field input:focus,
        .pref-field input:focus {
            outline: none;
            border-color: #868B94;
            box-shadow: var(--cs-focus);
        }

.cs-unit,
.pref-unit {
    font-size: 12px;
    color: var(--cs-ink-muted);
    margin-left: 8px;
    min-width: 30px;
}

.cs-error,
.pref-error {
    font-size: 12px;
    color: #C0392B;
    margin-left: 6px;
}

.cs-check,
.pref-check {
    display: flex;
    align-items: center;
    font-size: 13px;
    margin-bottom: 9px;
}

    .cs-check input,
    .pref-check input {
        margin-right: 9px;
    }

    .cs-check label,
    .pref-check label {
        margin: 0;
    }

.cs-picker-label,
.cs-farm-label,
.pd-farm-label,
.pref-farm-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--cs-ink-faint);
    margin: 0;
}

.cs-picker,
.cs-farm,
.pd-farm {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pref-farm {
    margin-bottom: 18px;
}

.pref-select {
    width: 100%;
    max-width: 340px;
    height: 36px;
    font-size: 13px;
    padding: 4px 8px;
    border: 1px solid var(--cs-field-border);
    border-radius: var(--cs-radius-sm);
    background: var(--cs-surface);
    color: var(--cs-ink);
}

.cs-note,
.pref-note {
    font-size: 12.5px;
    line-height: 1.5;
    color: #7A5B12;
    background: #FDF6E3;
    border: 1px solid #F0E2B6;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 16px;
}

.cs-actions,
.pref-actions {
    border-top: 1px solid var(--cs-line-soft);
    padding-top: 14px;
    margin-top: 4px;
}

.cs-hint,
.pref-hint {
    font-size: 12px;
    color: var(--cs-ink-muted);
    margin-left: 6px;
}

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */

.cs-btn,
.export-btn {
    background-color: var(--cs-ink);
    border: 1px solid var(--cs-ink);
    color: #fff;
    padding: 7px 14px;
    text-align: center;
    text-decoration: none;
    font-size: 13px;
    cursor: pointer;
    border-radius: var(--cs-radius-sm);
    display: inline-flex;
    align-items: center;
    margin-right: 8px;
}

    .cs-btn:hover,
    .export-btn:hover {
        background-color: #3B4048;
        border-color: #3B4048;
        color: #fff;
    }

        .cs-btn:hover span,
        .export-btn:hover span {
            color: #fff;
        }

.cs-btn-ghost,
.export-btn-ghost {
    background-color: var(--cs-surface);
    color: var(--cs-ink);
    border: 1px solid var(--cs-field-border);
}

    .cs-btn-ghost:hover,
    .export-btn-ghost:hover {
        background-color: #F4F5F7;
        border-color: #C9CED6;
        color: var(--cs-ink);
    }

/* ---------------------------------------------------------------------------
   Tables
   --------------------------------------------------------------------------- */

.cs-table,
.pd-table {
    width: 100% !important;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    color: var(--cs-ink);
}

    .cs-table thead th,
    .pd-table thead th {
        background: var(--cs-surface-alt);
        color: var(--cs-label);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        white-space: nowrap;
        padding: 10px 12px;
        border-bottom: 1px solid var(--cs-line);
    }

    .cs-table tbody td,
    .pd-table tbody td {
        padding: 9px 12px;
        border-bottom: 1px solid var(--cs-surface-sunk);
        white-space: nowrap;
    }

    .cs-table tbody tr:hover td,
    .pd-table tbody tr:hover td {
        background: #F7F9FC;
    }

    .cs-table tbody a,
    .pd-table tbody a {
        color: var(--cs-link);
        text-decoration: none;
    }

        .cs-table tbody a:hover,
        .pd-table tbody a:hover {
            text-decoration: underline;
        }

/* Text left, numbers right, actions right. Never centre. */
.cs-table th.cell-text, .cs-table td.cell-text,
.pd-table th.cell-text, .pd-table td.cell-text {
    text-align: left;
}

.cs-table th.cell-num, .cs-table td.cell-num,
.pd-table th.cell-num, .pd-table td.cell-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* DataTables reserves room on the right of each header for the sort arrow.
   The detailed list gets the same room on its numbers so they line up. */
table.dataTable thead > tr > th.cell-num,
table.dataTable thead > tr > th.cell-icon {
    padding-right: 26px;
}

#MainContent_grdProbeDashList tbody td.cell-num {
    padding-right: 26px !important;
}

/* Exception: the summary list's sensor cells are colour-filled swatches
   rather than a column of figures, so the number is centred in the fill. */
#MainContent_grdProbeDashListSummary tbody td.cell-num {
    text-align: center;
    padding-right: 12px;
}

.cs-table th.cell-icon, .cs-table td.cell-icon,
.pd-table th.cell-icon, .pd-table td.cell-icon {
    text-align: right;
    width: 36px;
    padding-left: 4px;
    padding-right: 8px;
}

/* DataTables 2.x shell, with the 1.x class names kept as a fallback */
.dt-container,
.dataTables_wrapper {
    background: var(--cs-surface);
    border: 1px solid var(--cs-line);
    border-radius: var(--cs-radius);
    box-shadow: var(--cs-shadow);
    padding: 12px 14px 6px;
}

.dt-search,
.dataTables_filter {
    text-align: right;
    margin-bottom: 10px;
}

    .dt-search input,
    .dataTables_filter input {
        border: 1px solid var(--cs-field-border);
        border-radius: var(--cs-radius-sm);
        height: 34px;
        width: 240px;
        padding: 4px 10px;
        font-size: 13px;
        margin-left: 0;
    }

        .dt-search input:focus,
        .dataTables_filter input:focus {
            outline: none;
            border-color: #868B94;
            box-shadow: var(--cs-focus);
        }

.dt-info,
.dataTables_info {
    font-size: 12px;
    color: var(--cs-ink-muted);
    padding-top: 8px;
}

table.dataTable thead th.dt-orderable-asc:hover,
table.dataTable thead th.dt-orderable-desc:hover {
    background: var(--cs-line-soft);
}

table.dataTable thead th.dt-ordering-asc,
table.dataTable thead th.dt-ordering-desc {
    color: var(--cs-ink);
}

.dt-scroll-body {
    border-bottom: 1px solid var(--cs-line-soft);
}

/* ---------------------------------------------------------------------------
   select2
   --------------------------------------------------------------------------- */

/* select2 writes its own inline width, so the sheet has to use !important to
   own the sizing at all. 260px is the default, wide enough for a farm name.

   Scoped to the house picker wrappers, and it has to stay that way. This
   sheet is linked from Site.Master, so it reaches every page in the site,
   and select2 is used on pages that have not been redesigned yet. An
   unscoped `.select2-container` with !important pinned those pickers at
   260px too, where nicepage had them at 100%, which shrank the field and
   pulled its label up alongside it. Every select2 on a redesigned page sits
   inside .cs-picker, .cs-farm or .pd-farm, so the wrapper costs us nothing.

   The modifiers carry both classes so they are (0,3,0) against the base
   rule's (0,2,0) and win on specificity rather than on source order. A
   picker whose whole vocabulary is short words has no business holding 260px
   open: that is what wrapped the temp-humidity page's four pickers onto
   their own row. */
.cs-picker .select2-container,
.cs-farm .select2-container,
.pd-farm .select2-container {
    width: 260px !important;
}

/* Meter and probe names: long enough to need room, short enough not to need
   all of it. */
.cs-picker.cs-picker-md .select2-container {
    width: 210px !important;
}

/* Sensor and Period. The longest entries either will ever hold are "Not
   addressed" and "Last 3 months". */
.cs-picker.cs-picker-sm .select2-container {
    width: 140px !important;
}

    .select2-container--default .select2-selection--single {
        border: 1px solid var(--cs-field-border);
        border-radius: var(--cs-radius-sm);
        height: 36px;
        font-size: 13px;
        text-align: left;
    }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 34px;
            padding-left: 10px;
            color: var(--cs-ink);
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 34px;
        }

.select2-dropdown {
    font-size: 13px;
    border: 1px solid var(--cs-field-border);
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(16, 24, 40, 0.10);
    overflow: hidden;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--cs-field-border);
    border-radius: var(--cs-radius-sm);
    height: 32px;
    padding: 4px 8px;
}

.select2-results__option {
    font-size: 13px;
    padding: 7px 10px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--cs-ink);
}

/* ---------------------------------------------------------------------------
   Modal and loading overlay
   --------------------------------------------------------------------------- */

.modalPopupL {
    background-color: var(--cs-surface);
    width: 90%;
    border: 1px solid var(--cs-line);
    border-radius: var(--cs-radius);
    padding: 20px;
    box-shadow: 0 12px 32px rgba(16, 24, 40, 0.18);
}

.LockOn {
    display: none;
    visibility: visible;
    position: absolute;
    z-index: 10000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    background-image: url("/images/loading.gif");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}

/* ---------------------------------------------------------------------------
   Small screens
   --------------------------------------------------------------------------- */

@media (max-width: 640px) {
    .cs-stats,
    .pd-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .cs-page,
    .pd-page,
    .pref-wrap {
        padding: 16px 12px 40px;
    }
}
/* ===========================================================================
   Probe data page
   Append to /Asserts/Main/cs-ui.css

   Only cs- names, per the house style. Nothing here is page-scoped with an
   id, so anything reusable (segmented controls, toggle chips, the readout)
   is available to the next page that needs it.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Toolbar additions
   --------------------------------------------------------------------------- */

/* Title, identity and pickers share one row. The chart is the point of the
   page, so the furniture above it earns as little height as possible. */
.cs-probe-head {
    align-items: flex-end;
    padding-bottom: 4px;
}

/* Back control, then a two line title block. Its height matches the caption
   plus picker on the right, so both sides of the toolbar sit on one baseline. */
.cs-head-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cs-head-title {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

    /* nicepage restyles bare headings, so pin the page title here too. */
    .cs-head-title h1.cs-title {
        font-size: 22px;
        font-weight: 600;
        line-height: 1.15;
        margin: 0;
        letter-spacing: -0.015em;
        color: var(--cs-ink-strong);
    }

.cs-probe-id {
    font-size: 13px;
    line-height: 1.4;
    color: var(--cs-ink-muted);
}

/* An arrow rather than words: it is navigation, and next to a title the words
   read as part of the heading. Where it goes lives in the title attribute. */
.cs-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: 1px solid var(--cs-line);
    border-radius: var(--cs-radius-sm);
    background: var(--cs-surface);
    color: var(--cs-ink-muted);
    font-size: 17px;
    line-height: 1;
    text-decoration: none;
}

    .cs-back:hover {
        border-color: #C9CED6;
        color: var(--cs-ink);
        background: var(--cs-surface-alt);
        text-decoration: none;
    }

    .cs-back:focus-visible {
        outline: none;
        box-shadow: var(--cs-focus);
    }

    .cs-back:hover {
        text-decoration: underline;
    }

.cs-pickers {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 18px;
}

.cs-picker {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

/* The custom range sits under Period, which is the last picker on the right,
   so the row is right aligned rather than adrift on the left. It is drawn as
   one panel because it is one decision: nothing in it takes effect until
   Apply is pressed. */
.cs-daterow {
    display: flex;
    justify-content: flex-end;
    padding: 10px 0 2px;
}

.cs-daterow-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
    padding: 12px 14px;
    background: var(--cs-surface-alt);
    border: 1px solid var(--cs-line);
    border-radius: var(--cs-radius-sm);
}

.cs-date {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.cs-date-line {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .cs-date input,
    .cs-date select {
        height: 32px;
        font-size: 13px;
        padding: 3px 8px;
        border: 1px solid var(--cs-field-border);
        border-radius: var(--cs-radius-sm);
        background: var(--cs-surface);
        color: var(--cs-ink);
    }

        .cs-date input:focus,
        .cs-date select:focus {
            outline: none;
            border-color: #868B94;
            box-shadow: var(--cs-focus);
        }

/* Hour and minute as short lists. A native time input makes the user scroll
   a 60 item minute wheel to reach the top of the hour. */
.cs-time-boxes {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

    .cs-time-boxes[hidden] {
        display: none;
    }

.cs-date select.cs-time-sel {
    padding: 3px 4px;
    min-width: 54px;
}

.cs-time-sep {
    color: var(--cs-ink-muted);
    font-size: 13px;
}

.cs-check-inline {
    margin-bottom: 0;
    align-self: center;
    padding-top: 16px;
}

/* Apply carries the whole row, so it lines up with the fields rather than
   with their labels. */
.cs-date-apply {
    display: flex;
    align-items: center;
    padding-top: 16px;
}

    .cs-date-apply .cs-btn {
        margin-right: 0;
        height: 32px;
    }

/* Something has been changed but not applied yet. A quiet nudge, not an
   alarm: the chart below is still showing the previous window. */
.cs-btn.is-dirty {
    background-color: var(--cs-link);
    border-color: var(--cs-link);
}

    .cs-btn.is-dirty:hover {
        background-color: #232B66;
        border-color: #232B66;
    }

@media (max-width: 720px) {
    .cs-daterow {
        justify-content: stretch;
    }

    .cs-daterow-inner {
        width: 100%;
    }
}

/* ---------------------------------------------------------------------------
   Latest reading strip
   --------------------------------------------------------------------------- */

.cs-latest {
    background: var(--cs-surface);
    border: 1px solid var(--cs-line);
    border-radius: var(--cs-radius);
    box-shadow: var(--cs-shadow);
    padding: 10px 16px 12px;
    margin-top: 12px;
}

.cs-latest-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 6px;
}

.cs-latest-time {
    font-size: 12px;
    color: var(--cs-ink-muted);
}

.cs-latest-strip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 4px 10px;
}

.cs-latest-cell {
    padding: 2px 10px 2px 0;
    border-right: 1px solid var(--cs-line-soft);
}

    .cs-latest-cell:last-child {
        border-right: none;
    }

.cs-latest-num {
    display: block;
    font-size: 20px;
    font-weight: 300;
    line-height: 1.2;
    color: var(--cs-ink-strong);
}

    .cs-latest-num i {
        font-size: 12px;
        font-style: normal;
        color: var(--cs-ink-muted);
        margin-left: 2px;
    }

.cs-latest-sub {
    display: block;
    font-size: 12px;
    color: var(--cs-ink-muted);
}

/* ---------------------------------------------------------------------------
   Chart card
   --------------------------------------------------------------------------- */

.cs-subbar-tight {
    margin-top: 26px;
    margin-bottom: 12px;
    align-items: flex-end;
}

.cs-section-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
}

.cs-section-note {
    font-size: 12px;
    color: var(--cs-ink-muted);
    margin: 3px 0 0;
    max-width: 640px;
}

.cs-chart-card {
    padding-bottom: 4px;
}

.cs-chart-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.cs-chart-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.cs-btn-sm {
    padding: 5px 11px;
    font-size: 12px;
    margin-right: 0;
}

    .cs-btn-sm.is-active {
        background: var(--cs-surface-sunk);
        border-color: #C9CED6;
    }

/* The chart itself needs a drawing height. This is a canvas, not a layout
   container, so it is the one place a pixel height is right. */
/* A drawing canvas, not a layout container, so a height belongs here. It
   follows the viewport so the whole chart lands on screen on a laptop and
   still gets room to breathe on a big monitor. */
.cs-chart {
    height: clamp(340px, 52vh, 560px);
    width: 100%;
    padding: 6px 12px 0;
}

/* ---------------------------------------------------------------------------
   Options drawer
   --------------------------------------------------------------------------- */

.cs-options {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    padding: 16px 20px;
    background: var(--cs-surface-alt);
    border-bottom: 1px solid var(--cs-line-soft);
}

.cs-option-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.cs-seg {
    display: inline-flex;
    background: var(--cs-surface-sunk);
    border-radius: 8px;
    padding: 3px;
    gap: 3px;
}

    .cs-seg button {
        border: none;
        background: transparent;
        color: var(--cs-label);
        font-size: 13px;
        font-weight: 500;
        padding: 7px 14px;
        border-radius: var(--cs-radius-sm);
        cursor: pointer;
        white-space: nowrap;
    }

        /* Same icon gap as a tab. Without it the glyph sits against the word. */
        .cs-seg button i {
            margin-right: 7px;
        }

        .cs-seg button:hover {
            color: var(--cs-ink);
        }

        .cs-seg button.is-active {
            background: var(--cs-surface);
            color: var(--cs-ink);
            box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
        }

.cs-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cs-chip-toggle {
    border: 1px solid var(--cs-field-border);
    background: var(--cs-surface);
    color: var(--cs-ink-muted);
    font-size: 12px;
    font-weight: 500;
    padding: 5px 11px;
    border-radius: 999px;
    cursor: pointer;
}

    .cs-chip-toggle:hover {
        border-color: #C9CED6;
        color: var(--cs-ink);
    }

    .cs-chip-toggle.is-active {
        background: var(--cs-surface-sunk);
        border-color: #B9BEC6;
        color: var(--cs-ink);
        font-weight: 600;
    }

        .cs-chip-toggle.is-active::before {
            content: "";
            display: inline-block;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--cs-ink);
            margin-right: 6px;
            vertical-align: middle;
        }

        .cs-chip-toggle.is-active:hover {
            border-color: var(--cs-ink);
        }

/* A chip that only affects something not currently drawn. Left live it looks
   broken: you press it and nothing on screen changes. */
.cs-chip-toggle:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

    .cs-chip-toggle:disabled:hover {
        border-color: var(--cs-field-border);
        color: var(--cs-ink-muted);
    }

/* ---------------------------------------------------------------------------
   Shared readout
   --------------------------------------------------------------------------- */

.cs-readout {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding: 11px 20px;
    border-bottom: 1px solid var(--cs-line-soft);
    background: var(--cs-surface);
    position: sticky;
    top: 0;
    z-index: 3;
    min-height: 40px;
}

.cs-readout-time {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--cs-ink-faint);
    flex: 0 0 auto;
}

.cs-readout-values {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
}

.cs-readout-item {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    color: var(--cs-ink-muted);
    font-variant-numeric: tabular-nums;
}

    .cs-readout-item i {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 6px;
        display: inline-block;
    }

    .cs-readout-item b {
        font-weight: 600;
        color: var(--cs-ink);
        margin-left: 5px;
    }

    .cs-readout-item.is-avg b {
        color: var(--cs-ink-strong);
    }

/* ---------------------------------------------------------------------------
   Series strip under the chart
   --------------------------------------------------------------------------- */

.cs-series-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--cs-line-soft);
}

.cs-series-chip {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--cs-line);
    background: var(--cs-surface);
    color: var(--cs-ink);
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    cursor: pointer;
}

    .cs-series-chip i {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 6px;
        display: inline-block;
    }

    .cs-series-chip:hover {
        border-color: #C9CED6;
    }

    .cs-series-chip.is-off {
        color: var(--cs-ink-muted);
        background: var(--cs-surface-alt);
    }

        .cs-series-chip.is-off i {
            opacity: 0.3;
        }

/* ---------------------------------------------------------------------------
   Depth charts
   --------------------------------------------------------------------------- */

.cs-stack {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
    gap: 14px;
    align-items: start;
}

.cs-stack-card {
    padding: 12px 12px 8px;
}

.cs-stack-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 4px 8px;
}

.cs-stack-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
}

.cs-stack-label {
    font-size: 13px;
    font-weight: 600;
}

.cs-stack-value {
    margin-left: auto;
    font-size: 15px;
    font-weight: 300;
    color: var(--cs-ink-strong);
    font-variant-numeric: tabular-nums;
}

.cs-stack-chart {
    height: 210px;
    width: 100%;
}

/* ---------------------------------------------------------------------------
   Small screens
   --------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .cs-chart {
        height: 360px;
        padding: 6px 0 0;
    }

    .cs-pickers {
        gap: 12px;
    }

    .cs-readout {
        position: static;
    }

    .cs-stack {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------------------
   Help and first-visit hint
   --------------------------------------------------------------------------- */

.cs-btn-icon {
    width: 28px;
    padding: 5px 0;
    justify-content: center;
    font-weight: 600;
}

.cs-help {
    padding: 16px 20px 18px;
    background: var(--cs-surface-alt);
    border-bottom: 1px solid var(--cs-line-soft);
}

    .cs-help h6 {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: var(--cs-ink-faint);
        margin: 0 0 10px;
    }

    .cs-help ul {
        margin: 0 0 14px;
        padding-left: 18px;
        max-width: 780px;
    }

    .cs-help li {
        font-size: 13px;
        line-height: 1.65;
        color: var(--cs-ink);
    }

    .cs-help b {
        font-weight: 600;
    }

/* Shown once, then dismissed for good. Sits directly above the chart so it is
   read where the behaviour it describes actually happens. */
.cs-hint {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 20px;
    font-size: 12.5px;
    color: #1F4E6B;
    background: #F1F7FB;
    border-bottom: 1px solid #D9E7F0;
}

    .cs-hint a {
        color: var(--cs-link);
        font-weight: 500;
        text-decoration: none;
        white-space: nowrap;
    }

        .cs-hint a:hover {
            text-decoration: underline;
        }

.cs-hint-close {
    margin-left: auto;
    border: none;
    background: transparent;
    color: #6D8EA3;
    font-size: 18px;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
}

    .cs-hint-close:hover {
        color: var(--cs-ink);
    }

/* ---------------------------------------------------------------------------
   Escape hatch to the previous page
   --------------------------------------------------------------------------- */

.cs-oldlink {
    font-size: 12px;
    color: var(--cs-ink-muted);
    margin: 22px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--cs-line-soft);
}

    .cs-oldlink a {
        color: var(--cs-link);
        text-decoration: none;
    }

        .cs-oldlink a:hover {
            text-decoration: underline;
        }

/* A probe that has stopped reporting says so in words, not only in colour. */
.cs-stale {
    display: inline-block;
    margin-left: 10px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: var(--cs-state-stale);
    border-radius: 999px;
    padding: 2px 8px;
}

/* An option that cannot change anything in the current view should not look
   like it can. Dimmed and inert rather than removed, so the drawer keeps a
   stable shape as the user moves between views. */
.cs-option-group.is-disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* ===========================================================================
   Sensor dashboard
   Appended to /Asserts/Main/cs-ui.css

   Reference implementation: /Pages/Dashboard/SensorDash.aspx
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Page title, pinned

   nicepage restyles bare h1 and, on a page that links its own folder copy of
   nicepage.css, that copy loads after this sheet. Rather than depend on load
   order, these selectors carry an element and two classes so they outrank
   anything nicepage can throw at a heading. Pin the rule, do not reorder the
   links: the folder copies are hand edited and are load bearing.
   --------------------------------------------------------------------------- */

.cs-page h1.cs-title,
.pd-page h1.pd-title,
.pref-wrap h1.pref-title {
    font-family: 'Roboto', sans-serif !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    color: var(--cs-ink-strong) !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
}

/* A sub page sits one tier down. The probe data page has a back control, a two
   line title block and three pickers on the same row, so the smaller title is
   what lets that row stay a single line. */
.cs-probe-head h1.cs-title {
    font-size: 22px !important;
}

/* nicepage restyles bare h2 as well, and a section heading inside the page is
   the one place we use one. `.cs-section-title` alone is (0,1,0) and loses to
   nicepage's (0,1,1), which is why "Depth detail" and "Channel detail" both
   render at heading size. Same fix as the titles above: element plus two
   classes, so it outranks anything nicepage can reach it with.

   This corrects Probe.aspx as well, which carries the same markup. */
.cs-page h2.cs-section-title {
    font-family: 'Roboto', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: var(--cs-ink) !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ---------------------------------------------------------------------------
   Toolbar, tabs and totals
   --------------------------------------------------------------------------- */

/* Ten sensor types will not sit on one line on a laptop, so the strip wraps
   and the tray grows with it rather than scrolling sideways. */
.cs-tabs-wrap {
    flex-wrap: wrap;
    row-gap: 3px;
}

.cs-tab-count {
    display: inline-block;
    margin-left: 7px;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--cs-ink-muted);
}

.cs-tab.is-active .cs-tab-count {
    color: var(--cs-ink);
}

/* A type with nothing on this farm still holds its place, so the strip does
   not reshuffle as the user changes farm. */
.cs-tab.is-empty {
    opacity: 0.45;
    pointer-events: none;
}

.cs-total {
    font-size: 13px;
    color: var(--cs-ink-muted);
    white-space: nowrap;
}

    .cs-total b {
        font-weight: 600;
        color: var(--cs-ink-strong);
        font-variant-numeric: tabular-nums;
    }

/* ---------------------------------------------------------------------------
   Count tiles

   These are the overview and the navigation at once. Nine of them, so the
   track is tighter than .cs-grid: five across at 1920, three on a laptop.
   --------------------------------------------------------------------------- */

.cs-grid-tight {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
    gap: 14px;
    /* stretch, not start: a longer label on one tile must not make that tile
       taller than the rest of its row. */
    align-items: stretch;
}

.cs-count {
    display: block;
    width: 100%;
    text-align: left;
    font-family: 'Roboto', sans-serif;
    background: var(--cs-surface);
    border: 1px solid var(--cs-line);
    border-radius: var(--cs-radius);
    box-shadow: var(--cs-shadow);
    padding: 16px 18px 14px;
    cursor: pointer;
    transition: box-shadow 0.2s, border-color 0.2s;
}

    .cs-count:hover {
        border-color: #D5D9DF;
        box-shadow: var(--cs-shadow-raised);
    }

    .cs-count:focus-visible {
        outline: none;
        box-shadow: var(--cs-focus), var(--cs-shadow);
    }

.cs-count-icon {
    font-size: 17px;
    color: var(--cs-ink-muted);
    line-height: 1;
}

.cs-count-num {
    display: block;
    font-size: 40px;
    font-weight: 300;
    line-height: 1.05;
    color: var(--cs-ink-strong);
    font-variant-numeric: tabular-nums;
    margin-top: 8px;
}

.cs-count-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--cs-ink-faint);
    margin-top: 4px;
}

.cs-count-go {
    display: block;
    font-size: 12px;
    color: var(--cs-link);
    margin-top: 10px;
}

/* A type with no sensors is not a destination. It stays on the grid so the
   layout is stable, but it says so and does not invite a click. */
.cs-count.is-empty {
    background: var(--cs-surface-alt);
    box-shadow: none;
    cursor: default;
    pointer-events: none;
}

    .cs-count.is-empty .cs-count-num,
    .cs-count.is-empty .cs-count-icon {
        color: var(--cs-ink-muted);
        opacity: 0.55;
    }

    .cs-count.is-empty .cs-count-go {
        color: var(--cs-ink-faint);
    }

/* ---------------------------------------------------------------------------
   Table views
   --------------------------------------------------------------------------- */

.cs-view-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

.cs-view-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--cs-ink);
    margin: 0;
}

    .cs-view-name span {
        display: block;
        font-size: 12px;
        font-weight: 400;
        color: var(--cs-ink-muted);
        margin-top: 2px;
    }

/* GridView writes its own empty row. Give it the frame the DataTables shell
   would otherwise have provided. */
.cs-empty {
    background: var(--cs-surface);
    border: 1px solid var(--cs-line);
    border-radius: var(--cs-radius);
    box-shadow: var(--cs-shadow);
}

    .cs-empty td {
        padding: 34px 20px !important;
        text-align: left !important;
        font-size: 13px;
        color: var(--cs-ink-muted);
    }

/* A reading older than a day says so in words beside the timestamp, matching
   the probe dashboard. Colour alone would not carry it. */
.cs-stale {
    display: inline-block;
    margin-left: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
    color: #6E747E;
    background: var(--cs-surface-sunk);
}

@media (max-width: 640px) {
    .cs-grid-tight {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .cs-count {
        padding: 13px 14px 12px;
    }

    .cs-count-num {
        font-size: 30px;
    }
}

/* ---------------------------------------------------------------------------
   Cards and list, one choice for the page

   Every sensor type carries both layouts. Which one shows is a single
   attribute on the page shell, so the nine views cannot fall out of step and
   the toggle does not have to be wired nine times.
   --------------------------------------------------------------------------- */

.cs-view-tools {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cs-layer {
    display: none;
}

.cs-page[data-layout="cards"] .cs-layer-cards,
.cs-page[data-layout="list"] .cs-layer-list {
    display: block;
}

/* Sensor card. Same shell as a probe card so the two dashboards read as one
   product; the internals differ because the readings do. */
.sd-card {
    padding: 16px 18px 14px;
    transition: box-shadow 0.2s, border-color 0.2s;
}

    .sd-card:hover {
        border-color: #D5D9DF;
        box-shadow: var(--cs-shadow-raised);
    }

    /* The probe card's headline is a percentage of field capacity and needs no
       naming. A sensor's headline could be flow, pressure or pH, so it says
       which underneath rather than leaving the reader to infer it. */
    .sd-card .sd-card-metric {
        font-size: 10.5px;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: var(--cs-ink-faint);
        margin-top: -4px;
    }

    .sd-card .pd-reading {
        margin-bottom: 2px;
    }

.cs-empty-note {
    font-size: 13px;
    color: var(--cs-ink-muted);
    margin: 0;
    padding: 30px 2px;
}

/* ---------------------------------------------------------------------------
   Weather station card

   A weather station reports eight things at once, so unlike a single reading
   sensor it needs a second focal point. Wind gets a dial: direction is the one
   reading on the card that is a bearing rather than a magnitude, and a bearing
   is read faster as a needle than as "295.95".
   --------------------------------------------------------------------------- */

.sd-wind {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--cs-line-soft);
}

.sd-wind-dial {
    flex: 0 0 auto;
    width: 62px;
    height: 62px;
}

    .sd-wind-dial .sd-dial-face {
        fill: none;
        stroke: var(--cs-line);
        stroke-width: 1.5;
    }

    .sd-wind-dial .sd-dial-tick {
        stroke: var(--cs-line);
        stroke-width: 1.5;
        stroke-linecap: round;
    }

    .sd-wind-dial .sd-dial-n {
        font-size: 11px;
        font-weight: 600;
        fill: var(--cs-ink-faint);
        font-family: 'Roboto', sans-serif;
    }

    .sd-wind-dial .sd-dial-needle {
        fill: var(--cs-ink);
    }

    /* No bearing to point at, so the needle is not drawn and the face stays. */
    .sd-wind-dial.is-unknown .sd-dial-face,
    .sd-wind-dial.is-unknown .sd-dial-tick {
        stroke: var(--cs-line-soft);
    }

.sd-wind-read {
    min-width: 0;
}

.sd-wind-speed {
    font-size: 22px;
    font-weight: 300;
    line-height: 1.1;
    color: var(--cs-ink-strong);
    font-variant-numeric: tabular-nums;
}

    .sd-wind-speed span {
        font-size: 12px;
        color: var(--cs-ink-muted);
        margin-left: 4px;
        font-weight: 400;
    }

.sd-wind-dir {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--cs-ink);
    margin-top: 1px;
}

    .sd-wind-dir b {
        font-weight: 600;
    }

.sd-wind-range {
    font-size: 11.5px;
    color: var(--cs-ink-muted);
    margin-top: 3px;
    font-variant-numeric: tabular-nums;
}

.sd-wind-label {
    font-size: 10.5px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--cs-ink-faint);
    margin-bottom: 2px;
}

/* A weather station card carries more than the others, so it is allowed a
   wider track and its stats run four across rather than three. */
.cs-grid-weather {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(392px, 1fr));
    gap: 16px;
    align-items: stretch;
}

    .cs-grid-weather .cs-stats {
        grid-template-columns: repeat(4, 1fr);
    }

@media (max-width: 640px) {
    .cs-grid-weather {
        grid-template-columns: 1fr;
    }

        .cs-grid-weather .cs-stats {
            grid-template-columns: repeat(2, 1fr);
        }
}

/* ===========================================================================
   Temperature meter page
   TemperatureMeter.aspx + cs-tempmeter.js

   The page reuses the probe page's shell wholesale: .cs-probe-head, .cs-latest,
   .cs-chart-card, .cs-options, .cs-readout, .cs-series-bar, .cs-stack. Only the
   three things below are new.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Latest reading strip, temperature variant

   The cells carry a bar as well as a figure, so they need a little more room
   than the probe page's depth cells and a little more air between rows.
   --------------------------------------------------------------------------- */

.cs-latest-temp {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px 16px;
}

/* Where the reading sits on the -20 to 60 band the old gauge used, so a
   number has somewhere to sit. One segment, width equals the value: no
   stacked segments, no stripes.

   Colour marks the exception only. Frost and heat get a state colour and a
   word beside them; everything in between stays neutral, so a page of
   ordinary readings reads as calm. */
.cs-temp-bar {
    display: block;
    position: relative;
    height: 4px;
    margin-top: 7px;
    border-radius: 2px;
    background: var(--cs-surface-sunk);
    overflow: hidden;
}

.cs-temp-fill {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: var(--cs-ink-muted);
}

.cs-temp-bar.is-cold .cs-temp-fill {
    background: var(--cs-state-above);
}

.cs-temp-bar.is-hot .cs-temp-fill {
    background: var(--cs-state-bad);
}

/* Colour always gets a text partner. */
.cs-temp-chip {
    display: inline-block;
    margin-top: 6px;
    padding: 1px 7px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

    .cs-temp-chip.is-cold {
        color: var(--cs-state-above);
        background: #F4F7FE;
    }

    .cs-temp-chip.is-hot {
        color: var(--cs-state-bad);
        background: var(--cs-wash-bad);
    }

/* ---------------------------------------------------------------------------
   Readout, daily range

   In the Daily range view each channel reads "mean, then low to high", so the
   span behind the mean is set back a step rather than competing with it.
   --------------------------------------------------------------------------- */

/* A control that cannot do anything in the current state should not look like
   it can. Matches .cs-option-group.is-disabled, for the buttons that do not
   sit in an option group: the split charts chip, and the last series chip
   still showing on a chart that has to keep something on it. */
.cs-chip-toggle.is-disabled,
.cs-series-chip.is-disabled {
    opacity: 0.4;
    pointer-events: none;
}

.cs-readout-range {
    color: var(--cs-ink-muted);
    font-weight: 400;
    margin-left: 4px;
}