/* Other worlds (src/skins/worldcontext.js) and reader-supplied worlds (src/skins/customworlds.js).
   Loaded after css/geology.css and before css/immersive.css. */

/* ---------------------------------------------------------------------------
   World context: a non-Earth skin is on, so every Earth-specific control goes away.
   The map itself (sphere, graticule, zoom, projections, nav lock, latitude ladder,
   Level, themes, Wall, Split, immersive mode, the projection card) is untouched.
   --------------------------------------------------------------------------- */
:root.world-context #timeline { display: none !important; }

/* the country search box has nothing to search on another planet */
:root.world-context #search { display: none !important; }

/* the day/night terminator is HIDDEN, not faked — see the TODO in src/geo/terminator.js */
:root.world-context #terminator-clock { display: none !important; }

/* sea level, true size and the terminator are all Earth measurements */
:root.world-context #extras-rail [data-extra="sealevel"],
:root.world-context #extras-rail [data-extra="truesize"],
:root.world-context #extras-rail [data-extra="terminator"] { display: none; }
:root.world-context #sealevel-slot,
:root.world-context #truesize,
:root.world-context .empires,
:root.world-context .dn-sheet,
:root.world-context .dn-strip,
:root.world-context .nl-card,
:root.world-context .nl-prov { display: none !important; }

/* a quiet standing note so the missing furniture reads as deliberate, not broken */
#world-note {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 6; display: none; align-items: center; gap: 8px;
  padding: 5px 11px; border-radius: 999px;
  font-size: 11.5px; line-height: 1.25; color: var(--ink-muted);
  pointer-events: none;
}
:root.world-context #world-note { display: inline-flex; }
:root.chrome-hidden #world-note, :root.immersive #world-note { display: none !important; }
#world-note .wn-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
#world-note b { color: var(--ink); font-weight: 600; }
/* On a phone the bottom strip is already the skin rail, the timeline and the info-card peek; a fourth floating
   line would sit on top of the card. The rail's own selected tile ("Other worlds") says where you are. */
@media (max-width: 720px) {
  :root.world-context #world-note { display: none; }
}

/* ---------------------------------------------------------------------------
   Bring your own world
   --------------------------------------------------------------------------- */
.skin.skin-add { border-style: dashed; }
.skin.skin-add .thumb { display: grid; place-items: center; color: var(--ink-muted); }
.skin.skin-add .thumb svg { width: 26px; height: 26px; }
.skin.skin-add:hover .thumb, .skin.skin-add:focus-visible .thumb { color: var(--accent); }

/* the manage sheet */
#byow-sheet {
  position: fixed; z-index: 60; inset: auto auto auto auto;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(460px, calc(100vw - 24px)); max-height: min(620px, calc(100vh - 48px));
  display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 14px;
  border-radius: 14px; overflow: auto;
}
#byow-backdrop {
  position: fixed; inset: 0; z-index: 59; background: color-mix(in srgb, #000 46%, transparent);
  backdrop-filter: blur(1.5px);
}
#byow-sheet h2 { margin: 0; font-family: var(--font-display, inherit); font-size: 17px; }
#byow-sheet p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-muted); }
#byow-sheet .byow-head { display: flex; align-items: flex-start; gap: 10px; }
#byow-sheet .byow-head .grow { flex: 1; min-width: 0; }

.byow-privacy {
  display: flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--ink); font-size: 12px; line-height: 1.4;
}
.byow-privacy svg { flex: none; color: var(--accent); }

.byow-drop {
  display: grid; place-items: center; gap: 6px; padding: 22px 14px; text-align: center;
  border: 1.5px dashed color-mix(in srgb, var(--ink) 28%, transparent); border-radius: 10px;
  color: var(--ink-muted); font-size: 12.5px; cursor: pointer;
  transition: border-color var(--t-fast), background-color var(--t-fast), color var(--t-fast);
}
.byow-drop:hover, .byow-drop:focus-visible, .byow-drop.over {
  border-color: var(--accent); color: var(--ink);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.byow-drop strong { color: var(--ink); font-weight: 600; font-size: 13.5px; }
.byow-dropwrap { position: relative; display: grid; }
.byow-dropwrap input[type="file"] { position: absolute; inset: auto auto 0 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.byow-drop.busy { opacity: .6; cursor: progress; }

.byow-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.byow-item { display: flex; align-items: center; gap: 10px; padding: 7px; border-radius: 9px; background: color-mix(in srgb, var(--ink) 5%, transparent); }
.byow-item img { width: 64px; height: 32px; border-radius: 4px; object-fit: cover; flex: none; background: #000; }
.byow-item .grow { flex: 1; min-width: 0; }
.byow-item input.byow-name {
  width: 100%; padding: 3px 6px; border-radius: 6px; font: inherit; font-size: 13px; color: var(--ink);
  background: transparent; border: 1px solid transparent;
}
.byow-item input.byow-name:hover { border-color: color-mix(in srgb, var(--ink) 18%, transparent); }
.byow-item input.byow-name:focus { outline: none; border-color: var(--accent); background: var(--panel-solid); }
.byow-item .byow-meta { font-size: 11px; color: var(--ink-muted); padding-left: 7px; }
.byow-item .byow-meta .warn { color: var(--warn, #e0a355); }
.byow-actions { display: flex; gap: 6px; flex: none; }
.byow-foot { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.byow-empty { font-size: 12.5px; color: var(--ink-muted); }

/* the aspect-ratio question and every other decision this feature has to ask */
.byow-ask { display: flex; flex-direction: column; gap: 10px; padding: 11px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 6%, transparent); }
.byow-ask .byow-ask-title { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.byow-ask .byow-ask-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* dropping an image anywhere on the map */
:root.byow-dragging #stage::after {
  content: 'Drop an equirectangular image to make it a world';
  position: absolute; inset: 10px; z-index: 4; display: grid; place-items: center;
  border: 2px dashed var(--accent); border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--ink); font: 600 15px/1.4 var(--font-ui); text-align: center; padding: 20px;
  pointer-events: none;
}