/* ==========================================================================
   the-yachtclub-services-sentinel.css — Sentinel (Support / NOC surface)
   --------------------------------------------------------------------------
   Page sheet for the Sentinel portal. Loads AFTER Bootstrap 5.3 and
   the-yachtclub-platform.css; the platform sheet owns every system component
   (.card, .table, .btn, .badge, .yc-*) and the support-mode tokens — this
   sheet owns only what is Sentinel's: the NOC shell, page scaffolds, chart
   and map fixtures, and the fact/claim presentation.

   Contract: sentinel.bs.html carries NO inline style declarations. The only
   style attributes in the markup are CSS-variable data bindings written by
   the view layer (--c, --bg, --fg, --h, --w, --l, --b) — runtime chart
   geometry and health tints. Every visual declaration, including how those
   variables apply, lives here.
   ========================================================================== */

html, body { margin: 0; padding: 0; }

/* --- shell ---------------------------------------------------------------- */
.sn-shell { min-height: 100vh; background: var(--yc-canvas); min-width: 1400px; font-family: var(--yc-font-sans); }
.sn-main  { margin-left: 270px; padding: 24px 30px 80px; min-height: 100vh; }

/* --- rail: brand, search, account ---------------------------------------- */
.sn-rail-brand { display: flex; align-items: center; gap: 10px; padding: 6px 10px 14px; }
.sn-rail-mark  { width: 28px; height: 28px; border-radius: var(--yc-r-control); background: var(--yc-rail-active-bg); color: var(--yc-rail-bg); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.sn-rail-name  { font-size: 13px; font-weight: 700; color: var(--yc-rail-ink); line-height: 1.3; white-space: nowrap; }
.sn-rail-sub   { font-size: 10.5px; color: var(--yc-rail-icon); white-space: nowrap; }
.sn-rail-search       { display: flex; align-items: center; gap: 7px; margin: 0 2px 2px; padding: 6px 10px; border-radius: var(--yc-r-control); background: var(--yc-rail-hover); }
.sn-rail-search-icon  { font-size: 11px; color: var(--yc-rail-icon); }
.sn-rail-search-input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--yc-rail-ink); font-size: 12px; }
.sn-rail-count  { margin-left: auto; font-size: 10px; font-weight: 700; color: var(--yc-on-ensign); background: var(--yc-ensign); padding: 1px 7px; border-radius: var(--yc-r-pill); }
.sn-rail-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--yc-ensign); color: var(--yc-on-ensign); font-size: 9.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sn-rail-user   { font-size: 12px; font-weight: 600; color: var(--yc-rail-ink); white-space: nowrap; }
.sn-rail-role   { font-size: 10.5px; color: var(--yc-rail-icon); }

