/**
 * app.css - demo chrome only. Nothing here affects the waterlines.
 */

:root {
  --ink: #3a3128;
  --ink-soft: #6b5c48;
  --paper: #f4ecd8;
  --paper-deep: #e7dbbe;
  --rule: #c9b894;
  --accent: #6a5138;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  /* The PNG export temporarily grows the map beyond the viewport; without this
     the page gains scrollbars mid-export and the map resizes again. */
  overflow: hidden;
  font: 13px/1.45 ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #2c2a26;
}

#app { position: relative; height: 100%; }
#map { position: absolute; inset: 0; }

/* Paper grain and a vignette, laid over the whole map. Purely decorative, and
   never in the way of the pointer. */
/* The tile itself is generated in js/paper.js, so the PNG export can draw the
   very same thing into the export canvas. */
#grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: multiply;
  opacity: 0.5;
}
#vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: radial-gradient(120% 90% at 50% 45%, rgba(0,0,0,0) 55%, rgba(60,45,20,0.22) 100%);
}

/* ---------------------------------------------------------------- panel -- */

#panel {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 5;
  width: 306px;
  max-height: calc(100% - 28px);
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 3px;
  box-shadow: 0 10px 28px rgba(30, 22, 10, 0.28);
}

#panel header {
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--rule);
}

/* Only the studio has a toggle; the sibling combinator keeps the other page's
   header from carrying a gutter for a button it does not have. */
#panel-toggle ~ header { padding-right: 46px; }

/* Studio only: fold the panel away for framing a shot. The panel collapses to
   this button, which is the only way back, so it is never hidden with it. */
#panel-toggle {
  position: absolute;
  top: 9px;
  right: 9px;
  padding: 4px 9px;
  font: 600 10px/1.3 ui-sans-serif, system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  background: #fbf6e9;
  border: 1px solid var(--rule);
  border-radius: 2px;
  cursor: pointer;
}
#panel-toggle:hover { color: var(--ink); background: #fff; }

#panel.is-collapsed {
  width: auto;
  background: none;
  border: 0;
  box-shadow: none;
}
#panel.is-collapsed header,
#panel.is-collapsed #panel-body { display: none; }
#panel.is-collapsed #panel-toggle {
  position: static;
  padding: 6px 11px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 8px 22px rgba(30, 22, 10, 0.28);
}

#panel h1 {
  margin: 0;
  font: 600 15px/1.2 ui-serif, Georgia, "Times New Roman", serif;
  letter-spacing: 0.02em;
}

#panel .sub {
  margin: 4px 0 0;
  font-size: 11.5px;
  color: var(--ink-soft);
}

#panel .sub a { color: var(--accent); }

#panel-body {
  overflow-y: auto;
  padding: 4px 0 8px;
}

#region-note,
#basemap-note {
  margin: 6px 0 0;
  font-size: 11px;
  font-style: italic;
  color: var(--ink-soft);
  min-height: 1.4em;
}

.section { border-bottom: 1px solid rgba(201, 184, 148, 0.6); }
.section:last-child { border-bottom: 0; }

.section > summary {
  cursor: pointer;
  padding: 9px 14px;
  font: 600 11px/1 ui-sans-serif, system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-soft);
  -webkit-user-select: none;
  user-select: none;
}
.section > summary::marker { color: var(--rule); }
.section__body { padding: 2px 14px 12px; }

.field { margin: 0 0 11px; }
.field:last-child { margin-bottom: 0; }

.label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 12px;
}

.readout {
  font: 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ink-soft);
}

.hint {
  margin: 4px 0 0;
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--ink-soft);
}

input[type="range"] { width: 100%; accent-color: var(--accent); }
input[type="color"] { width: 100%; height: 26px; padding: 0; border: 1px solid var(--rule); background: none; }

select {
  width: 100%;
  padding: 4px 6px;
  font: inherit;
  color: var(--ink);
  background: #fbf6e9;
  border: 1px solid var(--rule);
  border-radius: 2px;
}

.inline { display: flex; align-items: center; gap: 7px; font-size: 12px; cursor: pointer; }
.inline input { accent-color: var(--accent); }

