/* Our Family Map: a sticker scrapbook floating on the ocean. */

@font-face {
  font-family: "Bagel Fat One";
  src: url("vendor/fonts/bagel-fat-one-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("vendor/fonts/nunito-latin.woff2") format("woff2");
  font-weight: 200 1000;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito";
  src: url("vendor/fonts/nunito-latin-ext.woff2") format("woff2");
  font-weight: 200 1000;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ocean: #2b88c9;
  --ocean-deep: #1d6ba8;
  --land: #d5dde5;
  --paper: #ffffff;
  --mist: #eef3f7;
  --ink: #17304f;
  --ink-soft: #46607f;
  --sun: #ffc93c;
  --sun-deep: #e8a90f;
  --grape: #7c5ce0;
  --grape-deep: #5b3fbd;
  --tomato: #f0503c;
  --tomato-deep: #c93522;
  --meadow: #cfe8b4;
  --good: #3fae6a;
  --display: "Bagel Fat One", "Arial Rounded MT Bold", system-ui, sans-serif;
  --body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --lift: 0 .3rem 0 rgba(10, 35, 65, .28);
  --radius-l: 1.6rem;
  --radius-m: 1rem;
}

* { box-sizing: border-box; }

html {
  font-size: clamp(15px, .55vw + 11px, 22px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% 0, rgba(255, 255, 255, .16) 0 2px, transparent 3px) 0 0 / 46px 30px,
    linear-gradient(180deg, var(--ocean) 0%, var(--ocean-deep) 100%) fixed;
  background-color: var(--ocean);
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }
button, label[class*="btn"], select { cursor: pointer; }
:focus-visible { outline: 4px solid var(--sun); outline-offset: 3px; }
.panel :focus-visible, .modal :focus-visible, .how :focus-visible { outline-color: var(--ink); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 50;
  padding: .5rem 1rem;
  background: var(--paper);
  border-radius: var(--radius-m);
  font-weight: 800;
}
.skip:focus { top: 1rem; }

main, .topbar, .footer {
  width: min(100% - 2rem, 92rem);
  margin-inline: auto;
}

/* ---------------------------------------------------------------- top bar */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0 .4rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  font-family: var(--display);
  font-size: 1.35rem;
  color: var(--paper);
  text-shadow: 0 2px 0 rgba(10, 35, 65, .25);
}

.brand-pin { width: 1.3rem; flex: none; }
.brand-pin path { fill: var(--tomato); stroke: var(--paper); stroke-width: 4; }
.brand-pin circle { fill: var(--paper); }

.saved-where {
  position: relative;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem .35rem .3rem .85rem;
  background: var(--paper);
  border-radius: 999px;
  box-shadow: var(--lift);
  font-weight: 800;
  font-size: .9rem;
}

.saved-dot {
  width: .65rem; height: .65rem;
  flex: none;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 .2rem rgba(63, 174, 106, .22);
  transition: background .2s;
}
.saved-dot.saving { background: var(--sun-deep); box-shadow: 0 0 0 .2rem rgba(232, 169, 15, .25); }
.saved-dot.error { background: var(--tomato); box-shadow: 0 0 0 .2rem rgba(240, 80, 60, .25); }

.info-btn {
  display: grid;
  place-items: center;
  width: 1.7rem; height: 1.7rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-family: Georgia, serif;
  font-weight: 700;
  font-style: italic;
  font-size: .95rem;
  line-height: 1;
}
.info-btn:hover { background: var(--ocean-deep); }

.saved-pop {
  position: absolute;
  z-index: 30;
  right: 0;
  top: calc(100% + .7rem);
  width: min(24rem, calc(100vw - 2rem));
  padding: 1rem 1.15rem;
  background: var(--paper);
  border-radius: var(--radius-m);
  box-shadow: 0 .8rem 2rem rgba(10, 35, 65, .3);
  font-weight: 600;
  font-size: .95rem;
}
.saved-pop::before {
  content: "";
  position: absolute;
  right: .8rem; top: -.45rem;
  width: .9rem; height: .9rem;
  background: var(--paper);
  transform: rotate(45deg);
}
.saved-pop p { margin: 0 0 .55rem; }
.saved-pop p:last-child { margin: 0; }

/* ---------------------------------------------------------------- the sticker title */

.hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem 2rem;
  padding: 1.2rem 0 1rem;
}

