/* Verity — refinements on top of the compiled Tailwind (tw.css). */

/* Native <details> without the default marker. */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

canvas { width: 100%; }
[dir="rtl"] body { letter-spacing: 0; }

/* Brand selection (emerald ink on sand-bronze). */
::selection { background: #C7A85F; color: #0A3D2E; }

/* Smooth, consistent interaction feel across every page. */
a, button, input, select, textarea, svg,
.transition, [class*="hover:"] {
  transition: color .15s ease, background-color .15s ease, border-color .15s ease,
              box-shadow .15s ease, transform .15s ease, filter .15s ease, opacity .15s ease;
}
button:active { transform: translateY(0.5px); }

/* Accessible keyboard focus — a clear ring only for keyboard users. */
:focus-visible {
  outline: 2px solid #17A673;
  outline-offset: 2px;
  border-radius: 6px;
}
:focus:not(:focus-visible) { outline: none; }

/* Never let a page scroll sideways on mobile. */
html, body { overflow-x: hidden; }

/* Ambient background art — dark mode only. Soft, oversized emerald/gold glows
   that pool behind the opaque cards for depth, with no hard repeating lines.
   Light mode stays clean (no background art). */
.dark body {
  background-image:
    radial-gradient(1200px 900px at 6% -8%, rgba(23,166,115,0.16), transparent 60%),
    radial-gradient(1100px 800px at 100% 4%, rgba(199,168,95,0.12), transparent 58%),
    radial-gradient(1000px 1000px at 50% 118%, rgba(23,166,115,0.10), transparent 62%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* In-button loading spinner (shown while a form submit is in flight). */
.vspin {
  display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
  animation: vspin 0.6s linear infinite;
}
@keyframes vspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vspin { animation-duration: 1.6s; } }

/* Numbers read as data: consistent tabular figures in tables and stats. */
table, .tabular { font-variant-numeric: tabular-nums; }

/* Dubai community locator map (app/web/dubai_map.py renders the inline SVG). */
.vmap { display: block; width: 100%; height: auto; max-height: 340px; }
.vmap-base { fill: rgba(10,61,46,0.06); stroke: rgba(10,61,46,0.18); stroke-width: 0.6;
             vector-effect: non-scaling-stroke; }
.vmap-hi   { fill: #17A673; stroke: #0A3D2E; stroke-width: 1; vector-effect: non-scaling-stroke; }
.vmap-dot  { fill: none; stroke: #C7A85F; stroke-width: 2; vector-effect: non-scaling-stroke; }
.vmap-dot-core { fill: #C7A85F; }
.dark .vmap-base { fill: rgba(233,227,212,0.05); stroke: rgba(233,227,212,0.14); }
.dark .vmap-hi   { fill: #17A673; stroke: #E9E3D4; }

/* Value-coded score map: communities shaded by their Area Score band. */
.vmap-score { stroke: rgba(10,61,46,0.35); stroke-width: 0.6; vector-effect: non-scaling-stroke;
              cursor: pointer; transition: filter .15s ease, opacity .15s ease; }
.vmap-score:hover { filter: brightness(1.08); }
.vmap a:focus-visible .vmap-score { outline: none; filter: brightness(1.12); stroke-width: 1.4; }
.vmap-strong  { fill: #17A673; }
.vmap-stable  { fill: #C7A85F; }
.vmap-caution { fill: #D98A3D; }
.dark .vmap-score { stroke: rgba(233,227,212,0.28); }

/* Interactive value map: hover tooltip + search highlight/dim. */
.vmap-wrap { position: relative; }
.vmap-score.vmap-dim   { opacity: 0.22; }
.vmap-score.vmap-match { filter: brightness(1.12); stroke: #0A3D2E; stroke-width: 1.6; }
.dark .vmap-score.vmap-match { stroke: #E9E3D4; }
.vmap-tip {
  position: absolute; z-index: 5; pointer-events: none; max-width: 15rem;
  padding: .5rem .625rem; border-radius: .5rem; background: #0A3D2E; color: #E9E3D4;
  font-size: .75rem; line-height: 1.35; box-shadow: 0 6px 20px rgba(0,0,0,.28);
  display: flex; flex-direction: column; gap: .05rem;
}
.vmap-tip.hidden { display: none; }
.vmap-tip-t { font-weight: 700; color: #fff; }
.vmap-tip-s { color: #C7A85F; font-weight: 600; }
.vmap-tip-m { color: rgba(233,227,212,0.82); }

/* Explorer side panel + draw-a-region selection. */
.vmap-panel { min-height: 8rem; }
.vmap-drawing { cursor: crosshair; }
.vmap-drawing .vmap { cursor: crosshair; }
.vmap-drawing .vmap-score { cursor: crosshair; }
.vmap-rect { fill: rgba(10,61,46,0.10); stroke: #0A3D2E; stroke-width: 1.2;
             stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; pointer-events: none; }
.dark .vmap-rect { fill: rgba(233,227,212,0.10); stroke: #E9E3D4; }
.vmap-score.vmap-sel { filter: brightness(1.14); stroke: #0A3D2E; stroke-width: 1.6; }
.dark .vmap-score.vmap-sel { stroke: #E9E3D4; }

/* Gentle entrance for primary content (respects reduced-motion). */
@media (prefers-reduced-motion: no-preference) {
  main > * { animation: verity-rise .4s ease both; }
  @keyframes verity-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}