/* PureSurfers mobile interface 1.10.30.1. Responsive rules preserve desktop layout. */
.ps129-sheet-bar, .ps129-time-toggle, .ps129-more { display: none !important; }
@media (max-width: 767px), (max-width: 1024px) and (max-height: 600px) and (pointer: coarse) {
  html.ps129-mobile #detail {
    --paper: #f5f5ed; --muted: #c0c9c6; --panel: #080c0c; --panel2: #0d1210;
    --line: #424d49; --line2: #64716a; --cyan: #79dccc; --cyan2: #79dccc;
    --amber: #ffcc67; --violet: #c9b9ff; --coral: #ef9b87; --ice: #bce1ff;
    --size-green: #76ed96 !important; --size-teal: #44dfd2 !important;
    --size-orange: #ffac63 !important; --size-red: #ff777b !important;
    --size-pink: #ff4cdd !important; --size-unknown: #a5ada9 !important;
    position: fixed !important;
    top: max(54px, 9vh) !important;
    top: max(54px, 9dvh) !important;
    bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
    left: max(6px, env(safe-area-inset-left, 0px)) !important;
    right: max(6px, env(safe-area-inset-right, 0px)) !important;
    width: auto !important; height: auto !important; max-height: none !important;
    background: #060909 !important; color: #f5f5ed !important;
    opacity: 1 !important; backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid #66736b !important; border-top: 3px solid #ef785f !important;
    border-radius: 12px !important; box-shadow: 0 8px 32px #000b !important;
    z-index: 40 !important; overflow: hidden !important;
    display: flex !important; flex-direction: column !important;
  }
  html.ps129-mobile #detailContent {
    display: block !important; flex: 1 1 auto !important;
    min-height: 0 !important; height: auto !important; max-height: none !important;
    overflow-y: auto !important; overflow-x: hidden !important;
    overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch;
    background: #060909 url('contours.svg') repeat center top / 960px 960px !important;
    color: #f5f5ed !important; scrollbar-gutter: stable;
  }
  html.ps129-mobile #detail .detail-body {
    overflow: visible !important; flex: none !important;
    height: auto !important; max-height: none !important;
    padding: 12px 12px 28px !important; min-width: 0 !important;
    background: transparent !important;
    outline: none !important;
  }
  html.ps129-mobile #detail .detail-head {
    padding: 8px 12px !important; background: transparent !important;
    position: relative !important; flex: none !important;
  }
  html.ps129-mobile #detail .detail-head h2 {
    font-size: clamp(26px, 7vw, 34px) !important;
    line-height: 1.05 !important; color: #f5f5ed !important;
    padding: 0 !important; margin: 6px 0 8px !important;
    overflow-wrap: anywhere;
  }
  html.ps129-mobile #detail .detail-kicker { color: #a4e4d8 !important; margin-right: 0; }
  html.ps129-mobile #detail .detail-expand,
  html.ps129-mobile #detail .detail-close { display: none !important; }
  html.ps129-mobile #detail .badges { margin-top: 5px !important; gap: 4px !important; }
  html.ps129-mobile #detail .badge { color: #e0e7e1 !important; padding: 3px 5px !important; }
  html.ps129-mobile #detail .ps129-sheet-bar {
    display: flex !important; align-items: center; justify-content: space-between;
    flex: 0 0 auto; gap: 8px; padding: 0 9px;
    border-bottom: 1px solid #424d49; background: #060909;
  }
  html.ps129-mobile #detail .ps129-sheet-bar span { color: #ef9b87 !important; font-size: 9px !important; letter-spacing: .07em; }
  html.ps129-mobile #detail .ps129-back {
    min-height: 44px !important; padding: 6px !important;
    background: transparent !important; color: #f5f5ed !important; border: 0 !important;
    font-size: 14px !important; cursor: pointer;
  }
  html.ps129-mobile #detail .spot-toolbar { gap: 6px !important; margin-top: 8px !important; }
  html.ps129-mobile #detail .spot-toolbar > button { min-height: 44px !important; padding: 8px 12px !important; color: #f5f5ed !important; background: #0d1210 !important; }
  html.ps129-mobile #detail .spot-toolbar:not(.ps129-actions-open) > button:not(#quickFavorite):not(.ps129-more) { display: none !important; }
  html.ps129-mobile #detail .ps129-more { display: inline-flex !important; align-items: center; color: #f5f5ed !important; }
  html.ps129-mobile #detail .detail-nav {
    display: flex !important; flex-wrap: nowrap !important;
    flex: none !important; overflow-x: auto !important;
    padding: 6px 10px !important; gap: 4px !important;
    background: #060909 !important; border-top: 1px solid #424d49;
  }
  html.ps129-mobile #detail .detail-nav button {
    flex: 0 0 auto !important; min-height: 44px !important;
    padding: 8px 10px !important; white-space: nowrap !important;
    color: #e0e7e1 !important; font-size: 12px !important;
  }
  html.ps129-mobile #detail .detail-nav button.active { border-color: #79dccc !important; color: #fff !important; background: #14201d !important; }
  html.ps129-mobile #detail :is(p, .lede, .small, small, .chart-caption, .review-note) { color: #cbd3ce !important; }
  html.ps129-mobile #detail :is(.consensus, .spot-condition, .spot-weather-card, .forecast-day, .forecast-card, .metric, .model-card, .sf18-table) { background-color: #0d1210 !important; color: #f5f5ed !important; }
  html.ps129-mobile #detail :is(.consensus-number strong, .spot-condition strong) { color: var(--reading-color, #f5f5ed) !important; }
  html.ps129-mobile #detail :is(.consensus-number label, .consensus-number > span, .live-meta, .wg110-head span, .sun-strip, .surface-reference) { color: #cbd3ce !important; }
  html.ps129-mobile #detail :is(.warning, .tide-error, .network-note.error, .aa-error, .badge.warn) { color: #ffaaa4 !important; }
  html.ps129-mobile #detail .model-toggle { --gfs: #79dccc; --ecmwf: #ffcc67; --mfwam: #c9b9ff; }
  html.ps129-mobile #detail .model-gfs { color: #79dccc !important; }
  html.ps129-mobile #detail .model-ecmwf { color: #ffcc67 !important; }
  html.ps129-mobile #detail .model-mfwam { color: #c9b9ff !important; }
  html.ps129-mobile #detail :is(.forecast-chart, .tide-chart) { width: 100% !important; max-width: 100% !important; }
  html.ps129-mobile #detail .forecast-chart { min-height: 180px; }
  html.ps129-mobile #detail :is(.forecast-chart, .tide-chart) text { fill: #d6ded8; }
  html.ps129-mobile #detail :is(.forecast-table-wrap, .sf18-table, .wg110-scroll, .ps117-hour-scroll) { max-width: 100%; overflow-x: auto; }
  html.ps129-mobile #detail :is(button, a, summary):focus-visible,
  html.ps129-mobile .time-strip :is(button, select, input):focus-visible { outline: 2px solid #f5f5ed !important; outline-offset: 2px; }
  html.ps129-mobile .time-strip {
    position: fixed !important; z-index: 41 !important;
    left: max(6px, env(safe-area-inset-left, 0px)) !important;
    right: max(6px, env(safe-area-inset-right, 0px)) !important;
    bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important; padding: 0 !important;
    background: #080c0c !important; color: #f5f5ed !important;
    border: 1px solid #64716a !important; border-radius: 8px !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    max-height: 60vh; max-height: 60dvh; overflow-y: auto;
  }
  html.ps129-mobile .time-strip:not(.ps129-time-open) > :not(.ps129-time-toggle) { display: none !important; }
  html.ps129-mobile .ps129-time-toggle {
    display: block !important; width: 100%; min-height: 50px;
    padding: 10px 12px; background: #080c0c; color: #f5f5ed;
    text-align: left; border: 0; font: 700 12px/1.4 Arial, sans-serif;
    cursor: pointer;
  }
  html.ps129-mobile .time-strip.ps129-time-open { padding: 0 10px 10px !important; box-shadow: 0 -8px 28px #000b; }
  html.ps129-mobile .time-strip.ps129-time-open .ps129-time-toggle { border-bottom: 1px solid #64716a; margin-bottom: 8px; }
  html.ps129-mobile .time-strip { --paper: #f5f5ed; --muted: #cbd3ce; --line: #424d49; --line2: #64716a; }
  html.ps129-mobile .time-strip :is(button, select) { min-height: 44px !important; background-color: #0d1210 !important; color: #f5f5ed !important; }
  html.ps129-mobile .time-strip .day-btn.active { border-color: #79dccc !important; }
  html.ps129-mobile .time-strip .day-btn.active span { color: #79dccc !important; }
  html.ps129-mobile .time-strip .time-strip-head { flex-wrap: wrap; gap: 6px; }
  html.ps129-mobile .time-strip .day-bar { overflow-x: auto !important; }
  html.ps129-mobile .time-strip .day-btn { min-width: 72px; }
  html.ps129-mobile .time-strip .day-btn :is(span, small) { display: inline !important; }
  html.ps129-mobile .time-strip .day-btn small { margin-left: 4px; }
  html.ps129-mobile .map-top { gap: 5px !important; }
  html.ps129-mobile .map-top .map-title-card {
    display: grid !important; grid-template-columns: minmax(0, 1fr) 44px;
    align-items: center; column-gap: 8px;
    flex: 0 0 100% !important; width: 100% !important;
    margin-left: 0 !important; box-sizing: border-box;
  }
  html.ps129-mobile .map-top .map-title-card > * { grid-column: 1 / -1; min-width: 0; }
  html.ps129-mobile .map-top .map-title-card > .eyebrow {
    grid-column: 1; grid-row: 1; white-space: normal; overflow-wrap: anywhere;
  }
  html.ps129-mobile .map-top .map-title-card #sidebarToggle {
    position: static !important; inset: auto !important;
    grid-column: 2; grid-row: 1; justify-self: end;
    width: 44px !important; height: 44px !important; min-height: 44px !important;
    padding: 0 !important; margin: 0 !important;
    border: 1px solid var(--line2, #64716a) !important;
    border-radius: 4px !important; box-shadow: none !important;
    background: transparent !important; color: inherit !important;
    font-size: 20px !important; cursor: pointer;
  }
  html.ps129-mobile .map-top .map-title-card #mapStatus { margin-top: 4px !important; }
  html.ps129-mobile .map-top .map-title-card .bs16-badge { justify-self: start; }
  html.ps129-mobile .map-top :is(.camera-toggle, .traffic-toggle, .ps193-key-toggle) { min-height: 44px !important; padding: 6px 9px !important; font-size: 12px !important; }
  html.ps129-mobile .map-top .ps193-key-toggle,
  html.ps129-mobile #trafficStatus { display: none !important; }
  html.ps129-mobile .map-top #cameraToggle {
    order: 1 !important; flex: 0 0 auto !important;
    padding: 6px !important; gap: 4px !important;
  }
  html.ps129-mobile .map-top #cameraToggle svg { width: 16px !important; height: 16px !important; }
  html.ps129-mobile .map-top #trafficToggle {
    order: 2 !important; flex: 0 0 auto !important; padding: 6px !important;
  }
  html.ps129-mobile .map-top .sf18-mobile {
    order: 3 !important; flex: 1 1 0 !important;
    position: relative !important; inset: auto !important;
    width: auto !important; min-width: 0 !important; max-width: none !important;
    min-height: 44px !important; height: auto !important;
    margin: 0 !important; padding: 6px !important;
    font-size: 12px !important; line-height: 1.15 !important;
    white-space: normal !important;
  }
  html.ps129-mobile .map-top .sf18-mobile::after { display: none !important; }
  html.ps129-mobile .map-top .ps193-traffic-credit {
    order: 4 !important; flex: 0 0 100% !important; box-sizing: border-box;
  }
  @media (max-width: 380px) {
    html.ps129-mobile #cameraToggleCount { display: none !important; }
  }
  html.ps129-mobile .ps1111-map-footer { gap: 5px !important; }
  html.ps129-mobile .ps1111-map-footer button { padding: 5px 7px !important; }
  @media (max-height: 500px) {
    html.ps129-mobile #detail { top: max(6px, env(safe-area-inset-top, 0px)) !important; }
  }
  @media (prefers-reduced-motion: reduce) {
    html.ps129-mobile #detail { transition: none !important; }
  }
}