/* Step 2: Print button typography. */
#pageStep2 #printPostcardBtn {
  font-family: "NarkissYair-Regular-TRIAL", "NarkissYair Regular TRIAL", sans-serif;
  font-weight: 400;
  font-size: 14.5px;
}

/* Step 2: 10px gap between bottom action buttons */
#pageStep2 .step2BottomActions {
  display: flex;
  gap: 10px;
}
/* Align 'Add to list' and 'Create life path' buttons horizontally */
#pageStep1 .button-row {
  display: flex;
  left: 200px;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
}

#pageStep1 #createLifePathBtn {
  position: absolute;
  left: 1560px;
  top: 998px;
  transform: scale(var(--step1-inv-scale, 1));
  transform-origin: top left;
}

#pageStep1 #addBtn {
  position: absolute;
  left: 89px;
  top: 998px;
  transform: scale(var(--step1-inv-scale, 1));
  transform-origin: top left;
}

#pageStep1 #addToListMsg {
  position: absolute;
  top: -30px;
  left: 90px;
  z-index: 1;
  font-family: "80-kb-Sharp", Helvetica, sans-serif;
  font-weight: 400;
  color: #ff4800;
  font-size: 16px;
  line-height: 22px;
  white-space: nowrap;
  pointer-events: none;
}

#pageStep1 .step1AddToListMsg {
  display: none !important;
}
:root {
  color-scheme: light;
  --lifepath-map-button-font-size: 14px;
}

@font-face {
  font-family: "80kb Sharp";
  src: url("fonts/80-kb-Sharp.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "80kb Sharp";
  src: url("fonts/80-kb-SharpBold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Figma-exported font-family names (aliases) */
@font-face {
  font-family: "80-kb-Sharp";
  src: url("fonts/80-kb-Sharp.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "80-kb-SharpBold";
  src: url("fonts/80-kb-SharpBold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "NarkissYair-Regular-TRIAL";
  src: url("fonts/NarkissYair-Regular-TRIAL.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "NarkissYair-Light-TRIAL";
  src: url("fonts/NarkissYair-Light-TRIAL.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "NarkissYair-Bold-TRIAL";
  src: url("fonts/NarkissYair-Bold-TRIAL.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "NarkissBlock-Regular-TRIAL";
  src: url("fonts/NarkissBlock-Regular-TRIAL.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "NarkissBlock-Hairline-TRIAL";
  src: url("fonts/NarkissBlock-Hairline-TRIAL.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "NarkissBlock-Bold-TRIAL";
  src: url("fonts/NarkissBlock-Bold-TRIAL.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "NarkissBlock-Semibold-TRIAL";
  src: url("fonts/NarkissBlock-Semibold-TRIAL.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "NarkissBlock-Medium-TRIAL";
  src: url("fonts/NarkissBlock-Medium-TRIAL.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "NarkissBlock-Light-TRIAL";
  src: url("fonts/NarkissBlock-Light-TRIAL.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "NarkissBlock-Extralight-TRIAL";
  src: url("fonts/NarkissBlock-Extralight-TRIAL.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "NarkissBlock-Thin-TRIAL";
  src: url("fonts/NarkissBlock-Thin-TRIAL.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "AlfaBravo-Normal";
  src: url("fonts/AlfaBravo-Normal.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
  font-weight: 400;
}

/* Standing rule: every button in the app — present and future — uses this
   font/size. !important because many individual button classes below set
   their own font-family/font-size that would otherwise win by specificity;
   this is deliberately the one property those rules don't get to override. */
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  font-family: "AlfaBravo-Normal", "80-kb-SharpBold", "80kb Sharp", Helvetica, sans-serif !important;
  /* Every button on the site is the same size as the home page's "start"
     button — this is the site-wide default; the handful of per-class
     overrides below (also !important, since that's what it takes to beat
     this rule) are kept in sync with it rather than removed, so a class that
     legitimately needs its own font-family/weight isn't forced to inherit
     this rule's font-size by proxy. */
  font-size: 13px !important;
  font-weight: 400;
  /* !important: several page-specific button classes below still set their
     own text-decoration: underline (left over from an older "text link"
     look) that would otherwise win by specificity — no button anywhere in
     the app should render underlined. */
  text-decoration: none !important;
}

/* Step 1's whole layout lives inside #pageStep1 .frame, which is scaled down
   via transform: scale(var(--step1-scale)) on any viewport smaller than the
   1920x1080 design size (see updateStep1Scale() in app.js) — every button in
   there was rendering visibly smaller than the site-wide 14px everywhere
   else once the window wasn't exactly 1920x1080. Countering the shrink by
   the frame's own inverse scale makes their *on-screen* size land back on
   the same 14px as every other page, regardless of window size. Excludes
   #addBtn/#createLifePathBtn, which already counter the same shrink a
   different way (transform: scale(var(--step1-inv-scale)) on the whole
   button, not just its font) — applying both would double-compensate them. */
#pageStep1 button:not(#addBtn):not(#createLifePathBtn) {
  font-size: calc(13px * var(--step1-inv-scale, 1)) !important;
}

body {
  margin: 0;
  font-family: "80-kb-Sharp", "80kb Sharp", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  line-height: 1.35;
  text-transform: lowercase;
  background: #f4f2ea;
  color: #000000;
}

input,
textarea,
select,
button {
  text-transform: lowercase;
}

/* Leaflet default background is gray; keep the project background consistent,
   including when map tiles are hidden or still loading. */
.leaflet-container {
  background: #f4f2ea;
}

html,
body {
  height: 100%;
  overflow: hidden;
  width: 100%;
}

.app {
  width: 100%;
  margin: 0;
  padding: 0;
}

.page {
  min-height: 100vh;
  height: 100vh;
  overflow: hidden;
}

#pageAllMaps,
#pageArchive {
  background: #f4f2ea;
}

/* Keep comfortable padding on non-Figma pages */
#pageWelcome,
#pageStep2 {
  padding: 36px 42px;
}

/* Home page (logo, tagline, start). */
#pageWelcome.homePage {
  position: relative;
  background-color: #f4f2ea;
  /* Overrides the old Welcome design's #pageWelcome { max-width: 1120px }
     (in a min-width:980px media query further down) — that constrained
     column made sense for the old scroll-hero content, but this full-bleed
     home page needs the whole viewport. */
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* #pageWelcome is 2 screens tall (see .homePageInner) with this element as
   the actual scroll container — screen 1 (logo/tagline/start) fills the
   first viewport, screen 2 (name/homes-count questions) is revealed by
   scrolling. Scrollbar hidden so screen 1 stays pixel-identical to before
   this existed; "start" (scrolls in place) and organic scrolling are the
   discovery paths for screen 2. */
#pageWelcome.homePage {
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

#pageWelcome.homePage::-webkit-scrollbar {
  display: none;
}

/* The scrollable content: screen 1 (logo) and screen 2 (name/homes-count
   questions) both live here, positioned absolutely within it, so it's the
   shared containing block for both -- see .homePageLogo's top:50vh and
   .homePageScreen2's top:130vh below. */
.homePageInner {
  position: relative;
  width: 100%;
  /* Screen 1 is the first 100vh (unchanged); screen 2 is the last 100vh of
     this height, i.e. it starts at (height - 100vh) when scrolled all the
     way down (see scrollWelcomeToScreen2) -- shorter than a flat 200vh so
     there's less empty trailing space to scroll through past the fields. */
  height: 165vh;
}

.homeBgRouteSvg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  /* Let points bleed past the SVG's own viewBox — #pageWelcome's own
     overflow:hidden still clips it right at the page edge, which is the
     intended "runs off the frame" look, not a full unclipped escape. */
  overflow: visible;
}

/* align-items:flex-start (not center): "create map"'s text line-box is
   taller than the icon buttons', so centering would nudge the icons a
   sub-pixel below top:34px -- flex-start keeps every item's own top edge
   flush with the row's, matching every page's copy of this row exactly. */
.homePageTopActions {
  position: absolute;
  /* Every page that shares this row anchors its top-left logo the same way
     (flat top:34px inside a scaled ancestor, or calc(34px * scale) flat --
     both render on-screen at 34*scale), so this single value keeps the row
     level with the logo -- and with every other page's copy of this same
     row -- everywhere it appears. */
  top: calc(34px * var(--step1-scale, 1));
  /* Matches .topbar's own right padding (36px 42px 0, used across Step 2,
     Emotion, Welcome, Archive, and All Maps) -- this row is position:fixed
     wherever it appears though, so it never actually inherits that padding
     from any ancestor and needs the same 42px spelled out here directly. */
  right: 42px;
  z-index: 20;
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

/* Pinned to the viewport, unaffected by #pageWelcome's own internal scroll
   (see .homePageInner) -- stays visible on both screens. top: inherited
   from the base rule above. */
#pageWelcome .homePageTopActions {
  position: fixed;
}

/* Step 1's own copy of this row lives outside .frame (which the archive/all
   maps/about buttons must NOT inherit -- .frame is wrapped in
   transform:scale(var(--step1-scale)), so nesting this row inside it would
   double-apply the scale). position:fixed for the same reason as
   #pageWelcome above: guaranteed viewport-relative regardless of ancestor
   positioning. top: inherited from the base rule above -- Step 1's own logo
   sits at flat top:34px *inside* .frame, so .frame's ambient scale renders
   it on-screen at 34*scale, same number the base rule's calc produces
   directly out here. */
#pageStep1 .homePageTopActions {
  position: fixed;
}

.homePageTopActions button,
#pageAllMaps .allMapsActions button,
#pageStep2 .step2Actions button {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: #000000;
  text-decoration: none;
  white-space: nowrap;
  font-size: 13px !important;
  text-transform: lowercase;
}

.homePageTopActions .homeTextActionBtn,
#pageAllMaps .allMapsActions .homeTextActionBtn,
#pageStep2 .step2Actions .homeTextActionBtn {
  font-family: "NarkissBlock-Extralight-TRIAL", sans-serif;
  font-weight: 400;
  line-height: 1;
}

/* "create map", expand/solo pages: shown for row-layout consistency with
   every other page, but disabled -- these are nested inside a specific
   map's own view, not a place a new map can be started from. Same
   disabled-opacity convention as .printModalOptionBtn:disabled. */
.homeTextActionBtn:disabled {
  cursor: default;
  opacity: 0.35;
  pointer-events: none;
}

.homePageTopActions button:hover,
#pageAllMaps .allMapsActions button:hover,
#pageStep2 .step2Actions button:hover {
  color: #8e3300;
}

/* The logo is #pageWelcome's only screen-1 content now (tagline/start row
   removed) -- it centers itself directly rather than through a wrapper,
   since a transformed *ancestor* (a centering wrapper's own
   translateX(-50%)) would otherwise establish a containing block that traps
   position:fixed descendants, breaking the scroll-morph below (it needs to
   truly escape to the viewport, not just to the wrapper's box). */
.homePageLogo {
  position: absolute;
  /* 50vh, not 50%: stays pinned to screen 1's own center against
     .homePageInner's 200vh height -- 50% of that would land at the
     screen 1/2 boundary instead. The "- 36px" compensates for
     #pageWelcome's own top padding (36px), which offsets .homePageInner's
     (this element's containing block) top edge away from the true
     viewport top -- without it, the logo's center actually lands 36px
     below true screen center, not on it. */
  top: calc(50vh - 36px);
  left: 50%;
  transform: translate(-50%, -50%);
  width: 135px;
  height: auto;
  display: block;
  object-fit: contain;
  z-index: 1;
}

/* Applied by app.js's home-logo scroll-morph once scrolling has carried the
   logo's top edge to the top of the viewport: switches it from scrolling
   with the page to pinned-in-place, so the accompanying top/left/width
   inline styles (interpolating toward every other page's small top-left
   corner logo) read against the true viewport instead of the scrolled
   content or any transformed ancestor. */
.homePageLogo.homeLogoFixed {
  position: fixed;
  transform: none;
  z-index: 30;
}

/* Static "scroll down to create your map" caption -- replaces the old
   cursor-following "scroll down" hint. Centered horizontally on screen 1;
   anchored 40px above screen 1's own bottom edge (100vh, not
   .homePageInner's full 165vh) -- top:100vh + transform's -100% Y shifts by
   the caption's own height so its *bottom* edge (not top) lands on that
   line. The "-36px" compensates for #pageWelcome's own top padding, which
   offsets .homePageInner's (this element's containing block) top edge away
   from the true viewport top -- same correction as .homePageLogo's own
   top:calc(50vh - 36px) (see its comment). Fades with the same scroll
   trigger as the tagline (see updateHomeScrollHint() in app.js). */
#pageWelcome .homeScrollDownText {
  position: absolute;
  top: calc(100vh - 40px - 36px);
  left: 50%;
  transform: translate(-50%, -100%);
  z-index: 1;
  margin: 0;
  width: max-content;
  max-width: 90vw;
  text-align: center;
  font-family: "NarkissBlock-Regular-TRIAL", sans-serif;
  font-weight: 400;
  font-size: 16px;
  text-transform: lowercase;
  color: #000000;
  opacity: 1;
  transition: opacity 0.5s ease;
  animation: homeScrollDownTextBob 2.6s ease-in-out infinite;
}

#pageWelcome .homeScrollDownText.homeScrollHintHidden {
  opacity: 0;
}

/* Very gentle up/down float, layered on top of the element's own
   translate(-50%, -100%) positioning above -- each keyframe repeats that
   base transform and only adds a few px of Y drift so the caption keeps its
   anchor point instead of jumping. */
@keyframes homeScrollDownTextBob {
  0%, 100% {
    transform: translate(-50%, calc(-100% - 4px));
  }
  50% {
    transform: translate(-50%, calc(-100% + 4px));
  }
}


/* Screen 2 of the home page: the name / homes-count questions, revealed by
   scrolling. Reuses Step 1's original .group/.text-wrapper-2/.figma-line-
   input/.nameCaret visual for these two fields (same fields, just moved),
   but in normal centered-flex layout instead of Step 1's absolute
   1920x1080-canvas coordinate system -- #pageWelcome scoping keeps these
   from colliding with #pageStep1's own (differently-positioned) versions
   of the same class names, the same way #pageStep1 already disambiguates
   .group from .group-2 for its other fields. */
.homePageScreen2 {
  position: absolute;
  /* Center of the visible window when scrolled all the way down: with
     .homePageInner at 165vh, that window is [65vh, 165vh], centered at
     115vh. Keep this at (.homePageInner's height - 50vh) if that height
     ever changes again. */
  top: 115vh;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

#pageWelcome .group {
  position: relative;
  /* Shortened repeatedly now: 360 -> 324 -> 291.6 -> 262.44px (10% off each
     time), cut from the right (the input line is left-anchored, so a
     narrower box only pulls its right end in). .homePageScreen2's own
     centering (left:50%) re-centers the whole, now-narrower block as a
     unit -- both fields share this width, so their labels/lines/the button
     below all stay aligned with each other. */
  width: 262.44px;
  height: 52px;
}

#pageWelcome .text-wrapper-2 {
  position: absolute;
  top: 0;
  left: 0;
  font-family: "NarkissBlock-Extralight-TRIAL", sans-serif;
  font-weight: 400;
  font-size: 15px;
  text-transform: lowercase;
  color: #000000;
}

#pageWelcome .figma-line-input {
  position: absolute;
  top: 26px;
  left: 0;
  width: 100%;
  height: 22px;
  border: 0;
  border-bottom: 0.1px solid rgba(0, 0, 0, 0.65);
  padding: 1px 0;
  font-family: "NarkissBlock-Extralight-TRIAL", sans-serif;
  font-size: 16px;
  background: transparent;
  outline: none;
}

#pageWelcome .ellipse {
  display: none;
}

#pageWelcome .step1NextBtn {
  border: 0;
  background: transparent;
  padding: 0;
  margin-top: 8px;
  cursor: pointer;
  color: #c9c8c1;
  pointer-events: none;
  /* Right-aligned to the input lines' own right edge (.homePageScreen2's
     width is set by its widest child, the 324px .group fields) instead of
     centered under them like .homePageScreen2's other, wider children. */
  align-self: flex-end;
}

#pageWelcome .step1NextBtn.active {
  color: #000000;
  pointer-events: auto;
}

#pageWelcome .step1NextBtn:hover {
  color: #8e3300;
}

/* Reveal via a pure, unhurried fade as screen 2 scrolls into view -- no
   movement/drift and no stagger between elements, so it reads as a single
   soft fade rather than pieces being built/typed out one after another.
   Toggled by the IntersectionObserver in app.js (triggers a bit later into
   the scroll than a plain 50% crossing would, see the observer's threshold). */
.homePageScreen2 .group,
.homePageScreen2 .step1NextBtn {
  opacity: 0;
  transition: opacity 1.4s ease;
}

#homePageScreen2.homePageScreen2Visible .group,
#homePageScreen2.homePageScreen2Visible .step1NextBtn {
  opacity: 1;
}

/* Step 2: full-screen map */
#pageStep2 {
  padding: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100vh;
}

#pageStep2 .topbar {
  padding: 36px 42px 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  background: rgba(255, 255, 255, 0);
}

#pageStep2 .step2MapTitle,
#pageStep2 .step2LogoText,
#pageArchive .step2MapTitle,
#pageArchive .step2LogoText,
#pageAllMaps .step2MapTitle,
#pageAllMaps .step2LogoText,
#pageEmotion .emotionLogoText,
#pageEmotion .emotionMapTitle {
  position: absolute;
  top: 36px;
  left: 42px;
  z-index: 2000;
  margin: 0;
  font-family: "NarkissYair-Bold-TRIAL", "NarkissYair Bold TRIAL", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

/* Titles are plain labels; logos in this shared position must stay clickable
   (they navigate back to the home page — see wireHomeLogoNavigation in app.js). */
#pageStep2 .step2MapTitle,
#pageArchive .step2MapTitle,
#pageAllMaps .step2MapTitle,
#pageEmotion .emotionMapTitle {
  pointer-events: none;
}

#pageStep2 .step2LogoText,
#pageArchive .step2LogoText,
#pageAllMaps .step2LogoText,
#pageEmotion .emotionLogoText {
  pointer-events: auto;
  cursor: pointer;
}

#pageStep2 .step2LogoText,
#pageArchive .step2LogoText,
#pageAllMaps .step2LogoText,
#pageEmotion .emotionLogoText,
#pageStep1EmotionFullscreen .step1EmotionFullscreenLogo {
  top: calc(34px * var(--step1-scale, 1));
  left: calc(40px * var(--step1-scale, 1));
}

#pageStep1EmotionFullscreen .step1EmotionFullscreenLogo {
  position: absolute;
  z-index: 2001;
}

.appLogoImage {
  width: calc(100px * var(--step1-scale, 1));
  height: auto;
  display: block;
  object-fit: contain;
}

/* Image-replaced button labels (buttons/*.png), used in place of plain text
   inside their <button>. The <img alt="..."> supplies the button's
   accessible name, so no extra ARIA is needed beyond what each button
   already had. Each <img> also carries a per-image-type class (.btnImgBack,
   .btnImgNext, etc., set in index.html) so the hover rules below (which
   swap in buttons/<name>-hover.png) only need to be written once per image,
   not once per button -- many buttons (e.g. every "back" button) share the
   same base image.

   Source PNGs are now exported on a consistent-height canvas (~198px),
   so a single shared height here renders every word at the same actual
   letter size -- no per-image overrides needed.

   Sizing is split the same way .appLogoImage is (see
   #pageStep1 img.life-path.appLogoImage below): pages outside #pageStep1
   aren't wrapped in any transform, so their buttons scale down manually via
   calc(...* var(--step1-scale)) on narrow viewports, same as the logo. */
.btnImg {
  display: block;
  height: calc(18.48px * var(--step1-scale, 1));
  width: auto;
  object-fit: contain;
  pointer-events: none;
}

/* Home page's archive/all maps/about buttons are 7% smaller than every
   other .btnImg (18.48px * 0.93). Every other page's own copy of this same
   trio (see .globalNavBtn in app.js) matches this exactly too. */
.homePageTopActions .btnImg,
#pageAllMaps .allMapsActions .btnImg,
#pageStep2 .step2Actions .btnImg {
  height: calc(17.1864px * var(--step1-scale, 1));
}

/* print/edit read 1px smaller than their row's shared height above. */
.homePageTopActions .btnImgPrint,
.homePageTopActions .btnImgEdit {
  height: calc(18.1864px * var(--step1-scale, 1));
}

/* create map, +1px too -- appears on multiple pages/containers (Welcome,
   Archive, Step 1 all use .homePageTopActions; All Maps uses its own
   .allMapsActions), so both selectors need it to stay consistent everywhere. */
.homePageTopActions .btnImgCreateMap,
#pageAllMaps .allMapsActions .btnImgCreateMap {
  height: calc(18.1864px * var(--step1-scale, 1));
}

/* Step 1's own buttons live inside #pageStep1 .frame, which is itself
   wrapped in transform: scale(var(--step1-scale)) (see #pageStep1 .frame
   below) -- so they need the flat, unscaled design-pixel height here; the
   ambient transform already shrinks them together with the rest of the
   frame's contents. Using the scaled formula here would double-apply the
   scale and make them too small relative to every other page's buttons.
   17.1864 (not 18.48) to match the home page's own buttons exactly -- see
   .homePageTopActions .btnImg's own 7%-smaller comment above. */
#pageStep1 .frame .btnImg {
  height: 17.1864px;
}

/* Hover states: content-swap the <img> to buttons/<name>-hover.png. Hover
   has to be detected on the <button> (.btnImg itself is pointer-events:none
   so it never receives the hover directly), then applied to the img
   descendant that matches this image type. */
button:hover .btnImgArchive {
  content: url("buttons/archive-hover.png");
}
button:hover .btnImgAllMaps {
  content: url("buttons/all-maps-hover.png");
}
button:hover .btnImgBack {
  content: url("buttons/back-hover.png");
}
button:hover .btnImgNext {
  content: url("buttons/next-hover.png");
}
button:hover .btnImgExpand {
  content: url("buttons/expand-hover.png");
}
button:hover .btnImgAddHome {
  content: url("buttons/add-home-hover.png");
}
/* addHomeBtn swaps to this class (see updateAddHomeBtnState()) once the
   last expected home is being entered. */
button:hover .btnImgFinish {
  content: url("buttons/finish-hover.png");
}
button:hover .btnImgCreateMap {
  content: url("buttons/create-map-hover.png");
}
button:hover .btnImgEdit {
  content: url("buttons/edit-hover.png");
}
button:hover .btnImgPrint {
  content: url("buttons/print-hover.png");
}
button:hover .btnImgTimeline {
  content: url("buttons/timeline-hover.png");
}

/* "Before" states: shown while the button's own .active gate (set by JS
   once its required data is filled in) hasn't been added yet. Scoped to
   the specific buttons that actually toggle .active -- step1BelongNextBtn
   also uses .btnImgNext but never gates on .active, so it's excluded. */
#pageWelcome .step1NextBtn:not(.active) .btnImgNext,
#pageStep1 #step1AddrNextBtn:not(.active) .btnImgNext {
  content: url("buttons/next-before.png");
}
#pageStep1 #addHomeBtn:not(.active) .btnImgAddHome {
  content: url("buttons/add-home-before.png");
}
#pageStep1 #addHomeBtn:not(.active) .btnImgFinish {
  content: url("buttons/finish-before.png");
}

/* "You're already here" state: the archive/all-maps nav buttons appear on
   every page (welcome/archive/all-maps/step1), but each page's own copy of
   the button that points at *itself* swaps to this muted "page" label
   instead of its normal icon, same idea as a disabled/current-location
   indicator. Every other page's copy of the same button (which navigates
   away) is unaffected. Not gated on :hover -- reads as fully inert. */
#pageArchive [data-nav="archive"] .btnImgArchive {
  content: url("buttons/archive-page.png");
}
#pageAllMaps [data-nav="allmaps"] .btnImgAllMaps {
  content: url("buttons/all-maps-page.png");
}

#pageEmotion .emotionMapTitle {
  left: 42px;
  top: 85px;
  font-family: "NarkissBlock-Regular-TRIAL", sans-serif;
  font-weight: 400;
}

#pageStep2 .step2MapTitle,
#pageArchive .step2MapTitle,
#pageAllMaps .step2MapTitle {
  left: 42px;
  top: 85px;
}

#pageStep2.dark-map-ui .step2MapTitle,
#pageStep2.dark-map-ui .step2LogoText,
#pageAllMaps.dark-map-ui .step2MapTitle,
#pageAllMaps.dark-map-ui .step2LogoText {
  color: #f2f0e8;
}

#pageArchive .step2LogoText,
#pageArchive .step2MapTitle,
#pageAllMaps .step2LogoText,
#pageAllMaps .step2MapTitle {
  font-family: "NarkissYair-Bold-TRIAL", "NarkissYair Bold TRIAL", sans-serif !important;
}

#pageAllMaps .allMapsListName {
  font-family: "NarkissBlock-Extralight-TRIAL", sans-serif !important;
}

/* Confined to the left half of the page -- matches the emotion fullscreen
   page's own map/reading-panel split (see .step1EmotionFullscreenWrap). */
#pageStep2 .mapWrap {
  margin-top: 0;
  padding: 0;
  flex: 1;
  min-height: 0;
  width: 50vw;
}

#pageStep2 .map {
  height: 100%;
  border: 0;
  border-radius: 0;
  margin: 0;
}

/* Reading panel -- copied from the emotion fullscreen page's own reading
   panel (see #pageStep1EmotionFullscreen .step1EmotionFullscreenInfo and
   siblings): same position, fonts and sizes. */
#pageStep2 .step2ReadingInfo {
  position: fixed;
  left: calc(50vw + 50px);
  top: calc(50vh - 125px);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: #111827;
}

#pageStep2 .step2ReadingInfoTitle {
  font-family: "NarkissBlock-Regular-TRIAL", sans-serif;
  font-weight: 400;
  font-size: 15px;
}

#pageStep2 .step2ReadingInfoNameRow {
  position: relative;
  display: flex;
  align-items: baseline;
  margin-top: -7px;
  margin-bottom: 7px;
}

#pageStep2 .step2ReadingInfoName {
  font-family: "NarkissBlock-Extralight-TRIAL", sans-serif;
  font-weight: 400;
  font-size: 14px;
  text-transform: none;
}

#pageStep2 .step2ReadingInfoCount {
  position: absolute;
  left: 130px;
  top: 0;
  font-family: "NarkissBlock-Regular-TRIAL", sans-serif;
  font-weight: 400;
  font-size: 13px;
}

#pageStep2 .step2ReadingInfoStats,
#pageStep2 .step2ReadingInfoLists {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#pageStep2 .step2ReadingInfoLists {
  margin-top: -4px;
}

#pageStep2 .step2ReadingInfoStat,
#pageStep2 .step2ReadingInfoList {
  font-family: "NarkissBlock-Extralight-TRIAL", sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: anywhere;
}

