/* Stage 1 refinements preserve the established CHOPPERS palette and typography. */
html[data-theme] body #settings-modal.tool-fullscreen:not(.account-focus-view) #zone-title,
html[data-theme] body #settings-modal [data-zone-section="overview"] .zone-feature-card:not([data-zone-target="app-share"]) .zone-feature-label {
  color: #dfc05b !important;
  -webkit-text-fill-color: #dfc05b !important;
}
html[data-theme] body :is(#settings-modal,#native-exit-dialog) [data-app-share] {
  background: #ffcf23;
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
  border: 2px solid #111;
  border-radius: 10px;
  font-weight: 800;
}
html[data-theme] body #settings-modal [data-app-copy] {
  background: #075347;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: 2px solid #4d9b89;
  border-radius: 10px;
}
html body [data-app-share], html body [data-app-copy] {
  min-height: 48px;
  padding: 12px 20px;
  cursor: pointer;
}
html body [data-app-share]:disabled, html body [data-app-copy]:disabled { opacity: .65; cursor: wait; }
html body [data-app-share]:focus-visible, html body [data-app-copy]:focus-visible,
.ped-guide :is(button,a,summary,[tabindex]):focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
#settings-modal .zone-feature-card[data-zone-target="app-share"] {
  background: #ffcf23 !important;
  border-color: #111 !important;
  color: #111 !important;
}
#settings-modal .zone-feature-card[data-zone-target="app-share"] :is(.zone-feature-label,.zone-feature-title,.zone-feature-desc) {
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
}
.app-share-qr { margin: 28px 0 12px; text-align: center; }
.app-share-qr img { display: block; width: 236px; max-width: 100%; height: auto; margin: 0 auto 12px; background: #fff; }
.app-share-qr figcaption { font-weight: 700; }
.app-share-url { display: block; width: fit-content; margin: 8px auto 0; color: inherit; overflow-wrap: anywhere; text-underline-offset: 3px; }
.ped-guide { max-width: 1100px; margin-inline: auto; min-width: 0; }
.ped-guide > p { max-width: 70ch; line-height: 1.5; }
.ped-source { opacity: .9; }
.ped-document-choices, .ped-document-actions, .ped-zoom-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 18px 0; }
.ped-guide button, .ped-document-actions a { min-height: 44px; padding: 10px 14px; border: 1px solid var(--border2); border-radius: 8px; background: #075347; color: #fff; font: inherit; cursor: pointer; }
.ped-guide button[aria-pressed="true"] { background: #ffcf23; border-color: #111; color: #111; font-weight: 700; }
html[data-theme] #detail-panel .ped-guide button[aria-pressed="true"] { color: #111 !important; -webkit-text-fill-color: #111 !important; }
.ped-guide button:disabled { opacity: .45; cursor: default; }
.ped-guide [hidden] { display: none !important; }
.ped-zoom-controls output { min-width: 52px; text-align: center; font-variant-numeric: tabular-nums; }
.ped-page-viewport { width: 100%; max-width: 100%; overflow: auto; overscroll-behavior-inline: contain; border: 1px solid var(--border2); }
.ped-pages { width: 100%; }
.ped-page { width: 100%; margin: 0 0 16px; }
.ped-page-image { display: block; width: 100%; height: auto; }
.ped-page figcaption { padding: 8px 12px; font-size: 13px; }
.ped-readable-text { margin-top: 24px; }
.ped-readable-text summary { padding: 12px 0; cursor: pointer; font-weight: 700; }
.ped-readable-text p { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; max-width: 70ch; }

/* Capacitor updates the four safe-area aliases when the display changes.
   Keep the full map, but place interactive surfaces inside that safe rectangle. */
html[data-theme] body .topbar {
  top: var(--safe-area-top);
  left: var(--safe-area-left);
  right: var(--safe-area-right);
  padding-left: 12px !important;
}
html[data-theme] body .topbar .have-it-all-rail { left: 12px !important; }
@media (max-width: 600px) {
  html[data-theme] body .topbar { padding-left: 8px !important; }
  html[data-theme] body .topbar .have-it-all-rail { left: 8px !important; }
}
html[data-theme] body .modal.tool-fullscreen {
  box-sizing: border-box;
  padding: var(--safe-area-top) var(--safe-area-right) var(--safe-area-bottom) var(--safe-area-left);
}
html[data-theme] body .modal.tool-fullscreen .modal-panel { padding-bottom: 0; }
html[data-theme] body:has(#settings-modal.open [data-zone-section="morning"].active) #settings-modal.tool-fullscreen .modal-panel {
  padding: 0 0 8px;
}
/* Keep Back at the left and titles at the right, below the camera safe area.
   Intrinsic button sizing leaves the remaining row available to enlarged text. */
html[data-theme] body #settings-modal.tool-fullscreen:not(.account-focus-view) .user-zone-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}
html[data-theme] body #settings-modal.tool-fullscreen:not(.account-focus-view) .zone-back-btn {
  position: static;
  transform: none;
  justify-self: start;
  width: max-content;
}
html[data-theme] body #settings-modal.tool-fullscreen:not(.account-focus-view) .user-zone-head > div {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin-inline: auto;
  text-align: right;
  align-items: flex-end;
}
html[data-theme] body #settings-modal:has([data-zone-section="overview"].active) .user-zone-head > div {
  margin-left: auto;
  margin-right: 0;
  text-align: right;
}
/* Keep Back and the title at camera height with one moderate header depth
   across the phone tools; the page starts below the camera cutout. */
@media (max-width: 600px) {
  html[data-theme] body #settings-modal.tool-fullscreen:not(.account-focus-view) { padding-top: 0; }
  html[data-theme] body #settings-modal.tool-fullscreen:not(.account-focus-view) .user-zone-head {
    min-height: 0;
    margin: 0 !important;
    top: 0 !important;
    padding-top: 6px;
    padding-right: 8px;
    padding-bottom: 18px;
    padding-left: 12px;
  }
  html[data-theme] body #settings-modal.tool-fullscreen:not(.account-focus-view) .zone-back-btn {
    min-height: 44px;
  }
  html[data-theme] body #settings-modal.tool-fullscreen:not(.account-focus-view) .user-zone-head > div {
    max-width: calc(50vw - 33px);
    margin-left: auto;
    margin-right: 0;
  }
  html[data-theme] body #settings-modal.tool-fullscreen:not(.account-focus-view) #zone-title {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}
#overview-camera-heading {
  position: absolute;
  z-index: 13;
  pointer-events: none;
  text-align: right;
}
#overview-camera-heading[hidden] { display: none; }
html[data-theme] body #overview-camera-heading .modal-title {
  font: inherit;
  letter-spacing: inherit;
  white-space: nowrap;
  width: max-content;
}
html[data-theme] body #detail-panel.right-side[data-side-panel="safety"] {
  top: var(--safe-area-top) !important;
  right: var(--safe-area-right) !important;
  bottom: var(--safe-area-bottom) !important;
  left: var(--safe-area-left) !important;
  width: auto !important;
  height: auto !important;
  max-height: calc(100dvh - var(--safe-area-top) - var(--safe-area-bottom)) !important;
}
html[data-theme] body #welcome-sheet {
  left: var(--safe-area-left);
  right: var(--safe-area-right);
  max-height: min(82dvh, 640px, calc(100dvh - var(--safe-area-top)));
}