.sticker {
  padding: .7rem 1.6rem .85rem;
  background: var(--sun);
  border: .32rem solid var(--paper);
  border-radius: 1.4rem;
  box-shadow: 0 .4rem 0 rgba(10, 35, 65, .3);
  transform: rotate(-2deg);
  max-width: 100%;
}

.sticker h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.2rem, 5.5vw, 3.6rem);
  line-height: 1;
  letter-spacing: .005em;
}

.family-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem;
  margin: .35rem 0 0;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 900;
  color: var(--ink-soft);
}
.family-line label { cursor: text; }

/* The input grows with the name: both sit in the same grid cell. */
.name-field {
  display: inline-grid;
  min-width: 3ch;
  max-width: 100%;
}
.name-field > * { grid-area: 1 / 1; }
.name-sizer {
  visibility: hidden;
  white-space: pre;
  padding: 0 .35rem;
  font-weight: 900;
}
#familyName {
  width: 100%;
  min-width: 0;
  padding: 0 .35rem;
  border: 0;
  border-bottom: .2rem dashed rgba(23, 48, 79, .45);
  border-radius: .3rem .3rem 0 0;
  background: rgba(255, 255, 255, .45);
  color: var(--ink);
  font-weight: 900;
}
#familyName::placeholder { color: rgba(23, 48, 79, .45); }
#familyName:hover { background: rgba(255, 255, 255, .7); }
#familyName:focus { outline: none; background: var(--paper); border-bottom-style: solid; border-bottom-color: var(--ink); }

.tally {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tally li {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .3rem .9rem .3rem .45rem;
  background: var(--paper);
  border-radius: 999px;
  box-shadow: var(--lift);
  font-weight: 700;
}
.tally b { font-weight: 900; font-size: 1.15em; }
.tally .tally-empty { padding-left: .9rem; color: var(--ink-soft); }

.swatch {
  display: inline-block;
  width: 1.15rem; height: 1.15rem;
  flex: none;
  border-radius: 50%;
  border: .16rem solid var(--paper);
  box-shadow: 0 0 0 1px rgba(23, 48, 79, .25);
}
.swatch.visited { background: var(--sun); }
.swatch.lived { background: var(--grape); }
.swatch.born { background: var(--tomato); }

/* ---------------------------------------------------------------- backup reminder */

.nudge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1rem;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 1rem;
  padding: .55rem .6rem .55rem 1.1rem;
  background: var(--paper);
  border-radius: var(--radius-m);
  border-left: .45rem solid var(--grape);
  box-shadow: var(--lift);
  font-weight: 800;
}
.nudge[hidden] { display: none; }

.chip-btn {
  padding: .4rem 1rem .45rem;
  border: .18rem solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  font-weight: 800;
  line-height: 1.2;
}
.chip-btn:hover { background: var(--mist); }
.chip-btn.primary { background: var(--ink); color: var(--paper); }
.chip-btn.primary:hover { background: #24477a; }

/* ---------------------------------------------------------------- map + panel */

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.4rem;
  align-items: start;
}

.panel-open .workspace { grid-template-columns: minmax(0, 1fr) minmax(21rem, 27rem); }

.map-card { min-width: 0; }

.map-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem 1rem;
}

.map-hint {
  margin: 0;
  padding: .3rem 1rem .35rem;
  background: rgba(10, 35, 65, .25);
  border-radius: 999px;
  color: var(--paper);
  font-weight: 800;
  font-size: 1.05rem;
}

.picker select {
  appearance: none;
  min-height: 2.6rem;
  padding: .35rem 2.4rem .35rem 1rem;
  border: 0;
  border-radius: 999px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2317304f' d='m6 9 6 6 6-6z'/%3E%3C/svg%3E") right .7rem center / 1.2rem no-repeat,
    var(--paper);
  box-shadow: var(--lift);
  font-weight: 700;
}

.map-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1.6;
  max-height: 72vh;
  margin-top: .4rem;
}

#map { display: block; width: 100%; height: 100%; overflow: visible; }

.land-shadow { fill: rgba(10, 40, 75, .32); pointer-events: none; }

