/* Create23 additions to the Golden Hour Planner (loaded last, overrides only).
   1. Readable labels on phones (nothing under 10 px).
   2. Desktop layout: map on the left, every planning figure in a side column (no tabs, no drawer).
   3. Sheets open as a side panel on desktop instead of stretching across the screen. */

/* ---------- 1. Readability ---------- */
.info-tab { font-size: 11px; }
.bottom-nav button { font-size: 11px; }
.info-panel-page > header strong { font-size: 10.5px; }
.info-panel-metrics > div > span,
.height-readout > span:first-child { font-size: 10px; letter-spacing: .04em; }
.info-panel-metrics strong { font-size: 12px; }
.leaflet-control-attribution { font-size: 10px; }
@media (max-width: 380px) {
  .info-tab { font-size: 10px; }
  .info-panel-metrics > div > span,
  .height-readout > span:first-child { font-size: 9.5px; letter-spacing: .02em; }
  .info-panel-metrics strong { font-size: 11px; }
}

/* The light-phase badge shows its full name ("Morning golden hour") where it fits. */
.light-phase-badge { max-width: min(200px, 48vw); }

/* Place name under the title (place-name.js): one line, full coordinates in the tooltip. */
#locationLabel { max-width: min(52vw, 340px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Phones/tablets: the planning drawer opens OVER the map instead of pushing it down, so the map
   keeps its size and the camera/subject pins stay where they are. (Desktop and short landscape
   screens show the panel in a side column, where nothing moves.) */
@media (max-width: 1099px) and (orientation: portrait), (max-width: 1099px) and (min-height: 651px) {
  .top-info-panel,
  .top-info-panel.is-expanded { height: 43px; min-height: 43px; overflow: visible; }
  .top-info-panel .info-panel-drawer { position: absolute; left: 0; right: 0; z-index: 5; }
  .map-stage { isolation: isolate; }
  /* the map's top controls (Camera/Subject, undo, light phase) slide down with the drawer so they stay usable */
  .map-stage > .pin-mode, .map-stage > .light-phase-badge, .map-stage > .history-actions, .map-stage > .ghp-subject-hint {
    transition: transform .28s cubic-bezier(.22, .72, .18, 1);
  }
  .planner-screen:has(.top-info-panel.is-expanded) .map-stage > :is(.pin-mode, .light-phase-badge, .history-actions) { transform: translateY(110px); }
  .planner-screen:has(.top-info-panel.is-expanded) .map-stage > .ghp-subject-hint { transform: translate(-50%, 110px); }
  .top-info-panel.is-expanded .info-panel-drawer { box-shadow: 0 18px 36px rgba(0, 0, 0, .4); border-bottom: 1px solid var(--line); }
}

/* Info drawer pages (Overview / Position / Subject / Shadow) on phones: the side padding was kept for
   carousel arrows that are hidden now, which squeezed the figures into "SUN ALIG…" / "86.6° ri…".
   Labels may wrap to two lines instead of being cut, and a finger swipe moves exactly one page. */
@media (max-width: 1099px) {
  .info-panel-page { padding-left: 12px; padding-right: 12px; }
  /* only while a finger swipes (header-drawer.js): a tab tap must still jump several pages at once */
  .info-panel-track.c23-swiping .info-panel-page { scroll-snap-stop: always; }
  .info-panel-page.sky-summary { padding-left: 12px; padding-right: 10px; }
  .info-panel-metrics > div > span, .height-readout > span:first-child {
    white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.15; overflow-wrap: anywhere;
  }
  .info-panel-metrics > div, .info-panel-metrics > label { padding: 0 6px; }
  .info-panel-metrics strong { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2; }
  /* "Sonne"/"Mond" need more than the fixed 40–45 px label column */
  .summary-row { grid-template-columns: max-content 22px minmax(0, 1fr) 22px minmax(0, 1fr); column-gap: 5px; }
}

