/* Mountain sundial (/gifts/sundial/): on top of the shared maker look (/gifts/globes/maker.css). */

.sd .sd-label { display: block; font-size: 0.8rem; color: var(--muted); margin: 14px 0 6px; }
.sd .wm-sec .sd-label:first-of-type { margin-top: 2px; }
.sd .wm-seg button { padding: 6px 9px; }
.sd .wm-seg button:disabled { opacity: 0.35; cursor: not-allowed; }
.sd .wm-mapwrap { max-width: none; margin-top: 10px; }
.sd .wm-mapwrap .wm-map { aspect-ratio: 16 / 11; }
.sd .sd-chips { margin: 4px 0 12px; gap: 6px; }
.sd .sd-chips .wm-chip { font-size: 0.8rem; padding: 5px 10px; cursor: pointer; font-family: inherit; }
.sd .wm-colors { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* the summit on the map */
.sd-peak {
    width: 0; height: 0; cursor: pointer;
    border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 15px solid var(--gold, #d9b14a);
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
}

/* where it stands */
.sd-where { margin: 0 0 10px; font-size: 0.9rem; line-height: 1.45; }
.sd-where b { font-weight: 650; }
.sd-where small { display: block; color: var(--muted); font-size: 0.8rem; margin-top: 2px; }
.sd-whererow { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.sd-whererow .wm-btn { display: inline-flex; align-items: center; gap: 6px; }
.sd-zone { display: block; margin-top: 12px; font-size: 0.8rem; color: var(--muted); }
.sd-zone span { display: block; margin-bottom: 6px; }
.sd select { background: var(--field); color: var(--ink); border: 1px solid transparent; border-radius: 9px; padding: 8px 10px; font: inherit; font-size: 0.88rem; }
.sd .sd-zone select { width: 100%; }

/* how often it can be read */
.sd-read { margin: 10px 0 4px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.sd-read[hidden] { display: none; }
.sd-read div { background: var(--field); border-radius: 8px; padding: 7px 8px 9px; position: relative; overflow: hidden; }
.sd-read b { display: block; font-size: 1.05rem; font-weight: 650; }
.sd-read span { font-size: 0.72rem; color: var(--muted); line-height: 1.25; display: block; }
.sd-read i { position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--f, 0) * 100%); background: var(--gold, #d9b14a); }

/* the clock over the preview */
.sd-clock {
    position: absolute; left: 12px; top: 12px; z-index: 2; pointer-events: none;
    background: rgba(16, 20, 18, 0.82); color: var(--ink); border-radius: 10px; padding: 8px 12px; font-size: 0.82rem; line-height: 1.4;
    display: flex; flex-direction: column; gap: 1px; backdrop-filter: blur(4px); max-width: min(330px, calc(100% - 24px));
}
.sd-clock[hidden] { display: none; }
.sd-clock b { font-weight: 650; }
.sd-clock span { color: var(--gold, #d9b14a); font-weight: 650; font-size: 0.95rem; }
.sd-clock small { color: var(--muted); font-size: 0.74rem; }
.sd-clock small:empty { display: none; }

/* time and date under the preview */
.sd-time { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; padding: 10px 14px 0; }
.sd-slide { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 0.8rem; color: rgba(236, 238, 233, 0.7); }
.sd-slide input { width: 100%; accent-color: var(--gold, #d9b14a); }
.sd-slide output { min-width: 5.6em; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }

/* the preview buttons */
.sd .wm-stagebar .sd-play { background: var(--accent); color: #04201c; font-weight: 650; }
.sd .wm-stagebar .sd-play:hover:not(:disabled) { background: #3cb8a8; }
.sd .wm-stagebar .wm-btn { display: inline-flex; align-items: center; gap: 6px; }

.sd-steps { margin: 0 0 6px; padding-left: 18px; font-size: 0.86rem; line-height: 1.5; color: var(--ink); }
.sd-steps li + li { margin-top: 4px; }
.sd-sheet { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.sd .wm-sec-out h3 { margin-top: 16px; }

@media (max-width: 760px) {
    .sd-time { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .sd .wm-seg button { padding: 6px 6px; font-size: 0.76rem; }
    .sd .wm-stagebar .wm-btn span { display: none; }
    .sd .wm-stagebar .sd-play span { display: inline; }
    .sd-clock { left: 8px; top: 8px; padding: 6px 9px; font-size: 0.74rem; }
    .sd-clock span { font-size: 0.85rem; }
    .sd .wm-colors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}