/* OBSLv2.1 - final dark/UI corrections, scoped to existing modules.
   NO timers, NO new scripts, NO runtime data changes. */
:root { --obsl-v2-card-radius: 16px; --obsl-v2-dark-border: #6a809a; }

/* A Toast positioner is not a visible panel. Never paint the full viewport-width host. */
#obsl-toast-stack,
#obsl-settings-toast-stack,
html.dark #obsl-toast-stack,
html.dark #obsl-settings-toast-stack,
html.dark #obsl-toast-stack.obsl-module,
html.dark #obsl-toast-stack.obsl-module--toast {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#obsl-toast-stack::before, #obsl-toast-stack::after,
#obsl-settings-toast-stack::before, #obsl-settings-toast-stack::after {
  content: none !important; display: none !important;
}
#obsl-toast-stack > .obsl-toast-item,
#obsl-settings-toast-stack > .obsl-toast-item {
  background-clip: padding-box !important;
  border-radius: 12px !important;
  pointer-events: auto !important;
}
/* One footer surface and no horizontal band from a second backing layer. */
#footer-frame, html.dark #footer-frame {
  border-radius: var(--obsl-v2-card-radius) !important;
  background-clip: padding-box !important;
  overflow: visible !important;
}
#footer-frame::before, #footer-frame::after {content:none !important;display:none !important;}
#footer-frame #site-footer, html.dark #footer-frame #site-footer {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: inherit !important;
  width: 100% !important; max-width: 100% !important;
}
#footer-frame #site-footer::before, #footer-frame #site-footer::after {content:none !important;display:none !important;}
html.dark #footer-frame {background-color: #142131 !important; border: 1px solid var(--obsl-v2-dark-border) !important;}

/* Match Header's rounded outline across every module without hiding swiped content. */
html.dark :is(#header-frame,#event-frame,#birthday-event-panel,#weather-widget,#countdown-panel,
 #tech-news-panel,#day-info-panel,#moments-panel,#market-panel,.market-panel,#footer-frame,
 #google-calendar-frame,#calendar-panel,#site-birthday,#google-calendar-panel) {
  border: 1px solid var(--obsl-v2-dark-border) !important;
  border-radius: var(--obsl-v2-card-radius) !important;
  background-clip: padding-box !important;
}
/* All three headlines must remain legible in Dark Mode. */
html.dark #tech-news-panel :is(.tech-news-title,.tech-news-title-text,.tech-news-head-title,.tech-news-heading,.tech-news-brand-name),
html.dark #market-panel :is(.market-title,.market-heading,.market-title-text,.market-heading-copy),
html.dark #moments-panel :is(.moments-title,.moments-head,.moments-heading-copy,.moments-head-title,#moments-brand-name) {
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.65) !important;
}
/* Nested SystemHealth cards used a white background despite white text. */
html.dark #system-health-tools-group,
html.dark #system-health-tools-group .system-health-body,
html.dark #system-health-tools-group .system-health-grid,
html.dark #system-health-tools-group .system-health-item,
html.dark #system-health-tools-group .system-version-card,
html.dark #system-health-tools-group .system-version-card > div,
html.dark #system-health-tools-group .system-health-actions,
html.dark #system-health-tools-group .system-health-devices-card,
html.dark #system-health-tools-group .system-health-pipeline-card {
  background: #172638 !important;
  background-image: none !important;
  color: #f8fafc !important;
  border-color: #68819f !important;
}
html.dark #system-health-tools-group .system-version-card > div:nth-child(even) {
  background: #1c2d41 !important;
}
html.dark #system-health-tools-group :is(.system-version-card,.system-health-grid,.system-health-item) :is(span,strong,small,b,label,p) {
  color: #f5f8ff !important;
  -webkit-text-fill-color: #f5f8ff !important;
}
html.dark #system-health-tools-group :is(.system-health-item,.system-version-card,.system-version-card > div) {border-radius: 10px !important;}
html.dark #system-health-tools-group :is(button,input:not([type=color]),select) {
  background: #23364c !important; color:#f8fafc !important;
  border-color:#7891ad !important;
}
html.dark #system-health-tools-group #system-health-warning-details {
  background: #3a2c16 !important; color: #ffefcf !important;
  border:1px solid #bd9344 !important;
}