.state {
  fill: var(--land);
  stroke: var(--paper);
  stroke-width: 1.4px;
  stroke-linejoin: round;
  cursor: pointer;
  transition: fill .18s ease;
}
.state:hover { fill: #e9eef3; }
.state:focus { outline: none; }
.state.visited { fill: var(--sun); }
.state.visited:hover { fill: #ffd965; }
.state.lived { fill: var(--grape); }
.state.lived:hover { fill: #9479ea; }
.state.born { fill: var(--tomato); }
.state.born:hover { fill: #f4725f; }

.nation {
  fill: none;
  stroke: var(--paper);
  stroke-width: 4px;
  stroke-linejoin: round;
  pointer-events: none;
}

.dc line { stroke: var(--paper); stroke-width: 2px; pointer-events: none; }
.dc circle.state { stroke-width: 2.5px; }
.dc text {
  fill: var(--paper);
  font-weight: 900;
  font-size: 13px;
  pointer-events: none;
  paint-order: stroke;
  stroke: rgba(10, 35, 65, .35);
  stroke-width: 3px;
}

.outline-hover, .outline-selected {
  fill: none;
  stroke: var(--ink);
  stroke-linejoin: round;
  pointer-events: none;
}
.outline-hover { stroke-width: 3px; stroke-dasharray: 6 4; }
.outline-selected { stroke-width: 4.5px; }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.2rem;
  margin: .6rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--paper);
  font-weight: 800;
}
.legend li { display: flex; align-items: center; gap: .4rem; }

/* The state panel */
.panel {
  position: sticky;
  top: 1rem;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  background: var(--paper);
  border-radius: var(--radius-l);
  box-shadow: 0 .5rem 0 rgba(10, 35, 65, .3);
  overflow: hidden;
}
.panel[hidden] { display: none; }
.panel.pop { animation: pop-in .35s cubic-bezier(.3, 1.3, .5, 1); }
@keyframes pop-in {
  from { transform: translateY(1rem) scale(.97); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.panel-head {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem 1rem .8rem 1.1rem;
  background: var(--meadow);
}
.panel-shape { width: 3.2rem; height: 3.2rem; flex: none; overflow: visible; }
.panel-shape path, .panel-shape circle { stroke: var(--paper); stroke-width: 3px; stroke-linejoin: round; }
.panel-head h2 {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.05;
}
.panel-head h2:focus { outline: none; }

.close-btn {
  flex: none;
  padding: .45rem 1.2rem .5rem;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 900;
}
.close-btn:hover { background: #24477a; }

.panel-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem 1.1rem 1.4rem;
}

.marks { margin: 0 0 1.2rem; padding: 0; border: 0; min-width: 0; }
.marks legend { padding: 0; margin-bottom: .45rem; font-weight: 900; }
.mark-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; }
.mark { position: relative; }
.mark input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.mark span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  padding: .55rem .3rem .5rem;
  border: .2rem solid var(--land);
  border-radius: var(--radius-m);
  background: var(--paper);
  font-weight: 900;
  font-size: .92rem;
  line-height: 1.15;
  text-align: center;
  transition: transform .12s, background .12s, border-color .12s;
}
.mark svg { width: 1.6rem; height: 1.6rem; }
.mark.visited svg { fill: var(--sun-deep); }
.mark.lived svg { fill: var(--grape); }
.mark.born svg { fill: var(--tomato); }
.mark:hover span { border-color: #b7c4d1; }
.mark input:focus-visible + span { outline: 4px solid var(--ink); outline-offset: 2px; }
.mark input:checked + span { transform: translateY(-2px); box-shadow: 0 .25rem 0 rgba(10, 35, 65, .25); }
.mark.visited input:checked + span { background: var(--sun); border-color: var(--sun-deep); }
.mark.visited input:checked + span svg { fill: var(--ink); }
.mark.lived input:checked + span { background: var(--grape); border-color: var(--grape-deep); color: var(--paper); }
.mark.born input:checked + span { background: var(--tomato); border-color: var(--tomato-deep); color: var(--paper); }
.mark.lived input:checked + span svg, .mark.born input:checked + span svg { fill: var(--paper); }

.mark-note:empty { display: none; }
.mark-note { margin: .5rem 0 0; color: var(--tomato-deep); font-weight: 800; font-size: .92rem; }

.link-btn {
  padding: .15rem 0;
  border: 0;
  background: none;
  color: var(--ocean-deep);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: .18em;
}
.link-btn:hover { color: var(--ink); }
.link-btn[hidden] { display: none; }
.marks .link-btn { margin-top: .4rem; }

.fact-box {
  margin-bottom: 1.3rem;
  padding: .7rem .8rem .8rem;
  background: var(--sun);
  border-radius: var(--radius-m);
}
.fact-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .3rem; }
.fact-head label { font-weight: 900; }
.fact-head .link-btn { color: var(--ink); font-size: .9rem; }
#factText {
  display: block;
  width: 100%;
  min-height: 6.2rem;
  padding: .55rem .7rem;
  border: .16rem solid transparent;
  border-radius: .7rem;
  background: rgba(255, 255, 255, .7);
  font-weight: 700;
  line-height: 1.4;
  resize: vertical;
}
#factText:hover { background: rgba(255, 255, 255, .85); }
#factText:focus { outline: none; background: var(--paper); border-color: var(--ink); }

.photos-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .45rem; }
.photos-head h3 { margin: 0; font-size: 1rem; font-weight: 900; }
.photo-count { color: var(--ink-soft); font-weight: 700; font-size: .9rem; }

