/* snow-hokkaido views inside Open MCT (Espresso, dark). Floating panels get their own opaque surface token. */
:root { --sh-panel: #1f1f1e; --sh-ink: #f2f1ec; --sh-muted: #bfbdb3; }
.sh-host { height: 100%; width: 100%; position: relative; color: var(--sh-ink); }
.sh-h { margin: 12px 14px 4px; font-size: 18px; }
.sh-p { margin: 6px 14px; line-height: 1.6; font-size: 13px; }
.sh-muted { color: var(--sh-muted); }
.sh-map { position: absolute; inset: 0; }
.sh-legend { position: absolute; right: 10px; bottom: 28px; z-index: 2; background: var(--sh-panel); color: var(--sh-ink);
  border: 1px solid #3a3a37; border-radius: 6px; padding: 8px 10px; font-size: 12px; line-height: 1.5; }
.sh-legend-t { font-weight: 600; margin-bottom: 4px; }
.sh-legend-r i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 6px; vertical-align: -2px; border: 1px solid #555; }
.sh-legend-n { color: var(--sh-muted); margin-top: 4px; font-size: 11px; }
.sh-tabular-note { font-size: 11px; color: var(--sh-muted); padding: 4px 10px 8px; }
.maplibregl-popup-content { color: #111; font-size: 12px; line-height: 1.5; }
.sh-legend { max-width: 290px; }
.sh-legend-r { display: flex; align-items: center; gap: 4px; }
.sh-legend-head { color: var(--sh-muted); font-size: 10px; }
.sh-legend-lab { width: 6em; flex: none; white-space: nowrap; }
.sh-legend-cell { width: 2.9em; flex: none; height: 12px; text-align: center; border-radius: 2px; }
span.sh-legend-cell { height: auto; }
.sh-legend-r i.sh-legend-cell { display: block; width: 2.9em; height: 12px; margin: 0; }
.sh-slider { width: 100%; margin: 6px 0 2px; }
.sh-mode { margin-right: 8px; }
.sh-attr { font-size: 9px; line-height: 1.35; }
.sh-about { height: 100%; overflow-y: auto; box-sizing: border-box; padding: 12px 18px 28px; max-width: 52em; font-size: 13px; line-height: 1.75; color: var(--sh-ink); }
.sh-about h2 { font-size: 18px; margin: 4px 0 10px; }
.sh-about h3 { font-size: 15px; margin: 22px 0 6px; padding-bottom: 3px; border-bottom: 1px solid #3a3a37; }
.sh-about ul { list-style: disc; padding-left: 1.4em; margin: 6px 0; }
.sh-about li { margin: 3px 0; }
.sh-about code { background: #2c2c2a; padding: 0 4px; border-radius: 3px; }
.sh-lead { color: var(--sh-ink); }
.sh-table { border-collapse: collapse; margin: 8px 0; width: 100%; font-size: 12.5px; }
.sh-table th, .sh-table td { border: 1px solid #3a3a37; padding: 4px 8px; text-align: left; vertical-align: top; }
.sh-table th { background: #2c2c2a; }
.sh-ts-row { display: flex; align-items: center; gap: 10px; padding: 4px 14px; font-size: 12px; }

.sh-ts-lab { font-variant-numeric: tabular-nums; min-width: 6.5em; }
/* date picker (datePicker in openmct-plugin.js) */
.sh-dp { position: relative; display: inline-block; outline: none; }
.sh-dp-bar { display: flex; gap: 4px; align-items: center; margin: 6px 0 2px; }
.sh-dp-b { background: #2c2c2a; color: var(--sh-ink); border: 1px solid #4a4a46; border-radius: 4px; padding: 3px 8px; font-size: 12px; cursor: pointer; }
.sh-dp-b:hover:not(:disabled) { background: #3a3a37; }
.sh-dp-b:disabled { color: #6d6c66; cursor: default; border-color: #34342f; }
.sh-dp-date { min-width: 9.5em; font-variant-numeric: tabular-nums; font-weight: 600; }
.sh-dp-pop { position: absolute; left: 0; bottom: 100%; margin-bottom: 4px; z-index: 5; background: var(--sh-panel); border: 1px solid #4a4a46; border-radius: 6px; padding: 8px; width: 232px; box-shadow: 0 4px 14px rgba(0,0,0,.5); }
.sh-dp-pop[hidden] { display: none; }
.sh-dp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.sh-dp-month { font-weight: 600; }
.sh-dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.sh-dp-wd { color: var(--sh-muted); font-size: 10px; padding: 2px 0; }
.sh-dp-day { padding: 4px 0; border-color: transparent; background: transparent; color: #5d5c56; }
.sh-dp-day:not(:disabled) { background: #3d5a73; color: #fff; border-color: #5b86a8; }
.sh-dp-day:not(:disabled):hover { background: #4f7391; }
.sh-dp-day.sh-dp-sel { outline: 2px solid #f2c94c; outline-offset: -1px; font-weight: 700; }
.sh-dp-n { color: var(--sh-muted); font-size: 10px; margin-top: 6px; }
/* readability and viewer mode (issue #7; docs/shell.js) */
body { font-size: 13px; line-height: 1.5; }
.sh-viewer-btn { position: fixed; top: 6px; right: 150px; z-index: 50; background: #2c2c2a; color: var(--sh-ink); border: 1px solid #4a4a46; border-radius: 4px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.sh-viewer-btn:hover { background: #3a3a37; }
.sh-viewer .l-shell__pane-tree, .sh-viewer .l-shell__pane-inspector, .sh-viewer .l-shell__head > :not(.sh-viewer-btn), .sh-viewer .l-shell__drawer { display: none !important; }
.sh-viewer .sh-viewer-btn { top: 6px; right: 110px; }
.sh-dp-speed { background: #2c2c2a; color: var(--sh-ink); border: 1px solid #4a4a46; border-radius: 4px; font-size: 12px; padding: 2px 4px; }
.sh-dp-loop { font-size: 12px; color: var(--sh-muted); }
.sh-dp-play { min-width: 5.5em; }
.sh-date { position: absolute; left: 10px; top: 10px; z-index: 2; padding: 2px 8px; border-radius: 4px; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; color: #fff; background: rgba(0, 0, 0, .55); pointer-events: none; }
.sh-loading { position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, .4); opacity: 0; pointer-events: none; transition: opacity .15s; }
.sh-loading.on { opacity: 1; }
.sh-loading-t { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #fff; background: rgba(0, 0, 0, .65); padding: 4px 14px; border-radius: 4px; font-size: 13px; }
.sh-dp-b.sh-on { background: #3d5a73; border-color: #5b86a8; color: #fff; }