/* Admin weather editor: each field is a self-contained responsive card. */
#obsl-weather-style-editor, #obsl-weather-style-editor * { box-sizing: border-box !important; }
#obsl-weather-style-editor { width:100% !important;max-width:100% !important;min-width:0 !important;overflow:visible !important; }
#obsl-weather-style-editor .obsl-weather-style-grid {
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,275px),1fr)) !important;
  gap:10px !important; width:100% !important; min-width:0 !important;
}
#obsl-weather-style-editor .obsl-weather-style-row {
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 42px 74px !important;
  grid-template-rows:auto minmax(36px,auto) !important;
  grid-template-areas:'name name name' 'family color size' !important;
  gap:9px 8px !important; align-items:center !important;
  width:100% !important;min-width:0 !important;max-width:100% !important;
  padding:11px !important;margin:0 !important;
  border:1px solid #8194ab !important;border-radius:12px !important;
  overflow:hidden !important;
}
#obsl-weather-style-editor .obsl-weather-style-row > strong {
  grid-area:name !important;display:block !important;
  min-width:0 !important;width:100% !important;margin:0 !important;
  font-size:13px !important;line-height:1.35 !important;
  white-space:normal !important;overflow-wrap:anywhere !important;
}
#obsl-weather-style-editor .obsl-weather-style-row > select {
  grid-area:family !important; min-width:0 !important;max-width:100% !important;
  width:100% !important;height:36px !important;min-height:36px !important;
  margin:0 !important;padding:4px 7px !important;
  border-radius:8px !important;font-size:13px !important;
}
#obsl-weather-style-editor .obsl-weather-style-row > input[type='color'] {
  grid-area:color !important;width:42px !important;min-width:42px !important;max-width:42px !important;
  height:36px !important;min-height:36px !important;padding:3px !important;margin:0 !important;
  border-radius:8px !important;
}
#obsl-weather-style-editor .obsl-weather-style-row > input[data-field='size'] {
  grid-area:size !important;width:74px !important;min-width:74px !important;max-width:74px !important;
  height:36px !important;min-height:36px !important;padding:4px 7px !important;margin:0 !important;
  border-radius:8px !important;text-align:center !important;
  font-size:14px !important;font-variant-numeric:tabular-nums !important;
}
#obsl-weather-style-editor .weather-style-actions {display:flex !important;flex-wrap:wrap !important;gap:8px !important;min-width:0 !important;}
#obsl-weather-style-editor .weather-style-actions > button {min-height:38px !important;white-space:normal !important;}
@media(max-width:625px){
  #obsl-weather-style-editor .obsl-weather-style-grid{grid-template-columns:minmax(0,1fr) !important;}
  #obsl-weather-style-editor .obsl-weather-style-row{padding:9px !important;}
}
html.dark #obsl-weather-style-editor .obsl-weather-style-row{background:#192a3d !important;border-color:#68819f !important;}
html.dark #obsl-weather-style-editor .obsl-weather-style-row > :is(select,input[data-field='size']){
  background:#0e1928 !important;color:#f8fafc !important;border:1px solid #7891ad !important;
}
html.dark #obsl-weather-style-editor .obsl-weather-style-row > strong{color:#f8fafc !important;}

/* Mobile moments: source CSS had 280px viewport and 260px card minimums,
   and a stretched grid row, creating a large blank area under short content. */
@media(max-width:900px){
  #bottom-grid {align-items:start !important;grid-auto-rows:max-content !important;}
  #moments-panel.moments-panel {
    height:max-content !important;max-height:none !important;min-height:0 !important;
    align-self:start !important;overflow:hidden !important;
  }
  #moments-panel .moments-layout,
  #moments-panel .obsl-moments-viewport {
    height:auto !important;min-height:0 !important;max-height:none !important;
    width:100% !important;
  }
  #moments-motion.obsl-moments-track {height:auto !important;min-height:0 !important;max-height:none !important;}
  #moments-motion .moment-card {
    height:auto !important; min-height:0 !important;max-height:none !important;
  }
  #moments-motion .moment-card-media{height:clamp(108px,25vw,126px) !important;}
  #moments-motion .moment-card-body{height:auto !important;min-height:0 !important;}
}