#pageStep2 .step2ReadingInfoLabel {
  display: inline-block;
  width: 130px;
}

#pageStep2 .step2ReadingInfoStatValue,
#pageStep2 .step2ReadingInfoListValue {
  font-family: "NarkissBlock-Regular-TRIAL", sans-serif;
  font-weight: 300;
  font-size: 13px;
  text-transform: none;
  unicode-bidi: plaintext;
}

#pageStep2 #step2ReadingInfoCities .expandCitiesValue,
#pageStep1EmotionFullscreen #step1EmotionFullscreenInfoCities .expandCitiesValue {
  display: inline-block;
  vertical-align: top;
  text-align: left;
  direction: ltr;
}

#pageStep2 #step2ReadingInfoCities .step2ReadingInfoLabel,
#pageStep1EmotionFullscreen #step1EmotionFullscreenInfoCities .step1EmotionFullscreenInfoLabel {
  vertical-align: top;
}

#pageStep2 #step2ReadingInfoCities .expandCityValue,
#pageStep1EmotionFullscreen #step1EmotionFullscreenInfoCities .expandCityValue {
  direction: auto;
  unicode-bidi: isolate;
}

#pageStep2 .step2ReadingInfoHint {
  font-family: "NarkissBlock-Regular-TRIAL", sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: #000000;
  margin-top: 20px;
}

/* "back" in the map-details reading panel (Step 2 / emotion expand): a flex
   child of .step2ReadingInfo/.step1EmotionFullscreenInfo like every row
   above it, so it naturally flows just below whatever precedes it (the
   panel's own flex gap is 14px) -- the extra 46px margin here makes that a
   full 60px (40px + a later +20px bump), while still tracking that
   preceding row's own height if it wraps to more than one line. */
.expandInfoBackBtn {
  align-self: flex-start;
  margin-top: 46px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

/* Solo ring-reading page has no static "map details" panel to flow this
   below, so it's pinned to a fixed position instead: left-aligned with the
   ring-reading detail overlay's own "movement" label (its column uses
   left:calc(50vw - 30px), see targetSoloTextXForPage() in app.js), 30px
   above where that would otherwise sit. */
#pageEmotion .soloInfoBackBtn {
  position: fixed;
  left: calc(50vw - 30px);
  top: calc(50vh + 220px);
  margin-top: 0;
  z-index: 2000;
}

#pageStep2 .step2ReadingInfoStat:empty,
#pageStep2 .step2ReadingInfoList:empty,
#pageStep2 .step2ReadingInfoName:empty,
#pageStep2 .step2ReadingInfoCount:empty {
  display: none;
}

/* Emotion Map page: centered concentric circles */
#pageEmotion {
  position: relative;
  padding: 0;
  height: 100vh;
  background: #f4f2ea;
  display: flex;
  flex-direction: column;
}

#pageEmotion .topbar {
  padding: 36px 42px 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  background: rgba(255, 255, 255, 0);
}

#pageEmotion .emotionLeft {
  display: flex;
  align-items: baseline;
  gap: 18px;
  min-width: 0;
}

/* Emotion Map: map name label -- centered at the top, matching
   #pageStep1 .step1TopProgress's own on-screen position exactly. That
   element sits inside #pageStep1 .frame, which has its own
   transform:scale(--step1-scale) -- so its literal "top:34px" actually
   renders at 34px*scale on screen. This page has no such scaled ancestor
   (position:fixed, straight off the viewport), so the *same* calc() is
   needed here to land on the same physical pixel, not just the same
   design-space number. Same convention as .step2Signature and
   .step1EmotionFullscreenName (see each). */
#pageEmotion .emotionSignature {
  position: fixed;
  left: 50%;
  right: auto;
  top: calc(34px * var(--step1-scale, 1));
  transform: translateX(-50%);
  bottom: auto;
  text-align: left;
  z-index: 2000;
  font-size: calc(17px * var(--step1-scale, 1));
  white-space: nowrap;

  font-family: "NarkissBlock-Extralight-TRIAL", sans-serif;
  font-weight: 400;
  text-transform: lowercase;
  pointer-events: none;
}

#pageEmotion .step2SignatureMain {
  font-family: "NarkissBlock-Extralight-TRIAL", sans-serif;
  font-weight: 400;
}

#pageEmotion .step2SignatureCount {
  font-size: 14px;
  margin-left: 40px;
}

#pageEmotion #emotionLifeProfileBtn {
  position: static;
  left: auto;
  top: auto;
  bottom: auto;
  z-index: auto;
  display: inline-block;
  font-family: "NarkissBlock-Extralight-TRIAL", sans-serif;
  font-weight: 400;
  font-size: 13.5px;
  padding-bottom: 4px;
  margin-bottom: -4px;
  text-decoration: underline;
  text-decoration-thickness: 0.75px;
  text-underline-offset: 1px;
}

#pageEmotion .emotionSoloBackBtn {
  position: fixed;
  right: 40px;
  top: 36px;
  z-index: 6200;
  line-height: 1;
  font-family: "NarkissBlock-Extralight-TRIAL", sans-serif;
  font-weight: 400;
  font-size: 14.5px;
  text-transform: lowercase !important;
  text-decoration: underline;
  text-decoration-thickness: 0.75px;
  text-underline-offset: 1px;
  display: none;
}

#pageEmotion.emotionSoloActive .emotionSoloBackBtn {
  display: inline-block;
}

#pageEmotion .emotionSoloBackBtn:hover:not(:disabled),
#pageEmotion #emotionLifeProfileBtn:hover:not(:disabled),
#pageEmotion #emotionSpaceBtn:hover:not(:disabled) {
  color: #000000;
  font-family: "NarkissBlock-Regular-TRIAL", sans-serif;
  font-weight: 400;
}

#pageEmotion .emotionWrap {
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  flex: 1;
  min-height: 0;
}

#pageEmotion .emotionSvg {
  width: 100%;
  height: 100%;
}

#pageEmotion .emotionSoloRingReadingStrip {
  display: none;
}

#pageEmotion.emotionSoloActive .emotionSoloRingReadingStrip {
  position: fixed;
  left: 50%;
  bottom: 8px;
  width: min(62.5vw, 1200px);
  height: clamp(110px, 17.5vh, 190px);
  transform: translateX(-50%);
  z-index: 6050;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 0.55vw, 10px);
  overflow: hidden;
  pointer-events: auto;
}

#pageEmotion .emotionSoloRingReadingStrip svg {
  flex: 0 0 auto;
  width: auto;
  height: auto;
  overflow: visible;
  cursor: pointer;
  outline: none;
}

#pageEmotion .emotionSoloRingReadingStrip [data-step1-ring-reading-path] {
  transition: stroke 180ms ease;
  pointer-events: none;
}

#pageEmotion .emotionSoloRingReadingStrip svg:focus-visible [data-step1-ring-reading-path] {
  stroke: #000000 !important;
}

/* Emotion Map: hover tooltip for ring numbering (home 01..). */
.emotionRingHomeTooltip {
  position: fixed;
  z-index: 6000;
  pointer-events: none;

  font-family: "NarkissBlock-Light-TRIAL", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
  color: #000000;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;

  /* Keep exact casing as provided by JS. */
  text-transform: none;
}

/* Emotion Map: when hovering a ring, fade all other rings to gray. */
#pageEmotion [data-emotion-ring-visible="1"] {
  transition: stroke 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

#pageEmotion.emotionRingHoverActive [data-emotion-ring-visible="1"] {
  stroke: #c9c8c1 !important;
}

#pageEmotion.emotionRingHoverActive [data-emotion-ring-visible="1"][data-emotion-hovered="1"] {
  stroke: #111827 !important;
}

/* Emotion Map: ring reading label shown in solo mode */
.emotionRingReading {
  position: fixed;
  z-index: 6100;
  pointer-events: none;

  font-family: "NarkissBlock-Extralight-TRIAL", sans-serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.1;
  color: #111827;
  text-transform: none;
  white-space: nowrap;

  transform: translateY(-50%);
}

#emotionRingReading {
  font-family: "NarkissBlock-Regular-TRIAL", sans-serif !important;
}

#pageEmotion .emotionMapTitle {
  display: none !important;
}

.emotionRingReading *,
.emotionRingAddress .emotionRingAddressLabel,
.emotionRingEmotionalConnection .emotionRingEmotionalConnectionLabel,
.emotionRingBelongingShift .emotionRingBelongingShiftLabel,
.emotionRingDurationOfPresence .emotionRingDurationOfPresenceLabel,
.emotionRingTimeframe .emotionRingTimeframeLabel,
.emotionRingLifeStage .emotionRingLifeStageLabel,
.emotionRingLifetimePresentage .emotionRingLifetimePresentageLabel,
.emotionRingTransitionalDistance .emotionRingTransitionalDistanceLabel,
.emotionRingCumulativeDistance .emotionRingCumulativeDistanceLabel {
  font-family: "NarkissBlock-Extralight-TRIAL", sans-serif !important;
  font-weight: 300;
}

/* The "answers" (values) to each ring-reading section -- a heavier weight
   than their labels above, same convention as every other label/value pair
   in this app. Selectors are more specific than ".emotionRingReading *"
   above, so this wins despite both using !important. */
.emotionRingAddress .emotionRingAddressValue,
.emotionRingEmotionalConnection .emotionRingEmotionalConnectionValue,
.emotionRingBelongingShift .emotionRingBelongingShiftValue,
.emotionRingDurationOfPresence .emotionRingDurationOfPresenceValue,
.emotionRingTimeframe .emotionRingTimeframeValue,
.emotionRingLifeStage .emotionRingLifeStageValue,
.emotionRingLifetimePresentage .emotionRingLifetimePresentageValue,
.emotionRingTransitionalDistance .emotionRingTransitionalDistanceValue,
.emotionRingCumulativeDistance .emotionRingCumulativeDistanceValue {
  font-family: "NarkissBlock-Regular-TRIAL", sans-serif !important;
  font-weight: 300;
}

.emotionRingReading.hidden {
  display: none;
}

/* Second line under RING READING: positioned by explicit top (no centering transform). */
.emotionRingReading.emotionRingHomeNo {
  transform: none;
}

/* Cursor-following "home XX" label, small ring-reading strip at the bottom
   of the solo page -- explicit top/left set per pointermove event, no
   centering transform. */
.emotionRingReading.emotionSoloStripHover {
  transform: none;
  font-size: 13px;
}

/* Address line: same baseline behavior as HOME NO (explicit top coordinate). */
.emotionRingReading.emotionRingAddress {
  transform: none;
}

.emotionRingReading.emotionRingAttachment {
  transform: none;
}

.emotionRingReading.emotionRingTemporal {
  transform: none;
}

.emotionRingReading.emotionRingMovement {
  transform: none;
}

.emotionRingReading.emotionRingEmotionalConnection {
  transform: none;
}

.emotionRingReading.emotionRingBelongingShift {
  transform: none;
}

.emotionRingReading.emotionRingDurationOfPresence {
  transform: none;
}

.emotionRingReading.emotionRingTimeframe {
  transform: none;
}

.emotionRingReading.emotionRingLifeStage {
  transform: none;
}

.emotionRingReading.emotionRingLifetimePresentage {
  transform: none;
}

.emotionRingReading.emotionRingTransitionalDistance {
  transform: none;
}

.emotionRingReading.emotionRingCumulativeDistance {
  transform: none;
}

.emotionRingEmotionalConnection .emotionRingEmotionalConnectionLabel {
  font-family: "NarkissYair-Light-TRIAL", "NarkissYair-Regular-TRIAL", "80-kb-Sharp", Helvetica, sans-serif;
}

.emotionRingEmotionalConnection .emotionRingEmotionalConnectionValue {
  font-family: "NarkissYair-Regular-TRIAL", "80-kb-Sharp", Helvetica, sans-serif;
}

.emotionRingBelongingShift .emotionRingBelongingShiftLabel {
  font-family: "NarkissYair-Light-TRIAL", "NarkissYair-Regular-TRIAL", "80-kb-Sharp", Helvetica, sans-serif;
}

.emotionRingBelongingShift .emotionRingBelongingShiftValue {
  font-family: "NarkissYair-Regular-TRIAL", "80-kb-Sharp", Helvetica, sans-serif;
}

.emotionRingDurationOfPresence .emotionRingDurationOfPresenceLabel {
  font-family: "NarkissYair-Light-TRIAL", "NarkissYair-Regular-TRIAL", "80-kb-Sharp", Helvetica, sans-serif;
}

.emotionRingDurationOfPresence .emotionRingDurationOfPresenceValue {
  font-family: "NarkissYair-Regular-TRIAL", "80-kb-Sharp", Helvetica, sans-serif;
}

.emotionRingTimeframe .emotionRingTimeframeLabel {
  font-family: "NarkissYair-Light-TRIAL", "NarkissYair-Regular-TRIAL", "80-kb-Sharp", Helvetica, sans-serif;
}

.emotionRingTimeframe .emotionRingTimeframeValue {
  font-family: "NarkissYair-Regular-TRIAL", "80-kb-Sharp", Helvetica, sans-serif;
}

.emotionRingLifeStage .emotionRingLifeStageLabel {
  font-family: "NarkissYair-Light-TRIAL", "NarkissYair-Regular-TRIAL", "80-kb-Sharp", Helvetica, sans-serif;
}

.emotionRingLifeStage .emotionRingLifeStageValue {
  font-family: "NarkissYair-Regular-TRIAL", "80-kb-Sharp", Helvetica, sans-serif;
}

.emotionRingLifetimePresentage .emotionRingLifetimePresentageLabel {
  font-family: "NarkissYair-Light-TRIAL", "NarkissYair-Regular-TRIAL", "80-kb-Sharp", Helvetica, sans-serif;
}

.emotionRingLifetimePresentage .emotionRingLifetimePresentageValue {
  font-family: "NarkissYair-Regular-TRIAL", "80-kb-Sharp", Helvetica, sans-serif;
}

.emotionRingTransitionalDistance .emotionRingTransitionalDistanceLabel {
  font-family: "NarkissYair-Light-TRIAL", "NarkissYair-Regular-TRIAL", "80-kb-Sharp", Helvetica, sans-serif;
}

.emotionRingTransitionalDistance .emotionRingTransitionalDistanceValue {
  font-family: "NarkissYair-Regular-TRIAL", "80-kb-Sharp", Helvetica, sans-serif;
}

.emotionRingCumulativeDistance .emotionRingCumulativeDistanceLabel {
  font-family: "NarkissYair-Light-TRIAL", "NarkissYair-Regular-TRIAL", "80-kb-Sharp", Helvetica, sans-serif;
}

.emotionRingCumulativeDistance .emotionRingCumulativeDistanceValue {
  font-family: "NarkissYair-Regular-TRIAL", "80-kb-Sharp", Helvetica, sans-serif;
}

.emotionRingAddress .emotionRingAddressLabel {
  font-family: "NarkissYair-Light-TRIAL", "NarkissYair-Regular-TRIAL", "80-kb-Sharp", Helvetica, sans-serif;
}

.emotionRingAddress .emotionRingAddressValue {
  font-family: "NarkissYair-Regular-TRIAL", "80-kb-Sharp", Helvetica, sans-serif;
  text-transform: none;
}

.emotionRingAddress .emotionRingAddressValue,
.emotionRingEmotionalConnection .emotionRingEmotionalConnectionValue,
.emotionRingBelongingShift .emotionRingBelongingShiftValue,
.emotionRingDurationOfPresence .emotionRingDurationOfPresenceValue,
.emotionRingTimeframe .emotionRingTimeframeValue,
.emotionRingLifeStage .emotionRingLifeStageValue,
.emotionRingLifetimePresentage .emotionRingLifetimePresentageValue,
.emotionRingTransitionalDistance .emotionRingTransitionalDistanceValue,
.emotionRingCumulativeDistance .emotionRingCumulativeDistanceValue {
  font-family: "NarkissBlock-Regular-TRIAL", sans-serif !important;
  font-size: 13px;
  font-weight: 300;
}

.emotionRingEmotionalConnection .emotionRingEmotionalConnectionLabel,
.emotionRingBelongingShift .emotionRingBelongingShiftLabel {
  display: inline-block;
  width: 150px;
}

.emotionRingDurationOfPresence .emotionRingDurationOfPresenceLabel,
.emotionRingTimeframe .emotionRingTimeframeLabel,
.emotionRingLifeStage .emotionRingLifeStageLabel,
.emotionRingLifetimePresentage .emotionRingLifetimePresentageLabel {
  display: inline-block;
  width: 150px;
}

.emotionRingTransitionalDistance .emotionRingTransitionalDistanceLabel,
.emotionRingCumulativeDistance .emotionRingCumulativeDistanceLabel {
  display: inline-block;
  width: 235px;
}

.emotionRingEmotionalConnection .emotionRingEmotionalConnectionValue,
.emotionRingBelongingShift .emotionRingBelongingShiftValue,
.emotionRingDurationOfPresence .emotionRingDurationOfPresenceValue,
.emotionRingTimeframe .emotionRingTimeframeValue,
.emotionRingLifeStage .emotionRingLifeStageValue,
.emotionRingLifetimePresentage .emotionRingLifetimePresentageValue,
.emotionRingTransitionalDistance .emotionRingTransitionalDistanceValue,
.emotionRingCumulativeDistance .emotionRingCumulativeDistanceValue {
  display: inline-block;
  text-align: left;
  vertical-align: baseline;
}

.toast {
  position: fixed;
  left: 50%;
  top: 24px;
  transform: translateX(-50%);
  z-index: 4000;

  padding: 10px 14px;
  border: 1px solid #000000;
  background: #f4f2ea;
  color: #000000;

  font-family: "80-kb-Sharp", "80kb Sharp", Helvetica, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.2;
  white-space: nowrap;
}




.hidden {
  display: none !important;
}

/* Step 2: hover address tooltip font */
.leaflet-tooltip.lifepathAddressTooltip {
  font-family: "NarkissYair-Light-TRIAL", "NarkissYair Light TRIAL", sans-serif;
  font-size: 14px;
  font-weight: 400 !important;
  line-height: 1.2;
  text-transform: none !important;
  white-space: nowrap;

  /* Remove the default Leaflet tooltip bubble/frame */
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #000000 !important;
}

/* Step 2 specifically (not All Maps, which shares the base rule above). */
#pageStep2 .leaflet-tooltip.lifepathAddressTooltip {
  font-family: "NarkissBlock-Extralight-TRIAL", sans-serif;
}

/* Dark map UI: tooltip text becomes white. */
#pageStep2.dark-map-ui .leaflet-tooltip.lifepathAddressTooltip,
#pageStep2.dark-map-ui .leaflet-tooltip {
  color: #f2f0e8 !important;
}

.leaflet-tooltip.lifepathAddressTooltip:before,
.leaflet-tooltip.lifepathAddressTooltip:after {
  display: none !important;
}

/* Dark map UI (All Maps): tooltip text becomes white. */
#pageAllMaps.dark-map-ui .leaflet-tooltip {
  color: #ffffff !important;
}

/* Step 2 fallback: if any Leaflet tooltip is created without our class,
   keep it text-only (no bubble) and match the requested typography. */
#pageStep2 .leaflet-tooltip {
  font-family: "NarkissYair-Light-TRIAL", "NarkissYair Light TRIAL", sans-serif;
  font-size: 12px;
  font-weight: 400 !important;
  line-height: 1.2;
  text-transform: none !important;
  white-space: nowrap;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #000000 !important;
}

#pageStep2 .leaflet-tooltip:before,
#pageStep2 .leaflet-tooltip:after {
  display: none !important;
}

/* Step 2 dots + route line: identical stroke-color transition on hover. */
#pageStep2 #map .lifepathStep2Dot,
#pageStep2 #map .lifepathStep2Path {
  transition: stroke 120ms ease-out;
}

#pageStep2 #map .lifepathStep2Dot {
  cursor: pointer;
  pointer-events: auto;
}

#pageStep2 #map .lifepathStep2HoverButtonIcon {
  background: transparent;
  border: 0;
}

#pageStep2 #map .lifepathStep2HoverButton {
  width: 100%;
  height: 100%;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}

#pageStep2 #map .lifepathStep2HoverButton:focus {
  outline: none;
}

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

.brand {
  margin: 0;
  font-family: "80-kb-Sharp", "80kb Sharp", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.4px;
  cursor: pointer;
}

/* Site-wide wordmark (compact): LIFE—PATH● */
.lifepathWordmark {
  --lp-font-size: 16px;
  --lp-divider-w: 56px;
  --lp-divider-h: 2px;
  --lp-gap: 6px;
  --lp-circle: 6px;

  display: inline-flex;
  align-items: center;
  gap: 0;
  font-size: var(--lp-font-size);
  font-weight: 400;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
}

.lifepathDivider {
  display: inline-block;
  width: var(--lp-divider-w);
  height: var(--lp-divider-h);
  margin: 0 var(--lp-gap);
  background: currentColor;
  flex: 0 0 auto;
}

.lifepathCircle {
  display: inline-block;
  width: var(--lp-circle);
  height: var(--lp-circle);
  margin-left: var(--lp-gap);
  background: currentColor;
  border: 0;
  border-radius: 9999px;
  flex: 0 0 auto;
}

/* Welcome page wordmark: show “life” and “path” separated. */
#pageWelcome .brand.welcomeWordmark {
  pointer-events: auto;
  transform: none !important;
  position: relative;
  top: -17px;
  left: -27px;
}

#pageWelcome .welcomeDivider {
  display: inline-block;
  width: 295px;
  height: 5px;
  margin: 0 17px;
  background: currentColor;
  flex: 0 0 auto;
}

#pageWelcome .welcomeCircle {
  display: inline-block;
  width: 23px;
  height: 23px;
  margin-left: 17px;
  background: currentColor;
  border: 0;
  border-radius: 9999px;
  flex: 0 0 auto;
}

/* Center the Welcome header content. */
#pageWelcome {
  position: relative;
}

#pageWelcome .topbar {
  justify-content: flex-start;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2500;
  padding: 36px 42px 0;
  pointer-events: none;
}

#pageWelcome .welcomeScrollHint {
  position: fixed;
  left: calc(var(--welcome-hint-left, 42px) + 10px);
  right: 42px;
  top: 50%;
  transform: translateY(calc(-50% + 100px));
  text-align: left;
  z-index: 2501;
  pointer-events: none;

  color: #ff4800;

  font-family: "80-kb-Sharp", "80kb Sharp", Helvetica, sans-serif;
  font-weight: 400;
  font-size: calc(16px - 2pt);
  letter-spacing: 0.4px;
  line-height: 1.2;
  white-space: normal;

  opacity: 1;
  transition: opacity 120ms linear;
}

body.homeFlowScrolled #pageWelcome .welcomeScrollHint {
  opacity: 0;
}

/* Dark map UI: make All Maps top bar title readable on dark tiles. */
#pageAllMaps.dark-map-ui .brand {
  color: #ffffff;
}

/* Step 1 wordmark acts as a home button too */
.life-path {
  cursor: pointer;
}

.welcomeBody {
  padding: 40px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  /* Fill the visible Welcome page so we can push buttons to the bottom. */
  min-height: calc(100vh - 72px);
  width: 100%;
}

.welcomeBottomButtons {
  margin-top: auto;
  align-self: stretch;
  display: flex;
  justify-content: flex-end;
  gap: 9px;
}

#pageStep1 .step1HomeLinks {
  position: absolute;
  right: 42px;
  bottom: 36px;
  z-index: 20;
  margin: 0;
  align-self: auto;
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  transform: none;
}

#pageStep1 .step1HomeLinks .linkButton {
  border: 0;
  font-size: var(--lifepath-map-button-font-size);
}

/* Welcome: nudge All maps + Archive slightly further right (still scrolls) */
#pageWelcome .welcomeBottomButtons {
  transform: translate(170px, 40px);
}

/* Welcome buttons: no frames/borders. */
#pageWelcome .linkButton {
  border: 0;
}

/* Welcome bottom buttons: reduce size by 3pt (Archive + All maps only). */
#pageWelcome .welcomeBottomButtons .linkButton {
  font-size: var(--lifepath-map-button-font-size);
}

/* Archive page */
#pageArchive {
  padding: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

#pageArchive .topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 101px;
  z-index: 1990;
  padding: 0;
  background: #f4f2ea;
}


#pageArchive .archiveSearchWrap {
  /* Was position:static -- fine while this row sat below .topbar's own
     101px-tall opaque background+fill (z-index:1990, masks the archive
     grid scrolling underneath the logo/nav row), but moving this row up
     pushed it partly *into* that same 0-101px zone, where the topbar's
     higher z-index then painted over it. relative + a higher z-index lifts
     it back above that fill without having to shrink the topbar's own
     masked area (still needed for the grid). */
  position: relative;
  z-index: 1995;
  margin: -40px 0 16px 10px;
  pointer-events: auto;
}

#pageArchive .archiveSearchInput {
  width: 150px;
  height: 28px;
  border: 0;
  border-bottom: 0.1px solid rgba(0, 0, 0, 0.65);
  background: transparent;
  outline: none;
  font-family: "NarkissBlock-Extralight-TRIAL", sans-serif;
  font-size: 16px;
  color: #000000;
  text-transform: lowercase;
  padding: 1px 0;
}

#pageArchive .archiveSearchInput::placeholder {
  color: #c3c1b7;
  text-transform: lowercase;
}

#pageArchive .archiveBody {
  /* Left inset larger than the right, nudging the whole grid slightly right
     -- each card's artwork is inset 10px within its own box (see
     .archivePreview > svg below), so the *visible* map content still
     reaches a bit past the back button on the right. */
  padding: 124px 10px 90px 30px;
  flex: 1;
  min-height: 0;
  overflow: auto;
}

#pageArchive .archiveEmpty {
  z-index: 10;
  font-family: "80-kb-Sharp", "80kb Sharp", Helvetica, sans-serif;
  font-weight: 400;
  font-size: 16px;
  margin-bottom: 18px;
}

#pageArchive .archiveGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 64px;
}

#pageArchive .archiveItem {
  aspect-ratio: 1 / 1;
  border: none;
  outline: none;
  background: transparent;
  position: relative;
  display: grid;
  grid-template-rows: 1fr;
  cursor: pointer;
  box-sizing: border-box;
  /* Gentle, uniform (proportional) shrink of the whole card -- name, stats,
     thumbnail and buttons all scale down together. transform (not a size
     change) so it doesn't reopen the grid/margin alignment tuned above. */
  transform: scale(0.94);
}

#pageArchive .archiveItem:hover {
  background: #edeae2 !important;
}

#pageArchive .archiveItem:hover .archivePreview,
#pageArchive .archiveItem:hover .archiveThumb {
  background: #edeae2 !important;
}

