/* ===================================================
   Day Spiral Clock - Responsive Styles
   =================================================== */

/* --- CSS Variables --- */
:root {
  --bg-color: #222;
  --text-color: #fff;
  --text-muted: #aaa;
  --text-dim: #888;
  --btn-bg: rgba(50, 50, 50, 0.85);
  --btn-bg-hover: rgba(80, 80, 80, 0.95);
  --btn-border: #666;
  --btn-secondary-bg: rgba(30, 30, 30, 0.7);
  --btn-secondary-border: #444;
  --input-bg: #222;
  --input-border: #444;
  --link-color: #ADFF2F;
  --modal-overlay-bg: rgba(0, 0, 0, 0.85);
  --modal-bg: #1a1a1a;
  --color-local: rgb(255, 235, 120);
  --color-other: rgb(200, 255, 255);
}

/* --- Base Reset --- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
}

/* --- App Container --- */
#app-container {
  position: relative;
  width: 100%;
  height: 100%;
}

/* --- Canvas Container --- */
#canvas-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

#canvas-container canvas {
  display: block;
}

#mobius-container,
#steampunk-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  /* Same as canvas-container, visibility controlled via hidden class */
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  /* Let clicks pass through if needed, but THREE.js usually handles them */
}

#mobius-container canvas,
#steampunk-container canvas {
  pointer-events: auto;
  /* Re-enable for canvas */
}

/* --- UI Overlay Layer --- */
#ui-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

/* --- Visibility Classes --- */
.hidden {
  display: none !important;
}

.color-local {
  color: var(--color-local) !important;
}

.color-other {
  color: var(--color-other) !important;
}

.mobile-only {
  display: none;
  /* Hidden by default, shown in mobile media query */
}

/* GPS button visibility controlled by JavaScript + CSS */
#btn-gps-modal:not(.gps-show) {
  display: none !important;
}

.modal-gps-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-grow: 1;
}

.gps-accuracy-msg {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
}

#gps-accuracy-msg:not(.gps-show) {
  display: none !important;
}

/* --- Corner Containers --- */
.ui-corner {
  position: absolute;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* --- Top Left --- */
#top-left-container {
  top: 12px;
  left: 12px;
  max-width: 280px;
  align-items: flex-start;
  gap: 8px;
}

/* --- Selector Boxes (Bottom Left/Right) --- */
/* --- Selector Boxes (Bottom Left/Right) --- */
.selector-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 2px;
  background: rgba(0, 0, 0, 0.6);
  /* Darker background for contrast */
  border: 1px solid rgba(255, 255, 255, 0.2);
  /* Slightly clearer border */
  border-radius: 6px;
  padding: 6px 8px;
  width: fit-content;
  min-width: auto;
}

.selector-box.hidden {
  display: none !important;
}

.selector-title {
  font-size: 0.6rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0px;
  text-align: left;
}

.selector-options {
  display: flex;
  flex-direction: column;
  gap: 4px;
  pointer-events: auto;
  align-items: flex-start;
}

.selector-opt {
  font-size: 0.8rem;
  color: var(--text-color);
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  text-align: left;
  display: block;
  white-space: nowrap;
  width: 100%;
}

.selector-opt:hover {
  background: var(--btn-bg-hover);
}

.selector-opt:not(.active)::before {
  content: "➔";
  font-size: 0.85rem;
  margin-right: 6px;
  vertical-align: middle;
  display: inline-block;
  transform: translateY(-1px);
}

.selector-opt.active {
  color: var(--warning-color);
  font-weight: bold;
  background: transparent !important;
  border-color: transparent !important;
  cursor: default;
  pointer-events: none;
  font-size: 0.85rem;
  padding: 4px 0;
}

/* Ensure colored spans within selectors preserve their color even when parent is .active */
.selector-opt span.color-local,
.selector-opt span.color-other {
  transition: all 0.2s ease;
}

.selector-opt.active span.color-local {
  color: var(--color-local) !important;
}

.selector-opt.active span.color-other {
  color: var(--color-other) !important;
}


.button-row-bottom-left {
  display: flex;
  flex-direction: row;
  gap: 6px;
  pointer-events: auto;
}

.horizontal-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
  pointer-events: auto;
}

#awakeness-legend.hidden {
  display: none !important;
}

.awakeness-line-sample {
  display: inline-block;
  width: 15px;
  height: 3px;
  background-color: #0f0;
  /* Semantic Green matches renderer */
  border-radius: 2px;
}

.legend-text {
  font-size: 0.75rem;
  color: #ccc;
  font-weight: 500;
}

#app-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
  line-height: 1;
  color: #ffffff;
  /* Pure white */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  /* Pop against gray */
  transition: all 0.5s ease;
}