/* Settings retains its own vertical gesture; the page must not claim PTR. */
html.obsl-settings-open,html.obsl-settings-open body {overscroll-behavior:none !important;}
#obsl-settings-viewport:not([hidden]),#obsl-settings-viewport:not([hidden]) #obsl-settings-body {
  overscroll-behavior:contain !important; touch-action:pan-y !important;
}

/* OBSLv2.1: a single border system shared with Google Calendar. */
:root{--obsl-v2-dark-border:#748ba7;--obsl-v2-card-radius:15px}
html.dark :is(#header-frame,#event-frame,#birthday-event-panel,#weather-widget,#countdown-panel,#tech-news-panel,#day-info-panel,#moments-panel,#market-panel,#footer-frame,#google-calendar-frame,#google-calendar-panel,#calendar-panel,#upcoming-frame,#upcoming-panel,#birthday-panel,#system-menu,#obsl-notification-inbox,#obsl-settings-viewport,
#today-events-panel,#bottom-grid>.panel,#middle-grid>.panel,#top-grid>.panel,.obsl-module-frame,.obsl-panel,.module-panel,.module-frame){
  border:1px solid var(--obsl-v2-dark-border)!important;
  border-radius:var(--obsl-v2-card-radius)!important;
  background-clip:padding-box!important;
  outline:0!important;
}
html.dark :is(#header-frame,#event-frame,#birthday-event-panel,#weather-widget,#countdown-panel,#tech-news-panel,#day-info-panel,#moments-panel,#market-panel,#footer-frame,#google-calendar-panel,#google-calendar-frame) > :is(.panel,.module-content,.module-frame){border-color:transparent!important;border-radius:inherit!important;}
html.dark :is(#tech-news-panel,#moments-panel,#market-panel) :is(h1,h2,h3,h4,.module-title,.panel-title,.tech-news-title,.moments-title,.market-title,.market-title-text,.market-heading,.moments-heading-copy,.tech-news-heading){color:#f5f8ff!important;-webkit-text-fill-color:#f5f8ff!important}
/* Settings does NOT freeze page scroll and does NOT start pull-to-refresh. */
html.obsl-settings-open,html.obsl-settings-open body {overflow-y:auto!important;touch-action:pan-y!important;}
html.obsl-settings-open #obsl-settings-viewport {touch-action:pan-y!important;overscroll-behavior:contain!important;}
html.obsl-settings-open #obsl-settings-body {overflow-y:auto!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important;touch-action:pan-y!important;}

/* OBSLv2.1: Settings is a SECOND scroller, not a document lock.  This is intentionally
   after the old fixed-dashboard rules so neither scrolling surface can own the other. */
html.obsl-settings-open{
  height:auto!important;min-height:100%!important;overflow-x:hidden!important;
  overflow-y:auto!important;overscroll-behavior-y:contain!important;
  touch-action:pan-y pinch-zoom!important;
}
/* Body MUST NOT become a nested scroll container: otherwise overscroll-contain
   swallows wheel/touch gestures before they can reach the document scroller. */
html.obsl-settings-open body{
  position:static!important;height:auto!important;min-height:100%!important;
  overflow-x:clip!important;overflow-y:visible!important;
  overscroll-behavior:auto!important;touch-action:pan-y pinch-zoom!important;
}
html.obsl-settings-open body>.dashboard,
body.obsl-settings-open>.dashboard{
  position:relative!important;inset:auto!important;width:100%!important;
  height:auto!important;max-height:none!important;min-height:0!important;
  overflow:visible!important;contain:none!important;
  touch-action:pan-y pinch-zoom!important;
}
body>#obsl-settings-viewport:not([hidden]){
  position:fixed!important;pointer-events:auto!important;
  overscroll-behavior-y:contain!important;touch-action:pan-y!important;
}
#obsl-settings-viewport:not([hidden]) #obsl-settings-body{
  min-height:0!important;height:auto!important;overflow-y:auto!important;
  overscroll-behavior-y:contain!important;touch-action:pan-y!important;
  -webkit-overflow-scrolling:touch!important;
}
/* Preserve native vertical scrolling; PTR is blocked by JS, not by preventDefault. */