#pageArchive .archivePreview {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#pageArchive .archivePreview > svg {
  position: absolute;
  top: 10px !important;
  left: 10px !important;
  right: 10px !important;
  bottom: 10px !important;
}

#pageArchive .archiveSerial {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  font-family: "NarkissBlock-Extralight-TRIAL", sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1;
  pointer-events: none;
  max-width: calc(100% - 20px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: none !important;
  color: #000000;
}

#pageArchive .archiveAverageBelonging {
  position: absolute;
  top: 84px;
  left: 10px;
  right: 10px;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  font-size: 14px;
  line-height: 1;
  white-space: normal;
  overflow-wrap: anywhere;
  text-transform: lowercase !important;
}

#pageArchive .archiveItem:hover .archiveAverageBelonging {
  opacity: 1;
}

#pageArchive .archiveCumulativeDistance {
  position: absolute;
  top: 103px;
  left: 10px;
  right: 10px;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  font-size: 14px;
  line-height: 1;
  white-space: normal;
  overflow-wrap: anywhere;
  text-transform: lowercase !important;
}

#pageArchive .archiveStatLabel {
  font-family: "NarkissBlock-Extralight-TRIAL", sans-serif;
  font-weight: 400;
}

#pageArchive .archiveStatValue {
  font-family: "NarkissBlock-Regular-TRIAL", sans-serif;
  font-weight: 400;
  font-size: 13px;
}

#pageArchive .archiveItem:hover .archiveCumulativeDistance {
  opacity: 1;
}

#pageArchive .archiveThumb {
  cursor: pointer;
}

#pageArchive .archiveLabel {
  font-family: "80-kb-Sharp", "80kb Sharp", Helvetica, sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: #ff4800;
  padding: 10px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.archiveConfirmBtn:hover:not(:disabled) {
  color: #000000;
}

.archiveConfirmOverlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  background: rgba(244, 241, 228, 0.72);
}

.archiveConfirmDialog {
  width: min(430px, calc(100vw - 84px));
  padding: 22px 24px 18px;
  border: 0.5px solid #545454;
  background: #f4f2ea;
  font-family: "NarkissYair-Regular-TRIAL", "NarkissYair Regular TRIAL", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.25;
  text-transform: lowercase !important;
}

.archiveConfirmMessage {
  white-space: pre-line;
  font-family: "NarkissYair-Regular-TRIAL", "NarkissYair Regular TRIAL", sans-serif;
  font-weight: 400;
  font-size: 14px;
  text-transform: lowercase !important;
}

.archiveConfirmActions {
  display: flex;
  gap: 24px;
  margin-top: 22px;
}

.archiveConfirmBtn {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: #000000;
  cursor: pointer;
  font-family: "NarkissYair-Regular-TRIAL", "NarkissYair Regular TRIAL", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  text-decoration: underline;
  text-transform: lowercase !important;
}

.archiveConfirmBtn:hover {
  color: #000000;
  font-family: "NarkissYair-Bold-TRIAL", "NarkissYair Bold TRIAL", sans-serif;
  font-weight: 700;
}

/* Print: 10x15cm portrait postcard */
@media print {
  @page print-map-option {
    size: 10cm 15cm;
    margin: 0;
  }

  html.printMapOptionMode,
  html.printMapOptionMode body {
    width: 10cm !important;
    height: 15cm !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html.printMapOptionMode body {
    page: print-map-option;
    background: transparent !important;
    color: #000000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  html.printMapOptionMode,
  html.printMapOptionMode body,
  html.printMapOptionMode .app {
    background: transparent !important;
    background-color: transparent !important;
  }

  html.printMapOptionMode .page,
  html.printMapOptionMode .toast,
  html.printMapOptionMode .postcardPreviewOverlay,
  html.printMapOptionMode .printModalBackdrop,
  html.printMapOptionMode .printModalCloseBtn,
  html.printMapOptionMode .printModalOptions,
  html.printMapOptionMode .printModalTitle,
  html.printMapOptionMode .printModalSubtitle,
  html.printMapOptionMode .printOption1Preview,
  html.printMapOptionMode .printMapOptionPreviewActions {
    display: none !important;
  }

  html.printMapOptionMode .printModalOverlay,
  html.printMapOptionMode .printModalPanel,
  html.printMapOptionMode .printMapOptionPreview,
  html.printMapOptionMode .printMapOptionPreviewViewport,
  html.printMapOptionMode .printMapOptionPreviewStageWrap,
  html.printMapOptionMode .printMapOptionPreviewStage {
    display: block !important;
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 10cm !important;
    height: 15cm !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html.printMapOptionMode .printMapOptionCard {
    width: 1027px !important;
    height: 1540px !important;
    transform: scale(0.368015);
    transform-origin: top left;
  }

  /* Print-only: postcard logo should be black */
  body.postcardPrintMode .postcardCardLogo {
    color: #000000 !important;
  }
  body.postcardPrintMode .postcardLogoDivider {
    background: #000000 !important;
  }
  /* Print-only: move the logo dot down by 2px */
  body.postcardPrintMode .postcardLogoDot {
    transform: translate(calc(-50% + 1px), 0px) !important;
  }
  @page {
    size: 10cm 15cm;
    margin: 0;
  }

  /* When printing from the postcard preview, hide the app pages and only print the card. */
  body.postcardPrintMode .page,
  body.postcardPrintMode .toast {
    display: none !important;
  }

  body.postcardPrintMode .postcardPreviewBackdrop,
  body.postcardPrintMode .postcardPreviewToolbar {
    display: none !important;
  }

  body.postcardPrintMode .postcardPreviewOverlay {
    display: block !important;
    position: fixed;
    inset: 0;
    opacity: 1 !important;
    visibility: visible !important;
  }

  body.postcardPrintMode .postcardCard {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border: 0 !important;
  }

  /* Postcard edge border (postcard print only) */
  body.postcardPrintMode::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 10cm;
    height: 15cm;
    border: 1px solid #000000;
    box-sizing: border-box;
    z-index: 999999;
    pointer-events: none;
  }

  html,
  body {
    width: 10cm;
    height: 15cm;
    margin: 0;
    padding: 0;
  }

  body {
    background: #f4f2ea;
    color: #000000;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Only print the currently-visible page */
  .page.hidden {
    display: none !important;
  }

  /* Hide UI chrome/controls in print */
  .topbar,
  .step2Actions,
  .step2BottomActions,
  .welcomeBottomButtons,
  #signatureLabel,
  #emotionTitle,
  button,
  input,
  textarea,
  select {
    display: none !important;
  }

  /* Remove scrollbars / extra layout constraints */
  .app {
    width: 10cm;
    height: 15cm;
    margin: 0;
    padding: 0;
  }

  .page {
    min-height: 0 !important;
  }

  /* Step 2 Leaflet map prints inside the postcard border */
  #pageStep2 {
    width: 10cm !important;
    height: 15cm !important;
    padding: 0 !important;
    overflow: hidden;
    position: relative;
  }

  #pageStep2 .mapWrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
  }

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

  /* Hide Leaflet controls/attribution while printing */
  #pageStep2 #map .leaflet-control-container,
  #pageStep2 #map .leaflet-control-attribution {
    display: none !important;
  }

}

/* Print option 1: review canvas only, matching the red-frame content area. */
@media print {
  @page print-option-1 {
    size: 15cm 10cm;
    margin: 0;
  }

  html.printOption1Mode,
  html.printOption1Mode body {
    width: 15cm !important;
    height: 10cm !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html.printOption1Mode body {
    page: print-option-1;
    background: transparent !important;
    color: #000000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  html.printOption1Mode,
  html.printOption1Mode body,
  html.printOption1Mode .app,
  html.printOption1Mode #pageStep1,
  html.printOption1Mode #pageStep1 .frame {
    background: transparent !important;
    background-color: transparent !important;
  }

  html.printOption1Mode .app {
    width: 15cm !important;
    height: 10cm !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html.printOption1Mode .page,
  html.printOption1Mode .toast,
  html.printOption1Mode .printModalOverlay,
  html.printOption1Mode .postcardPreviewOverlay {
    display: none !important;
  }

  html.printOption1Mode #pageStep1 {
    --step1-dashboard-top: 230.1px;
    --step1-dashboard-top-section: 518.94px;
    --step1-dashboard-bottom-section: 345.96px;
    --step1-dashboard-height: 864.9px;
    display: block !important;
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 1540px !important;
    height: 1027px !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
    /* Centers the *actual printed content* (not the raw 1540x1027 frame,
       which has empty margin baked into its own bottom -- the real content
       only spans design-y 36 (logo) to ~1016 (ring reading / belonging over
       time bottom, verified identical across every map's data since it's
       driven by fixed CSS positioning, not per-map content), not the full
       1027. Centering the bare frame instead (as this used to) put a
       symmetric 15.12px margin around the *frame*, which reads as a much
       bigger gap below the content than above it, since the content itself
       sits closer to the frame's own top. Centering on the 36-1016 content
       band instead gives top ≈ bottom ≈ 23.08px, matching the horizontal
       22.72px margins established above. */
    transform: translate(22.72px, 10.9px) scale(0.33856) !important;
    transform-origin: top left !important;
  }

  html.printOption1Mode #pageStep1::after {
    content: "";
    position: fixed;
    left: 0;
    top: 36px;
    width: 150px;
    height: 66px;
    background: url("logo.png") left top / contain no-repeat;
    z-index: 999999;
    pointer-events: none;
  }

  html.printOption1Mode #pageStep1::before {
    content: none;
    position: fixed;
    left: 0;
    top: 110px;
    width: 180px;
    font-family: "NarkissBlock-Light-TRIAL", sans-serif;
    font-size: 22px;
    line-height: 1.1;
    color: #000000;
    text-transform: none;
    z-index: 999999;
    pointer-events: none;
    white-space: normal;
  }

  html.printOption1Mode #pageStep1 .frame {
    width: 1920px !important;
    height: 1080px !important;
    transform: translate(0, -79px) scale(1) !important;
    transform-origin: top left !important;
  }

  html.printOption1Mode #pageStep1 .life-path,
  html.printOption1Mode #pageStep1 .step1TopActions,
  html.printOption1Mode #pageStep1 .step1TopProgress,
  html.printOption1Mode #pageStep1 .step1MapCompleteTitle,
  html.printOption1Mode #pageStep1 .step1EditModeTitle,
  html.printOption1Mode #pageStep1 .createYourMapTitle,
  html.printOption1Mode #pageStep1 .step1LogoIntro,
  html.printOption1Mode #pageStep1 .step1-right,
  html.printOption1Mode #pageStep1 .step1FullscreenBtn,
  html.printOption1Mode #pageStep1 .step1HomesListTitle,
  html.printOption1Mode #pageStep1 .step1HomesList,
  html.printOption1Mode #pageStep1 .step1HomesListTitle::before {
    display: none !important;
  }
}

/* Screen preview: 10x15cm postcard overlay (mirrors print layout) */
.postcardPreviewOverlay {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: none;
}

body.postcardPreviewOpen .postcardPreviewOverlay {
  display: block;
}

/* Silent postcard mode: used for direct printing without showing the modal UI.
   Keep the overlay in layout (for Leaflet sizing) but invisible. */
body.postcardPreviewSilent .postcardPreviewOverlay {
  display: block;
  opacity: 0;
  pointer-events: none;
}

body.postcardPreviewSilent .postcardPreviewBackdrop,
body.postcardPreviewSilent .postcardPreviewToolbar {
  display: none !important;
}

.postcardPreviewOverlay.hidden {
  display: none;
}

.printModalOverlay {
  position: fixed;
  inset: 0;
  z-index: 3900;
  display: none;
}

body.printModalOpen .printModalOverlay {
  display: block;
}

.printModalOverlay.hidden {
  display: none;
}

/* Shown from the moment a postcard is sent to print (see
   printReviewOption1()/printMapOption() in print-modal.js) -- covers the
   print-mode CSS transition (basemap/layout swaps, etc.) that would
   otherwise flash on screen while the browser prepares its own print
   dialog. Left open after window.print() returns, now offering "keep
   exploring" / "start over", until the user picks one. Same
   backdrop-over-page + centered-panel structure as .printModalOverlay /
   .printModalBackdrop / .printModalPanel below -- the map data page stays
   visible (dimmed) underneath instead of being fully covered. */
.printSendingOverlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
}

.printSendingOverlay.hidden {
  display: none;
}

.printSendingBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.28);
}

.printSendingCard {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  width: 15cm;
  height: 10cm;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 22px;
  text-align: left;
  /* Shifted in from the card's own top-left corner (not flush against it)
     -- more top/left padding than right/bottom. */
  padding: 56px 24px 32px 56px;
  box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background: #f4f2ea;
}

.printSendingTitle {
  margin: 0;
  font-family: "NarkissBlock-Regular-TRIAL", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: #000000;
  text-transform: lowercase;
}

.printSendingStats {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.printSendingStatRow {
  display: flex;
  align-items: baseline;
  gap: 6px;
  line-height: 1.3;
}

.printSendingStatLabel {
  /* Fixed width (not sized to its own text) so every value span below
     starts at the same x position, forming a left-aligned column. */
  flex: 0 0 140px;
  font-family: "NarkissBlock-Extralight-TRIAL", sans-serif;
  font-weight: 400;
  font-size: 15px;
  color: #000000;
  text-transform: lowercase;
}

.printSendingStatValue {
  font-family: "NarkissBlock-Regular-TRIAL", sans-serif;
  font-weight: 400;
  font-size: 15px;
  color: #000000;
  text-transform: lowercase;
}

/* The name row has no label span (see index.html) -- its value sits flush
   at the row's own left edge, i.e. aligned with the labels column, not
   indented into the values column like every other row. */
.printSendingMapNameRow {
  gap: 0;
}

.printSendingActions {
  display: flex;
  align-items: center;
  gap: 28px;
  /* Pushed to the card's bottom edge regardless of how tall the stats
     block above ends up, then nudged back up 20px off that edge. Left-
     aligned with the rest of the card's text (the card's own default
     align-items: flex-start already does this -- no align-self override). */
  margin-top: auto;
  margin-bottom: 20px;
}

.printSendingActionBtn {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

button:hover .btnImgKeepExploring {
  content: url("buttons/keep exploring hover.png");
}

/* Screen-only -- never let this print itself if a print/render race ever
   left it visible when the browser's own print pass actually runs. */
@media print {
  .printSendingOverlay {
    display: none !important;
  }
}

.printModalBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.28);
}

.printModalPanel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(760px, calc(100vw - 56px));
  height: min(490px, calc(100vh - 56px));
  transform: translate(-50%, -50%);
  background: #f4f2ea;
  box-sizing: border-box;
}

.printModalOverlay.printModalShowingPreview .printModalPanel {
  width: min(1180px, calc(100vw - 64px));
  height: min(820px, calc(100vh - 64px));
}

/* X mark drawn with two rotated pseudo-elements instead of a glyph -- the
   app's custom fonts don't cover the × character (renders as tofu), and
   this keeps the mark's weight/look consistent with the rest of the site's
   thin drawn lines regardless of font availability. */
.printModalCloseBtn {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 16px;
  height: 16px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.printModalCloseBtn::before,
.printModalCloseBtn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 1px;
  background: #000000;
  transform-origin: center;
}

.printModalCloseBtn::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.printModalCloseBtn::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.printModalCloseBtn:hover::before,
.printModalCloseBtn:hover::after {
  background: #8e3300;
}

.printModalTitle {
  position: absolute;
  left: 26px;
  top: 22px;
  margin: 0;
  font-family: "NarkissBlock-Regular-TRIAL", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  text-transform: lowercase;
  color: #000000;
}

.printModalSubtitle {
  position: absolute;
  left: 26px;
  top: 42px;
  margin: 0;
  font-family: "NarkissBlock-Extralight-TRIAL", sans-serif;
  font-size: 14px;
  line-height: 1;
  text-transform: lowercase;
  color: #000000;
}

.printModalOptions {
  position: absolute;
  left: 50%;
  top: 92px;
  width: min(708px, calc(100% - 52px));
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

.printModalOptionBtn {
  border: 0;
  background: transparent;
  color: #000000;
  padding: 0;
  font-family: "NarkissBlock-Regular-TRIAL", sans-serif;
  font-size: 18px;
  line-height: 1;
  text-transform: lowercase;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.printModalOptionBtn:disabled {
  cursor: default;
  opacity: 0.35;
}

.printModalOptionThumb {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: transparent;
  border: 0.5px solid rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  flex: 0 0 auto;
}

.printModalOptionThumbStage {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

/* Scale tuned so the full design-size stage (1027x1540) exactly fills the
   thumb's own width (220px, matching .printModalOptions' 3-column math
   above: (708px - 2*24px gap) / 3 = 220px) -- the biggest the options can
   go while still fitting 3 across the panel without shrinking its margins
   to nothing. */
.printModalOptionThumb .printMapOptionThumbStage {
  width: 1027px;
  height: 1540px;
  transform: scale(0.214216);
  transform-origin: top left;
}

.printModalOptionThumb .printOption1ThumbStage {
  left: 220px;
  width: 1540px;
  height: 1027px;
  transform: rotate(90deg) scale(0.214216);
  transform-origin: top left;
}

.printModalOptionLabel {
  display: block;
  align-self: flex-start;
  font-family: "NarkissBlock-Regular-TRIAL", sans-serif;
  font-size: 13px;
  line-height: 1;
  text-transform: lowercase;
  color: #000000 !important;
}

/* Hovering one option keeps it as-is and dims the other two (thumb + name
   together, via opacity on the whole button) to 40% -- explicitly excludes
   the global button:hover color change (styles.css ~4017) from touching this
   button's own name, since that rule would otherwise tint it orange. */
.printModalOptions:hover .printModalOptionBtn:not(:hover) {
  opacity: 0.3;
}

.printModalOptionBtn:hover,
.printModalOptionBtn:hover .printModalOptionLabel {
  color: #000000 !important;
}

.printModalOverlay.printModalShowingPreview .printModalOptions,
.printModalOverlay.printModalShowingPreview .printModalTitle,
.printModalOverlay.printModalShowingPreview .printModalSubtitle {
  display: none;
}

.printOption1Preview.hidden,
.printMapOptionPreview.hidden {
  display: none;
}

.printOption1Preview,
.printMapOptionPreview {
  position: absolute;
  inset: 54px 28px 28px 28px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.printOption1PreviewActions,
.printMapOptionPreviewActions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.printModalTextBtn {
  border: 0;
  padding: 0;
  background: transparent;
  color: #000000;
  font-family: "NarkissBlock-Regular-TRIAL", sans-serif;
  font-size: 16px;
  line-height: 1;
  text-transform: lowercase;
  cursor: pointer;
}

.printOption1PreviewViewport,
.printMapOptionPreviewViewport {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: transparent;
  border: 0;
}

.printOption1PreviewStageWrap,
.printMapOptionPreviewStageWrap {
  position: relative;
  flex: 0 0 auto;
  outline: 1px solid rgba(0, 0, 0, 0.2);
}

.printMapOptionPreviewStage {
  position: absolute;
  left: 0;
  top: 0;
  width: 1027px;
  height: 1540px;
  overflow: hidden;
  background: transparent;
  transform: scale(var(--print-map-option-preview-scale, 0.45));
  transform-origin: top left;
  pointer-events: none;
}

.printMapOptionCard {
  position: relative;
  width: 1027px;
  height: 1540px;
  overflow: hidden;
  background: transparent;
}

.printMapOptionLogo {
  position: absolute;
  left: 36px;
  top: 36px;
  width: 150px;
  height: 66px;
  object-fit: contain;
  object-position: left top;
  z-index: 3;
}

.printMapOptionName {
  position: absolute;
  /* Below the logo (left:36/top:36, height:66), aligned to its left edge --
     was bottom-left of the whole card. */
  left: 36px;
  top: 118px;
  width: 260px;
  font-family: "NarkissBlock-Regular-TRIAL", sans-serif;
  font-size: 26px;
  line-height: 1.15;
  color: #000000;
  text-transform: none;
  text-align: left;
  z-index: 3;
}

.printMapOptionBelonging {
  position: absolute;
  left: 36px;
  bottom: 36px;
  font-family: "NarkissBlock-Regular-TRIAL", sans-serif;
  font-size: 26px;
  line-height: 1;
  color: #000000;
  text-transform: lowercase;
  z-index: 3;
}

.printMapOptionMapHost {
  position: absolute;
  left: 54px;
  right: 54px;
  top: 130px;
  bottom: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.printMapOptionMapHost svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  overflow: visible;
  transform: scale(1.3);
  transform-origin: center;
}

.printMapOptionCard.printMapOptionMovement .printMapOptionMapHost {
  inset: 15%;
}

.printMapOptionCard.printMapOptionMovement .printMapOptionMapHost svg {
  transform: none;
}

.printOption1PreviewStage {
  position: absolute;
  left: 0;
  top: 0;
  width: 1540px;
  height: 1027px;
  overflow: hidden;
  background: transparent;
  transform: scale(var(--print-option1-preview-scale, 0.5));
  transform-origin: top left;
  pointer-events: none;
}

.printOption1PreviewStage::after {
  content: "";
  position: absolute;
  left: 36px;
  top: 36px;
  width: 150px;
  height: 66px;
  background: url("logo.png") left top / contain no-repeat;
  z-index: 999999;
  pointer-events: none;
}

.printOption1PreviewStage #pageStep1::before {
  content: none;
  position: absolute;
  left: 36px;
  top: 110px;
  width: 180px;
  font-family: "NarkissBlock-Light-TRIAL", sans-serif;
  font-size: 22px;
  line-height: 1.1;
  color: #000000;
  text-transform: none;
  z-index: 999999;
  pointer-events: none;
  white-space: normal;
}

.printOption1PreviewStage .printOption1PreviewPage {
  --step1-dashboard-top: 230.1px;
  --step1-dashboard-top-section: 518.94px;
  --step1-dashboard-bottom-section: 345.96px;
  --step1-dashboard-height: 864.9px;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 1540px !important;
  height: 1027px !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
}

.printOption1PreviewStage .printOption1PreviewPage .printOption1PreviewFrame {
  width: 1920px !important;
  height: 1080px !important;
  transform: translate(0, -79px) scale(1) !important;
  transform-origin: top left !important;
}

.printOption1PreviewStage .life-path,
.printOption1PreviewStage .step1TopActions,
.printOption1PreviewStage .step1TopProgress,
.printOption1PreviewStage .step1MapCompleteTitle,
.printOption1PreviewStage .step1EditModeTitle,
.printOption1PreviewStage .createYourMapTitle,
.printOption1PreviewStage .step1LogoIntro,
.printOption1PreviewStage .step1-right,
.printOption1PreviewStage .step1FullscreenBtn,
.printOption1PreviewStage .step1HomesList,
.printOption1PreviewStage .step1HomesListTitle::before {
  display: none !important;
}

html.printOption1ManyAddresses .printOption1PreviewStage #pageStep1 .step1-right,
html.printOption1ManyAddresses.printOption1Mode #pageStep1 .step1-right {
  height: var(--step1-dashboard-top-section, 486px) !important;
}

html.printOption1ManyAddresses .printOption1PreviewStage #pageStep1 .step1GeoMap,
html.printOption1ManyAddresses.printOption1Mode #pageStep1 .step1GeoMap {
  height: calc(100% - 30px) !important;
}

.printOption1PreviewStage #pageStep1 .step1GeoMap .leaflet-tile-pane,
html.printOption1Mode #pageStep1 .step1GeoMap .leaflet-tile-pane {
  filter: grayscale(1) contrast(0.72) brightness(1.08) !important;
  opacity: 0.25 !important;
  mix-blend-mode: normal !important;
}

html.printOption1ManyAddresses .printOption1PreviewStage #pageStep1 .step1RingReading,
html.printOption1ManyAddresses.printOption1Mode #pageStep1 .step1RingReading {
  left: 0 !important;
  top: calc(var(--step1-dashboard-top, 285px) + var(--step1-dashboard-top-section, 486px) + 30px) !important;
  width: 1020px !important;
  height: calc(var(--step1-dashboard-bottom-section, 324px) - 30px) !important;
  padding-left: 0 !important;
  padding-right: 30px !important;
  overflow: visible !important;
}

html.printOption1ManyAddresses .printOption1PreviewStage #pageStep1 .step1RingReading::before,
html.printOption1ManyAddresses.printOption1Mode #pageStep1 .step1RingReading::before {
  content: "";
  position: absolute;
  left: 0;
  top: -30px;
  width: 560px;
  height: 0.1px;
  background: #000000;
  opacity: 0.4;
  pointer-events: none;
  z-index: 5;
}

html.printOption1SingleAddressColumn .printOption1PreviewStage #pageStep1 .step1RingReading::before,
html.printOption1SingleAddressColumn.printOption1Mode #pageStep1 .step1RingReading::before {
  width: 280px;
}

html.printOption1ManyAddresses .printOption1PreviewStage #pageStep1 .step1EmotionMap::before,
html.printOption1ManyAddresses.printOption1Mode #pageStep1 .step1EmotionMap::before {
  content: "";
  position: absolute;
  left: 0;
  top: 40px;
  width: 0.1px;
  height: calc(100% - 40px);
  background: #000000;
  opacity: 0.4;
  pointer-events: none;
  z-index: 5;
}

/* 10px here, not 40px like .step1EmotionMap::before -- .step1RoutePreview's
   own box already starts 30px lower than .step1EmotionMap's (top: dashboard-
   top + 30 vs just dashboard-top), so 10px here lands this divider's top at
   the exact same absolute position as the emotion map's divider (both
   boxes share the same bottom edge already, so only the top needed
   compensating). */
.printOption1PreviewStage #pageStep1 .step1RoutePreview::before,
html.printOption1Mode #pageStep1 .step1RoutePreview::before {
  top: 10px !important;
  height: calc(100% - 10px) !important;
  opacity: 0.4 !important;
}

.printOption1PreviewStage #pageStep1 .step1RoutePreview svg,
html.printOption1Mode #pageStep1 .step1RoutePreview svg {
  preserve-aspect-ratio: xMidYMid meet;
  /* Route content only, 25px higher than its normal translate(5px, 0) --
     .step1RoutePreview itself (the frame) and its ::before divider are
     untouched, this only moves the drawn route/dots inside. (A previous
     scaleX() hack lived here to visually narrow the route back down to the
     on-screen proportions, but that couldn't correctly handle every map:
     the "zoom to fit" in updateStep1RoutePreview() picks whichever of
     width/height is the tighter constraint per that map's own lon/lat
     spread, so a flat post-hoc squeeze doesn't reproduce the on-screen
     layout for maps where the binding axis differs between the two panel
     shapes. Fixed at the source instead -- see contentW/contentOffsetX in
     that function, which computes the fit against a fixed on-screen-width
     content area centered in the wider print panel, so this only needs the
     plain translate.) */
  transform: translate(5px, 5px) !important;
}