#app-description {
  font-size: 0.9rem;
  color: #eeeeee;
  /* Bright white-gray */
  margin: 0;
  line-height: 1.4;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

#app-description p {
  margin: 0;
}

#app-version {
  font-size: 0.7rem;
  font-weight: 400;
  color: #fff;
  margin-top: 0;
  margin-bottom: 4px;
}

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

#pinch-zoom-tip {
  font-size: 0.95rem;
  font-style: italic;
  color: #fff;
  margin-top: 0;
  align-self: center;
  max-width: 180px;
  line-height: 1.2;
}

/* --- Top Right --- */
#top-right-container {
  top: 12px;
  right: 12px;
  align-items: flex-end;
  text-align: right;
  max-width: 200px;
}

#location-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 4px;
}

#locale-title {
  font-size: 0.95rem;
  font-weight: 500;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

#time-display {
  font-size: 0.85rem;
  color: var(--text-muted);
}

#date-display,
#day-display,
#dst-display,
#sunrise-display,
#sunset-display {
  font-size: 0.75rem;
  color: var(--text-muted);
}


.button-group-bottom-right {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Reduced from 12px */
  align-items: flex-end;
}

.button-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}

/* Renderer-specific groups */
.controls-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* Reduced from 8px for tighter layout */
  align-items: flex-end;
}

#controls-dayspiral {
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* Tight vertical gap */
  align-items: flex-end;
}

.selectors-row {
  display: flex;
  flex-direction: row;
  gap: 4px;
  /* Desktop gap between selectors */
  align-items: flex-end;
}



#awakeness-legend {
  margin-bottom: 2px;
}

/* Hide hours button explicitly */
#btn-dayspiral-hours {
  display: none !important;
}


.controls-group.hidden {
  display: none !important;
}

.gear-btn {
  font-size: 1.2rem !important;
}

#precise-hint {
  display: none;
}



/* --- Bottom Left --- */
#bottom-left-container {
  bottom: 12px;
  left: 12px;
  max-width: 260px;
}

.input-prompt {
  font-size: 0.7rem;
  color: #ffffff;
  /* Changed from var(--text-dim) to white for better visibility */
  margin-bottom: 4px;
}

.input-row {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
}

#input-city {
  flex: 1;
  background: #eee;
  /* Light background for distinct input look */
  border: 1px solid #ccc;
  color: #000;
  /* Dark text */
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

#input-city:focus {
  outline: none;
  border-color: #666;
  background: #fff;
}

.coord-inputs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.coord-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.coord-row label {
  font-size: 0.7rem;
  color: #ffffff;
  /* Changed from var(--text-dim) to white for better readability */
  min-width: 24px;
}

.coord-input {
  width: 55px;
  background: #eee;
  /* Light background */
  border: 1px solid #ccc;
  color: #333;
  /* Darker text */
  padding: 4px 6px;
  border-radius: 3px;
  font-size: 0.7rem;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.coord-input:focus {
  outline: none;
  border-color: #666;
  background: #fff;
}

.input-pending {
  background-color: #fff8c4 !important;
  /* Soft yellow to indicate pending state */
  border-color: #e6b000 !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: background-color 0.2s ease;
}

/* --- Bottom Right --- */
#bottom-right-container {
  bottom: 12px;
  right: 12px;
  z-index: 2;
  pointer-events: none;
  align-items: flex-end;
  text-align: right;
  gap: 4px;
  /* Reduced from 8px */
}

.preset-buttons {
  display: flex !important;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
  width: max-content;
  margin-left: auto;
  pointer-events: auto;
  margin-bottom: 8px;
  /* Lift up to clear Zen button area */
}

.footer-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  pointer-events: auto;
}

.footer-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}