/* --- page head ------------------------------------------------------------ */
.sn-page-head  { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.sn-page-title { font-size: var(--yc-fs-page-title); font-weight: 700; color: var(--yc-ink); margin: 0 0 3px; letter-spacing: -.01em; }
.sn-page-sub   { font-size: var(--yc-fs-sub); color: var(--yc-muted); }

/* --- layout scaffolds ------------------------------------------------------ */
.sn-stack    { display: flex; flex-direction: column; gap: var(--yc-gap); min-width: 0; }
.sn-cols     { display: grid; grid-template-columns: 3fr 1fr; gap: var(--yc-gap); align-items: start; }
.sn-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

/* --- structure utilities (the page's flex vocabulary) ---------------------- */
.sn-row    { display: flex; }
.sn-hrow   { display: flex; align-items: center; }
.sn-irow   { display: inline-flex; align-items: center; }
.sn-brow   { display: flex; align-items: baseline; }
.sn-vstack { display: flex; flex-direction: column; }
.sn-g4 { gap: 4px; } .sn-g5 { gap: 5px; } .sn-g6 { gap: 6px; } .sn-g8 { gap: 8px; }
.sn-g9 { gap: 9px; } .sn-g10 { gap: 10px; } .sn-g12 { gap: 12px; } .sn-g16 { gap: 16px; }
.sn-g24 { gap: 24px; } .sn-g26 { gap: 26px; }
.sn-fill { flex: 1; min-width: 0; } .sn-flex1 { flex: 1; } .sn-min0 { min-width: 0; }
.sn-spread { justify-content: space-between; } .sn-start { justify-content: flex-start; }
.sn-right { text-align: right; } .sn-noshrink { flex-shrink: 0; } .sn-ai-center { align-items: center; }
.sn-wrap { flex-wrap: wrap; } .sn-nowrap { white-space: nowrap; } .sn-block { display: block; }
.sn-click { cursor: pointer; } .sn-plainlink { text-decoration: none; }
.sn-ellipsis { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sn-m0 { margin: 0; } .sn-mb0 { margin-bottom: 0; } .sn-mb4 { margin-bottom: 4px; }
.sn-mb5 { margin-bottom: 5px; } .sn-mb6 { margin-bottom: 6px; } .sn-mb7 { margin-bottom: 7px; }
.sn-mb8 { margin-bottom: 8px; } .sn-mb16 { margin-bottom: 16px; } .sn-mt2 { margin-top: 2px; }
.sn-mono { font-family: var(--yc-font-mono); }
.sn-fs10 { font-size: 10px; } .sn-fs11 { font-size: 11px; } .sn-lh15 { line-height: 1.5; }

/* --- in-card rows ----------------------------------------------------------- */
.sn-row-pad    { padding: 6px 0 8px; }
.sn-row-pad-sm { padding: 4px 0; }
.sn-px8 { padding: 0 8px; }
.sn-py6 { padding-top: 6px; padding-bottom: 6px; }
.sn-list-row   { display: flex; align-items: center; gap: 12px; padding: 8px var(--yc-card-pad); border-bottom: 1px solid var(--yc-rule); }
.sn-list-row-9 { display: flex; align-items: center; gap: 9px; padding: 9px var(--yc-card-pad); border-bottom: 1px solid var(--yc-rule); }
.sn-list-row-7 { display: flex; align-items: center; gap: 12px; padding: 7px var(--yc-card-pad); border-bottom: 1px solid var(--yc-rule); }
.sn-split-row  { display: flex; border-bottom: 1px solid var(--yc-rule); }
.sn-split-cell { flex: 1; min-width: 0; padding: 11px 14px; border-right: 1px solid var(--yc-rule); }
.sn-divider    { height: 1px; background: var(--yc-rule); }

/* card-footer variants */
.sn-footnote    { justify-content: flex-start; line-height: 1.55; }
.sn-footnote-15 { justify-content: flex-start; line-height: 1.5; }

/* --- help + alert fittings -------------------------------------------------- */
.sn-help       { flex-direction: column; align-items: stretch; margin-bottom: 0; }
.sn-help-open  { flex-direction: column; align-items: stretch; }
.sn-help-title { display: flex; align-items: center; gap: 9px; font-weight: 700; color: var(--yc-ink); font-size: var(--yc-fs-body); }
.sn-help-icon  { color: var(--yc-help-fg); }
.sn-help-body  { color: var(--yc-body); margin-top: 8px; }
.sn-alert-title   { display: flex; align-items: center; gap: 9px; font-weight: 700; }
.sn-danger-rule   { height: 1px; background: var(--yc-danger-edge); margin: 10px 0; }
.sn-danger-strong { font-weight: 700; color: var(--yc-danger-fg); }

/* --- typography ------------------------------------------------------------- */
.sn-strong     { font-weight: 700; color: var(--yc-ink); }
.sn-plain      { font-weight: 500; color: var(--yc-body); }
.sn-ink   { color: var(--yc-ink); }  .sn-body { color: var(--yc-body); }
.sn-muted { color: var(--yc-muted); }
.sn-unit  { font-size: var(--yc-fs-small); font-weight: 500; color: var(--yc-muted); }
.sn-val        { font-size: 13px; color: var(--yc-ink); }
.sn-val-muted  { color: var(--yc-muted); font-size: 13px; }
.sn-val-warn   { font-size: 13px; color: var(--yc-warn-fg); }
.sn-val-faint  { font-size: 13px; color: var(--yc-faint); }
.sn-val-quiet  { font-size: 13px; font-weight: 500; color: var(--yc-faint); }
.sn-cell       { font-size: 12.5px; color: var(--yc-body); }
.sn-cell-ink   { font-size: 12.5px; color: var(--yc-ink); }
.sn-meta       { font-size: 11.5px; color: var(--yc-muted); }
.sn-faint-115  { font-size: 11.5px; color: var(--yc-faint); }
.sn-micro      { font-size: 9.5px; color: var(--yc-faint); }
.sn-microlabel { font-size: 10px; font-weight: 500; color: var(--yc-faint); line-height: 1; }
.sn-hint       { font-size: 11px; color: var(--yc-faint); }
.sn-note       { font-size: 12px; color: var(--yc-body); line-height: 1.5; }
.sn-note-ink   { font-size: 12px; color: var(--yc-ink); line-height: 1.45; }
.sn-subnote    { font-size: 10.5px; color: var(--yc-faint); margin-top: 2px; }
.sn-caption    { font-size: 11px; color: var(--yc-muted); line-height: 1.45; margin-top: 7px; }
.sn-label      { font-size: 12px; font-weight: 600; color: var(--yc-body); white-space: nowrap; }
.sn-name       { font-size: 12px; font-weight: 700; color: var(--yc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sn-link-strong { font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.sn-figure-row  { display: flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.sn-badge-mini  { font-size: 8.5px; padding: 0 5px; }

/* --- runtime data bindings ---------------------------------------------------
   The view layer binds health tints and chart geometry through CSS variables;
   these classes are the only consumers. */
.sn-c    { color: var(--c); }
.sn-last { font-weight: 500; color: var(--c); }
.sn-tint { background: var(--bg); color: var(--fg); }
.sn-fact-val       { font-size: 12px; font-weight: 600; color: var(--c); text-align: right; white-space: nowrap; }
.sn-fact-val-start { font-size: 12px; font-weight: 600; color: var(--c); white-space: nowrap; }
.sn-fact-strong    { font-weight: 600; color: var(--c); }
.sn-peri      { display: inline-flex; align-items: center; gap: 5px; color: var(--c); white-space: nowrap; }
.sn-peri-icon { font-size: 13px; color: var(--c); }
.sn-icon-18   { width: 18px; height: 18px; font-size: 9px; }
.sn-ver-chip  { background: var(--bg); color: var(--fg); border: 1px solid var(--yc-border); border-radius: var(--yc-r-chip); font-size: 11px; font-weight: 700; padding: 3px 9px; cursor: pointer; font-family: var(--yc-font-mono); }
.sn-stat-val  { font-size: 15px; font-weight: 800; line-height: 1; color: var(--c); }
.sn-conn-icon { font-size: 21px; color: var(--c); }
.sn-vital-trend { font-size: 11px; color: var(--c); }
.sn-gauge      { height: 4px; border-radius: 2px; background: var(--yc-rule); margin-top: 9px; overflow: hidden; }
.sn-gauge-fill { height: 4px; border-radius: 2px; background: var(--c); width: var(--w); }

/* --- charts (beats, cadence) -------------------------------------------------- */
.sn-vitals-pad { padding: 16px var(--yc-card-pad) 10px; }
.sn-chart-150  { display: flex; flex-direction: column; justify-content: space-between; height: 150px; padding-bottom: 18px; }
.sn-chart-158  { display: flex; flex-direction: column; justify-content: space-between; height: 158px; padding-bottom: 16px; }
.sn-bars      { display: flex; align-items: flex-end; gap: 4px; height: 132px; }
.sn-bar-slot  { flex: 1; display: flex; align-items: flex-end; height: 132px; }
.sn-bar       { width: 100%; border-radius: 2px 2px 0 0; background: var(--c); height: var(--h); }
.sn-bar-labels { display: flex; gap: 4px; margin-top: 6px; }
.sn-bar-label  { flex: 1; text-align: center; font-size: 9.5px; font-weight: 500; color: var(--yc-faint); }
.sn-plot     { position: relative; height: 142px; background: var(--yc-surface-sunken); border: 1px solid var(--yc-rule); border-radius: var(--yc-r-chip); overflow: hidden; }
.sn-abs-fill { position: absolute; inset: 0; width: 100%; height: 100%; }
.sn-abs-row  { position: absolute; inset: 0; display: flex; }
.sn-axis     { display: flex; justify-content: space-between; margin-top: 6px; }
.sn-midline  { position: absolute; left: 0; right: 0; bottom: 50%; border-top: 1px solid var(--yc-rule); }
.sn-cad-declared { position: absolute; left: 0; right: 0; bottom: var(--b); border-top: 1px dashed var(--yc-decor); }
.sn-cad-median   { position: absolute; left: 0; right: 0; bottom: var(--b); height: 1px; background: var(--yc-ok-fg); opacity: .75; }
.sn-cad-dot      { position: absolute; left: var(--l); bottom: var(--b); width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.sn-cad-declared-label { position: absolute; right: 7px; bottom: var(--b); font-size: 9.5px; color: var(--yc-faint); }
.sn-cad-median-label   { position: absolute; left: 7px; bottom: var(--b); font-size: 9.5px; color: var(--yc-ok-fg); }
.sn-legend        { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 14px; }
.sn-legend-swatch { width: 9px; height: 2px; border-radius: 1px; background: var(--c); align-self: center; }
.sn-panel-pad    { padding: 18px var(--yc-card-pad) 10px; }
.sn-panel-pad-14 { padding: 14px var(--yc-card-pad) 10px; }
.sn-panel-pad-10 { padding: 10px var(--yc-card-pad) 4px; }
.sn-stats-pad    { padding: 14px var(--yc-card-pad) 10px; display: flex; flex-direction: column; gap: 13px; }
.sn-h210 { height: 210px; } .sn-h190 { height: 190px; } .sn-h180 { height: 180px; }

/* --- map -------------------------------------------------------------------- */
/* Fleet pins are Leaflet divIcons; the view binds size (--d) and health
   colours (--c fill, --ring border) — the design lives here. */
.sn-marker { display: block; width: var(--d); height: var(--d); border-radius: 50%; background: var(--c); border: 2px solid var(--ring); box-shadow: 0 1px 4px rgba(0, 0, 0, .55); }
.sn-popup-note { color: var(--yc-faint); }
/* Fleet screen: the map owns the whole viewport right of the rail; the Fleet
   card floats on it and carries the refresh mechanic. */
.sn-map-viewport { position: fixed; inset: 0 0 0 270px; z-index: 5; }
.sn-map-fill { width: 100%; height: 100%; background: var(--yc-surface-sunken); }
.sn-map-shell { position: relative; border: 1px solid var(--yc-border); border-radius: var(--yc-r-card); overflow: hidden; box-shadow: var(--yc-shadow-card); }
.sn-map-full  { height: calc(100vh - 200px); min-height: 520px; background: var(--yc-surface-sunken); }
.sn-map-panel { position: absolute; top: 14px; right: 14px; width: 270px; z-index: 800; box-shadow: var(--yc-shadow-lift); }
.sn-legend-row  { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--yc-muted); white-space: nowrap; }
.sn-legend-note { display: block; font-size: 11px; color: var(--yc-faint); margin-top: 2px; padding-left: 17px; }

/* --- activity, beats, keys ---------------------------------------------------- */
a.sn-activity-link { text-decoration: none; }
a.sn-activity-link:hover { background: var(--yc-hover); }
.sn-activity-text { font-size: 11.5px; color: var(--yc-body); line-height: 1.4; flex: 1; min-width: 0; }
.sn-activity-time { font-size: 10px; color: var(--yc-faint); }
.sn-select-inline { width: auto; min-width: 190px; font-family: var(--yc-font-mono); font-size: 12.5px; }
.sn-key-col    { width: 200px; color: var(--yc-muted); }
.sn-token-cell { max-width: 250px; font-family: var(--yc-font-mono); font-weight: 700; }
.sn-key-box    { font-size: 13px; font-weight: 700; color: var(--yc-ink); background: var(--yc-surface-sunken); border: 1px solid var(--yc-border); border-radius: var(--yc-r-control); padding: 7px 12px; }
.sn-payload { margin: 0; padding: 14px var(--yc-card-pad); background: var(--yc-surface-sunken); font-family: var(--yc-font-mono); font-size: 11px; line-height: 1.7; color: var(--yc-body); white-space: pre-wrap; word-break: break-all; }
.sn-curl    { margin: 0; padding: 16px var(--yc-card-pad); background: var(--yc-surface-sunken); font-family: var(--yc-font-mono); font-size: 11.5px; line-height: 1.65; color: var(--yc-body); overflow-x: auto; }

/* --- empty states -------------------------------------------------------------- */
.sn-empty       { padding: 38px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.sn-empty-icon  { font-size: 22px; color: var(--yc-disabled); }
.sn-empty-title { font-size: 13.5px; font-weight: 700; color: var(--yc-ink); }
.sn-empty-copy  { font-size: 12px; color: var(--yc-muted); max-width: 420px; line-height: 1.6; }