.printOption1PreviewStage #pageStep1 .step1RoutePreview svg line[data-print-route-line="1"],
html.printOption1Mode #pageStep1 .step1RoutePreview svg line[data-print-route-line="1"] {
  display: block;
}

.printOption1PreviewStage #pageStep1 .step1RoutePreview canvas[data-step1-route-line-canvas="1"],
html.printOption1Mode #pageStep1 .step1RoutePreview canvas[data-step1-route-line-canvas="1"] {
  display: none !important;
}

html.printOption1ManyAddresses .printOption1PreviewStage #pageStep1 .step1MoveFrequencyLabel,
html.printOption1ManyAddresses.printOption1Mode #pageStep1 .step1MoveFrequencyLabel {
  top: 165px !important;
}

.printOption1PreviewStage #pageStep1 .step1EmotionMapTitle,
.printOption1PreviewStage #pageStep1 .step1MovementMapTitleCenter,
.printOption1PreviewStage #pageStep1 .step1RingReadingTitle,
.printOption1PreviewStage #pageStep1 .step1TimeBelongingTitle,
.printOption1PreviewStage #pageStep1 .step1HomeCountLabel,
.printOption1PreviewStage #pageStep1 .step1MoveFrequencyLabel,
html.printOption1Mode #pageStep1 .step1EmotionMapTitle,
html.printOption1Mode #pageStep1 .step1MovementMapTitleCenter,
html.printOption1Mode #pageStep1 .step1RingReadingTitle,
html.printOption1Mode #pageStep1 .step1TimeBelongingTitle,
html.printOption1Mode #pageStep1 .step1HomeCountLabel,
html.printOption1Mode #pageStep1 .step1MoveFrequencyLabel {
  font-size: calc(22.5px / var(--step1-scale, 1)) !important;
}

.printOption1PreviewStage #pageStep1 .step1HomeCountLabel,
html.printOption1Mode #pageStep1 .step1HomeCountLabel {
  display: none !important;
}

.printOption1PreviewStage #pageStep1 .step1JourneyTimeline,
html.printOption1Mode #pageStep1 .step1JourneyTimeline {
  left: var(--print-option1-timeline-left, 206px) !important;
  top: calc(177px + (11.25px / var(--step1-scale, 1))) !important;
  width: calc(1540px - var(--print-option1-timeline-left, 206px)) !important;
}

.printOption1PreviewStage #pageStep1 .step1MoveFrequencyLabel,
html.printOption1Mode #pageStep1 .step1MoveFrequencyLabel {
  display: none !important;
}

.printOption1PreviewStage #pageStep1 .step1JourneyTimeline text,
html.printOption1Mode #pageStep1 .step1JourneyTimeline text {
  font-size: calc(21.5px / var(--step1-scale, 1)) !important;
}

html.printOption1ManyAddresses .printOption1PreviewStage #pageStep1 .step1RingReadingContent,
html.printOption1ManyAddresses.printOption1Mode #pageStep1 .step1RingReadingContent {
  overflow: hidden !important;
  scrollbar-width: none !important;
  padding-bottom: 0 !important;
  gap: 10px !important;
}

html.printOption1ManyAddresses .printOption1PreviewStage #pageStep1 .step1RingReadingContent::-webkit-scrollbar,
html.printOption1ManyAddresses.printOption1Mode #pageStep1 .step1RingReadingContent::-webkit-scrollbar {
  display: none !important;
}

html.printOption1ManyAddresses .printOption1PreviewStage #pageStep1 .step1RingReadingContent svg,
html.printOption1ManyAddresses.printOption1Mode #pageStep1 .step1RingReadingContent svg {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-height: 100% !important;
}

html.printOption1ManyAddresses .printOption1PreviewStage #pageStep1 .step1TimeBelonging,
html.printOption1ManyAddresses.printOption1Mode #pageStep1 .step1TimeBelonging {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  /* No right padding (was 30px both sides) -- right-aligns the chart's own
     edge with .step1RoutePreview::after's right endpoint (right:0, i.e.
     the movement map's own right edge, the horizontal divider under it). */
  padding: 0 0 0 30px !important;
}

.printOption1PreviewStage #pageStep1 .step1TimeBelonging::before,
html.printOption1Mode #pageStep1 .step1TimeBelonging::before {
  display: block !important;
  top: -30px !important;
  height: calc(100% + 30px) !important;
  opacity: 0.4 !important;
}

.printOption1PreviewStage #pageStep1 .step1EmotionMap::after,
html.printOption1Mode #pageStep1 .step1EmotionMap::after {
  opacity: 0.4 !important;
}

.printOption1PreviewStage #pageStep1 .step1RoutePreview::after,
html.printOption1Mode #pageStep1 .step1RoutePreview::after {
  right: 0 !important;
  opacity: 0.4 !important;
}

html.printOption1ManyAddresses .printOption1PreviewStage #pageStep1 .step1TimeBelongingTitle,
html.printOption1ManyAddresses.printOption1Mode #pageStep1 .step1TimeBelongingTitle {
  flex: 0 0 auto !important;
}

html.printOption1ManyAddresses .printOption1PreviewStage #pageStep1 .step1TimeBelongingChart,
html.printOption1ManyAddresses.printOption1Mode #pageStep1 .step1TimeBelongingChart {
  flex: 0 0 calc(100% - 44px) !important;
  width: 100% !important;
}

/* Axis numbers + "belonging"/"years" legend (text and swatch lines, all
   .tb-label) -- drawn by _tbDrawDurationCurve() in app.js with an inline
   fill/stroke of #c3c1b7 and a flat font-size="13" (SVG user units, so it
   already scales with the chart's own box); overridden here to black and
   1px bigger, using the same calc(Npx/scale) pattern as the rest of this
   print layout's text so the size stays consistent across viewports. */
.printOption1PreviewStage #pageStep1 .step1TimeBelongingChart .tb-label,
html.printOption1Mode #pageStep1 .step1TimeBelongingChart .tb-label {
  fill: #000000 !important;
  stroke: #000000 !important;
  font-size: calc(13px / var(--step1-scale, 1)) !important;
  font-family: "NarkissBlock-Extralight-TRIAL", sans-serif !important;
}

.printOption1PreviewStage #pageStep1 .step1TimeBelongingChart .tb-line-seg,
html.printOption1Mode #pageStep1 .step1TimeBelongingChart .tb-line-seg {
  stroke-width: 0.75 !important;
}

.printOption1PreviewStage #pageStep1 .step1HomesList,
html.printOption1Mode #pageStep1 .step1HomesList {
  display: none !important;
  position: absolute !important;
  left: 0 !important;
  top: calc(var(--step1-dashboard-top, 285px) + 96px) !important;
  width: 560px !important;
  height: calc(var(--step1-dashboard-top-section, 486px) - 116px) !important;
  padding: 0 8px 0 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  column-count: 1;
  column-gap: 24px;
}

.printOption1PreviewStage #pageStep1 .step1HomesListTitle,
html.printOption1Mode #pageStep1 .step1HomesListTitle {
  display: none !important;
}

/* Stats (left) column narrower again -- 460 + 540 + 540 = 1540, still a
   fixed split shared by every map's option 1 print regardless of address
   count (see the equal-thirds comment further down for why that
   "regardless of map" part matters). --print-option1-stats-value-left
   stays at 278px (label column = 278 - 18px gap = 260px, still fits the
   longest label, "avarage years in home", which needs ~254px). What's left
   for the value column is 460 - 18px right pad - 260 - 18px gap = 164px,
   still comfortably above the widest realistic value (e.g. "15158 km"
   needs ~110px) -- shrinking the column this much doesn't reintroduce the
   truncation the earlier 400px version had. */
.printOption1PreviewStage #pageStep1,
html.printOption1Mode #pageStep1 {
  --print-option1-stats-width: 460px;
  --print-option1-panel-width: 540px;
  --print-option1-panel-2-left: 460px;
  --print-option1-panel-3-left: 1000px;
  --print-option1-two-panel-width: 1000px;
  --print-option1-stats-value-left: 278px;
  --print-option1-timeline-left: 206px;
}

/* Fixed three-way split (stats / emotion map / movement map), unconditionally
   -- previously .printOption1SingleAddressColumn (5-7 addresses) widened this
   panel to 740px starting at 280px, breaking the shared layout and leaving a
   gap before the movement map's own column. Every map option 1 can print
   (5+ addresses, see isPrintOption1Available()) now gets the same three-way
   split regardless of address count. */
.printOption1PreviewStage #pageStep1 .step1EmotionMap,
.printOption1PreviewStage #pageStep1 .step1EmotionMapTitle,
html.printOption1Mode #pageStep1 .step1EmotionMap,
html.printOption1Mode #pageStep1 .step1EmotionMapTitle {
  left: var(--print-option1-panel-2-left) !important;
  width: var(--print-option1-panel-width) !important;
}

/* Rings only, not the panel box/divider -- raised further within its
   section (overview postcard). */
.printOption1PreviewStage #pageStep1 .step1EmotionSvg,
html.printOption1Mode #pageStep1 .step1EmotionSvg {
  transform: translateY(40px) !important;
}

.printOption1PreviewStage #pageStep1 .step1RoutePreview,
.printOption1PreviewStage #pageStep1 .step1MovementMapTitleCenter,
html.printOption1Mode #pageStep1 .step1RoutePreview,
html.printOption1Mode #pageStep1 .step1MovementMapTitleCenter {
  left: var(--print-option1-panel-3-left) !important;
  width: var(--print-option1-panel-width) !important;
}

html.printOption1ManyAddresses .printOption1PreviewStage #pageStep1 .step1RingReading,
html.printOption1ManyAddresses.printOption1Mode #pageStep1 .step1RingReading {
  width: var(--print-option1-two-panel-width) !important;
}

html.printOption1ManyAddresses .printOption1PreviewStage #pageStep1 .step1RingReading::before,
html.printOption1ManyAddresses.printOption1Mode #pageStep1 .step1RingReading::before {
  width: var(--print-option1-stats-width) !important;
}

.printOption1PreviewStage #pageStep1 .step1TimeBelonging,
html.printOption1Mode #pageStep1 .step1TimeBelonging {
  left: var(--print-option1-panel-3-left) !important;
  width: var(--print-option1-panel-width) !important;
}

.printOption1PreviewStage #pageStep1 .printOption1Stats,
html.printOption1Mode #pageStep1 .printOption1Stats {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  position: absolute !important;
  left: 0 !important;
  top: calc(var(--step1-dashboard-top, 285px) + 40px - 79px) !important;
  width: var(--print-option1-stats-width) !important;
  height: calc(var(--step1-dashboard-top-section, 486px) - 60px + 79px) !important;
  gap: 20px !important;
  padding: 0 18px 0 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  font-family: "NarkissBlock-Light-TRIAL", sans-serif;
  font-size: 27px !important;
  line-height: 1.05 !important;
  color: #000000;
  text-align: left !important;
  text-transform: lowercase;
  z-index: 10;
}

.printOption1PreviewStage #pageStep1 .printOption1Stats {
  left: 36px !important;
  width: calc(var(--print-option1-stats-width) - 36px) !important;
}

.printOption1PreviewStage #pageStep1 .printOption1StatsRow,
html.printOption1Mode #pageStep1 .printOption1StatsRow {
  display: flex !important;
  align-items: baseline !important;
  justify-content: flex-start !important;
  gap: 18px !important;
  width: 100% !important;
  text-align: left !important;
}

.printOption1PreviewStage #pageStep1 .printOption1StatsNameRow,
html.printOption1Mode #pageStep1 .printOption1StatsNameRow {
  display: block !important;
}

.printOption1PreviewStage #pageStep1 .printOption1StatsNameRow .printOption1StatsValue,
html.printOption1Mode #pageStep1 .printOption1StatsNameRow .printOption1StatsValue {
  display: block !important;
  text-align: left !important;
  font-family: "NarkissBlock-Light-TRIAL", sans-serif !important;
  font-weight: 400 !important;
}

.printOption1PreviewStage #pageStep1 .printOption1StatsLabel,
.printOption1PreviewStage #pageStep1 .printOption1StatsValue,
html.printOption1Mode #pageStep1 .printOption1StatsLabel,
html.printOption1Mode #pageStep1 .printOption1StatsValue {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.printOption1PreviewStage #pageStep1 .printOption1StatsValue,
html.printOption1Mode #pageStep1 .printOption1StatsValue {
  text-align: left !important;
  font-family: "NarkissBlock-Regular-TRIAL", sans-serif !important;
}

.printOption1PreviewStage #pageStep1 .printOption1StatsLabel,
html.printOption1Mode #pageStep1 .printOption1StatsLabel {
  text-align: left !important;
  /* Fixed label-column width so every row's value lines up at the same x
     (left-aligned to each other) regardless of that row's own label length
     -- completes the --print-option1-stats-value-left plan described in
     the comment above .printOption1Stats' own left/width block: value
     column starts at 278px, minus the row's 18px flex gap = 260px here. */
  width: calc(var(--print-option1-stats-value-left) - 18px) !important;
  flex: none !important;
}

html.printOption1ManyAddresses .printOption1PreviewStage #pageStep1 .step1HomesList,
html.printOption1ManyAddresses.printOption1Mode #pageStep1 .step1HomesList {
  column-count: 2;
}

html.printOption1SingleAddressColumn .printOption1PreviewStage #pageStep1 .step1HomesList,
html.printOption1SingleAddressColumn.printOption1Mode #pageStep1 .step1HomesList {
  width: 280px !important;
  column-count: 1 !important;
}

.printOption1PreviewStage #pageStep1 .step1HomesList .homesListItem,
html.printOption1Mode #pageStep1 .step1HomesList .homesListItem {
  display: block !important;
  break-inside: avoid;
  page-break-inside: avoid;
  padding-left: 0 !important;
  text-align: left !important;
  margin-bottom: 10px !important;
  font-size: 16px !important;
  line-height: 1.22 !important;
}

html.printOption1ManyAddresses:not(.printOption1SingleAddressColumn) .printOption1PreviewStage #pageStep1 .step1HomesList .homesListItem:nth-child(8),
html.printOption1ManyAddresses.printOption1Mode:not(.printOption1SingleAddressColumn) #pageStep1 .step1HomesList .homesListItem:nth-child(8) {
  break-before: column !important;
  -webkit-column-break-before: always !important;
}

.printOption1PreviewStage #pageStep1 .step1HomesList .homesListNum,
.printOption1PreviewStage #pageStep1 .step1HomesList .homesListDetail,
html.printOption1Mode #pageStep1 .step1HomesList .homesListNum,
html.printOption1Mode #pageStep1 .step1HomesList .homesListDetail {
  font-size: 16px !important;
  line-height: 1.22 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  text-align: left !important;
  unicode-bidi: plaintext;
}

.printOption1PreviewStage #pageStep1 .step1HomesList .homesListBelonging,
html.printOption1Mode #pageStep1 .step1HomesList .homesListBelonging {
  display: none !important;
}

.postcardPreviewBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.postcardPreviewToolbar {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 4200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #ffffff;
  gap: 12px;
  pointer-events: none;
}

.postcardPreviewTitle {
  font-family: "80-kb-Sharp", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 14px;
  letter-spacing: 0.02em;
  opacity: 0.95;
}

.postcardPreviewActions {
  display: flex;
  gap: 10px;
}

.postcardPreviewBtn {
  pointer-events: auto;
  appearance: none;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #ffffff;
  border-radius: 999px;
  padding: 8px 12px;
  cursor: pointer;
  font: inherit;
  font-size: var(--lifepath-map-button-font-size);
}

.postcardPreviewBtn:hover {
  background: rgba(255, 255, 255, 0.18);
}

body.postcardPreviewOpen {
  overflow: hidden;
}

.postcardCard {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Scale is computed in JS so the 10x15cm card never overflows the viewport. */
  transform: translate(-50%, -50%) scale(var(--postcardPreviewScale, 1));
  transform-origin: center center;
  width: 10cm;
  height: 15cm;
  background: #f4f2ea;
  border: 1px solid #000000;
  box-sizing: border-box;
  border-radius: 10px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
  z-index: 4100;
}

.postcardCardArt {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.postcardCardMapHost {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.postcardCardMapInner {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--postcardMapInnerWpx, 100%);
  height: var(--postcardMapInnerHpx, 100%);
  transform: translate(-50%, -50%) rotate(var(--postcardMapRotate, 0deg));
  transform-origin: center center;
}

.postcardCardMapInner .postcardSnapshotImg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.postcardCardMapInner .postcardOverlaySvg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* In the native print dialog, match the old “fills the frame” feel. */
body.postcardPrintMode .postcardCardMapInner .postcardSnapshotImg {
  object-fit: contain;
  transform: scale(var(--postcardPrintSnapshotScale, 1));
  transform-origin: center center;
}

body.postcardPrintMode .postcardCardMapInner .postcardOverlaySvg {
  transform: scale(var(--postcardPrintSnapshotScale, 1));
  transform-origin: center center;
}

@media print {
  /* Remove the decorative border overlay so nothing clips the map edges. */
  body.postcardPrintMode::before {
    display: none !important;
  }
}

/* When the live Leaflet map is moved into the card, force it to fill the inner box. */
.postcardCardMapInner #map {
  width: 100% !important;
  height: 100% !important;
}

.postcardCardMapInner #map .leaflet-control-container,
.postcardCardMapInner #map .leaflet-control-attribution {
  display: none !important;
}

.postcardCardLogo {
  position: absolute;
  top: 0.35cm;
  left: 0.35cm;
  z-index: 12;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #ff4800;
  font-family: "80-kb-Sharp", "80kb Sharp", Helvetica, sans-serif;
  font-weight: 400;
  font-size: 8pt;
  letter-spacing: 0.06em;
  line-height: 1;
  border-radius: 999px;
}

img.postcardCardLogo {
  width: 1.75cm;
  height: auto;
  display: block;
  border-radius: 0;
}

.postcardLogoWord {
  display: inline-block;
}

.postcardLogoDivider {
  display: inline-block;
  width: 37px;
  height: 1px;
  background: currentColor;
  border-radius: 0;
}

.postcardLogoDot {
  display: inline-block;
  font-size: 13pt;
  transform: translate(calc(-50% + 1px), -1px);
}

.postcardCardMapName {
  position: absolute;
  left: 50%;
  bottom: 0.35cm;
  transform: translateX(-50%);
  z-index: 12;
  color: #000000;
  font-family: "80-kb-Sharp", "80kb Sharp", Helvetica, sans-serif;
  font-weight: 400;
  font-size: 8pt;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.9);
  padding: 6px 10px;
  border-radius: 999px;
}

#pageArchive .archiveLabelBtn {
  appearance: none;
  background: transparent;
  border: 0;
  width: 100%;
  cursor: pointer;
  font-size: var(--lifepath-map-button-font-size);
}

#pageArchive .archiveLabelBtn:hover {
  text-decoration: none;
}

/* All Maps page */
#pageAllMaps {
  padding: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: relative;
}

#pageAllMaps .topbar {
  padding: 36px 42px 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2100;
  background: rgba(255, 255, 255, 0);
}

#pageAllMaps .allMapsActions {
  position: fixed;
  right: 42px;
  /* Matches this page's own top-left logo (.step2LogoText), which uses the
     same calc(34px * var(--step1-scale,1)) -- a flat top here would drift
     apart from the logo on any viewport narrower than the 1920px design
     width. */
  top: calc(34px * var(--step1-scale, 1));
  z-index: 2200;
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

#pageAllMaps .allMapsBackBtn {
  display: inline-block;
  font-family: "NarkissYair-Regular-TRIAL", "NarkissYair Regular TRIAL", sans-serif;
  font-weight: 400;
  font-size: 14.5px;
  text-transform: lowercase !important;
  padding-bottom: 4px;
  margin-bottom: -4px;
  text-decoration: underline;
}

/* All Maps: back hover is orange (matches other pages). */
#pageAllMaps .closeToHomeBtn:hover:not(:disabled) {
  color: #ff4800;
}

#pageAllMaps .allMapsBody {
  margin-top: 0;
  padding: 0;
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

#pageAllMaps .allMapsEmpty {
  position: absolute;
  left: 42px;
  top: 24px;
  z-index: 10;
  font-family: "80-kb-Sharp", "80kb Sharp", Helvetica, sans-serif;
  font-weight: 400;
  font-size: 16px;
}

#pageAllMaps .allMapsMap {
  position: absolute;
  left: 0 !important;
  right: 0 !important;
  /* Shift map up 5px within the frame, without changing its size. */
  top: -10px !important;
  bottom: 0 !important;
}

#pageAllMaps .allMapsMap .leaflet-tile-pane {
  opacity: 0.3;
}

/* A visible basemap displays at full opacity instead of the dimmed default. */
#pageAllMaps.tiles-visible .allMapsMap .leaflet-tile-pane {
  opacity: 1;
}

/* Routes have no hover affordance (no tooltip, no click handler -- only
   the list's on/off buttons toggle highlighting), so their default
   Leaflet cursor:pointer is just misleading once the map itself is
   visible underneath. pointer-events:none removes that cursor AND
   guarantees drag-to-pan/wheel-to-zoom pass straight through to the map
   even when the cursor is directly over a line/circle. */
#pageAllMaps.tiles-visible .allMapsMap .leaflet-interactive {
  pointer-events: none;
}

#pageAllMaps .allMapsPanel {
  position: fixed;
  left: auto;
  right: 42px;
  top: 36px;
  bottom: 24px;
  z-index: 2000;
  max-width: 520px;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-height: 0;
  /* This box spans almost the full viewport height (top:36 to bottom:24)
     regardless of whether the search row/list are actually visible --
     without this, it silently swallows every drag/wheel interaction with
     the map underneath across that whole area, even while collapsed.
    Each actually-interactive descendant re-enables its own
    pointer-events below. */
  pointer-events: none;
}

#pageAllMaps .allMapsSearchWrap,
#pageAllMaps .allMapsList {
  pointer-events: auto;
}

/* Per-map visibility actions in the saved maps list. */
#pageAllMaps .allMapsListToggle {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: #000000;
  font-family: "NarkissYair-Regular-TRIAL", "NarkissYair Regular TRIAL", sans-serif;
  font-weight: 400;
  font-size: 14.5px;
  text-transform: lowercase !important;
  padding-bottom: 4px;
  text-decoration: underline;
  text-decoration-thickness: 0.75px;
  text-underline-offset: 1px;
}

#pageAllMaps .allMapsListToggle:hover:not(:disabled) {
  color: #000000;
  font-family: "NarkissYair-Bold-TRIAL", "NarkissYair Bold TRIAL", sans-serif;
  font-weight: 700;
}

#pageAllMaps .allMapsSearchWrap {
  /* 40% shorter than the original 240px. */
  width: 144px;
  margin: 34px 0 30px;
  display: flex;
  justify-content: flex-end;
}

#pageAllMaps .allMapsSearchInput {
  width: 144px;
  height: 28px;
  border: 0;
  border-bottom: 0.1px solid rgba(0, 0, 0, 0.65);
  background: transparent;
  outline: none;
  color: #000000;
  font-family: "NarkissBlock-Extralight-TRIAL", sans-serif;
  font-size: 16px;
  text-transform: lowercase;
  padding: 1px 0;
}

#pageAllMaps .allMapsSearchInput::placeholder {
  color: #c3c1b7;
  text-transform: lowercase;
}

#pageAllMaps .allMapsSearchInput:focus {
  outline: none;
}

#pageAllMaps #allMapsEditBtn {
  font-family: "80-kb-SharpBold", "80kb Sharp", Helvetica, sans-serif;
  font-weight: 700;
  font-size: var(--lifepath-map-button-font-size);
}

#pageAllMaps .allMapsInfoPanel {
  position: fixed;
  left: 42px;
  top: calc(50% + 22px);
  bottom: auto;
  z-index: 2050;
  width: 74px;
  height: min(360px, calc(50vh - 58px));
  box-sizing: border-box;
  border: 0;
  background: transparent;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  pointer-events: auto;
}

#pageAllMaps .allMapsTimelineToggle {
  border: 0;
  background: transparent;
  padding: 0 0 4px;
  color: #000000;
  cursor: pointer;
  font-family: "NarkissYair-Regular-TRIAL", "NarkissYair Regular TRIAL", sans-serif;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1;
  text-transform: lowercase;
  text-decoration: underline;
  text-decoration-thickness: 0.75px;
  text-underline-offset: 1px;
}

#pageAllMaps .allMapsTimelineToggle:hover:not(:disabled),
#pageAllMaps .allMapsTimelineToggle[aria-expanded="true"] {
  font-family: "NarkissYair-Bold-TRIAL", "NarkissYair Bold TRIAL", sans-serif;
  font-weight: 700;
}

/* Muted/gray icon while the year timeline is collapsed (aria-expanded
   toggled in updateAllMapsYearSlider()), same black buttons/timeline.png
   as every other page once expanded -- an explicit hover override is
   needed too, or the generic "button:hover .btnImgTimeline" rule below
   would lose to this one on specificity and hovering while collapsed
   would show no feedback at all. */
.allMapsTimelineToggle[aria-expanded="false"] .btnImgTimeline {
  content: url("buttons/timeline-close.png");
}

.allMapsTimelineToggle[aria-expanded="false"]:hover:not(:disabled) .btnImgTimeline {
  content: url("buttons/timeline-hover.png");
}

/* Cream icon while the geographic map/tiles are shown (dark basemap behind
   it) -- wins over both states above regardless of source order (the extra
   #pageAllMaps.tiles-visible ID pushes this rule's specificity higher),
   same "no hover feedback while the map is shown" convention as
   show-map.png/hide-map.png. */
#pageAllMaps.tiles-visible .allMapsTimelineToggle .btnImgTimeline {
  content: url("buttons/timeline-map-on.png");
}

#pageAllMaps .allMapsYearControls {
  position: relative;
  flex: 1 1 auto;
  width: 74px;
  min-height: 0;
  display: block;
}

#pageAllMaps .allMapsYearControls.hidden {
  display: none !important;
}

#pageAllMaps .allMapsYearSliderHeader {
  position: absolute;
  left: 24px;
  top: clamp(7px, var(--all-maps-year-position, 0%), calc(100% - 7px));
  transform: translateY(-50%);
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: flex-start;
  gap: 4px;
  white-space: nowrap;
  color: #000000;
  font-family: "NarkissYair-Regular-TRIAL", "NarkissYair Regular TRIAL", sans-serif;
  font-size: 13px;
  line-height: 1;
  text-transform: lowercase;
}

#pageAllMaps .allMapsYearSliderValue {
  font-family: "NarkissYair-Bold-TRIAL", "NarkissYair Bold TRIAL", sans-serif;
  font-weight: 700;
}

#pageAllMaps .allMapsYearSlider {
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 100%;
  margin: 0;
  appearance: none;
  writing-mode: vertical-lr;
  direction: rtl;
  background: transparent;
  cursor: pointer;
}