/* --- Button Styles --- */
.ui-btn {
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  color: var(--text-color);
  padding: 6px 12px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.8rem;
  transition: background 0.15s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.ui-btn.toggled-on {
  background: var(--warning-color) !important;
  color: #fff !important;
  border-color: #aa8800 !important;
  font-weight: 600;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

.view-buttons-row {
  display: flex;
  flex-direction: row;
  gap: 4px;
  pointer-events: auto;
}

.view-btn-compact {
  padding: 4px 8px;
  font-size: 0.75rem !important;
  line-height: 1.2;
  text-align: center;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ui-btn.warning-bg {
  background-color: var(--warning-color) !important;
  color: #000 !important;
  border-color: #aa8800 !important;
}

.ui-btn:hover {
  background: var(--btn-bg-hover);
}

.ui-btn:active {
  transform: scale(0.98);
}

.ui-btn:disabled,
.ui-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.ui-btn.small {
  padding: 4px 8px;
  font-size: 0.75rem;
}

.ui-btn.secondary {
  background: var(--btn-secondary-bg);
  border-color: var(--btn-secondary-border);
  /* font-size: 0.75rem; Removed to allow inheritance/media query override */
}

.ui-btn.preset {
  font-size: 0.8rem;
  /* Matched to default button size */
  padding: 6px 12px;
}

/* Icon buttons (Settings, Fullscreen) to match text button heights natively */
.ui-btn.gear-btn {
  padding: 6px 8px;
  /* Slightly narrower horizontal padding for square-ish look */
  line-height: 1;
  /* Match height of text */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Links --- */
#link-website {
  color: var(--link-color);
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 500;
  pointer-events: auto;
}

#link-website:hover {
  text-decoration: underline;
}

/* --- Highlights & Animations --- */
@keyframes fs-highlight-pulse {
  0% {
    background-color: rgba(150, 130, 0, 0.6);
  }

  /* Muted Yellow */
  50% {
    background-color: #ffcc00;
  }

  /* Bright Yellow (var--warning-color) */
  100% {
    background-color: rgba(150, 130, 0, 0.6);
  }

  /* Back to Muted */
}

.fs-highlight-pulse {
  animation: fs-highlight-pulse 0.5s ease-in-out 2;
  /* 0.5s = 2Hz, 2 iterations = 1 second */
  animation-fill-mode: forwards;
  border-color: #aa8800 !important;
  color: #fff !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

/* --- Modals --- */
#modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--modal-overlay-bg);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
}

#modal-overlay.hidden {
  display: none;
}

.modal-content {
  background: var(--modal-bg);
  border: 1px solid var(--btn-border);
  border-radius: 8px;
  position: relative;
  /* Added to contain absolute positioned close button */
  padding: 20px;
  width: 90%;
  max-width: 440px;
  /* Increased 10% from 400px */
  max-height: 90vh;
  /* Constraint height */
  display: flex;
  flex-direction: column;
  gap: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  /* Container doesn't scroll, body does */
}

.modal-content.hidden {
  display: none;
}

.modal-content.large {
  max-width: 800px;
  width: 95%;
}

#digital-time {
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.2rem;
  color: #ADFF2F;
  /* Green-Yellow for high contrast */
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  margin-top: 5px;
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 15px;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--text-color);
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.modal-close:hover {
  color: var(--warning-color);
}


.modal-content>h2 {
  margin: 0;
  font-size: 1.2rem;
  color: var(--text-color);
  border-bottom: 1px solid var(--btn-border);
  padding-bottom: 10px;
  flex-shrink: 0;
  /* Header doesn't shrink */
}

/* Compact modal layout */
.modal-content.compact {
  max-width: 400px;
  /* Reduced width */
}

.modal-body {
  font-size: 0.9rem;
  color: var(--text-color);
  line-height: 1.4;
  overflow-y: auto;
  /* Scroll internally */
  flex-grow: 1;
  /* Fill available space */
  padding: 0 5px;
}

hr.separator {
  margin: 10px 0;
  border: none;
  border-top: 1px solid #444;
}

.button-row-split {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 5px;
}

