/* ================================================================
   Legacy viewer defaults
   ---------------------------------------------------------------
   This file now preserves the original baseline styling used by the
   FastAPI viewer while the modern fluidXlab theme lives in theme.css.
   Keep adjustments here minimal to avoid merge conflicts downstream.
   ================================================================ */

/* =========================
   Global
   ========================= */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--fx-bg);
  color: var(--fx-text);
  font-family: var(--fx-font, 'Inter', 'Segoe UI', Tahoma, sans-serif);
}

body.viewer-app {
  overflow: hidden;
}

#svg-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fx-surface-strong);
  cursor: grab;
  touch-action: none;
}

#svg-container.grabbing {
  cursor: grabbing;
}

svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

button {
  font-family: inherit;
}

.legend-block {
  display: grid;
  gap: 0.35rem;
}

.legend-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  padding: 2rem;
}
.card {
  background: var(--fx-surface);
  border-radius: 12px;
  padding: 1rem;
  color: var(--fx-text);
  text-align: center;
  box-shadow: 0 12px 28px rgba(17, 19, 23, 0.12);
  border: 1px solid var(--fx-border-soft);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(17, 19, 23, 0.18);
  border-color: rgba(210, 35, 42, 0.35);
}
.card img {
  max-width: 100%;
  border-radius: 8px;
  margin-bottom: 0.8rem;
}
.card h3 { margin: 0.5rem 0; font-size: 1.1rem; }

/* Utility */
.hidden { display: none !important; }

/* Hide other overlays; leave metadata controllable by JS */
#legend-box,
#description-box,
#zoom-level {
  display: none;
}

/* Safe-area + non-overlap tuning */
:root{
  --safe: env(safe-area-inset);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);

  --toolbar-left: 16px;    /* left margin for toolbar */
  --toolbar-width: 44px;   /* width of a toolbar button */
  --toolbar-gap: 10px;
  --toolbar-pad: calc(var(--toolbar-left) + var(--toolbar-width) + 12px);
}

/* Metadata (top-right) never covers center bottom */
#metadata-box {
  max-width: min(92vw, 360px);
  right: max(16px, var(--safe-r));
  top: max(16px, var(--safe-t));
  z-index: 1002;
}

/* Legend sits below metadata */
#legend-box {
  right: max(16px, var(--safe-r));
  top: calc(max(16px, var(--safe-t)) + 76px);
  max-width: min(92vw, 300px);
  z-index: 1001;
}

/* Description drawer on mobile becomes bottom sheet */
@media (max-width: 820px) {
  #description-box {
    width: 100%;
    max-width: none;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    height: min(55vh, 520px);
    border-radius: 12px 12px 0 0;
    padding-bottom: calc(1rem + var(--safe-b));
    z-index: 1003;
  }
}

/* Scale bar centered bottom, lifted if description is open */
#scale-bar {
  display: none !important;
  pointer-events: none;
}

/* Zoom badge just above the scale */
#zoom-level {
  left: 50%;
  transform: translate(-50%, -140%);
  bottom: calc(max(16px, var(--safe-b)) + 40px);
  z-index: 1002;
}

/* When description panel is visible, push upwards a bit more */
body.info-open #description-box:not(.hidden) ~ #scale-bar,
body.info-open #description-box:not(.hidden) ~ #zoom-level {
  /* The sibling selector may not catch absolute nodes; use fixed z-index ordering instead. */
}

/* Toolbar stays left; ensure panels don't overlap it */
#toolbar {
  left: max(12px, var(--safe-l));
}
@media (max-width: 900px) {
  #toolbar { left: max(8px, var(--safe-l)); }
}

/* Ensure panels ignore pointer when hidden (just in case) */
.hidden { display: none !important; }



#export-cad {
  display: none !important;
}

/* Measure toggle: ON = red, OFF = dark */
#measure-toggle[aria-pressed="true"]{
  background:#d2232a !important;
  border-color:#d2232a !important;
  color:#fff !important;
}
#measure-toggle[aria-pressed="false"]{
  background:#1d2124 !important;
  border-color:#1d2124 !important;
  color:#fff !important;
}

.legend-entry,
.legend-list .legend-entry {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.legend-entry::before,
.legend-list .legend-entry::before,
.legend-swatch {
  content: '';
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid rgba(15, 23, 42, 0.18);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.4);
  background: var(--legend-color, #94a3b8);
}

/* --------------------------------------------------
   Configurable media slots
-------------------------------------------------- */
.page-media {
  margin: clamp(2rem, 5vw, 3.5rem) 0;
}

.page-media--injected:first-child {
  margin-top: clamp(2.5rem, 6vw, 4rem);
}

.page-media__inner {
  position: relative;
}

.media-slot {
  position: relative;
  display: grid;
  place-items: center;
  gap: 1rem;
  width: 100%;
  border-radius: clamp(22px, 4vw, 30px);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border: 1px dashed rgba(210, 35, 42, 0.28);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(210, 35, 42, 0.08));
  color: rgba(147, 32, 38, 0.8);
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.media-slot--active {
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
  color: inherit;
}

.media-slot__placeholder {
  display: grid;
  gap: 0.75rem;
  place-items: center;
  text-align: center;
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(113, 30, 35, 0.72);
}

.media-slot__label {
  display: block;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  text-transform: none;
}

.media-slot__placeholder code {
  background: rgba(210, 35, 42, 0.12);
  padding: 0.35rem 0.55rem;
  border-radius: 0.45rem;
  font-size: 0.78rem;
}

.media-slot__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: rgba(210, 35, 42, 0.12);
  color: rgba(147, 32, 38, 0.9);
}

.media-slot__icon svg {
  width: 32px;
  height: 32px;
}

.media-slot__content {
  display: grid;
  gap: 0.9rem;
  width: 100%;
}

.media-slot__content video,
.media-slot__content img {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: clamp(18px, 3vw, 24px);
  box-shadow: none;
}

.media-slot__content video {
  background: #000;
}

.media-slot__content figure {
  margin: 0;
}

.media-slot__content figcaption,
.media-slot__content .application-media__caption {
  margin: 0;
  font-size: 0.88rem;
  color: rgba(31, 35, 41, 0.72);
}

.page-media--injected:not(.page-media--has-content) {
  display: none;
}

.application-media {
  display: grid;
  gap: 0.6rem;
  border-radius: 16px;
  overflow: hidden;
  border: none;
  background: none;
}

.application-media--image img,
.application-media--video video {
  width: 100%;
  height: auto;
  display: block;
}

.application-media__caption {
  margin: 0;
  padding: 0 1rem 1rem;
  font-size: 0.85rem;
  color: rgba(31, 35, 41, 0.68);
}

/* --------------------------------------------------
   Auth affordances
-------------------------------------------------- */
.site-nav__link.is-auth-locked {
  opacity: 0.78;
}

.site-nav__link.is-auth-locked > .site-nav__label::after {
  content: '🔒';
  margin-left: 0.35rem;
  font-size: 0.85em;
}

.site-footer a.is-auth-locked::after {
  content: ' \1F512';
  margin-left: 0.25rem;
  font-size: 0.85em;
}