/* Photo viewer: polaroid-ish white mat */
.viewer {
  margin-bottom: .8rem;
  padding: .55rem;
  border-radius: .5rem;
  background: var(--paper);
  box-shadow: 0 .3rem 1rem rgba(10, 35, 65, .18), 0 0 0 1px rgba(10, 35, 65, .06);
}
.viewer figure { margin: 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.viewer img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; border-radius: .2rem; }
.viewer figcaption { padding: .3rem .1rem 0; font-weight: 700; font-size: .88rem; line-height: 1.3; text-align: center; }

.viewer.empty {
  display: grid;
  justify-items: center;
  gap: .2rem;
  padding: 1.3rem 1rem 1rem;
  background: var(--mist);
  box-shadow: none;
  color: var(--ink-soft);
}
.viewer.empty svg { width: 4.5rem; }
.viewer.empty svg rect, .viewer.empty svg circle { fill: #c3cfdb; }
.viewer.empty svg .lens { fill: var(--mist); }
.viewer.empty p { margin: 0; font-weight: 800; }

.viewer.few { display: grid; gap: .5rem; max-height: 62vh; }
.viewer.few img { flex: 1; }
.viewer.one { grid-template: 1fr / 1fr; }
.viewer.side { grid-template: 1fr / 1fr 1fr; }
.viewer.stacked { grid-template: 1fr 1fr / 1fr; }
.viewer.three, .viewer.four { grid-template: 1fr 1fr / 1fr 1fr; }
.viewer.three figure:nth-child(3) { grid-column: 1 / -1; }

.viewer.gallery .stage { position: relative; aspect-ratio: 4 / 3; display: flex; }
.viewer.gallery figure { flex: 1; }
.g-arrow {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 2.6rem; height: 2.6rem;
  margin-top: -1.3rem;
  padding: 0;
  border: .16rem solid var(--paper);
  border-radius: 50%;
  background: var(--ink);
  box-shadow: var(--lift);
}
.g-arrow svg { width: 1.4rem; fill: var(--paper); }
.g-arrow.prev { left: .4rem; }
.g-arrow.next { right: .4rem; }
.g-arrow.next svg { transform: scaleX(-1); }
.g-count { margin: .35rem 0 0; text-align: center; font-weight: 800; font-size: .9rem; color: var(--ink-soft); }

.add-photos input, #openFileLabel input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.add-photos.disabled { opacity: .6; pointer-events: none; }
.panel .add-photos { width: 100%; justify-content: center; }

.busy { margin: .6rem 0 0; font-weight: 800; color: var(--ocean-deep); }
.busy[hidden] { display: none; }

.photo-list { display: grid; gap: .5rem; margin: .9rem 0 0; padding: 0; list-style: none; }
.photo-list:empty { display: none; }
.photo-list li {
  display: grid;
  grid-template-columns: 3.6rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .55rem;
  padding: .35rem;
  border-radius: .8rem;
  background: var(--mist);
}
.photo-list li.showing { box-shadow: inset 0 0 0 .18rem var(--ocean); }
.thumb { padding: 0; border: 0; border-radius: .45rem; overflow: hidden; background: var(--land); aspect-ratio: 1; }
.thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.caption {
  width: 100%;
  min-width: 0;
  padding: .4rem .55rem;
  border: .14rem solid #c9d4df;
  border-radius: .55rem;
  background: var(--paper);
  font-size: .92rem;
  font-weight: 600;
}
.caption:focus { outline: none; border-color: var(--ink); }
.photo-tools { display: flex; gap: .2rem; }
.icon-btn {
  display: grid;
  place-items: center;
  width: 2.2rem; height: 2.2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--paper);
}
.icon-btn svg { width: 1.15rem; fill: var(--ink); }
.icon-btn:hover:not(:disabled) { background: var(--land); }
.icon-btn:disabled { opacity: .3; cursor: default; }
.icon-btn.remove svg { fill: var(--tomato-deep); }