/* ---------- 2. Desktop ---------- */
@media (min-width: 1100px) and (min-height: 651px) {
  .planner-screen {
    grid-template-columns: minmax(0, 1fr) 400px;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  .topbar { grid-column: 1 / 3; grid-row: 1; }
  .map-stage { grid-column: 1; grid-row: 2 / 4; border-right: 1px solid var(--line); }

  /* Side column: all four info pages stacked, always open. */
  .top-info-panel,
  .top-info-panel.is-expanded {
    grid-column: 2; grid-row: 2;
    height: auto; min-height: 0;
    overflow-y: auto; overscroll-behavior: contain;
    border-bottom: 0;
    background: rgba(9, 19, 33, .985);
  }
  .info-tabs, .info-panel-toggle { display: none !important; }
  .info-panel-drawer,
  .top-info-panel .info-panel-drawer {
    height: auto; opacity: 1; transform: none; pointer-events: auto; overflow: visible;
  }
  .info-panel-track {
    height: auto !important; display: block; overflow: visible; scroll-snap-type: none; touch-action: auto;
    background: none;
  }
  .info-panel-page,
  .info-panel-page.sky-summary {
    height: auto !important; padding: 18px 20px 20px !important;
    border-bottom: 1px solid var(--line);
  }
  .info-panel-page.sky-summary { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; }
  .info-panel-page > header { justify-content: flex-start; margin-bottom: 12px; }
  .info-panel-page > header strong { font-size: 11px; letter-spacing: .1em; }
  .info-panel-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 0; min-height: 0; }
  .info-panel-metrics > div, .info-panel-metrics > label { padding: 0 12px; }
  .info-panel-metrics > :nth-child(2n) { border-right: 0; }
  .info-panel-metrics > div > span, .height-readout > span:first-child { font-size: 11px; }
  .info-panel-metrics strong { font-size: 15px; margin-top: 5px; }
  .summary-row { font-size: 13px; }
  .phase-caption { font-size: 12px; }

  .light-phase-badge { max-width: 260px; }

  .timeline-card { grid-column: 2; grid-row: 3; padding: 12px 14px 14px; border-top: 1px solid var(--line); }

  /* ---------- 3. Sheets as a side panel ---------- */
  .sheet {
    left: auto; right: 20px; bottom: calc(66px + var(--safe-bottom) + 20px);
    width: 420px; max-height: min(80dvh, 760px);
    border-radius: 24px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
  }
  .sheet-handle { display: none; }
}

/* ---------- 4. Start without a location (start-location.js) ---------- */
/* Until the visitor has set a camera and a subject, the demo pins, lines and figures stay hidden. */
html:not(.ghp-placed) .leaflet-overlay-pane,
html:not(.ghp-placed) .leaflet-marker-pane .planner-marker:has(.subject-pin),
html:not(.ghp-placed) .top-info-panel,
html:not(.ghp-placed) .timeline-card,
.ghp-step-camera #locationLabel { visibility: hidden; }
html:not(.ghp-placed):not(.ghp-step-subject) .leaflet-marker-pane .planner-marker { visibility: hidden; }
.ghp-start, .ghp-subject-hint { display: none; }
.ghp-step-camera .ghp-start {
  display: grid; place-items: center; position: absolute; inset: 0; z-index: 900; padding: 20px;
  background: rgba(7, 16, 29, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.ghp-start-card {
  width: min(340px, 100%); padding: 24px 22px 20px; border-radius: 22px; text-align: center;
  background: rgba(13, 23, 38, .97); border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.ghp-start-pin { display: block; width: 44px; height: 44px; margin: 0 auto 12px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: #ff6b4a; box-shadow: inset 0 0 0 13px #ff6b4a, inset 0 0 0 22px #fff; }
.ghp-start-card h2 { margin: 0 0 8px; font-size: 20px; line-height: 1.2; color: var(--text); }
.ghp-start-card p { margin: 0 0 18px; font-size: 14px; line-height: 1.45; color: rgba(247, 250, 252, .72); }
.ghp-start-card button {
  display: block; width: 100%; min-height: 46px; margin-top: 10px; border-radius: 14px; font: inherit; font-weight: 700; font-size: 15px; cursor: pointer;
  color: var(--text); background: rgba(255, 255, 255, .06); border: 1px solid var(--line);
}
.ghp-start-card .ghp-start-search { color: #0a0b0f; background: #7ff454; border-color: #7ff454; }
.ghp-step-subject .ghp-subject-hint {
  display: block; position: absolute; left: 50%; top: 64px; z-index: 900; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px);
  padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 700; text-align: center; pointer-events: none;
  color: #0a0b0f; background: #7ff454; box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

/* ---------- 5. Sky AR fine-tuning (app.js c23FineTune) ---------- */
.c23-ar-tune {
  position: absolute; left: 50%; top: calc(132px + var(--safe-top, 0px)); z-index: 60; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100% - 24px);
  padding: 8px 8px 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 700;
  color: #0a0b0f; background: #7ff454; box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.c23-ar-tune[hidden] { display: none; }
.c23-ar-tune button { border: 0; border-radius: 999px; padding: 8px 14px; font: inherit; color: #fff; background: #0a0b0f; cursor: pointer; }
.c23-ar-tuning #arStage { touch-action: none; cursor: grab; }
.ar-body-alignment .tune-align { grid-column: 1 / -1; }

/* ---------- 6. Share link / calendar (plan-actions.js) ---------- */
.c23-plan-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.c23-plan-actions .secondary-btn { min-height: 42px; color: var(--text); background: rgba(255, 255, 255, .06); border: 1px solid var(--line); }
.plan-card footer { flex-wrap: wrap; }