.button-row-split .ui-btn {
  flex: 1;
  /* Equal width buttons */
  padding: 8px 5px;
  font-size: 0.85rem;
  white-space: nowrap;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.help-text {
  font-size: 0.8rem;
  color: #fff;
  margin-bottom: 10px;
  font-style: italic;
}

.modal-input {
  width: 100%;
  background: #eee;
  /* Light background */
  border: 1px solid #ccc;
  color: #000;
  padding: 5px 8px;
  border-radius: 4px;
  font-size: 0.85rem;
}

.modal-input.small {
  width: 80px;
}

.coord-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.form-row label {
  color: #fff;
  margin-right: 12px;
  white-space: nowrap;
}

.preset-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.preset-modal {
  width: 100%;
  padding: 10px;
  font-size: 0.9rem;
}

.error-msg {
  color: #ff6b6b;
  font-size: 0.8rem;
  margin-top: 5px;
  min-height: 1.2em;
}

/* --- New Unified Modal Styles --- */
.location-section h3 {
  margin: 0 0 10px 0;
  font-size: 1rem;
  color: #ddd;
  border-bottom: 1px solid #444;
  padding-bottom: 4px;
}

.location-section {
  padding: 5px 0;
}

.modal-actions-inline {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

#modal-select-location hr {
  border: 0;
  border-top: 1px solid #333;
  margin: 10px 0;
}

/* --- Visibility Classes --- */
.desktop-only {
  display: block;
}

.desktop-only-flex {
  display: flex !important;
}

.desktop-only-inline {
  display: inline;
}

.mobile-only {
  display: none;
}

/* ===================================================
   RESPONSIVE: Mobile Portrait & Landscape (Unified Mobile)
   =================================================== */
@media screen and (max-width: 950px),
screen and (max-height: 600px) {

  /* Toggle Visibility */
  .desktop-only {
    display: none !important;
  }

  .desktop-only-flex {
    display: none !important;
  }

  .desktop-only-inline {
    display: none !important;
  }

  .mobile-only {
    display: block;
  }

  .ui-corner {
    gap: 4px;
    /* Reduced from 6px/8px */
  }

  /* Hide description on mobile (shown in About modal instead) */
  #app-description {
    display: none;
  }

  /* Adjust Layouts */
  #top-left-container {
    max-width: 50%;
  }

  #top-right-container {
    max-width: 50%;
  }

  #bottom-left-container {
    max-width: 60%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    bottom: 15px;
    left: 6px;
    /* Tighter left edge on mobile */
  }

  @media (orientation: portrait) {
    #bottom-left-container {
      max-width: calc(100% - 24px);
    }
  }

  .button-group-bottom,
  .button-group-bottom-right {
    display: flex !important;
    gap: 6px;
    /* Reduced from 8px */
  }

  .button-group-bottom {
    flex-direction: column;
  }

  .button-group-bottom-right {
    flex-direction: column;
    align-items: flex-end;
  }

  #bottom-right-container {
    align-items: flex-end;
    pointer-events: auto;
    right: 6px;
    bottom: 15px !important;
    /* Lifted to match bottom-left container */
    /* Tighter right edge on mobile */
  }

  #controls-dayspiral .selectors-row {
    gap: 4px;
    /* Column gap between left and right groups */
  }

  /* Target the selectors inside the dock to carve out horizontal space */
  #controls-dayspiral .selector-box {
    padding: 4px 6px;
  }

  #controls-dayspiral .selector-opt {
    padding: 4px 6px;
  }


  .ui-btn {
    font-size: 0.85rem;
    padding: 5px 9px;
    color: #fff;
    /* Removed fixed height to allow flexible scaling, but ensured padding is tight */
  }

  .gear-btn {
    font-size: 1.1rem !important;
    padding: 0 !important;
    min-width: 38px !important;
    /* Slightly wider for touch */
    height: 32px;
    width: 38px;
  }

  #btn-zen {
    min-width: 40px;
    /* ~20% narrower than 50px */
    padding-left: 6px;
    padding-right: 6px;
  }

  #btn-fullscreen {
    padding-left: 7px;
    /* ~10% tighter padding */
    padding-right: 7px;
  }

  /* Specific Tweaks - INCREASED SIZE */
  #app-title {
    font-size: 1.3rem;
    /* Increased ~20% from 1.1rem */
    min-height: 1.4rem;
    /* Reduced to pull buttons UP */
  }

  #locale-title {
    font-size: 0.75rem;
    /* Reduced for limited horizontal space */
  }

  #time-display {
    font-size: 1.3rem;
    /* Match app title size */
    font-weight: 400;
    /* Non-bold by default */
    color: var(--text-color);
  }

  body.zen-mode #time-display {
    font-weight: bold;
    /* Bold in Zen mode for visibility */
  }

  #time-display.dual-time-upper {
    font-size: 1.07rem;
    /* 0.91 * 1.18 ≈ 1.07rem */
  }


  @media (orientation: portrait) {}

  #app-version {
    display: block !important;
    font-size: 0.7rem;
    margin-top: -8px;
    color: #fff;
  }

  .input-prompt {
    font-size: 0.75rem;
  }

  /* === Mobile: Compact style/show selectors (hide active item, strip box) === */
  /* Only applies to Style and To Show selectors; Select Clock is unchanged */

  #style-selector,
  #toshow-selector {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    min-width: 0 !important;
  }

  #style-selector .selector-title,
  #toshow-selector .selector-title {
    display: none !important;
  }

  #style-selector .selector-options,
  #toshow-selector .selector-options {
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    gap: 2px !important;
  }

  /* Hide the active label — only show the arrow switch-buttons */
  #style-selector .selector-opt.active,
  #toshow-selector .selector-opt.active {
    display: none !important;
  }

  #style-selector .selector-opt,
  #toshow-selector .selector-opt {
    width: auto !important;
    padding: 4px 8px !important;
    /* Tighter padding to avoid clock graphic */
    margin: 0 !important;
  }

  /* Tighten the layout now that the box chrome is gone */
  #controls-dayspiral {
    width: fit-content !important;
  }

  .selectors-row {
    gap: 8px !important;
    /* Slightly increased gap between columns */
  }
}


/* ===================================================
   RESPONSIVE: Mobile Portrait Specific
   =================================================== */