/* ---------------------------------------------------------------- big buttons */

.big-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 3.4rem;
  padding: .7rem 1.1rem;
  border: 0;
  border-radius: var(--radius-m);
  box-shadow: 0 .3rem 0 var(--btn-edge, rgba(10, 35, 65, .35));
  font-weight: 900;
  text-align: left;
  line-height: 1.2;
  transition: transform .08s, box-shadow .08s, filter .15s;
}
.big-btn:hover { filter: brightness(1.05); }
.big-btn:active { transform: translateY(.2rem); box-shadow: 0 .1rem 0 var(--btn-edge, rgba(10, 35, 65, .35)); }
.big-btn svg { width: 1.8rem; height: 1.8rem; flex: none; fill: currentColor; }
.big-btn strong { display: block; font-size: 1.08rem; }
.big-btn small { display: block; margin-top: .1rem; font-weight: 700; font-size: .85rem; opacity: .85; }
.big-btn.sun { background: var(--sun); color: var(--ink); --btn-edge: var(--sun-deep); }
.big-btn.ink { background: var(--ink); color: var(--paper); --btn-edge: #0a1b30; }
.big-btn.tomato { background: var(--tomato); color: var(--paper); --btn-edge: var(--tomato-deep); }
.big-btn.grape { background: var(--grape); color: var(--paper); --btn-edge: var(--grape-deep); }
.big-btn.paper { background: var(--paper); color: var(--ink); --btn-edge: #b9c6d3; }
.big-btn.wide { width: 100%; justify-content: center; font-size: 1.1rem; }
.big-btn.working { pointer-events: none; opacity: .75; }
.big-btn.working::after {
  content: "";
  position: absolute;
  right: 1rem; top: 50%;
  width: 1.1rem; height: 1.1rem;
  margin-top: -.55rem;
  border: .2rem solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- exports + how it works */

.exports, .how {
  margin-top: 2.2rem;
  padding: 1.4rem 1.5rem 1.6rem;
  border-radius: var(--radius-l);
}

.exports { background: rgba(10, 35, 65, .22); }

.exports h2, .how h2 {
  margin: 0 0 1rem;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.9rem;
  line-height: 1.1;
}
.exports h2 { color: var(--paper); }

.export-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: .9rem;
}

.export-status { min-height: 1.5em; margin: .9rem 0 0; color: var(--paper); font-weight: 800; }

.how { background: var(--paper); box-shadow: 0 .4rem 0 rgba(10, 35, 65, .25); }
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps li {
  position: relative;
  padding-left: 2.9rem;
  max-width: 34rem;
  counter-increment: step;
  font-weight: 600;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: -.1rem;
  display: grid;
  place-items: center;
  width: 2.1rem; height: 2.1rem;
  border-radius: 50%;
  background: var(--sun);
  font-family: var(--display);
  font-size: 1.15rem;
}
.steps li:nth-child(2)::before { background: var(--grape); color: var(--paper); }
.steps li:nth-child(3)::before { background: var(--tomato); color: var(--paper); }
.steps li:nth-child(4)::before { background: var(--meadow); }
.steps strong { display: block; font-weight: 900; font-size: 1.05rem; }
.how-note { margin: 1.4rem 0 0; padding-top: 1rem; border-top: .15rem dashed var(--land); color: var(--ink-soft); font-weight: 700; }

.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem 1rem;
  padding: 1.6rem 0 2.2rem;
  color: rgba(255, 255, 255, .85);
  font-weight: 700;
  font-size: .9rem;
}
.footer p { margin: 0; }
.link-btn.danger { color: var(--paper); }
.link-btn.danger:hover { color: #ffd2cc; }

/* ---------------------------------------------------------------- dialogs + toast */

.modal {
  width: min(30rem, calc(100vw - 2rem));
  padding: 1.5rem 1.6rem 1.6rem;
  border: 0;
  border-radius: var(--radius-l);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 .6rem 0 rgba(10, 35, 65, .3);
}
.modal::backdrop { background: rgba(10, 30, 55, .6); }
.modal h2 { margin: 0 0 .7rem; font-family: var(--display); font-weight: 400; font-size: 1.8rem; line-height: 1.1; }
.modal p { margin: 0 0 .8rem; font-weight: 600; font-size: 1.05rem; }
.modal .warn { padding: .6rem .8rem; border-radius: .7rem; background: #fff1d1; font-weight: 700; }
.modal form { margin-top: 1.2rem; }
.modal-actions { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: flex-end; }
.modal-actions .big-btn { justify-content: center; min-width: 8rem; }
.modal-art { display: block; width: 6rem; margin: 0 auto .6rem; }
.art-house { fill: var(--sun); }
.art-roof { fill: var(--tomato); }
.art-door { fill: var(--grape); }
.art-window { fill: var(--paper); }

.toast {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: max(1.2rem, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 1rem;
  width: max-content;
  max-width: calc(100vw - 2rem);
  padding: .7rem .8rem .7rem 1.2rem;
  border-radius: var(--radius-m);
  background: var(--ink);
  color: var(--paper);
  font-weight: 800;
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .3);
  transform: translateX(-50%);
}
.toast[hidden] { display: none; }
.toast button {
  flex: none;
  padding: .3rem .9rem;
  border: 0;
  border-radius: 999px;
  background: var(--sun);
  color: var(--ink);
  font-weight: 900;
}

/* ---------------------------------------------------------------- present mode */

.present {
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow: hidden;
  font-size: clamp(15px, 1.05vw, 26px);
  background:
    radial-gradient(circle at 50% 0, rgba(255, 255, 255, .16) 0 2px, transparent 3px) 0 0 / 46px 30px,
    linear-gradient(180deg, var(--ocean) 0%, var(--ocean-deep) 100%);
}
.present[hidden] { display: none; }
.present-map { position: absolute; inset: 0; }
.present-map svg { display: block; width: 100%; height: 100%; }
.present .state { cursor: default; }
.present .state.visited, .present .state.lived, .present .state.born { cursor: pointer; }
.present .state:hover { fill: var(--land); }
.present .state.visited:hover { fill: #ffd965; }
.present .state.lived:hover { fill: #9479ea; }
.present .state.born:hover { fill: #f4725f; }
.present .dimmed .state:not(.on) { opacity: .55; }
.present .nation { stroke-width: 5px; vector-effect: non-scaling-stroke; }
.present .state { vector-effect: non-scaling-stroke; }
.present .outline-selected { vector-effect: non-scaling-stroke; stroke-width: 5px; }

.present-title {
  position: absolute;
  top: 1.4rem; left: 1.6rem;
  padding: .6rem 1.5rem .75rem;
  background: var(--sun);
  border: .32rem solid var(--paper);
  border-radius: 1.3rem;
  box-shadow: 0 .4rem 0 rgba(10, 35, 65, .3);
  transform: rotate(-2deg);
  pointer-events: none;
}
.present-title h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 3rem; line-height: 1; }
.present-title p { margin: .3rem 0 0; font-size: 1.4rem; font-weight: 900; color: var(--ink-soft); }
.present-legend { position: absolute; left: 1.6rem; bottom: 1.5rem; font-size: 1.25rem; }
.present-legend li { padding: .3rem .9rem .3rem .4rem; border-radius: 999px; background: rgba(10, 35, 65, .3); }
.present.state-open .present-title, .present.state-open .present-legend { display: none; }

.present-card {
  position: absolute;
  top: 1.2rem; bottom: 5.2rem; left: 1.2rem;
  width: min(48vw, 62rem);
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: 0 0 1.2rem;
  background: var(--meadow);
  border: .4rem solid var(--paper);
  border-radius: 2rem;
  box-shadow: 0 .6rem 0 rgba(10, 30, 55, .35);
  overflow: hidden;
  animation: card-in .45s cubic-bezier(.3, 1.25, .5, 1);
}
.present-card[hidden] { display: none; }
@keyframes card-in { from { transform: translateX(-30%); opacity: 0; } to { transform: none; opacity: 1; } }
.present-card .panel-head { padding: 1.1rem 1.4rem 0; background: none; }
.present-card .panel-shape { width: 4.4rem; height: 4.4rem; }
.present-name { flex: 1; min-width: 0; }
.present-name h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 3.2rem; line-height: 1; }
.badge {
  display: inline-block;
  margin: .45rem 0 0;
  padding: .15rem .8rem .2rem;
  border-radius: 999px;
  font-weight: 900;
  font-size: 1.1rem;
}
.present-photos {
  flex: 1;
  min-height: 0;
  margin: 0 1.4rem;
  padding: .8rem;
  display: grid;
  gap: .7rem;
  background: var(--paper);
  border-radius: .4rem;
  box-shadow: 0 .4rem 1.2rem rgba(10, 30, 55, .25);
  transform: rotate(-.6deg);
}
.present-photos figure { margin: 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.present-photos img { flex: 1; min-height: 0; width: 100%; object-fit: contain; }
.present-photos figcaption { padding-top: .35rem; font-weight: 800; font-size: 1.15rem; text-align: center; line-height: 1.25; }
.present-photos.one { grid-template: 1fr / 1fr; }
.present-photos.side { grid-template: 1fr / 1fr 1fr; }
.present-photos.stacked { grid-template: 1fr 1fr / 1fr; }
.present-photos.three, .present-photos.four { grid-template: 1fr 1fr / 1fr 1fr; }
.present-photos.three figure:nth-child(3) { grid-column: 1 / -1; }
.present-photos.none { display: none; }
.present-photos .page-note { position: absolute; right: .8rem; bottom: -.1rem; transform: translateY(100%); font-weight: 800; color: var(--ink-soft); }
.present-fact {
  flex: none;
  margin: 0 1.4rem;
  padding: .75rem 1.1rem .85rem;
  background: var(--sun);
  border: .25rem solid var(--paper);
  border-radius: 1.2rem;
}
.present-fact h3 { margin: 0; font-size: 1.05rem; font-weight: 900; }
.present-fact p { margin: .1rem 0 0; font-size: 1.45rem; font-weight: 700; line-height: 1.3; }
.present-card.no-photos .present-fact { margin-top: auto; margin-bottom: auto; }
.present-card.no-photos .present-fact p { font-size: 2rem; }

.present-bar {
  position: absolute;
  right: 1.4rem; bottom: 1.3rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: 1.15rem;
}
.present-bar .chip-btn { padding: .5rem 1.4rem .55rem; border-color: var(--paper); }
.present-bar .chip-btn.primary { background: var(--sun); color: var(--ink); border-color: var(--paper); }
.present-step { padding: .3rem .9rem; border-radius: 999px; background: rgba(10, 35, 65, .3); color: var(--paper); font-weight: 900; }

/* ---------------------------------------------------------------- phones and small tablets */

@media (max-width: 899px) {
  html { font-size: 15px; }
  .panel-open .workspace { grid-template-columns: minmax(0, 1fr); }
  .panel-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 19;
    background: rgba(10, 30, 55, .45);
  }
  .panel {
    position: fixed;
    z-index: 20;
    left: 0; right: 0; bottom: 0; top: auto;
    max-height: 88vh;
    max-height: 88dvh;
    border-radius: var(--radius-l) var(--radius-l) 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .panel.pop { animation-name: sheet-up; }
  @keyframes sheet-up { from { transform: translateY(30%); opacity: 0; } to { transform: none; opacity: 1; } }
  .map-wrap { max-height: none; }
  .saved-where #saveText { font-size: .82rem; }
  .export-grid { grid-template-columns: 1fr; }

  .present { font-size: 15px; }
  .present-title h2 { font-size: 2rem; }
  .present-title p { font-size: 1.1rem; }
  .present-legend { bottom: 4.6rem; font-size: 1rem; }
  .present-card {
    top: auto; left: 0; right: 0; bottom: 4.4rem;
    width: auto;
    height: 64%;
    border-width: .3rem 0 .3rem;
    border-radius: 1.4rem;
  }
  .present-name h2 { font-size: 2rem; }
  .present-card .panel-shape { width: 2.8rem; height: 2.8rem; }
  .present-fact p, .present-card.no-photos .present-fact p { font-size: 1.1rem; }
  .present-bar { left: .8rem; right: .8rem; bottom: .9rem; justify-content: center; }
  .present-bar .chip-btn { padding: .45rem 1rem; }
}

@media (max-width: 520px) {
  .topbar { flex-wrap: wrap; }
  .brand { font-size: 1.15rem; }
  .mark span { font-size: .82rem; }
  .present-step { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}