#pageAllMaps .allMapsYearSlider:disabled {
  cursor: default;
  opacity: 0.45;
}

#pageAllMaps .allMapsYearSlider::-webkit-slider-runnable-track {
  width: 1px;
  height: 100%;
  background: #b6b4aa;
  border-radius: 999px;
}

#pageAllMaps .allMapsYearSlider::-webkit-slider-thumb {
  appearance: none;
  width: 12px;
  height: 12px;
  margin-left: -5px;
  border: 1px solid #77756d;
  border-radius: 50%;
  background: #f4f2ea;
}

#pageAllMaps .allMapsYearSlider::-moz-range-track {
  width: 1px;
  height: 100%;
  background: #b6b4aa;
  border-radius: 999px;
}

#pageAllMaps .allMapsYearSlider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 1px solid #77756d;
  border-radius: 50%;
  background: #f4f2ea;
}

/* All Maps: visible maps count label matches Step 2 signature placement */
#pageAllMaps .allMapsCount {
  display: none !important;
  position: fixed;
  left: 42px;
  top: auto;
  bottom: 30px;
  z-index: 2000;
  font-size: 14px;
  white-space: nowrap;

  font-family: "80-kb-Sharp", "80kb Sharp", Helvetica, sans-serif;
  font-weight: 400;
  pointer-events: none;
}

/* All Maps: zoom percentage label matches Step 2 placement */
#pageAllMaps .allMapsZoom {
  position: fixed;
  left: 235px;
  top: auto;
  bottom: 30px;
  z-index: 2000;
  font-size: 16px;
  white-space: nowrap;

  font-family: "80-kb-Sharp", "80kb Sharp", Helvetica, sans-serif;
  font-weight: 400;
  pointer-events: none;
}

/* All Maps basemap toggle, centered on the left edge. Image-based (see
   updateAllMapsHideMapLabel() in app.js, which swaps both the <img> src
   and its class between the "show map"/"hide map" states) -- color used to
   be driven by .dark-map-ui/.tiles-visible text-color rules, now baked
   into each state's own PNG asset instead (buttons/show-map.png,
   buttons/hide-map.png, both already pre-colored for their context). */
#pageAllMaps #allMapsHideMapBtn {
  position: fixed;
  left: 42px;
  right: auto;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  z-index: 2000;
  display: inline-block;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.btnImgShowMap,
.btnImgHideMap {
  height: 15px;
}

button:hover .btnImgShowMap {
  content: url("buttons/show-map-hover.png");
}

#pageAllMaps .allMapsList {
  margin: 0;
  /* Shifts the list (and its scrollbar, which otherwise sits flush against
  the right-aligned text) further right without moving .allMapsPanel. */
  margin-right: -24px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  font-family: "80-kb-Sharp", "80kb Sharp", Helvetica, sans-serif;
  font-weight: 400;
  font-size: 17px;
  /* Left edge lines up with the search row's own left edge: search is
     144px wide with no extra offset, but this list also carries a
     margin-right:-24px (see below) shifting its right edge (and its
     scrollbar) 24px further right than search's -- so it needs to be
     144+24=168px to still land on the same left edge. */
  width: min(168px, calc(100vw - 84px));
  flex: 1;
  min-height: 0;

  /* Fill panel height and keep long lists scrollable. */
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;

  /* Thin visible scrollbar on the right, for scrolling the list up/down. */
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #c9c8c1 transparent; /* Firefox */
}

/* WebKit scrollbar styling (Chrome/Safari). */
#pageAllMaps .allMapsList::-webkit-scrollbar {
  width: 6px;
}

#pageAllMaps .allMapsList::-webkit-scrollbar-track {
  background: transparent;
}

#pageAllMaps .allMapsList::-webkit-scrollbar-thumb {
  background: #c9c8c1;
  border-radius: 3px;
}

#pageAllMaps .allMapsListItem {
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: flex-end;
  min-width: 0;
  /* Shifts the name+button row 20px left, independent of the list
     container's own box (and thus its scrollbar, which stays put -- a
     transform doesn't affect layout/scrollbar position). */
  transform: translateX(-20px);
}

#pageAllMaps .allMapsListName {
  display: inline-block;
  font-family: "NarkissYair-Regular-TRIAL", "NarkissYair Regular TRIAL", sans-serif;
  font-weight: 400;
  font-size: 14.5px;
  color: #000000;
  text-transform: none !important;
  background: transparent;
  border: 0;
  padding: 0;
  padding-bottom: 4px;
  margin-bottom: -4px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
  direction: ltr;
  cursor: pointer;
  /* Shifted 3px left -- a transform (not margin) so it doesn't disturb
     the flex layout the number label's own position depends on. */
  transform: translateX(-3px);
}

#pageAllMaps .allMapsListName:hover:not(:disabled) {
  /* !important to win against the base font-family rule above (also
     !important) -- among !important rules the more specific one (this
     has an extra :hover) wins regardless of source order. */
  font-family: "NarkissBlock-Regular-TRIAL", sans-serif !important;
}

#pageAllMaps .allMapsListName.isHidden {
  color: #a0a0a0;
}

#pageAllMaps .allMapsListName.isHighlighted {
  color: #000000;
  font-family: "NarkissYair-Regular-TRIAL", "NarkissYair Regular TRIAL", sans-serif;
  font-weight: 400;
}

#pageAllMaps .allMapsListName.isSearchMatch:not(.isHighlighted):not(.isHidden) {
  background-color: rgba(169, 167, 160, 0.28);
  border-radius: 3px;
}

#pageAllMaps .allMapsListName.isDimmed {
  color: #c9c8c1;
}

/* Sequential index (001, 002, ...) beside each name, replacing the old
   on/off button -- a plain label, not interactive. */
#pageAllMaps .allMapsListNumber {
  flex: none;
  font-family: "NarkissYair-Regular-TRIAL", "NarkissYair Regular TRIAL", sans-serif;
  font-weight: 400;
  font-size: 13px;
  /* This (no .isHighlighted/.isDimmed class) is exactly the "nothing is
     selected" state -- see renderAllMapsCombinedMap() in app.js, which
     only adds one of those two classes when allMapsHighlightedKey is
     already set. */
  color: #000000;
}

#pageAllMaps .allMapsListNumber.isHighlighted {
  color: #000000;
}

#pageAllMaps .allMapsListNumber.isDimmed {
  color: #c9c8c1;
}

.content {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 40px;
  margin-top: 30px;
  align-items: start;
}

.lifeForm {
  display: grid;
  gap: 22px;
}

.rowLine {
  display: grid;
}

.lineField {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}

.label {
  font-size: 18px;
  font-weight: 700;
}

.lineInput {
  width: 100%;
  border: 0;
  border-bottom: 0.3px solid #000000;
  border-radius: 0;
  padding: 6px 0;
  font-size: 18px;
  background: transparent;
  color: inherit;
  outline: none;
}

.lineInput:focus {
  outline: none;
}

.instructions {
  margin: 0;
  font-size: 16px;
  max-width: 520px;
}

.sectionTitle {
  margin: 10px 0 0;
  font-size: 18px;
  font-weight: 700;
}

.formGrid {
  display: grid;
  gap: 14px;
  max-width: 520px;
}

.belongingBlock {
  display: grid;
  gap: 10px;
  max-width: 520px;
}

.belongingRow {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}

.rangeWrap {
  display: grid;
  gap: 6px;
}

input[type="range"] {
  width: 100%;
}

.rangeLabels {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
}

.bottomBar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
}

.textLink {
  border: 0;
  background: transparent;
  padding: 0;
  color: inherit;
  font-family: "80-kb-SharpBold", "80kb Sharp", Helvetica, sans-serif;
  font-weight: 700;
  text-decoration: none;
  font-size: var(--lifepath-map-button-font-size);
  cursor: pointer;
}

button:hover:not(:disabled),
.textLink:hover:not(:disabled),
.linkButton:hover:not(:disabled),
input[type="button"]:hover:not(:disabled),
input[type="submit"]:hover:not(:disabled),
input[type="reset"]:hover:not(:disabled) {
  color: #ff4800;
}

.linkButton:hover:not(:disabled) {
  border-color: #ff4800;
}

.textLink:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.linkButton {
  border: 1px solid #000000;
  background: transparent;
  color: inherit;
  padding: 10px 16px;
  font-size: var(--lifepath-map-button-font-size);
  cursor: pointer;
}

.listSection {
  display: grid;
  gap: 10px;
  justify-items: start;
}

.plainList {
  margin: 0;
  padding-left: 18px;
  font-size: 16px;
  display: grid;
  gap: 8px;
}

.status {
  font-size: 16px;
}

.stepSummary {
  font-size: 18px;
  white-space: pre-line;
  text-align: left;
  max-width: 360px;
}

.mono {
  font-variant-numeric: tabular-nums;
}

.mapWrap {
  margin-top: 24px;
}

/* Keep Leaflet map sizing */
.map {
  width: 100%;
  height: 520px;
  border: 1px solid #000000;
}

@media (max-width: 900px) {
  .content {
    grid-template-columns: 1fr;
  }
}

/* Pixel-aligned layout targets for 1920x1080 */
@media (min-width: 1920px) and (min-height: 1080px) {
  .app {
    max-width: 1920px;
    padding: 0;
    margin: 0;
  }

  #pageStep1 {
    min-height: 1080px;
  }

  #pageStep1 .content {
    margin: 0;
    padding-left: 193px;
    padding-top: 174px;
    gap: 60px;
  }

  #pageStep1 .lifeForm {
    width: 718px;
    min-height: 813px;
  }

  #pageStep1 .lineField {
    grid-template-columns: 140px 285px;
  }

  #pageStep1 .lineInput {
    width: 285px;
    max-width: 285px;
    border-bottom-width: 1px;
    border-bottom-color: #000000;
  }
}

/* Legacy styles below (kept to minimize diff). */
.pill.unverified {
  color: #4b5563;
}

.fileInput {
  display: none;
}

.meta {
  color: #6b7280;
  font-size: 12px;

  font-family: "80-kb-Sharp", "80kb Sharp", Helvetica, sans-serif;
  font-weight: 400;
}

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

.status {
  margin-top: 10px;
  color: #374151;
  font-size: 13px;
  min-height: 18px;
}

.map {
  height: 520px;
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f4f2ea;
  position: relative;
}

.splashCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 450; /* above tiles/vectors, below controls */
}

.hidden {
  display: none !important;
}

/* Leaflet tweaks: keep it clean (vector-only canvas) */
#map:not(.geo-on) .leaflet-control-attribution {
  display: none;
}

#pageStep2 #map .leaflet-tile-pane {
  transition: filter 160ms ease;
}

/* Basemap style: black & white (high contrast) for tiles only. */
#map.basemap-bw .leaflet-tile-pane,
#allMapsMap.basemap-bw .leaflet-tile-pane,
#step1GeoMap.basemap-bw .leaflet-tile-pane {
  /* High-contrast B/W for tiles only (aim for crisp black on white) */
  filter: grayscale(1) contrast(14) brightness(0.96);
}

/* Basemap style: dark map label clarity (tiles only). */
#map.basemap-dark .leaflet-tile-pane,
#allMapsMap.basemap-dark .leaflet-tile-pane,
#step1GeoMap.basemap-dark .leaflet-tile-pane {
  /* Boost tile contrast so city/street names read clearly on dark tiles. */
  filter: brightness(2.35) contrast(1.12) saturate(1.05);
}

#pageStep2.step2GeoHoverDimming #map .leaflet-tile-pane {
  filter: brightness(0.88);
}

#pageStep2.step2GeoHoverDimming #map.basemap-bw .leaflet-tile-pane {
  filter: grayscale(1) contrast(14) brightness(0.84);
}

#pageStep2.step2GeoHoverDimming #map.basemap-dark .leaflet-tile-pane {
  filter: brightness(2.05) contrast(1.12) saturate(1.05);
}

/* Remove Leaflet +/- zoom UI (we don't want the + button visible). */
#pageStep2 #map .leaflet-control-zoom {
  display: none !important;
}

@media (max-width: 720px) {
  .form .grid {
    grid-template-columns: 1fr;
  }

  .panelHeader {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (min-width: 980px) {
  /* Do not constrain the whole app; Step 2 map should be full-screen. */
  .app {
    max-width: none;
  }

  /* Keep Welcome page readable on wide screens. */
  #pageWelcome {
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
  }

  .frame {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .map {
    height: 640px;
  }
}

/* Ensure Step 2 map is truly full-bleed (no rounded frame/border). */
#pageStep2 #map.map {
  border: 0 !important;
  border-radius: 0 !important;
  height: 100% !important;
}

/* Step 2: signature label -- centered at the top, matching
   #pageStep1 .step1TopProgress's own on-screen position exactly -- see
   .emotionSignature's own comment for why this needs the same
   calc(*var(--step1-scale)) rather than a flat 34px. Same convention as
   .emotionSignature and .step1EmotionFullscreenName (see each). */
#pageStep2 .step2Signature {
  position: fixed;
  left: 50%;
  right: auto;
  top: calc(34px * var(--step1-scale, 1));
  transform: translateX(-50%);
  bottom: auto;
  text-align: left;
  z-index: 2000;
  font-size: calc(17px * var(--step1-scale, 1));
  white-space: nowrap;

  font-family: "NarkissBlock-Extralight-TRIAL", sans-serif;
  font-weight: 400;
  text-transform: lowercase;

  pointer-events: none;
}

#pageStep2 .step2SignatureMain {
  font-family: "NarkissBlock-Extralight-TRIAL", sans-serif;
  font-weight: 400;
}

#pageStep2 .step2SignatureCount {
  font-size: 14px;
  margin-left: 40px;
}

#pageStep2 .step2SignatureAverage {
  margin-top: 2px;
  font-family: "NarkissYair-Regular-TRIAL", "NarkissYair Regular TRIAL", sans-serif;
  font-weight: 400;
}

#pageStep2 .step2Coordinates {
  position: fixed;
  left: 42px;
  right: auto;
  top: 127px;
  bottom: auto;
  z-index: 2000;
  font-family: "NarkissYair-Regular-TRIAL", "NarkissYair Regular TRIAL", sans-serif;
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
  pointer-events: none;
}

/* Dark map UI: bottom labels become white. */
#pageStep2.dark-map-ui .step2Signature,
#pageStep2.dark-map-ui .step2Coordinates,
#pageStep2.dark-map-ui .step2Zoom {
  color: #f2f0e8;
}

#pageAllMaps.dark-map-ui .allMapsCount,
#pageAllMaps.dark-map-ui .allMapsZoom {
  color: #ffffff;
}

/* All Maps: when the map is displayed (dark basemap), make UI text white. */
#pageAllMaps.dark-map-ui .brand,
#pageAllMaps.dark-map-ui .closeToHomeBtn,
#pageAllMaps.dark-map-ui .allMapsListToggle {
  color: #ffffff;
}

#pageAllMaps.dark-map-ui .allMapsListName {
  color: #000000;
}



/* Preserve list semantic colors even in dark-map-ui. */
#pageAllMaps.dark-map-ui .allMapsListName.isHidden {
  color: #a0a0a0;
}

#pageAllMaps.dark-map-ui .allMapsListName.isSearchMatch:not(.isHighlighted):not(.isHidden) {
  background-color: rgba(255, 255, 255, 0.18);
}

#pageAllMaps.dark-map-ui .allMapsListName.isHighlighted {
  color: #000000;
}

#pageAllMaps.dark-map-ui .allMapsListName.isDimmed {
  color: #c9c8c1;
}

#pageAllMaps.dark-map-ui .closeToHomeBtn:hover:not(:disabled),
#pageAllMaps.dark-map-ui .allMapsListToggle:hover:not(:disabled) {
  color: #000000;
}

/* Step 2: zoom percentage label (x=252, y=1050) */
#pageStep2 .step2Zoom {
  position: fixed;
  left: 235px;
  top: auto;
  bottom: 30px;
  z-index: 2000;
  font-size: 16px;
  white-space: nowrap;

  font-family: "80-kb-Sharp", "80kb Sharp", Helvetica, sans-serif;
  font-weight: 400;

  pointer-events: none;
}

/* Step 2: Edit + Show/Hide Map buttons (bottom-left, side-by-side) */
#pageStep2 .step2BottomActions {
  position: fixed;
  left: auto;
  right: 37px;
  top: auto;
  bottom: 35px;
  z-index: 2000;

  display: flex;
  gap: 21px;
  align-items: baseline;
}

#pageStep2 .step2BottomActions .textLink {
  display: inline-block;
  font-family: "NarkissYair-Regular-TRIAL", "NarkissYair Regular TRIAL", sans-serif;
  font-weight: 400;
  font-size: 14.5px;
  text-transform: lowercase !important;
  padding-bottom: 4px;
  margin-bottom: -4px;
  text-decoration: underline;
  text-decoration-thickness: 0.75px;
  text-underline-offset: 1px;
}

/* Step 2's own nav row (archive/all maps/about) -- position:absolute so it
   lands at the same top:34/right:40 every other page's copy of this same
   row uses, regardless of #pageStep2 .topbar's own padding (36px 42px 0,
   tuned for other content in that header, not this row). */
#pageStep2 .step2Actions {
  position: absolute;
  /* Matches this page's own top-left logo (.step2LogoText), which uses the
     same calc(34px * var(--step1-scale,1)). */
  top: calc(34px * var(--step1-scale, 1));
  right: 42px;
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

#pageStep2 .step2Actions .textLink {
  display: inline-block;
  font-family: "NarkissYair-Regular-TRIAL", "NarkissYair Regular TRIAL", sans-serif;
  font-weight: 400;
  font-size: 14.5px;
  text-transform: lowercase !important;
  padding-bottom: 4px;
  margin-bottom: -4px;
  text-decoration: underline;
}

#pageStep2 .step2BottomActions .textLink:hover:not(:disabled),
#pageStep2 .closeToHomeBtn:hover:not(:disabled) {
  color: #000000;
  font-family: "NarkissYair-Bold-TRIAL", "NarkissYair Bold TRIAL", sans-serif;
  font-weight: 700;
}

#pageStep2 .closeToHomeBtn {
  position: fixed;
  right: 40px;
  top: 36px;
  z-index: 2000;
  font-size: 14.5px;
}

/* Step 2: reduce specific action button sizes by 2pt. */
#pageStep2 #hideMapBtn,
#pageStep2 #backToStep1Btn {
  font-size: 14.5px;
}

#pageStep2 #backToStep1Btn {
  position: fixed;
  left: 42px;
  top: auto;
  bottom: 60px;
  z-index: 2000;
}

#pageStep2 #hideMapBtn {
  position: fixed;
  left: 42px;
  top: auto;
  bottom: 36px;
  z-index: 2000;
}

#pageStep2 #printPostcardBtn {
  position: fixed;
  left: 213px;
  top: auto;
  bottom: 36px;
  z-index: 2000;
}

/* Dark map UI:
   - Keep top buttons black (Edit/Save + All Maps Edit)
   - Keep the bottom "Show/Hide map" control readable on dark tiles
*/
#pageAllMaps.dark-map-ui #allMapsEditBtn {
  color: #000000;
}

/* Step 2: when the map is displayed, turn logo + Edit white. */
#pageStep2.map-visible .brand,
#pageStep2.map-visible .closeToHomeBtn {
  color: #f2f0e8;
}

#pageStep2.map-visible .closeToHomeBtn:hover:not(:disabled) {
  color: #f2f0e8;
}
#pageStep2.map-visible #backToStep1Btn {
  color: #f2f0e8;
}

#pageStep2.map-visible #backToStep1Btn:hover:not(:disabled) {
  color: #f2f0e8;
}

/* Step 2: when the map is displayed, turn Print white. */
#pageStep2.map-visible #printPostcardBtn {
  color: #f2f0e8;
}

#pageStep2.map-visible #printPostcardBtn:hover:not(:disabled) {
  color: #f2f0e8;
}

#pageStep2.dark-map-ui #hideMapBtn {
  color: #f2f0e8;
}

/* #allMapsHideMapBtn no longer needs a color rule here (or in the
   .tiles-visible groups below) -- it's image-based now, pre-colored per
   state via its own PNG asset (buttons/show-map.png / buttons/hide-map.png,
   see updateAllMapsHideMapLabel() in app.js). */

/* "show map" (allMapsTilesVisible/.tiles-visible in app.js) recolors
   routes (see getAllMapsOverlayStrokeColor() and friends in app.js), map
   names, buttons, and the logo to #f4f2eb -- regardless of whether the
   basemap itself is light or dark, unlike .dark-map-ui above. Placed after
   every .dark-map-ui rule touching these same elements so this wins
   whenever both classes are active at once (equal specificity, later
   wins). */
#pageAllMaps.tiles-visible .brand,
#pageAllMaps.tiles-visible .closeToHomeBtn,
#pageAllMaps.tiles-visible .allMapsListToggle,
#pageAllMaps.tiles-visible .allMapsListName,
#pageAllMaps.tiles-visible .allMapsListNumber {
  color: #f4f2eb;
}

/* No hover feedback needed on buttons while the map is shown -- they just
   stay at their own current color (also cancels .dark-map-ui's own
   hover-to-black rules above, since dark-map-ui only ever applies when
   tiles-visible is also active). */
#pageAllMaps.tiles-visible .closeToHomeBtn:hover:not(:disabled),
#pageAllMaps.tiles-visible .allMapsListToggle:hover:not(:disabled) {
  color: #f4f2eb;
}

/* The focused map's own name/number stay at the same "shown" color as
   everything else (matching getAllMapsHighlightColor() in app.js) -- same
   specificity as .dark-map-ui's own .isHighlighted rules above (ID + 3
   classes), placed after them so this wins whenever both are active.
   Every *other* name/number (someone else is focused) gets dimmed to
   #77756d instead, matching getAllMapsDimmedRouteColor(). */
#pageAllMaps.tiles-visible .allMapsListName.isHighlighted,
#pageAllMaps.tiles-visible .allMapsListNumber.isHighlighted {
  color: #f4f2eb;
}

#pageAllMaps.tiles-visible .allMapsListName.isDimmed,
#pageAllMaps.tiles-visible .allMapsListNumber.isDimmed {
  color: #77756d;
}

/* logo.png is a solid black mark on a transparent background -- this
   filter chain (invert to white, then sepia+brightness to shape it down
   to an off-white) approximates #f4f2eb without needing a separate
   light-colored logo asset. */
#pageAllMaps.tiles-visible .step2LogoText {
  filter: invert(1) sepia(0.59) brightness(0.957);
}

/* Search row: underline and typed text both match the "shown" color too. */
#pageAllMaps.tiles-visible .allMapsSearchInput {
  border-bottom-color: #f4f2eb;
  color: #f4f2eb;
}

#pageAllMaps.tiles-visible .allMapsTimelineToggle {
  color: #f4f2eb;
}

#pageAllMaps.tiles-visible .allMapsYearSlider::-webkit-slider-runnable-track {
  background: #f4f2eb;
}

#pageAllMaps.tiles-visible .allMapsYearSliderHeader {
  color: #f4f2eb;
}

#pageAllMaps.tiles-visible .allMapsYearSlider::-webkit-slider-thumb,
#pageAllMaps.tiles-visible .allMapsYearSlider::-moz-range-thumb {
  border-color: #f4f2eb;
  background: #77756d;
}

#pageAllMaps.tiles-visible .allMapsYearSlider::-moz-range-track {
  background: #f4f2eb;
}

#pageStep2.dark-map-ui #hideMapBtn:hover:not(:disabled) {
  color: #f2f0e8;
}

#pageStep2 #printPostcardBtn:hover:not(:disabled),
#pageStep2 .step2Actions .closeToHomeBtn:hover:not(:disabled) {
  font-family: "NarkissYair-Bold-TRIAL", "NarkissYair Bold TRIAL", sans-serif;
  font-weight: 700;
}

/* Step 2: basemap style select should look like the other text actions. */
#pageStep2 .step2Actions select.textLink {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
}

#pageStep2 .step2Actions select.textLink::-ms-expand {
  display: none;
}

/* -----------------------------
   Step 1: Figma-exported layout
   ----------------------------- */
#pageStep1 {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  --step1-panel-divider-size: 0.1px;
  --step1-panel-divider-opacity: 0.4;
}

#pageStep1 .frame {
  background-color: #f4f2ea;
  width: 1920px;
  height: 1080px;
  position: relative;
  display: block;
  transform: translate(var(--step1-offset-x, 0), var(--step1-offset-y, 0)) scale(var(--step1-scale, 1));
  transform-origin: top left;

  /* Step 1 typography rule:
     default = 80-kb-sharp (regular), except specific fields below. */
  font-family: "80-kb-Sharp", "80kb Sharp", Helvetica, sans-serif;
  font-weight: 400;
}

#pageStep1,
#pageStep1 .frame,
#pageStep1 input,
#pageStep1 textarea,
#pageStep1 select,
#pageStep1 .text-wrapper-2,
#pageStep1 .text-wrapper-3,
#pageStep1 .text-wrapper-4,
#pageStep1 .text-wrapper-5,
#pageStep1 .text-wrapper-8,
#pageStep1 .enter-all-the-homes,
#pageStep1 .rate-your-sense-of,
#pageStep1 .stepSummary,
#pageStep1 .plainList,
#pageStep1 .status,
#pageStep1 .address-status {
  font-family: "NarkissYair-Regular-TRIAL", "NarkissYair Regular TRIAL", sans-serif !important;
  font-weight: 400;
}

#pageStep1 #homeNumberTitle,
#pageStep1 .text-wrapper-6,
#pageStep1 .step1ListHome {
  font-family: "NarkissYair-Bold-TRIAL", "NarkissYair Bold TRIAL", sans-serif !important;
  font-weight: 700;
}

/* Step 1: these specific items must be 80-kb-sharpbold. #addBtn/#createLifePathBtn
   are buttons, so their font now comes from the global button rule instead. */
#pageStep1 .text-wrapper-2,
#pageStep1 #homeNumberTitle,
#pageStep1 .text-wrapper-3,
#pageStep1 .text-wrapper-6,
#pageStep1 .step1ListHome {
  font-family: "80-kb-SharpBold", "80kb Sharp", Helvetica, sans-serif;
  font-weight: 700;
}

/* #addBtn/#createLifePathBtn also carry .text-wrapper-6 (shared with the
   non-button labels above), whose !important font-family — and the
   NarkissYair-Bold-TRIAL !important rule further up — would otherwise win
   over the global button rule by specificity (ID+class beats a bare
   `button` selector). This wins by being more specific still (ID+ID). */
#pageStep1 #addBtn,
#pageStep1 #createLifePathBtn {
  font-family: "AlfaBravo-Normal", "80-kb-SharpBold", "80kb Sharp", Helvetica, sans-serif !important;
}

