/** Editor layout. Tokens and form primitives live in theme.css. */

:root { --sidebar: 404px; }

body {
  display: grid;
  grid-template-columns: var(--sidebar) 1fr;
  overflow: hidden;
}

/* ------------------------------------------------------------------ sidebar */

#sidebar {
  background: var(--panel);
  border-right: 1px solid var(--line);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 20px;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

#sidebar::-webkit-scrollbar { width: 10px; }
#sidebar::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border: 3px solid var(--panel);
  border-radius: 6px;
}

/* Back to the proportions this had before the lockup was made a shared
   component: a 23.5px name under a 30px pin. Only the weight was ever
   wrong here, and that lives in theme.css now. */
.brand {
  --wordmark: 23.5px;
  --wordmark-mark: 1.28;
  --wordmark-gap: 0.51;
  position: sticky;
  top: 0;
  z-index: 5;
  display: block;
  padding: 20px 24px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

/* The lockup, its two-line variant and the note are all in theme.css. */

.panel {
  padding: 22px 24px;
  border-bottom: 1px solid var(--line);
}

.panel h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.panel h2 i {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 6px;
  background: var(--sunk);
  border: 1px solid var(--line);
  color: var(--muted);
  font: 600 10px/1 Inter, sans-serif;
  font-style: normal;
}

.tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--focus);
  background: var(--focus-soft);
  padding: 4px 9px;
  border-radius: 999px;
}

/* -------------------------------------------------------------- search list */

.search { display: flex; gap: 8px; }

.icon {
  width: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.icon:hover { border-color: var(--focus); background: var(--sunk); }

.results {
  list-style: none;
  margin: 8px 0 0;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--sunk);
  max-height: 196px;
  overflow-y: auto;
}

.results li {
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 12.5px;
  line-height: 1.4;
  cursor: pointer;
}
.results li:hover { background: var(--panel); }
.results li.empty { cursor: default; color: var(--faint); }

.readout {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 11.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- segmented */

.segmented {
  display: grid;
  grid-auto-flow: column;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r);
  background: var(--sunk);
  border: 1px solid var(--line);
}

.segmented button {
  padding: 8px 6px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.segmented button:hover { color: var(--ink); }
.segmented button[aria-pressed="true"] {
  background: var(--panel);
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(22, 19, 15, .10);
}
.segmented.small button { font-size: 11.5px; padding: 7px 4px; }

/* ------------------------------------------------------- popular designs */

.popular { background: linear-gradient(180deg, var(--sunk), transparent 70%); }

.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }

.card {
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--panel);
  padding: 7px 7px 8px;
  cursor: pointer;
  text-align: center;
  transition: border-color .12s, transform .12s, box-shadow .12s;
}
.card:hover { border-color: var(--focus); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.card[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }

.card .thumb {
  display: block;
  position: relative;
  aspect-ratio: 210 / 297;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 6px;
}
.card .thumb .m { position: absolute; }
.card .thumb .t { position: absolute; height: 4%; border-radius: 1px; opacity: .85; }

.card b { display: block; font-size: 11px; font-weight: 600; letter-spacing: -0.01em; }

/* ---------------------------------------------------------- style swatches */

.styles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.style {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--panel);
  padding: 5px 5px 6px;
  cursor: pointer;
  text-align: center;
  transition: border-color .12s, box-shadow .12s;
}
.style:hover:not(:disabled) { border-color: var(--focus); }
.style[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.style:disabled { opacity: .38; cursor: not-allowed; }

.style .tile {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 5px;
  object-fit: cover;
  background: var(--sunk);
  margin-bottom: 5px;
}

.style span { display: block; font-size: 10.5px; color: var(--muted); line-height: 1.25; }
.style[aria-pressed="true"] span { color: var(--ink); font-weight: 600; }
.style em { display: block; font-size: 9px; font-style: normal; color: var(--faint); }

.components { margin-top: 16px; }

.pills { display: flex; flex-wrap: wrap; gap: 6px; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px 6px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
  transition: all .12s;
}
.pill .dot {
  width: 13px; height: 13px; border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  display: grid; place-items: center;
}
.pill .dot::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: transparent; }
.pill[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); background: var(--sunk); }
.pill[aria-pressed="true"] .dot { border-color: var(--ink); background: var(--ink); }
.pill[aria-pressed="true"] .dot::after { background: var(--panel); }

/* -------------------------------------------------------------- text blocks */

