/* v95 whole-app declutter + sizing robustness (declutter worker). Loaded last; overrides only. */

/* ---------- SIZING ---------- */
/* 1. Real devices (narrow, touch, or landscape phones) fill the screen. Before: only max-width:430px did, so a phone
      in landscape (844x390) got the desktop "phone mock-up" frame and a ~280px app. */
@media (max-width: 430px), (hover: none) and (pointer: coarse), (max-height: 500px) {
  .desktop-stage { padding: 0 !important; min-height: 100vh; min-height: 100dvh; }
  .desktop-caption { display: none !important; }
  .phone { width: 100% !important; height: 100vh; height: 100dvh; max-width: none !important; max-height: none !important; }
  .phone-bezel { border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; border: 0 !important; }
  .phone-screen { border-radius: 0 !important; padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
  .phone-side-btn { display: none !important; }
  /* 2. The mock status bar (fake clock + Dynamic Island, 52px) and mock home bar (18px) were drawn on real phones too:
        a second clock under the real one, wrong height on notched iPhones, and 70px of dead space. Replace them with the
        real safe-area insets (0 in a browser tab, notch height in the installed app). */
  .status-bar { height: env(safe-area-inset-top, 0px) !important; min-height: 0 !important; padding: 0 !important; overflow: hidden; background: var(--bg) !important; }
  .status-bar > * { display: none !important; }
  .home-indicator { display: none !important; }
}
/* 3. iOS zooms the page when a focused field is under 16px; keep touch inputs at 16px */
@media (hover: none) and (pointer: coarse) {
  input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=button]), select, textarea { font-size: max(16px, 1em) !important; }
}
/* 4. hidden file pickers really hidden (raw "Choose File · No file chosen" showed in Regs and My Marks) */
input[type=file][hidden] { display: none !important; }
/* 5. map pop-up cards never taller than the screen (Ramp card's title was off-screen at 320x568) */
.ramp-sheet, .store-sheet, .coach-sheet { padding-bottom: calc(var(--st-nav-h, 80px) + 8px) !important; padding-top: calc(env(safe-area-inset-top, 0px) + 8px) !important; }
.ramp-sheet-card, .store-sheet-card, .coach-sheet-card { max-height: calc(100dvh - var(--st-nav-h, 80px) - env(safe-area-inset-top, 0px) - 16px) !important; overflow-y: auto; overscroll-behavior: contain; }
@supports not (height: 100dvh) { .ramp-sheet-card, .store-sheet-card, .coach-sheet-card { max-height: calc(100vh - var(--st-nav-h, 80px) - 16px) !important; } }
/* 6. keyboard open (Android WebView resizes the page): hide the tab bar + Diary button so they don't ride up on the keys */
body.st-kb .tab-bar, body.st-kb .cd-fab, body.st-kb #cd-fab { display: none !important; }
/* 7. landscape phones: drawers use the full height under the header */
@media (max-height: 500px) and (orientation: landscape) {
  .drawer-tall, .drawer-regs { max-height: none !important; }
  .tab-bar.tab-bar-v13 { min-height: 52px !important; padding-top: 2px !important; }
}