@media screen and (max-width: 950px) and (orientation: portrait) {

  /* In portrait, hide desktop GPS button, show mobile GPS button */
  #btn-gps-ok {
    display: none !important;
  }

  #btn-gps-ok-mobile.gps-show {
    display: block !important;
  }
}

/* ===================================================
   RESPONSIVE: Mobile Landscape Specific
   =================================================== */
@media screen and (max-width: 950px) and (orientation: landscape) {

  /* In landscape, hide the mobile GPS button, show desktop GPS button */
  #btn-gps-ok-mobile {
    display: none !important;
  }

  #btn-gps-ok.gps-show {
    display: block !important;
  }

  #top-left-container {
    top: 4px;
    left: 8px;
    max-width: 250px;
    max-height: 40%;
  }

  #top-right-container {
    top: 4px;
    right: 8px;
    max-width: 200px;
  }

  #bottom-left-container {
    bottom: 8px;
  }

  /* Constrain tip message width to prevent overlap */
  #precise-hint {
    max-width: 130px;
    /* Approx width of Fetch Location button */
    white-space: normal;
    line-height: 1.2;
    font-size: 0.65rem;
    margin-bottom: 0;
    margin-top: -2px;
  }

  #pinch-zoom-tip {
    font-size: 0.95rem;
    max-width: 200px;
  }


  /* Loc Details: Two-column grid for landscape to save vertical space */
  #details-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    row-gap: 4px;
    font-size: 0.8rem;
    line-height: 1.2;
  }

  #details-content hr {
    grid-column: span 2;
    margin: 5px 0 !important;
  }

  #details-content p {
    margin: 2px 0;
  }

  .modal-content {
    padding: 12px 20px;
    gap: 8px;
    max-width: 500px;
  }

  .modal-content>h2 {
    font-size: 1.1rem;
  }

  /* Button Sizing for Landscape - INCREASED SIZE (~10%) */
  .ui-btn {
    font-size: 0.85rem;
    padding: 6px 9px;
  }

  /* Reduce height of bottom right container and position it lower */
  #bottom-right-container {
    bottom: 4px;
    /* Lower right container to save space above */
    right: 8px;
  }

  /* Compact the DaySpiral controls to save vertical space without becoming too wide */
  #controls-dayspiral {
    gap: 4px !important;
  }

  /* Pack gear and legend tightly */
  #awakeness-legend {
    margin-bottom: 2px !important;
  }

  /* Mobius Setup Landscape Layout */
  #modal-setup-mobius .modal-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    padding: 0 10px;
  }

  /* New Location Modal Landscape Layout */
  #modal-select-location.modal-content {
    max-width: 550px;
    max-height: 95vh;
    padding: 10px 15px;
    overflow-y: auto;
  }

  #modal-select-location .modal-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  #modal-select-location .preset-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  #modal-select-location .location-section h3 {
    font-size: 0.85rem;
    margin-bottom: 5px;
  }

  #modal-select-location .location-section {
    padding: 2px 0;
  }

  #modal-select-location hr.separator {
    margin: 5px 0;
  }

  #modal-select-location .input-row {
    margin-bottom: 2px;
  }

  #modal-select-location .button-row-split {
    margin-top: 2px;
  }

  #modal-setup-mobius .settings-section {
    padding: 0;
  }

  #modal-setup-mobius .settings-section h3 {
    font-size: 0.85rem;
    margin-bottom: 6px;
  }

  #modal-setup-mobius .form-row {
    margin-bottom: 6px;
  }

  #modal-setup-mobius hr.separator {
    display: none;
    /* Hide separators in grid layout */
  }

  @media (max-height: 400px) {
    #modal-setup-mobius .modal-content {
      max-height: 95vh;
      width: 95%;
      max-width: 600px;
    }
  }

  /* Override title sizes for landscape if needed, or let them inherit/adjust */
  #app-title {
    font-size: 1.3rem;
  }





}

/* ===================================================
   RESPONSIVE: Large Desktop
   =================================================== */
