/* A customer's proof, on a phone held in one hand. Topo's own paper palette
 * (topo/topo.css), because it is the same shop talking. Shared by the proof
 * service's page and the local viewer `carto proof` writes.
 *
 * The sheet fills the screen and the bars float over it in Topo's frosted
 * glass, so as much of the map shows as can. proof-viewer.js measures the
 * bars (`.top` and `footer`) to fit the whole sheet between them. */

:root {
  /* A light page only: a browser that darkens pages by itself would darken
     the wall and the bars but never the map, which is a picture. */
  color-scheme: only light;
  --paper: #f4f1ea;
  --paper-sunk: #eae5da;
  --ink: #1d2328;
  --ink-soft: #5d6970;
  --line: #d7d0c4;
  --accent: #2f5d7c;
  --good: #3c6e47;
  --bad: #9b3b32;
  /* Topo's glass (its print pill's paper and blur), a little clearer: the
     bars sit over the map here, and should let it show through. */
  --glass: rgba(244, 241, 234, 0.74);
}

html, body {
  margin: 0;
  height: 100%;
  background: var(--paper-sunk);
  color: var(--ink);
  font: 15px/1.4 ui-sans-serif, "Source Sans 3", system-ui, -apple-system, sans-serif;
}

#sheet { position: fixed; inset: 0; background: var(--paper-sunk); }
/* See proof-viewer.js: overlap tiles by a pixel only between zoom steps.
 * Leaflet's own stylesheet draws tiles with `mix-blend-mode: plus-lighter`,
 * which adds overlapping pixels together, so an overlap under it is a bright
 * seam rather than a hidden one; it is put back to ordinary drawing here. */
#sheet.fractional img.leaflet-tile {
  width: var(--tile-over) !important;
  height: var(--tile-over) !important;
  mix-blend-mode: normal;
}

/* The shop's close-up, hung on the wall (proof-viewer.js, `P.wall`): a soft
 * shadow falling a little downwards, as from a light above. The edge tiles'
 * filler past the sheet is cut off by the viewer, so nothing else is needed
 * to keep the wall plain. */
#sheet img.sheet-wall {
  box-shadow: 0 1px 2px rgba(45, 35, 20, 0.10),
              0 6px 14px rgba(45, 35, 20, 0.12),
              0 18px 40px rgba(45, 35, 20, 0.16);
}

.glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Above Leaflet's panes and controls. The gap between the bar and the chat
   button is map, so only the bars themselves take a touch. */
.top, footer { position: fixed; left: 0; right: 0; z-index: 1000; }
.top { top: 0; pointer-events: none; }
.top > * { pointer-events: auto; }

header {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: calc(10px + env(safe-area-inset-top)) 12px 10px;
  border-bottom: 1px solid var(--line);
}
header .logo { flex: none; display: block; height: 36px; width: auto; }
.titles { flex: 1; min-width: 0; }
h1 {
  margin: 0; font-size: 16px; font-weight: 600; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.facts { color: var(--ink-soft); font-size: 12px; line-height: 1.3; }
/* Sat on the bar's foot, beside the words. */
header #whole { flex: none; align-self: flex-end; font-size: 13px; padding: 5px 12px; }
header #whole[hidden] { display: none; }

footer {
  bottom: 0;
  display: grid;
  gap: 8px;
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-soft);
}

.row { display: flex; gap: 12px; align-items: center; justify-content: space-between; }

button {
  font: inherit;
  color: var(--accent);
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  white-space: nowrap;
}

button.primary {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
  padding: 11px 18px;
  font-size: 15px;
}

button.primary.wide { width: 100%; }

/* Adjust and Accept side by side, Accept the stronger: it is the one that
   ends the conversation, and Adjust the one that continues it. */
.answers { display: flex; gap: 10px; }
.answers > [hidden] { display: none; }
.answers:not(:has(> :not([hidden]))) { display: none; }
.answers .wide { flex: 1; }
a.button {
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 15px; padding: 11px 18px;
  color: var(--accent); background: none; text-decoration: none;
  border: 1px solid var(--accent); border-radius: 999px;
}
button:disabled { opacity: 0.5; }

/* The way into Crisp's chat, in place of its floating bubble, which on a
   phone sat over Accept: a glass button across the top of the map. */
button.chat {
  display: block;
  width: calc(100% - 24px);
  margin: 8px 12px 0;
  padding: 9px 14px;
  border-color: var(--line);
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

#detail.at-print { color: var(--accent); font-weight: 600; }
.said { color: var(--ink); }
.said:empty { display: none; }
.said.good { color: var(--good); font-weight: 600; }
.said.bad { color: var(--bad); }

dialog {
  border: none;
  border-radius: 14px;
  padding: 20px;
  max-width: 320px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}
dialog::backdrop { background: rgba(29, 35, 40, 0.45); }
dialog h2 { margin: 0 0 8px; font-size: 17px; }
dialog p { margin: 0 0 12px; color: var(--ink-soft); }
dialog .row { justify-content: flex-end; margin-top: 16px; }

.empty {
  display: grid; place-items: center; padding: 32px; text-align: center;
  color: var(--ink-soft);
}