/* wheretosit — shadcn-inspired, minimal. Neutral tokens, yellow as the one accent. */

:root {
  color-scheme: light;
  /* shadcn neutral tokens (HSL triplets) */
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
  --muted: 240 4.8% 95.9%;
  --muted-foreground: 240 3.8% 46.1%;
  --secondary: 240 4.8% 95.9%;
  --border: 240 5.9% 90%;
  --input: 240 5.9% 90%;
  --ring: 240 5.9% 10%;
  --primary: 240 5.9% 10%;
  --primary-foreground: 0 0% 98%;
  --popover: 0 0% 100%;

  /* semantic app colours (kept as ready-to-use colours) */
  --accent: hsl(45 93% 47%);   /* the sun / brand */
  --accent-ink: hsl(38 92% 24%);
  --good: hsl(142 71% 42%);    /* recommended side */
  --road: hsl(240 5% 82%);
  --sun-left: hsl(222 89% 57%);   /* map route: sun on the left */
  --sun-right: hsl(2 78% 57%);    /* map route: sun on the right */

  /* legacy aliases used by viz.js / inline SVG */
  --surface: hsl(var(--card));
  --surface-2: hsl(var(--muted));
  --text: hsl(var(--foreground));
  --text-soft: hsl(var(--muted-foreground));
  --text-faint: hsl(var(--muted-foreground));
  --border-strong: hsl(var(--border));

  --radius: 0.625rem;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Dark palette — follows the OS by default; the toggle pins [data-theme] to override */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 7% 8%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --secondary: 240 3.7% 15.9%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 18%;
    --ring: 240 4.9% 83.9%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --popover: 240 7% 8%;
    --accent: hsl(45 93% 55%);
    --accent-ink: hsl(38 60% 12%);
    --good: hsl(142 60% 52%);
    --road: hsl(240 4% 22%);
    --sun-left: hsl(217 91% 66%);
    --sun-right: hsl(0 84% 68%);
  }
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
  --card: 240 7% 8%;
  --muted: 240 3.7% 15.9%;
  --muted-foreground: 240 5% 64.9%;
  --secondary: 240 3.7% 15.9%;
  --border: 240 3.7% 15.9%;
  --input: 240 3.7% 18%;
  --ring: 240 4.9% 83.9%;
  --primary: 0 0% 98%;
  --primary-foreground: 240 5.9% 10%;
  --popover: 240 7% 8%;
  --accent: hsl(45 93% 55%);
  --accent-ink: hsl(38 60% 12%);
  --good: hsl(142 60% 52%);
  --road: hsl(240 4% 22%);
  --sun-left: hsl(217 91% 66%);
  --sun-right: hsl(0 84% 68%);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

.wrap { max-width: 580px; margin: 0 auto; padding: 24px 16px 64px; }

/* Header */
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 1.05rem; letter-spacing: -0.02em; }
.brand .logo { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); }
.brand .logo svg { width: 18px; height: 18px; }
.brand .dot { color: hsl(var(--muted-foreground)); }
.icon-btn {
  height: 34px; width: 34px; border: 1px solid hsl(var(--border)); background: hsl(var(--background));
  color: hsl(var(--foreground)); border-radius: 8px; display: grid; place-items: center; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.icon-btn:hover { background: hsl(var(--muted)); }
.icon-btn svg { width: 17px; height: 17px; }

.tagline { color: hsl(var(--muted-foreground)); margin: 0 0 20px; font-size: .9rem; }

/* Cards */
.card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04);
  padding: 20px;
  margin-bottom: 14px;
}

/* Fields */
.field { margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }
.field > label { display: block; font-size: .875rem; font-weight: 500; color: hsl(var(--foreground)); margin-bottom: 7px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 460px) { .two-col { grid-template-columns: 1fr; } }

input, button { font-family: inherit; font-size: 1rem; color: inherit; }

.control {
  width: 100%; height: 40px;
  background: hsl(var(--background));
  border: 1px solid hsl(var(--input));
  border-radius: 8px;
  padding: 0 12px; font-size: .875rem; color: hsl(var(--foreground));
  transition: border-color .12s, box-shadow .12s;
}
.control::placeholder { color: hsl(var(--muted-foreground)); }
.control:focus { outline: none; border-color: hsl(var(--ring)); box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring) / 0.55); }

/* Clear (X) button */
.control-wrap { position: relative; }
.control-wrap .control { padding-right: 36px; }
.clear-btn {
  position: absolute; top: 50%; right: 5px; transform: translateY(-50%);
  width: 26px; height: 26px; border: none; border-radius: 6px; background: transparent;
  color: hsl(var(--muted-foreground)); cursor: pointer; display: grid; place-items: center;
}
.clear-btn:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.clear-btn::before {
  content: ""; width: 13px; height: 13px; background: currentColor;
  -webkit-mask: var(--x-mask) center/contain no-repeat; mask: var(--x-mask) center/contain no-repeat;
}
:root { --x-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }

