/* App-specific styles layered on top of sparky.css.
   Sparky ships with Inter; the design calls for DM Sans, so override the token. */
:root { --sp-font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

html, body { background: #F5F7F7; font-family: var(--sp-font-sans); }
* { box-sizing: border-box; }

.app-shell { min-height: 100vh; display: flex; flex-direction: column; }

/* ——— Header ——— */
.app-header {
  background: #fff; border-bottom: 1px solid var(--sp-grey-200);
  padding: 0 32px; height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 5;
}
.header-left { display: flex; align-items: center; gap: 14px; }
.logo-lockup { display: flex; align-items: center; text-decoration: none; }
.logo-svg { height: 22px; width: auto; display: block; }
.header-divider { width: 1px; height: 24px; background: var(--sp-grey-200); }
.header-product { font-size: 15px; font-weight: 600; color: var(--sp-grey-600); }
.header-right { display: flex; align-items: center; gap: 12px; }

/* ——— Layout ——— */
.app-main { flex: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding: 28px 32px 64px; }
.title-block {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; margin-bottom: 22px; flex-wrap: wrap;
}
.title-copy { max-width: 600px; }
.app-grid { display: grid; grid-template-columns: 380px 1fr; gap: 24px; align-items: start; }
.right-col { display: flex; flex-direction: column; gap: 24px; }

@media (max-width: 880px) {
  .app-grid { grid-template-columns: 1fr; }
  .app-grid > section:first-child { position: static !important; }
}

/* Panel header icon tile (navy-50) */
.icon-tile {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--sp-navy-50); color: var(--sp-navy-500);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* ——— Threshold sliders (custom range styling from the prototype) ——— */
.thr-val { font-weight: 700; color: var(--sp-brand-400); font-variant-numeric: tabular-nums; }
.lx-range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px;
  border-radius: 3px; background: var(--sp-grey-200); outline: none;
  margin: 12px 0 6px; cursor: pointer;
}
.lx-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px;
  border-radius: 50%; background: var(--sp-brand-400); border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(13,43,65,.35); cursor: pointer;
}
.lx-range::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; background: var(--sp-brand-400);
  border: 3px solid #fff; box-shadow: 0 1px 4px rgba(13,43,65,.35); cursor: pointer;
}

/* ——— Drop zone ——— */
.lx-drop {
  border: 2px dashed var(--sp-grey-300); border-radius: 12px;
  padding: 44px 24px; text-align: center; cursor: pointer;
  transition: border-color .15s, background .15s; background: var(--sp-navy-50);
}
.lx-drop:hover { border-color: var(--sp-brand-400); background: #fff; }
.lx-drop.drag { border-color: var(--sp-brand-400); background: color-mix(in srgb, var(--sp-brand-400) 7%, white); }

/* ——— Scrollable regions ——— */
.lx-scroll { overflow: auto; }
.lx-scroll::-webkit-scrollbar { height: 9px; width: 9px; }
.lx-scroll::-webkit-scrollbar-thumb { background: var(--sp-grey-300); border-radius: 6px; }