@media screen and (min-width: 951px) and (min-height: 601px) {
  #top-left-container {
    max-width: 350px;
  }

  #app-title {
    font-size: 2.2rem;
    min-height: auto;
    line-height: 1;
    margin-top: 0;
    margin-bottom: 2px;
  }

  .version-text {
    font-size: 0.9rem;
    color: #fff;
    margin-bottom: 8px;
  }

  #app-description {
    font-size: 0.9rem;
    max-width: 280px;
    margin: 4px 0 10px 0;
    line-height: 1.4;
    display: block;
  }

  /* --- TOP RIGHT RE-ORG --- */
  /* --- TOP RIGHT RE-ORG --- */
  #top-right-container {
    max-width: 400px;
    align-items: flex-end;
  }

  .top-row-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 5px;
    justify-content: flex-end;
    /* Push to right */
    width: 100%;
  }

  #time-display-large {
    font-size: 2.2rem;
    font-weight: 300;
    color: #fff;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }

  #time-display-large.dual-time-upper {
    font-size: 1.82rem;
    /* 1.54 * 1.18 ≈ 1.82rem */
  }

  #btn-gps-ok {
    font-size: 0.9rem;
    height: fit-content;
    white-space: nowrap;
  }

  /* Yellow background for GPS button when not precise/warn */
  #btn-gps-ok.warning-bg {
    background-color: var(--warning-color);
    /* Bright Yellow */
    color: #000;
    /* Black text for contrast */
    border-color: #e6b000;
    font-weight: 600;
  }

  #location-description {
    font-size: 1.1rem;
    color: var(--text-color);
    margin-bottom: 15px;
  }

  .desktop-button-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
    width: 100%;
  }

  #btn-details-desktop,
  #btn-select-loc {
    width: auto;
    min-width: 140px;
  }

  /* --- BOTTOM CORNERS --- */
  .button-group-bottom {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    /* Prevent stretching */
  }

  .button-group-bottom-right {
    display: flex;
    flex-direction: column;
    /* Stack vertically */
    gap: 8px;
    align-items: flex-end;
    pointer-events: auto;
    /* Enable clicks */
  }

  #btn-fullscreen-desktop,
  #btn-zen-desktop,
  #btn-gmt,
  #btn-setup {
    min-width: 100px;
  }
}

@media screen and (max-width: 950px),
screen and (max-height: 600px) {
  #btn-reset-loc {
    margin-bottom: 0;
  }
}

/* Better visibility for the hint */
#precise-hint {
  color: #dddddd;
  /* Brighter text */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  margin-bottom: 2px;
}

.hint-arrow {
  font-size: 1.4em;
  font-weight: bold;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
  color: #ffffff;
}

/* ===================================================
   Zen Mode
   =================================================== */
body.zen-mode {
  background-color: #1a1a1a !important;
}

/* Hide UI containers - EXEMPT Bottom Left so Zen button stays */
/* EXEMPT Top Left partially to keep Title visible */
body.zen-mode #top-left-container {
  opacity: 1;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

body.zen-mode #top-left-container>*:not(#app-title) {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

body.zen-mode #app-title {
  color: #666;
  font-weight: 300;
  text-shadow: none;
}

/* Mobile bolder title in Zen mode */
@media screen and (max-width: 950px),
screen and (max-height: 600px) {
  body.zen-mode #app-title {
    font-weight: bold;
  }
}

/* Hide Full Screen button in Zen Mode */
body.zen-mode #btn-fullscreen {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

/* Hide Clock Mode selector in Zen Mode */
body.zen-mode .selector-box {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

/* For mobile specific handling */
body.zen-mode #btn-gps-ok-mobile,
body.zen-mode #precise-hint {
  opacity: 0;
  pointer-events: none;
}

/* Hide specific elements in Top Right but keep Layout */
/* We want to keep Top Row Group (Time) visible but dim */
body.zen-mode #top-right-container>*:not(.top-row-group) {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

body.zen-mode #btn-gps-ok {
  opacity: 0;
  pointer-events: none;
}

body.zen-mode #time-display-large {
  color: #666;
  /* Dimmed Time - slightly brightened for visibility */
  transition: color 0.5s ease;
}

/* Hide details in Location Info, keep Title and Time */
body.zen-mode #location-info>*:not(#locale-title):not(#time-display) {
  display: none;
}

/* Hide Bottom Right Presets & Footer Info, AND Desktop Buttons */
body.zen-mode #bottom-right-container>* {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

/* Dim Visible Elements */
body.zen-mode #locale-title {
  color: #888;
  text-shadow: none;
}

body.zen-mode #time-display {
  color: #888;
}

body.zen-mode #btn-zen {
  background: #000;
  border-color: #777;
  color: #777;
}

body.zen-mode #btn-zen:hover {
  color: #999;
  border-color: #999;
}

/* Ensure Desktop Zen button stays visible */
body.zen-mode .desktop-only.button-group-bottom {
  opacity: 1 !important;
  pointer-events: auto !important;
}

body.zen-mode #btn-fullscreen-desktop {
  opacity: 0;
  pointer-events: none;
}

body.zen-mode #btn-zen-desktop {
  background: #000;
  border-color: #777;
  color: #777;
}

body.zen-mode #btn-zen-desktop:hover {
  color: #999;
  border-color: #999;
}

/* DaySpiral Color Overrides for Zen mode consistency */
body.zen-mode #time-display-large.color-local,
body.zen-mode #time-display-large.color-other {
  color: #666 !important;
}