/* Combobox popover */
.combo { position: relative; }
.combo-panel {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px);
  background: hsl(var(--popover)); border: 1px solid hsl(var(--border)); border-radius: 10px;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  max-height: 300px; overflow-y: auto; padding: 4px;
}
.combo-panel[hidden] { display: none; }
.opt { padding: 8px 8px; border-radius: 6px; cursor: pointer; display: flex; align-items: baseline; gap: 10px; font-size: .875rem; }
.opt:hover, .opt.active { background: hsl(var(--muted)); }
.opt .lead { font-weight: 500; min-width: 46px; font-variant-numeric: tabular-nums; }
.opt .sub { color: hsl(var(--muted-foreground)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opt .empty { color: hsl(var(--muted-foreground)); padding: 6px 4px; }

.dir-caption { margin: 8px 2px 0; font-size: .8rem; color: hsl(var(--muted-foreground)); }

/* Segmented control (shadcn Tabs look) */
.seg { display: inline-flex; gap: 3px; background: hsl(var(--muted)); padding: 3px; border-radius: 9px; }
.seg.two { display: flex; }
.seg button {
  flex: 1 1 0; cursor: pointer; border: none; background: transparent; color: hsl(var(--muted-foreground));
  border-radius: 6px; padding: 7px 12px; font-size: .82rem; font-weight: 500; transition: color .12s, background .12s;
}
.seg button:hover { color: hsl(var(--foreground)); }
.seg button[aria-pressed='true'] { background: hsl(var(--background)); color: hsl(var(--foreground)); box-shadow: 0 1px 2px rgb(0 0 0 / 0.08); }

#time-wrap { display: flex; align-items: center; gap: 8px 10px; margin-top: 10px; flex-wrap: wrap; }
#time-wrap .control { flex: 1 1 200px; }
.tz-note { font-size: .8rem; color: hsl(var(--muted-foreground)); white-space: nowrap; }

/* Verdict */
.verdict { text-align: center; padding: 8px 8px 4px; }
.verdict .kicker { color: hsl(var(--muted-foreground)); font-size: .875rem; margin-bottom: 4px; }
.verdict .side { display: inline-flex; align-items: center; gap: 14px; font-size: clamp(2.2rem, 10vw, 3.1rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1; margin: 2px 0; }
.verdict .side .arrow { color: hsl(var(--muted-foreground)); display: inline-flex; }
.verdict .side .arrow svg { width: .8em; height: .8em; }
.verdict.flip .side { flex-direction: row-reverse; }
.verdict.either .side { font-size: clamp(1.6rem, 7vw, 2.1rem); }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; }
.stat { border: 1px solid hsl(var(--border)); border-radius: 9px; padding: 10px 12px; }
.stat .k { font-size: .72rem; color: hsl(var(--muted-foreground)); }
.stat .v { font-weight: 600; font-size: 1rem; margin-top: 2px; letter-spacing: -0.01em; }

/* Preview */
.preview-divider { height: 1px; background: hsl(var(--border)); margin: 20px -20px; }
.preview-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.preview-head h2 { font-size: .875rem; font-weight: 500; color: hsl(var(--foreground)); margin: 0; }
.view-toggle { flex: 0 0 auto; }
.view-toggle button { flex: 0 0 auto; padding: 5px 12px; }

.map-frame { position: relative; width: 100%; aspect-ratio: 5 / 6; max-height: 60vh; background: hsl(var(--muted)); border: 1px solid hsl(var(--border)); border-radius: 10px; overflow: hidden; }
.map-frame svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.map-frame svg[hidden] { display: none; }

/* Simple view: sun slides smoothly when it switches sides */
#simple-svg .sun { transition: transform .4s ease, opacity .3s ease; }
@media (prefers-reduced-motion: reduce) { #simple-svg .sun { transition: none; } }

.legend {
  position: absolute; top: 10px; right: 10px; z-index: 5;
  display: flex; flex-direction: column; gap: 5px;
  background: hsl(var(--card) / 0.9); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  border: 1px solid hsl(var(--border)); border-radius: 8px; padding: 7px 9px;
  font-size: .72rem; color: hsl(var(--muted-foreground)); box-shadow: 0 1px 2px rgb(0 0 0 / 0.06);
}
.legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.legend i { width: 9px; height: 9px; border-radius: 50%; flex: none; }

/* States */
.hint { color: hsl(var(--muted-foreground)); font-size: .9rem; }
.error { color: hsl(0 72% 51%); font-size: .9rem; }
[hidden] { display: none !important; }

.spinner { width: 16px; height: 16px; border: 2px solid hsl(var(--border)); border-top-color: hsl(var(--muted-foreground)); border-radius: 50%; display: inline-block; vertical-align: -3px; margin-right: 8px; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

footer.foot { text-align: center; color: hsl(var(--muted-foreground)); font-size: .78rem; margin-top: 22px; line-height: 1.7; }
footer.foot a { color: hsl(var(--foreground)); text-decoration: none; }
footer.foot a:hover { text-decoration: underline; }