/* horizon sun map. — styled with the Emile Dupont personal brand design system
   (dark minimal base, warm pastel accents, hairline structure, mono wayfinding). */
:root {
  /* brand tokens — dark is the default theme */
  --bg: #0b0a09;            /* ink-950 */
  --panel: #121110;         /* ink-900 / surface */
  --surface-2: #181614;     /* ink-850 */
  --surface-hover: #201d1a; /* ink-800 */
  --line: #2b2724;          /* ink-700 / border */
  --line-strong: #3a352f;   /* ink-600 */
  --ink: #f7f2ea;           /* ink-50 / text-primary */
  --body: #cfc7bc;          /* ink-200 / text-body */
  --muted: #8a8278;         /* ink-400 — muted on small text for 4.5:1 */
  --accent: #ff8a65;        /* coral-500 */
  --accent-hover: #ffa585;  /* coral-400 */
  --accent-soft: rgba(255, 138, 101, 0.12);
  --accent-contrast: #2a130a;
  --tech: #a77df0;          /* violet-500 */
  --sun: #f4b85e;           /* apricot-500 */
  --sun-soft: rgba(244, 184, 94, 0.13);
  --moon: #7fb6c4;          /* mist-500 */
  --moon-soft: rgba(127, 182, 196, 0.14);
  --terrain: #a9a095;       /* ridge stroke — ink-300 */
  --terrain-fill: #2b2724;  /* ground — ink-700 */
  --sky-top: #181614;       /* flat sky — the brand uses no gradients */
  --sky-bottom: #181614;
  --focus: #ffa585;

  --font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Space Mono", ui-monospace, "Courier New", Courier, monospace;
  --radius-input: 4px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f7f2ea;
  --panel: #ffffff;
  --surface-2: #fbf7f0;
  --surface-hover: #f3ece1;
  --line: #e8e1d6;
  --line-strong: #cfc7bc;
  --ink: #0b0a09;
  --body: #4a433b;
  --muted: #6e665d;
  --accent: #c2502c;        /* coral deepened for 4.5:1 text on paper */
  --accent-hover: #f2724b;
  --accent-soft: rgba(255, 138, 101, 0.12);
  --accent-contrast: #ffffff;
  --tech: #8e5de8;
  --sun: #d98a16;
  --sun-soft: rgba(244, 184, 94, 0.18);
  --moon: #4f8fa0;
  --moon-soft: rgba(127, 182, 196, 0.2);
  --terrain: #3a352f;
  --terrain-fill: #cfc7bc;
  --sky-top: #fbf7f0;
  --sky-bottom: #fbf7f0;
  --focus: #f2724b;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--body);
  font: 15px/1.6 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; color: inherit; }
a { color: var(--ink); text-decoration: none; transition: color 0.15s var(--ease); }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.muted { color: var(--muted); }

/* mono label — uppercase, tracked */
.mono, .label, .big label, .facts li > span:first-child, .datebar .ghost, .ghost.small,
.status, .pano-title span, .time-label, .readout, .place .meta {
  font-family: var(--font-mono);
}

.app { display: flex; height: 100vh; height: 100dvh; }
.panel {
  width: 384px; flex: none; overflow-y: auto; padding: 24px 20px 20px;
  background: var(--panel); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 16px; z-index: 2;
}
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#map { flex: 1; min-height: 240px; }