/* Step 1: listed addresses + belonging must be regular 80-kb-sharp */
#pageStep1 .step1ListAddress,
#pageStep1 .step1ListBelonging {
  font-family: "80-kb-Sharp", "80kb Sharp", Helvetica, sans-serif;
  font-weight: 400;
}

#pageStep1 .life-path {
  display: none;
}

#pageStep1 img.life-path.appLogoImage {
  display: block;
  position: absolute;
  top: 34px;
  left: 40px;
  width: 100px;
  z-index: 20;
}

/* Mirrors the logo's top-left placement, top-right instead. Which buttons
   show depends only on step1-finished-state: "go back" + "start over" before
   finish, "edit" + "share" + "print" + "start over" after. Hidden entirely
   on the intro (name + home count) screen, before any phase class exists. */
#pageStep1 .step1TopActions {
  position: absolute;
  top: 34px;
  right: 40px;
  z-index: 20;
  display: none;
  align-items: center;
  gap: 32px;
}

#pageStep1.step1-address-phase .step1TopActions,
#pageStep1.step1-belonging-phase .step1TopActions,
#pageStep1.step1-summary-phase .step1TopActions,
#pageStep1.step1-finished-state .step1TopActions {
  display: flex;
}

#pageStep1 .step1TopActionBtn {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: #000000;
  text-decoration: none;
  white-space: nowrap;
  text-transform: lowercase;
}

#pageStep1 .step1TopActionBtn:hover {
  color: #602000;
}

#pageStep1 .step1FinishedOnlyBtn {
  display: none;
}

#pageStep1.step1-finished-state .step1FinishedOnlyBtn {
  display: inline-block;
}

/* Back and share have no place in the finished toolbar -- back because
   there's no "back" destination once the map is done, share because it's
   redundant there. Higher-specificity ID selectors so this wins over
   .step1FinishedOnlyBtn's own display:inline-block for #step1ShareBtn. */
#pageStep1.step1-finished-state #step1GoBackBtn,
#pageStep1.step1-finished-state #step1ShareBtn {
  display: none;
}

/* Maps opened from the Archive are read-only -- no "edit" trigger. Higher-
   specificity ID selector so this wins over .step1FinishedOnlyBtn's own
   display:inline-block. */
#pageStep1.step1-finished-state.step1-archive-loaded #step1EditFinishedBtn {
  display: none;
}

/* While reviewing/re-editing homes after finish (see step1EditAfterFinish()),
   the top-right toolbar is just "back" (cancels the review, discarding the
   currently-open ring) -- print/all maps and the "edit" trigger (redundant,
   already inside edit mode) all step aside for it. */
#pageStep1.step1-finished-state.step1-edit-mode #step1GoBackBtn {
  display: inline-block;
}
#pageStep1.step1-finished-state.step1-edit-mode #step1PrintBtn,
#pageStep1.step1-finished-state.step1-edit-mode #step1TopAllMapsBtn,
#pageStep1.step1-finished-state.step1-edit-mode #step1EditFinishedBtn {
  display: none !important;
}

/* Sits directly below the top-left logo (not centered) -- same position/
   font/size convention as .step2Signature, .emotionSignature and
   .step1EmotionFullscreenName (see each). */
#pageStep1 .step1TopProgress {
  display: none;
  position: absolute;
  /* Centered, top-aligned with the logo (34px) by default -- this is the
     resting position during address/belonging/summary phases, where
     .step1MapCompleteTitle isn't shown so there's nothing to collide with.
     The finished state overrides this with an animation (below) that starts
     lower and rises back to this exact spot once the title has faded out. */
  top: 34px;
    /* This element is inside the scaled 1920px frame. Use a viewport-derived
      design-space coordinate so its rendered center remains at 50vw even
      when viewport height, rather than width, determines the frame scale. */
    left: var(--step1-map-name-x, 50%);
  transform: translateX(-50%);
  z-index: 21;
  text-align: left;
  color: #000000;
  pointer-events: none;
  font-family: "NarkissBlock-Extralight-TRIAL", sans-serif !important;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.1;
  text-transform: lowercase;
  white-space: nowrap;
}

/* The map name keeps this same anchor in every editor state. Temporary
   completion/edit labels sit below it instead of moving the name. */
#pageStep1.step1-finished-state.step1-edit-mode .step1TopProgress {
  top: 34px;
}

#pageStep1.step1-address-phase .step1TopProgress,
#pageStep1.step1-belonging-phase .step1TopProgress,
#pageStep1.step1-summary-phase .step1TopProgress {
  display: block;
}

#pageStep1 .step1TopProgressSummary {
  font-size: 17px;
  unicode-bidi: plaintext;
}

#pageStep1 .step1TopProgressName,
#pageStep1 .step1TopProgressHomes {
  display: inline-block;
  font-family: "NarkissBlock-Extralight-TRIAL", sans-serif !important;
}

#pageStep1 .step1TopProgressEdit {
  display: inline-block;
  margin-left: 8px;
  font-family: "NarkissBlock-Extralight-TRIAL", sans-serif !important;
  font-weight: 400;
}

#pageStep1 .step1TopProgressCounter {
  display: none;
}

#pageStep1.step1-summary-phase .step1TopProgressHomes,
#pageStep1.step1-summary-phase .step1TopProgressEdit,
#pageStep1.step1-finished-state .step1TopProgressHomes,
#pageStep1.step1-finished-state .step1TopProgressEdit {
  display: none !important;
}

/* Overrides the blanket finished-state hide above -- while actively
   re-editing a home from the finished dashboard, the xx/yy counter (which
   home of the total is open) should stay visible. */
#pageStep1.step1-finished-state.step1-edit-mode .step1TopProgressHomes {
  display: inline-block !important;
}

#pageStep1 .step1LogoIntro {
  display: none;
  position: absolute;
  top: 115px;
  left: 40px;
  z-index: 20;
  color: #000000;
  text-align: left;
  pointer-events: none;
}

#pageStep1.step1-address-phase .step1LogoIntro,
#pageStep1.step1-belonging-phase .step1LogoIntro {
  display: block;
}

#pageStep1 .step1LogoIntroTitle {
  font-family: "NarkissBlock-Regular-TRIAL", sans-serif !important;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.2;
  text-transform: lowercase;
}

#pageStep1 .step1LogoIntroSubtitle {
  margin-top: 8px;
  position: relative;
  top: -8px;
  font-family: "NarkissBlock-Extralight-TRIAL", sans-serif !important;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.25;
  text-transform: lowercase;
  max-width: none;
  white-space: nowrap;
}

/* Removed: dark left-side overlay was covering the data-entry area. */
#pageStep1 .step1LeftOverlay {
  display: none;
}

#pageStep1.step1-address-phase .step1LeftOverlay,
#pageStep1.step1-belonging-phase .step1LeftOverlay,
#pageStep1.step1-summary-phase .step1LeftOverlay {
  opacity: 0;
  pointer-events: none;
}

/* Ensure form sits above other layers */
#pageStep1 .div {
  z-index: 3;
}

/* Step 1 heading: centered in the left (data-entry) area, at the Full name height. */
#pageStep1 .createYourMapTitle {
  position: absolute;
  left: 0;
  width: 614px; /* left part, up to the vertical divider */
  top: 128px;
  margin: 0;
  text-align: center;
  font-family: "NarkissBlock-Light-TRIAL", sans-serif;
  font-weight: 400;
  /* #pageStep1 .frame is scaled by --step1-scale to fit the viewport, so a
     flat 20px here would render smaller than declared on any window
     narrower than 1920px. Dividing by the same scale cancels it out, so
     the rendered size stays a true, viewport-independent 16px -- matching
     the home page's screen-2 questions, which aren't inside any scaled
     container. */
  font-size: calc(15px / var(--step1-scale, 1));
  line-height: 1;
  letter-spacing: 0;
  text-transform: lowercase;
  color: #000000;
  z-index: 4;
  pointer-events: none;
}

/* "your map is complete" heading: shown only once Step 1 is finished (and
   hidden again if the user re-enters edit mode, since the address form
  reclaims that space then). It sits below the stable map-name anchor,
  shows briefly, then fades out on its own. */
#pageStep1 .step1MapCompleteTitle {
  display: none;
  position: absolute;
  left: var(--step1-map-name-x, 50%);
  top: 60px;
  width: max-content;
  transform: translateX(-50%);
  margin: 0;
  text-align: center;
  font-family: "NarkissBlock-Regular-TRIAL", sans-serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 1;
  letter-spacing: 0;
  text-transform: lowercase;
  color: #000000;
  z-index: 4;
  pointer-events: none;
}

#pageStep1.step1-map-created-once:not(.step1-edit-mode):not(.step1-archive-loaded) .step1MapCompleteTitle {
  display: block;
  animation: step1MapCompleteFadeOut 5.8s ease-out forwards;
}

/* "edit" title while re-editing a home from the finished dashboard. */
#pageStep1 .step1EditModeTitle {
  display: none;
  position: absolute;
  left: var(--step1-map-name-x, 50%);
  top: 60px;
  width: max-content;
  transform: translateX(-50%);
  margin: 0;
  text-align: center;
  font-family: "NarkissBlock-Regular-TRIAL", sans-serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 1;
  letter-spacing: 0;
  text-transform: lowercase;
  color: #000000;
  z-index: 4;
  pointer-events: none;
}

#pageStep1.step1-finished-state.step1-edit-mode .step1EditModeTitle {
  display: block;
}

/* Visible immediately, holds for ~5s, then fades out over ~0.8s and stays
   hidden (opacity only -- display:block above is what actually re-triggers
   this on every fresh entry into the finished state). */
@keyframes step1MapCompleteFadeOut {
  0% {
    opacity: 1;
  }
  86.2% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* EMOTION MAP title: centered in the left area below the horizontal white line. */
/* After finish, the five section titles (emotion map/movement map/ring
   reading/time & belonging/homes) switch from black to a muted gray --
   edit mode reverts to black like the rest of the pre-finish styling. */
#pageStep1.step1-finished-state:not(.step1-edit-mode) .step1EmotionMapTitle,
#pageStep1.step1-finished-state:not(.step1-edit-mode) .step1MovementMapTitleCenter,
#pageStep1.step1-finished-state:not(.step1-edit-mode) .step1RingReadingTitle,
#pageStep1.step1-finished-state:not(.step1-edit-mode) .step1TimeBelongingTitle,
#pageStep1.step1-finished-state:not(.step1-edit-mode) .step1HomesListTitle,
#pageStep1.step1-finished-state:not(.step1-edit-mode) .step1MoveFrequencyLabel {
  color: #87857c;
}

/* Archive-loaded maps used to force these back to black -- now left to fall
   through to the plain .step1-finished-state gray rule above, so a map
   opened from the Archive reads identically to one that just got finished. */

#pageStep1 .step1EmotionMapTitle {
  position: absolute;
  left: 560px;
  width: 460px;
  top: calc(var(--step1-dashboard-top, 285px) + 40px);
  margin: 0;
  padding-left: 30px;
  text-align: left;
  text-transform: lowercase;
  font-family: "NarkissBlock-Light-TRIAL", sans-serif;
  font-weight: 400;
  /* Scale-independent 16px -- see .createYourMapTitle's comment. */
  font-size: calc(15px / var(--step1-scale, 1));
  line-height: 1;
  letter-spacing: 0;
  color: #000000;
  z-index: 4;
  pointer-events: none;
}

/* --- Intro phase (entry screen): only name + homes count visible.
   Hide maps, titles, and previews until the user clicks NEXT.
   Center the form on the full screen. */
#pageStep1:not(.step1-address-phase):not(.step1-belonging-phase):not(.step1-summary-phase) .createYourMapTitle {
  left: 40px;
  width: 460px;
  text-align: left;
}

#pageStep1:not(.step1-address-phase):not(.step1-belonging-phase):not(.step1-summary-phase) .div {
  left: 50%;
  transform: translateX(-50%);
}

#pageStep1:not(.step1-address-phase):not(.step1-belonging-phase):not(.step1-summary-phase) .step1NextBtn {
  left: 50%;
  /* Bottom edge flush with the homes-count field's underline. */
  top: 614px;
  transform: translateX(248px);
}
#pageStep1:not(.step1-address-phase):not(.step1-belonging-phase):not(.step1-summary-phase) .step1-right,
#pageStep1:not(.step1-address-phase):not(.step1-belonging-phase):not(.step1-summary-phase) .step1MovementMapTitleCenter,
#pageStep1:not(.step1-address-phase):not(.step1-belonging-phase):not(.step1-summary-phase) .step1EmotionMapTitle,
#pageStep1:not(.step1-address-phase):not(.step1-belonging-phase):not(.step1-summary-phase) .step1EmotionMap,
#pageStep1:not(.step1-address-phase):not(.step1-belonging-phase):not(.step1-summary-phase) .step1RoutePreview,
#pageStep1:not(.step1-address-phase):not(.step1-belonging-phase):not(.step1-summary-phase) .step1HomesList,
#pageStep1:not(.step1-address-phase):not(.step1-belonging-phase):not(.step1-summary-phase) .step1HomesListTitle,
#pageStep1:not(.step1-address-phase):not(.step1-belonging-phase):not(.step1-summary-phase) .step1PanelStat,
#pageStep1:not(.step1-address-phase):not(.step1-belonging-phase):not(.step1-summary-phase) .step1RingReading,
#pageStep1:not(.step1-address-phase):not(.step1-belonging-phase):not(.step1-summary-phase) .step1TimeBelonging {
  display: none !important;
}

/* Step 1 phases: the intro (name + homes count) is shown first; the address
   section is revealed after clicking NEXT. */
#pageStep1 .div-3 > .div-2 {
  display: none !important;
}

#pageStep1.step1-address-phase .div-3 > .div-2 {
  display: block !important;
  position: relative;
  animation: step1FadeIn 0.4s ease-out both;
}

/* Hide intro fields and title once we're in address, belonging, or summary phase */
#pageStep1.step1-address-phase .createYourMapTitle,
#pageStep1.step1-address-phase .group,
#pageStep1.step1-address-phase .homesCountGroup,
#pageStep1.step1-address-phase .step1NextBtn,
#pageStep1.step1-belonging-phase .group,
#pageStep1.step1-belonging-phase .homesCountGroup,
#pageStep1.step1-belonging-phase .step1NextBtn,
#pageStep1.step1-summary-phase .group,
#pageStep1.step1-summary-phase .homesCountGroup,
#pageStep1.step1-summary-phase .step1NextBtn {
  display: none !important;
}

/* --- Summary phase (screen 4): list of all homes --- */

#pageStep1 .step1Summary {
  display: none;
}


/* Pre-entry: name in black (on faded map). */
#pageStep1.map-colors-dark .step1GeoMapName {
  color: #000000 !important;
  transition: color 1.5s ease;
}

/* Post-entry: name matches the background (on full map). */
#pageStep1:not(.map-colors-dark) .step1GeoMapName {
  transition: color 1.5s ease;
}


/* Summary phase: same 20% as during data entry. */
#pageStep1.step1-summary-phase .step1GeoMap .leaflet-tile-pane {
  opacity: 0.2;
}

#pageStep1.step1-summary-phase .step1GeoMapName {
  color: #000000 !important;
  transition: color 1.5s ease;
}

#pageStep1.step1-summary-phase .step1Summary {
  display: block;
  animation: step1FadeIn 0.5s ease-out both;
  position: absolute;
  top: 0;
  left: 0;
  width: 819px;
  height: 607px;
  padding: 170px 50px 50px;
  box-sizing: border-box;
  background: #f4f2ea;
  max-height: none;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#pageStep1.step1-summary-phase .step1Summary::-webkit-scrollbar {
  display: none;
}

#pageStep1.step1-summary-phase .div-3 > .div-2,
#pageStep1.step1-summary-phase .rate-your-sense-of,
#pageStep1.step1-summary-phase .group-3,
#pageStep1.step1-summary-phase .step1AddrNavBtn,
#pageStep1.step1-summary-phase .step1BelongNavBtn {
  display: none !important;
}

/* step1-edit-mode (armed by openStep1HomeEditMode() when a ring/address is
   clicked after finishing, via the "edit" top-action button) exempts these
   so the address form reappears for editing instead of staying suppressed. */
#pageStep1.step1-finished-state:not(.step1-edit-mode) .div-3 > .div-2,
#pageStep1.step1-finished-state:not(.step1-edit-mode) .rate-your-sense-of,
#pageStep1.step1-finished-state:not(.step1-edit-mode) .group-3,
#pageStep1.step1-finished-state:not(.step1-edit-mode) .step1AddrNavBtn,
#pageStep1.step1-finished-state:not(.step1-edit-mode) .step1BelongNavBtn,
#pageStep1.step1-finished-state:not(.step1-edit-mode) .addHomeBtn {
  display: none !important;
}

#pageStep1.step1-summary-phase .div,
#pageStep1.step1-summary-phase .createYourMapTitle,
#pageStep1.step1-summary-phase .step1LogoIntro,
#pageStep1.step1-finished-state:not(.step1-edit-mode) .div,
#pageStep1.step1-finished-state .createYourMapTitle,
#pageStep1.step1-finished-state .step1LogoIntro {
  display: none !important;
}


#pageStep1 .step1Summary .summaryTitle {
  display: none;
}

/* Summary phase EDIT button — same position as NEXT */
#pageStep1 .step1SummaryNavBtn {
  display: none;
  position: absolute;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-weight: 400;
  color: #000000;
  text-decoration: none;
  letter-spacing: 0;
  white-space: nowrap;
}

#pageStep1.step1-summary-phase .step1SummaryNavBtn {
  display: block;
  animation: step1FadeIn 0.4s ease-out 0.2s both;
}

#pageStep1 #step1SummaryEditBtn {
  top: 180px;
  left: 560px;
}

#pageStep1 .step1Summary .summaryItem {
  margin-bottom: 18px;
  text-transform: lowercase;
}

#pageStep1 .step1Summary .summaryHomeLabel {
  font-family: "NarkissBlock-Regular-TRIAL", sans-serif;
  font-size: 18px;
  color: #000000;
  line-height: 1.4;
}

#pageStep1 .step1Summary .summaryAddress {
  font-family: "NarkissBlock-Extralight-TRIAL", sans-serif;
  font-size: 18px;
  color: #000000;
  line-height: 1.4;
}

/* Address phase navigation buttons (BACK / NEXT).
   Direct children of .frame, only visible in address phase. */
#pageStep1 .step1AddrNavBtn {
  display: none;
  position: absolute;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-weight: 400;
  color: #000000;
  text-decoration: none;
  letter-spacing: 0;
  white-space: nowrap;
}

#pageStep1.step1-address-phase .step1AddrNavBtn {
  display: none !important;
}

/* BACK: left-aligned with form text */
#pageStep1 #step1AddrBackBtn {
  top: 180px;
  left: 50px;
}

/* NEXT: same x as the intro NEXT button. Inactive (gray) until all fields filled. */
#pageStep1 #step1AddrNextBtn {
  top: 180px;
  left: 560px;
  color: #c9c8c1;
  pointer-events: none;
}

#pageStep1 #step1AddrNextBtn.active {
  color: #000000;
  pointer-events: auto;
}

/* MOVEMENT MAP centered title — spans full screen width. Pinned to the
   fixed (never-grown) dashboard top -- see the comment on .step1RoutePreview
   below for why this panel opts out of the FINISH grow-upward animation
   that every other finished-dashboard section still gets. */
#pageStep1 .step1MovementMapTitleCenter {
  position: absolute;
  left: 1050px;
  width: 460px;
  top: calc(var(--step1-dashboard-top-fixed, 285px) + 40px);
  margin: 0;
  padding: 0 4px calc(7px * var(--step1-inv-scale, 1)) 30px;
  box-sizing: border-box;
  text-align: left;
  font-family: "NarkissBlock-Light-TRIAL", sans-serif;
  font-weight: 400;
  /* Scale-independent 16px -- see .createYourMapTitle's comment. */
  font-size: calc(15px / var(--step1-scale, 1));
  line-height: 1;
  letter-spacing: 0;
  color: #000000;
  background: transparent;
  z-index: 8;
  pointer-events: none;
  text-transform: lowercase;
}

/* Route preview: third panel from left. Deliberately excluded from the
   FINISH-time grow-upward animation that the other finished-dashboard
   panels (ring reading, emotion map, homes list) get -- pinned to the
   fixed/ungrown dashboard-top and top-section variables instead of the
   grown-aware ones (see updateStep1Scale() in app.js), so this panel and
   the route line drawn inside it never resize when the dashboard grows. */
#pageStep1 .step1RoutePreview {
  position: absolute;
  left: 1050px;
  top: calc(var(--step1-dashboard-top-fixed, 285px) + 30px);
  width: 490px;
  height: calc(var(--step1-dashboard-top-section-fixed, 486px) - 30px);
  outline: 1px solid transparent;
  border-left: none;
  z-index: 3;
  pointer-events: auto;
  background: transparent;
  overflow: visible;
}

#pageStep1 .step1RoutePreview svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  /* Shrinks/shifts only the drawn route itself -- .step1RoutePreview's own
     box (and its ::before/::after divider lines, which are positioned off
     that box, not this svg) is completely untouched by this transform. */
  transform-origin: 0 0;
  transform: translate(5px, 0);
}

#pageStep1 .step1RoutePreview svg line[data-print-route-line="1"] {
  display: none;
}

#pageStep1 .step1RoutePreview::before {
  content: "";
  position: absolute;
  /* .step1RoutePreview itself was widened/shifted (left: 1050px -> 1040px,
     top: 305px -> 297px) to enlarge the frame -- these offsets compensate so
     this divider line still renders at its original, unmoved position. */
  left: 0;
  top: 0;
  width: var(--step1-panel-divider-size);
  height: 100%;
  background: #000000;
  opacity: var(--step1-panel-divider-opacity);
  z-index: 9;
}

#pageStep1 .step1FullscreenBtn {
  position: absolute;
  z-index: 12;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-weight: 400;
  line-height: normal;
  color: #000000;
  text-decoration: none;
  text-transform: lowercase;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}

#pageStep1.step1-summary-phase .step1FullscreenBtn,
#pageStep1.step1-finished-state .step1FullscreenBtn {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  /* Held back a few seconds after finish, then a slow, gentle fade-in
     rather than appearing right alongside the rest of the finished layout. */
  transition: opacity 0.8s ease 1.5s, visibility 0s linear 1.5s;
}

/* Removed while reviewing/re-editing a home after finish -- expanding a
   map to fullscreen has no place in the middle of an edit. */
#pageStep1.step1-finished-state.step1-edit-mode .step1FullscreenBtn {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

/* One px smaller than the shared .frame .btnImg default (17.1864px), just
   for these two expand buttons. */
#pageStep1 .frame .btnImgExpand {
  height: 16.1864px;
}

/* Both fullscreen links sit at the vertical middle of their own section's
   frame (.step1EmotionMap / .step1RoutePreview respectively) -- top + half
   that frame's own height, then back up by half the button's own height
   (16.1864px, see .btnImgExpand above) since `top` positions its top edge,
   not its center. left is 2px further right than their frame's own
   nominal alignment. */
#pageStep1 .step1EmotionFullscreenBtn {
  left: 595px;
  top: calc(var(--step1-dashboard-top, 285px) + var(--step1-dashboard-top-section, 486px) / 2 - 8.0932px);
}

/* Pinned to the same fixed (never-grown) dashboard variables as
   .step1RoutePreview itself above, so this button stays centered on that
   panel's frame regardless of the dashboard's grown state. */
#pageStep1 .step1RouteFullscreenBtn {
  left: 1085px;
  top: calc(var(--step1-dashboard-top-fixed, 285px) + 12px + (var(--step1-dashboard-top-section-fixed, 486px) - 12px) / 2 - 8.0932px);
}

#pageStep1 .step1FullscreenBtn:hover {
  color: #8e3300;
}

#pageStep1 .step1EmotionMap:fullscreen,
#pageStep1 .step1RoutePreview:fullscreen,
#pageStep1 .step1EmotionMap:-webkit-full-screen,
#pageStep1 .step1RoutePreview:-webkit-full-screen {
  width: 100vw !important;
  height: 100vh !important;
  background: #f4f2ea;
  overflow: hidden;
}

#pageStep1 .step1EmotionMap:fullscreen .step1EmotionSvg,
#pageStep1 .step1EmotionMap:-webkit-full-screen .step1EmotionSvg {
  top: 0;
}

/* Emotion map full screen page (opened from Step 1's "full screen" link) */
#pageStep1EmotionFullscreen {
  position: relative;
  padding: 0;
  height: 100vh;
  background: #f4f2ea;
  display: flex;
  flex-direction: column;
}

#pageStep1EmotionFullscreen .topbar {
  padding: 36px 40px 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  justify-content: flex-end;
}

/* Name badge -- centered at the top, matching #pageStep1 .step1TopProgress's
   own on-screen position exactly -- see .emotionSignature's own comment for
   why this needs the same calc(*var(--step1-scale)) rather than a flat
   34px. Same convention as .step2Signature and .emotionSignature (see
   each). */
#pageStep1EmotionFullscreen .step1EmotionFullscreenName {
  position: absolute;
  top: calc(34px * var(--step1-scale, 1));
  left: 50%;
  transform: translateX(-50%);
  z-index: 2001;
  color: #000000;
  font-family: "NarkissBlock-Extralight-TRIAL", sans-serif;
  font-weight: 400;
  font-size: calc(17px * var(--step1-scale, 1));
  line-height: 1.1;
  text-transform: lowercase;
  white-space: nowrap;
  unicode-bidi: plaintext;
  pointer-events: none;
}

#pageStep1EmotionFullscreen .step1EmotionFullscreenName:empty {
  display: none;
}

#pageStep1EmotionFullscreen .step1EmotionFullscreenBackBtn {
  font-family: "NarkissYair-Regular-TRIAL", "NarkissYair Regular TRIAL", sans-serif;
  font-weight: 400;
  font-size: 14.5px;
  text-transform: lowercase !important;
  text-decoration: underline;
  text-decoration-thickness: 0.75px;
  text-underline-offset: 1px;
}

#pageStep1EmotionFullscreen .step1EmotionFullscreenBackBtn:hover:not(:disabled) {
  color: #000000;
  font-family: "NarkissYair-Bold-TRIAL", "NarkissYair Bold TRIAL", sans-serif;
  font-weight: 700;
}

#pageStep1EmotionFullscreen .step1EmotionFullscreenBody {
  flex: 1;
  position: relative;
  min-height: 0;
}

/* Confined to the left half of the body. Its final horizontal position
   (together with the reading panel) is set dynamically as one centered
   unit -- see centerStep1EmotionFullscreenReadingUnit() in app.js -- so no
   fixed transform here. */
#pageStep1EmotionFullscreen .step1EmotionFullscreenWrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 50vw;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 40px;
}