body.zen-mode .color-local,
body.zen-mode .color-other {
  color: #888 !important;
}

/* ----------------------------------------------------- */
/* DETAILS MODAL GRID                                    */
/* ----------------------------------------------------- */
.details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  text-align: left;
}

.details-column h3 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 1rem;
  color: #ccc;
  border-bottom: 1px solid #444;
  padding-bottom: 5px;
}

.details-column p {
  margin: 5px 0;
  font-size: 0.9rem;
}

.details-column .label {
  color: #888;
  font-size: 0.8em;
  display: block;
}

.details-column .value {
  color: #fff;
  font-weight: bold;
}

/* On very small screens, stack them */
@media (max-width: 500px) {
  .details-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
}

/* Location Details Modal Styles */
.details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 10px;
}

.details-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.details-column p {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.details-column .label {
  font-size: 0.7rem;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.details-column .value {
  font-size: 0.95rem;
  color: #fff;
  font-weight: 500;
}

/* ---- Dual-section Location Details ---- */

/* Modal body: scrollable, capped so it stays on screen */
#modal-details .modal-body {
  overflow-y: auto;
  max-height: 65vh;
}

/* ---- DESKTOP: sections side-by-side, divider hidden ---- */
.details-dual-wrapper {
  display: flex;
  flex-direction: row;
  gap: 40px;
  align-items: flex-start;
  width: 100%;
}

.details-section {
  flex: 1;
  padding: 4px 0 8px;
}

/* Section heading ("Local" / "Other") */
.details-section-heading {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #aaa;
  margin: 0 0 8px 0;
  padding-bottom: 4px;
  border-bottom: 1px solid #444;
}

/* Horizontal divider hidden on desktop (sections are side-by-side) */
.details-divider {
  display: none;
}

/* ---- MOBILE PORTRAIT: sections stacked, 2-col grid enforced ---- */
@media screen and (max-width: 950px) and (orientation: portrait) {

  /* Widen the modal to use more of the available screen width (Increased 40% as requested) */
  #modal-details.modal-content {
    width: 98% !important;
    max-width: 840px !important;
    /* Increased 40% from 600px */
  }

  .details-dual-wrapper {
    flex-direction: column;
    gap: 0;
    width: 100%;
    margin: 0;
  }

  .details-section {
    flex: none;
    width: 100%;
    /* Ensure section fills modal width */
  }

  /* Show divider between stacked sections */
  .details-divider {
    display: block;
    border: none;
    border-top: 1px solid #333;
    margin: 2px 0 6px;
  }

  /* Enforce 2-col grid and widen columns by ~50% */
  #modal-details .details-grid {
    grid-template-columns: 1.5fr 1.5fr !important;
    gap: 15px;
    /* Increased gap */
    width: 100%;
    margin-top: 4px;
  }

  /* Tighten vertical density to reduce overall height */
  #modal-details .details-section {
    padding: 2px 0 4px;
  }

  #modal-details .details-section-heading {
    font-size: 0.72rem;
    margin: 0 0 5px 0;
    padding-bottom: 3px;
  }

  #modal-details .details-column {
    gap: 6px;
  }

  #modal-details .details-column p {
    gap: 1px;
  }

  #modal-details .details-column .label {
    font-size: 0.62rem;
  }

  #modal-details .details-column .value {
    font-size: 0.85rem;
  }

  #modal-details .modal-body {
    max-height: 68vh;
    /* Increased 10% from 62vh */
  }

  /* Widen sections to use more space */
  .details-grid {
    grid-template-columns: 1.4fr 1.6fr !important;
    /* Bias second column for longer values/DST */
    width: 100%;
  }
}

/* ---- MOBILE LANDSCAPE: sections side-by-side, label inline with value ---- */
@media screen and (max-height: 500px) {

  /* Widen the modal in landscape to use the full screen width */
  #modal-details.modal-content {
    width: 98% !important;
    max-width: 920px !important;
    /* Wider for landscape to avoid any wrapping */
  }

  /* Increased gap and taller dialog for landscape */
  #modal-details .modal-body {
    max-height: 60vh;
    /* More height in landscape */
  }

  .details-dual-wrapper {
    flex-direction: row;
    gap: 40px;
    width: 100%;
    align-items: flex-start;
  }

  .details-section {
    flex: 1;
    min-width: 0;
    /* prevents flex children from overflowing */
  }

  .details-divider {
    display: none;
  }

  /* Tighter heading — 10% smaller than portrait */
  .details-section-heading {
    font-size: 0.63rem;
    /* 0.7rem × 0.9 */
    margin-bottom: 3px;
  }

  /* Expand grid to full width and widen the value space */
  #modal-details .details-grid {
    display: block;
    /* Stack headers/sections */
    width: 100%;
    margin-top: 3px;
  }

  #modal-details .details-column {
    gap: 1px;
  }

  /* Label and value on the same line, spanning full width */
  #modal-details .details-column p {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
    margin: 0;
    width: 100%;
  }

  #modal-details .details-column .label {
    min-width: 80px;
    /* Reduced to give more room to values */
    width: auto;
    font-size: 0.585rem;
    flex-shrink: 0;
    text-transform: uppercase;
  }

  #modal-details .details-column .value {
    font-size: 0.72rem;
    flex-grow: 1;
    text-align: left;
    white-space: nowrap;
    /* Prevent wrapping since we have width now */
  }
}