/* ---------- DECLUTTER ---------- */
/* header: one compact row — drop the tagline ("Queensland coast · Gulf to Gold Coast"); clock line stays */
.app-header .tagline { display: none !important; }
.app-header { padding-top: 4px !important; padding-bottom: 6px !important; }
/* tab sheets: the tab bar already names the page, so no second "WIND / TIDES & SOLUNAR / WEATHER" title row + X (tap Map to close) */
#drawer-wind > .drawer-head, #drawer-tides > .drawer-head, #drawer-conditions > .drawer-head { display: none !important; }
#drawer-wind > .drawer-handle, #drawer-tides > .drawer-handle, #drawer-conditions > .drawer-handle { margin-top: 4px; margin-bottom: 2px; }
/* one "not for navigation" per screen, at the bottom: the generic red line under each sheet title goes; each screen keeps its own bottom notice */
.drawer .st-nfn { display: none !important; }
#wx2 > p.cd-hint:last-child::after { content: " Not for navigation."; }
/* Weather: dev badge ("TIDE: WORLDTIDES · REST MOCK") and the model-point lat/long readout */
#conditions-badge { display: none !important; }
.wx2-wtxt .cd-hint { display: none !important; }
/* the launch "Nearest tide station" toast only over the map, not over open sheets */
body.st-sheet-full .tide-auto-toast { display: none !important; }
/* menu: location/catch diagnostics line only when debugging */
html:not(.st-debug) .sm-locdbg { display: none !important; }
/* My Marks: tools folded into "Import / export" */
.dc-more { margin: 6px 0 8px; border: 1px solid rgba(148,163,184,.18); border-radius: 12px; padding: 0 10px; }
.dc-more > summary { cursor: pointer; list-style: none; padding: 10px 0; font-size: 13px; color: #9fb6c8; font-weight: 600; }
.dc-more > summary::-webkit-details-marker { display: none; }
.dc-more > summary::after { content: " ▾"; }
.dc-more[open] > summary::after { content: " ▴"; }
.dc-more[open] { padding-bottom: 8px; }
#drawer-marks .dc-empty .mk-count, #drawer-marks .drawer-scroll > p.hint { display: none !important; }
/* Ramp / store cards: one row of direction buttons, source/position notes folded away */
.ramp-dir-links { flex-direction: row !important; gap: 6px !important; }
.ramp-dir-links .ramp-dir-btn { flex: 1 1 0; min-width: 0; padding: 10px 4px !important; font-size: .8rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ramp-sheet-card .ramp-dirs-label, .store-sheet-card .ramp-dirs-label { margin: .55rem 0 .3rem; }
.ramp-sheet-card .dc-more, .store-sheet-card .dc-more { margin: 8px 0 0; }
.ramp-sheet-card .dc-more .hint, .ramp-sheet-card .dc-more .w-sub, .store-sheet-card .dc-more .hint, .store-sheet-card .dc-more .w-sub { margin: 0 0 6px; font-size: 12px; }
.ramp-sheet-card > .disclaimer, .store-sheet-card > .disclaimer { margin: .5rem 0 0; font-size: 11px; }
/* store card: "Own this shop? Claim it" sits under the card instead of squeezing it */
.store-sheet { flex-direction: column !important; justify-content: flex-end !important; align-items: center !important; }
.store-sheet .store-claim-link { position: static !important; margin: 6px auto 0 !important; font-size: 12px; background: rgba(6,16,27,.9); padding: 4px 10px; border-radius: 999px; align-self: center; }

/* Tide auto-nearest toast: wrap instead of truncating/overflowing on narrow phones and at 130% text */
@media (max-width: 420px) {
  .tide-auto-toast { white-space: normal !important; border-radius: 16px !important; width: max-content; max-width: calc(100vw - 24px) !important; text-align: center; line-height: 1.3; }
  .tide-auto-toast .tide-auto-go { white-space: nowrap; }
}

/* Long credit URLs (GA eCat record) wrap instead of running off narrow screens / 130% text */
#drawer-about a, #drawer-about p, #drawer-about li { overflow-wrap: anywhere; }

/* Map search: one slim 40px row instead of ~66px (the input had 12px padding inside a padded field) */
.search-bar { padding: 4px 10px 5px !important; }
.search-bar .search-field { padding: 1px 8px !important; min-height: 0 !important; }
#spot-search { padding: 7px 2px !important; min-height: 0 !important; line-height: 1.2 !important; }
/* Phone landscape: keep the map usable — compact closure banner too */
@media (max-height: 500px) and (orientation: landscape) {
  .cl-banner { padding: 2px 4px 2px 10px !important; margin-bottom: 4px !important; }
  .cl-banner .cl-bx { width: 30px; height: 30px; }
}