#pageStep1EmotionFullscreen .step1EmotionFullscreenSvg {
  width: 100%;
  height: 100%;
  max-width: 1200px;
  max-height: 1200px;
  overflow: visible;
}

/* Ring spread (see enterStep1EmotionFullscreenRingSpread()): the info text
   hides for an "empty page" feel. The ring container itself is deliberately
   NOT resized here -- doing so would make the rings visibly jump/resize the
   instant spread starts, before the spread's own smooth per-ring animation
   even begins. Reaching the full page width instead happens purely through
   the spread math (targetRowPx in app.js) plus overflow:visible on both the
   SVG and this wrap, which already lets ring transforms render past the
   wrap's own box with no CSS changes needed. Restored on exit. */
#pageStep1EmotionFullscreen.step1-emotion-fullscreen-spread .step1EmotionFullscreenInfo {
  display: none;
}

/* Reading panel -- anchored at the exact same fixed point the solo
   ring-reading pages anchor their own text block to (see
   targetSoloTextXForPage()/yReading in app.js: left = 50vw - 30px, top =
   ~50vh - 155px), and using the same font stack (NarkissBlock-Extralight-TRIAL
   labels / NarkissBlock-Regular-TRIAL values, see .emotionRingReading and
   #pageEmotion .emotionSignature). */
#pageStep1EmotionFullscreen .step1EmotionFullscreenInfo {
  position: fixed;
  left: calc(50vw + 50px);
  top: calc(50vh - 125px);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: #111827;
}

#pageStep1EmotionFullscreen .step1EmotionFullscreenInfoTitle {
  font-family: "NarkissBlock-Regular-TRIAL", sans-serif;
  font-weight: 400;
  font-size: 15px;
}

/* Shifted up 7px without disturbing anything below it: margin-top pulls it
   up, margin-bottom adds the same amount back so the next sibling's own
   position doesn't move. */
#pageStep1EmotionFullscreen .step1EmotionFullscreenInfoNameRow {
  position: relative;
  display: flex;
  align-items: baseline;
  margin-top: -7px;
  margin-bottom: 7px;
}

#pageStep1EmotionFullscreen .step1EmotionFullscreenInfoName {
  font-family: "NarkissBlock-Extralight-TRIAL", sans-serif;
  font-weight: 400;
  font-size: 14px;
  text-transform: none;
}

/* Companion badge next to the name (same idea as .step2SignatureCount
   sitting beside .step2SignatureMain elsewhere), sized to match every other
   section below it. Positioned at a fixed offset (independent of the name's
   own length) so it lines up with every other section's answer column --
   same 130px offset as .step1EmotionFullscreenInfoLabel's width. */
#pageStep1EmotionFullscreen .step1EmotionFullscreenInfoRings {
  position: absolute;
  left: 130px;
  top: 0;
  font-family: "NarkissBlock-Regular-TRIAL", sans-serif;
  font-weight: 400;
  font-size: 13px;
}

#pageStep1EmotionFullscreen .step1EmotionFullscreenInfoStats {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* margin-top makes the stats->lists gap 10px too (14px outer gap - 4px);
   margin-bottom of the same 4px keeps the hint below at its original
   position despite this group's own height growing (see .step1Emotion
   FullscreenInfoList's own gap, and the hint's compensating margin-top). */
#pageStep1EmotionFullscreen .step1EmotionFullscreenInfoLists {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: -4px;
}

#pageStep1EmotionFullscreen .step1EmotionFullscreenInfoStat,
#pageStep1EmotionFullscreen .step1EmotionFullscreenInfoList {
  font-family: "NarkissBlock-Extralight-TRIAL", sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Fixed-width labels so every value column (age/avg belonging/countries/
   cities) lines up on the same left edge, same convention as
   .emotionRingEmotionalConnectionLabel etc. */
#pageStep1EmotionFullscreen .step1EmotionFullscreenInfoLabel {
  display: inline-block;
  width: 130px;
  vertical-align: top;
}

/* inline-block (not plain inline) so that once a country/city list is long
   enough to wrap, the wrapped line breaks *within this box* -- flush to its
   own left edge (i.e. under the first line, past the label column) instead
   of under the label itself. */
#pageStep1EmotionFullscreen .step1EmotionFullscreenInfoStatValue,
#pageStep1EmotionFullscreen .step1EmotionFullscreenInfoListValue {
  display: inline-block;
  max-width: 280px;
  vertical-align: top;
  font-family: "NarkissBlock-Regular-TRIAL", sans-serif;
  font-weight: 300;
  font-size: 13px;
  text-transform: none;
  unicode-bidi: plaintext;
}

/* Compensates .step1EmotionFullscreenInfoLists's own -4px margin-top above
   (24 - 4 = 20) so the hint's absolute position doesn't move. */
#pageStep1EmotionFullscreen .step1EmotionFullscreenInfoHint {
  font-family: "NarkissBlock-Regular-TRIAL", sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: #000000;
  margin-top: 20px;
}

#pageStep1EmotionFullscreen .step1EmotionFullscreenInfoStat:empty,
#pageStep1EmotionFullscreen .step1EmotionFullscreenInfoList:empty,
#pageStep1EmotionFullscreen .step1EmotionFullscreenInfoName:empty,
#pageStep1EmotionFullscreen .step1EmotionFullscreenInfoRings:empty {
  display: none;
}

/* Softens the black/gray swap on hover while rings are spread out (see
   showStep1EmotionFullscreenSpreadHoverLabel()), instead of an instant cut. */
#pageStep1EmotionFullscreen .step1EmotionFullscreenSvg [data-emotion-ring="1"] {
  transition: stroke 260ms ease;
}

/* Ring reading section — below the emotion map horizontal line */
#pageStep1 .step1RingReading {
  position: absolute;
  left: 560px;
  top: calc(var(--step1-dashboard-top, 285px) + var(--step1-dashboard-top-section, 486px) + 30px);
  width: 460px;
  height: calc(var(--step1-dashboard-bottom-section, 324px) - 30px);
  z-index: 4;
  pointer-events: auto;
  overflow: visible;
  padding-left: 30px;
  box-sizing: border-box;
}

#pageStep1 .step1RingReadingTitle {
  margin: -2px 0 10px 0;
  font-family: "NarkissBlock-Light-TRIAL", sans-serif;
  /* Scale-independent 16px -- see .createYourMapTitle's comment. */
  font-size: calc(15px / var(--step1-scale, 1));
  color: #000000;
  text-transform: lowercase;
}

#pageStep1 .step1RingReadingContent {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  width: 100%;
  height: calc(100% - 34px);
  min-height: 120px;
  overflow-x: scroll;
  overflow-y: hidden;
  padding-bottom: 28px;
  padding-top: 14px;
  -webkit-overflow-scrolling: touch;
}

#pageStep1 .step1RingReadingContent::-webkit-scrollbar {
  height: 4px;
}

#pageStep1 .step1RingReadingContent::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.03);
  border-radius: 2px;
}

#pageStep1 .step1RingReadingContent::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 2px;
}

#pageStep1 .step1RingReadingContent {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.03);
}

#pageStep1 .step1RingReadingContent svg {
  flex-shrink: 0;
  overflow: visible;
}

#pageStep1 .step1RingReadingContent path[data-step1-ring-reading-path="1"] {
  transition: stroke 180ms ease-out;
}

/* Belonging over time section — below the movement map horizontal line */
#pageStep1 .step1TimeBelonging {
  position: absolute;
  left: 1050px;
  top: calc(var(--step1-dashboard-top, 285px) + var(--step1-dashboard-top-section, 486px) + 30px);
  width: 460px;
  height: calc(var(--step1-dashboard-bottom-section, 324px) - 30px);
  z-index: 4;
  pointer-events: none;
  overflow: visible;
  padding-left: 30px;
  box-sizing: border-box;
}

#pageStep1 .step1TimeBelonging::before {
  content: "";
  position: absolute;
  left: 0;
  top: -30px;
  width: var(--step1-panel-divider-size);
  height: calc(100% + 30px);
  background: #000000;
  opacity: var(--step1-panel-divider-opacity);
  pointer-events: none;
  z-index: 5;
}

#pageStep1 .step1TimeBelongingTitle {
  margin: -2px 0 10px 0;
  font-family: "NarkissBlock-Light-TRIAL", sans-serif;
  /* Scale-independent 16px -- see .createYourMapTitle's comment. */
  font-size: calc(15px / var(--step1-scale, 1));
  color: #000000;
  text-transform: lowercase;
}

#pageStep1 .step1TimeBelongingChart {
  width: 100%;
  height: calc(100% - 44px);
  min-height: 120px;
  overflow: visible;
  text-transform: none;
}

#pageStep1 .step1TimeBelongingChart svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Panel stats (below titles) */
#pageStep1 .step1PanelStat {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  font-family: "NarkissBlock-Extralight-TRIAL", sans-serif;
  font-size: 17px;
  color: #000000;
  text-transform: lowercase;
  letter-spacing: 0.5px;
  white-space: pre;
  transition: color 0.4s ease;
}

/* The value half of a panel stat (e.g. "442 km", "6") — a different, more
   pronounced font than the label it follows. */
#pageStep1 .step1PanelStatValue {
  font-family: "NarkissBlock-Regular-TRIAL", sans-serif;
}

#pageStep1 .step1JourneyDistance {
  left: 40px;
  top: 206px;
  display: none;
}

#pageStep1 .step1AvgBelonging {
  left: 40px;
  top: 232px;
  display: none;
}

/* Removed from the finished-state dashboard (kept hidden at their default
   display:none above) -- see step1JourneyTimeline/step1MoveFrequencyLabel
   below, which stay. */

/* Small headers above the journey/avg stats and the timeline. */
#pageStep1 .step1SectionMiniLabel {
  display: none;
  position: absolute;
  z-index: 4;
  pointer-events: none;
  font-family: "NarkissBlock-Extralight-TRIAL", sans-serif;
  font-size: 17px;
  color: #000000;
  text-transform: lowercase;
}

#pageStep1 .step1HomeCountLabel {
  left: 40px;
  top: var(--step1-header-label-top, 178px);
  font-size: 16px;
  font-family: "NarkissBlock-Regular-TRIAL", sans-serif;
}

/* Right-edge-aligned to the geographic map panel's own right edge (.step1-right:
   left:42 + width:518 = 560) via the translateX trick (box shrink-wraps to
   its text, so left:560 + a full negative shift pins the RIGHT edge there
   instead of the left). Vertically level with the timeline itself (not
   above it anymore), sharing its own --step1-header-timeline-top variable
   so the two stay in sync through the grow/shrink animation. */
#pageStep1 .step1MoveFrequencyLabel {
  left: 560px;
  transform: translateX(-100%);
  top: calc(var(--step1-header-timeline-top, 206px) - 7px);
  /* Exactly matches the 5 section titles (.step1EmotionMapTitle etc.) --
     font, weight, scale-independent size, and (via the finished-state gray
     rule above) color too. */
  font-family: "NarkissBlock-Light-TRIAL", sans-serif;
  font-weight: 400;
  font-size: calc(15px / var(--step1-scale, 1));
  line-height: 1;
  letter-spacing: 0;
}

#pageStep1.step1-finished-state:not(.step1-edit-mode) .step1SectionMiniLabel {
  display: block;
}

/* Removed from the finished-state dashboard -- same specificity as the
   shared .step1SectionMiniLabel exposure above, so it wins by coming later
   in source order; .step1MoveFrequencyLabel (same base class) stays
   visible. */
#pageStep1.step1-finished-state:not(.step1-edit-mode) .step1HomeCountLabel {
  display: none;
}

/* Timeline: right edge fixed at the rightmost vertical divider line of the
   finished layout (.step1HomesListTitle::before, x=1540); left edge at
   x=590, flush with "emotion map" title's own text start (.step1EmotionMapTitle
   is left:560+padding-left:30) so the start-year label lines up with it --
   keep updateStep1JourneyTimeline()'s vbW constant in sync with this width.
   Vertically aligned to .step1JourneyDistance's own top (206px) --
   deliberately independent of .step1MoveFrequencyLabel's top (still 178px,
   unmoved) since the two no longer move together. */
#pageStep1 .step1JourneyTimeline {
  display: none;
  position: absolute;
  left: 590px;
  top: calc(var(--step1-header-timeline-top, 206px) - 7px);
  width: 950px;
  height: 24px;
  z-index: 4;
  pointer-events: none;
}

#pageStep1.step1-finished-state:not(.step1-edit-mode) .step1JourneyTimeline {
  display: block;
}

/* No home has a start year entered at all -- updateStep1JourneyTimeline()
   already renders an empty timeline in this case, but the "move frequency"
   caption above it stayed regardless, floating over nothing. Hidden here
   (higher specificity than the two finished-state exposure rules above, so
   this wins), with the freed row height reclaimed as extra dashboard growth
   in updateStep1Scale() (see step1HasAnyYears() in app.js). */
html.step1-no-years #pageStep1.step1-finished-state:not(.step1-edit-mode) .step1MoveFrequencyLabel,
html.step1-no-years #pageStep1.step1-finished-state:not(.step1-edit-mode) .step1JourneyTimeline {
  display: none;
}

#pageStep1 .step1JourneyTimeline svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  text-transform: none;
}

#pageStep1 .step1JourneyTimeline text {
  font-family: "NarkissBlock-Light-TRIAL", sans-serif;
  font-size: 15px;
  fill: #000000;
}

/* Homes list title */
#pageStep1 .step1HomesListTitle {
  position: absolute;
  left: 1540px;
  width: 460px;
  top: calc(var(--step1-dashboard-top, 285px) + 40px);
  margin: 0;
  padding-left: 30px;
  text-align: left;
  font-family: "NarkissBlock-Light-TRIAL", sans-serif;
  font-weight: 400;
  /* Scale-independent 16px -- see .createYourMapTitle's comment. */
  font-size: calc(15px / var(--step1-scale, 1));
  line-height: 1;
  color: #000000;
  z-index: 4;
  pointer-events: none;
  text-transform: lowercase;
}

/* Homes list: fourth panel from left */
#pageStep1 .step1HomesList {
  position: absolute;
  left: 1540px;
  top: calc(var(--step1-dashboard-top, 285px) + 70px);
  width: 360px;
  height: calc(var(--step1-dashboard-height, 810px) - 70px);
  border-left: none;
  z-index: 3;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #c9c8c1 transparent;
}

#pageStep1 .step1HomesListTitle::before {
  content: "";
  position: fixed;
  left: 1540px;
  top: calc(var(--step1-dashboard-top, 285px) + 37px);
  width: var(--step1-panel-divider-size);
  height: calc(var(--step1-dashboard-height, 810px) - 37px);
  background: #000000;
  opacity: var(--step1-panel-divider-opacity);
  z-index: 5;
  pointer-events: none;
}

#pageStep1 .step1HomesList::-webkit-scrollbar {
  width: 6px;
}

#pageStep1 .step1HomesList::-webkit-scrollbar-track {
  background: transparent;
}

#pageStep1 .step1HomesList::-webkit-scrollbar-thumb {
  background: #c9c8c1;
  border-radius: 3px;
}

#pageStep1 .step1HomesList .homesListItem {
  font-family: "NarkissBlock-Extralight-TRIAL", sans-serif;
  font-size: 16px;
  color: #000000;
  line-height: 1.5;
  text-transform: lowercase;
  padding-left: 30px;
  height: auto;
  margin-bottom: 1.4em;
  box-sizing: border-box;
  overflow: visible;
}

#pageStep1 .step1HomesList .homesListItem:last-child {
  margin-bottom: 0;
}

#pageStep1 .step1HomesList .homesListItem[data-home-idx] .homesListNum {
  cursor: default;
}

#pageStep1 .step1HomesList .homesListItem.step1HomesListMuted .homesListNum,
#pageStep1 .step1HomesList .homesListItem.step1HomesListMuted .homesListDetail {
  color: #c3c1b7;
}

#pageStep1 .step1HomesList .homesListItem.step1HomesListFocused .homesListNum,
#pageStep1 .step1HomesList .homesListItem.step1HomesListFocused .homesListDetail {
  color: #000000;
}

#pageStep1 .step1HomesList .homesListNum {
  font-family: "NarkissBlock-Regular-TRIAL", sans-serif;
  font-size: 16px;
  color: #c3c1b7;
  transition: color 0.4s ease;
  line-height: 1.4;
}

#pageStep1 .step1HomesList .homesListNum.filled {
  color: #000000;
}

#pageStep1 .step1HomesList .homesListDetail {
  font-family: "NarkissBlock-Extralight-TRIAL", sans-serif;
  font-size: 16px;
  color: #000000;
  line-height: 1.4;
  min-height: 1.4em;
  transition: color 0.4s ease;
}

#pageStep1 .step1HomesList .homesListAddress {
  margin-top: 1px;
}

#pageStep1 .step1HomesList .homesListBelonging {
  margin-bottom: 0;
}

/* Still hidden regardless of phase */
#pageStep1 .rate-your-sense-of,
#pageStep1 .group-3,
#pageStep1 #addBtn,
#pageStep1 #createLifePathBtn,
#pageStep1 #status,
#pageStep1 .enter-all-the-homes {
  display: none !important;
}

/* --- Belonging phase (screen 3): question + slider --- */

/* Hide address fields in belonging phase, but keep homeNumberTitle visible */
#pageStep1.step1-belonging-phase .div-3 > .div-2 {
  display: block !important;
}

#pageStep1.step1-belonging-phase .div-5,
#pageStep1.step1-belonging-phase .enter-all-the-homes {
  display: none !important;
}

#pageStep1.step1-belonging-phase .step1AddrNavBtn {
  display: none !important;
}

/* Show the belonging question + slider */
#pageStep1.step1-belonging-phase .rate-your-sense-of,
#pageStep1.step1-belonging-phase .group-3 {
  display: block !important;
  animation: step1FadeIn 0.4s ease-out both;
}

/* "How connected did you feel to this home?" — centered below title */
#pageStep1.step1-belonging-phase .rate-your-sense-of {
  position: absolute;
  left: -50px;
  width: 614px;
  text-align: center;
  top: 142px;
  margin: 0;
  font-family: "NarkissBlock-Extralight-TRIAL", sans-serif !important;
  font-weight: 400;
  font-size: 18px;
  text-transform: lowercase;
}


/* Slider centered in the left area */
#pageStep1.step1-belonging-phase .group-3 {
  position: absolute;
  left: 157px;
  top: 200px;
  width: 400px;
  margin: 0;
}

/* Hide belonging label text, keep 1 and 10 markers */
#pageStep1.step1-belonging-phase .group-3 > .text-wrapper-2 {
  display: none;
}

/* Reposition slider within the belonging phase */
#pageStep1.step1-belonging-phase .figma-range {
  left: 0;
  width: 400px;
}

/* Hide the 1 and 10 endpoint markers */
#pageStep1.step1-belonging-phase .text-wrapper-4,
#pageStep1.step1-belonging-phase .text-wrapper-5 {
  display: none !important;
}

/* Floating number above the slider thumb */
#pageStep1.step1-belonging-phase .text-wrapper-8 {
  display: block !important;
  font-family: "NarkissBlock-Extralight-TRIAL", sans-serif !important;
  font-size: 16px;
  top: -14px;
}

/* Belonging phase navigation buttons */
#pageStep1 .step1BelongNavBtn {
  display: none;
  position: absolute;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-weight: 400;
  color: #000000;
  text-decoration: none;
  letter-spacing: 0;
  white-space: nowrap;
}

#pageStep1.step1-belonging-phase .step1BelongNavBtn {
  display: block;
  animation: step1FadeIn 0.4s ease-out 0.15s both;
}

#pageStep1 #step1BelongBackBtn {
  top: 180px;
  left: 50px;
}

#pageStep1 #step1BelongNextBtn {
  top: 180px;
  left: 390px;
  text-transform: uppercase;
  white-space: nowrap;
}

#pageStep1 #step1BelongNextBtn.finishBtn {
  left: 530px;
}

/* Decorative white horizontal line on the left side (the area without the map),
   placed a bit below the vertical center of the screen. Stops at the vertical
   divider so it never runs over the map. */
#pageStep1 .frame::after {
  display: none;
}

#pageStep1 .frame::before {
  display: none;
  pointer-events: none;
  z-index: 1;
}

#pageStep1 .div {
  display: flex;
  flex-direction: column;
  width: 1840px;
  align-items: flex-start;
  gap: 18px;
  position: absolute;
  top: 82px;
  left: 40px;
}

#pageStep1 .div-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

#pageStep1 .div-3 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

#pageStep1 .group {
  position: relative;
  width: 448px;
  height: 23px;
  /* Vertically centers the name+homes-count block in the viewport (this and
     .homesCountGroup's top below were both shifted by the same amount so
     their relative spacing is unchanged). */
  top: 353px;
  align-self: center;
}

#pageStep1 .text-wrapper-2 {
  position: absolute;
  top: 0;
  left: 0;
  font-family: "80-kb-Sharp", Helvetica, sans-serif;
  font-weight: 400;
  color: #000000;
  font-size: 18px;
  letter-spacing: 0;
  line-height: 22px;
  white-space: nowrap;
}

/* Step 1: move only the 'Belonging' label (not the slider) */
#pageStep1 .group-3 > .text-wrapper-2 {
  top: 11px;
}

/* "your name" label uses Narkiss Block Light, lowercase except the first letter. */
#pageStep1 .group > .text-wrapper-2 {
  font-family: "NarkissBlock-Extralight-TRIAL", sans-serif !important;
  font-weight: 400;
  font-size: 20px;
  text-transform: lowercase;
  top: 7px;
}

#pageStep1 .group > .text-wrapper-2::first-letter {
  text-transform: uppercase;
}

/* Replace Figma SVG lines with real inputs */
#pageStep1 .figma-line-input {
  position: absolute;
  left: 156px;
  top: 0;
  width: 285px;
  height: 22px;
  box-sizing: border-box;
  border: 0;
  border-bottom: 0.1px solid rgba(0, 0, 0, 0.65);
  border-radius: 0;
  /* Keep typed text vertically centered within the 22px line. */
  padding: 1px 0;
  font-family: "NarkissBlock-Extralight-TRIAL", sans-serif !important;
  font-weight: 400;
  color: #000000;
  font-size: 18px !important;
  line-height: 20px;
  text-transform: lowercase;
  background: transparent;
  outline: none;
}

#pageStep1.step1-edit-mode .div-5 .figma-line-input {
  color: #c3c1b7;
  caret-color: #000000;
  transition: color 140ms ease-out;
}

#pageStep1.step1-edit-mode .div-5 .figma-line-input.step1EditFieldActive,
#pageStep1.step1-edit-mode .div-5 .figma-line-input:focus {
  color: #000000;
}

/* Step 1: Full name must type in English (LTR). */
#pageStep1 #studentName.figma-line-input {
  direction: ltr;
  unicode-bidi: plaintext;
  /* Line sits below the "Your name" label, left-aligned with it. */
  left: 0;
  top: 43px;
  width: 285px;
}

/* Subtle blinking caret at the start of the name line, shown while it's empty
   and not focused, to indicate it's typeable. */
#pageStep1 .nameCaret {
  display: none !important;
  position: absolute;
  left: 0;
  top: 45px;
  width: 1px;
  height: 18px;
  background: #000000;
  opacity: 0.6;
  pointer-events: none;
  animation: nameCaretBlink 1.1s steps(1) infinite;
}

#pageStep1 #studentName:placeholder-shown:not(:focus) ~ .nameCaret {
  display: block;
}

@keyframes step1FadeIn {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes emotionRingGrow {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes nameCaretBlink {
  0%,
  50% {
    opacity: 0.6;
  }
  50.01%,
  100% {
    opacity: 0;
  }
}

#pageStep1 .ellipse,
#pageStep1 .ellipse-2 {
  position: absolute;
  width: 7px;
  height: 7px;
  background-color: #8e3300;
  border-radius: 3.5px;
}

/* Dot at the end of the name line removed. */
#pageStep1 .ellipse {
  display: none;
}

/* NEXT button: bottom-right of the data-entry (left) area. */
#pageStep1 .step1NextBtn {
  position: absolute;
  left: 560px;
  top: 180px;
  z-index: 5;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-weight: 400;
  color: #c9c8c1;
  text-decoration: none;
  text-transform: lowercase;
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
}

#pageStep1 .step1NextBtn.active {
  color: #000000;
  pointer-events: auto;
}

/* "how many homes" field: same layout as "your name" but shifted down. */
#pageStep1 .homesCountGroup {
  top: 433px;
}

#pageStep1 .homesCountGroup > .text-wrapper-2 {
  font-family: "NarkissBlock-Extralight-TRIAL", sans-serif !important;
  font-weight: 400;
  font-size: 20px;
  text-transform: lowercase;
  top: 7px;
}

#pageStep1 .homesCountGroup > .text-wrapper-2::first-letter {
  text-transform: uppercase;
}

#pageStep1 #homesCount.figma-line-input {
  left: 0;
  top: 43px;
  width: 285px;
}

#pageStep1 .homesCountGroup > .nameCaret {
  top: 45px;
}

#pageStep1 .ellipse-2 {
  top: 18px;
  left: 439px;
}

#pageStep1 .enter-all-the-homes {
  position: relative;
  align-self: stretch;
  margin-top: 4px;
  top: 28px;
  font-family: "80-kb-Sharp", Helvetica, sans-serif;
  font-weight: 400;
  color: #000000;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 23px;
}

#pageStep1 .div-4 {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
}

#pageStep1 .text-wrapper-3 {
  position: relative;
  align-self: stretch;
  margin-top: 0;
  font-family: "80-kb-Sharp", Helvetica, sans-serif;
  font-weight: 400;
  color: #000000;
  font-size: 18px;
  letter-spacing: 0;
  line-height: 22px;
}

#pageStep1 #homeNumberTitle {
  color: #000000;
  font-family: "NarkissBlock-Regular-TRIAL", sans-serif !important;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.2;
  text-transform: lowercase;
  position: static;
  left: auto;
  width: auto;
  text-align: left;
  top: auto;
  margin: 0;
}

/* Address fields: 2-column grid — Country/City on the left, Street/Home number on the right.
   Absolutely positioned so Country/Street labels align exactly with "your name"
   on the intro screen (which is at form top 118 + group top 100 + label 7 = 225px
   from the frame, i.e. 107px from the form .div top). */
#pageStep1 .div-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 3px;
  row-gap: 0;
  width: 100%;
  position: relative;
  top: 108px;
  left: 0;
}

/* Address input rows: label above, input line below, matching the intro style. */
#pageStep1 .group-2 {
  position: relative;
  width: 100%;
  height: 55px;
  margin-bottom: 0;
}

#pageStep1 .group-2 > .text-wrapper-2 {
  font-family: "NarkissBlock-Light-TRIAL", sans-serif !important;
  font-weight: 400;
  /* Scale-independent 16px -- see .createYourMapTitle's comment. */
  font-size: calc(15px / var(--step1-scale, 1));
  text-transform: lowercase;
  position: relative;
  top: 0;
  left: 0;
  white-space: nowrap;
}