/* brand header */
.brand { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.brand h1 {
  font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.1;
  letter-spacing: -0.02em; color: var(--ink); margin: 0;
}
.brand h1 .dot-end { color: var(--accent); }
.brand p { margin: 6px 0 0; color: var(--muted); font: 11px/1.4 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.theme-toggle {
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  width: 32px; height: 32px; cursor: pointer; font-size: 15px; line-height: 1;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.theme-toggle:hover { color: var(--ink); border-color: var(--muted); }

/* search */
.search { position: relative; display: flex; gap: 0; }
.search input {
  flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid var(--line);
  border-radius: var(--radius-input) 0 0 var(--radius-input); background: var(--bg); outline: none; color: var(--ink);
  transition: border-color 0.15s var(--ease);
}
.search input::placeholder { color: var(--muted); }
.search input:focus { border-color: var(--accent); }
.search button, .datebar button {
  border: 1px solid var(--line); background: var(--bg); color: var(--muted);
  width: 40px; display: grid; place-items: center; cursor: pointer;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.search button { margin-left: -1px; }
.search button:last-of-type { border-radius: 0 var(--radius-input) var(--radius-input) 0; }
.search button:hover, .datebar button:hover { color: var(--ink); border-color: var(--muted); position: relative; }
.search svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.results {
  position: absolute; top: 44px; left: 0; right: 0; list-style: none; margin: 0; padding: 0;
  background: var(--panel); border: 1px solid var(--line-strong);
  z-index: 1000; max-height: 300px; overflow: auto;
}
.results li { padding: 9px 12px; cursor: pointer; font-size: 14px; color: var(--ink); border-bottom: 1px solid var(--line); }
.results li:last-child { border-bottom: 0; }
.results li:hover, .results li:focus { background: var(--surface-hover); outline: none; }
.results li small { display: block; color: var(--muted); font-size: 12px; }

/* date */
.datebar { display: flex; gap: 0; }
.datebar > * + * { margin-left: -1px; }
.datebar input {
  flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); background: var(--bg);
  color: var(--ink); font-family: var(--font-mono); font-size: 13px;
}
.datebar input:focus { border-color: var(--accent); outline: none; position: relative; }
.datebar button { font-size: 16px; line-height: 1; }
.datebar button:first-child { border-radius: var(--radius-input) 0 0 var(--radius-input); }
.datebar .ghost {
  width: auto; padding: 0 12px; font-size: 11px; letter-spacing: 0.1em; text-transform: lowercase;
  border-radius: 0 var(--radius-input) var(--radius-input) 0;
}

/* place */
.place { font-size: 13px; color: var(--muted); }
.place b { font-family: var(--font-display); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; display: block; color: var(--ink); margin-bottom: 2px; }
.place .meta { font-size: 11px; letter-spacing: 0.05em; }

.status { display: flex; flex-direction: column; gap: 6px; font-size: 11px; letter-spacing: 0.08em; text-transform: lowercase; color: var(--muted); }
.bar { height: 1px; background: var(--line); overflow: hidden; }
.bar span { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.25s var(--ease); }

/* section label: "01 / sun" */
.section-label {
  font: 11px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: lowercase;
  color: var(--muted); margin: 0 0 12px; display: flex; align-items: center; gap: 8px;
}
.section-label .idx { color: var(--accent); }
.section-label .aside { margin-left: auto; text-transform: lowercase; letter-spacing: 0.05em; color: var(--body); }

/* cards — 1px hairline rectangles, stacked with a 1px gap */
#results-body { display: flex; flex-direction: column; gap: 16px; }
.card { border: 1px solid var(--line); padding: 20px; background: var(--panel); }
.swatch { width: 8px; height: 8px; display: inline-block; }
.swatch.sun { background: var(--sun); }
.swatch.moon { background: var(--moon); }
.big { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.big > div { background: var(--surface-2); padding: 12px; }
.big label { display: block; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.big strong {
  display: block; font-family: var(--font-display); font-weight: 600; font-size: 28px; line-height: 1.2;
  letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; margin: 4px 0 2px;
}
.sun .big strong { color: var(--sun); }
.moon .big strong { color: var(--moon); }
.big small { display: block; color: var(--muted); font: 11px/1.45 var(--font-mono); min-height: 1em; }
.facts { list-style: none; padding: 0; margin: 14px 0 0; font-size: 13px; }
.facts li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); }
.facts li > span:first-child { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.facts li > span:last-child { color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.facts .delta { color: var(--accent); }
.facts .muted { color: var(--muted); }

.settings summary { cursor: pointer; list-style: none; }
.settings summary::-webkit-details-marker { display: none; }
.settings summary .section-label { margin: 0; }
.settings summary .section-label::after { content: "+"; margin-left: auto; color: var(--muted); }
.settings[open] summary .section-label::after { content: "−"; }
.settings .row { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: 13px; color: var(--body); }
.settings input {
  width: 72px; padding: 4px 6px; border: 1px solid var(--line); border-radius: var(--radius-input);
  background: var(--bg); color: var(--ink); text-align: right; font-family: var(--font-mono); font-size: 13px;
}
.note { font-size: 12.5px; color: var(--muted); margin: 14px 0 0; line-height: 1.6; }

.foot {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  font: 11px/1.4 var(--font-mono); letter-spacing: 0.05em; color: var(--muted); text-transform: lowercase;
}
.foot a { color: var(--body); }
.foot a:hover { color: var(--accent); }

/* panorama */
.pano { background: var(--panel); border-top: 1px solid var(--line); padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 8px; }
.pano-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pano-title { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.pano-title .section-label { margin: 0; }
.pano-title span.hint { font-size: 10.5px; letter-spacing: 0.05em; color: var(--muted); text-transform: lowercase; }
.pano-tools { display: flex; gap: 0; }
.ghost.small {
  border: 1px solid var(--line); background: transparent; color: var(--muted); padding: 5px 10px;
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: lowercase; cursor: pointer; white-space: nowrap;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.ghost.small:hover { color: var(--ink); border-color: var(--muted); }
#pano { width: 100%; height: 240px; display: block; cursor: crosshair; border: 1px solid var(--line); }
.timebar { display: flex; align-items: center; gap: 12px; }
.timebar input { flex: 1; min-width: 120px; accent-color: var(--accent); }
.timebar .readout { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.time-label { font-variant-numeric: tabular-nums; font-size: 14px; color: var(--ink); min-width: 52px; }
.readout { font-size: 11px; letter-spacing: 0.03em; color: var(--muted); white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.readout .s { color: var(--sun); }
.readout .m { color: var(--moon); }

/* leaflet in brand dress */
.leaflet-container { background: var(--bg); font-family: var(--font-sans); }
.leaflet-bar, .leaflet-control-layers { border-radius: 0 !important; border: 1px solid var(--line-strong) !important; box-shadow: none !important; }
.leaflet-bar a, .leaflet-control-layers { background: var(--panel) !important; color: var(--ink) !important; border-radius: 0 !important; }
.leaflet-bar a { border-bottom-color: var(--line) !important; }
.leaflet-bar a:hover { background: var(--surface-hover) !important; }
.leaflet-control-layers-toggle { filter: grayscale(1) contrast(0.8); }
:root:not([data-theme="light"]) .leaflet-control-layers-toggle { filter: invert(1) grayscale(1); }
.leaflet-control-attribution { background: rgba(18, 17, 16, 0.8) !important; color: var(--muted) !important; font: 10px var(--font-mono); }
:root[data-theme="light"] .leaflet-control-attribution { background: rgba(255, 255, 255, 0.8) !important; }
.leaflet-control-attribution a { color: var(--body) !important; }
.leaflet-control-scale-line { background: var(--panel); color: var(--body); border-color: var(--muted); font: 10px var(--font-mono); }
.leaflet-tooltip.ray-label {
  background: var(--panel); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 0;
  padding: 2px 6px; font: 10.5px/1.4 var(--font-mono); letter-spacing: 0.03em; white-space: nowrap; box-shadow: none;
}
.leaflet-tooltip.ray-label::before { display: none; }

@media (max-width: 820px) {
  /* controls on top, then map + panorama, then results */
  .app { flex-direction: column; height: auto; min-height: 100dvh; gap: 16px; padding-bottom: 20px; background: var(--panel); }
  .panel { display: contents; }
  .panel > * { margin: 0 16px; }
  .brand { margin-top: 20px !important; }
  #results-body { order: 3; }
  .foot { order: 4; }
  .main { order: 2; height: 78dvh; flex: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .pano-title span.hint { display: none; }
  #pano { height: 190px; }
  .readout { display: none; }
}