/**
 * @file map-sun-shadow.css
 * @purpose Toolbar-anchored charcoal sun clock, contextual help and drawing cursor hint.
 * @dependencies map.html clock hooks, map-sun-clock.js, shared map tool primitives.
 * @publicSelectors .sun-clock-panel, .sun-clock-dial, .sun-clock-info, .sun-shadow-toggle.
 * @sideEffects Keeps the yellow active sun button; clock floats without changing map layout.
 */

/* Toolbar sun: retain its existing yellow activation treatment. */
.sun-shadow-icon {
  position: relative;
  width: 0.62rem;
  height: 0.62rem;
  border: 2px solid currentColor;
  border-radius: 50%;
  box-shadow:
    0 -0.53rem 0 -0.17rem currentColor,
    0 0.53rem 0 -0.17rem currentColor,
    0.53rem 0 0 -0.17rem currentColor,
    -0.53rem 0 0 -0.17rem currentColor,
    0.38rem -0.38rem 0 -0.17rem currentColor,
    -0.38rem -0.38rem 0 -0.17rem currentColor,
    0.38rem 0.38rem 0 -0.17rem currentColor,
    -0.38rem 0.38rem 0 -0.17rem currentColor;
}

.map-tool-button.sun-shadow-toggle {
  background: #25252d;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.map-tool-button.sun-shadow-toggle.is-active {
  border-color: rgba(255, 239, 151, 0.62);
  background: #f2a900;
  box-shadow: 0 8px 24px rgba(212, 118, 18, 0.35);
}

/* The screenshot's restrained clock face: no headings, date, or permanent prose. */
.sun-clock-panel {
  position: fixed;
  /* Keep overlapping help above the sibling coordinate box's shared z-index. */
  z-index: 8;
  display: grid;
  width: 160.5px;
  padding: 24px 9px 12px;
  border: 0.5px solid #303039;
  border-radius: 9px;
  background: #25252d;
  color: #f1f1f5;
  justify-items: center;
}

.sun-clock-panel[hidden],
.sun-clock-tooltip[hidden],
.sun-shadow-help[hidden] { display: none; }

.sun-clock-dial {
  position: relative;
  width: 141px;
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  outline: 0;
  background: #25252d;
  box-shadow: 5.25px 6.75px 15px #1c1c2366, -3.75px -3.75px 12px #35353e33;
  cursor: grab;
  touch-action: none;
}

.sun-clock-dial:focus-visible {
  outline: 2px solid #4285F4;
  outline-offset: 4px;
}

.sun-clock-dial.is-dragging { cursor: grabbing; }
.sun-clock-face { position: absolute; inset: 0; width: 100%; height: 100%; }
.sun-clock-ticks { fill: none; stroke: #6e6d80; stroke-width: 1.5; }

/* All three hands share the exact face center; blue is the 24-hour selector. */
.sun-clock-hour-hand,
.sun-clock-minute-hand,
.sun-clock-hand {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform-origin: 50% 50%;
}

.sun-clock-hour-hand { transform: rotate(var(--sun-clock-hour-angle, 30deg)); }
.sun-clock-minute-hand { transform: rotate(var(--sun-clock-minute-angle, 0deg)); }
.sun-clock-hand { transform: rotate(var(--sun-clock-angle, 195deg)); }

.sun-clock-hour-hand::before,
.sun-clock-minute-hand::before,
.sun-clock-hand::before {
  position: absolute;
  bottom: 50%;
  left: 50%;
  width: 2.625px;
  border-radius: 3px;
  background: #bcbcc9;
  content: "";
  transform: translateX(-50%);
}

.sun-clock-hour-hand::before { height: 27%; }
.sun-clock-minute-hand::before { height: 34%; }
.sun-clock-hand::before {
  bottom: 43%;
  width: 1.5px;
  height: 40%;
  background: #4285F4;
}

.sun-clock-hand span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8.25px;
  height: 8.25px;
  border: 1.125px solid #25252d;
  border-radius: 50%;
  background: #4285F4;
  transform: translate(-50%, -50%);
}

/* Bare, editable 24-hour digits preserve time entry without form-box clutter. */
.sun-clock-inputs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-top: 16.5px;
  color: #f1f1f5;
  font-size: 31.5px;
  font-weight: 650;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.sun-clock-inputs label { display: flex; }
.sun-clock-inputs input {
  appearance: textfield;
  -moz-appearance: textfield;
  box-sizing: content-box;
  width: 2.1ch;
  height: 1.2em;
  padding: 0;
  border: 0;
  border-radius: 4px;
  outline: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.sun-clock-inputs input:focus-visible { outline: 2px solid #4285F4; outline-offset: 2px; }
.sun-clock-inputs input::-webkit-inner-spin-button,
.sun-clock-inputs input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }

/* Pointer-, keyboard-, and touch-accessible help, kept within the map viewport. */
/* Help retains a usable hit target and full-size explanation rather than scaling text. */
.sun-clock-info-wrap { position: absolute; z-index: 2; top: 0; right: 0; }
.sun-clock-info {
  display: grid;
  width: 28px;
  height: 28px;
  padding: 4px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #4285F4;
  cursor: help;
  place-items: center;
}

.sun-clock-info svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.sun-clock-info:hover,
.sun-clock-info[aria-expanded="true"] { color: #4285F4; background: #30303b; }
.sun-clock-info:focus-visible { outline: 2px solid #4285F4; outline-offset: 1px; }
.sun-clock-tooltip {
  position: absolute;
  /* The toolbar clock sits high: help opens below its information icon. */
  top: 100%;
  right: 0;
  /* Reserve the collapsed sidebar and the right zoom column on narrow screens. */
  width: min(290px, calc(100vw - 148px));
  max-height: min(380px, var(--sun-help-height, calc(100dvh - 210px)));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px;
  border: 1px solid #525160;
  border-radius: 8px;
  background: #25252d;
  color: #d3d2df;
  font-size: 12px;
  font-weight: 450;
  line-height: 1.5;
  text-align: left;
  cursor: auto;
}

.sun-clock-tooltip strong { color: #f1f1f5; font-size: 13px; font-weight: 650; }
.sun-clock-tooltip:focus-visible { outline: 2px solid #4285F4; outline-offset: 1px; }
.sun-clock-tooltip p { margin: 8px 0 0; }
.sun-shadow-status { display: block; margin-top: 10px; padding-top: 10px; border-top: 1px solid #454451; color: #4285F4; }
body.is-using-sun-shadow .maplibregl-canvas { cursor: crosshair; }

/* Pointer guidance is informational only and must never intercept a map drag. */
.sun-draw-hint {
  position: fixed;
  z-index: 9;
  pointer-events: none;
  max-width: 230px;
  padding: 6px 9px;
  border: 1px solid #55535f;
  border-radius: 5px;
  background: #25252d;
  color: #f1f1f5;
  font: 500 12px/1.4 Inter, sans-serif;
}
.sun-draw-hint[hidden] { display: none; }

/* Compact screens preserve the same 50% increase over the previous small controls. */
@media (max-width: 44rem), (max-height: 700px) {
  .sun-clock-panel { width: 132px; padding: 22.5px 9px 9px; }
  .sun-clock-dial { width: 112.5px; }
  .sun-clock-inputs { margin-top: 13.5px; font-size: 27px; }
}

@media (max-height: 580px) and (min-width: 600px) {
  /* The legacy 32rem shell minimum otherwise anchors controls below the viewport. */
  .map-page .map-shell { min-height: 0; }
}