.tblock {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--sunk);
  padding: 11px 12px 12px;
  margin-bottom: 9px;
}
.tblock:last-child { margin-bottom: 0; }
.tblock.off { opacity: .55; }

.tblock header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.tblock header label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.drag {
  width: 24px;
  height: 24px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  color: var(--faint);
  cursor: grab;
  touch-action: none;          /* a drag on the handle must not scroll the page */
  transition: color .12s, background .12s, border-color .12s;
}
.drag svg { width: 15px; height: 15px; fill: currentColor; }
.drag:hover { color: var(--ink); background: var(--panel); border-color: var(--line-strong); }
.drag:active { cursor: grabbing; }

.tblock.dragging {
  position: relative;
  z-index: 10;
  border-color: var(--focus);
  background: var(--panel);
  box-shadow: 0 14px 30px -10px rgba(22, 19, 15, .40);
}
.tblock.dragging .drag { cursor: grabbing; color: var(--ink); }

/* While sorting, nothing in the list should select or take a click. */
.sorting { cursor: grabbing; }
.sorting .tblock { user-select: none; }
.sorting .tblock:not(.dragging) { pointer-events: none; }

.colourcell { position: relative; display: block; }

.clearcolour {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 15px;
  height: 15px;
  display: none;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--panel);
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.colourcell.overridden .clearcolour { display: grid; }
.clearcolour:hover { color: var(--ink); border-color: var(--focus); }

.tblock .split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

/* The date picker needs a fixed minimum width; the format preview takes the
   rest, because "25 September 2022" is the longest label either ever shows. */
.tblock .split.date { grid-template-columns: 122px minmax(0, 1fr); }

.tblock .row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px 36px;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

.tblock .row select,
.tblock .split select,
.tblock .split input,
.tblock input[type="text"] { height: 34px; font-size: 12px; background: var(--panel); }
.tblock .row input[type="color"] { width: 36px; height: 34px; }
.tblock .row input[type="range"] { height: 34px; }

.sidebar-foot {
  padding: 18px 24px 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.attrib { font-size: 10px; color: var(--faint); line-height: 1.4; }

/* -------------------------------------------------------------------- stage */

#stage {
  display: grid;
  grid-template-rows: 1fr auto;
  min-width: 0;
  min-height: 0;
  background: var(--stage);
}

#stageInner {
  display: grid;
  place-items: center;
  padding: 34px;
  min-height: 0;
  overflow: hidden;
}

#poster {
  position: relative;
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(22, 19, 15, .06),
    0 2px 4px rgba(22, 19, 15, .06),
    0 24px 60px -18px rgba(22, 19, 15, .35);
}

#mapFrame {
  position: absolute;
  overflow: hidden;
  /* Leaflet's panes carry z-index up to 700 and the container makes no stacking
     context of its own, so without this they would paint over the lettering. */
  z-index: 0;
  isolation: isolate;
}

#map { width: 100%; height: 100%; }

.ptext {
  position: absolute;
  z-index: 1;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

#posterAttrib {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  opacity: .55;
  white-space: nowrap;
}

/* Leaflet chrome we do not want on a poster */
.leaflet-control-attribution, .leaflet-control-zoom { display: none !important; }
.leaflet-container { background: transparent; font-family: inherit; outline: none; }
.poster-pin { display: block; }
.poster-pin svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.22)); }

#stageBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 28px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}

.bar-meta { display: flex; flex-direction: column; gap: 1px; }
.bar-meta strong { font-size: 13px; font-weight: 600; }

/* -------------------------------------------------------------------- modal */

.modal {
  position: fixed;
  inset: 0;
  background: rgba(14, 12, 10, .5);
  backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
  padding: 24px;
  z-index: 1000;
}
.modal[hidden] { display: none; }

.modal-card {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: var(--panel);
  border-radius: 18px;
  padding: 30px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .38);
}

.modal-card h2 { margin: 0 0 4px; font-size: 19px; letter-spacing: -0.02em; }
.lede { margin: 0 0 22px; font-size: 12.5px; color: var(--muted); }

.close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 28px; height: 28px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.close:hover { background: var(--sunk); }

.pricebar {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.pricebar strong { display: block; font-size: 22px; letter-spacing: -0.02em; }

@media (max-width: 1000px) {
  body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; overflow: auto; }
  #sidebar { order: 2; border-right: 0; border-top: 1px solid var(--line); overflow: visible; }
  #stage { order: 1; height: 72vh; }
  .brand { position: static; }
}

