/* DHUT living world (js/adaptive/adaptiveApp.js): weather card, tips, festival shortcuts,
   settings. Cards keep the app's readable surfaces; the adaptive colours (--adp-*) only tint
   accents and decorations, never the text colours. */

.adaptive-strip { display: grid; gap: 8px; margin: -4px 0 14px; }
.adaptive-strip:empty, .adaptive-strip > [hidden] { display: none; }
.aw-card { background: var(--surface); border-radius: var(--radius-lg); padding: 10px 14px; box-shadow: var(--shadow-soft, 0 1px 3px rgba(0,0,0,0.08));
  color: var(--text-primary); border-left: 4px solid var(--adp-accent, var(--accent)); }
.aw-slim { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; }
.aw-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.aw-place { font-size: 12px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.aw-temp { font-size: 24px; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
.aw-icon { font-size: 20px; }
.aw-side { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.aw-cond { font-size: 14px; font-weight: 600; }
.aw-muted { font-size: 12px; color: var(--text-secondary); }
.aw-details { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 6px; font-size: 12px; color: var(--text-secondary); }
.aw-tomorrow { margin-top: 4px; }
.aw-stale { margin-top: 4px; font-style: italic; }
.aw-refresh { font-size: 12px; min-height: 28px; }
.aw-refresh:disabled { opacity: 0.6; cursor: default; }
@media (pointer: coarse) { .aw-refresh { min-height: 44px; } } /* the app's touch-target size */
.aw-preview { border-left-style: dashed; }
.aw-title { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.aw-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.aw-actions button { width: auto; margin: 0; }
.aw-status { font-size: 12px; color: var(--text-secondary); margin-top: 6px; min-height: 0; }
.aw-status:empty { display: none; }
.aw-festival { border-left-color: var(--adp-event-decoration, var(--adp-accent, var(--accent))); }
.daily-challenge { margin: 6px 0 0; font-size: 12px; color: var(--text-secondary); }
.exercise-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; }

/* Profile settings */
.adp-sub { font-size: 14px; margin: 14px 0 6px; }
.adp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.adp-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-secondary); }
.adp-field select, .adp-field input { margin: 0; }
.adp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.adp-row button { width: auto; margin: 0; }
.adp-check { display: flex; align-items: center; gap: 6px; font-size: 13px; margin: 6px 0; }
.adp-check input { width: auto; margin: 0; }
.adp-toggles { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.adaptive-debug { margin-top: 12px; font-size: 11px; }
.adaptive-debug pre { white-space: pre-wrap; word-break: break-word; background: var(--surface-soft); border-radius: 10px; padding: 8px; max-height: 320px; overflow: auto; }

/* City picker */
.adp-dialog { position: fixed; inset: 0; z-index: 120; background: rgba(20, 24, 22, 0.45); display: flex; align-items: flex-start; justify-content: center; padding: 10vh 16px 16px; }
.adp-dialog[hidden] { display: none; }
.adp-dialog-card { background: var(--surface); color: var(--text-primary); border-radius: var(--radius-lg); padding: 14px; width: 100%; max-width: 420px; box-shadow: 0 12px 40px rgba(0,0,0,0.2); }
.adp-dialog-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.adp-city-results { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 4px; max-height: 50vh; overflow: auto; }
.adp-city-btn { width: 100%; margin: 0; text-align: left; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; background: var(--surface-soft); color: var(--text-primary); border-radius: 12px; padding: 8px 12px; }
.adp-city-btn:hover, .adp-city-btn:focus-visible { background: var(--accent-light); }

/* Hero: a whisper of the event/weather colour on the scene background (decoration only). */
html[data-adaptive]:not([data-adaptive="static"]) .world-hero {
  background: radial-gradient(120% 80% at 85% 0%, var(--adp-glow, transparent), transparent 60%),
    linear-gradient(160deg, var(--hero-top) 0%, var(--hero-bottom) 100%);
}
/* Night: the light glow would wash out the pale text on the dark hero (date chip < 4.5:1), so it
   stays small and faint there, and the date chip gets a darker backing. */
html[data-period="night"][data-adaptive]:not([data-adaptive="static"]) .world-hero {
  background: radial-gradient(70% 55% at 90% 0%, color-mix(in srgb, var(--adp-glow, transparent) 35%, transparent), transparent 70%),
    linear-gradient(160deg, var(--hero-top) 0%, var(--hero-bottom) 100%);
}
html[data-period="night"][data-adaptive]:not([data-adaptive="static"]) .hero-date { background: rgba(8, 12, 36, 0.45); color: #E6E9FC; }

/* Motion: the user's setting and the OS setting both stop continuous animation. */
html[data-motion="reduced"] .mascot-live *, html[data-motion="off"] .mascot-live *,
html[data-motion="reduced"] .deco, html[data-motion="off"] .deco,
html[data-motion="reduced"] .world-sun, html[data-motion="off"] .world-sun,
html[data-motion="reduced"] .world-cloud, html[data-motion="off"] .world-cloud,
html[data-motion="reduced"] .sky-star, html[data-motion="off"] .sky-star,
html[data-motion="reduced"] .world-mascot, html[data-motion="off"] .world-mascot { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .mascot-live *, .deco, .world-sun, .world-cloud, .sky-star { animation: none !important; }
}

/* Moon behind the clouds (rainy / overcast festival night). */
.adp-moon-veiled .adp-moon { opacity: 0.45; }