/* Address input lines — fit in the horizontal row, thin and uniform */
#pageStep1 .group-2 > .figma-line-input {
  left: 0 !important;
  top: 36px;
  width: 215px !important;
  border-bottom: 0.1px solid rgba(0, 0, 0, 0.65) !important;
}

/* Row 2 (City, Home number): input line aligned with "how many homes" input (frame y = 341px) */
#pageStep1 .div-5 > .group-2:nth-child(3) > .figma-line-input {
  top: 36px;
}

/* City (2nd child) */
#pageStep1 .div-5 > .group-2:nth-child(2) {
  position: relative;
  left: -70px;
}

/* Street, home number (3rd child) */
#pageStep1 .div-5 > .group-2:nth-child(3) {
  position: relative;
  left: -140px;
}

/* What year (4th child) */
#pageStep1 .div-5 > .group-2:nth-child(4) {
  position: relative;
  left: -210px;
}

/* How connected (5th child) */
#pageStep1 .div-5 > .group-2:nth-child(5) {
  position: relative;
  left: -160px;
}

#pageStep1 .locationGroup {
  grid-column: 1;
  position: relative;
  left: 0;
}

#pageStep1 .cityStateGroup,
#pageStep1 .step1ReadOnlyStateCityGroup {
  position: relative;
  left: -70px;
}

#pageStep1 .streetGroup,
#pageStep1 .step1ReadOnlyStreetGroup {
  position: relative;
  left: -140px;
}

#pageStep1 .startYearGroup {
  position: relative;
  left: -210px;
}

#pageStep1 .belongingInlineGroup {
  position: relative;
  left: -160px;
}

#pageStep1 .locationSuggestions {
  position: absolute;
  top: 58px;
  left: 0;
  width: 285px;
  max-height: 240px;
  overflow-y: auto;
  background: #f4f2ea;
  border: 0.5px solid rgba(0, 0, 0, 0.22);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
  z-index: 120;
}

#pageStep1 .locationSuggestions.hidden {
  display: none;
}

#pageStep1 .locationSuggestionItem {
  width: 100%;
  border: 0;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
  background: transparent;
  text-align: left;
  padding: 8px 10px;
  cursor: pointer;
  font-family: "NarkissBlock-Extralight-TRIAL", sans-serif;
  font-size: 15px;
  color: #111111;
}

#pageStep1 .locationSuggestionItem:last-child {
  border-bottom: 0;
}

#pageStep1 .locationSuggestionItem.active,
#pageStep1 .locationSuggestionItem:hover {
  background: rgba(0, 0, 0, 0.06);
}

#pageStep1 #locationSearch.figma-line-input::placeholder {
  font-family: "NarkissBlock-Extralight-TRIAL", sans-serif !important;
  font-weight: 400;
  font-size: 18px;
  color: #c3c1b7;
  text-transform: none;
  opacity: 1;
}

/* "What year" field spans the left column only, on its own row.
   Shift up 60px from default position. */
#pageStep1 .startYearGroup {
  grid-column: auto;
  margin-top: 0;
}

#pageStep1 .belongingInlineGroup {
  grid-column: auto;
  margin-top: 0;
}

#pageStep1 .figma-range-inline {
  position: absolute;
  left: 0;
  top: 40px;
  width: calc(100% - 42px);
  height: 22px;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}

#pageStep1 .figma-range-inline::-webkit-slider-runnable-track {
  height: 0.1px;
  background: rgba(0, 0, 0, 0.65);
}

#pageStep1.step1-edit-mode .figma-range-inline::-webkit-slider-runnable-track {
  background: #c3c1b7;
}

#pageStep1.step1-edit-mode .group-2.step1EditFieldActive .figma-range-inline::-webkit-slider-runnable-track,
#pageStep1.step1-edit-mode .figma-range-inline.step1EditFieldActive::-webkit-slider-runnable-track,
#pageStep1.step1-edit-mode .figma-range-inline:focus::-webkit-slider-runnable-track {
  background: rgba(0, 0, 0, 0.65);
}

#pageStep1 .figma-range-inline::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #f4f2ea;
  box-sizing: border-box;
  border: var(--inline-belonging-stroke, 0.5px) solid #000000;
  margin-top: -7px;
  transition: border-width 0.15s ease;
}

#pageStep1.step1-edit-mode .figma-range-inline::-webkit-slider-thumb {
  border-color: #c3c1b7;
}

#pageStep1.step1-edit-mode .group-2.step1EditFieldActive .figma-range-inline::-webkit-slider-thumb,
#pageStep1.step1-edit-mode .figma-range-inline.step1EditFieldActive::-webkit-slider-thumb,
#pageStep1.step1-edit-mode .figma-range-inline:focus::-webkit-slider-thumb {
  border-color: #000000;
}

#pageStep1 .figma-range-inline::-moz-range-track {
  height: 0.1px;
  background: rgba(0, 0, 0, 0.65);
}

#pageStep1.step1-edit-mode .figma-range-inline::-moz-range-track {
  background: #c3c1b7;
}

#pageStep1.step1-edit-mode .group-2.step1EditFieldActive .figma-range-inline::-moz-range-track,
#pageStep1.step1-edit-mode .figma-range-inline.step1EditFieldActive::-moz-range-track,
#pageStep1.step1-edit-mode .figma-range-inline:focus::-moz-range-track {
  background: rgba(0, 0, 0, 0.65);
}

#pageStep1 .figma-range-inline::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #f4f2ea;
  box-sizing: border-box;
  border: var(--inline-belonging-stroke, 0.5px) solid #000000;
  transition: border-width 0.15s ease;
}

#pageStep1.step1-edit-mode .figma-range-inline::-moz-range-thumb {
  border-color: #c3c1b7;
}

#pageStep1.step1-edit-mode .group-2.step1EditFieldActive .figma-range-inline::-moz-range-thumb,
#pageStep1.step1-edit-mode .figma-range-inline.step1EditFieldActive::-moz-range-thumb,
#pageStep1.step1-edit-mode .figma-range-inline:focus::-moz-range-thumb {
  border-color: #000000;
}

/* "add home" button — to the right of the belonging slider */
#pageStep1 .addHomeBtn {
  position: absolute;
  /* This group (5th grid column) is itself shifted left: -160px (see the
     .div-5 > .group-2:nth-child(5) rule), so extending -160px past its own
     right edge lands back exactly on the *unshifted* column's right edge --
     which is the grid container's right edge, i.e. the same x as the "back"
     button's right edge (both align to the 1920px canvas's right: 40px).
     Using `right` (not `left`) keeps this aligned in both the "add home"
     and "finish" states even though those two button images differ in width. */
  right: -160px;
  top: 38px;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-weight: 400;
  color: #c9c8c1;
  text-decoration: none;
  text-transform: lowercase;
  white-space: nowrap;
  pointer-events: none;
}

#pageStep1 .addHomeBtn.active {
  color: #000000;
  pointer-events: auto;
}

#pageStep1 .addHomeBtn.active:hover {
  color: #8e3300;
}

#pageStep1.step1-edit-mode .addHomeBtn {
  text-transform: none;
}

#pageStep1 .step1NextBtn:hover,
#pageStep1 .step1AddrNavBtn:hover,
#pageStep1 .step1BelongNavBtn:hover,
#pageStep1 .step1SummaryNavBtn:hover {
  color: #8e3300;
}

#pageStep1 .belongingInlineValue {
  position: absolute;
  top: 23px;
  left: 0;
  font-family: "NarkissBlock-Extralight-TRIAL", sans-serif;
  font-size: 14px;
  color: #000000;
  pointer-events: none;
  transform: translateX(-50%);
}

#pageStep1.step1-edit-mode .belongingInlineValue {
  color: #c3c1b7;
  transition: color 140ms ease-out;
}

#pageStep1.step1-edit-mode .group-2.step1EditFieldActive .belongingInlineValue {
  color: #000000;
}

/* Horizontal divider in the bottom third of emotion map and movement map sections */
#pageStep1 .step1EmotionMap::after {
  content: "";
  position: absolute;
  left: 7px;
  right: -22px;
  top: 100%;
  height: var(--step1-panel-divider-size);
  background: #000000;
  opacity: var(--step1-panel-divider-opacity);
  pointer-events: none;
  z-index: 5;
}

#pageStep1 .step1RoutePreview::after {
  content: "";
  position: absolute;
  /* Same compensation as .step1RoutePreview::before -- keeps this line's
     endpoints at their original absolute position after the frame's
     left/width were changed to enlarge it. */
  left: 7px;
  right: 7px;
  top: 100%;
  height: var(--step1-panel-divider-size);
  background: #000000;
  opacity: var(--step1-panel-divider-opacity);
  pointer-events: none;
  z-index: 5;
}

/* Address field error: red input line when address verification fails. */
#pageStep1 .figma-line-input.address-error {
  border-bottom-color: #ff0000 !important;
}

#pageStep1 .figma-line-input.step1AddressFieldClearing {
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  caret-color: transparent;
  transition: color 120ms ease, -webkit-text-fill-color 120ms ease;
}

/* Hide the dots at the end of address input lines */
#pageStep1 .group-2 > .ellipse-2 {
  display: none;
}

/* Placeholder shown on the City / Street,number input line itself,
   set dynamically (app.js) to "בעברית" or "English" depending on Country. */
#pageStep1 #city.figma-line-input::placeholder,
#pageStep1 #cityState.figma-line-input::placeholder,
#pageStep1 #streetAndNumber.figma-line-input::placeholder {
  font-family: "NarkissBlock-Extralight-TRIAL", sans-serif !important;
  font-weight: 400;
  font-size: 18px;
  color: #c3c1b7;
  text-transform: lowercase;
  opacity: 1;
}

/* Remove last margin for last input group */
#pageStep1 .div-5 > .group-2:last-child {
  margin-bottom: 0;
}

/* Step1 data entry row: keep remote-main five-column geometry while the
   current staged inputs keep their newer element names and validation logic. */
#pageStep1 .div-5 {
  grid-template-columns: repeat(5, 1fr);
  column-gap: 3px;
  align-items: start;
}

#pageStep1 .locationGroup {
  grid-column: 1;
  left: 0 !important;
}

#pageStep1 .cityStateGroup {
  grid-column: 2;
  left: -70px !important;
}

#pageStep1 .streetGroup {
  display: block;
  grid-column: 3;
  left: -140px !important;
}

#pageStep1 .startYearGroup {
  grid-column: 4;
  left: -210px !important;
}

#pageStep1 .belongingInlineGroup {
  grid-column: 5;
  left: -160px !important;
}

#pageStep1 .step1ReadOnlyAddressRow {
  display: none;
}

#pageStep1 .step1ReadOnlyAddressGroup {
  margin-bottom: 0;
}

#pageStep1 .step1ReadOnlyAddressGroup > .text-wrapper-2 {
  color: #c3c1b7;
}

#pageStep1 .step1ReadOnlyAddressGroup > .figma-line-input {
  color: #000000;
  caret-color: transparent;
  pointer-events: none;
}

#pageStep1 .step1ReadOnlyAddressGroup > .figma-line-input:focus {
  outline: none;
}

#pageStep1 .step1ReadOnlyCountryGroup {
  grid-column: 1;
  left: 0 !important;
}

#pageStep1 .step1ReadOnlyStateCityGroup {
  grid-column: 2;
  left: -70px !important;
}

#pageStep1 .step1ReadOnlyStreetGroup {
  grid-column: 3;
  left: -140px !important;
}

#pageStep1.step1-edit-mode.step1-address-locked .div-5 {
  grid-template-columns: repeat(5, 1fr);
  column-gap: 3px;
}

#pageStep1.step1-edit-mode.step1-address-locked .locationGroup,
#pageStep1.step1-edit-mode.step1-address-locked .cityStateGroup,
#pageStep1.step1-edit-mode.step1-address-locked .streetGroup {
  display: none;
}

#pageStep1.step1-edit-mode.step1-address-locked .step1ReadOnlyAddressRow {
  display: contents;
}

#pageStep1.step1-edit-mode.step1-address-locked .step1ReadOnlyCountryGroup {
  grid-column: 1;
}

#pageStep1.step1-edit-mode.step1-address-locked .step1ReadOnlyStateCityGroup {
  grid-column: 2;
}

#pageStep1.step1-edit-mode.step1-address-locked .step1ReadOnlyStreetGroup {
  grid-column: 3;
}

#pageStep1.step1-edit-mode.step1-address-locked .startYearGroup {
  grid-column: 4;
}

#pageStep1.step1-edit-mode.step1-address-locked .belongingInlineGroup {
  grid-column: 5;
}

#pageStep1 .group-2 > .figma-line-input {
  width: 215px !important;
}

#pageStep1 .locationGroup > .figma-line-input,
#pageStep1 .cityStateGroup > .figma-line-input,
#pageStep1 .streetGroup > .figma-line-input,
#pageStep1 .locationSuggestions {
  width: 215px !important;
}

#pageStep1 .belongingInlineGroup .figma-range-inline {
  width: calc(100% - 42px);
  top: 40px;
}

#pageStep1 .belongingInlineGroup .addHomeBtn {
  right: -160px;
}

#pageStep1 .rate-your-sense-of {
  position: relative;
  width: fit-content;
  margin-top: 4px;
  top: 52px;
  font-family: "80-kb-Sharp", Helvetica, sans-serif;
  font-weight: 400;
  color: #000000;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 23px;
}

#pageStep1 .group-3 {
  position: relative;
  width: 455px;
  height: 47px;
  margin-top: 52px;
}

#pageStep1 .text-wrapper-4 {
  position: absolute;
  top: 25px;
  left: 149px;
  font-family: "80-kb-Sharp", Helvetica, sans-serif;
  font-weight: 400;
  color: #000000;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 22px;
  white-space: nowrap;
}

#pageStep1 .text-wrapper-5 {
  position: absolute;
  top: 25px;
  left: 433px;
  font-family: "80-kb-Sharp", Helvetica, sans-serif;
  font-weight: 400;
  color: #000000;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 22px;
  white-space: nowrap;
}

#pageStep1 .text-wrapper-8 {
  position: absolute;
  top: -10px;
  left: 0;
  font-family: "80-kb-Sharp", Helvetica, sans-serif;
  font-weight: 400;
  color: #000000;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 22px;
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
}

#pageStep1 .figma-range {
  position: absolute;
  left: 156px;
  top: 8px;
  width: 285px;
  height: 22px;
  --belonging-thumb-stroke-width: 0.5px;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}

#pageStep1 .figma-range::-webkit-slider-runnable-track {
  height: 1px;
  background: rgba(0, 0, 0, 0.65);
}

#pageStep1 .figma-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #f4f2ea;
  box-sizing: border-box;
  border: var(--belonging-thumb-stroke-width, 0.5px) solid #000000;
  margin-top: -10px;
  transition: border-width 0.3s ease;
}

#pageStep1 .figma-range::-moz-range-track {
  height: 1px;
  background: rgba(0, 0, 0, 0.65);
}

#pageStep1 .figma-range::-moz-range-thumb {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #f4f2ea;
  box-sizing: border-box;
  border: var(--belonging-thumb-stroke-width, 0.5px) solid #000000;
  transition: border-width 0.3s ease;
}

#pageStep1 .div-wrapper {
  display: inline-flex;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
}

/* Align 'Add to list' button height to 'Create life path' */
#pageStep1 .text-wrapper-6 {
  border: 0;
  background: transparent;
  padding: 0;
  position: relative;
  width: 156px;
  height: 32px;
  font-family: "80-kb-SharpBold", Helvetica, sans-serif;
  font-weight: 700;
  color: #000000;
  font-size: var(--lifepath-map-button-font-size);
  letter-spacing: 0;
  line-height: normal;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

#pageStep1 #addBtn:hover:not(:disabled),
#pageStep1 #createLifePathBtn:hover:not(:disabled) {
  color: #ff4800;
}

#pageStep1 #createLifePathBtn {
  display: none !important;
}

/* Emotion map: second panel from left */
#pageStep1 .step1EmotionMap {
  position: absolute;
  left: 560px;
  top: var(--step1-dashboard-top, 285px);
  width: 460px;
  height: var(--step1-dashboard-top-section, 486px);
  border-left: none;
  z-index: 3;
  pointer-events: none;
}

/* Scoped to a short-lived class (see growStep1DashboardAnimated()) so only
   the FINISH-triggered 30% growth animates -- ordinary window resizes stay
   snap-to instead of lagging behind a transition. */
#pageStep1.step1-dashboard-animating .step1EmotionMap,
#pageStep1.step1-dashboard-animating .step1RoutePreview,
#pageStep1.step1-dashboard-animating .step1RingReading,
#pageStep1.step1-dashboard-animating .step1TimeBelonging,
#pageStep1.step1-dashboard-animating .step1HomesList,
#pageStep1.step1-dashboard-animating .step1-right,
#pageStep1.step1-dashboard-animating .step1EmotionMapTitle,
#pageStep1.step1-dashboard-animating .step1MovementMapTitleCenter,
#pageStep1.step1-dashboard-animating .step1HomesListTitle,
#pageStep1.step1-dashboard-animating .step1MoveFrequencyLabel,
#pageStep1.step1-dashboard-animating .step1JourneyTimeline {
  transition: top 0.75s ease, height 0.75s ease;
}

#pageStep1 .step1EmotionSvg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  position: relative;
  top: 0;
}

#pageStep1 .step1EmotionSvg circle,
#pageStep1 .step1EmotionSvg path {
  transition: stroke 0.1s ease, stroke-width 0.6s ease, opacity 0.5s ease;
  pointer-events: visibleStroke;
}

#pageStep1 .step1EmotionMap:empty {
  display: none;
}

#pageStep1 .step1EmotionPlaceholderText {
  position: absolute;
  top: calc(50% - 35px);
  left: 0;
  width: 100%;
  text-align: center;
  transform: translateY(-50%);
  text-transform: lowercase;
  font-family: "NarkissBlock-Extralight-TRIAL", sans-serif;
  font-size: 20px;
  color: #c9c8c1;
  pointer-events: none;
}

#pageStep1.step1-finished-state .step1EmotionPlaceholderText {
  display: none !important;
}

#pageStep1 .text-wrapper-6:disabled,
#pageStep1 .text-wrapper-7:disabled {
  color: #828282;
  opacity: 0.6;
  cursor: not-allowed;
}

/* In address phase: geo map is bottom-left panel. Height shares the same
   dashboard variable as the other finished-state sections, so it grows 30%
   on FINISH exactly like them (see growStep1DashboardAnimated()). */
#pageStep1 .step1-right {
  position: absolute;
  left: 42px;
  top: var(--step1-dashboard-top, 285px);
  width: 518px;
  height: var(--step1-dashboard-height, 810px);
  overflow: hidden;
}

#pageStep1 .step1GeoMap {
  position: absolute;
  top: 30px;
  left: 0;
  width: 100%;
  height: calc(100% - 30px);
  opacity: 1;
  pointer-events: auto;
  background: transparent;
  z-index: 0;
}

#pageStep1 .step1StreetViewHost {
  display: none !important;
  position: absolute;
  top: 30px;
  left: 0;
  width: 100%;
  height: calc(100% - 30px);
  z-index: 4;
  background: #0a1016;
}

#pageStep1 .step1StreetViewHost.hidden {
  display: none;
}

#pageStep1 .step1StreetViewCanvas {
  width: 100%;
  height: 100%;
  display: block;
}

#pageStep1 .step1StreetViewDetails {
  position: absolute;
  top: 10px;
  left: 10px;
  max-width: calc(100% - 74px);
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.45);
  color: #ffffff;
  font-family: "80-kb-Sharp", Helvetica, sans-serif;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  z-index: 6;
}

#pageStep1 .step1StreetViewDetails.hidden {
  display: none;
}

#pageStep1 .step1GeoModeBtn {
  display: none !important;
  position: absolute;
  top: 42px;
  right: 10px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  padding: 0;
  margin: 0;
  cursor: pointer;
  z-index: 8;
  backdrop-filter: blur(2px);
}

#pageStep1 .step1GeoModeBtn .btnImg {
  width: 26px;
  height: 26px;
  display: block;
  object-fit: contain;
  margin: 8px;
}

#pageStep1 .step1GeoModeBtnIcon {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
}

#pageStep1 .step1GeoModeBtnIcon .geoModeIcon {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 26px;
  height: 26px;
  fill: #f4f2ea;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 160ms ease, transform 160ms ease;
}

#pageStep1 .step1GeoModeBtn.map-mode .geoModeIconMap,
#pageStep1 .step1GeoModeBtn.street-mode .geoModeIcon3d {
  opacity: 1;
  transform: scale(1);
}

#pageStep1 .step1GeoMapName {
  display: none !important;
}

#pageStep1 .step1GeoMapName:empty {
  display: none;
}

#pageStep1 .step1GeoMap .lifepathStep2Dot {
  transition: stroke-width 0.3s ease, r 0.3s ease;
}

#pageStep1 .step1GeoMap.step1-geo-dots-pending .lifepathStep1GeoDot {
  opacity: 0 !important;
  visibility: hidden;
}

#pageStep1 .step1GeoMap .leaflet-control-container,
#pageStep1 .step1GeoMap .leaflet-control-attribution {
  display: none !important;
}

#pageStep1 .stepSummary {
  font-family: "80-kb-Sharp", Helvetica, sans-serif;
  font-weight: 400;
  color: #000000;
  font-size: 12px;
  line-height: 18px;
  white-space: pre-line;
}

#pageStep1 .plainList {
  margin: 0 0 0 50px;
  padding-left: 0;
  list-style: none;
  font-family: "80-kb-Sharp", Helvetica, sans-serif;
  font-weight: 400;
  color: #000000;
  font-size: 18px;
  line-height: 22px;

  /* If there are more than ~12 addresses, keep the list height fixed and
     reveal additional entries by scrolling. */
  max-height: 707px; /* (22px * 2 lines + 10px gap) * 13 + 5px */
  overflow-y: auto;
  overscroll-behavior: contain;

  /* Scrollable without showing a scrollbar (still scrolls via trackpad/mouse wheel). */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* old Edge/IE */
}

#pageStep1 #addressList {
  display: none !important;
}

/* WebKit scrollbar hiding (Chrome/Safari). */
#pageStep1 .plainList::-webkit-scrollbar {
  width: 0;
  height: 0;
}

#pageStep1 .step1ListItem {
  padding: 0;
  margin: 0 0 10px;

  /* Use a single grid for both the address row and the belonging row so
     the belonging label can align with the address column. */
  display: grid;
  grid-template-columns: 20px max-content 1fr;
  column-gap: 18px;
  row-gap: 4px;
  align-items: center;
}

#pageStep1 .step1ListItem:first-child {
  margin-top: 5px;
}

#pageStep1 .step1ListRow {
  /* Let row children participate in the parent grid columns. */
  display: contents;
}

#pageStep1 .step1DeleteBtn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  width: 20px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  font-family: "80-kb-Sharp", Helvetica, sans-serif;
  font-weight: 400;
  font-size: var(--lifepath-map-button-font-size);
  line-height: 1;
  color: #000000;
}

#pageStep1 .step1DeleteBtn:hover {
  color: #ff4800;
}

#pageStep1 .step1ListHome {
  font-family: "80-kb-SharpBold", Helvetica, sans-serif;
  font-weight: 700;
  margin-top: 5px;
  white-space: nowrap;
}

#pageStep1 .step1ListAddress {
  font-family: "80-kb-Sharp", Helvetica, sans-serif;
  font-weight: 400;
  min-width: 0;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

#pageStep1 .step1ListBelonging {
  font-family: "80-kb-Sharp", "80kb Sharp", Helvetica, sans-serif;
  font-weight: 400;

  /* Align belonging text with the address column (3rd grid column). */
  grid-column: 3;
  grid-row: 2;
  margin-left: 0;
  margin-top: -5px;
  text-align: left;
}


#pageStep1 .status {
  margin-top: 0;
  font-family: "80-kb-Sharp", Helvetica, sans-serif;
  font-weight: 400;
  color: #000000;
  font-size: 12px;
}

.address-status {
  font-family: "80-kb-Sharp", Helvetica, sans-serif;
  font-weight: 400;
  color: #000000;
  font-size: 12px;
  margin-top: 4px;
  min-height: 16px;
}

#pageManagement {
  position: relative;
  height: 100vh;
  background: #f4f2ea;
  padding: 34px 36px 30px;
}

#pageManagement .topbar {
  position: absolute;
  top: 34px;
  right: 36px;
  z-index: 5;
}

.managementBody {
  max-width: 1220px;
  margin: 110px auto 0;
  border: 1px solid #d4d2c7;
  background: #f7f5ed;
  padding: 24px;
}

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

.managementTitle {
  margin: 0;
  font-family: "NarkissBlock-Light-TRIAL", sans-serif;
  font-size: 28px;
  font-weight: 400;
  color: #000000;
}

.managementStatus {
  min-height: 20px;
  font-family: "80-kb-Sharp", Helvetica, sans-serif;
  font-size: 13px;
  color: #1b6b3f;
}

.managementStatus.isError {
  color: #9c2400;
}

.managementActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
  margin-bottom: 16px;
}

.managementSortLabel {
  align-self: center;
  font-family: "80-kb-Sharp", Helvetica, sans-serif;
  font-size: 13px;
  color: #000000;
  margin-left: 8px;
}

.managementSortSelect {
  border: 1px solid #000000;
  background: #f4f2ea;
  color: #000000;
  padding: 7px 10px;
  min-width: 140px;
}

.managementBtn {
  border: 1px solid #000000;
  background: #f4f2ea;
  color: #000000;
  padding: 8px 12px;
  cursor: pointer;
}

.managementDangerBtn,
.managementDeleteOneBtn {
  border-color: #7a1e00;
  color: #7a1e00;
  background: #fff7f3;
}

.managementEmpty {
  margin: 14px 0;
  font-family: "80-kb-Sharp", Helvetica, sans-serif;
  font-size: 14px;
  color: #666156;
}

.managementTableWrap {
  max-height: 58vh;
  overflow: auto;
  border: 1px solid #ddd9cd;
}

.managementTable {
  width: 100%;
  border-collapse: collapse;
  font-family: "80-kb-Sharp", Helvetica, sans-serif;
  font-size: 13px;
}

.managementTable th,
.managementTable td {
  border-bottom: 1px solid #e2dfd4;
  text-align: left;
  padding: 8px;
  color: #000000;
}

.managementTable th {
  position: sticky;
  top: 0;
  background: #efece2;
  z-index: 1;
}

@media (max-width: 900px) {
  .managementBody {
    margin-top: 100px;
    padding: 16px;
  }

  .managementTable {
    font-size: 12px;
  }
}