/* ------------------------------------------------------- consent notice */

/* Bottom-left of the stage rather than a full-width bar across the page: the
   choice is real and worth reading, but it is not more important than the
   thing the visitor came to do. */
.consent {
  position: fixed;
  left: calc(var(--sidebar) + 20px);
  bottom: 20px;
  z-index: 40;
  width: min(360px, calc(100vw - var(--sidebar) - 40px));
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  box-shadow: var(--shadow-card);
}

.consent-title {
  margin: 0 0 8px;
  font-family: "EB Garamond", Georgia, serif;
  font-size: 21px;
  font-weight: 400;
  letter-spacing: -0.004em;
}
.consent-body { margin: 0 0 16px; font-size: 12.5px; line-height: 1.6; color: var(--ink-soft); }

.consent-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.consent-actions .primary,
.consent-actions .ghost { padding: 10px 18px; font-size: 12.5px; }

.consent-more {
  display: inline-block;
  margin-top: 14px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--focus);
}

@media (max-width: 1000px) {
  .consent { left: 16px; right: 16px; bottom: 16px; width: auto; }
}

/* The map area when loading it was declined. #mapFrame isolates the stacking
   context, but Leaflet still stacks its own panes up to 700 inside it — the
   marker pane at 600 was drawing the pin over this text — so this has to sit
   above all of them. */
.mapoff {
  position: absolute;
  inset: 0;
  z-index: 750;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
  background: var(--sunk);
}
.mapoff p { margin: 0; max-width: 30ch; font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.mapoff .ghost { padding: 9px 18px; font-size: 12.5px; }

/* The consent line at checkout. .checkline centres its label, which is right
   for a one-line toggle and wrong here: this text wraps to three lines and
   carries legal weight, so the box aligns to the first line and the words are
   read at --ink rather than --muted. */
.waiver label { align-items: flex-start; gap: 10px; }
.waiver input { margin-top: 2px; flex: none; }
.waiver span { color: var(--ink); font-size: 12px; line-height: 1.55; }
.waiver a { color: var(--focus); }

/* The band where a full-bleed map turns into paper. Positioned and coloured
   from the layout, so the only thing decided here is that it sits above the
   map and below the words, and never eats a click. */
#mapFade {
  position: absolute;
  left: 0;
  right: 0;
  display: block;
  pointer-events: none;
}

#mapFade[hidden] { display: none; }

/* ---------------------------------------------------------------- ideas */
/*
   The way through to the landing pages. It has two jobs and they pull in
   opposite directions: a visitor who cannot think of a place needs the
   suggestions, and everyone else needs them out of the way. Hence a pill in
   the section header that opens a panel, rather than a row of links nobody
   asked for.
*/

.ideas-btn {
  margin-left: auto;                 /* to the far end of the header row */
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font: 600 10px/1 Inter, sans-serif;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.ideas-btn svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}

.ideas-btn:hover { color: var(--ink); border-color: var(--line-strong); }

.ideas-btn[aria-expanded="true"] {
  color: var(--focus);
  background: var(--focus-soft);
  border-color: transparent;
}

.ideas-btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.ideas-panel {
  margin: -4px 0 16px;
  animation: ideas-in 0.18s ease both;
}

@keyframes ideas-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ideas-panel { animation: none; }
}

.ideas-head {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}

.ideas-lede {
  margin: 2px 0 8px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted);
}

.ideas-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ideas-panel li + li { border-top: 1px solid var(--line); }

.ideas-panel a {
  position: relative;
  display: block;
  padding: 8px 8px 8px 13px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s ease;
}

/* A rule that grows in from the left rather than a colour that flashes on:
   six rows of hover-highlight in a narrow column is a lot of flashing. */
.ideas-panel a::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 50%;
  width: 2px;
  height: 0;
  transform: translateY(-50%);
  border-radius: 2px;
  background: var(--focus);
  transition: height 0.18s ease;
}

.ideas-panel a:hover { background: var(--sunk); }
.ideas-panel a:hover::before,
.ideas-panel a:focus-visible::before { height: 62%; }

.ideas-panel a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

/* The serif is the poster's own face, which is what stops these reading as
   six more buttons in a panel already full of them. */
.ideas-panel strong {
  display: block;
  font: 500 17px/1.25 "EB Garamond", Georgia, serif;
  color: var(--ink);
}

.ideas-panel span {
  display: block;
  margin-top: 1px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--muted);
}