.buttons { display: flex; flex-wrap: wrap; gap: 4px; }
.buttons button {
  padding: 4px 8px;
  font: 11px/1.1 inherit;
  color: var(--ink);
  background: #fbf6e9;
  border: 1px solid var(--rule);
  border-radius: 2px;
  cursor: pointer;
}
.buttons button:hover { background: #fff; }
.buttons button.is-active { background: var(--accent); border-color: var(--accent); color: var(--paper); }

/* ------------------------------------------------------- studio extras -- */

.dropzone {
  margin: 10px 0 11px;
  padding: 12px 12px 10px;
  border: 1px dashed var(--rule);
  border-radius: 3px;
  background: #fbf6e9;
  text-align: center;
}
.dropzone strong { display: block; font-size: 12px; }
.dropzone span { display: block; margin: 3px 0 8px; font-size: 10.5px; color: var(--ink-soft); }
.dropzone .file { width: 100%; font-size: 11px; }

input.text {
  width: 100%;
  padding: 5px 7px;
  font: inherit;
  font-size: 12px;
  color: var(--ink);
  background: #fbf6e9;
  border: 1px solid var(--rule);
  border-radius: 2px;
}

button.primary {
  width: 100%;
  margin-top: 4px;
  padding: 7px 10px;
  font: 600 12px/1.2 inherit;
  color: var(--paper);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 2px;
  cursor: pointer;
}
button.primary:hover { background: #7d6142; }
button.primary:disabled { opacity: .55; cursor: progress; }

.hint.is-error { color: #9c3b2a; font-style: normal; }

/* Sits above the grain and vignette so the rose reads as drawn on the map
   rather than under the paper, but below the panel and the map controls so it
   can never swallow a click. Edge offsets are set by js/compass.js. */
#compass {
  position: absolute;
  z-index: 4;
  pointer-events: none;
}
#compass canvas { display: block; }

#drop-hint {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: none;
  place-items: center;
  background: rgba(44, 42, 38, .55);
  color: var(--paper);
  font: 600 16px/1.2 ui-serif, Georgia, serif;
  pointer-events: none;
}
#app.is-dropping #drop-hint { display: grid; }

/* ------------------------------------------------------------------ hud -- */

/* Clear of the scale bar and the attribution button, which some basemaps
   make considerably wider than others. */
#hud {
  position: absolute;
  right: 14px;
  bottom: 84px;
  z-index: 5;
  min-width: 216px;
  padding: 9px 11px;
  background: rgba(30, 26, 20, 0.86);
  color: #ece2cd;
  border-radius: 3px;
  font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
}

#hud h2 {
  margin: 0 0 5px;
  font: 600 10px/1 ui-sans-serif, system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #b6a789;
}

.hud__row { display: flex; justify-content: space-between; gap: 12px; }
.hud__key { color: #9d9078; }
.hud__value.is-ok { color: #a8d5b5; }
.hud__value.is-warn { color: #e6b877; }

/* ------------------------------------------------------------- timeline -- */

/* The year slider for the OpenHistoricalMap basemap. Floats over the map
   rather than living in the panel, because it applies to one basemap only and
   appears and disappears with it. Top-centre keeps it clear of the panel on
   the left and MapLibre's navigation control on the right. */
#timeline {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  width: 300px;
  padding: 8px 12px 6px;
  background: rgba(247, 241, 226, 0.94);
  border: 1px solid var(--rule);
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(44, 42, 38, 0.18);
}

#timeline[hidden] { display: none; }

.timeline__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.timeline__label {
  font: 600 10px/1 ui-sans-serif, system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-soft);
}

.timeline__year {
  font: 600 19px/1.1 ui-serif, Georgia, serif;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.timeline__range {
  display: block;
  width: 100%;
  margin: 4px 0 2px;
  accent-color: var(--accent);
  cursor: ew-resize;
}

.timeline__foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font: 10px/1.3 ui-sans-serif, system-ui, sans-serif;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.timeline__note {
  flex: 1;
  text-align: center;
  font-variant-numeric: normal;
  opacity: 0.85;
}

#timeline.is-disabled { opacity: 0.6; }
#timeline.is-disabled .timeline__note { color: #8a3a2a; }

/* -------------------------------------------------------------- loading -- */

#loading {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: grid;
  place-items: center;
  background: #2c2a26;
  color: #cdbfa0;
  font: 13px ui-sans-serif, system-ui, sans-serif;
}

@media (max-width: 720px) {
  #panel { width: calc(100% - 28px); max-height: 52%; }
  #hud, #compass { display: none; }
  /* The panel covers the top of the map at this width, so the slider moves to
     the bottom rather than being hidden - unlike the HUD and the compass, it
     is a control, and hiding a control is not a graceful degradation. */
  #timeline {
    top: auto;
    bottom: 44px;
    width: calc(100% - 28px);
    max-width: 340px;
  }
}