/* --- iPhone Full Screen Workaround --- */
.ios-fullscreen-fix {
  height: calc(100vh + 1px) !important;
  overflow-y: scroll !important;
  -webkit-overflow-scrolling: touch;
  /* smooth scrolling */
  position: relative;
  /* ensure it stays in flow but allows overflow */
}

/* --- Mobile Landscape Dialog Tweaks --- */
/* --- Mobile Landscape Dialog Tweaks --- */
@media screen and (max-height: 500px) {
  .modal-content {
    padding: 8px 16px !important;
    gap: 4px !important;
    max-height: 94vh !important;
    /* Slightly more headroom for mobile bars */
    max-width: 640px !important;
    width: 98% !important;
  }

  /* Make header very compact */
  .modal-content>h2 {
    font-size: 0.95rem !important;
    padding-bottom: 2px !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid #333 !important;
  }

  /* HIDE SEPARATORS completely to save space */
  .separator {
    display: none !important;
  }

  /* SIDE-BY-SIDE LAYOUT: Put headers next to content */
  .location-section {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 2px !important;
  }

  /* Headers become labels on the left */
  .location-section h3 {
    margin: 0 !important;
    font-size: 0.85rem !important;
    white-space: nowrap !important;
    min-width: 80px !important;
    /* Align content */
    color: #aaa !important;
  }

  /* Content area grows */
  .preset-grid,
  .input-row {
    flex-grow: 1 !important;
    margin: 0 !important;
  }

  /* Compact preset grid */
  .preset-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 3px !important;
  }

  .ui-btn.preset-modal {
    padding: 2px 4px !important;
    font-size: 0.75rem !important;
    height: 24px !important;
    /* Force short buttons */
  }

  /* City Lookup optimizations */
  .location-section .input-row {
    margin: 0 !important;
    display: flex !important;
    /* Ensure input row is flex too */
    flex-direction: row !important;
  }

  .modal-input {
    padding: 4px !important;
    font-size: 0.85rem !important;
    height: 28px !important;
  }

  .input-row .ui-btn {
    padding: 2px 8px !important;
    height: 28px !important;
  }

  /* Error message handling - make it small overlay or tight */
  .error-msg {
    margin: 0 !important;
    font-size: 0.75rem !important;
  }

  /* Footer compacting */
  .modal-actions {
    margin-top: 0 !important;
    gap: 5px !important;
    padding-top: 4px !important;
  }

  /* --- Text Content Optimizations (About Dialog) --- */
  .modal-body p {
    margin: 4px 0 !important;
    font-size: 0.85rem !important;
    line-height: 1.3 !important;
  }

  .modal-body {
    overflow-y: auto;
    padding-top: 2px !important;
  }

  /* Compacting Location Details specifically */
  .details-grid {
    gap: 12px !important;
    margin-top: 4px !important;
  }

  .details-column {
    gap: 2px !important;
    /* Significantly reduced from 12px */
  }

  .details-column p {
    gap: 0 !important;
    margin: 0 !important;
  }

  .details-column .label {
    font-size: 0.65rem !important;
    margin-bottom: -1px !important;
  }

  .details-column .value {
    font-size: 0.85rem !important;
  }

  /* Layout refinements for tight vertical viewports */
  #bottom-left-container,
  #bottom-right-container {
    bottom: 8px !important;
  }

  .button-group-bottom-right {
    gap: 4px !important;
  }

  .controls-group {
    gap: 2px !important;
  }

  /* Move Other Location button closer to Location Details */
  .button-stack {
    gap: 2px !important;
  }

  .preset-buttons {
    margin-bottom: 4px !important;
  }

  .selector-box {
    margin-bottom: 0 !important;
  }
}

/* Mobile gear-btn optimization */
@media screen and (max-width: 600px) {
  .ui-btn.gear-btn {
    padding: 6px 4px !important;
    min-width: 32px;
  }
}


/* NOTE: The old max-width:600px 1-col override is replaced by explicit
   breakpoint rules above (.details-dual-wrapper portrait/landscape blocks). */